/* ============================================================
   One Interiors — Waitlist
   A single committed dark world. No theme switching: the premise
   is a dark room that lights up, so every colour is painted
   explicitly and the page holds on any host background.
   ============================================================ */

:root{
  /* ---- colour ---- */
  --void:#07090a;
  --bone:#f4f1e9;
  --bone-2:rgba(244,241,233,.72);   /* secondary text */
  --bone-3:rgba(244,241,233,.46);   /* tertiary / hints */
  --brass:#c89b5c;
  --brass-lit:#e3bd83;
  --lamp:#f2c98a;
  --alert:#e0895c;
  --card-bg:rgba(22,20,17,.46);
  --card-line:rgba(244,241,233,.13);
  --ink-on-brass:#171006;

  /* ---- type scale ----
     A fourth-based scale. Every size on the page comes from here;
     nothing is hardcoded in a rule. */
  --fs-display:clamp(36px, 7.2vw, 78px);
  --fs-title:clamp(22px, 2.4vw, 26px);
  --fs-lead:15px;
  --fs-body:14.5px;
  --fs-small:13px;
  --fs-micro:12px;
  --fs-label:10px;
  --fs-cta:21px;        /* the hero button, its own step */

  /* ---- tracking ----
     Three roles, three values. Uppercase mono needs air; the
     display serif needs the opposite. */
  --tr-brand:.30em;     /* the wordmark, widest */
  --tr-label:.17em;     /* eyebrows, section labels */
  --tr-hint:.20em;      /* quiet all-caps asides */
  --tr-display:-.022em; /* large serif tightens optically */
  --tr-title:-.012em;

  /* ---- rhythm ---- */
  --lh-display:1.08;
  --lh-title:1.18;
  --lh-body:1.55;
  --lh-tight:1.4;

  --ease-cine:cubic-bezier(.22,1,.36,1);
  --ease-rise:cubic-bezier(.16,.84,.28,1);

  --card-w:392px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:var(--void);
  color:var(--bone);
  overflow:hidden;
  font-family:'Jost',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--brass-lit); outline-offset:3px; border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- type roles ---------------------------------------------
   Fraunces carries optical-size, SOFT and WONK axes. Left at its
   defaults it reads clumsy; at high opsz with SOFT and WONK at 0
   it sharpens into a proper high-contrast display face. That one
   line is most of the difference between "a serif" and "classy".
   ------------------------------------------------------------- */
.t-display,.t-title{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 144;
  font-weight:300;
}
.t-display{font-size:var(--fs-display); line-height:var(--lh-display);
  letter-spacing:var(--tr-display); text-wrap:balance}
.t-title{font-size:var(--fs-title); line-height:var(--lh-title);
  letter-spacing:var(--tr-title); font-weight:400;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 72}
.t-mono{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  font-size:var(--fs-label); text-transform:uppercase;
  letter-spacing:var(--tr-label); font-weight:400; line-height:1;
}

/* ============================================================
   STAGE + LIGHTING TOKENS
   Every surface reads its fill from a variable; stages redefine
   the variables, so one transition rule drives the whole room.
   ============================================================ */
#stage{
  position:fixed; inset:0; overflow:hidden;
  --wall:#0b0e10; --wallL:#090c0d; --ceil:#080b0c; --back:#0a0d0f; --floor:#070909;
  --glow:0; --mat:0; --day:0; --amb:0;
}
#stage[data-stage="1"]{
  --wall:#171715; --wallL:#131312; --ceil:#141310; --back:#141413; --floor:#0e0d0b;
  --glow:.24; --mat:.12; --amb:.10;
}
#stage[data-stage="2"]{
  --wall:#39332a; --wallL:#2c2721; --ceil:#2b271f; --back:#322d25; --floor:#241c12;
  --glow:.55; --mat:.6; --day:.35; --amb:.3;
}
#stage[data-stage="3"],#stage[data-stage="4"],#stage[data-stage="5"]{
  --wall:#5a4f3a; --wallL:#473e2d; --ceil:#42392a; --back:#514631; --floor:#3a2a17;
  --glow:.85; --mat:1; --day:.8; --amb:.5;
}
#stage[data-stage="5"]{ --glow:1; --day:1; --amb:.62; }

