/* Type system: Archivo throughout. The font-family fallback names in app.js act as hooks:
   "Helvetica Neue" = display headings, "SF Pro Text" = small uppercase labels. */
html,body{font-family:"Archivo","Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
[style*="Helvetica Neue"]{font-weight:700!important;letter-spacing:-0.03em!important;font-style:normal!important;font-stretch:88%}
h1[style*="Helvetica Neue"]{font-weight:800!important}
p[style*="Helvetica Neue"],blockquote[style*="Helvetica Neue"]{font-weight:500!important;letter-spacing:-0.01em!important}
[style*="SF Pro Text"]{letter-spacing:0.07em!important;font-weight:500}
[style*="italic"]{font-style:normal!important}

/* headline scale: Archivo runs wider than the old serif, so large display sizes come down */
[style*="Helvetica Neue"][style*="font-size: 120px"]{font-size:76px!important}
[style*="Helvetica Neue"][style*="font-size: 104px"]{font-size:72px!important}
[style*="Helvetica Neue"][style*="font-size: 88px"]{font-size:64px!important}
[style*="Helvetica Neue"][style*="font-size: 84px"]{font-size:60px!important}
[style*="Helvetica Neue"][style*="font-size: 72px"]{font-size:52px!important}
[style*="Helvetica Neue"][style*="font-size: 64px"]{font-size:52px!important}
[style*="Helvetica Neue"][style*="font-size: 56px"]{font-size:46px!important}
[style*="Helvetica Neue"][style*="font-size: 52px"]{font-size:44px!important}
[style*="Helvetica Neue"][style*="font-size: 48px"]{font-size:40px!important}
[style*="Helvetica Neue"][style*="font-size: 44px"]{font-size:38px!important}
@media (max-width:600px){
[style*="Helvetica Neue"][style*="font-size: 56px"]{font-size:38px!important}
[style*="Helvetica Neue"][style*="font-size: 52px"]{font-size:36px!important}
[style*="Helvetica Neue"][style*="font-size: 48px"]{font-size:34px!important}
[style*="Helvetica Neue"][style*="font-size: 44px"]{font-size:32px!important}
[style*="Helvetica Neue"][style*="font-size: 40px"]{font-size:30px!important}
}
/* pages that hard-code the old serif (e.g. Colony Counter) */
[style*="Instrument Serif"]{font-family:"Archivo","Helvetica Neue",Arial,sans-serif!important;font-weight:700!important;letter-spacing:-0.03em!important;font-style:normal!important}

/* gentle section reveal on the homepage (added by script, so content is never hidden without JS) */
.nl-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.nl-reveal.nl-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.nl-reveal{opacity:1;transform:none;transition:none}}

/* hero: entrance + scroll-linked depth (set --hp 0..1 on .nl-hero from script). Disabled below 1024px and for reduced motion. */
@keyframes nlRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes nlFade{from{opacity:0}to{opacity:1}}
@keyframes nlCardIn{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
.nl-rise{animation:nlRise .8s cubic-bezier(.2,.7,.2,1) both}
.nl-d1{animation-delay:.05s}.nl-d2{animation-delay:.15s}.nl-d3{animation-delay:.28s}.nl-d4{animation-delay:.4s}.nl-d5{animation-delay:.52s}
.nl-fade{animation:nlFade 1.2s ease both}
.nl-card-in{animation:nlCardIn .9s cubic-bezier(.2,.7,.2,1) .4s both}
.nl-par-text{transform:translate3d(0,calc(var(--hp,0) * -28px),0);opacity:calc(1 - var(--hp,0) * .35);will-change:transform}
.nl-par-slow{transform:translate3d(0,calc(var(--hp,0) * 60px),0) scale(1.12);will-change:transform}
.nl-par-fast{transform:translate3d(0,calc(var(--hp,0) * -70px),0);will-change:transform}
@media (max-width:1023px){.nl-par-text{transform:none;opacity:1}.nl-par-slow{transform:none}.nl-par-fast{transform:none}}
@media (prefers-reduced-motion:reduce){.nl-rise,.nl-fade,.nl-card-in{animation:none}.nl-par-text,.nl-par-fast{transform:none;opacity:1}.nl-par-slow{transform:scale(1.02)}}

@keyframes nlBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){@keyframes nlBob{from{transform:none}to{transform:none}}}

