/* ============================================================
   WAYNE DIGITAL — cinematic studio prototype
   Palette: near-black / white type / electric cyan-blue accent
   ============================================================ */
:root{
  --bg:        #05080d;
  --bg-2:      #0a0f17;
  --panel:     rgba(16, 24, 36, 0.55);
  --line:      rgba(63, 208, 245, 0.18);
  --ink:       #ffffff;
  --ink-soft:  #9fb3c2;
  --ink-dim:   #5f7585;
  --accent:    #3fd0f5;   /* electric cyan from the WD mark */
  --accent-2:  #1f8fe0;   /* deeper blue */
  --accent-glow: rgba(63, 208, 245, 0.45);
  --maxw: 1280px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }  /* anchors clear the fixed nav */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:'Space Grotesk', system-ui, sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; height:100vh; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

::selection{ background:var(--accent); color:#04070b; }

/* circuit-board base texture behind everything (kept subtle — the 3D floor carries the grid now) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  opacity:.18;
}

/* ---------- custom cursor ---------- */
.cursor{ position:fixed; inset:0; z-index:9999; pointer-events:none; mix-blend-mode:screen; }
.cursor__dot,.cursor__ring{ position:absolute; top:0; left:0; border-radius:50%; transform:translate(-50%,-50%); }
.cursor__dot{ width:6px; height:6px; background:var(--accent); }
.cursor__ring{ width:34px; height:34px; border:1.5px solid var(--accent); opacity:.6; transition:width .25s, height .25s, opacity .25s, background .25s; }
.cursor.is-hover .cursor__ring{ width:60px; height:60px; opacity:1; background:var(--accent-glow); }
.cursor.is-play .cursor__ring::after{ content:"PLAY"; position:absolute; inset:0; display:grid; place-items:center; font-size:9px; letter-spacing:2px; color:var(--ink); }
.cursor.is-play .cursor__ring{ width:74px; height:74px; opacity:1; }
@media (hover:none){ .cursor{ display:none; } }

/* ============ LOADER / START SCREEN ============ */
.loader{
  position:fixed; inset:0; z-index:900; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, #0a141f 0%, var(--bg) 70%);
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__particles{ position:absolute; inset:0; width:100%; height:100%; }
.loader__inner{ position:relative; text-align:center; padding:24px; }
.loader__logo{ width:96px; margin:0 auto 28px; filter:drop-shadow(0 0 24px var(--accent-glow)); animation:float 5s ease-in-out infinite; }
.loader__title{
  font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(2.4rem,8vw,5rem);
  letter-spacing:.04em; line-height:.95;
}
.loader__title span{ display:block; color:var(--accent); text-shadow:0 0 30px var(--accent-glow); }
.loader__tag{ color:var(--ink-soft); margin-top:18px; letter-spacing:.04em; font-size:clamp(.9rem,2vw,1.1rem); }
.loader__bar{ width:min(260px,70vw); height:2px; background:rgba(255,255,255,.12); margin:30px auto 26px; overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--accent); box-shadow:0 0 12px var(--accent); transition:width .3s linear; }

@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* ---- start-screen sound toggle ---- */
.sound-toggle{ display:inline-flex; align-items:center; gap:11px; margin-top:22px; cursor:pointer; user-select:none; color:var(--ink-soft); font-size:.82rem; letter-spacing:.08em; }
.sound-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.sound-toggle__track{ width:42px; height:22px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.06); position:relative; transition:.3s var(--ease); }
.sound-toggle__knob{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--ink-dim); transition:.3s var(--ease); }
.sound-toggle input:checked + .sound-toggle__track{ background:var(--accent-glow); border-color:var(--accent); }
.sound-toggle input:checked + .sound-toggle__track .sound-toggle__knob{ left:22px; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.sound-toggle input:focus-visible + .sound-toggle__track{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---- persistent mute/unmute button ---- */
.audio-btn{ position:fixed; bottom:22px; right:22px; z-index:250; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:rgba(5,8,13,.6); backdrop-filter:blur(10px); cursor:pointer;
  display:grid; place-items:center; transition:border-color .3s, transform .3s var(--ease), opacity .5s; }
.audio-btn:hover{ border-color:var(--accent); transform:translateY(-2px); }
.audio-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.audio-btn__bars{ display:flex; align-items:center; gap:3px; height:18px; }
.audio-btn__bars i{ width:3px; height:6px; background:var(--accent); border-radius:2px; animation:eq 1s var(--ease) infinite; }
.audio-btn__bars i:nth-child(2){ animation-delay:.2s; } .audio-btn__bars i:nth-child(3){ animation-delay:.4s; } .audio-btn__bars i:nth-child(4){ animation-delay:.1s; }
@keyframes eq{ 0%,100%{ height:5px; } 50%{ height:17px; } }
.audio-btn.is-muted .audio-btn__bars{ display:none; }
.audio-btn .audio-btn__off{ display:none; width:20px; height:20px; position:relative; }
.audio-btn.is-muted .audio-btn__off{ display:block; }
.audio-btn__off::before,.audio-btn__off::after{ content:""; position:absolute; }
.audio-btn__off::before{ left:1px; top:6px; width:0; height:0; border-style:solid; border-width:4px 6px 4px 0; border-color:transparent var(--ink-soft) transparent transparent; }
.audio-btn__off::after{ left:9px; top:3px; width:13px; height:13px; border-bottom:1.5px solid var(--ink-soft); transform:rotate(45deg); transform-origin:center; }
/* hide the button until the user has entered the studio */
body.is-loading .audio-btn{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .audio-btn__bars i{ animation:none; height:11px; } }

/* ---- mobile 3D controls (hidden on desktop; shown in the mobile media query) ---- */
a, button, .card, .node__head, .node__chip { touch-action: manipulation; }   /* snappier taps */
.try3d{ display:none; margin-top:16px; }
.try3d__note{ display:none; margin-top:10px; color:var(--ink-dim); font-size:.72rem; letter-spacing:.02em; max-width:30ch; }
.mode-btn{ display:none; }
.wd-toast{ position:fixed; left:50%; bottom:84px; transform:translate(-50%,12px); z-index:400; max-width:86vw;
  padding:.75em 1.15em; border-radius:10px; background:rgba(8,14,22,.94); border:1px solid var(--line); color:var(--ink);
  font-size:.82rem; line-height:1.4; text-align:center; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease); backdrop-filter:blur(8px); box-shadow:0 16px 40px rgba(0,0,0,.5); }
.wd-toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ============ BUTTONS ============ */
.btn{
  --b:var(--accent);
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  font-family:'Sora',sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.06em;
  padding:.9em 1.6em; border-radius:2px; border:1px solid var(--b);
  background:transparent; color:var(--ink); position:relative; overflow:hidden;
  transition:color .3s, transform .3s var(--ease);
}
.btn::before{ content:""; position:absolute; inset:0; background:var(--b); transform:translateY(101%); transition:transform .4s var(--ease); z-index:-1; }
.btn:hover{ color:#04070b; transform:translateY(-2px); }
.btn:hover::before{ transform:translateY(0); }
.btn svg path{ stroke:currentColor; }
.btn--enter{ background:var(--accent); color:#04070b; box-shadow:0 0 30px var(--accent-glow); }
.btn--enter::before{ background:#fff; }
.btn--enter:disabled{ opacity:.35; cursor:wait; box-shadow:none; }
.btn--big{ font-size:1.1rem; padding:1.1em 2.2em; }
.btn--ghost{ --b:rgba(255,255,255,.4); }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  transition:background .4s, backdrop-filter .4s, transform .5s var(--ease);
  transform:translateY(-120%);
}
.nav.is-ready{ transform:translateY(0); }
.nav.is-scrolled{ background:rgba(5,8,13,.7); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav__brand{ display:flex; align-items:center; gap:12px; font-family:'Sora',sans-serif; font-weight:800; letter-spacing:.12em; font-size:.85rem; }
.nav__brand img{ width:34px; }
.nav__links{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); font-size:.9rem; font-weight:500; }
.nav__links a{ position:relative; color:var(--ink-soft); transition:color .3s; }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--accent); transition:width .3s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ border:1px solid var(--accent); color:var(--accent)!important; padding:.5em 1.1em; border-radius:2px; }
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--accent); color:#04070b!important; }
.nav__burger{ display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span{ width:26px; height:2px; background:var(--ink); transition:.3s var(--ease); }

/* ============ HUB CANVAS ============ */
.hub{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.hub canvas{ width:100%; height:100%; display:block; }
.hub__vignette{ position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, transparent 55%, rgba(5,8,13,.6) 100%); }

/* scroll progress */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:300; background:transparent; }
.progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px var(--accent); }