#stage.sty-modern:is([data-stage="3"],[data-stage="4"],[data-stage="5"]){
  --wall:#3d443a; --wallL:#2f352c; --ceil:#333a30; --back:#394035; --floor:#2a2116; }
#stage.sty-industrial:is([data-stage="3"],[data-stage="4"],[data-stage="5"]){
  --wall:#3a3734; --wallL:#2c2a27; --ceil:#2f2c29; --back:#35322f; --floor:#221d18; }
#stage.sty-traditional:is([data-stage="3"],[data-stage="4"],[data-stage="5"]){
  --wall:#61402c; --wallL:#4d3222; --ceil:#4a3121; --back:#5a3b28; --floor:#41230f; }

/* ============================================================
   RENDER BACKGROUND ADJUSTMENTS
   A photographic render reaches ~155 luminance behind the card
   once the lights are up. The card was tuned for a near-black
   vector room, so it deepens when a render is driving the page.
   ============================================================ */
#stage.render-bg{
  --card-bg:rgba(15,13,11,.66);
  --card-line:rgba(244,241,233,.19);
  --bone-2:rgba(244,241,233,.82);
  --bone-3:rgba(244,241,233,.62);
}
#stage.render-bg .card{
  box-shadow:0 40px 96px -24px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.08);
}
#stage.render-bg .finale::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 64% 56% at 50% 50%,
    rgba(7,6,5,.88) 0%, rgba(7,6,5,.64) 44%, rgba(7,6,5,0) 82%);
}
#stage.render-bg .finale > *{position:relative}
/* the unlit frame has lighter corners than the vector room, so the
   whisper-level hint needs a touch more presence to stay legible */
#stage.render-bg .opening .hint{color:rgba(244,241,233,.56)}

/* ============================================================
   SEQUENCE + MEDIA LAYERS
   ============================================================ */
.seq{position:absolute; inset:0; width:100%; height:100%; display:block}
.seq[hidden]{display:none}

.media{position:absolute; inset:0}
.media[hidden]{display:none}
.media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity 1.1s var(--ease-cine);
}
.media img.on{opacity:1}

/* A scrubbed sequence has camera movement baked in; the still and
   vector rooms get it here so nothing ever sits perfectly static. */
@keyframes drift{
  0%   {transform:scale(1.14) translate3d(1.2%,.8%,0)}
  100% {transform:scale(1) translate3d(0,0,0)}
}
.drift{animation:drift 70s cubic-bezier(.33,0,.25,1) forwards}

/* ============================================================
   VECTOR ROOM (fallback)
   ============================================================ */
.roomwrap{position:absolute; inset:0}
#room{width:100%; height:100%; display:block}

.surf{transition:fill .9s var(--ease-cine)}
.wall{fill:var(--wall)} .wallL{fill:var(--wallL)} .ceil{fill:var(--ceil)}
.back{fill:var(--back)} .floorS{fill:var(--floor)}

.lit{transition:opacity .9s var(--ease-cine)}
.emit{opacity:var(--glow)} .matx{opacity:var(--mat)}
.dayx{opacity:var(--day)} .ambx{opacity:var(--amb)}

.furn{opacity:0; transform:translateY(14px); transform-origin:center bottom;
  transition:opacity 1.1s ease, transform 1.1s var(--ease-rise)}
#stage:is([data-stage="4"],[data-stage="5"]) .furn{opacity:1; transform:translateY(0)}
#stage[data-stage="4"] .d1{transition-delay:.10s}
#stage[data-stage="4"] .d2{transition-delay:.34s}
#stage[data-stage="4"] .d3{transition-delay:.56s}
#stage[data-stage="4"] .d4{transition-delay:.78s}
#stage[data-stage="4"] .d5{transition-delay:1s}
#stage[data-stage="4"] .d6{transition-delay:1.2s}

@keyframes strike{
  0%{opacity:0} 6%{opacity:.9} 10%{opacity:.05} 16%{opacity:.7}
  20%{opacity:.1} 30%{opacity:1} 40%{opacity:.45} 100%{opacity:1}
}
#stage.striking .strikegrp{animation:strike .95s ease-out both}

.grain{position:absolute; inset:-40%; pointer-events:none; opacity:.16; mix-blend-mode:overlay}
.vig{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 78% 68% at 50% 46%, transparent 40%, rgba(0,0,0,.72) 100%)}

