:root{
  --bg:#f3f0ea; --ink:#121212; --mute:#7d776d; --line:rgba(18,18,18,.12);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:300 15px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}
.eyebrow{font:400 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase}

/* top bar */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 18px) var(--pad) 18px;color:#fff;mix-blend-mode:difference;pointer-events:none}
.top a{pointer-events:auto;font:400 11px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase}
.top .book{border-bottom:1px solid currentColor;padding-bottom:4px}

/* hero */
.hero{position:relative;height:100svh;min-height:560px;background:#0d0d0d;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.hero-media video{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.72) 100%)}
.hero-text{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:calc(env(safe-area-inset-bottom) + 72px);text-align:center}
.hero h1{font:300 clamp(58px,15vw,168px)/.86 var(--serif);letter-spacing:-.01em;margin:18px 0 18px}
.hero h1 em{font-style:italic}
.hero-sub{font:300 13px/1.4 var(--sans);letter-spacing:.08em;opacity:.8}
.scroll{position:absolute;z-index:2;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);width:1px;height:38px;background:rgba(255,255,255,.3);overflow:hidden}
.scroll span{position:absolute;left:0;top:-38px;width:1px;height:38px;background:#fff;animation:drip 2.2s ease-in-out infinite}
@keyframes drip{to{top:38px}}
@media (min-width:900px){
}

/* intro */
.intro{padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,80px)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 0;padding:0 var(--pad);max-width:1200px;margin:0 auto}
.stats div{text-align:center;border-left:1px solid var(--line)}
.stats div:nth-child(odd){border-left:0}
.stats b{display:block;font:300 clamp(40px,7vw,64px)/1 var(--serif)}
.stats span{display:block;margin-top:10px;font:400 10px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
@media (min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}.stats div:nth-child(odd){border-left:1px solid var(--line)}.stats div:first-child{border-left:0}}
.marquee{margin-top:clamp(48px,7vw,96px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:20px 0}
.track{display:flex;width:max-content;animation:mq 46s linear infinite}
.track span{font:italic 300 clamp(22px,3vw,34px)/1 var(--serif);white-space:nowrap;padding:0 28px;position:relative}
.track span::after{content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.35}
@keyframes mq{to{transform:translateX(-50%)}}

/* tabs */
.tabs{position:sticky;top:0;z-index:15;background:rgba(243,240,234,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;padding:calc(env(safe-area-inset-top) + 16px) var(--pad) 16px;border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;font:400 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mute);padding-bottom:6px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.tabs a.on{color:var(--ink);border-color:var(--ink)}
@media (min-width:900px){.tabs{justify-content:center;gap:56px}}

/* sections */
.sec{padding:clamp(64px,10vw,140px) var(--pad) 0;max-width:1600px;margin:0 auto;scroll-margin-top:64px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4vw,56px);border-bottom:1px solid var(--line);padding-bottom:18px}
.sec-head .num{font:400 11px/1 var(--sans);letter-spacing:.3em;color:var(--mute)}
.sec-head h2{font:300 clamp(48px,9vw,120px)/.9 var(--serif);font-style:italic;margin-top:12px}
.sec-head .kick{font:400 10px/1.5 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--mute);text-align:right;max-width:150px}

/* masonry */
.grid{columns:2;column-gap:8px}
@media (min-width:760px){.grid{columns:3;column-gap:12px}}
@media (min-width:1200px){.grid{columns:4;column-gap:14px}}
.tile{break-inside:avoid;margin-bottom:8px;position:relative;cursor:pointer;overflow:hidden;background:#e4e0d8;display:block;width:100%}
@media (min-width:760px){.tile{margin-bottom:12px}}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .8s}
.tile video{position:absolute;inset:0}
@media (hover:hover){.tile:hover img,.tile:hover video{transform:scale(1.035)}.tile:hover .cap{opacity:1}}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));
  font:400 9.5px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;opacity:0;transition:opacity .5s}
