@font-face{font-family:"BP Helvetica Neue";src:url("fonts/helvetica-neue-light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"BP Helvetica Neue";src:url("fonts/helvetica-neue-roman.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"BP Helvetica Neue";src:url("fonts/helvetica-neue-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"BP Helvetica Neue";src:url("fonts/helvetica-neue-bold.woff2") format("woff2");font-weight:700;font-display:swap}

/* Layout: full-bleed photo hero, then a 12-col architectural grid with visible guide lines; one accent that flips cyan (Studio) / red (Events). */
:root{
  color-scheme: dark;
  --ink:#0D1110;          /* brand near-black ground */
  --ink-2:#121716;        /* raised surface */
  --black:#000000;
  --paper:#F5F5F5;        /* brand white */
  --mute:#9A9A94;         /* text secondary, warmed from brand gray */
  --gray:#666660;         /* brand gray */
  --line:rgba(245,245,245,.12);
  --line-2:rgba(245,245,245,.22);
  --cyan:#00FFF0;
  --red:#FF2929;
  --accent:var(--cyan);
  --accent-ink:#00201E;   /* text on accent */
  --grad:linear-gradient(90deg,#000 0%,#FF2929 55%,#F5F5F5 100%);
  --sans:"BP Helvetica Neue","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
  --cond:"Anton","Druk","Druk Wide",Impact,"Arial Narrow",sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --display:var(--sans);
  --display-weight:500;
  --display-track:-.035em;
  --display-case:none;
  --gutter:clamp(16px,4vw,56px);
  --maxw:1320px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
:root[data-aud="events"]{
  --accent:var(--red);
  --accent-ink:#FFFFFF;
  --display:var(--cond);
  --display-weight:400;
  --display-track:.005em;
  --display-case:uppercase;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--accent-ink)}

/* fine grain, low opacity (brand: "fine, subtle grain only") */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.disp{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-track);text-transform:var(--display-case);line-height:.95;text-wrap:balance;margin:0}
.acc{color:var(--accent);transition:color .5s var(--ease)}
em.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.4em;border-radius:4px;border:1px solid var(--paper);background:transparent;color:var(--paper);font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--paper);color:var(--black)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.solid:hover{background:var(--paper);border-color:var(--paper);color:var(--black)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(13,17,16,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:block;width:62px;flex:none}
.logo svg{display:block;width:100%;height:auto}
.nav-links{display:flex;gap:28px;font-size:14px}
.nav-links a{text-decoration:none;color:var(--mute);transition:color .2s}
.nav-links a:hover{color:var(--paper)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav .btn{padding:.7em 1.1em;font-size:14px}
@media (max-width:900px){.nav-links{display:none}}

/* audience toggle */
.aud{display:inline-flex;position:relative;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:rgba(0,0,0,.35)}
.aud button{position:relative;z-index:1;border:0;background:none;color:var(--mute);font:500 13px/1 var(--sans);padding:.65em 1em;border-radius:999px;cursor:pointer;transition:color .3s;white-space:nowrap}
.aud button[aria-pressed="true"]{color:var(--accent-ink)}
.aud .pill{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;border-radius:999px;background:var(--accent);transition:transform .45s var(--ease),width .45s var(--ease),background .45s}
@media (max-width:560px){.nav .aud{display:none}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:min(880px,96svh);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-2}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.06);animation:settle 2.4s var(--ease) forwards}
@keyframes settle{to{transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,17,16,.85) 0%,rgba(13,17,16,.15) 38%,rgba(13,17,16,.35) 62%,var(--ink) 100%),linear-gradient(90deg,rgba(13,17,16,.75) 0%,rgba(13,17,16,0) 60%)}
.guides{position:absolute;inset:0;z-index:-1;pointer-events:none}
.guides line{stroke:var(--paper);stroke-opacity:.18;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 1.8s var(--ease) forwards}
.guides line:nth-child(2){animation-delay:.15s}.guides line:nth-child(3){animation-delay:.3s}.guides line:nth-child(4){animation-delay:.45s}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-inner{width:100%;padding-block:140px 56px}
.hero h1{font-size:clamp(52px,9.6vw,148px)}
:root[data-aud="events"] .hero h1{font-size:clamp(56px,10.4vw,164px);line-height:.9}
.hero-lede{max-width:34em;margin:28px 0 0;font-size:clamp(16px,1.4vw,19px);color:rgba(245,245,245,.82)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:64px;padding-top:16px;border-top:1px solid var(--line-2)}
.dim{display:flex;align-items:center;gap:12px;flex:1 1 320px;min-width:0;font-size:13px;font-variant-numeric:tabular-nums;color:var(--mute)}
.dim .rule{flex:1;height:9px;border-left:1px solid var(--accent);border-right:1px solid var(--accent);position:relative;transform-origin:left;animation:grow 1.6s .6s var(--ease) both}
.dim .rule::after{content:"";position:absolute;left:0;right:0;top:4px;border-top:1px solid var(--accent)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dim b{color:var(--paper);font-weight:500}
:root[data-aud="studio"] .swap [data-for="events"],:root[data-aud="events"] .swap [data-for="studio"]{display:none!important}
.fade-swap{animation:fadein .6s var(--ease)}
@keyframes fadein{from{opacity:.0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- SECTIONS ---------- */
section{position:relative}
.sec{padding-block:clamp(72px,10vw,140px);border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.sec-head h2{font-size:clamp(40px,6vw,88px)}
.sec-head p{margin:0;max-width:36em;color:var(--mute)}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}

/* audience chooser */
.choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card-aud{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:380px;padding:clamp(24px,3vw,40px);background:var(--ink);overflow:hidden;transition:background .4s}
.card-aud:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.card-aud .bg{position:absolute;inset:0;z-index:0;opacity:.28;transition:opacity .5s,transform 1.2s var(--ease)}
.card-aud .bg img{width:100%;height:100%;object-fit:cover}
.card-aud:hover .bg{opacity:.45;transform:scale(1.03)}
.card-aud>*:not(.bg){position:relative;z-index:1}
.card-aud .k{display:flex;justify-content:space-between;align-items:center}
.card-aud .dot{width:12px;height:12px;border-radius:50%;border:1px solid var(--paper)}
.card-aud[aria-pressed="true"] .dot{background:var(--accent);border-color:var(--accent)}
.card-aud[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--accent)}
.card-aud h3{font-size:clamp(30px,3.6vw,52px);margin-bottom:14px}
.card-aud[data-set="events"] h3{font-family:var(--cond);font-weight:400;text-transform:uppercase;letter-spacing:.005em}
.card-aud[data-set="studio"] h3{font-family:var(--sans);font-weight:500;letter-spacing:-.035em}
.card-aud p{margin:0;max-width:30em;color:rgba(245,245,245,.78)}
.card-aud .q{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--paper)}
@media (max-width:760px){.choose{grid-template-columns:1fr}.card-aud{min-height:300px}}

/* uses list */
.uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.use{padding:28px 24px 32px 0;border-right:1px solid var(--line);min-width:0}
.use+.use{padding-left:24px}
.use:last-child{border-right:0}
.use h4{margin:16px 0 8px;font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.use p{margin:0;color:var(--mute);font-size:15px}
.use svg{width:44px;height:44px;stroke:var(--accent);fill:none;stroke-width:1.2;transition:stroke .5s}
@media (max-width:980px){.uses{grid-template-columns:repeat(2,minmax(0,1fr))}.use:nth-child(2){border-right:0}.use:nth-child(3){padding-left:0}.use:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.uses{grid-template-columns:1fr}.use,.use+.use{padding-left:0;border-right:0}.use+.use{border-top:1px solid var(--line)}}

/* the space: numbers */
.space-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.space-photo{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden}
.space-photo img{width:100%;height:100%;object-fit:cover}
.space-photo figcaption{position:absolute;left:16px;bottom:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,245,.8)}
.nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.num{padding:24px 0 28px;border-bottom:1px solid var(--line);min-width:0}
.num:nth-child(odd){padding-right:20px;border-right:1px solid var(--line)}
.num:nth-child(even){padding-left:20px}
.num .v{font-size:clamp(40px,5vw,68px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.num .v small{font-size:.38em;letter-spacing:0;margin-left:4px;color:var(--mute);font-weight:400}
.num .l{margin-top:10px;font-size:14px;color:var(--mute)}
.space-copy p{color:rgba(245,245,245,.8);max-width:34em}
@media (max-width:860px){.space-grid{grid-template-columns:1fr}.space-photo{aspect-ratio:16/11}}

/* ---------- PLANNER ---------- */
.planner{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--line-2);background:var(--black)}
.stage{position:relative;min-width:0;border-right:1px solid var(--line-2);display:flex;flex-direction:column}
.stage-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
.stage-top b{color:var(--paper);font-weight:500}
.svgbox{overflow-x:auto;-webkit-overflow-scrolling:touch;flex:1;display:flex;align-items:center}
#hall{display:block;width:100%;min-width:640px;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
#hall .gr1{stroke:var(--paper);stroke-opacity:.06;stroke-width:.03}
#hall .gr5{stroke:var(--paper);stroke-opacity:.14;stroke-width:.04}
#hall .wall{fill:rgba(245,245,245,.025);stroke:var(--paper);stroke-width:.14;stroke-linejoin:miter}
#hall .deck{fill:rgba(245,245,245,.07);stroke:var(--paper);stroke-opacity:.5;stroke-width:.05}
#hall .stair line{stroke:var(--paper);stroke-opacity:.45;stroke-width:.03}
#hall .proj{fill:none;stroke:var(--gray);stroke-width:.06}
#hall .dimt{fill:var(--mute);font:500 .62px var(--sans);letter-spacing:.02px}
#hall .diml{stroke:var(--mute);stroke-width:.04}
#hall .zt{fill:var(--mute);font:500 .5px var(--sans);letter-spacing:.06px;text-transform:uppercase}
#plan{cursor:grab}
#plan.drag{cursor:grabbing}
#plan:focus{outline:none}
#plan:focus-visible .pbox{stroke-dasharray:.3 .2}
#plan .pbox{fill:var(--accent);fill-opacity:.06;stroke:var(--accent);stroke-width:.09;transition:fill .5s,stroke .5s}
#plan .room{fill:none;stroke:var(--accent);stroke-width:.06;stroke-opacity:.9;transition:stroke .5s}
#plan .item{fill:var(--accent);fill-opacity:.25;stroke:var(--accent);stroke-width:.04}
#plan .seat{fill:var(--accent);fill-opacity:.85}
#plan .rl{fill:var(--paper);font:500 .46px var(--sans);text-anchor:middle;dominant-baseline:middle;pointer-events:none}
#plan .rd{fill:var(--mute);font:400 .34px var(--sans);text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-variant-numeric:tabular-nums}
#plan image{opacity:.9}
.person{fill:var(--paper)}
.mk{cursor:pointer}
.mk circle.c{fill:var(--black);stroke:var(--paper);stroke-width:.07}
.mk circle.p{fill:none;stroke:var(--accent);stroke-width:.06;transform-box:fill-box;transform-origin:center;animation:ping 2.4s var(--ease) infinite}
.mk text{fill:var(--paper);font:500 .5px var(--sans);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.mk:hover circle.c,.mk.on circle.c{fill:var(--accent);stroke:var(--accent)}
.mk:hover text,.mk.on text{fill:var(--accent-ink)}
.mk:focus{outline:none}.mk:focus-visible circle.c{stroke:var(--accent);stroke-width:.14}
@keyframes ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.4);opacity:0}}
.stage-foot{display:flex;flex-wrap:wrap;gap:8px 20px;padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.stage-foot span{display:inline-flex;align-items:center;gap:8px}
.sw{width:14px;height:10px;border:1px solid var(--accent)}
.sw.d{border-color:var(--paper);background:rgba(245,245,245,.12)}
.sw.p{border:1px solid var(--gray);border-radius:50%;width:10px}

.panel{display:flex;flex-direction:column;min-width:0}
.pgroup{padding:20px;border-bottom:1px solid var(--line)}
.pgroup:last-child{border-bottom:0;flex:1}
.pgroup h4{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}
.chips{display:flex;flex-direction:column;gap:6px}
.chip{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;border:1px solid var(--line);cursor:pointer;font-size:14px;transition:border-color .2s,background .2s}
.chip small{color:var(--mute);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chip:hover{border-color:var(--line-2)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:rgba(245,245,245,.04)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:10px 0 2px}
.chip-tag:first-child{margin-top:0}
.row{display:flex;gap:8px;flex-wrap:wrap}
.tool{all:unset;box-sizing:border-box;flex:1 1 auto;text-align:center;padding:9px 10px;border:1px solid var(--line-2);font-size:13px;cursor:pointer;transition:background .2s,color .2s}
.tool:hover{background:var(--paper);color:var(--black)}
.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.readout{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;font-variant-numeric:tabular-nums}
.readout dt{color:var(--mute)}
.readout dd{margin:0;text-align:right}
.fitmsg{margin-top:12px;font-size:13px;padding:8px 10px;border-left:2px solid var(--accent);background:rgba(245,245,245,.04)}
.upl{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--mute)}
.upl label.file{display:block;text-align:center;padding:10px;border:1px dashed var(--line-2);cursor:pointer;color:var(--paper);transition:border-color .2s}
.upl label.file:hover,.upl.over label.file{border-color:var(--accent)}
.upl input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.upl .w{display:flex;align-items:center;gap:8px}
.upl input[type=number]{width:84px;background:transparent;border:1px solid var(--line-2);color:var(--paper);padding:6px 8px;font:inherit;font-size:14px}
.info h5{margin:0 0 6px;font-size:18px;font-weight:500;letter-spacing:-.01em}
.info p{margin:0;font-size:14px;color:var(--mute)}
.info .hint{font-size:13px}
@media (max-width:1020px){.planner{grid-template-columns:1fr}.stage{border-right:0;border-bottom:1px solid var(--line-2)}.panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.pgroup{border-right:1px solid var(--line)}}
@media (max-width:620px){.panel{grid-template-columns:1fr}.pgroup{border-right:0}}
.planner-note{margin-top:14px;font-size:13px;color:var(--mute);max-width:60em}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:s}
.step{padding:0 28px 0 0;min-width:0;position:relative}
.step+.step{padding-left:28px;border-left:1px solid var(--line)}
.step .n{font-variant-numeric:tabular-nums;font-size:13px;color:var(--accent);letter-spacing:.1em}
.step h4{margin:18px 0 10px;font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.step p{margin:0;color:var(--mute);font-size:15px;max-width:26em}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:32px}.step,.step+.step{padding:0;border-left:0}.step+.step{padding-top:32px;border-top:1px solid var(--line)}}

