/* =============================================================================
   NCS — "VOCE DAI MERCATI" · foglio SCOPED sotto .ncs
   Sezione del tema PAN (x-pan.it). Tutti i selettori vivono sotto `.ncs`
   per non collidere col tema. Nav / top-bar / footer NON sono qui:
   i template riusano header.php / footer.php del tema.
   Sistema cromatico a 3 zone (NORD / CENTRO / SUD) via data-zone.
   ========================================================================== */

/* ----------  TOKEN (scoped sul wrapper)  ---------- */
.ncs{
  /* Brand PAN */
  --pan:#5E955D; --pan-dark:#426c41; --pan-soft:#e7efe6;
  /* Neutri / carta */
  --paper:#FBFAF5; --paper-2:#F2EEE3;
  --ink:#181816; --muted:#6e6c64;
  --line:rgba(20,18,12,.10); --line-2:rgba(20,18,12,.18); --white:#ffffff;
  /* Zone NCS */
  --nord:#18706C;  --nord-soft:#e0efee;  --nord-ink:#0d3d3a;
  --centro:#BE552E;--centro-soft:#f6e7de;--centro-ink:#6e2e16;
  --sud:#E59A0B;   --sud-soft:#fbeecb;   --sud-ink:#6f4806;
  --estero:#3B5BA9;--estero-soft:#e5eaf6;--estero-ink:#20356b;
  /* Raggi & ombre */
  --radius:20px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 24px 60px -24px rgba(20,18,12,.32);
  --maxw:1240px;
  /* Altezza dell'header fisso del tema (#siteHeader = 64px): serve a
     scostare il contenuto e a far "appiccicare" la barra filtri sotto. */
  --ncs-header-h:64px;

  background:var(--paper);
  color:var(--ink);
  font-family:"Poppins",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6;
  padding-top:var(--ncs-header-h);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ----------  RESET LOCALE (solo dentro .ncs)  ---------- */
.ncs *{box-sizing:border-box}
.ncs img{display:block; max-width:100%}
.ncs a{color:inherit; text-decoration:none}
.ncs button{font-family:inherit; cursor:pointer; border:0; background:none}
.ncs :focus-visible{outline:3px solid var(--pan); outline-offset:2px; border-radius:4px}
.ncs h1,.ncs h2,.ncs h3,.ncs p{margin:0; padding:0}

.ncs .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ----------  ZONA: utilità colore  ----------
   data-zone può stare sul wrapper .ncs (profilo) o su elementi interni
   (card / band / toggle / part dell'hub): copriamo entrambi i casi. */
.ncs[data-zone="nord"],   .ncs [data-zone="nord"]  { --z:var(--nord);   --z-soft:var(--nord-soft);   --z-ink:var(--nord-ink) }
.ncs[data-zone="centro"], .ncs [data-zone="centro"]{ --z:var(--centro); --z-soft:var(--centro-soft); --z-ink:var(--centro-ink) }
.ncs[data-zone="sud"],    .ncs [data-zone="sud"]   { --z:var(--sud);    --z-soft:var(--sud-soft);    --z-ink:var(--sud-ink) }
.ncs[data-zone="estero"], .ncs [data-zone="estero"]{ --z:var(--estero); --z-soft:var(--estero-soft); --z-ink:var(--estero-ink) }

/* ----------  TIPOGRAFIA  ---------- */
.ncs .display{font-family:"Poppins",sans-serif; font-weight:800; letter-spacing:-.03em; line-height:.98}
.ncs .eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px}
.ncs .eyebrow::before{content:""; width:26px; height:2px; background:currentColor; border-radius:2px}

/* ----------  ZONE BADGE  ---------- */
.ncs .zone-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--z,var(--pan)); color:#fff;
  padding:6px 14px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:var(--shadow);
}
.ncs[data-zone="sud"] .zone-badge, .ncs [data-zone="sud"] .zone-badge{ color:var(--sud-ink) }
.ncs .zone-badge .dot{
  width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.85); color:var(--z);
  display:grid; place-items:center; font-size:11px; font-weight:800;
}
.ncs[data-zone="sud"] .zone-badge .dot, .ncs [data-zone="sud"] .zone-badge .dot{ background:var(--sud-ink); color:var(--sud) }

