/* NXT GEN WEB | PROJECT THINKING: visible animated mini-demo.
 * Keeps the original charcoal project window, brand green and existing copy.
 * This is self-running CSS, so it remains animated even when JS is delayed.
 */
body.home .ngh #experience .ngpt-showcase {
  margin: 21px 0 3px;
  border: 1px solid #668448;
  border-radius: 14px;
  overflow: hidden;
  background: #1b211d;
  box-shadow: 0 15px 34px rgba(0,0,0,.2), inset 0 0 0 1px rgba(181,230,106,.08);
  color: #fff;
  isolation: isolate;
}
body.home .ngh #experience .ngpt-showcase__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid #46533c;
  background: #283026;
}
body.home .ngh #experience .ngpt-showcase__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b5e66a;
  font: 700 9px/1.2 'Proximanova-bold',sans-serif;
  letter-spacing: .13em;
  white-space: nowrap;
}
body.home .ngh #experience .ngpt-showcase__live i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #b5e66a;
  box-shadow: 0 0 0 4px rgba(181,230,106,.14);
}
body.home .ngh #experience .ngpt-showcase__auto {
  color: #bac5b1;
  font: 700 9px/1.2 'Proximanova-bold',sans-serif;
  letter-spacing: .05em;
  text-align: right;
}
body.home .ngh #experience .ngpt-showcase__viewport {
  position: relative;
  height: 186px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 95% 0%, rgba(132,192,65,.23), transparent 53%),
    linear-gradient(135deg,#252d26,#222722 64%,#181d19);
}
body.home .ngh #experience .ngpt-scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  align-items: center;
  gap: 11px;
  padding: 20px 18px;
  opacity: 0;
  transform: translateY(17px) scale(.985);
  pointer-events: none;
}
body.home .ngh #experience .ngpt-scene--discover { opacity: 1; transform: none; }
body.home .ngh #experience .ngpt-scene__copy { min-width: 0; }
body.home .ngh #experience .ngpt-scene__copy small {
  display: block;
  color: #b5e66a;
  font: 700 10px/1.2 'Proximanova-bold',sans-serif;
  letter-spacing: .12em;
  margin: 0 0 10px;
}
body.home .ngh #experience .ngpt-scene__copy strong {
  display: block;
  color: #fff;
  font: 700 clamp(19px,1.65vw,24px)/1.13 'Proximanova-bold',sans-serif;
  letter-spacing: -.025em;
  max-width: 220px;
  text-wrap: balance;
}
body.home .ngh #experience .ngpt-scene__copy > span {
  display: block;
  color: #bdc6bc;
  font: 400 11px/1.35 'Proximanova-regular',sans-serif;
  margin: 10px 0 0;
}
body.home .ngh #experience .ngpt-search-card,
body.home .ngh #experience .ngpt-site-card,
body.home .ngh #experience .ngpt-growth-card {
  min-width: 0;
  width: 100%;
  border-radius: 8px;
  background: #f7f8f9;
  color: #202124;
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
  overflow: hidden;
}
body.home .ngh #experience .ngpt-search-card { padding: 10px; }
body.home .ngh #experience .ngpt-search-card__field {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid #cbd2c4;
  border-radius: 5px;
  background: #fff;
  color: #62676b;
  font: 700 10px/1.2 'Proximanova-bold',sans-serif;
}
body.home .ngh #experience .ngpt-search-card__glass {
  flex: 0 0 10px;
  width: 10px; height: 10px;
  border: 1.8px solid #84c041;
  border-radius: 50%;
  position: relative;
}
body.home .ngh #experience .ngpt-search-card__glass::after {
  content: '';
  position: absolute;
  width: 6px; height: 1.8px;
  top: 8px; left: 7px;
  background: #84c041;
  transform: rotate(45deg);
}
body.home .ngh #experience .ngpt-search-card__query { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.home .ngh #experience .ngpt-search-card__cursor { width: 1px; height: 10px; flex: 0 0 1px; background: #84c041; }
body.home .ngh #experience .ngpt-search-card__result {
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #e9ece7;
  padding: 6px 1px 5px;
}
body.home .ngh #experience .ngpt-search-card__result:last-child { border-bottom: 0; }
body.home .ngh #experience .ngpt-search-card__result > span:last-child { flex: 1; min-width: 0; }
body.home .ngh #experience .ngpt-search-card__check {
  flex: 0 0 12px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #e3f3d5;
  position: relative;
}
body.home .ngh #experience .ngpt-search-card__check::before {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: #84c041;
}
body.home .ngh #experience .ngpt-search-card__result b {
  display: block; font: 700 9px/1.3 'Proximanova-bold',sans-serif; color: #303432;
}
body.home .ngh #experience .ngpt-search-card__result i {
  display: block; width: 70%; max-width: 170px; height: 3px;
  margin-top: 3px; border-radius: 5px; background: #d6dcd5;
}
body.home .ngh #experience .ngpt-search-card__result:nth-child(3) i { width: 51%; }
body.home .ngh #experience .ngpt-search-card__result:nth-child(4) i { width: 62%; }
body.home .ngh #experience .ngpt-site-card__bar {
  display: flex; align-items: center; gap: 3px;
  padding: 7px 9px; border-bottom: 1px solid #e5e8e2; background:#eceef0;
}
body.home .ngh #experience .ngpt-site-card__bar i {
  width: 5px; height: 5px; border-radius: 50%; background: #b7bec1;
}
body.home .ngh #experience .ngpt-site-card__bar i:first-child { background: #84c041; }
body.home .ngh #experience .ngpt-site-card__bar span {
  flex: 1; text-align: center; color:#62676b;
  font: 700 8px/1 'Proximanova-bold',sans-serif;
}
body.home .ngh #experience .ngpt-site-card__canvas {
  display:grid;grid-template-columns:1.1fr .9fr; gap:12px; align-items:center; padding:13px 13px 15px;
}
body.home .ngh #experience .ngpt-site-card__eyebrow {
  display:block;width:33%;height:5px;background:#84c041;border-radius:3px;margin-bottom:8px;
}
body.home .ngh #experience .ngpt-site-card__title {
  display:block;width:90%;height:11px;background:#202124;border-radius:3px;margin-bottom:7px;
}
body.home .ngh #experience .ngpt-site-card__text {
  display:block;width:100%;height:4px;background:#bcc1c5;border-radius:3px;margin-bottom:5px;
}
body.home .ngh #experience .ngpt-site-card__text--short {width:70%;}
body.home .ngh #experience .ngpt-site-card__button {
  display:inline-block;padding:6px 8px;margin-top:5px;border-radius:3px;
  background:#84c041;color:#182019;
  font:700 7px/1 'Proximanova-bold',sans-serif;
}
body.home .ngh #experience .ngpt-site-card__art {
  display:flex;align-items:flex-end;gap:6px;justify-content:center;
  height:76px;border-radius:5px;background:linear-gradient(145deg,#e3f3d5,#d5e2d2);
  padding:12px 8px;
}
body.home .ngh #experience .ngpt-site-card__art span {
  display:block;width:26%;border-radius:4px 4px 0 0;background:#84c041;
  height:40%;
}
body.home .ngh #experience .ngpt-site-card__art span:nth-child(2) {height:75%;background:#679a32;}
body.home .ngh #experience .ngpt-site-card__art span:nth-child(3) {height:56%;background:#b5e66a;}
body.home .ngh #experience .ngpt-growth-card { padding: 10px 11px 8px; }
body.home .ngh #experience .ngpt-growth-card__top {
  display:flex;gap:7px;align-items:center;justify-content:space-between;
}
body.home .ngh #experience .ngpt-growth-card__top > span {
  color:#62676b;font:700 8px/1.2 'Proximanova-bold',sans-serif;letter-spacing:.05em;
}
body.home .ngh #experience .ngpt-growth-card__top b {
  color:#3e6b24;font:700 8px/1.2 'Proximanova-bold',sans-serif;
}
body.home .ngh #experience .ngpt-growth-card__top b i {
  display:inline-block;width:5px;height:5px;border-radius:50%;background:#84c041;margin-right:3px;
}
body.home .ngh #experience .ngpt-growth-card__graph {
  position:relative;height:82px;margin:7px 0 2px;overflow:hidden;
}
body.home .ngh #experience .ngpt-growth-card__grid {
  display:block;position:absolute;left:0;right:0;height:1px;background:#e0e7db;
}
body.home .ngh #experience .ngpt-growth-card__grid--a {top:25%;}
body.home .ngh #experience .ngpt-growth-card__grid--b {top:50%;}
body.home .ngh #experience .ngpt-growth-card__grid--c {top:75%;}
body.home .ngh #experience .ngpt-growth-card__graph svg {
  position:absolute;inset:0;width:100%;height:100%;
}
body.home .ngh #experience .ngpt-growth-card__area {fill:#84c04127;}
body.home .ngh #experience .ngpt-growth-card__line {
  fill:none;stroke:#6da23c;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;
}
body.home .ngh #experience .ngpt-growth-card__point {fill:#84c041;stroke:#fff;stroke-width:2;}
body.home .ngh #experience .ngpt-growth-card__labels {
  display:flex;gap:5px;justify-content:space-between;
  font:700 7px/1.2 'Proximanova-bold',sans-serif;color:#62676b;
}
body.home .ngh #experience .ngpt-showcase__progress {
  display:block;height:4px;background:#35472c;overflow:hidden;
}
body.home .ngh #experience .ngpt-showcase__progress span {
  display:block;width:100%;height:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#84c041,#b5e66a 70%,#e3f3d5);
}