/* ---------- WORK ---------- */
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.work figure{margin:0;position:relative;overflow:hidden;background:var(--ink-2);min-width:0}
.work figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.work figure:hover img{transform:scale(1.04)}
.work figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);font-size:14px}
.work figcaption small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.w-a{grid-column:span 7;aspect-ratio:3/2}
.w-b{grid-column:span 5;aspect-ratio:auto}
.w-c{grid-column:span 4;aspect-ratio:4/5}
.w-d{grid-column:span 4;aspect-ratio:4/5}
.w-e{grid-column:span 4;aspect-ratio:4/5}
.work.ev figure{aspect-ratio:4/5;grid-column:span 4}
.work .w-b img{position:absolute;inset:0}
@media (max-width:820px){.w-a,.w-b{grid-column:span 12}.w-b{aspect-ratio:3/2}.w-c,.w-d,.w-e,.work.ev figure{grid-column:span 6}.w-e{grid-column:span 12;aspect-ratio:3/2}.work.ev figure:last-child{grid-column:span 12;aspect-ratio:4/3}}
.events-band{height:6px;background:var(--grad);margin-top:12px}

/* ---------- CONTACT ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px)}
.contact h2{font-size:clamp(44px,6.4vw,96px)}
.contact-side p{color:rgba(245,245,245,.8);max-width:28em}
.contact-side .meta{margin-top:40px;display:grid;gap:18px;font-size:15px}
.contact-side .meta div{border-top:1px solid var(--line);padding-top:12px}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
.f{display:flex;flex-direction:column;gap:8px;min-width:0}
.f.full{grid-column:1/-1}
.f label,.f legend{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.f input,.f textarea,.f select{background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--paper);font:inherit;font-size:17px;padding:8px 0;border-radius:0;transition:border-color .2s}
.f select option{background:var(--ink);color:var(--paper)}
.f textarea{resize:vertical;min-height:110px}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--accent)}
.f input::placeholder,.f textarea::placeholder{color:#5c605e}
.f .err{font-size:13px;color:var(--accent);min-height:0}
fieldset.f{border:0;padding:0;margin:0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg label{font-size:14px;letter-spacing:0;text-transform:none;color:var(--paper);padding:.6em 1em;border:1px solid var(--line-2);border-radius:4px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.seg input:checked+label{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:8px}
.form-foot p{margin:0;font-size:13px;color:var(--mute);flex:1 1 220px}
.sent{grid-column:1/-1;padding:20px;border:1px solid var(--accent)}
.sent h4{margin:0 0 6px;font-size:20px;font-weight:500}
.sent p{margin:0;color:var(--mute);font-size:15px}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
@media (max-width:560px){form{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:40px 48px;font-size:14px;color:var(--mute)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
footer .big{font-size:clamp(48px,12vw,180px);font-weight:500;letter-spacing:-.05em;line-height:.85;color:var(--paper);margin:0 0 28px;width:100%}

/* nav islands: logo + links in one dark panel on the left, booking in another on the right; no full-width bar */
.nav,.nav.scrolled{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
.nav .wrap{height:auto;padding-block:14px;align-items:stretch}
.nav-l,.nav-right{display:flex;align-items:center;border-radius:6px;background:rgba(13,17,16,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(245,245,245,.08)}
.nav-l{gap:28px;padding:8px 22px 8px 12px}
.nav-l .logo{width:46px}
.nav-right{gap:12px;padding:6px}
.nav-links{gap:24px}
.nav-links a{color:rgba(245,245,245,.85)}
.nav-links a[aria-current="page"]{color:var(--paper)}
@media (max-width:900px){.nav-l{padding:8px 12px}}

/* islands join on scroll: at the top they sit apart; once the page scrolls they slide together into one centred bar */
.nav .wrap{display:grid;grid-template-columns:0fr auto 1fr auto 0fr;gap:0;transition:grid-template-columns .55s var(--ease)}
.nav .nav-l{grid-column:2}.nav .nav-right{grid-column:4}
.nav-l,.nav-right{transition:border-radius .55s var(--ease)}
.nav.scrolled .wrap{grid-template-columns:1fr auto 0fr auto 1fr}
.nav.scrolled .nav-l{border-radius:6px 0 0 6px;border-right-color:transparent}
.nav.scrolled .nav-right{border-radius:0 6px 6px 0;border-left-color:transparent;padding-left:14px}
@media (max-width:900px){.nav.scrolled .wrap{grid-template-columns:0fr auto 1fr auto 0fr}.nav.scrolled .nav-l,.nav.scrolled .nav-right{border-radius:6px;border-color:rgba(245,245,245,.08)}}
@media (prefers-reduced-motion:reduce){.nav .wrap,.nav-l,.nav-right{transition:none}}

/* phone menu: a third island button opens a sheet of page links under the nav */
.nav-menu{display:none;position:relative;width:40px;height:40px;border:1px solid rgba(245,245,245,.14);border-radius:4px;background:none;color:var(--paper);cursor:pointer}
.nav-menu span{position:absolute;left:11px;right:11px;height:0}
.nav-menu span{top:15px}
.nav-menu span::before,.nav-menu span::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.nav-menu span::before{top:0}.nav-menu span::after{top:8px}
.nav-menu[aria-expanded="true"] span::before{top:4px;transform:rotate(45deg)}
.nav-menu[aria-expanded="true"] span::after{top:4px;transform:rotate(-45deg)}
.nav-sheet{position:absolute;left:var(--gutter,16px);right:var(--gutter,16px);top:calc(100% + 6px);background:rgba(13,17,16,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(245,245,245,.08);border-radius:6px;padding:8px 20px 20px;max-height:calc(100dvh - 100px);overflow:auto;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .3s var(--ease)}
.nav-sheet.open{opacity:1;transform:none}
.nav-sheet nav{display:flex;flex-direction:column}
.nav-sheet nav a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);color:var(--paper);text-decoration:none;font-size:24px;letter-spacing:-.02em}
.nav-sheet nav a span{color:var(--mute);font-size:18px;transition:transform .2s,color .2s}
.nav-sheet nav a:hover span,.nav-sheet nav a[aria-current="page"] span{color:var(--accent);transform:translateX(4px)}
.nav-sheet nav a[aria-current="page"]{color:var(--accent)}
.nav-sheet-foot{display:flex;flex-direction:column;gap:4px;padding-top:18px;font-size:13px;color:var(--mute)}
.nav-sheet-foot a{color:var(--paper);text-decoration:none}
@media (max-width:900px){.nav-menu{display:block}.nav-right .btn{padding-inline:14px}}
@media (min-width:901px){.nav-sheet{display:none!important}}
@media (prefers-reduced-motion:reduce){.nav-sheet,.nav-menu span::before,.nav-menu span::after{transition:none}}

/* hero buttons on phones: side by side, two equal halves of the row */
@media (max-width:520px){.hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;align-self:stretch}.hero-cta .btn{justify-content:center;padding-inline:8px;font-size:14px;white-space:nowrap}}
@media (max-width:370px){.hero-cta .btn{font-size:13px;gap:.4em}}

/* phones: Studio and Events stay in the top bar beside the logo; the rest live in the menu */
.nav-quick{display:none}
@media (max-width:900px){
  .nav-quick{display:flex;gap:16px;font-size:14px}
  .nav-quick a{color:rgba(245,245,245,.85);text-decoration:none}
  .nav-quick a[aria-current="page"]{color:var(--accent)}
  .nav-l{gap:16px;padding-right:16px}
}
@media (max-width:400px){
  .nav-l{gap:12px;padding:6px 12px 6px 8px}.nav-l .logo{width:40px}
  .nav-quick{gap:12px;font-size:13px}
  .nav-right{gap:6px;padding:5px}.nav-right .btn{font-size:13px;padding:.75em 10px}
  .nav-menu{width:36px;height:36px}.nav-menu span{left:9px;right:9px;top:13px}
}

/* phones: the two nav islands join into one bar, at the top and on scroll */
@media (max-width:900px){
  .nav .wrap,.nav.scrolled .wrap{grid-template-columns:0fr auto 1fr 0fr 0fr}
  .nav .nav-right,.nav.scrolled .nav-right{grid-column:3;justify-content:flex-end;border-radius:0 6px 6px 0;border-left-color:transparent;border-color:rgba(245,245,245,.08) rgba(245,245,245,.08) rgba(245,245,245,.08) transparent}
  .nav .nav-l,.nav.scrolled .nav-l{border-radius:6px 0 0 6px;border-color:rgba(245,245,245,.08) transparent rgba(245,245,245,.08) rgba(245,245,245,.08)}
}
/* phones: more air between the logo and Studio / Events */
@media (max-width:900px){.nav-l{gap:28px}}
@media (max-width:400px){.nav-l{gap:22px}}
/* phones: "Walkthroughs" needs the room, so the nav button shortens to "Book" */
.nav-right .btn{white-space:nowrap}.nav-menu{flex-shrink:0}
@media (max-width:480px){.nav-bk-x{display:none}.nav-l{gap:20px}.nav-quick{gap:14px}}
.nav-bk-x{margin-left:-.33em}

/* phone menu (13g): full screen on black with a projected floor grid; "I'm planning" picks a space or an event,
   which swaps the links and recolours the grid, the first link and the Book button (cyan for studio, red for events) */
@media (max-width:900px){
  .nav-sheet{position:fixed;inset:0;z-index:-1;border:0;border-radius:0;max-height:none;overflow:auto;transform:none;
    padding:96px var(--gutter,16px) calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;
    --g:rgba(245,245,245,.07);background-color:#000;background-image:linear-gradient(var(--g) 1px,transparent 1px),linear-gradient(90deg,var(--g) 1px,transparent 1px);background-size:96px 96px;background-position:-1px -1px;backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity .3s}

  .ns-k{margin:0;font-size:13px;color:var(--mute)}
  .ns-tg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;border:1px solid var(--line-2);background:#000}
  .ns-tg button{font:inherit;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding:12px 11px;border:0;border-radius:999px;background:none;color:var(--mute);cursor:pointer;transition:background .25s,color .25s}
  .nav-sheet[data-g="st"] .ns-tg button[aria-pressed="true"]{background:var(--cyan);color:var(--accent-ink)}
  .nav-sheet[data-g="ev"] .ns-tg button[aria-pressed="true"]{background:var(--red);color:#fff}
  .nav-sheet nav{display:flex;flex-direction:column;margin-top:12px}
  .nav-sheet nav[hidden]{display:none}
  .nav-sheet nav a{display:block;padding:5px 0;border:0;font-size:clamp(32px,10vw,42px);line-height:1.05;letter-spacing:-.045em;font-weight:500;color:var(--paper);text-decoration:none}
  .nav-sheet[data-g="st"] nav a:first-child{color:var(--cyan)}
  .nav-sheet[data-g="ev"] nav a:first-child{color:var(--red)}
  .ns-foot{margin-top:auto;display:flex;flex-direction:column;gap:20px}
  .ns-book{justify-content:center;width:100%}
  .nav-sheet[data-g="ev"] .ns-book{background:var(--red);border-color:var(--red);color:#fff}
  .ns-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;font-size:13px;color:var(--mute)}
  .ns-row div{display:flex;flex-direction:column;gap:2px}.ns-row a{color:var(--paper);text-decoration:none}
  .ns-soc{text-align:right}
}

/* ---------- multi-page additions ---------- */
.nav-links a[aria-current="page"]{color:var(--paper)}
.nav-links a[aria-current="page"]::after{content:"";display:block;height:1px;background:var(--accent);margin-top:4px}
.page-hero{min-height:min(640px,80svh)}
.page-hero .hero-inner{padding-block:150px 48px}
.page-hero h1{font-size:clamp(48px,8vw,124px)}
:root[data-aud="events"] .page-hero h1{font-size:clamp(54px,9vw,140px)}
.crumbs{font-size:13px;color:var(--mute);margin:0 0 18px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--paper)}

/* tour embed */
.tour{position:relative;aspect-ratio:16/9;max-height:82svh;width:100%;max-width:100%;background:var(--black);border:1px solid var(--line-2);overflow:hidden}
.tour img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .6s,transform 1.4s var(--ease)}
.tour:hover img{opacity:.7;transform:scale(1.02)}
.tour .start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px}
.tour .start p{margin:0;max-width:30em;color:rgba(245,245,245,.85);font-size:15px}
.tour iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.tour-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:14px;font-size:13px;color:var(--mute)}
.tour-foot a{color:var(--paper)}
.play{width:76px;height:76px;border-radius:50%;border:1px solid var(--paper);display:grid;place-items:center;background:rgba(0,0,0,.4);transition:background .3s,border-color .3s}
.tour .start:hover .play{background:var(--accent);border-color:var(--accent)}
.play svg{width:22px;height:22px;fill:var(--paper);margin-left:4px;transition:fill .3s}
.tour .start:hover .play svg{fill:var(--accent-ink)}
.tour button.start{all:unset;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;cursor:pointer}
.tour button.start:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
@media (max-width:640px){.tour{aspect-ratio:3/4;max-height:78svh}}