.torch{
  position:absolute; width:52vmax; height:52vmax; left:0; top:0;
  margin:-26vmax 0 0 -26vmax; pointer-events:none; mix-blend-mode:screen; border-radius:50%;
  background:radial-gradient(circle, rgba(200,155,92,.13), rgba(200,155,92,.04) 36%, transparent 68%);
  opacity:0; transition:opacity 1.2s ease;
}
#stage[data-stage="0"] .torch{opacity:1}

/* ============================================================
   DUST
   The particle canvas sits above every layer so motes drift over
   the card and the closing message. .fx-dissolving erodes the
   element itself with a swept mask, in step with the particles
   leaving it — the two together read as disintegration rather
   than a fade. Opacity rides along so that if a browser drops
   the mask, the element still leaves cleanly.
   ============================================================ */
#fx{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:20;
}
.fx-dissolving{
  --diss:0;
  -webkit-mask-image:linear-gradient(100deg,
    transparent calc(var(--diss) * 132% - 32%), #000 calc(var(--diss) * 132%));
  mask-image:linear-gradient(100deg,
    transparent calc(var(--diss) * 132% - 32%), #000 calc(var(--diss) * 132%));
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* ============================================================
   OPENING
   ============================================================ */
.opening{
  position:absolute; inset:0; z-index:6; padding:0 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .6s ease;
}
.opening.gone{opacity:0; pointer-events:none}

.brandmark{display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:34px}
.brandmark img{height:38px; width:auto; opacity:.94}
.brandmark .wordmark{color:var(--bone-2)}
.brandmark .wordmark.t-mono{letter-spacing:var(--tr-brand)}

.joinbtn{
  position:relative; background:transparent;
  border:1px solid rgba(244,241,233,.26); border-radius:999px;
  padding:19px 54px; cursor:pointer;
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 72;
  font-weight:300; font-size:var(--fs-cta); letter-spacing:.03em; line-height:1;
  transition:border-color .55s ease, letter-spacing .55s var(--ease-cine),
             background .55s ease, color .55s ease;
}
.joinbtn::after{
  content:""; position:absolute; inset:-1px; border-radius:999px;
  border:1px solid var(--brass); opacity:0;
  animation:breathe 4.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:0; transform:scale(1)} 50%{opacity:.32; transform:scale(1.065)}}
.joinbtn:hover{
  border-color:rgba(200,155,92,.72); background:rgba(200,155,92,.07);
  letter-spacing:.07em; color:var(--brass-lit);
}

.perk{
  display:flex; align-items:center; gap:10px; margin:32px 0 0;
  padding:10px 18px; border:1px solid rgba(200,155,92,.22); border-radius:999px;
  background:rgba(200,155,92,.05);
  font-size:var(--fs-micro); line-height:var(--lh-tight); color:var(--bone-2);
  max-width:min(440px,100%);
}
.dot{width:5px; height:5px; border-radius:50%; background:var(--brass);
  flex:none; box-shadow:0 0 9px var(--brass)}
.opening .hint{
  margin-top:46px; color:var(--bone-3);
  letter-spacing:var(--tr-hint); font-size:var(--fs-label);
}

/* ============================================================
   GLASS CARD
   ============================================================ */
.cardwrap{
  position:absolute; inset:0; z-index:7; padding:24px; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.card{
  pointer-events:auto; width:min(var(--card-w),100%);
  background:var(--card-bg); border:1px solid var(--card-line); border-radius:20px;
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
  padding:32px 30px 28px;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0; transform:translateY(40px) scale(.985); visibility:hidden;
  transition:opacity .9s ease, transform 1s var(--ease-rise), visibility 0s linear .9s;
}
.card.up{opacity:1; transform:none; visibility:visible; transition-delay:0s}

.prog{display:flex; gap:5px; margin-bottom:22px}
.prog i{height:2px; flex:1; background:rgba(244,241,233,.13); border-radius:2px;
  transition:background .5s ease}
.prog i.on{background:var(--brass)}

.eyebrow{color:var(--brass); margin-bottom:12px}
.card h2{margin:0 0 8px}
.card .sub{font-size:var(--fs-small); color:var(--bone-2); margin:0 0 22px;
  line-height:var(--lh-tight)}

.field{margin-bottom:16px}
.field label{display:block; color:var(--bone-3); margin-bottom:8px}
.field input{
  width:100%; background:rgba(0,0,0,.26); border:1px solid rgba(244,241,233,.15);
  border-radius:11px; padding:14px 15px; font-size:var(--fs-body); color:var(--bone);
  font-family:inherit; font-weight:400; outline:none;
  transition:border-color .3s ease, background .3s ease;
}
.field input::placeholder{color:rgba(244,241,233,.28)}
.field input:focus{border-color:var(--brass); background:rgba(0,0,0,.36)}
.field input[aria-invalid="true"]{border-color:var(--alert)}
.err{display:block; font-size:var(--fs-micro); color:var(--alert);
  margin-top:8px; line-height:var(--lh-tight)}
.err:empty{margin-top:0}

.styles{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:20px}
.chip{
  border:1px solid rgba(244,241,233,.15); border-radius:11px; padding:14px 8px;
  text-align:center; font-size:var(--fs-micro); cursor:pointer; color:var(--bone-2);
  background:rgba(0,0,0,.2); line-height:1.3;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.chip:hover{border-color:rgba(200,155,92,.5); color:var(--bone)}
.chip[aria-pressed="true"]{border-color:var(--brass); background:rgba(200,155,92,.15);
  color:var(--bone); font-weight:500}

.cta{
  width:100%; background:var(--brass); color:var(--ink-on-brass); border:none;
  border-radius:11px; padding:15px; font-size:var(--fs-body); font-weight:500;
  letter-spacing:.01em; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:filter .25s ease, opacity .25s ease;
}
.cta:hover:not(:disabled){filter:brightness(1.08)}
.cta:disabled{opacity:.32; cursor:not-allowed}
.cta.busy{opacity:.78; cursor:wait}
.spin{
  width:14px; height:14px; border:2px solid rgba(23,16,6,.28);
  border-top-color:var(--ink-on-brass); border-radius:50%;
  animation:spin .7s linear infinite; display:none;
}
.cta.busy .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.cardperk{
  display:flex; gap:10px; align-items:flex-start; margin:18px 0 0; padding-top:17px;
  border-top:1px solid rgba(244,241,233,.09);
  font-size:var(--fs-micro); line-height:var(--lh-tight); color:var(--bone-2);
}
.cardperk .dot{margin-top:5px}
.cardperk b{color:var(--bone); font-weight:500}

.step[hidden]{display:none}
.step{animation:stepin .6s var(--ease-rise)}
@keyframes stepin{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}

.formerr{
  margin-top:14px; padding:12px 14px; border-radius:10px;
  background:rgba(224,137,92,.11); border:1px solid rgba(224,137,92,.32);
  font-size:var(--fs-micro); line-height:var(--lh-tight); color:#f3c6a9;
}
.formerr[hidden]{display:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ============================================================
   FINALE
   ============================================================ */
.finale{
  position:absolute; inset:0; z-index:8; padding:0 28px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; opacity:0; pointer-events:none; visibility:hidden;
}
.finale.shown{opacity:1; pointer-events:auto; visibility:visible}
.finale .flogo{height:30px; width:auto; margin-bottom:22px; opacity:.9}
.finale .fmark{color:var(--brass); margin-bottom:26px; letter-spacing:var(--tr-hint)}
.finale h1{margin:0 0 16px; max-width:17ch}
.finale .flead{font-size:var(--fs-lead); color:var(--bone-2); max-width:34ch;
  margin:0 0 32px; line-height:var(--lh-tight)}
.fperk{
  display:flex; align-items:center; gap:11px; padding:13px 21px;
  border:1px solid rgba(200,155,92,.28); border-radius:999px;
  background:rgba(200,155,92,.06); font-size:var(--fs-micro); color:var(--bone-2);
  max-width:min(440px,100%); text-align:left; line-height:var(--lh-tight);
}
.fperk b{color:var(--bone); font-weight:500}

.ghost{
  margin-top:28px; background:transparent; border:1px solid rgba(244,241,233,.22);
  border-radius:999px; padding:13px 28px; font-size:var(--fs-small); cursor:pointer;
  color:var(--bone); font-family:inherit; letter-spacing:.01em;
  transition:border-color .35s ease, background .35s ease, color .35s ease;
}
.ghost:hover{border-color:rgba(200,155,92,.62); background:rgba(200,155,92,.07);
  color:var(--brass-lit)}
.ghost[hidden]{display:none}

.share{margin-top:30px; display:flex; flex-direction:column; align-items:center; gap:13px}
.share .label{color:var(--bone-3); letter-spacing:var(--tr-hint)}
.share[hidden]{display:none}

/* ============================================================
   DEMO PANEL
   ============================================================ */
.demo{
  position:absolute; inset:0; z-index:9; padding:0;
  display:block;
  opacity:0; pointer-events:none; visibility:hidden;
}
.demo.shown{opacity:1; pointer-events:auto; visibility:visible}
.demo::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:rgba(6,5,4,.74); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.demo > *{position:relative}
.demo-frame{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; border-radius:0; box-shadow:none; overflow:hidden;
  background:#000; line-height:0;
}
/* contain, not cover: the film is UI animation and cropping it would
   cut the numbers off the edges. On a 16:9 display it fills exactly. */
.demo-frame video{
  position:absolute; inset:0;
  width:100%; height:100%; max-height:none;
  object-fit:contain; display:block; background:#000;
}
/* The film carries its own titles now, so a caption naming it is
   redundant — and at the bottom it landed straight on the player's
   scrubber. It stays in the markup for one job only: telling someone
   the sound was muted for them, which they cannot otherwise know. */
.demo .cap{
  position:absolute; left:20px; top:22px; right:auto; z-index:2;
  color:var(--bone-2); letter-spacing:var(--tr-hint); text-align:left;
  text-shadow:0 2px 12px rgba(0,0,0,.9); pointer-events:none;
  opacity:0; transition:opacity .5s ease;
}
.demo .cap.on{ opacity:1 }
.demo #demoClose{
  position:absolute; top:18px; right:18px; z-index:2; margin-top:0;
  background:rgba(8,7,6,.55); backdrop-filter:blur(6px);
}
@media (max-width:560px){
  .demo .cap{ left:12px; top:14px; font-size:var(--fs-label) }
  .demo #demoClose{ top:12px; right:12px; padding:9px 18px }
}
.demo[hidden]{display:none}

/* ============================================================
   RESPONSIVE
   Three real cases: narrow phones, short viewports, and landscape
   phones — where a centred full-height layout otherwise collides
   with itself.
   ============================================================ */
@media (max-width:540px){
  :root{ --card-w:100%; --fs-lead:14.5px; --fs-cta:19px; }
  .card{padding:26px 22px 22px}
  .joinbtn{padding:17px 42px}
  .perk{margin-top:26px; padding:10px 15px}
  .opening .hint{margin-top:34px}
  .finale .flead{margin-bottom:26px}
  .fperk{padding:12px 17px}
}

@media (max-height:680px){
  .opening .hint{display:none}
  .brandmark{margin-bottom:26px}
  .perk{margin-top:24px}
  .finale .fmark{margin-bottom:18px}
  .finale .flead{margin-bottom:24px}
}

/* Landscape phone: vertical space is the scarce resource. Let the
   card scroll inside itself rather than pushing off-screen. */
@media (max-height:560px) and (orientation:landscape){
  :root{ --fs-display:clamp(27px,5.6vw,40px); --card-w:420px; }
  .cardwrap{padding:14px}
  .card{padding:20px 22px 18px; max-height:calc(100dvh - 28px); overflow-y:auto}
  .prog{margin-bottom:14px}
  .card .sub{margin-bottom:14px}
  .field{margin-bottom:11px}
  .styles{margin-bottom:13px}
  .cardperk{margin-top:13px; padding-top:12px}
  .brandmark{margin-bottom:18px}
  .brandmark img{height:30px}
  .opening .hint{display:none}
  .perk{margin-top:18px}
  .finale .flogo{display:none}
  .finale .fmark{margin-bottom:12px}
  .finale .flead{margin-bottom:18px}
  .ghost{margin-top:16px}
  .demo-frame video{max-height:78vh}
}

@media (prefers-reduced-motion:reduce){
  .surf,.lit,.furn,.card,.opening,.finale,.demo,.torch,.media img{
    transition-duration:.2s !important; transition-delay:0s !important;
  }
  #stage.striking .strikegrp{animation:none}
  .drift{animation:none}
  .joinbtn::after{animation:none; opacity:.22}
  .step{animation:none}
  .spin{animation-duration:1.4s}
  #fx{display:none}
}


/* ── For interior studios ─────────────────────────────────────
   The only link that leaves this page, and it is deliberately the
   quietest thing on it: a homeowner should never be pulled toward
   a trade application, and a studio owner who came looking for it
   will find it in the corner where a nav would be.

   Above the vignette (z-index 20) so it survives every stage, and
   pointer-events are re-enabled only on the link itself — the
   canvas beneath it is tracking the cursor to light the room. */
.forstudios{
  position:fixed; top:20px; right:22px; z-index:30;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px;
  border:1px solid var(--card-line);
  background:var(--card-bg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--bone-2); text-decoration:none;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  pointer-events:auto;
  transition:color .22s ease, border-color .22s ease, background .22s ease;
}
.forstudios:hover,
.forstudios:focus-visible{
  color:var(--bone); border-color:rgba(244,241,233,.3);
}
.forstudios:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* On a phone the corner is where the thumb rests and the room is
   the point. Smaller, and the arrow carries it. */
@media (max-width:560px){
  .forstudios{ top:14px; right:14px; padding:8px 11px; font-size:10.5px; letter-spacing:.1em; }
  .forstudios span:first-child{ display:none; }
  .forstudios::before{ content:"Studios"; }
}

/* ============================================================
   WHY  —  the one place on the page that isn't about the offer.
   Reached from the opening, returns to it. Deliberately quiet:
   warm, small, one column, read in under a minute.
   ============================================================ */
.why-link{
  margin-top:22px; background:none; border:0; padding:6px 2px; cursor:pointer;
  font-family:inherit; font-size:var(--fs-label); letter-spacing:var(--tr-hint);
  text-transform:uppercase; color:var(--bone-3);
  border-bottom:1px solid rgba(244,241,233,.16);
  transition:color .4s ease, border-color .4s ease;
}
.why-link:hover,.why-link:focus-visible{ color:var(--bone-2); border-color:rgba(244,241,233,.4) }

.why{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,5vw,56px) clamp(22px,6vw,48px);
  opacity:0; pointer-events:none; visibility:hidden;
}
.why.shown{ opacity:1; pointer-events:auto; visibility:visible }
.why[hidden]{ display:none }
/* Deeper scrim than the demo panel: this is text, and it sits over a lit room. */
.why::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 45%, rgba(8,7,6,.86), rgba(8,7,6,.96));
  backdrop-filter:blur(3px);
}
.why-inner{
  position:relative; width:100%; max-width:36rem;
  max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  text-align:left;
}
.why-mark{
  font-size:var(--fs-label); letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--brass,#c9a227); margin-bottom:18px;
}
.why h2{
  font-size:var(--fs-title); line-height:1.24; letter-spacing:var(--tr-title);
  color:var(--bone); margin:0 0 20px; font-weight:300;
}
.why-body{
  font-size:var(--fs-body); line-height:1.75; color:var(--bone-2); margin:0 0 16px;
}
/* The turn. Set apart because it's the sentence the rest of the page is missing. */
.why-turn{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 144; font-weight:300;
  font-size:clamp(18px,2vw,21px); line-height:1.4; letter-spacing:var(--tr-title);
  color:var(--bone); margin:26px 0 24px; padding-left:18px;
  border-left:1px solid rgba(201,162,39,.5);
}
.why-last{
  font-size:var(--fs-lead); line-height:1.6; color:var(--bone);
  margin:26px 0 0; padding-top:22px; border-top:1px solid rgba(244,241,233,.12);
}
.why .ghost{ margin-top:26px }

@media (max-width:560px){
  .why-inner{ max-height:calc(100% - 8px) }
  .why-body{ line-height:1.7 }
}
/* Landscape phones: the panel is the only scrollable surface on the page. */
@media (max-height:560px) and (orientation:landscape){
  .why{ padding:18px 24px; align-items:flex-start }
  .why-inner{ padding:14px 0 }
  .why-turn{ margin:18px 0 16px }
}

/* The studio link outranks the why panel's scrim, and a recruitment CTA
   competing with "everyone knows someone this went wrong for" is the wrong
   note. Stand it down while the panel is open. */
body.why-open .forstudios{ opacity:0; pointer-events:none }

/* ============================================================
   STICKMAN
   Above the dust canvas (20) and the studio link (30): while he
   is on stage he is the only thing anyone should be watching.
   ============================================================ */
#stick{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:31;
}

