@font-face {
  font-family: "Aldrich";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/aldrich-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --black: #030405;
  --white: #edf1ee;
  --muted: rgba(237, 241, 238, .66);
  --dim: rgba(237, 241, 238, .38);
  --green: #9cff00;
  --green-soft: rgba(156, 255, 0, .68);
  --line: rgba(237, 241, 238, .18);
  --panel: rgba(3, 5, 6, .42);
  --body-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --head-font: "Aldrich", Inter, ui-sans-serif, system-ui, sans-serif;
  font-family: var(--body-font);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--white);
  background: var(--black);
  overflow-x: hidden;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { border-radius: 0; }
.mobile-menu-toggle { display: none; }

.site-shell { position: relative; min-height: 210vh; isolation: isolate; }
.bg-video {
  position: fixed;
  inset: 0;
  z-index: -5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at 50.8% 78.5%, rgba(156, 255, 0, .20), transparent 8.5%),
    radial-gradient(circle at 50% 7%, rgba(232, 244, 241, .19), transparent 24%),
    linear-gradient(90deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.09) 44%, rgba(0,0,0,.66) 100%),
    linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.08) 54%, rgba(0,0,0,.62) 100%);
}
.noise, .scanlines { position: fixed; inset: 0; z-index: -3; pointer-events: none; }
.noise {
  opacity: .11;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 20%, rgba(156,255,0,.28) 0 1px, transparent 1px);
  background-size: 173px 211px, 251px 193px, 431px 359px;
  mix-blend-mode: screen;
}
.scanlines { opacity: .055; background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(255,255,255,.08) 4px 5px); }

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 35;
  height: 150px;
  pointer-events: none;
}
.topbar a, .topbar .signal-status { pointer-events: auto; }

.brand-mark {
  position: absolute;
  left: clamp(30px, 3.45vw, 66px);
  top: clamp(28px, 3.6vh, 45px);
  width: clamp(66px, 5.5vw, 100px);
  height: clamp(78px, 6.7vw, 126px);
  display: grid;
  place-items: center;
  opacity: .95;
  filter: drop-shadow(0 20px 32px rgba(0,0,0,.64));
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.brand-name {
  position: absolute;
  left: clamp(150px, 11.15vw, 236px);
  top: clamp(47px, 6.95vh, 82px);
  display: block;
  font-family: var(--head-font);
  text-transform: uppercase;
  letter-spacing: .54em;
  font-size: clamp(16px, 1.45vw, 28px);
  line-height: 1;
  color: rgba(237,241,238,.78);
  text-shadow: 0 0 20px rgba(255,255,255,.08);
}
.brand-word { padding: 0 .08em; }
.brand-bracket { color: var(--green); letter-spacing: 0; text-shadow: 0 0 14px rgba(156,255,0,.35); }
.brand-sign {
  position: absolute;
  left: clamp(40px, 3.05vw, 62px);
  top: clamp(25px, 4.1vh, 44px);
  display: block;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(18px, 1.85vw, 34px);
  text-transform: none;
  letter-spacing: .04em;
  color: var(--green-soft);
  white-space: nowrap;
  filter: drop-shadow(0 0 11px rgba(156,255,0,.22));
}

.nav {
  position: absolute;
  top: clamp(55px, 7.75vh, 90px);
  left: 50.2%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(46px, 5.6vw, 98px);
  align-items: center;
  font-family: var(--head-font);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: clamp(10px, .73vw, 14px);
  color: rgba(237,241,238,.69);
}
.nav a { position: relative; transition: color .25s ease, text-shadow .25s ease; }
.nav a:not(.is-active)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(156,255,0,.46);
  transform: translateX(-50%);
}
.nav a.is-active { color: rgba(237,241,238,.95); padding: 0 3px; }
.nav a.is-active::before,
.nav a.is-active::after {
  position: absolute;
  top: 50%;
  color: var(--green);
  transform: translateY(-50%);
  text-shadow: 0 0 12px rgba(156,255,0,.45);
}
.nav a.is-active::before { content: "["; left: -27px; }
.nav a.is-active::after { content: "]"; right: -27px; }
.nav a:hover { color: var(--green); text-shadow: 0 0 20px rgba(156,255,0,.22); }

.signal-status {
  position: absolute;
  right: clamp(43px, 4.8vw, 92px);
  top: clamp(53px, 7.25vh, 88px);
  min-width: 155px;
  display: grid;
  grid-template-columns: 1fr 13px;
  column-gap: 12px;
  align-items: start;
  justify-items: end;
  font-family: var(--head-font);
  text-transform: uppercase;
  letter-spacing: .22em;
}
.signal-title { grid-column: 1; color: rgba(237,241,238,.45); font-size: clamp(9px, .62vw, 12px); line-height: 1.2; }
.signal-value { grid-column: 1; color: var(--green); font-size: clamp(12px, .84vw, 16px); line-height: 1.7; text-shadow: 0 0 18px rgba(156,255,0,.26); }
.signal-dot { grid-column: 2; grid-row: 1 / 3; width: 10px; height: 10px; margin-top: 1px; border-radius: 50%; background: var(--green); box-shadow: 0 0 18px rgba(156,255,0,.65); }

.segment { position: relative; }
.hero { min-height: 100vh; overflow: hidden; }
.hero-copy {
  position: absolute;
  z-index: 12;
  left: clamp(45px, 4.18vw, 82px);
  top: clamp(250px, 31.5vh, 340px);
  width: min(34vw, 620px);
}
.eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 clamp(18px, 2.2vh, 25px) clamp(18px, 1.25vw, 26px);
  color: rgba(237,241,238,.64);
  font-family: var(--head-font);
  font-size: clamp(10px, .82vw, 16px);
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
}
.eyebrow::before, .eyebrow::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--green);
  opacity: .75;
}
.eyebrow::before { left: -20px; top: -12px; border-left: 1px solid; border-top: 1px solid; }
.eyebrow::after { right: -18px; bottom: -12px; border-right: 1px solid; border-bottom: 1px solid; }

h1 {
  margin: 0;
  font-family: var(--head-font);
  font-size: clamp(50px, 4.18vw, 84px);
  line-height: 1.16;
  letter-spacing: .055em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(238,243,241,.88);
  text-shadow: 0 0 12px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.55);
}
h1 span { display: block; white-space: nowrap; }
h1 strong { color: var(--green); font-weight: 400; text-shadow: 0 0 24px rgba(156,255,0,.34); }

.hero-subgrid {
  position: absolute;
  top: calc(100% + clamp(42px, 5.4vh, 78px));
  left: clamp(3px, .25vw, 6px);
  display: grid;
  grid-template-columns: 42px auto;
  gap: 16px;
  align-items: center;
}
.hero-subgrid p {
  margin: 0;
  color: rgba(237,241,238,.58);
  font-family: var(--head-font);
  font-size: clamp(10px, .75vw, 14px);
  line-height: 1.9;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.target-ring { position: relative; width: 24px; height: 24px; border: 1px solid rgba(237,241,238,.22); border-radius: 50%; }
.target-ring::before, .target-ring::after { content: ""; position: absolute; background: rgba(237,241,238,.22); }
.target-ring::before { left: -18px; right: -18px; top: 50%; height: 1px; }
.target-ring::after { top: -18px; bottom: -18px; left: 50%; width: 1px; }

.logo-stage {
  position: fixed;
  z-index: 14;
  left: 51.2%;
  top: 47.8%;
  transform: translate(-50%, -50%);
  width: clamp(480px, 33.0vw, 640px);
  display: grid;
  place-items: center;
  pointer-events: none;
  will-change: left, top, width, opacity;
}
#logoCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1150 / 1500;
  display: block;
  filter: drop-shadow(0 46px 78px rgba(0,0,0,.76));
}
.logo-glow {
  position: absolute;
  left: 55%;
  top: 44%;
  width: clamp(170px, 13vw, 260px);
  height: clamp(170px, 13vw, 260px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(156,255,0,.24), rgba(156,255,0,.07) 32%, transparent 64%);
  mix-blend-mode: screen;
  opacity: .85;
  pointer-events: none;
}

.hero-actions {
  position: absolute;
  z-index: 13;
  right: clamp(46px, 4.95vw, 95px);
  top: clamp(356px, 40.1vh, 450px);
  width: clamp(330px, 22.8vw, 440px);
  display: grid;
  gap: clamp(22px, 2.7vh, 31px);
}
.cta {
  position: relative;
  width: 100%;
  height: clamp(60px, 6.7vh, 76px);
  display: grid;
  grid-template-columns: 54px 1fr 72px;
  align-items: center;
  border: 1px solid rgba(237,241,238,.24);
  background: rgba(3,5,6,.22);
  color: rgba(237,241,238,.76);
  font-family: var(--head-font);
  font-size: clamp(12px, .9vw, 16px);
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.34);
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.cta span:nth-child(2), .cta-project span { justify-self: start; }
.cta i { height: 100%; min-width: 52px; display: grid; place-items: center; border-left: 1px solid rgba(237,241,238,.20); color: rgba(237,241,238,.68); font-style: normal; }
.cta:hover { transform: translateY(-1px); border-color: var(--green); color: var(--green); box-shadow: 0 0 32px rgba(156,255,0,.10), inset 0 0 24px rgba(156,255,0,.035); }
.cta-project { grid-template-columns: 1fr 72px; color: var(--green); border-color: rgba(156,255,0,.62); padding-left: 40px; text-shadow: 0 0 16px rgba(156,255,0,.17); }
.cta-project i { color: var(--green); border-left-color: rgba(156,255,0,.36); }
.play-icon { justify-self: center; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid rgba(237,241,238,.88); filter: drop-shadow(0 0 6px rgba(255,255,255,.20)); }

.location-note {
  position: absolute;
  z-index: 11;
  right: clamp(68px, 6.65vw, 128px);
  top: clamp(615px, 68.4vh, 770px);
  display: flex;
  align-items: center;
  gap: 24px;
  color: rgba(237,241,238,.52);
  font-family: var(--head-font);
  font-size: clamp(10px, .72vw, 14px);
  letter-spacing: .16em;
  line-height: 1.7;
  text-align: right;
  text-transform: uppercase;
}
.location-note p { margin: 0; white-space: nowrap; }
.globe { position: relative; width: clamp(36px, 3.1vw, 56px); height: clamp(36px, 3.1vw, 56px); border: 1px solid rgba(237,241,238,.28); border-radius: 50%; box-shadow: 0 0 18px rgba(156,255,0,.12); }
.globe::before, .globe::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(237,241,238,.22); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; }
.globe::after { inset: 50% auto auto 50%; width: 8px; height: 8px; background: var(--green); border: 0; transform: translate(135%, -50%); box-shadow: 0 0 14px rgba(156,255,0,.75); }

.scroll-note, .est-note { position: absolute; z-index: 12; bottom: clamp(70px, 8.2vh, 96px); color: rgba(237,241,238,.58); font-family: var(--head-font); font-size: clamp(10px, .72vw, 14px); letter-spacing: .18em; text-transform: uppercase; }
.scroll-note { left: clamp(58px, 5.1vw, 98px); }
.scroll-note span, .est-note { position: relative; display: inline-block; }
.scroll-note span::before, .scroll-note span::after, .est-note::before, .est-note::after { content: ""; position: absolute; width: 9px; height: 9px; border-color: var(--green); opacity: .65; }
.scroll-note span::before, .est-note::before { left: -22px; top: -12px; border-left: 1px solid; border-top: 1px solid; }
.scroll-note span::after, .est-note::after { right: -22px; bottom: -12px; border-right: 1px solid; border-bottom: 1px solid; }
.scroll-note i { display: block; width: 3px; height: 3px; margin: 15px 0 0 19px; border-radius: 50%; background: rgba(156,255,0,.85); box-shadow: 0 0 12px rgba(156,255,0,.55); }
.scroll-note i + i { margin-top: 11px; opacity: .55; }
.scroll-note i + i + i { opacity: .28; }
.est-note { right: clamp(62px, 5.7vw, 110px); }
.bottom-progress { position: absolute; z-index: 11; left: 50%; bottom: clamp(54px, 6.1vh, 70px); transform: translateX(-50%); display: flex; gap: 26px; }
.bottom-progress span { width: clamp(42px, 3.0vw, 58px); height: 3px; background: rgba(237,241,238,.28); }
.bottom-progress span:first-child { background: var(--green); box-shadow: 0 0 18px rgba(156,255,0,.65); }

/* FULL SYSTEM PAGE / DESIGN_002A */
.system-dashboard {
  min-height: 1120px;
  padding: clamp(86px, 10vh, 124px) 0 clamp(52px, 8vh, 92px);
  z-index: 5;
}
.system-frame {
  position: relative;
  z-index: 7;
  width: min(78vw, 1420px);
  min-width: 1040px;
  margin: 0 auto;
  border: 1px solid rgba(237,241,238,.18);
  background:
    linear-gradient(180deg, rgba(4,6,7,.40), rgba(4,6,7,.62)),
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 45%, rgba(255,255,255,.018));
  box-shadow: 0 0 0 1px rgba(0,0,0,.50), 0 50px 140px rgba(0,0,0,.46);
  backdrop-filter: blur(4px);
}
.system-frame::before,
.system-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237,241,238,.22), transparent);
  pointer-events: none;
}
.system-frame::before { top: 74px; }
.system-frame::after { bottom: 32px; opacity: .7; }
.frame-corner { position: absolute; width: 12px; height: 12px; border-color: rgba(237,241,238,.32); pointer-events: none; }
.frame-corner.tl { left: -1px; top: -1px; border-left: 1px solid; border-top: 1px solid; }
.frame-corner.tr { right: -1px; top: -1px; border-right: 1px solid; border-top: 1px solid; }
.frame-corner.bl { left: -1px; bottom: -1px; border-left: 1px solid; border-bottom: 1px solid; }
.frame-corner.br { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.system-rail {
  position: fixed;
  z-index: 6;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(237,241,238,.33);
  font-family: var(--head-font);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 10px;
  writing-mode: vertical-rl;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
body.is-system .system-rail { opacity: 1; }
.rail-left { left: clamp(36px, 3.3vw, 64px); }
.rail-right { right: clamp(36px, 3.3vw, 64px); }
.system-rail strong { color: var(--green); font-weight: 400; }
.system-rail i { width: 4px; height: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(156,255,0,.55); }

.system-top {
  position: relative;
  min-height: 365px;
  display: grid;
  grid-template-columns: 33% 39% 28%;
  border-bottom: 1px solid rgba(237,241,238,.14);
}
.system-hero-copy {
  padding: 96px 40px 34px 70px;
  position: relative;
  z-index: 4;
}
.system-eyebrow {
  margin: 0 0 18px;
  color: var(--green);
  font-family: var(--head-font);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.system-hero-copy h2 {
  margin: 0;
  font-family: var(--head-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: clamp(42px, 3.35vw, 61px);
  line-height: .98;
  color: rgba(237,241,238,.86);
}
.system-hero-copy h2 strong { color: var(--green); font-weight: 400; text-shadow: 0 0 18px rgba(156,255,0,.32); }
.system-spec { margin: 16px 0 20px; color: rgba(237,241,238,.62); font-size: 14px; letter-spacing: .08em; }
.system-actions { display: flex; gap: 18px; }
.mini-action {
  height: 42px;
  min-width: 172px;
  border: 1px solid rgba(237,241,238,.18);
  background: rgba(3,5,6,.32);
  color: rgba(237,241,238,.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  font-family: var(--head-font);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.mini-action:hover { border-color: var(--green); color: var(--green); }
.mini-action-play span { width: 0; height: 0; border-left: 10px solid var(--green); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.mini-action i { font-style: normal; color: var(--green); }
.availability { margin: 16px 0 0; color: rgba(237,241,238,.40); font-family: var(--head-font); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.availability i { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(156,255,0,.54); }
.system-logo-slot { position: relative; min-height: 365px; }
.system-logo-slot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 430px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(237,241,238,.07);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(237,241,238,.035);
}
.system-logo-slot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 100%;
  transform: translate(-50%, -50%);
  background: rgba(237,241,238,.12);
}
.core-note {
  position: relative;
  z-index: 3;
  padding: 96px 55px 30px 42px;
  border-left: 1px solid rgba(237,241,238,.09);
  font-family: var(--head-font);
  text-transform: uppercase;
}
.core-title { margin: 0; color: rgba(237,241,238,.56); font-size: 12px; letter-spacing: .16em; }
.core-subtitle { margin: 6px 0 20px; color: rgba(237,241,238,.34); font-size: 9px; letter-spacing: .18em; }
.core-diagram { position: relative; width: 126px; height: 78px; margin: 0 0 24px; border-left: 1px solid rgba(237,241,238,.10); border-right: 1px solid rgba(237,241,238,.10); }
.core-diagram::before,
.core-diagram::after { content: ""; position: absolute; inset: 8px 28px; border: 1px solid rgba(237,241,238,.08); transform: skewX(-24deg); }
.core-diagram span { position: absolute; left: 49%; top: 50%; width: 34px; height: 34px; border: 1px solid rgba(237,241,238,.16); border-radius: 50%; transform: translate(-50%, -50%); }
.core-diagram i { position: absolute; right: 33px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 18px rgba(156,255,0,.70); transform: translateY(-50%); }
.core-note ul { list-style: none; padding: 0; margin: 0; color: rgba(237,241,238,.46); font-size: 9px; letter-spacing: .14em; line-height: 2.2; }
.core-note li::before { content: "—"; color: var(--green); margin-right: 10px; }
.domain { margin: 28px 0 0; color: rgba(237,241,238,.46); font-size: 10px; letter-spacing: .18em; }

.system-grid-shell { display: grid; grid-template-columns: 190px 1fr; }
.section-index { border-right: 1px solid rgba(237,241,238,.12); }
.section-index a {
  display: block;
  min-height: 132px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(237,241,238,.10);
  font-family: var(--head-font);
  text-transform: uppercase;
}
.section-index span { display: block; color: rgba(237,241,238,.72); font-size: 24px; letter-spacing: .08em; margin-bottom: 7px; }
.section-index strong { display: block; color: var(--green); font-weight: 400; font-size: 11px; letter-spacing: .12em; margin-bottom: 14px; }
.section-index small { display: block; color: rgba(237,241,238,.45); font-size: 9px; line-height: 1.65; text-transform: none; letter-spacing: .04em; }
.section-index em { display: inline-block; margin-top: 14px; color: rgba(237,241,238,.62); font-style: normal; font-size: 9px; letter-spacing: .14em; }
.section-index em::after { content: " →"; color: var(--green); }
.section-index a:hover { background: rgba(156,255,0,.025); }

.system-content { min-width: 0; }
.reel-strip {
  height: 156px;
  margin: 18px 24px 20px;
  border: 1px solid rgba(237,241,238,.16);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background:
    linear-gradient(0deg, rgba(2,4,5,.30), rgba(2,4,5,.30)),
    radial-gradient(circle at 50% 54%, rgba(237,241,238,.46), transparent 10%),
    radial-gradient(circle at 50% 54%, rgba(156,255,0,.12), transparent 20%),
    linear-gradient(100deg, rgba(5,9,11,.86), rgba(60,80,76,.35) 48%, rgba(5,8,9,.88)),
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(237,241,238,.035) 120px 121px);
}
.reel-strip::before, .reel-strip::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(237,241,238,.13);
  pointer-events: none;
}
.reel-strip::after {
  inset: auto 0 0;
  height: 52%;
  border: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.40), transparent);
}
.reel-placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
.big-play { width: 70px; height: 70px; border-radius: 50%; border: 1px solid rgba(237,241,238,.24); background: rgba(0,0,0,.22); box-shadow: 0 0 32px rgba(0,0,0,.40); position: relative; }
.big-play::after { content: ""; position: absolute; left: 29px; top: 23px; border-left: 18px solid var(--green); border-top: 12px solid transparent; border-bottom: 12px solid transparent; filter: drop-shadow(0 0 10px rgba(156,255,0,.45)); }
.duration { position: absolute; right: 18px; bottom: 12px; margin: 0; color: var(--green); font-family: var(--head-font); font-size: 11px; letter-spacing: .12em; }

.work-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 0 24px 24px; }
.work-card {
  position: relative;
  min-height: 128px;
  padding: 10px 10px 12px;
  border: 1px solid rgba(237,241,238,.14);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: rgba(0,0,0,.28);
}
.work-card::before { content: ""; position: absolute; inset: 0; background: var(--thumb); opacity: .95; filter: saturate(.82) contrast(1.06); }
.work-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.82), transparent 54%); }
.work-card div, .work-card span { position: relative; z-index: 2; }
.work-card div { min-width: 0; }
.work-card h3 { margin: 0 0 5px; color: rgba(237,241,238,.80); font-family: var(--head-font); font-size: 9px; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; }
.work-card p { margin: 0; color: rgba(237,241,238,.46); font-family: var(--head-font); font-size: 8px; letter-spacing: .10em; text-transform: uppercase; }
.work-card span { margin-left: auto; align-self: flex-end; color: var(--green); font-family: var(--head-font); font-size: 12px; }
.thumb-01 { --thumb: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.34)), url("assets/images/work/01-scythian-treasures.webp") center 22% / cover no-repeat; }
.thumb-02 { --thumb: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.28)), url("assets/images/work/02-trucks.webp") center 34% / cover no-repeat; }
.thumb-03 { --thumb: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.32)), url("assets/images/work/03-fns-russia.webp") center / cover no-repeat; }
.thumb-04 { --thumb: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.34)), url("assets/images/work/04-red-october.webp") center / cover no-repeat; }
.thumb-05 { --thumb: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.34)), url("assets/images/work/05-tatneft.webp") center / cover no-repeat; }
.thumb-06 { --thumb: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.34)), url("assets/images/work/06-rosatom-tvel.webp") center / cover no-repeat; }