/* cta band */
.cta-band{padding-block:clamp(72px,10vw,140px);border-top:1px solid var(--line)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.cta-band h2{font-size:clamp(44px,7vw,110px)}
.cta-band p{color:var(--mute);margin:18px 0 0;max-width:32em}
:root[data-aud="events"] .cta-band{border-top:0;background:linear-gradient(180deg,rgba(255,41,41,.10),transparent 70%)}
:root[data-aud="events"] .cta-band::before{content:"";display:block;height:6px;background:var(--grad);margin-top:calc(-1 * clamp(72px,10vw,140px));margin-bottom:clamp(72px,10vw,140px)}

/* projects */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{font:500 14px/1 var(--sans);color:var(--paper);background:transparent;border:1px solid var(--line-2);padding:.65em 1.1em;border-radius:4px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 20px}
.pcard{display:flex;flex-direction:column;gap:14px;text-decoration:none;min-width:0}
.pcard .im{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--ink-2)}
.pcard .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pcard:hover .im img{transform:scale(1.04)}
.pcard .tag{position:absolute;top:12px;left:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:.45em .7em;background:rgba(0,0,0,.6);border:1px solid var(--line-2)}
.pcard .tag.events{border-color:var(--red)}
.pcard .tag.studio{border-color:var(--cyan)}
.pcard h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.pcard .meta{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--mute)}
.pcard .ph{font-size:12px;color:var(--mute);font-style:italic}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}

/* project detail */
.detail-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px 64px;align-items:end;margin-bottom:48px}
.detail-head h1{font-size:clamp(44px,7vw,104px)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0;font-size:15px;border-top:1px solid var(--line);padding-top:16px}
.facts dt{color:var(--mute)}
.facts dd{margin:0}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gallery figure{margin:0;overflow:hidden;background:var(--ink-2)}
.gallery figure:first-child{grid-column:1/-1}
.gallery img{width:100%;height:100%;object-fit:cover;max-height:80svh}
.pnote{margin-top:20px;padding:12px 14px;border-left:2px solid var(--accent);background:rgba(245,245,245,.04);font-size:14px;color:var(--mute)}
@media (max-width:820px){.detail-head{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}}

/* specs */
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.spec{padding:24px 24px 28px 0;border-bottom:1px solid var(--line);min-width:0}
.spec:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--line)}
.spec .v{font-size:clamp(30px,3.4vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.spec .v small{font-size:.45em;color:var(--mute);font-weight:400;letter-spacing:0;margin-left:4px}
.spec .l{margin-top:10px;font-size:14px;color:var(--mute)}
@media (max-width:820px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}.spec:not(:nth-child(3n+1)){padding-left:0;border-left:0}.spec:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 64px}
.faq-grid h3{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500;position:sticky;top:96px}
.faq-list{border-top:1px solid var(--line);margin-bottom:56px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-size:clamp(18px,1.8vw,22px);font-weight:500;letter-spacing:-.015em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--accent);font-weight:400;transition:transform .3s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq-list .a{padding:0 0 24px;color:rgba(245,245,245,.78);max-width:40em}
.faq-list .a p{margin:0}
@media (max-width:820px){.faq-grid{grid-template-columns:1fr}.faq-grid h3{position:static}}
.draft{display:inline-block;font-size:12px;color:var(--mute);border:1px dashed var(--line-2);padding:.4em .7em;margin-top:18px}

footer .cols{display:flex;flex-wrap:wrap;gap:12px 28px}
footer .cols a{text-decoration:none}
footer .cols a:hover{color:var(--paper)}
#hall .bal{stroke:var(--paper);stroke-opacity:.45;stroke-width:.05;stroke-dasharray:.3 .2}
#hall .field{fill:none;stroke:var(--accent);stroke-opacity:.55;stroke-width:.06;stroke-dasharray:.5 .25}
#hall .pwall{stroke:var(--accent);stroke-width:.32}
#hall .stairl{stroke:var(--paper);stroke-opacity:.5;stroke-width:.03}
#hall .dock{stroke:var(--paper);stroke-width:.35}
#hall .acct{fill:var(--accent)}

.logo img{display:block;width:100%;height:auto}
.badge{width:72px;height:72px;border-radius:50%;display:block;margin:0 0 20px}
:root[data-aud="events"] .page-hero .hero-img img{opacity:.5}

/* ================= HOMEPAGE: the projection hall at 1:1 =================
   One authored moment: the hero plate starts as the hall's plan in projector-cyan lines,
   then the photo is "switched on" behind a scan line. Everything else stays quiet. */
.tnum{font-variant-numeric:tabular-nums}
.wrap-wide{width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--gutter, clamp(16px,4vw,56px))}
.home .h-sec{padding-block:clamp(88px,12vw,180px);border-top:1px solid var(--line)}
.h-head{font-weight:500;letter-spacing:-.035em;line-height:.95;font-size:clamp(40px,6.2vw,96px);margin:0;max-width:14ch;text-wrap:balance}
.h-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.h-split p{margin:0;color:var(--mute);max-width:34em}

/* ---------- hero ---------- */
.h-hero{position:relative;min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(96px,12vh,140px)}
.h-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;flex:1}
.h-display{font-weight:500;letter-spacing:-.04em;line-height:.9;font-size:clamp(56px,9.4vw,152px);margin:0 0 clamp(24px,3vw,40px);text-wrap:balance}
.h-lede{font-size:clamp(17px,1.4vw,20px);color:rgba(245,245,245,.82);max-width:30em;margin:0 0 32px}
.h-hero-copy{padding-bottom:clamp(8px,2vw,24px)}
.h-plate{position:relative;margin:0;height:min(76svh,820px);min-height:420px;border:1px solid var(--line-2);overflow:hidden;background:#050707;color:var(--cyan)}
.h-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;clip-path:inset(0 0 0 0);transform:scale(1.04);transition:transform 2.6s var(--ease)}
.h-plate .h-blueprint{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.0}
.bp-l{fill:none;stroke:currentColor;stroke-width:.09;vector-effect:non-scaling-stroke}
.h-blueprint .bp-l{stroke-width:1.2}
.bp-floor{fill:rgba(0,255,240,.06)}
.bp-dim path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-dim text{fill:currentColor;font:500 .9px var(--sans);letter-spacing:.02em}
.h-plate figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;font-size:13px;color:rgba(245,245,245,.8);background:linear-gradient(0deg,rgba(5,7,7,.85),transparent)}
.h-plate figcaption b{color:var(--paper);font-weight:500}
/* the authored moment (JS adds .play; without JS or with reduced motion the photo just shows) */
.h-plate.play .h-blueprint{opacity:1;transition:opacity .8s ease 1.9s}
.h-plate.play .bp-l,.h-plate.play .bp-dim path{stroke-dasharray:240;stroke-dashoffset:240;animation:bpdraw 1.5s var(--ease) forwards}
.h-plate.play .bp-dim{opacity:0;animation:fadein .6s .9s forwards}
.h-plate.play img{clip-path:inset(0 100% 0 0);animation:switchon 1.4s 1.2s cubic-bezier(.7,0,.2,1) forwards}
.h-plate.play::after{content:"";position:absolute;top:0;bottom:0;width:2px;left:0;background:var(--cyan);box-shadow:0 0 0 1px rgba(0,255,240,.25);opacity:0;animation:scan 1.4s 1.2s cubic-bezier(.7,0,.2,1) forwards}
.h-plate.done .h-blueprint{opacity:.32}
.h-plate.done img{transform:scale(1)}
@keyframes bpdraw{to{stroke-dashoffset:0}}
@keyframes switchon{to{clip-path:inset(0 0 0 0)}}
@keyframes scan{0%{left:0;opacity:1}96%{opacity:1}100%{left:100%;opacity:0}}
@keyframes fadein{to{opacity:1}}
.h-logos{width:100%;display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding-block:22px 26px;margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.h-logos p{margin:0;font-size:13px;color:var(--mute);white-space:nowrap}
.h-logos ul{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(16px,3vw,40px);list-style:none;margin:0;padding:0}
.h-logos li.real{font-weight:700;font-size:22px;letter-spacing:-.03em;color:var(--paper)}
.h-logos li.ph{font-size:12px;color:var(--mute);border:1px dashed var(--line-2);padding:6px 12px}

/* ---------- two doors ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(40px,6vw,72px)}
.door{color:var(--paper);text-decoration:none;display:flex;flex-direction:column;gap:20px}
.door-img{display:block;aspect-ratio:4/5;overflow:hidden;background:#000}
.door-img img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .6s,transform 1.4s var(--ease)}
.door:hover .door-img img,.door:focus-visible .door-img img{opacity:1;transform:scale(1.03)}
.door-cap{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:baseline}
.door-cap b{font-weight:500;font-size:clamp(28px,3vw,44px);letter-spacing:-.035em;line-height:1}
.door-cap b.cond{font-family:var(--cond);font-weight:400;text-transform:uppercase;letter-spacing:.01em}
.door-cap>span{color:var(--mute);max-width:28em}
.door-cap .go{grid-column:2;color:var(--paper);font-weight:500}
.door .arr{display:inline-block;transition:transform .25s var(--ease)}
.door:hover .arr{transform:translateX(4px)}
.door:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* ---------- who it's for ---------- */
.who-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,5vw,80px);margin-top:clamp(40px,6vw,72px)}
.who-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.who-list a{display:flex;justify-content:space-between;align-items:center;padding:clamp(14px,1.6vw,22px) 0;border-bottom:1px solid var(--line-2);color:var(--paper);text-decoration:none;font-size:clamp(22px,2.6vw,38px);letter-spacing:-.025em;transition:color .25s,padding .35s var(--ease)}
.who-list a .arr{color:var(--mute);transition:transform .3s var(--ease),color .25s}
.who-list a:hover,.who-list a:focus-visible{color:var(--cyan);padding-left:10px}
.who-list a:hover .arr,.who-list a:focus-visible .arr{color:var(--cyan);transform:translateX(4px)}
.who-list a:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--cyan)}

/* ---------- showreel ---------- */
.h-reel .h-head{margin-bottom:clamp(40px,6vw,72px)}
.reel-stage{position:relative;aspect-ratio:21/9;overflow:hidden;background:#000;border:1px solid var(--line)}
.reel-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 6s linear}
.reel-stage img.on{opacity:.9;transform:scale(1)}
.reel-note{position:absolute;right:16px;top:14px;margin:0;font-size:12px;color:rgba(245,245,245,.75);background:rgba(13,17,16,.6);padding:4px 10px}
.reel-ex{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--line)}
.reel-ex button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t t" "f s" "p p";gap:12px 12px;align-items:center;padding:18px 18px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--mute);transition:color .3s}
.reel-ex button:hover,.reel-ex button[aria-selected="true"]{color:var(--paper)}
.reel-ex button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.reel-ex .t{grid-area:t;font-size:16px;font-weight:500}
.reel-ex .t .tnum{font-weight:400;color:var(--mute)}
.reel-ex .floor{grid-area:f;width:56px;height:28px;border:1px solid currentColor;position:relative;opacity:.8}
.reel-ex .floor i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--s)*100%);background:currentColor;opacity:.35}
.reel-ex button[aria-selected="true"] .floor{border-color:var(--cyan);opacity:1}
.reel-ex button[aria-selected="true"] .floor i{background:var(--cyan);opacity:.5}
.reel-ex .s{grid-area:s;font-size:13px}
.reel-ex .prog{grid-area:p;height:2px;background:var(--line);margin:0 -18px;position:relative;overflow:hidden}
.reel-ex .prog i{position:absolute;inset:0;background:var(--cyan);transform:scaleX(0);transform-origin:left}
.reel-ex button[aria-selected="true"] .prog i{animation:prog var(--dur,5s) linear forwards}
.reel.paused .reel-ex button[aria-selected="true"] .prog i{animation:none;transform:scaleX(1)}
@keyframes prog{to{transform:scaleX(1)}}

/* ---------- tour + specs ---------- */
.h-tour .tour .start .t{font-size:clamp(26px,3.2vw,44px);font-weight:500;letter-spacing:-.03em}
.specs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);margin-top:clamp(28px,4vw,48px)}
.spec-cell{display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(150px,16vw,220px);padding:18px clamp(14px,1.6vw,24px) 20px;border-right:1px solid var(--line)}
.spec-cell:first-child{padding-left:0}
.spec-cell:last-child{border-right:0}
.spec-cell b{font-size:clamp(40px,5vw,76px);font-weight:500;letter-spacing:-.04em;line-height:1;margin-top:22px}
.spec-cell>span:last-child{font-size:14px;color:var(--mute);margin-top:14px}
.spec-cell .rule{display:block;height:9px;border-left:1px solid var(--cyan);border-right:1px solid var(--cyan);position:relative;transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease)}
.spec-cell .rule::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--cyan)}
.specs-grid.in .rule{transform:scaleX(1)}
.specs-grid.in .spec-cell:nth-child(2) .rule{transition-delay:.12s}
.specs-grid.in .spec-cell:nth-child(3) .rule{transition-delay:.24s}
.specs-grid.in .spec-cell:nth-child(4) .rule{transition-delay:.36s}

/* ---------- spotlight: hover list ---------- */
.h-spot{position:relative}
.spot-list{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;border-top:1px solid var(--line-2)}
.spot-list a{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr) auto;gap:24px;align-items:baseline;padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--line-2);color:var(--paper);text-decoration:none;transition:color .3s,opacity .3s}
.spot-list .thumb{display:none}
.spot-list .who{font-size:15px;color:var(--mute)}
.spot-list .what{font-size:clamp(30px,4.6vw,72px);font-weight:500;letter-spacing:-.04em;line-height:1}
.spot-list .meta{font-size:14px;color:var(--mute);white-space:nowrap}
.spot-list:hover a{opacity:.35}
.spot-list a:hover,.spot-list a:focus-visible{opacity:1;color:var(--cyan)}
.spot-list a:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--cyan)}
.spot-float{position:fixed;left:0;top:0;width:clamp(240px,24vw,380px);aspect-ratio:4/5;object-fit:cover;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .3s,transform .5s var(--ease)}
.spot-float.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.spot-more{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:28px}
.spot-more a,.where a{color:var(--paper);font-weight:500;text-decoration:none;border-bottom:1px solid var(--cyan);padding-bottom:2px}
.spot-more a:hover,.where a:hover{color:var(--cyan)}

