html, body { overflow-x: clip; }
body{margin:0;background:#F8F7FB}
a{color:inherit}a:hover{opacity:.88}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.grow{transform-origin:left center;animation:grow 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bar{transition:width .7s cubic-bezier(.2,.7,.2,1),background-color .4s ease,border-color .4s ease}
.stack{transition:height .45s ease,bottom .45s ease}
.sea{background-color:#0B0A12;background-image:linear-gradient(rgba(11,10,18,0.25),rgba(11,10,18,0.45)),url(../assets/sea.jpg);background-size:cover;background-position:center bottom;background-attachment:fixed}
.glass{background:rgba(14,12,26,0.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(180,170,255,0.16);border-radius:24px}
.glass-dense{background:rgba(14,12,26,0.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(180,170,255,0.16);border-radius:24px}
.hatch{background-image:repeating-linear-gradient(135deg,rgba(94,72,232,0.55) 0 2px,transparent 2px 9px)}
.dm-in{font-family:'JetBrains Mono',monospace;font-size:15px;text-align:right;padding:10px 12px;min-height:44px;box-sizing:border-box;border:1px solid #CFCCDA;border-radius:10px;background:#FFFFFF;color:#16141F;width:100%}
.dm-in:focus,.dm-sel:focus{outline:2px solid #5E48E8;outline-offset:1px}
.dm-sel{font-family:Outfit,sans-serif;font-size:15px;padding:10px 12px;min-height:44px;border-radius:10px;border:1px solid rgba(180,170,255,0.3);background:#15131F;color:#F1EFFA}
/* scroll reveals: hidden only once JS has started, so the page never stays blank */
.js-anim .rv{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js-anim .rv.in{opacity:1;transform:none}
.js-anim .rv-big{transform:translateY(80px) scale(.97);transform-origin:left bottom;transition-duration:1.2s}
.js-anim .rv.d1{transition-delay:.15s}.js-anim .rv.d2{transition-delay:.3s}.js-anim .rv.d3{transition-delay:.45s}
.js-anim .rv-bar{transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.js-anim .in .rv-bar{transform:none}
.js-anim .rv-pop{display:inline-block;opacity:0;transform:scale(.85);transform-origin:left bottom;transition:opacity .6s ease .45s,transform .6s cubic-bezier(.2,.7,.2,1) .45s}
.js-anim .in .rv-pop{opacity:1;transform:none}
/* funnel: JS sets --f (0 to 1) from scroll position; default 1 shows the finished state */
.fun-wrap{--f:1}
.fun-item{--k:clamp(0,calc((var(--f) - var(--s)) / 0.12),1)}
.fun-on{opacity:var(--k)}
.fun-check{opacity:var(--k);transform:scale(calc(0.4 + 0.6 * var(--k)))}
.fun-block{transform-origin:center bottom;transform:scaleY(var(--k))}
.fun-count{color:#16141F;transition:color .3s ease}
.over .fun-count{color:#5B45E0}
.fun-a,.fun-b{transition:opacity .35s ease}
.fun-a{opacity:1}.fun-b{opacity:0}
.over .fun-a{opacity:0}.over .fun-b{opacity:1}
.dm-sel{appearance:none;-webkit-appearance:none;padding-right:34px;font-weight:500;background-image:linear-gradient(45deg,transparent 50%,#C9C5DA 50%),linear-gradient(135deg,#C9C5DA 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
@media (max-width: 820px){
.m-hide{display:none!important}
.nav-pad{padding:12px 20px!important}
.sec{padding:72px 20px!important;gap:44px!important}
.hero-wrap{padding:40px 20px 28px!important;gap:32px!important}
.strip{padding:0 20px 40px!important}
.h-xl{font-size:42px!important}
.h-lg{font-size:36px!important}
.h-md{font-size:26px!important}
.h-giant{font-size:54px!important}
.big-num{font-size:54px!important}
.hero-art{height:auto!important;flex-basis:100%!important}
.hero-fig{position:relative!important;width:100%!important;height:580px!important}
.hero-card{position:relative!important;width:auto!important;margin-top:16px}
.panel{padding:22px 18px!important}
.row3{grid-template-columns:84px minmax(0,1fr) 88px!important;gap:10px!important}
.row3b{grid-template-columns:112px minmax(0,1fr) 70px!important;gap:10px!important}
.wf-name{font-size:8px!important}
.hero-inset{width:64%!important}
.move-line{font-size:18px!important}
}
/* the last section fills one screen, like the others; capped so it never stretches on very tall windows */
.contact-full{min-height:calc(min(100vh,980px) - 78px);min-height:calc(min(100svh,980px) - 78px)}
/* laptop-height screens (e.g. 1366x768, 1440x900): tighter spacing so each section fits one screen */
@media (min-width: 821px) and (max-height: 920px){
.sec{padding-top:88px!important;padding-bottom:88px!important;gap:44px!important}
.h-xl{font-size:56px!important}
.h-lg{font-size:46px!important}
.h-md{font-size:30px!important}
.hero-wrap{padding-top:36px!important;padding-bottom:28px!important}
.hero-copy{gap:20px!important}
.hero-sub{font-size:17px!important}
.contact-full .sec{padding-top:40px!important;padding-bottom:28px!important;gap:40px!important}
.contact-full .h-giant{font-size:68px!important}
.contact-full form{gap:10px!important}
.contact-full textarea{height:70px}
.strip{padding-bottom:32px!important}
.hero-art{zoom:.86}
.svc-card{padding:28px!important;gap:12px!important}
.faq-q{padding:16px 0!important;font-size:18px!important}
.panel{padding:28px!important}
.m-row{gap:32px!important}
.big-num{font-size:60px!important}
}
/* hero picture: scale the whole composition (chart + budget card) in proportion, so nothing is hidden and the card stays inside the first screen */
@media (min-width: 821px) and (max-height: 800px){ .hero-art{zoom:.8!important} }
@media (min-width: 821px) and (max-height: 720px){ .hero-art{zoom:.74!important} .hero-wrap{padding-top:24px!important} }
/* gentle section snapping (home page, desktop with a mouse or trackpad):
   rests on a section top when you stop near it; tall sections scroll freely and also rest on their bottom edge */
.snap-end{height:1px;margin-top:-1px;pointer-events:none}
@media (min-width: 821px) and (pointer: fine) and (prefers-reduced-motion: no-preference){
html{scroll-snap-type:y proximity;scroll-padding-top:78px}
section.snap{scroll-snap-align:start}
section.snap-tall > .snap-end{scroll-snap-align:end}
}
@media (prefers-reduced-motion: reduce){.js-anim .rv,.js-anim .rv-bar,.js-anim .rv-pop{opacity:1!important;transform:none!important;transition:none!important}.rise,.grow{animation:none}.bar,.stack{transition:none}}