*,*::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);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}

/* case study: full-width header image with a ragged inky edge, then title left and story right */
.view--case{padding:0 0 9rem}
.view--case .panel{max-width:none}
.case__hero{position:relative;width:100%;aspect-ratio:2.5/1;max-height:66vh;margin-top:4rem;overflow:hidden;
  -webkit-mask-image:url(/assets/header-mask.png);mask-image:url(/assets/header-mask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.case__hero img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;transform:scale(1.0);animation:drift 26s ease-in-out infinite alternate;filter:saturate(1.05) contrast(1.03)}
.case__hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,transparent 40%,rgba(19,21,31,.5) 100%)}
@keyframes drift{from{transform:scale(1.0) translate3d(-0.6%,0,0)}to{transform:scale(1.035) translate3d(0.6%,-0.4%,0)}}
.case__grid{display:grid;grid-template-columns:minmax(14rem,1fr) minmax(0,2.1fr);gap:3rem 5rem;max-width:84rem;margin:1.2rem auto 0;padding:0 var(--gutter)}
.case__side .eyebrow{margin-bottom:1.6rem}
.case__title{font-size:clamp(2.2rem,3.6vw,3.4rem)}
.case__role{margin-top:1.4rem;color:var(--gray)}
.case__side .tags{margin-top:1.6rem}
.case__lead{font:400 1.45rem/1.3 var(--serif);color:var(--off-white);max-width:36rem}
.case__main .stats{max-width:34rem}
.case__main .section{max-width:36rem}
.case__main .pager{max-width:36rem}
.view--case .panel > *{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--expo),transform 1.3s var(--expo)}
.view--case.is-active .panel > *{opacity:1;transform:none}
@media (max-width:1000px){
  .case__grid{grid-template-columns:1fr;gap:1.6rem}
  .case__hero{aspect-ratio:1.6/1;max-height:none;margin-top:3.6rem}
  .view--case{padding-bottom:7rem}
}

/* phones */
.sound,.close{position:relative}
.close{position:fixed}
.sound::after,.close::after{content:"";position:absolute;inset:-10px}   /* bigger tap area than the visible circle */
@media (max-width:600px){
  .nav{padding:1.1rem 1rem}
  .nav__brand{flex:0 0 auto}
  .nav__brand img{height:1.6rem}
  .nav__links{position:static;transform:none;margin:0 .5rem 0 auto;gap:.85rem}
  .nav__links a{font-size:.52rem;letter-spacing:.1em}
  .sound{margin-left:.5rem}
  .close{right:1rem;top:3.5rem}
  .btn--corner{left:1rem;bottom:1.4rem}
  .btn--corner.btn--back{padding:0;width:2.8rem;height:2.8rem;justify-content:center;border-radius:50%;gap:0}
  .btn--corner.btn--back .ts-b{display:none}
  .hero__title{top:15vh}
}

/* lighter compositing on phones: no blend modes or backdrop blur over the 3D canvas */
@media (hover:none) and (pointer:coarse){
  .fx-grade,.fx-dof{display:none}
  .fx-grain{mix-blend-mode:normal;opacity:.05;animation:none}
}

/* search and answer-engine additions */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-4rem;z-index:300;background:var(--off-white);color:var(--off-black);padding:.7rem 1rem;font:500 .75rem var(--sans);transition:top .2s}
.skip:focus{top:1rem}
h2.ts-b,h3.ts-b{font-family:var(--sans);font-weight:400;line-height:1.2}
.faq__item{border-top:1px solid rgba(233,236,238,.08);padding:1.4rem 0}
.faq__item h3{font-size:1.2rem;line-height:1.15;margin-bottom:.8rem}
.faq__item p{font-size:.78rem;line-height:1.8;color:var(--secondary);letter-spacing:.03em}
.studio__cta{font-size:1.8rem;margin-bottom:1.4rem}
.post__body p,.post__body ul,.post__body ol{max-width:36rem}
.post__body p{font-size:.92rem;line-height:1.85;color:var(--secondary);letter-spacing:.015em;margin:0 0 1.25rem}
.post__body p.post__lead{font:400 1.45rem/1.3 var(--serif);color:var(--off-white);letter-spacing:0;margin-bottom:1.8rem}
.post__h{font:400 1.7rem/1.1 var(--serif);margin:3rem 0 1.1rem;color:var(--off-white);max-width:36rem}
.post__list{margin:0 0 1.4rem 1.1rem;list-style:disc;color:var(--secondary);font-size:.9rem;line-height:1.8}
.post__list li{margin-bottom:.4rem}
.post__body blockquote{max-width:34rem;margin:2rem 0}
.writing__head{max-width:min(78rem,100%);margin:0 auto 2.4rem}
.writing__head .eyebrow{margin-bottom:1.4rem}
.row--post{grid-template-columns:minmax(0,2.4fr) 1.1fr minmax(0,3fr) auto}
.row--post .row__client{display:block}
.row__title a{color:inherit}
@media (max-width:1000px){.row--post{grid-template-columns:1fr auto}.row--post .row__client{display:none}}

.case__note{margin-top:2.4rem;max-width:36rem;color:var(--gray);font-size:.7rem;line-height:1.7;border-top:1px solid rgba(233,236,238,.08);padding-top:1.2rem}

/* the headline is decoration over the island: clicks and hovers pass through to the beacons underneath */
.view--home.is-active > .hero__title{pointer-events:none}

.linkout + .linkout{margin-left:1.8rem}

.case__logo{display:block;height:2.4rem;width:auto;max-width:100%;margin-bottom:1.8rem}

.case__logo-tile{display:inline-block;background:#f3f5f8;border-radius:.5rem;padding:.6rem .9rem;margin-bottom:1.8rem;line-height:0;max-width:100%}
.case__logo-tile .case__logo{margin:0}

/* About: portrait */
.about__photo{width:6.8rem;aspect-ratio:1;margin:0 0 2.2rem;border-radius:.55rem;overflow:hidden;position:relative;box-shadow:0 0 0 1px rgba(233,236,238,.14),0 .9rem 2rem rgba(0,0,0,.4)}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;filter:saturate(.95) contrast(1.02)}
.about__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(19,21,31,.28),transparent 45%)}
@media (max-width:1000px){.about__photo{width:5.6rem;margin-bottom:1.8rem}}

/* the home headline is exactly two lines: each sentence on its own line, never wrapping */
.hero__title span{white-space:nowrap}
.hero__title span:nth-child(2){transition-delay:1.05s}
@media (max-width:760px){.hero__title{font-size:clamp(1.3rem,6.7vw,2.3rem)}}