/* Neighbourhood — content sections v2 (cinematic). Every class is prefixed nx-.
   Rest state is a plain, stacked, fully visible page. sections.js adds .nx-motion to
   #nx (not under reduced motion) and only then do scenes pin and scrub. */
.nx{
  --nx-night:#0a0b24; --nx-deep:#0d0e2c; --nx-ink:#07081c; --nx-indigo:#2E3192; --nx-indigo-2:#1d1f5e;
  --nx-sky:#7DA7D8; --nx-green:#0DB14B; --nx-red:#ED1C24; --nx-orange:#F7931E; --nx-prog-track:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)),rgba(10,11,36,.85);
  --nx-soft:rgba(255,255,255,.78); --nx-mute:rgba(255,255,255,.56); --nx-line:rgba(255,255,255,.12);
  --nx-g:16px; --nx-top:calc(var(--note-h,44px) + 84px); --nx-bottom:clamp(92px,12.5vh,150px);
  --nx-font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Story 1.33: the one token layer. Every rule below reads these; scripts/design/check-layout.mjs lists any literal. */
  --nx-s1:4px; --nx-s2:8px; --nx-s3:12px; --nx-s4:16px; --nx-s5:24px; --nx-s6:32px; --nx-s7:48px; --nx-s8:64px; --nx-s9:96px; --nx-s10:128px;
  --nx-sec:clamp(96px,10vw,160px); --nx-sec-s:clamp(64px,8vw,120px);
  --nx-max:1360px; --nx-edge:max(var(--nx-g),calc((100vw - var(--nx-max)) / 2)); --nx-cg:16px;
  --nx-col:calc((100vw - 2 * var(--nx-edge) - 11 * var(--nx-cg)) / 12);
  --nx-measure:60ch; --nx-measure-s:42ch; --nx-prog-w:150px;
  /* type roles (TYPE_ROLES in src/design/tokens.ts; tokens.test.ts reads this block) */
  --nx-fw-display:800; --nx-fw-sub:500; --nx-case:uppercase; --nx-lh-solid:1;
  --nx-fs-word:clamp(3.4rem,8.4vw,9.2rem); --nx-lh-word:.9; --nx-tr-word:-.055em;
  --nx-fs-word-m:clamp(3rem,6.4vw,6.8rem); --nx-lh-word-m:.92; --nx-tr-word-m:-.055em;
  --nx-fs-word-s:clamp(2.4rem,4.6vw,4.6rem); --nx-lh-word-s:.95; --nx-tr-word-s:-.05em;
  --nx-fs-num:clamp(5rem,15vw,15rem); --nx-lh-num:.84; --nx-tr-num:-.06em; --nx-fs-unit:.3em; --nx-tr-unit:-.02em;
  --nx-fs-h:clamp(24px,2.3vw,32px); --nx-lh-h:1.05; --nx-tr-h:-.035em;
  --nx-fs-quote:clamp(26px,3.3vw,48px); --nx-lh-quote:1.14; --nx-tr-quote:-.03em;
  --nx-fs-sub:clamp(16px,1.3vw,20px); --nx-lh-sub:1.45;
  --nx-fs-lead:16px; --nx-lh-lead:1.5;
  --nx-fs-p:15px; --nx-lh-p:1.45;
  --nx-fs-ui:14px; --nx-lh-ui:1.4;
  --nx-fs-caption:13px; --nx-lh-caption:1.4;--nx-lh-foot:1.3;
  --nx-fs-micro:12px; --nx-lh-micro:1.4; --nx-tr-micro:.04em;
  --nx-fs-eyebrow:12.5px; --nx-lh-eyebrow:normal; --nx-tr-eyebrow:.16em;
  --nx-fs-label:12.5px; --nx-lh-label:normal; --nx-tr-label:.16em;
  position:relative; background:var(--nx-night); color:#fff; font-family:var(--nx-font);
  -webkit-font-smoothing:antialiased; overflow-x:clip; letter-spacing:0;
}
@media (min-width:768px){ .nx{ --nx-g:40px; --nx-top:calc(var(--note-h,32px) + 104px); --nx-cg:24px; } }
@media (max-width:760px){ .nx{
  --nx-fs-word:clamp(2.6rem,13.6vw,5.4rem); --nx-fs-word-m:clamp(2.6rem,11.5vw,4.2rem); --nx-fs-word-s:clamp(2.2rem,9.4vw,3.2rem);
  --nx-fs-num:clamp(4.2rem,24vw,7rem); --nx-fs-sub:16px;
  --nx-fs-eyebrow:12px; --nx-tr-eyebrow:.12em; --nx-fs-label:12px; --nx-tr-label:.12em;
} }
/* Arabic (Q-O13): the same roles re-set beside the Latin ones. Never tracked, ≤700, no capitals. */
:lang(ar) .nx{
  --nx-font:"Neighbourhood Sans Arabic","Hanken Grotesk",system-ui,sans-serif; --font:var(--nx-font);
  --nx-fw-display:700; --nx-fw-sub:400; --nx-case:none;
  --nx-fs-word:clamp(2.4rem,5.9vw,6.4rem); --nx-lh-word:1.25; --nx-tr-word:0;
  --nx-fs-word-m:clamp(2.1rem,4.5vw,4.8rem); --nx-lh-word-m:1.3; --nx-tr-word-m:0;
  --nx-fs-word-s:clamp(1.9rem,3.6vw,3.6rem); --nx-lh-word-s:1.35; --nx-tr-word-s:0;
  --nx-lh-num:.9; --nx-tr-num:0; --nx-tr-unit:0;
  --nx-lh-h:1.4; --nx-tr-h:0;
  --nx-lh-quote:1.4; --nx-tr-quote:0;
  --nx-fs-sub:clamp(17px,1.4vw,21.5px); --nx-lh-sub:1.85;
  --nx-lh-lead:1.85; --nx-fs-p:16px; --nx-lh-p:1.85;
  --nx-tr-micro:0;
  --nx-fs-eyebrow:13px; --nx-lh-eyebrow:1.5; --nx-tr-eyebrow:0;
  --nx-fs-label:13px; --nx-lh-label:1.5; --nx-tr-label:0;
}
@media (max-width:760px){ :lang(ar) .nx{
  --nx-fs-word:clamp(2.4rem,12vw,4.3rem); --nx-fs-word-m:clamp(2.1rem,9.2vw,3.4rem); --nx-fs-word-s:clamp(1.9rem,7.5vw,2.6rem);
  --nx-fs-sub:17px; --nx-fs-p:16px;
} }
.nx *,.nx *::before,.nx *::after{box-sizing:border-box}
.nx a{color:inherit}
.nx img{max-width:100%}
.nx-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.nx :focus-visible{outline:2px solid var(--nx-sky);outline-offset:4px;border-radius:4px}
.nx-wrap{padding-inline:var(--nx-edge)}