/* While the blind is coming down the demo panel is a physical
   object being dragged, not a modal fading in — so it must ignore
   its own opacity transition and sit flat against the top edge. */
.demo.blind{
  opacity:1 !important; visibility:visible !important;
  transition:none !important;
  will-change:transform;
}
.demo.blind::before{ background:#0b0a09 }   /* opaque: it is a screen, not a scrim */

/* The bottom edge. This is the part he is holding, so it needs
   enough weight to look grabbable. */
.demo-edge{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,
    rgba(201,162,39,.25), rgba(201,162,39,.85) 18%,
    rgba(201,162,39,.85) 82%, rgba(201,162,39,.25));
  box-shadow:0 10px 30px rgba(0,0,0,.65), 0 1px 0 rgba(244,241,233,.22);
  opacity:0; transition:opacity .25s ease;
}
.demo.blind .demo-edge{ opacity:1 }

/* The finale is being kicked apart and covered; stop it catching
   clicks the moment the blind starts moving. */
body.curtain .finale{ pointer-events:none }

/* The studio link is z-index 30, in the page's stacking context; the
   demo panel is 9, so nothing inside the panel can ever out-rank it.
   With the film now full-bleed, that link sat directly on top of the
   Back button and ate the click — the film could not be closed at all.
   A recruitment CTA floating over a playing film is wrong regardless,
   so it stands down for the whole of it, not just the curtain. */