.process-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin: 22px 42px 28px;
  padding-top: 4px;
}
.process-line::before {
  content: "";
  position: absolute;
  left: 38px;
  right: 38px;
  top: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(156,255,0,.45), transparent);
}
.process-line article { position: relative; text-align: center; font-family: var(--head-font); }
.node-icon {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: block;
  margin: 0 auto 12px;
  border: 1px solid rgba(237,241,238,.24);
  background: rgba(0,0,0,.30);
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}
.node-icon::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(156,255,0,.55); border-radius: 50%; box-shadow: 0 0 12px rgba(156,255,0,.16); }
.node-icon.cube::before { border-radius: 0; transform: rotate(45deg); }
.node-icon.board::before { border-radius: 0; inset: 17px 14px; box-shadow: inset 10px 0 0 rgba(156,255,0,.08), inset -10px 0 0 rgba(156,255,0,.08); }
.node-icon.mark::before { border-radius: 0; transform: skewX(-22deg); }
.node-icon.check::before { border-radius: 0; border-top: 0; border-left: 0; width: 14px; height: 24px; left: 20px; top: 12px; transform: rotate(45deg); }
.process-line h3 { margin: 0 0 7px; color: var(--green); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.process-line p { margin: 0; color: rgba(237,241,238,.45); font-size: 8px; line-height: 1.55; letter-spacing: .04em; }

.about-contact-row { border-top: 1px solid rgba(237,241,238,.10); }
.about-block {
  min-height: 152px;
  display: grid;
  grid-template-columns: 142px 1fr 270px;
  align-items: center;
  gap: 28px;
  padding: 24px 42px;
  border-bottom: 1px solid rgba(237,241,238,.10);
}
.avatar-placeholder {
  width: 120px;
  height: 112px;
  border: 1px solid rgba(237,241,238,.16);
  background:
    radial-gradient(circle at 52% 32%, rgba(237,241,238,.22), transparent 19%),
    linear-gradient(135deg, rgba(35,44,48,.75), rgba(5,5,5,.86));
  position: relative;
}
.avatar-placeholder::before { content: ""; position: absolute; inset: 8px; border-left: 1px solid var(--green); border-bottom: 1px solid var(--green); opacity: .55; }
.avatar-placeholder span { position: absolute; left: 48%; bottom: 0; width: 42px; height: 84px; background: rgba(0,0,0,.62); border-radius: 50% 50% 0 0; transform: translateX(-50%); }
.about-copy p { margin: 0 0 9px; color: rgba(237,241,238,.60); line-height: 1.65; font-size: 13px; }
.about-copy strong { color: var(--green); font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 22px; font-weight: 400; }
.about-copy small { color: var(--green-soft); font-family: var(--head-font); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.stats { list-style: none; margin: 0; padding: 0; font-family: var(--head-font); }
.stats li { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; margin: 0 0 14px; }
.stats strong { color: var(--green); font-size: 24px; font-weight: 400; }
.stats span { color: rgba(237,241,238,.52); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.contact-block {
  min-height: 145px;
  display: grid;
  grid-template-columns: 1fr 40%;
  gap: 28px;
  padding: 26px 42px 36px;
}
.contact-copy h2 { margin: 0 0 24px; font-family: var(--body-font); font-size: clamp(22px, 1.95vw, 36px); line-height: 1.12; font-weight: 400; color: rgba(237,241,238,.78); }
.contact-copy h2 strong { color: var(--green); font-weight: 400; }
.contact-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.contact-meta p { margin: 0; color: rgba(237,241,238,.58); font-size: 12px; line-height: 1.6; }
.contact-meta span { display: block; margin-bottom: 5px; color: rgba(237,241,238,.34); font-family: var(--head-font); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.globe-panel {
  position: relative;
  min-height: 112px;
  border: 1px solid rgba(237,241,238,.14);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(237,241,238,.16), transparent 34%),
    radial-gradient(ellipse at 50% 108%, rgba(0,0,0,.80), transparent 45%),
    linear-gradient(180deg, rgba(10,17,19,.54), rgba(0,0,0,.46));
}
.globe-panel span { position: absolute; left: 0; right: 0; bottom: -76px; height: 170px; border-radius: 50%; border: 1px solid rgba(237,241,238,.12); }
.globe-panel i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgba(156,255,0,.70); }
.globe-panel i:nth-child(2) { left: 44%; top: 51%; }
.globe-panel i:nth-child(3) { left: 64%; top: 44%; }
.globe-panel i:nth-child(4) { left: 78%; top: 58%; }
.system-footer {
  height: 36px;
  display: grid;
  grid-template-columns: 110px 1fr 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 0 34px;
  color: rgba(237,241,238,.36);
  font-family: var(--head-font);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 9px;
}
.mini-mark { width: 18px; height: 18px; border: 1px solid rgba(237,241,238,.24); display: inline-block; transform: skewX(-20deg); }
.system-footer nav { display: flex; gap: 10px; }
.system-footer a { width: 18px; height: 18px; border: 1px solid rgba(237,241,238,.14); display: grid; place-items: center; font-size: 8px; letter-spacing: 0; }

.reel-modal { width: min(1120px, 92vw); border: 1px solid rgba(156,255,0,.35); background: rgba(2,4,4,.92); color: var(--white); padding: 0; box-shadow: 0 0 80px rgba(0,0,0,.8), 0 0 60px rgba(156,255,0,.10); }
.reel-modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.modal-close { position: absolute; right: 12px; top: 8px; z-index: 2; width: 44px; height: 44px; border: 0; background: transparent; color: var(--white); font-size: 34px; cursor: pointer; }
.modal-frame { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.modal-placeholder { display: grid; place-items: center; gap: 18px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.modal-placeholder span { width: 92px; height: 92px; border: 1px solid var(--green); border-radius: 50%; box-shadow: 0 0 30px rgba(156,255,0,.22); }

@media (max-width: 1200px) {
  .system-frame { min-width: 0; width: calc(100vw - 44px); }
  .system-top { grid-template-columns: 36% 34% 30%; }
  .system-hero-copy { padding-left: 42px; }
  .system-grid-shell { grid-template-columns: 160px 1fr; }
  .work-strip { grid-template-columns: repeat(3, 1fr); }
  .about-block { grid-template-columns: 128px 1fr; }
  .stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (max-width: 980px) {
  .topbar { height: 120px; }
  .brand-mark { left: 22px; top: 24px; width: 58px; height: 78px; }
  .brand-name { left: 86px; top: 39px; font-size: 17px; letter-spacing: .38em; }
  .brand-sign { top: 24px; left: 28px; font-size: 20px; }
  .nav { display: none; }
  .signal-status { right: 22px; top: 37px; }
  .hero { min-height: 100svh; overflow: hidden; }
  .logo-stage { width: min(72vw, 440px); left: 55%; top: 43%; opacity: .9; }
  .hero-copy { left: 24px; top: 20svh; width: calc(100vw - 48px); }
  .eyebrow { font-size: 10px; margin-left: 18px; }
  h1 { font-size: clamp(40px, 12vw, 70px); line-height: 1.12; }
  .hero-subgrid { top: calc(100% + 28px); }
  .hero-actions { left: 24px; right: 24px; top: auto; bottom: 86px; width: auto; gap: 12px; }
  .cta { height: 54px; font-size: 11px; }
  .location-note, .scroll-note, .est-note, .bottom-progress { display: none; }
  .system-dashboard { min-height: auto; padding-top: 96px; }
  .system-rail { display: none; }
  .system-frame { width: calc(100vw - 24px); }
  .system-frame::before { top: 64px; }
  .system-top { grid-template-columns: 1fr; min-height: 520px; }
  .system-hero-copy { padding: 88px 24px 24px; }
  .system-hero-copy h2 { font-size: clamp(34px, 10vw, 58px); }
  .core-note { display: none; }
  .system-logo-slot { min-height: 200px; }
  .system-grid-shell { grid-template-columns: 1fr; }
  .section-index { display: none; }
  .reel-strip { height: 210px; margin: 18px 14px; }
  .work-strip { grid-template-columns: 1fr 1fr; margin: 0 14px 20px; }
  .process-line { grid-template-columns: 1fr 1fr; margin: 20px 18px; }
  .about-block, .contact-block { grid-template-columns: 1fr; padding: 24px 18px; }
  .contact-meta { grid-template-columns: 1fr; gap: 12px; }
  .system-footer { grid-template-columns: 1fr; height: auto; padding: 18px; }
}
@media (max-width: 520px) {
  .brand-name { font-size: 14px; letter-spacing: .28em; }
  .brand-sign { font-size: 18px; top: 22px; }
  .signal-status { transform: scale(.82); transform-origin: top right; }
  h1 { font-size: clamp(36px, 11vw, 52px); }
  .hero-copy { top: 18svh; }
  .logo-stage { width: 92vw; left: 60%; top: 47%; opacity: .72; }
  .work-strip, .process-line { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}

/* v4 corrections: full-width system layout, header scroll-out, stable logo ratio */
:root {
  --topbar-y: 0px;
  --topbar-opacity: 1;
}

.brand-mark,
.brand-name,
.signal-status {
  transform: translateY(var(--topbar-y));
  opacity: var(--topbar-opacity);
  transition: opacity .16s linear;
  will-change: transform, opacity;
}

.nav {
  transform: translate(-50%, var(--topbar-y));
  opacity: var(--topbar-opacity);
  transition: opacity .16s linear, color .25s ease, text-shadow .25s ease;
  will-change: transform, opacity;
}

body.is-system .topbar a,
body.is-system .topbar .signal-status {
  pointer-events: none;
}

.logo-stage {
  aspect-ratio: 1150 / 1500;
  height: auto;
  will-change: left, top, width, height, opacity;
}

#logoCanvas {
  width: 100%;
  height: 100%;
  aspect-ratio: 1150 / 1500;
  display: block;
}

.system-dashboard {
  min-height: 100vh;
  padding: clamp(22px, 3.4vh, 48px) 0 clamp(36px, 5vh, 72px);
}

.system-frame {
  width: calc(100vw - clamp(24px, 3.8vw, 78px));
  max-width: none;
  min-width: 0;
}

.system-frame::before { top: 74px; }

.system-panel-bar {
  position: relative;
  z-index: 12;
  height: 74px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
  align-items: center;
  padding: 0 clamp(32px, 3.2vw, 70px);
  border-bottom: 1px solid rgba(237,241,238,.12);
  font-family: var(--head-font);
  text-transform: uppercase;
}

.system-panel-brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  justify-self: start;
  color: rgba(237,241,238,.75);
  letter-spacing: .48em;
  font-size: clamp(13px, .9vw, 18px);
  line-height: 1;
}

.system-panel-brand::before,
.system-panel-brand::after {
  content: "";
  width: 9px;
  height: 9px;
  border-color: var(--green);
  opacity: .62;
}
.system-panel-brand::before { border-left: 1px solid; border-top: 1px solid; }
.system-panel-brand::after { border-right: 1px solid; border-bottom: 1px solid; }
.system-panel-brand span { display: inline-block; }
.system-panel-brand em {
  margin-left: 2px;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: .04em;
  color: var(--green-soft);
  font-size: clamp(17px, 1.25vw, 27px);
  white-space: nowrap;
}

.system-panel-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(42px, 5.2vw, 92px);
  color: rgba(237,241,238,.64);
  letter-spacing: .20em;
  font-size: clamp(9px, .62vw, 12px);
}
.system-panel-nav a { position: relative; }
.system-panel-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(156,255,0,.43);
  transform: translateX(-50%);
}
.system-panel-nav a:hover { color: var(--green); }

.system-panel-status {
  position: relative;
  justify-self: end;
  display: grid;
  grid-template-columns: 1fr 12px;
  column-gap: 12px;
  justify-items: end;
  align-items: start;
  letter-spacing: .22em;
  line-height: 1.1;
}
.system-panel-status span {
  grid-column: 1;
  color: rgba(237,241,238,.43);
  font-size: clamp(8px, .58vw, 11px);
}
.system-panel-status strong {
  grid-column: 1;
  color: var(--green);
  font-weight: 400;
  font-size: clamp(10px, .72vw, 14px);
  line-height: 1.8;
  text-shadow: 0 0 18px rgba(156,255,0,.28);
}
.system-panel-status i {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px rgba(156,255,0,.68);
}

.system-top {
  min-height: clamp(330px, 34.2vh, 410px);
  grid-template-columns: 33% 39% 28%;
}
.system-hero-copy { padding: clamp(42px, 4.9vh, 62px) clamp(30px, 2.6vw, 58px) 32px clamp(42px, 4.1vw, 82px); }
.core-note { padding: clamp(42px, 4.9vh, 62px) clamp(34px, 3.0vw, 64px) 28px clamp(30px, 2.6vw, 52px); }
.system-logo-slot { min-height: clamp(330px, 34.2vh, 410px); }
.system-logo-slot::before { width: min(31vw, 430px); height: min(31vw, 430px); }

.system-grid-shell { grid-template-columns: clamp(164px, 11.8vw, 220px) 1fr; }
.section-index a { min-height: clamp(112px, 11.4vh, 140px); }
.reel-strip { height: clamp(150px, 14.8vh, 200px); }
.work-card { min-height: clamp(118px, 12.5vh, 160px); }
.process-line { gap: clamp(18px, 2.2vw, 42px); }
.about-block { grid-template-columns: clamp(124px, 9vw, 160px) 1fr clamp(235px, 18vw, 330px); }
.contact-block { grid-template-columns: 1fr minmax(360px, 40%); }

@media (min-width: 1800px) {
  .system-hero-copy h2 { font-size: clamp(54px, 3.2vw, 76px); }
  .system-spec { font-size: clamp(13px, .78vw, 18px); }
  .reel-strip { margin-left: clamp(24px, 2vw, 42px); margin-right: clamp(24px, 2vw, 42px); }
  .work-strip { margin-left: clamp(24px, 2vw, 42px); margin-right: clamp(24px, 2vw, 42px); gap: clamp(10px, .82vw, 18px); }
}

@media (max-width: 1200px) {
  .system-panel-bar {
    grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
    padding: 0 26px;
  }
  .system-panel-brand { letter-spacing: .30em; }
  .system-panel-nav { gap: 34px; }
  .system-panel-brand em { display: none; }
  .system-frame { width: calc(100vw - 28px); }
  .system-top { grid-template-columns: 36% 34% 30%; }
}

@media (max-width: 980px) {
  .brand-mark,
  .brand-name,
  .signal-status { transform: translateY(var(--topbar-y)); }
  .nav { display: none; }
  .system-panel-bar {
    height: auto;
    min-height: 68px;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 16px 20px;
  }
  .system-panel-nav { display: none; }
  .system-panel-status { transform: scale(.86); transform-origin: center right; }
  .system-frame::before { top: 68px; }
  .system-top { min-height: 520px; }
  .system-hero-copy { padding: 38px 24px 24px; }
  .system-logo-slot { min-height: 220px; }
  .contact-block { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .system-panel-brand { font-size: 13px; letter-spacing: .22em; }
  .system-panel-status { transform: scale(.74); }
  .system-frame { width: calc(100vw - 14px); }
}
.system-panel-nav a.is-active { color: rgba(237,241,238,.95); }
.system-panel-nav a.is-active::before,
.system-panel-nav a.is-active::after {
  position: absolute;
  top: 50%;
  color: var(--green);
  transform: translateY(-50%);
  text-shadow: 0 0 12px rgba(156,255,0,.45);
}
.system-panel-nav a.is-active::before { content: "["; left: -24px; }
.system-panel-nav a.is-active::after { content: "]"; right: -24px; width: auto; height: auto; background: transparent; bottom: auto; border-radius: 0; left: auto; }

/* v5 corrections: smaller system logo + sticky system header */
.system-dashboard {
  padding-top: clamp(18px, 2.8vh, 42px);
}

.system-frame {
  overflow: visible;
}

.system-panel-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  background:
    linear-gradient(180deg, rgba(3,5,6,.94), rgba(3,5,6,.78)),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 48%, rgba(255,255,255,.025));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 46px rgba(0,0,0,.42), 0 1px 0 rgba(237,241,238,.10);
}

.system-panel-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(156,255,0,.30), transparent);
  pointer-events: none;
}