/* ---------------------------------------------------------------- type, as in the opener's beats */
.nx-eyebrow{margin:0 0 var(--nx-s4);display:flex;align-items:center;gap:var(--nx-s3);font-size:var(--nx-fs-eyebrow);line-height:var(--nx-lh-eyebrow);font-weight:700;letter-spacing:var(--nx-tr-eyebrow);text-transform:var(--nx-case);color:rgba(255,255,255,.84)}
.nx-tri{display:inline-flex;gap:3px;/* layout-check: allow the tri is the logo's mark, drawn to its own geometry */flex:none}
.nx-tri i{display:block;width:10px;height:3px;border-radius:2px}
.nx-tri i:nth-child(1){background:var(--nx-green)} .nx-tri i:nth-child(2){background:var(--nx-red)} .nx-tri i:nth-child(3){background:var(--nx-orange)} .nx-s3d .nx-beat .nx-tri{padding:3px;/* layout-check: allow the opener's tri plate (.beat .tri) */margin:-3px;/* layout-check: allow the plate's own inset */border-radius:4px;background:var(--tri-plate)}
.nx-word{margin:0;font-weight:var(--nx-fw-display);font-size:var(--nx-fs-word);line-height:var(--nx-lh-word);letter-spacing:var(--nx-tr-word);text-wrap:balance;text-shadow:0 2px 50px rgba(0,0,0,.28)}
.nx-word--m{font-size:var(--nx-fs-word-m);line-height:var(--nx-lh-word-m);letter-spacing:var(--nx-tr-word-m)}
.nx-word--s{font-size:var(--nx-fs-word-s);line-height:var(--nx-lh-word-s);letter-spacing:var(--nx-tr-word-s)}
.nx-sub{margin:var(--nx-s5) 0 0;max-width:var(--nx-measure-s);font-size:var(--nx-fs-sub);line-height:var(--nx-lh-sub);color:var(--nx-soft);font-weight:var(--nx-fw-sub);text-wrap:pretty}
.nx-label{margin:0 0 var(--nx-s5);font-size:var(--nx-fs-label);line-height:var(--nx-lh-label);font-weight:700;letter-spacing:var(--nx-tr-label);text-transform:var(--nx-case);color:var(--nx-sky)}
.nx-copy{position:relative;z-index:3}
@media (max-width:760px){
  .nx-sub{margin-top:var(--nx-s4)}
  .nx-eyebrow{margin-bottom:var(--nx-s3)}
}

/* ---------------------------------------------------------------- the pinned-scene machinery */
.nx-scene{position:relative}
.nx-stage{position:relative}
.nx-motion .nx-scene{height:calc(var(--len,3) * 100vh);height:calc(var(--len,3) * 100svh)}
.nx-motion .nx-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip}
.nx-motion .nx-stage .nx-copy,.nx-motion .nx-beat{position:absolute;left:var(--nx-edge);right:var(--nx-edge);bottom:var(--nx-bottom);max-width:calc(8 * var(--nx-col) + 7 * var(--nx-cg))}
@media (max-width:760px){ .nx-motion .nx-stage .nx-copy,.nx-motion .nx-beat{max-width:none;bottom:var(--nx-s9)} }

/* progress list: the opener's .prog, restyled under our own name */
.nx-prog{display:none}
.nx-motion .nx-prog{display:block;position:absolute;right:var(--nx-edge);top:50%;transform:translateY(-50%);z-index:5}
.nx-prog ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--nx-s4)}
.nx-prog button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:var(--nx-s3);font:600 var(--nx-fs-caption)/var(--nx-lh-solid) var(--nx-font);color:var(--nx-mute);transition:color .3s}
.nx-prog button::after{content:"";width:16px;height:2px;border-radius:2px;background:currentColor;transition:width .45s cubic-bezier(.2,.8,.2,1),background .3s}
.nx-prog button:hover{color:rgba(255,255,255,.85)}
.nx-prog li.on button{color:#fff}
.nx-prog li.on button::after{width:40px;background:var(--nx-orange)}
.nx-prog button:focus-visible{outline:2px solid var(--nx-sky);outline-offset:4px;border-radius:4px}
.nx-prog .nx-bar{display:none}
@media (max-width:760px){
  .nx-motion .nx-prog{left:var(--nx-edge);right:var(--nx-edge);top:auto;bottom:calc(var(--nx-s4) + env(safe-area-inset-bottom));transform:none}
  .nx-prog ol{display:flex;justify-content:space-between;gap:var(--nx-s1)}
  .nx-prog button{font-size:var(--nx-fs-micro)}
  .nx-prog button::after{display:none}
  .nx-prog .nx-bar{display:block;height:2px;margin-top:var(--nx-s3);background:var(--nx-prog-track);border-radius:2px;overflow:hidden} /* Story 1.38: the prog-track token (tokens.ts BACKING_TOKENS); on the old white .18 track the red stop met 2.20:1 over the scene; on this track it holds ≥3:1 over the scene pixels the rendered red gate measures at its stops (not over any scene: over white it would not) */
  .nx-prog .nx-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--nx-green),var(--nx-red),var(--nx-orange));transform-origin:left;transform:scaleX(var(--p,0))}
}