/* ---------- visit: three stages ---------- */
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.stages li{padding:24px clamp(16px,2vw,32px) 8px;border-right:1px solid var(--line)}
.stages li:first-child{padding-left:0}
.stages li:last-child{border-right:0}
.stages .n{display:block;font-size:14px;color:var(--cyan)}
.stages h3{font-size:clamp(30px,3.6vw,52px);font-weight:500;letter-spacing:-.035em;line-height:1;margin:10px 0 28px}
.stages dl{margin:0;display:grid;gap:4px}
.stages dt{font-size:13px;color:var(--mute);margin-top:12px}
.stages dd{margin:0;max-width:24em}
.where{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid var(--line)}
.where .k{font-size:13px;color:var(--mute)}
.where p{margin:6px 0 0;font-size:18px}
.where p.ph{font-size:14px;color:var(--mute);border:1px dashed var(--line-2);display:inline-block;padding:4px 10px;margin-top:10px}

/* ---------- CTA ---------- */
.h-cta{position:relative;overflow:hidden;padding-block:clamp(120px,15vw,230px);isolation:isolate;text-align:center}
.h-cta-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.5}
.h-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 50%,rgba(13,17,16,.35),rgba(13,17,16,.85))}
.h-cta h2{font-weight:500;letter-spacing:-.05em;line-height:.95;font-size:clamp(44px,6.4vw,104px);margin:0 0 clamp(28px,3vw,44px);text-wrap:balance}
.btn.line{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.btn.line:hover,.btn.line:focus-visible{background:var(--cyan);border-color:var(--cyan);color:#000}
.h-cta-form{max-width:760px;margin:0 auto;text-align:left;padding:clamp(24px,3vw,40px);background:rgba(13,17,16,.72);border:1px solid var(--line-2);border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pj-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.pj-card{grid-column:span 7}.pj-card:nth-child(2),.pj-card:nth-child(3){grid-column:span 5}
.pj-card{position:relative;display:block;overflow:hidden;border-radius:4px;background:#000;color:var(--paper);text-decoration:none;aspect-ratio:auto;height:clamp(300px,30vw,460px)}
.pj-card figure{position:absolute;inset:0;margin:0}
.pj-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease),opacity .5s;opacity:.85}
.pj-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.82))}
.pj-card:hover img{transform:scale(1.04);opacity:1}
.pj-cap{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:clamp(18px,2vw,28px);text-align:left}
.pj-tag{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:.45em .75em;border-radius:4px;background:rgba(13,17,16,.7);border:1px solid var(--line-2);margin-bottom:12px}
.pj-cap h3{margin:0;font-size:clamp(20px,1.9vw,28px);font-weight:500;letter-spacing:-.025em}
.pj-cap h3 .arr{display:inline-block;color:var(--mute);transition:transform .3s var(--ease),color .3s}
.pj-card:hover h3 .arr{color:var(--paper);transform:translateX(4px)}
.pj-cap p{margin:6px 0 0;color:var(--mute);font-size:15px}
.pj-card:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
@media (max-width:760px){
  .pj-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .pj-grid::-webkit-scrollbar{display:none}
  .pj-card{flex:0 0 78%;height:min(105vw,440px);scroll-snap-align:start;scroll-margin-left:16px}
}
.t3d img{opacity:.92;object-position:50% 40%}
.t3d:hover img{opacity:1}
.t3d::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent 30%,transparent 55%,rgba(0,0,0,.85))}
.tour.t3d button.start{all:unset;box-sizing:border-box;position:absolute;inset:0;z-index:1;display:grid;place-items:center;cursor:pointer;--pad:clamp(16px,2.2vw,28px)}
.t3d-top{position:absolute;top:var(--pad);left:var(--pad);right:var(--pad);display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap}
.t3d-badge{font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:.5em .8em;border-radius:4px;background:rgba(13,17,16,.75);border:1px solid var(--line-2);color:var(--paper)}
.t3d-hint{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--paper);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.t3d-hint svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.t3d-cta{font-size:17px;padding:1em 1.5em;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.t3d .start:hover .t3d-cta .arr{transform:translateX(4px)}
.t3d .start:focus-visible{outline:2px solid var(--paper);outline-offset:-6px}
.t3d-stops{position:absolute;bottom:var(--pad);left:var(--pad);right:var(--pad);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.t3d-stops b{font-weight:500;font-size:13px;color:var(--paper);margin-right:4px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.t3d-stops span{font-size:13px;padding:.5em .9em;border-radius:999px;background:rgba(13,17,16,.75);border:1px solid var(--line-2);color:var(--paper)}
.t3d-stops span:first-of-type{background:var(--cyan);border-color:var(--cyan);color:#000}
@media (max-width:760px){.t3d{aspect-ratio:4/5}.t3d img{object-position:42% 50%}.t3d-stops span:nth-of-type(n+4){display:none}.t3d-hint{font-size:13px}}
.pj-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line-2)}
.pj-stat{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,34px) clamp(14px,1.6vw,24px) 0;border-right:1px solid var(--line)}
.pj-stat:first-child{padding-left:0}.pj-stat:last-child{border-right:0}
.pj-stat b{font-size:clamp(48px,6vw,96px);font-weight:500;letter-spacing:-.045em;line-height:1}
.pj-stat b span{display:inline-block;min-width:1.2ch}
.pj-stat>span{font-size:15px;color:var(--mute);max-width:16em}
.pj-note{margin:18px 0 0;font-size:12px;color:var(--mute)}
@media (max-width:760px){.pj-stats{grid-template-columns:1fr}.pj-stat{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}.pj-stat:last-child{border-bottom:0}}
.hx-list li{padding:12px 0;border-bottom:1px solid var(--line-2);color:var(--paper);font-size:clamp(18px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;cursor:default;transition:opacity .3s,transform .35s var(--ease)}
.hx.dz .hx-list li:not(.in){opacity:.12;transform:translateY(6px)}
.hx.dz .hx-board path{stroke-dashoffset:0}
.hx.dz .hx-board path.f{fill-opacity:1}
.hx.dz .hx-board g[data-u]{transform-box:view-box;transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .25s}
.hx.dz .hx-board g[data-u]:not(.in){transform:translateY(-90px);opacity:0}


.pj-floor{position:relative;margin-top:clamp(8px,1vw,16px)}
.pj-floor+.pj-note{margin:14px 0 clamp(48px,6vw,88px)}
.pj-floor .pj-stats{margin-top:0;border:1px solid rgba(0,255,240,.25);background:linear-gradient(rgba(0,255,240,.05) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(0,255,240,.05) 1px,transparent 1px) 0 0/48px 48px,radial-gradient(ellipse at 50% 40%,rgba(0,255,240,.06),transparent 70%);}
.pj-floor .pj-stat,.pj-floor .pj-stat:first-child{align-items:center;text-align:center;padding:clamp(28px,4vw,56px) clamp(14px,2vw,28px);border-right:1px solid rgba(0,255,240,.15)}
.pj-floor .pj-stat:last-child{border-right:0}
.pj-floor .pj-stat b{color:var(--cyan);font-size:clamp(56px,8vw,136px);text-shadow:0 0 6px rgba(0,255,240,.06)}
.pj-floor .pj-stat>span{color:var(--paper);opacity:.8}
@media (max-width:760px){.pj-floor .pj-stat,.pj-floor .pj-stat:first-child{border-right:0;border-bottom:1px solid rgba(0,255,240,.15);padding:24px 16px}.pj-floor .pj-stat:last-child{border-bottom:0}}
.pj-cells{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(4,1fr);pointer-events:none;overflow:hidden}
.pj-cells span{background:rgba(0,255,240,0)}
.pj-floor .pj-stats{position:relative;z-index:1}
.pj-floor.wv .pj-stat>*{opacity:0;transition:opacity .3s}
.pj-floor.wv.on .pj-cells span{animation:pjcell .7s ease var(--d) forwards}
.pj-floor.wv.on .pj-stat>*{opacity:1}
.pj-floor.wv.on .pj-stat:nth-child(2)>*{transition-delay:.15s}
.pj-floor.wv.on .pj-stat:nth-child(3)>*{transition-delay:.35s}
@keyframes pjcell{35%{background:rgba(0,255,240,.12)}100%{background:rgba(0,255,240,0)}}
/* Contact: form on the left, client quotes full bleed on the right; the quote follows the role picked */
.h-book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(100vh,960px);border-top:1px solid var(--line);background:var(--ink)}
.bk-l{display:flex;flex-direction:column;justify-content:center;padding:clamp(72px,9vw,140px) clamp(24px,4vw,72px)}
.bk-l h2{font-weight:500;letter-spacing:-.05em;line-height:.95;font-size:clamp(52px,6.4vw,112px);margin:0 0 clamp(32px,3.4vw,56px);text-wrap:balance}
.bk-l h2{text-transform:uppercase;letter-spacing:-.035em}
.h-book .f>label,.h-book .f>legend{padding:0;font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(245,245,245,.92)}
.h-book .f input::placeholder,.h-book .f textarea::placeholder{color:#7d8280}
.h-book .f textarea{min-height:148px;padding:14px 16px;margin-top:4px;border:1px solid var(--line-2);border-radius:4px;background:rgba(255,255,255,.03);line-height:1.5;resize:vertical}
.h-book .f textarea:hover{border-color:rgba(245,245,245,.35)}
.h-book .f textarea:focus{border-color:var(--accent);background:rgba(255,255,255,.05)}
.h-book .h-cta-form{max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.bk-r{position:relative;overflow:hidden;display:flex;align-items:flex-end;background:#000;min-height:520px}
.bk-r>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s var(--ease),transform 6s linear}
.bk-r>img.on{opacity:.62;transform:none}
.bk-r::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 35%,rgba(0,0,0,.9));pointer-events:none}
.bk-in{position:relative;z-index:1;width:100%;padding:clamp(28px,4vw,72px) clamp(24px,4vw,72px) clamp(36px,4.4vw,72px)}
.bk-from{margin:0 0 18px;color:var(--mute);font-size:15px}
.bk-from span{color:var(--cyan)}
.bk-qs{display:grid}
.bk-q{grid-area:1/1;margin:0;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .7s var(--ease);pointer-events:none}
.bk-q.on{opacity:1;transform:none;pointer-events:auto}
.bk-q blockquote{margin:0}
.bk-q p{margin:0;font-size:clamp(30px,3vw,52px);font-weight:500;letter-spacing:-.04em;line-height:1.04;max-width:18ch;text-wrap:balance}
.bk-q figcaption{margin-top:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:2px;font-size:15px}
.bk-q figcaption b{font-weight:500}.bk-q figcaption span{color:var(--mute)}
.bk-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:clamp(28px,3vw,44px)}
.bk-bar i{position:relative;height:1px;background:var(--line-2)}
.bk-bar i::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:calc(var(--t,0) * 100%);background:var(--cyan)}
.bk-r.picked .bk-bar{visibility:hidden}
@media (max-width:860px){
  .h-book{grid-template-columns:1fr;min-height:0}
  .bk-l{padding:clamp(64px,14vw,96px) 16px 48px}
  .bk-r{min-height:min(120vw,560px)}
  .bk-in{padding:28px 16px 36px}
}
@media (min-width:1700px){.bk-l h2{font-size:clamp(112px,5.4vw,148px)}.bk-q p{font-size:clamp(52px,2.6vw,68px)}}
@media (prefers-reduced-motion:reduce){.bk-r>img,.bk-q{transition:none}}
/* hero headline in capitals */
.lk-h{text-transform:uppercase;letter-spacing:-.035em}
footer.f2 .f-logo{display:block;width:min(100%,520px);height:auto;margin:0 0 clamp(24px,3vw,40px)}
/* Footer as the logo: panel with the logo's roof (slope 0.4917, wall starts at 34.4% of height) and the exact logotype */
footer.f2.f-house{border-top:0;--rise:clamp(72px,11vw,170px)}
.f-panel{background:#161b1a;clip-path:polygon(0 var(--rise),calc(var(--rise) / .4917) 0,100% 0,100% 100%,0 100%);padding-top:calc(var(--rise) + 8px);margin-top:clamp(24px,3vw,48px)}
footer.f2 .f-panel .f-top{padding-top:0}
footer.f2 .f-lt{display:block;width:100%;height:auto;padding-bottom:clamp(28px,3.4vw,56px)}
@media (prefers-reduced-motion:reduce){.h-cta-v{display:none}}


/* ---------- footer (site-wide) ---------- */
footer.f2{border-top:1px solid var(--line);padding:0;overflow:hidden;font-size:14px;color:var(--mute)}
footer.f2 .f-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:24px;padding-block:48px 56px}
footer.f2 .f-top h4{margin:0 0 12px;font-size:13px;font-weight:400;color:var(--mute)}
footer.f2 .f-top a{display:block;color:var(--paper);text-decoration:none;padding:3px 0}
footer.f2 .f-top a:hover{color:var(--accent)}
footer.f2 .f-top p{margin:0;color:var(--paper)}
footer.f2 .f-top a.f-tl{display:inline-flex;gap:.4em;margin-top:12px;padding:0 0 2px;border-bottom:1px solid currentColor;color:var(--cyan)}
footer.f2 .f-top a.f-tl:hover{color:var(--paper)}
footer.f2 .f-tl .arr{transition:transform .25s var(--ease)}footer.f2 .f-tl:hover .arr{transform:translateX(3px)}
footer.f2 .f-word{font-weight:500;letter-spacing:-.055em;line-height:.9;font-size:clamp(40px,14.6vw,260px);color:var(--paper);margin:0 0 clamp(16px,2vw,28px);white-space:nowrap}
footer.f2 .f-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:16px;border-top:1px solid var(--line)}