.system-panel-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.34), transparent);
  pointer-events: none;
}

.system-top,
.system-grid-shell,
.system-footer {
  position: relative;
  z-index: 1;
}

.system-logo-slot::before {
  width: min(24vw, 332px);
  height: min(24vw, 332px);
}

@media (min-width: 1800px) {
  .system-logo-slot::before {
    width: min(23vw, 360px);
    height: min(23vw, 360px);
  }
}

@media (max-width: 980px) {
  .system-panel-bar {
    top: 0;
  }
  .system-logo-slot::before {
    width: min(45vw, 230px);
    height: min(45vw, 230px);
  }
}

/* v7 hotfix: stable compact sticky system block + animated cyber showreel modal */
:root {
  --system-bar-h-v7: 74px;
  --system-top-h-v7: clamp(192px, 23vh, 252px);
}

.system-frame {
  overflow: visible;
}

.system-sticky-head {
  position: sticky;
  top: 0;
  z-index: 140;
  background:
    linear-gradient(180deg, rgba(3,5,6,.94), rgba(3,5,6,.76)),
    radial-gradient(circle at 52% 46%, rgba(156,255,0,.06), transparent 24%),
    linear-gradient(90deg, rgba(255,255,255,.030), transparent 45%, rgba(255,255,255,.020));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(237,241,238,.11);
  box-shadow: 0 24px 56px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.035);
  overflow: hidden;
  isolation: isolate;
}

.system-sticky-head::before,
.system-sticky-head::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.system-sticky-head::before {
  background:
    linear-gradient(90deg, transparent 0 33.7%, rgba(237,241,238,.08) 33.75%, transparent 33.82% 71.8%, rgba(237,241,238,.07) 71.88%, transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 126px, rgba(255,255,255,.017) 127px, transparent 128px),
    linear-gradient(180deg, rgba(156,255,0,.13), transparent 1px);
  opacity: .78;
}

.system-sticky-head::after {
  top: auto;
  height: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,.42), transparent);
  transform: translateY(100%);
}

.system-sticky-head .system-panel-bar {
  position: relative;
  top: auto;
  z-index: 4;
  height: var(--system-bar-h-v7);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.system-sticky-head .system-panel-bar::before {
  background: linear-gradient(90deg, transparent, rgba(156,255,0,.30), transparent);
}

.system-sticky-head .system-panel-bar::after {
  display: none;
}

.system-sticky-head .system-top {
  position: relative;
  top: auto;
  z-index: 3;
  min-height: var(--system-top-h-v7);
  grid-template-columns: 34% 38% 28%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
  overflow: hidden;
}

.system-sticky-head .system-top::before {
  opacity: .58;
}

.system-sticky-head .system-top::after {
  display: none;
}

.system-sticky-head .system-hero-copy {
  padding: clamp(22px, 2.35vh, 34px) clamp(28px, 2.6vw, 58px) clamp(16px, 1.8vh, 24px) clamp(42px, 4.1vw, 82px);
  align-self: stretch;
}

.system-sticky-head .system-eyebrow {
  font-size: clamp(8px, .55vw, 10px);
  margin-bottom: clamp(10px, 1.15vh, 14px);
}

.system-sticky-head .system-hero-copy h2,
.system-sticky-head .system-hero-copy h2.theory-title {
  margin: 0;
  font-size: clamp(38px, 3.25vw, 66px);
  line-height: .93;
  letter-spacing: .075em;
  color: rgba(238,243,241,.88);
}

.system-sticky-head .system-hero-copy h2.theory-title strong {
  color: var(--green);
  font-weight: 400;
  text-shadow: 0 0 26px rgba(156,255,0,.34);
}

.system-sticky-head .system-spec {
  display: block;
  margin: clamp(12px, 1.5vh, 18px) 0 0;
  font-size: clamp(10px, .72vw, 13px);
  color: rgba(237,241,238,.58);
}

.system-sticky-head .system-actions,
.system-sticky-head .availability {
  display: none;
}

.system-sticky-head .system-logo-slot {
  min-height: var(--system-top-h-v7);
}

.system-sticky-head .system-logo-slot::before {
  width: min(17vw, 240px);
  height: min(17vw, 240px);
  opacity: .38;
}

.system-sticky-head .core-note {
  padding: clamp(22px, 2.35vh, 34px) clamp(34px, 3.0vw, 64px) clamp(16px, 1.8vh, 24px) clamp(30px, 2.6vw, 52px);
}

.system-sticky-head .core-title { font-size: clamp(10px, .72vw, 13px); }
.system-sticky-head .core-subtitle { font-size: clamp(8px, .54vw, 10px); }
.system-sticky-head .core-diagram { height: clamp(48px, 5.4vh, 72px); margin: clamp(8px, 1vh, 14px) 0; }
.system-sticky-head .core-note li { line-height: 1.62; }
.system-sticky-head .core-note .domain { margin-top: clamp(8px, 1.2vh, 14px); }

.system-grid-shell {
  position: relative;
  z-index: 1;
  background: rgba(2,3,4,.22);
}

.system-grid-shell::before {
  content: "";
  position: sticky;
  top: calc(var(--system-bar-h-v7) + var(--system-top-h-v7));
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(156,255,0,.26), transparent);
  z-index: 30;
  pointer-events: none;
}

.reel-modal {
  width: min(1220px, 93vw);
  border: 1px solid rgba(156,255,0,.42);
  background:
    linear-gradient(180deg, rgba(3,5,6,.98), rgba(3,5,6,.91)),
    radial-gradient(circle at 50% 50%, rgba(156,255,0,.08), transparent 36%);
  box-shadow:
    0 0 100px rgba(0,0,0,.86),
    0 0 72px rgba(156,255,0,.13),
    inset 0 0 0 1px rgba(255,255,255,.035);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.965);
}

.reel-modal[open] {
  animation: reelModalIn .34s cubic-bezier(.16, 1, .3, 1) forwards;
}

.reel-modal::backdrop {
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: reelBackdropIn .28s ease forwards;
}

.modal-close {
  right: 18px;
  top: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(237,241,238,.16);
  background: rgba(0,0,0,.34);
  color: rgba(237,241,238,.82);
  font-family: var(--head-font);
  font-size: 28px;
  line-height: 36px;
  transition: border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.modal-close:hover {
  color: var(--green);
  border-color: rgba(156,255,0,.45);
  box-shadow: 0 0 20px rgba(156,255,0,.16);
}

.modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: min(72vh, 680px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(156,255,0,.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(156,255,0,.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(156,255,0,.09), transparent 23%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 20%, rgba(0,0,0,.26));
  background-size: 92px 92px, 92px 92px, auto, auto;
}

.modal-frame::before,
.modal-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.modal-frame::before {
  inset: 22px;
  border: 1px solid rgba(237,241,238,.12);
  box-shadow: inset 0 0 50px rgba(0,0,0,.36);
}

.modal-frame::after {
  left: -25%;
  right: -25%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(156,255,0,.36), rgba(255,255,255,.18), rgba(156,255,0,.25), transparent);
  opacity: .64;
}

.modal-corner {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-color: rgba(156,255,0,.58);
  opacity: .9;
  pointer-events: none;
}
.modal-corner-tl { left: 24px; top: 24px; border-left: 1px solid; border-top: 1px solid; }
.modal-corner-tr { right: 24px; top: 24px; border-right: 1px solid; border-top: 1px solid; }
.modal-corner-bl { left: 24px; bottom: 24px; border-left: 1px solid; border-bottom: 1px solid; }
.modal-corner-br { right: 24px; bottom: 24px; border-right: 1px solid; border-bottom: 1px solid; }

.modal-scan {
  position: absolute;
  pointer-events: none;
  background: rgba(156,255,0,.35);
  opacity: .45;
  box-shadow: 0 0 24px rgba(156,255,0,.22);
}
.modal-scan-a { left: 8%; right: 8%; top: 18%; height: 1px; }
.modal-scan-b { top: 12%; bottom: 12%; left: 18%; width: 1px; }

.modal-hud {
  position: absolute;
  left: 48px;
  right: 78px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(237,241,238,.64);
  font-family: var(--head-font);
  font-size: clamp(9px, .62vw, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.modal-hud i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(156,255,0,.45), transparent); }
.modal-hud-top { top: 42px; }
.modal-hud-bottom { bottom: 42px; color: rgba(156,255,0,.70); }

.modal-placeholder {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  gap: 14px;
  color: rgba(237,241,238,.68);
  text-transform: uppercase;
  letter-spacing: .16em;
  text-align: center;
  transform: translateY(6px);
}

.modal-placeholder p { margin: 0; font-family: var(--head-font); font-size: clamp(12px, .88vw, 16px); }
.modal-placeholder small { max-width: 560px; color: rgba(237,241,238,.38); font-size: 11px; letter-spacing: .12em; line-height: 1.7; }

.modal-placeholder .modal-play-core {
  position: relative;
  width: clamp(82px, 7vw, 118px);
  height: clamp(82px, 7vw, 118px);
  border: 1px solid rgba(156,255,0,.62);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(156,255,0,.20), rgba(0,0,0,.10) 48%, rgba(0,0,0,.42));
  box-shadow: 0 0 38px rgba(156,255,0,.22), inset 0 0 26px rgba(156,255,0,.10);
}

.modal-play-core::before,
.modal-play-core::after {
  content: "";
  position: absolute;
  inset: -16px;
  border: 1px solid rgba(237,241,238,.10);
  border-radius: 50%;
}
.modal-play-core::after { inset: -31px; border-color: rgba(156,255,0,.13); }
.modal-play-core i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-36%, -50%);
  border-left: 18px solid var(--green);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  filter: drop-shadow(0 0 14px rgba(156,255,0,.64));
}

@keyframes reelModalIn {
  0% { opacity: 0; transform: translateY(18px) scale(.955); clip-path: inset(46% 48% 46% 48%); }
  58% { opacity: 1; transform: translateY(0) scale(1.006); clip-path: inset(0 7% 0 7%); }
  100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0); }
}

@keyframes reelBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 1800px) {
  :root { --system-top-h-v7: clamp(204px, 21vh, 264px); }
  .system-sticky-head .system-hero-copy h2,
  .system-sticky-head .system-hero-copy h2.theory-title { font-size: clamp(48px, 3.0vw, 72px); }
  .system-sticky-head .system-logo-slot::before { width: min(16vw, 260px); height: min(16vw, 260px); }
}

@media (max-width: 1200px) {
  :root { --system-top-h-v7: clamp(220px, 27vh, 310px); }
  .system-sticky-head .system-top { grid-template-columns: 38% 32% 30%; }
  .system-sticky-head .system-hero-copy h2,
  .system-sticky-head .system-hero-copy h2.theory-title { font-size: clamp(34px, 4.8vw, 60px); }
}

@media (max-width: 980px) {
  :root { --system-bar-h-v7: 68px; --system-top-h-v7: 324px; }
  .system-sticky-head .system-panel-bar {
    height: auto;
    min-height: var(--system-bar-h-v7);
  }
  .system-sticky-head .system-top {
    grid-template-columns: 1fr;
  }
  .system-sticky-head .system-hero-copy { padding: 28px 24px 10px; }
  .system-sticky-head .system-logo-slot { min-height: 126px; }
  .system-sticky-head .core-note { display: none; }
  .system-sticky-head .system-logo-slot::before { width: min(40vw, 210px); height: min(40vw, 210px); }
  .system-grid-shell::before { top: calc(var(--system-bar-h-v7) + var(--system-top-h-v7)); }
}

@media (max-width: 520px) {
  :root { --system-top-h-v7: 286px; }
  .system-sticky-head .system-hero-copy h2,
  .system-sticky-head .system-hero-copy h2.theory-title { font-size: clamp(32px, 10vw, 50px); }
  .modal-hud { left: 24px; right: 48px; }
}

/* v8 HOTFIX: restore system page grid after sticky header.
   The v7 sticky separator was created as a pseudo-element inside CSS Grid,
   so it became the first grid item and shifted the section index/content columns.
   It is now absolutely positioned and the two real columns are explicitly pinned. */
.system-grid-shell {
  position: relative;
  display: grid;
  grid-template-columns: clamp(164px, 11.8vw, 220px) minmax(0, 1fr);
  align-items: start;
}

.system-grid-shell::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  width: auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(156,255,0,.26), transparent);
  z-index: 30;
  pointer-events: none;
}

.system-grid-shell > .section-index {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.system-grid-shell > .system-content {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

#reel,
#work,
#process,
#about,
#contact {
  scroll-margin-top: calc(var(--system-bar-h-v7) + var(--system-top-h-v7) + 32px);
}

@media (max-width: 980px) {
  .system-grid-shell {
    grid-template-columns: 1fr;
  }
  .system-grid-shell > .section-index,
  .system-grid-shell > .system-content {
    grid-column: 1;
  }
}

/* v9: aligned system rows, menu-to-section highlights, ambient module, contact module, dynamic signal status */
:root {
  --row-reel: clamp(205px, 19vh, 250px);
  --row-work: clamp(166px, 15.5vh, 205px);
  --row-process: clamp(170px, 16vh, 220px);
  --row-about: clamp(168px, 16vh, 220px);
  --row-contact: clamp(190px, 18vh, 245px);
}

.system-grid-shell {
  grid-template-columns: clamp(188px, 12.4vw, 242px) minmax(0, 1fr);
  grid-template-rows: auto;
  border-top: 1px solid rgba(237,241,238,.10);
}

.system-grid-shell > .section-index,
.system-grid-shell > .system-content {
  display: grid;
  grid-template-rows:
    var(--row-reel)
    var(--row-work)
    var(--row-process)
    var(--row-about)
    var(--row-contact);
}

.section-index {
  position: relative;
  background: linear-gradient(180deg, rgba(2,4,5,.18), rgba(2,4,5,.08));
}
.section-index::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(156,255,0,.28), rgba(237,241,238,.10), rgba(156,255,0,.18));
  opacity: .42;
}
.section-index a {
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(18px, 2.0vh, 26px) clamp(20px, 1.6vw, 30px) 16px;
  transition: background .26s ease, box-shadow .26s ease, color .26s ease, border-color .26s ease;
}
.section-index a em { margin-top: auto; padding-top: 12px; }
.section-index a.is-current,
.section-index a.is-pulse {
  background:
    linear-gradient(90deg, rgba(156,255,0,.075), transparent 70%),
    rgba(156,255,0,.018);
  box-shadow: inset 3px 0 0 rgba(156,255,0,.72), inset 0 0 38px rgba(156,255,0,.035);
}
.section-index a.is-current span,
.section-index a.is-pulse span { color: rgba(237,241,238,.92); text-shadow: 0 0 14px rgba(255,255,255,.10); }
.section-index a.is-current strong,
.section-index a.is-pulse strong { color: var(--green); text-shadow: 0 0 18px rgba(156,255,0,.28); }

