/* kyzen-v2.css: Project Kyzen case study, editorial art direction (v16). Loaded only on /work/kyzen/.
   System: 12-col grid, index numerals + mono labels vs condensed display; hairlines, crop marks and grain as print nods;
   ink / cream / cyan + one Kyzen accent (HUD magenta). html.kz-fx = desktop + motion; html.kz-static = mobile / reduced. */
@view-transition{navigation:auto}
/* overlay -> page hand-off: hero geometry now matches the overlay pixel-for-pixel, so the old snapshot holds still
   underneath while the new page fades in over it (covers hero-art decode; no double image) */
::view-transition-old(root){animation:none;opacity:1}
::view-transition-new(root){animation:kz-vt-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes kz-vt-in{from{opacity:0}to{opacity:1}}
.csx-root{--kz-m:#ff2e7e;--ink-2:#55605a;--hair:rgba(23,33,29,.18);--hair-l:rgba(251,248,240,.2);--gap:clamp(16px,1.8vw,28px);
 --sec:clamp(120px,13vw,220px);--ease:cubic-bezier(.16,1,.3,1);
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.kz{position:relative;overflow-x:clip}
.kz::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background-image:var(--grain);opacity:.09;mix-blend-mode:multiply}
.kz-body{max-width:1360px;margin:0 auto;padding:0 var(--gut) var(--s-7,48px)}
.kz-crumbs{padding-top:28px}
.kz img,.kz video{display:block;max-width:100%;height:auto}
.kz-body p,.kz-body li{max-width:64ch}

/* ---------- section scaffold: index column + content columns ---------- */
.kz-sec{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin:var(--sec) 0 0}
.kz-sec>*{grid-column:4/-1;min-width:0}
.kz-eyebrow{grid-column:1/4!important;grid-row:1/span 2;align-self:start;margin:0;padding-top:14px;border-top:1px solid currentColor;display:flex;flex-direction:column;gap:14px}
.kz-idx{font:400 clamp(72px,7.4vw,124px)/.74 var(--display);letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.2px var(--fg,var(--ink))}
.kz-eyebrow>span:last-child{font:11px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.csx-root .kz-h2,.csx-root .kz-h3{border:0;padding:0}
.csx-root .kz-h2{margin:-.04em 0 clamp(36px,4vw,64px);font:400 clamp(56px,8vw,136px)/.82 var(--display);letter-spacing:-.005em;text-transform:uppercase;max-width:12ch;text-wrap:balance}
.csx-root .kz-h3{margin:clamp(48px,5vw,80px) 0 18px;font:400 clamp(30px,3vw,48px)/.88 var(--display);text-transform:uppercase;letter-spacing:.01em}
.kz-lede{grid-column:4/12;font:500 clamp(20px,1.65vw,26px)/1.42 var(--text);letter-spacing:-.005em;margin:0 0 clamp(40px,5vw,72px)}
.kz-label{font:11px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.kz figcaption{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:14px 0 0;padding-top:10px;border-top:1px solid var(--hair);font:14px/1.45 var(--text);color:var(--ink-2);max-width:none}
.kz figcaption::before{content:attr(data-fig);font:11px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.kz-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,72px);margin-top:clamp(48px,5vw,80px)}
.kz-cols p{font-size:18px;line-height:1.62}
/* full-bleed colour field for a section */
.kz-field{--fg:var(--cream);padding:clamp(96px,10vw,160px) 0;background:var(--ink);color:var(--cream);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
.kz-bleed{grid-column:1/-1!important;margin-inline:calc(50% - 50vw)}
/* crop marks (print nod) on framed media */
.kz-crop{position:relative}
.kz-crop::before,.kz-crop::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none;border:0 solid currentColor;opacity:.7}
.kz-crop::before{top:-10px;left:-10px;border-top-width:1px;border-left-width:1px}
.kz-crop::after{bottom:-10px;right:-10px;border-bottom-width:1px;border-right-width:1px}
/* reveal helpers (JS sets the start state in kz-fx only, so no-JS content is never hidden) */
.kz-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em;margin-bottom:-.04em}.kz-w>span{display:inline-block}

/* ---------- 0. masked hero ---------- */
.kz-stage{position:relative}.kz-stage__pin{position:relative}
.kz-mask{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0}
.kz-mask__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.kz-mask__tag{position:absolute;left:clamp(24px,4vw,64px);bottom:clamp(28px,6vh,64px);margin:0;padding:0;color:var(--cream);font:400 clamp(56px,7.4vw,128px)/.82 var(--display);text-transform:uppercase;max-width:9ch;opacity:0;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.kz-mask__tag span{display:block;font:11px/1.3 var(--mono);letter-spacing:.2em;margin-bottom:14px;color:var(--cream);text-shadow:none}
html.kz-fx .kz-stage{height:calc(var(--hh) + 120vh)}
html.kz-fx .kz-stage__pin{position:sticky;top:0;height:var(--hh);overflow:hidden}
html.kz-fx .kz-mask{opacity:1}
html.kz-static .kz-mask{display:none}

/* ---------- 1. premise vs reality: split colour field, ink wipes across on scroll ---------- */
.kz-pr .kz-h2{max-width:none}
.kz-pr__stage{grid-column:1/-1!important;margin-inline:calc(50% - 50vw);position:relative}
.kz-pr__pin{position:relative;height:max(640px,100vh);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.kz-pr__half{position:relative;padding:clamp(88px,10vh,120px) clamp(24px,3.6vw,64px) 0;display:flex;flex-direction:column;min-width:0}
.kz-pr__half--b{background:var(--ink);color:var(--cream)}
.kz-pr__bar{display:flex;justify-content:space-between;gap:16px;padding-top:12px;border-top:1px solid currentColor;font:11px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.kz-pr__claim{margin:28px 0 0;font:500 clamp(20px,1.75vw,28px)/1.28 var(--text);letter-spacing:-.01em;max-width:21ch}
.kz-pr__fig{position:relative;z-index:2;margin:clamp(24px,3.4vh,40px) 0 0;width:min(74%,520px)}
.kz-pr__half--b .kz-pr__fig{margin-left:auto}
.kz-pr__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:left center;background:#e9e7df}
.kz-pr__half--a .kz-pr__fig img{filter:grayscale(1) contrast(1.08)}
.kz-pr__half--b figcaption{color:rgba(251,248,240,.7);border-color:var(--hair-l)}.kz-pr__half--b figcaption::before{color:var(--blue)}
.kz-pr__word{position:absolute;bottom:-.075em;margin:0;font:400 min(25vw,40vh)/.78 var(--display);letter-spacing:-.015em;white-space:nowrap;pointer-events:none}
.kz-pr__half--a .kz-pr__word{left:clamp(16px,2.6vw,48px);color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.kz-pr__half--b .kz-pr__word{right:clamp(16px,2.6vw,48px);color:var(--blue)}
.kz-pr__seam{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--blue);z-index:4;pointer-events:none}
.kz-pr__seam span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;background:var(--blue);color:var(--ink);padding:7px 14px;font:11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.kz-pr__half::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;mix-blend-mode:multiply;pointer-events:none}
.kz-pr__after{grid-column:4/12;margin:clamp(48px,6vw,96px) 0 0}
.kz-pr__after p{font:500 clamp(20px,1.65vw,26px)/1.42 var(--text);margin:0}
/* desktop motion: reality is a full-bleed layer whose clip wipes in from the right */
html.kz-fx .kz-pr__stage{height:230vh}
html.kz-fx .kz-pr__pin{position:sticky;top:0}
html.kz-fx .kz-pr__half--b{position:absolute;inset:0;padding-left:calc(50% + clamp(24px,3.6vw,64px));clip-path:inset(0 0 0 78%)}
html.kz-fx .kz-pr__half--a{grid-column:1/2}
html.kz-fx .kz-pr__seam{left:78%}

/* ---------- 2. role: ledger meta + narrative + achievements ---------- */
.kz-meta{grid-column:1/-1!important;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 clamp(56px,6vw,96px);padding:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.kz-meta>div{padding:16px 18px 20px 0;margin:0}
.kz-meta>div+div{border-left:1px solid var(--hair);padding-left:18px}
.kz-meta dt{margin:0 0 10px;font:11px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.kz-meta dd{margin:0;font:400 clamp(20px,1.7vw,28px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.kz-role__grid{grid-column:1/-1!important;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.kz-role__copy{grid-column:4/9}
.kz-role__copy p{font:500 clamp(19px,1.5vw,23px)/1.5 var(--text)}
.csx-root .kz-role .kz-h2{font-size:clamp(48px,6vw,96px)}
.csx-root .kz-tldr{grid-column:9/13;display:block;margin:12px 0 0;padding:0;background:none;border:0;border-top:2px solid var(--ink);box-shadow:none;transform:none}
.csx-root .kz-tldr h2{margin:0;padding:12px 0 18px;font:11px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.csx-root .kz-tldr li{padding:14px 0 14px 44px;border-top:1px solid var(--hair);font:500 16px/1.5 var(--text)}
.csx-root .kz-tldr li:first-child{border-top:1px solid var(--hair);padding-top:14px}
.csx-root .kz-tldr li::before,.csx-root .kz-tldr li:first-child::before{top:17px;color:var(--ink);font-size:11px}

/* ---------- 3. process: ink field, pinned map ---------- */
.kz-process.kz-field{color:var(--cream)}
.kz-process .kz-lede{color:rgba(251,248,240,.86)}
.kz-map{grid-column:1/-1!important;position:relative;margin:0 calc(var(--gut) * -1)}
.kz-map__pin{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);gap:clamp(32px,4vw,72px);align-items:center;padding:24px var(--gut);min-height:600px}
html.kz-fx .kz-map{height:280vh}
html.kz-fx .kz-map__pin{position:sticky;top:max(72px,7vh);height:calc(100vh - max(72px,7vh) - 16px);overflow:hidden}
.kz-map__route{position:relative;height:100%;min-height:560px}
.kz-map__svg{position:absolute;inset:0;width:100%;height:100%}
.kz-map__ghost{fill:none;stroke:rgba(251,248,240,.22);stroke-width:1.5;stroke-dasharray:1 7;stroke-linecap:round}
.kz-map__path{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round}
.kz-map__token{fill:var(--kz-m);stroke:var(--ink);stroke-width:3}
.kz-nodes{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.kz-node{position:absolute;width:min(230px,50%);padding:12px 14px 14px;background:rgba(23,33,29,.92);border:1px solid var(--hair-l);font:400 14px/1.4 var(--text);color:rgba(251,248,240,.72);transition:border-color .4s,color .4s,background .4s}
.kz-node b{display:block;font:400 26px/.9 var(--display);text-transform:uppercase;color:var(--cream);margin:8px 0 6px}
.kz-node__n{font:11px/1 var(--mono);letter-spacing:.18em;color:rgba(251,248,240,.55)}
.kz-node span:last-child{display:block}
.kz-node.is-on{border-color:var(--blue);color:var(--cream)}.kz-node.is-on .kz-node__n{color:var(--blue)}
.kz-node[data-node=wallet]{left:0;top:0}.kz-node[data-node=avatar]{right:0;top:20%}.kz-node[data-node=booth]{left:0;top:42%}
.kz-node[data-node=mint]{right:0;top:63%}.kz-node[data-node=arena]{left:6%;bottom:0}
.kz-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none;counter-reset:pg}
.kz-pgrid__item{counter-increment:pg;position:relative}
.kz-pgrid__item img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:left center;background:#e9e7df;outline:1px solid var(--hair-l);outline-offset:5px}
.kz-pgrid__item::after{content:"3." counter(pg);display:block;margin-top:12px;font:10px/1 var(--mono);letter-spacing:.18em;color:rgba(251,248,240,.55)}
.kz-pgrid__item:nth-child(3n+2){transform:translateY(56px)}
.kz-process .kz-h3{color:var(--cream)}
.kz-process .kz-cols p{color:rgba(251,248,240,.8)}
.kz-loop{counter-reset:k;list-style:none;padding:0;margin:20px 0 24px;border-top:1px solid var(--hair-l)}
.kz-loop li{counter-increment:k;padding:11px 0 11px 48px;position:relative;border-bottom:1px solid var(--hair-l);font:400 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--cream)}
.kz-loop li::before{content:counter(k,decimal-leading-zero);position:absolute;left:0;top:14px;font:11px/1 var(--mono);letter-spacing:.14em;color:var(--blue)}

/* ---------- 4. before / after ---------- */
.kz-xray{grid-column:1/-1!important;margin:0}
.kz-xray__stage{position:relative;overflow:hidden;background:#111;outline:1px solid var(--ink);outline-offset:12px;--x:-999px;--y:-999px;--r:0px;touch-action:pan-y}
.kz-xray__after{width:100%}
.kz-xray__before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 -webkit-mask-image:linear-gradient(90deg,#000 var(--split),transparent var(--split)),radial-gradient(circle var(--r) at var(--x) var(--y),#000 55%,transparent 100%),radial-gradient(circle calc(var(--r)*.7) at var(--x2,-999px) var(--y2,-999px),#000 40%,transparent 100%),radial-gradient(circle calc(var(--r)*.45) at var(--x3,-999px) var(--y3,-999px),#000 30%,transparent 100%);
 mask-image:linear-gradient(90deg,#000 var(--split),transparent var(--split)),radial-gradient(circle var(--r) at var(--x) var(--y),#000 55%,transparent 100%),radial-gradient(circle calc(var(--r)*.7) at var(--x2,-999px) var(--y2,-999px),#000 40%,transparent 100%),radial-gradient(circle calc(var(--r)*.45) at var(--x3,-999px) var(--y3,-999px),#000 30%,transparent 100%)}
.kz-xray__line{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:var(--blue)}
.kz-xray__line::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid var(--blue);background:rgba(23,33,29,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304b9d8' stroke-width='1.5'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat}
.kz-xray__tag{position:absolute;top:16px;padding:7px 10px;font:10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:var(--cream)}
.kz-xray__tag--before{left:16px}.kz-xray__tag--after{right:16px;background:var(--blue);color:var(--ink)}
.kz-xray__ctl{display:flex;align-items:center;gap:18px;margin:36px 0 0;font:11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.kz-xray__range{flex:1;accent-color:var(--ink);height:28px}
.kz-xray__range:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.kz-xray figcaption{margin-top:20px}

/* ---------- 5. variants ---------- */
.kz-flow{grid-column:1/-1!important;position:relative;height:400px;margin:0 calc(50% - 50vw) clamp(24px,3vw,48px);overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.kz-flow__svg{position:absolute;inset:0;width:100%;height:100%}
.kz-flow__path{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:1 6;opacity:.5}
.kz-badges{list-style:none;margin:0;padding:48px var(--gut);display:flex;justify-content:center;gap:24px;flex-wrap:wrap;position:relative}
.kz-badge figure{margin:0;width:150px;text-align:center}
.kz-badge img{width:132px;height:132px;object-fit:contain;margin:0 auto;padding:10px;background:var(--ink);border-radius:2px}
.kz-badge figcaption{display:block;border:0;padding:0;margin-top:10px;font:10px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-align:center}
.kz-badge figcaption::before{content:none}
html.kz-fx .kz-badges{position:absolute;inset:0;padding:0;display:block}
html.kz-fx .kz-badge{position:absolute;left:0;top:0;will-change:transform}
.kz-crates{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);list-style:none;margin:28px 0 clamp(56px,6vw,96px);padding:0}
.kz-crate figure{margin:0}.kz-crate img{width:100%}
.kz-fig{margin:0}
.kz-var>.kz-fig{grid-column:1/11}

/* ---------- 6. stats: cyan field, ledger rows of display numerals ---------- */
.kz-stats.kz-field{--fg:var(--ink);background:var(--blue);box-shadow:0 0 0 100vmax var(--blue);color:var(--ink)}
.kz-stats .kz-eyebrow{color:var(--ink)}
.kz-statband{grid-column:1/-1!important;list-style:none;margin:0 0 clamp(56px,6vw,96px);padding:0;border-top:2px solid var(--ink)}
.kz-stat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding:22px 0 26px;border-bottom:1px solid rgba(23,33,29,.35);max-width:none}
.csx-root .kz-stat__v{grid-column:1/9;font:400 clamp(96px,12.4vw,210px)/.76 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.csx-root .kz-stat:nth-child(3) .kz-stat__v{font-size:clamp(72px,9vw,156px)}
.csx-root .kz-stat__l{grid-column:9/13;font:400 clamp(24px,2.3vw,38px)/.9 var(--display);text-transform:uppercase}
.kz-stat small{grid-column:9/13;margin-top:10px;font:10px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.kz-stats>p{grid-column:4/11;font-size:19px}
.kz-quote{grid-column:4/12!important;position:relative;margin:clamp(48px,5vw,80px) 0 0;padding:0;border:0;font:500 clamp(26px,2.6vw,42px)/1.18 var(--text);letter-spacing:-.015em;max-width:none}
.kz-quote::before{content:"“";position:absolute;left:-.6em;top:-.12em;font:400 2.6em/1 var(--display);color:var(--ink)}
.kz-quote p{margin:0;max-width:26ch}

/* ---------- 7. gallery: asymmetric editorial grid ---------- */
.kz-qs{padding:0;list-style:none;margin:16px 0 0;border-top:1px solid var(--hair)}.kz-qs li{padding:12px 0;border-bottom:1px solid var(--hair);font-size:17px}
.kz-qs b{display:block;font:400 22px/1 var(--display);text-transform:uppercase;margin-bottom:4px}
.kz-gal__grid{grid-column:1/-1!important;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(56px,6vw,96px) var(--gap);list-style:none;margin:clamp(72px,8vw,128px) 0 clamp(48px,5vw,80px);padding:0}
.kz-gal__item{grid-column:1/8}
.kz-gal__item:nth-child(2){grid-column:8/13;margin-top:30%}
.kz-gal__item:nth-child(3){grid-column:3/12}
.kz-gal__item:nth-child(4){grid-column:1/6}
.kz-gal__item:nth-child(5){grid-column:6/13;margin-top:18%}
.kz-gal__item:nth-child(6){grid-column:1/-1;margin-inline:calc(var(--gut) * -1)}
.kz-gal__item:nth-child(7){grid-column:2/7}
.kz-gal__item:nth-child(8){grid-column:7/13;margin-top:14%}
.kz-gal__item figure{margin:0}
.kz-gal__open{display:block;width:100%;padding:0;border:0;background:#111;cursor:zoom-in;overflow:hidden}
.kz-gal__open:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.kz-gal__frame{display:block;overflow:hidden;aspect-ratio:16/9;transition:transform .9s var(--ease)}
.kz-gal__item:nth-child(6) .kz-gal__frame{aspect-ratio:21/9}
.kz-gal__open:hover .kz-gal__frame{transform:scale(1.025)}
.kz-gal__media{width:100%;height:100%;object-fit:cover}
html.kz-fx .kz-gal__media{height:116%;margin-top:-8%}
.kz-gal__item:nth-child(6) figcaption{margin-inline:var(--gut)}
.kz-team{grid-column:4/-1;margin:0;border-top:2px solid var(--ink);padding-top:14px}
.kz-team summary{cursor:pointer;font:11px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.kz-team ul{columns:3;padding-left:0;list-style:none;font-size:15px}
.kz-lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center}
.kz-lightbox[hidden]{display:none}
.kz-lightbox__scrim{position:absolute;inset:0;background:rgba(17,24,21,.94)}
.kz-lightbox__slot{position:relative;width:min(92vw,calc(78vh * 16 / 9));aspect-ratio:16/9;background:#111}
.kz-lightbox__slot .kz-gal__media{width:100%;height:100%;margin:0;object-fit:contain}
.kz-lightbox__cap{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);width:min(92vw,900px);margin:0;color:var(--cream);font:14px/1.45 var(--text);text-align:center}
.kz-lightbox__close{position:absolute;top:16px;right:16px;padding:12px 16px;border:1px solid var(--hair-l);background:transparent;color:var(--cream);font:11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.kz-lightbox__close:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.kz-ask{margin-top:var(--sec)}

/* ---------- 8. next project: ink field, display-scale title ---------- */
.csx-root .csx-next{max-width:none;margin:var(--sec) 0 0;padding:clamp(80px,9vw,140px) var(--gut) clamp(56px,6vw,96px);background:var(--ink);color:var(--cream);border:0}
.csx-root .csx-next .csx-label{max-width:1360px;margin:0 auto 24px;padding-top:12px;border-top:1px solid var(--hair-l);color:var(--blue);font-size:11px;letter-spacing:.18em}
.csx-root .csx-next__card{width:100%;max-width:1360px;margin:0 auto;aspect-ratio:21/9;border:0;box-shadow:none;color:var(--ink)}
.csx-root .csx-next__card:hover{transform:none;box-shadow:none}
.csx-root .csx-next__art img{transition:transform 1.2s var(--ease)}.csx-root .csx-next__card:hover .csx-next__art img{transform:scale(1.03)}
.csx-root .csx-next__title{font-size:clamp(64px,10vw,176px);line-height:.8}
.csx-root .csx-prevnext{background:var(--ink);color:var(--cream);margin:0;padding:0 var(--gut) 40px;box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
.csx-root .csx-prevnext a{color:var(--cream)}
.kz-wipe{position:fixed;z-index:80;overflow:hidden;background:var(--cream);pointer-events:none}
.kz-wipe img{width:100%;height:100%;object-fit:cover}

/* ---------- mobile (<768): stacked, single column ---------- */
@media (max-width:767px){
 .kz-sec>*,.kz-lede,.kz-pr__after,.kz-quote,.kz-stats>p,.kz-team,.kz-var>.kz-fig{grid-column:1/-1!important}
 .kz-eyebrow{grid-row:auto;flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
 .kz-idx{font-size:64px}
 .csx-root .kz-h2{font-size:clamp(48px,14vw,72px)}
 .kz-pr__pin{grid-template-columns:1fr;height:auto}
 .kz-pr__half{padding:56px var(--gut) 40vw;min-height:0}
 .kz-pr__fig{width:100%}
 .kz-pr__word{font-size:38vw}
 .kz-pr__seam{display:none}
 .kz-meta{grid-template-columns:1fr 1fr}
 .kz-meta>div,.kz-meta>div+div{border-left:0;padding:12px 12px 14px 0;border-top:1px solid var(--hair)}
 .kz-meta>div:nth-child(even){padding-left:12px;border-left:1px solid var(--hair)}
 .kz-role__grid>*,.csx-root .kz-tldr{grid-column:1/-1}
 .kz-cols,.kz-map__pin{grid-template-columns:1fr}
 .kz-map__route{min-height:0;height:auto}.kz-map__svg{display:none}
 .kz-nodes{position:static;display:grid;gap:10px}.kz-node{position:static;width:auto}
 .kz-pgrid{grid-template-columns:1fr 1fr;gap:28px 14px}.kz-pgrid__item:nth-child(n){transform:none}
 .kz-flow{height:auto;margin-inline:calc(var(--gut) * -1)}.kz-flow__svg{display:none}
 .kz-badges{padding:28px 12px;gap:14px}.kz-badge figure{width:92px}.kz-badge img{width:80px;height:80px}
 .kz-crates{grid-template-columns:1fr}
 .kz-stat{grid-template-columns:1fr}.kz-stat__v,.kz-stat__l,.kz-stat small{grid-column:1/-1}
 .csx-root .kz-stat__v{font-size:clamp(72px,22vw,120px);margin-bottom:12px}.csx-root .kz-stat:nth-child(3) .kz-stat__v{font-size:clamp(48px,14vw,80px)}
 .kz-quote::before{position:static;display:block;height:.5em}
 .kz-gal__grid{gap:40px}.kz-gal__item:nth-child(n){grid-column:1/-1;margin-top:0}
 .kz-team ul{columns:1}
 .kz-xray__stage{outline-offset:6px}.kz-xray__ctl{gap:10px;font-size:10px}
 .csx-root .csx-next__card{aspect-ratio:358/340}
 .csx-root .csx-next__title{font-size:56px}
}
html.kz-static .kz-map,html.kz-static .kz-map__pin{height:auto}
@media (prefers-reduced-motion:reduce){.kz *{transition:none!important}}
.kz-role .kz-eyebrow{grid-row:1;margin-bottom:clamp(40px,4vw,64px)}
@media (max-width:767px){.kz-role .kz-eyebrow{margin-bottom:20px}}