@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Manrope:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root{
  --void:#07080A;
  --panel:#0C0E11;
  --raise:#12151A;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#F3F4F6;
  --dim:#8E949E;
  --soft:#B6BBC3;
  --glow:#8B7CFF;
  --glow-2:#33C8C2;
  --disp:"Outfit",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --gut:clamp(22px,5.5vw,90px);
  --ease:cubic-bezier(.22,.61,.24,1);
  --head:92px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--body);font-weight:400;
  font-size:clamp(16px,1.05vw,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.038em;line-height:1;margin:0;text-wrap:balance}
.wrap{max-width:1420px;margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}

/* ---------------- header ---------------- */
.top{position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(7,8,10,.55);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;transition:background .5s var(--ease),border-color .5s var(--ease)}
.top.solid{background:rgba(7,8,10,.88);border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;height:92px;gap:clamp(18px,3vw,48px)}
.brand{flex:0 0 auto;display:flex;align-items:center;text-decoration:none}
.brand img{height:clamp(28px,3vw,38px);width:auto;opacity:.95;transition:opacity .4s var(--ease)}
.brand:hover img{opacity:1}
.foot .brand img{height:clamp(34px,3.4vw,46px);width:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);margin-left:auto}
.nav a{font-family:var(--body);font-weight:600;font-size:1rem;letter-spacing:.01em;
  text-decoration:none;color:rgba(255,255,255,.72);position:relative;padding:6px 0;
  transition:color .4s var(--ease);white-space:nowrap}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--glow);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
.nav a:hover:after,.nav a[aria-current]:after{transform:scaleX(1)}
.tel{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--text) !important;
  border:1px solid var(--line);border-radius:0;padding:12px 20px;
  transition:border-color .5s var(--ease),background .5s var(--ease)}
.tel:after{display:none}
.tel:hover{border-color:var(--line-2);background:rgba(255,255,255,.05)}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--text);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:12px 0}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:5px;
  background:var(--void);z-index:2;pointer-events:none}
.hero.short{min-height:74svh}
.hero-media{position:absolute;inset:0;z-index:0;background:#000;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hero-media iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:102%;
  min-width:180vh;transform:translate(-50%,-50%) scale(1.02);border:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 45%);backface-visibility:hidden}
.hero-fall{position:absolute;inset:0;
  background:radial-gradient(70% 55% at 22% 32%,rgba(139,124,255,.30),transparent 62%),
             radial-gradient(60% 50% at 82% 68%,rgba(51,200,194,.18),transparent 60%),
             linear-gradient(160deg,#101319,#07080A 70%);
  animation:drift 26s var(--ease) infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.12) translate3d(-2%,-2%,0)}}
.hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgb(7,8,10) 0,rgb(7,8,10) 6%,rgba(7,8,10,.55) 44%,rgba(7,8,10,.35) 100%)}
.hero-in{position:relative;z-index:2;width:100%;padding:0 0 clamp(60px,9vh,120px)}
.hero .mono{display:block;margin-bottom:26px}
.hero h1{font-size:clamp(3.4rem,9.6vw,9.4rem);max-width:none;font-weight:600;
  letter-spacing:-.052em;line-height:.94}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.10em}
.hero h1 em{display:block;font-style:normal;transform:translateY(104%);
  animation:lineUp 1.15s var(--ease) forwards}
.hero h1 span:nth-child(1) em{animation-delay:.18s}
.hero h1 span:nth-child(2) em{animation-delay:.32s}
.hero h1 b{color:var(--glow);font-weight:inherit}
@keyframes lineUp{to{transform:none}}
.hero.short h1{font-size:clamp(2.8rem,7vw,6.2rem);max-width:15ch}
.hero p{color:#C2C7CE;max-width:46ch;margin:clamp(26px,3vh,38px) 0 clamp(34px,4vh,46px);
  font-size:clamp(1.05rem,1.35vw,1.3rem);font-weight:500}