.tile.labelled .cap{opacity:1}
.tile .badge{position:absolute;top:10px;right:10px;color:#fff;font:400 9.5px/1 var(--sans);letter-spacing:.2em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tile .play{position:absolute;top:10px;left:10px;width:0;height:0;border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* reel rows (ads, collabs) */
.row{display:grid;grid-auto-flow:column;grid-auto-columns:68%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.row::-webkit-scrollbar{display:none}
.row>*{scroll-snap-align:start}
@media (min-width:760px){.row{grid-auto-columns:calc((100% - 20px)/3);margin:0;padding:0;gap:10px}}
.row.six{grid-auto-columns:46%}
@media (min-width:760px){.row.six{grid-auto-columns:calc((100% - 50px)/6)}}
.card{position:relative;aspect-ratio:9/16;overflow:hidden;background:#111;cursor:pointer;color:#fff}
.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.card:hover img,.card:hover video{transform:scale(1.04)}}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 30%,transparent 55%,rgba(0,0,0,.7))}
.card .t{position:absolute;z-index:2;left:14px;right:14px;bottom:16px}
.card .t b{display:block;font:300 clamp(22px,2.4vw,30px)/1.05 var(--serif)}
.card .t span{display:block;margin-top:8px;font:400 9.5px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:.8}
.card .ring{position:absolute;z-index:2;top:14px;left:14px;font:400 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.sub{margin-top:clamp(36px,5vw,64px)}
.sub h3{font:400 10.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}

/* contact */
.contact{padding:clamp(100px,14vw,200px) var(--pad);text-align:center}
.contact h2{font:300 clamp(44px,8vw,104px)/.95 var(--serif);margin:26px 0 44px}
.contact h2 em{font-style:italic}
.cta{display:flex;flex-direction:column;align-items:center;gap:22px}
.btn{display:inline-block;background:var(--ink);color:var(--bg);font:400 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;padding:20px 34px;transition:opacity .3s}
.btn:hover{opacity:.82}
.link{font:italic 300 22px/1 var(--serif);border-bottom:1px solid var(--line);padding-bottom:4px}
.based{margin-top:56px;font:400 10px/1.6 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.foot{text-align:center;padding:24px var(--pad) calc(env(safe-area-inset-bottom) + 28px);font:400 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute);border-top:1px solid var(--line)}

/* viewer */
.viewer{position:fixed;inset:0;z-index:50;background:#0b0b0b;color:#fff;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.viewer[hidden]{display:none}
.stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 64px) 0 calc(env(safe-area-inset-bottom) + 48px)}
.stage img,.stage video{max-width:100%;max-height:100%;object-fit:contain;animation:fade .45s ease}
@media (min-width:760px){.stage{padding:72px 80px 60px}}
@keyframes fade{from{opacity:0}}
.bars{position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + 12px);left:12px;right:12px;display:flex;gap:3px}
.bars i{flex:1;height:2px;background:rgba(255,255,255,.25);overflow:hidden}
.bars i b{display:block;height:100%;width:0;background:#fff}
.bars i.done b{width:100%}
.vhead{position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + 26px);left:16px;right:8px;display:flex;justify-content:space-between;align-items:center}
.vhead span{font:400 10.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase}
.vhead button{font-size:18px;padding:10px 12px;line-height:1}
.nav{position:absolute;z-index:2;top:0;bottom:0;width:38%}
.nav.prev{left:0;cursor:w-resize}.nav.next{right:0;cursor:e-resize}
.vcount{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 16px);left:0;right:0;text-align:center;font:400 10px/1 var(--sans);letter-spacing:.3em;opacity:.6}
@media (prefers-reduced-motion:reduce){.track{animation:none}.reveal{opacity:1;transform:none}}
.top{transition:opacity .4s}
body.past .top{opacity:0;pointer-events:none}
body.past .top a{pointer-events:none}

/* measurements */
.measures{margin:0 0 clamp(36px,5vw,64px)}
.m-title{font:400 10.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px}
.m-title span{color:var(--mute)}
.measures dl{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.measures dl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.measures dl div:nth-child(odd){padding-right:16px;border-right:1px solid var(--line)}
.measures dl div:nth-child(even){padding-left:16px}
.measures dt{font:400 9.5px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.measures dd{font:300 26px/1 var(--serif)}
.measures dl div:first-child dd{font-style:italic}
@media (min-width:760px){
  .measures dl{grid-template-columns:repeat(4,1fr)}
  .measures dl div,.measures dl div:nth-child(odd),.measures dl div:nth-child(even){padding:16px 20px;border-right:1px solid var(--line)}
  .measures dl div:nth-child(4n){border-right:0}
  .measures dd{font-size:32px}
}