/* beats (merch + capacity): stacked and visible at rest, cross-faded when pinned */
.nx-beat + .nx-beat{margin-top:var(--nx-s8)}
.nx-motion .nx-beat{margin:0;opacity:0;visibility:hidden;will-change:opacity,transform}
.nx-motion .nx-beat.on{visibility:visible}

/* photos: a quiet frame, never scaled past a crisp size */
.nx-frame{position:relative;overflow:hidden;border-radius:6px;background:#15163a}
.nx-frame img{display:block;width:100%;height:100%;object-fit:cover}
/* Story 1.32: a filled photo slot is a <picture> (AVIF, WebP); it takes no box, so its <img> keeps the rule above */
.nx-frame picture{display:contents}
.nx-ph{margin-left:var(--nx-s3);padding:var(--nx-s1) var(--nx-s2);border-radius:3px;font-size:var(--nx-fs-micro);line-height:var(--nx-lh-micro);font-weight:600;letter-spacing:var(--nx-tr-micro);color:var(--nx-mute);border:1px solid rgba(255,255,255,.16);vertical-align:1px;white-space:nowrap}

/* ================================================================= 1 · clients */
.nx-clients{background:var(--nx-night)}
.nx-clients .nx-stage{padding:var(--nx-sec) 0 var(--nx-sec-s)}
.nx-logos{display:grid;gap:clamp(var(--nx-s5),3.2vh,var(--nx-s7));--lh:40px}
.nx-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--nx-s5) clamp(var(--nx-s6),4.4vw,var(--nx-s8));margin:0;padding:0 var(--nx-g);list-style:none}
.nx-row li{flex:none;display:flex;align-items:center;justify-content:center;height:calc(var(--lh) * 1.8)}
.nx-row img{display:block;height:calc(var(--lh) * var(--s,1));width:auto;max-width:none;opacity:.7;transition:opacity .35s}
.nx-row li:hover img{opacity:1}
.nx-clients .nx-copy{padding:var(--nx-s8) var(--nx-edge) 0}
.nx-sector{margin:var(--nx-s5) 0 0;font-size:var(--nx-fs-caption);line-height:var(--nx-lh-caption);font-weight:600;color:var(--nx-mute)}
@media (max-width:760px){ .nx-logos{--lh:28px} .nx-row{gap:var(--nx-s4) var(--nx-s6)} }

