/* =============================================================
   WalkUp Digital — site system
   Monochrome, to match the identity. Structure is carried by
   hairlines and space. The recurring motif is the climb: hero
   lines step right, and each new page rises into view.
   ============================================================= */

@view-transition { navigation: auto; }

:root{
  --ink:#0E0E11;
  --paper:#FFFFFF;
  --mist:#F5F5F6;
  --stone:#71717A;
  --rule:#E4E4E8;
  --rule-strong:#0E0E11;

  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --gut:clamp(18px,4.2vw,64px);
  --max:1560px;
  --nav-h:74px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:clamp(72px,9vw,104px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.band :focus-visible{outline-color:var(--paper)}

.shell{width:100%;max-width:var(--max);margin:0 auto;
       padding-inline:max(var(--gut),env(safe-area-inset-left))}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;text-wrap:balance;line-height:1}
.display{font-weight:800;letter-spacing:-.042em;line-height:.9;
         font-size:clamp(2.85rem,11.5vw,11rem)}
.h2{font-size:clamp(1.95rem,5.2vw,4.4rem);letter-spacing:-.034em;line-height:.98;font-weight:600}
.h3{font-size:clamp(1.25rem,2.2vw,1.9rem);letter-spacing:-.024em;line-height:1.1;font-weight:600}
.lede{font-family:var(--serif);font-weight:300;
      font-size:clamp(1.22rem,2.1vw,1.9rem);line-height:1.42;letter-spacing:-.012em;max-width:24ch}
.prose{font-family:var(--serif);font-weight:300;font-size:clamp(1.02rem,1.35vw,1.16rem);
       line-height:1.62;max-width:58ch}
.prose + .prose{margin-top:1.1em}
.prose em{font-style:italic}
.label{font-family:var(--mono);font-size:clamp(10px,1.1vw,11px);font-weight:500;
       letter-spacing:.19em;text-transform:uppercase;color:var(--stone)}
.meta{font-family:var(--mono);font-size:clamp(11px,1.2vw,12px);letter-spacing:.04em;
      color:var(--stone);font-variant-numeric:tabular-nums}

.climb > span:nth-child(2){padding-left:.10em}
.climb > span:nth-child(3){padding-left:.20em}
@media(max-width:700px){
  .climb > span:nth-child(2){padding-left:.05em}
  .climb > span:nth-child(3){padding-left:.10em}
}

/* ---------- fixed corner marks ----------
   No bar and no wrapper: two small elements, each blending in difference mode
   so it inverts itself per pixel against whatever scrolls beneath. Keeping the
   blended layers tiny matters — a full-width blended strip forces the compositor
   to re-blend the whole top of the page on every frame of every scroll.
   The artwork is white on purpose: difference over white paints it black,
   difference over ink paints it white.                                        */
.brand,.burger{
  position:fixed;top:clamp(16px,2.4vw,30px);z-index:70;
  height:clamp(19px,2.2vw,26px);display:flex;align-items:center;
  mix-blend-mode:difference;color:#fff;
}
.brand{left:max(var(--gut),env(safe-area-inset-left))}
.burger{right:max(var(--gut),env(safe-area-inset-right))}
.brand img{height:100%;width:auto;transition:transform .5s var(--e-out)}
.brand:hover img{transform:translateY(-2px)}

/* ---------- burger ---------- */
.burger{
  gap:12px;background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;font-weight:500;
}
.burger__bars{display:block;width:26px;height:10px;position:relative}
.burger__bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .45s var(--e-out),width .45s var(--e-out)}
.burger__bars i:first-child{top:0}
.burger__bars i:last-child{bottom:0;width:60%}
.burger:hover .burger__bars i:last-child{width:100%}
html[data-menu="open"] .burger__bars i:first-child{transform:translateY(4.25px) rotate(45deg)}
html[data-menu="open"] .burger__bars i:last-child{width:100%;transform:translateY(-4.25px) rotate(-45deg)}