::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--ink)}::-webkit-scrollbar-thumb{background:#2a302e;border:2px solid var(--ink)}
html{scrollbar-color:#2a302e var(--ink)}


/* ================= v3: full-bleed and louder ================= */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* intro: lines rise, blueprint draws, the image switches on (no loader) */
@keyframes rise{to{transform:none}}
@keyframes bpfade{to{opacity:.18}}
@keyframes grow{to{transform:scaleX(1)}}
/* marquee */
.x-marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(14px,2vw,26px);white-space:nowrap}
.x-track{display:inline-flex;align-items:center;gap:clamp(20px,3vw,48px);animation:marq 38s linear infinite;padding-right:clamp(20px,3vw,48px)}
.x-marquee.rev .x-track{animation-direction:reverse;animation-duration:46s}
.x-track span{font-weight:500;letter-spacing:-.04em;font-size:clamp(48px,8vw,128px);line-height:1}
.x-track span.o{color:transparent;-webkit-text-stroke:1px rgba(245,245,245,.6)}
.x-track i{width:clamp(14px,1.6vw,22px);height:clamp(14px,1.6vw,22px);border:1px solid var(--cyan);border-radius:50%;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
/* full-bleed showreel */
.x-reel{border-top:0}
.x-reel .reel-stage{aspect-ratio:auto;height:min(100svh,960px);min-height:560px;border:0}
.x-reel .reel-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,17,16,.75),rgba(13,17,16,0) 35%,rgba(13,17,16,0) 60%,rgba(13,17,16,.9));pointer-events:none}
.reel-h{position:absolute;z-index:2;left:var(--gutter,clamp(16px,4vw,56px));top:clamp(32px,6vw,80px);margin:0;font-weight:500;letter-spacing:-.045em;line-height:.88;font-size:clamp(56px,10vw,176px)}
.x-reel .reel-note{z-index:2}
.x-reel .reel-ex{position:relative;z-index:3;margin-top:-1px;border-left:0;background:rgba(13,17,16,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (min-width:761px){.x-reel .reel-ex{position:absolute;left:0;right:0;bottom:0}.x-reel .reel{position:relative}}
.x-reel .reel-ex button{border-bottom:0}
.x-reel .reel-ex .t{font-size:clamp(16px,1.4vw,20px)}
/* bigger specs */
.spec-cell b{font-size:clamp(44px,5.2vw,88px);white-space:nowrap}

@media (max-width:980px){
  .h-hero-grid{grid-template-columns:1fr}
  .h-plate{height:min(56svh,520px);min-height:320px}
  .reel-ex{grid-template-columns:repeat(2,minmax(0,1fr))}
  .specs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-cell:nth-child(2){border-right:0}
  .spec-cell:nth-child(3){padding-left:0}
  .spec-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  .h-split,.doors,.who-cols,.stages,.where{grid-template-columns:1fr}
  .who-list+.who-list{border-top:0}
  .reel-stage{aspect-ratio:4/3}
  .reel-ex{grid-template-columns:1fr}
  .reel-ex button{grid-template-columns:auto 1fr auto;grid-template-areas:"f t s" "p p p";padding:14px 16px 0}
  .reel-ex .prog{margin:0 -16px}
  .reel-ex .floor{width:40px;height:20px}
  .reel-note{left:12px;right:auto;top:10px;font-size:11px}
  .stages li{padding:22px 0 18px;border-right:0;border-bottom:1px solid var(--line)}
  .spot-list a{grid-template-columns:96px 1fr;grid-template-areas:"img who" "img what" "img meta";gap:4px 16px;align-items:start}
  .spot-list .thumb{display:block;grid-area:img;width:96px;height:120px;object-fit:cover}
  .spot-list .who{grid-area:who}.spot-list .what{grid-area:what;font-size:28px}.spot-list .meta{grid-area:meta}
  .spot-float{display:none}
  .h-logos{flex-direction:column;align-items:flex-start;gap:12px}
  .x-reel .reel-stage{height:min(72svh,600px);min-height:420px}
  footer.f2 .f-top{grid-template-columns:1fr 1fr}
  .door-cap{grid-template-columns:1fr}.door-cap .go{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .x-track{animation:none}
  .h-plate.play img,.h-plate.play::after,.h-plate.play .bp-l,.h-plate.play .bp-dim{animation:none!important;clip-path:none}
  .reel-stage img{transition:opacity .3s}
  .spec-cell .rule{transform:none;transition:none}
}


/* v4 hero: look around the hall, one headline, the last word swept on */
.lk-hero{position:relative;min-height:min(100svh,1080px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;--beam:var(--cyan)}
.lk-scene{position:absolute;inset:0;z-index:-1;perspective:1100px;overflow:hidden;background:#000}
.lk-cam{position:absolute;inset:-9%;transform:translate3d(var(--tx,0),var(--ty,0),0) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));will-change:transform}
.lk-cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7) saturate(.9);opacity:0;transition:opacity 1s var(--ease)}
.lk-cam img.on{opacity:1}
.lk-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 22%),linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.75) 34%,rgba(0,0,0,0) 64%),linear-gradient(90deg,rgba(0,0,0,.55) 0%,transparent 55%)}
.lk-in{position:relative;width:100%;padding-top:140px;transform:translate3d(var(--hx,0),var(--hy,0),0)}
.lk-h{font-weight:500;letter-spacing:-.045em;line-height:.92;font-size:clamp(52px,9vw,150px);margin:0 0 -.05em;text-wrap:balance}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lk-w{position:relative;display:inline-block;white-space:nowrap;color:var(--beam)}
.lk-w .wire{color:transparent;-webkit-text-stroke:1px var(--beam)}
.lk-w .solid{position:absolute;inset:0;clip-path:inset(-.2em 0 -.2em 0)}
.lk-w .bar{position:absolute;top:-.1em;bottom:-.1em;width:2px;left:0;background:var(--paper);box-shadow:0 0 8px 1px color-mix(in srgb,var(--beam) 70%,transparent);opacity:0;pointer-events:none}
.lk-w.go .solid{clip-path:inset(-.2em 100% -.2em 0);animation:lkrev 1s var(--ease) .25s forwards}
.lk-w.go .bar{animation:lkbar 1s var(--ease) .25s forwards}
.lk-w.out{animation:lkout .28s var(--ease) forwards}
@keyframes lkrev{to{clip-path:inset(-.2em 0 -.2em 0)}}
@keyframes lkbar{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes lkout{to{opacity:0;filter:blur(6px);transform:translateY(-.12em)}}
.lk-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px}
.lk-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.lk-copy .h-lede{margin:0;max-width:34em;color:var(--paper)}
.lk-ways{margin:0;display:flex;gap:24px;font-weight:500}
.lk-ways a{text-decoration:none;border-bottom:1px solid rgba(245,245,245,.35);padding-bottom:2px}
.lk-ways a:hover{border-color:var(--paper)}
.lk-hero .h-logos{width:100%;border-top-color:rgba(245,245,245,.18)}
@media (max-width:640px){.lk-h{font-size:clamp(44px,13vw,64px)}.lk-in{padding-top:110px}}
@media (prefers-reduced-motion:reduce){.lk-w .solid{clip-path:none!important;animation:none!important}.lk-w .bar{display:none}}


