@font-face{font-family:"Gloock";src:url(../fonts/gloock-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{--paper:#F3EDE4;--accent-ink:color-mix(in srgb,var(--accent) 72%,#000);--ink:#22201C;--ink-2:#5C564D;--line:rgb(34 32 28 / .14);--accent:#B4664B;
  --disp:"Gloock",Georgia,serif;--body:"Schibsted Grotesk",system-ui,sans-serif;--gut:clamp(16px,4.4vw,64px)}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);overflow-x:clip}
body{margin:0;font:400 clamp(16px,1.05vw,18px)/1.6 var(--body);-webkit-font-smoothing:antialiased}
main>section{overflow-x:clip}
a{color:inherit}
.skip{position:fixed;left:-999px;top:10px;z-index:200;background:var(--ink);color:var(--paper);padding:.6rem 1rem}
.skip:focus{left:10px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--disp);font-weight:400;margin:0;letter-spacing:-.01em}
em{font-style:italic;color:var(--accent-ink);transition:color 1.2s}

.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px var(--gut);transition:background .4s}
.top.solid{background:rgb(243 237 228 / .9);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.mark{display:flex;flex-direction:column;font:400 1.6rem/1 var(--disp);text-decoration:none}
.mark span{font:600 .62rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-top:.35rem}
.top nav{display:flex;gap:clamp(12px,2.4vw,34px);align-items:center;background:rgb(243 237 228 / .78);backdrop-filter:blur(10px);padding:.4rem .4rem .4rem 1.2rem;border-radius:99px}
.top nav a{font:600 .84rem/1 var(--body);text-decoration:none}
.cta{background:var(--ink);color:var(--paper);padding:.8rem 1.1rem;border-radius:99px}

.room-run{height:560vh;position:relative}
.room-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.room{position:absolute;inset:0;width:100%;height:100%;display:block}
.chapters{position:absolute;inset:0;pointer-events:none}
.ch{position:absolute;left:var(--gut);bottom:12vh;width:min(36rem,44vw);padding:2rem 2.2rem 2.2rem;background:rgb(243 237 228 / .86);backdrop-filter:blur(14px);border-radius:4px;
  opacity:0;visibility:hidden;box-shadow:0 30px 60px -30px rgb(40 30 20 / .4)}
.ch .k{font:600 .7rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin:0 0 1.2rem}
.ch h1{font-size:clamp(2.8rem,5.4vw,5.4rem);line-height:.95}
.ch h2{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1}
.ch p{color:var(--ink-2);margin:1.1rem 0 0}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem;pointer-events:auto}
.swatches button{width:44px;height:44px;border-radius:50%;border:3px solid var(--paper);background:var(--c);box-shadow:0 0 0 1px var(--line),0 8px 16px -8px rgb(0 0 0 / .4);cursor:pointer;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.swatches button:hover,.swatches button[aria-pressed="true"]{transform:scale(1.18)}
.chip{position:absolute;right:var(--gut);bottom:12vh;width:200px;background:#fff;padding:10px 10px 14px;box-shadow:0 24px 50px -20px rgb(40 30 20 / .5);transform:rotate(3deg);display:grid;gap:12px}
.chip-c{display:block;height:150px;background:var(--accent);transition:background 1.2s}
.chip-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.chip-n{font:400 1.2rem/1 var(--disp)} .chip-code{font:600 .66rem/1 var(--body);letter-spacing:.14em;color:var(--ink-2)}
.hint{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);margin:0;font:600 .7rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);background:rgb(243 237 228 / .8);padding:.6rem 1rem;border-radius:99px}

.work{padding:16vh var(--gut) 10vh}
.work h2{font-size:clamp(2.6rem,6vw,6rem);line-height:.95;margin-bottom:9vh}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.svc li{border-top:2px solid var(--ink);padding-top:1.4rem}
.svc .n{font:400 2.4rem/1 var(--disp);color:var(--accent-ink);transition:color 1.2s}
.svc h3{font-size:1.8rem;margin:1.6rem 0 .8rem}
.svc p{color:var(--ink-2)}
.quote{padding:14vh var(--gut);background:var(--ink);color:var(--paper)}
.quote blockquote{margin:0 auto;max-width:62rem}
.quote p{font:400 clamp(1.8rem,3.6vw,3.6rem)/1.15 var(--disp);margin:0}
.quote footer{margin-top:2rem;font:600 .74rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgb(243 237 228 / .6)}
.visit{display:grid;grid-template-columns:1fr minmax(0,30rem);gap:clamp(32px,7vw,120px);padding:16vh var(--gut)}
.visit h2{font-size:clamp(2.6rem,5.6vw,5.6rem);line-height:.95;margin-bottom:2rem}
.visit p{color:var(--ink-2)}
.tel{font:400 clamp(2rem,4vw,3.4rem)/1 var(--disp)!important;color:var(--ink)!important;margin:2rem 0 1rem}
.tel a{text-decoration:none}
.small{font-size:.9rem}
.form{display:grid;gap:1.3rem}
.form span{display:block;font:600 .7rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.5rem}
.form input{width:100%;background:#fff;border:1px solid var(--line);border-radius:4px;font:400 1.05rem/1.4 var(--body);padding:.9rem 1rem;color:var(--ink)}
.form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgb(180 102 75 / .2)}
.form button{justify-self:start;background:var(--accent-ink);color:#fff;border:0;border-radius:99px;padding:1rem 1.5rem;font:700 .9rem/1 var(--body);cursor:pointer;transition:background 1.2s,transform .3s}
.form button:hover{transform:translateY(-2px)}
.msg{color:var(--ink);min-height:1.2em;margin:0}
.foot{padding:10vh var(--gut) 5vh;border-top:1px solid var(--line)}
.foot .foot-mark{font:400 clamp(4.4rem,18vw,19rem)/.85 var(--disp);margin:0 0 3rem;color:var(--accent-ink);transition:color 1.2s}
.foot p{color:var(--ink-2);margin:.4rem 0}
.demo{font-size:.86rem}
@media (max-width:900px){
  .top nav a:not(.cta){display:none} .top nav{padding:.3rem}
  .ch{left:var(--gut);right:var(--gut);width:auto;bottom:4vh;padding:1.4rem}
  .chip{top:96px;bottom:auto;width:120px;padding:7px 7px 10px} .chip-c{height:70px} .chip-n{font-size:.95rem}
  .hint{display:none}
  .svc{grid-template-columns:1fr 1fr} .visit{grid-template-columns:1fr}
}
@media (max-width:560px){ .svc{grid-template-columns:1fr} .mark span{display:none} }