/* ---------- full-screen menu ---------- */
.menu{position:fixed;inset:0;z-index:60;display:grid;align-items:center}
.menu[hidden]{display:none}
.menu__sheet{
  position:absolute;inset:0;background:var(--ink);
  clip-path:inset(0 0 100% 0);transition:clip-path .72s var(--e-out);
}
html[data-menu="open"] .menu__sheet{clip-path:inset(0 0 0 0)}
.menu__in{position:relative;width:100%;padding-top:clamp(70px,9vw,110px)}
.menu__list{list-style:none;margin:0;padding:0}
.menu__item{border-top:1px solid #23232A}
.menu__item:last-child{border-bottom:1px solid #23232A}
.menu__item a{
  display:flex;align-items:baseline;gap:clamp(14px,3vw,40px);
  padding:clamp(12px,2.1vw,26px) 0;color:var(--paper);
}
.menu__n{font-family:var(--mono);font-size:11px;letter-spacing:.19em;color:#7A7A87;flex:none}
.menu__t{
  display:block;overflow:hidden;font-size:clamp(2.1rem,8.5vw,6rem);
  font-weight:600;letter-spacing:-.035em;line-height:1.02;
}
.menu__t i{display:block;font-style:normal;transform:translateY(110%);
           transition:transform .8s var(--e-out)}
html[data-menu="open"] .menu__item i{transform:translateY(0);
  transition-delay:calc(.20s + var(--i) * .07s)}
.menu__item a:hover .menu__t i{transform:translateX(14px)}
.menu__foot{
  display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,80px);
  margin-top:clamp(26px,4vw,56px);opacity:0;transition:opacity .5s ease .5s;
}
html[data-menu="open"] .menu__foot{opacity:1}
.menu__meta{margin:8px 0 0;color:var(--paper);font-size:15px}
html[data-menu="open"]{overflow:hidden}

/* ---------- sections ---------- */
.sec{padding-block:clamp(56px,9vw,150px)}
.sec-head{display:flex;align-items:baseline;gap:clamp(14px,3vw,40px);
          padding-top:16px;margin-bottom:clamp(28px,5vw,64px);position:relative}
.sec-head .label{flex:none;transform:translateY(-2px)}
.hero{padding-top:clamp(88px,12vw,180px);padding-bottom:clamp(36px,6vw,80px)}
.hero__h{margin-top:clamp(18px,3vw,44px)}
.hero__foot{display:flex;flex-wrap:wrap;gap:clamp(18px,5vw,80px);align-items:flex-end;
            justify-content:space-between;margin-top:clamp(28px,6vw,80px)}
.hero__meta{max-width:24ch}

/* ---------- grid ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,34px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gstart{align-items:start;gap:clamp(22px,5vw,84px)}
.gwide{gap:clamp(28px,5vw,80px)}

/* ---------- list rows ---------- */
.cap{border-top:1px solid var(--rule)}
.cap__row{
  display:grid;grid-template-columns:4rem minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(12px,3vw,40px);padding:clamp(18px,2.6vw,36px) 0;
  position:relative;transition:padding-left .55s var(--e-out);
}
.cap__row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
                 background:var(--rule);transform-origin:left}
.cap__n{transition:color .4s ease}
.cap__row:hover{padding-left:clamp(6px,1vw,16px)}
.cap__row:hover .cap__n{color:var(--ink)}
.band .cap__row::after{background:#23232A}
.band .cap__row:hover .cap__n{color:var(--paper)}
.cap__p{margin:0;max-width:46ch}
.cap__incl{margin-top:10px;line-height:1.6;max-width:46ch}

/* ---------- inverted band ---------- */
.band{background:var(--ink);color:var(--paper)}
.band .label,.band .meta{color:#9A9AA4}

/* ---------- links & buttons ---------- */
.arrow{display:inline-flex;align-items:baseline;gap:.55em;font-weight:500;font-size:15px;
       position:relative;padding-bottom:4px}
.arrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
              background:currentColor;transform-origin:left;transition:transform .45s var(--e-out)}
.arrow:hover::after{transform:scaleX(0);transform-origin:right}
.arrow span{transition:transform .45s var(--e-out);display:inline-block}
.arrow:hover span{transform:translateX(5px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
     padding:15px 28px;border:1px solid currentColor;border-radius:999px;
     font-size:15px;font-weight:500;background:none;color:var(--ink);cursor:pointer;
     transition:background .38s var(--e-io),color .38s var(--e-io)}
.btn:hover{background:var(--ink);color:var(--paper)}
.band .btn{color:var(--paper)}
.band .btn:hover{background:var(--paper);color:var(--ink)}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.19em;
             text-transform:uppercase;color:var(--stone)}
.field input,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:none;
  border:0;border-bottom:1px solid var(--rule);padding:10px 0;border-radius:0;
  transition:border-color .35s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
.field textarea{resize:vertical;min-height:110px}

/* ---------- footer ---------- */
.foot{padding-block:clamp(44px,7vw,92px)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,60px)}
.foot__mark{height:clamp(30px,3.4vw,42px);width:auto;margin-bottom:18px}
.foot__blurb{margin:0;max-width:30ch;color:#C9C9D0;font-family:var(--serif);
             font-weight:300;font-size:1.02rem;line-height:1.55}
.foot__h{margin:0 0 14px}
.foot__links{margin:0;display:flex;flex-direction:column;gap:9px;font-size:15px}
.foot a{transition:opacity .3s ease}
.foot a:hover{opacity:.6}
.foot__bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
           margin-top:clamp(34px,6vw,72px);padding-top:18px;border-top:1px solid #23232A}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:200;background:#FEFCFD;display:grid;place-items:center}
.loader video{width:min(90vw,860px);height:auto}
.loader__skip{position:absolute;bottom:22px;right:var(--gut);background:none;border:0;
              cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.19em;
              text-transform:uppercase;color:var(--stone);padding:8px}
html[data-loading="done"] .loader{opacity:0;pointer-events:none;
  transition:opacity .45s var(--e-io)}
html[data-loading="run"]{overflow:hidden}

/* ---------- utilities ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);
      color:var(--paper);padding:12px 18px;font-size:14px;font-weight:500}
.skip:focus{left:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.col-narrow{max-width:12ch}
.col-mid{max-width:56ch}
.col-form{max-width:38ch}
.cta__p{color:#C9C9D0;max-width:40ch}
.mt-s{margin-top:12px}
.mt-l{margin-top:clamp(20px,3vw,34px)}
.mb-l{margin-bottom:clamp(24px,4vw,48px)}
[data-reveal="rule"]{position:relative}
[data-reveal="rule"]::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
                             background:var(--rule-strong);transform-origin:left}
.band [data-reveal="rule"]::before{background:var(--paper)}

/* =============================================================
   MOTION — one vocabulary, everywhere. Every hidden state sits
   behind html[data-anim], which the inline head script sets only
   when the visitor has not asked for reduced motion. With JS off
   nothing is ever invisible.
   ============================================================= */
@media(prefers-reduced-motion:no-preference){
  html[data-anim] [data-reveal]{--d:0ms;--i:0}

  html[data-anim] .lines > span{display:block;overflow:hidden;
    padding-bottom:.06em;margin-bottom:-.06em}
  html[data-anim] .lines i{display:block;font-style:normal;transform:translateY(110%);
    transition:transform 1s var(--e-out)}
  html[data-anim] .lines > span:nth-child(1) i{transition-delay:calc(var(--d) + 0ms)}
  html[data-anim] .lines > span:nth-child(2) i{transition-delay:calc(var(--d) + 90ms)}
  html[data-anim] .lines > span:nth-child(3) i{transition-delay:calc(var(--d) + 180ms)}
  html[data-anim] .lines.in i{transform:translateY(0)}

  html[data-anim] [data-reveal="fade"]{opacity:0;transform:translateY(20px);
    transition:opacity .9s var(--e-out) var(--d),transform .9s var(--e-out) var(--d)}
  html[data-anim] [data-reveal="fade"].in{opacity:1;transform:none}

  html[data-anim] [data-reveal="rule"]::before{transform:scaleX(0);
    transition:transform 1.1s var(--e-out) var(--d)}
  html[data-anim] [data-reveal="rule"].in::before{transform:scaleX(1)}
  html[data-anim] [data-reveal="rule"] > .label{opacity:0;transform:translateY(10px);
    transition:opacity .7s var(--e-out) .2s,transform .7s var(--e-out) .2s}
  html[data-anim] [data-reveal="rule"].in > .label{opacity:1;transform:none}

  html[data-anim] .cap__row::after{transform:scaleX(0);transition:transform .9s var(--e-out)}
  html[data-anim] .cap__row.in::after{transform:scaleX(1)}

  html[data-anim] [data-reveal="row"]{opacity:0;transform:translateY(18px);
    transition:opacity .75s var(--e-out) calc(var(--d) + var(--i) * 65ms),
               transform .75s var(--e-out) calc(var(--d) + var(--i) * 65ms)}
  html[data-anim] [data-reveal="row"].in{opacity:1;transform:none}
}

/* ---------- the page rises into view, like the mark ---------- */
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .34s var(--e-io) both}
  ::view-transition-new(root){animation:vt-rise .62s var(--e-out) both}
  html.arriving main{animation:vt-rise .62s var(--e-out) both}
  html.leaving body{opacity:0;transform:translateY(-18px);
    transition:opacity .3s var(--e-io),transform .3s var(--e-io)}
}
@keyframes vt-out{to{opacity:0;transform:translateY(-22px)}}
@keyframes vt-rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- pointer ---------- */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:150;pointer-events:none;border-radius:50%;
  opacity:0;will-change:transform;
  transition:opacity .3s ease,background .35s ease,border-color .35s ease;
}
.cursor{width:34px;height:34px;border:1px solid var(--ink);margin:-17px 0 0 -17px}
.cursor__in{width:100%;height:100%;border-radius:50%;
  transition:transform .35s var(--e-out),background .35s ease}