/* one hall, two ways: the hall as an axonometric drawing; floor = Studio, wall = Event Space */
.ax{--w:min(38vw,500px);--h:calc(var(--w) * .5);--d:calc(var(--w) * .9);--px:0;--py:0;--s:0;--yaw:-40deg}
.ax[data-k="st"]{--yaw:-30deg}.ax[data-k="ev"]{--yaw:-48deg}
.ax-stage{height:calc(var(--w) * 1.05);perspective:5000px;perspective-origin:50% 25%;display:grid;place-items:center}
.ax-box{position:relative;width:0;height:0;transform-style:preserve-3d;transform:rotateX(calc(-32deg - var(--py) * 6deg)) rotateY(calc(var(--yaw) + var(--px) * 16deg + var(--s) * 10deg));transition:transform 1s var(--ease)}
.ax.live .ax-box{transition:transform .2s linear}
.ax-pl{position:absolute;left:0;top:0;overflow:hidden;background:#0a0d0c;border:1px solid rgba(245,245,245,.5);transition:border-color .5s}
.ax-pl img,.ax-pl svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55) contrast(1.2);transition:filter .6s}
.ax-pl svg *{fill:none;stroke:rgba(245,245,245,.6);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:stroke .4s}
.ax-back{width:var(--w);height:var(--h);transform:translate(-50%,-50%) translateZ(calc(var(--d) / -2))}
.ax-floor{width:var(--w);height:var(--d);transform:translate(-50%,-50%) translateY(calc(var(--h) / 2)) rotateX(90deg)}
.ax-left{width:var(--d);height:var(--h);transform:translate(-50%,-50%) translateX(calc(var(--w) / -2)) rotateY(90deg)}
.ax-mk{position:absolute;width:28px;height:28px;border:1px solid var(--paper);border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--ink);transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.ax-floor .ax-mk{left:50%;top:55%}
.ax-back .ax-mk{left:46%;top:40%}
.ax[data-k="st"] .ax-floor{border-color:var(--cyan)}
.ax[data-k="st"] .ax-floor svg *{stroke:var(--cyan)}
.ax[data-k="st"] .ax-floor .ax-mk{background:var(--cyan);border-color:var(--cyan);color:#000;transform:scale(1.25)}
.ax[data-k="ev"] .ax-back{border-color:var(--red)}
.ax[data-k="ev"] .ax-back img{filter:none}
.ax[data-k="ev"] .ax-back .ax-mk{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.25)}
.ax-dim{position:absolute;left:0;right:0;bottom:-30px;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.ax-dim::before,.ax-dim::after{content:"";flex:1;height:1px;background:var(--line-2)}
.ax-list{margin-top:clamp(20px,3vw,32px)}
.ax-list a{display:grid;grid-template-columns:36px 1fr auto;gap:4px 10px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line-2);color:var(--paper);text-decoration:none}
.ax-list a:last-child{border-bottom:1px solid var(--line-2)}
.ax-list .n{font-size:12px;color:var(--mute);transition:color .3s}
.ax-list b{font-size:clamp(26px,2.8vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1}
.ax-list p{grid-column:2/-1;margin:4px 0 0;font-size:14px;color:var(--mute)}
.ax-list .go{font-size:14px;font-weight:500;transition:color .3s,transform .25s var(--ease)}
.ax-list a.st.on .n,.ax-list a.st.on .go{color:var(--cyan)}
.ax-list a.ev.on .n,.ax-list a.ev.on .go{color:var(--cyan)}
.ax-list a:hover .go{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.ax-box,.ax-pl,.ax-mk{transition:none!important}}

/* the hall drawing stays put on the left while two sections scroll past on the right; between them the walls fold flat and the room becomes a model board */
.hx{--t:0;border-top:1px solid var(--line)}
.hx-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
.hx-art{position:relative}
.hx-sticky{position:sticky;top:calc(50vh - var(--w) * .5 + 20px);height:calc(var(--w) * 1.05);display:grid;place-items:center}
.hx-room,.hx-board{grid-area:1/1}
/* Size the drawing from its own column so it never runs into the text */
@media (min-width:821px){.hx-art{container-type:inline-size;padding-top:clamp(64px,7vw,110px)}.hx-sticky{--w:min(calc(100cqw / 1.55), 560px)}}
.hx-step{min-height:min(100vh,900px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(64px,10vw,140px)}
.hx{--q:clamp(0, calc(1 - var(--t) * 3), 1)}
.hx .ax-stage{perspective:calc(var(--w) * 10);perspective-origin:50% 50%}
.hx .ax-box{transform:rotateX(calc(-32deg - var(--py) * 6deg * var(--q))) rotateY(calc(-40deg + (var(--yaw) + 40deg + var(--px) * 16deg) * var(--q)));transition:transform .5s var(--ease)}
.hx .ax-back,.hx .ax-left,.hx .ax-mk,.hx .ax-dim,.hx .ax-floor svg{opacity:var(--q);transition:none}
.hx-board{position:relative;z-index:1;width:calc(var(--w) * 1.52);height:auto;overflow:visible;pointer-events:none;opacity:clamp(0, (var(--t) - .25) * 8, 1)}
.hx-board g[data-u="plate"]{display:none}
.hx-board path{fill:none;stroke:rgba(245,245,245,.6);stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, (var(--t) - .3 - var(--i) * .04) * 3.2, 1));transition:stroke .35s}
.hx-board path.f{fill:var(--ink);fill-opacity:clamp(0, (var(--t) - .45 - var(--i) * .04) * 4, 1)}
.hx-board g{--i:0}
.hx[data-c="st"] .hx-board g.on path{stroke:var(--cyan)}
.hx[data-c="ev"] .hx-board g.on path{stroke:var(--red)}
.hx-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:clamp(28px,4vw,48px)}
.hx-k{margin:0 0 8px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.hx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.hx-list a{display:block;padding:12px 0;border-bottom:1px solid var(--line-2);color:#7d827f;text-decoration:none;font-size:clamp(18px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;transition:color .3s}
.hx-list a.on,.hx-list a:focus-visible{color:var(--paper);outline:none}
.hx[data-c="st"] .hx-list a.on{box-shadow:inset 2px 0 0 var(--cyan);padding-left:12px}
.hx[data-c="ev"] .hx-list a.on{box-shadow:inset 2px 0 0 var(--red);padding-left:12px}
.hx-list a{transition:color .3s,padding .35s var(--ease)}
@media (max-width:820px){
  .hx{--w:58vw}
  .hx-grid{grid-template-columns:1fr;gap:0}
  .hx-art{position:sticky;top:68px;z-index:2;background:var(--ink);border-bottom:1px solid var(--line)}
  .hx-sticky{position:relative;top:0;height:calc(var(--w) * 1.18)}
  .hx-step{min-height:auto;padding-block:48px 72px}
}
@media (prefers-reduced-motion:reduce){.hx-board path{stroke-dashoffset:0}.hx .ax-box{transition:none}}

/* ---------- showreel, after Samara's "Five sizes. Tons of possibility.": centred headline, one panel, centred carousel, specs underneath ---------- */
.sz-h{margin:0 auto clamp(28px,4vw,48px);text-align:center;font-weight:500;letter-spacing:-.04em;line-height:1;font-size:clamp(36px,5.4vw,80px);text-wrap:balance}
.sz-h span{color:var(--mute)}
.sz-panel{--sw:min(66%,880px);--gap:clamp(12px,1.6vw,24px);position:relative;border:1px solid var(--line);background:#111615;padding:clamp(28px,4vw,48px) 0 clamp(32px,4vw,48px);overflow:hidden;text-align:center}
.sz-names,.sz-specs{display:grid}
.sz-name,.sz-spec{grid-area:1/1;opacity:0;transition:opacity .45s;visibility:hidden}
.sz-name.on,.sz-spec.on{opacity:1;visibility:visible}
.sz-name h3{margin:0;font-size:clamp(22px,2.2vw,32px);font-weight:500;letter-spacing:-.025em}
.sz-name p{margin:6px 0 0;color:var(--mute);font-size:15px}
.sz-car{position:relative;margin-top:clamp(22px,3vw,36px);aspect-ratio:16/7;max-height:520px}
.sz-track{position:absolute;inset:0}
.sz-slide{position:absolute;top:0;bottom:0;left:calc((100% - var(--sw)) / 2);width:var(--sw);margin:0;overflow:hidden;background:#000;transform:translateX(calc(var(--d,0) * (100% + var(--gap))));transition:transform .7s var(--ease),opacity .7s;opacity:.35;cursor:pointer}
.sz-slide.on{opacity:1;cursor:default}
.sz-slide[data-d="-2"],.sz-slide[data-d="2"]{opacity:0}
.sz-slide img{width:100%;height:100%;object-fit:cover;display:block}
.sz-arr{all:unset;box-sizing:border-box;position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;background:rgba(13,17,16,.7);color:var(--paper);cursor:pointer;transition:border-color .2s,background .2s}
.sz-arr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.sz-arr.prev{left:calc((100% - var(--sw)) / 2 - 24px)}
.sz-arr.next{right:calc((100% - var(--sw)) / 2 - 24px)}
.sz-arr:hover{border-color:var(--paper);background:var(--ink)}
.sz-arr:focus-visible,.sz-specs{margin-top:clamp(22px,3vw,32px)}
.sz-spec{margin:0;display:flex;justify-content:center;flex-wrap:wrap;font-size:16px}
.sz-spec span+span{border-left:1px solid var(--line-2);margin-left:14px;padding-left:14px}
.sz-floor{width:min(420px,70%);height:2px;margin:18px auto 0;background:rgba(245,245,245,.14);position:relative}
.sz-floor i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--s,.36) * 100%);background:var(--cyan);transition:width .7s var(--ease)}
@media (max-width:760px){
  .sz-panel{--sw:80%;--gap:10px}
  .sz-car{aspect-ratio:4/5;max-height:none}
  .sz-arr{width:40px;height:40px;margin-top:-20px}
  .sz-arr.prev{left:calc((100% - var(--sw)) / 2 + 8px)}
  .sz-arr.next{right:calc((100% - var(--sw)) / 2 + 8px)}
  .sz-spec{font-size:14px}
  .sz-spec span+span{margin-left:10px;padding-left:10px}
  }
@media (prefers-reduced-motion:reduce){.sz-slide,.sz-name,.sz-spec,.sz-floor i{transition:none}}

/* hero 01b: the hall in lines */
.lk-scene .gl{position:absolute;inset:0}
.lk-scene .gl canvas{display:block;width:100%!important;height:100%!important}
.lk-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5)}
.lk-hero.is3d .lk-still{display:none}
.lk-hero.is3d .lk-scene{background:#050706}
.lk-hero.is3d .lk-scene::after{background:linear-gradient(180deg,rgba(5,7,6,.6) 0%,transparent 22%),linear-gradient(0deg,rgba(5,7,6,.94) 0%,rgba(5,7,6,.7) 30%,rgba(5,7,6,0) 58%)}
.lk-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.lk-chip i{width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.lk-acc{color:var(--cyan)}
@media (max-width:640px){.lk-hero.is3d .lk-scene::after{background:linear-gradient(180deg,rgba(5,7,6,.6) 0%,transparent 18%),linear-gradient(0deg,rgba(5,7,6,.97) 0%,rgba(5,7,6,.85) 48%,rgba(5,7,6,0) 72%)}}
/* Recently in the hall, merged into the carousel */
.sz-name h3 a{color:inherit;text-decoration:none}
.sz-name h3 a .arr{color:var(--mute);transition:transform .3s var(--ease),color .3s}
.sz-name h3 a:hover .arr{color:var(--paper);transform:translateX(4px)}
.sz-more{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(20px,3vw,32px)}

/* Set up for anything: no frame, closer to Samara's "Five sizes" */
.sz-panel{--sw:min(64vw,1040px);border:0;background:none;padding:0;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden}
.sz-car{aspect-ratio:auto;height:clamp(300px,36vw,560px);max-height:none}
.sz-slide{opacity:.9}
.sz-slide.on{opacity:1}
.sz-arr.prev{left:calc((100% - var(--sw)) / 2 + 20px)}
.sz-arr.next{right:calc((100% - var(--sw)) / 2 + 20px)}
.sz-chips{display:flex;justify-content:center;gap:10px;margin-top:clamp(20px,2.6vw,28px)}
.sz-chip{all:unset;box-sizing:border-box;width:36px;height:36px;border-radius:50%;padding:3px;border:1.5px solid transparent;cursor:pointer;transition:border-color .2s}
.sz-chip img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.sz-chip[aria-pressed=true]{border-color:var(--paper)}
.sz-chip:hover{border-color:var(--line-2)}
.sz-chip:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.sz-specs{margin-top:clamp(16px,2vw,22px)}
.sz-cards{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px);padding-inline:16px}
.sz-card{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:220px;padding:14px 18px;border-radius:10px;background:#161c1b;text-align:left;text-decoration:none;font-size:14px;transition:background .2s}
.sz-card span{color:var(--mute)}
.sz-card b{font-weight:500;color:var(--paper)}
.sz-card:hover{background:#1d2423}
.sz-card-img{flex-direction:row;align-items:center;gap:14px}
.sz-card-img img{width:48px;height:48px;border-radius:6px;object-fit:cover}
@media (max-width:760px){.sz-panel{--sw:84vw}.sz-car{height:min(110vw,520px)}.sz-arr.prev{left:calc((100% - var(--sw)) / 2 + 8px)}.sz-arr.next{right:calc((100% - var(--sw)) / 2 + 8px)}.sz-card{flex:1 1 100%}}

/* Set up for anything: tilted reel depth */
.sz-track{perspective:1400px;transform-style:preserve-3d}
.sz-slide{transform:translateX(calc(var(--d,0) * (100% - 4vw))) translateZ(calc(var(--ad,0) * -260px)) rotateY(calc(var(--d,0) * -38deg));opacity:calc(1 - var(--ad,0) * .45);transition:transform .8s var(--ease),opacity .8s var(--ease)}
.sz-slide.on{transform:rotateY(calc(var(--px,0) * 6deg)) rotateX(calc(var(--py,0) * -4deg));opacity:1}
.sz-car.tilting .sz-slide.on{transition:transform .35s var(--ease),opacity .8s var(--ease)}
.sz-slide[data-d="2"],.sz-slide[data-d="-2"]{opacity:0}
@media (max-width:820px){.sz-slide{transform:translateX(calc(var(--d,0) * (100% - 10vw))) translateZ(calc(var(--ad,0) * -220px)) rotateY(calc(var(--d,0) * -40deg))}}
@media (prefers-reduced-motion:reduce){.sz-slide,.sz-slide.on{transition:none}}

/* Testimonials: full-bleed film still */
.h-quotes{position:relative;width:100%;min-height:min(92vh,820px);display:flex;align-items:flex-end;overflow:hidden;background:#000;border-top:1px solid var(--line)}
.h-quotes::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,rgba(0,0,0,.88));pointer-events:none}
.tq-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
.tq-pics img.on{opacity:.5;animation:tqpush 5s linear both}
@keyframes tqpush{from{transform:scale(1)}to{transform:scale(1.1)}}
.tq-in{position:relative;z-index:2;width:100%;padding-block:clamp(40px,6vw,88px)}
.tq-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:24px}
.tq-top h2{margin:0;font-size:15px;font-weight:400;color:var(--mute)}
.h-quotes .ph{font-size:12px;border:1px dashed var(--line-2);padding:3px 10px;color:var(--mute)}
.tq-quotes{display:grid}
.tq-q{grid-area:1/1;margin:0;opacity:0;transition:opacity .3s;pointer-events:none}
.tq-q .w{display:inline-block}
.tq-q.on .w{animation:tqup .7s var(--ease) calc(var(--l,0) * 90ms + .1s) both}
.tq-q.on figcaption{animation:tqfade .6s .45s both}
@keyframes tqup{from{opacity:0;transform:translateY(.4em)}}
@keyframes tqfade{from{opacity:0}}
.tq-q.on{opacity:1;transform:none;pointer-events:auto}
.tq-q blockquote{margin:0}
.tq-q p{margin:0;font-size:clamp(34px,4.8vw,76px);font-weight:500;letter-spacing:-.045em;line-height:1;max-width:20ch;text-wrap:balance}
.tq-q figcaption{margin-top:clamp(20px,2.4vw,32px);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:15px}
.tq-q figcaption b{font-weight:500}
.tq-q figcaption span{color:var(--mute)}
.tq-q figcaption i{font-style:normal;font-size:13px;display:inline-flex;align-items:center;gap:8px;color:var(--mute)}
.tq-q figcaption i::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.tq-q[data-kind=event] figcaption i::before{background:var(--red)}
.tq-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:clamp(32px,4vw,56px)}
.tq-bar button{position:relative;height:22px;background:none;border:0;border-bottom:1px solid var(--line-2);cursor:pointer;padding:0}
.tq-bar i{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--cyan)}
.tq-bar .on i{width:calc(var(--t,0) * 100%)}
.tq-bar button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@media (max-width:820px){.h-quotes{min-height:86vh}}
@media (prefers-reduced-motion:reduce){.tq-pics img,.tq-q{transition:none}.tq-pics img.on,.tq-q.on .w,.tq-q.on figcaption{animation:none}}
/* Prototype: note shown when a switched-off page is clicked */
.off-tip{position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--paper);color:#000;font:500 14px/1.3 var(--sans);padding:.8em 1.2em;border-radius:999px;transition:opacity .25s,transform .25s var(--ease)}
.off-tip.on{opacity:1;transform:translate(-50%,0)}
a[aria-disabled="true"]{cursor:default}

/* 03 What we do: full-bleed floor plan with one sentence */
.h-wwd{position:relative;z-index:1;overflow:hidden;margin-top:clamp(64px,7vw,110px);border-top:1px solid var(--line);isolation:isolate;background:var(--ink)}
.h-wwd::before{content:"";position:absolute;inset:0 0 auto;height:45%;z-index:1;background:linear-gradient(var(--ink) 10%,transparent);pointer-events:none}
.wwd-tx{position:absolute;z-index:2;top:0;left:0;padding:clamp(24px,4vw,64px) var(--gutter,clamp(16px,4vw,56px))}
.wwd-h{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.02;font-size:clamp(30px,4.2vw,64px);text-wrap:balance;max-width:20ch}
.wwd-h .acc{color:var(--cyan);white-space:nowrap}
.h-wwd .ia{aspect-ratio:8/5;position:relative;overflow:hidden;background:var(--ink)}
.h-wwd .ia::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.h-wwd .ia>svg{display:block;width:100%;height:100%}
.h-wwd .ia>svg.ov{position:absolute;inset:0}
.h-wwd .persp{position:absolute;inset:0;perspective:700px;perspective-origin:50% 0;-webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}
.h-wwd .persp svg{position:absolute;left:-10%;top:18%;width:120%;transform:rotateX(58deg) rotateZ(-24deg);transform-origin:50% 40%;opacity:.85}
.h-wwd text{font-family:inherit}
.h-wwd .w{fill:none;stroke:#F5F5F5;stroke-width:9;stroke-linejoin:miter}
.h-wwd .win{fill:none;stroke:var(--ink);stroke-width:4}
.h-wwd .t{fill:none;stroke:rgba(245,245,245,.6);stroke-width:1.4}
.h-wwd .dsh{stroke-dasharray:5 6}
.h-wwd .lb{fill:rgba(245,245,245,.75);font-size:15px;letter-spacing:.12em;font-weight:500}
.h-wwd .sil ellipse,.h-wwd .sil path{fill:#050707}
@media (max-width:820px){
 .h-wwd{display:flex;flex-direction:column-reverse}
 .h-wwd::before{display:none}
 .wwd-tx{position:static;padding:clamp(56px,14vw,88px) var(--gutter,16px) 24px}
 .wwd-art{aspect-ratio:4/5;overflow:hidden;position:relative}
 .wwd-art .ia{position:absolute;width:250%;left:-75%;top:50%;transform:translateY(-50%)}
}

footer.f2 .f-top a.f-so{display:flex;align-items:center;gap:10px}
footer.f2 .f-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
footer.f2 .f-ic .dot{fill:currentColor;stroke:none}
footer.f2 .f-ic path{fill:currentColor;stroke:none}
@media (min-width:481px) and (max-width:820px){.wwd-art{aspect-ratio:4/3}.wwd-art .ia{width:160%;left:-30%}}

/* What we do: the drawing wipes into the real hall as you scroll (--p 0 to 1, set in home.js) */
.wwd-art{--p:0;position:relative;z-index:0;overflow:hidden}
.wwd-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;z-index:1;clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);transform:scale(calc(1.06 - var(--p) * .06))}
.wwd-edge{position:absolute;top:0;bottom:0;left:calc(var(--p) * 100%);width:1px;background:var(--cyan);z-index:2;opacity:calc(min(var(--p) * 20, (1 - var(--p)) * 20, 1));box-shadow:0 0 18px rgba(0,255,240,.6)}
.wwd-art .ia{opacity:calc(1 - var(--p) * .6)}
@media (prefers-reduced-motion:reduce){.wwd-ph,.wwd-edge{display:none}.wwd-art .ia{opacity:1}}

