*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --off-white:#e9ecee;--off-black:#13151f;--secondary:#aab9c7;--gray:#6e8799;--dark-gray:#4c5e6b;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  --expo:cubic-bezier(.14,1,.34,1);--quint:cubic-bezier(.23,1,.32,1);
  --panel-left:calc(5vw + 5*((90vw - 11rem)/12 + 1rem));
  --gutter:5vw;
}
html{background:var(--off-black) url(/assets/hero.jpg) center/cover;color:var(--off-white);font-family:var(--sans);
  font-size:clamp(16px,1.111vw,20px);-webkit-font-smoothing:antialiased;scrollbar-width:none;overscroll-behavior-y:none}
html::-webkit-scrollbar{display:none}
body{min-height:100vh;overflow:hidden;line-height:1.2}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:.95}
ol,ul{list-style:none}
:focus-visible{outline:1px solid var(--gray);outline-offset:3px}

/* type scale */
.h1{font-size:2.375rem;font-weight:400;line-height:.98;letter-spacing:-.01em}
.h2{font-size:1.5rem;line-height:1}
.ts-a{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.ts-b{font-size:.55rem;letter-spacing:.38em;text-transform:uppercase}
.ts-p{font-size:.8125rem;letter-spacing:.03em;line-height:1.85;color:var(--secondary)}

/* world + fx */
#world{position:fixed;inset:0;width:100%;height:100%;z-index:0;touch-action:none;cursor:grab;opacity:0;transition:opacity 1.6s ease .2s}
#world.is-drag{cursor:grabbing}
body.is-ready #world{opacity:1}
.fx{position:fixed;inset:0;pointer-events:none}
.fx-dim{z-index:1;background:linear-gradient(90deg,rgba(19,21,31,0) 0%,rgba(19,21,31,.75) 38%,rgba(19,21,31,.94) 100%);opacity:0;transition:opacity 1s var(--expo)}
.fx-dim.is-list{background:rgba(14,16,26,.78)}
.fx-vignette{z-index:2;background:radial-gradient(ellipse at 50% 55%,transparent 58%,rgba(10,12,22,.5) 100%)}
.fx-grade{z-index:1;background:radial-gradient(ellipse at 50% 55%,rgba(30,120,160,.20),rgba(20,60,110,.10) 45%,rgba(6,10,26,.35) 100%);mix-blend-mode:soft-light}
.fx-dof{z-index:2;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 12%,transparent 86%,#000 100%);mask-image:linear-gradient(to bottom,#000 0,transparent 12%,transparent 86%,#000 100%)}
.fx-grain{z-index:3;inset:-50%;width:200%;height:200%;opacity:.13;mix-blend-mode:overlay;animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}

/* splash */
.splash{position:fixed;inset:0;z-index:200;background:var(--off-black);display:flex;align-items:center;justify-content:center;transition:opacity 1.4s ease,visibility 1.4s}
.splash.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.splash__logo{width:128px;height:auto;image-rendering:auto;opacity:.9;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6}}
.splash__sub{position:absolute;top:calc(50% + 2.6rem);color:var(--gray);font-size:.45rem;opacity:.7}
.splash__actions{position:absolute;left:0;right:0;bottom:3rem;display:flex;align-items:center;justify-content:center;padding:0 var(--gutter)}
.splash__actions .link-quiet{position:absolute;right:var(--gutter)}
.btn{display:inline-flex;align-items:center;gap:1.1rem;border:1px solid rgba(233,236,238,.16);padding:.95rem 1.4rem;background:rgba(19,21,31,.35);backdrop-filter:blur(6px);transition:border-color .5s var(--expo),background .5s var(--expo),color .5s}
.btn:hover{border-color:rgba(233,236,238,.5);background:rgba(233,236,238,.06)}
.link-quiet{color:var(--gray);border-bottom:1px solid var(--dark-gray);padding-bottom:3px;transition:color .3s}
.link-quiet:hover{color:var(--off-white)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:110;display:flex;align-items:center;justify-content:space-between;padding:1.6rem var(--gutter);pointer-events:none;
  opacity:0;transform:translateY(-8px);transition:opacity 1.2s ease .6s,transform 1.2s var(--expo) .6s}
.nav::before{content:"";position:absolute;inset:0 0 -4rem;background:linear-gradient(to bottom,rgba(19,21,31,.7),transparent);z-index:-1}
body.is-ready .nav{opacity:1;transform:none}
.nav > *{pointer-events:auto}
.nav__brand{display:flex;align-items:center;gap:.8rem;flex:1}
.nav__brand img{height:2.3rem;width:auto;opacity:.92;transition:opacity .3s}
.nav__brand:hover img{opacity:1}
.nav__links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:3.2rem}
.nav__links a{color:var(--gray);transition:color .4s}
.nav__links a:hover,.nav__links a.is-active{color:var(--off-white)}
.sound{flex:none;margin-left:1.6rem;width:1.5rem;height:1.5rem;border:1px solid rgba(233,236,238,.2);border-radius:50%;display:grid;place-items:center;margin-left:auto;transition:border-color .3s}
.sound:hover{border-color:var(--off-white)}
.sound i{display:block;width:.55rem;height:1px;background:var(--off-white);transition:all .4s var(--expo)}
.sound[aria-pressed="true"] i{height:.4rem;width:.4rem;background:none;border-radius:50%;border:1px solid var(--off-white);animation:ping 1.8s ease-in-out infinite}
@keyframes ping{50%{transform:scale(1.5);opacity:.4}}

