/* EAT typography.
   Figtree is loaded from Google Fonts.
   The custom Agency display font is referenced locally but is not redistributed in this package. */
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

@font-face {
  font-family: "EAT Agency";
  src: url("assets/fonts/agency.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #020816;
  --ink-2: #04122b;
  --blue: #0873ff;
  --cyan: #00c9ff;
  --white: #f6fbff;
  --muted: rgba(246, 251, 255, .60);
  --line: rgba(255, 255, 255, .15);
  --shell: min(92vw, 1500px);
  --mx: 50%;
  --my: 50%;
  --dial-rotation: 0deg;
}

* { box-sizing: border-box; }

/* Global interaction policy: the site behaves like an interactive canvas, not a document.
   Text/media cannot be highlighted or native-dragged while drawing the EAT trail.
   Form controls remain editable/selectable. */
html, body, body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img, video, svg, canvas {
  -webkit-user-drag: none;
  user-drag: none;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
html { scroll-behavior: smooth; width: 100%; }
body {
  margin: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
  background: var(--ink);
  color: var(--white);
  font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas, svg { max-width: 100%; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.shell { width: var(--shell); margin-inline: auto; min-width: 0; }
.eyebrow {
  margin: 0;
  color: var(--cyan);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

#fxCanvas {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  opacity: .82;
  contain: strict;
  transform: translateZ(0);
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 82px;
  padding-inline: 4vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: linear-gradient(to bottom, rgba(2, 8, 22, .84), rgba(2, 8, 22, 0));
  backdrop-filter: blur(5px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-weight: 950; letter-spacing: -.06em; }
.brand-word { font-size: 1.2rem; }
.brand-mark { width: 28px; height: 28px; position: relative; display: inline-block; border-radius: 50%; border: 2px solid var(--cyan); animation: markSpin 11s linear infinite; }
.brand-mark i { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--cyan); }
.brand-mark i:nth-child(2) { inset: 7px; transform: rotate(120deg); }
.brand-mark i:nth-child(3) { inset: 10px; transform: rotate(240deg); }
@keyframes markSpin { to { transform: rotate(360deg); } }
.desktop-nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 44px); }
.desktop-nav a { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .64; transition: .2s ease; }
.desktop-nav a:hover { color: var(--cyan); opacity: 1; }
.header-cta { justify-self: end; padding: 11px 16px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; transition: .25s ease; }
.header-cta:hover { background: var(--cyan); color: #001022; border-color: var(--cyan); }
.menu-button { display: none; justify-self: end; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04); }
.menu-button span { display: block; width: 15px; height: 1px; margin: 5px auto; background: #fff; transition: .25s; }
.mobile-menu { position: fixed; inset: 0; z-index: 90; padding: 120px 6vw 40px; display: flex; flex-direction: column; gap: 18px; background: rgba(2,8,22,.97); backdrop-filter: blur(20px); transform: translateY(-105%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { font-size: clamp(2rem, 10vw, 4rem); font-weight: 900; letter-spacing: -.06em; text-transform: uppercase; }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100svh;
  padding-top: 82px;
  background:
    radial-gradient(900px circle at var(--mx) var(--my), rgba(0,201,255,.12), transparent 42%),
    radial-gradient(700px circle at 72% 42%, rgba(8,115,255,.22), transparent 48%),
    linear-gradient(145deg, #020713 0%, #04132e 55%, #020713 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -8;
  opacity: .13;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, black, transparent 76%);
}
.hero-main {
  position: relative;
  z-index: 10;
  min-height: calc(100svh - 265px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(370px, .98fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: center;
  padding-block: clamp(40px, 7vh, 85px);
}
.hero-copy { min-width: 0; }
.hero-copy h1 {
  margin: 15px 0 0;
  max-width: 870px;
  font-size: clamp(4.1rem, 8vw, 8.7rem);
  line-height: .79;
  letter-spacing: -.078em;
  text-transform: uppercase;
  font-weight: 950;
}
.hero-copy h1 span { color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.9); }
.hero-intro { max-width: 520px; margin: 28px 0 0; color: var(--muted); line-height: 1.65; font-size: clamp(.88rem, 1.05vw, 1rem); }
.hero-instruction { margin-top: 30px; display: inline-flex; align-items: center; gap: 9px; font-size: .67rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.55); opacity: .35; } }

.dial-stage {
  position: relative;
  min-height: min(580px, 58vh);
  display: grid;
  place-items: center;
}
.dial-copy {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 3%;
  width: min(245px, 34%);
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.dial-copy > span { display: block; color: var(--cyan); font-size: .62rem; letter-spacing: .15em; }
.dial-copy h2 { margin: 9px 0 6px; font-size: clamp(1.2rem, 2vw, 2rem); line-height: .95; letter-spacing: -.05em; text-transform: uppercase; }
.dial-copy p { margin: 0; color: rgba(255,255,255,.54); font-size: .74rem; line-height: 1.55; }
.dial-copy a { display: inline-flex; gap: 9px; margin-top: 12px; color: var(--cyan); font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.eat-dial {
  --dial-size: clamp(280px, 32vw, 470px);
  position: relative;
  width: var(--dial-size);
  height: var(--dial-size);
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  outline: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.34));
}
.eat-dial:active { cursor: grabbing; }
.eat-dial:focus-visible { box-shadow: 0 0 0 2px var(--cyan); }
.dial-halo { position: absolute; border-radius: 50%; border: 1px solid rgba(0,201,255,.28); }
.halo-a { inset: -8%; animation: haloSpin 16s linear infinite; }
.halo-a::after { content:""; position:absolute; width:8px; height:8px; top:-4px; left:50%; border-radius:50%; background:var(--cyan); box-shadow:0 0 20px var(--cyan); }
.halo-b { inset: 8%; border-color: rgba(255,255,255,.15); border-style: dashed; animation: haloSpin 21s linear infinite reverse; }
@keyframes haloSpin { to { transform: rotate(360deg); } }
.dial-rotor {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  transform: rotate(var(--dial-rotation));
  transition: transform .75s cubic-bezier(.18,.85,.2,1);
  background: radial-gradient(circle at 50% 50%, rgba(0,201,255,.1), rgba(8,115,255,.02) 48%, transparent 50%);
}
.blade {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 31%;
  transform-origin: 0 50%;
  border-radius: 70% 35% 65% 30%;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(120deg, rgba(255,255,255,.2), rgba(0,201,255,.35) 55%, rgba(8,115,255,.08));
  box-shadow: inset 0 0 24px rgba(255,255,255,.08), 0 0 24px rgba(0,201,255,.08);
  backdrop-filter: blur(8px);
}
.blade-1 { transform: rotate(0deg) translate(7%, -50%) rotate(26deg); }
.blade-2 { transform: rotate(60deg) translate(7%, -50%) rotate(26deg); }
.blade-3 { transform: rotate(120deg) translate(7%, -50%) rotate(26deg); }
.blade-4 { transform: rotate(180deg) translate(7%, -50%) rotate(26deg); }
.blade-5 { transform: rotate(240deg) translate(7%, -50%) rotate(26deg); }
.blade-6 { transform: rotate(300deg) translate(7%, -50%) rotate(26deg); }
.dial-center { position: absolute; inset: 36%; z-index: 3; display: grid; place-items: center; align-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.36); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.3), transparent 20%), linear-gradient(145deg, rgba(0,201,255,.86), rgba(8,115,255,.36) 55%, rgba(1,8,24,.55)); box-shadow: inset 0 0 32px rgba(255,255,255,.1), 0 0 50px rgba(0,201,255,.23); }
.dial-center strong { font-size: clamp(1.7rem, 3.4vw, 3rem); letter-spacing: -.08em; }
.dial-center small { font-size: .5rem; letter-spacing: .2em; }
.dial-ticks { position:absolute; inset:-4%; }
.dial-ticks i { position:absolute; left:50%; top:50%; width:1px; height:12px; background:rgba(255,255,255,.45); transform-origin:0 calc(var(--dial-size) * .54); }
.dial-ticks i:nth-child(1){transform:translate(-50%,-50%) rotate(0deg) translateY(calc(var(--dial-size) * -.54))}
.dial-ticks i:nth-child(2){transform:translate(-50%,-50%) rotate(60deg) translateY(calc(var(--dial-size) * -.54))}
.dial-ticks i:nth-child(3){transform:translate(-50%,-50%) rotate(120deg) translateY(calc(var(--dial-size) * -.54))}
.dial-ticks i:nth-child(4){transform:translate(-50%,-50%) rotate(180deg) translateY(calc(var(--dial-size) * -.54))}
.dial-ticks i:nth-child(5){transform:translate(-50%,-50%) rotate(240deg) translateY(calc(var(--dial-size) * -.54))}
.dial-ticks i:nth-child(6){transform:translate(-50%,-50%) rotate(300deg) translateY(calc(var(--dial-size) * -.54))}

.mode-selector {
  position: relative;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 1px;
  padding-bottom: 18px;
}
.mode-button {
  min-width: 0;
  min-height: 96px;
  padding: 14px 14px 13px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(4,18,43,.56);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: .28s ease;
}
.mode-button + .mode-button { margin-left: 2px; }
.mode-button span { display:block; margin-bottom:14px; color:var(--cyan); font-size:.58rem; letter-spacing:.14em; }
.mode-button strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:clamp(.78rem,1vw,.95rem); text-transform:uppercase; }
.mode-button small { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.42); font-size:.58rem; }
.mode-button:hover, .mode-button.active { transform: translateY(-7px); border-color: rgba(0,201,255,.65); background: rgba(0,134,255,.17); box-shadow: 0 16px 38px rgba(0,0,0,.22); }

/* Mode experiences: the entire hero changes instead of adding floating media cards */
.experience-layer { position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none; transition: opacity .55s ease; overflow:hidden; }
.hero[data-mode="graphic"] .experience-graphic,
.hero[data-mode="motion"] .experience-motion,
.hero[data-mode="video"] .experience-video,
.hero[data-mode="3d"] .experience-3d,
.hero[data-mode="games"] .experience-games,
.hero[data-mode="other"] .experience-other { opacity:1; }

.graphic-block { position:absolute; font-weight:950; text-transform:uppercase; line-height:.8; color:rgba(0,201,255,.06); letter-spacing:-.08em; border:1px solid rgba(0,201,255,.08); }
.gb-1 { right:-2vw; top:12vh; font-size:17vw; transform:rotate(-8deg); }
.gb-2 { left:30vw; bottom:11vh; font-size:14vw; transform:rotate(7deg); color:rgba(255,255,255,.035); }
.gb-3 { right:3vw; bottom:3vh; padding:20px; font-size:4rem; color:rgba(255,255,255,.06); }
.graphic-line { position:absolute; height:1px; background:linear-gradient(90deg,transparent,rgba(0,201,255,.25),transparent); }
.gl-1 { left:-10%; top:36%; width:120%; transform:rotate(-10deg); }
.gl-2 { left:-10%; top:67%; width:120%; transform:rotate(6deg); }

.kinetic-row { position:absolute; left:-15vw; width:130vw; white-space:nowrap; font-size:clamp(5rem,13vw,14rem); font-weight:950; letter-spacing:-.08em; line-height:.8; color:rgba(0,201,255,.055); }
.kr-1 { top:10%; animation:kineticA 6s ease-in-out infinite alternate; }
.kr-2 { top:42%; animation:kineticB 7s ease-in-out infinite alternate; color:rgba(255,255,255,.035); }
.kr-3 { top:71%; animation:kineticA 8s ease-in-out infinite alternate-reverse; }
@keyframes kineticA { to { transform:translateX(12vw) skewX(-7deg); } }
@keyframes kineticB { to { transform:translateX(-10vw) skewX(8deg); } }

.video-timecode { position:absolute; top:13vh; right:4vw; font:700 .7rem/1 monospace; letter-spacing:.08em; color:rgba(255,255,255,.55); }
.safe-frame { position:absolute; inset:16vh 7vw 18vh; border:1px solid rgba(255,255,255,.07); }
.timeline-track { position:absolute; left:4vw; right:4vw; height:38px; display:flex; gap:3px; opacity:.28; }
.timeline-track i { flex:1; background:linear-gradient(90deg,rgba(0,201,255,.12),rgba(8,115,255,.5)); border-radius:3px; }
.tt-1 { top:29%; } .tt-2 { top:37%; left:13vw; } .tt-3 { bottom:20%; right:12vw; }
.playhead { position:absolute; top:17vh; bottom:14vh; left:54%; width:1px; background:rgba(0,201,255,.5); animation:playhead 5s ease-in-out infinite alternate; }
.playhead span { position:absolute; top:-8px; left:-4px; width:9px; height:9px; background:var(--cyan); clip-path:polygon(0 0,100% 0,50% 100%); }
@keyframes playhead { to { left:72%; } }

.wire-ring { position:absolute; border-radius:50%; border:1px solid rgba(0,201,255,.18); box-shadow:inset 0 0 40px rgba(0,201,255,.05); }
.wr-1 { width:48vw; height:48vw; right:-10vw; top:-11vw; transform:rotateX(60deg); animation:ringDrift 8s linear infinite; }
.wr-2 { width:30vw; height:30vw; left:30vw; bottom:-10vw; border-style:dashed; animation:ringDrift 13s linear infinite reverse; }
.wr-3 { width:17vw; height:17vw; right:34vw; top:16vh; border-color:rgba(255,255,255,.11); }
@keyframes ringDrift { to { transform:rotate(360deg); } }
.wire-cube { position:absolute; width:120px; height:120px; border:1px solid rgba(0,201,255,.25); animation:cubeFloat 5s ease-in-out infinite; }
.wire-cube i { position:absolute; inset:0; border:1px solid rgba(255,255,255,.10); }
.wire-cube i:nth-child(1){transform:rotateY(55deg)} .wire-cube i:nth-child(2){transform:rotateX(55deg)} .wire-cube i:nth-child(3){transform:rotateZ(45deg)}
.wc-1 { right:9vw; top:17vh; } .wc-2 { left:43vw; bottom:14vh; width:84px; height:84px; animation-delay:-2s; }
@keyframes cubeFloat { 50% { transform:translateY(-28px) rotate(40deg); } }

.game-grid { position:absolute; left:-10%; right:-10%; bottom:-32%; height:75%; transform:perspective(600px) rotateX(64deg); background-image:linear-gradient(rgba(0,201,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,255,.14) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to top,black,transparent 90%); }
.hud { position:absolute; padding:7px 9px; border:1px solid rgba(0,201,255,.18); color:rgba(0,201,255,.52); font:700 .58rem/1 monospace; letter-spacing:.08em; }
.hud-a { top:16vh; right:7vw; } .hud-b { top:22vh; right:7vw; } .hud-c { bottom:22vh; left:42vw; }
.reticle { position:absolute; width:150px; height:150px; left:66%; top:46%; transform:translate(-50%,-50%); border:1px solid rgba(0,201,255,.12); border-radius:50%; }
.reticle i:first-child { position:absolute; left:50%; top:-22px; width:1px; height:194px; background:rgba(0,201,255,.10); }
.reticle i:last-child { position:absolute; top:50%; left:-22px; height:1px; width:194px; background:rgba(0,201,255,.10); }
.game-orb { position:absolute; border-radius:50%; background:var(--cyan); box-shadow:0 0 35px var(--cyan); animation:orbFloat 5s ease-in-out infinite; }
.go-1 { width:7px;height:7px;left:25%;top:27%; } .go-2{width:5px;height:5px;right:20%;bottom:28%;animation-delay:-2s}.go-3{width:4px;height:4px;left:49%;bottom:34%;animation-delay:-1s}
@keyframes orbFloat { 50% { transform:translate(24px,-18px); opacity:.4; } }

.wild-card { position:absolute; padding:18px 22px; border:1px solid rgba(255,255,255,.12); background:rgba(0,201,255,.035); font-weight:900; color:rgba(255,255,255,.07); letter-spacing:-.06em; font-size:clamp(2.2rem,5vw,6rem); backdrop-filter:blur(4px); }
.wild-1{left:38vw;top:12vh;transform:rotate(-8deg)} .wild-2{right:3vw;top:31vh;transform:rotate(7deg)} .wild-3{left:18vw;bottom:13vh;transform:rotate(4deg)} .wild-4{right:18vw;bottom:9vh;transform:rotate(-4deg)}
.wild-ring{position:absolute;width:38vw;height:38vw;border-radius:50%;border:1px dashed rgba(0,201,255,.14);left:48%;top:52%;transform:translate(-50%,-50%);animation:haloSpin 20s linear infinite}