body.curtain .forstudios,
body.film .forstudios{ opacity:0; pointer-events:none }

/* ============================================================
   SKIP
   Six seconds of animation sits between someone and the thing
   they asked for. That always needs a way out — not only on the
   second viewing. It appears a beat late so it doesn't compete
   with his entrance, and it sits above the canvas he is drawn on.
   ============================================================ */
.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skipbtn{
  position:fixed; right:22px; bottom:22px; z-index:32;
  background:rgba(8,7,6,.55); color:var(--bone-2);
  border:1px solid rgba(244,241,233,.20); border-radius:999px;
  padding:10px 20px; cursor:pointer; font-family:inherit;
  font-size:var(--fs-label); letter-spacing:var(--tr-hint);
  text-transform:uppercase; backdrop-filter:blur(6px);
  opacity:0; transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease,
             color .3s ease, border-color .3s ease;
}
.skipbtn.shown{ opacity:1; transform:none }
.skipbtn:hover,.skipbtn:focus-visible{
  color:var(--bone); border-color:rgba(244,241,233,.45);
}
.skipbtn[hidden]{ display:none }

@media (max-width:560px){
  .skipbtn{ right:14px; bottom:14px; padding:9px 16px }
}

/* ============================================================
   THE WAITLIST GATE (30 Sep 2026)
   Two-field signup, the optional "move up 20" step, the gate line,
   the referral ladder and the member benefits.
   ============================================================ */