/* The existing process cards now visibly follow the large animated scene. */
body.home .ngh #experience .nghd-process__path { margin:18px 0 15px;min-width:0; }
body.home .ngh #experience .nghd-process__path-node { min-width:0; }
body.home .ngh #experience .nghd-process__path-node--green { background:#383838;border-color:#555; }
body.home .ngh #experience .nghd-process__path-node--green .nghd-process__path-number {color:#b5e66a;}
body.home .ngh #experience .nghd-process__path-node--green strong { color:#fff; }
body.home .ngh #experience .nghd-process__path-node--green small {color:#dadada;}
/* Hover over a step keeps the current keyframe; this is an illustration, not a button. */

@media (prefers-reduced-motion: no-preference) {
 body.home .ngh #experience .ngpt-scene--discover {animation:ngpt-stage-first 7.2s ease-in-out infinite;}
 body.home .ngh #experience .ngpt-scene--build {animation:ngpt-stage-second 7.2s ease-in-out infinite;}
 body.home .ngh #experience .ngpt-scene--improve {animation:ngpt-stage-third 7.2s ease-in-out infinite;}
 body.home .ngh #experience .ngpt-showcase__progress span {animation:ngpt-stage-progress 7.2s linear infinite;}
 body.home .ngh #experience .ngpt-showcase__live i {animation:ngpt-stage-beacon 1.25s ease-in-out infinite;}
 body.home .ngh #experience .ngpt-search-card__cursor {animation:ngpt-stage-cursor .7s steps(1) infinite;}
 body.home .ngh #experience .ngpt-search-card__result {animation:ngpt-stage-row 7.2s ease-in-out infinite;}
 body.home .ngh #experience .ngpt-search-card__result:nth-child(3) {animation-delay:.11s;}
 body.home .ngh #experience .ngpt-search-card__result:nth-child(4) {animation-delay:.22s;}
 body.home .ngh #experience .ngpt-site-card__art span {animation:ngpt-stage-bars 1.55s ease-in-out infinite alternate;}
 body.home .ngh #experience .ngpt-site-card__art span:nth-child(2){animation-delay:.24s;}
 body.home .ngh #experience .ngpt-site-card__art span:nth-child(3){animation-delay:.46s;}
 body.home .ngh #experience .ngpt-growth-card__line {
   stroke-dasharray:290;stroke-dashoffset:290;
   animation:ngpt-stage-graph 7.2s ease-in-out infinite;
 }
 body.home .ngh #experience .ngpt-growth-card__point {animation:ngpt-stage-point 7.2s ease-in-out infinite;}
 body.home .ngh #experience .nghd-process__visual .nghd-process__path-node:nth-child(1) {
   animation:ngpt-stage-tile-first 7.2s ease-in-out infinite;
 }
 body.home .ngh #experience .nghd-process__visual .nghd-process__path-node:nth-child(3) {
   animation:ngpt-stage-tile-second 7.2s ease-in-out infinite;
 }
 body.home .ngh #experience .nghd-process__visual .nghd-process__path-node:nth-child(5) {
   animation:ngpt-stage-tile-third 7.2s ease-in-out infinite;
 }
 body.home .ngh #experience .nghd-process__path-arrow {animation:ngpt-stage-arrow 1.2s ease-in-out infinite;}
 body.home .ngh #experience .nghd-process__outcome-icon {animation:ngpt-stage-finish 7.2s ease-in-out infinite;}
 @keyframes ngpt-stage-first {
   0%,3%,26% {opacity:1;transform:translateY(0) scale(1);}
   30%,96% {opacity:0;transform:translateY(-12px) scale(.98);}
   100% {opacity:1;transform:translateY(0) scale(1);}
 }
 @keyframes ngpt-stage-second {
   0%,27% {opacity:0;transform:translateY(15px) scale(.98);}
   33%,58% {opacity:1;transform:translateY(0) scale(1);}
   63%,100% {opacity:0;transform:translateY(-12px) scale(.98);}
 }
 @keyframes ngpt-stage-third {
   0%,59% {opacity:0;transform:translateY(15px) scale(.98);}
   65%,94% {opacity:1;transform:translateY(0) scale(1);}
   100% {opacity:0;transform:translateY(-12px) scale(.98);}
 }
 @keyframes ngpt-stage-progress {
   0% {transform:scaleX(0);}
   98% {transform:scaleX(1);}
   100% {transform:scaleX(0);}
 }
 @keyframes ngpt-stage-beacon {
   0%,100% {opacity:.65;box-shadow:0 0 0 1px #b5e66a22;}
   50% {opacity:1;box-shadow:0 0 0 5px #b5e66a38,0 0 14px #b5e66a88;}
 }
 @keyframes ngpt-stage-cursor {0%,49%{opacity:1;}50%,100%{opacity:0;}}
 @keyframes ngpt-stage-row {
   0% {transform:translateX(-12px);opacity:0;}
   10%,28% {transform:translateX(0);opacity:1;}
   35%,100% {transform:translateX(0);opacity:1;}
 }
 @keyframes ngpt-stage-bars {
   0% {transform:scaleY(.65);transform-origin:bottom;}
   100% {transform:scaleY(1);transform-origin:bottom;}
 }
 @keyframes ngpt-stage-graph {
   0%,62% {stroke-dashoffset:290;}
   83%,98% {stroke-dashoffset:0;}
   100% {stroke-dashoffset:290;}
 }
 @keyframes ngpt-stage-point {
   0%,78% {opacity:0;transform:scale(.4);transform-origin:237px 8px;}
   86%,96% {opacity:1;transform:scale(1.18);transform-origin:237px 8px;}
   100% {opacity:0;transform:scale(.4);transform-origin:237px 8px;}
 }
 @keyframes ngpt-stage-tile-first {
   0%,5%,23% {background:#84c041;border-color:#b5e66a;box-shadow:0 0 0 2px #b5e66a8c;transform:translateY(-3px);}
   29%,98% {background:#383838;border-color:#555;box-shadow:none;transform:none;}
   100% {background:#84c041;border-color:#b5e66a;box-shadow:0 0 0 2px #b5e66a8c;transform:translateY(-3px);}
 }
 @keyframes ngpt-stage-tile-second {
   0%,27% {background:#383838;border-color:#555;box-shadow:none;transform:none;}
   34%,57% {background:#84c041;border-color:#b5e66a;box-shadow:0 0 0 2px #b5e66a8c;transform:translateY(-3px);}
   63%,100% {background:#383838;border-color:#555;box-shadow:none;transform:none;}
 }
 @keyframes ngpt-stage-tile-third {
   0%,61% {background:#383838;border-color:#555;box-shadow:none;transform:none;}
   66%,92% {background:#84c041;border-color:#b5e66a;box-shadow:0 0 0 2px #b5e66a8c;transform:translateY(-3px);}
   100% {background:#383838;border-color:#555;box-shadow:none;transform:none;}
 }
 /* Ensures all highlighted step labels remain dark on the green tile. */
 @keyframes ngpt-stage-arrow {0%,100%{opacity:.6;}50%{opacity:1;filter:brightness(1.5);}}
 @keyframes ngpt-stage-finish {0%,80%,100%{transform:scale(1);box-shadow:none;}85%,94%{transform:scale(1.13);box-shadow:0 0 0 6px #84c04130;}}
 body.home .ngh #experience .nghd-process__path-node strong,
 body.home .ngh #experience .nghd-process__path-node small,
 body.home .ngh #experience .nghd-process__path-node .nghd-process__path-number {
   color:#fff;
 }
 body.home .ngh #experience .nghd-process__path-node small {color:#f2f2f2;}
 body.home .ngh #experience .nghd-process__path-node .nghd-process__path-number {color:#def3c5;}
}
/* A fallback still looks like a polished mini-demo in reduced-motion mode. */
@media (prefers-reduced-motion: reduce) {
 body.home .ngh #experience .ngpt-scene--discover {opacity:1;transform:none;}
 body.home .ngh #experience .ngpt-scene--build,
 body.home .ngh #experience .ngpt-scene--improve {opacity:0;}
 body.home .ngh #experience .nghd-process__path-node--green {background:#84c041;border-color:#84c041;}
 body.home .ngh #experience .nghd-process__path-node--green strong,
 body.home .ngh #experience .nghd-process__path-node--green small,
 body.home .ngh #experience .nghd-process__path-node--green .nghd-process__path-number {color:#202124;}
}
@media(max-width:1090px) {
 body.home .ngh #experience .ngpt-scene {grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);}
 body.home .ngh #experience .ngpt-scene__copy strong {font-size:18px;}
}
@media(max-width:600px) {
 body.home .ngh #experience .ngpt-showcase {margin-top:17px;}
 body.home .ngh #experience .ngpt-showcase__auto {font-size:8px;letter-spacing:0;}
 body.home .ngh #experience .ngpt-showcase__live {font-size:8px;}
 body.home .ngh #experience .ngpt-showcase__viewport {height:237px;}
 body.home .ngh #experience .ngpt-scene {display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:16px;}
 body.home .ngh #experience .ngpt-scene__copy strong {font-size:19px;max-width:none;}
 body.home .ngh #experience .ngpt-scene__copy small {margin-bottom:4px;}
 body.home .ngh #experience .ngpt-scene__copy > span {margin-top:5px;}
 body.home .ngh #experience .ngpt-search-card,
 body.home .ngh #experience .ngpt-site-card,
 body.home .ngh #experience .ngpt-growth-card {max-width:100%;}
 body.home .ngh #experience .ngpt-site-card__canvas {padding:10px 12px;}
 body.home .ngh #experience .ngpt-site-card__art {height:56px;}
 body.home .ngh #experience .ngpt-growth-card__graph {height:70px;}
 body.home .ngh #experience .nghd-process__path {margin:17px 0 14px;}
}
/* Keep the three phases synchronized even after the scroll observer activates.
 * These selectors intentionally outrank the earlier, subtler effect. */
@media (prefers-reduced-motion: no-preference) {
  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node:nth-child(1) {
    animation:ngpt-stage-tile-first 7.2s ease-in-out infinite;
  }
  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node:nth-child(3) {
    animation:ngpt-stage-tile-second 7.2s ease-in-out infinite;
  }
  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node:nth-child(5) {
    animation:ngpt-stage-tile-third 7.2s ease-in-out infinite;
  }
  body.home .ngh #experience .nghd-process__path-node:nth-child(1) > :is(strong,small,span) {
    animation: ngpt-stage-ink-first 7.2s linear infinite;
  }
  body.home .ngh #experience .nghd-process__path-node:nth-child(3) > :is(strong,small,span) {
    animation: ngpt-stage-ink-second 7.2s linear infinite;
  }
  body.home .ngh #experience .nghd-process__path-node:nth-child(5) > :is(strong,small,span) {
    animation: ngpt-stage-ink-third 7.2s linear infinite;
  }
  @keyframes ngpt-stage-ink-first {
    0%,5%,23% {color:#202124;}
    29%,98% {color:#fff;}
    100% {color:#202124;}
  }
  @keyframes ngpt-stage-ink-second {
    0%,27% {color:#fff;}
    34%,57% {color:#202124;}
    63%,100% {color:#fff;}
  }
  @keyframes ngpt-stage-ink-third {
    0%,61% {color:#fff;}
    66%,92% {color:#202124;}
    100% {color:#fff;}
  }
}
/* Don't let speed plugins or large-phone layouts shift the process rows. */
body.home .ngh #experience .ngpt-showcase *,
body.home .ngh #experience .ngpt-showcase *::before,
body.home .ngh #experience .ngpt-showcase *::after {box-sizing:border-box;}