body{margin:0;background:#020705}
a{color:#C8F8E2;text-decoration:none}a:hover{color:#ffffff}
*{box-sizing:border-box}
.ribbed{background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0px,rgba(255,255,255,0.035) 18px,rgba(255,255,255,0.11) 25px,rgba(0,0,0,0.22) 26px,rgba(255,255,255,0) 29px)}
.ribbed-fine{background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0px,rgba(255,255,255,0.05) 7px,rgba(255,255,255,0.14) 9px,rgba(0,0,0,0.25) 10px,rgba(255,255,255,0) 11px)}
.glass{background:linear-gradient(160deg,rgba(255,255,255,0.10),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.grad-text{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 45%,#8FA69B 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.runner{animation:run 9s linear infinite}
.breathe{animation:breathe 7s ease-in-out infinite}
.lift{transition:transform .35s ease,border-color .35s ease}
.lift:hover{transform:translateY(-4px);border-color:rgba(74,227,166,0.45)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #4AE3A6;outline-offset:3px}
.track{scrollbar-width:none}.track::-webkit-scrollbar{display:none}
.hero-fx{--mx:72%;--my:42%;--on:0;--sx:0px;--px:0px;--py:0px}
.ribbed-move{background-position:calc(var(--sx) * -0.35) 0}
.hero-spot{position:absolute;inset:0;pointer-events:none;opacity:var(--on);background:radial-gradient(560px circle at var(--mx) var(--my),rgba(214,255,236,0.30),rgba(74,227,166,0.14) 32%,rgba(74,227,166,0) 62%)}
.ribbed-lens{position:absolute;inset:0;pointer-events:none;opacity:var(--on);background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0px,rgba(255,255,255,0.08) 16px,rgba(220,255,240,0.42) 24px,rgba(0,0,0,0.32) 25.5px,rgba(255,255,255,0) 29px);background-position:var(--sx) 0;-webkit-mask-image:radial-gradient(380px circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,0.5) 42%,transparent 72%);mask-image:radial-gradient(380px circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,0.5) 42%,transparent 72%)}
.parallax{transform:translate3d(var(--px),var(--py),0);will-change:transform}
.flip{perspective:1400px;outline:none}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.turn-l{--turn:rotateY(-180deg)}.turn-r{--turn:rotateY(180deg)}.turn-u{--turn:rotateX(-180deg)}.turn-d{--turn:rotateX(180deg)}
@media (hover:hover){.flip:hover .flip-inner,.flip:focus-within .flip-inner{transform:var(--turn)}}
.flip:focus-visible .flip-inner,.flip.is-flipped .flip-inner{transform:var(--turn)}
.flip:focus-visible .flip-inner{box-shadow:0 0 0 2px #4AE3A6}
.face{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face-back{transform:var(--turn)}
.mag{--tx:0px;--ty:0px;--gx:50%;--gy:50%;--go:0;--sc:1;position:relative;transform:translate3d(var(--tx),var(--ty),0) scale(var(--sc));transition:transform .4s cubic-bezier(.22,1,.36,1),background-color .25s,border-color .25s,box-shadow .4s,color .25s;cursor:pointer}
.mag::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--go);transition:opacity .3s;background:radial-gradient(80px circle at var(--gx) var(--gy),rgba(255,255,255,0.6),rgba(255,255,255,0) 70%);mix-blend-mode:overlay}
.mag:active{--sc:.95}
.mag-in{transform:translate3d(calc(var(--tx) * .6),calc(var(--ty) * .6),0);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.mag-in svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.mag:hover .mag-in svg{transform:translateX(3px)}
.mag.cta:hover{box-shadow:0 16px 54px rgba(74,227,166,0.6) !important}
.navlink:hover{background:rgba(255,255,255,0.10) !important;color:#ffffff}
.icon-btn:hover{background:rgba(74,227,166,0.18) !important;border-color:rgba(74,227,166,0.65) !important}
.arrow-btn:hover{background:#1A5A41 !important}
.dot:hover{background:#5B6E66 !important}
.flink{transition:color .25s,transform .35s cubic-bezier(.22,1,.36,1)}.flink:hover{color:#4AE3A6;transform:translateX(4px)}
.swap-in{animation:swapIn .7s cubic-bezier(.22,1,.36,1) both}
@keyframes swapIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.tile-big{grid-column:span 2;grid-row:span 2}
@media (max-width:620px){.tile-big{grid-column:auto;grid-row:auto}}
.fword{--fx:50%;--fy:50%;--fon:0}
.fword-glow{position:absolute;left:0;right:0;top:0;pointer-events:none;opacity:var(--fon);background:radial-gradient(340px circle at var(--fx) var(--fy),#F2FFF8 0%,#7BEDBE 22%,rgba(74,227,166,0.4) 42%,rgba(74,227,166,0) 64%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(74,227,166,0.45))}
@keyframes run{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media (max-width:860px){.hide-sm{display:none !important}}
/* ================= touch: tap to flip ================= */
@media (hover:none){
.flip .face:not(.face-back)::after{content:"\21BB";position:absolute;top:10px;right:10px;z-index:3;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;font-weight:700;color:#02170F;background:rgba(200,248,226,0.9);box-shadow:0 4px 14px rgba(0,0,0,0.35);pointer-events:none}
.m-sq .face:not(.face-back)::after{top:auto;bottom:14px;right:14px}
.flip{cursor:pointer;-webkit-tap-highlight-color:transparent}
}
.m-menu{display:none}
.menu-lines{position:relative;display:block;width:18px;height:12px}
.menu-lines span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:#EEF5F1;transition:transform .35s cubic-bezier(.22,1,.36,1),top .35s cubic-bezier(.22,1,.36,1)}
.menu-lines span:first-child{top:2px}.menu-lines span:last-child{top:8px}
.menu-open .menu-lines span:first-child{top:5px;transform:rotate(45deg)}
.menu-open .menu-lines span:last-child{top:5px;transform:rotate(-45deg)}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

/* ================= phones ================= */
@media (max-width:760px){
body{overflow-x:hidden}
.m-hero-sec{padding:0 10px !important}
.m-hero{min-height:0 !important;border-radius:28px !important;background:radial-gradient(95% 42% at 64% 17%, #46E6A6 0%, #14A970 24%, #0A6446 46%, #04261A 70%, #020705 100%) !important}
.m-header{flex-wrap:nowrap !important;padding:16px 16px !important;position:relative;z-index:6}
.m-hide{display:none !important}
.m-logo{order:-1}
.m-logo span{font-size:16px}
.m-icons{gap:8px !important}
.menu-btn{display:flex !important}
.menu-open .m-menu{display:flex;flex-direction:column;position:absolute;top:calc(100% + 4px);left:12px;right:12px;padding:10px;border-radius:24px;z-index:20;background:linear-gradient(160deg,rgba(14,40,30,0.92),rgba(3,12,9,0.92)) !important;animation:menuIn .35s cubic-bezier(.22,1,.36,1) both}
.m-menu a{padding:15px 18px;border-radius:16px;font-size:20px;letter-spacing:-0.02em;color:#EEF5F1}
.m-menu a:active{background:rgba(255,255,255,0.08)}
.m-menu .m-menu-cta{margin-top:6px;text-align:center;font-weight:600;font-size:17px;color:#02170F;background:linear-gradient(135deg,#2FD08F,#4AE3A6 55%,#9DF5CF)}
.m-fig{top:50px !important;bottom:auto !important;right:-30% !important;height:340px !important;opacity:1 !important;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 96%);mask-image:linear-gradient(180deg,#000 62%,transparent 96%)}
.m-veil{background:linear-gradient(180deg, rgba(2,7,5,0) 0px, rgba(2,7,5,0) 250px, rgba(2,7,5,0.82) 360px, rgba(2,7,5,0.94) 100%) !important}
.m-copy{padding:250px 18px 0 !important}
.m-h1{font-size:46px !important;line-height:0.98 !important}
.m-hero .glass[role="group"]{width:100%}
.m-hero .glass[role="group"] button{flex:1 1 0}
.m-hero .glass[role="group"] > span{width:calc(50% - 5px) !important}
.m-hero > div:last-child{padding:32px 18px 22px !important}
.m-sqrow{display:grid !important;grid-template-columns:1fr;gap:12px !important;min-height:0 !important}
.m-sq{width:100% !important;height:172px !important}
.m-sec{padding-top:104px !important;padding-left:18px !important;padding-right:18px !important}
.m-one{grid-template-columns:minmax(0,1fr) !important}
.m-wide{height:204px !important}
.m-wide .face{padding:24px !important}
.m-tcard{flex-basis:86% !important;padding:24px !important;min-height:0 !important}
.m-tq{flex-direction:column;gap:18px !important}
.m-portrait{flex:0 0 auto !important;width:68px;height:78px !important;border-radius:16px !important}
.m-portrait > div:first-child{font-size:38px !important}
.m-quote{font-size:17px !important}
.m-cbig{min-height:360px !important}
.m-num{font-size:24px !important}
.m-both{padding:30px 22px 26px !important;min-height:0 !important;gap:18px !important;background:radial-gradient(90% 46% at 50% 82%, #46E6A6 0%, #14A970 22%, #0A6446 44%, #04261A 70%, #020705 100%) !important}
.m-veil2{background:linear-gradient(180deg, rgba(2,7,5,0.9) 0%, rgba(2,7,5,0.6) 45%, rgba(2,7,5,0) 70%) !important}
.m-arc{margin-top:104px !important;min-height:600px !important}
.m-foot{padding-top:170px !important}
.m-farc{top:56px !important;left:-75% !important;right:-75% !important}
.m-arc-t{left:-85% !important;right:-85% !important;top:-500px !important;height:600px !important}
.m-arc-b{left:-85% !important;right:-85% !important;bottom:-500px !important;height:600px !important}
.m-cinf{top:5% !important}
#about .flip:not(.m-wide){height:340px !important}
.m-fgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:36px 20px !important}
.m-fbrand{grid-column:1 / -1 !important}
.glass[role="group"][aria-label="Choose a track"]{display:flex !important;width:100%;box-sizing:border-box}
.glass[role="group"][aria-label="Choose a track"] button{flex:1 1 0;min-width:0;width:auto !important}
.glass[role="group"][aria-label="Choose a track"] > span{width:calc(50% - 5px) !important}
.sticky-bar{display:none !important}
.m-bottom{display:flex !important;transform:translateY(160%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.is-scrolled .m-bottom{transform:none}
.menu-open .m-bottom{transform:translateY(160%)}
.m-foot{padding-bottom:84px !important}
.m-hero .glass[role="group"] button{font-size:14px !important}
.m-actions > a,.m-actions > button{flex:1 1 auto;justify-content:center}

}
/* ================= homepage UX additions ================= */
section[id]{scroll-margin-top:96px}
.sticky-bar{transform:translate(-50%,-160%);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s}
.is-scrolled .sticky-bar{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.m-bottom{display:none}
.marquee-track{animation:marquee 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 7px))}}
.logo-chip{transition:color .3s,border-color .3s}.logo-chip:hover{color:#EEF5F1;border-color:rgba(74,227,166,0.4)}
.svc-more svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}.svc-card:hover .svc-more svg{transform:translateX(4px)}
.need-pill{background:transparent;color:#EEF5F1;transition:background-color .3s,color .3s,border-color .3s}
.need-pill:hover{border-color:rgba(74,227,166,0.6)}
.need-pill[aria-pressed="true"]{background:linear-gradient(135deg,#2FD08F,#4AE3A6 55%,#9DF5CF);color:#02170F;border-color:transparent}
.lead-card input::placeholder,.lead-card textarea::placeholder{color:#5F756B}
.lead-card input:focus,.lead-card textarea:focus{border-color:#4AE3A6 !important;box-shadow:0 0 0 3px rgba(74,227,166,0.18)}
.lead-done{animation:swapIn .6s cubic-bezier(.22,1,.36,1) both}
.faq summary::-webkit-details-marker{display:none}
.faq{transition:border-color .3s}.faq[open]{border-color:rgba(74,227,166,0.35) !important}
.faq-icon{transition:transform .35s cubic-bezier(.22,1,.36,1)}.faq[open] .faq-icon{transform:rotate(45deg)}
.faq summary:hover{color:#ffffff}
.reel-overlay{animation:fadeIn .35s ease both}.reel-box{animation:swapIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (max-width:980px){.sticky-bar nav{display:none !important}}
/* ================= services page ================= */
@media (min-width:761px){.s-alt > .s-copy{order:2}}
.s-chip{transition:border-color .3s,background-color .3s}.s-chip:hover{border-color:rgba(74,227,166,0.55) !important;background:rgba(74,227,166,0.08) !important}
.s-block{scroll-margin-top:110px}
.inf-hit:focus-visible{outline:2px solid #4AE3A6;outline-offset:-6px;border-radius:40px}
@media (max-width:760px){
.s-hero{background:radial-gradient(95% 45% at 50% 78%, #46E6A6 0%, #14A970 22%, #0A6446 44%, #04261A 70%, #020705 100%) !important}
.s-veil{background:linear-gradient(180deg, rgba(2,7,5,0.9) 0%, rgba(2,7,5,0.55) 48%, rgba(2,7,5,0) 72%) !important}
.s-hero-body{padding:20px 18px 36px !important;gap:20px !important}
.s-hero .glass[role="group"]{width:100%}
.s-hero .glass[role="group"] button{flex:1 1 0}
.s-hero .glass[role="group"] > span{width:calc(50% - 5px) !important}
.s-block{padding:64px 0 !important;gap:28px !important}
.s-block{grid-template-columns:minmax(0,1fr) !important}
.s-meta{grid-template-columns:1fr 1fr !important}.s-meta > :last-child{grid-column:1 / -1}
[class~="s-inc"]{min-width:0}
.s-visual{height:300px !important;border-radius:24px !important}
.s-chips{flex-wrap:nowrap !important;justify-content:flex-start !important;overflow-x:auto;padding-left:18px !important;padding-right:18px !important;scrollbar-width:none}
.s-chips::-webkit-scrollbar{display:none}
}
/* ================= work + case study ================= */
.f-pill{background:transparent;color:#EEF5F1;transition:background-color .3s,color .3s,border-color .3s}
.f-pill:hover{border-color:rgba(74,227,166,0.6)}
.f-pill[aria-pressed="true"]{background:linear-gradient(135deg,#2FD08F,#4AE3A6 55%,#9DF5CF);color:#02170F;border-color:transparent}
.proj .play-btn{transition:transform .4s cubic-bezier(.22,1,.36,1)}.proj:hover .play-btn{transform:scale(1.1)}
.read-progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:70;background:linear-gradient(90deg,#2FD08F,#9DF5CF);box-shadow:0 0 12px rgba(74,227,166,0.7)}
.cs-toc a{display:block;padding:10px 14px;border-radius:12px;color:#9DB3A8;font-size:15px;transition:color .25s,background-color .25s}
.cs-toc a:hover{color:#ffffff;background:rgba(255,255,255,0.05)}
.cs-shot{transition:transform .5s cubic-bezier(.22,1,.36,1)}.cs-shot:hover{transform:scale(1.015)}
@media (max-width:760px){
.w-hero,.cs-hero{background:radial-gradient(95% 45% at 50% 80%, #46E6A6 0%, #14A970 22%, #0A6446 44%, #04261A 70%, #020705 100%) !important}
.w-veil,.cs-veil{background:linear-gradient(180deg, rgba(2,7,5,0.9) 0%, rgba(2,7,5,0.55) 50%, rgba(2,7,5,0) 75%) !important}
.w-hero-body,.cs-hero-body{padding:20px 18px 32px !important;gap:24px !important}
.w-stat{min-height:118px !important;padding:16px !important}.w-stat span:first-child{font-size:36px !important}
.w-sectors{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px}
.w-sectors::-webkit-scrollbar{display:none}
.cs-layout{grid-template-columns:minmax(0,1fr) !important}
.cs-toc{display:none !important}
.cs-facts{grid-template-columns:1fr 1fr !important}
.w-feat > div:first-child{height:260px !important}
.cs-hero-body .parallax > div{height:240px !important}
}
/* ================= about page ================= */
.a-sun{animation:sunrise 2.8s cubic-bezier(.22,1,.36,1) .2s both}
.a-halo{animation:haloIn 3s ease .2s both, haloPulse 7s ease-in-out 3.2s infinite}
.a-streak{animation:streak 4.5s ease-in-out infinite}
@keyframes sunrise{from{transform:translateY(62%)}to{transform:none}}
@keyframes haloPulse{0%,100%{opacity:1}50%{opacity:.78}}
@keyframes haloIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes streak{0%,100%{opacity:.35;transform:scaleX(.85)}50%{opacity:1;transform:scaleX(1.06)}}
.a-sun-pos{transform:translate(calc(var(--px, 0px) * -1.4), calc(var(--py, 0px) * -1))}
.t-row{display:flex;justify-content:center;gap:28px}
.t-card{flex:0 0 min(310px, 28%);min-width:0;height:100%;position:relative;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s,filter .5s;outline:none}
.t-arch{container-type:inline-size;transition:box-shadow .7s,border-color .7s}
.t-name{z-index:2;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.t-sil,.t-photo{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.t-photo{transform-origin:50% 100%}
.t-glow{opacity:.5;transition:opacity .6s}
.t-desc{max-height:5.5em;overflow:hidden}
.t-link{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
@media (hover:hover) and (min-width:761px){
.t-row:hover .t-card,.t-row:focus-within .t-card{transform:translateY(10px) scale(.94);opacity:.62;filter:saturate(.75)}
.t-row .t-card:hover,.t-row .t-card:focus-within{transform:translateY(-30px) scale(1.08);opacity:1;filter:none;z-index:3}
.t-card:hover .t-arch,.t-card:focus-within .t-arch{box-shadow:0 50px 110px rgba(0,0,0,0.55),0 0 90px rgba(74,227,166,0.35);border-color:rgba(200,248,226,0.7)}
.t-card:hover .t-name,.t-card:focus-within .t-name{transform:translateY(-8px)}
.t-card:hover .t-sil,.t-card:focus-within .t-sil{transform:scale(1.05)}
.t-card:hover .t-photo,.t-card:focus-within .t-photo{transform:translateX(-50%) scale(1.05)}
.t-card:hover .t-glow,.t-card:focus-within .t-glow{opacity:1}
.t-card:hover .t-link,.t-card:focus-within .t-link{opacity:1;transform:none}
}
.t-card:focus-visible .t-arch{outline:2px solid #4AE3A6;outline-offset:4px}
@media (hover:none){.t-link{opacity:1;transform:none}}
@media (max-width:760px){
.a-hero{min-height:0 !important;background:radial-gradient(110% 50% at 50% 80%, #1FB57B 0%, #0A6446 28%, #04261A 55%, #020705 85%) !important}
.a-veil{background:linear-gradient(180deg, rgba(2,7,5,0.85) 0%, rgba(2,7,5,0.35) 48%, rgba(2,7,5,0) 62%) !important}
.a-hero-body{padding:20px 18px 300px !important;gap:24px !important}
.a-h1{font-size:40px !important}
.a-halo,.a-sun-pos,.a-reflect,.a-glowsea{left:50% !important;top:80% !important}
.a-sea,.a-horizon,.a-atmos{top:80% !important}
.a-coord{top:calc(80% + 14px) !important}
.a-sun{left:-150px !important;top:-150px !important;width:300px !important;height:300px !important}
.t-head{grid-template-columns:1fr !important;text-align:center}
.t-side{display:none}
.t-row{justify-content:flex-start !important;height:540px !important;overflow-x:auto;scroll-snap-type:x mandatory;margin:56px -18px 0 !important;padding:0 18px 8px;scrollbar-width:none}
.t-row::-webkit-scrollbar{display:none}
.t-card{flex:0 0 74% !important;scroll-snap-align:center}
}
@media (max-width:360px){.a-h1{font-size:34px !important}}
@media (prefers-reduced-motion:reduce){.a-sun,.a-halo,.a-streak{animation:none}.t-card,.t-name,.t-sil,.t-photo{transition:none}}
/* ================= 404 ================= */
.s-chip{transition:border-color .3s,background-color .3s}.s-chip:hover{border-color:rgba(74,227,166,0.55) !important;background:rgba(74,227,166,0.08) !important}
.nf-404{filter:drop-shadow(0 0 30px rgba(74,227,166,0.35))}
.nf-half{transform-box:view-box}
.nf-top{animation:nfTop .8s cubic-bezier(.16,1,.3,1) .62s both}
.nf-bot{animation:nfBot .8s cubic-bezier(.16,1,.3,1) .62s both}
.nf-top-in{animation:nfFloatA 6s ease-in-out 1.6s infinite}
.nf-bot-in{animation:nfFloatB 6s ease-in-out 1.6s infinite}
.nf-cut{stroke-dasharray:100;stroke-dashoffset:100;animation:nfSlash .18s cubic-bezier(.7,0,.2,1) .4s forwards, nfLine 1.2s ease .6s forwards}
.nf-cut-glow{stroke-dasharray:100;stroke-dashoffset:100;opacity:0;animation:nfSlash .18s cubic-bezier(.7,0,.2,1) .4s forwards, nfGlowLine 1.4s ease .4s forwards}
.nf-glow{animation:nfFlash 1.2s ease .55s both}
.nf-art{transform:translate3d(calc(var(--px, 0px) * 0.6), calc(var(--py, 0px) * 0.6), 0)}
@keyframes nfSlash{to{stroke-dashoffset:0}}
@keyframes nfLine{0%{opacity:1;stroke-width:3.5}100%{opacity:.55;stroke-width:1.5}}
@keyframes nfGlowLine{0%{opacity:0}25%{opacity:1}100%{opacity:.35}}
@keyframes nfFlash{0%{opacity:.5}18%{opacity:1}100%{opacity:.45}}
@keyframes nfTop{from{transform:none}to{transform:translate(-18px,-16px) rotate(-1.6deg)}}
@keyframes nfBot{from{transform:none}to{transform:translate(14px,12px) rotate(.8deg)}}
@keyframes nfFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes nfFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.nf-shard,.nf-spark{transform-box:fill-box;transform-origin:center}
.nf-crack{stroke-dasharray:100;stroke-dashoffset:100;animation:nfSlash .45s cubic-bezier(.2,.8,.2,1) .5s forwards}
@media (prefers-reduced-motion:reduce){.nf-crack{animation:none;stroke-dashoffset:0}}
.nf-shards{filter:drop-shadow(0 0 6px rgba(157,245,207,0.7))}
@keyframes nfDrift{0%,100%{translate:0 0}50%{translate:0 -4px}}
.nf-s0{animation:nfS0 1.1s cubic-bezier(.16,1,.3,1) 0.52s both, nfDrift 5s ease-in-out 2.00s infinite}@keyframes nfS0{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(-14.1px,-69.1px) rotate(73deg)}}
@media (prefers-reduced-motion:reduce){.nf-s0{animation:none;transform:translate(-14.1px,-69.1px) rotate(73deg)}}
.nf-s1{animation:nfS1 1.1s cubic-bezier(.16,1,.3,1) 0.51s both, nfDrift 5s ease-in-out 2.13s infinite}@keyframes nfS1{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(0.8px,47.6px) rotate(95deg)}}
@media (prefers-reduced-motion:reduce){.nf-s1{animation:none;transform:translate(0.8px,47.6px) rotate(95deg)}}
.nf-s2{animation:nfS2 1.1s cubic-bezier(.16,1,.3,1) 0.56s both, nfDrift 5s ease-in-out 2.26s infinite}@keyframes nfS2{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(-17.1px,-58.0px) rotate(-68deg)}}
@media (prefers-reduced-motion:reduce){.nf-s2{animation:none;transform:translate(-17.1px,-58.0px) rotate(-68deg)}}
.nf-s3{animation:nfS3 1.1s cubic-bezier(.16,1,.3,1) 0.50s both, nfDrift 5s ease-in-out 2.39s infinite}@keyframes nfS3{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(-21.6px,48.0px) rotate(51deg)}}
@media (prefers-reduced-motion:reduce){.nf-s3{animation:none;transform:translate(-21.6px,48.0px) rotate(51deg)}}
.nf-s4{animation:nfS4 1.1s cubic-bezier(.16,1,.3,1) 0.55s both, nfDrift 5s ease-in-out 2.52s infinite}@keyframes nfS4{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(15.3px,64.0px) rotate(145deg)}}
@media (prefers-reduced-motion:reduce){.nf-s4{animation:none;transform:translate(15.3px,64.0px) rotate(145deg)}}
.nf-s5{animation:nfS5 1.1s cubic-bezier(.16,1,.3,1) 0.51s both, nfDrift 5s ease-in-out 2.65s infinite}@keyframes nfS5{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(18.8px,52.0px) rotate(36deg)}}
@media (prefers-reduced-motion:reduce){.nf-s5{animation:none;transform:translate(18.8px,52.0px) rotate(36deg)}}
.nf-s6{animation:nfS6 1.1s cubic-bezier(.16,1,.3,1) 0.51s both, nfDrift 5s ease-in-out 2.78s infinite}@keyframes nfS6{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(-3.5px,38.0px) rotate(105deg)}}
@media (prefers-reduced-motion:reduce){.nf-s6{animation:none;transform:translate(-3.5px,38.0px) rotate(105deg)}}
.nf-s7{animation:nfS7 1.1s cubic-bezier(.16,1,.3,1) 0.54s both, nfDrift 5s ease-in-out 2.91s infinite}@keyframes nfS7{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(10.1px,87.2px) rotate(13deg)}}
@media (prefers-reduced-motion:reduce){.nf-s7{animation:none;transform:translate(10.1px,87.2px) rotate(13deg)}}
.nf-s8{animation:nfS8 1.1s cubic-bezier(.16,1,.3,1) 0.53s both, nfDrift 5s ease-in-out 3.04s infinite}@keyframes nfS8{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(-28.6px,-69.6px) rotate(71deg)}}
@media (prefers-reduced-motion:reduce){.nf-s8{animation:none;transform:translate(-28.6px,-69.6px) rotate(71deg)}}
.nf-s9{animation:nfS9 1.1s cubic-bezier(.16,1,.3,1) 0.56s both, nfDrift 5s ease-in-out 3.17s infinite}@keyframes nfS9{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(8.8px,-58.0px) rotate(-36deg)}}
@media (prefers-reduced-motion:reduce){.nf-s9{animation:none;transform:translate(8.8px,-58.0px) rotate(-36deg)}}
.nf-s10{animation:nfS10 1.1s cubic-bezier(.16,1,.3,1) 0.55s both, nfDrift 5s ease-in-out 3.30s infinite}@keyframes nfS10{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(-7.7px,68.9px) rotate(154deg)}}
@media (prefers-reduced-motion:reduce){.nf-s10{animation:none;transform:translate(-7.7px,68.9px) rotate(154deg)}}
.nf-s11{animation:nfS11 1.1s cubic-bezier(.16,1,.3,1) 0.53s both, nfDrift 5s ease-in-out 3.43s infinite}@keyframes nfS11{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(-31.7px,-46.4px) rotate(-77deg)}}
@media (prefers-reduced-motion:reduce){.nf-s11{animation:none;transform:translate(-31.7px,-46.4px) rotate(-77deg)}}
.nf-s12{animation:nfS12 1.1s cubic-bezier(.16,1,.3,1) 0.56s both, nfDrift 5s ease-in-out 3.56s infinite}@keyframes nfS12{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(30.3px,33.9px) rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){.nf-s12{animation:none;transform:translate(30.3px,33.9px) rotate(-8deg)}}
.nf-s13{animation:nfS13 1.1s cubic-bezier(.16,1,.3,1) 0.52s both, nfDrift 5s ease-in-out 3.69s infinite}@keyframes nfS13{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(48.8px,44.5px) rotate(-96deg)}}
@media (prefers-reduced-motion:reduce){.nf-s13{animation:none;transform:translate(48.8px,44.5px) rotate(-96deg)}}
.nf-s14{animation:nfS14 1.1s cubic-bezier(.16,1,.3,1) 0.52s both, nfDrift 5s ease-in-out 3.82s infinite}@keyframes nfS14{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(1.2px,-44.6px) rotate(-92deg)}}
@media (prefers-reduced-motion:reduce){.nf-s14{animation:none;transform:translate(1.2px,-44.6px) rotate(-92deg)}}
.nf-s15{animation:nfS15 1.1s cubic-bezier(.16,1,.3,1) 0.52s both, nfDrift 5s ease-in-out 3.95s infinite}@keyframes nfS15{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(4.3px,36.5px) rotate(-51deg)}}
@media (prefers-reduced-motion:reduce){.nf-s15{animation:none;transform:translate(4.3px,36.5px) rotate(-51deg)}}
.nf-s16{animation:nfS16 1.1s cubic-bezier(.16,1,.3,1) 0.52s both, nfDrift 5s ease-in-out 4.08s infinite}@keyframes nfS16{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(-26.9px,-24.1px) rotate(89deg)}}
@media (prefers-reduced-motion:reduce){.nf-s16{animation:none;transform:translate(-26.9px,-24.1px) rotate(89deg)}}
.nf-s17{animation:nfS17 1.1s cubic-bezier(.16,1,.3,1) 0.51s both, nfDrift 5s ease-in-out 4.21s infinite}@keyframes nfS17{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:1;transform:translate(40.4px,73.6px) rotate(114deg)}}
@media (prefers-reduced-motion:reduce){.nf-s17{animation:none;transform:translate(40.4px,73.6px) rotate(114deg)}}
.nf-p0{animation:nfP0 .9s cubic-bezier(.16,1,.3,1) 0.57s both}@keyframes nfP0{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(57.1px,171.6px)}}
.nf-p1{animation:nfP1 .9s cubic-bezier(.16,1,.3,1) 0.52s both}@keyframes nfP1{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(-23.6px,-158.4px)}}
.nf-p2{animation:nfP2 .9s cubic-bezier(.16,1,.3,1) 0.55s both}@keyframes nfP2{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(-105.5px,-146.9px)}}
.nf-p3{animation:nfP3 .9s cubic-bezier(.16,1,.3,1) 0.55s both}@keyframes nfP3{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(53.8px,122.6px)}}
.nf-p4{animation:nfP4 .9s cubic-bezier(.16,1,.3,1) 0.56s both}@keyframes nfP4{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(69.7px,87.2px)}}
.nf-p5{animation:nfP5 .9s cubic-bezier(.16,1,.3,1) 0.54s both}@keyframes nfP5{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(32.5px,46.1px)}}
.nf-p6{animation:nfP6 .9s cubic-bezier(.16,1,.3,1) 0.55s both}@keyframes nfP6{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(-11.9px,95.4px)}}
.nf-p7{animation:nfP7 .9s cubic-bezier(.16,1,.3,1) 0.50s both}@keyframes nfP7{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(90.0px,99.3px)}}
.nf-p8{animation:nfP8 .9s cubic-bezier(.16,1,.3,1) 0.52s both}@keyframes nfP8{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(-29.2px,-98.8px)}}
.nf-p9{animation:nfP9 .9s cubic-bezier(.16,1,.3,1) 0.53s both}@keyframes nfP9{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(-7.4px,-69.6px)}}
.nf-p10{animation:nfP10 .9s cubic-bezier(.16,1,.3,1) 0.59s both}@keyframes nfP10{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(-14.7px,-145.6px)}}
.nf-p11{animation:nfP11 .9s cubic-bezier(.16,1,.3,1) 0.58s both}@keyframes nfP11{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(39.1px,100.9px)}}
.nf-p12{animation:nfP12 .9s cubic-bezier(.16,1,.3,1) 0.58s both}@keyframes nfP12{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(22.2px,72.7px)}}
.nf-p13{animation:nfP13 .9s cubic-bezier(.16,1,.3,1) 0.55s both}@keyframes nfP13{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(29.4px,-121.5px)}}
@media (max-width:760px){
.nf-hero{min-height:0 !important;background:radial-gradient(110% 55% at 60% 82%, #46E6A6 0%, #14A970 22%, #0A6446 44%, #04261A 70%, #020705 100%) !important}
.nf-fig{right:-38% !important;height:300px !important;opacity:.55}
.nf-veil{background:linear-gradient(180deg, rgba(2,7,5,0.85) 0%, rgba(2,7,5,0.6) 60%, rgba(2,7,5,0.2) 100%) !important}
.nf-body{padding:10px 18px 120px !important}
}
@media (prefers-reduced-motion:reduce){
.nf-top{animation:none;transform:translate(-18px,-16px) rotate(-1.6deg)}
.nf-bot{animation:none;transform:translate(14px,12px) rotate(.8deg)}
.nf-top-in,.nf-bot-in,.nf-glow{animation:none}
.nf-cut,.nf-cut-glow{animation:none;stroke-dashoffset:0;opacity:.5}
}
/* ================= contact ================= */
.cf [hidden]{display:none !important}
.cf-dot{position:relative;display:flex;align-items:center;gap:10px;padding-top:14px;color:#6F857A;font-size:14px;border-top:3px solid rgba(255,255,255,0.08);transition:color .4s,border-color .4s}
.cf-dot-n{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;border:1px solid rgba(255,255,255,0.18);transition:all .4s}
.cf-dot.is-active{color:#ffffff;border-top-color:#4AE3A6}.cf-dot.is-active .cf-dot-n{background:#4AE3A6;color:#02170F;border-color:#4AE3A6}
.cf-dot.is-done{color:#9DB3A8;border-top-color:rgba(74,227,166,0.5)}.cf-dot.is-done .cf-dot-n{background:rgba(74,227,166,0.18);color:#4AE3A6;border-color:transparent}
.cf [data-step]:not([hidden]){animation:swapIn .5s cubic-bezier(.22,1,.36,1) both}
.cf-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:22px;min-height:190px;border-radius:22px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.03);color:#EEF5F1;font-family:inherit;cursor:pointer;transition:border-color .3s,background-color .3s,transform .35s cubic-bezier(.22,1,.36,1)}
.cf-opt:hover{border-color:rgba(74,227,166,0.55);transform:translateY(-3px)}
.cf-opt-ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(74,227,166,0.14);color:#4AE3A6;transition:all .3s}
.cf-opt-t{font-size:20px;font-weight:500;letter-spacing:-0.02em}
.cf-opt-d{font-size:14px;line-height:1.5;color:#9DB3A8}
.cf-opt-check{position:absolute;top:16px;right:16px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.2);color:transparent;transition:all .3s}
.cf-opt[aria-pressed="true"]{border-color:#4AE3A6;background:linear-gradient(160deg,rgba(74,227,166,0.18),rgba(74,227,166,0.04))}
.cf-opt[aria-pressed="true"] .cf-opt-ic{background:linear-gradient(135deg,#2FD08F,#0B7A52);color:#ffffff}
.cf-opt[aria-pressed="true"] .cf-opt-check{background:#4AE3A6;border-color:#4AE3A6;color:#02170F}
.cf-chips{display:flex;flex-wrap:wrap;gap:8px}
.cf-chip{height:46px;padding:0 18px;border-radius:999px;border:1px solid rgba(200,248,226,0.2);background:transparent;color:#EEF5F1;font-family:inherit;font-size:15px;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.cf-chip:hover{border-color:rgba(74,227,166,0.6)}
.cf-chip[aria-pressed="true"]{background:linear-gradient(135deg,#2FD08F,#4AE3A6 55%,#9DF5CF);color:#02170F;border-color:transparent}
.cf input::placeholder,.cf textarea::placeholder{color:#5F756B}
.cf input:focus,.cf textarea:focus{border-color:#4AE3A6 !important;box-shadow:0 0 0 3px rgba(74,227,166,0.18)}
.cf-sum dt{color:#6F857A}.cf-sum dd{margin:0;color:#EEF5F1}
.c-n{flex:0 0 28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;background:rgba(74,227,166,0.16);color:#4AE3A6}
.s-chip{transition:border-color .3s,background-color .3s}
@media (max-width:980px){.c-layout{grid-template-columns:minmax(0,1fr) !important}.c-aside{position:static !important}}
@media (max-width:760px){
.c-hero{background:radial-gradient(110% 50% at 50% 85%, #46E6A6 0%, #14A970 22%, #0A6446 44%, #04261A 70%, #020705 100%) !important}
.c-veil{background:linear-gradient(180deg, rgba(2,7,5,0.88) 0%, rgba(2,7,5,0.4) 55%, rgba(2,7,5,0.1) 100%) !important}
.c-hero-body{padding:20px 18px 32px !important;gap:28px !important}
.c-hero .m-h1{font-size:42px !important}
.c-quick{min-height:130px !important;padding:16px !important}
.c-quick > span:nth-child(3){font-size:15px !important}
.c-quick > span[dir="ltr"]{white-space:nowrap}
.c-quick{overflow-wrap:anywhere}
.cf-dot-l{display:none}
.cf-opt{min-height:0}
}
@media (max-width:360px){.c-hero .m-h1{font-size:36px !important}.c-quick-grid{grid-template-columns:1fr !important}}
@media (max-width:360px){.m-h1{font-size:40px !important}.m-fig{height:290px !important}.m-copy{padding-top:220px !important}}
@media (prefers-reduced-motion:reduce){.runner,.breathe{animation:none}.lift{transition:none}.parallax{transform:none}.flip-inner{transition:none}.swap-in{animation:none}.marquee-track{animation:none}.sticky-bar,.m-bottom{transition:none}.mag,.mag-in{transform:none !important}}
/* ---- standalone build: track switch + carousel dots ---- */
[data-show]{display:contents}
.proj-wrap{display:contents}
.proj-wrap[hidden]{display:none !important}
[data-show][hidden]{display:none !important}
.track-btn{color:#EEF5F1}
.track-btn[aria-pressed="true"]{color:#02170F}
body[data-mode="creative"] .track-ind{transform:translateX(100%)}
.dot-btn .dot-on{display:none}
.dot-btn.is-active .dot-on{display:block}
.dot-btn.is-active .dot{display:none}