.hero .mono,.hero p,.hero .btns{opacity:0;animation:rise 1.1s var(--ease) forwards}
.hero .mono{animation-delay:.05s}
.hero p{animation-delay:.62s}
.hero .btns{animation-delay:.76s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{position:relative;z-index:0;display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  border-radius:0;padding:19px 32px;font-family:var(--body);font-weight:600;font-size:1.02rem;
  border:1px solid var(--line-2);background:transparent;color:var(--text);overflow:hidden;cursor:pointer;
  transition:border-color .5s var(--ease),color .5s var(--ease)}
.btn:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--text);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.btn:after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;
  border-top:1px solid var(--glow);border-right:1px solid var(--glow);
  transition:border-color .5s var(--ease)}
.btn:hover{color:var(--void);border-color:var(--text)}
.btn:hover:before{transform:scaleX(1)}
.btn:hover:after{border-color:rgba(7,8,10,.45)}
.btn-quiet{border-color:var(--line);color:var(--dim)}
.btn-quiet:hover{color:var(--void)}
.btn i{font-style:normal;transition:transform .5s var(--ease)}
.btn:hover i{transform:translateX(5px)}

/* ---------------- sections ---------------- */
section{padding:clamp(84px,11vw,170px) 0;position:relative}
section.tight{padding:clamp(60px,7vw,110px) 0}
.tag{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.tag:before{content:"";width:clamp(26px,3vw,52px);height:1px;background:var(--glow);flex:0 0 auto;
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .18s}
.rv.in .tag:before,.wall-head.in .tag:before{transform:none}
.cta .tag{justify-content:center}
h2{font-size:clamp(2.5rem,5.8vw,5.2rem);max-width:13ch}
h2.wide{max-width:20ch}
.lede{color:var(--soft);max-width:34ch;margin:28px 0 0;font-size:clamp(1.05rem,1.3vw,1.25rem);font-weight:500}
.panel{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.intro-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,110px);align-items:end}
.facts{border-top:1px solid var(--line)}
.fact{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.fact dt{color:var(--dim);font-size:.92rem;font-weight:500}
.fact dd{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.3rem);letter-spacing:-.03em;
  /* The row is space-between, so this box is pushed right. Without an explicit
     alignment its text stays left-aligned inside a box sized to its longest
     line, which makes every wrapped value start at a different x. */
  text-align:right}

/* Below this width the display type wraps on most values and right-aligned
   ragged text reads badly. Stack instead: label above value, both flush left,
   which is how a spec list normally degrades on a phone. */
@media(max-width:560px){
  .fact{flex-direction:column;align-items:flex-start;gap:6px}
  .fact dd{text-align:left;font-size:clamp(1.35rem,6vw,1.8rem)}
}

/* cards */
.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--line);margin-top:64px;border:1px solid var(--line)}
.room{background:var(--panel);position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:clamp(300px,30vw,420px);padding:34px 28px 34px;
  text-decoration:none;color:inherit;transition:background .6s var(--ease)}
.room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 30%);z-index:0;
  opacity:.22;filter:grayscale(1) contrast(1.1) brightness(.8);
  transform:scale(1.02);transition:opacity .9s var(--ease),transform 1.4s var(--ease),filter .9s var(--ease)}
.room:after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(7,8,10,.94) 12%,rgba(7,8,10,.35) 70%)}
.room:hover img{opacity:.6;transform:scale(1.09);filter:grayscale(0) contrast(1) brightness(.95)}
.room:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--glow);z-index:3;
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.room:hover:before{transform:scaleX(1)}
.room > .mono,.room h3{position:relative;z-index:2}
.room > .mono{position:absolute;top:30px;left:28px;color:var(--glow)}
.room h3{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:600}
.room em{position:relative;z-index:2;font-style:normal;color:var(--dim);font-size:.9rem;margin-top:10px;
  opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.room:hover em{opacity:1;transform:none}

/* split */
.split-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,110px);align-items:center}
.split-in.flip .media{order:-1}
.media{position:relative;border:0;border-radius:4px;overflow:hidden;background:transparent}
.media img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 45%);
  filter:grayscale(.4) contrast(1.06) brightness(.66);
  transition:transform 1.4s var(--ease),filter 1s var(--ease)}