/* labels over markers */
.labels{position:fixed;inset:0;z-index:20;pointer-events:none}
.label{position:absolute;left:0;top:0;white-space:nowrap;transform:translate(-50%,-2.6rem);opacity:0;transition:opacity .6s;color:var(--secondary);text-shadow:0 1px 12px #000}
.labels.is-on .label{opacity:.55}
.labels.is-on .label.is-hover{opacity:1;color:#fff}

/* views */
main{position:relative;z-index:10}
.view{position:fixed;inset:0;visibility:hidden;opacity:0;transition:opacity .7s ease,visibility .7s;pointer-events:none}
.view.is-active{visibility:visible;opacity:1;pointer-events:auto}
.view--home.is-active{pointer-events:none}   /* let drags and clicks reach the canvas */
.view--home.is-active > *{pointer-events:auto}
.hero__title{position:absolute;left:calc(var(--gutter) + 3rem);top:23vh;font-size:clamp(2rem,3.2vw,3.2rem);pointer-events:none}
.hero__title span{display:block;overflow:hidden;padding-bottom:.08em}
body:not(.is-ready) .hero__title span{opacity:0;transform:translateY(40px)}
.hero__title span{transition:opacity 1.4s var(--expo),transform 1.6s var(--expo)}
.hero__title span:nth-child(1){transition-delay:.9s}.hero__title span:nth-child(2){transition-delay:1.05s}.hero__title span:nth-child(3){transition-delay:1.2s}
.btn--corner{position:fixed;left:var(--gutter);bottom:2.6rem;z-index:50}
.hint{position:fixed;right:var(--gutter);bottom:2.6rem;text-align:right;color:var(--dark-gray);font-size:.5rem;line-height:1.7;letter-spacing:.1em}
.btn--back{visibility:hidden;opacity:0;transition:opacity .6s,visibility .6s,border-color .5s}
.btn--back.is-on{visibility:visible;opacity:1}

/* work list */
.view--work{overflow-y:auto;padding:calc(10vh + 3rem) var(--gutter) 8rem}
.list{max-width:min(78rem,100%);margin:0 auto}
.row{display:grid;grid-template-columns:minmax(0,3.4fr) 1.1fr minmax(0,2.4fr) auto;align-items:center;gap:1.5rem;padding:1.7rem 0;border-top:1px solid rgba(233,236,238,.1);cursor:pointer;transition:opacity .5s}
.row:last-child{border-bottom:1px solid rgba(233,236,238,.1)}
.list:hover .row{opacity:.4}
.list .row:hover{opacity:1}
.row__title{font-family:var(--serif);font-size:1.7rem;line-height:1}
.row__year,.row__client{color:var(--gray);font-size:.8rem;letter-spacing:.03em}
.row__chip{display:inline-flex;align-items:center;gap:.6rem;border:1px solid rgba(233,236,238,.16);padding:.7rem 1.1rem;transition:border-color .4s,background .4s}
.row:hover .row__chip{border-color:rgba(233,236,238,.55);background:rgba(233,236,238,.06)}
.row__dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}

/* panels (case study, studio, contact) */
.view--panel{overflow-y:auto;padding:calc(10vh + 1.5rem) var(--gutter) 9rem var(--panel-left);scrollbar-width:none}
.view--panel::-webkit-scrollbar{display:none}
.panel{max-width:34rem}
.eyebrow{color:var(--dark-gray);margin-bottom:3.2rem}
.lede{margin-top:2.6rem;max-width:25rem}
.panel h2.h1{max-width:28rem}
.section{margin-top:6.5rem}
.section > .ts-b{color:var(--dark-gray);display:block;margin-bottom:2.2rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 1.6rem}
.grid2 h3{font-size:1.3rem;margin-bottom:1rem}
.grid2 p{font-size:.78rem;line-height:1.75;color:var(--secondary);letter-spacing:.03em}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:2rem 1.6rem;margin-top:3.4rem}
.stat b{display:block;font:400 2.1rem/1 var(--serif);color:var(--off-white);margin-bottom:.55rem}
.stat span{font-size:.7rem;letter-spacing:.04em;color:var(--gray);line-height:1.5;display:block}
.bullets li{position:relative;padding:.9rem 0 .9rem 1.4rem;border-top:1px solid rgba(233,236,238,.08);font-size:.8rem;line-height:1.7;color:var(--secondary);letter-spacing:.03em}
.bullets li::before{content:"";position:absolute;left:0;top:1.5rem;width:.5rem;height:1px;background:var(--gray)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.tags span{border:1px solid rgba(233,236,238,.12);padding:.4rem .7rem;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
blockquote{font:400 1.45rem/1.25 var(--serif);color:var(--off-white)}
blockquote cite{display:block;margin-top:1.2rem;font:400 .55rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gray)}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:6rem}
.pager a{border:1px solid rgba(233,236,238,.14);padding:1rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;min-width:46%;transition:border-color .4s,background .4s}
.pager a:hover{border-color:rgba(233,236,238,.5);background:rgba(233,236,238,.05)}
.pager a:last-child{text-align:right}
.pager em{font:400 1.2rem/1 var(--serif);font-style:normal}
.pager .ts-b{color:var(--gray)}
.linkout{display:inline-block;margin-top:2.2rem;color:var(--secondary);border-bottom:1px solid var(--dark-gray);padding-bottom:3px}
.rows li{display:grid;grid-template-columns:1.3fr 2fr auto;gap:1rem;padding:.85rem 0;border-top:1px solid rgba(233,236,238,.08);font-size:.78rem;color:var(--secondary);letter-spacing:.03em}
.rows li b{font-weight:500;color:var(--off-white)}
.rows li i{font-style:normal;color:var(--gray)}
.contact{margin-top:4rem}
.contact__row{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;border-top:1px solid rgba(233,236,238,.1);transition:padding .5s var(--expo),color .3s}
.contact li:last-child .contact__row{border-bottom:1px solid rgba(233,236,238,.1)}
.contact__row:hover{padding-left:.8rem}
.contact__row .ts-p{color:var(--secondary)}