s.was{ color:var(--bone-3); text-decoration-thickness:1px }

/* The gate line under the opening perk. */
.gate{
  margin:16px 0 0; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--bone-3); letter-spacing:var(--tr-hint); line-height:1.5; text-align:center;
}
.gatebar{
  display:block; width:min(220px,70vw); height:2px; border-radius:2px;
  background:rgba(244,241,233,.13); overflow:hidden;
}
.gatebar[hidden]{ display:none }
.gatebar i{ display:block; height:100%; width:0; background:var(--brass);
  box-shadow:0 0 8px var(--brass); transition:width 1.2s var(--ease-cine) }
.gatecalls{ color:var(--brass-lit) }
.gatecalls[hidden]{ display:none }
.openlinks{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center }

/* The card can hold the extras step on a short phone. */
.card{ max-height:calc(100dvh - 32px); overflow-y:auto; -webkit-overflow-scrolling:touch }

.consent{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  font-size:var(--fs-micro); line-height:var(--lh-tight); color:var(--bone-2);
  margin:2px 0 4px;
}
.consent input{ margin:2px 0 0; width:16px; height:16px; accent-color:var(--brass); flex:none }
.consent a{ color:var(--brass-lit) }
#errConsent{ margin-bottom:12px }
.ts{ margin:4px 0 14px }
.ts[hidden]{ display:none }