/* edges dissolve into the page rather than stopping at a hard frame */
.media{-webkit-mask-image:radial-gradient(118% 112% at 50% 46%,#000 46%,rgba(0,0,0,.55) 76%,transparent 100%);
  mask-image:radial-gradient(118% 112% at 50% 46%,#000 46%,rgba(0,0,0,.55) 76%,transparent 100%)}
.media:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 70% at 42% 38%,rgba(139,124,255,.16),transparent 68%),
    linear-gradient(to top,rgba(7,8,10,.85),transparent 55%);
  mix-blend-mode:screen;opacity:.9;transition:opacity 1s var(--ease)}
.media:hover img{transform:scale(1.035);filter:grayscale(0) contrast(1) brightness(.92)}
.media:hover:after{opacity:.5}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(10px,1.4vw,20px);margin-top:64px}
.gal a{display:block;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:4px;
  aspect-ratio:4/3;background:var(--raise);text-decoration:none}
.gal img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 45%);transition:transform 1.1s var(--ease),opacity .6s var(--ease);opacity:.86}
.gal a:hover img{transform:scale(1.05);opacity:1}
.gal span{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.gal a:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,8,10,.85),transparent 55%)}
.gal span{position:absolute;z-index:3}

/* work grid */
.filters{display:flex;flex-wrap:wrap;gap:12px;margin:56px 0 44px}
.fchip{position:relative;font-family:var(--body);font-weight:600;font-size:1rem;background:transparent;color:var(--dim);
  border:1px solid var(--line);border-radius:0;padding:14px 26px;cursor:pointer;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.fchip:hover{color:var(--text);border-color:var(--line-2)}
.fchip[aria-pressed="true"]{background:var(--text);color:var(--void);border-color:var(--text)}
.work{columns:3;column-gap:clamp(10px,1.4vw,20px)}
@media (max-width:1080px){.work{columns:2}}
@media (max-width:700px){.work{columns:1}}
.tile{position:relative;display:block;text-decoration:none;overflow:hidden;border:1px solid var(--line);
  border-radius:4px;aspect-ratio:4/3;background:var(--raise);
  break-inside:avoid;margin:0 0 clamp(10px,1.4vw,20px)}
.tile img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 30%);opacity:.8;transition:transform 1.2s var(--ease),opacity .6s var(--ease)}
.tile:hover img{transform:scale(1.05);opacity:1}
.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,8,10,.92),transparent 58%)}
.tile .meta{position:absolute;left:24px;right:24px;bottom:22px;z-index:3}
.tile h3{font-size:clamp(1.25rem,1.7vw,1.6rem);font-weight:600;margin-top:10px}
.tile .mono{color:var(--glow)}
.tile.hide{display:none}
.play{position:absolute;top:20px;right:20px;z-index:3;width:46px;height:46px;border-radius:0;
  border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;
  background:rgba(7,8,10,.62);backdrop-filter:blur(8px);font-size:.72rem;color:#fff;
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.tile:hover .play{background:var(--glow);border-color:var(--glow);color:var(--void)}

/* spec blocks */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:64px}
.spec{background:var(--panel);padding:38px 30px 46px}
.spec h3{font-size:1.5rem;margin-bottom:24px}
.spec ul{list-style:none;margin:0;padding:0}
.spec li{color:var(--dim);font-size:.92rem;line-height:1.5;padding:12px 0 12px 20px;position:relative;
  border-top:1px solid var(--line)}
.spec li:before{content:"";position:absolute;left:0;top:20px;width:8px;height:1px;background:var(--glow)}

/* form */
.form-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,110px);align-items:start}
.field{margin-bottom:26px}
.field label{display:block;margin-bottom:12px}
.field input,.field textarea{width:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:4px;color:var(--text);font-family:var(--body);font-size:1.05rem;font-weight:500;
  padding:18px 20px;transition:border-color .4s var(--ease),background .4s var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--glow);background:var(--raise)}