/* reveal for panel content */
.view--panel .panel > *{opacity:0;transform:translateY(18px);transition:opacity 1s var(--expo),transform 1.2s var(--expo)}
.view--panel.is-active .panel > *{opacity:1;transform:none}
.view--panel.is-active .panel > *:nth-child(1){transition-delay:.15s}.view--panel.is-active .panel > *:nth-child(2){transition-delay:.25s}.view--panel.is-active .panel > *:nth-child(3){transition-delay:.35s}.view--panel.is-active .panel > *:nth-child(n+4){transition-delay:.45s}

/* tablet and phone */
@media (max-width:1000px){
  :root{--panel-left:1.5rem;--gutter:1.5rem}
  .nav__links{gap:1.6rem}
  
  .view--panel{padding-top:7rem}
  .fx-dim{background:rgba(14,16,26,.88)}
  .hero__title{left:var(--gutter);top:19vh}
  .row{grid-template-columns:1fr auto;gap:.4rem 1rem;padding:1.3rem 0}
  .row__year{grid-row:2}.row__client{grid-row:2;grid-column:1;display:none}
  .row__chip{grid-row:1 / span 2;grid-column:2}
}
@media (max-width:600px){
  .grid2,.stats{grid-template-columns:1fr}
  .nav__links{position:static;transform:none;margin:0 auto}
  .hint{display:none}
  .rows li{grid-template-columns:1fr;gap:.2rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}
@media (max-width:760px){
  .splash__actions{flex-direction:column;gap:1.4rem;bottom:2.4rem}
  .splash__actions .link-quiet{position:static}
  .nav__brand img{height:1.8rem}
}

/* close button: always returns to the island */
.close{position:fixed;top:4.2rem;right:var(--gutter);z-index:120;width:1.5rem;height:1.5rem;border:1px solid rgba(233,236,238,.2);border-radius:50%;display:grid;place-items:center;
  background:rgba(19,21,31,.55);backdrop-filter:blur(8px);color:var(--off-white);visibility:hidden;opacity:0;transform:scale(.85);
  transition:opacity .5s var(--expo),transform .5s var(--expo),visibility .5s,background .3s,border-color .3s}
.close.is-on{visibility:visible;opacity:1;transform:none}
.close:hover{background:rgba(233,236,238,.14);border-color:var(--off-white);transform:rotate(90deg)}
@media (max-width:760px){.close{top:3.7rem}}

/* cover light reveal */
.splash__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}