.system-content {
  min-width: 0;
  background:
    linear-gradient(90deg, rgba(237,241,238,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(237,241,238,.028) 1px, transparent 1px);
  background-size: 33.333% 100%, 100% var(--row-reel);
}

.reel-strip,
.work-strip,
.process-line,
.about-block,
.contact-block {
  position: relative;
  transition: box-shadow .34s ease, border-color .34s ease, filter .34s ease, background-color .34s ease;
}
.reel-strip { grid-row: 1; height: auto; min-height: 0; margin: clamp(20px, 2.2vh, 28px) clamp(34px, 2.5vw, 52px); }
.work-strip { grid-row: 2; margin: clamp(16px, 1.8vh, 24px) clamp(34px, 2.5vw, 52px); align-self: stretch; }
.work-card { min-height: 0; height: 100%; }
.process-line { grid-row: 3; margin: clamp(24px, 2.5vh, 34px) clamp(44px, 3.0vw, 70px) clamp(20px, 2vh, 30px); align-content: center; }
.about-contact-row { display: contents; border-top: 0; }
.about-block { grid-row: 4; min-height: 0; padding-top: clamp(20px, 2vh, 30px); padding-bottom: clamp(20px, 2vh, 30px); border-top: 1px solid rgba(237,241,238,.10); }
.contact-block { grid-row: 5; min-height: 0; padding-top: clamp(24px, 2.3vh, 34px); padding-bottom: clamp(24px, 2.5vh, 38px); border-top: 1px solid rgba(237,241,238,.10); }

[data-target-panel].is-current,
[data-target-panel].is-pulse {
  box-shadow: inset 0 0 0 1px rgba(156,255,0,.36), 0 0 46px rgba(156,255,0,.075);
  border-color: rgba(156,255,0,.38) !important;
  filter: saturate(1.08) brightness(1.05);
}
.process-line.is-current,
.process-line.is-pulse,
.about-block.is-current,
.about-block.is-pulse,
.contact-block.is-current,
.contact-block.is-pulse {
  background-color: rgba(156,255,0,.018);
}

.system-panel-nav a,
.nav a { cursor: pointer; }
.system-panel-nav a.is-active,
.nav a.is-active { color: rgba(237,241,238,.95); }

.ambient-player {
  position: fixed;
  left: clamp(20px, 2.2vw, 42px);
  bottom: clamp(18px, 2.2vh, 36px);
  z-index: 160;
  min-width: 164px;
  height: 42px;
  display: grid;
  grid-template-columns: auto 44px auto;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid rgba(237,241,238,.16);
  background: rgba(2,4,5,.54);
  color: rgba(237,241,238,.60);
  font-family: var(--head-font);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 9px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 44px rgba(0,0,0,.38), inset 0 0 0 1px rgba(0,0,0,.34);
  transition: border-color .24s ease, color .24s ease, box-shadow .24s ease, opacity .24s ease;
}
.ambient-player:hover,
.ambient-player.is-on {
  border-color: rgba(156,255,0,.46);
  color: var(--green);
  box-shadow: 0 0 28px rgba(156,255,0,.11), 0 16px 44px rgba(0,0,0,.42);
}
.eq {
  height: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}
.eq i {
  display: block;
  width: 3px;
  height: 5px;
  background: rgba(237,241,238,.36);
  box-shadow: 0 0 8px rgba(156,255,0,.12);
  transform-origin: bottom center;
}
.ambient-player.is-on .eq i {
  background: var(--green);
  animation: eqPulse 1.15s ease-in-out infinite;
}
.ambient-player.is-on .eq i:nth-child(2) { animation-delay: -.42s; }
.ambient-player.is-on .eq i:nth-child(3) { animation-delay: -.77s; }
.ambient-player.is-on .eq i:nth-child(4) { animation-delay: -.24s; }
.ambient-player.is-on .eq i:nth-child(5) { animation-delay: -.62s; }
@keyframes eqPulse { 0%, 100% { height: 5px; opacity: .65; } 35% { height: 19px; opacity: 1; } 70% { height: 11px; opacity: .82; } }

.contact-modal {
  width: min(1120px, 92vw);
  border: 1px solid rgba(156,255,0,.38);
  background:
    linear-gradient(180deg, rgba(3,5,6,.985), rgba(3,5,6,.92)),
    radial-gradient(circle at 75% 32%, rgba(156,255,0,.08), transparent 34%);
  color: var(--white);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 0 100px rgba(0,0,0,.86), 0 0 72px rgba(156,255,0,.12), inset 0 0 0 1px rgba(255,255,255,.035);
  opacity: 0;
  transform: translateY(14px) scale(.965);
}
.contact-modal[open] { animation: reelModalIn .34s cubic-bezier(.16, 1, .3, 1) forwards; }
.contact-modal::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.contact-modal-frame {
  position: relative;
  min-height: min(72vh, 680px);
  padding: clamp(78px, 8vh, 96px) clamp(36px, 4vw, 72px) clamp(78px, 8vh, 96px);
  background:
    linear-gradient(90deg, rgba(156,255,0,.09) 1px, transparent 1px),
    linear-gradient(180deg, rgba(156,255,0,.065) 1px, transparent 1px),
    radial-gradient(circle at 68% 58%, rgba(156,255,0,.10), transparent 30%);
  background-size: 96px 96px, 96px 96px, auto;
}
.contact-modal-frame::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(237,241,238,.12);
  pointer-events: none;
  box-shadow: inset 0 0 50px rgba(0,0,0,.36);
}
.contact-modal-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(38px, 5vw, 82px);
}
.modal-kicker {
  margin: 0 0 18px;
  color: var(--green);
  font-family: var(--head-font);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.contact-channel h2 {
  margin: 0 0 34px;
  color: rgba(237,241,238,.84);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 54px);
  line-height: 1.08;
}
.contact-channel h2 strong { color: var(--green); font-weight: 400; text-shadow: 0 0 28px rgba(156,255,0,.28); }
.contact-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 30px;
}
.contact-lines p { margin: 0; color: rgba(237,241,238,.64); font-size: 13px; line-height: 1.55; }
.contact-lines span { display: block; margin-bottom: 6px; color: rgba(237,241,238,.38); font-family: var(--head-font); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.music-channel {
  position: relative;
  padding: 26px;
  border: 1px solid rgba(237,241,238,.13);
  background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(156,255,0,.025));
}
.music-channel h3 { margin: 0 0 22px; font-family: var(--head-font); color: rgba(237,241,238,.80); font-size: 18px; letter-spacing: .15em; text-transform: uppercase; font-weight: 400; }
.track-list { display: grid; gap: 12px; }
.track-row {
  height: 58px;
  border: 1px solid rgba(237,241,238,.14);
  background: rgba(2,4,5,.42);
  color: rgba(237,241,238,.68);
  display: grid;
  grid-template-columns: 44px 1fr 72px;
  align-items: center;
  padding: 0 14px;
  font-family: var(--head-font);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  cursor: pointer;
  transition: border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.track-row span { color: var(--green); }
.track-row strong { font-weight: 400; text-align: left; }
.track-row em { font-style: normal; color: rgba(237,241,238,.36); }
.track-row:hover,
.track-row.is-playing { color: var(--green); border-color: rgba(156,255,0,.44); box-shadow: inset 0 0 28px rgba(156,255,0,.035), 0 0 22px rgba(156,255,0,.08); }
.track-note { margin: 20px 0 0; color: rgba(237,241,238,.38); font-size: 11px; line-height: 1.6; }

body.is-searching .signal-dot,
body.is-searching .system-panel-status i { box-shadow: 0 0 22px rgba(156,255,0,.90), 0 0 42px rgba(156,255,0,.28); }
body.is-searching .signal-value,
body.is-searching .system-panel-status strong { letter-spacing: .20em; text-shadow: 0 0 22px rgba(156,255,0,.42); }

@media (max-width: 1200px) {
  :root {
    --row-reel: 220px;
    --row-work: 360px;
    --row-process: 230px;
    --row-about: 280px;
    --row-contact: 300px;
  }
  .work-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .system-grid-shell > .system-content { display: block; }
  .reel-strip, .work-strip, .process-line, .about-block, .contact-block { grid-row: auto; }
  .about-contact-row { display: block; }
  .ambient-player { left: 16px; bottom: 14px; min-width: 132px; grid-template-columns: 1fr 38px; }
  .ambient-label { display: none; }
  .contact-modal-grid { grid-template-columns: 1fr; }
  .contact-lines { grid-template-columns: 1fr; }
}

/* v10: access gate and language selector */
body.gate-locked { overflow: hidden; }
body.gate-locked .site-shell,
body.gate-locked .ambient-player { filter: blur(9px) brightness(.42); pointer-events: none; user-select: none; }

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 42%, rgba(156,255,0,.08), transparent 34%), rgba(0,0,0,.78);
  transition: opacity .42s ease, visibility .42s ease, transform .42s ease;
}
.access-gate.is-unlocked { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.015); }
.gate-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.045), transparent 44%), repeating-linear-gradient(180deg, transparent 0 5px, rgba(255,255,255,.035) 5px 6px); opacity: .42; }
.gate-panel {
  position: relative;
  width: min(780px, calc(100vw - 40px));
  min-height: 520px;
  padding: clamp(28px, 4.2vw, 52px);
  border: 1px solid rgba(237,241,238,.18);
  background:
    linear-gradient(180deg, rgba(4,6,7,.78), rgba(4,6,7,.88)),
    radial-gradient(circle at 62% 42%, rgba(156,255,0,.07), transparent 48%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.62), 0 36px 140px rgba(0,0,0,.86), inset 0 0 70px rgba(156,255,0,.035);
  backdrop-filter: blur(14px);
  font-family: var(--head-font);
  text-transform: uppercase;
}
.gate-panel::before { content: ""; position: absolute; left: 16px; right: 16px; top: 74px; height: 1px; background: linear-gradient(90deg, transparent, rgba(156,255,0,.34), transparent); opacity: .55; }
.gate-corner { position: absolute; width: 15px; height: 15px; border-color: rgba(237,241,238,.40); }
.gate-corner-tl { left: -1px; top: -1px; border-left: 1px solid; border-top: 1px solid; }
.gate-corner-tr { right: -1px; top: -1px; border-right: 1px solid; border-top: 1px solid; }
.gate-corner-bl { left: -1px; bottom: -1px; border-left: 1px solid; border-bottom: 1px solid; }
.gate-corner-br { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.gate-hud, .gate-footer { display: flex; align-items: center; gap: 16px; color: rgba(237,241,238,.44); font-size: 10px; letter-spacing: .2em; }
.gate-hud { position: absolute; left: 28px; right: 28px; top: 22px; justify-content: space-between; }
.gate-hud i, .gate-footer i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(156,255,0,.42), transparent); }
.gate-footer { position: absolute; left: 28px; right: 28px; bottom: 22px; }
.gate-kicker { margin: 54px 0 12px; color: var(--green); font-size: 10px; letter-spacing: .18em; }
.gate-title { margin: 0; color: rgba(237,241,238,.88); font-size: clamp(34px, 5.6vw, 62px); line-height: 1.08; letter-spacing: .08em; font-weight: 400; }
.gate-help { width: min(540px, 100%); margin: 20px 0 28px; color: rgba(237,241,238,.58); font-family: var(--body-font); text-transform: none; font-size: 14px; line-height: 1.6; letter-spacing: .02em; }
.gate-playfield { position: relative; height: clamp(190px, 28vh, 250px); border: 1px solid rgba(237,241,238,.12); background: linear-gradient(90deg, rgba(156,255,0,.035), rgba(255,255,255,.018), rgba(156,255,0,.045)); overflow: hidden; }
.gate-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(237,241,238,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(237,241,238,.055) 1px, transparent 1px); background-size: 42px 42px; opacity: .7; }
.gate-link { position: absolute; left: 23%; right: 27%; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(156,255,0,.18), rgba(156,255,0,.50), rgba(156,255,0,.16)); opacity: .5; }
.gate-actor {
  position: absolute;
  left: 12%;
  top: 50%;
  width: 112px;
  height: 132px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(156,255,0,.34);
  background: rgba(0,0,0,.42);
  color: rgba(237,241,238,.72);
  display: grid;
  place-items: center;
  gap: 6px;
  cursor: grab;
  touch-action: none;
  font-family: var(--head-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 0 30px rgba(156,255,0,.06), inset 0 0 30px rgba(156,255,0,.04);
}
.gate-actor.is-dragging { cursor: grabbing; border-color: var(--green); box-shadow: 0 0 34px rgba(156,255,0,.18), inset 0 0 30px rgba(156,255,0,.08); }
.gate-actor-core { position: relative; width: 42px; height: 82px; }
.gate-actor-core::before { content: ""; position: absolute; left: 50%; top: 0; width: 22px; height: 22px; transform: translateX(-50%); border: 1px solid rgba(237,241,238,.68); border-radius: 50%; background: rgba(156,255,0,.10); }
.gate-actor-core::after { content: ""; position: absolute; left: 50%; top: 29px; width: 1px; height: 52px; background: rgba(237,241,238,.58); box-shadow: -18px 12px 0 -17px rgba(237,241,238,.7), 18px 12px 0 -17px rgba(237,241,238,.7), -12px 50px 0 -11px rgba(237,241,238,.7), 12px 50px 0 -11px rgba(237,241,238,.7); }
.gate-actor strong, .gate-target strong { font-size: 9px; font-weight: 400; color: var(--green); }
.gate-target { position: absolute; right: 10%; top: 50%; width: 170px; height: 132px; transform: translateY(-50%); border: 1px solid rgba(237,241,238,.18); display: grid; place-items: center; gap: 4px; color: rgba(237,241,238,.58); background: rgba(0,0,0,.28); box-shadow: inset 0 0 35px rgba(156,255,0,.025); }
.gate-target.is-hot { border-color: var(--green); box-shadow: 0 0 28px rgba(156,255,0,.16), inset 0 0 45px rgba(156,255,0,.055); }
.gate-screen { position: relative; width: 76px; height: 48px; border: 1px solid rgba(156,255,0,.56); background: radial-gradient(circle at 58% 50%, rgba(156,255,0,.24), transparent 42%); }
.gate-screen::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 1px; height: 17px; background: rgba(237,241,238,.25); }
.gate-desk { width: 118px; height: 1px; background: rgba(237,241,238,.32); box-shadow: -46px 18px 0 -45px rgba(237,241,238,.3), 46px 18px 0 -45px rgba(237,241,238,.3); }
.gate-keyboard { margin-top: 18px; border: 1px solid rgba(237,241,238,.16); background: transparent; color: rgba(237,241,238,.44); height: 38px; padding: 0 18px; font-family: var(--head-font); text-transform: uppercase; letter-spacing: .16em; font-size: 9px; cursor: pointer; }
.gate-keyboard:hover { color: var(--green); border-color: rgba(156,255,0,.4); }
.language-switcher { pointer-events: auto; display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 9px; color: rgba(237,241,238,.50); font-family: var(--head-font); text-transform: uppercase; letter-spacing: .18em; font-size: 9px; }
.language-switcher select { appearance: none; min-width: 92px; height: 30px; padding: 0 24px 0 10px; border: 1px solid rgba(237,241,238,.18); border-radius: 0; background: linear-gradient(180deg, rgba(0,0,0,.44), rgba(156,255,0,.035)); color: rgba(237,241,238,.78); font-family: var(--head-font); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.language-switcher select:focus { outline: 1px solid rgba(156,255,0,.46); outline-offset: 2px; }
.topbar > .language-switcher { position: absolute; top: clamp(94px, 11.5vh, 122px); right: clamp(43px, 4.8vw, 92px); transform: translateY(var(--topbar-y)); opacity: var(--topbar-opacity); transition: opacity .16s linear; }
.system-panel-bar > .language-switcher { justify-self: end; margin-right: clamp(20px, 2vw, 42px); }
.system-panel-bar { grid-template-columns: minmax(240px, 1fr) auto auto minmax(200px, .85fr); }
html[data-lang="ar"] .language-switcher select { font-family: var(--body-font); }
html[data-lang="ar"] [data-i18n], html[data-lang="ar"] [data-i18n-html] { letter-spacing: .04em; }
html[data-lang="ar"] .gate-help, html[data-lang="ar"] .about-copy p, html[data-lang="ar"] .contact-lines p { direction: rtl; }

@media (max-width: 980px) {
  .topbar > .language-switcher { right: 22px; top: 82px; transform: scale(.86) translateY(var(--topbar-y)); transform-origin: top right; }
  .system-panel-bar > .language-switcher { display: none; }
  .gate-panel { min-height: 560px; padding: 28px 20px 58px; }
  .gate-playfield { height: 280px; }
  .gate-actor { left: 50%; top: 28%; width: 104px; height: 122px; }
  .gate-target { left: 50%; right: auto; top: 72%; transform: translate(-50%, -50%); }
  .gate-link { left: 50%; right: auto; top: 42%; width: 1px; height: 70px; background: linear-gradient(180deg, rgba(156,255,0,.14), rgba(156,255,0,.55), rgba(156,255,0,.12)); }
}
.mini-action em { font-style: normal; }
.availability span { vertical-align: middle; }


/* v11 final: compact CAPTCHA, ambient audio module, custom language menu */
.gate-panel {
  width: min(760px, calc(100vw - 44px));
  min-height: min(600px, calc(100svh - 44px));
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.6vw, 48px) 58px;
}
.gate-kicker {
  margin: 52px 0 8px;
  color: var(--green);
  font-family: var(--head-font);
  font-size: clamp(13px, 1.15vw, 19px);
  letter-spacing: .42em;
  text-shadow: 0 0 18px rgba(156,255,0,.22);
}
.gate-title {
  margin: 0;
  color: rgba(237,241,238,.90);
  font-size: clamp(18px, 2.4vw, 31px);
  line-height: 1.05;
  letter-spacing: .34em;
  font-weight: 400;
}
.gate-help {
  width: min(500px, 100%);
  margin: 12px 0 22px;
  color: rgba(237,241,238,.62);
  font-family: var(--body-font);
  text-transform: none;
  font-size: clamp(11px, .92vw, 13px);
  line-height: 1.55;
  letter-spacing: .025em;
}
.gate-playfield { height: clamp(170px, 25vh, 230px); }
.topbar > .language-switcher,
.system-panel-bar > .language-switcher { display: none !important; }
.system-panel-bar { grid-template-columns: minmax(240px, 1fr) auto minmax(200px, 1fr); }
.ambient-module {
  position: fixed;
  left: clamp(20px, 2.2vw, 42px);
  bottom: clamp(18px, 2.2vh, 36px);
  z-index: 190;
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 10px;
  pointer-events: auto;
}
.ambient-player {
  position: static;
  left: auto;
  bottom: auto;
  z-index: auto;
}
.language-menu { position: relative; font-family: var(--head-font); text-transform: uppercase; letter-spacing: .14em; }
.language-button {
  height: 42px;
  min-width: 128px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid rgba(237,241,238,.16);
  background: rgba(2,4,5,.54);
  color: rgba(237,241,238,.62);
  font-family: var(--head-font);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 44px rgba(0,0,0,.38), inset 0 0 0 1px rgba(0,0,0,.34);
  transition: border-color .24s ease, color .24s ease, box-shadow .24s ease;
}
.language-button strong { color: var(--green); font-weight: 400; letter-spacing: .18em; }
.language-button:hover,
.language-menu.is-open .language-button {
  border-color: rgba(156,255,0,.46);
  color: var(--green);
  box-shadow: 0 0 28px rgba(156,255,0,.11), 0 16px 44px rgba(0,0,0,.42);
}
.language-options {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(220px, calc(100vw - 40px));
  padding: 7px;
  border: 1px solid rgba(156,255,0,.30);
  background: linear-gradient(180deg, rgba(4,7,8,.96), rgba(1,3,4,.94));
  box-shadow: 0 20px 60px rgba(0,0,0,.68), 0 0 34px rgba(156,255,0,.08), inset 0 0 0 1px rgba(255,255,255,.035);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.985);
  transform-origin: bottom left;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.language-menu.is-open .language-options { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.language-options::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(255,255,255,.035) 5px 6px);
  opacity: .28;
}
.language-option {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 34px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid rgba(237,241,238,.07);
  background: transparent;
  color: rgba(237,241,238,.58);
  font-family: var(--head-font);
  font-size: 10px;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.language-option:last-child { border-bottom: 0; }
.language-option span { color: rgba(156,255,0,.55); }
.language-option strong { font-weight: 400; }
.language-option:hover,
.language-option.is-active {
  color: var(--green);
  background: linear-gradient(90deg, rgba(156,255,0,.11), transparent 78%);
  text-shadow: 0 0 14px rgba(156,255,0,.22);
}
.language-option.is-active::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(156,255,0,.72);
  transform: translateY(-50%);
}
@media (max-width: 980px) {
  .ambient-module { left: 16px; right: 16px; bottom: 14px; grid-template-columns: 1fr auto; }
  .ambient-player { min-width: 132px; grid-template-columns: 1fr 38px; }
  .language-button { min-width: 78px; padding: 0 10px; }
  .language-button span { display: none; }
  .language-options { left: auto; right: 0; transform-origin: bottom right; }
  .gate-panel { min-height: 520px; padding: 24px 18px 54px; }
  .gate-title { font-size: 20px; }
  .gate-help { font-size: 11px; }
}