.field textarea{min-height:170px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.contact-block{border-top:1px solid var(--line)}
.contact-block .row{padding:26px 0;border-bottom:1px solid var(--line)}
.contact-block .row a,.contact-block .row p{font-family:var(--disp);font-weight:600;
  font-size:clamp(1.2rem,1.8vw,1.6rem);letter-spacing:-.03em;text-decoration:none;margin:8px 0 0;line-height:1.25}
.map{border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:70px}
/* The CARTO basemap is already dark, so the old grayscale/invert filter is
   gone -- it would strip the accent colour back out. */
.map #map{width:100%;height:460px;background:var(--panel)}
.map .leaflet-control-attribution{background:rgba(7,8,10,.7);color:var(--dim);font-size:10px}
.map .leaflet-control-attribution a{color:var(--soft)}
.map iframe{width:100%;height:460px;border:0;display:block}

/* cta */
.cta{text-align:center;border-top:1px solid var(--line)}
.cta h2{margin:0 auto;max-width:12ch;font-size:clamp(2.8rem,7vw,6rem)}
.cta .lede{margin:28px auto 0}
.cta .btns{justify-content:center;margin-top:44px}
.cta-glow{position:absolute;left:50%;top:18%;width:min(900px,90vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(139,124,255,.16),transparent 62%);pointer-events:none}

/* footer */
.foot{background:var(--panel);border-top:1px solid var(--line);padding:84px 0 40px}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px}
.foot .brand{display:inline-flex;margin-bottom:26px}
.foot h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:0 0 22px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:14px}
.foot a{text-decoration:none;color:var(--dim);font-size:1.02rem;font-weight:500;transition:color .4s var(--ease)}
.foot a:hover{color:var(--text)}
.socials{display:flex;gap:16px;margin-top:26px}
.socials a{width:40px;height:40px;border:1px solid var(--line);border-radius:0;display:flex;
  align-items:center;justify-content:center;font-size:.68rem;font-family:var(--mono);
  transition:border-color .5s var(--ease),color .5s var(--ease)}
.socials a:hover{border-color:var(--line-2);color:var(--text)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;margin-top:72px;
  padding-top:26px;border-top:1px solid var(--line);font-size:.8rem;color:#61666E}
.legal a{font-size:.8rem;color:#61666E}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

@media (max-width:1000px){
  .intro-in,.split-in,.form-in{grid-template-columns:1fr}
  .split-in.flip .media{order:0}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav{position:fixed;inset:92px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(7,8,10,.97);backdrop-filter:blur(20px);padding:20px var(--gut) 40px;
    border-bottom:1px solid var(--line);display:none}
  .nav.open{display:flex}
  .nav a{width:100%;padding:20px 0;font-size:1.35rem;border-bottom:1px solid var(--line);color:var(--text)}
  .nav .tel{margin-top:24px;width:100%;text-align:center;justify-content:center}
  .burger{display:block}
  .foot-in{grid-template-columns:1fr}
  .hero{min-height:92svh}
  .two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .hero .mono,.hero p,.hero .btns{opacity:1}
  .hero h1 em{transform:none}
}
:focus-visible{outline:2px solid var(--glow);outline-offset:4px}


/* ---------------- smooth scroll wrapper ---------------- */
#sc{width:100%}
html.smooth #sc{position:fixed;top:0;left:0;will-change:transform}

/* ---------------- cursor ---------------- */
html.has-cursor,html.has-cursor *{cursor:none !important}
.cur{position:fixed;top:0;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#fff;z-index:9999;pointer-events:none;opacity:0;
  transition:opacity .3s var(--ease),width .3s var(--ease),height .3s var(--ease),
             margin .3s var(--ease),background .3s var(--ease)}
html.has-cursor .cur{opacity:1}
html.cur-hot .cur,html.cur-play .cur{width:18px;height:18px;margin:-9px 0 0 -9px}

/* ---------------- hall of fame wall ---------------- */
.wall{
  background-color:#0C0C0D;
  background-image:
    radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.09),transparent 60%),
    radial-gradient(circle 4px at 50% 50%,rgba(0,0,0,.85),transparent 60%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 2px,rgba(255,255,255,.014) 2px 3px,transparent 3px 600px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 2px,rgba(255,255,255,.012) 2px 3px,transparent 3px 420px),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22420%22%20viewBox%3D%220%200%20600%20420%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22c%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%224%22%20seed%3D%225%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22b%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.012%22%20numOctaves%3D%223%22%20seed%3D%229%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22420%22%20fill%3D%22%230D0D0E%22%2F%3E%3Crect%20width%3D%22600%22%20height%3D%22420%22%20filter%3D%22url%28%23b%29%22%20opacity%3D%220.20%22%2F%3E%3Crect%20width%3D%22600%22%20height%3D%22420%22%20filter%3D%22url%28%23c%29%22%20opacity%3D%220.10%22%2F%3E%3C%2Fsvg%3E");
  background-size:auto,300px 420px,auto,auto,600px 420px;
  background-position:0 0,20px 40px,0 0,0 0,0 0;
  border-top:1px solid var(--line);
  position:relative;
}
.wall:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 50% at 50% 0%,transparent 32%,rgba(0,0,0,.85) 100%),
    linear-gradient(180deg,rgba(0,0,0,.4),transparent 20%,transparent 76%,rgba(0,0,0,.55));
}
.wall-in{position:relative;z-index:2}
.wall-head{text-align:center;max-width:900px;margin:0 auto clamp(56px,7vw,100px)}
.wall-head h1{font-size:clamp(2.8rem,7.5vw,6.4rem);margin:0 auto}
.wall-head .lede{margin:28px auto 0;max-width:42ch}

