/* Nobal Sanat — the middle of the home page. v1.0.0
   Five bands, one vocabulary: drafting grid, hairline rules, ruler ticks,
   monospaced marginalia, and gold used once per band and never twice. */

.nsc-st,.nsc-pr,.nsc-wy,.nsc-pj,.nsc-ct{
  --m-ink:#15181D; --m-soft:#59626E; --m-rule:#DCE1E7; --m-plate:#F5F7F9;
  --m-acc:#FFC61E; --m-accink:#B07C05;
  --m-dark:#12161B; --m-card:#1B2028; --m-drule:#272D35;
  --m-dink:#E7ECF2; --m-dsoft:#AEB8C4;
  --m-font:var(--nsc-font,"Vazirmatn","IRANSans",Tahoma,sans-serif);
  --m-mono:var(--nsc-mono,"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace);
  position:relative;
  font-family:var(--m-font);
  line-height:1.95;
}
.nsc-st *,.nsc-pr *,.nsc-wy *,.nsc-pj *,.nsc-ct *,
.nsc-st *::before,.nsc-pr *::before,.nsc-wy *::before,.nsc-pj *::before,.nsc-ct *::before{ box-sizing:border-box; }
/* :where() so the reset carries no specificity of its own. Written plainly,
   ".nsc-st p" (a class plus a type) outranks every single-class rule below it,
   and it was silently deleting the margins on the eyebrow, the figures and the
   button under each rail. */
:where(.nsc-st,.nsc-pr,.nsc-wy,.nsc-pj,.nsc-ct) p{ margin:0; }
:where(.nsc-pr,.nsc-wy,.nsc-pj) ul{ margin:0; padding:0; list-style:none; }
.nsc-st :focus-visible,.nsc-pr :focus-visible,.nsc-wy :focus-visible,
.nsc-pj :focus-visible,.nsc-ct :focus-visible{ outline:2px solid var(--m-acc); outline-offset:3px; }

/* ------------------------------------------------- shared section heading */
.nsc-mid__head{ text-align:center; margin-bottom:clamp(24px,3vw,40px); }
.nsc-mid__eyebrow{
  font-family:var(--m-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--m-accink);
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:10px;
}
.nsc-mid__eyebrow::before,.nsc-mid__eyebrow::after{
  content:""; width:clamp(20px,5vw,58px); height:1px; background:var(--m-rule);
}
.nsc-mid__title{
  margin:0 0 8px;
  font-size:clamp(23px,3vw,36px); font-weight:800; line-height:1.5; color:var(--m-ink);
  text-wrap:balance;
}
.nsc-mid__title em{ font-style:normal; color:var(--m-accink); }
.nsc-mid__sub{ font-size:clamp(13px,1.1vw,15px); color:var(--m-soft); }

.nsc-mid__head--dark .nsc-mid__eyebrow{ color:var(--m-acc); }
.nsc-mid__head--dark .nsc-mid__eyebrow::before,
.nsc-mid__head--dark .nsc-mid__eyebrow::after{ background:var(--m-drule); }
.nsc-mid__head--dark .nsc-mid__title{ color:#fff; }
.nsc-mid__head--dark .nsc-mid__title em{ color:var(--m-acc); }
.nsc-mid__head--dark .nsc-mid__sub{ color:var(--m-dsoft); }

/* --------------------------------------------------------- shared button */
.nsc-mid__foot{ text-align:center; margin-top:clamp(30px,3.6vw,48px); }
.nsc-mid__btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 20px;
  border:1px solid var(--m-ink); border-radius:2px;
  color:var(--m-ink); text-decoration:none;
  font-size:14px; font-weight:700; background:transparent;
  transition:background-color .2s ease,color .2s ease;
}
.nsc-mid__btn svg{ flex:none; transition:transform .2s ease; }
.nsc-mid__btn:hover,.nsc-mid__btn:focus-visible{ background:var(--m-ink); color:#fff; }
.nsc-mid__btn:hover svg{ transform:translateX(-4px); }
[data-lang="en"] .nsc-mid__btn:hover svg{ transform:translateX(4px); }

/* ------------------------------------------------- shared corner ticks --- */
.nsc-mid__ticks{ position:absolute; inset:0; pointer-events:none; }
.nsc-mid__ticks i{
  position:absolute; width:12px; height:12px;
  border:0 solid rgba(255,255,255,.6);
  transition:border-color .25s ease;
}
.nsc-mid__ticks i:nth-child(1){ top:9px; left:9px;  border-top-width:1px; border-left-width:1px; }
.nsc-mid__ticks i:nth-child(2){ top:9px; right:9px; border-top-width:1px; border-right-width:1px; }
.nsc-mid__ticks i:nth-child(3){ bottom:9px; left:9px;  border-bottom-width:1px; border-left-width:1px; }
.nsc-mid__ticks i:nth-child(4){ bottom:9px; right:9px; border-bottom-width:1px; border-right-width:1px; }

/* ==================================================== 1. instrument row === */
.nsc-st{
  background:var(--m-dark);
  border-block:1px solid var(--m-drule);
  color:var(--m-dink);
}
.nsc-st::after{                     /* the ruler that runs under the hero HUD */
  content:""; position:absolute; inset-inline:0; bottom:0; height:6px; pointer-events:none;
  background-image:repeating-linear-gradient(to right, rgba(255,198,30,.30) 0 1px, transparent 1px 14px);
  background-position:bottom; background-repeat:repeat-x;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 26%,#000 74%,transparent);
}
.nsc-st__in{
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px);
  padding-block:clamp(26px,3vw,38px);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.nsc-st__cell{ position:relative; text-align:center; padding:4px clamp(6px,1.4vw,18px); }
.nsc-st__cell::before{
  content:""; position:absolute; inset-block:6%; inset-inline-start:0; width:1px;
  background:var(--m-drule);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 26%,#000 74%,transparent);
}
.nsc-st__cell:nth-child(5n+1)::before{ content:none; }
.nsc-st__icon{ display:block; color:var(--m-acc); opacity:.9; }
.nsc-st__icon svg{ width:24px; height:24px; display:inline-block; }
/* The unit is centred against the figure, not sat on its baseline: a "+" or
   "%" glyph is drawn centred in its own em box, so baseline alignment drops it
   to the figure's feet and it reads as a stray mark. */
.nsc-st__fig{
  display:flex; align-items:center; justify-content:center; gap:1px;
  margin-top:6px; line-height:1.2; direction:ltr;
}
.nsc-st__n{
  font-size:clamp(25px,3.1vw,38px); font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.nsc-st__u{ font-style:normal; font-size:.72em; font-weight:800; color:var(--m-acc); margin-inline-start:3px; }
.nsc-st__rule{
  display:block; width:26px; height:2px; margin:9px auto 8px;
  background:var(--m-acc); opacity:.85;
}
.nsc-st__l{ font-size:13px; font-weight:700; line-height:1.6; color:var(--m-dink); }
.nsc-st__note{ font-size:11.5px; line-height:1.7; color:#818C99; margin-top:2px; }

/* ========================================================= shared rail === */
.nsc-rail{ position:relative; }
/* Free movement, deliberately: no scroll-snap anywhere on the rail. Snapping
   locks the strip to card boundaries and the drag feels like it is fighting
   back; the inertia is in the script instead, so the rail carries on and
   settles wherever it lands. */
.nsc-rail__track{
  display:flex; gap:clamp(12px,1.4vw,18px);
  overflow-x:auto; overscroll-behavior-x:contain;
  padding-block:4px 6px;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.nsc-rail__track::-webkit-scrollbar{ display:none; }
.nsc-rail__track.is-drag{
  cursor:grabbing;
  scroll-behavior:auto;                /* never smooth-scroll under the hand */
  -webkit-user-select:none; user-select:none;
}
/* while the hand is moving, nothing under it is a link or a draggable image */
.nsc-rail__track.is-drag a,
.nsc-rail__track.is-drag img{ pointer-events:none; }
.nsc-rail__track img{ -webkit-user-drag:none; }
.nsc-rail__nav{
  position:absolute; top:44%; transform:translateY(-50%);
  width:40px; height:40px; z-index:3;
  display:none; place-items:center;
  background:#fff; color:var(--m-ink);
  border:1px solid var(--m-rule); border-radius:50%;
  box-shadow:0 6px 18px rgba(21,24,29,.10);
  cursor:pointer; padding:0;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease;
}
.nsc-rail.is-live .nsc-rail__nav{ display:grid; }
.nsc-rail__nav:hover{ background:var(--m-ink); color:#fff; border-color:var(--m-ink); }
.nsc-rail__nav:disabled{ opacity:.28; cursor:default; box-shadow:none; }
.nsc-rail__nav:disabled:hover{ background:#fff; color:var(--m-ink); border-color:var(--m-rule); }
.nsc-rail__nav--prev{ inset-inline-start:clamp(-19px,-1.4vw,-8px); }
.nsc-rail__nav--next{ inset-inline-end:clamp(-19px,-1.4vw,-8px); }
@media (max-width:860px){ .nsc-rail.is-live .nsc-rail__nav{ display:none; } }

/* =========================================================== 2. machines = */
/* No ground and no grid of its own: this band sits *inside* the plate that the
   about band carries down past its own bottom edge (--a-spill in
   nobal-about.css), so both share one surface, one drafting grid in phase, and
   one set of running hairlines. Two grids, each starting at its own top-left,
   could never line up — the phase depends on the height above them. */
.nsc-pr{ background:transparent; overflow:hidden; }
.nsc-pr__in{
  position:relative; z-index:1;
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px);
  /* pulled up close to the honeycomb: one band, not two */
  padding-block:clamp(14px,2vw,30px) clamp(44px,5.5vw,84px);
}
.nsc-pr__card{ flex:0 0 clamp(196px,21vw,248px); }
.nsc-pr__link{
  display:block; height:100%;
  background:#fff; color:var(--m-ink); text-decoration:none;
  border:1px solid var(--m-rule); border-radius:3px; overflow:hidden;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.nsc-pr__link:hover{
  border-color:var(--m-ink);
  box-shadow:0 14px 30px rgba(21,24,29,.13);
  transform:translateY(-3px);
}
.nsc-pr__shot{
  position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
  background:#EDF0F4; color:#9AA5B1;
}
.nsc-pr__shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .3s ease;
}
.nsc-pr__link:hover .nsc-pr__shot img{ transform:scale(1.07); }
.nsc-pr__link:hover .nsc-mid__ticks i{ border-color:var(--m-acc); }
.nsc-mid__noshot{ position:absolute; inset:0; display:grid; place-items:center; }
.nsc-mid__noshot svg{ width:72%; height:auto; }
.nsc-pr__no{
  position:absolute; top:0; inset-inline-end:0;
  font-family:var(--m-mono); font-size:10.5px; letter-spacing:.08em;
  color:#0E1115; background:var(--m-acc);
  padding:3px 8px 4px; border-end-start-radius:3px;
}
.nsc-pr__body{
  display:block; position:relative;
  padding:14px 15px 15px;
  border-top:1px solid var(--m-rule);
  background:#fff;
  transition:background-color .22s ease, color .22s ease;
}
.nsc-pr__link:hover .nsc-pr__body{ background:var(--m-acc); }
.nsc-pr__glyph{ display:block; color:var(--m-accink); transition:color .22s ease; }
.nsc-pr__glyph svg{ width:19px; height:19px; }
.nsc-pr__link:hover .nsc-pr__glyph{ color:#15181D; }
.nsc-pr__name{
  display:block; margin-top:5px;
  font-size:14px; font-weight:700; line-height:1.75; color:var(--m-ink);
  min-height:3.5em;
}
.nsc-pr__go{
  display:flex; align-items:center; gap:7px; margin-top:8px;
  font-size:11.5px; font-weight:700; color:var(--m-soft);
  transition:color .22s ease;
}
.nsc-pr__link:hover .nsc-pr__go{ color:#15181D; }
.nsc-pr__go svg{ flex:none; transition:transform .22s ease; }
.nsc-pr__link:hover .nsc-pr__go svg{ transform:translateX(-4px); }
[data-lang="en"] .nsc-pr__link:hover .nsc-pr__go svg{ transform:translateX(4px); }

/* ============================================================ 3. why us == */
.nsc-wy{ background:#15181D; overflow:hidden; }
.nsc-wy::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(231,236,242,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(231,236,242,.035) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 100%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 100%);
}
.nsc-wy__wires{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 95% at 50% 40%, #000 30%, transparent 100%);
  mask-image:radial-gradient(120% 95% at 50% 40%, #000 30%, transparent 100%);
}
.nsc-wy__wire{ position:absolute; display:block; }
.nsc-wy__wire--h{
  height:1px; width:190px; inset-inline-start:-190px; top:var(--t);
  background:linear-gradient(to right, rgba(255,198,30,0), rgba(255,198,30,.75) 62%, rgba(255,255,255,.9) 88%, rgba(255,198,30,0));
  animation:nsc-wy-runh var(--dur,15s) linear var(--del,0s) infinite;
}
.nsc-wy__wire--v{
  width:1px; height:150px; top:-150px; inset-inline-start:var(--l);
  background:linear-gradient(to bottom, rgba(255,198,30,0), rgba(255,198,30,.6) 62%, rgba(255,255,255,.85) 88%, rgba(255,198,30,0));
  animation:nsc-wy-runv var(--dur,16s) linear var(--del,0s) infinite;
}
@keyframes nsc-wy-runh{
  0%{ transform:translateX(0); opacity:0 } 8%{ opacity:1 } 92%{ opacity:1 }
  100%{ transform:translateX(calc(100vw + 380px)); opacity:0 }
}
@keyframes nsc-wy-runv{
  0%{ transform:translateY(0); opacity:0 } 10%{ opacity:1 } 90%{ opacity:1 }
  100%{ transform:translateY(calc(100% + 300px)); opacity:0 }
}
.nsc-wy__in{
  position:relative; z-index:1;
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px);
  padding-block:clamp(44px,5.5vw,84px);
}
.nsc-wy__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.3vw,18px); }
.nsc-wy__card{
  position:relative; overflow:hidden;
  background:var(--m-card); border:1px solid var(--m-drule); border-radius:3px;
  padding:24px 19px 22px;
  transition:background-color .24s ease, border-color .24s ease, transform .24s ease;
}
.nsc-wy__card:hover{ background:#20262F; border-color:#39414D; transform:translateY(-3px); }
.nsc-wy__edge{
  position:absolute; inset-block-start:0; inset-inline:0; height:2px;
  background:var(--m-acc);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
[data-lang="en"] .nsc-wy__edge{ transform-origin:left; }
.nsc-wy__card:hover .nsc-wy__edge{ transform:scaleX(1); }
.nsc-wy__icon{ display:block; color:var(--m-acc); }
.nsc-wy__icon svg{ width:27px; height:27px; }
.nsc-wy__t{ margin:13px 0 6px; font-size:15px; font-weight:800; line-height:1.7; color:#fff; }
.nsc-wy__d{ font-size:12.5px; line-height:1.95; color:var(--m-dsoft); }
.nsc-wy__no{
  position:absolute; inset-block-end:-14px; inset-inline-end:6px;
  font-family:var(--m-mono); font-size:52px; font-weight:700; line-height:1;
  color:#fff; opacity:.055; pointer-events:none;
}

/* ===================================================== 4. installations == */
.nsc-pj{ background:var(--m-plate); overflow:hidden; }
.nsc-pj__in{
  position:relative; z-index:1;
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px);
  padding-block:clamp(44px,5.5vw,84px);
}
.nsc-pj__card{ flex:0 0 clamp(250px,29vw,372px); }
.nsc-pj__fig{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:16/10; border-radius:3px;
  background:#E4E9EE;
  border:1px solid var(--m-rule);
}
.nsc-pj__fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.nsc-pj__card:hover .nsc-pj__fig img{ transform:scale(1.06); }
.nsc-pj__card:hover .nsc-mid__ticks i{ border-color:var(--m-acc); }
.nsc-pj__cap{
  position:absolute; inset-inline:0; inset-block-end:0;
  display:flex; align-items:center; gap:10px;
  padding:26px 14px 12px;
  background:linear-gradient(to top, rgba(10,13,17,.86), rgba(10,13,17,0));
  color:#fff;
}
.nsc-pj__no{
  font-family:var(--m-mono); font-size:11px; letter-spacing:.09em; color:var(--m-acc);
  border:1px solid rgba(255,198,30,.45); border-radius:2px; padding:1px 7px 2px;
  flex:none;
}
.nsc-pj__txt{ font-size:12.5px; font-weight:700; line-height:1.6; }

/* =========================================================== 5. the call = */
.nsc-ct{ background:var(--m-acc); color:#1A1508; overflow:hidden; }
.nsc-ct::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(-45deg, rgba(42,34,6,.055) 0 1px, transparent 1px 12px);
}
.nsc-ct::after{
  content:""; position:absolute; inset-inline:0; top:0; height:1px;
  background-image:repeating-linear-gradient(to right, rgba(42,34,6,.4) 0 6px, transparent 6px 12px);
}
.nsc-ct__in{
  position:relative; z-index:1;
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px);
  padding-block:clamp(30px,3.6vw,48px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(18px,3vw,40px); flex-wrap:wrap;
}
.nsc-ct__copy{ flex:1 1 380px; min-width:0; }
.nsc-ct__title{ margin:0 0 6px; font-size:clamp(19px,2.3vw,28px); font-weight:800; line-height:1.6; }
.nsc-ct__title em{ font-style:normal; color:#5E4A05; }
.nsc-ct__sub{ font-size:clamp(12.5px,1.1vw,14.5px); line-height:1.9; color:#3A2E08; max-width:56ch; }
.nsc-ct__acts{ display:flex; gap:10px; flex-wrap:wrap; flex:none; }
.nsc-ct__b{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:2px;
  font-size:13.5px; font-weight:700; text-decoration:none;
  border:1px solid #1A1508;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.nsc-ct__b svg{ flex:none; }
.nsc-ct__b--solid{ background:#15181D; color:#FFC61E; }
.nsc-ct__b--solid:hover{ background:#000; transform:translateY(-2px); }
.nsc-ct__b--ghost{ background:transparent; color:#1A1508; }
.nsc-ct__b--ghost:hover{ background:rgba(26,21,8,.09); transform:translateY(-2px); }
/* A drawing, not a backdrop: it sits in the row between the words and the
   buttons, so it can never end up underneath either of them. */
.nsc-ct__art{
  flex:0 0 auto; order:2;
  height:clamp(80px,8.5vw,118px); width:auto;
  opacity:.6; pointer-events:none;
}
/* The drawing runs the same cycle the machine does: the nozzle comes down, the
   can fills, the full can leaves the frame and an empty one arrives. Six
   seconds, slow enough to read as a diagram rather than a cartoon.
   transform-box:view-box makes every translate below a user-unit of the
   viewBox, so the numbers match the coordinates in the path data. */
.nsc-ct__noz,.nsc-ct__jet,.nsc-ct__lvl,.nsc-ct__can,.nsc-ct__box{ transform-box:view-box; }

.nsc-ct__noz{ animation:nsc-ct-noz 6s linear infinite; }
@keyframes nsc-ct-noz{
  0%,3%{ transform:translateY(0) } 8%,64%{ transform:translateY(5px) } 70%,100%{ transform:translateY(0) }
}
.nsc-ct__jet{ transform-origin:100px 49px; transform:scaleY(0); animation:nsc-ct-jet 6s linear infinite; }
@keyframes nsc-ct-jet{
  0%,8%{ transform:scaleY(0) } 11%,62%{ transform:scaleY(1) } 65%,100%{ transform:scaleY(0) }
}
.nsc-ct__lvl{ animation:nsc-ct-lvl 6s cubic-bezier(.35,0,.65,1) infinite; }
@keyframes nsc-ct-lvl{
  0%,10%{ transform:translateY(43px) } 62%,78%{ transform:translateY(2px) } 78.5%,100%{ transform:translateY(43px) }
}
.nsc-ct__can{ animation:nsc-ct-can 6s cubic-bezier(.5,0,.4,1) infinite; }
@keyframes nsc-ct-can{
  0%,70%{ transform:translateX(0); opacity:1 }
  74%{ opacity:1 }
  78%{ transform:translateX(-120px); opacity:0 }
  78.5%{ transform:translateX(120px); opacity:0 }
  88%,100%{ transform:translateX(0); opacity:1 }
}
/* the belt and the dimension line are dashes marching along their own path */
.nsc-ct__belt{ animation:nsc-ct-dash 2.4s linear infinite; }
.nsc-ct__dim{ animation:nsc-ct-dash 3.6s linear infinite; }
@keyframes nsc-ct-dash{ to{ stroke-dashoffset:-26 } }
/* a finished carton, travelling out along the belt */
.nsc-ct__box{ animation:nsc-ct-box 6s linear infinite; }
@keyframes nsc-ct-box{
  0%{ transform:translateX(0); opacity:0 }
  9%{ opacity:1 }
  84%{ opacity:1 }
  100%{ transform:translateX(-44px); opacity:0 }
}
.nsc-ct__acts{ order:3; }

/* ============================================================ responsive = */
@media (max-width:1080px){
  .nsc-st__in{ grid-template-columns:repeat(3,1fr); row-gap:26px; }
  .nsc-st__cell:nth-child(5n+1)::before{ content:""; }
  .nsc-st__cell:nth-child(3n+1)::before{ content:none; }
  .nsc-wy__grid{ grid-template-columns:repeat(3,1fr); }
  .nsc-ct__art{ display:none; }
}
@media (max-width:720px){
  .nsc-st__in{ grid-template-columns:repeat(2,1fr); }
  .nsc-st__cell:nth-child(3n+1)::before{ content:""; }
  .nsc-st__cell:nth-child(2n+1)::before{ content:none; }
  /* an odd cell left alone on the last row is centred rather than orphaned */
  .nsc-st__cell:last-child:nth-child(odd){ grid-column:1/-1; }
  /* flex-basis measures the main axis, and the main axis here is now vertical:
     leaving 380px on it would set the copy block's HEIGHT, not its width */
  .nsc-ct__copy{ flex:0 1 auto; }
  .nsc-wy__grid{ grid-template-columns:repeat(2,1fr); }
  .nsc-pr__card{ flex-basis:min(74vw,236px); }
  .nsc-pj__card{ flex-basis:min(84vw,330px); }
  .nsc-ct__in{ flex-direction:column; align-items:stretch; text-align:start; }
  .nsc-ct__acts{ width:100%; }
  .nsc-ct__b{ flex:1 1 auto; justify-content:center; }
}
@media (max-width:430px){
  .nsc-wy__grid{ grid-template-columns:1fr; }
  .nsc-st__fig{ margin-top:4px; }
  .nsc-st__note{ display:none; }
}

/* ------------------------------------------------------------ off screen ---
   Same rule as the honeycomb: nothing decorative animates where nobody can
   see it. Added by script only, so a page without script is unchanged. */
.nsc-wy.is-idle .nsc-wy__wire,
.nsc-ct.is-idle .nsc-ct__noz,
.nsc-ct.is-idle .nsc-ct__jet,
.nsc-ct.is-idle .nsc-ct__lvl,
.nsc-ct.is-idle .nsc-ct__can,
.nsc-ct.is-idle .nsc-ct__belt,
.nsc-ct.is-idle .nsc-ct__dim,
.nsc-ct.is-idle .nsc-ct__box{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  .nsc-ct__noz,.nsc-ct__jet,.nsc-ct__lvl,.nsc-ct__can,.nsc-ct__belt,.nsc-ct__dim,.nsc-ct__box{ animation:none; }
  .nsc-ct__jet{ transform:scaleY(1); }
  .nsc-ct__lvl{ transform:translateY(16px); }
  .nsc-wy__wire{ animation:none; opacity:0; }
  .nsc-pr__link,.nsc-pr__shot img,.nsc-pj__fig img,.nsc-wy__card,.nsc-wy__edge,.nsc-ct__b{ transition:none; }
  .nsc-wy__edge{ transform:scaleX(1); }
}