/* v12 Capabilities custom icons */
.process-line {
  grid-template-columns: repeat(5, minmax(0, 1fr) clamp(18px, 2.1vw, 46px)) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: clamp(10px, 1.2vh, 18px) clamp(8px, .8vw, 16px) clamp(2px, .6vh, 8px);
}
.process-line::before { display: none !important; }
.process-line article {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
}
.capability-icon {
  display: block;
  width: clamp(54px, 4.4vw, 84px);
  height: auto;
  margin: 0 auto clamp(8px, .85vh, 12px);
  object-fit: contain;
  opacity: .93;
  filter: drop-shadow(0 0 8px rgba(156,255,0,.12));
  user-select: none;
  pointer-events: none;
}
.capability-separator {
  align-self: start;
  justify-self: center;
  width: clamp(22px, 1.85vw, 42px);
  margin-top: clamp(22px, 2.25vw, 38px);
  opacity: .72;
  filter: drop-shadow(0 0 8px rgba(156,255,0,.22));
  user-select: none;
  pointer-events: none;
}
.capability-separator img {
  display: block;
  width: 100%;
  height: auto;
}
.process-line h3 { margin-top: 0; }
.process-line.is-current .capability-icon,
.process-line.is-pulse .capability-icon {
  opacity: 1;
  filter: drop-shadow(0 0 13px rgba(156,255,0,.25));
}
.process-line.is-current .capability-separator,
.process-line.is-pulse .capability-separator {
  opacity: .95;
  filter: drop-shadow(0 0 12px rgba(156,255,0,.34));
}
@media (max-width: 980px) {
  .process-line {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .capability-separator { display: none; }
  .capability-icon { width: clamp(54px, 16vw, 76px); }
}

/* v13: Selected Work expandable project detail pages */
button.work-card {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .26s ease, box-shadow .26s ease, transform .26s ease, filter .26s ease;
}
button.work-card:hover,
button.work-card:focus-visible {
  border-color: rgba(156,255,0,.52);
  box-shadow: inset 0 0 0 1px rgba(156,255,0,.15), 0 0 32px rgba(156,255,0,.09);
  filter: brightness(1.12) saturate(1.08);
  outline: none;
}
button.work-card:active { transform: scale(.992); }
button.work-card.is-opening {
  border-color: rgba(156,255,0,.82);
  box-shadow: 0 0 42px rgba(156,255,0,.18), inset 0 0 44px rgba(156,255,0,.06);
}

.project-modal {
  width: min(1680px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  border: 1px solid rgba(156,255,0,.42);
  padding: 0;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(3,5,6,.985), rgba(3,5,6,.94)),
    radial-gradient(circle at var(--project-origin-x, 50%) var(--project-origin-y, 48%), rgba(156,255,0,.10), transparent 34%);
  overflow: hidden;
  box-shadow:
    0 0 110px rgba(0,0,0,.88),
    0 0 74px rgba(156,255,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.035);
  opacity: 0;
  transform: translateY(12px) scale(.955);
  transform-origin: var(--project-origin-x, 50%) var(--project-origin-y, 50%);
}
.project-modal[open] {
  animation: projectExpandIn .42s cubic-bezier(.16, 1, .3, 1) forwards;
}
.project-modal::backdrop {
  background: rgba(0,0,0,.80);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  animation: reelBackdropIn .28s ease forwards;
}
.project-detail-frame {
  position: relative;
  min-height: min(84vh, 860px);
  max-height: calc(100dvh - 32px);
  padding: clamp(76px, 7vh, 96px) clamp(34px, 4vw, 70px) clamp(78px, 7.4vh, 98px);
  overflow-y: auto;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(156,255,0,.075) 1px, transparent 1px),
    linear-gradient(180deg, rgba(156,255,0,.060) 1px, transparent 1px),
    radial-gradient(circle at 48% 44%, rgba(156,255,0,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 22%, rgba(0,0,0,.24));
  background-size: 104px 104px, 104px 104px, auto, auto;
}
.project-detail-frame::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(237,241,238,.12);
  pointer-events: none;
  box-shadow: inset 0 0 54px rgba(0,0,0,.38);
}
.project-detail-frame::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 49%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(156,255,0,.42), rgba(237,241,238,.18), rgba(156,255,0,.20), transparent);
  opacity: .55;
}
.project-scan {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: .38;
  background: rgba(156,255,0,.32);
  box-shadow: 0 0 24px rgba(156,255,0,.20);
}
.project-scan-a { left: 7%; right: 7%; top: 21%; height: 1px; }
.project-scan-b { top: 11%; bottom: 13%; left: 22%; width: 1px; }
.project-panel {
  position: relative;
  z-index: 4;
  display: none;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
  gap: clamp(28px, 4vw, 74px);
  align-items: stretch;
}
.project-panel.is-active {
  display: grid;
  animation: projectPanelIn .34s ease both;
}
.project-visual {
  position: relative;
  min-height: min(52vh, 520px);
  border: 1px solid rgba(237,241,238,.14);
  overflow: hidden;
  background: rgba(0,0,0,.34);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 44px rgba(0,0,0,.42);
}
.project-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--thumb);
  filter: saturate(.92) contrast(1.08);
  opacity: .9;
}
.project-visual::after {
  display: none;
}
.project-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: #020303;
  object-fit: contain;
}
.project-media--poster {
  object-fit: contain;
  background: radial-gradient(circle at 50% 45%, rgba(156,255,0,.06), transparent 52%), #020303;
}
.project-media--embed { object-fit: initial; }
.project-visual.project-visual--widescreen {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  align-self: center;
}
.project-visual--poster::after {
  background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.42));
}
.project-visual--embed::after { display: none; }
.project-play-node {
  position: relative;
  z-index: 3;
  width: clamp(88px, 7vw, 126px);
  height: clamp(88px, 7vw, 126px);
  border: 1px solid rgba(156,255,0,.54);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(156,255,0,.21), rgba(0,0,0,.12) 52%, rgba(0,0,0,.46));
  box-shadow: 0 0 38px rgba(156,255,0,.20), inset 0 0 34px rgba(156,255,0,.10);
}
.project-play-node::before,
.project-play-node::after {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(237,241,238,.10);
  border-radius: 50%;
}
.project-play-node::after { inset: -34px; border-color: rgba(156,255,0,.12); }
.project-visual em {
  position: absolute;
  z-index: 4;
  left: 28px;
  bottom: 24px;
  color: rgba(237,241,238,.50);
  font-family: var(--head-font);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.project-copy {
  position: relative;
  border: 1px solid rgba(237,241,238,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.24), rgba(156,255,0,.025));
  padding: clamp(28px, 3.2vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 360px;
}
.project-copy::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-left: 1px solid rgba(156,255,0,.38);
  border-top: 1px solid rgba(156,255,0,.18);
  pointer-events: none;
}
.project-copy h2 {
  margin: 0 0 24px;
  color: rgba(237,241,238,.90);
  font-family: var(--head-font);
  font-size: clamp(30px, 3.2vw, 58px);
  line-height: .95;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.project-lead {
  margin: 0 0 34px;
  color: rgba(237,241,238,.60);
  font-size: clamp(13px, .92vw, 16px);
  line-height: 1.75;
}
.project-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.project-meta-grid p { margin: 0; color: rgba(237,241,238,.72); font-size: 12px; line-height: 1.5; }
.project-meta-grid span { display: block; margin-bottom: 5px; color: rgba(237,241,238,.36); font-family: var(--head-font); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.project-meta-grid b { font-weight: 400; }
.project-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.project-actions a {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255,142,35,.36);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(237,241,238,.72);
  font-family: var(--head-font);
  font-size: 9px;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.project-actions a:hover,
.project-actions a:focus-visible {
  color: #ff9a3c;
  border-color: rgba(255,142,35,.78);
  background: rgba(255,142,35,.045);
  box-shadow: 0 0 24px rgba(255,116,25,.20), inset 0 0 18px rgba(255,142,35,.055);
  outline: none;
}
.project-nav {
  position: relative;
  z-index: 5;
  left: auto;
  right: auto;
  bottom: auto;
  display: grid;
  grid-template-columns: 96px 1fr 96px;
  align-items: center;
  gap: 18px;
  margin-top: clamp(24px, 3vh, 36px);
  padding-top: clamp(18px, 2.2vh, 26px);
  border-top: 1px solid rgba(156,255,0,.26);
  font-family: var(--head-font);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.project-nav button {
  height: 38px;
  border: 1px solid rgba(237,241,238,.14);
  background: rgba(0,0,0,.28);
  color: rgba(237,241,238,.62);
  cursor: pointer;
  font-size: 10px;
  transition: border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.project-nav button:hover,
.project-nav button:focus-visible {
  color: var(--green);
  border-color: rgba(156,255,0,.46);
  box-shadow: inset 0 0 24px rgba(156,255,0,.035), 0 0 20px rgba(156,255,0,.08);
  outline: none;
}
.project-dots { display: flex; justify-content: center; gap: 8px; }
.project-dots button { width: 42px; padding: 0; }
.project-dots button.is-active { color: var(--green); border-color: rgba(156,255,0,.60); background: rgba(156,255,0,.04); }

@keyframes projectExpandIn {
  0% { opacity: 0; transform: translateY(16px) scale(.35); clip-path: inset(42% 42% 42% 42%); filter: blur(4px); }
  54% { opacity: 1; transform: translateY(0) scale(1.012); clip-path: inset(0 6% 0 6%); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0); filter: blur(0); }
}
@keyframes projectPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .project-modal { width: 94vw; }
  .project-detail-frame { min-height: 82vh; padding: 78px 24px 94px; }
  .project-panel.is-active { grid-template-columns: 1fr; gap: 22px; }
  .project-visual { min-height: 260px; }
  .project-copy { min-height: 0; padding: 28px; }
  .project-copy h2 { font-size: clamp(30px, 9vw, 46px); }
  .project-meta-grid { grid-template-columns: 1fr; }
  .project-nav { grid-template-columns: 72px 1fr 72px; left: auto; right: auto; bottom: auto; gap: 10px; }
  .project-dots { gap: 5px; }
  .project-dots button { width: 32px; font-size: 9px; }
}

/* v14 MOBILE VERSION ------------------------------------------------------
   Automatic smartphone layout. Desktop visual system is preserved above.
   Mobile bypasses the access-gate and converts the system page into a clean
   vertical portfolio flow instead of the wide dashboard composition. */
@media (max-width: 767px), (pointer: coarse) {
  html { scroll-padding-top: 78px; }
  body { overflow-x: hidden; }

  /* No CAPTCHA / access mini-game on smartphones */
  body.gate-locked { overflow: auto; }
  body.gate-locked .site-shell,
  body.gate-locked .ambient-player,
  body.gate-locked .ambient-module { filter: none; pointer-events: auto; user-select: auto; }
  .access-gate { display: none !important; }

  .site-shell { min-height: auto; }
  .bg-video { object-position: 50% 50%; }
  .bg-overlay {
    background:
      radial-gradient(circle at 52% 74%, rgba(156, 255, 0, .16), transparent 12%),
      radial-gradient(circle at 50% 8%, rgba(232, 244, 241, .16), transparent 30%),
      linear-gradient(90deg, rgba(0,0,0,.64), rgba(0,0,0,.24) 52%, rgba(0,0,0,.72)),
      linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.16) 54%, rgba(0,0,0,.78));
  }

  /* Mobile top navigation */
  .topbar {
    height: 78px;
    z-index: 220;
    background: linear-gradient(180deg, rgba(3,5,6,.92), rgba(3,5,6,.68), transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .brand-mark { display: none; }
  .brand-name {
    left: 16px;
    top: 16px;
    font-size: 12px;
    letter-spacing: .34em;
  }
  .brand-sign {
    left: 0;
    top: 19px;
    font-size: 18px;
    letter-spacing: .02em;
  }
  .nav {
    left: 16px;
    right: 16px;
    top: 50px;
    transform: none;
    gap: 0;
    justify-content: space-between;
    font-size: 9px;
    letter-spacing: .14em;
  }
  .nav a.is-active::before { left: -12px; }
  .nav a.is-active::after { right: -12px; }
  .nav a:not(.is-active)::after { bottom: -7px; }
  .signal-status {
    right: 14px;
    top: 13px;
    min-width: 72px;
    grid-template-columns: 1fr 8px;
    column-gap: 6px;
    letter-spacing: .13em;
  }
  .signal-title { font-size: 7px; }
  .signal-value { font-size: 9px; line-height: 1.35; }
  .signal-dot { width: 6px; height: 6px; }

  /* Hero: compact mobile composition */
  .hero {
    min-height: 100svh;
    padding: 102px 18px 96px;
    overflow: visible;
  }
  .hero-copy {
    position: relative;
    z-index: 20;
    left: auto;
    top: auto;
    width: 100%;
    padding-top: min(4svh, 32px);
  }
  .eyebrow {
    margin: 0 0 16px 16px;
    font-size: 9px;
    letter-spacing: .13em;
  }
  h1 {
    font-size: clamp(42px, 14vw, 60px);
    line-height: 1.06;
    letter-spacing: .045em;
    max-width: 94vw;
  }
  h1 span { white-space: normal; }
  .hero-subgrid {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 22px;
    grid-template-columns: 32px 1fr;
    gap: 12px;
  }
  .hero-subgrid p { font-size: 10px; line-height: 1.75; letter-spacing: .12em; }
  .target-ring { width: 20px; height: 20px; }

  .logo-stage {
    z-index: 10;
    opacity: .52;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  #logoCanvas { filter: drop-shadow(0 24px 52px rgba(0,0,0,.86)); }
  .logo-glow { opacity: .58; }

  .hero-actions {
    position: relative;
    z-index: 22;
    right: auto;
    top: auto;
    width: 100%;
    margin-top: 30px;
    display: grid;
    gap: 12px;
  }
  .cta, .cta-showreel, .cta-project {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: 10px;
    letter-spacing: .13em;
  }
  .location-note,
  .scroll-note,
  .est-note,
  .bottom-progress { display: none; }

  /* System page becomes a vertical mobile page */
  .system-dashboard {
    min-height: auto;
    padding: 0 12px 120px;
  }
  .system-rail { display: none; }
  .system-frame {
    width: 100%;
    margin: 0;
    border-color: rgba(237,241,238,.12);
    overflow: visible;
  }
  .frame-corner { width: 12px; height: 12px; }

  .system-sticky-head {
    position: relative !important;
    top: auto !important;
    z-index: 10;
    overflow: visible;
    border-bottom: 1px solid rgba(156,255,0,.18);
  }
  .system-sticky-head::before,
  .system-sticky-head::after { opacity: .38; }
  .system-panel-bar {
    position: sticky;
    top: 0;
    z-index: 180;
    height: auto;
    min-height: 62px;
    padding: 12px 14px 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .system-panel-brand {
    position: static;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    letter-spacing: .28em;
  }
  .system-panel-brand em { font-size: 18px; }
  .system-panel-nav {
    position: static;
    transform: none;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    font-size: 8px;
    letter-spacing: .12em;
  }
  .system-panel-nav a { padding: 7px 5px; border: 1px solid rgba(237,241,238,.08); background: rgba(0,0,0,.18); }
  .system-panel-status { display: none; }

  .system-top {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
    padding: 22px 14px 28px;
  }
  .system-hero-copy {
    padding: 0;
    min-height: 0;
  }
  .system-eyebrow,
  .system-spec,
  .availability { font-size: 9px; letter-spacing: .12em; }
  .system-hero-copy h2,
  .system-hero-copy h2.theory-title {
    font-size: clamp(38px, 13vw, 58px) !important;
    line-height: 1.02;
    margin: 10px 0 16px;
  }
  .system-actions { grid-template-columns: 1fr; gap: 10px; max-width: none; }
  .mini-action { min-height: 42px; justify-content: center; }
  .system-logo-slot { min-height: 120px; display: none; }
  .core-note { display: none !important; }

  /* Mobile index as horizontal section selector */
  .system-grid-shell {
    display: block !important;
    padding: 0;
  }
  .system-grid-shell::before { display: none !important; }
  .section-index {
    position: sticky;
    top: 85px;
    z-index: 120;
    display: flex !important;
    grid-template-rows: none !important;
    overflow-x: auto;
    gap: 8px;
    padding: 10px 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(237,241,238,.10);
    background: linear-gradient(180deg, rgba(3,5,6,.92), rgba(3,5,6,.72));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    scrollbar-width: none;
  }
  .section-index::-webkit-scrollbar { display: none; }
  .section-index a {
    min-width: 132px;
    padding: 10px 12px !important;
    min-height: 78px;
    border: 1px solid rgba(237,241,238,.10);
    background: rgba(0,0,0,.28);
  }
  .section-index a span { font-size: 18px; }
  .section-index a strong { font-size: 9px; }
  .section-index a small { display: none; }
  .section-index a em { margin-top: 8px; font-size: 8px; }

  .system-content {
    display: block !important;
    padding: 0;
  }
  .reel-strip,
  .work-strip,
  .process-line,
  .about-block,
  .contact-block {
    grid-row: auto !important;
    margin: 18px 0 0;
    border: 1px solid rgba(237,241,238,.10);
    background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(156,255,0,.018));
  }

  .reel-strip { min-height: 220px; padding: 12px; }
  .reel-placeholder { min-height: 196px; }
  .big-play { width: 62px; height: 62px; }

  .work-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 12px;
  }
  .work-card {
    min-height: 176px;
    width: 100%;
  }
  .work-card h3 { font-size: 12px; }
  .work-card p { font-size: 9px; }

  .process-line {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0;
    padding: 18px 12px;
  }
  .process-line article {
    min-height: 150px;
    padding: 18px 12px;
    border-bottom: 1px solid rgba(237,241,238,.08);
  }
  .process-line article:last-of-type { border-bottom: 0; }
  .capability-icon { width: min(45vw, 150px); max-height: 116px; object-fit: contain; }
  .capability-separator {
    display: grid;
    place-items: center;
    height: 28px;
    opacity: .55;
  }
  .capability-separator img {
    width: 74px;
    height: auto;
    transform: rotate(90deg) scale(.7);
  }

  .about-contact-row { display: block !important; }
  .about-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 14px;
  }
  .avatar-placeholder { width: 100%; min-height: 160px; }
  .about-copy p { font-size: 13px; line-height: 1.65; }
  .stats { grid-template-columns: 1fr; gap: 10px; }

  .contact-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 14px 24px;
  }
  .contact-copy h2 { font-size: clamp(24px, 8vw, 34px); line-height: 1.15; }
  .contact-meta { grid-template-columns: 1fr; gap: 14px; }
  .globe-panel { min-height: 150px; }

  .system-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 14px 92px;
    text-align: center;
  }

  /* Mobile fixed audio / language block */
  .ambient-module {
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 240;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
  }
  .ambient-player {
    position: static;
    min-width: 0;
    height: 42px;
    grid-template-columns: 1fr 42px 34px;
    padding: 0 12px;
  }
  .ambient-label { display: inline; font-size: 9px; }
  .language-menu { position: relative; }
  .language-button { height: 42px; min-width: 86px; }
  .language-options {
    left: auto;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 168px;
  }

  /* Mobile dialogs */
  .reel-modal,
  .contact-modal,
  .project-modal {
    width: 94vw !important;
    max-width: 94vw !important;
    max-height: 86svh;
    padding: 0;
  }
  .modal-frame,
  .contact-modal-frame,
  .project-detail-frame {
    min-height: 70svh;
    padding: 64px 18px 72px !important;
  }
  .modal-hud { left: 18px !important; right: 48px !important; font-size: 7px; gap: 8px; }
  .modal-close { right: 16px; top: 16px; width: 34px; height: 34px; }
  .contact-modal-grid,
  .project-panel.is-active { grid-template-columns: 1fr !important; gap: 18px; }
  .project-visual { min-height: 220px; }
  .project-copy { min-height: 0; padding: 22px 18px; }
  .project-copy h2 { font-size: clamp(28px, 10vw, 42px); }
  .project-meta-grid { grid-template-columns: 1fr; }
  .project-nav {
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 58px 1fr 58px;
    gap: 6px;
  }
  .project-dots { gap: 3px; }
  .project-dots button { width: 27px; font-size: 8px; }
}