.nx-motion .nx-clients .nx-stage{padding:0}
.nx-motion .nx-logos{position:absolute;left:0;right:0;top:var(--nx-top);gap:clamp(var(--nx-s4),3vh,var(--nx-s6))}
.nx-motion .nx-row{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding:0;gap:0;will-change:transform}
.nx-motion .nx-row li{padding:0 clamp(var(--nx-s5),2.6vw,var(--nx-s7))}
.nx-motion .nx-logos::before,.nx-motion .nx-logos::after{content:"";position:absolute;top:calc(-1 * var(--nx-s5));bottom:calc(-1 * var(--nx-s5));width:clamp(60px,14vw,220px);z-index:2;pointer-events:none}
.nx-motion .nx-logos::before{left:0;background:linear-gradient(90deg,var(--nx-night) 8%,rgba(10,11,36,0))}
.nx-motion .nx-logos::after{right:0;background:linear-gradient(270deg,var(--nx-night) 8%,rgba(10,11,36,0))}
.nx-motion .nx-clients .nx-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 55% at 50% 30%,rgba(46,49,146,.32),rgba(10,11,36,0) 70%)}
.nx-motion .nx-row img{opacity:.7;transition:opacity .6s}
.nx-motion .nx-logos.has-sector img{opacity:.38}
.nx-motion .nx-logos.has-sector li.hi img{opacity:1}
.nx-motion .nx-logos li:hover img{opacity:1}
.nx-motion .nx-clients .nx-copy{padding:0}
.nx-motion .nx-sector-name{display:inline-block;transition:opacity .45s,transform .45s}
.nx-motion .nx-sector-name.out{opacity:0;transform:translateY(6px)}
.nx-motion .nx-sector b{color:#fff;font-weight:700}
@media (max-width:760px){ .nx-motion .nx-logos{--lh:30px;gap:var(--nx-s7);top:var(--nx-top)} .nx-motion .nx-row li{padding:0 var(--nx-s5)} }
@media (max-height:640px) and (min-width:761px){ .nx-motion .nx-logos{--lh:30px} }

/* ================================================================= 2 · services */
.nx-svc{background:var(--nx-ink)}
.nx-strip{display:block}
.nx-panel{position:relative;overflow:hidden;padding:var(--nx-sec) var(--nx-edge) var(--nx-sec-s);display:grid;gap:var(--nx-s6);border-top:1px solid var(--nx-line)}
.nx-amb{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;opacity:.7;pointer-events:none}
.nx-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,8,28,.86) 0%,rgba(7,8,28,.45) 45%,rgba(7,8,28,.2) 100%),linear-gradient(0deg,rgba(7,8,28,.7),rgba(7,8,28,0) 50%)}
.nx-shot{position:relative;z-index:2;margin:0;width:min(100%,var(--w))}
.nx-shot .nx-frame{aspect-ratio:var(--r);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.nx-shot figcaption,.nx-work figcaption,.nx-merchrow figcaption{margin-top:var(--nx-s3);font-size:var(--nx-fs-caption);line-height:var(--nx-lh-caption);color:var(--nx-mute)}
.nx-shot figcaption b,.nx-work figcaption b,.nx-merchrow figcaption b{color:#fff;font-weight:600;margin-right:var(--nx-s2)}
.nx-shot figcaption [lang="ar"]{font-family:"Neighbourhood Sans Arabic",var(--nx-font)}
.nx-link{display:inline-flex;align-items:center;gap:var(--nx-s3);margin-top:var(--nx-s5);padding:var(--nx-s4) var(--nx-s5);border-radius:999px;background:#fff;color:var(--nx-indigo)!important;font-weight:700;font-size:var(--nx-fs-p);text-decoration:none;box-shadow:0 14px 50px rgba(46,49,146,.45);transition:transform .25s,box-shadow .25s}
.nx-link:hover{transform:translateY(-2px);box-shadow:0 18px 60px rgba(125,167,216,.45)}
.nx-link svg{width:17px;height:17px}
.nx-idx{font-variant-numeric:tabular-nums;color:#fff}
.nx-idx span{color:var(--nx-mute)}
@media (min-width:900px){
  .nx-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:end;padding:var(--nx-sec) var(--nx-edge) var(--nx-sec-s)}
  .nx-shot{grid-column:2;grid-row:1;justify-self:end}
  .nx-panel .nx-copy{grid-column:1;grid-row:1}
}

.nx-motion .nx-strip{display:flex;height:100%;will-change:transform}
.nx-motion .nx-panel{flex:none;width:100%;height:100%;padding:0;border:0;display:block}
.nx-motion .nx-panel .nx-copy{max-width:max(calc(5 * var(--nx-col) + 4 * var(--nx-cg)),var(--nx-measure-s))}
.nx-motion .nx-shot{position:absolute;right:calc(var(--nx-edge) + var(--nx-prog-w));bottom:var(--nx-bottom);width:min(var(--w),44vw,calc((100vh - var(--nx-top) - var(--nx-bottom) - 40px) * var(--r)))}
.nx-motion .nx-shot .nx-frame img{will-change:transform}
.nx-motion .nx-amb{will-change:transform}
@media (max-width:760px){
  .nx-motion .nx-panel .nx-copy{max-width:none}
  .nx-motion .nx-shot{left:0;right:0;top:var(--nx-top);bottom:auto;width:100%}
  .nx-motion .nx-shot .nx-frame{border-radius:0;max-height:36svh;aspect-ratio:auto;height:min(36svh,calc(100vw / (var(--r))))}
  .nx-motion .nx-shot figcaption{padding:0 var(--nx-g)}
}
@media (max-width:899px){ .nx-panel .nx-shot{margin:0 calc(var(--nx-g) * -1);width:calc(100% + var(--nx-g) * 2)} .nx-panel .nx-shot .nx-frame{border-radius:0} .nx-panel .nx-shot figcaption{padding:0 var(--nx-g)} }
.nx-motion .nx-panel .nx-shot{margin:0}

/* ================================================================= 3 · merchandising */
.nx-merch{background:#0b0c28}
.nx-poster{display:block}
.nx-poster img{display:block;width:100%;height:auto}
.nx-gl{display:none}
.nx-shade{display:none}
.nx-merch .nx-beats{padding:var(--nx-s7) var(--nx-edge) var(--nx-sec-s)}
.nx-motion .nx-merch .nx-beats{padding:0}
.nx-motion .nx-poster,.nx-motion .nx-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-motion .nx-poster{transition:opacity 1.1s ease .15s}
.nx-motion .nx-gl{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.1s ease}
.nx-merch.is-ready .nx-gl{opacity:1}
.nx-merch.is-ready .nx-poster{opacity:0}
.nx-motion .nx-shade{display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,8,26,.6) 0%,rgba(8,8,26,.2) 34%,rgba(8,8,26,0) 56%),linear-gradient(0deg,rgba(8,8,26,.5) 0%,rgba(8,8,26,0) 40%)}
@media (max-aspect-ratio:1/1){ .nx-motion .nx-shade{background:linear-gradient(0deg,rgba(8,8,26,.85) 0%,rgba(8,8,26,.55) 30%,rgba(8,8,26,0) 52%)} }

/* ================================================================= 3b · vehicle wraps and signage installation (Story 1.35)
   The same machinery as merchandising (pinned by --len, beats, the progress list, a lazy three.js module behind a poster).
   At rest (reduced motion, no JS) each beat shows its own still: the static sequence, as the opener has. Under motion with
   no WebGL or a software renderer (html.static, the opener's own head probe) the scene is put back to rest (.nx-rest). */
.nx-s3d{background:#0b0c28}
.nx-s3d .nx-poster{display:none}
.nx-s3d .nx-beats{padding:var(--nx-s7) var(--nx-edge) var(--nx-sec-s)}
.nx-still{margin:0 0 var(--nx-s5);max-width:960px}
.nx-still .nx-frame{aspect-ratio:16/10}
.nx-motion .nx-s3d .nx-poster{display:block}
.nx-motion .nx-s3d .nx-beats{padding:0}
.nx-motion .nx-still{display:none}
.nx-s3d.is-ready .nx-gl{opacity:1}
.nx-s3d.is-ready .nx-poster{opacity:0}
.nx-motion .nx-s3d.nx-rest{height:auto}
.nx-motion .nx-rest .nx-stage{position:relative;height:auto;overflow:visible}
.nx-motion .nx-rest .nx-beat{position:static;opacity:1;visibility:visible;transform:none;max-width:none}
.nx-motion .nx-rest .nx-beat + .nx-beat{margin-top:var(--nx-s8)}
.nx-motion .nx-rest .nx-beats{padding:var(--nx-s7) var(--nx-edge) var(--nx-sec-s)}
.nx-motion .nx-rest .nx-poster,.nx-motion .nx-rest .nx-gl,.nx-motion .nx-rest .nx-shade,.nx-motion .nx-rest .nx-prog{display:none}
.nx-motion .nx-rest .nx-still{display:block}

.nx-made{padding:var(--nx-sec-s) 0;background:linear-gradient(180deg,#0b0c28,var(--nx-night))}
.nx-merchrow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--nx-s6) var(--nx-s4)}
.nx-merchrow figure{margin:0}
.nx-merchrow .nx-frame{aspect-ratio:4/3}
@media (min-width:760px){ .nx-merchrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--nx-s6) var(--nx-s5)} }
@media (min-width:1100px){ .nx-merchrow{grid-template-columns:repeat(3,minmax(0,1fr))} } /* three cleared pieces since 2026-10-08 (the subject-brand rule); six columns when there are six */
.nx-steps{list-style:none;margin:var(--nx-s7) 0 0;padding:var(--nx-s5) 0 0;border-top:1px solid var(--nx-line);display:grid;gap:var(--nx-s4);font-size:var(--nx-fs-p);line-height:var(--nx-lh-p);color:var(--nx-soft)}
.nx-steps b{margin-right:var(--nx-s3);font-size:var(--nx-fs-micro);font-weight:700;letter-spacing:var(--nx-tr-micro);color:var(--nx-orange);font-variant-numeric:tabular-nums}
@media (min-width:900px){ .nx-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--nx-s6);font-size:var(--nx-fs-lead);line-height:var(--nx-lh-lead)} }