/* ----------  BOTTONI  ---------- */
.ncs .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:999px;
  font-weight:600; font-size:14.5px; letter-spacing:.01em;
  border:2px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  min-height:48px;
}
.ncs .btn:hover{transform:translateY(-2px)}
.ncs .btn-pan{background:var(--pan); color:#fff}
.ncs .btn-pan:hover{background:var(--pan-dark)}
.ncs .btn-dark{background:var(--ink); color:var(--paper)}
.ncs .btn-dark:hover{background:#000}
.ncs .btn-outline{border-color:var(--line-2); color:var(--ink)}
.ncs .btn-outline:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.ncs .btn-zone{background:var(--z,var(--pan)); color:#fff}
.ncs[data-zone="sud"] .btn-zone, .ncs [data-zone="sud"] .btn-zone{color:var(--sud-ink)}
.ncs .btn-lg{padding:16px 30px; font-size:15.5px; min-height:54px}
.ncs .btn .ar{transition:transform .2s ease}
.ncs .btn:hover .ar{transform:translateX(3px)}

/* ----------  PORTRAIT (placeholder ritratto → foto reale)  ---------- */
.ncs .portrait{position:relative; overflow:hidden; background:var(--z-soft,var(--pan-soft)); border-radius:var(--radius-sm)}
.ncs .portrait img{width:100%; height:100%; object-fit:cover; object-position:center top; position:absolute; inset:0}
.ncs .portrait .ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 70% 0%, color-mix(in srgb, var(--z,var(--pan)) 30%, transparent), transparent 60%),
    linear-gradient(160deg, var(--z,var(--pan)) 0%, color-mix(in srgb, var(--z,var(--pan)) 70%, #000) 100%);
  color:rgba(255,255,255,.92);
}
.ncs[data-zone="sud"] .portrait .ph, .ncs [data-zone="sud"] .portrait .ph{color:var(--sud-ink)}
.ncs .portrait .ph .mono{font-family:"Poppins"; font-weight:800; font-size:clamp(40px,7vw,84px); letter-spacing:-.04em; line-height:1}
.ncs .portrait .ph .cam{position:absolute; bottom:12px; left:0; right:0; text-align:center; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.7}

/* =============================================================================
   HUB — "I Volti dei Mercati"
   ========================================================================== */

/* ---- HERO ---- */
.ncs .hero{padding:64px 0 40px; position:relative; overflow:hidden}
.ncs .hero .wrap{position:relative; z-index:1}
.ncs .hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.ncs .hero h1{font-size:clamp(56px,9vw,128px); margin:18px 0 0}
.ncs .hero h1 .em{color:var(--pan)}
.ncs .hero .lede{font-size:19px; color:var(--ink); max-width:46ch; margin:26px 0 0; line-height:1.5}
.ncs .hero .lede b{font-weight:700; color:var(--pan-dark)}

/* atlante: 3 bande cliccabili = le 3 zone NCS */
.ncs .atlante{display:flex; flex-direction:column; gap:10px}
.ncs .atlante .band{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-radius:18px; color:#fff; overflow:hidden;
  text-align:left; width:100%; transition:transform .2s ease, box-shadow .2s ease; cursor:pointer;
}
.ncs .atlante .band:hover{transform:translateX(6px); box-shadow:var(--shadow-lg)}
.ncs .atlante .band[data-zone="nord"]{background:linear-gradient(110deg,var(--nord),#0f5350)}
.ncs .atlante .band[data-zone="centro"]{background:linear-gradient(110deg,var(--centro),#933e1f)}
.ncs .atlante .band[data-zone="sud"]{background:linear-gradient(110deg,var(--sud),#c47f06); color:var(--sud-ink)}
.ncs .atlante .band[data-zone="estero"]{background:linear-gradient(110deg,var(--estero),#2a4680)}
.ncs .atlante .band .zname{font-family:"Poppins"; font-weight:800; font-size:30px; letter-spacing:-.02em; line-height:1; margin-top:2px}
.ncs .atlante .band .zmkt{font-size:12.5px; opacity:.85; margin-top:7px; max-width:30ch}
.ncs .atlante .band .zcount{text-align:right}
.ncs .atlante .band .zcount .b{font-family:"Poppins"; font-weight:800; font-size:46px; letter-spacing:-.03em; line-height:.9}
.ncs .atlante .band .zcount .s{font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.85}
.ncs .atlante .cap{font-size:12.5px; color:var(--muted); text-align:center; margin-top:4px}

/* ---- L'ULTIMO REEL ---- */
.ncs .reel{padding:56px 0 24px}
.ncs .reel-card{display:grid; grid-template-columns:330px 1fr; gap:48px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:24px; padding:28px; box-shadow:var(--shadow-lg)}
.ncs .reel-video{position:relative; width:100%; aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:#0c0c0c}
.ncs .reel-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.ncs .reel-ph{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(165deg,#20301e,#0c0c0c 72%)}
.ncs .reel-ph .pan-badge{position:absolute; right:14px; top:14px; width:44px; height:44px; border-radius:50%; background:#000; color:#fff; display:grid; place-items:center; font-weight:800; font-size:15px; letter-spacing:-.03em}
.ncs .reel-ph .play{width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.92); color:#111; display:grid; place-items:center; transition:transform .2s ease}
.ncs .reel-ph .play:hover{transform:scale(1.08)}
.ncs .reel-ph .play svg{width:26px; height:26px; margin-left:3px}
.ncs .reel-ph .reel-cap{position:absolute; left:16px; right:46px; bottom:18px; font-family:"Poppins"; font-weight:700; font-size:18px; line-height:1.4; color:#fff}
.ncs .reel-ph .reel-cap b{background:#f3d2ec; color:#111; padding:2px 6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; border-radius:3px}
.ncs .reel-ph .mute{position:absolute; right:14px; bottom:16px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; font-size:13px}
.ncs .reel-info h2{font-size:clamp(30px,4vw,52px); margin:0}
.ncs .reel-info .desc{font-size:16px; color:var(--ink); margin:18px 0 0; max-width:46ch; line-height:1.55}
.ncs .reel-info .parts-label{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:28px 0 14px}
.ncs .parts{display:flex; flex-wrap:wrap; gap:10px}
.ncs .part{display:inline-flex; align-items:center; gap:11px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 18px 6px 6px; transition:border-color .18s ease, transform .18s ease}
.ncs .part:hover{border-color:var(--z,var(--pan)); transform:translateY(-2px)}
.ncs .part .av{width:36px; height:36px; border-radius:50%; background:var(--z,var(--pan)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; letter-spacing:-.02em; flex:0 0 auto}
.ncs .part[data-zone="sud"] .av{color:var(--sud-ink)}
.ncs .part b{font-weight:600; font-size:14px; display:block; line-height:1.15}
.ncs .part small{color:var(--muted); font-size:11.5px}
.ncs .reel-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}

/* ---- FILTRI sticky ---- */
.ncs .filters{position:sticky; top:var(--ncs-header-h); z-index:40; background:rgba(251,250,245,.92); backdrop-filter:blur(10px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0}
.ncs .filters .wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.ncs .toggles{display:flex; gap:8px; flex-wrap:wrap}
.ncs .toggle{display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px; border:1.5px solid var(--line-2); font-size:14px; font-weight:600; background:var(--white); transition:all .18s ease}
.ncs .toggle .pip{width:11px; height:11px; border-radius:50%; background:var(--ink)}
.ncs .toggle[data-zone="nord"] .pip{background:var(--nord)}
.ncs .toggle[data-zone="centro"] .pip{background:var(--centro)}
.ncs .toggle[data-zone="sud"] .pip{background:var(--sud)}
.ncs .toggle[data-zone="estero"] .pip{background:var(--estero)}
.ncs .toggle:hover{border-color:var(--ink)}
.ncs .toggle.active{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.ncs .toggle.active .pip{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.ncs .search{position:relative; flex:1; min-width:220px; max-width:380px; margin-left:auto}
.ncs .search input{width:100%; border:1.5px solid var(--line-2); background:var(--white); border-radius:999px; padding:11px 18px 11px 44px; font-family:inherit; font-size:14.5px; outline:none}
.ncs .search input:focus{border-color:var(--pan)}
.ncs .search .ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:15px}
.ncs .result-count{font-size:13px; color:var(--muted); white-space:nowrap}

/* ---- GRIGLIA CARD ---- */
.ncs .roster{padding:40px 0 90px}
.ncs .roster-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px}
.ncs .roster-head h2{font-size:clamp(30px,4vw,46px); margin:0}
.ncs .roster-head p{margin:8px 0 0; color:var(--muted); font-size:14.5px}
.ncs .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.ncs .card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.ncs .card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.ncs .card .pf{position:relative; aspect-ratio:4/3.4}
.ncs .card .pf .portrait{position:absolute; inset:0; border-radius:0}
.ncs .card .pf .zone-badge{position:absolute; left:14px; top:14px; z-index:2}
.ncs .card .pf .scopri{position:absolute; right:14px; bottom:14px; z-index:2; background:var(--white); color:var(--ink); border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; transform:translateY(8px); opacity:0; transition:all .22s ease; box-shadow:var(--shadow)}
.ncs .card:hover .scopri{transform:translateY(0); opacity:1}
.ncs .card .bd{padding:20px 22px 22px; display:flex; flex-direction:column; gap:3px; flex:1}
.ncs .card .az-top{display:flex; align-items:center; gap:9px; padding:16px 22px 12px; font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--z,var(--pan))}
.ncs .card .az-top::before{content:""; width:18px; height:2px; border-radius:2px; background:currentColor; flex:0 0 auto}
.ncs .card .nm{font-family:"Poppins"; font-weight:700; font-size:18px; letter-spacing:-.01em; line-height:1.15}
.ncs .card .city{margin-top:11px; font-family:"Poppins"; font-weight:800; font-size:40px; letter-spacing:-.03em; line-height:1.02; color:var(--z,var(--pan))}
.ncs .card[data-zone="sud"] .city{color:#a06a07}
.ncs .empty{display:none; text-align:center; padding:70px 0; color:var(--muted)}
.ncs .empty.show{display:block}

/* =============================================================================
   PROFILO — singolo grossista
   ========================================================================== */

/* ---- breadcrumb / back ---- */
.ncs .backbar{padding:20px 0 0}
.ncs .back{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--muted)}
.ncs .back:hover{color:var(--ink)}
.ncs .back .ar{transition:transform .2s ease}
.ncs .back:hover .ar{transform:translateX(-3px)}

/* ---- HERO editoriale ---- */
.ncs .phero{padding:26px 0 64px}
.ncs .phero-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:52px; align-items:stretch}
.ncs .phero .pf{position:relative; border-radius:var(--radius); overflow:hidden; min-height:540px; box-shadow:var(--shadow-lg)}
.ncs .phero .pf .portrait{position:absolute; inset:0; border-radius:0}
.ncs .phero .pf .tagline{position:absolute; left:18px; top:18px; z-index:2; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); color:#fff; padding:8px 14px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.ncs .phero .info{display:flex; flex-direction:column; justify-content:center}
.ncs .phero .info .zone-badge{align-self:flex-start; margin-bottom:20px}
.ncs .phero h1{font-size:clamp(44px,6.5vw,80px); margin:0}
.ncs .phero .az{font-size:17px; color:var(--muted); margin-top:16px}
.ncs .phero .city{margin-top:8px; font-family:"Poppins"; font-weight:800; font-size:clamp(30px,3.6vw,46px); letter-spacing:-.03em; line-height:1; color:var(--z,var(--pan)); display:flex; align-items:center; gap:11px}
.ncs .phero .city small{font-family:"Poppins"; font-weight:600; font-size:.42em; color:var(--muted); letter-spacing:0}
.ncs[data-zone="sud"] .phero .city{color:#a06a07}

/* ---- SECTION generica ---- */
.ncs .sec{padding:62px 0; border-top:1px solid var(--line)}
.ncs .sec.alt{background:var(--paper-2)}
.ncs .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px}
.ncs .sec-head h2{font-size:clamp(28px,3.4vw,40px); margin:0}
.ncs .sec-head .eyebrow{color:var(--z,var(--pan))}
.ncs .sec-head p{margin:6px 0 0; color:var(--muted); font-size:14.5px; max-width:42ch}

/* ---- CONTATTI + mappa ---- */
.ncs .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.ncs .contact-list{display:flex; flex-direction:column; gap:12px}
.ncs .crow{display:flex; align-items:center; gap:16px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; transition:border-color .18s ease, transform .18s ease}
.ncs .crow:hover{border-color:var(--z,var(--pan)); transform:translateX(3px)}
.ncs .crow .ico{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; font-size:20px; flex:0 0 auto; background:var(--z-soft,var(--pan-soft)); color:var(--z-ink,var(--pan-dark))}
.ncs .crow .l{font-size:12px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}
.ncs .crow .v{font-weight:600; font-size:15.5px; margin-top:1px; word-break:break-word}
.ncs .crow.wa .ico{background:#25D366; color:#fff}
.ncs .mapwrap{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); position:relative; min-height:340px; background:#e9e6db}
.ncs .mapwrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.ncs .mapwrap .map{position:absolute; inset:0; background-image:linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px); background-size:34px 34px}
.ncs .mapwrap .roads{position:absolute; inset:0}
.ncs .mapwrap .roads::before,.ncs .mapwrap .roads::after{content:""; position:absolute; background:rgba(0,0,0,.08)}
.ncs .mapwrap .roads::before{left:0; right:0; top:54%; height:10px; transform:rotate(-4deg)}
.ncs .mapwrap .roads::after{top:0; bottom:0; left:38%; width:10px; transform:rotate(6deg)}
.ncs .mapwrap .pin{position:absolute; left:50%; top:46%; transform:translate(-50%,-100%); z-index:2; text-align:center}
.ncs .mapwrap .pin .dot{width:26px; height:26px; border-radius:50% 50% 50% 0; background:var(--z,var(--pan)); transform:rotate(-45deg); margin:0 auto; box-shadow:0 6px 14px rgba(0,0,0,.3)}
.ncs .mapwrap .pin .lbl{margin-top:10px; background:#fff; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; box-shadow:var(--shadow)}
.ncs .mapwrap .open{position:absolute; right:14px; bottom:14px; z-index:3}

/* ---- CTA finale ---- */
.ncs .pcta{padding:74px 0; text-align:center; background:var(--z,var(--pan)); color:#fff; position:relative; overflow:hidden}
.ncs[data-zone="sud"] .pcta{color:var(--sud-ink)}
.ncs .pcta::before{content:""; position:absolute; right:-100px; top:-120px; width:360px; height:360px; border-radius:50%; background:rgba(255,255,255,.12)}
.ncs .pcta::after{content:""; position:absolute; left:-80px; bottom:-140px; width:300px; height:300px; border-radius:50%; background:rgba(0,0,0,.08)}
.ncs .pcta .wrap{position:relative; z-index:1}
.ncs .pcta h2{font-size:clamp(36px,5vw,68px); margin:0}
.ncs .pcta p{font-size:18px; opacity:.92; margin:16px auto 0; max-width:46ch}
.ncs .pcta .acts{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.ncs .pcta .btn-white{background:#fff; color:var(--z-ink,var(--ink))}
.ncs .pcta .btn-line{border:2px solid currentColor; color:inherit}
.ncs .pcta .btn-line:hover{background:rgba(255,255,255,.16)}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .ncs .hero-grid{grid-template-columns:1fr; gap:36px}
  .ncs .reel-card{grid-template-columns:1fr; gap:28px}
  .ncs .reel-video{max-width:300px; margin:0 auto}
  .ncs .grid{grid-template-columns:repeat(2,1fr)}
  .ncs .phero-grid{grid-template-columns:1fr; gap:30px}
  .ncs .phero .pf{min-height:420px}
  .ncs .contact-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ncs .grid{grid-template-columns:1fr}
  .ncs .filters .wrap{gap:12px}
  .ncs .search{margin-left:0; max-width:none}
  .ncs .reel-card{padding:20px}
}

/* rispetto reduced-motion */
@media (prefers-reduced-motion: reduce){
  .ncs *{animation:none !important; transition:none !important}
}
