/* ============================================================================
   jeanwwd — site layer on tokens.css + kit.css.
   1. page layout (base: skeleton v1 / Unseen; contact screen: v3 / Fabbiani;
      lead paragraph and rules: v4 / Akaru)
   2. the six accepted effects' CSS (src/fx/*), colours moved to tokens
   Nothing here sets a size or a colour that is not a token.
   ========================================================================== */

:root{
  --wipe: #afafae;                 /* = case hero tone: color-mix(ink 26%, ground); Unseen wipes in the project's colour */
  --wipe-ease: cubic-bezier(.76,0,.24,1);   /* power4.inOut, Unseen "toProject" */
}

/* ---------- 1. layout ---------------------------------------------------- */
body{position:relative}
.hero{padding:calc(var(--nav-h) + var(--s-4)) var(--m-page) 0;text-align:center}
.hero h1{margin:0 auto}
.hero .pillrows{margin-top:var(--s-4)}
.wrap--grid{margin-top:var(--s-5)}
.worknote{margin-bottom:var(--s-3)}
.allworks{display:flex;justify-content:center;margin-top:var(--s-5)}
.about-short{max-width:var(--measure-lead);margin:var(--s-7) auto 0;padding:0 var(--m-page);text-align:center}
.about-short .link{display:inline-flex;align-items:center;gap:.4em;margin-top:var(--s-4);font-size:var(--fs-caption)}

/* contact: one black screen, one button (v3 / Fabbiani), footer inside it */
.contact{margin-top:var(--s-7);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--s-7) var(--m-page) 0;position:relative}
.contact h2{max-width:var(--measure-lead);margin:auto auto 0}
.contact .btn{margin-top:var(--s-5);margin-bottom:auto}
.contact .foot{width:100%;margin-top:var(--s-7);align-items:center;padding-left:calc(var(--round) + var(--s-3))} /* room for the fixed AI button */
.foot__links{display:flex;gap:var(--s-3);flex-wrap:wrap}
.aibtn{box-shadow:0 0 0 var(--rule-w) var(--rule-inv)}

/* case page */
.case-hero{position:relative;overflow:hidden}
.case-hero img.case-hero__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.case-hero i,.case-hero b,.case-hero img.case-hero__mark{position:relative}
.case-hero img.case-hero__mark{max-width:calc(520 * var(--u));max-height:40vh}
.case-head{margin-top:var(--s-7)}
.case-head .meta{margin-top:var(--s-4)}
.meta a.link{display:block}
.case-spread{margin-top:var(--s-7)}
.tiles{margin-top:var(--gutter)}
.tiles .cover{position:relative}
.ph{display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:var(--fs-small);line-height:1;text-align:center}
.media-fit{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
figure.item figcaption{padding-top:var(--s-2);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--ink-2)}
.numbers{margin-top:var(--s-7)}
.case-text-sec{margin-top:var(--s-7)}
.case-text{margin:0 auto}
.credits{max-width:var(--measure);margin:var(--s-5) auto 0;padding-top:var(--s-3);border-top:var(--rule-w) solid var(--rule);font-size:var(--fs-caption);line-height:var(--lh-caption);display:grid;grid-template-columns:1fr 2fr;gap:var(--s-1) var(--gutter)}
.credits dt{color:var(--ink-2)}
.others{margin-top:var(--s-7)}
.others h3{margin-bottom:var(--s-4)}
.next{text-align:center}