@media (max-width: 380px) {
  .nav { font-size: 8px; letter-spacing: .08em; }
  .brand-name { font-size: 10px; letter-spacing: .28em; }
  h1 { font-size: clamp(38px, 13vw, 50px); }
  .system-panel-nav { font-size: 7px; }
  .section-index a { min-width: 112px; }
  .ambient-module { grid-template-columns: 1fr; }
  .language-button { width: 100%; justify-content: space-between; }
}


/* V15 mobile final fix: simplify smartphone system page. */
@media (max-width: 767px), (pointer: coarse) {
  .nav a[href="#work"],
  .nav a[href="#process"],
  .system-panel-nav a[href="#work"],
  .system-panel-nav a[href="#process"],
  .section-index a[data-index-target="work"],
  .section-index a[data-index-target="process"],
  #work,
  #process {
    display: none !important;
  }

  .section-index {
    justify-content: flex-start;
  }

  .section-index a {
    min-width: 138px;
  }

  .system-panel-nav {
    justify-content: center;
    gap: 12px;
  }

  .system-panel-nav a[href="#about"],
  .system-panel-nav a[href="#contact"] {
    min-width: 108px;
    text-align: center;
  }
}

/* v16 single page redesign: no scroll, no captcha, all navigation opens HUD modules */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}
body.single-page-site {
  min-height: 100dvh;
  overflow: hidden !important;
}
body.single-page-site .access-gate,
body.single-page-site .system-dashboard,
body.single-page-site .system-rail,
body.single-page-site .system-frame,
body.single-page-site .system-footer,
body.single-page-site .location-note,
body.single-page-site .scroll-note,
body.single-page-site .est-note,
body.single-page-site .bottom-progress { display: none !important; }
body.single-page-site .site-shell { min-height: 100dvh; height: 100dvh; overflow: hidden; }
body.single-page-site .hero.segment { min-height: 100dvh; height: 100dvh; overflow: hidden; }
body.single-page-site .topbar { height: clamp(74px, 9vh, 106px); }
body.single-page-site .brand-mark,
body.single-page-site .brand-name,
body.single-page-site .signal-status,
body.single-page-site .nav {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.single-page-site .hero-copy { left: clamp(44px, 4.45vw, 86px); top: clamp(250px, 34vh, 360px); }
body.single-page-site h1 {
  font-size: clamp(45px, 3.76vw, 76px);
  line-height: .98;
  letter-spacing: .055em;
}
body.single-page-site h1 span { margin: 0 0 .085em; }
body.single-page-site .hero-subgrid { top: calc(100% + clamp(34px, 4.4vh, 62px)); }
body.single-page-site .logo-stage { width: clamp(408px, 28.05vw, 544px); }
body.single-page-site .hero-actions { right: clamp(52px, 5.2vw, 108px); top: 43.5%; gap: 20px; }
body.single-page-site .cta { height: clamp(58px, 6.1vh, 76px); }
body.single-page-site .cta-showreel {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,122,24,.85);
  box-shadow: 0 0 18px rgba(255,122,24,.22), inset 0 0 28px rgba(255,122,24,.08);
  animation: showreelOrangePulse 2.45s ease-in-out infinite;
}
body.single-page-site .cta-showreel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.48), rgba(0,0,0,.78));
  z-index: 1;
}
body.single-page-site .cta-showreel::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(255,122,24,.38);
  box-shadow: 0 0 18px rgba(255,122,24,.28);
  pointer-events: none;
  z-index: 3;
}
body.single-page-site .cta-showreel > *:not(.cta-bg-video) { position: relative; z-index: 2; }
.cta-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .58;
  filter: brightness(.68) contrast(1.18) saturate(.78);
  z-index: 0;
  pointer-events: none;
}
@keyframes showreelOrangePulse {
  0%,100% { border-color: rgba(255,122,24,.56); box-shadow: 0 0 14px rgba(255,122,24,.14), inset 0 0 18px rgba(255,122,24,.06); }
  50% { border-color: rgba(255,146,42,.95); box-shadow: 0 0 34px rgba(255,122,24,.32), inset 0 0 36px rgba(255,122,24,.12); }
}
body.single-page-site .cta-showreel .play-icon { border-left-color: rgba(255,175,88,.96); filter: drop-shadow(0 0 10px rgba(255,122,24,.55)); }

.hero-about-card {
  position: absolute;
  right: clamp(50px, 5.5vw, 112px);
  top: auto;
  bottom: clamp(84px, 10vh, 122px);
  z-index: 13;
  width: clamp(220px, 14vw, 292px);
  aspect-ratio: 1 / 1;
  padding: clamp(16px, 1.15vw, 24px);
  border: 1px solid rgba(237,241,238,.13);
  background: linear-gradient(145deg, rgba(2,5,6,.66), rgba(2,5,6,.30)), radial-gradient(circle at 74% 28%, rgba(156,255,0,.10), transparent 44%);
  box-shadow: inset 0 0 42px rgba(156,255,0,.035), 0 0 28px rgba(0,0,0,.45);
  cursor: default;
  overflow: hidden;
  pointer-events: none;
}
.hero-about-card::before,
.hero-about-card::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(156,255,0,.60);
  pointer-events: none;
}
.hero-about-card::before { left: -1px; top: -1px; border-left: 1px solid; border-top: 1px solid; }
.hero-about-card::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.hero-about-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(237,241,238,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(237,241,238,.035) 1px, transparent 1px); background-size: 34px 34px; opacity: .25; }
.about-card-kicker { position: relative; margin: 0 0 16px; font-family: var(--head-font); color: var(--green); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.about-card-name { position: relative; margin: 0 0 18px; color: rgba(237,241,238,.82); font-family: var(--head-font); font-size: clamp(14px, .95vw, 18px); letter-spacing: .12em; text-transform: uppercase; }
.about-card-text { position: relative; margin: 0; color: rgba(237,241,238,.60); font-size: clamp(11px, .75vw, 14px); line-height: 1.55; }
.hero-about-card small { position: absolute; left: clamp(18px, 1.35vw, 28px); right: clamp(18px, 1.35vw, 28px); bottom: clamp(16px, 1.1vw, 24px); color: rgba(156,255,0,.70); font-family: var(--head-font); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.hero-about-card:hover { border-color: rgba(237,241,238,.13); box-shadow: inset 0 0 42px rgba(156,255,0,.035), 0 0 28px rgba(0,0,0,.45); }

/* Generic content modals */
.content-modal { width: min(1180px, calc(100vw - 54px)); max-height: min(820px, calc(100dvh - 54px)); border: 0; padding: 0; background: transparent; color: var(--text); overflow: visible; }
.content-modal::backdrop { background: radial-gradient(circle at 50% 45%, rgba(156,255,0,.045), transparent 42%), rgba(0,0,0,.78); backdrop-filter: blur(10px); }
.content-modal-frame { position: relative; border: 1px solid rgba(237,241,238,.18); background: linear-gradient(145deg, rgba(3,5,6,.96), rgba(3,5,6,.88)), radial-gradient(circle at 78% 18%, rgba(156,255,0,.08), transparent 32%); box-shadow: 0 26px 90px rgba(0,0,0,.62), inset 0 0 52px rgba(156,255,0,.035); padding: clamp(58px, 6vh, 78px) clamp(32px, 3.2vw, 62px) clamp(50px, 5vh, 70px); overflow: hidden; transform-origin: center; animation: modalReveal .34s cubic-bezier(.2,.9,.14,1) both; }
.content-modal-frame::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px); opacity: .18; pointer-events: none; }
.modal-section-copy { position: relative; z-index: 2; margin-bottom: 26px; max-width: 620px; }
.modal-section-copy h2 { margin: 0 0 12px; font-family: var(--head-font); font-size: clamp(34px, 3vw, 62px); line-height: .95; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.modal-section-copy p:not(.modal-kicker) { margin: 0; color: rgba(237,241,238,.58); line-height: 1.65; }
.modal-work-grid .work-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; height: auto; margin: 0; }
.modal-work-grid .work-card { min-height: 158px; }
.modal-process-wrap .process-line { display: grid; grid-template-columns: repeat(11, auto); align-items: center; gap: clamp(8px, 1.15vw, 18px); border: 1px solid rgba(156,255,0,.18); padding: clamp(18px, 2vw, 30px); }
.about-modal-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(170px, 260px) 1fr; gap: clamp(28px, 4vw, 70px); align-items: center; }
.about-modal { width: min(1320px, calc(100vw - 54px)); max-height: calc(100dvh - 54px); }
.about-modal-frame { max-height: calc(100dvh - 54px); overflow-y: auto; }
.about-modal-avatar { width: 100%; aspect-ratio: 1 / 1.2; }
.about-modal-copy h2 { margin: 0 0 18px; font-family: var(--head-font); font-weight: 400; font-size: clamp(24px, 1.8vw, 36px); line-height: 1.12; letter-spacing: .05em; text-transform: uppercase; }
.about-modal-copy h2 strong { color: var(--green); font-weight: 400; }
.about-modal-copy p:not(.modal-kicker) { margin: 0 0 12px; color: rgba(237,241,238,.64); font-size: clamp(13px, .9vw, 15px); line-height: 1.58; max-width: 820px; }
.about-modal-copy small { color: rgba(156,255,0,.74); font-family: var(--head-font); letter-spacing: .12em; text-transform: uppercase; }
.about-modal-stats { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.about-modal-stats li { border: 1px solid rgba(237,241,238,.13); padding: 18px; background: rgba(255,255,255,.025); }

@media (max-width: 1180px) {
  body.single-page-site .hero-actions { right: 42px; top: 44%; }
  .hero-about-card { right: 42px; top: auto; bottom: 92px; width: 220px; }
  body.single-page-site .hero-copy { top: 30vh; }
}
@media (max-width: 820px) {
  body.single-page-site .nav { display: flex; left: 50%; top: 96px; gap: 22px; }
  body.single-page-site .brand-sign { display: none; }
  body.single-page-site .hero-copy { left: 26px; top: 24vh; }
  body.single-page-site h1 { font-size: clamp(37px, 10vw, 58px); line-height: 1; }
  body.single-page-site .logo-stage { left: 70% !important; top: 39% !important; width: clamp(220px, 48vw, 340px) !important; opacity: .45 !important; }
  body.single-page-site .hero-actions { left: 26px; right: 26px; top: auto; bottom: 188px; width: auto; }
  body.single-page-site .cta { width: 100%; }
  .hero-about-card { display: none; }
  .ambient-module { bottom: 20px; left: 20px; }
  .content-modal { width: calc(100vw - 26px); max-height: calc(100dvh - 26px); }
  .content-modal-frame { padding: 54px 18px 48px; overflow: auto; max-height: calc(100dvh - 26px); }
  .modal-work-grid .work-strip { grid-template-columns: 1fr; }
  .modal-process-wrap .process-line { grid-template-columns: 1fr; }
  .capability-separator { display: none; }
  .about-modal-layout { grid-template-columns: 1fr; }
  .about-modal-stats { grid-template-columns: 1fr; }
}


/* V20 mobile dedicated showreel button: hidden on desktop, shown in mobile flow under headline. */
.mobile-showreel-cta { display: none; }
/* V18 mobile rebuild for the final single-screen homepage -----------------
   Keeps desktop unchanged. Updates the smartphone layout after the v16/v17
   single-page/modal redesign and restores Work/Process modal content. */
@media (max-width: 767px), (pointer: coarse) {
  html,
  body,
  body.single-page-site {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.single-page-site .site-shell,
  body.single-page-site .hero.segment {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body.single-page-site .bg-video {
    object-position: 50% 50%;
    filter: brightness(.82) contrast(1.05) saturate(.96);
  }

  body.single-page-site .bg-overlay {
    background:
      radial-gradient(circle at 64% 38%, rgba(156, 255, 0, .15), transparent 18%),
      radial-gradient(circle at 50% 4%, rgba(232, 244, 241, .16), transparent 29%),
      linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .78) 76%, rgba(0, 0, 0, .91));
  }

  body.single-page-site .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 112px;
    padding: 16px 18px 0;
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-rows: 38px 46px;
    column-gap: 10px;
    align-items: center;
    z-index: 60;
    background: linear-gradient(180deg, rgba(2, 4, 5, .82), rgba(2, 4, 5, .26), transparent);
    backdrop-filter: blur(6px);
  }

  body.single-page-site .brand-mark {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 1;
    width: 34px;
    height: 34px;
  }

  body.single-page-site .brand-name {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    transform: none !important;
  }

  body.single-page-site .brand-word {
    font-size: 16px;
    letter-spacing: .18em;
  }

  body.single-page-site .brand-sign {
    display: none !important;
  }

  body.single-page-site .signal-status {
    display: none !important;
  }

  body.single-page-site .nav {
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 6px;
  }

  body.single-page-site .nav a,
  body.single-page-site .nav a[href="#workModal"],
  body.single-page-site .nav a[href="#processModal"] {
    display: grid !important;
    place-items: center;
    min-width: 0;
    height: 34px;
    padding: 0 4px;
    border: 1px solid rgba(237, 241, 238, .14);
    background: rgba(0, 0, 0, .24);
    font-size: 9px;
    letter-spacing: .13em;
    color: rgba(237, 241, 238, .70);
  }

  body.single-page-site .nav a.is-active {
    border-color: rgba(156, 255, 0, .48);
    color: var(--green);
    box-shadow: inset 0 0 18px rgba(156,255,0,.055), 0 0 14px rgba(156,255,0,.08);
  }

  body.single-page-site .hero-copy {
    left: 20px;
    right: 18px;
    top: max(136px, 17.5dvh);
    width: auto;
    max-width: 360px;
    z-index: 18;
  }

  body.single-page-site .eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: .15em;
  }

  body.single-page-site h1 {
    font-size: clamp(36px, 11.6vw, 52px);
    line-height: .88;
    letter-spacing: .045em;
  }

  body.single-page-site h1 span {
    margin-bottom: .04em;
  }

  body.single-page-site .hero-subgrid {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 18px;
    max-width: 220px;
    gap: 12px;
  }

  body.single-page-site .hero-subgrid p {
    font-size: 9px;
    line-height: 1.55;
    letter-spacing: .14em;
  }

  body.single-page-site .target-ring {
    width: 35px;
    height: 35px;
    min-width: 35px;
  }

  body.single-page-site .logo-stage {
    z-index: 9;
    pointer-events: none;
    filter: saturate(.92) brightness(.95);
  }

  body.single-page-site .logo-glow {
    opacity: .42;
  }

  body.single-page-site .hero-actions {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: calc(185px + env(safe-area-inset-bottom));
    width: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    z-index: 32;
  }

  body.single-page-site .cta {
    width: 100%;
    height: 50px;
    min-height: 50px;
    padding: 0 18px;
    font-size: 10px;
    letter-spacing: .13em;
  }

  body.single-page-site .cta i {
    font-size: 9px;
  }

  body.single-page-site .cta-showreel {
    box-shadow: 0 0 22px rgba(255, 122, 24, .24), inset 0 0 24px rgba(255, 122, 24, .10);
  }

  body.single-page-site .hero-about-card {
    display: none !important;
  }

  body.single-page-site .ambient-module {
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    z-index: 48;
  }

  body.single-page-site .ambient-player,
  body.single-page-site .language-button {
    min-height: 40px;
    height: 40px;
    padding: 0 12px;
  }

  body.single-page-site .ambient-label,
  body.single-page-site .ambient-state,
  body.single-page-site .language-button span,
  body.single-page-site .language-button strong {
    font-size: 8px;
  }

  body.single-page-site .language-options {
    bottom: calc(100% + 10px);
    top: auto;
    right: 0;
    min-width: 180px;
  }

  /* Restore Work/Process content hidden by the older v15 mobile system-page simplification. */
  body.single-page-site #work,
  body.single-page-site #process {
    display: grid !important;
  }

  body.single-page-site .content-modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  body.single-page-site .content-modal-frame {
    max-height: calc(100dvh - 20px);
    overflow: auto;
    padding: 52px 16px 44px;
  }

  body.single-page-site .modal-section-copy h2 {
    font-size: clamp(28px, 10vw, 42px);
  }

  body.single-page-site .modal-work-grid .work-strip,
  body.single-page-site .modal-process-wrap .process-line {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 14px;
  }

  body.single-page-site .work-card {
    min-height: 124px;
  }

  body.single-page-site .capability-separator {
    display: none !important;
  }

  body.single-page-site .process-node {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    text-align: left;
    gap: 14px;
  }

  body.single-page-site .process-node img {
    width: 56px;
    height: 56px;
  }

  body.single-page-site .about-modal-layout,
  body.single-page-site .contact-modal-grid {
    grid-template-columns: 1fr !important;
  }

  body.single-page-site .about-modal-stats {
    grid-template-columns: 1fr;
  }

  body.single-page-site .project-modal {
    width: calc(100vw - 20px);
  }

  body.single-page-site .project-detail-frame {
    max-height: calc(100dvh - 20px);
    min-height: 0;
    overflow: auto;
    padding: 58px 16px 82px;
  }

  body.single-page-site .project-panel.is-active {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.single-page-site .project-visual {
    min-height: 190px;
  }

  body.single-page-site .project-copy {
    min-height: 0;
    padding: 20px;
  }

  body.single-page-site .project-copy h2 {
    font-size: clamp(26px, 10vw, 42px);
  }
}