.frames{columns:3;column-gap:clamp(18px,2.4vw,40px)}
@media (max-width:1080px){.frames{columns:2}}
@media (max-width:640px){.frames{columns:1}}

.frame{
  break-inside:avoid;margin:0 0 clamp(20px,2.6vw,44px);
  background:linear-gradient(150deg,#2A2C31,#141519 42%,#1D1F24);
  padding:clamp(10px,1vw,15px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.6),
             0 24px 48px rgba(0,0,0,.75);
  transition:transform .9s var(--ease);
  position:relative;display:block;text-decoration:none;color:inherit;
}
.frame:after{
  content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px rgba(139,124,255,.45),
             0 0 70px 14px rgba(139,124,255,.30),
             0 0 170px 44px rgba(139,124,255,.16),
             0 34px 60px rgba(0,0,0,.8);
  transition:opacity 1s var(--ease);
}
.frame:hover{transform:translateY(-6px)}
.frame:hover:after{opacity:1}
.mat{background:#0A0A0C;padding:clamp(9px,.9vw,14px);border:1px solid rgba(0,0,0,.8);
  box-shadow:inset 0 0 30px rgba(0,0,0,.9)}
.frame img{width:100%;display:block;filter:grayscale(.55) brightness(.62) contrast(1.05);
  transition:filter 1.15s var(--ease),transform 1.4s var(--ease);will-change:filter}
.frame:hover img{filter:grayscale(0) brightness(1.02) contrast(1);transform:scale(1.015)}
.plaque{padding:18px 4px 6px;text-align:center}
.plaque h3{font-size:clamp(1.15rem,1.5vw,1.45rem);font-weight:600}
.plaque .mono{display:block;margin-top:10px;font-size:.62rem;color:var(--dim)}
.plaque em{display:block;font-style:normal;margin-top:8px;color:var(--soft);font-size:.86rem;line-height:1.4}


/* ---------------- menu button (fader bars) ---------------- */
.menu-btn{position:relative;z-index:2;display:flex;align-items:center;gap:16px;margin-left:auto;order:9;
  background:none;border:0;padding:10px 0;cursor:pointer;line-height:1}
.menu-btn .bars{display:flex;align-items:flex-end;gap:4px;height:20px}
.menu-btn b{display:block;width:3px;background:var(--text);
  transition:height .45s var(--ease),background .45s var(--ease)}
.menu-btn b:nth-child(1){height:9px}
.menu-btn b:nth-child(2){height:20px}
.menu-btn b:nth-child(3){height:13px}
.menu-btn:hover b{background:var(--glow)}
.menu-btn:hover b:nth-child(1){height:20px}
.menu-btn:hover b:nth-child(2){height:9px}
.menu-btn:hover b:nth-child(3){height:17px}
.menu-btn > span{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text);display:block}
html.menu-open .menu-btn b{height:14px;background:var(--glow)}
html.menu-open .menu-btn:hover b:nth-child(1){height:18px}
html.menu-open .menu-btn:hover b:nth-child(2){height:10px}
html.menu-open .menu-btn:hover b:nth-child(3){height:16px}