/* Moving video tape: standalone divider so it never gets clipped by hero overflow */
.tape-divider {
  position: relative;
  z-index: 30;
  width: 100%;
  height: 126px;
  margin-top: -1px;
  overflow: hidden;
  background: #02050d;
}
.tape-video { position:absolute; left:50%; width:112%; max-width:none; object-fit:cover; object-position:center; pointer-events:none; filter:saturate(1.05) contrast(1.03); }
.tape-blue { height:58px; top:23px; transform:translateX(-50%) rotate(-1.25deg) scale(1.04); }
.tape-white { height:62px; top:58px; transform:translateX(-50%) rotate(1.1deg) scale(1.04); }
.tape-divider-bottom { height:84px; background:#03102a; }
.tape-divider-bottom .tape-blue { top:13px; transform:translateX(-50%) rotate(.7deg) scale(1.04); }

/* Work */
.work-section { position:relative; background:#02050d; padding:14vh 0 12vh; }
.work-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.5fr); gap:7vw; align-items:end; }
.work-intro h2, .services-title h2, .studio-grid h2, .contact-inner h2 { margin:13px 0 0; font-size:clamp(3.5rem,7.5vw,8rem); line-height:.82; letter-spacing:-.075em; text-transform:uppercase; }
.work-intro h2 span, .studio-grid h2 span, .contact-inner h2 span { color:var(--cyan); }
.work-intro > p { margin:0; max-width:520px; color:var(--muted); line-height:1.7; }
.project-stage { height: 500vh; margin-top: 12vh; position:relative; }
.project-sticky { position:sticky; top:10vh; height:80vh; min-height:560px; display:grid; grid-template-rows:auto 1fr auto; gap:14px; }
.project-counter { justify-self:end; color:var(--cyan); font-size:.65rem; letter-spacing:.14em; }
.project-window { position:relative; min-height:0; border:1px solid rgba(255,255,255,.11); border-radius:28px; overflow:hidden; background:#06142e; }
.project-slide { position:absolute; inset:0; opacity:0; transform:scale(1.05); transition:opacity .55s ease,transform .9s cubic-bezier(.2,.8,.2,1); }
.project-slide.active { opacity:1; transform:scale(1); z-index:2; }
.project-art { position:absolute; inset:0; overflow:hidden; }
.project-art > span { position:absolute; top:22px; left:22px; z-index:3; color:rgba(255,255,255,.65); font-size:.6rem; letter-spacing:.16em; }
.project-info { position:absolute; z-index:4; left:0; right:0; bottom:0; padding:28px; display:grid; grid-template-columns:1fr auto; align-items:end; background:linear-gradient(to top,rgba(1,5,14,.92),transparent); }
.project-info small { grid-column:1 / -1; color:var(--cyan); font-size:.62rem; letter-spacing:.14em; }
.project-info h3 { margin:6px 0 0; font-size:clamp(2rem,5vw,5rem); letter-spacing:-.06em; }
.project-info a { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.art-a{background:radial-gradient(circle at 58% 44%,rgba(0,201,255,.6),transparent 18%),linear-gradient(135deg,#061c46,#02050d 64%)}
.art-a div{position:absolute;width:37%;aspect-ratio:1;border-radius:50%;border:34px solid rgba(255,255,255,.82);right:20%;top:17%;box-shadow:inset 0 0 55px rgba(0,201,255,.7),0 0 80px rgba(0,201,255,.2);transform:rotate(18deg)}
.art-b{background:linear-gradient(135deg,#071635,#012e62)}
.art-b div{position:absolute;left:-5%;right:-5%;top:42%;height:90px;background:repeating-linear-gradient(90deg,rgba(0,201,255,.32) 0 120px,rgba(255,255,255,.07) 120px 220px);box-shadow:0 0 60px rgba(0,201,255,.2);transform:rotate(-4deg)}
.art-c{background:radial-gradient(circle at center,rgba(0,201,255,.22),transparent 25%),linear-gradient(145deg,#020714,#082b61)}
.art-c div{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:1px solid rgba(255,255,255,.6);background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(0,201,255,.12));box-shadow:0 0 80px rgba(0,201,255,.25)}
.art-d{background:linear-gradient(#030a1c,#041b3a)}
.art-d div{position:absolute;inset:35% 18% 0;background-image:linear-gradient(rgba(0,201,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,255,.18) 1px,transparent 1px);background-size:38px 38px;transform:perspective(500px) rotateX(62deg);transform-origin:center bottom}
.art-e{background:linear-gradient(120deg,#02050d,#063d73)}
.art-e div{position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(0,201,255,.16) 45%,transparent 66%);animation:scan 2.8s linear infinite}
@keyframes scan{from{transform:translateX(-65%)}to{transform:translateX(65%)}}
.art-f{background:radial-gradient(circle at 30% 40%,rgba(0,201,255,.28),transparent 20%),radial-gradient(circle at 72% 55%,rgba(8,115,255,.35),transparent 22%),#02050d}
.art-f div{position:absolute;width:55%;height:27%;left:23%;top:35%;border:1px dashed rgba(255,255,255,.3);border-radius:999px;transform:rotate(-9deg)}
.project-progress { height:2px; background:rgba(255,255,255,.1); overflow:hidden; }
.project-progress i { display:block; width:16.666%; height:100%; background:var(--cyan); transition:width .35s ease; }

/* Services */
.services-section { background:var(--white); color:#031022; padding:15vh 0; }
.services-grid { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:6vw; }
.services-title { position:sticky; top:16vh; align-self:start; }
.services-title .eyebrow { color:#0873ff; }
.services-title h2 { font-size:clamp(3.6rem,6.4vw,7rem); }
.service-list { border-top:1px solid rgba(3,16,34,.18); }
.service-row { position:relative; min-height:142px; display:grid; grid-template-columns:52px minmax(0,1.15fr) minmax(190px,.75fr) 28px; gap:18px; align-items:center; overflow:hidden; border-bottom:1px solid rgba(3,16,34,.18); }
.service-row::before { content:""; position:absolute; inset:0; background:#041a3a; transform:translateY(101%); transition:transform .38s cubic-bezier(.2,.8,.2,1); }
.service-row > * { position:relative; z-index:1; transition:.3s ease; }
.service-row span { color:#0873ff; font-size:.62rem; }
.service-row strong { min-width:0; font-size:clamp(1.7rem,3vw,3.25rem); letter-spacing:-.055em; }
.service-row em { font-style:normal; font-size:.78rem; line-height:1.5; opacity:.58; }
.service-row b { font-size:1.2rem; font-weight:500; }
.service-row:hover::before { transform:translateY(0); }
.service-row:hover { color:#fff; }
.service-row:hover strong { transform:translateX(13px); color:var(--cyan); }

/* Studio + Contact */
.studio-section { padding:18vh 0; background:radial-gradient(circle at 80% 45%,rgba(0,201,255,.14),transparent 22%),#020714; }
.studio-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.4fr); gap:6vw; align-items:end; }
.studio-grid .eyebrow { grid-column:1 / -1; }
.studio-grid h2 { font-size:clamp(4rem,8vw,8.5rem); }
.studio-grid > p:last-child { margin:0 0 1vh; color:var(--muted); line-height:1.75; }
.contact-section { min-height:100svh; display:grid; place-items:center; background:radial-gradient(circle at 75% 42%,rgba(0,201,255,.24),transparent 22%),linear-gradient(140deg,#061633,#02050d 70%); }
.contact-inner { padding-block:14vh; }
.contact-inner h2 { max-width:1100px; font-size:clamp(4rem,8.6vw,9rem); }
.big-cta { width:min(800px,100%); margin-top:8vh; padding:24px 0; border-top:1px solid rgba(255,255,255,.28); border-bottom:1px solid rgba(255,255,255,.28); display:flex; justify-content:space-between; gap:20px; font-size:clamp(1.2rem,2.4vw,2.2rem); font-weight:850; text-transform:uppercase; transition:.25s ease; }
.big-cta:hover { padding-inline:18px; color:var(--cyan); }

/* Tablet */
@media (max-width: 1100px) {
  :root { --shell: min(92vw, 960px); }
  .site-header { grid-template-columns:1fr auto; }
  .desktop-nav, .header-cta { display:none; }
  .menu-button { display:block; }
  .hero-main { min-height:auto; grid-template-columns:1fr; padding-top:7vh; padding-bottom:4vh; }
  .hero-copy { max-width:760px; }
  .dial-stage { min-height:520px; margin-top:-20px; }
  .eat-dial { --dial-size:clamp(300px,55vw,470px); }
  .dial-copy { right:4%; bottom:5%; width:250px; }
  .mode-selector { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-bottom:24px; }
  .mode-button + .mode-button { margin-left:0; }
  .mode-button { min-height:86px; }
  .work-intro { grid-template-columns:1fr; gap:28px; }
  .work-intro > p { max-width:680px; }
  .project-stage { height:430vh; }
  .services-grid { grid-template-columns:1fr; }
  .services-title { position:relative; top:auto; }
  .service-row { grid-template-columns:48px minmax(0,1fr) minmax(210px,.72fr) 28px; }
  .studio-grid { grid-template-columns:1fr; }
  .studio-grid > p:last-child { max-width:650px; }
  .tape-video { width:130%; }
}

/* Mobile */
@media (max-width: 680px) {
  :root { --shell: 90vw; }
  .site-header { height:70px; padding-inline:5vw; }
  .brand-word { font-size:1rem; }
  .brand-mark { width:24px; height:24px; }
  .hero { padding-top:70px; min-height:auto; }
  .hero-main { padding-top:7vh; gap:16px; }
  .hero-copy h1 { font-size:clamp(3.4rem,16vw,5.2rem); }
  .hero-intro { max-width:100%; margin-top:22px; }
  .hero-instruction { margin-top:22px; }
  .dial-stage { min-height:430px; margin-top:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:22px; }
  .eat-dial { --dial-size:min(72vw,330px); flex:0 0 auto; }
  .dial-copy { position:relative; right:auto; bottom:auto; width:100%; max-width:340px; text-align:center; order:2; }
  .dial-copy a { justify-content:center; }
  .mode-selector { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding-bottom:22px; }
  .mode-button { min-height:82px; padding:12px; }
  .mode-button span { margin-bottom:9px; }
  .mode-button small { white-space:normal; line-height:1.2; }
  .video-timecode, .hud, .wc-2, .wr-3 { display:none; }
  .safe-frame { inset:23% 6% 24%; }
  .timeline-track { left:5%; right:5%; }
  .tt-2 { left:13%; }
  .playhead { top:25%; bottom:20%; }
  .reticle { left:50%; top:44%; }
  .tape-divider { height:94px; }
  .tape-video { width:175%; }
  .tape-blue { top:12px; height:48px; transform:translateX(-50%) rotate(-1deg) scale(1.03); }
  .tape-white { top:46px; height:50px; transform:translateX(-50%) rotate(1deg) scale(1.03); }
  .work-section { padding-top:11vh; }
  .work-intro h2, .services-title h2, .studio-grid h2, .contact-inner h2 { font-size:clamp(3.2rem,14vw,5rem); }
  .project-stage { height:auto; margin-top:8vh; }
  .project-sticky { position:relative; top:auto; height:auto; min-height:0; display:block; }
  .project-counter, .project-progress { display:none; }
  .project-window { overflow:visible; background:transparent; border:0; border-radius:0; display:grid; gap:24px; }
  .project-slide { position:relative; inset:auto; opacity:1 !important; transform:none !important; height:62vh; min-height:430px; border:1px solid rgba(255,255,255,.11); border-radius:22px; overflow:hidden; }
  .project-info { padding:20px; grid-template-columns:1fr; gap:4px; }
  .project-info h3 { font-size:2.4rem; }
  .project-info a { margin-top:6px; }
  .services-section { padding-block:11vh; }
  .service-row { min-height:112px; grid-template-columns:36px minmax(0,1fr) 24px; gap:10px; }
  .service-row em { display:none; }
  .service-row strong { font-size:clamp(1.45rem,7.4vw,2rem); }
  .studio-section { padding-block:13vh; }
  .contact-inner { padding-block:12vh; }
  .big-cta { margin-top:6vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  #fxCanvas { display:none; }
}

/* ================================================================
   MULTI-PAGE PROTOTYPE EXTENSIONS
   ================================================================ */
html.menu-open { overflow: hidden; }
body[data-page]:not([data-page="home"]) { background:#020713; }
body[data-page]:not([data-page="home"]) .site-header { background:linear-gradient(to bottom,rgba(2,8,22,.96),rgba(2,8,22,.72) 70%,transparent); }
.desktop-nav a.active { opacity:1; color:var(--cyan); }
.header-cta.active { color:#021022; background:var(--cyan); border-color:var(--cyan); }
.mobile-menu a.active { color:var(--cyan); }
main { width:100%; min-width:0; }
.page-main { overflow:clip; }
.page-kicker { color:var(--cyan); font-size:.68rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.display-title { margin:0; font-size:clamp(4rem,9.5vw,10.2rem); line-height:.78; letter-spacing:-.08em; text-transform:uppercase; font-weight:950; }
.display-title .outline { color:transparent; -webkit-text-stroke:1.3px rgba(255,255,255,.86); }
.display-title .cyan { color:var(--cyan); }
.page-copy { max-width:560px; color:var(--muted); line-height:1.7; font-size:clamp(.88rem,1.1vw,1.03rem); }
.section-pad { padding-block:clamp(90px,12vw,180px); }
[data-reveal] { opacity:0; transform:translateY(35px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
[data-reveal].revealed { opacity:1; transform:none; }

/* Cursor */
.cursor-dot,.cursor-ring { position:fixed; left:0; top:0; pointer-events:none; z-index:500; transform:translate3d(-100px,-100px,0); border-radius:50%; mix-blend-mode:screen; will-change:transform; }
.cursor-dot { width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.cursor-ring { width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid rgba(0,201,255,.55); transition:transform .075s linear,width .22s,height .22s,margin .22s,background .22s; }
.cursor-ring.is-hover { width:56px; height:56px; margin:-28px 0 0 -28px; background:rgba(0,201,255,.08); }
.cursor-ring.is-pressed { width:22px; height:22px; margin:-11px 0 0 -11px; border-color:rgba(126,235,255,.95); background:rgba(0,201,255,.18); box-shadow:0 0 26px rgba(0,201,255,.38); }
.eat-dial.pulse { animation:eatDialPulse .38s ease-out; }
@keyframes eatDialPulse { 50% { filter:drop-shadow(0 0 38px rgba(0,201,255,.62)); transform:scale(1.018); } }

/* Footer */
.site-footer { position:relative; padding:80px 0 45px; border-top:1px solid rgba(255,255,255,.12); background:#01050d; }
.footer-grid { display:grid; grid-template-columns:1.65fr .7fr .8fr 1fr; gap:clamp(28px,5vw,90px); align-items:start; }
.footer-brand p { max-width:310px; margin:26px 0 0; color:rgba(255,255,255,.48); font-size:.78rem; line-height:1.65; }
.footer-nav { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.footer-nav > span,.footer-meta > span { margin-bottom:8px; color:rgba(255,255,255,.35); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; }
.footer-nav a,.back-top { font-size:.74rem; opacity:.73; transition:.2s; }
.footer-nav a:hover,.back-top:hover { color:var(--cyan); opacity:1; }
.footer-meta { display:flex; min-height:118px; flex-direction:column; justify-content:space-between; align-items:flex-end; text-align:right; }
.footer-join { grid-column:1/-1; margin-top:18px; padding:26px 0 0; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
.footer-join-copy { max-width:640px; }
.footer-join-copy > span { display:block; margin-bottom:9px; color:var(--cyan); font-size:.56rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.footer-join-copy strong { display:block; font-family:var(--font-display); font-size:clamp(1.7rem,2.6vw,3rem); font-weight:400; line-height:.98; letter-spacing:.018em; }
.footer-join-copy p { margin:11px 0 0; max-width:510px; color:rgba(255,255,255,.47); font-size:.74rem; line-height:1.6; }
.footer-join-cta { flex:0 0 auto; min-width:180px; min-height:52px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:22px; border:1px solid rgba(0,201,255,.42); border-radius:999px; background:rgba(0,201,255,.045); color:var(--white); font-size:.64rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease; }
.footer-join-cta b { color:var(--cyan); font-size:.9rem; font-weight:500; transition:transform .25s ease; }
.footer-join-cta:hover { transform:translateY(-3px); border-color:var(--cyan); background:rgba(0,201,255,.1); color:var(--cyan); }
.footer-join-cta:hover b { transform:translate(3px,-3px); }

/* Reusable moving tape */
.tape-break { position:relative; width:100%; height:112px; overflow:hidden; background:#020713; z-index:5; }
.tape-break .tape-video { position:absolute; left:-5%; width:110%; max-width:none; height:68px; object-fit:cover; object-position:center; pointer-events:none; }
.tape-break .tape-video:first-child { top:2px; transform:rotate(-1.5deg) scale(1.03); }
.tape-break .tape-video:last-child { bottom:0; transform:rotate(1.25deg) scale(1.03); }
.tape-break.single { height:72px; }
.tape-break.single .tape-video { top:2px; bottom:auto; transform:rotate(-1deg) scale(1.03); }

/* Project artwork system: placeholders that can later be replaced by DB media */
.project-visual { position:relative; overflow:hidden; background:#07152c; isolation:isolate; }
.project-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.25)); z-index:7; }
.project-visual .art-label { position:absolute; left:22px; top:20px; z-index:10; color:rgba(255,255,255,.7); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; }
.art-flux { background:radial-gradient(circle at 65% 37%,rgba(0,220,255,.45),transparent 15%),linear-gradient(135deg,#06152f,#02050d 72%); }
.art-flux::before { content:"FLUX"; position:absolute; inset:auto -6% 8% auto; font-size:clamp(7rem,18vw,20rem); font-weight:950; letter-spacing:-.09em; color:rgba(255,255,255,.08); transform:rotate(-9deg); }
.art-flux .shape { position:absolute; width:34%; aspect-ratio:1; left:47%; top:24%; border:24px solid rgba(255,255,255,.83); border-right-color:var(--cyan); border-radius:50%; box-shadow:0 0 80px rgba(0,201,255,.25),inset 0 0 30px rgba(0,201,255,.25); transform:rotate(28deg); }
.art-cut { background:linear-gradient(135deg,#0a1530,#03050a); }
.art-cut::before,.art-cut::after { content:""; position:absolute; height:26%; left:-5%; right:-5%; background:linear-gradient(90deg,#0b6fff,#00c9ff,#091b44); transform:skewY(-5deg); opacity:.8; }
.art-cut::before { top:24%; } .art-cut::after { top:55%; transform:skewY(6deg); opacity:.4; }
.art-cut .shape { position:absolute; top:0; bottom:0; left:48%; width:2px; background:var(--cyan); box-shadow:0 0 22px var(--cyan); }
.art-synthetic { background:radial-gradient(circle at 50% 48%,rgba(0,201,255,.2),transparent 24%),linear-gradient(145deg,#081d42,#02050b 70%); }
.art-synthetic .shape { position:absolute; left:50%; top:50%; width:42%; aspect-ratio:1; transform:translate(-50%,-50%) perspective(500px) rotateX(62deg) rotateZ(28deg); border:32px solid rgba(203,247,255,.56); border-radius:50%; box-shadow:0 0 60px rgba(0,201,255,.35),inset 0 0 45px rgba(0,201,255,.45); }
.art-neon { background:linear-gradient(180deg,#021027 0%,#01050c 72%); }
.art-neon::before { content:""; position:absolute; left:-15%; right:-15%; bottom:-18%; height:65%; background-image:linear-gradient(rgba(0,201,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,255,.18) 1px,transparent 1px); background-size:38px 38px; transform:perspective(500px) rotateX(60deg); transform-origin:center bottom; }
.art-neon .shape { position:absolute; width:110px; height:110px; left:50%; top:48%; transform:translate(-50%,-50%) rotate(45deg); border:2px solid var(--cyan); box-shadow:0 0 40px rgba(0,201,255,.55),inset 0 0 22px rgba(0,201,255,.2); }
.art-pulse { background:radial-gradient(circle at 70% 38%,rgba(0,201,255,.25),transparent 18%),linear-gradient(145deg,#020713,#071b42); }
.art-pulse::before { content:"PULSE PULSE PULSE PULSE"; position:absolute; left:-6%; top:29%; width:120%; font-size:clamp(4rem,10vw,10rem); font-weight:950; letter-spacing:-.08em; white-space:nowrap; color:rgba(255,255,255,.12); transform:rotate(-6deg); }
.art-pulse .shape { position:absolute; height:2px; left:6%; right:6%; top:58%; background:var(--cyan); box-shadow:0 0 22px var(--cyan); }
.art-signal { background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),linear-gradient(135deg,#081532,#02050d); }
.art-signal::before { content:"SIGNAL / NOISE"; position:absolute; left:8%; bottom:11%; font-size:clamp(3rem,8vw,8rem); font-weight:950; letter-spacing:-.075em; color:rgba(255,255,255,.13); }
.art-signal .shape { position:absolute; width:38%; height:38%; right:8%; top:20%; border:1px solid rgba(0,201,255,.7); background:linear-gradient(135deg,rgba(0,201,255,.15),transparent); transform:skew(-12deg) rotate(6deg); box-shadow:0 0 55px rgba(0,201,255,.15); }

/* ============================= WORK PAGE ============================= */
.work-page-hero { min-height:82svh; position:relative; padding:170px 0 80px; display:flex; align-items:flex-end; background:radial-gradient(700px circle at 76% 36%,rgba(0,201,255,.14),transparent 42%),linear-gradient(145deg,#020713,#06142f 65%,#020713); }
.work-page-hero::after { content:"INDEX"; position:absolute; right:-2vw; top:12vh; font-size:24vw; font-weight:950; line-height:.7; color:rgba(255,255,255,.025); letter-spacing:-.09em; pointer-events:none; }
.work-hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:6vw; align-items:end; position:relative; z-index:2; }
.work-hero-side { padding-bottom:1.5vw; }
.work-hero-side p { max-width:420px; color:var(--muted); line-height:1.7; }
.work-filter-bar { position:sticky; top:82px; z-index:45; background:rgba(2,7,19,.9); backdrop-filter:blur(18px); border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.work-filter-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.work-filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter-button,.view-button { padding:9px 13px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:transparent; color:rgba(255,255,255,.63); cursor:pointer; font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; transition:.22s; }
.filter-button:hover,.filter-button.active,.view-button:hover,.view-button.active { color:#001022; background:var(--cyan); border-color:var(--cyan); }
.view-switch { display:flex; gap:6px; }
.work-browser { padding:80px 0 150px; background:#020713; }
.work-browser-grid { display:grid; grid-template-columns:minmax(0,.78fr) minmax(420px,1.22fr); gap:5vw; align-items:start; }
.work-index { border-top:1px solid rgba(255,255,255,.14); }
.work-index-item { width:100%; display:grid; grid-template-columns:46px 1fr auto; gap:18px; align-items:center; min-height:105px; border:0; border-bottom:1px solid rgba(255,255,255,.14); background:transparent; color:white; text-align:left; cursor:pointer; transition:.25s; }
.work-index-item span { color:var(--cyan); font-size:.58rem; letter-spacing:.12em; }
.work-index-item strong { font-size:clamp(1.35rem,2.3vw,2.55rem); letter-spacing:-.055em; }
.work-index-item small { color:rgba(255,255,255,.4); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; }
.work-index-item:hover,.work-index-item.active { padding-left:14px; background:rgba(0,201,255,.045); }
.work-index-item:hover strong,.work-index-item.active strong { color:var(--cyan); }
.work-preview-wrap { position:sticky; top:185px; }
.work-preview { height:min(69vh,720px); border-radius:28px; border:1px solid rgba(255,255,255,.14); box-shadow:0 35px 90px rgba(0,0,0,.35); }
.work-preview-meta { display:flex; justify-content:space-between; gap:30px; margin-top:17px; align-items:baseline; }
.work-preview-meta h2 { margin:0; font-size:clamp(1.5rem,2.6vw,2.8rem); letter-spacing:-.055em; }
.work-preview-meta p { margin:0; color:rgba(255,255,255,.46); font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; text-align:right; }
.work-grid-view { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,34px); }
.work-browser.grid-mode .work-browser-grid { display:none; }
.work-browser.grid-mode .work-grid-view { display:grid; }
.work-card { min-width:0; }
.work-card .project-visual { aspect-ratio:1.28; border-radius:22px; border:1px solid rgba(255,255,255,.13); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.work-card:hover .project-visual { transform:scale(.985); }
.work-card-meta { display:flex; justify-content:space-between; gap:20px; padding:14px 2px 28px; }
.work-card-meta h3 { margin:0; font-size:1.1rem; }
.work-card-meta span { color:rgba(255,255,255,.43); font-size:.6rem; text-align:right; text-transform:uppercase; }

/* ============================ PROJECT PAGE =========================== */
.project-hero { min-height:100svh; display:grid; align-items:end; position:relative; overflow:hidden; padding:145px 0 45px; background:#020713; }
.project-hero-bg { position:absolute; inset:0; opacity:.98; }
.project-hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(2,7,19,.16),rgba(2,7,19,.08) 45%,rgba(2,7,19,.9)); }
.project-hero-content { position:relative; z-index:3; }
.project-hero-top { display:flex; justify-content:space-between; gap:30px; margin-bottom:28vh; }
.project-hero-top span { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
.project-hero-top span:last-child { color:rgba(255,255,255,.58); }
.project-hero h1 { margin:0; font-size:clamp(5rem,13vw,14rem); line-height:.72; letter-spacing:-.085em; text-transform:uppercase; }
.project-hero-bottom { margin-top:40px; display:grid; grid-template-columns:1.2fr .8fr; gap:6vw; align-items:end; }
.project-hero-bottom p { margin:0; max-width:600px; color:rgba(255,255,255,.68); font-size:clamp(1rem,1.5vw,1.35rem); line-height:1.55; }
.project-hero-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 35px; }
.project-hero-facts div { padding-top:10px; border-top:1px solid rgba(255,255,255,.22); }
.project-hero-facts small { display:block; color:rgba(255,255,255,.38); font-size:.55rem; text-transform:uppercase; letter-spacing:.12em; }
.project-hero-facts strong { display:block; margin-top:5px; font-size:.76rem; font-weight:600; }
.project-story { background:#f3f8fb; color:#041127; }
.project-statement-block { min-height:92svh; display:grid; place-items:center; padding:90px 4vw; }
.project-statement-block h2 { margin:0; max-width:1250px; font-size:clamp(3rem,7.8vw,8.2rem); line-height:.88; letter-spacing:-.075em; text-transform:uppercase; text-align:center; }
.project-statement-block h2 span { color:#007dff; }
.project-media-block { padding:0 4vw 13vw; }
.project-media-wide { width:min(92vw,1550px); height:min(82vh,860px); margin:auto; border-radius:30px; }
.project-split { width:min(92vw,1500px); margin:auto; display:grid; grid-template-columns:.75fr 1.25fr; gap:6vw; align-items:center; padding:10vw 0 14vw; }
.project-split-copy .page-kicker { color:#0077ff; }
.project-split-copy h2 { margin:12px 0 24px; font-size:clamp(2.6rem,5.5vw,6rem); line-height:.9; letter-spacing:-.065em; text-transform:uppercase; }
.project-split-copy p { color:rgba(4,17,39,.68); line-height:1.75; }
.project-split-media { aspect-ratio:1.05; border-radius:28px; }
.project-gallery { width:min(92vw,1500px); margin:auto; display:grid; grid-template-columns:1.25fr .75fr; gap:2vw; padding-bottom:12vw; }
.project-gallery .project-visual { min-height:520px; border-radius:25px; }
.project-gallery .project-visual:nth-child(2) { margin-top:12vw; }
.next-project { min-height:80svh; position:relative; overflow:hidden; display:grid; align-items:end; padding:100px 0 60px; background:#020713; }
.next-project .project-visual { position:absolute; inset:0; opacity:.46; }
.next-project .project-visual::after { background:linear-gradient(to bottom,rgba(2,7,19,.25),rgba(2,7,19,.92)); }
.next-project-content { position:relative; z-index:4; }
.next-project-content span { color:var(--cyan); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
.next-project-content h2 { margin:16px 0 0; font-size:clamp(4rem,10vw,10rem); line-height:.8; letter-spacing:-.08em; text-transform:uppercase; }

/* =========================== SERVICES PAGE ========================== */
.services-page-hero { min-height:88svh; display:flex; align-items:flex-end; padding:170px 0 90px; position:relative; overflow:hidden; background:radial-gradient(circle at 77% 33%,rgba(0,201,255,.17),transparent 30%),linear-gradient(145deg,#020713,#061735 65%,#020713); }
.services-page-hero::after { content:"06"; position:absolute; right:-3vw; bottom:-3vw; font-size:43vw; line-height:.68; font-weight:950; color:rgba(255,255,255,.025); }
.services-page-intro { display:grid; grid-template-columns:1.2fr .8fr; gap:7vw; align-items:end; position:relative; z-index:2; }
.services-page-intro .page-copy { justify-self:end; }
.service-chapters { position:relative; background:#020713; }
.service-chapter { min-height:100svh; position:relative; display:grid; align-items:center; overflow:hidden; border-top:1px solid rgba(255,255,255,.1); }
.service-chapter-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:5vw; align-items:center; }
.service-chapter-copy { position:relative; z-index:5; }
.service-chapter-copy .count { color:var(--cyan); font-size:.62rem; letter-spacing:.16em; }
.service-chapter-copy h2 { margin:16px 0 20px; font-size:clamp(3.4rem,6.2vw,6.8rem); line-height:.82; letter-spacing:-.07em; text-transform:uppercase; }
.service-chapter-copy p { max-width:470px; color:var(--muted); line-height:1.7; }
.service-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:25px; }
.service-tags span { padding:8px 11px; border:1px solid rgba(255,255,255,.16); border-radius:999px; font-size:.57rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.service-art { position:relative; min-height:min(650px,70vh); border:1px solid rgba(255,255,255,.12); border-radius:30px; overflow:hidden; background:rgba(255,255,255,.025); }
.service-art-graphic { background:linear-gradient(145deg,#f5f9fc,#d6ebf8); color:#041128; }
.service-art-graphic .sa-type { position:absolute; font-weight:950; text-transform:uppercase; letter-spacing:-.09em; }
.service-art-graphic .sa-a { left:6%; top:8%; font-size:10vw; color:#006cff; }
.service-art-graphic .sa-b { right:-3%; bottom:6%; font-size:13vw; color:rgba(4,17,40,.13); transform:rotate(-7deg); }
.service-art-graphic .sa-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(4,17,40,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(4,17,40,.08) 1px,transparent 1px); background-size:54px 54px; }
.service-art-motion { background:#040a18; }
.service-art-motion .motion-strip { position:absolute; width:140%; left:-20%; white-space:nowrap; font-size:8vw; line-height:.8; font-weight:950; color:rgba(0,201,255,.16); animation:serviceMove 5s ease-in-out infinite alternate; }
.service-art-motion .motion-strip:nth-child(1){top:15%;}.service-art-motion .motion-strip:nth-child(2){top:44%;animation-direction:alternate-reverse;color:rgba(255,255,255,.08)}.service-art-motion .motion-strip:nth-child(3){top:72%;}
@keyframes serviceMove { to { transform:translateX(13%); } }
.service-art-video { background:linear-gradient(145deg,#071a3b,#02050d); }
.video-ui-time { position:absolute; right:5%; top:6%; font:700 .72rem monospace; color:var(--cyan); }
.video-ui-preview { position:absolute; left:8%; right:8%; top:12%; height:52%; border:1px solid rgba(255,255,255,.15); background:radial-gradient(circle at 60% 45%,rgba(0,201,255,.25),transparent 22%),#020713; }
.video-ui-track { position:absolute; left:6%; right:6%; height:7%; border:1px solid rgba(255,255,255,.12); display:flex; gap:4px; padding:4px; }
.video-ui-track i { flex:1; background:linear-gradient(90deg,#056cff,#00c9ff); opacity:.48; }
.video-ui-track.t1{bottom:26%;}.video-ui-track.t2{bottom:17%;left:14%;}.video-ui-track.t3{bottom:8%;right:16%;}
.service-art-3d { background:radial-gradient(circle at center,rgba(0,201,255,.13),transparent 34%),#020713; perspective:700px; }
.service-art-3d .three-ring { position:absolute; left:50%; top:50%; width:52%; aspect-ratio:1; transform:translate(-50%,-50%) rotateX(63deg) rotateZ(25deg); border:38px solid rgba(183,241,255,.38); border-radius:50%; box-shadow:0 0 50px rgba(0,201,255,.3),inset 0 0 40px rgba(0,201,255,.35); animation:threeRing 8s linear infinite; }
@keyframes threeRing { to { transform:translate(-50%,-50%) rotateX(63deg) rotateZ(385deg); } }
.service-art-games { background:linear-gradient(180deg,#041633,#01040a); }
.service-art-games .game-floor { position:absolute; left:-15%; right:-15%; bottom:-22%; height:70%; background-image:linear-gradient(rgba(0,201,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,255,.22) 1px,transparent 1px); background-size:44px 44px; transform:perspective(600px) rotateX(64deg); transform-origin:center bottom; }
.game-hud-big { position:absolute; inset:8%; border:1px solid rgba(0,201,255,.45); }
.game-hud-big::before,.game-hud-big::after { content:""; position:absolute; width:42px; height:42px; border-color:var(--cyan); border-style:solid; }
.game-hud-big::before{left:-1px;top:-1px;border-width:2px 0 0 2px}.game-hud-big::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.game-crosshair { position:absolute; left:50%; top:48%; width:80px; height:80px; transform:translate(-50%,-50%); border:1px solid rgba(0,201,255,.7); border-radius:50%; box-shadow:0 0 35px rgba(0,201,255,.3); }
.service-art-other { background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),#041027; }
.other-float { position:absolute; padding:18px 24px; border:1px solid rgba(255,255,255,.2); background:rgba(0,201,255,.07); font-size:clamp(1.5rem,3vw,3.4rem); font-weight:900; letter-spacing:-.06em; transform:rotate(var(--r)); }
.other-float:nth-child(1){left:8%;top:14%;--r:-8deg}.other-float:nth-child(2){right:8%;top:22%;--r:7deg}.other-float:nth-child(3){left:26%;bottom:13%;--r:3deg}.other-float:nth-child(4){right:18%;bottom:5%;--r:-12deg}

/* ============================= STUDIO PAGE ========================== */
.studio-page-hero { min-height:100svh; padding:170px 0 90px; display:grid; align-items:end; position:relative; background:radial-gradient(circle at 76% 28%,rgba(0,201,255,.12),transparent 34%),linear-gradient(150deg,#020713,#06142e 62%,#020713); overflow:hidden; }
.studio-page-hero::before { content:"EAT"; position:absolute; right:-7vw; top:17vh; font-size:35vw; font-weight:950; line-height:.68; letter-spacing:-.1em; color:rgba(255,255,255,.025); }
.studio-hero-grid { position:relative; z-index:3; display:grid; grid-template-columns:1.25fr .75fr; gap:7vw; align-items:end; }
.studio-hero-grid .page-copy { justify-self:end; }
.manifesto-scroll { background:#f4f8fa; color:#041128; padding:12vw 0; }
.manifesto-lines { display:flex; flex-direction:column; gap:2vw; }
.manifesto-line { display:grid; grid-template-columns:60px 1fr; gap:3vw; align-items:start; padding:2.5vw 0; border-top:1px solid rgba(4,17,40,.15); }
.manifesto-line span { color:#0077ff; font-size:.62rem; letter-spacing:.12em; }
.manifesto-line h2 { margin:0; font-size:clamp(2.8rem,6.6vw,7rem); line-height:.88; letter-spacing:-.07em; text-transform:uppercase; }
.manifesto-line h2 em { font-style:normal; color:#0077ff; }
.studio-constellation-section { min-height:110svh; padding:12vw 0; background:#020713; position:relative; overflow:hidden; }
.constellation-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:6vw; align-items:center; }
.constellation-copy h2 { margin:14px 0 25px; font-size:clamp(3rem,6vw,6.5rem); line-height:.86; letter-spacing:-.07em; text-transform:uppercase; }
.constellation-copy p { color:var(--muted); line-height:1.7; }
.tool-constellation { position:relative; min-height:650px; border:1px solid rgba(255,255,255,.12); border-radius:50%; aspect-ratio:1; max-height:72vh; margin:auto; width:min(100%,700px); background:radial-gradient(circle,rgba(0,201,255,.1),transparent 55%); }
.tool-core { position:absolute; left:50%; top:50%; width:120px; aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid var(--cyan); border-radius:50%; display:grid; place-items:center; font-size:1.8rem; font-weight:950; box-shadow:0 0 50px rgba(0,201,255,.25); }
.tool-node { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); padding:11px 14px; border:1px solid rgba(255,255,255,.17); border-radius:999px; background:rgba(2,8,22,.72); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; cursor:default; transition:.3s; }
.tool-node::after { content:""; position:absolute; width:var(--lineW,90px); height:1px; background:linear-gradient(90deg,rgba(0,201,255,.4),transparent); left:50%; top:50%; transform-origin:left; transform:rotate(var(--lineR,0deg)); opacity:.3; z-index:-1; }
.tool-node:hover { color:#001022; background:var(--cyan); border-color:var(--cyan); transform:translate(-50%,-50%) scale(1.08); }
.process-section { padding:12vw 0; background:#041126; }
.process-head { display:grid; grid-template-columns:1fr .7fr; gap:6vw; align-items:end; margin-bottom:8vw; }
.process-head h2 { margin:12px 0 0; font-size:clamp(3.3rem,7vw,7.6rem); line-height:.82; letter-spacing:-.075em; text-transform:uppercase; }
.process-head p { color:var(--muted); line-height:1.7; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.14); }
.process-card { min-height:280px; padding:26px 22px; border-right:1px solid rgba(255,255,255,.14); position:relative; overflow:hidden; }
.process-card:last-child { border-right:0; }
.process-card span { color:var(--cyan); font-size:.62rem; letter-spacing:.12em; }
.process-card h3 { margin:70px 0 15px; font-size:1.6rem; letter-spacing:-.05em; text-transform:uppercase; }
.process-card p { color:rgba(255,255,255,.48); font-size:.76rem; line-height:1.6; }
.process-card::before { content:""; position:absolute; inset:auto 0 0; height:4px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:.35s; }
.process-card:hover::before { transform:scaleX(1); }

/* ============================== LAB PAGE ============================ */
.lab-page { min-height:100svh; background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(0,201,255,.12),transparent 25%),#01050d; }
.lab-hero { min-height:78svh; padding:165px 0 80px; display:flex; align-items:flex-end; position:relative; }
.lab-hero-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:6vw; align-items:end; }
.lab-hero-side { display:flex; flex-direction:column; align-items:flex-start; gap:25px; }
.lab-hero-side p { color:var(--muted); line-height:1.7; }
.shuffle-button { padding:13px 17px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:transparent; color:white; cursor:pointer; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; transition:.25s; }
.shuffle-button:hover { color:#001022; background:var(--cyan); border-color:var(--cyan); }
.lab-board { position:relative; min-height:130svh; padding:5vw 0 14vw; overflow:hidden; }
.lab-board-inner { position:relative; width:min(92vw,1500px); min-height:1100px; margin:auto; }
.lab-card { position:absolute; width:var(--w); left:var(--drag-left, var(--x)); top:var(--drag-top, var(--y)); min-width:180px; border:1px solid rgba(255,255,255,.15); border-radius:20px; overflow:hidden; background:rgba(5,18,43,.72); backdrop-filter:blur(14px); transition:left .8s cubic-bezier(.2,.8,.2,1),top .8s cubic-bezier(.2,.8,.2,1),transform .3s; box-shadow:0 25px 65px rgba(0,0,0,.25); }
.lab-card:hover { transform:translateY(-8px) rotate(var(--rot,0deg)); z-index:9; border-color:rgba(0,201,255,.55); }
.lab-card-art { min-height:var(--h,230px); position:relative; overflow:hidden; background:#061630; }
.lab-card-info { padding:16px; display:flex; justify-content:space-between; gap:18px; }
.lab-card-info strong { font-size:.9rem; }
.lab-card-info span { color:rgba(255,255,255,.4); font-size:.56rem; text-transform:uppercase; }
.lab-art-1 { background:radial-gradient(circle at center,rgba(0,201,255,.65),transparent 7%),repeating-radial-gradient(circle at center,rgba(0,201,255,.18) 0 1px,transparent 1px 16px),#020713; }
.lab-art-2 { background:linear-gradient(120deg,#035eff,#020713 55%); }
.lab-art-2::before { content:"TYPE"; position:absolute; left:-8%; bottom:0; font-size:9rem; font-weight:950; color:rgba(255,255,255,.18); transform:rotate(-15deg); }
.lab-art-3 { background:repeating-linear-gradient(90deg,rgba(0,201,255,.14) 0 1px,transparent 1px 11px),linear-gradient(#061a3b,#020713); }
.lab-art-3::before { content:""; position:absolute; inset:18%; border:2px solid rgba(255,255,255,.5); transform:rotate(33deg); box-shadow:0 0 45px rgba(0,201,255,.35); }
.lab-art-4 { background:radial-gradient(circle at 32% 42%,#00c9ff 0 6%,transparent 7%),radial-gradient(circle at 64% 55%,#0873ff 0 9%,transparent 10%),#020713; filter:saturate(1.2); }
.lab-art-5 { background:#f4f8fa; color:#041128; }
.lab-art-5::before { content:"NO RULES"; position:absolute; inset:auto 0 12%; font-size:5rem; font-weight:950; letter-spacing:-.09em; transform:rotate(-8deg); color:#006cff; }
.lab-art-6 { background:linear-gradient(135deg,#020713,#0b3369); }
.lab-art-6::before { content:""; position:absolute; width:160px; height:160px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg); border:1px solid var(--cyan); box-shadow:0 0 50px rgba(0,201,255,.45); }

/* ============================ CONTACT PAGE ========================== */
.contact-page { min-height:100svh; background:radial-gradient(700px circle at var(--mx,72%) var(--my,32%),rgba(0,201,255,.15),transparent 38%),linear-gradient(145deg,#020713,#061632 62%,#020713); }
.contact-hero { min-height:100svh; padding:155px 0 90px; display:grid; align-items:center; }
.contact-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:7vw; align-items:center; }
.contact-copy h1 { margin:12px 0 26px; font-size:clamp(4.2rem,8vw,8.5rem); line-height:.78; letter-spacing:-.08em; text-transform:uppercase; }
.contact-copy h1 span { color:var(--cyan); }
.contact-copy p { color:var(--muted); line-height:1.7; max-width:430px; }
.contact-direct { margin-top:42px; display:flex; flex-direction:column; gap:8px; }
.contact-direct span { color:rgba(255,255,255,.4); font-size:.57rem; letter-spacing:.12em; text-transform:uppercase; }
.contact-direct a { font-size:.9rem; }
.idea-form { position:relative; padding:clamp(26px,4vw,55px); border:1px solid rgba(255,255,255,.15); border-radius:30px; background:rgba(2,10,27,.65); backdrop-filter:blur(20px); box-shadow:0 35px 90px rgba(0,0,0,.28); }
.idea-form::before { content:"FEED / INPUT"; position:absolute; right:24px; top:20px; color:rgba(255,255,255,.28); font-size:.56rem; letter-spacing:.15em; }
.form-sentence { margin:0; font-size:clamp(1.55rem,3vw,3.2rem); line-height:1.55; letter-spacing:-.045em; font-weight:700; }
.inline-field { display:inline-block; min-width:150px; max-width:100%; color:var(--cyan); border:0; border-bottom:1px solid rgba(0,201,255,.55); background:transparent; outline:none; font:inherit; font-weight:700; padding:0 .12em .02em; vertical-align:baseline; }
.inline-field::placeholder { color:rgba(0,201,255,.36); }
select.inline-field { appearance:none; cursor:pointer; }
select.inline-field option { color:#061128; background:white; font-size:1rem; }
.form-details { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:46px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field.full { grid-column:1/-1; }
.form-field label { color:rgba(255,255,255,.4); font-size:.56rem; text-transform:uppercase; letter-spacing:.12em; }
.form-field input,.form-field textarea { width:100%; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:rgba(255,255,255,.035); color:white; padding:14px 15px; outline:none; resize:vertical; transition:.2s; }
.form-field input:focus,.form-field textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,201,255,.07); }
.form-submit { width:100%; margin-top:20px; padding:18px; border:0; border-radius:13px; background:var(--cyan); color:#001020; font-weight:900; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.form-submit:hover { transform:translateY(-3px); box-shadow:0 15px 35px rgba(0,201,255,.18); }
.form-feedback { min-height:24px; margin:14px 0 0; color:var(--cyan); font-size:.68rem; letter-spacing:.06em; }
.contact-orbit { position:absolute; right:-8vw; bottom:-12vw; width:32vw; aspect-ratio:1; border:1px solid rgba(0,201,255,.16); border-radius:50%; pointer-events:none; }
.contact-orbit::before,.contact-orbit::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.08); border-radius:50%; inset:14%; }.contact-orbit::after{inset:30%;border-style:dashed}

/* Generic project links / home previews */
.more-link { display:inline-flex; align-items:center; gap:10px; color:var(--cyan); font-size:.64rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }

/* ---------------------------- Responsive --------------------------- */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns:1.4fr .7fr .8fr; }
  .footer-meta { grid-column:1/-1; min-height:auto; flex-direction:row; align-items:center; text-align:left; }
  .footer-join { align-items:center; }
  .work-browser-grid { grid-template-columns:.75fr 1.25fr; gap:3vw; }
  .work-preview { height:58vh; }
  .service-chapter-grid,.constellation-grid { grid-template-columns:.9fr 1.1fr; }
  .tool-constellation { min-height:540px; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .process-card:nth-child(2) { border-right:0; }.process-card:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
}

@media (max-width: 820px) {
  .display-title { font-size:clamp(4rem,14vw,7.4rem); }
  .work-hero-grid,.services-page-intro,.studio-hero-grid,.lab-hero-grid,.contact-grid,.project-hero-bottom,.process-head { grid-template-columns:1fr; }
  .work-hero-side,.services-page-intro .page-copy,.studio-hero-grid .page-copy { justify-self:start; max-width:560px; }
  .work-page-hero,.services-page-hero { min-height:auto; padding-top:150px; }
  .work-browser-grid { grid-template-columns:1fr; }
  .work-index { display:grid; grid-template-columns:repeat(2,1fr); gap:0 20px; }
  .work-preview-wrap { position:relative; top:auto; margin-top:50px; }
  .work-preview { height:58vw; min-height:440px; }
  .work-grid-view { grid-template-columns:1fr 1fr; }
  .service-chapter { min-height:auto; padding:100px 0; }
  .service-chapter-grid { grid-template-columns:1fr; }
  .service-art { min-height:520px; }
  .project-hero-top { margin-bottom:20vh; }
  .project-split,.project-gallery { grid-template-columns:1fr; }
  .project-split-media { order:-1; }
  .project-gallery .project-visual:nth-child(2) { margin-top:0; }
  .constellation-grid { grid-template-columns:1fr; }
  .tool-constellation { margin-top:35px; width:min(90vw,620px); min-height:auto; }
  .lab-board-inner { min-height:1500px; }
  .lab-card { width:min(var(--w),48vw); }
  .contact-grid { gap:55px; }
  .idea-form { max-width:720px; }
}

@media (max-width: 680px) {
  :root { --shell:min(91vw,620px); }
  .cursor-dot,.cursor-ring { display:none; }
  .tape-break { height:84px; }
  .tape-break .tape-video { height:52px; width:120%; left:-10%; }
  .display-title { font-size:clamp(3.7rem,17vw,6rem); }
  .page-copy { font-size:.9rem; }
  .work-filter-inner { min-height:88px; flex-direction:column; align-items:flex-start; justify-content:center; padding:12px 0; }
  .work-filters { flex-wrap:nowrap; max-width:100%; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .work-filters::-webkit-scrollbar { display:none; }
  .view-switch { position:absolute; right:0; bottom:8px; }
  .work-index { display:block; }
  .work-index-item { min-height:88px; }
  .work-preview-wrap { display:none; }
  .work-grid-view { grid-template-columns:1fr; display:grid; }
  .work-browser .work-browser-grid { display:none; }
  .work-browser.grid-mode .work-grid-view { display:grid; }
  .project-hero { padding-top:120px; min-height:92svh; }
  .project-hero-top { margin-bottom:24vh; }
  .project-hero h1 { font-size:clamp(4.3rem,20vw,7rem); }
  .project-hero-facts { grid-template-columns:1fr 1fr; }
  .project-media-wide { height:60svh; border-radius:18px; }
  .project-gallery .project-visual { min-height:360px; border-radius:18px; }
  .service-art { min-height:410px; border-radius:20px; }
  .service-art-graphic .sa-a { font-size:20vw; }
  .service-art-graphic .sa-b { font-size:25vw; }
  .manifesto-line { grid-template-columns:35px 1fr; gap:15px; padding:26px 0; }
  .tool-constellation { width:100%; }
  .tool-node { font-size:.5rem; padding:8px 10px; }
  .process-grid { grid-template-columns:1fr; }
  .process-card { min-height:220px; border-right:0; border-bottom:1px solid rgba(255,255,255,.14); }
  .process-card h3 { margin-top:48px; }
  .lab-board { min-height:auto; padding-bottom:100px; }
  .lab-board-inner { min-height:0; display:grid; grid-template-columns:1fr; gap:18px; }
  .lab-card { position:relative; width:100% !important; left:auto !important; top:auto !important; }
  .lab-card-art { min-height:310px; }
  .contact-hero { padding-top:125px; }
  .form-sentence { font-size:clamp(1.45rem,7.3vw,2.2rem); line-height:1.65; }
  .inline-field { min-width:120px; }
  .form-details { grid-template-columns:1fr; }
  .form-field.full { grid-column:auto; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .footer-meta { grid-column:1/-1; }
  .footer-join { align-items:flex-start; flex-direction:column; gap:20px; }
  .footer-join-cta { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Service chapter rail */
.service-rail { position:fixed; z-index:60; right:1.4vw; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; }
.service-rail a { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.15); border-radius:50%; background:rgba(2,8,22,.48); backdrop-filter:blur(12px); color:rgba(255,255,255,.45); font-size:.52rem; transition:.25s; }
.service-rail a:hover,.service-rail a.active { color:#001022; background:var(--cyan); border-color:var(--cyan); transform:scale(1.08); }
@media (max-width:820px) { .service-rail { display:none; } }


/* ==================================================================
   EAT FULL PROTOTYPE V2 — REQUESTED DESIGN ADJUSTMENTS
   ================================================================== */

/* Home / scroll-driven selected work */
.home-work-scroll { position:relative; background:#02050d; padding:14vh 0 9vh; }
.home-work-scroll-head { display:grid; grid-template-columns:1.05fr .55fr; gap:7vw; align-items:end; margin-bottom:4vh; }
.home-work-scroll-head h2 { margin:13px 0 0; font-size:clamp(3.8rem,7.5vw,8rem); line-height:.82; letter-spacing:-.075em; text-transform:uppercase; }
.home-work-scroll-head h2 span { color:var(--cyan); }
.home-work-scroll-head > p { margin:0 0 1vh; max-width:480px; color:var(--muted); line-height:1.72; }
.home-work-scroll-layout { display:grid; grid-template-columns:minmax(300px,.62fr) minmax(0,1.38fr); gap:6vw; align-items:start; }
.home-work-steps { padding-top:18vh; padding-bottom:18vh; }
.home-work-step { min-height:66vh; display:flex; flex-direction:column; justify-content:center; padding:5vh 0; border-top:1px solid rgba(255,255,255,.13); opacity:.28; transition:opacity .35s,transform .45s; }
.home-work-step.active { opacity:1; transform:translateX(12px); }
.home-work-step > span { color:var(--cyan); font-size:.6rem; letter-spacing:.16em; }
.home-work-step h3 { margin:18px 0 12px; font-size:clamp(2.2rem,4.2vw,4.8rem); line-height:.88; letter-spacing:-.065em; text-transform:uppercase; }
.home-work-step p { margin:0; max-width:390px; color:rgba(255,255,255,.62); line-height:1.6; }
.home-work-step small { margin-top:20px; color:rgba(255,255,255,.37); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; }
.home-work-step a { width:max-content; margin-top:18px; color:var(--cyan); font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.home-work-sticky-wrap { position:sticky; top:13vh; align-self:start; padding-top:8vh; }
.home-work-preview { height:min(68vh,720px); min-height:520px; border-radius:30px; border:1px solid rgba(255,255,255,.14); box-shadow:0 35px 95px rgba(0,0,0,.38); transition:opacity .22s,transform .45s cubic-bezier(.2,.8,.2,1); }
.home-work-preview.is-switching { opacity:.42; transform:scale(.975); }
.home-work-preview-meta { display:flex; justify-content:space-between; align-items:end; gap:35px; padding-top:18px; }
.home-work-preview-meta span { color:var(--cyan); font-size:.58rem; letter-spacing:.14em; }
.home-work-preview-meta h3 { margin:6px 0 0; font-size:clamp(1.6rem,2.6vw,2.8rem); letter-spacing:-.055em; }
.home-work-preview-meta p { margin:0; max-width:260px; color:rgba(255,255,255,.43); font-size:.62rem; line-height:1.45; text-align:right; text-transform:uppercase; letter-spacing:.09em; }
.home-work-progress { height:2px; margin-top:18px; background:rgba(255,255,255,.12); overflow:hidden; }
.home-work-progress i { display:block; width:100%; height:100%; background:var(--cyan); transform:scaleX(.2); transform-origin:left; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.home-work-end { padding-top:2vh; }

/* Additional project cover languages — gives the denser Work page real variety. */
.art-atlas { background:linear-gradient(145deg,#edf6fb,#bfe7f8); color:#031126; }
.art-atlas::before { content:"ATLAS"; position:absolute; left:-3%; top:10%; font-size:clamp(6rem,15vw,16rem); font-weight:950; letter-spacing:-.09em; color:#0873ff; transform:rotate(-4deg); }
.art-atlas .shape { position:absolute; right:8%; bottom:12%; width:35%; height:46%; border:2px solid #031126; background:rgba(255,255,255,.48); transform:rotate(7deg); }
.art-northline { background:linear-gradient(135deg,#051024,#02050d); }
.art-northline::before { content:"NORTH / LINE"; position:absolute; left:7%; bottom:10%; font-size:clamp(3rem,8vw,8rem); font-weight:950; color:rgba(255,255,255,.12); letter-spacing:-.08em; }
.art-northline .shape { position:absolute; left:12%; right:12%; top:45%; height:3px; background:var(--cyan); box-shadow:0 0 28px var(--cyan); transform:rotate(-8deg); }
.art-orbit { background:radial-gradient(circle at 65% 45%,rgba(0,201,255,.24),transparent 18%),#06162f; }
.art-orbit::before { content:""; position:absolute; width:62%; aspect-ratio:1; right:-8%; top:-10%; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 42px rgba(0,201,255,.05),0 0 0 84px rgba(255,255,255,.025); }
.art-orbit .shape { position:absolute; width:90px; aspect-ratio:1; left:34%; top:42%; border-radius:50%; background:var(--cyan); box-shadow:0 0 70px rgba(0,201,255,.55); }
.art-kinetic { background:#030814; }
.art-kinetic::before { content:"KINETIC / KINETIC / KINETIC"; position:absolute; left:-10%; top:30%; white-space:nowrap; font-size:clamp(4rem,11vw,11rem); font-weight:950; color:rgba(0,201,255,.14); transform:skewX(-12deg); }
.art-kinetic .shape { position:absolute; left:8%; right:8%; bottom:22%; height:1px; background:rgba(255,255,255,.7); transform:rotate(5deg); }
.art-echo { background:radial-gradient(circle at center,rgba(0,201,255,.24),transparent 20%),#020713; }
.art-echo::before,.art-echo::after { content:""; position:absolute; left:50%; top:50%; width:42%; aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.35); border-radius:50%; }
.art-echo::after { width:62%; border-color:rgba(0,201,255,.25); }
.art-echo .shape { position:absolute; width:16%; aspect-ratio:1; left:42%; top:42%; border-radius:50%; background:rgba(255,255,255,.84); box-shadow:0 0 45px var(--cyan); }
.art-velocity { background:linear-gradient(135deg,#02050d,#071a3a); }
.art-velocity::before { content:"VELOCITY"; position:absolute; left:-4%; top:38%; font-size:clamp(4rem,12vw,12rem); font-weight:950; font-style:italic; letter-spacing:-.1em; color:rgba(255,255,255,.09); transform:skewX(-14deg); }
.art-velocity .shape { position:absolute; right:8%; top:12%; bottom:12%; width:5px; background:var(--cyan); box-shadow:18px 0 0 rgba(0,201,255,.5),36px 0 0 rgba(0,201,255,.2); transform:skewX(-13deg); }
.art-night { background:linear-gradient(180deg,#01040a,#071c45); }
.art-night::before { content:""; position:absolute; width:55%; height:2px; left:12%; top:42%; background:#fff; box-shadow:0 0 35px #00c9ff,0 80px 80px #0873ff; transform:rotate(-13deg); }
.art-night .shape { position:absolute; right:18%; bottom:18%; width:110px; aspect-ratio:1; border-radius:50%; background:#020713; border:1px solid rgba(0,201,255,.7); box-shadow:0 0 55px rgba(0,201,255,.4); }
.art-human { background:linear-gradient(145deg,#0b2248,#020713); }
.art-human::before { content:"HUMAN / FREQUENCY"; position:absolute; left:6%; bottom:9%; font-size:clamp(3rem,7vw,7rem); font-weight:950; color:rgba(255,255,255,.13); letter-spacing:-.07em; }
.art-human .shape { position:absolute; width:28%; height:60%; right:14%; top:18%; border-radius:50% 50% 42% 42%; background:linear-gradient(180deg,rgba(0,201,255,.55),rgba(255,255,255,.04)); filter:blur(.2px); }
.art-atlascut { background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 54px),linear-gradient(135deg,#020713,#0b2a54); }
.art-atlascut::before { content:"00:14:22"; position:absolute; top:10%; right:8%; font:700 .8rem monospace; color:var(--cyan); }
.art-atlascut .shape { position:absolute; left:8%; right:8%; bottom:22%; height:22%; background:linear-gradient(90deg,#0873ff 0 22%,transparent 22% 25%,#00c9ff 25% 58%,transparent 58% 62%,rgba(255,255,255,.35) 62%); }
.art-glass { background:radial-gradient(circle at 48% 45%,rgba(181,242,255,.25),transparent 25%),linear-gradient(145deg,#071a3b,#02050d); }
.art-glass .shape { position:absolute; width:42%; aspect-ratio:1; left:30%; top:25%; border:22px solid rgba(214,249,255,.5); border-radius:34% 66% 42% 58%; transform:rotate(24deg); box-shadow:inset 0 0 45px rgba(0,201,255,.45),0 0 60px rgba(0,201,255,.28); }
.art-chroma { background:linear-gradient(135deg,#061126,#020713); }
.art-chroma::before { content:""; position:absolute; inset:15%; background:conic-gradient(from 50deg,#00c9ff,#0873ff,#f7fbff,#00c9ff); filter:blur(18px); opacity:.55; border-radius:50%; }
.art-chroma .shape { position:absolute; inset:27%; border-radius:50%; background:#07162d; border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 0 55px rgba(255,255,255,.12); }
.art-soft { background:radial-gradient(circle at 50% 50%,rgba(0,201,255,.12),transparent 35%),#020713; }
.art-soft::before { content:"SOFT / MACHINE"; position:absolute; top:8%; left:7%; font-size:clamp(2.5rem,6vw,6rem); font-weight:950; color:rgba(255,255,255,.1); }
.art-soft .shape { position:absolute; width:48%; height:36%; left:27%; top:37%; border-radius:48% 52% 31% 69% / 60% 36% 64% 40%; background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(0,201,255,.1)); box-shadow:0 0 60px rgba(0,201,255,.2); }
.art-drift { background:linear-gradient(180deg,#041a3d,#01040b 76%); }
.art-drift::before { content:""; position:absolute; left:-10%; right:-10%; bottom:-20%; height:68%; background-image:linear-gradient(rgba(0,201,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,255,.16) 1px,transparent 1px); background-size:42px 42px; transform:perspective(500px) rotateX(62deg); transform-origin:center bottom; }
.art-drift .shape { position:absolute; left:22%; right:22%; top:32%; height:18%; border:2px solid rgba(255,255,255,.7); transform:skewX(-20deg); box-shadow:0 0 35px rgba(0,201,255,.4); }
.art-zero { background:#01050d; }
.art-zero::before { content:"ZERO / POINT"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; font-size:clamp(3rem,8vw,8rem); font-weight:950; color:rgba(255,255,255,.09); }
.art-zero .shape { position:absolute; width:12px; aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:var(--cyan); box-shadow:0 0 0 50px rgba(0,201,255,.05),0 0 80px var(--cyan); }
.art-quest { background:linear-gradient(180deg,#09284f,#041125 65%,#020713); }
.art-quest::before { content:""; position:absolute; left:8%; right:8%; bottom:16%; height:30%; clip-path:polygon(0 100%,18% 28%,30% 75%,48% 5%,65% 68%,81% 22%,100% 100%); background:linear-gradient(180deg,#00c9ff,#06326d); opacity:.75; }
.art-quest .shape { position:absolute; width:42px; aspect-ratio:1; right:22%; top:20%; border-radius:50%; border:1px solid #fff; box-shadow:0 0 28px #00c9ff; }
.art-web { background:linear-gradient(145deg,#edf6fb,#d6ebf8); color:#041128; }
.art-web::before { content:"WEB / MATTER"; position:absolute; left:6%; top:8%; font-size:clamp(3rem,7vw,7rem); font-weight:950; color:#0873ff; letter-spacing:-.075em; }
.art-web .shape { position:absolute; left:8%; right:8%; bottom:10%; height:42%; border:1px solid rgba(4,17,40,.35); background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(0,201,255,.18)); border-radius:12px; }
.art-photo { background:linear-gradient(145deg,#06142c,#020713); }
.art-photo::before { content:"PHOTO / SEQUENCE"; position:absolute; right:4%; bottom:8%; font-size:clamp(2.7rem,6vw,6rem); font-weight:950; color:rgba(255,255,255,.11); writing-mode:vertical-rl; }
.art-photo .shape { position:absolute; left:12%; top:14%; width:52%; height:68%; background:linear-gradient(180deg,#9deaff,#0873ff 55%,#020713); filter:saturate(.8); box-shadow:18px 18px 0 rgba(255,255,255,.08); }
.art-hybrid { background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),#041027; }
.art-hybrid::before { content:"HYBRID"; position:absolute; left:-4%; bottom:4%; font-size:clamp(5rem,13vw,13rem); font-weight:950; color:rgba(0,201,255,.1); letter-spacing:-.09em; transform:rotate(-8deg); }
.art-hybrid .shape { position:absolute; right:15%; top:18%; width:36%; aspect-ratio:1; border:1px solid rgba(255,255,255,.4); background:linear-gradient(135deg,rgba(0,201,255,.25),transparent); transform:rotate(34deg) skew(-8deg); box-shadow:0 0 55px rgba(0,201,255,.2); }

/* Services / direct work links + four featured covers */
.service-art-column { min-width:0; }
.service-work-link { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; margin-top:32px; min-width:230px; padding:14px 16px; border:1px solid rgba(0,201,255,.45); border-radius:999px; color:var(--cyan); font-size:.62rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; transition:.25s; }
.service-work-link:hover { background:var(--cyan); color:#001022; transform:translateX(6px); }
.service-project-thumbs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
.service-project-thumb { min-width:0; }
.service-project-thumb .project-visual { height:105px; border-radius:12px; border:1px solid rgba(255,255,255,.13); transition:transform .3s,border-color .3s; }
.service-project-thumb:hover .project-visual { transform:translateY(-5px); border-color:rgba(0,201,255,.62); }
.service-project-thumb .project-visual::before { font-size:2rem; }
.service-project-thumb .project-visual .shape { scale:.55; transform-origin:center; }
.service-project-thumb > span { display:block; margin-top:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.58); font-size:.53rem; letter-spacing:.06em; text-transform:uppercase; }

/* Studio / image-led notes */
.studio-visual-stories { padding:12vw 0; background:#061126; }
.studio-visual-head { display:grid; grid-template-columns:.65fr 1.35fr; gap:5vw; align-items:end; margin-bottom:8vw; }
.studio-visual-head h2 { margin:0; font-size:clamp(3.4rem,7vw,7.4rem); line-height:.84; letter-spacing:-.075em; text-transform:uppercase; }
.studio-visual-head h2 span { color:var(--cyan); }
.studio-story-list { display:flex; flex-direction:column; gap:10vw; }
.studio-story-row { display:grid; grid-template-columns:1.2fr .8fr; gap:6vw; align-items:center; }
.studio-story-row.reverse { grid-template-columns:.8fr 1.2fr; }
.studio-story-row.reverse .studio-story-media { order:2; }
.studio-story-media { height:min(62vh,650px); min-height:430px; border-radius:28px; border:1px solid rgba(255,255,255,.13); box-shadow:0 28px 80px rgba(0,0,0,.28); }
.studio-story-copy > span { color:var(--cyan); font-size:.6rem; letter-spacing:.14em; }
.studio-story-copy h3 { margin:18px 0 18px; font-size:clamp(2rem,3.6vw,4rem); line-height:.95; letter-spacing:-.06em; text-transform:uppercase; }
.studio-story-copy p { max-width:480px; color:var(--muted); line-height:1.72; }

/* Lab / draggable canvas */
.lab-board { min-height:auto; padding:5vw 0 12vw; overflow:visible; }
.lab-board-label { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:16px; }
.lab-board-label span { color:var(--cyan); font-size:.62rem; font-weight:800; letter-spacing:.16em; }
.lab-board-label p { margin:0; color:rgba(255,255,255,.42); font-size:.67rem; }
.lab-board-inner { position:relative; width:min(92vw,1500px); height:1120px; min-height:0; margin:auto; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:30px; background:radial-gradient(700px circle at var(--mx) var(--my),rgba(0,201,255,.08),transparent 40%),#020713; }
.lab-board-grid { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.35)); }
.lab-card { left:var(--drag-left, var(--x)); top:var(--drag-top, var(--y)); touch-action:none; -webkit-user-select:none; user-select:none; cursor:grab; transition:left .8s cubic-bezier(.2,.8,.2,1),top .8s cubic-bezier(.2,.8,.2,1),transform .3s,border-color .2s,box-shadow .2s; }
.lab-card.is-dragging { cursor:grabbing; transition:none !important; transform:scale(1.025) !important; border-color:var(--cyan); box-shadow:0 35px 90px rgba(0,0,0,.5),0 0 0 1px rgba(0,201,255,.3); }

/* Contact intentionally absent from navigation: Start a Project is the single global entry. */

@media (max-width: 980px) {
  .home-work-scroll-head { grid-template-columns:1fr; }
  .home-work-scroll-head > p { max-width:650px; }
  .home-work-scroll-layout { grid-template-columns:.72fr 1.28fr; gap:4vw; }
  .home-work-preview { min-height:440px; height:58vh; }
  .service-project-thumb .project-visual { height:90px; }
  .studio-visual-head { grid-template-columns:1fr; }
  .studio-story-row,.studio-story-row.reverse { grid-template-columns:1fr 1fr; }
}

@media (max-width: 820px) {
  .home-work-scroll-layout { grid-template-columns:1fr; }
  .home-work-sticky-wrap { position:sticky; top:95px; order:-1; padding-top:2vh; z-index:8; background:linear-gradient(to bottom,#02050d 82%,transparent); padding-bottom:18px; }
  .home-work-preview { height:52vw; min-height:360px; }
  .home-work-steps { padding:0; }
  .home-work-step { min-height:46vh; }
  .service-project-thumbs { grid-template-columns:repeat(4,1fr); }
  .studio-story-row,.studio-story-row.reverse { grid-template-columns:1fr; gap:30px; }
  .studio-story-row.reverse .studio-story-media { order:0; }
  .studio-story-media { min-height:400px; height:55vw; }
  .lab-board-inner { height:1050px; }
}

@media (max-width: 680px) {
  .home-work-scroll { padding-top:11vh; }
  .home-work-scroll-head h2 { font-size:clamp(3.3rem,15vw,5.2rem); }
  .home-work-sticky-wrap { position:relative; top:auto; order:-1; background:none; }
  .home-work-preview { min-height:330px; height:74vw; border-radius:20px; }
  .home-work-preview-meta { align-items:start; }
  .home-work-preview-meta p { max-width:150px; }
  .home-work-step { min-height:42vh; padding:7vh 0; }
  .service-project-thumbs { grid-template-columns:repeat(2,1fr); }
  .service-project-thumb .project-visual { height:120px; }
  .studio-story-media { min-height:330px; height:82vw; border-radius:20px; }
  .lab-board-label { align-items:flex-start; flex-direction:column; gap:6px; }
  .lab-board-inner { display:block; height:1700px; min-height:1700px; border-radius:20px; }
  .lab-card { position:absolute !important; width:72% !important; min-width:0; left:var(--drag-left,var(--mobile-left,var(--x))) !important; top:var(--drag-top,var(--mobile-top,var(--y))) !important; }
  .lab-card-art { min-height:260px; }
  .lab-card:nth-of-type(1) { --mobile-left:2%; --mobile-top:2%; }
  .lab-card:nth-of-type(2) { --mobile-left:25%; --mobile-top:17%; }
  .lab-card:nth-of-type(3) { --mobile-left:6%; --mobile-top:32%; }
  .lab-card:nth-of-type(4) { --mobile-left:24%; --mobile-top:47%; }
  .lab-card:nth-of-type(5) { --mobile-left:4%; --mobile-top:62%; }
  .lab-card:nth-of-type(6) { --mobile-left:25%; --mobile-top:77%; }
}

/* ================================================================
   V5 — HOME CINEMATIC WORK STACK + PROJECT MEDIA REVEALS
   ================================================================ */
.home-work-cinematic {
  position: relative;
  background: #02050d;
  padding: clamp(100px, 13vh, 170px) 0 clamp(90px, 10vh, 140px);
  overflow: clip;
}
.home-work-cinematic-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .55fr);
  column-gap: 8vw;
  align-items: end;
  margin-bottom: clamp(55px, 8vh, 95px);
}
.home-work-cinematic-head .eyebrow { grid-column: 1 / -1; }
.home-work-cinematic-head h2 {
  margin: 13px 0 0;
  font-size: clamp(3.8rem, 7.5vw, 8rem);
  line-height: .82;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.home-work-cinematic-head h2 span { color: var(--cyan); }
.home-work-cinematic-head > p:last-child {
  margin: 0 0 .6vh;
  max-width: 500px;
  color: var(--muted);
  line-height: 1.72;
}
.home-work-stack {
  width: min(94vw, 1640px);
  margin: 0 auto;
  position: relative;
}
.home-work-scene {
  position: sticky;
  top: clamp(88px, 10vh, 118px);
  height: min(78vh, 820px);
  min-height: 560px;
  margin-bottom: clamp(110px, 17vh, 190px);
  z-index: calc(10 + var(--scene-index));
  transform-origin: center top;
}
.home-work-scene:last-child { margin-bottom: clamp(45px, 7vh, 80px); }
.home-work-cover {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: clamp(22px, 2.1vw, 36px);
  box-shadow: 0 38px 100px rgba(0,0,0,.52);
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
}
.home-work-cover::after {
  background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.72) 100%);
}
.home-work-cover-shade {
  position: absolute;
  inset: 0;
  z-index: 8;
  background:
    linear-gradient(90deg, rgba(0,0,0,.46), transparent 48%),
    linear-gradient(180deg, transparent 48%, rgba(0,0,0,.42));
  pointer-events: none;
}
.home-work-cover-top,
.home-work-cover-content {
  position: absolute;
  left: clamp(24px, 3vw, 52px);
  right: clamp(24px, 3vw, 52px);
  z-index: 12;
}
.home-work-cover-top {
  top: clamp(24px, 3vw, 42px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.72);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.home-work-cover-content {
  bottom: clamp(28px, 3.7vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, .55fr);
  gap: 5vw;
  align-items: end;
}
.home-work-cover-category {
  display: block;
  margin-bottom: 13px;
  color: var(--cyan);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.home-work-cover h3 {
  margin: 0;
  max-width: 980px;
  color: #fff;
  font-size: clamp(4rem, 8.5vw, 9.2rem);
  line-height: .78;
  letter-spacing: -.078em;
  text-transform: uppercase;
  text-wrap: balance;
}
.home-work-cover-side {
  padding-bottom: .4vw;
  color: rgba(255,255,255,.72);
}
.home-work-cover-side p {
  margin: 0 0 22px;
  max-width: 360px;
  font-size: clamp(.78rem, 1vw, .95rem);
  line-height: 1.6;
}
.home-work-view {
  color: var(--cyan);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.home-work-cover .shape,
.home-work-cover::before { transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .75s ease; }
.home-work-cover:hover .shape { transform: scale(1.04) rotate(32deg); }
.home-work-cover.art-cut:hover .shape { transform: scaleY(1.08); }
.home-work-cover.art-neon:hover .shape { transform: translate(-50%,-50%) rotate(55deg) scale(1.07); }
.home-work-cover:hover::before { filter: brightness(1.13); }
.home-work-end { padding-top: 25px; }

/* Project media uses the exact same reveal system as text, with clipping to keep it clean. */
.project-story .project-visual[data-reveal] {
  transform: translateY(35px);
  opacity: 0;
}
.project-story .project-visual[data-reveal].revealed {
  transform: translateY(0);
  opacity: 1;
}

/* Give the fixed chapter rail its own physical lane so it never sits over service previews. */
@media (min-width: 821px) {
  .service-chapters .service-chapter-grid {
    padding-right: clamp(64px, 5.4vw, 94px);
  }
  .service-rail {
    right: clamp(15px, 1.7vw, 30px);
    gap: 12px;
  }
  .service-rail a {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 980px) {
  .home-work-cinematic-head { grid-template-columns: 1fr; row-gap: 28px; }
  .home-work-cinematic-head > p:last-child { max-width: 650px; }
  .home-work-stack { width: 94vw; }
  .home-work-scene {
    top: 92px;
    height: min(68vh, 680px);
    min-height: 500px;
    margin-bottom: 13vh;
  }
  .home-work-cover-content { grid-template-columns: 1fr .55fr; gap: 4vw; }
  .home-work-cover h3 { font-size: clamp(3.6rem, 10vw, 7rem); }
}

@media (max-width: 720px) {
  .home-work-cinematic { padding-top: 95px; }
  .home-work-cinematic-head h2 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .home-work-stack { width: 92vw; }
  .home-work-scene {
    position: relative;
    top: auto;
    height: 74svh;
    min-height: 520px;
    margin-bottom: 28px;
  }
  .home-work-cover { border-radius: 20px; }
  .home-work-cover-content {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .home-work-cover h3 { font-size: clamp(3rem, 16vw, 5.8rem); }
  .home-work-cover-side p { max-width: 430px; margin-bottom: 13px; }
}


/* ================================================================
   V7 — EAT FULLSCREEN LOADER
   A lightweight transform-only 3D logo intro. The progress bar
   reflects document readiness while guaranteeing a short visible intro.
   ================================================================ */
body.preloading { overflow: hidden !important; }
body.preloading > :not(.eat-loader) { visibility: hidden; }

.eat-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(650px circle at 50% 44%, rgba(0,201,255,.10), transparent 48%),
    linear-gradient(145deg, #01040b 0%, #020a19 55%, #01040b 100%);
  color: #f6fbff;
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path .78s cubic-bezier(.76,0,.24,1), opacity .25s ease .48s, visibility 0s linear .8s;
  contain: layout paint size style;
}
.eat-loader.is-exiting {
  clip-path: inset(0 0 100% 0);
  opacity: .98;
  pointer-events: none;
}
.loader-grid {
  position: absolute;
  inset: 0;
  opacity: .11;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,.72) 38%, transparent 76%);
}
.loader-center {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vh, 44px);
  transform: translateY(-2vh);
}
.loader-logo-scene {
  width: clamp(210px, 26vw, 390px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 950px;
}
.loader-logo-3d {
  position: relative;
  width: 72%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: loaderLogoSpin 3.35s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change: transform;
}
.loader-logo-face,
.loader-logo-back {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-style: preserve-3d;
}
.loader-logo-face {
  transform: translateZ(17px);
  background: radial-gradient(circle at 50% 50%, rgba(0,201,255,.08), rgba(8,115,255,.02) 47%, transparent 49%);
}
.loader-logo-back {
  transform: translateZ(-17px);
  border: 1px solid rgba(0,201,255,.33);
  background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.09), rgba(0,42,83,.28) 55%, rgba(0,8,20,.72));
  box-shadow: 0 0 50px rgba(0,201,255,.10);
}
.loader-logo-3d::before {
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  border: 1px solid rgba(0,201,255,.28);
  transform: translateZ(0);
  box-shadow: inset 0 0 34px rgba(0,201,255,.08);
}
.loader-blade {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 31%;
  transform-origin: 0 50%;
  border-radius: 72% 32% 64% 28%;
  border: 1px solid rgba(255,255,255,.30);
  background: linear-gradient(122deg, rgba(255,255,255,.30), rgba(0,201,255,.68) 46%, rgba(8,115,255,.15) 86%);
  box-shadow: inset 0 0 16px rgba(255,255,255,.08);
}
.lb-1 { transform: rotate(0deg)   translate(7%,-50%) rotate(25deg) translateZ(4px); }
.lb-2 { transform: rotate(60deg)  translate(7%,-50%) rotate(25deg) translateZ(4px); }
.lb-3 { transform: rotate(120deg) translate(7%,-50%) rotate(25deg) translateZ(4px); }
.lb-4 { transform: rotate(180deg) translate(7%,-50%) rotate(25deg) translateZ(4px); }
.lb-5 { transform: rotate(240deg) translate(7%,-50%) rotate(25deg) translateZ(4px); }
.lb-6 { transform: rotate(300deg) translate(7%,-50%) rotate(25deg) translateZ(4px); }
.loader-hub {
  position: absolute;
  inset: 35%;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.42);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 20%),
    linear-gradient(145deg, rgba(0,201,255,.94), rgba(8,115,255,.42) 55%, rgba(1,8,24,.75));
  box-shadow: inset 0 0 24px rgba(255,255,255,.11), 0 0 30px rgba(0,201,255,.20);
  transform: translateZ(10px);
}
.loader-hub strong { font-size: clamp(1.55rem, 3.1vw, 2.7rem); line-height: .85; letter-spacing: -.09em; }
.loader-hub small { margin-top: 4px; font-size: .44rem; font-weight: 800; letter-spacing: .17em; color: rgba(255,255,255,.72); }
.loader-caption {
  margin: 0;
  color: rgba(246,251,255,.52);
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.loader-bottom {
  position: absolute;
  z-index: 4;
  left: clamp(24px, 4vw, 70px);
  right: clamp(24px, 4vw, 70px);
  bottom: max(26px, env(safe-area-inset-bottom));
}
.loader-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: rgba(246,251,255,.65);
  font: 750 .59rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.loader-meta span:last-child { color: var(--cyan); font-variant-numeric: tabular-nums; }
.loader-progress {
  position: relative;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: rgba(255,255,255,.13);
}
.loader-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #0873ff, #00c9ff 72%, #bff8ff);
  box-shadow: 0 0 18px rgba(0,201,255,.55);
  transform-origin: left center;
  transition: width .12s linear;
}
@keyframes loaderLogoSpin {
  0%   { transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg); }
  25%  { transform: rotateX(10deg) rotateY(90deg) rotateZ(6deg); }
  50%  { transform: rotateX(-7deg) rotateY(180deg) rotateZ(0deg); }
  75%  { transform: rotateX(8deg) rotateY(270deg) rotateZ(-6deg); }
  100% { transform: rotateX(-10deg) rotateY(360deg) rotateZ(0deg); }
}
@media (max-width: 680px) {
  .loader-logo-scene { width: min(72vw, 300px); }
  .loader-caption { font-size: .54rem; letter-spacing: .16em; }
  .loader-bottom { left: 6vw; right: 6vw; bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-logo-3d { animation: none; transform: rotateX(-8deg) rotateY(24deg); }
  .eat-loader { transition-duration: .25s; }
}


/* ================================================================
   V8 — ONE-TIME SESSION INTRO + JOIN EAT
   ================================================================ */
body.skip-loader .eat-loader { display:none !important; }

/* Studio recruitment block */
.studio-join-section {
  padding: clamp(90px, 12vw, 180px) 0;
  background:
    radial-gradient(700px circle at 16% 48%, rgba(0,201,255,.10), transparent 40%),
    #020713;
  border-top:1px solid rgba(255,255,255,.08);
}
.studio-join-grid {
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(42px,7vw,110px);
  align-items:center;
}
.studio-join-media {
  position:relative;
  min-height:clamp(480px,58vw,720px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:30px;
  background:#06152e;
  box-shadow:0 35px 90px rgba(0,0,0,.30);
}
.studio-join-media img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.35) rotate(90deg);
  filter:saturate(1.06) contrast(1.08) brightness(.66);
}
.studio-join-media::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(2,7,19,.05),rgba(2,7,19,.82) 84%), linear-gradient(110deg,rgba(0,201,255,.14),transparent 48%);
}
.studio-join-overlay {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  padding:clamp(24px,3.5vw,50px);
}
.studio-join-overlay span { color:rgba(255,255,255,.62); font-size:.58rem; font-weight:800; letter-spacing:.16em; }
.studio-join-overlay strong { font-size:clamp(4.4rem,9vw,9.6rem); line-height:.72; letter-spacing:-.09em; }
.studio-join-copy h2 {
  margin:15px 0 30px;
  font-size:clamp(3.2rem,5.8vw,6.3rem);
  line-height:.84;
  letter-spacing:-.075em;
  text-transform:uppercase;
}
.studio-join-copy h2 span { color:var(--cyan); }
.studio-join-copy > p:not(.page-kicker) { max-width:560px; color:var(--muted); line-height:1.72; }
.studio-join-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(100%,520px);
  margin-top:42px;
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28);
  font-size:clamp(1.05rem,1.8vw,1.55rem);
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:-.02em;
  transition:padding .25s,color .25s,border-color .25s;
}
.studio-join-cta:hover { padding-inline:16px; color:var(--cyan); border-color:rgba(0,201,255,.6); }

/* Join page */
.join-page {
  min-height:100svh;
  background:
    radial-gradient(800px circle at var(--mx,72%) var(--my,28%),rgba(0,201,255,.13),transparent 38%),
    linear-gradient(145deg,#020713,#061632 62%,#020713);
}
.join-hero { position:relative; min-height:100svh; padding:155px 0 100px; display:grid; align-items:center; overflow:hidden; }
.join-grid { position:relative; z-index:2; display:grid; grid-template-columns:.78fr 1.22fr; gap:7vw; align-items:center; }
.join-copy h1 { margin:12px 0 28px; font-size:clamp(4.2rem,8.5vw,9rem); line-height:.76; letter-spacing:-.085em; text-transform:uppercase; }
.join-copy h1 span { color:var(--cyan); }
.join-copy > p { max-width:440px; color:var(--muted); line-height:1.72; }
.join-note { max-width:420px; margin-top:45px; padding-top:20px; border-top:1px solid rgba(255,255,255,.18); }
.join-note span { color:var(--cyan); font-size:.58rem; font-weight:800; letter-spacing:.15em; }
.join-note p { margin:10px 0 0; color:rgba(255,255,255,.58); font-size:.8rem; line-height:1.6; }
.join-form::before { content:"JOIN / INPUT"; }
.join-sentence { font-size:clamp(1.45rem,2.55vw,2.85rem); }
.form-field select {
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:rgba(255,255,255,.035);
  color:white;
  padding:14px 15px;
  outline:none;
}
.form-field select option { color:#061128; background:white; }
.file-field { cursor:pointer; color:rgba(255,255,255,.68) !important; }
.file-field::file-selector-button {
  margin-right:14px;
  padding:9px 12px;
  border:1px solid rgba(0,201,255,.45);
  border-radius:999px;
  background:rgba(0,201,255,.08);
  color:var(--cyan);
  font-weight:750;
  cursor:pointer;
}
.join-orbit { position:absolute; width:min(48vw,700px); aspect-ratio:1; right:-18vw; top:12vh; border:1px solid rgba(0,201,255,.13); border-radius:50%; pointer-events:none; }
.join-orbit::before,.join-orbit::after { content:""; position:absolute; inset:16%; border:1px dashed rgba(255,255,255,.08); border-radius:50%; }
.join-orbit::after { inset:34%; border-style:solid; border-color:rgba(0,201,255,.15); }

@media (max-width: 900px) {
  .studio-join-grid,.join-grid { grid-template-columns:1fr; }
  .studio-join-media { min-height:560px; }
  .studio-join-copy { max-width:680px; }
  .join-grid { gap:60px; }
  .join-copy { max-width:650px; }
}
@media (max-width: 680px) {
  .studio-join-section { padding-block:90px; }
  .studio-join-media { min-height:440px; border-radius:22px; }
  .studio-join-media img { transform:scale(1.6) rotate(90deg); }
  .studio-join-overlay strong { font-size:clamp(4rem,20vw,6.8rem); }
  .studio-join-copy h2 { font-size:clamp(3rem,13vw,5rem); }
  .join-hero { padding-top:125px; }
  .join-copy h1 { font-size:clamp(4rem,18vw,6.4rem); }
  .join-form { padding:24px 18px; border-radius:22px; }
  .join-sentence { font-size:1.55rem; }
}

/* V9 — form UX */
.form-field select { transition:border-color .2s,box-shadow .2s,opacity .2s; }
.form-field select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,201,255,.07); }
.form-field select:disabled { opacity:.46; cursor:not-allowed; }
.field-help { color:rgba(255,255,255,.38); font-size:.58rem; line-height:1.5; letter-spacing:.04em; }
.idea-form input:required:invalid:not(:placeholder-shown),
.idea-form textarea:required:invalid:not(:placeholder-shown) { border-color:rgba(255,110,110,.45); }


/* V10 — EAT custom dropdowns + calendar */
.eat-native-select {
  position:absolute !important;
  width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}
.eat-select { position:relative; width:100%; z-index:20; }
.eat-select-inline { display:inline-block; width:auto; min-width:170px; max-width:min(360px,72vw); vertical-align:baseline; margin:0 .08em; }
.eat-select-trigger {
  width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 15px; color:rgba(255,255,255,.72); text-align:left;
  border:1px solid rgba(255,255,255,.14); border-radius:13px;
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(0,201,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  cursor:pointer; transition:border-color .22s,box-shadow .22s,background .22s,color .22s,transform .22s;
}
.eat-select-trigger:hover { border-color:rgba(0,201,255,.42); background:rgba(0,201,255,.055); }
.eat-select.has-value .eat-select-trigger { color:white; }
.eat-select.is-open .eat-select-trigger { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,201,255,.07),0 14px 35px rgba(0,0,0,.18); }
.eat-select.is-invalid .eat-select-trigger { border-color:rgba(255,105,125,.76); box-shadow:0 0 0 3px rgba(255,105,125,.07); }
.eat-select.is-disabled .eat-select-trigger { opacity:.42; cursor:not-allowed; }
.eat-select-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eat-select-chevron { width:8px; height:8px; flex:0 0 auto; border-right:1.5px solid var(--cyan); border-bottom:1.5px solid var(--cyan); transform:rotate(45deg) translateY(-2px); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.eat-select.is-open .eat-select-chevron { transform:rotate(225deg) translate(-2px,-2px); }
.eat-select-inline .eat-select-trigger {
  min-height:0; padding:0 22px .02em .08em; border:0; border-bottom:1px solid rgba(0,201,255,.55); border-radius:0;
  background:transparent; box-shadow:none; color:var(--cyan); font:inherit; font-weight:700;
}
.eat-select-inline .eat-select-trigger:hover,.eat-select-inline.is-open .eat-select-trigger { background:transparent; border-bottom-color:var(--cyan); box-shadow:none; }
.eat-select-inline .eat-select-chevron { position:absolute; right:7px; top:50%; margin-top:-5px; }
.eat-select-panel {
  position:absolute; left:0; top:calc(100% + 10px); z-index:120;
  width:max(100%,320px); max-width:min(420px,calc(100vw - 32px));
  padding:12px; border:1px solid rgba(0,201,255,.28); border-radius:18px;
  background:linear-gradient(155deg,rgba(4,17,42,.985),rgba(1,7,19,.985));
  box-shadow:0 28px 80px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.05),0 0 45px rgba(0,201,255,.06);
  backdrop-filter:blur(24px); opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-9px) scale(.985); transform-origin:top left;
  transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1),visibility .2s;
}
.eat-select.align-right .eat-select-panel { left:auto; right:0; transform-origin:top right; }
.eat-select.is-open .eat-select-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }
.eat-select-panel::before { content:""; position:absolute; inset:0 auto 0 0; width:2px; border-radius:18px 0 0 18px; background:linear-gradient(transparent,var(--cyan),transparent); opacity:.62; }
.eat-select-panel-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:4px 5px 10px; }
.eat-select-panel-kicker,.eat-select-count { font-size:.52rem; letter-spacing:.15em; font-weight:850; color:rgba(255,255,255,.38); }
.eat-select-count { color:var(--cyan); }
.eat-select-search { display:flex; align-items:center; gap:9px; margin:0 2px 9px; padding:10px 12px; border:1px solid rgba(255,255,255,.11); border-radius:11px; background:rgba(255,255,255,.035); color:var(--cyan); }
.eat-select-search:focus-within { border-color:rgba(0,201,255,.52); box-shadow:0 0 0 3px rgba(0,201,255,.06); }
.eat-select-search input { width:100%; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:white; outline:0; }
.eat-select-search input::placeholder { color:rgba(255,255,255,.32); }
.eat-select-options { max-height:286px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(0,201,255,.45) transparent; }
.eat-select-option { width:100%; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:11px 12px; border:0; border-radius:10px; background:transparent; color:rgba(255,255,255,.68); text-align:left; cursor:pointer; transition:background .16s,color .16s,transform .16s; }
.eat-select-option:hover { background:rgba(0,201,255,.085); color:white; transform:translateX(3px); }
.eat-select-option i { width:7px; height:7px; border-radius:50%; border:1px solid rgba(255,255,255,.25); transition:.16s; }
.eat-select-option.is-selected { color:var(--cyan); background:rgba(0,201,255,.08); }
.eat-select-option.is-selected i { border-color:var(--cyan); background:var(--cyan); box-shadow:0 0 13px rgba(0,201,255,.72); }
.eat-select-empty { margin:15px 10px; color:rgba(255,255,255,.38); font-size:.72rem; }

/* Calendar */
.eat-calendar { position:relative; width:100%; z-index:18; }
.eat-calendar-trigger { width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(0,201,255,.025)); color:rgba(255,255,255,.48); text-align:left; cursor:pointer; transition:.22s; }
.eat-calendar-trigger:hover { border-color:rgba(0,201,255,.42); background:rgba(0,201,255,.055); }
.eat-calendar.has-value .eat-calendar-trigger { color:white; }
.eat-calendar.is-open .eat-calendar-trigger { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,201,255,.07); }
.eat-calendar.is-invalid .eat-calendar-trigger { border-color:rgba(255,105,125,.76); box-shadow:0 0 0 3px rgba(255,105,125,.07); }
.eat-calendar-icon { position:relative; width:17px; height:16px; flex:0 0 auto; border:1px solid var(--cyan); border-radius:4px; opacity:.85; }
.eat-calendar-icon::before { content:""; position:absolute; left:2px; right:2px; top:4px; border-top:1px solid var(--cyan); }
.eat-calendar-icon::after { content:""; position:absolute; width:2px; height:4px; left:4px; top:-3px; background:var(--cyan); box-shadow:7px 0 var(--cyan); }
.eat-calendar-panel { position:absolute; left:0; top:calc(100% + 10px); z-index:130; width:min(390px,calc(100vw - 32px)); padding:16px; border:1px solid rgba(0,201,255,.29); border-radius:20px; background:linear-gradient(155deg,rgba(4,17,42,.99),rgba(1,7,19,.99)); box-shadow:0 30px 85px rgba(0,0,0,.62),0 0 50px rgba(0,201,255,.06); backdrop-filter:blur(25px); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-9px) scale(.98); transform-origin:top left; transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1),visibility .2s; }
.eat-calendar.is-open .eat-calendar-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }
.eat-calendar-head { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:10px; margin-bottom:14px; }
.eat-calendar-head > div { text-align:center; display:flex; flex-direction:column; gap:4px; }
.eat-calendar-kicker { color:rgba(255,255,255,.3); font-size:.48rem; letter-spacing:.16em; }
.eat-calendar-head strong { color:white; font-size:.78rem; letter-spacing:.08em; }
.eat-calendar-nav { width:38px; height:38px; border:1px solid rgba(255,255,255,.13); border-radius:50%; background:rgba(255,255,255,.035); color:var(--cyan); cursor:pointer; transition:.18s; }
.eat-calendar-nav:hover:not(:disabled) { border-color:var(--cyan); background:rgba(0,201,255,.09); transform:scale(1.05); }
.eat-calendar-nav:disabled { opacity:.2; cursor:not-allowed; }
.eat-calendar-weekdays,.eat-calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.eat-calendar-weekdays { margin-bottom:5px; }
.eat-calendar-weekdays span { text-align:center; color:rgba(255,255,255,.26); font-size:.48rem; font-weight:800; letter-spacing:.08em; padding:5px 0; }
.eat-calendar-blank { aspect-ratio:1; }
.eat-calendar-day { position:relative; aspect-ratio:1; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:10px; background:transparent; color:rgba(255,255,255,.73); cursor:pointer; transition:background .16s,border-color .16s,color .16s,transform .16s; }
.eat-calendar-day:hover:not(:disabled) { background:rgba(0,201,255,.08); border-color:rgba(0,201,255,.28); color:white; transform:translateY(-2px); }
.eat-calendar-day.is-today:not(.is-selected)::after { content:""; position:absolute; bottom:4px; width:3px; height:3px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.eat-calendar-day.is-selected { color:#00101a; background:var(--cyan); border-color:var(--cyan); font-weight:900; box-shadow:0 8px 24px rgba(0,201,255,.22); }
.eat-calendar-day:disabled { color:rgba(255,255,255,.12); cursor:not-allowed; }
.eat-calendar-range { display:flex; align-items:center; gap:9px; margin-top:13px; padding-top:11px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.27); font-size:.47rem; font-weight:750; letter-spacing:.07em; }
.eat-calendar-range i { flex:1; height:1px; background:linear-gradient(90deg,rgba(0,201,255,.15),rgba(0,201,255,.7),rgba(0,201,255,.15)); }

@media (max-width:680px) {
  .eat-select-inline { min-width:145px; max-width:70vw; }
  .eat-select-panel { position:fixed; left:16px !important; right:16px !important; top:auto; bottom:18px; width:auto; max-width:none; transform:translateY(18px) scale(.985); transform-origin:bottom center; border-radius:22px; }
  .eat-select.is-open .eat-select-panel { transform:translateY(0) scale(1); }
  .eat-select-options { max-height:42vh; }
  .eat-calendar-panel { position:fixed; left:16px; right:16px; top:auto; bottom:18px; width:auto; transform:translateY(18px) scale(.985); transform-origin:bottom center; }
  .eat-calendar.is-open .eat-calendar-panel { transform:translateY(0) scale(1); }
}

/* V11 — interaction shield + wider inline selectors + country typeahead */
.eat-control-backdrop {
  position:fixed;
  inset:0;
  z-index:420;
  background:rgba(1,6,16,.36);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}
.eat-control-backdrop.is-visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.eat-select.is-open,.eat-calendar.is-open { z-index:440; }
.eat-select.is-open .eat-select-panel,.eat-calendar.is-open .eat-calendar-panel { z-index:450; }

/* The sentence selector needs enough room to read every choice cleanly. */
.eat-select-inline {
  min-width:clamp(340px,32vw,500px);
  max-width:min(540px,82vw);
}
.eat-select-inline .eat-select-panel {
  width:max(100%,540px);
  max-width:min(640px,calc(100vw - 32px));
}
.eat-select-inline .eat-select-value {
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
}
.eat-select-option span {
  white-space:nowrap;
}
.eat-select-options {
  overflow-x:hidden;
}

/* Country works as a true editable combobox. */
.eat-select-searchable .eat-select-panel {
  width:max(100%,440px);
  max-width:min(520px,calc(100vw - 32px));
}
.eat-select-combobox {
  padding:0 14px;
  cursor:text;
}
.eat-select-typeahead {
  width:100%;
  min-width:0;
  height:46px;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0;
  color:white;
  font:inherit;
  user-select:text !important;
  -webkit-user-select:text !important;
}
.eat-select-typeahead::placeholder { color:rgba(255,255,255,.42); }
.eat-select-searchable.is-open .eat-select-typeahead { color:var(--cyan); }
.eat-select-searchable .eat-select-chevron { cursor:pointer; }

@media (max-width:680px) {
  .eat-select-inline {
    min-width:min(100%,310px);
    width:min(100%,calc(100vw - 32px));
    max-width:calc(100vw - 32px);
  }
  .eat-select-inline .eat-select-panel,
  .eat-select-searchable .eat-select-panel {
    width:auto;
    max-width:none;
  }
  .eat-select-option {
    font-size:clamp(.68rem,3.2vw,.82rem);
    padding-inline:10px;
  }
}

/* V11.1 — interaction is blocked with `inert`, avoiding any click-through without covering the active control. */
.eat-control-backdrop { display:none !important; }
.eat-select-panel {
  background:linear-gradient(155deg,rgba(4,17,42,.998),rgba(1,7,19,.998));
}


/* ================================================================
   V12 — TYPOGRAPHY / PERFORMANCE / SOFTER DEPTH
   ================================================================ */
:root {
  --font-display: "EAT Agency", "Figtree", ui-sans-serif, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --shadow-card: 0 12px 30px rgba(0,0,0,.24);
  --shadow-soft: 0 8px 20px rgba(0,0,0,.20);
}
body { font-family: var(--font-body); }
h1,h2,h3,h4,h5,h6,
.brand-word,
.hero-copy h1,
.home-work-cover-content h3,
.work-hero-title,
.work-index-item strong,
.service-chapter h2,
.studio-page-hero h1,
.contact-inner h1,
.contact-inner h2,
.join-hero h1,
.join-hero h2,
.project-hero h1,
.project-section h2,
.lab-page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
}
/* UI labels and body copy stay neutral and highly legible. */
.eyebrow,.desktop-nav,.header-cta,.mode-button,.filter-button,.view-button,
.service-rail,.footer-nav,.footer-meta,.form-field,.eat-select,.eat-calendar {
  font-family: var(--font-body);
}

/* Cursor trail: no screen-blend haze, less overdraw. */
#fxCanvas { opacity:.72; mix-blend-mode:normal; }
.cursor-dot { box-shadow:none; }
.cursor-ring.is-pressed { box-shadow:none; }

/* Remove isolated cyan "light dots" from the UI. Keep information cues without glow. */
.pulse-dot { width:18px; height:1px; border-radius:0; background:rgba(0,201,255,.72); box-shadow:none; animation:none; }
.halo-a::after { display:none; }
.game-orb { display:none; }

/* Static directional gradients replace mouse-following light spots.
   This both looks calmer and avoids large repaints on every pointer event. */
.hero {
  background:
    linear-gradient(112deg, #020713 0%, #04142c 55%, #06223a 100%);
}
.work-page-hero {
  background:linear-gradient(118deg,#020713 0%,#05142e 58%,#07324a 100%);
}
.services-page-hero {
  background:linear-gradient(122deg,#020713 0%,#051832 62%,#073248 100%);
}
.studio-page-hero {
  background:linear-gradient(125deg,#020713 0%,#06162f 62%,#073047 100%);
}
.studio-section {
  background:linear-gradient(110deg,#020714 0%,#04152c 68%,#052a3b 100%);
}
.contact-section {
  background:linear-gradient(125deg,#061633 0%,#031126 58%,#063145 100%);
}
.studio-join-section {
  background:linear-gradient(115deg,#020713 0%,#041329 64%,#062b3d 100%);
}
.lab-board-inner {
  background:linear-gradient(120deg,#020713 0%,#05162d 72%,#063044 100%);
}
.join-page-hero,
.join-form-section {
  background-image:none;
}

/* Reduce heavy, far-away shadows. Cards now feel closer to the surface. */
.eat-dial { filter:drop-shadow(0 12px 24px rgba(0,0,0,.22)); }
.mode-button:hover,.mode-button.active { box-shadow:var(--shadow-soft); }
.work-preview,
.home-work-cover,
.studio-story-media,
.studio-join-media,
.project-visual,
.project-media,
.lab-card,
.service-project-thumb .project-visual,
.contact-card,
.join-card,
.eat-select-panel,
.eat-calendar-panel {
  box-shadow:var(--shadow-card);
}
.lab-card.is-dragging {
  box-shadow:0 15px 34px rgba(0,0,0,.30),0 0 0 1px rgba(0,201,255,.20);
}
.studio-join-media { box-shadow:0 14px 32px rgba(0,0,0,.22); }
.home-work-cover { box-shadow:0 14px 34px rgba(0,0,0,.26); }

/* Tone down decorative glow on project art without flattening the artwork. */
.art-orbit .shape,.art-echo .shape,.art-zero .shape { box-shadow:none; }
.art-northline .shape,.art-pulse .shape,.art-cut .shape { box-shadow:0 0 8px rgba(0,201,255,.25); }

/* Performance: inactive hero modes should not keep animating behind the active one. */
.kinetic-row,.playhead,.wire-ring,.wire-cube,.wild-ring { animation-play-state:paused; }
.hero[data-mode="motion"] .kinetic-row { animation-play-state:running; }
.hero[data-mode="video"] .playhead { animation-play-state:running; }
.hero[data-mode="3d"] .wire-ring,
.hero[data-mode="3d"] .wire-cube { animation-play-state:running; }
.hero[data-mode="other"] .wild-ring { animation-play-state:running; }
.perf-paused { animation-play-state:paused !important; }

/* Let the browser skip layout/paint work for long off-screen page regions. */
.service-chapter,
.studio-story-row,
.process-card,
.lab-board,
.contact-section,
.site-footer,
.project-content-section,
.project-gallery-section {
  content-visibility:auto;
  contain-intrinsic-size:1px 760px;
}

/* Avoid unnecessary compositing on static surfaces. */
.project-visual,.studio-story-media,.service-art,.lab-card { backface-visibility:hidden; }

@media (max-width: 820px) {
  /* Large blur layers are costly on tablets; solid translucent surfaces keep the look. */
  .mode-button,.mobile-menu,.eat-select-panel,.eat-calendar-panel { backdrop-filter:none; }
}

@media (prefers-reduced-motion: reduce) {
  #fxCanvas,.cursor-dot,.cursor-ring { display:none !important; }
}


/* ================================================================
   V13 — AGENCY TYPE SPACING / GOOGLE-FRIENDLY PERFORMANCE PASS
   ================================================================ */
/* Agency is a display face with wide custom glyphs. Negative tracking made
   letters collide. Use the font's natural metrics plus a small optical gap. */
:where(h1,h2,h3,h4,h5,h6,.display-title,.brand-word) {
  font-kerning: normal;
  font-variant-ligatures: none;
  text-rendering: geometricPrecision;
}
.hero-copy h1,
.display-title,
.home-work-cinematic-head h2,
.home-work-cover h3,
.home-work-step h3,
.work-intro h2,
.services-title h2,
.studio-grid h2,
.contact-inner h2,
.work-hero-title,
.work-preview-meta h2,
.project-info h3,
.project-hero h1,
.project-statement-block h2,
.project-split-copy h2,
.next-project-content h2,
.service-chapter h2,
.studio-page-hero h1,
.manifesto-line h2,
.constellation-copy h2,
.process-head h2,
.lab-page-hero h1,
.contact-copy h1,
.join-hero h1,
.join-hero h2,
.mobile-menu a {
  letter-spacing: .012em !important;
}
/* Extra breathing room for the very largest display lines. */
.hero-copy h1,
.display-title,
.home-work-cover h3,
.project-hero h1,
.studio-page-hero h1,
.contact-copy h1,
.join-hero h1 {
  letter-spacing: .018em !important;
}
.brand-word { letter-spacing:.025em !important; }

/* Decorative typography must use the same EAT display system as visible titles. */
.work-page-hero::after,
.services-page-hero::after,
.studio-page-hero::before,
.art-flux::before,
.art-pulse::before,
.art-signal::before,
.art-atlas::before,
.art-northline::before,
.art-kinetic::before,
.art-velocity::before,
.art-human::before,
.art-web::before,
.art-photo::before,
.art-hybrid::before,
.art-zero::before,
.art-soft::before,
.lab-art-2::before,
.lab-art-5::before,
.wild-card,
.other-float {
  font-family:var(--font-display) !important;
  font-weight:400 !important;
  font-style:normal;
  letter-spacing:.018em !important;
  font-kerning:normal;
  font-variant-ligatures:none;
}

/* Remove the remaining isolated radial light spots. Directional gradients keep
   depth without looking like a cyan flashlight and are cheaper to paint. */
.lab-page { background:linear-gradient(118deg,#01050d 0%,#03142b 68%,#052c3e 100%); }
.contact-page { background:linear-gradient(122deg,#020713 0%,#05152f 64%,#063247 100%); }
.tool-constellation { background:linear-gradient(135deg,rgba(4,20,45,.72),rgba(3,10,24,.88)); }
.video-ui-preview { background:linear-gradient(120deg,#020713 0%,#06233e 100%); }
.service-art-3d { background:linear-gradient(130deg,#020713 0%,#05203a 100%); }
.art-flux,.art-pulse { background:linear-gradient(125deg,#06152f 0%,#022033 58%,#02050d 100%); }

/* Smaller, softer depth: no large detached shadows. */
.home-work-cover,.work-preview,.work-card .project-visual,.project-media-wide,
.project-split-media,.project-gallery .project-visual,.service-art,.studio-story-media,
.studio-join-media,.lab-card,.idea-form,.join-form,.eat-select-panel,.eat-calendar-panel {
  box-shadow:0 9px 22px rgba(0,0,0,.20) !important;
}

/* Core Web Vitals / rendering economy. */
.home-work-cover { will-change:auto; transform:none; }
.tape-video { contain:content; }
@media (hover:hover) {
  .home-work-cover:hover { will-change:transform; }
}
/* Avoid expensive blur on long scrolling panels. */
.mode-button,.blade,.service-rail a,.idea-form { backdrop-filter:none; -webkit-backdrop-filter:none; }

/* Stable layout for images/media and better browser rendering priorities. */
img { height:auto; }
[aria-hidden="true"] { pointer-events:none; }


/* =========================================================
   EAT PRIVATE AREA — V15 UI PROTOTYPE
   These screens intentionally skip the public site's heavy FX.
   Authentication is simulated locally until mecanismo_eat is connected.
   ========================================================= */
.footer-meta-links{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.team-access-link{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);transition:color .2s ease,opacity .2s ease}
.team-access-link:hover{color:var(--cyan)}

.private-body{
  min-height:100vh;
  background:linear-gradient(125deg,#020713 0%,#061329 58%,#062138 100%);
  color:var(--white);
  font-family:var(--font-body);
  cursor:auto !important;
}
.private-body *{user-select:text}
.private-body button,.private-body a,.private-body input,.private-body textarea,.private-body select,.private-body label{cursor:pointer}
.private-body input,.private-body textarea{cursor:text}
.private-shell{width:min(1480px,calc(100% - 64px));margin:0 auto}
.private-login-shell{width:min(1180px,calc(100% - 48px));min-height:100vh;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(50px,8vw,120px);padding:70px 0}
.private-brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:1.5rem;letter-spacing:.03em}
.private-brand-mark{width:34px;height:34px;border:1px solid var(--cyan);border-radius:10px;display:grid;place-items:center;color:var(--cyan);font:800 .72rem/1 var(--font-body)}
.private-kicker{display:block;margin:0 0 18px;color:var(--cyan);font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.private-login-copy h1,.private-page-title h1{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.private-login-copy h1{font-size:clamp(4rem,8vw,8rem);line-height:.78}
.private-login-copy p{max-width:500px;margin:28px 0 0;color:rgba(255,255,255,.55);font-size:.92rem;line-height:1.7}
.private-security-note{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.46);font-size:.7rem;line-height:1.55}
.private-security-note i{width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(0,201,255,.35);flex:0 0 auto}

.private-card{border:1px solid rgba(255,255,255,.13);border-radius:28px;background:rgba(2,8,20,.86);box-shadow:0 14px 36px rgba(0,0,0,.22)}
.login-card{padding:clamp(28px,4vw,52px)}
.login-card-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:34px}
.login-card-head strong{font-family:var(--font-display);font-size:2rem;font-weight:400;letter-spacing:.02em}
.private-badge{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:1px solid rgba(0,201,255,.26);border-radius:999px;color:var(--cyan);font-size:.55rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.private-field{display:grid;gap:8px;margin-bottom:18px}
.private-field label{color:rgba(255,255,255,.48);font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.private-field input,.private-field textarea,.private-field select{width:100%;min-height:54px;padding:0 16px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:#061226;color:white;outline:none;font:500 .86rem/1.4 var(--font-body);transition:border-color .2s,background .2s,box-shadow .2s}
.private-field textarea{min-height:126px;padding:15px 16px;resize:vertical}
.private-field input:focus,.private-field textarea:focus,.private-field select:focus{border-color:rgba(0,201,255,.72);background:#071831;box-shadow:0 0 0 3px rgba(0,201,255,.07)}
.private-action{min-height:54px;padding:0 18px;border:1px solid rgba(0,201,255,.7);border-radius:13px;background:var(--cyan);color:#00101d;font-size:.65rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:14px;transition:transform .2s,filter .2s}
.private-action:hover{transform:translateY(-2px);filter:brightness(1.06)}
.private-action.secondary{background:transparent;color:white;border-color:rgba(255,255,255,.18)}
.private-action.danger{background:transparent;color:#ff8899;border-color:rgba(255,90,110,.35)}
.private-action.success{background:#b6ffdd;border-color:#b6ffdd;color:#002718}
.private-action.small{min-height:40px;padding:0 13px;border-radius:10px;font-size:.56rem}
.private-login-demo{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.private-login-demo > span{display:block;margin-bottom:11px;color:rgba(255,255,255,.32);font-size:.54rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.private-demo-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.private-demo-button{min-height:45px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.025);color:rgba(255,255,255,.72);font-size:.58rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.private-demo-button:hover{border-color:rgba(0,201,255,.5);color:var(--cyan)}
.private-form-message{min-height:20px;margin:12px 0 0;color:#ffb1bd;font-size:.68rem;line-height:1.5}

.private-topbar{position:sticky;top:0;z-index:40;height:78px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(2,7,19,.92);display:flex;align-items:center;backdrop-filter:blur(14px)}
.private-topbar-inner{width:min(1480px,calc(100% - 64px));margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px}
.private-topnav{display:flex;align-items:center;gap:10px}
.private-topnav a{min-height:38px;padding:0 13px;border-radius:10px;color:rgba(255,255,255,.52);font-size:.58rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center}
.private-topnav a.active,.private-topnav a:hover{background:rgba(0,201,255,.075);color:var(--cyan)}
.private-user{justify-self:end;display:flex;align-items:center;gap:12px}
.private-user-copy{text-align:right}
.private-user-copy strong{display:block;font-size:.7rem}.private-user-copy span{display:block;margin-top:3px;color:rgba(255,255,255,.38);font-size:.55rem;text-transform:uppercase;letter-spacing:.1em}
.private-avatar{width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,201,255,.35);background:linear-gradient(145deg,#0a3160,#087d9b);display:grid;place-items:center;font-size:.62rem;font-weight:900}
.private-logout{width:36px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:transparent;color:rgba(255,255,255,.55);font-size:.8rem}
.private-logout:hover{color:#ff8a9c;border-color:rgba(255,90,110,.4)}

.private-main{padding:64px 0 100px}
.private-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:48px}
.private-page-title h1{font-size:clamp(3.6rem,6vw,6.8rem);line-height:.82}
.private-page-title p{max-width:620px;margin:20px 0 0;color:rgba(255,255,255,.48);font-size:.82rem;line-height:1.6}
.private-status-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:40px}
.private-stat{min-height:126px;padding:23px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:linear-gradient(145deg,rgba(8,27,57,.8),rgba(2,8,20,.72));display:flex;flex-direction:column;justify-content:space-between}
.private-stat span{font-size:.55rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.private-stat strong{font-family:var(--font-display);font-size:3.2rem;font-weight:400;letter-spacing:.02em}
.private-stat.pending strong{color:#ffd88a}.private-stat.approved strong{color:#9effd1}.private-stat.rejected strong{color:#ff8da1}.private-stat.draft strong{color:var(--cyan)}

.private-section{margin-top:42px}
.private-section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.private-section-head h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:2.3rem;letter-spacing:.02em;text-transform:uppercase}
.private-section-head p{margin:0;color:rgba(255,255,255,.4);font-size:.65rem}
.private-table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(2,8,20,.58)}
.private-table{width:100%;border-collapse:collapse;min-width:840px}
.private-table th,.private-table td{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.075);text-align:left}
.private-table th{color:rgba(255,255,255,.32);font-size:.52rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.private-table td{font-size:.72rem;color:rgba(255,255,255,.72)}
.private-table tbody tr:last-child td{border-bottom:0}
.private-table tbody tr:hover{background:rgba(0,201,255,.025)}
.project-name-cell strong{display:block;color:white;font-size:.83rem}.project-name-cell small{display:block;margin-top:5px;color:rgba(255,255,255,.35);font-size:.62rem}
.status-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:.52rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.13)}
.status-pill.pending{color:#ffd88a;border-color:rgba(255,216,138,.3);background:rgba(255,216,138,.06)}
.status-pill.approved{color:#9effd1;border-color:rgba(158,255,209,.25);background:rgba(158,255,209,.05)}
.status-pill.rejected{color:#ff8da1;border-color:rgba(255,141,161,.25);background:rgba(255,141,161,.05)}
.status-pill.draft{color:var(--cyan);border-color:rgba(0,201,255,.25);background:rgba(0,201,255,.05)}
.category-chips{display:flex;flex-wrap:wrap;gap:5px}.category-chip{display:inline-flex;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.48);font-size:.5rem;text-transform:uppercase;letter-spacing:.07em}
.table-actions{display:flex;align-items:center;gap:8px}.table-link{color:var(--cyan);font-size:.58rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.table-link:hover{text-decoration:underline}

.private-grid-2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:22px;align-items:start}
.private-panel{padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(2,8,20,.62)}
.private-panel-title{margin:0 0 24px;font-family:var(--font-display);font-size:2rem;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.private-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.private-field-grid .wide{grid-column:1/-1}
.private-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.private-check{min-height:48px;padding:0 13px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.02);display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.65);font-size:.68rem}
.private-check input{accent-color:#00c9ff}
.private-upload{min-height:180px;border:1px dashed rgba(0,201,255,.32);border-radius:17px;background:linear-gradient(145deg,rgba(0,201,255,.03),rgba(8,108,255,.035));display:grid;place-items:center;text-align:center;padding:22px}
.private-upload input{max-width:100%;font-size:.65rem}.private-upload strong{display:block;margin-bottom:7px;font-family:var(--font-display);font-size:1.8rem;font-weight:400}.private-upload small{display:block;color:rgba(255,255,255,.4);line-height:1.5}
.private-editor-actions{position:sticky;bottom:18px;margin-top:24px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(2,8,20,.92);display:flex;justify-content:flex-end;gap:10px;backdrop-filter:blur(12px)}
.builder-list{display:grid;gap:10px}.builder-row{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.025);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.builder-handle{color:rgba(255,255,255,.25);font-size:1.1rem}.builder-row strong{display:block;font-size:.72rem}.builder-row small{display:block;margin-top:4px;color:rgba(255,255,255,.32);font-size:.58rem}.builder-remove{width:31px;height:31px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:transparent;color:rgba(255,255,255,.4)}.builder-remove:hover{color:#ff8da1;border-color:rgba(255,141,161,.35)}
.builder-add{width:100%;min-height:48px;margin-top:10px;border:1px dashed rgba(0,201,255,.3);border-radius:12px;background:transparent;color:var(--cyan);font-size:.58rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}

.review-preview{overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:#031023}.review-hero{min-height:460px;padding:32px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#071a39,#06324a)}.review-hero::before{content:"";position:absolute;inset:10% 12% 8% 40%;border:1px solid rgba(0,201,255,.22);border-radius:50%;transform:rotate(-14deg)}.review-hero h2{position:relative;z-index:1;margin:0;font-family:var(--font-display);font-size:clamp(4rem,7vw,7rem);line-height:.78;font-weight:400;letter-spacing:.02em;text-transform:uppercase}.review-hero p{position:relative;z-index:1;max-width:560px;margin:18px 0 0;color:rgba(255,255,255,.52);line-height:1.5}.review-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07)}.review-meta > div{padding:18px;background:#030a16}.review-meta span{display:block;margin-bottom:5px;color:rgba(255,255,255,.31);font-size:.5rem;text-transform:uppercase;letter-spacing:.11em}.review-meta strong{font-size:.68rem}.review-content{padding:34px}.review-content h3{font-family:var(--font-display);font-weight:400;font-size:2.6rem;letter-spacing:.02em;margin:0 0 12px}.review-content p{max-width:800px;color:rgba(255,255,255,.55);font-size:.8rem;line-height:1.7}
.review-decision{position:sticky;top:100px;padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(2,8,20,.82)}.review-decision h2{margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:2rem}.review-decision > p{margin:0 0 24px;color:rgba(255,255,255,.42);font-size:.7rem;line-height:1.55}.review-decision textarea{width:100%;min-height:120px;padding:13px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#061226;color:white;resize:vertical;outline:none}.review-decision-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.private-alert{padding:13px 15px;border:1px solid rgba(0,201,255,.22);border-radius:11px;background:rgba(0,201,255,.045);color:rgba(255,255,255,.64);font-size:.68rem;line-height:1.5}.private-alert strong{color:var(--cyan)}
.private-empty{padding:42px;text-align:center;color:rgba(255,255,255,.4);font-size:.72rem}
.private-team-list{display:grid;gap:10px}.private-team-member{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px;border:1px solid rgba(255,255,255,.085);border-radius:13px}.private-team-member .private-avatar{width:32px;height:32px}.private-team-member strong{display:block;font-size:.7rem}.private-team-member small{display:block;margin-top:3px;color:rgba(255,255,255,.34);font-size:.58rem}

@media (max-width:980px){
  .private-login-shell{grid-template-columns:1fr;max-width:760px}.private-login-copy h1{font-size:clamp(4rem,14vw,7rem)}
  .private-topbar-inner{grid-template-columns:1fr auto}.private-topnav{display:none}.private-user{grid-column:2}.private-status-strip{grid-template-columns:1fr 1fr}.private-grid-2{grid-template-columns:1fr}.review-decision{position:relative;top:auto}.review-meta{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .private-shell,.private-topbar-inner{width:min(100% - 28px,1480px)}.private-login-shell{width:min(100% - 28px,1180px);padding:42px 0}.private-login-copy h1{font-size:3.7rem}.login-card{padding:22px;border-radius:21px}.private-demo-buttons{grid-template-columns:1fr}.private-main{padding-top:42px}.private-page-head{align-items:flex-start;flex-direction:column}.private-page-title h1{font-size:3.8rem}.private-status-strip{grid-template-columns:1fr 1fr;gap:9px}.private-stat{min-height:105px;padding:17px}.private-stat strong{font-size:2.6rem}.private-field-grid{grid-template-columns:1fr}.private-categories{grid-template-columns:1fr}.private-editor-actions{flex-direction:column}.private-editor-actions .private-action{width:100%}.review-meta{grid-template-columns:1fr}.private-user-copy{display:none}.private-topbar{height:68px}.private-topbar-inner{width:calc(100% - 24px)}.private-brand{font-size:1.15rem}.private-page-title p{font-size:.74rem}
  .footer-meta-links{align-items:flex-start}
}

/* =========================================================
   EAT PRIVATE AREA — V16 EDITORIAL WORKFLOW
   ========================================================= */
.footer-team-access{
  min-width:164px;padding:11px 12px 11px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:14px;row-gap:2px;background:rgba(255,255,255,.025);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.footer-team-access span{grid-column:1;color:rgba(255,255,255,.32);font-size:.48rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase}
.footer-team-access strong{grid-column:1;font-size:.62rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.footer-team-access b{grid-column:2;grid-row:1/3;color:var(--cyan);font-size:.9rem;font-weight:500}
.footer-team-access:hover{border-color:rgba(0,201,255,.38);background:rgba(0,201,255,.045);transform:translateY(-2px)}

.private-status-strip.private-status-strip-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.private-stat.hidden strong{color:#9cc6ff}
.status-pill.hidden{color:#9cc6ff;border-color:rgba(100,150,255,.28);background:rgba(90,130,255,.08)}
.private-action.warning{background:#ffd788;border-color:#ffd788;color:#2b1a00}
.table-link.button-link{border:0;background:transparent;padding:0;font:inherit;cursor:pointer}
.table-link.danger-link{color:#ff899a}

.private-inline-kicker{margin:10px 0 12px}
.editor-project-data{margin-bottom:32px}
.private-section-head.compact{margin-bottom:24px}
.private-cover-upload{min-height:145px}
.private-upload-name{display:block;margin-top:12px;color:var(--cyan);font-size:.64rem;font-weight:700;word-break:break-word}

.editor-builder-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr);gap:24px;align-items:start}
.editor-builder-main{min-width:0}
.section-palette{position:sticky;top:98px}
.section-palette-copy{margin:-12px 0 22px;color:rgba(255,255,255,.42);font-size:.7rem;line-height:1.6}
.section-palette-grid{display:grid;gap:9px}
.section-type-button{width:100%;min-height:74px;padding:13px 14px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.02);color:white;text-align:left;display:grid;grid-template-columns:34px 1fr;column-gap:11px;align-items:center;transition:border-color .2s,background .2s,transform .2s}
.section-type-button span{grid-row:1/3;color:var(--cyan);font-size:.55rem;font-weight:900;letter-spacing:.11em}
.section-type-button strong{font-size:.72rem;letter-spacing:.01em}.section-type-button small{color:rgba(255,255,255,.36);font-size:.58rem;line-height:1.35}
.section-type-button:hover{border-color:rgba(0,201,255,.38);background:rgba(0,201,255,.045);transform:translateX(-3px)}
.section-palette-note{margin-top:18px}

.builder-list-v16{gap:14px}
.builder-section-card{overflow:hidden;border:1px solid rgba(255,255,255,.105);border-radius:18px;background:linear-gradient(145deg,rgba(7,22,47,.84),rgba(2,8,20,.84));box-shadow:0 8px 20px rgba(0,0,0,.16)}
.builder-section-head{min-height:62px;padding:12px 14px 12px 17px;border-bottom:1px solid rgba(255,255,255,.075);display:flex;align-items:center;justify-content:space-between;gap:15px}
.builder-section-head>div:first-child{display:flex;align-items:center;gap:13px}.builder-section-head>div:first-child>span{color:var(--cyan);font-size:.55rem;font-weight:900;letter-spacing:.12em}.builder-section-head strong{font-family:var(--font-display);font-size:1.45rem;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.builder-section-actions{display:flex;gap:6px}.builder-section-actions button,.gallery-file-actions button{width:32px;height:32px;border:1px solid rgba(255,255,255,.11);border-radius:8px;background:rgba(255,255,255,.02);color:rgba(255,255,255,.55);cursor:pointer}.builder-section-actions button:hover,.gallery-file-actions button:hover{border-color:rgba(0,201,255,.34);color:var(--cyan)}.builder-section-actions button.danger:hover,.gallery-file-actions button:last-child:hover{border-color:rgba(255,100,120,.38);color:#ff8a9b}.builder-section-actions button:disabled,.gallery-file-actions button:disabled{opacity:.2;pointer-events:none}
.builder-section-body{padding:18px}
.builder-field{display:grid;gap:8px}.builder-field+ .builder-field{margin-top:16px}.builder-field>label:first-child{display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.48);font-size:.55rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.builder-field>label:first-child span{color:rgba(255,255,255,.27);font-weight:600;letter-spacing:.04em;text-transform:none}
.builder-field input[type="text"],.builder-field input:not([type]),.builder-field textarea{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:#061226;color:white;outline:none;font:500 .78rem/1.5 var(--font-body)}.builder-field input[type="text"],.builder-field input:not([type]){min-height:49px;padding:0 13px}.builder-field textarea{min-height:120px;padding:13px;resize:vertical}.builder-field input:focus,.builder-field textarea:focus{border-color:rgba(0,201,255,.65)}
.builder-file-drop{min-height:105px;padding:16px;border:1px dashed rgba(0,201,255,.27);border-radius:12px;background:rgba(0,201,255,.025);display:flex!important;flex-direction:column;justify-content:center!important;align-items:flex-start;gap:4px!important;cursor:pointer!important}.builder-file-drop input{margin-top:10px;max-width:100%;font-size:.62rem}.builder-file-drop strong{font-size:.72rem;color:rgba(255,255,255,.74)}.builder-file-drop small{font-size:.58rem;color:rgba(255,255,255,.34)}
.builder-file-current{width:100%;display:grid;grid-template-columns:26px 1fr;gap:4px 10px;align-items:center}.builder-file-current span{grid-row:1/3;width:25px;height:25px;border-radius:7px;background:rgba(0,201,255,.09);color:var(--cyan);display:grid;place-items:center}.builder-file-current strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.builder-file-current small{grid-column:2}
.gallery-file-list{display:grid;gap:7px;margin-top:10px}.gallery-file-row{min-height:47px;padding:7px 8px 7px 11px;border:1px solid rgba(255,255,255,.08);border-radius:10px;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;background:rgba(255,255,255,.018)}.gallery-file-index{color:var(--cyan);font-size:.52rem;font-weight:900}.gallery-file-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.65rem}.gallery-file-actions{display:flex;gap:4px}.gallery-file-actions button{width:28px;height:28px}
.builder-empty-copy{margin:4px 0;color:rgba(255,255,255,.28);font-size:.62rem}.builder-empty-state{min-height:320px;padding:40px;border:1px dashed rgba(0,201,255,.2);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.builder-empty-state>span{color:var(--cyan);font-size:.56rem;font-weight:900;letter-spacing:.14em}.builder-empty-state strong{margin-top:10px;font-family:var(--font-display);font-size:2.6rem;font-weight:400;text-transform:uppercase}.builder-empty-state p{max-width:480px;margin:12px 0 0;color:rgba(255,255,255,.37);font-size:.68rem;line-height:1.6}
.preview-action{background:transparent;color:var(--cyan);border-color:rgba(0,201,255,.48)}

/* Private preview: the same block system will later power the public project route. */
.private-preview-body{background:#020713}
.private-project-preview{padding-top:76px}
.preview-private-banner{position:sticky;top:76px;z-index:30;min-height:48px;padding:0 4vw;border-top:1px solid rgba(0,201,255,.18);border-bottom:1px solid rgba(0,201,255,.18);background:#061226;display:flex;align-items:center;gap:15px;color:rgba(255,255,255,.45);font-size:.55rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.preview-private-banner strong{color:var(--cyan)}.preview-private-banner>div{margin-left:auto;display:flex;gap:8px}.preview-private-banner a{min-height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.12);border-radius:8px;display:flex;align-items:center;color:white}
.preview-project-hero{min-height:calc(100vh - 124px);position:relative;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(120deg,#06152f,#031020 65%,#071a2d)}
.preview-cover{position:absolute;inset:0;opacity:.68}.preview-cover img,.preview-cover video{width:100%;height:100%;object-fit:cover}.preview-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(2,7,19,.95) 0%,rgba(2,7,19,.25) 62%,rgba(2,7,19,.38) 100%)}
.preview-project-hero-copy{position:relative;z-index:2;padding-bottom:8vh}.preview-project-hero-copy h1{max-width:1100px;margin:0;font-family:var(--font-display);font-size:clamp(5rem,10vw,10rem);font-weight:400;line-height:.78;letter-spacing:.02em;text-transform:uppercase}.preview-project-hero-copy>p{max-width:650px;margin:25px 0 0;color:rgba(255,255,255,.58);font-size:.9rem;line-height:1.7}.preview-project-meta{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}.preview-project-meta span{padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:rgba(255,255,255,.62);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase}
.case-builder-render{background:#020713}.case-builder-section{min-height:50vh;border-bottom:1px solid rgba(255,255,255,.07);padding:10vh 4vw;position:relative;overflow:hidden}.case-title-only{width:min(1500px,100%);margin:auto}.case-title-only>span,.case-text-only>span,.case-media-text-copy>span,.case-gallery-head>span{display:block;margin-bottom:20px;color:var(--cyan);font-size:.56rem;font-weight:900;letter-spacing:.15em}.case-title-only h2{max-width:1300px;margin:0;font-family:var(--font-display);font-size:clamp(4.8rem,9vw,10rem);font-weight:400;line-height:.8;letter-spacing:.02em;text-transform:uppercase}
.case-text-only{width:min(900px,calc(100% - 8vw));margin:auto;padding:6vh 0}.case-text-only p{margin:0;font-size:clamp(1.45rem,2.4vw,2.7rem);line-height:1.42;letter-spacing:-.015em;color:rgba(255,255,255,.82)}
.case-media-only{width:min(1500px,100%);height:min(78vh,900px);margin:auto;border-radius:24px;overflow:hidden;background:#06152f}.case-media-only img,.case-media-only video,.case-media-text-media img,.case-media-text-media video,.case-gallery-item img,.case-gallery-item video{width:100%;height:100%;object-fit:cover}
.type-media-text{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:6vw;align-items:center}.case-media-text-copy{padding-left:max(0px,calc((100vw - 1500px)/2))}.case-media-text-copy p{max-width:560px;margin:0;font-size:clamp(1.2rem,2vw,2.15rem);line-height:1.5;color:rgba(255,255,255,.76)}.case-media-text-media{height:68vh;border-radius:22px;overflow:hidden;background:#06152f}
.case-gallery-head{width:min(1500px,100%);margin:0 auto 28px;display:flex;justify-content:space-between;align-items:end}.case-gallery-head>span{margin:0}.case-gallery-head strong{font-family:var(--font-display);font-size:2rem;font-weight:400}.case-gallery-grid{width:min(1500px,100%);margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.case-gallery-item{min-height:420px;border-radius:18px;overflow:hidden;background:#06152f}.case-gallery-item:nth-child(3n){grid-column:1/-1;min-height:620px}
.preview-media-placeholder{width:100%;height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,#06152f,#05263a);color:rgba(255,255,255,.6);position:relative}.preview-media-placeholder>span{width:46px;height:46px;border:1px solid rgba(0,201,255,.28);border-radius:50%;display:grid;place-items:center;color:var(--cyan);margin-bottom:13px}.preview-media-placeholder strong{max-width:80%;font-size:.8rem}.preview-media-placeholder small{margin-top:6px;color:rgba(255,255,255,.3);font-size:.56rem}.preview-media-label{position:absolute;left:15px;bottom:14px;z-index:2;padding:6px 8px;border-radius:7px;background:rgba(2,7,19,.72);color:var(--cyan);font-size:.5rem;font-weight:850;letter-spacing:.1em}
.preview-cover .preview-media-placeholder{min-height:100%;background:linear-gradient(135deg,#06152f,#072d45)}

.review-full-preview{position:relative;z-index:2;align-self:flex-start;margin-top:24px;min-height:42px;padding:0 13px;border:1px solid rgba(0,201,255,.34);border-radius:10px;display:inline-flex;align-items:center;color:var(--cyan);font-size:.58rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}

/* Admin destructive-state confirmation. */
.private-modal-open{overflow:hidden}
.private-confirm-modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.private-confirm-modal.open{opacity:1;visibility:visible}.private-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(0,4,12,.68);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);cursor:pointer}.private-confirm-card{position:relative;z-index:1;width:min(520px,100%);padding:30px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:#061226;box-shadow:0 18px 50px rgba(0,0,0,.38);transform:translateY(14px) scale(.98);transition:transform .22s ease}.private-confirm-modal.open .private-confirm-card{transform:none}.private-confirm-card h2{margin:0;font-family:var(--font-display);font-size:3rem;font-weight:400;letter-spacing:.02em;text-transform:uppercase}.private-confirm-card>p{margin:17px 0 25px;color:rgba(255,255,255,.52);font-size:.75rem;line-height:1.65}.private-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}

@media (max-width:1100px){
  .private-status-strip.private-status-strip-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .editor-builder-shell{grid-template-columns:1fr}.section-palette{position:relative;top:auto}.section-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .type-media-text{grid-template-columns:1fr}.case-media-text-copy{padding-left:0}.case-media-text-media{height:55vh}
}
@media (max-width:700px){
  .footer-team-access{min-width:0;width:100%}.private-status-strip.private-status-strip-5{grid-template-columns:1fr 1fr}.section-palette-grid{grid-template-columns:1fr}.builder-section-head{align-items:flex-start}.builder-section-head strong{font-size:1.15rem}.builder-section-actions{flex-wrap:wrap;justify-content:flex-end}.private-editor-actions{position:relative;bottom:auto}.preview-private-banner{top:68px;padding:8px 14px;flex-wrap:wrap}.preview-private-banner>div{width:100%;margin-left:0}.preview-project-hero-copy h1{font-size:4.5rem}.case-builder-section{padding:8vh 5vw;min-height:auto}.case-title-only h2{font-size:4.2rem}.case-text-only{width:100%;padding:3vh 0}.case-media-only{height:60vh;border-radius:16px}.case-media-text-media{height:52vh}.case-gallery-grid{grid-template-columns:1fr}.case-gallery-item,.case-gallery-item:nth-child(3n){grid-column:auto;min-height:360px}.private-confirm-actions{grid-template-columns:1fr}
}

/* ================================================================
   V17 — PREVIEW / PUBLISH SYNC / STABLE WORK HOVER / CURSOR POLISH
   ================================================================ */
/* Work rows must never reflow when they become active. Movement is visual only. */
.work-index-item {
  padding-left:0 !important;
  transition:background .22s ease,border-color .22s ease !important;
}
.work-index-item strong {
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.016em !important;
  line-height:1.06;
  transform:translateX(0);
  transition:transform .22s ease,color .22s ease;
}
.work-index-item small {
  white-space:nowrap;
  transition:transform .22s ease,color .22s ease;
}
.work-index-item:hover strong,.work-index-item.active strong { transform:translateX(12px); }
.work-index-item:hover small,.work-index-item.active small { transform:translateX(-4px); }
@media (max-width:760px){
  .work-index-item strong{white-space:normal;overflow:visible;text-overflow:clip;transform:none!important}
  .work-index-item small{transform:none!important}
}

/* Native [hidden] must remain hidden even though preview actions are flex links. */
.preview-private-banner a[hidden] { display:none !important; }

/* Preview sections are generated after private.js loads, so they are visible by default. */
.private-preview-body .case-builder-section { opacity:1; transform:none; }

/* CMS/local-prototype media can replace graphic placeholders without changing layout. */
.cms-cover-img,.cms-cover-video,.cms-public-cover-media,.cms-public-media {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.project-visual.has-cms-cover .shape { opacity:.08; }
.project-visual.has-cms-cover::after { z-index:2; }
.work-preview.has-cms-cover .art-label,
.work-card .project-visual.has-cms-cover .art-label { z-index:4; }
.cms-project-hero-bg { position:absolute; inset:0; overflow:hidden; background:#06152f; }
.cms-project-hero-bg::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(to bottom,rgba(2,7,19,.12),rgba(2,7,19,.1) 43%,rgba(2,7,19,.92)); }
.cms-project-hero-bg .preview-media-placeholder { min-height:100%; }
.public-case-builder { background:#020713; }
.public-case-builder [data-cms-reveal] { opacity:0; transform:translateY(28px); transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1); }
.public-case-builder [data-cms-reveal].cms-revealed { opacity:1; transform:none; }
.case-media-only,.case-media-text-media,.case-gallery-item { position:relative; }
.case-media-only .cms-public-media,.case-media-text-media .cms-public-media,.case-gallery-item .cms-public-media { position:absolute; }

/* Cursor canvas is intentionally clean: no blend haze and no lingering low-opacity layer. */
#fxCanvas { opacity:.68; filter:none; }
.project-unavailable{min-height:100svh;padding:18vh 6vw;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(120deg,#020713,#06182f);color:white}.project-unavailable>span{color:var(--cyan);font-size:.62rem;font-weight:900;letter-spacing:.14em}.project-unavailable h1{max-width:950px;margin:16px 0;font-family:var(--font-display);font-size:clamp(4rem,9vw,9rem);font-weight:400;line-height:.82;letter-spacing:.018em;text-transform:uppercase}.project-unavailable p{max-width:580px;color:rgba(255,255,255,.55);line-height:1.7}.project-unavailable a{margin-top:28px;color:var(--cyan);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}


/* ================================================================
   V18 — ADAPTIVE PROJECT MEDIA / AUTHORS / DRAG-TO-SORT BUILDER
   ================================================================ */
/* Project Builder: classic six-dot drag grip replaces arrow controls. */
.sort-handle{
  width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.09);border-radius:9px;
  display:grid;place-items:center;background:rgba(255,255,255,.025);cursor:grab;touch-action:none;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.sort-handle:hover{border-color:rgba(0,201,255,.4);background:rgba(0,201,255,.07)}
.sort-handle:active{cursor:grabbing;transform:scale(.96)}
.sort-grip{width:14px;height:18px;display:block;background-image:radial-gradient(circle,rgba(210,238,255,.68) 1.45px,transparent 1.7px);background-size:7px 6px;background-position:0 0}
.builder-section-actions,.gallery-file-actions{align-items:center}
.builder-section-card,.gallery-file-row{transition:border-color .18s ease,background .18s ease,opacity .16s ease,box-shadow .18s ease}
.builder-section-card.sort-placeholder,.gallery-file-row.sort-placeholder{opacity:.2;border-color:rgba(0,201,255,.32);background:rgba(0,201,255,.04)}
.sort-drag-ghost{opacity:.94!important;filter:none!important;box-shadow:0 16px 38px rgba(0,0,0,.32)!important;border-color:rgba(0,201,255,.38)!important;transition:none!important;overflow:hidden}
.is-pointer-sorting,.is-pointer-sorting *{cursor:grabbing!important}
.gallery-file-actions .danger,.builder-section-actions .danger{width:34px;height:34px}

/* Adaptive media sizing. Real source dimensions are read after image/video metadata loads. */
.case-media-only,.case-media-text-media,.case-gallery-item{
  --media-ratio:1.7778;
  --media-max-h:76vh;
  aspect-ratio:var(--media-ratio);
  height:auto!important;
  min-height:0!important;
  max-height:var(--media-max-h);
  background:linear-gradient(145deg,#041126,#06182c);
}
.case-media-only{
  width:min(94vw,1500px,var(--media-vh-cap,132vh));
  margin-inline:auto;
}
.case-media-only.media-portrait{--media-max-h:78vh;max-width:650px}
.case-media-only.media-square{--media-max-h:76vh;max-width:900px}
.case-media-only.media-landscape{--media-max-h:74vh;max-width:1320px}
.case-media-only.media-panoramic{--media-max-h:62vh;max-width:1500px}

.case-media-text-media{
  --media-max-h:68vh;
  width:min(100%,var(--media-vh-cap,122vh));
  max-width:100%;justify-self:center;
}
.case-media-text-media.media-portrait{max-width:500px;--media-max-h:70vh}
.case-media-text-media.media-square{max-width:670px}
.case-media-text-media.media-panoramic{--media-max-h:52vh;width:100%}

.case-gallery-grid{grid-auto-flow:dense;align-items:start}
.case-gallery-item{
  --media-max-h:68vh;
  width:min(100%,var(--media-vh-cap,122vh));
  justify-self:center;
}
.case-gallery-item.media-portrait{max-width:520px;--media-max-h:70vh}
.case-gallery-item.media-square{max-width:690px}
.case-gallery-item:nth-child(3n){grid-column:auto;min-height:0}
.case-gallery-item.media-landscape,.case-gallery-item.media-panoramic{grid-column:1/-1;width:min(100%,var(--media-vh-cap,1380px));max-width:1380px}
.case-gallery-item.media-panoramic{--media-max-h:54vh;max-width:1500px}

/* The wrapper follows the asset ratio, so cover does not crop when metadata is available. */
.case-media-only img,.case-media-only video,
.case-media-text-media img,.case-media-text-media video,
.case-gallery-item img,.case-gallery-item video,
.case-media-only .cms-public-media,.case-media-text-media .cms-public-media,.case-gallery-item .cms-public-media{
  object-fit:cover;
}

/* Project facts can now include author without breaking the grid. */
.project-hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.review-meta{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:700px){
  .case-media-only{--media-max-h:68svh;width:min(90vw,var(--media-vh-cap,90vw))}
  .case-media-only.media-portrait{max-width:82vw}
  .case-media-text-media{--media-max-h:62svh;width:min(100%,var(--media-vh-cap,100%))}
  .case-gallery-item,.case-gallery-item.media-landscape,.case-gallery-item.media-panoramic{grid-column:auto;width:min(100%,var(--media-vh-cap,100%));max-width:100%}
  .case-gallery-item.media-portrait{max-width:82vw}
  .sort-drag-ghost{max-height:58vh;overflow:hidden}
}


/* ================================================================
   V19 — HEADER SOFTEN / GALLERY SYSTEM / LIGHTBOX / SECTION PALETTES
   ================================================================ */
.site-header{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible;isolation:isolate}
.site-header::before{content:"";position:absolute;inset:-1px 0 -34px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(2,8,22,.96) 0%,rgba(2,8,22,.88) 36%,rgba(2,8,22,.64) 62%,rgba(2,8,22,.28) 82%,rgba(2,8,22,0) 100%);backdrop-filter:blur(16px) saturate(118%);-webkit-backdrop-filter:blur(16px) saturate(118%);mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)}
body[data-page]:not([data-page="home"]) .site-header{background:transparent!important}

.builder-field-palette select{width:100%;min-height:49px;padding:0 13px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:#061226;color:white;font:500 .78rem/1.5 var(--font-body);outline:none}
.builder-field-palette select:focus{border-color:rgba(0,201,255,.65)}
.section-palette-choice small{display:block;margin-top:8px;color:rgba(255,255,255,.34);font-size:.58rem;line-height:1.6}

.case-builder-section{--section-bg:#020713;--section-fg:rgba(255,255,255,.82);--section-muted:rgba(255,255,255,.62);--section-panel:#06152f;background:var(--section-bg);color:var(--section-fg)}
.case-builder-section.theme-dark{--section-bg:#020713;--section-fg:rgba(255,255,255,.84);--section-muted:rgba(255,255,255,.62);--section-panel:#06152f}
.case-builder-section.theme-light{--section-bg:#eef3f8;--section-fg:#091321;--section-muted:rgba(9,19,33,.68);--section-panel:#d8e3ee;border-bottom-color:rgba(9,19,33,.08)}
.case-builder-section.theme-cyan{--section-bg:linear-gradient(135deg,rgba(4,23,46,1) 0%,rgba(5,31,56,1) 34%,rgba(0,157,210,.20) 100%);--section-fg:#eafcff;--section-muted:rgba(234,252,255,.72);--section-panel:#0a2537;border-bottom-color:rgba(160,238,255,.14)}
.case-title-only>span,.case-text-only>span,.case-media-text-copy>span,.case-gallery-head>span{color:var(--cyan)}
.case-title-only h2,.case-gallery-head strong,.case-text-only p,.case-media-text-copy p{color:var(--section-fg)}
.case-media-only,.case-media-text-media,.case-gallery-item{background:var(--section-panel)}
.case-media-text-copy p,.preview-project-meta span{color:var(--section-muted)}
.case-builder-section.theme-light .preview-media-label{background:rgba(238,243,248,.86);color:#0b6f91}
.case-builder-section.theme-light .preview-media-placeholder{background:linear-gradient(135deg,#dbe6f2,#eef3f8);color:rgba(9,19,33,.72)}
.case-builder-section.theme-light .preview-media-placeholder small{color:rgba(9,19,33,.4)}
.case-builder-section.theme-light .preview-media-placeholder>span{border-color:rgba(11,111,145,.26);color:#0b6f91}

.public-case-builder [data-cms-reveal]{transition-delay:var(--reveal-delay,0ms)}
.private-preview-body [data-cms-reveal]{opacity:1;transform:none}

.case-gallery-grid{width:min(1500px,100%);margin:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start;grid-auto-flow:row dense}
.case-gallery-item{grid-column:span 4;width:100%;max-width:none;justify-self:stretch;opacity:0;transform:translateY(28px) scale(.985);animation:galleryAssetReveal .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--reveal-delay,0ms)}
.case-gallery-item.aspect-wide,.case-gallery-item.aspect-semiwide{grid-column:span 6}
.case-gallery-item.aspect-tall{grid-column:span 3}
.case-gallery-item.aspect-square,.case-gallery-item.aspect-semisquare{grid-column:span 4}
.case-gallery-item.aspect-panoramic{grid-column:1/-1}
@keyframes galleryAssetReveal{to{opacity:1;transform:none}}

.media-lightbox{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.media-lightbox.open{opacity:1;visibility:visible;pointer-events:auto}
.media-lightbox-backdrop{position:absolute;inset:0;border:0;background:rgba(2,7,19,.42);backdrop-filter:blur(18px) saturate(118%);-webkit-backdrop-filter:blur(18px) saturate(118%);cursor:pointer}
.media-lightbox-dialog{position:relative;z-index:1;width:min(1500px,calc(100vw - 30px));height:min(calc(100vh - 30px),960px);padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:rgba(3,12,28,.9);box-shadow:0 24px 80px rgba(0,0,0,.42);display:grid;grid-template-rows:auto 1fr;gap:12px}
.media-lightbox-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 6px 0}
.media-lightbox-copy strong{display:block;font-size:.92rem}.media-lightbox-copy span{color:rgba(255,255,255,.46);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.media-lightbox-actions{display:flex;gap:8px;flex-wrap:wrap}
.media-lightbox-btn{min-width:44px;height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.03);color:white;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.media-lightbox-btn.close{border-color:rgba(0,201,255,.32);color:var(--cyan)}
.media-lightbox.zoom-disabled [data-lightbox-action^="zoom-"]{opacity:.35;pointer-events:none}
.media-lightbox-stage{min-height:0;display:grid;place-items:center;overflow:hidden}
.media-lightbox-asset-wrap{--lightbox-zoom:1;max-width:100%;max-height:100%;display:grid;place-items:center;overflow:auto}
.media-lightbox-asset{transform:scale(var(--lightbox-zoom));transform-origin:center center;transition:transform .18s ease;will-change:transform}
.media-lightbox-asset img,.media-lightbox-asset video{display:block;max-width:min(96vw,calc(100vw - 110px));max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain;border-radius:18px;background:#071526;box-shadow:0 10px 32px rgba(0,0,0,.24)}
.lightbox-open{overflow:hidden}

@media (max-width:900px){
  .case-gallery-item.aspect-wide,.case-gallery-item.aspect-semiwide,.case-gallery-item.aspect-square,.case-gallery-item.aspect-semisquare{grid-column:span 6}
  .case-gallery-item.aspect-tall{grid-column:span 4}
  .media-lightbox-dialog{height:min(calc(100vh - 20px),1000px);width:min(calc(100vw - 20px),1500px)}
}
@media (max-width:700px){
  .case-gallery-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .case-gallery-item,.case-gallery-item.aspect-wide,.case-gallery-item.aspect-semiwide,.case-gallery-item.aspect-square,.case-gallery-item.aspect-semisquare,.case-gallery-item.aspect-panoramic{grid-column:1/-1}
  .case-gallery-item.aspect-tall{grid-column:span 3}
  .media-lightbox-toolbar{align-items:flex-start;flex-direction:column}
  .media-lightbox-actions{width:100%}
  .media-lightbox-btn{flex:1 1 auto}
}


/* ================================================================
   V20 — VISUAL / RESPONSIVE POLISH
   ================================================================ */
/* Header: blur and opacity dissolve over a larger vertical range so no hard lower edge is visible. */
.site-header{overflow:visible!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.site-header::before{inset:-10px 0 -62px!important;background:linear-gradient(to bottom,rgba(2,8,22,.96) 0%,rgba(2,8,22,.89) 31%,rgba(2,8,22,.68) 54%,rgba(2,8,22,.38) 72%,rgba(2,8,22,.12) 88%,rgba(2,8,22,0) 100%)!important;backdrop-filter:blur(18px) saturate(112%)!important;-webkit-backdrop-filter:blur(18px) saturate(112%)!important;mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.25) 90%,transparent 100%)!important;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.25) 90%,transparent 100%)!important}

/* Palette picker: private CMS uses three immediate visual swatches instead of a native select. */
.section-theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.section-theme-option{min-width:0;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.018);display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center;text-align:left;color:white;transition:border-color .18s ease,background .18s ease,transform .18s ease;cursor:pointer}
.section-theme-option:hover{border-color:rgba(0,201,255,.28);background:rgba(0,201,255,.035)}
.section-theme-option.active{border-color:rgba(0,201,255,.58);background:rgba(0,201,255,.075);box-shadow:inset 0 0 0 1px rgba(0,201,255,.07)}
.section-theme-option:active{transform:scale(.985)}
.section-theme-option>span:last-child{min-width:0}.section-theme-option strong{display:block;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase}.section-theme-option small{display:block;margin-top:2px;color:rgba(255,255,255,.34);font-size:.52rem}
.section-theme-swatch{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.theme-swatch-dark{background:#020713}.theme-swatch-light{background:#f4f7fb}.theme-swatch-cyan{background:linear-gradient(135deg,#0dd1ee,#079ce6)}
.section-theme-help{display:block;margin-top:8px;color:rgba(255,255,255,.34);font-size:.56rem;line-height:1.55}

/* Section palettes are deliberately strong enough to read as layout decisions. */
.case-builder-section.theme-light{--section-bg:#f1f5f9;--section-fg:#06101f;--section-muted:rgba(6,16,31,.65);--section-panel:#dbe5ef}
.case-builder-section.theme-light .case-title-only>span,.case-builder-section.theme-light .case-text-only>span,.case-builder-section.theme-light .case-media-text-copy>span,.case-builder-section.theme-light .case-gallery-head>span{color:#087ea7}
.case-builder-section.theme-cyan{--section-bg:linear-gradient(135deg,#0bc8e9 0%,#09afe8 46%,#0879c7 100%);--section-fg:#03111f;--section-muted:rgba(3,17,31,.70);--section-panel:rgba(1,18,34,.92);border-bottom-color:rgba(3,17,31,.12)}
.case-builder-section.theme-cyan .case-title-only>span,.case-builder-section.theme-cyan .case-text-only>span,.case-builder-section.theme-cyan .case-media-text-copy>span,.case-builder-section.theme-cyan .case-gallery-head>span{color:#05213a}
.case-builder-section.theme-cyan .preview-media-label{background:rgba(2,13,28,.82);color:#dffaff}
.case-builder-section.theme-cyan .preview-media-open-hint{background:rgba(241,252,255,.90);color:#04213a}

/* Standalone media keeps its true source aspect ratio; gallery media snaps to the six editorial presets. */
.case-media-only,.case-media-text-media,.case-gallery-item{transition:aspect-ratio .28s cubic-bezier(.2,.8,.2,1),max-width .28s cubic-bezier(.2,.8,.2,1),opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.geometry-pending{opacity:.72}
.case-media-only img,.case-media-only video,.case-media-text-media img,.case-media-text-media video{object-fit:cover}
.case-gallery-item img,.case-gallery-item video{object-fit:cover}

/* 12-column editorial gallery:
   16:9 = 2 / row, 9:16 = 4 / row, 1:1 = 3 / row,
   21:9 = 1 / row, 4:5 = 3 / row, 4:3 = 2 / row. */
.case-gallery-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;gap:clamp(10px,1.1vw,18px)}
.case-gallery-item{grid-column:span 4!important;width:100%!important;max-width:none!important;justify-self:stretch!important;opacity:0;transform:translateY(28px) scale(.985);animation:none!important}
.case-gallery-item.aspect-wide{grid-column:span 6!important;aspect-ratio:16/9!important}
.case-gallery-item.aspect-tall{grid-column:span 3!important;aspect-ratio:9/16!important}
.case-gallery-item.aspect-square{grid-column:span 4!important;aspect-ratio:1/1!important}
.case-gallery-item.aspect-panoramic{grid-column:1/-1!important;aspect-ratio:21/9!important}
.case-gallery-item.aspect-semisquare{grid-column:span 4!important;aspect-ratio:4/5!important}
.case-gallery-item.aspect-semiwide{grid-column:span 6!important;aspect-ratio:4/3!important}
.case-gallery-item.cms-revealed,.case-gallery-item.preview-revealed{opacity:1;transform:none;transition-delay:var(--reveal-delay,0ms)}
.private-preview-body .case-gallery-item[data-gallery-reveal]{opacity:0;transform:translateY(28px) scale(.985)}
.private-preview-body .case-gallery-item.preview-revealed{opacity:1;transform:none}

/* Click affordance for project media (never used on cover). */
.case-media-only.is-zoomable,.case-media-text-media.is-zoomable,.case-gallery-item.is-zoomable{cursor:zoom-in}
.preview-media-open-hint{position:absolute;right:14px;top:14px;z-index:4;padding:7px 9px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(2,7,19,.72);color:rgba(255,255,255,.78);font-size:.48rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.is-zoomable:hover .preview-media-open-hint{opacity:1;transform:none}

/* Lightbox: true viewport overlay, original asset, zoom for images and drag-to-pan above 100%. */
.media-lightbox{padding:14px}
.media-lightbox-backdrop{background:rgba(2,7,19,.46);backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%)}
.media-lightbox-dialog{width:min(1540px,calc(100vw - 28px));height:calc(100dvh - 28px);max-height:1100px;padding:12px;border-radius:24px;background:rgba(3,12,28,.92)}
.media-lightbox-stage{position:relative;min-height:0;overflow:hidden;display:grid;place-items:center;touch-action:none;cursor:default}
.media-lightbox.is-zoomed .media-lightbox-stage{cursor:grab}.media-lightbox-stage.is-panning{cursor:grabbing!important}
.media-lightbox-asset{--lightbox-zoom:1;--lightbox-pan-x:0px;--lightbox-pan-y:0px;transform:translate3d(var(--lightbox-pan-x),var(--lightbox-pan-y),0) scale(var(--lightbox-zoom));transform-origin:center center;transition:transform .16s ease;will-change:transform;display:grid;place-items:center}
.media-lightbox-stage.is-panning .media-lightbox-asset{transition:none}
.media-lightbox-asset img,.media-lightbox-asset video{max-width:calc(100vw - 70px);max-height:calc(100dvh - 112px);width:auto;height:auto;object-fit:contain;border-radius:14px;background:#061326;box-shadow:0 10px 34px rgba(0,0,0,.24);user-select:none;-webkit-user-drag:none}
.media-lightbox-actions .media-lightbox-btn{min-width:42px}

@media (max-width:1050px){
  .section-theme-picker{grid-template-columns:1fr}
  .section-theme-option{grid-template-columns:30px 1fr}.section-theme-swatch{width:30px;height:30px}
  .case-gallery-item.aspect-wide,.case-gallery-item.aspect-semiwide{grid-column:span 6!important}
  .case-gallery-item.aspect-tall{grid-column:span 4!important}
  .case-gallery-item.aspect-square,.case-gallery-item.aspect-semisquare{grid-column:span 6!important}
}
@media (max-width:700px){
  .site-header::before{inset:-8px 0 -45px!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
  .case-gallery-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  .case-gallery-item.aspect-tall{grid-column:span 3!important}
  .case-gallery-item.aspect-wide,.case-gallery-item.aspect-square,.case-gallery-item.aspect-panoramic,.case-gallery-item.aspect-semisquare,.case-gallery-item.aspect-semiwide{grid-column:1/-1!important}
  .preview-media-open-hint{opacity:.86;transform:none;right:9px;top:9px;font-size:.44rem;padding:6px 7px}
  .media-lightbox{padding:7px}.media-lightbox-dialog{width:calc(100vw - 14px);height:calc(100dvh - 14px);padding:8px;border-radius:18px}.media-lightbox-toolbar{gap:8px}.media-lightbox-copy strong{font-size:.78rem}.media-lightbox-copy span{font-size:.52rem}.media-lightbox-actions{display:grid;grid-template-columns:repeat(4,1fr);width:100%;gap:5px}.media-lightbox-btn{padding:0 7px;min-width:0;height:34px;font-size:.55rem}.media-lightbox-asset img,.media-lightbox-asset video{max-width:calc(100vw - 28px);max-height:calc(100dvh - 126px);border-radius:10px}
}


/* ================================================================
   V21 — PROJECT DESIGN SYSTEMS / CLEAN PUBLIC LABELS / AUTO GALLERY
   ================================================================ */

/* Project-level design selector in the private builder. */
.project-design-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.project-design-option{min-width:0;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.018);display:grid;grid-template-columns:92px 1fr;align-items:center;gap:13px;text-align:left;color:white;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
.project-design-option:hover{border-color:rgba(0,201,255,.28);background:rgba(0,201,255,.035)}
.project-design-option.active{border-color:rgba(0,201,255,.62);background:rgba(0,201,255,.075);box-shadow:inset 0 0 0 1px rgba(0,201,255,.08)}
.project-design-option:active{transform:scale(.988)}
.project-design-option>span:last-child{min-width:0}.project-design-option strong{display:block;font-family:var(--font-display);font-size:1.42rem;font-weight:400;letter-spacing:.03em}.project-design-option small{display:block;margin-top:4px;color:rgba(255,255,255,.37);font-size:.56rem;letter-spacing:.05em;text-transform:uppercase}
.project-design-preview{position:relative;height:64px;border:1px solid rgba(255,255,255,.10);border-radius:10px;overflow:hidden;background:#030b19;display:block}
.project-design-preview i{position:absolute;display:block}
.preview-grid{background-image:linear-gradient(rgba(0,201,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,255,.06) 1px,transparent 1px);background-size:13px 13px}
.preview-grid i:nth-child(1){left:10px;top:12px;width:48px;height:6px;background:#eaf7ff}.preview-grid i:nth-child(2){left:10px;top:25px;width:68px;height:20px;border:1px solid rgba(0,201,255,.52)}.preview-grid i:nth-child(3){right:8px;bottom:7px;width:22px;height:3px;background:var(--cyan)}
.preview-shift{background:linear-gradient(130deg,#031020,#031020 43%,#053452 43%,#02101f 70%)}
.preview-shift i:nth-child(1){left:8px;top:13px;width:60px;height:8px;background:#effaff;transform:skewX(-22deg)}.preview-shift i:nth-child(2){left:20px;top:29px;width:58px;height:7px;background:var(--cyan);transform:skewX(-22deg)}.preview-shift i:nth-child(3){right:-4px;bottom:5px;width:36px;height:42px;border-left:1px solid rgba(0,201,255,.44);transform:rotate(23deg)}
.preview-frame{background:radial-gradient(circle at 75% 25%,rgba(0,201,255,.17),transparent 35%),#031020}
.preview-frame i:nth-child(1){inset:8px;border:1px solid rgba(255,255,255,.22);border-radius:7px}.preview-frame i:nth-child(2){left:17px;bottom:15px;width:36px;height:5px;background:#f0faff}.preview-frame i:nth-child(3){right:13px;top:15px;width:20px;height:20px;border:1px solid var(--cyan);border-radius:50%}
.project-design-help{margin:9px 0 0;color:rgba(255,255,255,.34);font-size:.58rem;line-height:1.6}
.gallery-auto-rule{margin:10px 0 3px;padding:10px 11px;border:1px solid rgba(0,201,255,.11);border-radius:10px;background:rgba(0,201,255,.025);display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}.gallery-auto-rule strong{color:var(--cyan);font-size:.52rem;letter-spacing:.12em}.gallery-auto-rule span{color:rgba(255,255,255,.38);font-size:.56rem;line-height:1.55}.gallery-file-row{grid-template-columns:34px minmax(0,1fr) auto auto}.gallery-aspect-badge{padding:4px 6px;border:1px solid rgba(0,201,255,.17);border-radius:6px;color:rgba(145,231,255,.72);font-size:.49rem;font-weight:850;letter-spacing:.06em}

/* Public output is clean: CMS/editor labels never appear on the live case study. */
.public-case-builder .preview-media-label,.private-preview-body .preview-media-label{display:none!important}

/* Common palette tokens used by all three project design systems. */
.case-builder-section{--section-accent:#00c9ff;--section-line:rgba(0,201,255,.15);--section-soft:rgba(0,201,255,.055);--section-card:rgba(5,18,43,.82);isolation:isolate}
.case-builder-section.theme-light{--section-accent:#087ea7;--section-line:rgba(8,126,167,.17);--section-soft:rgba(8,126,167,.055);--section-card:rgba(255,255,255,.72)}
.case-builder-section.theme-cyan{--section-accent:#04213a;--section-line:rgba(4,33,58,.18);--section-soft:rgba(4,33,58,.065);--section-card:rgba(238,252,255,.15)}
.case-builder-section::before,.case-builder-section::after{pointer-events:none}

/* DESIGN 01 — GRID: editorial structure, modular lines, asymmetric anchoring. */
.project-style-grid .case-builder-section{background:var(--section-bg)}
.project-style-grid .case-builder-section::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--section-line) 1px,transparent 1px),linear-gradient(90deg,var(--section-line) 1px,transparent 1px);background-size:clamp(54px,5.5vw,92px) clamp(54px,5.5vw,92px);background-position:center center;opacity:.72}
.project-style-grid .case-builder-section::after{content:"";position:absolute;left:4vw;top:7vh;bottom:7vh;width:1px;background:linear-gradient(to bottom,transparent,var(--section-accent),transparent);opacity:.72}
.project-style-grid .case-title-only,.project-style-grid .case-text-only{position:relative;z-index:1;background:var(--section-card);backdrop-filter:blur(2px)}
.project-style-grid .case-title-only{padding:clamp(28px,5vw,78px);border-left:4px solid var(--section-accent);border-top:1px solid var(--section-line);border-bottom:1px solid var(--section-line)}
.project-style-grid .case-title-only::after{content:"";position:absolute;right:3%;top:20%;width:clamp(80px,13vw,220px);aspect-ratio:1;border:1px solid var(--section-line);border-radius:50%;box-shadow:0 0 0 18px var(--section-soft)}
.project-style-grid .case-text-only{max-width:1050px;padding:clamp(34px,5vw,70px);border:1px solid var(--section-line);border-radius:2px}
.project-style-grid .type-media-text{background-image:linear-gradient(90deg,transparent 49.9%,var(--section-line) 50%,transparent 50.1%)}

/* DESIGN 02 — SHIFT: diagonals, direction and cropped kinetic layers. */
.project-style-shift .case-builder-section{background:var(--section-bg)}
.project-style-shift .case-builder-section::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 0 58%,var(--section-soft) 58% 73%,transparent 73% 100%);opacity:.95}
.project-style-shift .case-builder-section::after{content:"";position:absolute;width:42vw;height:130%;right:-21vw;top:-15%;border:1px solid var(--section-line);transform:rotate(18deg);border-radius:50%;opacity:.8}
.project-style-shift .case-title-only{position:relative;z-index:1;transform:translateX(clamp(8px,4vw,70px));padding:4vh 0}
.project-style-shift .case-title-only h2{max-width:1050px;font-size:clamp(5rem,10vw,11.5rem);line-height:.76;text-shadow:16px 16px 0 var(--section-soft)}
.project-style-shift .case-text-only{position:relative;z-index:1;margin-left:12vw;width:min(900px,72vw);padding:clamp(30px,5vw,66px);border-left:1px solid var(--section-accent);background:linear-gradient(110deg,var(--section-soft),transparent 62%)}
.project-style-shift .type-media-text:nth-child(even) .case-media-text-copy{order:2;padding-left:0;padding-right:max(0px,calc((100vw - 1500px)/2))}
.project-style-shift .type-media-text:nth-child(even) .case-media-text-media{order:1}

/* DESIGN 03 — FRAME: cinematic insets, framing and spatial depth. */
.project-style-frame .case-builder-section{background:var(--section-bg)}
.project-style-frame .case-builder-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,var(--section-soft),transparent 28%),radial-gradient(circle at 10% 82%,var(--section-soft),transparent 24%)}
.project-style-frame .case-builder-section::after{content:"";position:absolute;inset:clamp(18px,2.2vw,38px);border:1px solid var(--section-line);border-radius:clamp(20px,2.2vw,38px)}
.project-style-frame .case-title-only,.project-style-frame .case-text-only{position:relative;z-index:1;border-radius:24px;background:var(--section-card);box-shadow:0 14px 38px rgba(0,0,0,.08)}
.project-style-frame .case-title-only{padding:clamp(34px,6vw,90px)}
.project-style-frame .case-text-only{max-width:970px;padding:clamp(38px,6vw,84px)}
.project-style-frame .case-media-only,.project-style-frame .case-media-text-media{box-shadow:0 12px 36px rgba(0,0,0,.14);outline:1px solid var(--section-line);outline-offset:8px}

/* Gallery uses aspect grouping as the primary rule. Groups are fixed in a visual hierarchy:
   panoramic → wide → 4:3 → square → 4:5 → vertical. Member drag order only survives inside each group. */
.case-gallery-grid{display:flex!important;flex-direction:column;gap:clamp(14px,1.7vw,28px)!important;width:min(1500px,100%);margin:auto}
.case-gallery-group{--gallery-gap:clamp(10px,1.1vw,18px);--gallery-cols:3;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--gallery-gap);width:100%}
.gallery-group-panoramic{--gallery-cols:1}.gallery-group-wide,.gallery-group-semiwide{--gallery-cols:2}.gallery-group-square,.gallery-group-semisquare{--gallery-cols:3}.gallery-group-tall{--gallery-cols:4}
.case-gallery-group .case-gallery-item{flex:0 0 calc((100% - (var(--gallery-cols) - 1)*var(--gallery-gap))/var(--gallery-cols));width:auto!important;max-width:none!important;grid-column:auto!important;justify-self:auto!important}
.case-gallery-group .case-gallery-item.aspect-panoramic{aspect-ratio:21/9!important}.case-gallery-group .case-gallery-item.aspect-wide{aspect-ratio:16/9!important}.case-gallery-group .case-gallery-item.aspect-semiwide{aspect-ratio:4/3!important}.case-gallery-group .case-gallery-item.aspect-square{aspect-ratio:1!important}.case-gallery-group .case-gallery-item.aspect-semisquare{aspect-ratio:4/5!important}.case-gallery-group .case-gallery-item.aspect-tall{aspect-ratio:9/16!important}
.project-style-grid .case-gallery-group{padding-block:4px;border-top:1px solid var(--section-line)}
.project-style-shift .case-gallery-group:nth-child(even){transform:translateX(min(2vw,24px))}.project-style-shift .case-gallery-group:nth-child(odd){transform:translateX(max(-2vw,-24px))}
.project-style-frame .case-gallery-grid{padding:clamp(14px,2vw,28px);border:1px solid var(--section-line);border-radius:28px;background:var(--section-soft)}

/* Hero gets a subtle project-style fingerprint without altering cover readability. */
.project-style-grid .cms-project-hero-bg::before{content:"";position:absolute;inset:0;z-index:2;background-image:linear-gradient(rgba(0,201,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,255,.08) 1px,transparent 1px);background-size:80px 80px;mix-blend-mode:screen;opacity:.24}
.project-style-shift .cms-project-hero-bg::before{content:"";position:absolute;right:-18%;top:-25%;z-index:2;width:55%;height:150%;border-left:1px solid rgba(0,201,255,.32);background:linear-gradient(110deg,transparent,rgba(0,201,255,.08),transparent);transform:rotate(18deg)}
.project-style-frame .cms-project-hero-bg::before{content:"";position:absolute;inset:34px;z-index:2;border:1px solid rgba(255,255,255,.16);border-radius:30px}

@media (max-width:1050px){
  .project-design-picker{grid-template-columns:1fr}.project-design-option{grid-template-columns:110px 1fr}
  .gallery-group-tall{--gallery-cols:3}.gallery-group-square,.gallery-group-semisquare{--gallery-cols:2}
  .project-style-shift .case-text-only{margin-left:auto;width:min(900px,88vw)}
}
@media (max-width:700px){
  .project-design-option{grid-template-columns:88px 1fr}.project-design-preview{height:56px}
  .gallery-file-row{grid-template-columns:30px minmax(0,1fr) auto}.gallery-aspect-badge{grid-column:2;justify-self:start}.gallery-file-actions{grid-column:3;grid-row:1/3}
  .gallery-auto-rule{grid-template-columns:1fr;gap:4px}
  .case-gallery-group{--gallery-cols:1!important}.gallery-group-tall{--gallery-cols:2!important}
  .project-style-grid .case-builder-section::before{left:5vw}.project-style-grid .case-title-only::after{opacity:.45}
  .project-style-shift .case-title-only{transform:none}.project-style-shift .case-text-only{width:100%;margin:0}.project-style-shift .case-gallery-group:nth-child(n){transform:none}
  .project-style-frame .case-builder-section::before{inset:10px;border-radius:18px}.project-style-frame .case-title-only,.project-style-frame .case-text-only{border-radius:16px}
}


/* ================================================================
   V22 — CLEAN CASE STUDY / RICH TYPE / CROP / MIXED MEDIA GALLERY
   ================================================================ */
.case-builder-section{border:0!important;background:var(--section-bg)!important;isolation:isolate;min-height:auto;padding:clamp(78px,9vw,150px) 4vw;overflow:hidden}
.art-label,.preview-media-label,.case-gallery-head{display:none!important}
.case-builder-section.theme-dark{--section-bg:#020713;--section-fg:#f3f8ff;--section-muted:rgba(243,248,255,.70);--section-accent-text:#00c9ff;--section-panel:#06152f;--section-shadow:rgba(0,0,0,.34);--section-deco:rgba(0,201,255,.10)}
.case-builder-section.theme-light{--section-bg:#f1f5f9;--section-fg:#06101f;--section-muted:rgba(6,16,31,.68);--section-accent-text:#087cc8;--section-panel:#e5edf5;--section-shadow:rgba(8,28,48,.16);--section-deco:rgba(8,124,200,.11)}
.case-builder-section.theme-cyan{--section-bg:linear-gradient(130deg,#49e6f2 0%,#19c9ee 37%,#159ee5 70%,#0b72ca 100%);--section-fg:#03101f;--section-muted:rgba(3,16,31,.72);--section-accent-text:#fff;--section-panel:#061a31;--section-shadow:rgba(0,37,82,.28);--section-deco:rgba(255,255,255,.18)}
.case-builder-section :is(h1,h2,h3,p,.case-rich-copy,.case-text-only,.case-media-text-copy){color:var(--section-fg)!important}.case-builder-section .case-eyebrow,.rich-accent{color:var(--section-accent-text)!important}.case-builder-section strong{font-weight:900}
.project-style-solid .case-builder-section::before,.project-style-solid .case-builder-section::after{display:none!important}
.project-style-symbols .case-builder-section::before{content:"";display:block!important;position:absolute;z-index:-1;width:min(52vw,760px);aspect-ratio:1;right:-12vw;top:-24%;border:1px solid var(--section-deco);border-radius:50%;box-shadow:0 0 0 5vw rgba(0,201,255,.035),0 0 0 10vw rgba(0,201,255,.018);opacity:.78;pointer-events:none}
.project-style-symbols .case-builder-section::after{content:"";display:block!important;position:absolute;z-index:-1;width:min(22vw,340px);aspect-ratio:1;left:5vw;bottom:-11%;border:1px solid var(--section-deco);transform:rotate(45deg);border-radius:24%;opacity:.75;pointer-events:none}
.project-style-lines .case-builder-section::before{content:"";display:block!important;position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(116deg,transparent 0 70px,var(--section-deco) 71px,var(--section-deco) 72px,transparent 73px 145px);mask-image:linear-gradient(90deg,transparent 4%,#000 35%,#000 82%,transparent 100%);opacity:.6;pointer-events:none}
.project-style-lines .case-builder-section::after{content:"";display:block!important;position:absolute;right:5vw;top:18%;width:min(36vw,540px);height:1px;background:linear-gradient(90deg,transparent,var(--section-accent-text),transparent);opacity:.32;pointer-events:none}
.case-title-only{position:relative;z-index:1;width:min(1280px,92vw);min-height:clamp(360px,55vh,680px);margin:auto;display:grid;place-items:center;text-align:center;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;transform:none!important}.case-title-only::after{display:none!important}.case-title-only h2{max-width:1180px;margin:0 auto;font-size:clamp(4.6rem,9.2vw,10rem);line-height:.82;letter-spacing:.018em;text-align:center;text-wrap:balance;text-shadow:none!important}
.case-text-only{position:relative;z-index:1;width:min(980px,88vw)!important;margin:auto!important;padding:clamp(34px,4vw,70px) 0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important}.case-text-only .case-rich-copy{font-size:clamp(1.5rem,2.55vw,2.9rem);line-height:1.42;letter-spacing:-.012em;text-wrap:pretty}
.type-media-text{position:relative;z-index:1;display:grid!important;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr)!important;gap:clamp(38px,6vw,96px)!important;align-items:center;background:none!important}.case-media-text-copy{position:relative;z-index:1;padding:0!important;max-width:620px;justify-self:end}.case-eyebrow{display:block;margin-bottom:18px;font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.case-media-text-copy h2{margin:0 0 24px;font-family:var(--font-display);font-size:clamp(3.7rem,6vw,7rem);font-weight:400;line-height:.84;letter-spacing:.018em;text-transform:uppercase;text-wrap:balance}.case-media-text-copy .case-rich-copy{font-size:clamp(1rem,1.35vw,1.3rem);line-height:1.7;color:var(--section-muted)!important}.case-media-text-media{position:relative;width:min(100%,860px)!important;aspect-ratio:4/3!important;height:auto!important;max-width:860px!important;justify-self:start;border-radius:24px;overflow:hidden;background:var(--section-panel)!important;box-shadow:0 14px 34px var(--section-shadow)!important;outline:0!important}.case-media-text-media img,.case-media-text-media video{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover}
.case-media-only,.case-media-only.force-wide-media{position:relative;z-index:1;width:min(1500px,92vw)!important;max-width:1500px!important;aspect-ratio:16/9!important;height:auto!important;max-height:none!important;margin:auto!important;border-radius:26px;overflow:hidden;background:var(--section-panel)!important;box-shadow:0 15px 36px var(--section-shadow)!important;outline:0!important}.case-media-only img,.case-media-only video{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform}
.case-gallery-grid{position:relative;z-index:1;width:min(1500px,94vw)!important;margin:auto;display:flex!important;flex-direction:column;gap:clamp(14px,1.4vw,22px)!important}.case-gallery-group{--gallery-gap:clamp(10px,1.1vw,18px);--gallery-cols:3;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:flex-start;gap:var(--gallery-gap)!important;width:100%;transform:none!important;border:0!important;padding:0!important}.gallery-group-panoramic{--gallery-cols:1}.gallery-group-wide,.gallery-group-semiwide{--gallery-cols:2}.gallery-group-square,.gallery-group-semisquare{--gallery-cols:3}.gallery-group-tall{--gallery-cols:4}.case-gallery-group .case-gallery-item{position:relative;flex:0 0 calc((100% - (var(--gallery-cols) - 1)*var(--gallery-gap))/var(--gallery-cols));width:auto!important;max-width:none!important;min-height:0!important;border-radius:20px;overflow:hidden;background:var(--section-panel)!important;box-shadow:0 10px 26px var(--section-shadow)!important;outline:0!important}.case-gallery-group .case-gallery-item.aspect-panoramic{aspect-ratio:21/9!important}.case-gallery-group .case-gallery-item.aspect-wide{aspect-ratio:16/9!important}.case-gallery-group .case-gallery-item.aspect-semiwide{aspect-ratio:4/3!important}.case-gallery-group .case-gallery-item.aspect-square{aspect-ratio:1!important}.case-gallery-group .case-gallery-item.aspect-semisquare{aspect-ratio:4/5!important}.case-gallery-group .case-gallery-item.aspect-tall{aspect-ratio:9/16!important}.case-gallery-item img,.case-gallery-item video{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover}
.rich-toolbar{display:flex;gap:6px;margin-bottom:7px}.rich-toolbar button{min-width:34px;height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.025);color:white;font:750 .58rem var(--font-body);cursor:pointer}.rich-toolbar button:hover{border-color:rgba(0,201,255,.38);background:rgba(0,201,255,.055)}.rich-toolbar button:last-child{color:var(--cyan)}.rich-editor-input{min-height:118px;padding:13px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:#061226;color:white;outline:none;font:500 .78rem/1.55 var(--font-body);white-space:pre-wrap}.rich-editor-input.single-line{min-height:49px;display:flex;align-items:center;white-space:nowrap;overflow-x:auto}.rich-editor-input:empty::before{content:attr(data-placeholder);color:rgba(255,255,255,.26);pointer-events:none}.rich-editor-input:focus{border-color:rgba(0,201,255,.65)}.rich-editor-input .rich-accent{color:var(--cyan)!important}.rich-editor-input strong{font-weight:900}
.crop-editor-stage{--crop-x:50%;--crop-y:50%;position:relative;width:100%;aspect-ratio:16/9;margin-top:2px;border:1px solid rgba(0,201,255,.2);border-radius:14px;overflow:hidden;background:#020b19;cursor:grab;touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}.crop-editor-stage.dragging{cursor:grabbing}.crop-editor-stage img,.crop-editor-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;pointer-events:none}.crop-editor-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.3);font-size:.64rem}.crop-focus-point{position:absolute;left:var(--crop-x);top:var(--crop-y);width:22px;height:22px;border:1px solid rgba(255,255,255,.8);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(0,201,255,.12);pointer-events:none;z-index:3}.crop-control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.crop-control-grid label{display:grid;gap:6px;color:rgba(255,255,255,.44);font-size:.55rem;text-transform:uppercase;letter-spacing:.08em}.crop-control-grid input{width:100%;accent-color:var(--cyan)}.crop-editor-help{display:block;margin-top:9px;color:rgba(255,255,255,.34);font-size:.56rem;line-height:1.55}
.gallery-file-row{grid-template-columns:30px 24px 1fr auto auto!important}.gallery-kind-icon{width:24px;height:24px;border-radius:7px;background:rgba(0,201,255,.07);color:var(--cyan);display:grid;place-items:center;font-size:.52rem}.theme-swatch-cyan{background:linear-gradient(135deg,#49e6f2,#0b72ca)!important}.preview-solid{background:linear-gradient(135deg,#041025,#061a31)}.preview-solid i{display:none!important}.preview-symbols{background:#041025}.preview-symbols i:nth-child(1){display:block!important;width:38px;height:38px;border:1px solid rgba(0,201,255,.5);border-radius:50%;left:10px;top:8px}.preview-symbols i:nth-child(2){display:block!important;width:22px;height:22px;border:1px solid rgba(0,201,255,.36);transform:rotate(45deg);right:12px;bottom:10px}.preview-symbols i:nth-child(3){display:none!important}.preview-lines{background:repeating-linear-gradient(120deg,#041025 0 13px,#06203b 14px 15px,#041025 16px 29px)}.preview-lines i{display:none!important}
@media(max-width:1000px){.type-media-text{grid-template-columns:1fr!important}.case-media-text-copy{max-width:820px;justify-self:center;width:90%;text-align:left}.case-media-text-media{justify-self:center!important;width:min(90vw,860px)!important}.crop-control-grid{grid-template-columns:1fr}}
@media(max-width:760px){.case-builder-section{padding:70px 5vw}.case-title-only{min-height:380px}.case-title-only h2{font-size:clamp(3.9rem,16vw,6rem)}.gallery-group-tall{--gallery-cols:2}.gallery-group-square,.gallery-group-semisquare,.gallery-group-wide,.gallery-group-semiwide,.gallery-group-panoramic{--gallery-cols:1}.case-media-only,.case-media-only.force-wide-media{width:90vw!important;border-radius:18px}.case-gallery-group .case-gallery-item{border-radius:15px}.case-media-text-copy h2{font-size:clamp(3.3rem,13vw,5.2rem)}}


/* ================================================================
   V23 — CONTRAST / TYPE LOCK / CONTINUOUS DECOR / TRUE CROP PAN
   ================================================================ */
/* Typography contract: Agency only for display/important titles; Figtree for reading and labels. */
.case-builder-render .case-title-only h2,
.case-builder-render .case-media-text-copy h2,
.project-hero h1,
.next-project h2,
.preview-project-hero-copy h1{
  font-family:var(--font-display)!important;
  font-weight:400;
}
.case-builder-render .case-rich-copy,
.case-builder-render .case-text-only,
.case-builder-render .case-media-text-copy .case-rich-copy,
.case-builder-render .case-eyebrow,
.case-builder-render .preview-media-open-hint{
  font-family:var(--font-body)!important;
}
/* Explicit dark-palette lock prevents inherited navy text from ever disappearing on navy. */
.case-builder-section.theme-dark,
.case-builder-section.theme-dark :is(.case-title-only h2,.case-text-only,.case-text-only .case-rich-copy,.case-media-text-copy,.case-media-text-copy h2,.case-media-text-copy .case-rich-copy,p){
  color:#f6fbff!important;
}
.case-builder-section.theme-dark .case-media-text-copy .case-rich-copy{color:rgba(246,251,255,.74)!important}
.case-builder-section.theme-dark .case-eyebrow,
.case-builder-section.theme-dark .rich-accent{color:#00c9ff!important}

/* Decorative styles now belong to the whole case-study canvas, never to each section. */
.case-builder-render{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.case-builder-section{
  isolation:auto!important;
  position:relative;
  z-index:auto;
}
.project-style-solid .case-builder-section::before,
.project-style-solid .case-builder-section::after,
.project-style-symbols .case-builder-section::before,
.project-style-symbols .case-builder-section::after,
.project-style-lines .case-builder-section::before,
.project-style-lines .case-builder-section::after,
.project-style-grid .case-builder-section::before,
.project-style-grid .case-builder-section::after,
.project-style-shift .case-builder-section::before,
.project-style-shift .case-builder-section::after,
.project-style-frame .case-builder-section::before,
.project-style-frame .case-builder-section::after{
  display:none!important;
}
.case-builder-section>*{position:relative;z-index:2}
.case-builder-render::before,.case-builder-render::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  display:none;
}
.case-builder-render.project-style-symbols::before{
  display:block;
  opacity:.72;
  background-image:
    radial-gradient(circle at 50% 50%,transparent 0 33%,rgba(0,201,255,.13) 33.2% 33.55%,transparent 33.8%),
    radial-gradient(circle at 50% 50%,transparent 0 43%,rgba(4,34,61,.11) 43.2% 43.55%,transparent 43.8%);
  background-size:760px 760px,920px 920px;
  background-position:-170px 160px,calc(100% + 250px) 540px;
  background-repeat:repeat-y;
}
.case-builder-render.project-style-symbols::after{
  display:block;
  opacity:.46;
  background-image:
    linear-gradient(45deg,transparent 49.72%,rgba(0,201,255,.13) 49.86% 50.14%,transparent 50.28%),
    linear-gradient(-45deg,transparent 49.72%,rgba(4,34,61,.11) 49.86% 50.14%,transparent 50.28%);
  background-size:520px 520px,690px 690px;
  background-position:calc(100% - 40px) 310px,90px 790px;
  background-repeat:repeat-y;
}
.case-builder-render.project-style-lines::before{
  display:block;
  opacity:.58;
  background-image:repeating-linear-gradient(116deg,transparent 0 88px,rgba(0,201,255,.105) 89px,rgba(0,201,255,.105) 90px,transparent 91px 176px);
  mask-image:linear-gradient(90deg,transparent 2%,#000 18%,#000 86%,transparent 99%);
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 18%,#000 86%,transparent 99%);
}
.case-builder-render.project-style-lines::after{
  display:block;
  opacity:.32;
  background-image:repeating-linear-gradient(63deg,transparent 0 155px,rgba(3,25,48,.16) 156px,rgba(3,25,48,.16) 157px,transparent 158px 310px);
}

/* True crop preview/media: the original asset remains intact behind a 16:9 window. */
.crop-editor-stage img.eat-crop-media,.crop-editor-stage video.eat-crop-media,
.case-media-only img.eat-crop-media,.case-media-only video.eat-crop-media{
  position:absolute!important;
  inset:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  transform-origin:center center!important;
  will-change:transform,left,top;
}
.crop-editor-stage{cursor:grab}
.crop-editor-stage.dragging{cursor:grabbing}
.crop-focus-point{transition:left .12s ease,top .12s ease}

@media(max-width:760px){
  .case-builder-render.project-style-symbols::before{background-size:520px 520px,650px 650px;background-position:-210px 120px,calc(100% + 220px) 420px}
  .case-builder-render.project-style-symbols::after{background-size:390px 390px,520px 520px}
}


/* ================================================================
   V24 — palette locks + preview reliability + bounded fullscreen pan
   ================================================================ */
.case-builder-section.theme-dark{--section-bg:#020713!important;--section-fg:#f6fbff!important;--section-muted:rgba(246,251,255,.72)!important;--section-accent-text:#00c9ff!important;--section-panel:#06152f!important;--section-shadow:rgba(0,0,0,.34)!important}
.case-builder-section.theme-light{--section-bg:#f1f5f9!important;--section-fg:#06101f!important;--section-muted:rgba(6,16,31,.70)!important;--section-accent-text:#00aeea!important;--section-panel:#e5edf5!important;--section-shadow:rgba(8,28,48,.16)!important}
.case-builder-section.theme-cyan{--section-bg:linear-gradient(130deg,#4ae7f3 0%,#21c9ef 38%,#179fe6 72%,#0d74cb 100%)!important;--section-fg:#03101f!important;--section-muted:rgba(3,16,31,.74)!important;--section-accent-text:#ffffff!important;--section-panel:#072039!important;--section-shadow:rgba(0,37,82,.28)!important}
.case-builder-section.theme-dark :is(.case-title-only h2,.case-text-only,.case-text-only .case-rich-copy,.case-media-text-copy,.case-media-text-copy h2,.case-media-text-copy .case-rich-copy,.case-gallery-head strong,p){color:#f6fbff!important}
.case-builder-section.theme-light :is(.case-title-only h2,.case-text-only,.case-text-only .case-rich-copy,.case-media-text-copy,.case-media-text-copy h2,.case-media-text-copy .case-rich-copy,.case-gallery-head strong,p){color:#06101f!important}
.case-builder-section.theme-cyan :is(.case-title-only h2,.case-text-only,.case-text-only .case-rich-copy,.case-media-text-copy,.case-media-text-copy h2,.case-media-text-copy .case-rich-copy,.case-gallery-head strong,p){color:#03101f!important}
.case-builder-section.theme-dark :is(.case-eyebrow,.rich-accent){color:#00c9ff!important}
.case-builder-section.theme-light :is(.case-eyebrow,.rich-accent){color:#00aeea!important}
.case-builder-section.theme-cyan :is(.case-eyebrow,.rich-accent){color:#ffffff!important}
.case-builder-section.theme-light .case-media-text-copy .case-rich-copy{color:rgba(6,16,31,.70)!important}
.case-builder-section.theme-cyan .case-media-text-copy .case-rich-copy{color:rgba(3,16,31,.74)!important}
.case-builder-section.theme-dark .preview-media-open-hint{background:rgba(246,251,255,.92)!important;color:#041525!important}
.case-builder-section.theme-light .preview-media-open-hint{background:rgba(6,16,31,.9)!important;color:#f6fbff!important}
.case-builder-section.theme-cyan .preview-media-open-hint{background:rgba(255,255,255,.92)!important;color:#06213b!important}


/* ================================================================
   V25 — FINAL PALETTE / TYPOGRAPHY / SPACING / CROP STABILITY FIXES
   ================================================================ */
/* 1) Hard-lock section backgrounds so palette always wins, especially on media+text layouts. */
.case-builder-render > .case-builder-section{background:var(--section-bg)!important;color:var(--section-fg)!important}
.case-builder-section.type-title,.case-builder-section.type-text,.case-builder-section.type-media,.case-builder-section.type-media-text,.case-builder-section.type-gallery{background:var(--section-bg)!important}
.case-builder-section.theme-dark{--section-bg:#020713!important;--section-fg:#f7fbff!important;--section-muted:rgba(247,251,255,.76)!important;--section-accent-text:#00c9ff!important;--section-panel:#071629!important;--section-shadow:rgba(0,0,0,.34)!important}
.case-builder-section.theme-light{--section-bg:#f1f5f9!important;--section-fg:#071120!important;--section-muted:rgba(7,17,32,.72)!important;--section-accent-text:#00b8ee!important;--section-panel:#e7edf4!important;--section-shadow:rgba(8,28,48,.16)!important}
.case-builder-section.theme-cyan{--section-bg:linear-gradient(135deg,#64eef8 0%,#39d9f2 34%,#1bb6ee 66%,#0b78cf 100%)!important;--section-fg:#071120!important;--section-muted:rgba(7,17,32,.76)!important;--section-accent-text:#ffffff!important;--section-panel:rgba(4,27,50,.90)!important;--section-shadow:rgba(0,37,82,.24)!important;border-bottom-color:rgba(7,17,32,.10)!important}
.case-builder-section.theme-dark,.case-builder-section.theme-dark :is(h1,h2,h3,p,strong,em,span,li,.case-rich-copy,.case-text-only,.case-media-text-copy){color:#f7fbff!important}
.case-builder-section.theme-light,.case-builder-section.theme-light :is(h1,h2,h3,p,strong,em,span,li,.case-rich-copy,.case-text-only,.case-media-text-copy){color:#071120!important}
.case-builder-section.theme-cyan,.case-builder-section.theme-cyan :is(h1,h2,h3,p,strong,em,span,li,.case-rich-copy,.case-text-only,.case-media-text-copy){color:#071120!important}
.case-builder-section.theme-dark :is(.case-eyebrow,.case-title-only>span,.case-text-only>span,.case-media-text-copy>span,.case-gallery-head>span,.rich-accent){color:#00c9ff!important}
.case-builder-section.theme-light :is(.case-eyebrow,.case-title-only>span,.case-text-only>span,.case-media-text-copy>span,.case-gallery-head>span,.rich-accent){color:#00b8ee!important}
.case-builder-section.theme-cyan :is(.case-eyebrow,.case-title-only>span,.case-text-only>span,.case-media-text-copy>span,.case-gallery-head>span,.rich-accent){color:#ffffff!important}
.case-builder-section.theme-dark .case-media-text-copy .case-rich-copy{color:rgba(247,251,255,.78)!important}
.case-builder-section.theme-light .case-media-text-copy .case-rich-copy{color:rgba(7,17,32,.72)!important}
.case-builder-section.theme-cyan .case-media-text-copy .case-rich-copy{color:rgba(7,17,32,.76)!important}

/* 2) Typography consistency: Agency for display only, body font for subtitles/reading. */
.case-builder-render .case-title-only h2,
.case-builder-render .case-media-text-copy h2,
.case-builder-render .case-gallery-head strong,
.case-builder-render .preview-project-hero-copy h1{font-family:var(--font-display)!important;font-weight:400!important}
.case-builder-render .case-eyebrow,
.case-builder-render .case-title-only>span,
.case-builder-render .case-text-only>span,
.case-builder-render .case-media-text-copy>span,
.case-builder-render .case-gallery-head>span,
.case-builder-render .case-rich-copy,
.case-builder-render .case-text-only,
.case-builder-render .case-media-text-copy .case-rich-copy,
.case-builder-render .preview-media-open-hint{font-family:var(--font-body)!important}
.case-eyebrow{font-size:.66rem!important;font-weight:800!important;letter-spacing:.15em!important;text-transform:uppercase!important}

/* 3) Media + text layout spacing to avoid overlaps with the image column. */
.case-builder-section.type-media-text{display:grid!important;grid-template-columns:minmax(0,.72fr) minmax(420px,1fr)!important;column-gap:clamp(56px,8vw,128px)!important;align-items:center!important}
.case-media-text-copy{justify-self:start!important;width:min(100%,520px)!important;max-width:520px!important;padding-right:clamp(8px,2vw,26px)!important}
.case-media-text-copy h2{max-width:7ch!important;margin:0 0 22px!important;overflow-wrap:anywhere!important;text-wrap:balance!important}
.case-media-text-copy .case-rich-copy{max-width:34ch!important}
.case-media-text-media{justify-self:end!important;width:min(100%,900px)!important;max-width:900px!important}
@media(max-width:1100px){.case-builder-section.type-media-text{grid-template-columns:1fr!important;row-gap:34px!important}.case-media-text-copy,.case-media-text-media{justify-self:center!important;width:min(90vw,820px)!important;max-width:820px!important}.case-media-text-copy h2,.case-media-text-copy .case-rich-copy{max-width:none!important}}

/* 4) Crop editor visual stability. */
.crop-editor-stage{overflow:hidden!important}
.crop-editor-stage img,.crop-editor-stage video{left:50%;top:50%;width:auto;height:auto;max-width:none!important;max-height:none!important}

/* 5) Keep standalone media and gallery cards subtly lifted, never flat. */
.case-media-only,.case-media-text-media,.case-gallery-group .case-gallery-item{box-shadow:0 16px 38px var(--section-shadow)!important}


/* ================================================================
   V26 — FINAL RESPONSIVE / VISUAL CONSISTENCY PASS
   Goal: no new features; unify CMS preview + public case-study layouts
   across desktop, tablet and mobile.
   ================================================================ */

/* ---------- Global modular case-study rhythm ---------- */
.case-builder-render{
  --case-gutter:clamp(22px,5vw,84px);
  --case-section-y:clamp(74px,10vh,138px);
}
.case-builder-render>.case-builder-section{
  min-height:auto!important;
  padding:var(--case-section-y) var(--case-gutter)!important;
  border:0!important;
}
.case-builder-render>.case-builder-section:first-child{padding-top:clamp(92px,12vh,160px)!important}
.case-builder-render>.case-builder-section:last-child{padding-bottom:clamp(100px,14vh,170px)!important}

/* Continuous background decoration should never intercept content. */
.case-builder-render::before,.case-builder-render::after{pointer-events:none!important}
.case-builder-render>*{position:relative;z-index:1}

/* ---------- Title-only block ---------- */
.case-title-only{
  width:min(1220px,92vw)!important;
  min-height:clamp(340px,48vh,610px)!important;
  padding:0!important;
}
.case-title-only h2{
  max-width:1050px!important;
  font-size:clamp(4.5rem,8.3vw,9.2rem)!important;
  line-height:.84!important;
  letter-spacing:.018em!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}

/* ---------- Text-only block ---------- */
.case-text-only{
  width:min(900px,86vw)!important;
  padding:clamp(24px,3vw,48px) 0!important;
}
.case-text-only .case-rich-copy{
  font-size:clamp(1.4rem,2.2vw,2.45rem)!important;
  line-height:1.47!important;
  max-width:31ch;
  margin-inline:auto;
  text-align:left;
}

/* ---------- Media-only block ---------- */
.case-media-only,.case-media-only.force-wide-media{
  width:min(1440px,92vw)!important;
  border-radius:clamp(18px,1.5vw,28px)!important;
}

/* ---------- Media + text block ---------- */
.case-builder-section.type-media-text{
  grid-template-columns:minmax(300px,.7fr) minmax(500px,1.15fr)!important;
  gap:clamp(58px,7vw,118px)!important;
  max-width:1600px;
  margin-inline:auto;
}
.case-media-text-copy{
  width:min(100%,500px)!important;
  max-width:500px!important;
  align-self:center;
}
.case-media-text-copy h2{
  max-width:8.2ch!important;
  font-size:clamp(3.5rem,5.3vw,6.35rem)!important;
  line-height:.87!important;
}
.case-media-text-copy .case-rich-copy{
  max-width:36ch!important;
  font-size:clamp(.98rem,1.15vw,1.22rem)!important;
  line-height:1.72!important;
}
.case-media-text-media{
  width:min(100%,900px)!important;
  aspect-ratio:4/3!important;
  border-radius:clamp(18px,1.4vw,26px)!important;
}

/* ---------- Gallery ---------- */
.case-gallery-grid{
  width:min(1440px,94vw)!important;
  gap:clamp(16px,1.7vw,26px)!important;
}
.case-gallery-group{
  --gallery-gap:clamp(10px,1vw,16px);
}
.case-gallery-group .case-gallery-item{
  border-radius:clamp(14px,1.1vw,21px)!important;
  transform:translateZ(0);
}
.case-gallery-item img,.case-gallery-item video,
.case-media-only img,.case-media-only video,
.case-media-text-media img,.case-media-text-media video{
  backface-visibility:hidden;
}

/* ---------- Public/private preview visual parity ---------- */
.private-preview-body .case-builder-render,
.public-case-builder{
  width:100%;
}
.private-preview-body .case-builder-section{
  min-height:auto!important;
}
.private-preview-body .preview-private-banner{
  position:sticky;
  top:0;
  z-index:260;
}

/* ---------- Rich editor / CMS controls ---------- */
.builder-section-card{scroll-margin-top:100px}
.builder-section-card .builder-field{min-width:0}
.rich-editor-input{font-size:.82rem!important;line-height:1.62!important}
.rich-editor-input.single-line{overflow-y:hidden!important}
.crop-control-grid input[type="range"]{min-width:0}
.crop-editor-stage{border-radius:16px!important}
.crop-editor-help{max-width:85ch}

/* ---------- Lightbox ---------- */
.media-lightbox-dialog{
  width:min(1520px,calc(100vw - 34px))!important;
  height:min(980px,calc(100dvh - 34px))!important;
}
.media-lightbox-stage{
  position:relative;
  overflow:hidden!important;
  overscroll-behavior:contain;
}
.media-lightbox-asset{
  max-width:100%;
  max-height:100%;
}
.media-lightbox-asset img,.media-lightbox-asset video{
  max-width:100%!important;
  max-height:calc(100dvh - 132px)!important;
}

/* ---------- Tablet ---------- */
@media (max-width:1180px){
  .case-builder-render{--case-gutter:clamp(24px,5vw,58px);--case-section-y:clamp(68px,8vh,108px)}
  .case-builder-section.type-media-text{
    grid-template-columns:minmax(250px,.78fr) minmax(400px,1.1fr)!important;
    gap:clamp(42px,5vw,70px)!important;
  }
  .case-media-text-copy h2{font-size:clamp(3.35rem,5.7vw,5.5rem)!important}
}

/* ---------- Small tablet / landscape phone ---------- */
@media (max-width:900px){
  .case-builder-render{--case-gutter:clamp(20px,5vw,42px);--case-section-y:clamp(62px,8vh,92px)}
  .case-builder-section.type-media-text{
    display:flex!important;
    flex-direction:column!important;
    gap:34px!important;
  }
  .case-media-text-copy{
    width:min(100%,720px)!important;
    max-width:720px!important;
    align-self:center;
    padding:0!important;
  }
  .case-media-text-copy h2{max-width:10ch!important}
  .case-media-text-copy .case-rich-copy{max-width:46ch!important}
  .case-media-text-media{width:min(100%,820px)!important;align-self:center}
  .case-title-only h2{font-size:clamp(4rem,12vw,7rem)!important}
  .case-text-only .case-rich-copy{font-size:clamp(1.3rem,3.7vw,2rem)!important}

  .gallery-group-tall{--gallery-cols:3!important}
  .gallery-group-square,.gallery-group-semisquare{--gallery-cols:2!important}
  .gallery-group-wide,.gallery-group-semiwide{--gallery-cols:1!important}
  .gallery-group-panoramic{--gallery-cols:1!important}

  .media-lightbox{padding:10px!important}
  .media-lightbox-dialog{width:calc(100vw - 20px)!important;height:calc(100dvh - 20px)!important;border-radius:20px!important}
  .media-lightbox-toolbar{padding:2px 2px 0!important}
}

/* ---------- Mobile portrait ---------- */
@media (max-width:620px){
  .case-builder-render{--case-gutter:20px;--case-section-y:64px}
  .case-builder-render>.case-builder-section:first-child{padding-top:78px!important}
  .case-title-only{width:100%!important;min-height:310px!important;text-align:left!important;place-items:center start!important}
  .case-title-only h2{text-align:left!important;font-size:clamp(3.7rem,17vw,5.7rem)!important;line-height:.86!important;max-width:9ch!important;margin:0!important}
  .case-text-only{width:100%!important}
  .case-text-only .case-rich-copy{font-size:clamp(1.2rem,5vw,1.58rem)!important;max-width:none!important}
  .case-media-only,.case-media-only.force-wide-media{width:100%!important;border-radius:16px!important}
  .case-media-text-copy,.case-media-text-media{width:100%!important}
  .case-media-text-copy h2{font-size:clamp(3rem,14vw,4.8rem)!important;max-width:9ch!important}
  .case-media-text-copy .case-rich-copy{font-size:1rem!important;max-width:none!important}
  .case-media-text-media{border-radius:16px!important}
  .case-gallery-grid{width:100%!important}
  .gallery-group-tall{--gallery-cols:2!important}
  .gallery-group-square,.gallery-group-semisquare,.gallery-group-wide,.gallery-group-semiwide,.gallery-group-panoramic{--gallery-cols:1!important}
  .case-gallery-group .case-gallery-item{border-radius:14px!important}

  .section-theme-picker{grid-template-columns:1fr!important}
  .section-theme-option{grid-template-columns:30px 1fr!important;padding:9px!important}
  .section-theme-swatch{width:30px!important;height:30px!important}
  .crop-control-grid{grid-template-columns:1fr!important;gap:14px!important}

  .media-lightbox-toolbar{flex-direction:column!important;align-items:stretch!important;gap:8px!important}
  .media-lightbox-actions{display:grid!important;grid-template-columns:repeat(4,1fr)!important;width:100%!important}
  .media-lightbox-btn{padding:0 8px!important;min-width:0!important}
  .media-lightbox-copy strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .media-lightbox-asset img,.media-lightbox-asset video{max-height:calc(100dvh - 190px)!important}
}

/* Reduced motion should never leave content hidden. */
@media (prefers-reduced-motion:reduce){
  .case-builder-render [data-cms-reveal],
  .case-builder-render [data-gallery-reveal],
  .case-gallery-item{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}

/* ================================================================
   V27 — cyan palette parity / full-width section backgrounds
   ================================================================ */
/* Media+text sections must paint the full section width. The previous max-width
   on the section element itself made cyan look like an inset card. */
.case-builder-section.type-media-text{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-inline:max(4vw,calc((100vw - 1500px)/2))!important;
  box-sizing:border-box!important;
}

/* Keep the two content columns comfortably constrained inside the now full-width section. */
.case-builder-section.type-media-text .case-media-text-copy{
  justify-self:start!important;
}
.case-builder-section.type-media-text .case-media-text-media{
  justify-self:end!important;
}

/* Cyan must behave exactly like the other palettes: full section background,
   dark text, and white highlights only. */
.case-builder-section.theme-cyan{
  --section-bg:linear-gradient(135deg,#67eef8 0%,#41dcf3 34%,#20bbee 66%,#0d79cf 100%)!important;
  --section-fg:#071120!important;
  --section-muted:rgba(7,17,32,.76)!important;
  --section-accent-text:#ffffff!important;
  --section-panel:rgba(4,27,50,.90)!important;
  --section-shadow:rgba(0,37,82,.24)!important;
  background:var(--section-bg)!important;
}
.case-builder-section.theme-cyan,
.case-builder-section.theme-cyan :is(h1,h2,h3,p,strong,em,span,li,.case-rich-copy,.case-text-only,.case-media-text-copy){
  color:#071120!important;
}
.case-builder-section.theme-cyan :is(.case-eyebrow,.case-title-only>span,.case-text-only>span,.case-media-text-copy>span,.case-gallery-head>span,.rich-accent){
  color:#ffffff!important;
}
.case-builder-section.theme-cyan .case-media-text-copy .case-rich-copy{
  color:rgba(7,17,32,.76)!important;
}

/* On smaller screens preserve full-width palette behavior as well. */
@media (max-width:900px){
  .case-builder-section.type-media-text{
    padding-inline:5vw!important;
  }
}

/* ================================================================
   V28 — seamless cyan sections + safer title spacing
   ================================================================ */
/* Make cyan sections seamless when stacked: use a horizontal-only gradient,
   so restarting the background on the next section does not create a visible cut. */
.case-builder-section.theme-cyan{
  --section-bg:linear-gradient(90deg,#67eef8 0%,#45def4 32%,#24c3ef 66%,#0d79cf 100%)!important;
  background:var(--section-bg)!important;
}

/* If two cyan sections are consecutive, ensure there is no accidental separator feel. */
.case-builder-render > .case-builder-section.theme-cyan + .case-builder-section.theme-cyan{
  margin-top:0!important;
}

/* Give large multiline titles a bit more breathing room so letters like Q do not
   collide visually with the next line. */
.case-title-only h2{
  line-height:.92!important;
}

/* Slightly increase vertical breathing room inside the title block as well. */
.case-title-only{
  padding-block:clamp(10px,1.6vw,24px)!important;
}

@media (max-width:760px){
  .case-title-only h2{
    line-height:.94!important;
  }
}

/* ================================================================
   V29 — CANONICAL RESPONSIVE SYSTEM
   Two breakpoints only for the final layout system:
   Desktop > 1180px | Tablet 701–1180px | Mobile <= 700px
   These rules intentionally sit last and normalize every public/private page.
   ================================================================ */

/* Global resilience shared by all breakpoints */
:where(.hero-main,.work-hero-grid,.services-page-intro,.service-chapter-grid,.studio-hero-grid,.studio-visual-head,.studio-story-row,.constellation-grid,.process-head,.lab-hero-grid,.contact-grid,.join-grid,.project-hero-bottom,.project-split,.project-gallery,.footer-grid,.private-grid-2,.editor-builder-shell,.private-field-grid,.project-design-picker) > *{min-width:0}
:where(img,video){height:auto}
.page-main,.private-main,.private-project-preview{width:100%;max-width:100vw;overflow-x:clip}
.display-title,.hero-copy h1,.contact-copy h1,.join-copy h1,.private-page-title h1,.private-login-copy h1{overflow-wrap:normal;word-break:normal;hyphens:none}
.mobile-menu-links{display:flex;flex-direction:column;gap:14px}
.mobile-menu-cta{margin-top:auto;min-height:56px;padding:0 18px;border:1px solid rgba(0,201,255,.42);border-radius:999px;display:flex;align-items:center;justify-content:space-between;color:var(--cyan)!important;font-size:.72rem!important;letter-spacing:.1em!important;text-transform:uppercase;font-weight:900!important}

/* =========================== TABLET ============================ */
@media (max-width:1180px) and (min-width:701px){
  :root{--shell:min(calc(100vw - 56px),1040px)}
  html{scroll-padding-top:76px}
  .site-header{height:76px;padding-inline:28px;grid-template-columns:1fr auto}
  .desktop-nav,.header-cta{display:none!important}
  .menu-button{display:block!important}
  .mobile-menu{padding:108px 34px 34px;gap:28px}
  .mobile-menu a:not(.mobile-menu-cta){font-size:clamp(2.8rem,7vw,5.4rem);line-height:.9}
  .brand-word{font-size:1.08rem}

  /* Global public type/section rhythm */
  .display-title{font-size:clamp(5rem,11.5vw,8rem);line-height:.82}
  .page-copy{max-width:680px;font-size:.95rem}
  .work-page-hero,.services-page-hero,.studio-page-hero,.lab-hero{min-height:auto!important;padding:140px 0 88px!important}
  .contact-hero,.join-hero{min-height:auto;padding:132px 0 92px}
  .contact-section{min-height:78svh}
  .contact-inner{padding-block:100px}

  /* Home */
  .hero{padding-top:76px;min-height:auto}
  .hero-main{grid-template-columns:1fr!important;min-height:auto;padding-block:70px 28px;gap:26px}
  .hero-copy{max-width:820px}
  .hero-copy h1{font-size:clamp(5.1rem,11.5vw,8.2rem);max-width:900px}
  .dial-stage{min-height:520px;margin-top:0}
  .eat-dial{--dial-size:clamp(340px,50vw,470px)}
  .dial-copy{right:3%;bottom:4%;width:250px}
  .mode-selector{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-bottom:28px}
  .mode-button{min-height:88px}
  .home-work-cinematic{padding-top:110px}
  .home-work-cinematic-head{grid-template-columns:1fr!important;gap:24px}
  .home-work-cinematic-head>p:last-child{max-width:680px}
  .home-work-stack{width:94vw}
  .services-grid{grid-template-columns:1fr!important;gap:48px}
  .services-title{position:relative!important;top:auto!important;max-width:760px}
  .service-row{grid-template-columns:46px minmax(0,1fr) minmax(180px,.65fr) 24px;min-height:120px}
  .studio-grid{grid-template-columns:1fr!important;gap:30px}
  .studio-grid>p:last-child{max-width:680px}

  /* Work */
  .work-hero-grid,.services-page-intro,.studio-hero-grid,.lab-hero-grid{grid-template-columns:1fr!important;gap:28px}
  .work-hero-side,.services-page-intro .page-copy,.studio-hero-grid .page-copy{justify-self:start!important;max-width:680px}
  .work-filter-inner{gap:16px}
  .work-filters{gap:7px}
  .work-browser{padding:64px 0 110px}
  .work-browser-grid{grid-template-columns:1fr!important;gap:38px}
  .work-index{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
  .work-index-item{min-height:96px}
  .work-preview-wrap{position:relative!important;top:auto!important;margin-top:10px}
  .work-preview{height:min(62vw,650px)!important;min-height:470px}
  .work-grid-view{grid-template-columns:1fr 1fr}

  /* Services */
  .service-rail{display:none!important}
  .service-chapter{min-height:auto!important;padding:92px 0!important}
  .service-chapter-grid{grid-template-columns:1fr!important;gap:42px}
  .service-chapter-copy{max-width:760px}
  .service-art-column{width:100%}
  .service-art{min-height:500px;height:min(60vw,620px)}
  .service-project-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}

  /* Studio */
  .manifesto-scroll{padding:100px 0}
  .manifesto-line{grid-template-columns:48px 1fr;gap:24px;padding:28px 0}
  .studio-visual-head{grid-template-columns:1fr!important;gap:22px;margin-bottom:60px}
  .studio-story-list{gap:80px}
  .studio-story-row,.studio-story-row.reverse{grid-template-columns:1fr!important;gap:30px}
  .studio-story-row.reverse .studio-story-media{order:0!important}
  .studio-story-media{height:min(58vw,580px);min-height:430px}
  .constellation-grid{grid-template-columns:1fr!important;gap:34px}
  .constellation-copy{max-width:700px}
  .tool-constellation{width:min(90vw,680px);min-height:580px;margin-inline:auto}
  .process-head{grid-template-columns:1fr!important;gap:22px}
  .process-grid{grid-template-columns:1fr 1fr!important}
  .studio-join-grid{grid-template-columns:1fr!important;gap:48px}
  .studio-join-media{min-height:540px;height:min(65vw,650px)}
  .studio-join-copy{max-width:760px}

  /* Lab */
  .lab-board{padding-bottom:110px}
  .lab-board-label{align-items:flex-start}
  .lab-board-inner{width:94vw;height:1220px;border-radius:26px}
  .lab-card{width:min(var(--w),44vw)}

  /* Contact + Join */
  .contact-grid,.join-grid{grid-template-columns:1fr!important;gap:54px}
  .contact-copy,.join-copy{max-width:760px}
  .idea-form{width:100%;max-width:820px;padding:38px}
  .form-sentence,.join-sentence{font-size:clamp(1.65rem,4.2vw,2.8rem)}
  .form-details{grid-template-columns:1fr 1fr}
  .eat-select-panel,.eat-calendar-panel{max-width:min(680px,calc(100vw - 70px))}

  /* Legacy project page */
  .project-hero{padding-top:130px;min-height:90svh}
  .project-hero-bottom{grid-template-columns:1fr!important;gap:28px}
  .project-hero-facts{max-width:700px}
  .project-split,.project-gallery{grid-template-columns:1fr!important;gap:34px;padding-block:88px}
  .project-split-media{order:-1}
  .project-gallery .project-visual:nth-child(2){margin-top:0!important}
  .project-gallery .project-visual{min-height:520px}

  /* CMS project pages */
  .case-builder-render{--case-gutter:32px;--case-section-y:86px}
  .case-builder-section{padding-inline:32px!important}
  .case-builder-section.type-media-text{display:flex!important;flex-direction:column!important;gap:38px!important;padding-inline:32px!important}
  .case-media-text-copy{width:min(100%,760px)!important;max-width:760px!important;align-self:center!important;padding:0!important}
  .case-media-text-copy h2{max-width:10ch!important}
  .case-media-text-copy .case-rich-copy{max-width:48ch!important}
  .case-media-text-media{width:min(100%,900px)!important;align-self:center!important}
  .case-media-only,.case-media-only.force-wide-media{width:min(100%,1040px)!important}
  .case-gallery-grid{width:100%!important}
  .gallery-group-tall{--gallery-cols:3!important}
  .gallery-group-square,.gallery-group-semisquare{--gallery-cols:2!important}
  .gallery-group-wide,.gallery-group-semiwide,.gallery-group-panoramic{--gallery-cols:1!important}

  /* Footer */
  .site-footer{padding:64px 0 38px}
  .footer-grid{grid-template-columns:1.4fr 1fr!important;gap:38px 52px}
  .footer-brand{grid-column:1}
  .footer-nav{grid-column:auto}
  .footer-meta{grid-column:1/-1!important;min-height:auto!important;flex-direction:row!important;align-items:flex-end!important;text-align:left!important;gap:24px}
  .footer-meta-links{align-items:flex-end}
  .footer-join{grid-column:1/-1;align-items:center!important}

  /* Private area */
  .private-shell,.private-topbar-inner{width:min(calc(100% - 48px),1040px)}
  .private-login-shell{width:min(calc(100% - 48px),820px);grid-template-columns:1fr!important;gap:46px;padding:60px 0}
  .private-login-copy{max-width:720px}
  .private-topbar-inner{grid-template-columns:1fr auto!important}
  .private-topnav{display:none!important}
  .private-page-head{align-items:flex-start}
  .private-status-strip,.private-status-strip.private-status-strip-5{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .private-grid-2{grid-template-columns:1fr!important}
  .review-decision{position:relative!important;top:auto!important}
  .review-meta{grid-template-columns:1fr 1fr}
  .editor-builder-shell{grid-template-columns:1fr!important}
  .section-palette{position:relative!important;top:auto!important}
  .section-palette-grid{grid-template-columns:1fr 1fr!important}
  .project-design-picker{grid-template-columns:1fr!important}
  .private-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .private-table{min-width:760px}
  .private-editor-actions{max-width:100%;flex-wrap:wrap}
  .preview-project-hero-copy h1{font-size:clamp(5rem,12vw,8rem)}
}

/* ============================ MOBILE ============================ */
@media (max-width:700px){
  :root{--shell:calc(100vw - 32px)}
  html{scroll-padding-top:66px}
  body{overflow-x:hidden}
  .shell{width:var(--shell)!important;max-width:var(--shell)!important}
  #fxCanvas,.cursor-dot,.cursor-ring{display:none!important}

  /* Header + navigation */
  .site-header{height:66px;padding-inline:16px;grid-template-columns:1fr auto}
  .desktop-nav,.header-cta{display:none!important}
  .menu-button{display:block!important;width:40px;height:40px}
  .brand{gap:8px}.brand-word{font-size:1rem}.brand-mark{width:24px;height:24px}
  .mobile-menu{padding:96px 20px 22px;gap:22px}
  .mobile-menu a:not(.mobile-menu-cta){font-size:clamp(2.7rem,14vw,4.7rem);line-height:.88;letter-spacing:-.04em}
  .mobile-menu-cta{width:100%;min-height:54px}

  /* Shared public typography */
  .page-main{padding-top:0}
  .display-title{font-size:clamp(3.55rem,17vw,5.7rem)!important;line-height:.84!important;letter-spacing:-.045em!important}
  .page-copy{font-size:.9rem;line-height:1.65}
  .page-kicker,.eyebrow{font-size:.58rem;letter-spacing:.14em}
  .work-page-hero,.services-page-hero,.studio-page-hero,.lab-hero{min-height:auto!important;padding:112px 0 66px!important}
  .work-hero-grid,.services-page-intro,.studio-hero-grid,.lab-hero-grid{grid-template-columns:1fr!important;gap:26px}
  .contact-section{min-height:auto;padding:0}
  .contact-inner{padding-block:82px}
  .contact-inner h2{font-size:clamp(3.5rem,15.5vw,5.6rem)!important;line-height:.86}
  .big-cta{margin-top:48px;padding:18px 0;font-size:1.1rem}
  .tape-break{height:72px}.tape-break .tape-video{height:45px;width:150%;left:-25%}

  /* Home */
  .hero{padding-top:66px;min-height:auto}
  .hero-main{grid-template-columns:1fr!important;min-height:auto;padding:58px 0 24px;gap:14px}
  .hero-copy h1{font-size:clamp(3.65rem,17vw,5.65rem)!important;line-height:.84!important;letter-spacing:-.045em!important}
  .hero-copy h1 span{-webkit-text-stroke:1px rgba(255,255,255,.9)}
  .hero-intro{font-size:.9rem;margin-top:20px}.hero-instruction{margin-top:20px;font-size:.58rem}
  .dial-stage{min-height:auto;margin:10px 0 26px;display:flex;flex-direction:column;gap:24px}
  .eat-dial{--dial-size:min(78vw,320px)}
  .dial-copy{position:relative!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:340px;text-align:center;order:2}
  .dial-copy a{justify-content:center}
  .mode-selector{grid-template-columns:1fr 1fr!important;gap:7px;padding-bottom:22px}
  .mode-button{min-height:82px;padding:11px}.mode-button span{margin-bottom:8px}.mode-button strong{font-size:.78rem}.mode-button small{font-size:.56rem;white-space:normal}
  .experience-layer .graphic-block,.wc-2,.wr-3,.video-timecode,.hud{display:none!important}
  .home-work-cinematic{padding-top:82px}
  .home-work-cinematic-head{grid-template-columns:1fr!important;gap:20px}
  .home-work-cinematic-head h2{font-size:clamp(3.4rem,15.5vw,5.2rem)!important;line-height:.86}
  .home-work-stack{width:calc(100vw - 24px)!important}
  .home-work-end{padding-block:42px}
  .services-section{padding:82px 0}
  .services-grid{grid-template-columns:1fr!important;gap:36px}
  .services-title{position:relative!important;top:auto!important}
  .services-title h2,.studio-grid h2{font-size:clamp(3.5rem,15vw,5.5rem)!important;line-height:.87}
  .service-row{min-height:105px;grid-template-columns:34px minmax(0,1fr) 22px!important;gap:10px 12px;padding:12px 0}
  .service-row strong{font-size:clamp(1.55rem,8vw,2.4rem);line-height:1}
  .service-row em{grid-column:2/-1;font-size:.72rem;padding-right:8px}
  .service-row b{grid-column:3;grid-row:1/2}.service-row>span{grid-row:1/2}
  .studio-section{padding:88px 0}.studio-grid{grid-template-columns:1fr!important;gap:26px}.studio-grid>p:last-child{font-size:.9rem}

  /* Work */
  .work-filter-bar{top:66px}
  .work-filter-inner{min-height:auto;padding:12px 0;display:block}
  .work-filters{flex-wrap:nowrap;overflow-x:auto;gap:7px;padding:0 0 6px;scrollbar-width:none}.work-filters::-webkit-scrollbar{display:none}
  .work-filters button{flex:0 0 auto}
  .view-switch{display:none!important}
  .work-browser{padding:48px 0 82px}
  .work-browser-grid{display:block!important}
  .work-index{display:block!important}
  .work-index-item{grid-template-columns:30px minmax(0,1fr);gap:10px;min-height:82px;padding:10px 0!important}
  .work-index-item small{grid-column:2;font-size:.52rem}
  .work-index-item strong{font-size:clamp(1.4rem,8vw,2.1rem)}
  .work-preview-wrap{display:none!important}
  .work-grid-view{grid-template-columns:1fr!important;gap:16px}

  /* Services page */
  .service-rail{display:none!important}
  .service-chapter{min-height:auto!important;padding:72px 0!important}
  .service-chapter-grid{grid-template-columns:1fr!important;gap:30px}
  .service-chapter-copy h2{font-size:clamp(3.2rem,15vw,5.3rem)!important;line-height:.86}
  .service-tags{gap:6px}.service-tags span{font-size:.5rem}
  .service-work-link{min-width:0;width:100%;max-width:330px;margin-top:26px}
  .service-art{min-height:330px;height:78vw;border-radius:18px}
  .service-project-thumbs{grid-template-columns:1fr 1fr!important;gap:9px}
  .service-project-thumb .project-visual{height:110px}

  /* Studio */
  .manifesto-scroll{padding:72px 0}
  .manifesto-lines{gap:0}
  .manifesto-line{grid-template-columns:28px minmax(0,1fr)!important;gap:12px;padding:24px 0}
  .manifesto-line h2{font-size:clamp(2.4rem,12vw,4.5rem)!important;line-height:.92}
  .studio-visual-stories{padding:78px 0}
  .studio-visual-head{grid-template-columns:1fr!important;gap:18px;margin-bottom:44px}
  .studio-visual-head h2{font-size:clamp(3.2rem,14.5vw,5rem)!important}
  .studio-story-list{gap:58px}
  .studio-story-row,.studio-story-row.reverse{grid-template-columns:1fr!important;gap:22px}
  .studio-story-row.reverse .studio-story-media{order:0!important}
  .studio-story-media{min-height:310px;height:82vw;border-radius:18px}
  .studio-story-copy h3{font-size:clamp(2rem,10vw,3.2rem)}
  .studio-constellation-section{padding-block:76px}
  .constellation-grid{grid-template-columns:1fr!important;gap:28px}
  .tool-constellation{width:100%;min-height:420px;margin:0}
  .tool-node{font-size:.46rem!important;padding:7px 8px!important}
  .process-section{padding:78px 0}
  .process-head{grid-template-columns:1fr!important;gap:18px;margin-bottom:36px}
  .process-head h2{font-size:clamp(3.1rem,14vw,5rem)!important}
  .process-grid{grid-template-columns:1fr!important}
  .process-card{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important;padding:28px 0!important}
  .studio-join-section{padding-block:78px}
  .studio-join-grid{grid-template-columns:1fr!important;gap:34px}
  .studio-join-media{min-height:360px;height:90vw;border-radius:18px}
  .studio-join-overlay strong{font-size:clamp(3.7rem,20vw,6.2rem)}
  .studio-join-copy h2{font-size:clamp(3rem,14vw,5rem)}
  .studio-join-cta{width:100%;max-width:360px}

  /* Lab */
  .lab-hero-side{max-width:100%}
  .lab-board{padding:34px 0 82px}
  .lab-board-label{flex-direction:column!important;align-items:flex-start!important;gap:6px}
  .lab-board-inner{width:calc(100vw - 24px)!important;height:1680px!important;min-height:1680px!important;border-radius:18px}
  .lab-card{position:absolute!important;width:74%!important;min-width:0;max-width:330px;left:var(--drag-left,var(--mobile-left,var(--x)))!important;top:var(--drag-top,var(--mobile-top,var(--y)))!important}
  .lab-card-art{min-height:230px}
  .lab-card:nth-of-type(1){--mobile-left:3%;--mobile-top:2%}.lab-card:nth-of-type(2){--mobile-left:23%;--mobile-top:18%}.lab-card:nth-of-type(3){--mobile-left:5%;--mobile-top:34%}.lab-card:nth-of-type(4){--mobile-left:22%;--mobile-top:50%}.lab-card:nth-of-type(5){--mobile-left:4%;--mobile-top:66%}.lab-card:nth-of-type(6){--mobile-left:21%;--mobile-top:82%}

  /* Contact + Join */
  .contact-hero,.join-hero{min-height:auto;padding:106px 0 72px}
  .contact-grid,.join-grid{grid-template-columns:1fr!important;gap:38px}
  .contact-copy h1,.join-copy h1{font-size:clamp(3.7rem,17vw,5.8rem)!important;line-height:.84!important;letter-spacing:-.045em!important}
  .contact-copy p,.join-copy>p{font-size:.9rem}
  .contact-direct,.join-note{margin-top:30px}
  .idea-form,.join-form{width:100%;max-width:100%;padding:24px 18px!important;border-radius:18px}
  .idea-form::before{right:16px;top:14px;font-size:.48rem}
  .form-sentence,.join-sentence{font-size:1.42rem!important;line-height:1.58!important;letter-spacing:-.025em!important}
  .inline-field{display:inline-block;min-width:110px;max-width:100%;font-size:inherit}
  .form-details{grid-template-columns:1fr!important;gap:13px;margin-top:34px}
  .form-field.full{grid-column:auto}
  .form-field input,.form-field textarea,.form-field select{font-size:16px;min-height:48px}
  .eat-select,.eat-calendar{width:100%;max-width:100%}
  .eat-select-panel,.eat-calendar-panel{position:fixed!important;left:16px!important;right:16px!important;top:50%!important;bottom:auto!important;width:auto!important;max-width:none!important;max-height:70dvh!important;transform:translateY(-50%)!important}
  .join-orbit,.contact-orbit{opacity:.45}

  /* Legacy project page */
  .project-hero{padding-top:108px;min-height:88svh}
  .project-hero h1{font-size:clamp(4rem,19vw,6.5rem)!important;line-height:.8}
  .project-hero-top{margin-bottom:18vh}
  .project-hero-bottom{grid-template-columns:1fr!important;gap:22px}
  .project-hero-facts{grid-template-columns:1fr 1fr!important;gap:18px}
  .project-statement-block{padding:80px 16px}.project-statement-block h2{font-size:clamp(2.8rem,13vw,4.8rem)}
  .project-media-wide{height:56svh;border-radius:16px}
  .project-split,.project-gallery{width:calc(100vw - 32px)!important;grid-template-columns:1fr!important;gap:24px;padding:72px 0}
  .project-split-media{order:-1}.project-split-copy h2{font-size:clamp(2.8rem,13vw,4.8rem)}
  .project-gallery .project-visual{min-height:330px;border-radius:16px}.project-gallery .project-visual:nth-child(2){margin-top:0!important}
  .next-project{min-height:72svh}.next-project-content h2{font-size:clamp(3.8rem,17vw,6rem)}

  /* CMS project / preview */
  .private-project-preview{padding-top:66px}
  .preview-private-banner{top:66px!important;padding:8px 12px;gap:8px}.preview-private-banner>div{width:100%;margin-left:0;flex-wrap:wrap}
  .preview-project-hero{min-height:76svh}
  .preview-project-hero-copy{padding-bottom:46px}.preview-project-hero-copy h1{font-size:clamp(4rem,18vw,6rem)!important;line-height:.84}
  .preview-project-hero-copy>p{font-size:.82rem;margin-top:18px}
  .case-builder-render{--case-gutter:16px;--case-section-y:58px}
  .case-builder-section{padding:58px 16px!important}
  .case-builder-section.type-media-text{display:flex!important;flex-direction:column!important;gap:26px!important;padding:58px 16px!important}
  .case-title-only{width:100%!important;min-height:280px!important;padding-block:8px!important;place-items:center!important;text-align:center!important}
  .case-title-only h2{max-width:10ch!important;margin:auto!important;text-align:center!important;font-size:clamp(3.5rem,16vw,5.3rem)!important;line-height:.95!important}
  .case-text-only{width:100%!important}.case-text-only .case-rich-copy{font-size:clamp(1.18rem,5.1vw,1.55rem)!important;max-width:none!important}
  .case-media-only,.case-media-only.force-wide-media,.case-media-text-media{width:100%!important;border-radius:14px!important}
  .case-media-text-copy{width:100%!important;max-width:none!important;padding:0!important}.case-media-text-copy h2{font-size:clamp(3rem,14vw,4.6rem)!important;max-width:10ch!important}.case-media-text-copy .case-rich-copy{max-width:none!important;font-size:.98rem!important}
  .case-gallery-grid{width:100%!important}.gallery-group-tall{--gallery-cols:2!important}.gallery-group-square,.gallery-group-semisquare,.gallery-group-wide,.gallery-group-semiwide,.gallery-group-panoramic{--gallery-cols:1!important}.case-gallery-group .case-gallery-item{border-radius:12px!important}
  .media-lightbox{padding:6px!important}.media-lightbox-dialog{width:calc(100vw - 12px)!important;height:calc(100dvh - 12px)!important;border-radius:16px!important}.media-lightbox-toolbar{flex-direction:column;align-items:stretch!important}.media-lightbox-actions{width:100%}.media-lightbox-btn{flex:1 1 auto;padding-inline:8px}

  /* Footer */
  .site-footer{padding:54px 0 28px}
  .footer-grid{grid-template-columns:1fr!important;gap:34px!important}
  .footer-brand,.footer-nav,.footer-meta,.footer-join{grid-column:auto!important}
  .footer-brand p{margin-top:18px}
  .footer-meta{min-height:auto!important;align-items:flex-start!important;text-align:left!important;gap:18px;flex-direction:column!important}
  .footer-meta-links{width:100%;align-items:flex-start!important}
  .footer-team-access{width:100%!important}
  .footer-join{margin-top:0;padding-top:28px;align-items:flex-start!important;flex-direction:column!important;gap:20px}
  .footer-join-cta{width:100%;min-width:0}

  /* Private area */
  .private-shell,.private-topbar-inner{width:calc(100% - 24px)!important}
  .private-login-shell{width:calc(100% - 28px)!important;grid-template-columns:1fr!important;padding:36px 0;gap:32px}
  .private-login-copy h1{font-size:clamp(3.5rem,17vw,5.2rem)!important;line-height:.84}.private-login-copy p{font-size:.82rem}.login-card{padding:20px;border-radius:18px}
  .private-demo-buttons{grid-template-columns:1fr!important}
  .private-topbar{height:64px}.private-topbar-inner{grid-template-columns:1fr auto!important;gap:10px}.private-topnav{display:none!important}.private-user-copy{display:none!important}.private-brand{font-size:1.05rem}.private-avatar,.private-logout{width:34px;height:34px}
  .private-main{padding:38px 0 74px}
  .private-page-head{align-items:flex-start!important;flex-direction:column!important;gap:20px;margin-bottom:32px}.private-page-head>.private-action{width:100%}
  .private-page-title h1{font-size:clamp(3.3rem,16vw,5rem)!important;line-height:.86}.private-page-title p{font-size:.74rem;margin-top:14px}
  .private-status-strip,.private-status-strip.private-status-strip-5{grid-template-columns:1fr 1fr!important;gap:8px}.private-stat{min-height:98px;padding:14px;border-radius:14px}.private-stat strong{font-size:2.45rem}
  .private-section{margin-top:30px}.private-section-head{align-items:flex-start;flex-direction:column;gap:10px}
  .private-grid-2{grid-template-columns:1fr!important;gap:16px}.private-panel{padding:18px;border-radius:16px}.private-panel-title{font-size:1.7rem}
  .private-field-grid,.private-categories{grid-template-columns:1fr!important}.private-field input,.private-field textarea,.private-field select{font-size:16px}
  .private-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}.private-table{min-width:720px}
  .review-meta{grid-template-columns:1fr!important}.review-hero{min-height:360px;padding:22px}.review-hero h2{font-size:clamp(3.5rem,16vw,5rem)}.review-content{padding:22px}.review-decision{position:relative!important;top:auto!important;padding:18px}.review-decision-actions{grid-template-columns:1fr!important}
  .editor-builder-shell{grid-template-columns:1fr!important}.section-palette{position:relative!important;top:auto!important}.section-palette-grid{grid-template-columns:1fr!important}.project-design-picker{grid-template-columns:1fr!important}.project-design-option{grid-template-columns:82px minmax(0,1fr)!important}
  .builder-section-card{border-radius:14px}.builder-section-head{align-items:flex-start!important}.builder-section-actions{flex-wrap:wrap;justify-content:flex-end}.gallery-file-row{grid-template-columns:28px minmax(0,1fr) auto!important;gap:7px}.gallery-aspect-badge{grid-column:2}.gallery-file-actions{grid-column:3;grid-row:1/3}
  .crop-control-grid{grid-template-columns:1fr!important}.crop-editor-stage{border-radius:12px!important}
  .private-editor-actions{position:relative!important;bottom:auto!important;flex-direction:column!important}.private-editor-actions .private-action{width:100%}
  .private-confirm-actions{grid-template-columns:1fr!important}.private-confirm-card{padding:22px;border-radius:18px}.private-confirm-card h2{font-size:2.5rem}
}


/* ================================================================
   V34 — public performance states
   ================================================================ */
body.project-resolving .project-hero-content{opacity:0!important;pointer-events:none}
body.project-resolving .project-hero-bg>*{opacity:0!important}
body.project-resolving .project-hero{position:relative;overflow:hidden;background:#041326}
body.project-resolving .project-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 25%,rgba(0,201,255,.09) 42%,rgba(255,255,255,.11) 50%,rgba(0,201,255,.09) 58%,transparent 75%);background-size:220% 100%;animation:eatProjectSkeleton 1.15s linear infinite}
@keyframes eatProjectSkeleton{to{background-position:-220% 0}}
.project-hero-content{transition:opacity .28s ease}
.cms-public-cover-media,.cms-cover-img,.cms-cover-video,.cms-public-media{animation:eatMediaFade .34s ease both}
@keyframes eatMediaFade{from{opacity:0}to{opacity:1}}
.form-submit:disabled{opacity:.58;cursor:wait}
.admin-inbox-grid .private-table small{display:block;margin-top:4px;opacity:.55;line-height:1.45}


/* ================================================================
   V36 — Admin inbox detail + no horizontal scrolling
   ================================================================ */
.admin-inbox-grid{align-items:start}
.admin-inbox-grid>section{min-width:0}
.admin-inbox-list{display:grid;gap:12px;min-width:0}
.admin-inbox-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:19px 20px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(2,8,20,.58);transition:border-color .2s ease,background .2s ease,transform .2s ease}
.admin-inbox-card:hover{border-color:rgba(0,201,255,.24);background:rgba(4,20,39,.72);transform:translateY(-1px)}
.admin-inbox-card-main{min-width:0}.admin-inbox-card-main>strong{display:block;margin:5px 0 5px;font-family:var(--font-body);font-size:.82rem;color:#fff}.admin-inbox-card-main p{margin:0;color:rgba(255,255,255,.62);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-inbox-card-main small{display:block;margin-top:7px;color:rgba(255,255,255,.34);font-size:.58rem}.admin-inbox-type{color:var(--cyan);font-size:.5rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.admin-inbox-card-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.private-action.compact{min-height:34px;padding:0 12px;font-size:.52rem}
.admin-inbox-detail-card{width:min(760px,100%);max-height:min(86vh,900px);overflow:auto;padding:32px}.admin-inbox-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.admin-inbox-detail-head .private-logout{flex:0 0 auto}.admin-inbox-detail-card h2{font-size:clamp(2.4rem,6vw,4.6rem);line-height:.88}.admin-inbox-detail-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:26px 0;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.08)}.admin-inbox-detail-meta>div{min-width:0;padding:14px 16px;background:#061226}.admin-inbox-detail-meta span{display:block;margin-bottom:5px;color:rgba(255,255,255,.32);font-size:.49rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.admin-inbox-detail-meta strong,.admin-inbox-detail-meta a{display:block;color:#fff;font-size:.7rem;line-height:1.5;overflow-wrap:anywhere}.admin-inbox-detail-meta a{color:var(--cyan)}.admin-inbox-message{padding:20px;border:1px solid rgba(0,201,255,.16);border-radius:16px;background:rgba(0,201,255,.035)}.admin-inbox-message>span{display:block;margin-bottom:10px;color:var(--cyan);font-size:.5rem;font-weight:900;letter-spacing:.13em}.admin-inbox-message p{margin:0!important;color:rgba(255,255,255,.8)!important;font-size:.82rem!important;line-height:1.7!important;white-space:pre-wrap}.admin-inbox-detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.admin-inbox-detail-actions .private-action{flex:1 1 170px;text-align:center;justify-content:center}
@media(max-width:700px){.admin-inbox-card{grid-template-columns:1fr}.admin-inbox-card-actions{justify-content:flex-start}.admin-inbox-detail-card{padding:22px 18px}.admin-inbox-detail-meta{grid-template-columns:1fr}}

/* ================================================================
   V42 — FINAL RESPONSIVE AUDIT
   Authoritative platform layout layer.
   Desktop: >1180px | Tablet: 768–1180px | Mobile: <=767px
   ================================================================ */

/* Global resilience: no page or component may create accidental horizontal overflow. */
html,body{width:100%;max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
:where(.page-main,.private-main,.private-project-preview,.site-footer,.mobile-menu){max-width:100vw}
:where(.shell,.private-shell,.private-topbar-inner,.private-login-shell){min-width:0}
:where(img,video,svg,canvas){max-width:100%}
:where(h1,h2,h3,p,strong,span,a,button,label,small){min-width:0}
:where(.display-title,.hero-copy h1,.home-work-cover h3,.service-chapter-copy h2,.studio-story-copy h3,.contact-copy h1,.join-copy h1,.project-hero h1,.case-title-only h2,.case-media-text-copy h2,.private-page-title h1,.private-login-copy h1){max-width:100%;text-wrap:balance}
:where(.page-copy,.hero-intro,.service-chapter-copy p,.studio-story-copy p,.contact-copy p,.join-copy p,.case-rich-copy,.private-page-title p,.admin-inbox-message p){overflow-wrap:anywhere}
:where(.private-field input,.private-field textarea,.builder-field input,.builder-field textarea,.form-field input,.form-field textarea,.inline-field){max-width:100%}
.mobile-menu{height:100dvh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(22px,env(safe-area-inset-bottom))}

/* Prevent media/content containers from visually escaping their allocated column. */
.project-visual,.service-art,.studio-story-media,.studio-join-media,.case-media-only,.case-media-text-media,.case-gallery-item,.work-preview,.home-work-cover{max-width:100%}
.case-media-text-copy,.service-chapter-copy,.studio-story-copy,.contact-copy,.join-copy{min-width:0}

/* ---------------------------- TABLET ---------------------------- */
@media (max-width:1180px) and (min-width:768px){
  :root{--shell:min(calc(100vw - 56px),1040px)}

  /* Header/navigation becomes a deliberate tablet menu. */
  .site-header{height:76px;padding-inline:28px}
  .desktop-nav,.header-cta{display:none!important}
  .menu-button{display:block!important}
  .mobile-menu{padding:108px 34px 34px}

  /* General two-column content collapses before it gets cramped. */
  .hero-main,.work-hero-grid,.services-page-intro,.service-chapter-grid,.studio-hero-grid,.studio-visual-head,.studio-story-row,.studio-story-row.reverse,.constellation-grid,.process-head,.lab-hero-grid,.contact-grid,.join-grid,.project-hero-bottom,.project-split,.project-gallery,.editor-builder-shell,.private-grid-2{grid-template-columns:1fr!important}

  /* Home */
  .hero-main{padding-block:70px 30px}
  .dial-stage{width:100%;max-width:760px;margin-inline:auto}
  .home-work-stack{width:calc(100vw - 36px)!important;max-width:1080px}
  .home-work-scene{height:min(66vh,680px);min-height:480px}
  .home-work-cover-content{grid-template-columns:minmax(0,1.25fr) minmax(180px,.55fr)!important;gap:32px}
  .home-work-cover h3{font-size:clamp(3.5rem,9vw,6.5rem)}
  .services-grid,.studio-grid{grid-template-columns:1fr!important}
  .services-title{position:relative!important;top:auto!important}

  /* Work */
  .work-browser-grid{grid-template-columns:1fr!important}
  .work-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
  .work-preview-wrap{position:relative!important;top:auto!important}
  .work-preview{height:min(62vw,650px)!important;min-height:450px}

  /* Services */
  .service-rail{display:none!important}
  .service-chapter{padding-block:88px!important;min-height:auto!important}
  .service-art{width:100%;height:min(62vw,610px);min-height:470px}
  .service-project-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}

  /* Studio */
  .studio-story-row.reverse .studio-story-media{order:0!important}
  .studio-story-media{height:min(60vw,580px);min-height:420px}
  .tool-constellation{width:min(86vw,680px);min-height:580px}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .studio-join-grid{grid-template-columns:1fr!important}
  .studio-join-media{height:min(66vw,640px);min-height:500px}

  /* Lab: all cards remain draggable, but with a safe board width. */
  .lab-board-inner{width:calc(100vw - 40px)!important;max-width:1080px;height:1240px!important;border-radius:26px}
  .lab-card{width:min(var(--w),44vw)!important;max-width:470px}

  /* Forms */
  .idea-form,.join-form{width:100%;max-width:820px;margin-inline:auto;padding:38px}
  .form-details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eat-select-panel,.eat-calendar-panel{max-width:min(680px,calc(100vw - 70px))}

  /* Project pages */
  .project-hero{padding-top:126px;min-height:88svh}
  .project-hero-top{margin-bottom:16vh}
  .project-split-media{order:-1}
  .project-gallery .project-visual:nth-child(2){margin-top:0!important}
  .case-builder-section{padding-inline:32px!important}
  .case-builder-section.type-media-text{display:flex!important;flex-direction:column!important;gap:36px!important}
  .case-media-text-copy,.case-media-text-media{align-self:center!important;width:min(100%,900px)!important;max-width:900px!important}
  .case-media-text-copy{max-width:760px!important}
  .case-media-only,.case-media-only.force-wide-media{width:min(100%,1040px)!important}

  /* Private/admin */
  .private-shell,.private-topbar-inner{width:min(calc(100% - 48px),1040px)}
  .private-login-shell{width:min(calc(100% - 48px),820px);grid-template-columns:1fr!important}
  .private-topnav{display:none!important}
  .private-status-strip,.private-status-strip.private-status-strip-5{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .review-decision,.section-palette{position:relative!important;top:auto!important}
  .private-editor-actions{max-width:100%;flex-wrap:wrap}
}

/* ---------------------------- MOBILE ---------------------------- */
@media (max-width:767px){
  :root{--shell:calc(100vw - 32px)}
  html{scroll-padding-top:66px}
  body{overflow-x:hidden}
  .shell{width:var(--shell)!important;max-width:var(--shell)!important;margin-inline:auto}

  /* Header and menu */
  .site-header{height:66px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));grid-template-columns:1fr auto}
  .desktop-nav,.header-cta{display:none!important}
  .menu-button{display:block!important;width:40px;height:40px}
  .mobile-menu{padding:96px max(20px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));gap:22px}
  .mobile-menu a:not(.mobile-menu-cta){font-size:clamp(2.65rem,13vw,4.4rem);line-height:.9;letter-spacing:-.035em}
  .mobile-menu-cta{width:100%;min-height:54px}

  /* Shared type and rhythm */
  .display-title,.hero-copy h1,.contact-copy h1,.join-copy h1{font-size:clamp(3.45rem,16.5vw,5.55rem)!important;line-height:.88!important;letter-spacing:-.035em!important}
  .page-copy,.hero-intro,.contact-copy p,.join-copy>p{font-size:.9rem;line-height:1.65}
  .work-page-hero,.services-page-hero,.studio-page-hero,.lab-hero{padding:108px 0 62px!important;min-height:auto!important}
  .page-kicker,.eyebrow{font-size:.56rem;letter-spacing:.13em}

  /* Home */
  .hero{padding-top:66px;min-height:auto}
  .hero-main{grid-template-columns:1fr!important;min-height:auto;padding:54px 0 22px;gap:18px}
  .hero-intro{margin-top:18px}
  .dial-stage{min-height:auto;width:100%;margin:10px 0 26px;display:flex;flex-direction:column;align-items:center;gap:22px}
  .eat-dial{--dial-size:min(78vw,320px)}
  .dial-copy{position:relative!important;inset:auto!important;width:100%!important;max-width:340px;text-align:center;order:2}
  .dial-copy a{justify-content:center}
  .mode-selector{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px}
  .mode-button{min-height:82px;padding:11px}

  /* Home Work stack: no sticky cards on phones. */
  .home-work-cinematic{padding:80px 0 72px}
  .home-work-cinematic-head{grid-template-columns:1fr!important;gap:18px;margin-bottom:42px}
  .home-work-cinematic-head h2{font-size:clamp(3.25rem,14.5vw,5rem)!important;line-height:.9}
  .home-work-stack{width:calc(100vw - 24px)!important}
  .home-work-scene{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;margin-bottom:22px!important}
  .home-work-cover{min-height:70svh;height:auto;aspect-ratio:4/5;border-radius:18px}
  .home-work-cover-top{left:18px;right:18px;top:18px;font-size:.52rem}
  .home-work-cover-content{left:18px;right:18px;bottom:22px;grid-template-columns:1fr!important;gap:14px}
  .home-work-cover h3{font-size:clamp(3rem,14.5vw,5.2rem)!important;line-height:.88!important;max-width:9ch}
  .home-work-cover-side p{max-width:34ch;margin-bottom:10px;font-size:.78rem}

  /* Home Services/Studio */
  .services-section,.studio-section{padding-block:80px}
  .services-grid,.studio-grid{grid-template-columns:1fr!important;gap:34px}
  .services-title{position:relative!important;top:auto!important}
  .services-title h2,.studio-grid h2{font-size:clamp(3.35rem,14.5vw,5.25rem)!important;line-height:.9}
  .service-row{grid-template-columns:34px minmax(0,1fr) 22px!important;gap:9px 12px;min-height:102px;padding:12px 0}
  .service-row strong{font-size:clamp(1.45rem,7.5vw,2.25rem);line-height:1.05}
  .service-row em{grid-column:2/-1;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:.68rem;padding-right:6px}

  /* Work */
  .work-hero-grid{grid-template-columns:1fr!important;gap:24px}
  .work-filter-bar{top:66px}
  .work-filter-inner{display:block;min-height:auto;padding:11px 0}
  .work-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;gap:7px;padding-bottom:6px;scrollbar-width:none}
  .work-filters::-webkit-scrollbar{display:none}
  .work-filters button{flex:0 0 auto;scroll-snap-align:start}
  .view-switch,.work-preview-wrap{display:none!important}
  .work-browser{padding:44px 0 78px}
  .work-browser-grid,.work-index{display:block!important}
  .work-index-item{grid-template-columns:30px minmax(0,1fr)!important;gap:8px 10px;min-height:80px;padding:10px 0!important}
  .work-index-item strong{font-size:clamp(1.35rem,7.5vw,2rem);line-height:1.05;overflow-wrap:anywhere}
  .work-index-item small{grid-column:2;font-size:.5rem;white-space:normal}
  .work-grid-view{grid-template-columns:1fr!important;gap:14px}

  /* Services */
  .service-rail{display:none!important}
  .service-chapter{padding:68px 0!important;min-height:auto!important}
  .service-chapter-grid{grid-template-columns:1fr!important;gap:28px;padding-right:0!important}
  .service-chapter-copy h2{font-size:clamp(3.05rem,14vw,5rem)!important;line-height:.9}
  .service-work-link{width:100%;max-width:330px;min-width:0}
  .service-art{width:100%;min-height:0!important;height:auto!important;aspect-ratio:4/3;border-radius:16px}
  .service-project-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .service-project-thumb .project-visual{height:auto!important;aspect-ratio:16/10}

  /* Studio: turn the constellation into a rational mobile tool matrix. */
  .studio-visual-head,.studio-story-row,.studio-story-row.reverse,.constellation-grid,.process-head,.studio-join-grid{grid-template-columns:1fr!important}
  .studio-story-row.reverse .studio-story-media{order:0!important}
  .studio-story-media{width:100%;height:auto!important;min-height:0!important;aspect-ratio:4/3;border-radius:16px}
  .tool-constellation{width:100%!important;min-height:0!important;aspect-ratio:auto!important;border-radius:22px!important;padding:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:linear-gradient(145deg,rgba(4,20,45,.82),rgba(2,8,20,.9))}
  .tool-core{position:relative!important;left:auto!important;top:auto!important;transform:none!important;grid-column:1/-1;width:90px;margin:4px auto 12px;box-shadow:0 0 30px rgba(0,201,255,.18)}
  .tool-node{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:100%;min-height:40px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.48rem!important;padding:8px!important;border-radius:12px}
  .tool-node::after{display:none!important}
  .tool-node:hover{transform:none!important}
  .process-grid{grid-template-columns:1fr!important}
  .process-card{min-height:0!important;padding:26px 0!important;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important}
  .studio-join-media{height:auto!important;min-height:0!important;aspect-ratio:4/5;border-radius:16px}
  .studio-join-cta{width:100%;max-width:360px}

  /* Lab */
  .lab-hero-grid{grid-template-columns:1fr!important;gap:24px}
  .lab-board{padding:30px 0 76px}
  .lab-board-label{flex-direction:column!important;align-items:flex-start!important;gap:6px}
  .lab-board-inner{width:calc(100vw - 24px)!important;height:1580px!important;min-height:1580px!important;border-radius:18px;overflow:hidden!important}
  .lab-card{width:76%!important;max-width:320px!important;min-width:0!important}
  .lab-card-art{min-height:0!important;aspect-ratio:4/3}
  .lab-card-info{padding:13px;gap:10px}.lab-card-info strong{font-size:.8rem}.lab-card-info span{font-size:.5rem}
  .lab-card:nth-of-type(1){--mobile-left:3%;--mobile-top:2%}.lab-card:nth-of-type(2){--mobile-left:21%;--mobile-top:18%}.lab-card:nth-of-type(3){--mobile-left:4%;--mobile-top:34%}.lab-card:nth-of-type(4){--mobile-left:20%;--mobile-top:50%}.lab-card:nth-of-type(5){--mobile-left:3%;--mobile-top:66%}.lab-card:nth-of-type(6){--mobile-left:20%;--mobile-top:82%}

  /* Contact + Join */
  .contact-hero,.join-hero{min-height:auto;padding:104px 0 68px}
  .contact-grid,.join-grid{grid-template-columns:1fr!important;gap:34px}
  .idea-form,.join-form{width:100%;max-width:100%;padding:22px 16px!important;border-radius:16px;overflow:visible}
  .form-sentence,.join-sentence{font-size:clamp(1.28rem,6vw,1.6rem)!important;line-height:1.6!important;letter-spacing:-.015em!important}
  .inline-field{display:inline-block;min-width:92px;max-width:100%;font-size:inherit}
  .form-details{grid-template-columns:1fr!important;gap:12px;margin-top:30px}
  .form-field.full{grid-column:auto}
  .form-field input,.form-field textarea,.form-field select{width:100%;font-size:16px;min-height:48px}
  .form-submit{width:100%;min-height:58px}
  .eat-select-panel,.eat-calendar-panel{position:fixed!important;left:12px!important;right:12px!important;top:50%!important;bottom:auto!important;width:auto!important;max-width:none!important;max-height:74dvh!important;transform:translateY(-50%)!important;border-radius:18px!important;overflow:auto}

  /* Legacy project */
  .project-hero{padding-top:104px;min-height:auto!important;padding-bottom:52px}
  .project-hero-top{margin-bottom:18vh;gap:12px}
  .project-hero h1{font-size:clamp(3.8rem,17.5vw,6rem)!important;line-height:.86!important;letter-spacing:-.045em!important;overflow-wrap:anywhere}
  .project-hero-bottom{grid-template-columns:1fr!important;gap:22px}
  .project-hero-facts{grid-template-columns:1fr 1fr!important;gap:14px}
  .project-statement-block{padding:72px 16px}.project-statement-block h2{font-size:clamp(2.65rem,12vw,4.5rem);line-height:.92}
  .project-media-wide{height:auto!important;min-height:0!important;aspect-ratio:16/9;border-radius:14px}
  .project-split,.project-gallery{width:calc(100vw - 32px)!important;grid-template-columns:1fr!important;gap:22px;padding:66px 0}
  .project-split-media{order:-1}
  .project-gallery .project-visual{height:auto!important;min-height:0!important;aspect-ratio:4/3;border-radius:14px}.project-gallery .project-visual:nth-child(2){margin-top:0!important}

  /* CMS project / preview */
  .private-project-preview{padding-top:66px}
  .preview-private-banner{top:66px!important;padding:8px 12px;flex-wrap:wrap;gap:8px}.preview-private-banner>div{width:100%;margin-left:0;flex-wrap:wrap}
  .preview-project-hero{min-height:68svh}
  .preview-project-hero-copy h1{font-size:clamp(3.7rem,16vw,5.6rem)!important;line-height:.9}
  .case-builder-render{--case-gutter:16px;--case-section-y:54px}
  .case-builder-section{padding:54px 16px!important;min-height:0!important}
  .case-builder-section.type-media-text{display:flex!important;flex-direction:column!important;gap:24px!important}
  .case-title-only{width:100%!important;min-height:250px!important;padding-block:8px!important;text-align:center!important;place-items:center!important}
  .case-title-only h2{max-width:10ch!important;font-size:clamp(3.25rem,14.5vw,5rem)!important;line-height:.98!important;overflow-wrap:normal!important;word-break:normal!important}
  .case-text-only{width:100%!important;padding-inline:0!important}.case-text-only .case-rich-copy{font-size:clamp(1.08rem,4.8vw,1.45rem)!important;line-height:1.6;max-width:none!important}
  .case-media-only,.case-media-only.force-wide-media,.case-media-text-media{width:100%!important;max-width:100%!important;border-radius:14px!important}
  .case-media-text-copy{width:100%!important;max-width:none!important;padding:0!important}.case-media-text-copy h2{font-size:clamp(2.9rem,13vw,4.35rem)!important;line-height:.95!important;max-width:10ch!important}.case-media-text-copy .case-rich-copy{font-size:.96rem!important;line-height:1.65;max-width:none!important}
  .case-gallery-grid{width:100%!important}.gallery-group-tall{--gallery-cols:2!important}.gallery-group-square,.gallery-group-semisquare,.gallery-group-wide,.gallery-group-semiwide,.gallery-group-panoramic{--gallery-cols:1!important}.case-gallery-group{gap:10px!important}.case-gallery-group .case-gallery-item{border-radius:12px!important}

  /* Fullscreen media */
  .media-lightbox{padding:6px!important}
  .media-lightbox-dialog{width:calc(100vw - 12px)!important;height:calc(100dvh - 12px)!important;max-height:none!important;border-radius:14px!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;overflow:hidden!important}
  .media-lightbox-toolbar{min-width:0;flex-direction:column;align-items:stretch!important;gap:8px}
  .media-lightbox-toolbar>div{min-width:0}.media-lightbox-toolbar strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .media-lightbox-actions{width:100%;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .media-lightbox-btn{min-width:0!important;padding-inline:6px!important}
  .media-lightbox-stage{min-height:0!important;overflow:hidden!important}

  /* Footer */
  .footer-grid{grid-template-columns:1fr!important;gap:30px!important}
  .footer-brand,.footer-nav,.footer-meta,.footer-join{grid-column:auto!important}
  .footer-meta{min-height:auto!important;align-items:flex-start!important;text-align:left!important;gap:18px;flex-direction:column!important}
  .footer-meta-links{width:100%;align-items:flex-start!important}
  .footer-team-access,.footer-join-cta{width:100%!important;min-width:0!important}
  .footer-join{align-items:flex-start!important;flex-direction:column!important;gap:18px}

  /* Private area — designed as mobile UI, not a compressed desktop table. */
  .private-shell,.private-topbar-inner{width:calc(100% - 24px)!important}
  .private-login-shell{width:calc(100% - 28px)!important;grid-template-columns:1fr!important;padding:34px 0;gap:30px}
  .private-topbar{height:64px}.private-topbar-inner{grid-template-columns:1fr auto!important;gap:10px}.private-topnav{display:none!important}.private-user-copy{display:none!important}
  .private-main{padding:34px 0 70px}
  .private-page-head{flex-direction:column!important;align-items:flex-start!important;gap:18px;margin-bottom:28px}.private-page-head>.private-action{width:100%}
  .private-page-title h1{font-size:clamp(3.15rem,14.5vw,4.8rem)!important;line-height:.9}
  .private-status-strip,.private-status-strip.private-status-strip-5{grid-template-columns:1fr 1fr!important;gap:8px}.private-stat{min-height:92px;padding:13px;border-radius:13px}.private-stat strong{font-size:2.25rem}
  .private-grid-2,.private-field-grid,.private-categories,.editor-builder-shell{grid-template-columns:1fr!important}
  .private-panel{padding:17px;border-radius:14px}
  .private-field input,.private-field textarea,.private-field select,.builder-field input,.builder-field textarea{font-size:16px}

  /* Responsive table-to-card transformation; JS injects data-label attributes. */
  .private-table-wrap{overflow:visible!important;border:0!important;background:transparent!important;border-radius:0!important}
  .private-table{display:block!important;width:100%!important;min-width:0!important;border-collapse:separate!important}
  .private-table thead{display:none!important}
  .private-table tbody{display:grid!important;gap:10px!important;width:100%}
  .private-table tr{display:block!important;width:100%;padding:14px 15px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(2,8,20,.68)}
  .private-table td{display:grid!important;grid-template-columns:minmax(88px,34%) minmax(0,1fr);gap:10px;width:100%;padding:7px 0!important;border:0!important;font-size:.7rem;overflow-wrap:anywhere}
  .private-table td::before{content:attr(data-label);color:rgba(255,255,255,.34);font-size:.48rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
  .private-table td[colspan]{display:block!important;padding:4px 0!important}.private-table td[colspan]::before{display:none}
  .private-table td:empty{display:none!important}
  .private-table td a,.private-table td button{max-width:100%;overflow-wrap:anywhere}

  .review-meta{grid-template-columns:1fr!important}.review-hero{min-height:320px;padding:20px}.review-hero h2{font-size:clamp(3.2rem,14vw,4.7rem)}.review-content{padding:20px}.review-decision{position:relative!important;top:auto!important;padding:17px}.review-decision-actions{grid-template-columns:1fr!important}
  .section-palette{position:relative!important;top:auto!important}.section-palette-grid,.project-design-picker{grid-template-columns:1fr!important}.project-design-option{grid-template-columns:78px minmax(0,1fr)!important}
  .builder-section-head{align-items:flex-start!important;gap:10px}.builder-section-actions{flex-wrap:wrap;justify-content:flex-end}
  .gallery-file-row{grid-template-columns:28px minmax(0,1fr) auto!important;gap:7px}.gallery-aspect-badge{grid-column:2}.gallery-file-actions{grid-column:3;grid-row:1/3}
  .crop-control-grid{grid-template-columns:1fr!important}.crop-editor-stage{border-radius:12px!important}
  .private-editor-actions{position:relative!important;bottom:auto!important;flex-direction:column!important}.private-editor-actions .private-action{width:100%}
  .private-confirm-actions{grid-template-columns:1fr!important}.private-confirm-card{padding:20px;border-radius:16px}.private-confirm-card h2{font-size:2.35rem}
  .admin-inbox-card{grid-template-columns:1fr!important}.admin-inbox-card-actions{justify-content:flex-start!important}.admin-inbox-detail-card{padding:20px 16px!important}.admin-inbox-detail-meta{grid-template-columns:1fr!important}
}

/* Extra-small phones: preserve whitespace without clipping display type. */
@media (max-width:380px){
  :root{--shell:calc(100vw - 24px)}
  .display-title,.hero-copy h1,.contact-copy h1,.join-copy h1{font-size:clamp(3.05rem,16vw,4.7rem)!important}
  .home-work-cover h3{font-size:clamp(2.7rem,14vw,4.4rem)!important}
  .mode-button{min-height:76px;padding:9px}
  .tool-constellation{grid-template-columns:1fr}
  .tool-core{grid-column:auto}
  .project-hero-facts{grid-template-columns:1fr!important}
  .private-status-strip,.private-status-strip.private-status-strip-5{grid-template-columns:1fr!important}
  .media-lightbox-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}