:root{
  --paper:#DEDBE5;
  --paper-2:#D2CEDB;
  --ink:#1A1626;
  --mute:#55506A;
  --cobalt:#2A33D9;
  --cobalt-soft:#C3C6FA;
  --line:rgba(26,22,38,.16);
  --g:clamp(16px,2vw,32px);
  --display:'Big Shoulders Display',Impact,sans-serif;
  --text:'Schibsted Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px}
[data-dark] :focus-visible{outline-color:var(--cobalt-soft)}
.skip{position:fixed;left:var(--g);top:-60px;z-index:90;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:3px;text-decoration:none}
.skip:focus{top:12px}

/* shared masks */
.mask,.ln{display:block;overflow:hidden}
.ln>span{display:block}
.h2{font:800 clamp(56px,8.4vw,150px)/.86 var(--display);letter-spacing:-.005em}

/* NAV */
/* edge-anchored text nav on a 4-column grid; hides on scroll down, returns on scroll up */
.nav{position:fixed;inset:22px var(--g) auto;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;column-gap:20px;pointer-events:none;color:var(--ink);font-size:15px;font-weight:500;transition:color .4s ease}
.nav>*{pointer-events:auto;transition:opacity .4s ease,transform .6s var(--ease)}
.nav.on-dark{color:var(--paper)}
.nav.is-tucked>*{opacity:0;transform:translateY(-14px);pointer-events:none}
.nav a{text-decoration:none}
.nav__mark{font:800 24px/1 var(--display);letter-spacing:.005em}
.nav__clock{display:flex;gap:6px;align-items:baseline;font-size:14px;font-variant-numeric:tabular-nums}
.clock{display:inline-flex;height:1.3em;line-height:1.3em;overflow:hidden;align-self:center}
.clock .c{display:block;height:1.3em;overflow:hidden}
.clock .c>span{display:block;transition:transform .6s var(--ease)}
.clock .c>span>span{display:block;height:1.3em;text-align:center;width:.6em}
.clock .sep{width:.26em;text-align:center;transform:translateY(-.06em)}
.nav__links{display:flex;gap:26px}
.nav__links a,.nav__cta{position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.nav__links a.is-here::after{transform:scaleX(1)}
/* hover: the label rolls up like the counters */
.r{display:inline-block;height:1.3em;line-height:1.3em;overflow:hidden;vertical-align:bottom}
.r i{display:block;font-style:normal;transition:transform .5s var(--ease)}
.r i::after{content:attr(data-t);display:block}
a:hover .r i,a:focus-visible .r i{transform:translateY(-50%)}
.nav__cta{justify-self:end;display:inline-flex;gap:8px;align-items:center;color:var(--cobalt)}
.nav.on-dark .nav__cta{color:var(--paper)}
.nav__menu{display:none}
.menu{position:fixed;inset:0;z-index:45;background:var(--ink);color:var(--paper);padding:110px var(--g) 32px;display:flex;flex-direction:column;justify-content:space-between}
.menu nav{display:flex;flex-direction:column}
.menu nav a{font:800 18vw/1 var(--display);text-decoration:none;text-transform:uppercase}
.menu[hidden]{display:none}
.menu__mail{font-size:17px}

/* HERO */
.hero{min-height:100vh;min-height:100svh;overflow-x:clip;display:flex;flex-direction:column;padding:120px var(--g) 28px}
.hero__intro{align-self:flex-end;max-width:25ch;font-size:clamp(19px,1.55vw,24px);line-height:1.3;font-weight:500}
.hero__name{margin-top:auto;font:800 calc((100vw - 2*var(--g)) / 3.72)/.8 var(--display);letter-spacing:-.005em}
.hero__row{display:flex;align-items:center;gap:.06em}
.hero__row .mask{padding:.04em 0 .035em;margin:-.04em 0 -.035em}
.hero__word{display:block}
.hero__row--1{gap:.12em}
.flip{position:relative;display:block;width:.82em;flex:none}
.flip__frame{position:relative;display:block;aspect-ratio:4/3;border-radius:clamp(8px,.06em,16px);overflow:hidden;background:var(--paper-2)}
.flip__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.flip__frame img.is-on{visibility:visible}
.flip__cap{letter-spacing:0;position:absolute;left:calc(100% + 14px);bottom:2px;font:500 14px/1.2 var(--text);white-space:nowrap}
.hero__foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:15px;font-weight:500}
.hero__scroll{display:inline-flex;gap:8px;align-items:center;text-decoration:none}


/* STATEMENT */
.statement{padding:22vh var(--g) 24vh}
.statement__text{max-width:21em;font-size:clamp(30px,3.9vw,62px);line-height:1.08;font-weight:500;letter-spacing:-.025em}
.statement__text .w{display:inline-block}

/* WORK / DRUM */
/* sticky instead of a JS pin: no layout shift, no fixed-position swap */
.work{background:var(--cobalt);color:var(--paper);height:500vh;height:500svh}
.work__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1.12fr 1fr;grid-template-rows:auto 1fr;column-gap:4vw;padding:96px var(--g) 40px;overflow:hidden}
.work__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(222,219,229,.28);padding-bottom:14px}
.work__title{font-size:15px;font-weight:500}
.work__count{display:flex;gap:.3em;font:800 clamp(28px,2.6vw,40px)/1 var(--display)}
.work__of{color:var(--cobalt-soft)}
.roll{display:inline-flex}
.roll .c{display:block;height:1em;overflow:hidden}
.roll .c>span{display:block;transition:transform .7s var(--ease)}
.roll .c>span>span{display:block;height:1em}
.drum{position:relative;align-self:stretch;perspective:1500px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.drum__pointer{position:absolute;left:0;top:50%;margin-top:-11px;color:var(--paper)}
.drum__wheel{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:50%;height:0;transform-style:preserve-3d}
.drum__wheel li{position:absolute;left:0;top:0;padding-left:44px;font:800 clamp(86px,10.4vw,190px)/1 var(--display);text-transform:uppercase;letter-spacing:-.005em;height:1em;margin-top:-.5em;line-height:1;backface-visibility:hidden;-webkit-backface-visibility:hidden;white-space:nowrap}
.stage{align-self:center;display:flex;flex-direction:column;gap:18px}
.stage__window{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#1d24a8;container-type:inline-size}
.stage__strip{position:absolute;left:0;top:0;width:100%;height:600%}
.mock{position:relative;height:16.6667%;overflow:hidden}
.mock img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover}
.stage__meta{min-height:84px}
.stage__desc{max-width:36ch;font-size:17px;line-height:1.4}
.stage__info{display:flex;justify-content:space-between;margin-top:10px;font-size:14px;color:var(--cobalt-soft)}
.stage__meta.swap .stage__desc,.stage__meta.swap .stage__info{opacity:0;transform:translateY(8px)}
.stage__desc,.stage__info{transition:opacity .35s ease,transform .35s ease}

/* mock site UIs (sized off the stage width) */
.mock__ui{position:absolute;inset:0;padding:3.4cqw 3.8cqw;display:flex;flex-direction:column;font-family:var(--text)}
.mock__bar{display:flex;gap:3.2cqw;align-items:baseline;font-size:1.7cqw;font-weight:500}
.mock__bar b{margin-right:auto;font-size:2.4cqw}
.mock__h{margin-top:auto;font-size:7cqw;line-height:.98;letter-spacing:-.03em;font-weight:500}
.mock__btn,.mock__tag{align-self:flex-start;margin-top:2.6cqw;font-size:1.7cqw;font-weight:500}
.mock__btn{padding:1.3cqw 2.4cqw;border-radius:.3cqw;background:var(--b,#1A1626);color:var(--bt,#fff)}
.mock--halden .mock__ui{color:#2a2520}
.mock--halden .mock__bar b{font-family:var(--display);font-weight:800;font-size:3cqw;letter-spacing:.02em}
.mock--halden .mock__h{margin-top:12cqw;font-size:6.2cqw}
.mock--halden .mock__btn{--b:#2a2520}
.mock--teller .mock__ui{color:#f4f1ea}
.mock--teller .mock__bar b{font-family:var(--display);font-weight:800;font-size:3.2cqw;letter-spacing:.08em}
.mock--teller .mock__h{margin-top:4cqw;font:800 13cqw/.84 var(--display);letter-spacing:0}
.mock--teller .mock__tag{margin-top:auto;color:#ff8a3d}
.mock--fen .mock__ui{color:#fff;align-items:center;text-align:center}
.mock--fen .mock__bar{align-self:stretch}
.mock--fen .mock__bar b{text-align:left;font-size:3.4cqw;letter-spacing:-.04em}
.mock--fen .mock__h{margin:auto 0 0;font-size:8.4cqw;text-shadow:0 1px 18px rgba(0,40,50,.35)}
.mock--fen .mock__tag{align-self:center;padding:1.2cqw 2.2cqw;border-radius:.3cqw;background:rgba(255,255,255,.9);color:#063a44}
.mock--mirello .mock__ui{color:#fff4ec;align-items:center;text-align:center}
.mock--mirello .mock__bar{align-self:stretch}
.mock--mirello .mock__h{margin:3cqw 0 0;font:800 15cqw/.8 var(--display);letter-spacing:.01em}
.mock--mirello .mock__tag{align-self:center;margin-top:auto}
.mock--basalt .mock__ui{color:#fff}
.mock--basalt .mock__h{font-weight:400;font-size:6.6cqw;text-shadow:0 1px 20px rgba(80,25,0,.35)}
.mock--basalt .mock__tag{color:#fff}
.mock--velle .mock__ui{color:#17140c}
.mock--velle .mock__bar b{font-family:var(--display);font-weight:800;font-size:3.2cqw;letter-spacing:.1em}
.mock--velle .mock__h{margin:auto 0;font:800 10.4cqw/.86 var(--display);text-transform:uppercase}
.mock--velle .mock__btn{margin-top:0}

/* SERVICES */
.services{display:grid;grid-template-columns:1fr 1.25fr;column-gap:6vw;padding:20vh var(--g) 16vh}
.services__lead{align-self:start;position:sticky;top:120px}
.services__sub{margin-top:28px;max-width:30ch;font-size:19px;line-height:1.4;color:var(--mute)}
.services__list{list-style:none;margin:0;padding:0}
.services__list li{display:grid;grid-template-columns:1fr 1.15fr;column-gap:32px;row-gap:8px;padding:30px 0 34px;border-top:1px solid var(--line)}
.services__list li:last-child{border-bottom:1px solid var(--line)}
.services__list h3{grid-row:span 2;font:800 clamp(34px,3.2vw,54px)/.92 var(--display);text-transform:uppercase}
.services__list p{line-height:1.45}
.services__tools{font-size:14px;color:var(--mute)}
.steps{grid-column:1/-1;margin-top:18vh}
.steps__title{font:800 clamp(30px,2.6vw,42px)/1 var(--display);text-transform:uppercase}
.steps__line{height:2px;margin:28px 0 0;background:var(--line);overflow:hidden}
.steps__line i{display:block;height:100%;background:var(--cobalt);transform-origin:0 50%}
.steps__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.steps__list li{position:relative;padding-top:26px}
.steps__list li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--cobalt)}
.steps__list b{display:block;font-weight:500;margin-bottom:8px}
.steps__list span{display:block;max-width:28ch;color:var(--mute);line-height:1.45}

/* ABOUT */
.about{display:grid;grid-template-columns:.95fr 1.1fr;column-gap:6vw;align-items:end;padding:8vh var(--g) 22vh}
.about__mask{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--paper-2)}
.about__mask img{width:100%;height:118%;object-fit:cover;transform:translateY(-8%)}
.about__text{padding-bottom:1vh}
.about__lead{margin:30px 0 20px;max-width:30ch;font-size:clamp(21px,1.75vw,27px);line-height:1.3;font-weight:500;letter-spacing:-.01em}
.about__text>p:not(.about__lead){max-width:52ch;color:var(--mute);margin-bottom:14px}
.about__facts{margin:34px 0 0}
.about__facts div{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:14px 0;border-top:1px solid var(--line)}
.about__facts dt{font-size:14px;color:var(--mute)}
.about__facts dd{margin:0;font-size:15px}

/* WORDS */
.words{background:var(--ink);color:var(--paper);padding:20vh var(--g) 16vh}
.words__track{display:grid}
.quote{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .6s ease,transform .8s var(--ease),visibility 0s .8s}
.quote.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .15s,transform .8s var(--ease) .15s,visibility 0s}
.quote blockquote{margin:0;max-width:22em;font-size:clamp(28px,4.1vw,66px);line-height:1.12;font-weight:500;letter-spacing:-.025em}
.quote figcaption{margin-top:34px;font-size:15px;color:#B3AEC4}
.quote figcaption b{display:block;color:var(--paper);font-weight:500;font-size:17px}
.words__nav{display:flex;align-items:center;gap:18px;margin-top:56px}
.rbtn{width:54px;height:54px;border-radius:3px;border:1px solid rgba(222,219,229,.35);background:none;display:grid;place-items:center;transition:background-color .25s ease,color .25s ease}
.rbtn:hover{background:var(--paper);color:var(--ink)}
.words__count{font-size:15px;min-width:52px;text-align:center;font-variant-numeric:tabular-nums}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1.25fr;column-gap:6vw;padding:20vh var(--g)}
.faq__list details{border-top:1px solid var(--line)}
.faq__list details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-size:clamp(20px,1.6vw,25px);font-weight:500;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:18px;height:18px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:currentColor;transition:transform .35s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{max-width:52ch;padding:0 0 28px;color:var(--mute)}

/* CONTACT */
.contact{background:var(--ink);color:var(--paper);padding:18vh var(--g) 12vh}
.contact__title{font:800 clamp(80px,15.5vw,280px)/.82 var(--display)}
.contact__grid{display:grid;grid-template-columns:1fr 1.25fr;column-gap:6vw;margin-top:9vh}
.contact__direct p{max-width:32ch;font-size:19px;line-height:1.4;color:#C8C3D6}
.contact__mail{display:inline-block;margin-top:24px;font-size:clamp(20px,1.7vw,26px);font-weight:500;text-underline-offset:6px;text-decoration-thickness:1px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;position:relative}
.form__row{display:flex;flex-direction:column;gap:8px}
.form__row--wide{grid-column:1/-1}
.form label{font-size:14px;color:#B3AEC4}
.form input,.form select,.form textarea{font:inherit;color:var(--paper);background:transparent;border:0;border-bottom:1px solid rgba(222,219,229,.35);padding:8px 0 10px;border-radius:0;resize:vertical}
.form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23DEDBE5' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
.form select option{color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--paper)}
.form__err{grid-column:1/-1;min-height:1.2em;font-size:14px;color:#FFB4A8}
/* send: a full-width cobalt slab, label left, arrow right */
.form__send{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;width:100%;padding:22px 24px;border:0;border-radius:3px;background:var(--cobalt);color:#fff;font-size:18px;font-weight:500;text-align:left}
.form__send svg{transition:transform .5s var(--ease)}
.form__send:hover svg,.form__send:focus-visible svg{transform:translateX(6px)}
.form__send:hover .r i,.form__send:focus-visible .r i{transform:translateY(-50%)}
.form__done{position:absolute;inset:0;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:10px}
.form__done[hidden]{display:none}
.form__doneh{font:800 clamp(48px,5vw,80px)/.9 var(--display);text-transform:uppercase}

/* FOOTER */
.foot{background:var(--ink);color:var(--paper);padding:4vh var(--g) 26px;overflow:hidden}
.foot__word{display:flex;font:800 calc((100vw - 2*var(--g)) / 3.72)/.8 var(--display);color:var(--cobalt);padding-top:.03em}
.foot__word .lt{display:block;overflow:hidden;padding-bottom:.035em}
.foot__word .lt>span{display:block}
.foot__row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:30px;padding-top:18px;border-top:1px solid rgba(222,219,229,.18);font-size:14px;color:#B3AEC4}
.foot__links{display:flex;gap:22px}
.foot__links a{text-decoration:none;color:var(--paper)}
.foot__links a:hover{text-decoration:underline}

/* REDUCED MOTION fallback for the drum */
.rm .work{height:auto}
.rm .work__pin{position:static;height:auto;display:block}
.rm .drum{display:none}
.rm .stage__window{aspect-ratio:auto;background:none;overflow:visible;container-type:normal}
.rm .stage__strip{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.rm .mock{height:auto;aspect-ratio:4/3;border-radius:14px;container-type:inline-size}
.rm .mock img{top:0;height:100%}
.rm .stage__meta,.rm .work__count{display:none}
.rm-cap{margin-top:14px;max-width:44ch;font-size:15px;line-height:1.45}
.rm-cap b{font-weight:500;margin-right:6px}
.rm-cap span{display:block;color:var(--cobalt-soft);font-size:14px;margin-top:4px}

/* RESPONSIVE */
@media (max-width:1100px){
  .nav__clock{display:none}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{inset:18px var(--g) auto;grid-template-columns:1fr auto;align-items:center}
  .nav__links,.nav__cta,.nav__clock{display:none}
  .nav__menu{display:inline-flex;gap:10px;align-items:center;padding:6px 0;border:0;background:none;font-size:15px;font-weight:500}
  .menu-open .nav{color:var(--paper)}
  .menu-open .nav.is-tucked>*{opacity:1;transform:none;pointer-events:auto}
  .hero{padding:96px var(--g) 30px;min-height:0}
  .hero__intro{align-self:flex-start;font-size:23px;line-height:1.25;max-width:19ch}
  .hero__name{margin-top:15vh}
  .hero__row--1{align-items:flex-end}
  .flip{width:1.5em;margin-bottom:.05em}
  .flip__cap{font-size:12px;left:0;bottom:calc(100% + 6px)}
  .hero__foot{margin-top:38px;font-size:14px;flex-direction:column;align-items:flex-start;gap:10px}
  .statement{padding:15vh var(--g) 16vh}
  .work__pin{display:flex;flex-direction:column;padding:76px var(--g) 22px}
  .work__head{padding-bottom:10px}
  .drum{flex:1 1 auto;min-height:150px;margin:4px 0}
  .drum__wheel li{font-size:min(19vw,15vh);padding-left:32px}
  .drum__pointer{transform:scale(.8);transform-origin:0 50%}
  .stage{gap:12px}
  .stage__meta{min-height:96px}
  .stage__desc{font-size:15px}
  .stage__info{font-size:13px;margin-top:6px}
  .mock__bar{font-size:2.6cqw;gap:3.4cqw}
  .mock__bar b{font-size:3.6cqw}
  .mock__btn,.mock__tag{font-size:2.8cqw}
  .services,.faq{grid-template-columns:1fr;padding:14vh var(--g)}
  .services__lead{position:static;margin-bottom:40px}
  .services__list li{grid-template-columns:1fr;padding:24px 0 26px}
  .services__list h3{grid-row:auto;font-size:36px}
  .steps{margin-top:12vh}
  .steps__line{display:none}
  .steps__list{grid-template-columns:1fr;gap:0;margin-top:20px;border-left:2px solid var(--line);margin-left:4px}
  .steps__list li{padding:0 0 26px 22px}
  .steps__list li::before{left:-6px;top:6px}
  .about{grid-template-columns:1fr;padding:4vh var(--g) 14vh}
  .about__text{margin-top:40px}
  .about__facts div{grid-template-columns:1fr;gap:4px}
  .words{padding:14vh var(--g) 12vh}
  .faq .h2{margin-bottom:30px}
  .contact{padding:14vh var(--g) 10vh}
  .contact__grid{grid-template-columns:1fr;row-gap:48px;margin-top:6vh}
  .form{grid-template-columns:1fr}
  .foot__row{flex-direction:column;gap:10px}
  .rm .stage__strip{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}