/* ---------------- persistent contact ---------------- */
.dock{position:fixed;right:clamp(16px,2.4vw,38px);bottom:clamp(16px,2.4vw,38px);z-index:88;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
html.menu-open .dock{opacity:0;transform:translateY(12px);pointer-events:none}
.dock-main{
  position:relative;z-index:0;display:flex;align-items:center;gap:14px;text-decoration:none;
  font-family:var(--body);font-weight:600;font-size:1rem;color:var(--text);
  background:rgba(12,14,17,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);padding:16px 24px;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease)
}
.dock-main:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--text);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.dock-main:after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;
  border-top:1px solid var(--glow);border-right:1px solid var(--glow);transition:border-color .5s var(--ease)}
.dock-main:hover{color:var(--void);border-color:var(--text)}
.dock-main:hover:before{transform:scaleX(1)}
.dock-main:hover:after{border-color:rgba(7,8,10,.45)}
.dock-led{width:7px;height:7px;background:var(--glow);flex:0 0 auto;animation:led 2.6s var(--ease) infinite}
@keyframes led{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:600px){.dock-main{padding:14px 18px;font-size:.92rem}}


/* ---------------- header detail ---------------- */


/* ---------------- menu panel ---------------- */
.menu{
  position:fixed;left:0;right:0;top:var(--head);bottom:0;z-index:70;
  background:var(--void);
  pointer-events:none;overflow-y:auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--ease);
}
html.menu-open .menu{pointer-events:auto;clip-path:inset(0 0 0 0)}
.menu-in{padding-top:clamp(20px,3.4vh,44px);padding-bottom:60px}
.menu ul{list-style:none;margin:0;padding:0}
.menu li{overflow:hidden}
.menu a{
  display:block;text-decoration:none;color:var(--soft);
  padding:clamp(7px,1vw,14px) 0;
  font-family:var(--disp);font-weight:600;letter-spacing:-.04em;line-height:1.05;
  font-size:clamp(2rem,6vw,4.6rem);
  transform:translateY(105%);
  transition:transform .7s var(--ease),color .4s var(--ease),padding-left .4s var(--ease);
}
html.menu-open .menu a{transform:none}
html:not(.menu-open) .menu a{transition-delay:0s !important}
.menu li:nth-child(1) a{transition-delay:.05s}
.menu li:nth-child(2) a{transition-delay:.10s}
.menu li:nth-child(3) a{transition-delay:.15s}
.menu li:nth-child(4) a{transition-delay:.20s}
.menu li:nth-child(5) a{transition-delay:.25s}
.menu li:nth-child(6) a{transition-delay:.30s}
.menu a:hover,.menu a[aria-current]{color:#fff;padding-left:clamp(10px,1.4vw,26px)}


/* ---------------- scroll progress rail ---------------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:2px;z-index:96;
  background:rgba(255,255,255,.07);pointer-events:none}
.prog{display:block;width:100%;height:100%;background:var(--glow);
  transform:scaleY(0);transform-origin:top;will-change:transform}
@media (max-width:600px){.rail{width:2px}}

/* no browser scrollbar */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
.menu::-webkit-scrollbar,.menu-in::-webkit-scrollbar{width:0;height:0;display:none}
.menu,.menu-in{scrollbar-width:none}


@media (max-width:760px){.menu-btn > span{display:none}}


/* ---------------- films strip ---------------- */
.films{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(10px,1.2vw,18px);margin-top:clamp(44px,5vw,70px)}
@media (max-width:600px){.films{grid-template-columns:1fr}}
.films .tile{margin:0;aspect-ratio:16/9;border-color:rgba(255,255,255,.07)}
.films .tile img{filter:grayscale(1) contrast(1.05);opacity:.55;
  transition:filter .7s var(--ease),opacity .6s var(--ease),transform 1.2s var(--ease)}
.films .tile:hover img{filter:none;opacity:1;transform:scale(1.05)}
.films .tile:after{background:linear-gradient(to top,rgba(7,8,10,.94) 6%,rgba(7,8,10,.1) 66%)}
.films .tile h3{font-size:clamp(1rem,1.25vw,1.22rem);font-weight:600;margin-top:8px;line-height:1.2}
.films .mono{font-size:.58rem;letter-spacing:.18em}
.films .meta{left:20px;right:20px;bottom:17px}
.play{display:none}
/* playhead sweeps across as though the clip were running */
.films .tile:before{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--glow);z-index:4;transform:scaleX(0);transform-origin:left;
  transition:transform 2.6s linear}