/* ============ LAYOUT / PANELS ============ */
main{ position:relative; z-index:10; }
.panel{
  position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  max-width:var(--maxw); margin:0 auto; padding:16vh clamp(20px,5vw,56px) 14vh;
  scroll-margin-top:96px;            /* headings never crop under the fixed nav */
}
.slogan{ margin-top:16px; color:var(--accent); font-style:italic; letter-spacing:.02em; font-size:clamp(.95rem,2vw,1.15rem); }
.eyebrow{ color:var(--accent); letter-spacing:.4em; font-size:.78rem; font-weight:700; margin-bottom:22px; }
.display{
  font-family:'Sora',sans-serif; font-weight:800; line-height:.92;
  font-size:clamp(3rem,12vw,9rem); letter-spacing:-.02em;
}
.display em{ font-style:normal; color:var(--accent); text-shadow:0 0 40px var(--accent-glow); }
.lede{ max-width:46ch; margin-top:28px; color:var(--ink-soft); font-size:clamp(1rem,2.2vw,1.3rem); }

.section-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:48px; }
.section-head__no{ font-family:'Sora',sans-serif; color:var(--accent); font-weight:700; font-size:1rem; letter-spacing:.2em; }
.section-head__title{ font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(2rem,6vw,4.2rem); letter-spacing:-.01em; }

