/* Team portrait and interactive process share a studio display. */
#about.ngh-studio {
  padding-block: clamp(44px, 5vw, 76px);
  background: #f7f8f9;
  scroll-margin-top: 90px;
  overflow: clip;
}
#about .ng-studio-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  max-width: 1160px;
  margin: auto;
}
#about .ng-studio-copy { padding-block-start: clamp(14px, 3.5vw, 54px); min-width: 0; }
#about .ng-studio-copy .ngh-kicker { margin: 0 0 15px; }
#about .ng-studio-copy h2 { color: #202124; font-size: clamp(40px, 4.5vw, 68px); line-height: .99; letter-spacing: -.05em; margin: 0 0 22px; }
#about .ng-studio-copy h2 em { display: block; font-family: Georgia, serif; font-weight: normal; letter-spacing: -.055em; }
#about .ng-studio-copy p:not(.ngh-kicker) { font-size: 17px; line-height: 1.52; margin: 0 0 12px; max-width: 46ch; color: #44494c; }
#about .ng-studio-copy .ngh-link { margin-top: 8px; }
#about .ng-studio-desk { position: relative; isolation: isolate; perspective: 1200px; padding: 10px 17px 0 4px; min-width: 0; }
#about .ng-studio-desk::before {
  content: ""; position: absolute; z-index: -1; inset: -18px -22px 34px 12%;
  background-image: radial-gradient(#a1a7a9 1px,transparent 1.3px);
  background-size: 14px 14px;
  mask-image: radial-gradient(ellipse at 66% 40%, black 22%, transparent 76%);
}
#about .ng-studio-frame {
  position: relative; z-index: 1; padding: 0 7px 7px; border-radius: 17px;
  background: #202124; border: 1px solid #494c50;
  box-shadow: 2px 2px #5d6266, 4px 4px #393c40, 6px 6px #26282a, 8px 8px #84c041, 0 21px 32px -16px #1116;
  transform: rotateY(-6deg) rotateX(2deg) rotateZ(-1deg);
  transition: transform .45s ease;
}
#about .ng-studio-desk:focus-within .ng-studio-frame,
#about .ng-studio-desk:has([value="process"]:checked) .ng-studio-frame { transform: none; }
@media (hover:hover) { #about .ng-studio-desk:hover .ng-studio-frame { transform: none; } }
#about .ng-studio-switch { min-inline-size: 0; display: block; border: 0; margin: 0; padding: 0; }
#about .ng-studio-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 5px 7px 5px 10px; gap: 10px; }
#about .ng-studio-lights { display: flex; gap: 5px; }
#about .ng-studio-lights i { width: 6px; height: 6px; background: #808689; border-radius: 100%; }
#about .ng-studio-lights i:first-child { background: #b5e66a; }
#about .ng-studio-options { display: flex; gap: 2px; }
#about .ng-studio-options label { position: relative; margin: 0; display: block; cursor: pointer; }
#about .ng-studio-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#about .ng-studio-options span { display: grid; place-items: center; min-height: 38px; padding: 0 13px; border-radius: 8px; color: #fff; font: 14px/1.15 'Proximanova-bold', sans-serif; }
#about .ng-studio-options input:checked + span { background: #b5e66a; color: #202124; }
#about .ng-studio-options input:focus-visible + span { outline: 2px solid white; outline-offset: 1px; }
#about #ng-studio-team { margin: 0; }
#about #ng-studio-team img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; border-radius: 4px 4px 10px 10px; }
#about #ng-studio-method { display: none; }
#about .ng-studio-switch:has([value="process"]:checked) #ng-studio-method { display: block; }
#about .ng-studio-switch:has([value="process"]:checked) #ng-studio-team { display: none; }
#about #ng-studio-method .ngh-team-illustration { margin: 0; border: 0; border-radius: 4px 4px 10px 10px; }
#about .ng-studio-foot { display: block; margin: 0 auto; width: 35%; height: 28px; position: relative; }
#about .ng-studio-foot::before { content: ""; position: absolute; inset: 0 24% 2px; background: linear-gradient(#51565a,#aeb4b7); clip-path: polygon(13% 0,87% 0,100% 100%,0 100%); }
#about .ng-studio-foot::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; border-radius: 60% 60% 3px 3px; background: #62676b; box-shadow: 0 3px 6px #20212438; }
@media (prefers-reduced-motion: no-preference) {
  #about .ng-studio-frame { animation: ng-studio-arrive .8s ease-out both; }
  @keyframes ng-studio-arrive { from { translate: 0 10px; rotate: 1deg; } to { translate: 0 0; rotate: 0deg; } }
}
@media (max-width: 760px) {
  #about .ng-studio-layout { grid-template-columns: minmax(0,1fr); gap: 25px; }
  #about .ng-studio-copy { padding: 0; }
  #about .ng-studio-copy h2 { margin-bottom: 16px; }
  #about .ng-studio-desk { width: 100%; max-width: 525px; margin: auto; padding: 0 9px 0 1px; box-sizing: border-box; }
  #about .ng-studio-frame { transform: none; }
  #about .ng-studio-options span { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #about .ng-studio-frame { transform: none; transition: none; }
}

/* NXT GEN WEB — interactive studio animation, detailed four-stage storytelling. */
body.home .ngh .ngh-team-illustration{--ngt-duration:7s;overflow:hidden;border:1px solid #d5e0c8;border-radius:17px;background:#f6f9f1;box-shadow:0 16px 34px #24301d15}
body.home .ngh .ngh-team-intro{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 20px 18px;background:#262929;border-bottom:4px solid #84c041}
body.home .ngh .ngh-team-intro__identity{flex:1;min-width:0}
body.home .ngh .ngh-team-intro__identity .ngh-team-eyebrow{display:flex;align-items:center;gap:9px;color:#b9df88;font:10px/1.4 'Proximanova-bold',sans-serif;letter-spacing:.14em}
body.home .ngh .ngh-team-intro__identity .ngh-team-eyebrow i{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#a6d66b;box-shadow:0 0 0 5px #a6d66b25}
body.home .ngh .ngh-team-intro__identity strong{display:block;margin-top:8px;color:#fff;font:20px/1.22 'Proximanova-bold',sans-serif;letter-spacing:-.02em}
body.home .ngh .ngh-team-intro__stage{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 106px;min-height:56px;padding:7px 8px;border:1px solid #ffffff4b;border-radius:9px;background:#ffffff12;color:#fff}
body.home .ngh .ngh-team-intro__stage [data-team-stage-index]{font:20px/1.15 'Proximanova-bold',sans-serif;color:#b1dd7c}
body.home .ngh .ngh-team-intro__stage [data-team-stage-label]{display:block;margin-top:3px;font:9px/1.3 'Proximanova-bold',sans-serif;letter-spacing:.04em;text-align:center;color:#e1e6db}
body.home .ngh .ngh-team-panel{position:relative;border-bottom:1px solid #d5e0c9;overflow:hidden;background:#edf4e7}
body.home .ngh .ngh-team-panel>svg{display:block;width:100%;height:auto;max-height:none;aspect-ratio:900/560;overflow:visible}
/* The team members have distinct, visible specialties. The active role changes with each stage. */
body.home .ngh .ngt-person-label rect{transition:fill .28s,stroke .28s}
body.home .ngh .ngt-person-label text{transition:fill .28s}
body.home .ngh [data-stage=plan] .ngt-person-label--strategy rect,
body.home .ngh [data-stage=design] .ngt-person-label--creative rect,
body.home .ngh [data-stage=build] .ngt-person-label--creative rect,
body.home .ngh [data-stage=promote] .ngt-person-label--marketing rect{fill:#84c041;stroke:#659e33;stroke-width:2.2}
body.home .ngh [data-stage=plan] .ngt-person-label--strategy text,
body.home .ngh [data-stage=design] .ngt-person-label--creative text,
body.home .ngh [data-stage=build] .ngt-person-label--creative text,
body.home .ngh [data-stage=promote] .ngt-person-label--marketing text{fill:#26321f}
body.home .ngh .ngt-flow-line{opacity:.72}
body.home .ngh .ngt-desk-details{pointer-events:none}
body.home .ngh .ngt-screen-stage-text{letter-spacing:.08em}
/* Animations bring the strategy board, code, design and growth story to life. */
body.home .ngh .ngh-team-illustration.is-stage-playing .ngt-flow-line{animation:ngt-upgrade-flow 2.5s .45s both}
body.home .ngh .ngh-team-illustration.is-stage-playing .ngt-flow-arrows{animation:ngt-upgrade-pulse 2.2s .2s 2 both;transform-box:fill-box;transform-origin:center}
body.home .ngh .ngh-team-illustration.is-stage-playing .ngt-coffee-steam{animation:ngt-upgrade-steam 3.5s .2s 2 both}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=plan] .ngt-notebook{animation:ngt-upgrade-note 1s .3s both}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=design] .ngt-design-hero{animation:ngt-upgrade-slide .9s .2s both}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=design] .ngt-web-card{animation:ngt-process-rise .8s 1.1s both}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=build] .ngt-laptop-back{animation:ngt-upgrade-work 1.1s 1.5s 3 both;transform-box:fill-box;transform-origin:center}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=build] .ngt-center-mouse-hand{animation:ngt-upgrade-work .65s .8s 5 both;transform-box:fill-box;transform-origin:center}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=promote] .ngt-tablet-hands{animation:ngt-upgrade-work 1s .9s 3 both;transform-box:fill-box;transform-origin:center}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=promote] .ngt-marketing-board .ngt-bars rect{transform-box:fill-box;transform-origin:center bottom}
@keyframes ngt-upgrade-flow{0%{stroke-dasharray:6 8;stroke-dashoffset:100;opacity:.1}100%{stroke-dashoffset:0;opacity:.8}}
@keyframes ngt-upgrade-pulse{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:1;transform:scale(1.05)}}
@keyframes ngt-upgrade-steam{0%{opacity:0;transform:translateY(3px)}50%{opacity:.75}100%{opacity:0;transform:translateY(-7px)}}
@keyframes ngt-upgrade-note{0%{opacity:.4;transform:translateY(9px)}100%{opacity:1;transform:translateY(0)}}
@keyframes ngt-upgrade-slide{0%{opacity:.45;transform:translateY(-12px)}100%{opacity:1;transform:translateY(0)}}
@keyframes ngt-upgrade-work{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* Stage controls behave as four real story chapters with a filled progress indicator. */
body.home .ngh .ngh-team-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:13px 14px;background:#fff;border-top:0}
body.home .ngh .ngh-team-stages button{position:relative;min-width:0;min-height:100px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;padding:13px 11px 16px;margin:0;border:1px solid #d8e3d0;border-radius:9px;background:#f6f9f2;color:#303030;text-align:left;font:15px/1.25 'Proximanova-bold',sans-serif;transition:background .2s,border-color .2s,color .2s,transform .2s}
body.home .ngh .ngh-team-stages button[aria-pressed=true]{background:#292b2a;color:#fff;border-color:#292b2a;box-shadow:0 6px 16px #00000022}
body.home .ngh .ngh-team-stages button[aria-pressed=false]:hover{background:#e9f3df;border-color:#a6cb85}
body.home .ngh .ngh-team-stages button .ngh-team-step-number{display:flex!important;align-items:center;justify-content:space-between;width:100%;font:11px/1 'Proximanova-bold',sans-serif;letter-spacing:.06em;opacity:.9}
body.home .ngh .ngh-team-stages button .ngh-team-step-number span{display:block!important;font-size:18px;line-height:1;color:inherit;opacity:.85}
body.home .ngh .ngh-team-stages button .ngh-team-step-name{display:block!important;font:18px/1.22 'Proximanova-bold',sans-serif;color:inherit;margin-top:6px}
body.home .ngh .ngh-team-stages button small{display:block;font:11px/1.28 'Proximanova-regular',sans-serif;color:#5a5a5a;text-align:left}
body.home .ngh .ngh-team-stages button[aria-pressed=true] small{color:#d8e2d2}
body.home .ngh .ngh-team-stages .ngh-team-stage-progress{height:4px;background:#a6d66b;left:0;right:0;bottom:0;border-radius:0 0 8px 8px}
/* More informative chapter panel — deliverables and a distinct result, not repeated marketing slogans. */
body.home .ngh .ngh-team-caption{display:block;height:auto;min-height:0;padding:22px 23px 22px;background:#fff}
body.home .ngh .ngh-team-story{min-height:0}
body.home .ngh .ngh-team-story__overline{display:block;margin-bottom:10px;color:#5c8435;font:10px/1.35 'Proximanova-bold',sans-serif;letter-spacing:.13em}
body.home .ngh .ngh-team-story>strong{display:block;color:#262626;font:clamp(21px,2.05vw,26px)/1.18 'Proximanova-bold',sans-serif;letter-spacing:-.03em}
body.home .ngh .ngh-team-story p[data-team-description]{max-width:none;min-width:0;margin:9px 0 0!important;font:15px/1.53 'Proximanova-regular',sans-serif!important;color:#515151!important}
body.home .ngh .ngh-team-story__checks{display:grid;grid-template-columns:1fr;gap:8px;list-style:none;padding:0;margin:17px 0 0}
body.home .ngh .ngh-team-story__checks li{display:flex;align-items:center;gap:9px;color:#3b3b3b;font:14px/1.35 'Proximanova-regular',sans-serif}
body.home .ngh .ngh-team-story__checks li>span:first-child{display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;border-radius:50%;background:#e6f1d9;color:#527d31;font:12px/1 'Proximanova-bold',sans-serif}
body.home .ngh .ngh-team-story__checks li>span:last-child{min-width:0}
body.home .ngh .ngh-team-story__outcome{display:flex;align-items:center;flex-wrap:wrap;gap:7px 12px;margin:18px 0 0!important;padding:13px 14px;border:1px solid #dbe7ce;border-left:4px solid #84c041;border-radius:7px;background:#f4f8ed;font:14px/1.35 'Proximanova-regular',sans-serif;color:#333}
body.home .ngh .ngh-team-story__outcome>span{flex:0 0 auto;color:#557a37;font:10px/1.4 'Proximanova-bold',sans-serif;letter-spacing:.1em}
body.home .ngh .ngh-team-story__outcome>strong{color:#2e2e2e;font:14px/1.4 'Proximanova-bold',sans-serif}
body.home .ngh .ngh-team-controls{margin-top:18px;padding-top:13px;border-top:1px solid #e5ebde;display:flex;align-items:center;flex-wrap:wrap;gap:9px}
body.home.ng-chrome .ngh .ngh-team-controls button,body.home .ngh .ngh-team-controls button{margin:0;min-height:44px;padding:11px 15px;border:1px solid #cedcbc;border-radius:7px;background:#f3f7ee;color:#313b2c;font:13px/1.3 'Proximanova-bold',sans-serif}
body.home.ng-chrome .ngh .ngh-team-controls [data-team-play-all],body.home .ngh .ngh-team-controls [data-team-play-all]{background:#84c041;border-color:#84c041;color:#252525}
body.home .ngh .ngh-team-controls button:hover{filter:brightness(.98)}
body.home .ngh .ngh-team-controls button[hidden]{display:none!important}
@media(max-width:840px){
 body.home .ngh .ngh-team-intro__identity strong{font-size:19px}
 body.home .ngh .ngh-team-stages button{min-height:91px}
 body.home .ngh .ngh-team-story__checks{gap:7px}
}
@media(max-width:570px){
 body.home .ngh .ngh-team-intro{padding:15px 13px;align-items:flex-start}
 body.home .ngh .ngh-team-intro__stage{flex-basis:85px;min-height:55px;padding:6px}
 body.home .ngh .ngh-team-intro__stage [data-team-stage-label]{font-size:8px}
 body.home .ngh .ngh-team-intro__identity strong{font-size:16px}
 body.home .ngh .ngh-team-intro__identity .ngh-team-eyebrow{font-size:9px;letter-spacing:.06em}
 body.home .ngh .ngh-team-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:10px}
 body.home .ngh .ngh-team-stages button{min-height:83px;padding:11px 12px 14px;gap:3px}
 body.home .ngh .ngh-team-stages button .ngh-team-step-name{font-size:17px;margin-top:2px}
 body.home .ngh .ngh-team-stages button .ngh-team-step-number{font-size:10px}
 body.home .ngh .ngh-team-stages button small{font-size:11px}
 body.home .ngh .ngh-team-caption{padding:18px 16px}
 body.home .ngh .ngh-team-story>strong{font-size:21px}
 body.home .ngh .ngh-team-story p[data-team-description]{font-size:14px!important}
 body.home .ngh .ngh-team-story__checks li{font-size:13px}
 body.home .ngh .ngh-team-story__outcome{padding:11px 12px}
 body.home .ngh .ngh-team-story__outcome strong{font-size:13px}
 body.home .ngh .ngh-team-controls{gap:7px}
 body.home.ng-chrome .ngh .ngh-team-controls button{font-size:12px;min-height:42px;padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){
 body.home .ngh .ngh-team-illustration *{animation:none!important;transition:none!important}
 body.home .ngh .ngh-team-stages button:hover{transform:none!important}
}