*,*::before,*::after{box-sizing:border-box}
body{margin:0}
:root{
  --bg:#07080B; --deep:#0C1016; --glass:rgba(12,16,22,.62);
  --line:rgba(200,214,230,.12); --line2:rgba(200,214,230,.24);
  --frost:#EEF1F5; --mist:#8D95A1; --dim:#59616D; --steel:#B9CADB; --pt:#7F9CB8;
  --sans:'Schibsted Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --gut:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.9,.2,1);
  color-scheme:dark;
}
html,html:root{background:var(--bg)!important}
html,body{min-height:100%}
body{background:var(--bg);color:var(--frost);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.nogl{background:radial-gradient(110% 80% at 70% 20%,#141a24,#07080B 60%) fixed}
::selection{background:var(--frost);color:var(--bg)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--steel)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);font-variant-numeric:tabular-nums}
.wrap{padding-inline:var(--gut);max-width:1440px;margin-inline:auto}
main{position:relative}
main>section,footer,.nav{position:relative;z-index:2}

/* the one canvas */
#stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(7,8,11,.75))}

/* nav */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
.nav.solid{background:rgba(7,8,11,.6);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--pt) 60%,transparent 62%);box-shadow:0 0 14px rgba(185,202,219,.5)}
.links{display:flex;gap:28px;font-size:14px;color:var(--mist)}
.links a{transition:color .25s}.links a:hover{color:var(--frost)}
.nav-r{display:flex;align-items:center;gap:20px}
.nav .clock{display:none}
@media (min-width:1100px){.nav .clock{display:block}}
@media (max-width:760px){.links{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding-inline:22px;border-radius:999px;font:600 15px/1 var(--sans);letter-spacing:-.005em;cursor:pointer;border:0;transition:transform .45s var(--ease),background .3s,color .3s,box-shadow .3s;will-change:transform}
.btn svg{width:16px;height:16px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.b1{background:var(--frost);color:var(--bg)}
.b1:hover{background:#fff;box-shadow:0 0 0 6px rgba(238,241,245,.08),0 10px 40px rgba(185,202,219,.25)}
.b2{background:rgba(255,255,255,.03);color:var(--frost);box-shadow:inset 0 0 0 1px var(--line2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.b2:hover{box-shadow:inset 0 0 0 1px rgba(238,241,245,.5)}
.sm{height:40px;padding-inline:18px;font-size:14px}
.row{display:flex;flex-wrap:wrap;gap:12px}

/* reveal (content is readable at rest; motion only adds lift) */
.rv{transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)}
.rv:not(.in){transform:translateY(28px);opacity:.35}
.js-off .rv{transform:none;opacity:1}

/* HERO */
.hero{min-height:min(100svh,960px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:110px}
.hero .wrap{width:100%;display:grid;gap:26px;padding-bottom:40px}
.h1{font-size:clamp(46px,7vw,120px);line-height:.95;letter-spacing:-.045em;font-weight:500;max-width:11ch}
.ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.ln>span{display:block;animation:up 1.3s var(--ease) both;animation-delay:calc(.35s + var(--k)*.12s)}
@keyframes up{from{transform:translateY(106%)}to{transform:none}}
.fade{animation:fin 1.2s var(--ease) both;animation-delay:var(--d,.9s)}
@keyframes fin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.lede{max-width:44ch;font-size:clamp(17px,1.35vw,20px);color:var(--mist);line-height:1.5}
.hero-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px;border-top:1px solid var(--line)}
@media (max-width:640px){.hide-s{display:none}}


/* customer logos */

.logos{padding-block:calc(clamp(96px,11vw,150px) + 120px) clamp(40px,6vw,72px)}
.logos .wrap{display:grid;justify-items:center;gap:22px;text-align:center}
.logo-row{display:flex;align-items:center;justify-content:center;gap:clamp(32px,6vw,88px);flex-wrap:wrap}
.logo-row>*{opacity:.72}
.logo-row img{display:block;width:auto;max-width:100%}
.logo-row .l-pro{height:26px}
.logo-row .l-iop{height:46px}
.wm-sift{font-family:var(--sans);font-weight:700;font-size:26px;letter-spacing:-.045em;color:#fff;line-height:1;display:inline-flex;align-items:baseline}
.wm-sift i{font-style:normal;font-weight:400;opacity:.7}
@media (max-width:640px){.logo-row{gap:28px 36px}.logo-row .l-pro{height:22px}.logo-row .l-iop{height:40px}.wm-sift{font-size:22px}}
/* statement */
.statement-s{padding-block:clamp(120px,18vw,260px)}
.statement{font-size:clamp(30px,4vw,64px);line-height:1.1;letter-spacing:-.035em;font-weight:500;max-width:22ch;margin-inline:auto;text-align:center}
.statement .sw{opacity:.22;transition:opacity .35s}
.statement .sw.on{opacity:1}
.statement-s .mono{text-align:center;margin-bottom:32px}

/* section heads */
.sec-head{display:grid;gap:18px;margin-bottom:clamp(40px,6vw,72px);max-width:760px}
.h2{font-size:clamp(38px,5.4vw,86px);line-height:.98;letter-spacing:-.04em;font-weight:500}
.sub{color:var(--mist);max-width:50ch;font-size:17px}


/* services: text scrolls on the left, the particles become each service on the right */
.svc-s{padding-top:clamp(80px,10vw,140px)}
.svc{min-height:88vh;display:flex;align-items:center}
.svc .inner{max-width:520px;display:grid;gap:20px;padding:32px 0}
.svc .tag{display:flex;gap:14px;align-items:center}
.svc .tag span+span::before{content:"";display:inline-block;width:18px;height:1px;background:var(--line2);vertical-align:middle;margin-right:14px}
.svc h3{font-size:clamp(34px,4vw,64px);line-height:1;letter-spacing:-.04em;font-weight:500}
.svc p{color:var(--mist);font-size:18px;max-width:40ch}
.svc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.svc li{font-size:13px;padding:7px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);background:rgba(7,8,11,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.svc .idx{font-family:var(--mono);font-size:12px;color:var(--dim)}
@media (max-width:760px){.svc{min-height:72vh}.svc .inner{background:rgba(7,8,11,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:24px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line)}}

.svc .case-metric{display:flex;align-items:baseline;gap:14px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.svc .case-metric b{font-size:clamp(44px,5vw,72px);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.svc .case-metric span{color:var(--mist);max-width:22ch;font-size:15px;line-height:1.4}
.svc .since{color:var(--dim)}
.svc .tag .ph::before{display:none}
.ph{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);background:var(--steel);padding:3px 7px;border-radius:4px}
/* approach: galaxy on the left, the filter on the right */
.method{padding-block:clamp(100px,12vw,180px)}
.method .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.method .sec-head,.method .side{grid-column:2}
.lead2{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--mist)}
.side{display:grid;gap:0}
.crit{list-style:none;margin:0 0 56px;padding:0;border-top:1px solid var(--line)}
.crit li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.crit svg{width:20px;height:20px;margin-top:3px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.crit svg circle{stroke:var(--line2);stroke-width:1.2}
.crit svg path{stroke:var(--frost);stroke-width:1.6;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .6s var(--ease) .35s}
.crit li.in svg path{stroke-dashoffset:0}
.crit b{display:block;font-weight:500;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.015em}
.crit span{display:block;color:var(--mist);font-size:15px;margin-top:3px;max-width:52ch}
.match-h{margin-bottom:14px}
.match{border-top:1px solid var(--line)}
.match>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:8px 24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.match h3{font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.03em;font-weight:500}
.match p{color:var(--mist)}
@media (max-width:900px){.method .grid{grid-template-columns:1fr}.method .sec-head,.method .side{grid-column:1}.method .side{background:rgba(7,8,11,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.match>div{grid-template-columns:1fr}}

/* team: particles on the left, content on the right */
.team-s{padding-block:clamp(100px,12vw,170px);min-height:100vh;display:flex;align-items:center}
.team-s>.wrap{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.team-col{grid-column:2;display:grid;gap:28px}
.team-col .sec-head{margin-bottom:0}
.team-text{display:grid;gap:16px;color:var(--mist);font-size:clamp(17px,1.3vw,19px);line-height:1.55;max-width:52ch}
.stats{border-top:1px solid var(--line)}
.stat{display:grid;grid-template-columns:clamp(150px,15vw,230px) minmax(0,1fr);gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.stat b{font-size:clamp(44px,4.6vw,72px);line-height:.9;letter-spacing:-.055em;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b small{font-size:.34em;letter-spacing:0;color:var(--steel);margin-left:.2em;font-weight:500}
.stat>span{color:var(--mist);font-size:15px;max-width:30ch}
@media (max-width:900px){.team-s{min-height:0}.team-s>.wrap{grid-template-columns:1fr}.team-col{grid-column:1;background:rgba(7,8,11,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}}
@media (max-width:480px){.stat{grid-template-columns:1fr;gap:8px}}

/* cta: the particles spell the name above this */
.cta{padding-top:min(52vh,520px);padding-bottom:clamp(60px,8vw,100px)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:end}
.cta .h2{font-size:clamp(42px,6.4vw,104px)}
.cta-side{display:grid;gap:18px;justify-items:start}
.mail{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mail .addr{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;user-select:all}
.copy{font:500 12px/1 var(--mono);color:var(--mist);background:none;border:0;box-shadow:inset 0 0 0 1px var(--line2);border-radius:999px;padding:9px 13px;cursor:pointer}
.copy:hover{color:var(--frost)}
.princ{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:clamp(64px,8vw,110px)}
.princ div{padding:28px 28px 28px 0;display:grid;gap:10px;align-content:start}
.princ div+div{padding-left:28px;border-left:1px solid var(--line)}
.princ h3{font-size:20px;letter-spacing:-.02em;font-weight:600}
.princ p{color:var(--mist);font-size:15px;max-width:34ch}
@media (max-width:820px){.cta-grid,.princ{grid-template-columns:1fr}.princ div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

footer{border-top:1px solid var(--line);background:rgba(7,8,11,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding-bottom:env(safe-area-inset-bottom,0px)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:24px}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a:hover{color:var(--frost)}

/* HUD: which form the particles hold */
.hud{position:fixed;z-index:40;right:var(--gut);bottom:calc(22px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;justify-items:end;pointer-events:none;text-align:right}
.hud b{font:500 17px/1 var(--sans);letter-spacing:-.01em;color:var(--frost);text-transform:none}
.hud .bar{width:120px;height:1px;background:var(--line2);position:relative;overflow:hidden}
.hud .bar i{position:absolute;inset:0;background:var(--frost);transform-origin:left;transform:scaleX(1)}
@media (max-width:760px){.hud{display:none}}

/* cursor */
.cur,.cring{position:fixed;left:0;top:0;z-index:95;pointer-events:none;border-radius:50%;transform:translate(-100px,-100px)}
.cur{width:5px;height:5px;margin:-2.5px;background:var(--frost)}
.cring{width:34px;height:34px;margin:-17px;border:1px solid rgba(238,241,245,.3);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),border-color .3s,background .3s}
.cring.big{width:64px;height:64px;margin:-32px;border-color:rgba(238,241,245,.6);background:rgba(238,241,245,.05)}
@media (pointer:coarse){.cur,.cring{display:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}.rv:not(.in){transform:none;opacity:1}}