/* scroll-reveal — soft blur-in for a cloud-like fade */
.reveal{ opacity:0; transform:translateY(34px); filter:blur(8px); transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; filter:blur(0); }

/* hero scroll hint */
.hero__hint{ display:flex; align-items:center; gap:14px; margin-top:54px; color:var(--ink-dim); font-size:.72rem; letter-spacing:.3em; }
.hero__mouse{ width:22px; height:34px; border:1.5px solid var(--ink-dim); border-radius:12px; display:flex; justify-content:center; padding-top:6px; }
.hero__mouse i{ width:3px; height:7px; background:var(--accent); border-radius:2px; animation:scrollpip 1.6s var(--ease) infinite; }
@keyframes scrollpip{ 0%{ opacity:0; transform:translateY(-4px);} 40%{opacity:1;} 100%{ opacity:0; transform:translateY(10px);} }

/* ============ SHOWREEL ============ */
.reel{ position:relative; border:1px solid var(--line); border-radius:6px; overflow:hidden; aspect-ratio:16/9; background:#04070b; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.reel__video,.reel__poster,.reel iframe{ width:100%; height:100%; object-fit:cover; border:0; display:block; }
.reel__play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; transition:opacity .4s; }
.reel.is-playing .reel__play{ opacity:0; }
.reel__btn{ width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:var(--accent-glow); border:2px solid var(--accent); color:#fff; font-size:1.5rem; backdrop-filter:blur(4px); box-shadow:0 0 40px var(--accent-glow); }
.reel__copy{ margin:34px 0 26px; max-width:48ch; font-size:clamp(1.1rem,2.6vw,1.6rem); color:var(--ink); }

/* ============ PROJECT CARDS ============ */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:22px; }
.card{
  position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:var(--panel); backdrop-filter:blur(6px); cursor:pointer;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s;
  opacity:0; transform:translateY(40px);
}
.card.is-in{ opacity:1; transform:none; }
.card:hover{ transform:translateY(-8px); border-color:var(--accent); box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 0 1px var(--accent-glow); }
.card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.card:hover .card__media img{ transform:scale(1.07); }
.card__scan{ position:absolute; inset:0; background:linear-gradient(transparent 60%, rgba(5,8,13,.9)); }
.card__type{ position:absolute; top:14px; left:14px; font-size:.66rem; letter-spacing:.2em; font-weight:700; color:var(--accent); border:1px solid var(--accent); padding:.4em .7em; border-radius:2px; background:rgba(4,7,11,.5); }
.card__body{ padding:20px 22px 26px; }
.card__title{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.3rem; }
.card__desc{ color:var(--ink-soft); font-size:.92rem; margin:10px 0 18px; }
.card__cta{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.82rem; letter-spacing:.08em; color:var(--accent); }
.card__cta svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.card:hover .card__cta svg{ transform:translateX(5px); }
/* mission-file chrome */
.card__tab{ display:flex; align-items:center; gap:8px; padding:9px 16px; font-size:.62rem; letter-spacing:.2em; font-weight:700; color:var(--ink-dim); border-bottom:1px solid var(--line); background:rgba(4,7,11,.4); }
.card__led{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:blink 2.4s var(--ease) infinite; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.card__brackets{ position:absolute; inset:10px; pointer-events:none; opacity:0; transition:opacity .4s; }
.card__brackets::before,.card__brackets::after{ content:""; position:absolute; width:18px; height:18px; border:2px solid var(--accent); }
.card__brackets::before{ top:0; left:0; border-right:0; border-bottom:0; }
.card__brackets::after{ bottom:0; right:0; border-left:0; border-top:0; }
.card:hover .card__brackets{ opacity:1; }
/* featured (hero) project card */
.card--featured{ grid-column:1 / -1; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-glow), 0 20px 50px rgba(0,0,0,.5); }
.card--featured .card__media{ aspect-ratio:16/9; }
.card--featured .card__tab{ color:var(--accent); }
.card--featured .card__title{ font-size:clamp(1.5rem,3vw,2.1rem); }
.card--featured .card__desc{ font-size:1rem; max-width:70ch; }
.card__stat{ position:absolute; top:14px; right:14px; z-index:2; background:var(--accent); color:#04070b; font-weight:700; font-size:.66rem; letter-spacing:.06em; padding:.4em .7em; border-radius:2px; box-shadow:0 0 16px var(--accent-glow); }
/* modal additions */
.modal__stat{ color:var(--accent); font-weight:700; font-size:.85rem; letter-spacing:.04em; margin:4px 0 2px; }
.modal__actions{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.modal__soon{ color:var(--ink-dim); font-size:.85rem; }

/* ============ CASE-STUDY OVERLAY ============ */
.modal{ position:fixed; inset:0; z-index:800; display:none; }
.modal.is-open{ display:block; }
.modal__scrim{ position:absolute; inset:0; background:rgba(3,5,9,.82); backdrop-filter:blur(8px); opacity:0; transition:opacity .4s; }
.modal.is-open .modal__scrim{ opacity:1; }
.modal__panel{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-46%); opacity:0;
  width:min(900px,92vw); max-height:88vh; overflow:auto; border:1px solid var(--accent);
  border-radius:10px; background:linear-gradient(180deg,#0a131f,#05080d); padding:0;
  transition:transform .5s var(--ease), opacity .5s; box-shadow:0 40px 120px rgba(0,0,0,.7);
}
.modal.is-open .modal__panel{ transform:translate(-50%,-50%); opacity:1; }
.modal__media{ aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line); }
.modal__media img{ width:100%; height:100%; object-fit:cover; }
.modal__inner{ padding:30px clamp(22px,4vw,44px) 40px; }
.modal__type{ color:var(--accent); letter-spacing:.2em; font-weight:700; font-size:.74rem; }
.modal__title{ font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(1.8rem,4vw,3rem); margin:8px 0 16px; }
.modal__desc{ color:var(--ink-soft); font-size:1.05rem; max-width:60ch; }
.modal__close{ position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(5,8,13,.7); color:#fff; font-size:1.2rem; cursor:pointer; transition:.3s; }
.modal__close:hover{ border-color:var(--accent); transform:rotate(90deg); }

/* ============ SERVICES — interactive capability console ============ */
.nodes__hint{ color:var(--ink-dim); letter-spacing:.04em; font-size:.85rem; margin-bottom:18px; }
.nodes{ list-style:none; display:flex; flex-direction:column; gap:10px; max-width:860px; }
.node{ position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel); backdrop-filter:blur(8px); transition:border-color .4s, box-shadow .4s; opacity:0; transform:translateY(24px); }
.node.is-in{ opacity:1; transform:none; }
.node:hover,.node.is-open{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-glow), 0 14px 40px rgba(0,0,0,.45); }
.node__head{ width:100%; display:flex; align-items:center; gap:16px; padding:20px 22px; background:none; border:0; color:var(--ink); cursor:pointer; text-align:left; font-family:inherit; }
.node__ix{ color:var(--accent); font-family:'Sora',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.2em; flex:none; }
.node__name{ font-family:'Sora',sans-serif; font-weight:700; font-size:clamp(1.05rem,2.4vw,1.35rem); flex:1; }
.node__plus{ position:relative; width:16px; height:16px; flex:none; }
.node__plus::before,.node__plus::after{ content:""; position:absolute; background:var(--accent); transition:transform .35s var(--ease); }
.node__plus::before{ left:7px; top:0; width:2px; height:16px; }
.node__plus::after{ left:0; top:7px; width:16px; height:2px; }
.node.is-open .node__plus::before{ transform:scaleY(0); }
.node__panel{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.node.is-open .node__panel{ max-height:320px; }
.node__desc{ color:var(--ink-soft); font-size:.95rem; padding:0 22px; margin-bottom:14px; }
.node__related{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:0 22px 22px; }
.node__rlabel{ color:var(--ink-dim); font-size:.66rem; letter-spacing:.22em; font-weight:700; width:100%; }
.node__chip{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:.84rem; font-weight:600; color:var(--accent); background:rgba(63,208,245,.08); border:1px solid var(--line); border-radius:40px; padding:.5em 1em; cursor:pointer; transition:.3s var(--ease); }
.node__chip svg{ width:14px; height:14px; }
.node__chip:hover{ background:var(--accent); color:#04070b; border-color:var(--accent); transform:translateY(-2px); }
.node__chip svg path{ stroke:currentColor; }

/* ============ HERO CTAs ============ */
.hero__support{ margin-top:16px; max-width:52ch; color:var(--ink-soft); font-size:clamp(.95rem,1.9vw,1.1rem); line-height:1.5; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* ============ SERVICES — "in development" badge ============ */
.node__soon{ display:inline-block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:40px; padding:.2em .6em; margin-left:8px; vertical-align:middle; }

/* ============ INTERACTIVE VIEWER (Tours) ============ */
.viewer__panel{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); backdrop-filter:blur(8px); box-shadow:0 24px 60px rgba(0,0,0,.5); max-width:820px; }
.viewer__body{ padding:32px clamp(22px,4vw,40px); }
.viewer__lead{ font-family:'Sora',sans-serif; font-size:clamp(1.15rem,2.6vw,1.6rem); font-weight:600; line-height:1.3; }
.viewer__first{ margin-top:16px; color:var(--ink-soft); }
.viewer__label{ display:inline-block; color:var(--accent); font-size:.66rem; font-weight:700; letter-spacing:.18em; border:1px solid var(--line); border-radius:3px; padding:.35em .6em; margin-right:10px; }
.viewer__statusrow{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:26px; }
.viewer__status{ display:inline-flex; align-items:center; gap:9px; font-family:'Sora',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.06em; padding:.55em 1em; border-radius:40px; border:1px solid var(--line); background:rgba(4,7,11,.4); }
.viewer__dot{ width:9px; height:9px; border-radius:50%; background:var(--ink-dim); }
.viewer__status[data-state="available"]{ color:#48e5a0; border-color:#48e5a0; } .viewer__status[data-state="available"] .viewer__dot{ background:#48e5a0; box-shadow:0 0 10px #48e5a0; animation:blink 2s var(--ease) infinite; }
.viewer__status[data-state="inuse"]{ color:#ffb454; border-color:#ffb454; } .viewer__status[data-state="inuse"] .viewer__dot{ background:#ffb454; box-shadow:0 0 10px #ffb454; }
.viewer__status[data-state="offline"]{ color:var(--ink-dim); } .viewer__status[data-state="offline"] .viewer__dot{ background:var(--ink-dim); }
.viewer__status[data-state="soon"]{ color:var(--accent); border-color:var(--accent); } .viewer__status[data-state="soon"] .viewer__dot{ background:var(--accent); box-shadow:0 0 10px var(--accent-glow); }
.viewer__cta:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.viewer__cta:disabled:hover{ transform:none; }
.viewer__cta:disabled::before{ transform:translateY(101%); }
.viewer__note{ margin-top:18px; color:var(--ink-dim); font-size:.85rem; max-width:52ch; }

/* ============ CONTACT additions ============ */
.contact__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.contact__avail{ color:var(--ink-soft); font-size:.95rem; margin-top:6px; }
.contact__email a{ color:var(--accent); font-weight:600; letter-spacing:.02em; border-bottom:1px solid transparent; transition:border-color .3s; }
.contact__email a:hover{ border-color:var(--accent); }

/* ============ START-SCREEN choices (3D primary / Simple secondary) ============ */
.enter-choices{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }
.enter-note{ margin-top:12px; color:var(--ink-dim); font-size:.8rem; letter-spacing:.02em; }
#enterSimpleBtn{ opacity:.9; }

/* ============ SIMPLE MODE (user chose the lightweight studio) ============ */
body.wd-simple .hub{ display:none !important; }          /* no 3D canvas */
body.wd-simple .studio-bg{ opacity:1 !important; }        /* show the cinematic CSS backdrop instead */

/* ============ CONTACT FORM ============ */
.cform{ width:100%; max-width:620px; margin:8px auto 0; text-align:left; display:flex; flex-direction:column; gap:14px; }
.cform__row{ display:flex; gap:14px; flex-wrap:wrap; }
.cform__row .cform__field{ flex:1; min-width:200px; }
.cform__field{ display:flex; flex-direction:column; gap:6px; }
.cform__field > span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.cform__field > span em{ color:var(--ink-dim); font-style:normal; text-transform:none; letter-spacing:0; font-weight:500; }
.cform input, .cform select, .cform textarea{
  width:100%; background:rgba(6,12,20,.6); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font:inherit; font-size:.95rem; padding:.7em .85em; transition:border-color .3s, box-shadow .3s;
}
.cform input:focus, .cform select:focus, .cform textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.cform textarea{ resize:vertical; min-height:110px; }
.cform select{ appearance:none; cursor:pointer; }
.cform option{ background:#0a1420; color:var(--ink); }
.cform__actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.cform__status{ color:var(--ink-soft); font-size:.85rem; }

/* ============ ABOUT ============ */
.about__grid{ display:grid; gap:30px; max-width:60ch; }
.about__lead{ font-family:'Sora',sans-serif; font-size:clamp(1.4rem,4vw,2.6rem); font-weight:600; line-height:1.25; }
.about__lead strong{ color:var(--accent); }
.about__note{ color:var(--ink-soft); font-size:1.1rem; border-left:2px solid var(--accent); padding-left:20px; }

/* ============ CONTACT ============ */
.contact{ justify-content:center; text-align:center; align-items:center; }
.contact__inner{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.contact__h{ font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(2.4rem,9vw,6rem); line-height:.95; letter-spacing:-.02em; }
.contact__sub{ color:var(--accent); font-size:clamp(1.2rem,3vw,1.8rem); letter-spacing:.02em; }
.footer{ position:absolute; bottom:0; left:0; right:0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:22px clamp(20px,5vw,56px); border-top:1px solid var(--line); color:var(--ink-dim); font-size:.78rem; letter-spacing:.05em; }

/* ============ READABILITY — text separation from the 3D ============ */
/* Frosted plate behind the hero copy = fake depth-of-field + strong contrast */
.hero__content{
  position:relative; max-width:760px; padding:38px clamp(24px,4vw,46px) 34px;
  border-left:2px solid var(--accent);
  background:linear-gradient(105deg, rgba(5,8,13,.82) 0%, rgba(5,8,13,.5) 60%, rgba(5,8,13,.08) 100%);
  backdrop-filter:blur(7px); border-radius:0 14px 14px 0;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
/* soft dimming directly behind each major heading so 3D never competes with type */
.section-head{ position:relative; }
.section-head::before{
  content:""; position:absolute; left:-6vw; right:-6vw; top:-30px; bottom:-30px; z-index:-1;
  background:radial-gradient(120% 140% at 20% 50%, rgba(5,8,13,.75), transparent 70%);
  filter:blur(8px); pointer-events:none;
}
.section-head__zone{ display:inline-block; color:var(--accent); font-family:'Sora',sans-serif; font-weight:700;
  font-size:.66rem; letter-spacing:.32em; border:1px solid var(--line); border-radius:3px; padding:.45em .8em;
  margin-left:6px; background:rgba(4,7,11,.5); align-self:center; }
/* readable copy plates */
.lede, .reel__copy, .about__lead, .about__note{ position:relative; }
.about__grid{ background:linear-gradient(120deg, rgba(5,8,13,.7), rgba(5,8,13,.2)); backdrop-filter:blur(6px);
  padding:30px 28px; border-radius:14px; border-left:2px solid var(--accent); }
.contact__inner{ background:radial-gradient(120% 120% at 50% 40%, rgba(5,8,13,.7), transparent 70%); padding:40px 30px; border-radius:18px; }

/* ============ SCREENING ROOM (showreel media wall) ============ */
.screening{ position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:rgba(6,11,18,.72); backdrop-filter:blur(8px); box-shadow:0 36px 90px rgba(0,0,0,.6), 0 0 0 1px var(--accent-glow); }
.screening__bar{ display:flex; align-items:center; gap:12px; padding:11px 16px; font-size:.66rem; letter-spacing:.18em;
  font-weight:700; color:var(--ink-soft); border-bottom:1px solid var(--line); background:rgba(4,7,11,.5); }
.screening__rec{ width:9px; height:9px; border-radius:50%; background:#ff5a5a; box-shadow:0 0 10px #ff5a5a; animation:blink 1.6s var(--ease) infinite; }
.screening__name{ color:var(--accent); }
.screening__tc{ margin-left:auto; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.screening .reel{ border:0; border-radius:0; box-shadow:none; }
.screening__scan{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(63,208,245,.04) 0 2px, transparent 2px 4px); mix-blend-mode:screen; }
.screening__wave{ display:flex; align-items:center; justify-content:center; gap:4px; height:46px; padding:0 16px; border-top:1px solid var(--line); background:rgba(4,7,11,.4); }
.screening__wave span{ flex:1; max-width:7px; background:linear-gradient(var(--accent),var(--accent-2)); border-radius:2px; height:30%; animation:wave 1.4s var(--ease) infinite; }
.screening__wave span:nth-child(odd){ animation-delay:.2s; } .screening__wave span:nth-child(3n){ animation-delay:.45s; } .screening__wave span:nth-child(4n){ animation-delay:.7s; }
@keyframes wave{ 0%,100%{ height:18%; } 50%{ height:90%; } }
/* showreel hover cue — it reads as a clickable screen */
.reel{ cursor:pointer; }
.reel:hover .reel__btn{ transform:scale(1.08); box-shadow:0 0 60px var(--accent-glow); }

/* ============ SHOWREEL LIGHTBOX (full-screen player) ============ */
.reel-lb{ position:fixed; inset:0; z-index:800; display:none; }
.reel-lb.is-open{ display:block; }
.reel-lb__scrim{ position:absolute; inset:0; background:rgba(3,5,9,.9); backdrop-filter:blur(10px); }
.reel-lb__frame{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(1100px,94vw); aspect-ratio:16/9; border:1px solid var(--accent); border-radius:10px; overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.7), 0 0 0 1px var(--accent-glow); background:#04070b; }
.reel-lb__video, .reel-lb__video iframe{ width:100%; height:100%; border:0; display:block; }
.reel-lb__close{ position:absolute; top:-14px; right:-14px; z-index:2; width:42px; height:42px; border-radius:50%; border:1px solid var(--accent); background:rgba(5,8,13,.92); color:#fff; font-size:1.1rem; cursor:pointer; transition:.3s; }
.reel-lb__close:hover{ background:var(--accent); color:#04070b; transform:rotate(90deg); }
@media (max-width:760px){ .reel-lb__close{ top:8px; right:8px; } }

/* ============ ABOUT portrait (hidden until asset exists) ============ */
.about__portrait{ max-width:260px; border-radius:12px; border:1px solid var(--line); align-self:start; }

/* ============ CSS STUDIO BACKDROP (shown when 3D is off: mobile / reduced-motion / no-WebGL) ============ */
/* IMAGE HOOK: drop your Unreal studio screenshot at assets/studio/studio-hero.jpg and it
   becomes the cinematic backdrop here automatically (a 404 just falls back to the gradient). */
.studio-bg{ position:fixed; inset:0; z-index:0; overflow:hidden;
  background:linear-gradient(rgba(5,8,13,.62), rgba(5,8,13,.86)), url('assets/studio/studio-hero.jpg') center/cover no-repeat, radial-gradient(140% 120% at 50% 30%, #0a1622 0%, #05080d 60%);
  transition:opacity .8s; }
body.hub-on .studio-bg{ opacity:0; }                 /* 3D active → hide fallback */
.studio-bg__glow{ position:absolute; inset:-20%; background:radial-gradient(circle at 50% 38%, var(--accent-glow), transparent 55%); opacity:.5; animation:bgpulse 9s var(--ease) infinite; }
.studio-bg__grid{ position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%); opacity:.5; }
.studio-bg__hex{ position:absolute; top:50%; left:50%; width:min(46vw,420px); transform:translate(-50%,-54%); opacity:.1; filter:drop-shadow(0 0 40px var(--accent-glow)); }
@keyframes bgpulse{ 0%,100%{ opacity:.35; } 50%{ opacity:.6; } }

/* ============ RESPONSIVE ============ */
@media (max-width:760px){
  .nav__links{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; justify-content:center; align-items:flex-start; gap:26px; padding:40px; background:rgba(5,8,13,.96); backdrop-filter:blur(16px); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .5s var(--ease); font-size:1.2rem; }
  .nav.is-open .nav__links{ transform:translateX(0); }
  .nav__burger{ display:flex; z-index:201; }
  .nav.is-open .nav__burger span:first-child{ transform:translateY(4px) rotate(45deg); }
  .nav.is-open .nav__burger span:last-child{ transform:translateY(-4px) rotate(-45deg); }
  .hub__vignette{ background:radial-gradient(circle at 50% 50%, transparent 30%, rgba(5,8,13,.92) 100%); }
  /* premium mobile fallback: simpler plates, fuller-bleed reads */
  .hero__content{ padding:26px 22px; backdrop-filter:blur(5px); }
  .section-head{ flex-wrap:wrap; gap:10px; }
  .nodes{ max-width:100%; }
  .studio-bg__hex{ width:70vw; opacity:.08; }
  .audio-btn{ bottom:16px; right:16px; }
  /* mobile 3D controls become visible */
  .try3d{ display:inline-flex; }
  .try3d__note{ display:block; }
  .mode-btn{ display:inline-flex; align-items:center; gap:8px; position:fixed; left:16px; bottom:16px; z-index:250;
    padding:.7em 1.1em; border-radius:40px; border:1px solid var(--accent); background:rgba(5,8,13,.72);
    backdrop-filter:blur(10px); color:var(--accent); font-family:'Sora',sans-serif; font-weight:700;
    font-size:.78rem; letter-spacing:.04em; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.4); }
  .mode-btn[data-mode="3d"]{ color:var(--ink-soft); border-color:var(--line); }
  body.is-loading .mode-btn{ display:none; }   /* hidden on the start screen */
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition-duration:.01ms!important; }
  .reveal,.card,.node{ opacity:1!important; transform:none!important; }
  .hub{ display:none; } /* drop 3D for motion-sensitive users */
  body::before{ opacity:.2; }
}
/* ?motion override: force the 3D experience on even under reduced-motion (for previews) */
html.wd-force-motion .hub{ display:block !important; }