/* ================================================================= 4 · works */
.nx-works{background:var(--nx-night)}
.nx-reel{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-auto-flow:row dense;gap:var(--nx-s6) var(--nx-s5);padding:var(--nx-sec) var(--nx-edge) var(--nx-s7)}
.nx-work{margin:0}
.nx-work .nx-frame{aspect-ratio:var(--r)}
/* the stacked wall (reduced motion, no WebGL) from two columns up: the odd shapes take two cells, so no row is set by
   one tile (batch 5, 2026-10-08: with ten photos the portrait pylon left a ~300 px dead band under row 1). A portrait
   tile (nx-work--tall) spans two rows, its frame filling both (a centred crop that keeps the whole sign); a strip at
   2.5:1 or wider (nx-work--wide) spans two columns, which brings it to a landscape tile's height. Ten photos fill
   12 cells: three full rows of four, four of three. One column (phones) stacks them as they are. The pinned reel
   (.nx-motion, a flex row) keeps its own frames. */
@media (min-width:640px){
  .nx-reel .nx-work--tall{grid-row:span 2;display:flex;flex-direction:column}
  .nx-reel .nx-work--tall .nx-frame{flex:1;min-height:0;aspect-ratio:auto}
  .nx-reel .nx-work--tall .nx-frame img{position:absolute;inset:0} /* no intrinsic height: the two rows size the tile */
  .nx-reel .nx-work--wide{grid-column:span 2}
  .nx-motion .nx-reel .nx-work--tall .nx-frame{flex:none;aspect-ratio:var(--r)}
  .nx-motion .nx-reel .nx-work--tall .nx-frame img{position:static}
  .nx-motion .nx-reel .nx-work--wide{grid-column:auto}
}
.nx-work[hidden]{display:none}
/* Story 4.11: a featured real project's tile. The frame is a fixed 3:2 box (a neutral panel while it has no photo, the
   base .nx-frame ground), so the answer landing moves nothing; the dates sit under the caption as a label and a value. */
