/* Homepage method: six milestones and one wide animated card. */
.ns-process{padding:70px 0 74px;background:#fff;color:var(--text-primary)}
.ns-process>.container{max-width:1240px}
.ns-process-heading{margin:0 0 54px;text-align:left}
.ns-process-heading h2{margin:0;font-family:var(--font-heading);font-size:clamp(38px,4.6vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1.07}
.ns-process-heading h2>span{color:var(--brand)}
.ns-process-layout{width:100%;min-width:0}
.ns-process-steps{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 0 30px;isolation:isolate}
.ns-process-step{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;padding:15px 6px 49px;border:0;background:transparent;color:#6c778b;cursor:pointer;transition:color .25s}
.ns-process-step-icon{flex:0 0 23px;width:23px;height:23px;transition:color .25s,transform .3s}
.ns-process-step-icon rect{fill:#fff}
.ns-process-step-label{font-family:var(--font-heading);font-size:24px;line-height:1.3;font-weight:400;letter-spacing:-.02em}
.ns-process-step:hover{color:var(--brand)}
.ns-process-step.is-active{color:var(--text-primary)}
.ns-process-step.is-active .ns-process-step-icon{color:var(--brand);}
.ns-process-rail{position:absolute;left:8.333333%;right:8.333333%;height:1px;bottom:6px;background:#dbe2ed;z-index:-1}
.ns-process-rail>span{display:block;height:2px;width:100%;background:var(--brand);transform:scaleX(var(--process-timeline,0));transform-origin:left}
.ns-process-dot{position:absolute;bottom:0;left:calc(50% - 6px);width:13px;height:13px;background:#c4ccda;border:3px solid #fff;border-radius:50%;transition:background .3s,box-shadow .3s}
.ns-process-step.is-complete .ns-process-dot{background:var(--brand)}
.ns-process-step.is-active .ns-process-dot{background:var(--brand);box-shadow:0 0 0 4px #0265ff10}
/* Keep keyboard navigation visible without a rectangular focus frame. */
.ns-process button:focus,.ns-process button:focus-visible,.ns-process a:focus,.ns-process a:focus-visible,.ns-process-panel:focus,.ns-process-panel:focus-visible{outline:none;box-shadow:none}
.ns-process-step:focus-visible .ns-process-step-label,.ns-process a:focus-visible{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--brand);text-decoration-thickness:1px}
.ns-process-studio{position:relative;min-width:0;border-radius:28px;background:#f3f6fb}
.ns-process-panel{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;min-height:410px;padding:20px 0}
.ns-process-panel[hidden]{display:none}
.ns-process-content{padding:28px 48px 28px 6px;min-width:0;animation:ns-process-copy-in .45s ease both}

.ns-process-content h3{max-width:420px;margin:0 0 18px;font-family:var(--font-heading);font-size:31px;font-weight:500;line-height:1.13;letter-spacing:-.025em}
.ns-process-description{max-width:440px;margin:0;font-size:16px;line-height:1.65;color:#667184}
.ns-process-result{display:flex;align-items:flex-start;gap:9px;margin:24px 0 0;font-size:12px;line-height:1.6;font-weight:500;color:#3b5e8c}
.ns-process-result svg{flex:0 0 17px;width:17px;height:17px;margin-top:1px;color:var(--brand)}
.ns-process-art{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:450px;height:370px;margin:auto;overflow:hidden;padding:25px;animation:ns-process-art-in .6s ease both}
.ns-process-art::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 45% 50%,#dceaffb0,transparent 66%);pointer-events:none}
@keyframes ns-process-copy-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ns-process-art-in{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 01 — A brief taking shape. */
.ns-process-orbit-label{position:absolute;top:27px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.14em;font-weight:700;color:#8ba1bf}
.ns-process-brief,.ns-process-script{position:relative;width:295px;padding:23px 24px;border:1px solid #dfe7f4;border-radius:6px;background:white;box-shadow:0 16px 32px #30538112;animation:ns-process-paper-float 8.2s ease-in-out infinite}
.ns-process-paper-top{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px;font-size:8px;letter-spacing:.1em;color:#94a3b6;font-weight:700}
.ns-process-brief>strong{display:block;margin-bottom:20px;font-family:var(--font-heading);font-size:26px;line-height:1.08;font-weight:500;letter-spacing:-.03em}
.ns-process-brief-row{display:flex;align-items:center;gap:12px;height:40px;border-top:1px solid #edf1f7;font-size:12px;color:#3c4b60}
.ns-process-brief-row>span{font-size:9px;color:#9badc4}
.ns-process-brief-row>i{display:block;margin-left:auto;width:16px;height:16px;border-radius:50%;background:#e4f8ee;animation:ns-process-check 8.2s both infinite}
.ns-process-brief-row>i::after{content:"";display:block;width:7px;height:4px;margin:5px 4px;border-left:1.6px solid #26a16b;border-bottom:1.6px solid #26a16b;transform:rotate(-45deg)}
.ns-process-brief-row:nth-of-type(3)>i{animation-delay:.8s}
.ns-process-brief-row:nth-of-type(4)>i{animation-delay:1.6s}
.ns-process-float-note{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;padding:11px 14px;border:1px solid #dce7f6;border-radius:5px;background:#fff;box-shadow:0 10px 25px #1c4b8c0e;font-size:11px;font-weight:600;color:var(--brand);animation:ns-process-note-float 4s ease-in-out infinite}
.ns-process-float-note svg{width:15px;height:15px}
.ns-process-brief-note{right:24px;bottom:26px;}
.ns-process-cursor{position:absolute;width:30px;height:38px;right:42px;top:105px;filter:drop-shadow(0 3px 3px #19448920);animation:ns-process-cursor 8.2s ease-in-out infinite}
/* 02 — A selection of real video concepts. */
.ns-process-concept-gallery{position:relative;width:360px;max-width:100%}
.ns-process-concept-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.ns-process-concept-thumb{position:relative;min-width:0;padding:4px;background:white;border:1px solid #dce5f2;border-radius:9px;box-shadow:0 5px 14px #224b8109;transition:transform .2s,border-color .18s,box-shadow .18s;transform-origin:center}
.ns-process-concept-thumb.is-hovered{transform:scale(1.07);z-index:2;box-shadow:0 10px 24px #15428a26}
.ns-process-concept-thumb.is-selected{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 6px 18px #0265ff15}
.ns-process-concept-image{position:relative;height:108px;overflow:hidden;border-radius:5px;background:#dfe7f2}
.ns-process-concept-image>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.ns-process-concept-thumb.is-hovered .ns-process-concept-image>img{transform:scale(1.08)}
.ns-process-concept-label{display:flex;align-items:center;justify-content:center;min-height:32px;padding:4px 1px 1px;font-size:10px;line-height:1.25;font-weight:600;text-align:center;color:#304867}
.ns-process-concept-check{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:17px;height:17px;border:1.5px solid white;border-radius:50%;background:var(--brand);color:white;opacity:0;transform:scale(.65);transition:opacity .2s,transform .2s}
.ns-process-concept-check svg{width:12px;height:12px}
.ns-process-concept-thumb.is-selected .ns-process-concept-check{opacity:1;transform:scale(1)}
.ns-process-concept-pointer{position:absolute;left:0;top:0;width:28px;height:34px;z-index:4;pointer-events:none;will-change:transform}
.ns-process-concept-pointer>svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px #0b234f38)}
.ns-process-concept-click{position:absolute;left:-10px;top:-10px;width:28px;height:28px;border:2px solid var(--brand);border-radius:50%;opacity:0}
.ns-process-concept-pointer.is-clicking .ns-process-concept-click{animation:ns-process-select-click .24s ease-out both}
.ns-process:not(.is-animating) .ns-process-concept-pointer{visibility:hidden}
@keyframes ns-process-select-click{from{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(1.35)}}
/* 03 — A hook, a story, a call to action. */
.ns-process-script{width:325px;padding:22px 25px}
.ns-process-script-tag{display:block;font-size:8px;font-weight:700;letter-spacing:.08em;color:var(--brand);margin-bottom:10px}
.ns-process-type-line{display:block;font-family:var(--font-heading);font-size:22px;letter-spacing:-.035em;white-space:nowrap;line-height:1.2;animation:ns-process-type 8.2s steps(24,end) infinite}
.ns-process-script-lines{display:grid;gap:7px;margin:16px 0 20px}
.ns-process-script-lines i{display:block;height:4px;background:#e9eef5;border-radius:2px;transform-origin:left;animation:ns-process-write 8.2s ease infinite}
.ns-process-script-lines i:nth-child(2){width:90%;animation-delay:.4s}.ns-process-script-lines i:nth-child(3){width:65%;animation-delay:.8s}
.ns-process-script-lines-second{margin:12px 0 20px}.ns-process-script-lines-second i{animation-delay:1s}
.ns-process-script-end{font-size:12px;color:#708198}
.ns-process-idea-note{bottom:23px;left:20px;background:#edf4ff}
/* 04 — On set. */
.ns-process-camera{position:relative;width:310px;border-radius:9px;padding:15px;background:#101a2b;color:#fff;box-shadow:0 20px 30px #10264724;}
.ns-process-camera-top,.ns-process-camera-bottom{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.08em}
.ns-process-camera-top{margin-bottom:11px}.ns-process-camera-top>span:first-child{display:flex;align-items:center;gap:6px}
.ns-process-camera-top i{width:5px;height:5px;background:#ff4b5a;border-radius:50%;animation:ns-process-rec 1.4s infinite}
.ns-process-camera-frame{position:relative;height:230px;overflow:hidden;background:#243048;border-radius:3px}
.ns-process-camera-frame img{width:100%;height:100%;object-fit:cover;object-position:center 30%;animation:ns-process-camera-drift 8.2s ease-in-out infinite}
.ns-process-camera-frame::after{content:"";position:absolute;inset:12px;border:1px solid #fff5;background:linear-gradient(90deg,transparent 33%,#fff3 33.3%,transparent 33.6%,transparent 66%,#fff3 66.3%,transparent 66.6%),linear-gradient(0deg,transparent 33%,#fff3 33.3%,transparent 33.6%,transparent 66%,#fff3 66.3%,transparent 66.6%)}
.ns-process-camera-focus{position:absolute;inset:35% 36%;border:1px solid #fff9;animation:ns-process-focus 4s ease-in-out infinite}
.ns-process-camera-bottom{margin-top:12px;line-height:1.5;color:#a5b3c8}
.ns-process-audio-bars{display:flex;align-items:flex-end;gap:3px;height:19px}
.ns-process-audio-bars i{width:3px;height:16px;background:#82e6c1;border-radius:2px;transform-origin:bottom;animation:ns-process-meter .8s ease-in-out infinite alternate;animation-delay:calc(var(--bar) * -.12s)}
.ns-process-camera-note{right:18px;bottom:23px}
/* 05 — A layered editing studio, built as a scalable animated illustration. */
.ns-process-art-4{padding:12px;isolation:isolate}
.ns-process-art-4::before{inset:10% -3% -5%;background:radial-gradient(ellipse at 52% 68%,#0265ff26,transparent 66%)}
.ns-edit-suite{position:relative;width:400px;max-width:100%;line-height:0}
.ns-edit-graphic{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-body,Arial,sans-serif)}
.ns-edit-window{filter:drop-shadow(0 14px 12px #17366020)}
.ns-edit-floating-panel{filter:drop-shadow(0 7px 7px #050d2030)}
.ns-edit-ui{font-size:5.8px;letter-spacing:.015em}
.ns-edit-panel-title{font-size:6.5px;font-weight:500}
.ns-edit-tiny{font-size:4.7px;letter-spacing:.03em}
.ns-edit-timecode{font-size:8px;font-family:monospace;letter-spacing:.015em}
.ns-edit-meter{transform-box:fill-box;transform-origin:center bottom;animation:ns-edit-levels .95s ease-in-out infinite alternate}
.ns-edit-meter-right{animation-duration:1.2s;animation-delay:-.45s}
.ns-edit-moving-head{animation:ns-edit-scrub 8.2s linear infinite}
.ns-edit-color-picker{animation:ns-edit-grade 8.2s ease-in-out infinite}
.ns-edit-slider-knob{animation:ns-edit-adjust 8.2s ease-in-out infinite}
@keyframes ns-edit-levels{0%{transform:scaleY(.42)}35%{transform:scaleY(.8)}68%{transform:scaleY(.6)}100%{transform:scaleY(1)}}
@keyframes ns-edit-scrub{0%,4%{transform:translateX(8px)}90%,100%{transform:translateX(206px)}}
@keyframes ns-edit-grade{0%,20%,100%{transform:translate(0,0)}45%,75%{transform:translate(9px,4px)}}
@keyframes ns-edit-adjust{0%,20%,100%{transform:translateX(0)}45%,75%{transform:translateX(9px)}}
.ns-process:not(.is-animating) .ns-process-art *{animation-play-state:paused!important}
@keyframes ns-process-paper-float{0%,100%{translate:0 3px}50%{translate:0 -5px}}
@keyframes ns-process-note-float{0%,100%{translate:0 3px}50%{translate:0 -4px}}
@keyframes ns-process-check{0%,8%{opacity:.15;scale:.75}18%,100%{opacity:1;scale:1}}
@keyframes ns-process-cursor{0%,100%{transform:translate(0,0)}20%{transform:translate(-30px,25px)}42%{transform:translate(-30px,65px)}65%{transform:translate(-30px,105px)}85%{transform:translate(5px,110px)}}
@keyframes ns-process-type{0%,5%{clip-path:inset(0 100% 0 0)}35%,100%{clip-path:inset(0 0 0 0)}}
@keyframes ns-process-write{0%,10%{transform:scaleX(.2);opacity:.2}38%,100%{transform:scaleX(1);opacity:1}}
@keyframes ns-process-rec{0%,70%,100%{opacity:1}80%{opacity:.3}}
@keyframes ns-process-camera-drift{0%,100%{transform:scale(1)}50%{transform:scale(1.08) translateY(4px)}}
@keyframes ns-process-focus{0%,100%{scale:1;opacity:.5}50%{scale:.9;opacity:1}}
@keyframes ns-process-meter{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes ns-process-playhead{0%{left:0}100%{left:100%}}
/* 06 — An illustrative view of performance tracking. */
.ns-process-tracking{position:relative;width:335px;max-width:100%;padding:22px;background:#fff;border:1px solid #dce6f4;border-radius:9px;box-shadow:0 14px 34px #254b8110}
.ns-process-tracking-top{float:right;margin:0 0 0 12px;display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:7px;letter-spacing:.08em;font-weight:600;color:#8b9db7}
.ns-process-tracking-top>span:last-child{display:flex;align-items:center;gap:5px;color:#56819e}
.ns-process-tracking-top i{width:5px;height:5px;border-radius:50%;background:#26b77b;animation:ns-process-rec 2s infinite}
.ns-process-tracking>strong{display:block;margin:0 0 12px;font-family:var(--font-heading);font-size:24px;font-weight:500;line-height:1.1;letter-spacing:-.025em}
.ns-process-tracking-chart{position:relative;overflow:hidden}
.ns-process-tracking-chart>svg{display:block;width:100%;height:100px}
.ns-process-tracking-grid{stroke:#e8eef7;stroke-dasharray:3 4}
.ns-process-tracking-area{fill:#0265ff09}
.ns-process-tracking-line{stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:ns-process-chart-draw 8.2s ease both infinite}
.ns-process-tracking-scan{position:absolute;top:0;bottom:0;left:0;width:1px;background:#0265ff30;animation:ns-process-playhead 8.2s linear infinite}
.ns-process-tracking-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:15px}
.ns-process-tracking-metrics>div{min-width:0;padding:10px 8px;border:1px solid #e4ebf5;border-radius:4px;background:#f8faff}
.ns-process-tracking-metrics span{display:block;font-size:8px;color:#5d7698}
.ns-process-tracking-metrics i{display:block;width:80%;height:4px;margin-top:9px;border-radius:3px;background:#80b0fc;transform-origin:left;animation:ns-process-metric 8.2s ease infinite}
.ns-process-tracking-metrics>div:nth-child(2) i{width:60%;animation-delay:.6s}.ns-process-tracking-metrics>div:nth-child(3) i{width:72%;animation-delay:1.2s}
.ns-process-tracking-insight{display:flex;align-items:center;gap:6px;margin-top:17px;font-size:9px;color:#496b9a}
.ns-process-tracking-insight svg{width:13px;height:13px;color:var(--brand)}
@keyframes ns-process-chart-draw{0%,8%{stroke-dashoffset:1}65%,100%{stroke-dashoffset:0}}
@keyframes ns-process-metric{0%,15%{transform:scaleX(.25)}60%,100%{transform:scaleX(1)}}
@media(max-width:1000px){
 .ns-process{padding:54px 0 60px}.ns-process-heading{margin-bottom:38px}
 .ns-process-step-label{font-size:21px}.ns-process-step{gap:8px}.ns-process-step-icon{flex-basis:20px;width:20px;height:20px}
 .ns-process-content{padding:28px 32px 28px 0}.ns-process-content h3{font-size:27px}.ns-process-description{font-size:15px}
 .ns-process-art{padding:20px;height:350px}.ns-process-brief{width:270px;padding:20px}.ns-process-script{width:285px;padding:20px}.ns-process-type-line{font-size:20px}.ns-process-camera{width:280px}
}
@media(max-width:760px){
 .ns-process{padding:38px 0 42px}.ns-process-heading{margin-bottom:30px}.ns-process-heading h2{font-size:clamp(35px,6.3vw,46px)} .ns-process-step{flex-direction:column;gap:9px;padding:12px 2px 32px}.ns-process-step-label{font-size:14px;letter-spacing:-.015em}.ns-process-step-icon{flex-basis:21px;width:21px;height:21px}.ns-process-steps{margin-bottom:24px}
 .ns-process-studio{border-radius:22px}.ns-process-panel{grid-template-columns:1fr;min-height:0;padding:8px 0 24px}.ns-process-art{height:340px;max-width:400px}.ns-process-content{padding:12px 30px 10px;min-height:235px}.ns-process-content h3{font-size:28px;max-width:none}.ns-process-description{font-size:15px;max-width:none}.ns-process-result{margin-top:19px;font-size:12px}
}
@media(max-width:400px){
 .ns-process-heading h2{font-size:35px}.ns-process-step-label{font-size:10px}.ns-process-step-icon{flex-basis:19px;width:19px;height:19px}
 .ns-process-art{height:325px;padding:20px}.ns-process-brief{width:250px;padding:20px}.ns-process-brief>strong{font-size:24px}.ns-process-brief-note{right:8px;bottom:18px}.ns-process-script{width:270px;padding:20px}.ns-process-type-line{font-size:20px}.ns-process-camera{width:265px}.ns-process-camera-frame{height:200px}.ns-process-camera-note{right:10px;bottom:13px}
 .ns-process-content{padding:12px 23px 10px;min-height:330px}.ns-process-content h3{font-size:26px}.ns-process-description{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.ns-process *,.ns-process *::before,.ns-process *::after{animation:none!important;transition:none!important}.ns-process-type-line{clip-path:none}.ns-process-brief-row>i{opacity:1;scale:1}.ns-process-script-lines i{opacity:1;transform:none}}
.ns-process:not(.is-enhanced) .ns-process-steps{display:none}
.ns-process:not(.is-enhanced) .ns-process-panel+.ns-process-panel{border-top:1px solid #dbe3ef}
.ns-process.is-paused .ns-process-type-line{animation:none;clip-path:none}
.ns-process.is-paused .ns-process-script-lines i,.ns-process.is-paused .ns-process-brief-row>i{animation:none;opacity:1;transform:none;scale:1}

.ns-process:not(.is-enhanced) .ns-process-art *{animation:none}

@media(max-width:400px){.ns-process-concept-grid{gap:8px}.ns-process-concept-thumb{padding:3px}.ns-process-concept-image{height:96px}.ns-process-concept-label{font-size:9px;min-height:34px}.ns-process-tracking{padding:17px}.ns-process-tracking>strong{font-size:22px}.ns-process-tracking-metrics{gap:5px}.ns-process-tracking-metrics>div{padding:9px 5px}.ns-process-tracking-top{font-size:6px}}
.ns-process.is-paused .ns-process-tracking-line,.ns-process.is-paused .ns-process-tracking-metrics i{animation:none;stroke-dashoffset:0;transform:none}

@media(max-width:1000px){.ns-process-art-4{padding:12px}}
@media(max-width:400px){.ns-process-art-4{padding:10px}}
.ns-process.is-paused .ns-edit-moving-head{animation:none;transform:translateX(115px)}

/* A native high-resolution image avoids SVG filter rasterization. Both window and preview are 9:16. */
.ns-edit-preview-frame{position:absolute;left:44.75%;top:5.3125%;width:22.5%;height:50%;overflow:hidden;border-radius:2px;pointer-events:none;background:#0a111e}
.ns-edit-preview-photo{display:block;width:100%;height:100%;object-fit:cover;filter:none;transform:none}