.films .tile:hover:before{transform:scaleX(1)}

/* cursor turns into a play target over a film */


/* ---------------- image reveal ---------------- */
.tile.rv img,.media.rv img,.room.rv img{clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--ease) .08s,transform 1.2s var(--ease),
             opacity .7s var(--ease),filter .7s var(--ease)}
.tile.rv.in img,.media.rv.in img,.room.rv.in img{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .tile.rv img,.media.rv img,.room.rv img{clip-path:none}
}


/* ---------------- group credit ---------------- */
.group{margin:20px 0 0;font-size:.88rem;color:#61666E;max-width:32ch}
.group a{font-size:.88rem;font-weight:600;color:var(--soft);text-decoration:none;
  border-bottom:1px solid rgba(139,124,255,.4);transition:color .4s var(--ease),border-color .4s var(--ease)}
.group a:hover{color:#fff;border-color:var(--glow)}
.credit{margin:clamp(30px,3.4vw,48px) 0 0;color:var(--dim);font-size:.95rem;max-width:52ch}
.credit a{color:var(--text);text-decoration:none;border-bottom:1px solid rgba(139,124,255,.5);
  transition:border-color .4s var(--ease)}
.credit a:hover{border-color:var(--glow)}


/* ---------------- bare media hero ---------------- */
.hero.bare{min-height:clamp(300px,52svh,560px)}
.hero.bare .hero-veil{background:linear-gradient(to top,rgb(7,8,10) 0,rgb(7,8,10) 5%,rgba(7,8,10,.45) 55%,rgba(7,8,10,.5))}

/* ---------------- page name in the header ---------------- */
.page-name{margin-left:auto;order:8;font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;
  animation:nameIn 1s var(--ease) both .1s}
.page-name:empty{display:none}
@keyframes nameIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-name:not(:empty) + .menu-btn{margin-left:clamp(20px,3vw,44px)}
@media (max-width:760px){.page-name{display:none}}

/* ---------------- cursor glow ---------------- */
.cur-glow{position:fixed;top:0;left:0;width:380px;height:380px;margin:-190px 0 0 -190px;
  border-radius:50%;pointer-events:none;z-index:78;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(139,124,255,.10),rgba(139,124,255,.045) 34%,
             rgba(102,124,255,.018) 58%,transparent 74%);
  transition:opacity 1.2s var(--ease)}
html.has-cursor .cur-glow{opacity:1}
html.smooth #sc{z-index:1}
#sc{position:relative;z-index:1}


/* equal width button row (studio downloads) */
.btns.equal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:660px}
.btns.equal .btn{justify-content:space-between;padding-left:24px;padding-right:24px;
  font-size:clamp(.88rem,1vw,1rem);white-space:nowrap;color:var(--text)}
.btns.equal .btn:hover{color:var(--void)}
@media (max-width:820px){.btns.equal{grid-template-columns:1fr;max-width:420px}}

/* productions fade in when the filter changes */
@keyframes tileIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}


/* ---------------- recent work feature ---------------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,26px);
  margin-top:clamp(48px,6vw,80px)}
.feature .tile{margin:0;aspect-ratio:16/9}
.feature .tile:first-child{grid-column:1 / -1;aspect-ratio:23/8}
.feature .tile img{opacity:.72}
.feature .tile:hover img{opacity:1;transform:scale(1.045)}
.feature .tile:after{background:linear-gradient(to top,rgba(7,8,10,.95) 6%,rgba(7,8,10,.15) 62%)}
.feature .tile:before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--glow);
  z-index:4;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.feature .tile:hover:before{transform:scaleX(1)}
.feature .meta{left:clamp(20px,2.2vw,36px);right:clamp(20px,2.2vw,36px);bottom:clamp(18px,2vw,30px)}
.feature .tile h3{font-size:clamp(1.2rem,1.8vw,1.7rem);margin-top:10px}
.feature .tile:first-child h3{font-size:clamp(1.6rem,2.8vw,2.6rem)}
@media (max-width:760px){
  .feature{grid-template-columns:1fr}
  .feature .tile:first-child{aspect-ratio:16/9}
}


/* ---------------- lightbox ---------------- */
.lb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(4,5,7,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s var(--ease)}
html.lb-open .lb{opacity:1;visibility:visible}
.lb-stage{position:relative;max-width:min(1240px,90vw);max-height:82vh;
  transform:scale(.985);transition:transform .5s var(--ease)}