.nx-work--feat .nx-frame{display:block}
.nx-work--feat figcaption a{color:inherit;text-decoration:none}
.nx-work--feat figcaption a:hover{text-decoration:underline}
.nx-work--feat a:focus-visible{outline:2px solid var(--nx-sky);outline-offset:3px;border-radius:2px}
.nx-dates{margin:var(--nx-s1) 0 0;display:flex;flex-wrap:wrap;gap:0 var(--nx-s5);font-size:var(--nx-fs-caption);line-height:var(--nx-lh-caption);color:var(--nx-mute)}
.nx-dates span{display:inline-flex;gap:var(--nx-s2);align-items:baseline}
.nx-dates small{font-size:inherit;color:var(--nx-mute)}
.nx-dates b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.nx-motion .nx-work--feat .nx-frame{height:calc(100% - 62px)}
.nx-motion .nx-work--feat .nx-dates{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-works .nx-copy{padding:var(--nx-s5) var(--nx-edge) var(--nx-sec-s)}
.nx-filters{display:flex;flex-wrap:wrap;gap:var(--nx-s1) var(--nx-s4);margin-top:var(--nx-s5)}
.nx-filters button{all:unset;cursor:pointer;padding:var(--nx-s1) 0;font-size:var(--nx-fs-ui);line-height:var(--nx-lh-ui);font-weight:600;color:var(--nx-mute);border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.nx-filters button:hover{color:#fff}
.nx-filters button[aria-pressed="true"]{color:#fff;border-bottom-color:var(--nx-orange)}
.nx-filters button:focus-visible{outline:2px solid var(--nx-sky);outline-offset:4px;border-radius:2px}
.nx-count{display:none}

.nx-motion .nx-reel{position:absolute;left:0;top:var(--nx-top);height:var(--nx-rh);display:flex;gap:clamp(var(--nx-s5),2.4vw,var(--nx-s6));padding:0 var(--nx-edge);width:max-content;will-change:transform;
  --nx-rh:min(46vh,400px)}
.nx-motion .nx-work{flex:none;height:100%;display:flex;flex-direction:column;margin:0}
.nx-motion .nx-work .nx-frame{height:calc(100% - 34px);width:auto;aspect-ratio:var(--r);max-width:none;transition:opacity .5s}
.nx-motion .nx-work figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nx-motion .nx-works .nx-copy{padding:0}
.nx-motion .nx-count{display:block;position:absolute;right:var(--nx-edge);bottom:var(--nx-bottom);margin:0;font-size:var(--nx-fs-caption);line-height:var(--nx-lh-caption);font-weight:600;color:var(--nx-mute);font-variant-numeric:tabular-nums;z-index:3}
.nx-motion .nx-count b{color:#fff;font-weight:700}
@media (max-width:760px){
  .nx-motion .nx-reel{--nx-rh:min(38svh,300px);top:var(--nx-top)}
  .nx-motion .nx-count{--nx-rh:min(38svh,300px);bottom:auto;top:calc(var(--nx-top) + var(--nx-rh) + var(--nx-s2))}
  .nx-filters{gap:var(--nx-s1) var(--nx-s4)}
}
@media (max-height:700px) and (min-width:761px){ .nx-motion .nx-reel{--nx-rh:38vh} }

/* ================================================================= 5 · capacity */
.nx-cap{background:var(--nx-night)}
.nx-cap .nx-beats{padding:var(--nx-sec) var(--nx-edge) var(--nx-s7)}
.nx-num{margin:0;font-weight:var(--nx-fw-display);font-size:var(--nx-fs-num);line-height:var(--nx-lh-num);letter-spacing:var(--nx-tr-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.nx-num small{font-size:var(--nx-fs-unit);letter-spacing:var(--nx-tr-unit);margin-left:.12em;color:var(--nx-sky);vertical-align:.12em}
.nx-num .nx-pre{margin:0 .04em 0 0;color:#fff;vertical-align:.5em}
.nx-quiet{margin:var(--nx-s6) 0 0;padding-top:var(--nx-s4);border-top:1px solid var(--nx-line);max-width:var(--nx-measure);font-size:var(--nx-fs-p);line-height:var(--nx-lh-p);color:var(--nx-mute)}
/* source lines (Story 1.36): rendered by static-site/claims.py from confirmed-facts.json; DESIGN-v2 mute, never under 12px */
.nx-source{margin:0;padding:0 var(--nx-edge) var(--nx-s8);font-size:var(--nx-fs-caption);line-height:var(--nx-lh-caption);color:var(--nx-mute)}
.nx-clients .nx-copy .nx-source{margin:var(--nx-s3) 0 0;padding:0;max-width:var(--nx-measure)}
.nx-glow{display:none}
.nx-motion .nx-cap .nx-beats{padding:0}
.nx-motion .nx-glow{display:block;position:absolute;inset:-10%;pointer-events:none;opacity:.9;
  background:radial-gradient(45% 40% at var(--gx,70%) 40%,var(--gc,rgba(46,49,146,.5)),rgba(10,11,36,0) 70%);transition:background .8s}
.nx-motion .nx-cap .nx-source{position:absolute;right:var(--nx-edge);bottom:var(--nx-s5);padding:0;max-width:40ch;text-align:right}
@media (max-width:760px){
  .nx-motion .nx-cap .nx-source{left:var(--nx-edge);right:var(--nx-edge);top:var(--nx-top);bottom:auto;text-align:left}
}

/* ================================================================= 6 · proof + people */
.nx-calm{padding:var(--nx-sec) 0 var(--nx-sec-s);background:linear-gradient(180deg,var(--nx-night),var(--nx-deep))}
.nx-quote{margin:0}
@media (min-width:768px){ .nx-quote{max-width:calc(10 * var(--nx-col) + 9 * var(--nx-cg))} }
.nx-quote blockquote{margin:0}
.nx-quote p{margin:0;font-size:var(--nx-fs-quote);line-height:var(--nx-lh-quote);letter-spacing:var(--nx-tr-quote);font-weight:600;text-wrap:balance}
.nx-quote figcaption{margin-top:var(--nx-s6);display:flex;flex-wrap:wrap;gap:var(--nx-s1) var(--nx-s4);align-items:baseline;font-size:var(--nx-fs-p);line-height:var(--nx-lh-p);color:var(--nx-soft)}
.nx-quote figcaption b{color:#fff}
.nx-quote figcaption small{flex-basis:100%;margin-top:var(--nx-s2);font-size:var(--nx-fs-caption);line-height:var(--nx-lh-caption);color:var(--nx-mute)}
.nx-people{margin-top:var(--nx-sec);padding-top:clamp(var(--nx-s7),5vw,var(--nx-s8));border-top:1px solid var(--nx-line)}
.nx-people .nx-word{max-width:16ch}

/* ================================================================= 7 · vendor + shop */
.nx-util{padding:var(--nx-sec-s) 0;background:var(--nx-deep);border-top:1px solid var(--nx-line)}
.nx-util-grid{display:grid;gap:var(--nx-s8)}
@media (min-width:900px){ .nx-util-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--nx-s8) var(--nx-cg)} .nx-util-grid > :first-child{grid-column:1 / span 6} .nx-util-grid > :last-child{grid-column:7 / span 6} }
@media (min-width:1280px){ .nx-util-grid > :first-child{grid-column:1 / span 5} }
.nx-h{margin:0;font-size:var(--nx-fs-h);font-weight:var(--nx-fw-display);letter-spacing:var(--nx-tr-h);line-height:var(--nx-lh-h);text-wrap:balance}
.nx-p{margin:var(--nx-s3) 0 0;max-width:var(--nx-measure);font-size:var(--nx-fs-p);line-height:var(--nx-lh-p);color:var(--nx-mute)} .nx-p a{color:#fff;text-underline-offset:.2em}
.nx-rows{list-style:none;margin:var(--nx-s5) 0 0;padding:0}
.nx-rows li{display:flex;align-items:center;justify-content:space-between;gap:var(--nx-s4);padding:var(--nx-s4) 0;border-top:1px solid var(--nx-line);font-size:var(--nx-fs-lead);line-height:var(--nx-lh-lead);font-weight:600}
.nx-rows li:last-child{border-bottom:1px solid var(--nx-line)}
.nx-rows button{all:unset;flex:none;cursor:not-allowed;font-size:var(--nx-fs-micro);line-height:var(--nx-lh-micro);font-weight:600;letter-spacing:var(--nx-tr-micro);color:var(--nx-mute);padding:var(--nx-s2) var(--nx-s3);border-radius:999px;border:1px solid rgba(255,255,255,.14)}
.nx-rows button:focus-visible{outline:2px solid var(--nx-sky);outline-offset:4px}
.nx-msg{margin:var(--nx-s3) 0 0;min-height:1.4em;font-size:var(--nx-fs-caption);line-height:var(--nx-lh-caption);color:var(--nx-soft)}

/* ================================================================= 8 · quote form */
.nx-quoteform{padding:var(--nx-sec) 0 var(--nx-sec-s);background:radial-gradient(80% 60% at 15% 0%,rgba(46,49,146,.35),rgba(10,11,36,0) 60%),var(--nx-night)}
.nx-q-grid{display:grid;gap:var(--nx-s7)}
@media (min-width:1000px){ .nx-q-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--nx-s7) var(--nx-cg);align-items:start} .nx-q-copy{grid-column:1 / span 5;position:sticky;top:calc(var(--nx-top) + var(--nx-s5))} .nx-q-grid > .nx-form{grid-column:6 / span 7} }
@media (min-width:1280px){ .nx-q-copy{grid-column:1 / span 4} }
.nx-form{min-width:0}
.nx-grid{display:grid;gap:var(--nx-s5)}
@media (min-width:640px){ .nx-grid{grid-template-columns:1fr 1fr} .nx-full{grid-column:1 / -1} }
.nx-field{display:grid;gap:var(--nx-s2);align-content:start;min-width:0}
.nx-field label{font-size:var(--nx-fs-ui);line-height:var(--nx-lh-ui);font-weight:600;color:#fff}
.nx-opt{font-weight:var(--nx-fw-sub);color:var(--nx-mute);font-size:var(--nx-fs-caption);margin-inline-start:var(--nx-s1)}
.nx-req{color:var(--nx-orange)}
.nx-input{width:100%;min-width:0;font:500 var(--nx-fs-lead)/var(--nx-lh-ui) var(--nx-font);color:#fff;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.42);border-radius:12px;padding:var(--nx-s4);transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
/* faint .42 is the input edge (4.03:1 on night, SC 1.4.11 needs 3:1); placeholder text takes mute (6.42:1) */
.nx-input::placeholder{color:var(--nx-mute)}
.nx-input:hover{border-color:rgba(255,255,255,.78)}
/* focus: the site's sky ring (2 px, offset 4 px) on the field's own radius, a sky edge and a sky .07 fill. background-color, not
   background: the select's chevron is a background-image. */
.nx .nx-input:focus{outline:2px solid var(--nx-sky);outline-offset:4px;border-radius:12px;border-color:var(--nx-sky);background-color:rgba(125,167,216,.07);box-shadow:none}
select.nx-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:var(--nx-s7)}
select.nx-input option{color:#111;background:#fff}
input[type="date"].nx-input{color-scheme:dark;min-height:52px}
textarea.nx-input{min-height:120px;resize:vertical}
.nx-hint{margin:0;font-size:var(--nx-fs-caption);line-height:var(--nx-lh-caption);color:var(--nx-mute)}
/* errors: an icon and words, never a hue (SH-12). A 2 px white edge, padding compensated so nothing moves. */
.nx-err{margin:0;font-size:var(--nx-fs-ui);font-weight:600;line-height:var(--nx-lh-ui);color:#fff;display:none}
.nx-field.is-bad .nx-err{display:flex;align-items:flex-start;gap:var(--nx-s2)}
.nx-field.is-bad .nx-input{border:2px solid #fff;padding:calc(var(--nx-s4) - 1px);/* layout-check: allow the 2px error edge takes 1px of the field padding, so the field does not move */box-shadow:none}
/* a select keeps its chevron room in error too (the shorthand above would drop it) */
.nx-field.is-bad select.nx-input{padding-inline-end:calc(var(--nx-s7) - 1px);/* layout-check: allow the 2px error edge takes 1px of the chevron room */}
.nx-ico{flex:none;width:18px;height:18px;margin-top:1px;/* layout-check: allow optical: sets the icon on the first line of its message */}
.nx-hp{position:absolute!important;left:-9999px;/* layout-check: allow the honeypot sits off-screen (tests/deploy/quote-form.test.ts) */width:1px;height:1px;overflow:hidden}
.nx-form-foot{margin-top:var(--nx-s6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--nx-s4) var(--nx-s5)}
.nx-form-foot small{font-size:var(--nx-fs-caption);color:var(--nx-mute)}
.nx-cta{display:inline-flex;align-items:center;gap:var(--nx-s3);padding:var(--nx-s4) var(--nx-s6);border:0;border-radius:999px;background:#fff;color:var(--nx-indigo);font:700 var(--nx-fs-lead)/var(--nx-lh-solid) var(--nx-font);cursor:pointer;box-shadow:0 14px 50px rgba(46,49,146,.55);transition:transform .25s,box-shadow .25s,opacity .2s}
.nx-cta:hover{transform:translateY(-2px);box-shadow:0 18px 60px rgba(125,167,216,.5)}
.nx-cta[disabled]{opacity:.6;cursor:progress;transform:none}
.nx-cta svg{width:18px;height:18px}
.nx-alert{display:none;gap:var(--nx-s3);align-items:flex-start;margin:0 0 var(--nx-s5);padding:var(--nx-s4);border-radius:12px;border:2px solid #fff;background:rgba(255,255,255,.045);font-size:var(--nx-fs-p);line-height:var(--nx-lh-p);color:#fff}
.nx-alert.is-on{display:flex}
.nx-alert .nx-ico{width:20px;height:20px}
.nx-alert b{display:block;margin-bottom:var(--nx-s1)}
.nx-alert p{margin:var(--nx-s1) 0 0}
.nx-alert ul{margin:var(--nx-s2) 0 0;padding-inline-start:var(--nx-s4)}
.nx-alert a{color:#fff}
.nx-done{padding:var(--nx-s2) 0}
.nx-done:focus{outline:none}
.nx-textbtn{all:unset;cursor:pointer;margin-top:var(--nx-s5);font-weight:700;font-size:var(--nx-fs-p);border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:var(--nx-s1)}
.nx-textbtn:focus-visible{outline:2px solid var(--nx-sky);outline-offset:4px}

/* ================================================================= 9 · footer */
/* the footer's line boxes are set, not "normal", so the Arabic face (taller normal leading) keeps the home's box sizes (Story 1.30 AC1) */
.nx-foot{padding:var(--nx-s8) 0 var(--nx-s7);background:var(--nx-ink);border-top:1px solid var(--nx-line);font-size:var(--nx-fs-ui);color:var(--nx-mute)}
.nx-foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--nx-s5) var(--nx-s7)}
.nx-foot-name{margin:0;line-height:var(--nx-lh-foot);display:flex;align-items:center;gap:var(--nx-s4);font-size:var(--nx-fs-h);font-weight:var(--nx-fw-display);letter-spacing:var(--nx-tr-h);color:#fff}
.nx-foot nav{line-height:var(--nx-lh-foot);display:flex;flex-wrap:wrap;gap:var(--nx-s2) var(--nx-s5)}
.nx-foot nav a{text-decoration:none;color:var(--nx-soft);transition:color .2s}
.nx-foot nav a:hover{color:#fff}
.nx-foot-base{line-height:var(--nx-lh-foot);margin-top:var(--nx-s6);padding-top:var(--nx-s5);border-top:1px solid var(--nx-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--nx-s2) var(--nx-s5);font-size:var(--nx-fs-caption)}

/* ================================================================= gentle reveals for the unpinned screens */
.nx-motion .nx-rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.nx-motion .nx-rv.is-in{opacity:1;transform:none}
/* a keyboard user who tabs into a block before its reveal has played sees it at once (SC 2.4.7) */
.nx-motion .nx-rv:focus-within{opacity:1;transform:none;transition:none}
.nx-motion .nx-people.nx-rv{transition-delay:.1s}
@media (prefers-reduced-motion:reduce){ .nx-rv{opacity:1!important;transform:none!important} }
.nx-link:focus-visible,.nx-cta:focus-visible{outline:2px solid var(--nx-sky);outline-offset:4px;border-radius:999px}
/* Story 1.25: right to left (the Arabic home /ar, and the app's Arabic pages). Mirrors the reading furniture only:
   copy and its shading on the right, progress lists and counters on the left, arrows and chevrons pointing left, the
   horizontal scenes travelling the other way (sections.js). Photos, the logo rows and the 3D scenes are never
   mirrored. Inert under dir="ltr". */
[dir="rtl"] .nx-ph{margin-left:0;margin-right:var(--nx-s3)}
[dir="rtl"] .nx-shot figcaption b,[dir="rtl"] .nx-work figcaption b,[dir="rtl"] .nx-merchrow figcaption b{margin-right:0;margin-left:var(--nx-s2)}
[dir="rtl"] .nx-steps b{margin-right:0;margin-left:var(--nx-s3)}
[dir="rtl"] .nx-num small{margin-left:0;margin-right:.12em}
[dir="rtl"] .nx-motion .nx-prog{right:auto;left:var(--nx-edge)}
[dir="rtl"] .nx-prog .nx-bar i{transform-origin:right;background:linear-gradient(270deg,var(--nx-green),var(--nx-red),var(--nx-orange))}
[dir="rtl"] .nx-panel::after{background:linear-gradient(270deg,rgba(7,8,28,.86) 0%,rgba(7,8,28,.45) 45%,rgba(7,8,28,.2) 100%),linear-gradient(0deg,rgba(7,8,28,.7),rgba(7,8,28,0) 50%)}
[dir="rtl"] .nx-motion .nx-shot{right:auto;left:calc(var(--nx-edge) + var(--nx-prog-w))}
[dir="rtl"] .nx-motion .nx-shade{background:linear-gradient(270deg,rgba(8,8,26,.6) 0%,rgba(8,8,26,.2) 34%,rgba(8,8,26,0) 56%),linear-gradient(0deg,rgba(8,8,26,.5) 0%,rgba(8,8,26,0) 40%)}
[dir="rtl"] .nx-motion .nx-reel{left:auto;right:0}
[dir="rtl"] .nx-motion .nx-count{right:auto;left:var(--nx-edge)}
[dir="rtl"] .nx-motion .nx-cap .nx-source{right:auto;left:var(--nx-edge);text-align:left}
[dir="rtl"] select.nx-input{background-position:left 16px center;padding-right:var(--nx-s4);padding-left:var(--nx-s7)}
[dir="rtl"] .nx-link svg,[dir="rtl"] .nx-cta svg,[dir="rtl"] .shell-sheet-cta svg{transform:scaleX(-1)}
[dir="rtl"] .nx-motion .nx-logos{direction:ltr}
[dir="rtl"] .nx-quoteform{background:radial-gradient(80% 60% at 85% 0%,rgba(46,49,146,.35),rgba(10,11,36,0) 60%),var(--nx-night)}
.nx-quote .nx-quote-tr{margin-top:var(--nx-s4);font-size:var(--nx-fs-sub);line-height:var(--nx-lh-sub);font-weight:var(--nx-fw-sub);color:var(--nx-soft)}
@media (max-width:760px){
  [dir="rtl"] .nx-motion .nx-prog{left:var(--nx-edge);right:var(--nx-edge)}
  [dir="rtl"] .nx-motion .nx-cap .nx-source{left:var(--nx-edge);right:var(--nx-edge);text-align:right}
}
@media (max-aspect-ratio:1/1){ [dir="rtl"] .nx-motion .nx-shade{background:linear-gradient(0deg,rgba(8,8,26,.85) 0%,rgba(8,8,26,.55) 30%,rgba(8,8,26,0) 52%)} }