@font-face{font-family:Clash;src:url(fonts/ClashDisplay-600.woff2);font-weight:600}
@font-face{font-family:Clash;src:url(fonts/ClashDisplay-500.woff2);font-weight:500}
@font-face{font-family:Zodiak;src:url(fonts/Zodiak-400.woff2);font-weight:400}
@font-face{font-family:Zodiak;src:url(fonts/Zodiak-400i.woff2);font-style:italic}
@font-face{font-family:Mono;src:url(fonts/GeistMono-VariableFont_wght.ttf)}
@font-face{font-family:Switzer;src:url(fonts/Switzer-400.woff2)}
:root{--b:#051BFF;--p:#F6F5F4;--i:#0E0E10;--m:#77736C;--g:24px}
*{box-sizing:border-box;margin:0;padding:0}html{background:var(--p);color:var(--i)}body{font-family:Switzer;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block}
.mono{font:500 11px/1.4 Mono;letter-spacing:.06em;text-transform:uppercase}
.muted{color:var(--m)}
nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px var(--g);background:rgb(246 245 244/.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
nav .lg img{height:20px;width:auto}nav .lk{display:flex;gap:28px}nav .lk a:hover{color:var(--b)}
nav .cta{background:var(--i);color:var(--p);padding:10px 16px}
.wrap{padding:0 var(--g)}
.bold{font-family:Clash;font-weight:600;letter-spacing:-.035em}
.ser{font-family:Zodiak;font-weight:400;letter-spacing:-.02em}.ser i,.it{font-style:italic}
/* hero */
#hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:120px var(--g) 40px}
.hl{font:400 clamp(44px,7.6vw,136px)/.95 Zodiak;letter-spacing:-.035em;max-width:14ch}
.hl i{color:var(--b)}.hl .ln{display:block;overflow:hidden;padding-bottom:.06em}.hl .ln>span{display:inline-block}
.hfoot{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.hlogo{width:min(62vw,880px);height:auto}
.hmeta{display:grid;gap:8px;text-align:right}
/* offer */
#offer{background:var(--i);color:var(--p);padding:140px var(--g);min-height:100vh;display:grid;align-content:center}
.big{font:400 clamp(40px,6.4vw,112px)/.95 Zodiak;letter-spacing:-.035em;max-width:16ch}.big i{color:#8C97FF}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:72px}
.step{background:#1B1B1F;padding:28px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between}
.step b{font:500 clamp(40px,4.5vw,72px) Clash;letter-spacing:-.03em}.step.hot{background:var(--b)}
/* work */
.shead{display:flex;justify-content:space-between;align-items:end;padding:140px var(--g) 40px;border-bottom:1px solid var(--i);margin:0 var(--g);padding-left:0;padding-right:0}
.h2{font:400 clamp(40px,6vw,104px)/.92 Zodiak;letter-spacing:-.035em}.h2 i{color:var(--b)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:56px var(--g);padding:48px var(--g) 40px}
.card{grid-column:span 6;display:block}.card.full{grid-column:1/-1}
.card.l{grid-column:1/8}.card.r{grid-column:8/-1;margin-top:22vh}.card.l2{grid-column:1/6;margin-top:0}.card.r2{grid-column:6/-1}
.cov{position:relative;overflow:hidden;background:var(--bg);aspect-ratio:4/5}
.card.full .cov{aspect-ratio:16/8.4}.card.r2 .cov,.card.l .cov{aspect-ratio:5/4.6}
.cov img{position:absolute;box-shadow:0 30px 80px -30px rgb(0 0 0/.45);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.cov .s{width:var(--w,34%);left:var(--x);top:var(--y);border-radius:clamp(10px,1.4vw,22px)}
.cov .d{width:var(--w,96%);left:var(--x,8%);top:var(--y,14%);border-radius:14px}
.card:hover .cov img{transform:translateY(-3%)}.card:hover .cov img:nth-child(2){transform:translateY(-6%)}
.cov .tag{position:absolute;left:20px;top:18px;color:var(--fg,#fff);z-index:2}
.cap{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding-top:18px;align-items:baseline}
.cap h3{font:600 clamp(26px,2.6vw,40px)/1 Clash;letter-spacing:-.03em}
.cap p{grid-column:1/-1;font:400 clamp(17px,1.35vw,21px)/1.3 Zodiak;color:#3C3A36;max-width:46ch}
.cap .go{display:inline-flex;gap:8px;align-items:center}.card:hover .go{color:var(--b)}
.soon{opacity:.55}
/* index list */
.index{padding:80px var(--g) 120px}
.ir{display:grid;grid-template-columns:60px 1.2fr 1fr 1fr 80px;gap:var(--g);align-items:center;border-top:1px solid #D8D5D0;padding:22px 0;position:relative}
.ir:last-child{border-bottom:1px solid #D8D5D0}
.ir h4{font:500 clamp(22px,2.2vw,34px)/1 Clash;letter-spacing:-.02em;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ir:hover h4{transform:translateX(14px);color:var(--b)}
.prev{position:fixed;width:260px;aspect-ratio:4/5;pointer-events:none;z-index:30;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .25s,transform .4s cubic-bezier(.2,.8,.2,1);background:#ddd center/cover}
.prev.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* cta */
#cta{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:140px var(--g) 0;background:var(--b);color:#fff}
#cta .big i{color:#fff}
.btn{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--b);font:600 20px Clash;padding:22px 30px;margin-top:40px}
.ticker{white-space:nowrap;overflow:hidden;border-top:1px solid rgb(255 255 255/.3);margin:0 calc(var(--g)*-1);padding:22px 0}
.tk{display:inline-flex;gap:64px;align-items:center}.tk img{height:clamp(56px,9vw,140px);width:auto}
.tk i{font:italic 400 clamp(50px,8vw,130px)/1 Zodiak}
footer{display:flex;justify-content:space-between;padding:20px var(--g);background:var(--i);color:#aaa}
@media(max-width:760px){:root{--g:16px}
nav .lk a:not(.cta){display:none}
#hero{padding-top:104px;min-height:88svh}.hl{font-size:clamp(42px,12.4vw,64px)}
.hfoot{grid-template-columns:1fr;gap:20px}.hlogo{width:100%}.hmeta{text-align:left;grid-auto-flow:column;justify-content:space-between}
.steps{grid-template-columns:1fr}.step{min-height:150px}
.shead{flex-direction:column;align-items:start;gap:14px;padding-top:100px}
.grid{gap:48px 0}.card,.card.l,.card.r,.card.l2,.card.r2{grid-column:1/-1;margin-top:0}
.card.full .cov,.card .cov,.card.l .cov,.card.r2 .cov{aspect-ratio:4/4.4}
.cov .s{width:calc(var(--w,34%)*var(--mw,1.45));left:var(--mx,var(--x))}
.ir{grid-template-columns:34px 1fr auto;row-gap:4px}.ir .c3,.ir .c4{display:none}
.prev{display:none}}
.card>a{display:block}.cap h3 a:hover{color:var(--b)}
.tf{grid-column:1/-1;display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:6px;color:var(--m)}
.tf a{color:var(--b);border-bottom:1px solid}
.tbd{background:#FFF1B8;color:#5a4a00;padding:1px 6px;font:500 11px/1.6 Mono;letter-spacing:.04em;white-space:nowrap}
@media(min-width:761px) and (max-width:1100px){.card.l,.card.r,.card.l2,.card.r2{grid-column:1/-1;margin-top:0}.hl{font-size:9.4vw}}
.tf .tbd{white-space:normal}