@keyframes nlKB{0%{transform:scale(1.04) translate3d(0,0,0)}100%{transform:scale(1.14) translate3d(-1.6%,-1%,0)}}
.nl-kb{animation:nlKB 40s ease-in-out infinite alternate;will-change:transform}
@media (prefers-reduced-motion:reduce){.nl-kb{animation:none}}

/* "orbit to a drop of water" hero: three real-photo layers with slow drift, depth parallax on scroll */
@keyframes nlDrift1{0%{transform:scale(1.06) translate3d(0,0,0)}100%{transform:scale(1.18) translate3d(-2.5%,1.5%,0)}}
@keyframes nlDrift2{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1.02)}100%{transform:translate3d(-3%,2%,0) rotate(2deg) scale(1.08)}}
@keyframes nlSwimK{0%{transform:translate3d(-70%,0,0) rotate(-3deg);opacity:0}8%{opacity:.95}92%{opacity:.95}100%{transform:translate3d(260%,-6%,0) rotate(3deg);opacity:0}}
.nl-dr1{animation:nlDrift1 50s ease-in-out infinite alternate;will-change:transform}
.nl-dr2{animation:nlDrift2 34s ease-in-out infinite alternate;will-change:transform}
.nl-swim{animation:nlSwimK 90s linear infinite;animation-delay:-30s;will-change:transform}
.nl-bgpaused .nl-dr1,.nl-bgpaused .nl-dr2,.nl-bgpaused .nl-swim{animation-play-state:paused}
.nl-l1{transform:translate3d(0,calc(var(--hp,0) * 80px),0) scale(calc(1 + var(--hp,0) * .28))}
.nl-l2{transform:translate3d(0,calc(var(--hp,0) * -50px),0) scale(calc(1 + var(--hp,0) * .2))}
.nl-l3{transform:translate3d(0,calc(var(--hp,0) * -170px),0)}
@media (max-width:1023px){.nl-l1,.nl-l2,.nl-l3{transform:none}}
@media (prefers-reduced-motion:reduce){.nl-dr1,.nl-dr2,.nl-swim{animation:none}.nl-l1,.nl-l2,.nl-l3{transform:none}.nl-swim{transform:translate3d(120%,0,0);opacity:.9}}

@keyframes nlKBs{0%{transform:scale(1.0) translate3d(0,0,0)}100%{transform:scale(1.05) translate3d(-0.8%,-0.5%,0)}}
.nl-kbs{animation:nlKBs 50s ease-in-out infinite alternate;will-change:transform}
@media (prefers-reduced-motion:reduce){.nl-kbs{animation:none}}

/* hero flow diagram: staggered fade-in, a dot travelling along each connector */
@keyframes nlFlowIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes nlFlowDot{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}
.nl-flow-step{animation:nlFlowIn .8s cubic-bezier(.2,.7,.2,1) both}
.nl-flow-dot{position:absolute;top:-4.5px;left:0;width:7px;height:7px;border-radius:50%;background:#7fe6c9;animation:nlFlowDot 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.nl-flow-step{animation:none}.nl-flow-dot{animation:none;opacity:0}}

.nl-flow-line{animation:nlFlowIn .9s ease both}
.nl-pill:hover{background:rgba(255,255,255,0.18)!important}
@media (prefers-reduced-motion:reduce){.nl-flow-line{animation:none}}

/* jigsaw hero: pieces slide in and lock together once, then stay still */
@keyframes nlPiece{0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.92)}60%{opacity:1}100%{opacity:1;transform:none}}
.nl-piece{animation:nlPiece 1.1s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.nl-piece{animation:none}}