/* about: Alkali 2 first screen, CV rows, Fabbiani 4 card row, socials, photos */
.ab-first{min-height:100vh;min-height:100svh;padding:calc(var(--nav-h) + var(--s-4)) var(--m-page) var(--s-5);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;column-gap:var(--gutter)}
.ab-first h1{font-size:var(--fs-h3);line-height:1.1;letter-spacing:var(--ls-h3);font-weight:500;max-width:calc(420 * var(--u));text-wrap:balance}
.ab-photo{display:flex;align-items:center;gap:calc(170 * var(--u))}
.ab-photo .arc{width:calc(70 * var(--u));height:calc(330 * var(--u));border:var(--rule-w) solid var(--ink-2);border-right:0;border-radius:100% 0 0 100% / 50% 0 0 50%;flex:0 0 auto}
.ab-photo .arc + .ph + .arc,.ab-photo .arc:last-child{transform:scaleX(-1)}
.ab-photo .ph{width:calc(310 * var(--u));aspect-ratio:1/1;background:var(--cover);border-radius:var(--r-card);flex:0 0 auto}
.ab-first .ab-side{justify-self:end;max-width:calc(300 * var(--u));font-size:var(--fs-ui);line-height:1.45;color:var(--ink-2)}
.ab-first .ab-cta{grid-column:1 / -1;justify-self:center}
.ab-sec{margin-top:var(--s-7)}
.ab-sec > .wrap > h2{margin-bottom:var(--s-5)}
.cv{display:grid;grid-template-columns:calc(360 * var(--u)) 1fr;column-gap:var(--gutter);padding:var(--s-4) 0;border-top:var(--rule-w) solid var(--rule)}
.cv:last-child{border-bottom:var(--rule-w) solid var(--rule)}
.cv h3{font-size:var(--fs-lead)}
.cv ol{list-style:none}
.cv li{display:grid;grid-template-columns:calc(200 * var(--u)) 1fr;column-gap:var(--s-4);padding:var(--s-2) 0;font-size:var(--fs-caption);line-height:var(--lh-caption)}
.cv li + li{border-top:var(--rule-w) solid color-mix(in srgb, var(--ink) 18%, transparent)}
.cv li span{color:var(--ink-2)}
.cv li b{font-weight:500;display:block}
.cards-row{display:flex;gap:calc(78 * var(--u));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc((100% - var(--ab-card)) / 2) var(--s-2);--ab-card:calc(984 * var(--u))}
.cards-row::-webkit-scrollbar{display:none}
.ab-card{flex:0 0 var(--ab-card);min-height:calc(612 * var(--u));scroll-snap-align:center;background:var(--surface);color:var(--on-surface);border-radius:var(--r-panel);padding:var(--s-5) calc(140 * var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s-3);transition:opacity var(--t-base) var(--ease-out),filter var(--t-base) var(--ease-out)}
.ab-card:not(.is-current){opacity:.55;filter:blur(3px)}
.no-js .ab-card{opacity:1;filter:none}
.ab-card .ab-card__mark{font-size:var(--fs-h3);font-weight:500;letter-spacing:var(--ls-h3)}
.ab-card p{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead)}
.ab-card .ph{width:var(--avatar-lg);height:var(--avatar-lg);border-radius:var(--r-card);background:var(--cover);font-size:0}
.ab-card small{font-size:var(--fs-small);color:#646462;display:block}
.ab-card b{font-size:var(--fs-ui);font-weight:500;display:block}
.cards-ctl{width:var(--ab-card);--ab-card:calc(984 * var(--u));max-width:calc(100% - 2 * var(--m-page));margin:var(--s-3) auto 0;display:flex;justify-content:space-between;align-items:center}
.cards-ctl .dashes{display:flex;gap:var(--s-1)}
.cards-ctl .dashes i{display:block;width:calc(16 * var(--u));min-width:10px;height:2px;background:color-mix(in srgb, var(--ink) 25%, var(--ground));transition:width var(--t-fast),background var(--t-fast)}
.cards-ctl .dashes i.is-on{width:calc(34 * var(--u));min-width:20px;background:var(--ink)}
.cards-ctl .arrows{display:flex;gap:var(--s-3)}
.cards-ctl .arrows button{padding:var(--s-1)}
.no-js .cards-ctl{display:none}
.socials{margin-top:var(--s-6);text-align:center}
.socials p{font-size:var(--fs-caption);color:var(--ink-2)}
.socials ul{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin-top:var(--s-4);font-size:var(--fs-h3);letter-spacing:var(--ls-h3);color:var(--ink-2)}
.socials a{transition:color var(--t-fast)}
.socials a:hover{color:var(--ink)}
.photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.photos .ph{aspect-ratio:3/4;background:var(--cover)}

/* /ai/ : Basement "key ..... value" rows, Geist, no colour */
.ai{min-height:100vh;padding:calc(var(--nav-h) + var(--s-4)) var(--m-page) var(--s-7)}
body.inv .aibtn{display:none} /* the machine page is already the AI version */
.ai__in{width:min(100%, calc(900 * var(--u)));min-width:min(100%, 640px);margin:0 auto;font-size:var(--fs-small);line-height:1.55;letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.ai__mark{font-size:var(--fs-lead);letter-spacing:.02em;line-height:1;font-weight:500}
.ai__nav{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);margin-top:var(--s-4)}
.ai__nav a{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.ai__nav a[aria-current]{background:var(--ink);color:var(--ground);text-decoration:none;padding:0 .35em}
.ai h1{font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:500;margin-top:var(--s-4)}
.ai .mute{margin-top:var(--s-3);max-width:46em}
.ai h2{font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:400;color:var(--ink-2);display:flex;align-items:center;gap:1em;margin:var(--s-5) 0 var(--s-3)}
.ai h2::before{content:"";width:1.5em;border-top:var(--rule-w) solid var(--rule)}
.ai h2::after{content:"";flex:1;border-top:var(--rule-w) solid var(--rule)}
.ai h3{font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:500;margin:var(--s-4) 0 var(--s-1)}
.ai h3 a{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.kv{display:grid;grid-template-columns:minmax(9em,13em) 1fr;column-gap:.8em;row-gap:.15em}
.kv dt{display:flex;align-items:baseline;gap:.5em;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.kv dt::after{content:"";flex:1;min-width:1em;border-bottom:var(--rule-w) dotted var(--ink-2);transform:translateY(-.3em)}
.kv dd a{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.kv + .kv{margin-top:var(--s-3)}
.ai__switch{position:fixed;left:50%;bottom:max(16px, calc(30 * var(--u)));transform:translateX(-50%);display:inline-flex;gap:var(--pill-gap);padding:var(--pill-inset);border-radius:var(--r-pill);background:var(--surface-2);box-shadow:0 0 0 var(--rule-w) var(--rule);z-index:6;text-transform:uppercase;letter-spacing:.04em}

/* 404 */
.e404{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--nav-h) var(--m-page)}
.e404 p{margin-top:var(--s-3);color:var(--ink-2)}
.e404 .btn{margin-top:var(--s-5)}

@media (max-width:900px){
  .contact .foot{flex-direction:column;align-items:flex-start;text-align:left;padding-left:0;padding-bottom:calc(var(--round) + 32px)}
  .ab-first{grid-template-columns:1fr;grid-template-rows:none;row-gap:var(--s-5);min-height:0;align-items:start}
  .ab-first h1{max-width:none}
  .ab-photo{justify-self:center;gap:calc(60 * var(--u))}
  .ab-first .ab-side{justify-self:start;max-width:none}
  .cv{grid-template-columns:1fr;row-gap:var(--s-3)}
  .cv li{grid-template-columns:calc(170 * var(--u)) 1fr}
  .cards-row{--ab-card:calc(100vw - 2 * var(--m-page) - 24px);gap:var(--s-2)}
  .ab-card{padding:var(--s-5) var(--s-4);min-height:calc(560 * var(--u))}
  .cards-ctl{--ab-card:100%}
  .photos{grid-template-columns:1fr 1fr;gap:var(--s-2)}
  .credits{grid-template-columns:1fr}
  .case-spread{height:70vh}
  .kv{grid-template-columns:minmax(7em,12em) 1fr}
  .pills{border-radius:var(--r-panel)}
  .socials{padding:0 var(--m-page)}
  .socials ul{gap:var(--s-2) var(--s-4)}
}

/* ---------- 2. effects ---------------------------------------------------- */

/* Lenis recommended CSS (Akaru / Sage East / Fabbiani all use Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* page wipe (Unseen transitionPass: soft edge .6 of the screen, moves right to left, power4.inOut).
   A pseudo element on <html>: links stay ordinary links, site.js only delays the navigation. */
html::before{content:"";position:fixed;top:0;bottom:0;left:0;width:220vw;z-index:100;pointer-events:none;visibility:hidden;transform:translateX(100vw);background:linear-gradient(to right,transparent 0,var(--wipe) 27.27%,var(--wipe) 72.73%,transparent 100%)}
html.wipe-out::before{visibility:visible;animation:wipe-cover 1s var(--wipe-ease) forwards}
html.wipe-in::before{visibility:visible;transform:translateX(-60vw);animation:wipe-leave 1s var(--wipe-ease) .05s forwards}
@keyframes wipe-cover{from{transform:translateX(100vw)}to{transform:translateX(-60vw)}}
@keyframes wipe-leave{from{transform:translateX(-60vw)}to{transform:translateX(-220vw);visibility:hidden}}

/* 2 · Akaru entry.css: reveal rules verbatim (class names kept); active only with JS */
html:not(.no-js) .animation-show{opacity:0;transform:translate3d(0,var(--offset,8rem),0) skewY(3deg);transition:transform 0s cubic-bezier(.165,.84,.44,1) .3s,opacity .3s cubic-bezier(.65,0,.35,1)}
html:not(.no-js) .animation-parent.--in-view .animation-show,html:not(.no-js) .animation-show.--in-view{opacity:1;transform:translateZ(0) skewY(0);transition:transform 1.2s cubic-bezier(.165,.84,.44,1),opacity .6s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--delay, 0)*1s)}
.animation-image{overflow:hidden}
html:not(.no-js) .animation-image .AppImage-container{transform:scale(1.2) rotate(.001deg);transition:transform 0s cubic-bezier(.165,.84,.44,1) .3s}
html:not(.no-js) .animation-parent.--in-view .animation-image .AppImage-container,html:not(.no-js) .animation-image.--in-view .AppImage-container{transform:scale(1) rotate(.001deg);transition:transform 1.8s cubic-bezier(.165,.84,.44,1);transition-delay:calc(var(--delay, 0)*1s)}
.grid .item.WorksItem{position:relative;overflow:hidden}
.grid .cover.animation-image{position:relative;background:none}
.cover .AppImage-container{position:absolute;inset:0;background:var(--cover);display:block}
.cover .AppImage-container.ph{display:flex}
.cover .AppImage-container img{width:100%;height:100%;object-fit:cover;max-width:none}
.grid .cap{position:relative;isolation:isolate}
.WorksItem-bg{position:absolute;inset:0;background:var(--surface);transform:translateY(100%);z-index:-1;display:block}

/* 6 · Fabbiani general.js hooks */
[data-split="lines"]{overflow:visible}
[data-split] .single-line-wrap{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
[data-split] .single-line{display:block;will-change:transform,opacity,filter}
html.js:not(.split-ready) [data-split]{visibility:hidden}
[data-magnetic]{will-change:transform}
[data-rotate-stack]{perspective:1000px}
[data-rotate-stack] .item{transform-style:preserve-3d;will-change:transform}

/* 1 · Unseen /projects/: fixed canvas behind a static header; the DOM grid stays in the markup (real links) */
body.fx-on{overflow:hidden;height:100vh;height:100dvh}
body.fx-on #gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;touch-action:none}
body.fx-on .nav,body.fx-on main{position:relative;z-index:2}
body.fx-on .nav--overlay{position:absolute;z-index:3} /* above main (z 2), which otherwise lies over the header and swallows its clicks */
body.fx-on .hero{pointer-events:none}
body.fx-on .pills{pointer-events:auto}
body.fx-on .grid[data-effect="page-curl"]{position:absolute;left:0;top:0;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
body.fx-on .empty{position:fixed;left:0;right:0;top:50%;text-align:center;z-index:2}
body.fx-on .worknote{position:fixed;left:var(--m-page);bottom:calc(var(--round) + max(28px, calc(50 * var(--u))));width:auto;margin:0;z-index:2;max-width:calc(420 * var(--u))}
body.fx-off .worknote,body:not(.fx-on) .worknote{display:none}
html.curl-pending .grid[data-effect="page-curl"]{visibility:hidden}
body.fx-on .contact{display:none}
.project-grid-cta{position:fixed;left:50%;bottom:calc(110 * var(--u));transform:translateX(-50%);z-index:3;text-align:center;opacity:0;visibility:hidden;font-size:var(--fs-ui);line-height:1.3}
.project-grid-cta .btn{margin-top:var(--s-2)}
body:not(.fx-on) .project-grid-cta{display:none}

/* 4 · Essen ImageOrVideo: framer-motion whileInView curves (1 s cubic-bezier(.22,0,.18,1)); hidden state only with JS */
.ImageOrVideo-holder,.ImageOrVideo-inner{height:100%}
html:not(.no-js) .ImageOrVideo-holder{opacity:0;transform:translateY(20%) translateZ(0)}
html:not(.no-js) .ImageOrVideo-inner{transform:translateY(-20%) translateZ(0)}
html:not(.no-js) .ImageOrVideo-holder.is-visible{opacity:1;transform:translateY(0) translateZ(0);transition:opacity 1s cubic-bezier(.22,0,.18,1),transform 1s cubic-bezier(.22,0,.18,1)}
html:not(.no-js) .ImageOrVideo-holder.is-visible .ImageOrVideo-inner{transform:translateY(0) translateZ(0);transition:transform 1s cubic-bezier(.22,0,.18,1)}
html:not(.no-js) .case-hero .fade-in{opacity:0;transform:translateY(20px) translateZ(0)}
html:not(.no-js) .case-hero.is-visible .fade-in{opacity:.9;transform:translateY(0) translateZ(0);transition:opacity .6s cubic-bezier(.11,0,.01,1) var(--d,0s),transform .6s cubic-bezier(.11,0,.01,1) var(--d,0s)}
html:not(.no-js) .case-hero.is-visible b.fade-in,html:not(.no-js) .case-hero.is-visible img.fade-in{opacity:1}
.case-spread .inset{display:block;overflow:hidden;position:relative;background:var(--surface-2)}
.video-holder{position:absolute;inset:0;overflow:hidden}
video.video-holder,.video-holder video,.video-holder .frame img{width:100%;height:100%;object-fit:cover;max-width:none}
.video-holder .frame{position:absolute;inset:0;opacity:0;display:grid;grid-template-rows:max(36px, calc(52 * var(--u))) 1fr;background:var(--surface-2)}
.video-holder .frame.is-on,.no-js .video-holder .frame:first-child{opacity:1}
.video-holder .frame--img{display:block}
.video-holder .frame .bar{border-bottom:var(--rule-w) solid color-mix(in srgb, var(--ink) 15%, transparent);display:flex;align-items:center;justify-content:space-between;padding:0 max(14px, calc(28 * var(--u)));font-size:var(--fs-small);color:var(--ink-2)}
.video-holder .frame .bar i{display:block;width:calc(90 * var(--u));height:max(6px, calc(10 * var(--u)));background:var(--cover);border-radius:2px}
.video-holder .frame .body{display:grid;gap:max(10px, calc(20 * var(--u)));padding:max(16px, calc(40 * var(--u))) max(14px, calc(28 * var(--u)));align-content:start}
.video-holder .frame .body i{display:block;background:color-mix(in srgb, var(--cover) 60%, var(--surface-2));border-radius:max(4px, calc(6 * var(--u)))}
.video-holder .frame.f1 .body{grid-template-columns:1fr 1fr}
.video-holder .frame.f1 .body i:nth-child(1){height:calc(60 * var(--u));grid-column:1/2}
.video-holder .frame.f1 .body i:nth-child(2){grid-column:2/3;grid-row:1/4;height:auto;min-height:calc(380 * var(--u))}
.video-holder .frame.f1 .body i:nth-child(3){height:calc(120 * var(--u))}
.video-holder .frame.f1 .body i:nth-child(4){height:calc(44 * var(--u));width:40%}
.video-holder .frame.f2 .body{grid-template-columns:repeat(4,1fr)}
.video-holder .frame.f2 .body i{height:calc(150 * var(--u))}
.video-holder .frame.f2 .body i:nth-child(n+5){height:calc(90 * var(--u))}
.video-holder .frame.f3 .body{grid-template-columns:1fr 1fr}
.video-holder .frame.f3 .body i:nth-child(1){height:calc(320 * var(--u));grid-row:1/3}
.video-holder .frame.f3 .body i:nth-child(2){height:calc(80 * var(--u))}
.video-holder .frame.f3 .body i:nth-child(3){height:calc(200 * var(--u))}
.video-holder .frame.f4 .body{grid-template-columns:1fr 2fr}
.video-holder .frame.f4 .body i:nth-child(1),.video-holder .frame.f4 .body i:nth-child(2){height:calc(200 * var(--u))}
.video-holder .frame.f4 .body i:nth-child(3){height:calc(140 * var(--u));grid-column:1/3}
.video-holder .frame .label{position:absolute;right:max(10px, calc(20 * var(--u)));bottom:max(8px, calc(16 * var(--u)));font-size:var(--fs-small);color:var(--ink-2)}

/* 5 · Sage East: pinned tunnel, perspective 1500px; without the pin (no JS, phone, reduced motion) a flat 2-col grid */
.home-works{position:relative;margin-top:var(--s-7)}
.home-intro .work-items{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);width:min(var(--container), calc(100% - 2 * var(--m-page)));margin:0 auto}
.home-intro .work-item figure{position:relative}
.home-intro .work-item .cover{aspect-ratio:var(--ratio-cover)}
.home-intro .work-item .tag-line{display:block;margin-top:var(--s-2);font-size:var(--fs-ui);color:var(--ink)}
.home-intro .work-item .tag-line span{color:var(--ink-2);margin-left:.6em}
.sage-progress{display:none}
.is-pinned .home-intro{height:100vh;height:100svh;position:relative;overflow:hidden;perspective:1500px;perspective-origin:50% 50%}
.is-pinned .home-intro .work-items{position:absolute;inset:0;display:block;width:auto;transform-style:preserve-3d}
.is-pinned .home-intro .work-item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;will-change:transform,opacity;backface-visibility:hidden}
.is-pinned .home-intro .work-item figure{width:calc(760 * var(--u))}
.is-pinned .home-intro .work-item .tag-line{position:absolute;left:0;top:100%}
.is-pinned .sage-progress{display:block;position:absolute;right:var(--m-page);bottom:var(--s-4);font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.is-pinned .sage-progress::before{content:"Scroll \2193\00a0\00a0"}
.case-text .line{display:block;overflow:hidden}
.case-text .line>span{display:block;will-change:transform}

/* 3 · Collins AppCarousel.css verbatim + .impact__carousel */
.carousel-root{scroll-snap-stop:always;scroll-snap-type:x mandatory}
.carousel-root>*{display:inline-block;scroll-snap-align:center;vertical-align:top;white-space:normal}
.numbers .row.carousel-root{display:grid;gap:max(12px, calc(22 * var(--u)));grid-auto-columns:min-content;grid-auto-flow:column;grid-template-rows:auto;max-width:100%;width:fit-content;scroll-padding:0 var(--card-offset);overflow-x:auto;overscroll-behavior-x:contain;-webkit-user-select:none;user-select:none;cursor:grab}
.numbers .row.carousel-root[has-snap="false"]{scroll-snap-type:none}
.numbers .row.carousel-root.is-dragging{cursor:grabbing}
.numbers .row.carousel-root .card{scroll-snap-align:center;display:flex;width:var(--card-w)}
.numbers .row.carousel-root::after{content:"";display:block;width:1px;flex:0 0 1px}
@media (max-width:900px){
  .numbers .row.carousel-root{scroll-padding:0 var(--m-page)}
  .home-intro .work-items{grid-template-columns:1fr}
}

/* everything off */
@media (prefers-reduced-motion:reduce){
  html::before{display:none}
  #gl{display:none}
  html:not(.no-js) .animation-show,html:not(.no-js) .animation-image .AppImage-container{opacity:1;transform:none;transition:none}
  .WorksItem-bg{display:none}
  html:not(.no-js) .ImageOrVideo-holder,html:not(.no-js) .ImageOrVideo-inner,html:not(.no-js) .case-hero .fade-in{opacity:1;transform:none;transition:none}
  html:not(.no-js) .case-hero i.fade-in{opacity:.9}
  [data-split] .single-line{opacity:1!important;transform:none!important;filter:none!important}
  .ab-card:not(.is-current){opacity:1;filter:none}
}

/* Native scroll lock also covers reduced motion and WebGL pages without Lenis. */
html.menu-lock{overflow:hidden}
.menu{overflow-y:auto;overscroll-behavior:contain}
@media (max-height:600px){
  .menu{justify-content:flex-start;padding-top:calc(var(--round) + var(--s-3) * 2)}
  .menu__foot{position:static;margin-top:var(--s-4)}
}