/*
Theme Name: Nextsilicon
Author: Nextsilicon
Version: 1.0.0
*/

@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 100;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-ThinItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 200;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-ExtraLightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-MediumItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-SemiBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-ExtraBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-BlackItalic.ttf') format('truetype');
}

@font-face {
  font-family: "NeueHaasGroteskText W01";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/NHaasGroteskText-Regular.woff2') format('woff2'),
       url('assets/fonts/NHaasGroteskText-Regular.woff') format('woff');
}
@font-face {
  font-family: "NeueHaasGroteskText W01";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/NHaasGroteskText-Bold.woff2') format('woff2'),
       url('assets/fonts/NHaasGroteskText-Bold.woff') format('woff');
}

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  --clr-bg:           #000000;
  --clr-bg-alt:       #0a0a0a;
  --clr-bg-section:   #080808;
  --clr-accent:       #5700ff;
  --clr-accent-hover: #7B45FF;
  --clr-accent-soft:  rgba(87, 0, 255, 0.15);
  --clr-text:         #ffffff;
  --clr-text-sec:     #f5f5f5;
  --clr-text-muted:   #cccccc;
  --clr-border:       rgba(233, 233, 233, 0.15);
  --font-display:     'Barlow Condensed', sans-serif;
  --font-body:        'NeueHaasGroteskText W01', 'Inter', sans-serif;
  --max-w:            1170px;
  --header-h:         80px;
  --section-py:       100px;
}

@media (min-width: 1920px) {
  :root { --max-w: 1400px; }
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
}
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }

/* ── Container ──────────────────────────────────────────────────── */
.ns-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0;
}

/* ── Display / Heading type ─────────────────────────────────────── */
h1, .ns-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 100px;
  line-height: 80px;
  text-transform: uppercase;
  letter-spacing: 0;
}
h2, h3, .ns-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 60px;
  line-height: 57px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.ns-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .25s, border-color .25s, color .25s;
  white-space: nowrap;
}
.ns-btn--filled {
  padding: 12px 36px;
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: #fff;
}
.ns-btn--filled:hover {
  background: var(--clr-accent-hover);
  border-color: var(--clr-accent-hover);
}
.ns-btn--outline {
  padding: 12px 36px;
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.ns-btn--outline:hover {
  background: #fff;
  color: #000;
}
/* Underline-text style for content CTAs */
.ns-btn--text {
  padding: 0 0 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #e9e9e9;
  color: #f5f5f5;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2px;
  transition: border-color .2s, color .2s;
}
.ns-btn--text:hover {
  border-color: var(--clr-accent);
  color: #fff;
}

/* ── Header ─────────────────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(47, 47, 59, 0);
  border-bottom: 1px solid rgba(233, 233, 233, 0);
  transition: background .1s linear, border-color .1s linear;
}
.ns-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 50px;
  gap: 40px;
}
.ns-logo svg {
  height: 26px;
  width: auto;
  fill: #fff;
  display: block;
}
.ns-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.ns-nav a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--clr-text-sec);
  transition: color .2s;
}
.ns-nav a:hover { color: #fff; }

/* Filled purple CTA — used for GET IN TOUCH, WATCH NOW, etc. */
.ns-btn--cta {
  display: inline-block;
  padding: 14px 40px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--clr-accent);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.ns-btn--cta:hover { background: var(--clr-accent-hover); }

/* Compact variant for the header */
.ns-btn--cta.ns-btn--sm {
  padding: 10px 20px;
  font-size: 15px;
  letter-spacing: 3.6px;
}

.ns-hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.ns-hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  transition: all .3s;
}
.ns-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.ns-hamburger.open span:nth-child(2) { opacity: 0; }
.ns-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.ns-mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  background: var(--clr-accent);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 60px;
  gap: 0;
  overflow-y: auto;
}
.ns-mobile-nav.open { display: flex; }
.ns-mobile-nav a {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  padding: 14px 24px;
  border-bottom: none;
  width: 100%;
  text-align: center;
  transition: opacity .2s;
}
.ns-mobile-nav a:hover { opacity: 0.8; }
.ns-mobile-nav a.active {
  border: 2px solid #fff;
}
/* GET IN TOUCH button inside mobile nav */
.ns-mobile-nav .ns-btn--cta {
  margin-top: 32px;
  background: #fff;
  color: #000;
  width: 100%;
  text-align: center;
  display: block;
  padding: 16px 24px;
}
.ns-mobile-nav .ns-btn--cta:hover { background: #f0f0f0; }

/* ── Hero ───────────────────────────────────────────────────────── */
.ns-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.ns-hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ns-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.75) 100%
  );
  z-index: 1;
}
.ns-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  padding: 0 60px;
  text-align: center;
}
.ns-hero-content h1 {
  margin-bottom: 28px;
  color: #fff;
}
.ns-hero-content > p {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--clr-text-sec);
  max-width: 680px;
  margin: 0 auto 16px;
  line-height: 28px;
}

