/* The IMC Lab — modern layer. Governed by DESIGN.md at the repo root.
   Loaded after the Surreal layout stylesheet, on every page. It restyles the
   ported theme rather than replacing it: markup and scripts stay as they are. */

/* Metric-matched fallbacks, measured 2026-09-15 in Chrome against the loaded
   faces ("The IMC Lab Early to every new medium" at 100px): Archivo at wdth 125
   is 123.7% the width of Arial, Host Grotesk 102.9%. Without them the hero text
   reflowed when the web fonts arrived (mobile CLS 0.108). */
/* Self-hosted variable fonts (Fontsource 5.3.0, OFL-1.1: fonts/OFL-*.txt). Latin and Latin
   Extended subsets; the browser fetches only the subsets a page uses. Replaced Google Fonts
   on 2026-09-15: no third-party request, no visitor IP sent to Google. */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"), url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(../fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations"), url(../fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Host Grotesk"; font-style: normal; font-display: swap; font-weight: 300 800; src: url(../fonts/host-grotesk-latin-wght-normal.woff2) format("woff2-variations"), url(../fonts/host-grotesk-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Host Grotesk"; font-style: normal; font-display: swap; font-weight: 300 800; src: url(../fonts/host-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations"), url(../fonts/host-grotesk-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Host Grotesk"; font-style: italic; font-display: swap; font-weight: 300 800; src: url(../fonts/host-grotesk-latin-wght-italic.woff2) format("woff2-variations"), url(../fonts/host-grotesk-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Host Grotesk"; font-style: italic; font-display: swap; font-weight: 300 800; src: url(../fonts/host-grotesk-latin-ext-wght-italic.woff2) format("woff2-variations"), url(../fonts/host-grotesk-latin-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 123.7%; ascent-override: 71.1%; descent-override: 17%; line-gap-override: 0%; }
@font-face { font-family: "Host Grotesk Fallback"; src: local("Arial"); size-adjust: 102.9%; ascent-override: 98.2%; descent-override: 31.1%; line-gap-override: 0%; }

:root {
  --ground: #111214;
  --panel: #1a1b1f;
  --text: #ecedef;
  --fog: #9ea2aa;
  --accent: #4bb5e2;
  --hair: rgba(255, 255, 255, .10);
  --display: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --body: "Host Grotesk", "Host Grotesk Fallback", Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
  --nav: 64px;
}

/* ---------------------------------------------------------------- base */
html { scroll-padding-top: var(--nav); }
/* In-page links glide under the fixed nav (was a jQuery animation), unless Reduce Motion is on. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body, body.touch-device {
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--ground);
}
@media (max-width: 767px) { body { font-size: 16px; } }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
}
/* Archivo at full width is much wider than the Oswald it replaced; a long
   uppercase word (STEREOSCOPIC) no longer fit a 300px phone column. */
h1, h2, h3, h4, .entry-summary, .entry-content { overflow-wrap: break-word; }
p a { color: var(--accent); }
a:hover, p a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.page { background: var(--ground); }

.eyebrow {
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fog);
  margin: 0 0 16px;
}
.displayHeading {
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -.025em;
  text-transform: none;
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn.btnPrimary { background: var(--text); color: #111; }
.btn.btnPrimary:hover { background: var(--accent); color: #051017; }
.btn.btnGhost { border: 1px solid rgba(255, 255, 255, .5); color: #fff; background: rgba(17, 18, 20, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn.btnGhost:hover { background: #fff; color: #111; border-color: #fff; }

/* ------------------------------------------------------------- top bar */
.sticky-wrapper { height: 0 !important; }
nav {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100% !important; /* jquery.sticky writes an inline width captured at load */
  box-sizing: border-box;
  z-index: 1000;
  height: var(--nav);
  margin: 0;
  text-align: left;
  background: rgba(17, 18, 20, .55);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--hair);
}
nav .container { width: 100%; max-width: none; padding: 0 var(--gutter); box-sizing: border-box; }
nav .container .sixteen.columns { width: auto; float: none; margin: 0; display: flex; align-items: center; height: var(--nav); }
nav #nav { flex: 1; min-width: 0; display: block !important; }
nav ul { float: none; height: auto; padding: 0; margin: 0; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
nav ul li { float: none; margin: 0; }
nav ul li:first-child { margin-right: auto; }
nav ul li:has(> a[href$="#r5"]) { order: 99; }
nav ul li a {
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: rgba(236, 237, 239, .78);
  padding: 8px 0;
}
nav ul li a:hover { color: #fff; }
/* Typographic wordmark instead of the 2019 neon JPG logo. The image stays in
   the menu (and its alt text) but is hidden; the link text is drawn here. */
nav ul li:first-child > a { display: inline-flex; align-items: center; height: var(--nav); padding: 0; }
nav ul li:first-child > a > span { display: inline-flex; align-items: center; }
/* The lab's neon logo (inc/social.php); the glow is part of the artwork, so it gets room to breathe. */
nav ul li:first-child img.navLogo { display: block; float: none; transform: none; width: auto; max-width: none; height: 54px; margin: 0 0 0 -10px; }
@media (max-width: 1180px) { nav #nav { flex: 1 1 auto; } }
@media (max-width: 900px) { nav ul li:first-child img.navLogo { height: 46px; } }
nav ul li a[href$="#r5"] { padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; color: #fff; }
nav ul li a[href$="#r5"]:hover { background: #fff; color: #111; }
#navigation, .mobile-menu, .dropmenu { display: none !important; }
/* Instagram and X, just before the Contact pill (inc/social.php). */
nav ul li.navSocial { order: 98; }
nav ul li.navSocial + li.navSocial { margin-left: calc(-1 * clamp(16px, 2.4vw, 36px) + 6px); }
nav ul li.navSocial a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: #fff; transition: background .2s, color .2s; }
nav ul li.navSocial a:hover { background: rgba(255, 255, 255, .12); }
nav ul li.navSocial .socialIcon { width: 19px; height: 19px; }
nav ul li.navSocial .socialWord { width: 26px; }
nav ul li.navSocialMenuOnly { display: none; }
nav ul li.navSocial .navSocialName { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.navToggle { display: none; }

@media (max-width: 1180px) {
  nav #nav { flex: 0 1 auto; }
  nav ul li:not(:first-child) { display: none; }
  .navToggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto; padding: 0;
    background: none; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; color: #fff; cursor: pointer;
  }
  .navToggle span, .navToggle span::before, .navToggle span::after { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; content: ""; transition: transform .2s; }
  .navToggle span::before { position: absolute; top: -5px; }
  .navToggle span::after { position: absolute; top: 5px; }
  nav.isOpen .navToggle span { background: transparent; }
  nav.isOpen .navToggle span::before { transform: translateY(5px) rotate(45deg); }
  nav.isOpen .navToggle span::after { transform: translateY(-5px) rotate(-45deg); }
  nav.isOpen ul {
    position: fixed; top: var(--nav); left: 0; right: 0; height: calc(100dvh - var(--nav));
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 32px var(--gutter); background: var(--ground); overflow-y: auto;
  }
  nav.isOpen ul li { display: block; }
  nav.isOpen ul li:first-child { display: none; }
  nav.isOpen ul li a { font-size: 28px; letter-spacing: -.01em; text-transform: none; color: var(--text); padding: 10px 0; display: block; }
  nav.isOpen ul li a[href$="#r5"] { border: 0; padding: 10px 0; }
  nav.isOpen ul li.navSocial, nav.isOpen ul li.navSocialMenuOnly { display: block; order: 100; margin: 0; }
  nav.isOpen ul li.navSocial + li.navSocial { margin: 0; }
  nav.isOpen ul li.navSocial a { display: flex; align-items: center; width: auto; height: auto; border-radius: 0; gap: 14px; padding: 10px 0; justify-content: flex-start; }
  nav.isOpen ul li.navSocial a:hover { background: none; }
  nav.isOpen ul li.navSocial .socialIcon { width: 26px; height: 26px; }
  nav.isOpen ul li.navSocial .navSocialName { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  nav .container .sixteen.columns::before { content: none; }
}

/* ------------------------------------------------------ particle field */
.labScene { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.labScene.isLive { opacity: 1; }
.labScene canvas { display: block; width: 100% !important; height: 100% !important; }
.labHud { position: fixed; right: calc(var(--gutter) / 2 - 6px); top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; z-index: 3; margin: 0; display: flex; gap: 18px; font-family: var(--display); font-stretch: 125%; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(236, 237, 239, .55); opacity: 0; transition: opacity .6s; pointer-events: none; }
body.labLive.labInView .labHud { opacity: 1; }
.labHud span { white-space: nowrap; }
.labHud .labLabel::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 10px 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@media (hover: none), (max-width: 1100px) { .labHud { display: none; } }
.labControls { position: fixed; right: var(--gutter); bottom: 22px; z-index: 4; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 8px; max-width: min(780px, calc(100% - 2 * var(--gutter))); opacity: 0; pointer-events: none; transition: opacity .5s; }
body.labLive.labInView .labControls { opacity: 1; pointer-events: auto; }
body.labFormInView .labControls, body.labFormInView .labHud { opacity: 0 !important; pointer-events: none !important; }
.labBtn { margin: 0; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(17, 18, 20, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: rgba(236, 237, 239, .85); font-family: var(--display); font-stretch: 125%; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.labBtn:hover { border-color: #fff; color: #fff; }
.labBtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #051017; }
.labCam { order: -1; width: 128px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); transform: scaleX(-1); }
.labNote { flex-basis: 100%; margin: 0; text-align: right; font-size: 12px; color: rgba(236, 237, 239, .7); }
/* The hidden attribute must always win: older theme rules give buttons a display value that overrides it. */
[hidden] { display: none !important; }
/* Mute toggle (speaker icon) and the Jarvis easter egg (js/lab-jarvis.js). */
.labBtn.labSound { display: inline-flex; align-items: center; gap: 7px; }
.labBtn svg { width: 16px; height: 16px; flex: none; }
.labJarvisBtn.isNew { border-color: var(--accent); color: #fff; box-shadow: 0 0 0 0 rgba(75, 181, 226, .6); animation: jarvisPulse 1.6s ease-out 4; }
@keyframes jarvisPulse { to { box-shadow: 0 0 0 14px rgba(75, 181, 226, 0); } }
.labJarvis { position: fixed; right: var(--gutter); bottom: 74px; z-index: 8; width: min(360px, calc(100% - 2 * var(--gutter))); padding: 16px 18px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(17, 18, 20, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); color: var(--text); box-sizing: border-box; }
.labJarvisHead { display: flex; align-items: center; justify-content: space-between; }
.labJarvisHead .eyebrow { margin: 0; color: var(--accent); }
.labJarvisClose { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: none; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.labJarvisLead { margin: 8px 0 14px; font-size: 14px; line-height: 1.45; color: rgba(236, 237, 239, .78); }
.labJarvisGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.labJarvisGrid .labBtn { width: 100%; }
.labJarvisGrid .labBtn[disabled] { opacity: .35; cursor: not-allowed; }
.labJarvisHeard { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(236, 237, 239, .62); min-height: 2.9em; }
/* Key to the field: star colours, how to explore, hand gestures. */
.labKeyWizard { width: min(272px, calc(100% - 2 * var(--gutter))); opacity: .72; transition: opacity .2s ease; }
.labKeyWizard > :not(.labKeyHead):not(.labKeyHands) { display: none; }
.labKeyWizard:hover, .labKeyWizard:focus-within { opacity: 1; }
.labKey { position: fixed; left: var(--gutter); bottom: 22px; z-index: 8; width: min(330px, calc(100% - 2 * var(--gutter))); max-height: calc(100svh - var(--nav) - 44px); overflow-y: auto; padding: 14px 16px 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(17, 18, 20, .8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--text); box-sizing: border-box; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); }
.labKeyHead { display: flex; align-items: center; justify-content: space-between; }
.labKeyHead .eyebrow { margin: 0; }
.labKeyClose { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: none; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.labKeyTitle { margin: 12px 0 6px; font-family: var(--display); font-stretch: 125%; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(236, 237, 239, .55); }
.labKeyTypes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.labKeyTypes li { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.labKeyTypes i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.labKeyTypes b { margin-left: auto; font-weight: 400; color: rgba(236, 237, 239, .45); font-variant-numeric: tabular-nums; }
.labKeyHow { margin: 0; display: grid; gap: 3px; }
.labKeyHow div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 6px; margin: 0 -6px; border-radius: 6px; font-size: 12.5px; transition: background .25s; }
.labKeyHow dt { margin: 0; color: #fff; font-weight: 500; }
.labKeyHow dd { margin: 0; color: rgba(236, 237, 239, .62); text-align: right; }
.labKeyHow div.isOn { background: rgba(75, 181, 226, .22); }
/* The hand, as a cursor. */
.labHandCursor { position: fixed; left: 0; top: 0; z-index: 10; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 0 18px rgba(75, 181, 226, .8); pointer-events: none; transition: width .15s, height .15s, background .15s; }
.labHandCursor.isOpen { width: 40px; height: 40px; border-color: rgba(75, 181, 226, .9); }
.labHandCursor.isPinch { width: 14px; height: 14px; background: var(--accent); }
/* Spiral: sections stand in the field's 3D space (js/lab-interact.js, engine api.pin). The field draws
   see-through above them, so particles pass in front of and behind them; one stacking order for all. */
body.isSpiral #content { overflow: clip; }   /* sections turned in 3D must not add to the page's scroll length, sideways or below its end */
body.isSpiral .labScene { z-index: 3; }
body.isSpiral #homepage, body.isSpiral .showcase, body.isSpiral .nextSection { z-index: auto; overflow: visible; }
body.isSpiral .showcaseHead, body.isSpiral .showcasePanel { position: relative; }
body.isSpiral .isPinned { animation: none; will-change: transform, opacity; border-radius: 18px; background-color: rgba(17, 18, 20, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
/* The h3m wordmark is 201x60: size both sides, and outrank the square icon rule. */
#footer .socialFooterLink .socialIcon.socialLogo { width: 54px; height: 16px; object-fit: contain; }
#footer .socialFooterLink:hover .socialIcon.socialLogo { filter: invert(1); }
nav ul li.navSocial .socialIcon.socialLogo { width: 37px; height: 11px; object-fit: contain; }
@media (max-width: 767px) { .labHandBtn, .labControls [data-lab="spiral"] { display: none; } .labBtn.labSound span, .labLiveGo { display: none; } .labShare { left: var(--gutter); right: var(--gutter); width: auto; bottom: 64px; } }
/* Discovery toasts: "Constellation found", "Complete", "Jarvis unlocked". */
.labToast { position: fixed; left: 50%; top: calc(var(--nav) + 18px + env(safe-area-inset-top, 0px)); z-index: 9; transform: translate(-50%, -8px); max-width: calc(100% - 2 * var(--gutter)); padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 210, 122, .45); background: rgba(17, 18, 20, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 13px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; box-shadow: 0 0 40px -10px rgba(255, 210, 122, .5); }
.labToast.isOn { opacity: 1; transform: translate(-50%, 0); }
.labTipFound { font-family: var(--display); font-stretch: 125%; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #ffd27a; }
/* Look around: the camera behind a transparent field. */
.labLookVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.labLookVideo.isMirrored { transform: scaleX(-1); }
body.labLooking .labScene { z-index: 1; }
body.labLooking .heroShade { opacity: .35; }
/* In AR the camera is the view: the hero's words step aside, the controls stay. */
body.labLooking .heroContent, body.labLooking .heroCredit { opacity: 0; pointer-events: none; transition: opacity .4s; }
/* Portals posts over the skyline (js/lab-geo.js), after the City of Holograms references:
   neon light floating above the city, a beam down to where each was made. */
.labGeo { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.labGeo.isWaiting::after { content: "Finding north and your position…"; position: absolute; left: 50%; top: 18%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(17, 18, 20, .7); color: #fff; font-size: 12px; }
.labGeoPost { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; width: var(--size, 120px); margin: 0; padding: 0; border: 0; background: none; color: #fff; pointer-events: auto; cursor: pointer; will-change: transform; }
.labGeoHolo { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 18%; overflow: hidden; mix-blend-mode: screen; box-shadow: 0 0 0 1.5px rgba(var(--glow), .9), 0 0 24px rgba(var(--glow), .85), 0 0 70px rgba(var(--glow), .45); animation: labGeoBob 4.5s ease-in-out var(--bob, 0s) infinite; }
.labGeoHolo img, .labGeoHolo video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.35) contrast(1.1) brightness(1.1); }
.labGeoHolo video { position: absolute; inset: 0; }
.labGeoPost.isMythic .labGeoHolo, .labGeoPost.isAnomaly .labGeoHolo { box-shadow: 0 0 0 2px rgba(var(--glow), 1), 0 0 34px rgba(var(--glow), .95), 0 0 110px rgba(var(--glow), .55); }
.labGeoPost.vfx-electrify .labGeoHolo i { background: radial-gradient(circle, #fff 0, rgba(var(--glow), 1) 14%, rgba(var(--glow), 0) 60%), repeating-conic-gradient(from 10deg, rgba(var(--glow), .0) 0 22deg, rgba(var(--glow), .8) 24deg 26deg); }
.labGeoPost.vfx-fire .labGeoHolo i { background: radial-gradient(ellipse 45% 60% at 50% 65%, #fff7ed 0, rgba(var(--glow), 1) 25%, rgba(220, 38, 38, .6) 55%, transparent 72%); }
.labGeoPost.vfx-circuits_environment .labGeoHolo i { background: radial-gradient(circle, rgba(var(--glow), .9) 0, transparent 62%), repeating-linear-gradient(0deg, rgba(var(--glow), .55) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(var(--glow), .55) 0 1px, transparent 1px 9px); }
.labGeoPost.vfx-hifi_hologram_pointcloud .labGeoHolo i, .labGeoPost.vfx-sparkles .labGeoHolo i { background: radial-gradient(circle, rgba(var(--glow), .85) 0, transparent 60%), radial-gradient(rgba(255, 255, 255, .95) 1px, transparent 1.6px) 0 0 / 8px 8px; }
.labGeoPost.vfx-strands .labGeoHolo i { background: repeating-linear-gradient(100deg, rgba(var(--glow), .85) 0 2px, transparent 2px 10px), radial-gradient(circle, rgba(var(--glow), .6) 0, transparent 65%); }
.labGeoPost.vfx-fresh_hologram .labGeoHolo i { background: radial-gradient(circle, transparent 0 34%, rgba(var(--glow), 1) 38% 44%, transparent 48%), radial-gradient(circle, rgba(var(--glow), .7) 0, transparent 65%); }
.labGeoCard video { display: block; width: 100%; max-height: 34vh; object-fit: cover; border-radius: 12px; }
.labGeoHolo i { display: block; width: 100%; height: 100%; background: radial-gradient(circle, #fff 0, rgba(var(--glow), 1) 22%, rgba(var(--glow), 0) 68%); }
.labGeoHolo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 4px); }
.labGeoBeam { position: absolute; top: 100%; left: 50%; width: 2px; height: var(--beam, 0); transform: translateX(-50%); background: linear-gradient(rgba(var(--glow), .9), rgba(var(--glow), 0)); box-shadow: 0 0 10px rgba(var(--glow), .8); pointer-events: none; }
.labGeoName { margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(17, 18, 20, .66); font-family: var(--display); font-stretch: 110%; font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; text-shadow: 0 0 8px rgba(var(--glow), .9); }
.labGeoName b { font-weight: 400; color: rgba(255, 255, 255, .7); }
.labGeoPost:not(.hasName) .labGeoName { opacity: 0; transition: opacity .3s; }
.labGeoCard { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 9; padding: 12px 12px 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(17, 18, 20, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; }
.labGeoCard img { display: block; width: 100%; max-height: 34vh; object-fit: cover; border-radius: 12px; }
.labGeoCard h2 { margin: 4px 4px 0; font-family: var(--display); font-size: 20px; text-transform: none; }
.labGeoCard .eyebrow { margin: 12px 4px 0; }
.labGeoDist { margin: 4px 4px 0; font-size: 13px; color: rgba(236, 237, 239, .66); }
.labGeoRow { display: flex; gap: 8px; margin: 12px 4px 0; }
@keyframes labGeoBob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .labGeoHolo { animation: none; } }
/* Star tooltip: a real project, artist, distinction or paper under the cursor. */
.labTip { position: fixed; left: 0; top: 0; z-index: 6; display: flex; flex-direction: column; gap: 3px; max-width: 280px; padding: 10px 14px 11px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(17, 18, 20, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text); pointer-events: none; box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .8); }
.labTipType { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-stretch: 125%; font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(236, 237, 239, .66); }
.labTipType::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, #fff); box-shadow: 0 0 10px var(--dot, #fff); }
.labTipName { font-size: 15px; font-weight: 500; line-height: 1.3; }
.labTipSub { font-size: 12px; color: rgba(236, 237, 239, .62); }
.labTipRel { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 11.5px; line-height: 1.4; color: rgba(236, 237, 239, .72); }
.labOrbit { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .35s; }
.labOrbit.isOn { opacity: 1; }
.labOrbit img { position: absolute; left: 0; top: 0; width: 58px; height: 58px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7), 0 0 24px -6px rgba(75, 181, 226, .45); will-change: transform; }
body.labStarHot, body.labStarHot .showcaseText, body.labStarHot .heroContent { cursor: pointer; }
/* Hover loops over grid stills (inc/showcase.php imclab_post_loop), and in the star tooltip. */
.thumbImage { position: relative; }
.thumbLoop { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.thumbLoop.isPlaying { opacity: 1; }
.labTipVideo { display: block; width: 100%; aspect-ratio: 16 / 10; margin: 2px 0 6px; object-fit: cover; border-radius: 8px; background: #0b0c0e; }
.labTipVideo[hidden] { display: none; }
/* Inside a star (js/lab-focus.js): the field flies in, the card says what it is, the
   things it links to circle it. The page dims behind so the card reads on any section. */
.labFocus { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(ellipse 75% 75% at 50% 50%, rgba(17, 18, 20, .45) 0, rgba(17, 18, 20, .8) 55%, rgba(17, 18, 20, .94) 100%); }
.labFocus.isOn { opacity: 1; }
/* Inside a star the page's own words fade to nothing, so the star (and its world) is the view. */
body.labInStar .heroContent, body.labInStar .heroCredit, body.labInStar .showcase, body.labInStar #next, body.labInStar .page.section, body.labInStar .clientBand { opacity: .05; transition: opacity .45s ease; }
.labFocusCard { position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: min(380px, calc(100vw - 2 * var(--gutter))); padding: 10px 10px 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(17, 18, 20, .76); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--text); pointer-events: auto; outline: none; transform: translate(-50%, -50%) scale(.94); transition: transform .5s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 70px -24px var(--dot, #4bb5e2); }
.labFocus.isOn .labFocusCard { transform: translate(-50%, -50%) scale(1); }
@media (min-width: 900px) {
  .labFocus.hasWorld { background: radial-gradient(ellipse 45% 60% at 50% 50%, rgba(17, 18, 20, 0) 0, rgba(17, 18, 20, .35) 70%, rgba(17, 18, 20, .8) 100%); }
  .labFocus.hasWorld .labFocusCard { left: 24%; }
}
.labFocusMedia { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 13px; background: #0b0c0e; }
.labFocusMedia img, .labFocusMedia video { display: block; width: 100%; height: 100%; object-fit: cover; }
.labFocusGlyph { width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0, var(--dot, #fff) 16%, rgba(17, 18, 20, 0) 64%); }
.labFocusType { display: flex; align-items: center; gap: 8px; margin: 14px 8px 0; font-family: var(--display); font-stretch: 125%; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(236, 237, 239, .7); }
.labFocusType::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #fff); box-shadow: 0 0 12px var(--dot, #fff); }
.labFocusName { margin: 6px 8px 0; font-family: var(--display); font-stretch: 110%; font-size: clamp(20px, 1.9vw, 25px); font-weight: 600; line-height: 1.16; letter-spacing: -.01em; text-transform: none; color: #fff; }
.labFocusSub { margin: 5px 8px 0; font-size: 13px; line-height: 1.45; color: rgba(236, 237, 239, .64); }
.labFocusActions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 8px 0; }
.labFocusGo, .labFocusShare { display: inline-flex; align-items: center; height: 38px; margin: 0; padding: 0 16px; border-radius: 999px; font-family: var(--display); font-stretch: 125%; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.labFocusGo { background: #fff; color: #111 !important; border: 1px solid #fff; }
.labFocusGo:hover { background: var(--dot, #4bb5e2); border-color: var(--dot, #4bb5e2); }
.labFocusShare { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .32); }
.labFocusShare:hover { border-color: #fff; }
.labFocusCredit { margin: 12px 8px 0; font-size: 10.5px; line-height: 1.4; color: rgba(236, 237, 239, .5); }
.labFocusClose { position: absolute; top: 18px; right: 18px; z-index: 1; width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(17, 18, 20, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.labFocusClose:hover { background: #fff; color: #111; }
.labFocusRel { margin: 0; padding: 0; list-style: none; }
.labFocusRel li { position: absolute; left: 0; top: 0; margin: 0; pointer-events: auto; will-change: transform, opacity; }
.labFocusRel button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; margin: 0; padding: 0; border: 0; background: none; color: #fff; font-size: 11.5px; line-height: 1.25; text-align: center; cursor: pointer; }
.labFocusRel img, .labFocusRel i { display: block; width: 58px; height: 58px; border-radius: 14px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8), 0 0 24px -6px var(--dot, #4bb5e2); transition: border-color .2s, transform .2s; }
.labFocusRel i { background: radial-gradient(circle, #fff 0, var(--dot, #fff) 20%, rgba(17, 18, 20, .92) 68%); }
.labFocusRel span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 2px 6px; border-radius: 6px; background: rgba(17, 18, 20, .72); }
.labFocusRel button:hover img, .labFocusRel button:hover i, .labFocusRel button:focus-visible img, .labFocusRel button:focus-visible i { border-color: #fff; transform: scale(1.08); }
@media (max-width: 719px) {
  .labFocusCard { top: 44%; }
  .labFocusRel { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 4px; overflow-x: auto; padding: 0 var(--gutter); pointer-events: auto; scrollbar-width: none; }
  .labFocusRel li { position: static; flex: none; opacity: 1 !important; }
}
/* The first-time gesture guide (js/lab-interact.js, createCoach). */
.labCoach { position: fixed; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); z-index: 8; display: flex; align-items: center; gap: 14px; box-sizing: border-box; width: max-content; max-width: min(540px, calc(100vw - 2 * var(--gutter))); padding: 12px 12px 12px 16px; border-radius: 18px; border: 1px solid rgba(6, 182, 212, .5); background: rgba(17, 18, 20, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; transform: translateX(-50%); box-shadow: 0 0 50px -14px rgba(6, 182, 212, .7); }
.labCoach.isDone { border-color: rgba(255, 210, 122, .6); box-shadow: 0 0 50px -14px rgba(255, 210, 122, .7); }
.labCoach p { margin: 0; }
.labCoachStep { font-family: var(--display); font-stretch: 125%; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #67e8f9; }
.labCoach.isDone .labCoachStep { color: #ffd27a; }
.labCoachText { margin-top: 3px !important; font-size: 14px; line-height: 1.4; }
.labCoachHand { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(6, 182, 212, .14); }
.labCoachHand i { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #e0fbff; box-shadow: 0 0 12px #06b6d4; animation: labPinch 1.6s ease-in-out infinite; }
.labCoachHand i:first-child { left: 4px; }
.labCoachHand i:last-child { right: 4px; animation-name: labPinchR; }
@keyframes labPinch { 0%, 20%, 100% { transform: translateX(0); } 50%, 65% { transform: translateX(8px); } }
@keyframes labPinchR { 0%, 20%, 100% { transform: translateX(0); } 50%, 65% { transform: translateX(-8px); } }
.labCoachSkip { flex: none; height: 32px; margin: 0; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: rgba(255, 255, 255, .8); font-size: 12px; cursor: pointer; }
.labCoachSkip:hover { border-color: #fff; color: #fff; }
@media (prefers-reduced-motion: reduce) { .labCoachHand i { animation: none; } .labFocus, .labFocusCard { transition: none; } }


/* ---------------------------------------------------------------- hero */
#homepage.heroReel { position: relative; z-index: 1; height: 100svh !important; min-height: 560px; overflow: hidden; background: transparent; padding: 0; }
.heroMedia, .heroShade { position: absolute; inset: 0; }
.heroPoster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transition: opacity 1.4s ease; }
body.labLive .heroPoster { opacity: 0; }
.heroShade { background: linear-gradient(90deg, rgba(17, 18, 20, .72) 0%, rgba(17, 18, 20, .25) 45%, rgba(17, 18, 20, 0) 70%), linear-gradient(0deg, rgba(17, 18, 20, .9) 0%, rgba(17, 18, 20, 0) 35%); }
.heroContent .eyebrow { color: rgba(236, 237, 239, .8); }
.heroContent { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(88px, 14vh, 160px); max-width: 1180px; animation: heroIn 1.1s ease-out both; }
#homepage .heroTitle {
  font-size: clamp(60px, 11vw, 188px);
  line-height: .86;
  letter-spacing: -.04em;
  font-weight: 600;
  text-transform: none;
  text-align: left;
  margin: 0 0 24px;
  padding: 0;
}
.heroLead { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45; max-width: 36ch; color: rgba(236, 237, 239, .9); margin: 0 0 30px; }
.heroActions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Clients in the first screen: one quiet row, fading out where it runs past the edge. */
/* Clients and partners: edge to edge under the hero text, marks growing with the screen. */
.heroContent { max-width: none; }
.heroContent > :not(.heroClients) { max-width: 1180px; }
.heroClients { margin-top: clamp(22px, 3.2vh, 40px); }
.heroClientsLabel { margin: 0 0 clamp(10px, 1.4vh, 16px); font-family: var(--display); font-stretch: 125%; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(236, 237, 239, .5); }
.heroClientsTrack { display: flex; overflow: hidden; }
.heroClients ul { list-style: none; flex: 1 0 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 2vw, 40px); }
.heroClients li { flex: 0 1 auto; min-width: 0; margin: 0; line-height: 0; }
.heroClients img { display: block; height: calc(var(--k) * clamp(18px, 2.1vw, 42px)); width: auto; max-width: 100%; object-fit: contain; opacity: .62; transition: opacity .25s; }
.heroClients li:hover img { opacity: 1; }
.heroClientsCopy { display: none !important; }
@media (max-width: 767px) {
  .heroClients { margin-top: 18px; margin-right: calc(-1 * var(--gutter)); }
  .heroClientsLabel { display: none; }
  .heroClients ul { flex: none; justify-content: flex-start; gap: 28px; padding-right: 28px; animation: heroMarquee 38s linear infinite; }
  .heroClientsCopy { display: flex !important; }
  .heroClients img { height: calc(var(--k) * 24px); }
}
@keyframes heroMarquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .heroClients ul { animation: none; } .heroClientsTrack { overflow-x: auto; } }
.heroCredit { position: absolute; left: var(--gutter); bottom: 30px; margin: 0; font-family: var(--display); font-stretch: 125%; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(236, 237, 239, .5); }
.heroCredit span { margin: 0 .6em; opacity: .5; }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1280px) { .heroCredit { display: none; } }
/* Where the proof line shows, the field controls sit just above it rather than on it. */
@media (min-width: 1281px) { .labControls { bottom: 58px; } }
@media (max-width: 767px) {
  /* The field controls sit in one row under the hero buttons, never on them. */
  .heroContent { bottom: 76px; }
  .labControls { left: var(--gutter); bottom: 16px; max-width: none; justify-content: flex-start; gap: 6px; }
  .labBtn { height: 32px; padding: 0 11px; letter-spacing: .1em; }
  .heroShade { background: linear-gradient(0deg, rgba(17, 18, 20, .92) 0%, rgba(17, 18, 20, .35) 55%, rgba(17, 18, 20, .15) 100%); }
  .heroActions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------------------- selected work */
/* Media cards over the particle field. Images show at or below their own
   resolution, so nothing is upscaled into grain. */
.showcase { position: relative; z-index: 1; background: transparent; padding-bottom: clamp(40px, 8vw, 120px); }
.showcaseHead { max-width: 1280px; margin: 0 auto; padding: clamp(96px, 14vw, 200px) var(--gutter) clamp(40px, 6vw, 88px); }
.showcaseHead .displayHeading { max-width: 14ch; }
.showcasePanel { max-width: 1280px; margin: 0 auto; padding: clamp(40px, 7vw, 110px) var(--gutter); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.showcasePanel.isFlipped .showcaseText { order: 2; }
.showcaseMedia { margin: 0; position: relative; border-radius: 16px; overflow: hidden; background: var(--panel); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 120px -40px rgba(75, 181, 226, .35), 0 20px 60px -30px rgba(0, 0, 0, .8); aspect-ratio: 16 / 10; }
.showcaseImage { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.showcasePanel:hover .showcaseImage { transform: scale(1.03); }
.showcase .showcaseTitle { font-size: clamp(34px, 4vw, 60px); line-height: .96; letter-spacing: -.03em; text-transform: none; margin: 0 0 18px; }
.showcaseText { text-shadow: 0 1px 18px rgba(17, 18, 20, .95), 0 0 4px rgba(17, 18, 20, .8); }
.showcaseDesc { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: rgba(236, 237, 239, .82); margin: 0 0 26px; max-width: 40ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .showcaseMedia, .showcaseText { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes rise { from { opacity: 0; transform: translateY(60px) scale(.97); } to { opacity: 1; transform: none; } }
  }
}
@media (max-width: 899px) {
  .showcasePanel { grid-template-columns: 1fr; }
  .showcasePanel.isFlipped .showcaseText { order: 0; }
  .showcaseMedia { order: -1; }
}

/* ---------------------------------------------------------------- next */
.nextSection { background: transparent; position: relative; z-index: 1; }
.nextInner { max-width: 1200px; margin: 0 auto; padding: clamp(96px, 13vw, 176px) var(--gutter); }
.nextInner .displayHeading { max-width: 17ch; margin-bottom: clamp(44px, 6vw, 80px); }
.nextGrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nextItem { background: rgba(17, 18, 20, .55); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: clamp(28px, 3.4vw, 48px); margin: 0; }
.nextSection .nextItem h3 { font-size: clamp(21px, 2.1vw, 30px); line-height: 1.12; text-transform: none; margin: 0 0 14px; }
.nextItem p { color: var(--fog); margin: 0 0 20px; max-width: 46ch; }
.nextItem a { font-family: var(--display); font-stretch: 125%; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.nextItem a:hover { color: #fff; }
@media (max-width: 767px) { .nextGrid { grid-template-columns: 1fr; } }

/* ------------------------------------------------ one-page sections */
.page.section, #r1.page.section { padding-top: clamp(88px, 11vw, 150px) !important; position: relative; z-index: 2; }
.page h2.sectionHeading { font-size: clamp(44px, 7vw, 104px); line-height: .95; letter-spacing: -.035em; font-weight: 500; text-transform: none; margin: 0 0 18px; }
.page h2.sectionHeading span { color: var(--fog); }
.page .sixteen.columns > h3 { font-family: var(--body); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; font-weight: 400; color: var(--fog); max-width: 60ch; margin: 0 0 12px; }
.page .sixteen.columns > h3 span { font-size: inherit; font-weight: inherit; text-transform: none; }
.page .sixteen.columns > h3 .mediumBold, .page .sixteen.columns > h3 .largeBold, .page .sixteen.columns > h3 .smallBold { color: var(--text); font-weight: 500; }

/* Portfolio grid: uniform tiles that open the project page. */
.gallerySelector { margin: 8px 0 24px; background: none; height: auto; min-height: 44px; }
.gallerySelector .gallerySelectorList { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.gallerySelector .gallerySelectorList li { float: none; width: auto; margin: 0; padding: 0; background: none; list-style: none; text-align: left; }
.gallerySelector .gallerySelectorList li a { display: inline-block; padding: 9px 16px; border: 1px solid var(--hair); border-radius: 999px; font-family: var(--display); font-stretch: 125%; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); background: none; }
.gallerySelector .gallerySelectorList li.current a, .gallerySelector .gallerySelectorList li a:hover { background: var(--text); color: #111; border-color: var(--text); }
.portfolio_container .portfolio { padding: 0 4px 8px; box-sizing: border-box; }
/* The grid's columns by viewport, as the Isotope layout set them (js/site.js filters the tiles). */
.portfolio_container .portfolio { width: 100%; }
@media (min-width: 601px) { .portfolio_container .portfolio { width: 50%; } }
@media (min-width: 1001px) { .portfolio_container .portfolio { width: calc(100% / 3); } }
@media (min-width: 1401px) { .portfolio_container .portfolio { width: 25%; } }
.portfolio_container .portfolio[hidden], .accContainer[hidden] { display: none !important; }
.portfolio_container .thumbImage { position: relative; overflow: hidden; border-radius: 4px; background: var(--panel); margin: 0; }
.portfolio_container .thumbImage img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.portfolio_container .thumbImage:hover img { transform: scale(1.04); }
.portfolio_container .thumbImage .thumbTextWrap { position: absolute; inset: 0; width: auto; height: auto; display: flex; align-items: flex-end; z-index: 2; background: linear-gradient(0deg, rgba(10, 11, 13, .72), rgba(10, 11, 13, .38) 34%, rgba(10, 11, 13, 0) 58%); opacity: 0; transition: opacity .3s; }
.portfolio_container .thumbImage .thumbTextWrap::before { content: none; }
.portfolio_container .thumbImage:hover .thumbTextWrap, .portfolio_container .thumbImage:focus-within .thumbTextWrap { opacity: 1; }
.portfolio_container .thumbImage .thumbText { position: static; transform: none; padding: 18px; text-align: left; width: auto; }
.portfolio_container .thumbImage .thumbText { text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.portfolio_container .thumbImage .thumbText h3 { border: 0; font-size: 18px; line-height: 1.2; text-transform: none; padding: 0; margin: 0 0 6px; color: #fff; }
.portfolio_container .thumbImage .thumbText p { font-size: 13px; line-height: 1.4; color: rgba(236, 237, 239, .8); margin: 0; }
.portfolio_container .thumbImage .thumbLink { position: absolute; inset: 0; font-size: 0; background: none; width: auto; height: auto; }
@media (hover: none) { .portfolio_container .thumbImage .thumbTextWrap { opacity: 1; } }

/* The lab's own record + News + Awards. */
.studioBlock .studioIntro, .studioBlock .studioAchievements li { font-size: 17px; line-height: 1.6; color: #cfd2d6; }
.studioBlock .studioMission { color: var(--fog); }
.studioBlock h3.sectionTitle, .newsAwards h3.sectionTitle { font-size: clamp(24px, 2.4vw, 34px); text-transform: none; border-color: var(--hair); }

/* Services: image, title, one line. No flip card. */
.serviceItem { width: auto; height: auto; margin: 0 0 32px; box-shadow: none; background-image: none !important; }
.serviceInfoWrap, .serviceInfo { position: static; width: auto; height: auto; box-shadow: none; background: none; }
.serviceInfo > div { position: static; height: auto; }
.serviceInfo .serviceInfoFront { aspect-ratio: 4 / 3; background-size: cover; border-radius: 4px; transform: none !important; opacity: 1 !important; }
.serviceInfo .serviceInfoBack { background: none; opacity: 1; transform: none; pointer-events: auto; text-align: left; padding: 16px 0 0; }
.serviceIcon { display: none; }
.serviceInfo h3 { text-align: left; margin: 0 0 8px; font-size: 20px; text-transform: none; }
.serviceInfo p { border: 0; margin: 0; padding: 0; color: var(--fog); font-size: 15px; }

/* Products: consistent cards whether the image is a photo or a logo. */
/* Products: the flagship, then what you can use today, what venues book, the archive. */
.products { display: grid; gap: clamp(32px, 4.5vw, 56px); }
#features .productsLead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: rgba(236, 237, 239, .82); max-width: 46ch; margin: 10px 0 clamp(28px, 3.5vw, 48px); }
.productFeature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.productFeatureMedia { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--panel); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 120px -40px rgba(75, 181, 226, .35); }
.productFeatureMedia img, .productFeatureMedia video { display: block; width: 100%; height: 100%; object-fit: cover; }
.products .productStatus { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.productDot { width: 8px; height: 8px; border-radius: 50%; background: #7ef5c8; box-shadow: 0 0 10px #7ef5c8; }
.products .productName { display: block; margin: 12px 0 14px; font-family: var(--display); font-size: clamp(32px, 3.4vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -.02em; text-transform: none; color: var(--text); }
.products .productLine { margin: 0 0 22px; max-width: 46ch; font-size: 17px; line-height: 1.55; color: rgba(236, 237, 239, .82); }
.productActions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.products .productsGroupTitle { margin: 0 0 16px; }
.productGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.productCard { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(26, 27, 31, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .2s, transform .2s; }
.productCard:hover { border-color: rgba(255, 255, 255, .28); transform: translateY(-2px); }
.productCardHead { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.productIcon { flex: none; width: 64px; height: 64px; border-radius: 15px; object-fit: cover; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .9); }
.productCard .productName { margin: 0; font-size: 22px; }
.productCard .productStatus { display: block; margin-top: 5px; font-size: 12px; letter-spacing: .02em; color: var(--fog); }
.productCard .productLine { flex: 1; margin: 0; font-size: 15px; }
.productMore { font-size: 13px; color: var(--accent); }
.productArchive { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--fog); }
.productArchive a { margin-right: 6px; font-weight: 600; color: var(--text); }
.productArchive span { margin-left: 6px; font-size: 12px; opacity: .86; }
@media (max-width: 899px) { .productFeature { grid-template-columns: 1fr; } }

/* Bands. The two stock quotes go; the lab's own lines stay, set quieter. */
/* All five bands go (2026-09-15): the particle field replaced the parallax era. Their lines live on elsewhere: Nation of Makers in the hero credits, the showroom in Contact. */
.parallax { display: none !important; }
.parallax .quote h3, .parallax .quote h3[style] { font-family: var(--display); font-stretch: 125%; font-size: clamp(26px, 3.4vw, 52px); max-width: 24ch; margin-left: auto; margin-right: auto; line-height: 1.02; letter-spacing: -.02em; text-transform: none; background: none !important; }
.parallax .quote h3 span { font-size: inherit !important; text-transform: none !important; font-weight: 500; }
.parallax .quote h3 .largeBold, .parallax .quote h3 .mediumBold, .parallax .quote h3 .smallBold { font-weight: 700; }

/* Forms. */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width: 100%; max-width: 100%; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--hair); border-radius: 6px;
  padding: 14px 16px; font-family: var(--body); font-size: 16px; color: var(--text);
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { box-shadow: none; border-color: var(--accent); outline: none; }
.formSecWrap { float: none; margin: 0; }
/* Not the sidebar search button: the theme sets it as a 26px icon over its input. */
a.button, button[type="submit"]:not(.wp-block-search__button), input[type="submit"] {
  box-sizing: border-box; max-width: 100%;
  background: var(--text); color: #111; border: 0; border-radius: 999px; min-height: 48px; height: auto; padding: 14px 24px; line-height: 1.3; white-space: normal; text-align: center;
  font-family: var(--display); font-stretch: 125%; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
a.button:hover, button[type="submit"]:not(.wp-block-search__button):hover, input[type="submit"]:hover { background: var(--accent); color: #051017; }

/* Footer. */
#footer { background: var(--ground); border-top: 1px solid var(--hair); position: relative; z-index: 2; }
/* Portals early access (inc/signup.php). */
.nextCta { margin-left: 18px; }
.joinSection { position: relative; z-index: 1; padding: clamp(72px, 10vw, 140px) var(--gutter); }
.joinInner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.joinIntro .displayHeading { max-width: 13ch; }
.joinLead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: rgba(236, 237, 239, .82); max-width: 40ch; }
.joinForm { padding: clamp(20px, 3vw, 32px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(26, 27, 31, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.joinRoles { border: 0; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.joinRoles legend { margin-bottom: 10px; font-family: var(--display); font-stretch: 125%; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.joinReq { text-transform: none; letter-spacing: 0; font-family: var(--body, inherit); font-weight: 400; color: rgba(236, 237, 239, .55); }
.joinRole { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; transition: border-color .2s, background .2s; }
.joinRole:hover { border-color: rgba(255, 255, 255, .35); }
.joinRole:has(input:checked) { border-color: var(--accent); background: rgba(75, 181, 226, .1); }
.joinRole input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.joinRole strong { display: block; color: #fff; font-size: 15px; }
.joinRole em { display: block; font-style: normal; font-size: 13px; line-height: 1.45; color: rgba(236, 237, 239, .66); }
.joinFields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.joinField { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(236, 237, 239, .78); }
.joinField b { color: var(--accent); font-weight: 500; }
.joinField input, .joinField textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(17, 18, 20, .6); color: #fff; font: inherit; font-size: 15px; }
.joinField input:focus, .joinField textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.joinField small { font-size: 12px; color: rgba(236, 237, 239, .5); }
.joinWide { grid-column: 1 / -1; }
.joinTrap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.joinConsent { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(236, 237, 239, .55); }
.joinSubmit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.joinStatus { margin: 0; font-size: 14px; color: rgba(236, 237, 239, .85); }
.joinForm.isSent .joinStatus { color: #7cf5c8; }
@media (max-width: 900px) { .joinInner { grid-template-columns: 1fr; } .joinFields { grid-template-columns: 1fr; } }

/* Clients, partner studios and press (inc/clients.php): white marks, faded until hovered. */
#footer .clientBand { clear: both; max-width: 1180px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 0 clamp(24px, 3vw, 40px); text-align: center; }
#footer .clientBand .eyebrow { margin: 0 0 10px; }
#footer .clientNote { margin: 0 auto clamp(28px, 4vw, 48px); max-width: 52ch; font-size: 14px; color: rgba(236, 237, 239, .55); }
#footer .clientMarks { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(26px, 4vw, 56px) clamp(32px, 5vw, 72px); }
#footer .clientMarks li { margin: 0; padding: 0; list-style: none; line-height: 0; }
#footer .clientMarks img { display: block; max-width: 100%; height: auto; opacity: .36; transition: opacity .35s, transform .35s; }
#footer .clientMarks li:hover img { opacity: .95; transform: translateY(-2px); }
#footer .clientMarks.isStudios { margin-top: clamp(26px, 4vw, 48px); padding-top: clamp(26px, 4vw, 48px); border-top: 1px solid rgba(255, 255, 255, .07); max-width: 720px; }
#footer .clientPressTitle { margin-top: clamp(40px, 6vw, 72px) !important; }
#footer .clientMarks.isPress img { opacity: .3; }
@media (max-width: 600px) { #footer .clientMarks { gap: 24px 30px; } #footer .clientMarks img { transform: scale(.82); } #footer .clientMarks li:hover img { transform: scale(.82); } }
#footer .socialFooter { clear: both; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(36px, 5vw, 64px) 0 clamp(20px, 3vw, 36px); text-align: center; }
#footer .socialFooter .eyebrow { margin: 0; }
.socialFooterLinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#footer .socialFooterLink { display: inline-flex; margin: 0; align-items: center; gap: 12px; height: 56px; padding: 0 24px 0 18px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; font-family: var(--display); font-stretch: 125%; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; }
#footer .socialFooterLink b { font-weight: 500; letter-spacing: .02em; text-transform: none; color: rgba(236, 237, 239, .7); margin-left: 4px; }
#footer .socialFooterLink:hover { background: #fff; border-color: #fff; color: #111; }
#footer .socialFooterLink:hover b { color: #333; }
#footer .socialFooterLink .socialWord { width: 32px; }
#footer .socialFooterLink .socialIcon { flex: none; width: 24px; height: 24px; }

/* App store buttons (inc/stores.php). Apple's badge is used unaltered. */
.showcaseActions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.storeBadges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.portfolio-single .storeBadges { margin: 28px 0 8px; }
.storeBadge { display: inline-flex; height: 40px; border-radius: 8px; line-height: 1; transition: opacity .2s; }
.storeBadge:hover { opacity: .82; }
.storeBadge:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.storeBadge img { display: block; width: auto; height: 40px; }
.storeQuest { align-items: center; gap: 8px; padding: 0 13px 0 10px; box-sizing: border-box; background: #000; border: 1px solid #a6a6a6; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Host Grotesk", "Helvetica Neue", Arial, sans-serif; }
.storeQuest svg { width: 26px; height: 26px; flex: none; }
.storeQuest span { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.storeQuest small { font-size: 9px; font-weight: 500; letter-spacing: .01em; margin-bottom: 2px; }

@media (prefers-reduced-motion: reduce) {
  .heroContent { animation: none; }
  .heroVideo { display: none; }
  .portfolio_container .thumbImage img { transition: none; }
}

/* ------------------------------------------------------------- presence */
/* The hand as light, and holograms of you and everyone live (js/lab-live.js). */
/* A ghost of the hand: it shows where you point without hiding the page under it. */
.labBones { position: fixed; inset: 0; z-index: 6; width: 100vw; height: 100vh; pointer-events: none; opacity: .25; }
.labCam.isQuiet { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.labHolos { position: fixed; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; }   /* a fixed layer isolates its children, so the layer itself blends: black is empty space */
.labHolo { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; will-change: transform, opacity; }
.labHolo canvas { display: block; filter: saturate(.8) brightness(1.2) contrast(1.05); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); animation: holoFlicker 6s steps(1) infinite; }
.labHolo.isSelf canvas { transform: scaleX(-1); }
.labHolo::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 18px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(75, 181, 226, .5), rgba(75, 181, 226, 0)); transition: opacity .3s; opacity: .6; }
.labHolo.isSpeaking canvas { filter: saturate(.95) brightness(1.5) contrast(1.05); }
.labHolo.isSpeaking::before { opacity: 1; background: radial-gradient(closest-side, rgba(126, 245, 200, .7), rgba(126, 245, 200, 0)); }
/* In 3D the person is in the field; the HTML is only their name tag over the head. */
.labHolos:has(.isTag) { mix-blend-mode: normal; }
.labHolo.isTag::before { display: none; }
.labHolo.isTag figcaption { position: static; transform: none; }
.labHoloMood { font-style: normal; font-weight: 500; letter-spacing: .04em; text-transform: none; color: #ffd27a; }
.labHoloMood:empty { display: none; }
.labHolo figcaption > span:first-child { color: var(--holo, inherit); }
.labRoomShare input { width: 100%; font-size: 13px; }
.labHolo figcaption { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--display); font-stretch: 125%; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(214, 240, 255, .92); text-shadow: 0 0 12px rgba(75, 181, 226, .9); pointer-events: auto; }
.labHoloMute { height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(17, 18, 20, .6); color: #fff; font: inherit; font-size: 10px; cursor: pointer; opacity: 0; transition: opacity .2s; }
.labHolo figcaption:hover .labHoloMute, .labHoloMute:focus-visible { opacity: 1; }
@media (hover: none) { .labHoloMute { opacity: .85; } }
@keyframes holoFlicker { 0%, 100% { opacity: 1; } 61% { opacity: .9; } 62% { opacity: .55; } 63% { opacity: 1; } }
.labBtn.labMicBtn, .labBtn.labShareBtn { width: 36px; padding: 0; display: inline-grid; place-items: center; }
.labBtn.isNew { box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(75, 181, 226, .7); }
.labNoteLink { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.labShare { position: fixed; right: var(--gutter); bottom: 74px; z-index: 9; width: min(420px, calc(100% - 2 * var(--gutter))); max-height: calc(100svh - var(--nav) - 96px); overflow-y: auto; padding: 16px 18px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(17, 18, 20, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--text); box-sizing: border-box; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); }
.labShareHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.labShareHead .eyebrow { margin: 0; }
.labShareClose { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: none; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.labShareImg { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: #1a1b1f; margin-bottom: 12px; }
.labShareRow { display: flex; flex-wrap: wrap; gap: 8px; }
.labShareRow .btn { flex: 1 1 auto; justify-content: center; }
.labShareNext { margin: 12px 0 0; font-size: 14px; color: rgba(236, 237, 239, .75); }
.labShareNext a { color: var(--accent); }
.labLiveBtn[aria-pressed="true"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 8px #ff4d6d; vertical-align: 1px; }
.labLiveAsk { position: fixed; right: var(--gutter); bottom: 74px; z-index: 9; width: min(380px, calc(100% - 2 * var(--gutter))); padding: 18px 20px 20px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(17, 18, 20, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--text); box-sizing: border-box; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); }
.labLiveAsk .eyebrow { margin: 0; }
.labLiveAskTitle { margin: 8px 0 10px; font-family: var(--display); font-size: 22px; line-height: 1.1; letter-spacing: -.01em; text-transform: none; }
.labLiveAskLead { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: rgba(236, 237, 239, .8); }
.labLiveAskName { display: grid; gap: 6px; margin-bottom: 16px; font-size: 12px; color: rgba(236, 237, 239, .75); }
.labLiveAskName i { font-style: normal; opacity: .6; }
.labLiveAskName input { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 16px; box-sizing: border-box; }
.labLiveAskName input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.labLiveAskRow { display: flex; flex-wrap: wrap; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .labHolo canvas { animation: none; } }
@media (max-width: 599px) { .labLiveAsk { left: var(--gutter); right: var(--gutter); width: auto; bottom: 120px; } }

/* Early access: the four-line manifesto heading, one sentence per line. */
.joinTitle span { display: block; }
#join .joinTitle { font-size: clamp(30px, 3.3vw, 52px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 22px; }
/* Hero: the lab in five lines, one idea per line. */
.heroLead.heroLines { max-width: 46ch; }
.heroLines span { display: block; }

/* A project's 3D model on its page: the turntable loop, and the way into the model in the field (single-portfolio.php). */
.portfolio-turntable { margin: 24px 0 32px; max-width: 480px; }
.portfolio-turntable video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #111214; }
.portfolio-turntable figcaption { margin-top: 10px; font-size: 14px; }

/* Icons: a mask per glyph, drawn in the text colour (they replace the Surreal icon font). */
.icon-location::before, .icon-envelop::before, .icon-clock::before, .icon-search::before, .sidebar li::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-location { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-7-6.6-7-11.8a7 7 0 0 1 14 0c0 5.2-7 11.8-7 11.8Z'/%3E%3Ccircle cx='12' cy='9.7' r='2.5'/%3E%3C/svg%3E"); }
.icon-envelop { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 6.5 9 6.5 9-6.5'/%3E%3C/svg%3E"); }
.icon-clock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E"); }
.icon-search { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E"); }
.sidebar li { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); }