@media (max-width: 767px) and (max-height: 720px), (pointer: coarse) and (max-height: 720px) {
  body.single-page-site .topbar { height: 98px; padding-top: 10px; }
  body.single-page-site .hero-copy { top: 118px; }
  body.single-page-site h1 { font-size: clamp(30px, 10vw, 43px); }
  body.single-page-site .hero-subgrid { display: none; }
  body.single-page-site .logo-stage { opacity: .26 !important; }
  body.single-page-site .hero-actions { bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.single-page-site .ambient-module { grid-template-columns: 1fr auto; }
}

/* V19 mobile hero CTA fix: keep only Showreel button under the headline. */
@media (max-width: 767px), (pointer: coarse) {
  body.single-page-site .hero-actions {
    left: 22px !important;
    right: 22px !important;
    top: clamp(388px, 55dvh, 530px) !important;
    bottom: auto !important;
    width: auto !important;
    display: block !important;
    z-index: 34 !important;
  }

  body.single-page-site .hero-actions .cta-project {
    display: none !important;
  }

  body.single-page-site .cta-showreel {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    grid-template-columns: 46px 1fr !important;
    padding: 0 20px !important;
  }

  body.single-page-site .cta-showreel i {
    display: none !important;
  }

  body.single-page-site .cta-showreel span:nth-child(3),
  body.single-page-site .cta-showreel span[data-i18n="play_showreel"] {
    justify-self: center !important;
    text-align: center !important;
    font-size: 10px !important;
    letter-spacing: .16em !important;
  }

  body.single-page-site .cta-showreel .play-icon {
    justify-self: center !important;
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 14px;
  }
}

@media (max-width: 767px) and (max-height: 720px), (pointer: coarse) and (max-height: 720px) {
  body.single-page-site .hero-actions {
    top: clamp(318px, 53dvh, 410px) !important;
    bottom: auto !important;
  }
}


/* V20 fix: restore the mobile showreel button as a separate in-flow element.
   This avoids absolute-position conflicts with the logo, headline and lower dock. */
@media (max-width: 767px), (pointer: coarse) {
  body.single-page-site .hero-actions {
    display: none !important;
  }

  body.single-page-site .mobile-showreel-cta {
    position: relative;
    display: grid !important;
    grid-template-columns: 46px 1fr;
    align-items: center;
    width: min(100%, 430px);
    height: 52px;
    margin: 22px 0 0 0;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 122, 24, .82);
    background: rgba(0, 0, 0, .32);
    color: rgba(237, 241, 238, .88);
    font-family: var(--head-font);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 44;
    box-shadow:
      0 0 28px rgba(255, 122, 24, .24),
      inset 0 0 22px rgba(255, 122, 24, .10),
      inset 0 0 0 1px rgba(0,0,0,.35);
    animation: showreelOrangePulse 2.45s ease-in-out infinite;
  }

  body.single-page-site .mobile-showreel-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(0,0,0,.66), rgba(0,0,0,.38) 45%, rgba(0,0,0,.72)),
      linear-gradient(180deg, rgba(255,122,24,.12), transparent 45%, rgba(255,122,24,.08));
    z-index: 1;
    pointer-events: none;
  }

  body.single-page-site .mobile-showreel-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .56;
    filter: saturate(.92) contrast(1.08) brightness(.72);
    z-index: 0;
  }

  body.single-page-site .mobile-showreel-cta .play-icon,
  body.single-page-site .mobile-showreel-cta span:not(.play-icon) {
    position: relative;
    z-index: 2;
  }

  body.single-page-site .mobile-showreel-cta .play-icon {
    justify-self: center;
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 14px;
    border-left-color: rgba(255, 175, 88, .96);
    filter: drop-shadow(0 0 10px rgba(255,122,24,.55));
  }

  body.single-page-site .mobile-showreel-cta span[data-i18n="play_showreel"] {
    justify-self: center;
    text-align: center;
  }
}

@media (max-width: 767px) and (max-height: 720px), (pointer: coarse) and (max-height: 720px) {
  body.single-page-site .mobile-showreel-cta {
    height: 46px;
    margin-top: 16px;
    font-size: 9px;
  }
}

/* V21 desktop fix: align Showreel CTA geometry with Start a Project CTA.
   Desktop only: same right divider position, centered text, no orange play triangle. */
@media (min-width: 768px) and (pointer: fine) {
  body.single-page-site .hero-actions .cta-showreel {
    grid-template-columns: 1fr 72px;
    padding-left: 40px;
    color: rgba(237, 241, 238, .86);
  }

  body.single-page-site .hero-actions .cta-showreel .play-icon {
    display: none !important;
  }

  body.single-page-site .hero-actions .cta-showreel span[data-i18n="play_showreel"] {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }

  body.single-page-site .hero-actions .cta-showreel i {
    grid-column: 2;
    min-width: 72px;
    border-left-color: rgba(255, 122, 24, .34);
  }
}

/* V22 content, modal motion and responsive rebuild ----------------------- */
:root {
  --modal-motion: 1.2s;
  --signal-search: #ff3b35;
  --signal-locked: #99ddff;
}

.mobile-hero-actions { display: none; }

/* Symmetrical open/close motion. Dialogs remain mounted during the exit. */
dialog.site-dialog {
  animation: none !important;
  opacity: 0;
  transform: translateY(22px) scale(.955);
  clip-path: inset(46% 48% 46% 48%);
  transition:
    opacity var(--modal-motion) cubic-bezier(.16, 1, .3, 1),
    transform var(--modal-motion) cubic-bezier(.16, 1, .3, 1),
    clip-path var(--modal-motion) cubic-bezier(.16, 1, .3, 1);
}

dialog.site-dialog[open].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  clip-path: inset(0);
}

dialog.site-dialog.is-closing {
  opacity: 0;
  transform: translateY(18px) scale(.97);
  clip-path: inset(44% 47% 44% 47%);
  pointer-events: none;
}

dialog.site-dialog::backdrop {
  opacity: 0;
  animation: none !important;
  transition: opacity var(--modal-motion) ease;
}

dialog.site-dialog[open].is-visible::backdrop { opacity: 1; }
dialog.site-dialog.is-closing::backdrop { opacity: 0; }
dialog.site-dialog .content-modal-frame { animation: none !important; }

/* The close control has its own solid dock; the corner line stops before it. */
dialog.site-dialog .modal-close {
  top: 18px;
  right: 18px;
  z-index: 100;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0 0 4px;
  border: 1px solid rgba(237,241,238,.30);
  background: #050708;
  color: rgba(237,241,238,.88);
  font-size: 32px;
  line-height: 1;
  box-shadow: 0 0 0 10px rgba(3,5,6,.96), 0 0 30px rgba(0,0,0,.72);
}

dialog.site-dialog .modal-close:hover,
dialog.site-dialog .modal-close:focus-visible {
  color: #ff9a4d;
  border-color: rgba(255,122,24,.72);
  outline: none;
  box-shadow: 0 0 0 10px rgba(3,5,6,.96), 0 0 26px rgba(255,122,24,.26);
}

dialog.site-dialog .modal-corner-tr {
  right: 88px;
  width: 28px;
}

dialog.site-dialog .modal-hud-top { right: 116px; }

/* Signal state requested for the top-right indicator. */
.signal-value {
  color: var(--signal-locked) !important;
  text-shadow: 0 0 16px rgba(153,221,255,.45);
  transition: color .28s ease, text-shadow .28s ease, letter-spacing .28s ease;
}

body.is-searching .signal-value {
  color: var(--signal-search) !important;
  text-shadow: 0 0 18px rgba(255,59,53,.58) !important;
}

body.is-searching .signal-dot {
  background: var(--signal-search);
  box-shadow: 0 0 18px rgba(255,59,53,.85), 0 0 36px rgba(255,59,53,.30);
}

/* About */
.about-modal-layout {
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 68px);
}

.about-modal-avatar,
.about-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,122,24,.38);
  background: #030506;
  box-shadow: 0 0 44px rgba(255,46,42,.12), inset 0 0 30px rgba(0,0,0,.45);
  outline: none;
}

.about-portrait::before,
.about-portrait::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 42px;
  height: 42px;
  pointer-events: none;
}

.about-portrait::before { left: 12px; top: 12px; border-left: 1px solid #ff533d; border-top: 1px solid #ff533d; }
.about-portrait::after { right: 12px; bottom: 12px; border-right: 1px solid #7fdcff; border-bottom: 1px solid #7fdcff; }

.about-portrait-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1), filter 1.2s ease;
}

.about-portrait-primary { opacity: 1; object-position: 50% 36%; }
.about-portrait-alternate { opacity: 0; object-position: 50% 42%; transform: scale(1.045); }
.about-portrait:hover .about-portrait-primary,
.about-portrait.is-hovered .about-portrait-primary,
.about-portrait:focus-visible .about-portrait-primary { opacity: 0; transform: scale(1.045); }
.about-portrait:hover .about-portrait-alternate,
.about-portrait.is-hovered .about-portrait-alternate,
.about-portrait:focus-visible .about-portrait-alternate { opacity: 1; transform: scale(1); }

.about-portrait-scan {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 48%, rgba(255,255,255,.14) 50%, transparent 52%);
  background-size: 100% 130px;
  mix-blend-mode: screen;
  opacity: .34;
}