.cursor-dot{width:5px;height:5px;background:var(--ink);margin:-2.5px 0 0 -2.5px}
html.has-cursor .cursor,html.has-cursor .cursor-dot{opacity:1}
html.has-cursor,html.has-cursor a,html.has-cursor button,
html.has-cursor input,html.has-cursor textarea{cursor:none}
html.has-cursor.cursor-hot .cursor__in{transform:scale(1.85);background:rgba(14,14,17,.06)}
html.has-cursor.cursor-hot .cursor-dot{opacity:0}
html.has-cursor.cursor-dark .cursor{border-color:var(--paper)}
html.has-cursor.cursor-dark .cursor-dot{background:var(--paper)}
html.has-cursor.cursor-dark.cursor-hot .cursor__in{background:rgba(255,255,255,.10)}

/* =============================================================
   RESPONSIVE — checked from 320px up
   ============================================================= */
@media(max-width:1000px){
  .cap__row{grid-template-columns:3.4rem minmax(0,1fr)}
  .cap__row > div{grid-column:2}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__grid > :first-child{grid-column:1/-1}
}
@media(max-width:760px){
  .g2,.g3{grid-template-columns:1fr}
  .hero__foot{gap:20px}
  .hero__foot > *{flex:1 1 100%}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .sec-head .label{transform:none}
  .menu__item a{gap:14px}
}
@media(max-width:560px){
  :root{--nav-h:64px}
  .cap__row{grid-template-columns:2.4rem minmax(0,1fr);gap:10px 12px}
  .cap__row .h3{grid-column:2}
  .foot__grid{grid-template-columns:1fr}
  .foot__bot{flex-direction:column;gap:8px}
  .lede{max-width:none}
  .burger__label{display:none}
  .burger__bars{width:30px}
}
@media(max-width:400px){
  .display{font-size:clamp(2.4rem,12.5vw,3.4rem)}
  .menu__t{font-size:clamp(1.9rem,10vw,2.6rem)}
  .btn{width:100%}
}
@media(max-height:520px) and (orientation:landscape){
  .hero{padding-top:24px;padding-bottom:24px}
  .menu__in{padding-top:56px}
  .menu__item a{padding:6px 0}
  .menu__foot{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .cursor,.cursor-dot{display:none}
}