/* missing piece: arrives, tilts and hovers beside its slot; snaps in on hover */
@keyframes nlHub{0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-24deg) scale(.9)}55%{opacity:1}100%{opacity:1;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}}
.nl-hubp{transform:translate(var(--fx),var(--fy)) rotate(var(--fr));transition:transform .8s cubic-bezier(.3,1.45,.5,1);animation:nlHub 1.4s cubic-bezier(.2,.8,.2,1) backwards}
.nl-flow:hover .nl-hubp{transform:none}
@media (prefers-reduced-motion:reduce){.nl-hubp{animation:none;transition:none}}

/* puzzle cut out of the hero picture: pieces fly in, the mushroom piece floats beside its slot and drops in on hover */
.nl-pz{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none!important;max-height:none!important;pointer-events:none;user-select:none}
.nl-piece.nl-pz{filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.5))}
.nl-hubS.nl-pz{filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.5))}
@keyframes nlToss{0%{opacity:0;transform:translateY(-26px) scale(1.25) rotate(calc(var(--rot) - 38deg))}55%{opacity:1}100%{opacity:1;transform:rotate(var(--rot))}}
.nl-loose{position:absolute;transition:transform .95s cubic-bezier(.45,.05,.25,1.12),opacity .35s ease .75s;pointer-events:none}
.nl-loose .nl-pick{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:pointer;pointer-events:auto}
.nl-restimg{display:block;width:100%;height:100%;max-width:none!important;transform:rotate(var(--rot));filter:drop-shadow(0 0 1.2px var(--rim,#ffc247)) drop-shadow(0 0 1.2px var(--rim,#ffc247)) drop-shadow(0 0 9px rgba(var(--rim-rgb,255,194,71),.75)) drop-shadow(3px 6px 6px rgba(0,0,0,.4));transition:transform .95s cubic-bezier(.45,.05,.25,1.12),filter .3s ease;animation:nlToss .8s cubic-bezier(.2,.8,.2,1) .3s backwards,nlGlow 2.6s ease-in-out 1.2s infinite}
@keyframes nlGlow{0%,100%{filter:drop-shadow(0 0 1.2px var(--rim,#ffc247)) drop-shadow(0 0 1.2px var(--rim,#ffc247)) drop-shadow(0 0 7px rgba(var(--rim-rgb,255,194,71),.55)) drop-shadow(3px 6px 6px rgba(0,0,0,.4))}50%{filter:drop-shadow(0 0 1.6px var(--rim-soft,#ffd77a)) drop-shadow(0 0 1.6px var(--rim-soft,#ffd77a)) drop-shadow(0 0 16px rgba(var(--rim-rgb,255,194,71),.95)) drop-shadow(3px 6px 6px rgba(0,0,0,.4))}}
.nl-pick:hover .nl-restimg{animation:nlToss 0s,none;filter:drop-shadow(0 0 1.6px var(--rim-soft,#ffd77a)) drop-shadow(0 0 1.6px var(--rim-soft,#ffd77a)) drop-shadow(0 0 18px rgba(var(--rim-rgb,255,194,71),1)) drop-shadow(5px 12px 10px rgba(0,0,0,.45)) brightness(1.1);transform:rotate(var(--rot)) translateY(-3px)}
.nl-pick:focus-visible{outline:3px solid #7fe6c9;outline-offset:3px;border-radius:12px}
.nl-pick:disabled{cursor:default}
.nl-hint{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:2px;display:flex;gap:7px;align-items:center;white-space:nowrap;padding:6px 11px 6px 8px;border-radius:4px;background:rgba(8,16,12,.7);color:#fff;font-family:Archivo,sans-serif;pointer-events:none;transition:opacity .25s ease;animation:nlShF .6s ease .8s backwards}
.nl-hint b{display:block;font-weight:800;font-size:12.5px;letter-spacing:-.01em;line-height:1.1}
.nl-hint i{display:block;font-style:normal;font-weight:500;font-size:10.5px;margin-top:3px;color:var(--rim-soft,#ffd77a)}
.nl-hubS.nl-pz{opacity:0;transition:opacity .35s ease .65s}
.nl-done .nl-loose{transform:translate(var(--dx),var(--dy));opacity:0}
.nl-done .nl-restimg{transform:rotate(0deg);animation:none!important;filter:drop-shadow(1px 2px 1.5px rgba(0,0,0,.55))}
.nl-done .nl-hint{opacity:0}
.nl-done .nl-hubS.nl-pz{opacity:1}
@keyframes nlShF{from{opacity:0}to{opacity:1}}
/* completed puzzle: a glowing rim with a light that keeps circling it (colour set by --rim / --rim-rgb) */
.nl-stage{--rim:#ffc247;--rim-rgb:255,194,71;--rim-hi:#fff6d6;--rim-soft:#ffd77a}
.nl-rim{position:absolute;left:17.6%;top:17.6%;width:64.8%;height:64.8%;border-radius:50%;pointer-events:none;opacity:0}
.nl-rim-base{border:3px solid rgba(var(--rim-rgb),.95);box-shadow:0 0 18px 2px rgba(var(--rim-rgb),.65),0 0 46px rgba(var(--rim-rgb),.35),inset 0 0 16px rgba(var(--rim-rgb),.35)}
.nl-rim-spin{background:conic-gradient(from 0deg,rgba(var(--rim-rgb),0) 0deg,rgba(var(--rim-rgb),0) 205deg,rgba(var(--rim-rgb),.5) 290deg,var(--rim-hi) 356deg,rgba(var(--rim-rgb),0) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));filter:drop-shadow(0 0 9px rgba(var(--rim-rgb),1)) drop-shadow(0 0 22px rgba(var(--rim-rgb),.7))}
.nl-rim-pulse{border:3px solid rgba(var(--rim-rgb),.95)}
.nl-done .nl-rim-base{opacity:1;transition:opacity .8s ease 1.2s}
.nl-done .nl-rim-spin{opacity:1;transition:opacity .8s ease 1.4s;animation:nlSpin 3.6s linear 1.4s infinite}
.nl-done .nl-rim-pulse{animation:nlPulse 1.4s ease-out 1.1s 1 both}
@keyframes nlSpin{to{transform:rotate(360deg)}}
@keyframes nlPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.16)}}
@media (prefers-reduced-motion:reduce){.nl-restimg,.nl-hint,.nl-loose,.nl-hubS{animation:none!important;transition:none!important}.nl-done .nl-rim-spin,.nl-done .nl-rim-pulse{animation:none}.nl-done .nl-rim-spin{display:none}}

/* leader lines and callouts: revealed one after another once the puzzle is complete (sizes scale with the picture via container units) */
.nl-flow3d{container-type:inline-size}
.nl-leaders{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.nl-lead{fill:none;stroke:rgba(255,236,190,.95);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.nl-dot{fill:var(--rim,#ffc247);opacity:0;filter:drop-shadow(0 0 4px rgba(var(--rim-rgb,255,194,71),.9))}
.nl-callout{position:absolute;opacity:0;transform:translateY(4px);padding:.9cqw 1.3cqw 1.1cqw;border-left:2px solid rgba(var(--rim-rgb,255,194,71),.9);background:linear-gradient(90deg,rgba(8,16,12,.42) 0%,rgba(8,16,12,.14) 70%,rgba(8,16,12,0) 100%);-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.65);color:#fff;font-family:Archivo,sans-serif;pointer-events:none;box-sizing:border-box}
.nl-callout b{display:block;font-weight:800;font-size:calc(1.5cqw*var(--cs,1));letter-spacing:.07em;text-transform:uppercase;color:var(--rim-soft,#ffd77a);margin-bottom:.4cqw}
.nl-callout span{display:block;font-weight:500;font-size:calc(1.95cqw*var(--cs,1));line-height:1.25}
.nl-done .nl-lead{animation:nlDraw .9s cubic-bezier(.4,0,.2,1) var(--d) forwards}
.nl-done .nl-dot{animation:nlShF .4s ease var(--d) forwards}
.nl-done .nl-callout{animation:nlCall .6s ease var(--d) forwards}
@keyframes nlDraw{to{stroke-dashoffset:0}}
@keyframes nlCall{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nl-done .nl-lead{animation:none;stroke-dashoffset:0}.nl-done .nl-dot{animation:none;opacity:1}.nl-done .nl-callout{animation:none;opacity:1;transform:none}}

/* page tabs along the bottom of the hero */
.nl-tabs{position:absolute;left:0;right:0;bottom:22px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;box-sizing:border-box;pointer-events:none}
.nl-tab{pointer-events:auto;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.55);background:rgba(8,16,12,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font:600 14px Archivo,sans-serif;letter-spacing:-.005em;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease}
.nl-tab:hover{background:rgba(255,255,255,.22)}
.nl-tab.on{background:#fff;color:#0a1628;border-color:#fff}
.nl-tab:focus-visible{outline:3px solid #7fe6c9;outline-offset:2px}
@media (max-width:700px){.nl-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}}

/* phone / tablet: the puzzle sits in its own cropped block, callouts become a list under it */
.nl-hero-stack .nl-tabs{position:static}
.nl-mlist{display:grid;gap:10px;max-width:620px;margin:0 auto}
.nl-mitem{border-left:2px solid var(--rim,#ffc247);padding:6px 12px;background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,0));opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.nl-mlist.show .nl-mitem{opacity:1;transform:none}
.nl-mitem b{display:block;font:800 11px Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--rim-soft,#ffd77a)}
.nl-mitem span{display:block;font:500 15px/1.35 Archivo,sans-serif;color:#fff;margin-top:2px}
.nl-hero-stack .nl-loose .nl-hint{font-size:11px}
@media (prefers-reduced-motion:reduce){.nl-mitem{opacity:1;transform:none;transition:none}}
.nl-hero-stack .nl-tabs{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nl-hero-stack .nl-tabs::-webkit-scrollbar{display:none}
.nl-hero-stack .nl-tab{flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){
 .nl-hero-stack h1{margin-bottom:16px!important}
 .nl-hero-stack p.nl-d1{margin-bottom:12px!important}
 .nl-hero-stack p.nl-d3{margin-bottom:22px!important;font-size:16px!important}
}
.nl-hero:not(.nl-hero-stack) .nl-hint{transform:translateX(-26%)}
/* desktop: the missing piece sits in the button row, beside "Request a quote" */
.nl-lp{position:relative;width:112px;height:124px;flex:none;pointer-events:none;z-index:3;transition:transform .95s cubic-bezier(.45,.05,.25,1.12),opacity .35s ease .75s}
.nl-lp .nl-pick{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:pointer;pointer-events:auto}
.nl-lp .nl-restimg{filter:drop-shadow(0 0 1.2px var(--rim)) drop-shadow(0 0 1.2px var(--rim)) drop-shadow(0 0 9px rgba(var(--rim-rgb),.75)) drop-shadow(3px 6px 6px rgba(0,0,0,.4))}
.nl-hero .nl-lp .nl-hint{left:calc(100% + 12px);top:50%;transform:translateY(-50%);margin:0}
.nl-lp.go{transform:translate(var(--fx),var(--fy)) scale(var(--fs));opacity:0}
.nl-lp.go .nl-restimg{transform:rotate(0deg);animation:none!important;filter:drop-shadow(1px 2px 1.5px rgba(0,0,0,.55))}
.nl-lp.go .nl-hint{opacity:0}
@media (prefers-reduced-motion:reduce){.nl-lp{transition:none}.nl-lp .nl-hint{animation:none}}
/* once the piece lands the seams fade (the picture joins up) and the Nova mark appears in the middle */
.nl-joined{opacity:0}
.nl-done .nl-joined{opacity:1;transition:opacity 1.1s ease 1.15s}

/* bigger missing piece in the button row */
.nl-lp{width:148px;height:164px}


/* the missing piece overhangs the button row instead of stretching it */
.nl-lp{margin:-56px 0}
.nl-hero:not(.nl-hero-stack) p.nl-d3{margin-bottom:60px!important}


/* bigger Nova mark and message on the missing-piece label */
.nl-hint{gap:11px;padding:9px 16px 9px 10px;border-radius:6px}
.nl-hint b{font-size:15px;letter-spacing:-.015em}
.nl-hint i{font-size:12px;margin-top:4px}
.nl-hero-stack .nl-loose .nl-hint{font-size:inherit}
.nl-hero-stack .nl-loose .nl-hint b{font-size:13px}
.nl-hero-stack .nl-loose .nl-hint i{font-size:11px}
.nl-hero-stack .nl-loose .nl-hint img{width:32px;height:32px}

.nl-hero-stack .nl-loose .nl-hint{white-space:normal;width:max-content;max-width:min(250px,68vw)}
.nl-hero-stack .nl-loose .nl-hint b{line-height:1.2}
/* slightly smaller label text */
.nl-hint b{font-size:13.5px}
.nl-hint i{font-size:11.5px;margin-top:3px}
.nl-hint img{width:36px;height:36px}
.nl-hero-stack .nl-loose .nl-hint b{font-size:12px}
.nl-hero-stack .nl-loose .nl-hint i{font-size:10.5px}
.nl-hero-stack .nl-loose .nl-hint img{width:30px;height:30px}

/* ===== Services page revamp ===== */
.sv-wrap{max-width:1344px;margin:0 auto}
.sv-hero{background:radial-gradient(900px 420px at 88% -10%,rgba(25,195,160,.18),transparent 62%),#0a1628;color:#fff;padding:76px 48px 0}
.sv-h1{margin:0 0 18px;font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(36px,4.6vw,68px);line-height:1.02;letter-spacing:-.035em;max-width:940px}
.sv-sub{margin:0 0 26px;font:600 14px/1.4 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7fe6c9}
.sv-intro{margin:0 0 44px;font:400 19px/1.55 Archivo,sans-serif;color:rgba(255,255,255,.86);max-width:780px}
.sv-tabs{display:flex;gap:10px;flex-wrap:wrap}
.sv-tab{min-height:52px;padding:0 26px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);border-bottom:none;font:600 16px Archivo,sans-serif;cursor:pointer;transition:background .15s ease,color .15s ease}
.sv-tab:hover{background:rgba(255,255,255,.1)}
.sv-tab.on{background:#fff;color:#0a1628;border-color:#fff}
.sv-index{position:sticky;top:55px;z-index:12;background:#fff;border-bottom:1px solid rgba(10,22,40,.12)}
.sv-index-in{display:flex;gap:4px;overflow-x:auto;padding:0 48px;scrollbar-width:none}
.sv-index-in::-webkit-scrollbar{display:none}
.sv-chip{flex:0 0 auto;display:flex;gap:10px;align-items:baseline;padding:17px 16px 14px;background:none;border:none;border-bottom:3px solid transparent;font:600 15px Archivo,sans-serif;color:#5b6878;cursor:pointer;white-space:nowrap}
.sv-chip b{font-weight:700;font-size:13px;color:#8a96a6}
.sv-chip:hover{color:#0a1628}
.sv-chip.on{color:#0a1628;border-bottom-color:#0b7a62}
.sv-chip.on b{color:#0b7a62}
.sv-sec{padding:84px 48px;border-top:1px solid rgba(10,22,40,.1);scroll-margin-top:122px}
.sv-sec.alt{background:#f2f4f7}
.sv-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.sv-num{display:flex;align-items:center;gap:12px;margin-bottom:16px;font:800 18px Archivo,sans-serif;color:#0b7a62;letter-spacing:.04em}
.sv-num::after{content:"";width:44px;height:2px;background:#0b7a62}
.sv-title{margin:0 0 22px;font:800 clamp(30px,3.2vw,46px)/1.05 Archivo,sans-serif;letter-spacing:-.03em;color:#0a1628}
.sv-body{margin:0 0 30px;font:400 17px/1.65 Archivo,sans-serif;color:#39475a;max-width:560px}
.sv-for{max-width:560px;border-top:1px solid rgba(10,22,40,.16);padding-top:16px;font:500 15px/1.5 Archivo,sans-serif;color:#0a1628}
.sv-label{margin-bottom:10px;font:700 11px/1 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#0b7a62}
.sv-frame{background:#fff;border:1px solid rgba(10,22,40,.14);padding:14px;box-shadow:0 22px 44px -22px rgba(10,22,40,.32)}
.sv-frame img{display:block;width:100%;height:auto}
.sv-viz{display:grid;place-items:center;min-height:260px}
.sv-lists{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;margin-top:60px;align-items:start}
.sv-right .sv-lists{grid-template-columns:minmax(0,1fr);gap:34px;margin-top:0}
.sv-steps{list-style:none;margin:0;padding:0}
.sv-steps li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:4px;padding:15px 0;border-top:1px solid rgba(10,22,40,.14);font:400 15px/1.5 Archivo,sans-serif;color:#1d2b3f}
.sv-steps li i{padding-top:3px;font:700 12px Archivo,sans-serif;font-style:normal;letter-spacing:.06em;color:#0b7a62}
.sv-itemsrow{grid-template-columns:minmax(0,1fr)}
.sv-items{columns:2;column-gap:56px}
.sv-items li{break-inside:avoid}
.sv-outs{list-style:none;margin:0;padding:0;background:#fff;border:1px solid rgba(10,22,40,.12)}
.sv-sec:not(.alt) .sv-outs{background:#f2f4f7;border-color:transparent}
.sv-outs li{position:relative;padding:14px 18px 14px 42px;border-top:1px solid rgba(10,22,40,.1);font:400 15px/1.45 Archivo,sans-serif;color:#1d2b3f}
.sv-outs li:first-child{border-top:none}
.sv-outs li::before{content:"";position:absolute;left:19px;top:22px;width:8px;height:8px;background:#19c3a0}
.sv-tail{padding:0 48px 88px}
.sv-tail>div:first-child{margin-top:0!important;border-top:none!important;padding-top:72px!important}
.sv-tail section:first-child{border-top:none!important}
@media (max-width:1023px){
 .sv-hero{padding:56px 36px 0}.sv-sec{padding:64px 36px}.sv-index-in{padding:0 36px}.sv-tail{padding:0 36px 72px}
 .sv-top{grid-template-columns:minmax(0,1fr);gap:36px}
 .sv-lists{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:44px}
 .sv-body,.sv-for{max-width:none}
}
@media (max-width:640px){
 .sv-hero{padding:44px 22px 0}.sv-intro{font-size:16.5px;margin-bottom:32px}
 .sv-tab{flex:1 1 auto;padding:0 14px;min-height:48px;font-size:15px}
 .sv-index{top:50px}.sv-index-in{padding:0 22px}.sv-chip{padding:14px 12px 12px;font-size:14px}
 .sv-sec{padding:48px 22px;scroll-margin-top:112px}.sv-tail{padding:0 22px 56px}
 .sv-items{columns:1}
 .sv-steps li{grid-template-columns:38px minmax(0,1fr);font-size:14.5px}
 .sv-outs li{font-size:14.5px}
}

/* services tweaks: tighter index chips with a scroll hint, FAQ in two columns */
.sv-index-in{gap:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.sv-chip{padding:17px 13px 14px;font-size:14.5px;gap:8px}
@media (min-width:1024px){
 .sv-tail>div:first-child{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}
 .sv-tail>div:first-child>:nth-child(1),.sv-tail>div:first-child>:nth-child(2){grid-column:1}
 .sv-tail>div:first-child>:nth-child(3){grid-column:2;grid-row:1 / span 3;margin-top:0!important;max-width:none!important}
 .sv-tail>div:first-child>:nth-child(2){max-width:none!important}
}
.sv-index-in{padding-left:35px}
@media (max-width:1023px){.sv-index-in{padding-left:23px}}
@media (max-width:640px){.sv-index-in{padding-left:10px}}
@media (prefers-reduced-motion:reduce){.nl-done .nl-joined{transition:none}}