*{box-sizing:border-box}
:root{
  color-scheme:light;
  --cobalt:#2753F5;--cobalt-dark:#1B3CC0;--cobalt-light:#4A73FF;--cobalt-pale:#DCE3FB;
  --graphite:#17191D;--mist:#E3E6EB;--steel:#5E646E;--panel:#EEF0F3;--canvas:#FAFAF8;
  --white:#FFFFFF;--silver:#B9BFC8;
  --f-body:'Schibsted Grotesk',system-ui,sans-serif;
  --f-mono:'Azeret Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gap:8px
}
html{background:var(--canvas);scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--graphite);font:500 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit}
em{font-style:normal;color:var(--cobalt)}
svg{display:block;overflow:visible}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.cobalt :focus-visible,.graphite :focus-visible{outline-color:var(--white)}
.skip{position:absolute;left:16px;top:-60px;z-index:10;background:var(--graphite);color:var(--white);padding:10px 14px;font:500 13px/1 var(--f-mono)}
.skip:focus{top:12px}
.wrap{max-width:1480px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-block:18px}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 26px/1 var(--f-body);letter-spacing:-.055em}
.lockup svg{width:30px;height:30px;flex:none}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.top nav a:not(.btn){text-decoration:none;border-bottom:1px solid #17191D33;padding-bottom:1px}
.top nav a:not(.btn):hover{color:var(--graphite);border-color:currentColor}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--cobalt);color:var(--white);text-decoration:none;font:500 13px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:14px 18px}
.btn:hover{background:var(--cobalt-dark)}
.btn.light{background:var(--white);color:var(--cobalt)}
.btn.light:hover{background:var(--mist)}

.scene{position:relative;min-height:clamp(560px,62vw,820px);overflow:hidden;background:var(--white)}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.card{position:absolute;left:clamp(16px,4vw,64px);bottom:clamp(16px,4vw,64px);width:min(580px,calc(100% - 32px));background:var(--white);box-shadow:0 0 0 1px #17191D1A,0 24px 48px #17191D26;padding:clamp(20px,3vw,36px);container-type:inline-size}
.card .lab{margin:0 0 5cqw;font:500 max(11px,2cqw)/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.card h1{margin:0;font:800 max(34px,11cqw)/.95 var(--f-body);letter-spacing:-.05em}
.card p.lede{margin:4cqw 0 6cqw;font-size:max(16px,3.4cqw);color:var(--steel)}

.rule{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin:32px 0 var(--gap);padding:12px 0;border-block:1px solid #17191D26;font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.rule h2{margin:0;font:inherit;color:var(--graphite)}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.p{position:relative;min-width:0;aspect-ratio:1;background:var(--bg,var(--white));container-type:inline-size;display:flex;flex-direction:column;padding:16% 6% 6%}
.p.wide{grid-column:span 3;aspect-ratio:auto;padding:9% 3% 3%}
.p .lab{position:absolute;top:5.5cqw;left:6cqw;right:6cqw;display:flex;justify-content:space-between;gap:12px;margin:0;font:500 max(11px,2.8cqw)/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.p.wide .lab{top:3cqw;left:3cqw;right:3cqw;font-size:max(11px,1.4cqw)}
.cobalt{--bg:var(--cobalt);color:var(--white)}
.graphite{--bg:var(--graphite);color:var(--white)}
.mist{--bg:var(--mist)}
.panel{--bg:var(--panel)}

.floor .cube{width:22cqw;height:22cqw;margin-bottom:auto}
.floor .say{margin:6cqw 0 0;font:800 max(20px,7.6cqw)/1.02 var(--f-body);letter-spacing:-.04em;text-wrap:balance}
.floor .body{margin:3cqw 0 0;font-size:max(15px,3.9cqw);line-height:1.45;color:var(--steel)}
.cube.dark{--a1:#17191D;--a2:#0B0C0E;--a3:#34373E}
.cube.off{--a1:#fff;--a2:#E3E6EB;--a3:#B9BFC8;--k:#9aa0aa}

.price .figure{margin:auto 0 0;font:800 46cqw/.8 var(--f-body);letter-spacing:-.07em}
.price .note{margin:4cqw 0 0;font:500 max(12px,3.2cqw)/1.45 var(--f-mono);color:var(--silver)}


.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:end;align-items:end;gap:24px}
.cta h2{margin:0;font:800 max(34px,9cqw)/.95 var(--f-body);letter-spacing:-.05em}
.cta p{margin:2cqw 0 0;font-size:max(16px,2.2cqw);color:var(--cobalt-pale);max-width:40ch}
.cta .mail{display:block;margin-top:10px;font:500 13px/1.4 var(--f-mono);color:var(--cobalt-pale);text-align:right}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-block:20px 40px;font:500 12px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.foot .lockup{font-size:20px;color:var(--graphite);text-transform:none}
.foot .lockup svg{width:22px;height:22px}

@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p.wide{grid-column:span 1;padding:16% 6% 6%}
  .p.wide .lab{top:5.5cqw;left:6cqw;right:6cqw;font-size:max(11px,2.8cqw)}
  .cta{grid-template-columns:minmax(0,1fr)}
  .cta .mail{text-align:left}
}
@media (max-width:640px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .p.wide{grid-column:auto;padding:16% 6% 6%}
  .p.wide .lab{top:5.5cqw;left:6cqw;right:6cqw;font-size:max(11px,2.8cqw)}
  .scene{min-height:620px}
  .cta{grid-template-columns:minmax(0,1fr)}
  .cta .mail{text-align:left}
  .top nav .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}