.about-modal-copy { min-width: 0; }
.about-modal-copy h2 { font-size: clamp(24px, 1.8vw, 36px); }
.about-modal-stats { margin-top: 24px; }
.about-modal-stats li { min-width: 0; }
.about-modal-stats li strong { display: block; color: #ff8b4c; text-shadow: 0 0 20px rgba(255,122,24,.22); }

.about-music-link {
  width: min(100%, 390px);
  min-height: 52px;
  margin-top: 22px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1fr 46px;
  align-items: center;
  border: 1px solid rgba(255,122,24,.50);
  color: rgba(237,241,238,.84);
  background: linear-gradient(90deg, rgba(255,122,24,.07), rgba(0,0,0,.24));
  font-family: var(--head-font);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.about-music-link i {
  height: 100%;
  display: grid;
  place-items: center;
  border-left: 1px solid rgba(255,122,24,.26);
  font-style: normal;
  font-size: 18px;
}

.about-music-link:hover,
.about-music-link:focus-visible {
  color: #ffad70;
  border-color: rgba(255,122,24,.90);
  outline: none;
  box-shadow: 0 0 28px rgba(255,122,24,.20), inset 0 0 24px rgba(255,122,24,.06);
}

/* Contact and five independent track players */
.contact-modal { width: min(1240px, calc(100vw - 34px)); max-height: calc(100dvh - 34px); }
.contact-modal-frame {
  min-height: min(72dvh, 680px);
  max-height: calc(100dvh - 34px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(76px, 8vh, 92px) clamp(30px, 3.6vw, 62px) clamp(58px, 6vh, 76px);
}

.contact-modal-grid { grid-template-columns: minmax(280px, .9fr) minmax(420px, 1.1fr); gap: clamp(30px, 4vw, 62px); }
.contact-channel h2 { white-space: normal; font-size: clamp(25px, 2.45vw, 42px); margin-bottom: 30px; }
.contact-channel h2 strong { display: block; }
.contact-lines { grid-template-columns: 1fr; gap: 14px; }
.contact-lines p { padding: 10px 0 12px; border-bottom: 1px solid rgba(237,241,238,.10); }
.contact-lines a,
.contact-lines strong { color: rgba(237,241,238,.82); font-weight: 400; transition: color .25s ease, text-shadow .25s ease; }
.contact-lines a:hover { color: #ff9c5a; text-shadow: 0 0 16px rgba(255,122,24,.25); }

.music-channel { padding: clamp(18px, 2vw, 26px); }
.music-channel h3 { margin-bottom: 16px; font-size: clamp(13px, 1.25vw, 18px); }
.track-list { gap: 8px; }

.track-row {
  height: auto;
  min-height: 52px;
  display: block;
  padding: 0;
  overflow: hidden;
  cursor: default;
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease, background .3s ease;
}

.track-row:hover,
.track-row:focus-within,
.track-row.is-playing,
.track-row.is-paused {
  color: #ffb078;
  border-color: rgba(255,122,24,.72);
  background: rgba(255,122,24,.035);
  box-shadow: 0 0 28px rgba(255,122,24,.20), inset 0 0 24px rgba(255,122,24,.06);
}

.track-row.has-error { border-color: rgba(255,59,53,.72); }

.track-start {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 42px 1fr 62px;
  align-items: center;
  padding: 0 13px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.track-start span { color: #ff8a42; }
.track-start strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-start em { color: rgba(237,241,238,.46); text-align: right; }
.track-row.is-active .track-start { display: none; }

.track-controls {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 82px auto auto;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
}

.track-row:not(.is-active) .track-controls { display: none; }
.track-controls time { color: rgba(237,241,238,.54); font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
.track-controls button {
  min-width: 48px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(255,122,24,.34);
  background: rgba(0,0,0,.42);
  color: rgba(237,241,238,.74);
  font-family: var(--head-font);
  font-size: 8px;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
}

.track-controls button:hover { color: #ffab70; border-color: rgba(255,122,24,.78); }
.track-controls input[type="range"] { width: 100%; accent-color: #ff7a18; cursor: ew-resize; }
.track-note { margin-top: 14px; color: rgba(237,241,238,.54); letter-spacing: .12em; text-transform: uppercase; }

/* Showreel language selection and protected-player deterrents. */
.reel-modal { width: min(1380px, calc(100vw - 34px)); max-height: calc(100dvh - 34px); }
.reel-modal .modal-frame {
  aspect-ratio: auto;
  min-height: min(86dvh, 820px);
  max-height: calc(100dvh - 34px);
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(78px, 8vh, 94px) clamp(28px, 3.2vw, 52px) clamp(58px, 6vh, 74px);
}

.reel-module { position: relative; z-index: 4; display: grid; gap: 16px; }
.reel-language-picker { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; }
.reel-language-picker > p { margin: 0; color: rgba(237,241,238,.58); font-family: var(--head-font); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.reel-language-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.reel-language-options button {
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(237,241,238,.16);
  background: rgba(0,0,0,.32);
  color: rgba(237,241,238,.62);
  font-family: var(--head-font);
  font-size: 9px;
  letter-spacing: .10em;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.reel-language-options button span { color: #ff8b45; }
.reel-language-options button strong { min-width: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.reel-language-options button:hover,
.reel-language-options button.is-active {
  color: #ffb17d;
  border-color: rgba(255,122,24,.72);
  box-shadow: 0 0 22px rgba(255,122,24,.16), inset 0 0 20px rgba(255,122,24,.05);
}

.reel-player-shell {
  position: relative;
  width: 100%;
  height: min(60dvh, 650px);
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(237,241,238,.18);
  background: #000;
  box-shadow: inset 0 0 70px rgba(0,0,0,.62), 0 0 34px rgba(156,255,0,.06);
}

#showreelPlayer { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.reel-player-message {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  color: rgba(237,241,238,.68);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .13em;
  background: linear-gradient(180deg, rgba(2,4,5,.38), rgba(2,4,5,.78)), url("assets/video/bg-poster.jpg") center / cover;
  transition: opacity .45s ease, visibility .45s ease;
}

.reel-player-message.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.reel-player-message.is-error p { color: #ff8f78; }
.reel-player-message p { margin: 0; font-family: var(--head-font); font-size: clamp(11px, 1vw, 15px); }
.reel-player-message small { max-width: 560px; color: rgba(237,241,238,.42); font-size: 9px; line-height: 1.6; }

/* Keep the secondary About card only when the viewport can genuinely fit it. */
@media (min-width: 768px) and (max-width: 1400px),
       (min-width: 768px) and (max-height: 800px) {
  body.single-page-site .hero-about-card { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  body.single-page-site .signal-status { display: none; }
  body.single-page-site .nav { left: auto; right: 28px; transform: none !important; gap: clamp(16px, 2.4vw, 30px); }
  body.single-page-site .hero-copy { left: 32px; top: 27vh; width: min(44vw, 430px); }
  body.single-page-site h1 { font-size: clamp(42px, 6.2vw, 66px); }
  body.single-page-site .logo-stage { left: 58% !important; opacity: .58 !important; }
  body.single-page-site .hero-actions { right: 30px; width: min(34vw, 310px); }
}

@media (min-width: 768px) and (max-height: 700px) {
  body.single-page-site .hero-copy { top: 24vh; }
  body.single-page-site h1 { font-size: clamp(38px, 4.6vw, 62px); }
  body.single-page-site .hero-subgrid { display: none; }
  body.single-page-site .hero-actions { top: 44%; }
}

@media (max-width: 920px) {
  .about-modal-layout { grid-template-columns: 1fr; }
  .about-portrait { width: min(100%, 300px); margin-inline: auto; }
  .contact-modal-grid { grid-template-columns: 1fr; }
  .contact-channel h2 { white-space: normal; }
  .reel-language-picker { grid-template-columns: 1fr; gap: 10px; }
}

/* Mobile home: logo, two actions and language control only. */
@media (max-width: 767px) {
  body.single-page-site .topbar {
    height: 70px !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    grid-template-rows: 42px !important;
    background: linear-gradient(180deg, rgba(2,4,5,.86), transparent) !important;
  }

  body.single-page-site .brand-mark { width: 34px; height: 34px; }
  body.single-page-site .brand-name { grid-column: 2; grid-row: 1; }
  body.single-page-site .nav,
  body.single-page-site .signal-status,
  body.single-page-site .hero-copy > .eyebrow,
  body.single-page-site .hero-copy > h1,
  body.single-page-site .hero-subgrid,
  body.single-page-site .hero-actions,
  body.single-page-site .hero-about-card { display: none !important; }

  body.single-page-site .hero-copy { position: static !important; width: auto !important; max-width: none !important; }

  body.single-page-site .logo-stage {
    left: 50% !important;
    top: 43% !important;
    width: min(82vw, 390px) !important;
    opacity: .66 !important;
    filter: saturate(.95) brightness(.98) !important;
  }

  body.single-page-site .mobile-hero-actions {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    z-index: 48;
    display: grid;
    gap: 10px;
  }

  body.single-page-site .mobile-showreel-cta {
    width: 100%;
    max-width: none;
    height: 54px;
    margin: 0;
  }

  body.single-page-site .mobile-start-project-cta {
    min-height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(156,255,0,.68);
    background: linear-gradient(90deg, rgba(156,255,0,.08), rgba(0,0,0,.32));
    color: rgba(237,241,238,.88);
    font-family: var(--head-font);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    box-shadow: 0 0 24px rgba(156,255,0,.12), inset 0 0 22px rgba(156,255,0,.05);
  }

  body.single-page-site .ambient-module {
    left: auto !important;
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    width: 112px !important;
    display: block !important;
  }

  body.single-page-site .ambient-player { display: none !important; }
  body.single-page-site .language-button { width: 112px; min-height: 44px; justify-content: space-between; }

  dialog.site-dialog { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; max-height: calc(100dvh - 12px) !important; }
  dialog.site-dialog .modal-close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 28px; box-shadow: 0 0 0 8px rgba(3,5,6,.96), 0 0 24px rgba(0,0,0,.72); }
  dialog.site-dialog .modal-corner-tr { right: 72px; width: 22px; }
  dialog.site-dialog .modal-hud-top { right: 96px !important; }

  body.single-page-site .content-modal-frame,
  .contact-modal-frame,
  .project-detail-frame,
  .reel-modal .modal-frame {
    max-height: calc(100dvh - 12px) !important;
    min-height: calc(100dvh - 12px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 70px 16px 34px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,122,24,.48) rgba(3,5,6,.82);
  }

  dialog.site-dialog .modal-hud-bottom { display: none !important; }
  dialog.site-dialog *::-webkit-scrollbar { width: 7px; height: 7px; }
  dialog.site-dialog *::-webkit-scrollbar-track { background: rgba(3,5,6,.86); }
  dialog.site-dialog *::-webkit-scrollbar-thumb { background: rgba(255,122,24,.42); border-radius: 8px; }

  .about-modal-layout,
  .contact-modal-grid { gap: 26px; }
  .about-portrait { width: min(74vw, 280px); }
  .about-modal-copy h2 { font-size: clamp(24px, 8vw, 34px); }
  .about-modal-copy p:not(.modal-kicker) { font-size: 13px; }
  .about-modal-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px; }
  .about-modal-stats li { padding: 10px 7px; }
  .about-modal-stats li strong { font-size: 20px; }
  .about-modal-stats li span { font-size: 7px; letter-spacing: .08em; }
  .about-music-link { width: 100%; }

  .contact-channel h2 { font-size: clamp(24px, 7.4vw, 34px); line-height: 1.08; }
  .contact-modal-grid { grid-template-columns: 1fr !important; }
  .music-channel { padding: 14px; }
  .track-start { grid-template-columns: 32px 1fr 44px; padding-inline: 9px; font-size: 8px; }
  .track-controls { grid-template-columns: 1fr auto auto; grid-template-areas: "seek seek seek" "time pause stop"; padding: 8px; }
  .track-controls input { grid-area: seek; }
  .track-controls time { grid-area: time; }
  .track-controls [data-track-pause] { grid-area: pause; }
  .track-controls [data-track-stop] { grid-area: stop; }

  .reel-language-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel-language-options button { min-height: 42px; }
  .reel-player-shell { height: min(42dvh, 360px); min-height: 210px; }
  .reel-player-message .modal-play-core { transform: scale(.68); margin: -8px; }
}

@media (max-width: 767px) and (max-height: 640px) {
  body.single-page-site .logo-stage { top: 38% !important; width: min(68vw, 300px) !important; }
  body.single-page-site .mobile-hero-actions { bottom: calc(72px + env(safe-area-inset-bottom)); gap: 7px; }
  body.single-page-site .mobile-showreel-cta,
  body.single-page-site .mobile-start-project-cta { min-height: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.site-dialog {
    transform: none;
    clip-path: none;
    transition-duration: 1s;
  }
}

/* Privacy notice and policy panel. */
.privacy-prompt {
  position: fixed;
  right: clamp(20px, 2.2vw, 42px);
  bottom: clamp(18px, 2.2vh, 36px);
  z-index: 190;
  min-width: 250px;
  min-height: 42px;
  padding: 0 16px 0 12px;
  border: 1px solid rgba(237,241,238,.15);
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 11px;
  background: linear-gradient(145deg, rgba(4,7,8,.92), rgba(1,3,4,.84));
  color: rgba(237,241,238,.68);
  font-family: var(--head-font);
  font-size: 9px;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 44px rgba(0,0,0,.38), inset 0 0 0 1px rgba(0,0,0,.34);
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(100% + 54px));
  transition: opacity .9s ease, visibility .9s ease, transform 1.15s cubic-bezier(.16, 1, .3, 1), border-color .24s ease, color .24s ease, box-shadow .24s ease;
}
.privacy-prompt::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-right: 1px solid rgba(156,255,0,.68);
  border-bottom: 1px solid rgba(156,255,0,.68);
  pointer-events: none;
}
.privacy-prompt.is-visible { opacity: 1; visibility: visible; transform: translateX(0); }
.privacy-prompt:hover,
.privacy-prompt:focus-visible {
  color: var(--green);
  border-color: rgba(156,255,0,.46);
  box-shadow: 0 0 28px rgba(156,255,0,.11), 0 16px 44px rgba(0,0,0,.42);
  outline: none;
}
.privacy-prompt-mark {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(156,255,0,.42);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--green);
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1;
  box-shadow: 0 0 14px rgba(156,255,0,.08);
}

.privacy-modal { width: min(1120px, calc(100vw - 54px)); max-height: calc(100dvh - 54px); }
.privacy-modal-frame {
  height: min(900px, calc(100dvh - 54px));
  max-height: calc(100dvh - 54px);
  padding: 0;
  overflow: hidden;
}
.privacy-modal-scroll {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: clamp(70px, 7vh, 88px) clamp(34px, 4.2vw, 72px) clamp(38px, 4vh, 52px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(156,255,0,.42) rgba(3,5,6,.82);
}
.privacy-modal-scroll::-webkit-scrollbar { width: 7px; }
.privacy-modal-scroll::-webkit-scrollbar-track { background: rgba(3,5,6,.86); }
.privacy-modal-scroll::-webkit-scrollbar-thumb { background: rgba(156,255,0,.36); border-radius: 8px; }
.privacy-copy { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.privacy-copy h2 {
  margin: 0 0 14px;
  color: rgba(237,241,238,.94);
  font-family: var(--head-font);
  font-size: clamp(28px, 3vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.privacy-effective { margin: 0 0 24px; color: rgba(156,255,0,.72); font-family: var(--head-font); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.privacy-intro { margin: 0 0 28px; padding: 18px 20px; border: 1px solid rgba(156,255,0,.16); background: rgba(156,255,0,.025); }
.privacy-copy p { color: rgba(237,241,238,.66); font-size: clamp(13px, .92vw, 16px); line-height: 1.72; overflow-wrap: anywhere; }
.privacy-copy strong { color: rgba(237,241,238,.92); font-weight: 500; }
.privacy-section { padding: 22px 0; border-top: 1px solid rgba(237,241,238,.11); }
.privacy-section h3 { margin: 0 0 10px; color: rgba(237,241,238,.86); font-family: var(--head-font); font-size: clamp(14px, 1.25vw, 20px); font-weight: 400; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.privacy-section p { margin: 0; }
.privacy-section a { color: #ff9a3c; text-decoration: none; border-bottom: 1px solid rgba(255,154,60,.34); }
.privacy-section a:hover,
.privacy-section a:focus-visible { color: var(--green); border-bottom-color: rgba(156,255,0,.54); outline: none; }
.privacy-modal-scroll > .modal-hud-bottom {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: 900px;
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(156,255,0,.18);
}
html[data-lang="ar"] .privacy-copy { direction: rtl; text-align: right; }

@media (max-width: 767px), (pointer: coarse) {
  .privacy-prompt {
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    min-width: min(230px, calc(100vw - 32px));
    min-height: 44px;
    font-size: 8px;
  }
  .privacy-modal { width: calc(100vw - 12px); max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  .privacy-modal-frame { height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); padding: 0 !important; }
  .privacy-modal-scroll { padding: 70px 16px 34px; }
  .privacy-copy h2 { font-size: clamp(25px, 8.4vw, 38px); }
  .privacy-intro { padding: 14px; }
  .privacy-section { padding: 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-prompt { transition: none; }
}

/* v23.7: compact mobile portfolio navigation and low-height project layout. */
@media (min-width: 768px) and (max-height: 760px) {
  .project-detail-frame {
    min-height: calc(100dvh - 32px);
    padding: 62px clamp(34px, 3.4vw, 52px) 24px;
  }
  .project-panel { gap: clamp(24px, 3vw, 44px); align-items: center; }
  .project-visual { min-height: 0; aspect-ratio: 16 / 9; }
  .project-copy { min-height: 0; padding: 26px 30px; }
  .project-copy h2 { margin-bottom: 16px; font-size: clamp(28px, 3vw, 46px); }
  .project-lead { margin-bottom: 18px; line-height: 1.55; }
  .project-actions { margin-top: 18px; }
  .project-nav {
    grid-template-columns: 82px minmax(0, 1fr) 82px;
    gap: 12px;
    margin: 16px 24px 0;
    padding-top: 12px;
  }
  .project-detail-frame > .modal-hud-bottom { display: none; }
}

@media (max-width: 767px) {
  body.single-page-site .topbar {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
  }

  body.single-page-site .mobile-menu-toggle {
    position: relative;
    z-index: 203;
    grid-column: 3;
    grid-row: 1;
    min-width: 74px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid rgba(237,241,238,.18);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(3,5,6,.78);
    color: rgba(237,241,238,.72);
    font-family: var(--head-font);
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  body.single-page-site .mobile-menu-toggle:hover,
  body.single-page-site .mobile-menu-toggle:focus-visible,
  body.single-page-site .mobile-menu-toggle[aria-expanded="true"] {
    color: var(--green);
    border-color: rgba(156,255,0,.48);
    box-shadow: 0 0 22px rgba(156,255,0,.10);
    outline: none;
  }

  .mobile-menu-icon {
    position: relative;
    width: 14px;
    height: 10px;
    display: block;
  }
  .mobile-menu-icon i {
    position: absolute;
    left: 0;
    width: 14px;
    height: 1px;
    background: currentColor;
    transition: transform .35s ease, top .35s ease;
  }
  .mobile-menu-icon i:first-child { top: 2px; }
  .mobile-menu-icon i:last-child { top: 8px; }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon i:first-child { top: 5px; transform: rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon i:last-child { top: 5px; transform: rotate(-45deg); }

  body.single-page-site .topbar .nav {
    position: fixed !important;
    z-index: 202 !important;
    top: 70px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    padding: 8px !important;
    border: 1px solid rgba(156,255,0,.26);
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important;
    background: linear-gradient(160deg, rgba(3,6,7,.97), rgba(1,3,4,.94));
    box-shadow: 0 20px 54px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.025);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px) scale(.985) !important;
    transition: opacity .32s ease, visibility .32s ease, transform .42s cubic-bezier(.16, 1, .3, 1) !important;
  }

  body.single-page-site .topbar.is-mobile-menu-open .nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1) !important;
  }

  body.single-page-site .topbar .nav a {
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid rgba(237,241,238,.10);
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.012);
    font-size: 8px;
    letter-spacing: .13em;
  }

  body.single-page-site .topbar .nav a.is-active {
    color: var(--green);
    border-color: rgba(156,255,0,.32);
    background: rgba(156,255,0,.035);
  }

  .privacy-prompt {
    top: calc(78px + env(safe-area-inset-top));
    right: 16px;
    bottom: auto;
    min-width: min(230px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }

  body.mobile-menu-open .privacy-prompt {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(calc(100% + 54px));
  }
}

/* v23.9: remove mobile modal corners from the scrollable reading area.
   The privacy modal has its own verified geometry and is intentionally excluded. */
@media (max-width: 767px), (pointer: coarse) {
  dialog.site-dialog:not(.privacy-modal) .modal-corner {
    display: none !important;
  }

  dialog.site-dialog:not(.privacy-modal) .modal-hud-top {
    top: 28px !important;
    left: 18px !important;
    right: 86px !important;
  }

  .reel-modal .modal-frame::before,
  .contact-modal-frame::before,
  .project-detail-frame::before {
    inset: 6px !important;
  }

  body.single-page-site .about-modal-stats {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  body.single-page-site .about-modal-stats li {
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  body.single-page-site .about-modal-stats li strong {
    min-width: 0;
    font-size: 22px;
    line-height: 1;
  }

  body.single-page-site .about-modal-stats li span {
    min-width: 0;
    font-size: 8px;
    line-height: 1.4;
    letter-spacing: .1em;
    overflow-wrap: anywhere;
  }
}