.qlabel{ color:var(--bone-3); margin:4px 0 9px }
.opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px }
.opts4{ grid-template-columns:repeat(4,1fr) }
.opts .chip, #s3 .styles .chip{ padding:11px 6px }
#s3 .styles{ margin-bottom:18px }

.textbtn{
  display:block; margin:14px auto 0; background:none; border:0; cursor:pointer;
  color:var(--bone-3); font-family:inherit; letter-spacing:var(--tr-hint);
  padding:6px 2px; border-bottom:1px solid rgba(244,241,233,.16);
  transition:color .3s ease, border-color .3s ease;
}
.textbtn:hover,.textbtn:focus-visible{ color:var(--bone-2); border-color:rgba(244,241,233,.4) }
.textbtn[hidden]{ display:none }

/* ---- Their place ---- */
.finale{ overflow-y:auto; -webkit-overflow-scrolling:touch; justify-content:safe center;
  padding-top:28px; padding-bottom:28px }
.finale h1{ max-width:14ch; font-size:clamp(34px,5.2vw,62px) }
.finale .flead{ margin-bottom:22px }
.fgate{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 0 20px }
.fgate[hidden]{ display:none }
.fgate-t{ color:var(--bone-2); letter-spacing:var(--tr-hint) }

.ladder{
  margin-top:18px; width:min(440px,100%); text-align:left;
  border:1px solid var(--card-line); border-radius:16px; padding:16px 18px;
  background:rgba(22,20,17,.46); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.ladder[hidden]{ display:none }
.ladder-h{ color:var(--brass); line-height:1.5; margin-bottom:12px }
.rungs{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.rungs li{
  display:flex; gap:12px; align-items:baseline; font-size:var(--fs-small);
  color:var(--bone-2); line-height:var(--lh-tight);
}
.rungs li::before{
  content:''; flex:none; width:9px; height:9px; border-radius:50%;
  border:1px solid rgba(200,155,92,.6); transform:translateY(1px);
}
.rungs li.done::before{ background:var(--brass); box-shadow:0 0 8px var(--brass) }
.rungs li b{ color:var(--bone); font-weight:500; min-width:5.2em }
.rungs li.done span{ color:var(--bone) }
.society{ margin:12px 0 0; font-size:var(--fs-micro); line-height:var(--lh-tight); color:var(--bone-2) }
.society[hidden]{ display:none }
.linkrow{ display:flex; gap:8px; margin-top:14px }
.linkbox{
  flex:1; min-width:0; background:rgba(0,0,0,.26); border:1px solid rgba(244,241,233,.15);
  border-radius:999px; padding:10px 14px; color:var(--bone); text-transform:none;
  letter-spacing:.02em; font-size:var(--fs-micro); outline:none;
}
.ghost.small{ margin-top:0; padding:9px 18px; font-size:var(--fs-micro) }
.ghost.wa{ border-color:rgba(200,155,92,.5); color:var(--brass-lit) }
.share{ margin-top:18px }
.frow{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; margin-top:14px }
.frow .textbtn{ margin:0 }

/* ---- Member benefits ---- */
.perklist{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.perklist li{
  display:grid; gap:4px; padding-left:16px; border-left:1px solid rgba(200,155,92,.4);
}
.perklist b{ color:var(--bone); font-weight:500; font-size:var(--fs-body) }
.perklist span{ color:var(--bone-2); font-size:var(--fs-small); line-height:1.55 }

/* ---- Analytics consent ---- */
.cookies{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:40;
  width:min(560px,calc(100% - 32px));
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; border-radius:14px;
  background:rgba(14,12,10,.88); border:1px solid var(--card-line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:var(--fs-micro); line-height:var(--lh-tight); color:var(--bone-2);
}
.cookies[hidden]{ display:none }
.cookies > span{ flex:1 1 220px }
.cookies a{ color:var(--brass-lit) }
.cookies .ghost.on{ background:var(--brass); color:var(--ink-on-brass); border-color:var(--brass) }
body.film .cookies, body.curtain .cookies{ display:none }

@media (max-width:540px){
  .ladder{ padding:14px }
  .finale{ padding-top:64px }
  .rungs li b{ min-width:4.6em }
  .finale h1{ font-size:clamp(30px,9vw,44px) }
}
@media (max-height:680px){
  .gate{ margin-top:12px }
  .finale .fmark{ margin-bottom:12px }
}