/* What we do, pinned: the section holds still while the scroll turns the drawing into the photo */
.h-wwd{overflow:clip;height:240vh}
.h-wwd::before{display:none}
.wwd-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.wwd-pin::before{content:"";position:absolute;inset:0 0 auto;height:45%;z-index:1;background:linear-gradient(var(--ink) 10%,transparent);pointer-events:none}
.h-wwd .wwd-tx{padding-top:calc(68px + clamp(24px,4vw,64px))}
.h-wwd .wwd-art{position:absolute;inset:0;aspect-ratio:auto;container-type:size}
.h-wwd .wwd-art .ia{position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:max(100cqw,160cqh);aspect-ratio:8/5;transform:translate(-50%,-50%)}
@media (max-width:820px){
 .h-wwd{display:block}
 .wwd-pin{display:flex;flex-direction:column}
 .wwd-pin::before{display:none}
 .h-wwd .wwd-tx{position:relative;order:-1;padding-top:calc(68px + 32px)}
 .h-wwd .wwd-art{position:relative;inset:auto;flex:1;min-height:0}
}
@media (prefers-reduced-motion:reduce){.h-wwd{height:auto}.wwd-pin{position:relative}}

/* ---------- desktop sizes: big monitors get a wider page and larger type; short laptop screens get headings that fit ---------- */
@media (min-width:821px){.lk-hero{min-height:100svh}}
@media (min-width:1700px){
  :root{--maxw:clamp(1320px,74vw,2000px)}
  .wrap-wide{max-width:min(86vw,2200px)}
  body{font-size:18px}
  .nav-links,.nav .btn{font-size:15px}
  .lk-h{font-size:clamp(150px,7.6vw,200px)}
  .h-head{font-size:clamp(96px,5vw,132px)}
  .sz-h{font-size:clamp(80px,4.2vw,110px)}
  .tq-q p{font-size:clamp(76px,3.9vw,104px)}
  .h-quotes{min-height:92vh}
  .h-cta h2{font-size:clamp(104px,5.4vw,140px)}
  .h-cta{min-height:80vh;display:flex;flex-direction:column;justify-content:center}
  .wwd-h{font-size:clamp(64px,3.4vw,88px)}
  .hx-list a,.hx-list li{font-size:clamp(24px,1.25vw,32px)}
  .hx-sticky{--w:min(calc(100cqw / 1.55), 820px)}
  .hx-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .hx-step{min-height:100vh}
  .spec-cell b{font-size:clamp(88px,4.4vw,116px)}
}
@media (min-width:821px) and (max-height:820px){
  .h-head{font-size:clamp(40px,min(5.6vw,9vh),96px)}
  .hx .h-head{max-width:18ch}
  .hx-step{padding-block:clamp(48px,8vh,96px)}
  .hx-list a,.hx-list li{padding:9px 0}
}
@media (min-width:821px){.h-wwd .wwd-tx{right:0;padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)))}}
/* third stage: the finished place, wiped in after the walkthrough photo */
.wwd-art{--q:0}
.wwd-ph2{z-index:3;object-position:50% 70%;clip-path:inset(0 calc((1 - var(--q)) * 100%) 0 0);transform:scale(calc(1.06 - var(--q) * .06))}
.wwd-edge2{z-index:4;left:calc(var(--q) * 100%);opacity:calc(min(var(--q) * 20, (1 - var(--q)) * 20, 1))}
.h-wwd{height:340vh}
@media (prefers-reduced-motion:reduce){.h-wwd{height:auto}}
.h-wwd .wwd-art{--p:inherit;--q:inherit}
.h-wwd{--p:0;--q:0}
.wwd-pin::before{height:60%;background:linear-gradient(rgba(13,17,16,calc(.9 + var(--q) * .1)) 0%,rgba(13,17,16,calc(.45 + var(--q) * .3)) 45%,transparent)}
.wwd-ph2{object-position:50% 60%}

/* placeholder client logos, made up to show the row filled; swap for real ones */
.h-logos li.fk{display:inline-flex;align-items:center;gap:7px;color:rgba(245,245,245,.72);white-space:nowrap;line-height:1}
.h-logos li.fk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.h-logos li.fk svg .f{fill:currentColor;stroke:none}
.h-logos li.fk1{font-size:14px;font-weight:700;letter-spacing:.22em}
.h-logos li.fk1 svg{fill:currentColor;stroke:none;width:14px;height:14px}
.h-logos li.fk2{font-size:22px;font-weight:500;letter-spacing:-.05em}
.h-logos li.fk3{font-size:17px;font-weight:300;letter-spacing:.02em}
.h-logos li.fk3 b{font-weight:700;letter-spacing:.12em}
.h-logos li.fk4{font-size:16px;font-weight:700;letter-spacing:-.01em;font-style:italic}
.lk-hero.can-drag{cursor:grab;touch-action:pan-y}
.lk-hero.dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.lk-hero.can-drag a,.lk-hero.can-drag button{cursor:pointer}

/* showreel thumbnails: squares, not circles */
.sz-chip,.sz-chip img{border-radius:0}


/* hero headline, about 12% smaller */
.lk-h{font-size:clamp(46px,7.9vw,132px)}
@media (max-width:640px){.lk-h{font-size:clamp(40px,11.4vw,56px)}}
@media (min-width:1700px){.lk-h{font-size:clamp(132px,6.7vw,176px)}}

/* contact role choice: quiet outline pills; the picked one gets a cyan outline and text (one role at a time) */
.h-book .seg{display:flex;flex-wrap:wrap;gap:8px}
.h-book .seg label{padding:.5em 1em;border:1px solid var(--line-2);border-radius:999px;background:none;font-size:15px;color:rgba(245,245,245,.8)}
.h-book .seg label:hover{border-color:rgba(245,245,245,.45);color:var(--paper)}
.h-book .seg input:checked+label{border-color:var(--cyan);color:var(--cyan);background:rgba(0,255,240,.06)}
.h-book .seg input:focus-visible+label{outline:2px solid var(--cyan);outline-offset:2px}
/* project cards: a deeper shade under the caption so the text reads over any photo */
.pj-card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.9) 100%)}
.pj-cap p{color:rgba(245,245,245,.82)}
/* hall numbers sit between the 3D tour and contact; less padding than a full section */
.pj-nums{padding-block:clamp(56px,7vw,110px)}

/* phones: hero runs a little past the fold so the headline sits lower and more of the hall shows; the logo strip falls just below */
@media (max-width:640px){.lk-hero{min-height:calc(100svh + 143px)}.lk-hero .hero-cta{margin-top:20px}}
/* phones: the hall drawing sits in the top part of the hero, not centred on the taller box, and fades out just under the headline top */
@media (max-width:640px){.lk-hero{background:#050706}.lk-scene{bottom:auto;height:80svh}.lk-hero.is3d .lk-scene::after{background:linear-gradient(180deg,rgba(5,7,6,.6) 0%,transparent 16%),linear-gradient(0deg,rgba(5,7,6,1) 0%,rgba(5,7,6,.7) 18%,rgba(5,7,6,0) 42%)}}
/* phones: breathing room between the headline and the intro */
@media (max-width:640px){.lk-h{margin-bottom:20px}}
/* phones: smaller role pills so the five choices fit on two rows */
@media (max-width:640px){.h-book .seg{gap:6px}.h-book .seg label{font-size:13px;padding:9px 12px;line-height:1}}
/* phones: the drawing repeats instead of sticking; the room above "One hall", the board above "who it's for" */
.hx-art.rep{display:none}
@media (max-width:820px){
  .hx-art{position:relative;top:auto;border-bottom:0;background:none}
  .hx-art:not(.rep){--t:0;--q:1}
  .hx-art.rep{display:block;--t:1;--q:0;margin:0 0 4px}
  .hx-art.rep .hx-board path{stroke-dashoffset:0}.hx-art.rep .hx-board path.f{fill-opacity:1}
  .hx:has(.hx-list li[data-u="agcy"].in) .hx-art.rep .hx-board g[data-u="agcy"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="arch"].in) .hx-art.rep .hx-board g[data-u="arch"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="brand"].in) .hx-art.rep .hx-board g[data-u="brand"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="crt"].in) .hx-art.rep .hx-board g[data-u="crt"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="dev"].in) .hx-art.rep .hx-board g[data-u="dev"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="home"].in) .hx-art.rep .hx-board g[data-u="home"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="int"].in) .hx-art.rep .hx-board g[data-u="int"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="plan"].in) .hx-art.rep .hx-board g[data-u="plan"]{transform:none;opacity:1}
  .hx-step{padding-block:20px 28px}
  .hx-who{padding-top:0;padding-bottom:64px}
  .hx-art.rep .hx-sticky{height:calc(var(--w) * 1.08)}
  .hx-art.rep{margin-top:-36px}
}

/* Rendered hall (night). Shows the lit room while the line drawing waits underneath for the board. */
.hx-room{display:grid;place-items:center}
.hx-room>*{grid-area:1/1}
.ax-r{position:relative;width:calc(var(--w) * 1.8);max-width:none;aspect-ratio:4/3;opacity:var(--q);pointer-events:none;transform:translate(calc(var(--px) * -8px),calc(var(--py) * -6px));transition:transform .4s var(--ease)}
.ax-r img{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;transition:opacity .6s var(--ease)}
.ax-r img.r0,.hx[data-k="st"] .ax-r img[data-k="st"],.hx[data-k="ev"] .ax-r img[data-k="ev"]{opacity:1}
.hx .ax-stage{opacity:calc(1 - var(--q))}
@media (prefers-reduced-motion:reduce){.ax-r,.ax-r img{transition:none}}
@media (max-width:820px){.ax-r{width:calc(var(--w) * 1.6)}}

/* Rendered board: the room's floor with each audience's object, dropped in as its name appears. Replaces the line board. */
.hx-board{display:none}
.hx .ax-stage{visibility:hidden}
.hx-bd{grid-area:1/1;position:relative;z-index:1;width:calc(var(--w) * 1.8);aspect-ratio:4/3;pointer-events:none;opacity:clamp(0, (var(--t) - .25) * 8, 1)}
@media (max-width:820px){.hx-bd{width:calc(var(--w) * 1.6)}}
.hx-bd img{position:absolute;max-width:none;height:auto}
.hx-bd .bd-pl{inset:0;width:100%;height:100%}
.hx.dz .hx-bd img[data-u]{transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .25s}
.hx.dz .hx-bd img[data-u]:not(.in){transform:translateY(-14%);opacity:0}
@media (max-width:820px){.hx:has(.hx-list li[data-u="dev"].in) .hx-art.rep .hx-bd img[data-u="dev"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="brand"].in) .hx-art.rep .hx-bd img[data-u="brand"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="agcy"].in) .hx-art.rep .hx-bd img[data-u="agcy"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="home"].in) .hx-art.rep .hx-bd img[data-u="home"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="arch"].in) .hx-art.rep .hx-bd img[data-u="arch"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="plan"].in) .hx-art.rep .hx-bd img[data-u="plan"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="int"].in) .hx-art.rep .hx-bd img[data-u="int"]{transform:none;opacity:1}.hx:has(.hx-list li[data-u="crt"].in) .hx-art.rep .hx-bd img[data-u="crt"]{transform:none;opacity:1}}
.lk-hero.is3d .gl{opacity:0;transition:opacity .9s var(--ease)}
.lk-hero.ink-on .gl{opacity:1}