html.lb-open .lb-stage{transform:none}
.lb-stage img{max-width:min(1240px,90vw);max-height:76vh;width:auto;height:auto;
  border:1px solid var(--line);display:block;margin:0 auto}
.lb-cap{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin-top:18px;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft)}
.lb-cap b{color:var(--glow);font-weight:400}
.lb-btn{position:absolute;z-index:2;width:54px;height:54px;display:flex;align-items:center;
  justify-content:center;background:rgba(12,14,17,.7);border:1px solid var(--line-2);color:var(--text);
  font-family:var(--mono);font-size:1rem;cursor:pointer;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.lb-btn:hover{background:var(--text);color:var(--void);border-color:var(--text)}
.lb-prev{top:50%;left:clamp(10px,3vw,44px);transform:translateY(-50%)}
.lb-next{top:50%;right:clamp(10px,3vw,44px);transform:translateY(-50%)}
.lb-close{top:clamp(14px,3vh,34px);right:clamp(10px,3vw,44px)}
.lb-close:after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;
  border-top:1px solid var(--glow);border-right:1px solid var(--glow)}
@media (max-width:700px){
  .lb-btn{width:46px;height:46px}
  .lb-prev{left:8px}.lb-next{right:8px}
}

/* ---------- hover video preview on production tiles ---------- */
/* Sits above the still and below the gradient/meta so captions stay readable. */
.tile .preview{
  position:absolute;inset:0;z-index:2;border:0;
  opacity:0;transition:opacity .45s var(--ease);
  pointer-events:none;
}
.tile .preview.on{opacity:1}
/* Cover the tile without distorting the video.
   height:100% fills the tile vertically, aspect-ratio derives the width from
   that height, and min-width stops a very wide tile leaving gaps. Anything
   wider than the tile is clipped by .preview's overflow -- i.e. proper "cover"
   behaviour. Do NOT use vh/vw here: those size against the viewport, not the
   tile, which magnifies the frame enormously inside a small tile. */
.tile .preview{overflow:hidden}
.tile .preview iframe{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  height:100%;
  aspect-ratio:16/9;
  min-width:100%;
  border:0;pointer-events:none;
}
/* Once a preview is playing, stop the still zooming underneath it. */
.tile.previewing img{transform:none}

/* YouTube always paints its title and branding into the top and bottom of the
   frame; controls=0 removes the scrub bar but not those. Scaling past the tile
   pushes them outside the crop. Vimeo's background player has no chrome, so it
   is left at its natural size -- overscaling it would only lose picture. */



/* --- legal pages -------------------------------------------------------
   Long-form prose, which the rest of the site has no use for: everything
   else is short blocks in a grid. Narrow measure, generous leading, section
   headings that separate without shouting.
   Named -doc because .legal is already the footer strip. */
.legal-doc{max-width:74ch;margin-top:clamp(34px,5vw,60px)}
.legal-doc p{font-size:clamp(15px,1.15vw,16.5px);line-height:1.75;color:var(--dim);margin:0 0 1.35em}
.legal-doc h2{
  font-size:clamp(1rem,1.5vw,1.15rem);font-weight:600;letter-spacing:-.01em;
  color:var(--text);margin:2.6em 0 .9em;
}
.legal-doc h2:first-child{margin-top:0}
.legal-doc ul{margin:0 0 1.35em;padding-left:1.1em}
.legal-doc li{font-size:clamp(15px,1.15vw,16.5px);line-height:1.75;color:var(--dim);margin-bottom:.5em}
.legal-doc a{color:var(--text);text-decoration:underline;text-underline-offset:3px}