/* Hero label — MAVERICK-2 × NEXTSILICON */
.ns-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.ns-hero-label-logo {
  height: 27px;
  width: auto;
  filter: brightness(0) invert(1);
}
.ns-hero-label-sep {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 2.25px;
  line-height: 1.2;
}
.ns-hero-label-brand {
  height: 33px;
  width: auto;
  fill: #fff;
  display: block;
  flex-shrink: 0;
}

/* "See the benchmarks. See the future." */
.ns-hero-tagline {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--clr-text-muted);
  margin: 0 auto 36px;
  line-height: 28px;
}

/* Hero brand card — top-right MAVERICK-2 / NEXTSILICON */

/* ── Section Base ───────────────────────────────────────────────── */
.ns-section { padding: var(--section-py) 0; }
.ns-section--alt { background: var(--clr-bg-alt); }
.ns-section--dark { background: var(--clr-bg-section); }

/* Light sections: silver-gray background, dark text */
.ns-section--light {
  background: #f2f2f2;
  overflow: hidden;
}
/* White sections: pure white background, dark text */
.ns-section--white {
  background: #ffffff;
  overflow: hidden;
}
.ns-section--light .ns-tag,
.ns-section--white .ns-tag  { color: var(--clr-accent); }
.ns-section--light .ns-heading,
.ns-section--white .ns-heading { color: #1a1a1a; }
.ns-section--light .ns-body,
.ns-section--white .ns-body { color: rgba(0, 0, 0, 0.87); }
.ns-section--light .ns-btn--text,
.ns-section--white .ns-btn--text { color: #1a1a1a; border-bottom-color: #1a1a1a; }

.ns-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.ns-split--flip .ns-split-text { order: 2; }
.ns-split--flip .ns-split-visual { order: 1; }
.ns-split--wide-visual {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 0;
  align-items: center;
}
.ns-split--wide-visual .ns-split-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ns-split--wide-visual .ns-split-visual {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ns-split--wide-visual .ns-split-text h2 { width: 82%; margin: 0; }
.ns-mav2-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.ns-tag {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 3.3px;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: 0;
}
.ns-heading {
  /* inherits h2 global rule: italic, 60px, weight 900 */
  color: #fff;
  margin-bottom: 16px;
}
.ns-body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--clr-text-muted);
  line-height: 24px;
  margin-bottom: 36px;
}
.ns-body:last-child { margin-bottom: 0; }

.ns-img-glow {
  filter: drop-shadow(0 0 50px rgba(87, 0, 255, 0.25));
}

/* ── Product video (spinning) ───────────────────────────────────── */
.ns-spin-video { width: 100%; max-width: 540px; display: block; }

/* On light sections, blend the video so its black bg disappears */
.ns-section--light .ns-spin-video { mix-blend-mode: multiply; }

/* Purple accent circle (Section 2 right visual) */
.ns-split-visual--circle { display: flex; align-items: center; justify-content: flex-end; }
.ns-split-visual--right { display: flex; justify-content: flex-end; align-items: center; }
.ns-accent-circle-wrap {
  position: relative;
  width: 407px;
  height: 407px;
  flex-shrink: 0;
}
.ns-accent-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(0deg, #5700ff 0%, #7b45ff 100%);
}
.ns-circle-img {
  position: absolute;
  width: 250%;
  height: auto;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ── Section 3 chip visual (maverick2-chip.png + circles) ───────── */
.ns-split-visual--chip { justify-content: center; }
.ns-chip-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 422px;
  height: 418px;
  flex-shrink: 0;
}
.ns-chip-visual img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  height: auto;
}
.ns-chip-visual::after {
  content: '';
  position: absolute;
  width: 408px;
  height: 408px;
  background: linear-gradient(318.6deg, #5700ff 28.6%, #7b45ff 94.47%);
  border-radius: 50%;
}
.ns-chip-visual::before {
  content: '';
  position: absolute;
  width: 484px;
  height: 484px;
  background: linear-gradient(318.6deg, #5700ff 28.6%, #7b45ff 94.47%);
  border-radius: 50%;
  opacity: 0.1;
}

/* ── Hanger corner decorations (generic, reusable) ─────────────── */
.ns-hanger-top-left,
.ns-hanger-top-right,
.ns-hanger-bottom-left,
.ns-hanger-bottom-right {
  position: absolute;
  z-index: 0;
}
.ns-hanger-top-left    { top: 0;    left: 0;  }
.ns-hanger-top-right   { top: 0;    right: 0; }
.ns-hanger-bottom-left { bottom: 0; left: 0;  }
.ns-hanger-bottom-right{ bottom: 0; right: 0; }

.ns-hanger-top-left::before,
.ns-hanger-top-right::before,
.ns-hanger-bottom-left::before,
.ns-hanger-bottom-right::before {
  content: '';
  position: absolute;
  width: 143px;
  height: 143px;
  background: linear-gradient(360deg, #5700ff 0%, #7b45ff 100%);
  z-index: -1;
}
.ns-hanger-top-left::before    { top: -12px;    left: -12px;  }
.ns-hanger-top-right::before   { top: -12px;    right: -12px; }
.ns-hanger-bottom-left::before { bottom: -12px; left: -12px;  }
.ns-hanger-bottom-right::before{ bottom: -12px; right: -12px; }

.ns-hanger-top-left.grey::before,
.ns-hanger-top-right.grey::before,
.ns-hanger-bottom-left.grey::before,
.ns-hanger-bottom-right.grey::before { background: #d9d9d9; }

/* ── Canvas loop visual (450×450, light bg, video + hangers) ────── */
.ns-canvas-loop {
  position: relative;
  width: 450px;
  height: 450px;
  flex-shrink: 0;
}
.ns-canvas-loop__bg {
  position: absolute;
  inset: 0;
  background-color: #f0eff4;
}
.ns-canvas-loop iframe,
.ns-canvas-loop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 1;
  object-fit: cover;
}

/* ── Dark hanger variant (#2F2F3B) ───────────────────────────────── */
.ns-hanger-top-left.dark::before,
.ns-hanger-top-right.dark::before,
.ns-hanger-bottom-left.dark::before,
.ns-hanger-bottom-right.dark::before { background: #2f2f3b; }

/* ── Wide canvas loop (fills column, aspect-ratio-driven height) ── */
.ns-canvas-loop--wide {
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 6.8;
}

/* ── Sandia ─────────────────────────────────────────────────────── */
.ns-sandia-icon { display: block; margin: 20px 0; }
.ns-sandia-body a {
  color: var(--clr-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--clr-accent);
}

/* ── Invert hanger (transparent bg, purple outline) ─────────────── */
.ns-hanger-bottom-right--invert {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.ns-hanger-bottom-right--invert::before {
  content: '';
  position: absolute;
  width: 143px;
  height: 143px;
  background: transparent;
  border: 2px solid #5700ff;
  bottom: -12px;
  right: -12px;
  z-index: 0;
}

/* ── Arbel ──────────────────────────────────────────────────────── */
.ns-arbel-wordmark { display: block; height: 28px; width: auto; margin-bottom: 18px; }
.ns-arbel-chip {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 520 / 485;
}
.ns-arbel-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* ── Workloads ──────────────────────────────────────────────────── */
/* ── Maverick-2 overline (icon stacked above wordmark) ──────────── */
.ns-mav2-overline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

/* ── Workloads section ──────────────────────────────────────────── */
.ns-section--workloads {
  background: linear-gradient(180deg,
    #2f2f3b 0%, #2f2f3b 90%,
    #f2f2f2 90%, #f2f2f2 100%);
  padding-bottom: 0;
}
.ns-workloads-header { text-align: center; margin-bottom: 56px; }
.ns-workloads-grid {
  display: grid;
  grid-template-columns: repeat(3, min(35%, 370px));
  grid-auto-flow: row dense;
  gap: 1vw;
  justify-content: center;
}
.ns-workload-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 304px;
  height: 100%;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
}
.ns-workload-card__img {
  width: 100%;
  height: 152px;
  overflow: hidden;
}
.ns-workload-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ns-workload-card__content {
  padding: 16px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  place-content: center space-between;
}
.ns-workload-card__content h6 {
  font-family: 'NeueHaasGroteskText W01', 'Inter', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 30px !important;
  color: var(--clr-accent) !important;
  margin: 0.2em 0 8px !important;
}
.ns-workload-card__content ul {
  padding-left: 20px !important;
  margin: 5px 0 0 !important;
  color: #1a1a1a !important;
  font-family: 'NeueHaasGroteskText W01', 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.6 !important;
}
.ns-workload-card__content li { margin-bottom: 2px; }

/* ── CTA Banner ─────────────────────────────────────────────────── */
/* ── Future-proofed section ─────────────────────────────────────── */
.ns-innovations {
  position: relative;
  background: #f2f2f2;
  padding: 100px 0;
  text-align: center;
}
.ns-innovations__imgs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ns-innovations__img-left {
  position: absolute;
  width: 331px;
  height: 433px;
  left: 0;
  top: 122px;
  object-fit: contain;
}
.ns-innovations__img-right {
  position: absolute;
  width: 312px;
  height: 456px;
  right: 0;
  top: -106px;
  object-fit: contain;
}
.ns-innovations__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 570px !important;
}
.ns-innovations__overline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 3.3px;
  text-transform: uppercase;
  color: var(--clr-accent);
  display: block;
  margin-bottom: 16px;
}
.ns-innovations .ns-heading { color: #1a1a1a; }
.ns-innovations .ns-btn--cta { margin-top: 30px; }
.ns-alink {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2.25px;
  text-transform: uppercase;
  color: var(--clr-accent);
  text-decoration-line: underline;
  display: inline-block;
  margin-top: 30px;
}
.ns-alink:hover { opacity: 0.8; }

/* ── Latest News ────────────────────────────────────────────────── */
/* ── Insights (News + Blogs) ────────────────────────────────────── */
.ns-insights-wrapper { padding: 80px 0; }
.ns-insights-section { margin-bottom: 50px; overflow: hidden; }
.ns-insights__label {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 3.3px;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 25px;
}
.ns-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-auto-flow: row dense;
  gap: 1vw;
  padding-bottom: 50px;
}
.ns-insight-card {
  display: flex;
  flex-direction: column;
  height: 450px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .3s;
  overflow: hidden;
}
.ns-insight-card:hover { transform: translateY(-10px); }
.ns-insight-card__img {
  width: 100%;
  min-height: 55%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  flex-shrink: 0;
}
.ns-insight-card__details {
  width: 100%;
  height: 45%;
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  place-content: center space-between;
}
.ns-insight-card__top {
  display: flex;
  flex-direction: column;
}
.ns-insight-card__tag {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #696969;
  margin-bottom: 0;
  height: 30px;
}
.ns-insight-card__details h6 {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
}
.ns-insight-card__bottom {
  display: flex;
  flex-direction: row;
  place-content: center space-between;
  align-items: center;
}
.ns-insight-card__read-more {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--clr-accent);
  text-decoration: none;
}
.ns-insight-card__date {
  font-size: 12px;
  color: #696969;
}

/* ── Insights load-more button ───────────────────────────────────── */
.ns-insights-load-more {
  display: flex;
  justify-content: center;
  padding-top: 28px;
}

/* ── Newsletter ─────────────────────────────────────────────────── */
.ns-newsletter { background: #fff; padding: 0; }
.ns-newsletter-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 60px 0;
}
.ns-newsletter-visual {
  position: relative;
  flex: 0 0 48%;
  aspect-ratio: 1.77;
  overflow: visible;
}
.ns-newsletter-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ns-newsletter-email-icon {
  position: absolute;
  left: -13px;
  bottom: -4px;
  width: 60px;
  height: 60px;
  background: var(--clr-accent);
  display: flex;
  justify-content: center;
  align-items: center;
}
.ns-newsletter-email-icon svg { width: 70%; height: 70%; }
.ns-newsletter-text {
  flex: 0 0 48%;
  padding: 0;
  align-self: flex-start;
}
.ns-newsletter-text .ns-heading {
  color: var(--clr-accent);
  margin-top: 0;
  margin-bottom: 20px;
}
.ns-nl-body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: rgba(0,0,0,0.87);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Input — Angular Material underline style */
.ns-nl-form {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.ns-nl-form input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.42);
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(0,0,0,0.87);
  outline: none;
  transition: border-color .2s;
}
.ns-nl-form input[type="email"]::placeholder { color: rgba(0,0,0,0.56); }
.ns-nl-form input[type="email"]:focus { border-bottom-color: var(--clr-accent); }

/* SIGN UP — buttun-solid --primary from prod: #e9e9e9 bg, near-black text */
.ns-nl-form button {
  flex-shrink: 0;
  padding: 15px 30px;
  background: #e9e9e9;
  color: rgba(0,0,0,0.87);
  border: thin solid transparent;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.ns-nl-form button:hover {
  background: transparent;
  border-color: #e9e9e9;
  color: #666;
}

/* Checkbox + label */
.ns-nl-consent { display: flex; align-items: baseline; gap: 7px; }
.ns-nl-consent input[type="checkbox"] { accent-color: var(--clr-accent); flex-shrink: 0; }
.ns-nl-consent label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: rgba(0,0,0,0.87);
  line-height: 1.4;
  margin: 0;
}

/* ── Go-to-top button ───────────────────────────────────────────── */
.ns-footer-top-wrap {
  display: none;
  justify-content: center;
  padding-top: 32px;
}
.ns-footer-top {
  width: 52px;
  height: 52px;
  background: #fff;
  border: 2px solid var(--clr-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.ns-footer-top:hover { background: #f0f0f0; }

/* Mobile-only stacked logo */
.ns-footer-logo-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  order: 3;
}
.ns-footer-logo-mobile span {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
}

/* ── Footer ─────────────────────────────────────────────────────── */
#site-footer {
  background: var(--clr-accent);
  padding: 0;
  min-height: 355px;
}
.ns-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
}
/* Row 1: logo in col 1 only */
.ns-footer-logo {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 60px 0;
}
.ns-footer-logo a { display: flex; }
/* Row 2 */
.ns-footer-legal-block {
  grid-column: 1 / 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ns-footer-social-block {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ns-footer-contact-block {
  grid-column: 4;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Link row: PRIVACY POLICY. TERMS OF USE. COOKIES. */
/* Global a: Barlow Condensed 400 16px 0.5px uppercase; footer overrides weight to 600 */
.ns-footer-links { display: flex; flex-wrap: wrap; }
.ns-footer-links a {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f5f5f5;
  margin-right: 10px;
  text-decoration: none;
  transition: opacity .2s;
}
.ns-footer-links a:hover { opacity: 0.75; }

/* Copyright: caption--small = NeueHaasGroteskText 14px 400 0.5px */
.ns-footer-copy {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 26px;
  color: #f5f5f5;
}

/* FOLLOW US / LET'S TALK labels: overline = Barlow Condensed 600 18px 3.3px uppercase */
.ns-footer-social-label,
.ns-footer-contact-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 3.3px;
  text-transform: uppercase;
  color: #f5f5f5;
}
.ns-footer-social-icons { display: flex; gap: 16px; align-items: center; }
.ns-footer-social-icons a { display: flex; opacity: 0.9; transition: opacity .2s; }
.ns-footer-social-icons a:hover { opacity: 1; }
.ns-footer-social-icons img { width: 24px; height: 24px; filter: brightness(0) invert(1); }

/* Email: global a = Barlow Condensed 400 16px 0.5px uppercase */
.ns-footer-email {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f5f5f5;
  text-decoration: none;
  transition: opacity .2s;
}
.ns-footer-email:hover { opacity: 0.75; }

/* ── Video Modal ────────────────────────────────────────────────── */
#ns-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
#ns-modal.open { opacity: 1; pointer-events: all; }
.ns-modal-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ns-modal-box video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.ns-modal-close {
  position: fixed;
  top: 24px; right: 32px;
  background: none; border: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s;
  font-family: var(--font-display);
  line-height: 1;
  z-index: 10000;
}
.ns-modal-close:hover { opacity: 1; }

/* ── Scroll Reveal ──────────────────────────────────────────────── */
.ns-reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; }
.ns-reveal.in  { opacity: 1; transform: none; }
.ns-reveal-d1  { transition-delay: .1s; }
.ns-reveal-d2  { transition-delay: .2s; }
.ns-reveal-d3  { transition-delay: .3s; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --section-py: 80px; }
  .ns-header-inner { padding: 0 40px; }
  .ns-split { gap: 60px; }
}

@media (max-width: 1279px) {
  :root { --max-w: 940px; }
}

@media (max-width: 768px) {
  :root { --section-py: 64px; --header-h: 50px; }
  .ns-header-inner { padding: 0 20px; }
  .ns-nav, .ns-header-cta { display: none; }
  .ns-hamburger { display: flex; }

  h1, .ns-h1 { font-size: 60px; line-height: 50px; }
  h2, .ns-h2 { font-size: 50px; line-height: 45px; }

  /* Give container horizontal breathing room on mobile */
  .ns-container { padding: 0 20px; }

  /* Hero content: reduce side padding on mobile */
  .ns-hero-content { padding: 0 24px; }

  /* Hero label: allow wrapping and scale logos down so nothing clips */
  .ns-hero-label { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .ns-hero-label-logo  { height: 22px; }
  .ns-hero-label-brand { height: 26px; }

  .ns-split { grid-template-columns: 1fr; gap: 40px; }
  .ns-split--flip .ns-split-text { order: 1; }
  .ns-split--flip .ns-split-visual { order: 2; }

  /* Wide-visual flex layout: stack columns on mobile */
  .ns-split--wide-visual { flex-direction: column; }
  .ns-split--wide-visual .ns-split-text,
  .ns-split--wide-visual .ns-split-visual { width: 100%; }
  .ns-split--wide-visual .ns-split-text h2 { width: 100%; }

  /* Center CTA buttons in split sections */
  .ns-split-text .ns-btn--cta,
  .ns-split-text .ns-btn--text { display: block; width: fit-content; margin-left: auto; margin-right: auto; }

  /* Center all visual columns */
  .ns-split-visual,
  .ns-split-visual--circle,
  .ns-split-visual--right,
  .ns-split-visual--chip { justify-content: center; align-items: center; display: flex; }

  /* Scale down fixed-size visuals */
  .ns-accent-circle-wrap { width: 280px; height: 280px; }
  .ns-chip-visual { width: 280px; height: 280px; }
  .ns-chip-visual::after { width: 270px; height: 270px; }
  .ns-chip-visual::before { width: 320px; height: 320px; }

  /* Hide decorative side images in the innovations section */
  .ns-innovations__imgs { display: none; }

  /* Prevent grid items from stretching the track beyond viewport */
  .ns-split > * { min-width: 0; }

  /* Make canvas loop fluid so it doesn't force a 450px grid track */
  .ns-canvas-loop { width: 100%; height: auto; aspect-ratio: 1; margin: 0 auto; flex-shrink: 1; }
  .ns-canvas-loop--wide { aspect-ratio: 10 / 6.8; }

  .ns-workloads-grid { grid-template-columns: repeat(2, min(48%, 370px)); }

  /* Go-to-top button: show on mobile */
  .ns-footer-top-wrap { display: flex; }

  /* Footer: switch to centered flex column, reorder blocks */
  .ns-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px 48px;
    gap: 32px;
  }
  .ns-footer-logo          { display: none; }          /* hide horizontal wordmark */
  .ns-footer-logo-mobile   { display: flex; order: 3; }
  .ns-footer-social-block  { order: 1; }
  .ns-footer-contact-block { order: 2; }
  .ns-footer-legal-block   { order: 4; }

  /* Hide "FOLLOW US" / "LET'S TALK" labels */
  .ns-footer-social-label,
  .ns-footer-contact-label { display: none; }

  /* Larger social icons */
  .ns-footer-social-icons { gap: 28px; }
  .ns-footer-social-icons img { width: 36px; height: 36px; }

  /* Legal links: each on its own row */
  .ns-footer-links { flex-direction: column; gap: 16px; align-items: center; }

  /* Copyright */
  .ns-footer-copy { text-align: center; }
  .ns-newsletter-inner { flex-direction: column; }
  .ns-newsletter-visual { flex: none; width: 100%; aspect-ratio: 2.55; }
  .ns-newsletter-text { flex: none; width: 100%; padding: 40px 24px; }

  .ns-nl-form { flex-direction: column; }
  .ns-nl-form input[type="email"] { border-right: 1px solid var(--clr-border); border-bottom: none; }

  .ns-cta-banner { padding: 80px 0; }
}

@media (max-width: 480px) {
  /* Match production: h1 stays 60/50, h2 stays 50/45 — do not shrink further */
  .ns-workloads-grid { grid-template-columns: 1fr; }
  .ns-hero-content p { font-size: 16px; }

  /* Scale hangers down to match production (70px, −5px offset) */
  .ns-hanger-top-left::before    { width: 70px; height: 70px; top: -5px;    left: -5px;  }
  .ns-hanger-top-right::before   { width: 70px; height: 70px; top: -5px;    right: -5px; }
  .ns-hanger-bottom-left::before { width: 70px; height: 70px; bottom: -5px; left: -5px;  }
  .ns-hanger-bottom-right::before{ width: 70px; height: 70px; bottom: -5px; right: -5px; }
  .ns-hanger-bottom-right--invert::before { width: 70px; height: 70px; bottom: -5px; right: -5px; }
}

/* ── Silktide Consent Manager – match production colors ─────── */
#stcm-wrapper {
  --primaryColor: #5700ff;
  --backgroundColor: #ffffff;
  --textColor: #696969;
  --backdropBackgroundColor: #00000033;
  --backdropBackgroundBlur: 0px;
  --iconColor: #ffffff;
  --iconBackgroundColor: #5700ff;
}