/* Intro */
.intro{position:fixed;inset:0;z-index:300;background:var(--paper);display:grid;place-items:center;cursor:pointer}
.in-box{position:relative;width:min(420px,70vw);aspect-ratio:670/686}
.in-box img,.in-box svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.in-box svg{fill:#000;opacity:0;transform-origin:50.4% 44.7%;overflow:visible}
.intro.open svg{opacity:1;transform:scale(var(--s,40));transition:transform 1s cubic-bezier(.75,0,.2,1)}
.intro.open img{opacity:0;transition:opacity .3s}
.intro.done{opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
html.intro-on{overflow:hidden}

/* Drawings: sticky line + plan that rises on scroll */
.dr{position:relative;height:250vh}
.dr-stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
.dr-h{max-width:12ch;margin:0 0 24px}
.dr-w{color:var(--cyan);display:inline-block;transition:opacity .25s,transform .35s var(--ease)}
.dr-w.out{opacity:0;transform:translateY(.15em)}
.dr-p{margin:0}
.dr-fig{margin:0}
.dr-img{display:block;width:100%;height:auto}
.dr-cap{margin-top:10px;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
@media (max-width:820px){.dr{height:220vh}.dr-stick{grid-template-columns:1fr;align-content:center;gap:20px}.dr-h{margin-bottom:14px}.dr-fig{order:-1}}
.dr-btn{margin-top:28px}
@media (max-width:820px){.dr-btn{margin-top:20px}}

/* Hero: stronger dark at the bottom so the headline reads over the drawing */
.lk-hero.is3d .lk-scene::after{background:linear-gradient(180deg,rgba(5,7,6,.6) 0%,transparent 22%),linear-gradient(0deg,rgba(5,7,6,.98) 0%,rgba(5,7,6,.84) 34%,rgba(5,7,6,0) 64%)}
@media (max-width:640px){.lk-hero.is3d .lk-scene::after{background:linear-gradient(180deg,rgba(5,7,6,.6) 0%,transparent 16%),linear-gradient(0deg,rgba(5,7,6,1) 0%,rgba(5,7,6,.84) 24%,rgba(5,7,6,0) 50%)}}

/* "We put your plans on the floor" opens on the finished room drawing, then wipes to the real hall */
.wwd-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* the next section rises out of the dark on the finished drawing, then wipes to the real hall */
.dr + .h-wwd{margin-top:0;border-top:0}
.h-wwd::after{content:"";position:absolute;left:0;right:0;top:0;height:70vh;z-index:5;pointer-events:none;background:linear-gradient(var(--ink) 15%,rgba(13,17,16,0))}
@media (prefers-reduced-motion:reduce){.h-wwd::after{display:none}}

/* Set up for anything: ways into more projects */
.pj-more{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(28px,3vw,44px)}
@media (max-width:640px){.pj-more{flex-direction:column;align-items:stretch}.pj-more .btn{justify-content:center}}
/* Booking form: same left edge as the rest of the page; the photo stays full-bleed */
@media (min-width:821px){.bk-l{padding-left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)))}}
@media (min-width:861px){.h-book{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.bk-l{padding-right:clamp(40px,6vw,120px)}.bk-l .h-cta-form{max-width:760px}.bk-q p{font-size:clamp(28px,2.5vw,46px)}}

/* section opens on the hall photo, then wipes to the finished house */
.wwd-base{object-position:50% 60%}
.h-wwd{height:240vh}
@media (prefers-reduced-motion:reduce){.h-wwd{height:auto}}

/* Testimonials: a headshot beside the name (initials until the real photos come in) */
.bk-q figcaption{flex-direction:row;align-items:center;gap:14px}
.bk-av{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(245,245,245,.12);border:1px solid var(--line-2);color:var(--paper);font-size:14px;font-weight:500;letter-spacing:.02em;overflow:hidden}
.bk-av img{width:100%;height:100%;object-fit:cover}
.bk-who{display:flex;flex-direction:column;gap:2px}
.bk-q figcaption .bk-av,.bk-q figcaption .bk-who{color:var(--paper)}

/* poster crosshair grid bg (option 04) */
html{background:#0D1110}body{background:transparent!important}.h-book{background:transparent!important}
.gbg{position:fixed;inset:0;z-index:-1;pointer-events:none;}
/* assets sit above the grid */
.gbg i{position:absolute;display:block}

/* no grain on the homepage */
body::after{display:none!important}
.h-wwd .ia::after{display:none!important}

/* transparent renders: hide the base room when another is shown */
.hx[data-k="st"] .ax-r img.r0,.hx[data-k="ev"] .ax-r img.r0{opacity:0}

/* the grid carries the lines: no section rules */
.h-sec{border-top:0!important}

/* smaller hero headline so the room stays the focus */
.lk-h{font-size:clamp(42px,5.4vw,104px)!important}
@media (min-width:1700px){.lk-h{font-size:clamp(92px,5vw,124px)!important}}
@media (max-width:640px){.lk-h{font-size:clamp(36px,10vw,48px)!important}}

/* no rules where the grid already draws one */
.hx,.h-book{border-top:0!important}
/* large screens: bigger hall drawing, nudged left and up so it balances the text */
@media (min-width:1280px){.hx .hx-room,.hx .hx-bd{translate:0 -6%}}
@media (min-width:1600px){.hx .hx-sticky{--w:min(calc(100cqw / 1.48), 860px)}.hx .hx-room,.hx .hx-bd{translate:-9% -7%}}

/* footer wordmark sits tighter, like the logo lockup */
footer.f2 .f-panel .f-top{padding-bottom:clamp(20px,2.4vw,36px)}
footer.f2 .f-lt{padding-bottom:clamp(18px,2.6vw,44px)}

/* "true scale" headline pulls into focus when it scrolls in */
.sz-h.fx{opacity:0;letter-spacing:.12em;filter:blur(10px)}
.sz-h.fx.go{animation:szFocus 1.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes szFocus{to{opacity:1;letter-spacing:-.04em;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.sz-h.fx{opacity:1;letter-spacing:-.04em;filter:none}.sz-h.fx.go{animation:none}}

/* no dark overlays on the floor photo */
.h-wwd::after,.wwd-pin::before{display:none!important}
/* focus-in: keep spacing fixed on phones so the lines do not reflow */
@media (max-width:820px){.sz-h.fx{letter-spacing:-.04em;transform:scale(1.06)}@keyframes szFocusM{to{opacity:1;filter:blur(0);transform:none}}.sz-h.fx.go{animation-name:szFocusM}}

/* tour thumbnail drifts like someone looking around, and the hand nudges with it */
.t3d img{transform-origin:50% 45%;animation:t3dLook 14s ease-in-out infinite alternate;will-change:transform}
@keyframes t3dLook{0%{transform:scale(1.14) translate3d(3.5%,0.6%,0)}50%{transform:scale(1.1) translate3d(-1%,-0.8%,0)}100%{transform:scale(1.14) translate3d(-3.5%,0.4%,0)}}
.t3d-hint svg{animation:t3dHand 14s ease-in-out infinite alternate}
@keyframes t3dHand{0%{transform:translateX(3px)}100%{transform:translateX(-3px)}}
@media (prefers-reduced-motion:reduce){.t3d img,.t3d-hint svg{animation:none}}

/* footer wordmark stacked like the logo lockup: bold caps, logo leading */
footer.f2 .f-stack{margin:0;display:flex;flex-direction:column;font-family:"BP Helvetica Neue","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(56px,10.5vw,190px);line-height:1.02;color:var(--paper);padding-bottom:clamp(20px,2.4vw,40px)}
footer.f2 .f-stack span{display:block}

/* quicker intro */
/* phones: no horizontal grid line */
@media (max-width:820px){.gbg i[style*="top:62vh"]{display:none}}
@media (max-width:820px){.gbg{display:none!important}}
@media (max-width:820px){body{font-size:16px}.h-lede{font-size:16px!important}.t3d-cta{font-size:16px}.f input,.f textarea,.f select{font-size:16px}}
.pj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}.pj-head .sz-h{margin:0;text-align:left}.pj-head .pj-more{margin:0;justify-content:flex-end;gap:12px 32px;padding-bottom:.4em}.pj-more .tl{display:inline-flex;align-items:center;gap:.5em;color:var(--paper);font:500 15px/1.2 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;text-decoration-color:rgba(245,245,245,.45);transition:text-decoration-color .25s}.pj-more .tl:hover{text-decoration-color:var(--paper)}.pj-more .tl .arr{text-decoration:none;display:inline-block;transition:transform .3s var(--ease)}.pj-more .tl:hover .arr{transform:translateX(4px)}@media (max-width:640px){.pj-head .pj-more{flex-direction:row;justify-content:flex-start;align-items:center;padding-bottom:0}}
.gbg{display:none!important}
.h-wwd .wwd-pin::before{display:block!important;height:60%;background:linear-gradient(rgba(13,17,16,.72) 0%,rgba(13,17,16,.48) 50%,rgba(13,17,16,0))!important}
.pj-head .pj-more{display:none}
.bk-from{display:none!important}
.ax-list b{transition:color .3s}.ax-list a:hover b,.ax-list a:hover .n,.ax-list a:hover .go,.ax-list a:focus-visible b{color:var(--cyan)}@media (min-width:1600px){.hx .wrap.hx-grid{max-width:min(90vw,2100px);gap:clamp(96px,7vw,160px)}}
.pj-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,2.4vw,32px)}.pj-tabs button{font:500 14px/1 var(--sans);color:var(--mute);background:none;border:1px solid var(--line-2);border-radius:999px;padding:.75em 1.15em;cursor:pointer;transition:color .25s,border-color .25s,background .25s}.pj-tabs button:hover{color:var(--paper);border-color:var(--paper)}.pj-tabs button[aria-selected="true"]{color:var(--ink);background:var(--cyan);border-color:var(--cyan)}.pj-tabs button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.pj-card:nth-child(5),.pj-card:nth-child(6){grid-column:span 6}.pj-card[hidden]{display:none!important}.pj-grid.pj-f .pj-card{grid-column:span 6!important}.pj-grid.pj-f[data-n="1"] .pj-card{grid-column:span 12!important}.pj-grid.pj-f .pj-card{animation:pjIn .5s var(--ease) both}@keyframes pjIn{from{opacity:0;transform:translateY(12px)}}@media (max-width:760px){.pj-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}.pj-tabs::-webkit-scrollbar{display:none}.pj-tabs button{flex:none}}@media (prefers-reduced-motion:reduce){.pj-grid.pj-f .pj-card{animation:none}}
.lr .lr-m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}.lr .lr-w{display:inline-block;transform:translateY(112%)}.lr.go .lr-w{animation:lrRise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--l,0) * 110ms)}@keyframes lrRise{to{transform:none}}
.lr .lr-m,.lr .lr-w{color:inherit!important}
.pj-floor .pj-stats{border-color:rgba(0,255,240,.14)!important;background:linear-gradient(rgba(0,255,240,.028) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(0,255,240,.028) 1px,transparent 1px) 0 0/48px 48px!important}.pj-floor .pj-stat,.pj-floor .pj-stat:first-child{border-color:rgba(0,255,240,.1)!important}.pj-floor .pj-stat b{text-shadow:none!important}@keyframes pjcell{35%{background:rgba(0,255,240,.06)}100%{background:rgba(0,255,240,0)}}
.home .h-sec+.h-sec{padding-top:0}
.pj-view{display:flex;justify-content:center;margin-top:clamp(28px,3vw,44px)}.pj-view .btn .arr{display:inline-block}
footer.f2 .f-lw{display:flex;justify-content:space-between;align-items:last baseline;gap:16px 32px}footer.f2 .f-lw .f-lt{width:auto}footer.f2 .f-copy{color:var(--mute);font-size:14px;white-space:nowrap}@media (max-width:640px){footer.f2 .f-lw{flex-direction:column;align-items:flex-start;gap:0}footer.f2 .f-lw .f-copy{padding-bottom:28px}}
.lk-h{font-size:calc(clamp(42px,5.4vw,104px) + 8px)!important}@media (min-width:1700px){.lk-h{font-size:calc(clamp(92px,5vw,124px) + 8px)!important}}@media (max-width:640px){.lk-h{font-size:calc(clamp(36px,10vw,48px) + 8px)!important}}
footer.f2 .f-ic{transform:translateY(-2px)}
.dr-ov{margin:0 0 clamp(16px,1.6vw,24px)}.pj-floor .pj-stats{border-color:var(--line-2)!important;background:linear-gradient(rgba(245,245,245,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(245,245,245,.035) 1px,transparent 1px) 0 0/48px 48px!important}.pj-floor .pj-stat,.pj-floor .pj-stat:first-child{border-color:var(--line)!important}
@media (min-width:821px) and (max-width:1599px){.hx .ax-r{width:calc(var(--w) * 1.62)}.hx .hx-room,.hx .hx-bd{translate:-9% -6%}}
footer.f2 .f-ic path.ln{fill:none;stroke:currentColor}
.h-book .seg label,.pj-tabs button{border-radius:4px!important}
/* hero headline matches the closing CTA headline */
.lk-h{font-size:clamp(52px,6.4vw,112px)!important}@media (min-width:1700px){.lk-h{font-size:clamp(112px,5.4vw,148px)!important}}
/* number and arrow sit on the centre line of the big link text */
.ax-list .n,.ax-list .go{align-self:center;line-height:1}
/* footage row: three slowed walkthrough clips, full bleed */
.h-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,16px);padding-block:clamp(56px,7vw,110px) 0}
.h-clips figure{margin:0;min-width:0}
.h-clips video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.8);background:#050706}
@media (max-width:640px){.h-clips{grid-template-columns:repeat(3,78%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.h-clips::-webkit-scrollbar{display:none}.h-clips figure{scroll-snap-align:start}}
/* View more projects is hidden for now; tabs still show 4 each */
.pj-view{display:none!important}
.h-tour+.h-clips{padding-top:0}
/* phones: the drawing section is not pinned; it runs on a timer instead */
@media (max-width:820px){.dr{height:auto}.dr-stick{position:relative;height:auto;padding-block:clamp(64px,14vw,96px)}}
/* phones: footer columns stack */
@media (max-width:640px){footer.f2 .f-top{grid-template-columns:1fr!important;gap:36px}}
/* phone menu, Events side: the pink-to-lilac from the Adidas activation posters */
:root{--ev-grad:linear-gradient(90deg,#ea3f64 0%,#eb55af 55%,#ef8ef6 100%)}
.nav-sheet[data-g="ev"] .ns-tg button[aria-pressed="true"]{background:var(--ev-grad)!important;color:#0d1110!important}
.nav-sheet[data-g="ev"] nav a:first-child{color:#eb55af!important;background:var(--ev-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:fit-content}
.nav-sheet[data-g="ev"] .ns-book{background:var(--ev-grad)!important;border-color:transparent!important;color:#0d1110!important}
.pj-nums+.h-clips{padding-top:0}
/* phones: hero copy sits tighter and lower */
@media (max-width:640px){.lk-h{margin-bottom:12px!important}.lk-foot{gap:0!important;row-gap:0!important}.lk-hero .hero-cta{margin-top:20px!important}.lk-hero .h-logos{margin-top:18px!important}.lk-hero{min-height:calc(100svh + 143px)!important}}
.home .pj-nums:has(+.h-clips),.pj-nums:has(+.h-clips){padding-bottom:clamp(64px,7.6vw,120px)!important}
.h-clips{padding-bottom:clamp(48px,6vw,104px)}
.ax-list a.ev.on .n,.ax-list a.ev.on .go,.ax-list a.ev:hover .n,.ax-list a.ev:hover .go{color:var(--cyan)!important}
.h-wwd .wwd-pin::before{height:78%!important;background:radial-gradient(ellipse 75% 95% at 10% 20%,rgba(13,17,16,.6) 0%,rgba(13,17,16,.35) 50%,rgba(13,17,16,0) 100%),linear-gradient(rgba(13,17,16,.88) 0%,rgba(13,17,16,.72) 45%,rgba(13,17,16,0))!important}