* { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #f4f4f1;
    --white: #f8f8f5;
    --ink: #101010;
    --muted: #777;
    --line: rgba(0,0,0,.12);
    --red: #e32222;
    --glass: rgba(255,255,255,.46);
    --shadow: 0 30px 90px rgba(0,0,0,.16);
  }


html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

body {
  letter-spacing: .34em;
  cursor: crosshair;
}

button, a { font-family: inherit; }

/* CINEMATIC INTRO */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(244,244,241,.95) 38%, #e8e8e5 100%);
  transition: opacity 1s ease, visibility 1s ease;
}

.intro.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-inner { text-align: center; position: relative; }

.intro-emblem {
  width: 190px;
  height: 190px;
  margin: 0 auto 34px;
  position: relative;
  filter: drop-shadow(0 25px 35px rgba(0,0,0,.15));
  animation: introFloat 3s ease-in-out infinite;
}

.intro-emblem::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 12px solid rgba(255,255,255,.96);
  border-radius: 50%;
  mask: conic-gradient(#000 0 78deg, transparent 78deg 92deg, #000 92deg 180deg, transparent 180deg 195deg, #000 195deg 348deg, transparent 348deg 360deg);
  box-shadow: inset 0 0 28px rgba(0,0,0,.12), 0 0 20px rgba(0,0,0,.08);
  animation: rotateRing 4s linear infinite;
}

.intro-emblem::after {
  content: "CM";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 64px Georgia, serif;
  letter-spacing: -.18em;
  color: white;
  text-shadow: 0 13px 22px rgba(0,0,0,.16), 0 -1px 0 #fff;
  transform: skewX(-8deg);
}

.intro-title {
  font-size: clamp(26px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: .58em;
  line-height: 1.3;
  opacity: 0;
  animation: revealText .9s ease .6s forwards;
}

.intro-sub {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .55em;
  color: #666;
  opacity: 0;
  animation: revealText .9s ease 1.2s forwards;
}

.intro-sub span { color: var(--red); }

.intro-load {
  width: 360px;
  max-width: 70vw;
  height: 1px;
  background: rgba(0,0,0,.18);
  margin: 40px auto 0;
  position: relative;
  overflow: hidden;
}

.intro-load::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--red);
  animation: loadBar 3.4s cubic-bezier(.19,1,.22,1) forwards;
}

.intro-percent {
  margin-top: 16px;
  font-size: 10px;
  color: var(--red);
  letter-spacing: .45em;
}

/* APP SHELL */
.site {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 180px 1fr;
  background:
    radial-gradient(circle at var(--mx, 55%) var(--my, 45%), rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 50% 52%, rgba(0,0,0,.045), transparent 50%),
    linear-gradient(120deg, #fbfbf8, #ececea);
  transition: background-position .2s ease;
}

.noise, .grid-bg, .scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.noise {
  opacity: .09;
  background-image: radial-gradient(rgba(0,0,0,.4) .6px, transparent .6px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.grid-bg {
  opacity: .22;
  background:
    linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px);
  background-size: 90px 90px;
  transform: perspective(900px) rotateX(58deg) translateY(260px) scale(1.4);
  transform-origin: center bottom;
  animation: gridDrift 18s linear infinite;
}

.scanline {
  opacity: .12;
  background: linear-gradient(180deg, transparent, rgba(227,34,34,.23), transparent);
  height: 160px;
  top: -160px;
  animation: scanMove 8s linear infinite;
}

.sidebar {
  position: relative;
  border-right: 1px solid var(--line);
  padding: 38px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 20;
  background: rgba(245,245,242,.58);
  backdrop-filter: blur(14px);
}

.mini-logo {
  width: 58px;
  height: 58px;
  border: 2px solid rgba(0,0,0,.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  font: 900 22px Georgia, serif;
  letter-spacing: -.16em;
  color: rgba(0,0,0,.66);
  box-shadow: inset 0 0 14px rgba(255,255,255,.92), 0 10px 24px rgba(0,0,0,.08);
  transform: skewX(-7deg);
  transition: transform .5s ease, border-color .35s ease, box-shadow .35s ease, color .35s ease;
  cursor: pointer;
  user-select: none;
}

.mini-logo:hover { transform: skewX(-7deg) rotate(12deg) scale(1.08); }

/* 🟩 GREEN HIGHLIGHT START: CMV_27.1 — CM LOGO HOME NAVIGATION PATCH */

.mini-logo:focus-visible {
  outline: 2px solid rgba(227,34,34,.58);
  outline-offset: 5px;
}

/* 🟥 RED HIGHLIGHT END: CMV_27.1 — CM LOGO HOME NAVIGATION PATCH */

.nav {
  display: grid;
  gap: 25px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .45em;
}

.nav a {
  position: relative;
  text-decoration: none;
  color: #111;
  cursor: pointer;
  transition: color .3s ease, transform .3s ease;
}

.nav a:hover { color: var(--red); transform: translateX(5px); }
.nav a.active { color: var(--red); }

.nav a.active::after {
  content: "";
  position: absolute;
  right: -56px;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 14px rgba(227,34,34,.42);
}

.socials {
  display: flex;
  gap: 17px;
  color: #777;
  font-size: 14px;
  letter-spacing: 0;
  margin-bottom: 64px;
}

.copyright {
  font-size: 8px;
  letter-spacing: .36em;
  color: #777;
  position: absolute;
  left: 30px;
  bottom: 28px;
  white-space: nowrap;
}

.main {
  position: relative;
  overflow: hidden;
  min-width: 0;
  z-index: 2;
}

.hamburger {
  position: absolute;
  right: 34px;
  top: 44px;
  width: 34px;
  height: 22px;
  z-index: 30;
}

.hamburger span {
  display: block;
  height: 1px;
  background: #111;
  margin-bottom: 8px;
  margin-left: auto;
  transition: width .3s ease;
}
.hamburger:hover span { width: 34px !important; }
.hamburger span:nth-child(1){ width: 34px; }
.hamburger span:nth-child(2){ width: 24px; }
.hamburger span:nth-child(3){ width: 16px; }

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .75s ease, transform .75s ease, filter .75s ease;
  transform: translateY(18px) scale(.992);
  filter: blur(8px);
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* HOME */
.home {
  display: grid;
  grid-template-columns: 1fr 360px;
  align-items: center;
  padding: 0 88px;
}

.hero-wrap { position: relative; display: grid; place-items: center; }

.hero-mark {
  position: relative;
  width: min(590px, 54vw);
  height: min(590px, 54vw);
  filter: drop-shadow(0 35px 50px rgba(0,0,0,.14));
  transform-style: preserve-3d;
  transition: transform .15s ease-out;
}

.orbit {
  position: absolute;
  inset: 0;
  border: 26px solid rgba(255,255,255,.88);
  border-radius: 50%;
  box-shadow: inset 0 0 45px rgba(0,0,0,.12), 0 0 30px rgba(0,0,0,.06);
  mask: conic-gradient(#000 0 78deg, transparent 78deg 91deg, #000 91deg 178deg, transparent 178deg 191deg, #000 191deg 348deg, transparent 348deg 360deg);
  animation: rotateRing 20s linear infinite;
}

.globe {
  position: absolute;
  inset: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,.95), rgba(225,225,222,.76) 45%, rgba(170,170,168,.45)),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(0,0,0,.04) 35px),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(0,0,0,.04) 35px);
  box-shadow: inset 0 0 55px rgba(0,0,0,.13);
  opacity: .78;
  overflow: hidden;
}

.globe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  animation: globeSweep 5s ease-in-out infinite;
}

.continent {
  position: absolute;
  border-radius: 45% 55% 55% 45%;
  background: rgba(0,0,0,.12);
  filter: blur(.4px);
  animation: continentDrift 9s linear infinite;
}
.c1 { width: 130px; height: 72px; left: 150px; top: 90px; transform: rotate(-10deg); }
.c2 { width: 92px; height: 130px; left: 245px; top: 165px; transform: rotate(18deg); }
.c3 { width: 100px; height: 62px; left: 105px; top: 220px; transform: rotate(12deg); }

.letters {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: clamp(120px, 12vw, 176px);
  font-weight: 900;
  letter-spacing: -.18em;
  color: white;
  text-shadow: 0 18px 35px rgba(0,0,0,.18), 0 -2px 0 rgba(255,255,255,.8);
  transform: skewX(-9deg) translateZ(80px);
}

.speedlines {
  position: absolute;
  left: -44px;
  right: -80px;
  top: 46%;
  height: 130px;
  background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(0,0,0,.045) 15px, transparent 16px 28px);
  filter: blur(.4px);
  opacity: .6;
  transform: skewX(-16deg);
  animation: speedPulse 3.2s ease-in-out infinite;
}

.red-sweep {
  position: absolute;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  top: 50%;
  left: -200px;
  box-shadow: 0 0 20px rgba(227,34,34,.7);
  animation: redSweep 4.2s ease-in-out infinite;
}

.rings {
     position: absolute;
     inset: -45px;
     border-radius: 50%;
     border: 1px dotted rgba(0,0,0,.13);
     animation: pulseRing 4s ease-in-out infinite;
   }

   .rings::after {
     content: "";
     position: absolute;
     inset: 70px;
     border-radius: 50%;
     border: 1px dotted rgba(0,0,0,.12);
   }

   .loading {
     display: flex;
     align-items: center;
     gap: 24px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .55em;
     z-index: 3;
   }

   .bar {
     width: 160px;
     height: 1px;
     background: rgba(0,0,0,.35);
     position: relative;
   }

   .bar::before {
     content: "";
     position: absolute;
     left: 0;
     top: -1px;
     width: 68%;
     height: 2px;
     background: var(--red);
     animation: barPulse 2.2s ease-in-out infinite;
   }

   .percent { color: var(--red); letter-spacing: .25em; }

   .tagline {
     position: absolute;
     right: 52px;
     bottom: 58px;
     text-align: right;
     font-size: 11px;
     line-height: 2;
     letter-spacing: .55em;
     font-weight: 600;
   }

   .tagline span { color: var(--red); }

   .hero-title {
     position: absolute;
     left: 50%;
     bottom: 13vh;
     transform: translateX(-50%);
     text-align: center;
     opacity: .92;
   }

   .hero-title h1 {
     font-size: clamp(28px, 4vw, 58px);
     font-weight: 500;
     letter-spacing: .54em;
     margin-bottom: 12px;
   }

   .hero-title p {
     font-size: 11px;
     color: #555;
     letter-spacing: .48em;
   }

   .hero-title span { color: var(--red); }

   /* PORTFOLIO */
   .portfolio, .archive {
     padding: 96px 70px 54px 88px;
     overflow-y: auto;
   }
   .portfolio::-webkit-scrollbar, .archive::-webkit-scrollbar { width: 0; }

   .section-title {
     font-size: 28px;
     font-weight: 500;
     letter-spacing: .58em;
     margin-bottom: 26px;
   }

   .section-title::after {
     content: "";
     display: inline-block;
     width: 34px;
     height: 2px;
     background: var(--red);
     margin-left: 26px;
     vertical-align: middle;
   }

   .portfolio-copy {
     font-size: 11px;
     color: #333;
     line-height: 1.9;
     max-width: 520px;
     margin-bottom: 42px;
     letter-spacing: .42em;
   }

   .filters {
     position: absolute;
     right: 78px;
     top: 152px;
     display: flex;
     gap: 44px;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: .46em;
   }

   .filters span:first-child { color: var(--red); }

   .grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 46px 14px;
     padding-right: 6px;
   }

   .project { cursor: pointer; }

   .thumb {
     width: 100%;
     aspect-ratio: 16 / 10;
     display: block;
     position: relative;
     overflow: hidden;
     background: #111;
     filter: grayscale(.88) contrast(1.12);
     transition: transform .55s cubic-bezier(.19,1,.22,1), filter .55s ease, box-shadow .55s ease;
   }

   .project:hover .thumb {
     transform: translateY(-8px) scale(1.02);
     filter: grayscale(.35) contrast(1.18);
     box-shadow: 0 25px 70px rgba(0,0,0,.2);
   }

   .thumb::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(0,0,0,.45) 62%), repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.03) 31px);
   }

   .thumb::after {
     content: "▶";
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 54px;
     height: 54px;
     border: 1px solid rgba(255,255,255,.88);
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: white;
     font-size: 18px;
     letter-spacing: 0;
     padding-left: 3px;
     transition: transform .4s ease, background .4s ease;
   }

   .project:hover .thumb::after { transform: translate(-50%, -50%) scale(1.14); background: rgba(227,34,34,.72); }

   .p1 { background: radial-gradient(circle at 75% 70%, rgba(255,0,0,.55), transparent 18%), linear-gradient(160deg, #050505, #1c1c1c 45%, #090909); }
   .p2 { background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.2), transparent 28%), linear-gradient(120deg, #050505, #222); }
   .p3 { background: radial-gradient(circle at 62% 70%, rgba(255,0,0,.3), transparent 8%), linear-gradient(140deg, #191919, #404040 55%, #0b0b0b); }
   .p4 { background: radial-gradient(circle at 45% 50%, rgba(255,255,255,.35), transparent 20%), linear-gradient(140deg, #0b0b0b, #222); }
   .p5 { background: radial-gradient(circle at 65% 45%, rgba(255,255,255,.25), transparent 20%), linear-gradient(140deg, #050505, #252525); }
   .p6 { background: linear-gradient(135deg, #050505, #3e3e3e 48%, #111 49%, #ddd 50%, #aaa 62%, #222 63%); }

   .meta {
     display: grid;
     grid-template-columns: 44px 1fr 40px;
     align-items: start;
     padding-top: 14px;
     font-size: 11px;
     letter-spacing: .35em;
   }

   .meta strong {
     display: block;
     letter-spacing: .38em;
     font-size: 11px;
     margin-bottom: 6px;
     font-weight: 600;
   }

   .meta small {
     display: block;
     color: #777;
     font-size: 9px;
     letter-spacing: .35em;
   }

   .arrow { text-align: right; letter-spacing: 0; font-size: 20px; }

   /* ARCHIVE */
   .archive-list {
     display: grid;
     gap: 18px;
     margin-top: 48px;
   }

   .archive-card {
     min-height: 138px;
     border-top: 1px solid rgba(0,0,0,.14);
     display: grid;
     grid-template-columns: 180px 1fr 220px;
     align-items: center;
     gap: 34px;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     transition: background .35s ease, transform .35s ease;
   }

   .archive-card:hover {
     background: rgba(255,255,255,.45);
     transform: translateX(8px);
   }

   .archive-num { color: var(--red); font-size: 12px; }
   .archive-card h3 { font-size: 30px; font-weight: 500; letter-spacing: .42em; }
   .archive-card p { color: #666; font-size: 10px; line-height: 1.8; letter-spacing: .36em; }
   .archive-arrow { text-align: right; font-size: 28px; letter-spacing: 0; }

   /* MODAL */
   .modal {
     position: fixed;
     inset: 0;
     z-index: 80;
     background: rgba(245,245,242,.82);
     backdrop-filter: blur(18px);
     display: grid;
     place-items: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity .45s ease, visibility .45s ease;
   }

   .modal.open { opacity: 1; visibility: visible; }

   .modal-panel {
     width: min(1160px, 82vw);
     display: grid;
     grid-template-columns: 330px 1fr;
     gap: 44px;
     align-items: center;
   }

   .modal h2 { font-size: 38px; font-weight: 500; letter-spacing: .46em; margin-bottom: 24px; }
   .modal p { font-size: 11px; color: #555; line-height: 2.1; letter-spacing: .38em; margin-bottom: 26px; }
   .modal small { color: var(--red); font-size: 10px; letter-spacing: .42em; }

   .video-frame {
     aspect-ratio: 16 / 9;
     background: radial-gradient(circle at 72% 62%, rgba(227,34,34,.48), transparent 14%), linear-gradient(135deg, #050505, #222 55%, #050505);
     box-shadow: var(--shadow);
     position: relative;
     overflow: hidden;
   }

   .video-frame::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(transparent, rgba(0,0,0,.35)), repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.035) 19px);
   }

   .video-frame::after {
     content: "▶";
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 72px;
     height: 72px;
     border: 1px solid white;
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: white;
     letter-spacing: 0;
     font-size: 22px;
     padding-left: 4px;
   }

   .close {
     position: fixed;
     top: 34px;
     right: 38px;
     border: none;
     background: none;
     font-size: 14px;
     letter-spacing: .38em;
     cursor: pointer;
     color: #111;
   }

   /* ANIMATIONS */
   @keyframes introFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
   @keyframes revealText { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(14px); } }
   @keyframes loadBar { to { width: 100%; } }
   @keyframes rotateRing { to { transform: rotate(360deg); } }
   @keyframes gridDrift { to { background-position: 0 90px, 90px 0; } }
   @keyframes scanMove { 0%{ top:-180px; } 100%{ top:100%; } }
   @keyframes globeSweep { 0%,100%{ transform: translateX(-80%); } 50%{ transform: translateX(80%); } }
   @keyframes continentDrift { to { transform: translateX(-18px) rotate(10deg); } }
   @keyframes speedPulse { 0%,100%{ opacity:.35; transform: skewX(-16deg) translateX(-12px); } 50%{ opacity:.72; transform: skewX(-16deg) translateX(16px); } }
   @keyframes redSweep { 0%,100%{ left:-220px; opacity:0; } 45%{ opacity:1; } 65%{ left:92%; opacity:0; } }
   @keyframes pulseRing { 0%,100%{ opacity:.35; transform:scale(.98); } 50%{ opacity:.75; transform:scale(1.02); } }
   @keyframes barPulse { 0%,100%{ width:34%; } 50%{ width:88%; } }

   @media (max-width: 1000px) {
     body { overflow: auto; }
     .site { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
     .sidebar { position: fixed; inset: 0 auto 0 0; width: 150px; }
     .main { margin-left: 150px; min-height: 100vh; }
     .home { grid-template-columns: 1fr; padding: 80px 30px; }
     .hero-mark { width: 72vw; height: 72vw; }
     .loading { justify-content: center; margin-top: 20px; }
     .filters { position: static; margin-bottom: 32px; flex-wrap: wrap; gap: 22px; }
     .grid { grid-template-columns: 1fr; }
     .portfolio, .archive { padding: 90px 36px; }
     .archive-card { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
     .modal-panel { grid-template-columns: 1fr; }
   }

   .sound-toggle {
  margin-top: 22px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.38);
  color: #111;
  padding: 10px 12px;
  font-size: 8px;
  letter-spacing: .34em;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}

.sound-toggle:hover {
  color: var(--red);
  border-color: rgba(227,34,34,.55);
  transform: translateX(4px);
}

.sound-toggle.active {
  color: var(--red);
  border-color: rgba(227,34,34,.7);
  background: rgba(255,255,255,.62);
  box-shadow: 0 0 18px rgba(227,34,34,.12);
}

/* 🟨 YELLOW HIGHLIGHT: COMING SOON REFINEMENT STYLES */

.coming-soon-kicker {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6em;
}

.coming-soon-copy {
  margin-top: 18px;
  font-size: 10px !important;
  color: #777 !important;
  letter-spacing: .45em !important;
}

.soon-panel {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.soon-panel > small {
  color: var(--red);
  font-size: 10px;
  letter-spacing: .45em;
  margin-bottom: 24px;
}

.soon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
  max-width: 1180px;
}

.soon-grid div {
  min-height: 160px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.36);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.soon-grid div:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.62);
  border-color: rgba(227,34,34,.35);
}

.soon-grid span {
  color: var(--red);
  font-size: 10px;
  letter-spacing: .42em;
}

.soon-grid strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .38em;
}

.soon-grid small {
  color: #777;
  font-size: 9px;
  letter-spacing: .4em;
}

@media (max-width: 1000px) {
  .soon-grid {
    grid-template-columns: 1fr;
  }
}

/* 🟨 YELLOW HIGHLIGHT END */

/* 🟨 YELLOW HIGHLIGHT: REAL-TIME LAUNCH COUNTDOWN STYLES */

.launch-countdown {
  position: absolute;
  left: 52px;
  bottom: 54px;
  z-index: 6;
  max-width: 620px;
}

.launch-label {
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .55em;
  margin-bottom: 16px;
}

.launch-time {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.launch-time div {
  min-width: 78px;
  padding-right: 22px;
  border-right: 1px solid rgba(0,0,0,.15);
}

.launch-time div:last-child {
  border-right: none;
}

.launch-time strong {
  display: block;
  color: #111;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
}

.launch-time span {
  display: block;
  margin-top: 8px;
  color: var(--red);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .38em;
}

/* 🟨 YELLOW HIGHLIGHT END */
/* 🟨 YELLOW HIGHLIGHT: VERSION 3 MINIMAL NINE ARCHIVE SYSTEM */

.archive-system {
  min-height: 100%;
  padding-bottom: 50px;
}

.archive-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 40px;
}

.archive-system-status {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .48em;
}

.archive-system-status::after {
  content: "";
  width: 58px;
  height: 1px;
  background: var(--red);
  display: block;
}

.archive-system-status strong {
  color: var(--red);
  font-weight: 700;
}

.archive-directory {
  margin-top: 34px;
  gap: 0;
  max-width: 1180px;
}

.archive-dossier {
  min-height: 76px;
  grid-template-columns: 190px 110px 1fr 260px 50px;
  gap: 28px;
  border-top: 1px solid rgba(0,0,0,.095);
  background: rgba(255,255,255,.22);
  padding: 0 22px 0 0;
}

.archive-dossier:last-child {
  border-bottom: 1px solid rgba(0,0,0,.095);
}

.archive-dossier:hover {
  background: rgba(255,255,255,.62);
  transform: translateX(7px);
}

.archive-thumb {
  width: 190px;
  height: 76px;
  background: #111;
  filter: grayscale(1) contrast(1.15);
  position: relative;
  overflow: hidden;
}

.archive-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.045) 23px);
}

.archive-thumb::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  letter-spacing: .35em;
}

.archive-thumb-001 {
  background:
    radial-gradient(circle at 60% 35%, rgba(255,255,255,.78), transparent 8%),
    radial-gradient(circle at 45% 48%, rgba(227,34,34,.35), transparent 12%),
    linear-gradient(135deg, #050505, #2a2a2a);
}

.archive-thumb-001::after { content: "✦"; }

.archive-thumb-002 {
  background:
    radial-gradient(circle at 55% 42%, rgba(255,255,255,.4), transparent 20%),
    linear-gradient(135deg, #050505, #333);
}

.archive-thumb-002::after { content: "♬"; }

.archive-thumb-003 {
  background:
    radial-gradient(circle at 50% 65%, rgba(255,255,255,.5), transparent 22%),
    linear-gradient(135deg, #222, #777 48%, #111);
}

.archive-thumb-003::after { content: "☼"; }

.archive-thumb-004 {
  background:
    radial-gradient(circle at 68% 52%, rgba(227,34,34,.38), transparent 12%),
    linear-gradient(135deg, #050505, #1d1d1d 60%, #444);
}

.archive-thumb-004::after { content: "◐"; }

.archive-thumb-005 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.36), transparent 20%),
    linear-gradient(135deg, #1a1a1a, #535353);
}

.archive-thumb-005::after {
  content: "MADAM";
  font-family: Georgia, serif;
  font-size: 14px;
  letter-spacing: .5em;
}

.archive-thumb-006 {
  background: linear-gradient(135deg, #050505, #1b1b1b);
}

.archive-thumb-006::after {
  content: "LOCKED";
  font-size: 10px;
  color: rgba(255,255,255,.75);
}

.archive-thumb-007 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.2), transparent 16%),
    linear-gradient(135deg, #050505, #242424);
}

.archive-thumb-007::after {
  content: "TOP";
  font-size: 11px;
}

.archive-thumb-008 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.28), transparent 22%),
    linear-gradient(135deg, #050505, #202020);
}

.archive-thumb-008::after {
  content: "△";
  font-size: 24px;
}

.archive-thumb-009 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.42), transparent 18%),
    linear-gradient(135deg, #050505, #333);
}

.archive-thumb-009::after {
  content: "Ω";
  font-family: Georgia, serif;
  font-size: 28px;
  letter-spacing: 0;
}

.archive-info h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .52em;
}

.archive-info p {
  margin-top: 8px;
  color: #666;
  font-size: 9px;
  letter-spacing: .38em;
}

.archive-status {
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .38em;
  text-align: left;
}

.locked-status {
  color: rgba(227,34,34,.86);
}

.archive-modal-panel {
  grid-template-columns: 390px 1fr;
}

.modal-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 34px;
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .42em;
}

.archive-video-frame {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 30%),
    linear-gradient(135deg, #050505, #242424 60%, #080808);
}

.palindrome-mini {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  color: white;
  font-family: Georgia, serif;
  font-size: clamp(18px, 2vw, 34px);
  letter-spacing: .55em;
  text-align: center;
}

.palindrome-mini span:nth-child(3) {
  color: rgba(227,34,34,.9);
}

/* 🟨 YELLOW HIGHLIGHT END */

/* 🟨 YELLOW HIGHLIGHT: VERSION 3 MOBILE ARCHIVE SYSTEM FIX */

@media (max-width: 768px) {
  .archive-header {
    grid-template-columns: 1fr;
  }

  .archive-system-status {
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 8px;
    letter-spacing: .32em;
  }

  .archive-dossier {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: auto;
    padding: 18px 0 22px;
  }

  .archive-thumb {
    width: 100%;
    height: 120px;
  }

  .archive-info h3 {
    font-size: 18px;
    line-height: 1.5;
  }

  .archive-status {
    font-size: 8px;
    line-height: 1.8;
  }

  .archive-modal-panel {
    grid-template-columns: 1fr;
  }

  .palindrome-mini {
    font-size: 18px;
    letter-spacing: .32em;
  }
}

/* 🟨 YELLOW HIGHLIGHT END */



/* 🟨 YELLOW HIGHLIGHT: VERSION 3 MOBILE POLISH FIX */

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    letter-spacing: .2em;
  }

  .site {
    display: block;
    width: 100%;
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 92px;
    height: 100vh;
    padding: 24px 14px;
    z-index: 40;
  }

  .mini-logo {
    width: 54px;
    height: 54px;
    font-size: 20px;
    margin: 0 auto;
  }

  .nav {
    gap: 22px;
    font-size: 8px;
    letter-spacing: .28em;
    margin-top: 70px;
  }

  .nav a {
    line-height: 1.7;
  }

  .nav a.active::after {
    right: -22px;
    width: 18px;
  }

  .socials {
    font-size: 12px;
    gap: 8px;
    margin-bottom: 82px;
  }

  .copyright {
    left: 14px;
    bottom: 24px;
    font-size: 6px;
    letter-spacing: .24em;
    white-space: normal;
    max-width: 70px;
    line-height: 1.8;
  }

  .main {
    margin-left: 92px;
    width: calc(100% - 92px);
    min-height: 100vh;
    overflow-x: hidden;
  }

  .hamburger {
    position: fixed;
    right: 24px;
    top: 118px;
    z-index: 50;
  }

  .screen {
    position: relative;
    inset: auto;
    min-height: 100vh;
    display: none;
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
  }

  .screen.active {
    display: block;
  }

  .home {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    padding: 86px 22px 80px;
    text-align: center;
  }

  .hero-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: visible;
  }

  .hero-mark {
    width: 92vw;
    height: 92vw;
    max-width: 390px;
    max-height: 390px;
    margin-left: 22px;
  }

  .globe {
    inset: 54px;
  }

  .orbit {
    border-width: 18px;
  }

  .rings {
    inset: -18px;
  }

  .letters {
    font-size: clamp(82px, 22vw, 122px);
  }

  .hero-title {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    margin-top: -42px;
  }

  .coming-soon-kicker {
    font-size: 8px;
    letter-spacing: .38em;
  }

  .hero-title h1 {
    font-size: clamp(24px, 8vw, 38px);
    letter-spacing: .34em;
    line-height: 1.35;
  }

  .hero-title p,
  .coming-soon-copy {
    font-size: 8px !important;
    letter-spacing: .28em !important;
    line-height: 2;
  }

  .loading {
    width: 100%;
    justify-content: center;
    margin-top: 36px;
    gap: 14px;
    font-size: 8px;
    letter-spacing: .28em;
  }

  .bar {
    width: 96px;
  }

  .percent {
    font-size: 8px;
    letter-spacing: .22em;
  }

  .tagline {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 34px;
    text-align: center;
    font-size: 8px;
    letter-spacing: .28em;
    line-height: 2;
  }

  .launch-countdown {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 28px;
    max-width: 100%;
    text-align: center;
  }

  .launch-label {
    font-size: 8px;
    letter-spacing: .34em;
    margin-bottom: 14px;
  }

  .launch-time {
    display: grid;
    grid-template-columns: repeat(2, minmax(80px, 1fr));
    gap: 18px 12px;
    justify-items: center;
  }

  .launch-time div {
    min-width: auto;
    width: 100%;
    padding-right: 0;
    border-right: none;
  }

  .launch-time strong {
    font-size: 20px;
  }

  .launch-time span {
    font-size: 7px;
    letter-spacing: .28em;
  }

  .portfolio,
  .archive {
    padding: 86px 22px 80px;
  }

  .section-title {
    font-size: 24px;
    letter-spacing: .34em;
    line-height: 1.4;
  }

  .portfolio-copy {
    font-size: 8px;
    letter-spacing: .26em;
    line-height: 2;
    max-width: 100%;
  }

  .archive-system-status {
    font-size: 8px;
    letter-spacing: .28em;
  }

  .archive-dossier {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }

  .archive-thumb {
    width: 100%;
    height: 145px;
  }

  .archive-info h3 {
    font-size: 20px;
    letter-spacing: .34em;
    line-height: 1.45;
  }

  .archive-info p {
    font-size: 8px;
    letter-spacing: .26em;
  }

  .archive-status {
    font-size: 8px;
    letter-spacing: .25em;
    line-height: 1.8;
  }

  .archive-arrow {
    font-size: 24px;
    text-align: left;
  }

  .modal-panel,
  .archive-modal-panel {
    width: calc(100vw - 120px);
    grid-template-columns: 1fr;
    gap: 28px;
    margin-left: 92px;
  }

  .modal h2 {
    font-size: 24px;
    letter-spacing: .32em;
  }

  .modal p {
    font-size: 8px;
    letter-spacing: .24em;
  }

  .palindrome-mini {
    font-size: 16px;
    letter-spacing: .28em;
  }
}

/* 🟨 YELLOW HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 5 LOCKED ARCHIVE ACCESS SYSTEM */

.archive-lock-box {
  margin-top: 30px;
  border-top: 1px solid rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(0,0,0,.14);
  padding: 28px 0;
}

.lock-mark {
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .52em;
  margin-bottom: 18px;
}

.lock-copy {
  font-size: 9px !important;
  color: #555 !important;
  letter-spacing: .34em !important;
  line-height: 2 !important;
  margin-bottom: 22px !important;
}

.archive-lock-box input {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.45);
  color: #111;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
  outline: none;
}

.archive-lock-box input:focus {
  border-color: rgba(227,34,34,.7);
  box-shadow: 0 0 18px rgba(227,34,34,.08);
}

.archive-lock-box button {
  margin-top: 8px;
  padding: 13px 18px;
  border: 1px solid rgba(227,34,34,.55);
  background: transparent;
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4em;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.archive-lock-box button:hover {
  background: var(--red);
  color: white;
  transform: translateY(-2px);
}

.access-error {
  display: none;
  margin-top: 18px;
  color: var(--red);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .38em;
}

.access-error.show {
  display: block;
}

.archive-detail-box {
  margin-top: 30px;
  display: grid;
  gap: 22px;
}

.archive-detail-box.is-hidden,
.archive-lock-box.is-hidden {
  display: none;
}

.detail-block {
  border-top: 1px solid rgba(0,0,0,.12);
  padding-top: 18px;
}

.detail-block span {
  display: block;
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .45em;
  margin-bottom: 12px;
}

.detail-block p {
  color: #333 !important;
  font-size: 10px !important;
  line-height: 2 !important;
  letter-spacing: .3em !important;
  margin-bottom: 0 !important;
}

.locked .archive-thumb {
  filter: grayscale(1) contrast(1.18) brightness(.72);
}

.locked .archive-info h3 {
  opacity: .88;
}

.locked-status {
  color: rgba(227,34,34,.9);
}

@media (max-width: 768px) {
  .archive-lock-box input {
    font-size: 8px;
    letter-spacing: .26em;
  }

  .archive-lock-box button {
    width: 100%;
    font-size: 8px;
    letter-spacing: .28em;
  }

  .detail-block p {
    font-size: 8px !important;
    letter-spacing: .22em !important;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 6 INTERACTIVE SYSTEM UPGRADES */

/* BACK TO HOME */
.back-home {
  position: fixed;
  top: 24px;
  left: 204px;
  z-index: 60;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.76);
  color: #111;
  padding: 13px 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  cursor: pointer;
  transition: transform .3s ease, color .3s ease, border-color .3s ease;
}

.back-home:hover {
  transform: translateX(-4px);
  color: var(--red);
  border-color: rgba(227,34,34,.5);
}

.back-home.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* SERVICES / ABOUT / CONTACT */
.info-screen {
  padding: 96px 70px 54px 88px;
  overflow-y: auto;
}

.info-screen > small {
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .42em;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 980px;
  margin-top: 44px;
}

.info-grid div {
  min-height: 160px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.35);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-grid span,
.contact-line span {
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .38em;
}

.info-grid strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .36em;
}

.info-grid small {
  color: #666;
  font-size: 8px;
  letter-spacing: .28em;
}

.info-statement {
  margin-top: 54px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .5em;
}

.contact-line {
  margin-top: 44px;
  display: grid;
  gap: 16px;
}

.contact-line strong {
  font-size: 14px;
  letter-spacing: .34em;
}

/* ARCHIVE HOVER BACKGROUND */
.archive-system {
  position: relative;
  isolation: isolate;
}

.archive-cover-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .11;
  background:
    radial-gradient(circle at 60% 45%, rgba(0,0,0,.08), transparent 36%),
    linear-gradient(120deg, #fbfbf8, #ececea);
  transition: background .55s ease, opacity .55s ease, filter .55s ease;
  filter: grayscale(1);
}

.archive-cover-bg[data-cover="nye"] {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.8), transparent 8%),
    radial-gradient(circle at 52% 45%, rgba(227,34,34,.22), transparent 18%),
    linear-gradient(135deg, #111, #555);
}

.archive-cover-bg[data-cover="love"] {
  background:
    radial-gradient(circle at 48% 50%, rgba(0,0,0,.25), transparent 24%),
    linear-gradient(135deg, #222, #777);
}

.archive-cover-bg[data-cover="cabana"] {
  background:
    radial-gradient(circle at 50% 65%, rgba(255,255,255,.55), transparent 22%),
    linear-gradient(135deg, #d8d8d2, #9faaa8 48%, #f4f4f1);
}

.archive-cover-bg[data-cover="night"] {
  background:
    radial-gradient(circle at 70% 52%, rgba(227,34,34,.32), transparent 14%),
    linear-gradient(135deg, #050505, #2a2a2a 65%, #111);
}

.archive-cover-bg[data-cover="palindrome"] {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 80px),
    linear-gradient(135deg, #f8f8f5, #d7d7d2);
}

.archive-cover-bg[data-cover="classified"],
.archive-cover-bg[data-cover="topsecret"],
.archive-cover-bg[data-cover="god"],
.archive-cover-bg[data-cover="omega"] {
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.32), transparent 26%),
    linear-gradient(135deg, #050505, #242424);
  opacity: .13;
}

/* VIEW SYSTEM */
.archive-side-controls {
  display: grid;
  gap: 22px;
  justify-items: end;
}

.archive-view-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
}

.view-btn {
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.44);
  color: #111;
  padding: 9px 12px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .28em;
  cursor: pointer;
}

.view-btn.active,
.view-btn:hover {
  color: var(--red);
  border-color: rgba(227,34,34,.55);
}

.archive-directory.view-icons {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 18px;
}

.archive-directory.view-icons .archive-dossier {
  min-height: 230px;
  grid-template-columns: 1fr;
  padding: 24px;
  text-align: center;
}

.archive-directory.view-icons .archive-thumb {
  width: 100%;
  height: 110px;
}

.archive-directory.view-icons .archive-status,
.archive-directory.view-icons .archive-arrow {
  text-align: center;
}

.archive-directory.view-thumbs {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 22px;
}

.archive-directory.view-thumbs .archive-dossier {
  grid-template-columns: 1fr;
  padding: 0 0 24px;
}

.archive-directory.view-thumbs .archive-thumb {
  width: 100%;
  height: 220px;
}

/* ARCHIVE MEMO */
.archive-memo {
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid rgba(0,0,0,.12);
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  color: #555;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .36em;
}

.archive-memo span:first-child {
  color: var(--red);
}

/* LOCK-FIRST SCREEN */
.archive-restricted-box {
  margin-top: 30px;
  padding: 34px 0;
  border-top: 1px solid rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(0,0,0,.14);
  text-align: left;
}

.archive-restricted-box.is-hidden {
  display: none;
}

.restricted-lock {
  width: 82px;
  height: 82px;
  border: 1px solid rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  color: var(--red);
  font-size: 30px;
  letter-spacing: 0;
  margin-bottom: 24px;
}

.restricted-title {
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5em;
  margin-bottom: 18px;
}

.restricted-copy {
  font-size: 9px !important;
  color: #555 !important;
  letter-spacing: .34em !important;
  line-height: 2 !important;
}

.archive-restricted-box button {
  margin-top: 18px;
  padding: 13px 18px;
  border: 1px solid rgba(227,34,34,.55);
  background: transparent;
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .38em;
  cursor: pointer;
}

.archive-restricted-box button:hover {
  background: var(--red);
  color: white;
}

/* DAY / NIGHT MODE */
body.theme-night {
  --bg: #060606;
  --white: #0f0f0f;
  --ink: #f3f3f0;
  --muted: #999;
  --line: rgba(255,255,255,.14);
  background: #060606;
  color: #f3f3f0;
}

body.theme-night .site {
  background:
    radial-gradient(circle at var(--mx, 55%) var(--my, 45%), rgba(255,255,255,.08), transparent 34%),
    linear-gradient(120deg, #050505, #111);
}

body.theme-night .sidebar {
  background: rgba(5,5,5,.72);
  border-right-color: rgba(255,255,255,.14);
}

body.theme-night .nav a,
body.theme-night .hamburger span,
body.theme-night .section-title,
body.theme-night .archive-info h3,
body.theme-night .hero-title h1 {
  color: #f3f3f0;
}

body.theme-night .nav a.active,
body.theme-night .nav a:hover,
body.theme-night .hero-title span,
body.theme-night .tagline span {
  color: var(--red);
}

body.theme-night .portfolio-copy,
body.theme-night .archive-info p,
body.theme-night .modal p,
body.theme-night .detail-block p {
  color: #b9b9b4 !important;
}

body.theme-night .modal {
  background: rgba(5,5,5,.84);
}

body.theme-night .modal-panel,
body.theme-night .soon-grid div,
body.theme-night .info-grid div,
body.theme-night .archive-dossier {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
}

body.theme-night .close,
body.theme-night .back-home,
body.theme-night .view-btn {
  color: #f3f3f0;
  background: rgba(0,0,0,.42);
  border-color: rgba(255,255,255,.16);
}

/* MOBILE VERSION 6 */
@media (max-width: 768px) {
  .back-home {
    left: 106px;
    top: 18px;
    padding: 10px 12px;
    font-size: 7px;
    letter-spacing: .2em;
  }

  .archive-side-controls {
    justify-items: start;
  }

  .archive-view-toggle {
    flex-wrap: wrap;
  }

  .view-btn {
    font-size: 7px;
    letter-spacing: .2em;
  }

  .archive-directory.view-icons,
  .archive-directory.view-thumbs {
    grid-template-columns: 1fr;
  }

  .archive-memo {
    display: grid;
    gap: 12px;
    font-size: 8px;
    line-height: 1.8;
  }

  .info-screen {
    padding: 86px 22px 80px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .restricted-lock {
    width: 64px;
    height: 64px;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 6 LOGO + THEME MENU */

.theme-menu {
  position: fixed;
  right: 34px;
  top: 82px;
  z-index: 70;
  display: grid;
  justify-items: end;
}

.theme-menu-button {
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.72);
  color: #111;
  padding: 10px 14px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .34em;
  cursor: pointer;
}

.theme-menu-panel {
  display: none;
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  min-width: 180px;
}

.theme-menu.open .theme-menu-panel {
  display: grid;
}

.theme-option {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: transparent;
  color: #111;
  padding: 13px 14px;
  text-align: left;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .28em;
  cursor: pointer;
}

.theme-option:hover {
  color: var(--red);
  background: rgba(255,255,255,.62);
}

body.theme-night {
  --bg: #060606;
  --white: #0f0f0f;
  --ink: #f3f3f0;
  --muted: #999;
  --line: rgba(255,255,255,.14);
  background: #060606;
  color: #f3f3f0;
}

body.theme-night .site {
  background:
    radial-gradient(circle at var(--mx, 55%) var(--my, 45%), rgba(255,255,255,.08), transparent 34%),
    linear-gradient(120deg, #050505, #111);
}

body.theme-night .sidebar {
  background: rgba(5,5,5,.72);
  border-right-color: rgba(255,255,255,.14);
}

body.theme-night .nav a,
body.theme-night .hamburger span,
body.theme-night .section-title,
body.theme-night .archive-info h3,
body.theme-night .hero-title h1 {
  color: #f3f3f0;
}

body.theme-night .nav a.active,
body.theme-night .nav a:hover,
body.theme-night .hero-title span,
body.theme-night .tagline span {
  color: var(--red);
}

body.theme-night .portfolio-copy,
body.theme-night .archive-info p,
body.theme-night .modal p,
body.theme-night .detail-block p {
  color: #b9b9b4 !important;
}

body.theme-night .modal {
  background: rgba(5,5,5,.84);
}

body.theme-night .modal-panel,
body.theme-night .soon-grid div,
body.theme-night .info-grid div,
body.theme-night .archive-dossier {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
}

body.theme-night .close,
body.theme-night .back-home,
body.theme-night .view-btn,
body.theme-night .theme-menu-button,
body.theme-night .theme-option {
  color: #f3f3f0;
  background: rgba(0,0,0,.52);
  border-color: rgba(255,255,255,.16);
}

body.theme-night .theme-menu-panel {
  background: rgba(0,0,0,.86);
  border-color: rgba(255,255,255,.12);
}

@media (max-width: 768px) {
  .theme-menu {
    right: 20px;
    top: 82px;
  }

  .theme-menu-button {
    font-size: 7px;
    letter-spacing: .22em;
    padding: 9px 11px;
  }

  .theme-menu-panel {
    min-width: 150px;
  }

  .theme-option {
    font-size: 7px;
    letter-spacing: .2em;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 7 ARCHIVE 007 SYMBOL ONLY */
.archive-thumb-007::after {
  content: "?";
  font-family: Georgia, serif;
  font-size: 34px;
  letter-spacing: 0;
}

/* 008 / THE GOD FILE — Origin Unknown */
.archive-thumb-008::after {
  content: "△";
  font-size: 28px;
  letter-spacing: 0;
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 7 SYMBOL FINAL — ONLY 007 + 008 */

/* 007 / TOP SECRET — Mystery symbol */
.archive-thumb-007::after {
  content: "?";
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0;
  text-indent: 0;
  line-height: 1;
  color: rgba(255,255,255,.86);
}

/* 008 / THE GOD FILE — Centered Delta symbol */
.archive-thumb-008::after {
  content: "△";
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
  text-indent: 0;
  line-height: 1;
  color: rgba(255,255,255,.86);
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 7 INFRARED GLOBAL SIGNAL GLOBE */

.home {
  position: relative;
}

.geo-panel {
  position: absolute;
  right: 52px;
  top: 134px;
  z-index: 8;
  width: 285px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.26);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 70px rgba(0,0,0,.08);
}

.geo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .32em;
}

.geo-header span {
  color: #555;
}

.geo-header strong {
  color: var(--red);
  font-weight: 700;
}

.geo-globe {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  perspective: 900px;
  cursor: crosshair;
}

.geo-sphere {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--geo-rx, 0deg)) rotateY(var(--geo-ry, 0deg));
  transition: transform .18s ease-out;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.82), rgba(255,255,255,.18) 24%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.16), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.18));
  border: 1px solid rgba(0,0,0,.18);
  box-shadow:
    inset 0 0 35px rgba(0,0,0,.18),
    inset 0 0 70px rgba(227,34,34,.06),
    0 0 36px rgba(227,34,34,.08);
}

.geo-sphere::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(0,0,0,.07) 18px, transparent 19px 34px),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(0,0,0,.06) 18px, transparent 19px 34px);
  opacity: .62;
  mix-blend-mode: multiply;
}

.geo-sphere::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dotted rgba(227,34,34,.28);
  box-shadow: 0 0 22px rgba(227,34,34,.12);
}

.geo-land {
  position: absolute;
  background: rgba(0,0,0,.18);
  filter: blur(.4px);
  opacity: .62;
}

.geo-land-na {
  width: 70px;
  height: 48px;
  left: 38px;
  top: 72px;
  border-radius: 60% 40% 55% 45%;
  transform: rotate(-14deg);
}

.geo-land-af {
  width: 44px;
  height: 66px;
  left: 118px;
  top: 92px;
  border-radius: 50% 48% 60% 42%;
  transform: rotate(12deg);
}

.geo-land-eu {
  width: 52px;
  height: 32px;
  left: 122px;
  top: 64px;
  border-radius: 46% 54% 40% 60%;
  transform: rotate(-8deg);
}

.geo-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  transform: translate(-50%, -50%);
  z-index: 4;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255,255,255,.5);
}

.geo-node.is-current {
  width: 11px;
  height: 11px;
  background: var(--red);
  border-color: rgba(255,255,255,.95);
  box-shadow:
    0 0 0 6px rgba(227,34,34,.12),
    0 0 24px rgba(227,34,34,.72);
}

.geo-node span {
  position: absolute;
  left: 14px;
  top: -3px;
  color: white;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .22em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
}

.geo-node:hover span,
.geo-node:focus span {
  opacity: 1;
  transform: translateX(0);
}

.geo-arc {
  position: absolute;
  left: 62px;
  top: 98px;
  width: 92px;
  height: 38px;
  border-top: 1px solid rgba(227,34,34,.55);
  border-radius: 50%;
  transform: rotate(15deg);
  z-index: 3;
  opacity: .75;
}

.geo-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(227,34,34,.24), transparent);
  transform: translateX(-100%);
  animation: geoScan 4.8s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}

.geo-readout {
  margin-top: 16px;
  border-top: 1px solid rgba(0,0,0,.12);
  padding-top: 14px;
  display: grid;
  gap: 8px;
}

.geo-readout span {
  color: #555;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .3em;
}

.geo-readout strong {
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
}

body.theme-night .geo-panel {
  background: rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.14);
}

body.theme-night .geo-sphere {
  border-color: rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.32), rgba(255,255,255,.08) 24%, transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.20), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.42));
}

body.theme-night .geo-land {
  background: rgba(255,255,255,.18);
}

@keyframes geoScan {
  0%, 100% { transform: translateX(-110%); opacity: 0; }
  35% { opacity: .9; }
  65% { transform: translateX(110%); opacity: 0; }
}

@media (max-width: 768px) {
  .geo-panel {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 300px;
    margin-top: 28px;
    padding: 16px;
  }

  .geo-sphere {
    width: 190px;
    height: 190px;
  }

  .geo-header,
  .geo-readout span,
  .geo-readout strong {
    letter-spacing: .22em;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 7 GLOBE SCALE FIX */

/* Make the global signal globe feel closer to the desktop mockup */
@media (min-width: 901px) {
  .geo-panel {
    position: absolute;
    right: 42px;
    top: 96px;
    width: min(46vw, 640px);
    height: auto;
    padding: 22px;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .geo-globe {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .geo-sphere {
    width: min(42vw, 580px);
    height: min(42vw, 580px);
    opacity: .78;
  }

  .geo-header {
    position: absolute;
    right: 44px;
    top: 22px;
    z-index: 7;
  }

  .geo-readout {
    position: absolute;
    left: 54px;
    bottom: 42px;
    width: 280px;
    border-top: 1px solid rgba(0,0,0,.12);
  }

  body.theme-night .geo-readout {
    border-top-color: rgba(255,255,255,.16);
  }
}

/* Keep the globe controlled on smaller screens */
@media (max-width: 900px) {
  .geo-panel {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 440px;
    margin: 30px auto 0;
  }

  .geo-sphere {
    width: min(70vw, 320px);
    height: min(70vw, 320px);
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 8 IMAGE-LIKE GLOBE TEXTURE UPGRADE */

/*
  Upload this image:
  public_html/assets/images/infrared-globe-map.png

  This keeps the current CSS globe system,
  but makes it look more like a real rendered image.
*/

.geo-sphere {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.72), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.18), transparent 52%),
    url("assets/images/infrared-globe-map.png"),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.22));
  background-size:
    100% 100%,
    100% 100%,
    112% 112%,
    100% 100%;
  background-position:
    center,
    center,
    center,
    center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0,0,0,.14);
  box-shadow:
    inset 0 0 48px rgba(0,0,0,.22),
    inset 0 0 90px rgba(227,34,34,.08),
    0 0 46px rgba(227,34,34,.12);
}

/* Make the globe feel more like glass/infrared scan */
.geo-sphere::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,0,0,.08) 19px, transparent 20px 36px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.065) 19px, transparent 20px 36px),
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.38), transparent 22%);
  opacity: .58;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.geo-sphere::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  z-index: 3;
  border: 1px dotted rgba(227,34,34,.34);
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.12),
    0 0 26px rgba(227,34,34,.12);
  pointer-events: none;
}

/* Once the real globe image is uploaded, these fake land blobs are no longer needed */
.geo-land {
  opacity: 0;
}

/* Make signal nodes stay above the globe texture */
.geo-node,
.geo-arc,
.geo-scan {
  z-index: 6;
}

.geo-readout {
  z-index: 8;
}

body.theme-night .geo-sphere {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.32), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.22), transparent 52%),
    url("assets/images/infrared-globe-map.png"),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.48));
  background-size:
    100% 100%,
    100% 100%,
    112% 112%,
    100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 58px rgba(0,0,0,.62),
    inset 0 0 100px rgba(227,34,34,.16),
    0 0 58px rgba(227,34,34,.18);
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 9 GLOBE HERO POLISH */

/* Make the image globe the main hero focus */
@media (min-width: 901px) {
  .geo-panel {
    right: 64px;
    top: 118px;
    width: min(58vw, 760px);
    pointer-events: auto;
  }

  .geo-sphere {
    width: min(54vw, 700px);
    height: min(54vw, 700px);
    opacity: .82;
  }

  .geo-header {
    right: 34px;
    top: -18px;
  }

  .geo-readout {
    left: 36px;
    bottom: -8px;
    width: 310px;
  }

  /* Push older status text away from the globe */
  .loading {
    position: absolute;
    right: 130px;
    top: 45%;
    transform: translateY(-50%);
    z-index: 12;
    opacity: .72;
  }

  .tagline {
    right: 70px;
    bottom: 86px;
    z-index: 12;
  }

  /* Make overlay signal nodes more subtle since the globe image already has red dots */
  .geo-node {
    width: 7px;
    height: 7px;
    opacity: .72;
  }

  .geo-node.is-current {
    width: 9px;
    height: 9px;
    opacity: .86;
    box-shadow:
      0 0 0 5px rgba(227,34,34,.10),
      0 0 20px rgba(227,34,34,.58);
  }

  .geo-arc {
    opacity: .32;
  }
}

/* Better balance for shorter desktop browser windows */
@media (min-width: 901px) and (max-height: 760px) {
  .geo-panel {
    top: 92px;
    width: min(54vw, 680px);
  }

  .geo-sphere {
    width: min(50vw, 620px);
    height: min(50vw, 620px);
  }

  .geo-readout {
    bottom: 4px;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 9.1 FINAL GLOBE COMPOSITION POLISH */

/*
  This keeps the globe image,
  but balances it better with the CM hero mark.
  No HTML or JS changes needed.
*/

@media (min-width: 901px) {
  /* Give the left CM mark slightly more breathing room */
  .hero-wrap {
    transform: translateX(-28px) scale(.94);
    z-index: 9;
  }

  /* Bring the globe down slightly and make it feel intentional, not crowded */
  .geo-panel {
    right: 74px;
    top: 104px;
    width: min(52vw, 700px);
    padding: 0;
  }

  .geo-sphere {
    width: min(48vw, 640px);
    height: min(48vw, 640px);
    opacity: .84;
  }

  /* Keep GLOBAL SIGNAL / LIVE clean above the globe */
  .geo-header {
    right: 28px;
    top: -22px;
    opacity: .86;
  }

  /* Make the interactive location readout visible again */
  .geo-readout {
    left: 24px;
    bottom: 18px;
    width: 300px;
    padding-top: 12px;
    background: rgba(244,244,241,.18);
  }

  /* Keep SYSTEM / COMING SOON as a subtle overlay */
  .loading {
    right: 144px;
    top: 39%;
    opacity: .58;
    z-index: 13;
  }

  /* The tagline is repeating information, so make it subtle */
  .tagline {
    right: 62px;
    bottom: 54px;
    opacity: .42;
    z-index: 13;
  }

  /* Countdown feels good, just slightly tighter */
  .launch-countdown {
    bottom: 62px;
    transform: scale(.94);
    transform-origin: left bottom;
  }
}

/* Better fit for your current browser height */
@media (min-width: 901px) and (max-height: 780px) {
  .hero-wrap {
    transform: translateX(-34px) scale(.9);
  }

  .geo-panel {
    top: 86px;
    right: 78px;
    width: min(50vw, 650px);
  }

  .geo-sphere {
    width: min(46vw, 590px);
    height: min(46vw, 590px);
  }

  .geo-readout {
    bottom: 8px;
  }

  .tagline {
    bottom: 40px;
  }

  .launch-countdown {
    bottom: 48px;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 9.4 CLEAN SIDEBAR NAV + MOBILE FOOTER */

/*
  Fixes:
  1. Aligns sidebar nav as [number] [label].
  2. Keeps PORTFOLIO/SOON on one clean line.
  3. Stops SOUND ON/OFF from overlapping copyright.
  4. Uses short copyright on mobile.
  5. Keeps desktop and mobile visually consistent.
*/

/* DESKTOP NAV CLEANUP */
.nav {
  gap: 24px;
  letter-spacing: 0;
}

.nav a {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 12px;
  line-height: 1;
}

.nav-num {
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
}

.nav-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .38em;
  white-space: nowrap;
}

.nav a.active::after {
  right: -56px;
  top: 50%;
}

/* DESKTOP FOOTER CLEANUP */
.sidebar-footer {
  display: grid;
  gap: 18px;
  align-items: start;
}

.sidebar-footer .socials {
  margin-bottom: 0;
}

.copyright-full {
  display: inline;
}

.copyright-short {
  display: none;
}

/* MOBILE SIDEBAR CLEANUP */
@media (max-width: 768px) {
  .sidebar {
    width: 118px;
    padding: 24px 12px 18px;
    overflow: hidden;
  }

  .main {
    margin-left: 118px;
    width: calc(100% - 118px);
  }

  .mini-logo {
    width: 56px;
    height: 56px;
    font-size: 20px;
    margin: 0 auto;
  }

  .nav {
    margin-top: 70px;
    gap: 28px;
    font-size: unset;
    letter-spacing: 0;
  }

  .nav a {
    grid-template-columns: 17px 1fr;
    gap: 7px;
    align-items: center;
    line-height: 1;
  }

  .nav-num {
    font-size: 8px;
    letter-spacing: .08em;
  }

  .nav-label {
    font-size: 6.7px;
    letter-spacing: .11em;
    white-space: nowrap;
  }

  .nav a:hover {
    transform: none;
  }

  .nav a.active::after {
    right: -20px;
    width: 16px;
    height: 2px;
  }

  .sidebar-footer {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 18px;
    display: grid;
    gap: 12px;
    justify-items: start;
  }

  .sidebar-footer .socials {
    margin-bottom: 0;
    font-size: 11px;
    gap: 7px;
    line-height: 1;
  }

  .sound-toggle {
    margin-top: 0;
    width: 84px;
    padding: 8px 6px;
    font-size: 6px;
    line-height: 1.4;
    letter-spacing: .18em;
    text-align: center;
    white-space: normal;
  }

  .copyright {
    position: static;
    left: auto;
    bottom: auto;
    max-width: 84px;
    font-size: 5.8px;
    letter-spacing: .18em;
    line-height: 1.6;
    white-space: normal;
  }

  .copyright-full {
    display: none;
  }

  .copyright-short {
    display: inline;
  }

  .back-home {
    left: 132px;
  }

  .home {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* EXTRA-TIGHT PHONE FALLBACK */
@media (max-width: 390px) {
  .sidebar {
    width: 112px;
  }

  .main {
    margin-left: 112px;
    width: calc(100% - 112px);
  }

  .nav-label {
    font-size: 6.3px;
    letter-spacing: .085em;
  }

  .sound-toggle {
    width: 78px;
    font-size: 5.8px;
  }

  .back-home {
    left: 126px;
  }
}

/* NIGHT MODE FOOTER CLEANUP */
@media (max-width: 768px) {
  body.theme-night .sound-toggle {
    color: #f3f3f0;
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.18);
  }

  body.theme-night .sound-toggle.active {
    color: var(--red);
    border-color: rgba(227,34,34,.65);
    box-shadow: 0 0 18px rgba(227,34,34,.14);
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 12.1 FINAL CLEAN ARCHIVE SYSTEM */

/*
  VERSION 12.1 GOAL:
  - Keep Version 10 cleanliness.
  - Add Version 12 winners only.
  - Menu = compact slider with light icon.
  - Archive = centered like F 3.5.
  - Locked files = real lock icon only.
  - Sound = compact slider, but copyright stays one line on desktop.
  - Modal = old palindrome height/font + newer login/back-to-archives.
*/


/* ==================================================
   01. SIDEBAR FOOTER / SOUND / IG
   ================================================== */

.sidebar-footer-v12 {
  display: grid;
  gap: 15px;
  align-items: start;
  justify-items: start;
}

.socials-v12 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  color: #777;
  font-size: 13px;
  letter-spacing: 0;
}

.socials-v12 a,
.socials-v12 span {
  color: #777;
  text-decoration: none;
  opacity: .82;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}

.socials-v12 a:hover,
.socials-v12 span:hover {
  color: var(--red);
  opacity: 1;
  transform: translateY(-2px);
}

.ig-link-v12 {
  display: inline-block;
  color: #777;
  text-decoration: none;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .38em;
  line-height: 1;
  transition: color .25s ease;
}

.ig-link-v12:hover {
  color: var(--red);
}

.sound-switch {
  width: 148px;
  height: 36px;
  margin-top: 0;
  padding: 0 8px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.44);
  display: grid;
  grid-template-columns: 20px 1fr 34px;
  align-items: center;
  gap: 8px;
  color: #111;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.sound-switch:hover {
  transform: translateX(4px);
  border-color: rgba(227,34,34,.45);
}

.sound-switch-icon {
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

.sound-svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-switch-text {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .28em;
  white-space: nowrap;
}

.sound-switch-track {
  width: 32px;
  height: 15px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  position: relative;
  background: rgba(0,0,0,.04);
}

.sound-switch-knob {
  position: absolute;
  left: 2px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #999;
  transform: translateY(-50%);
  transition: left .25s ease, background .25s ease, box-shadow .25s ease;
}

.sound-switch.active {
  color: var(--red);
  border-color: rgba(227,34,34,.58);
  background: rgba(255,255,255,.62);
}

.sound-switch.active .sound-switch-knob {
  left: 19px;
  background: var(--red);
  box-shadow: 0 0 12px rgba(227,34,34,.45);
}

.copyright-v12 {
  position: static;
  left: auto;
  bottom: auto;
  max-width: 190px;
  color: #777;
  font-size: 7px;
  letter-spacing: .28em;
  line-height: 1.8;
  white-space: nowrap;
}

.copyright-v12 .copyright-short {
  display: none;
}

.rights-line {
  display: block;
  margin-top: 5px;
  font-size: 6px;
  letter-spacing: .24em;
  color: #999;
}


/* ==================================================
   02. MENU SLIDER
   ================================================== */

.theme-menu-v12 {
  position: fixed;
  right: 34px;
  top: 52px;
  z-index: 70;
  display: grid;
  justify-items: end;
}

.menu-slider-shell {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(14px);
}

.theme-menu-v12 .theme-menu-button {
  position: static;
  border: none;
  width: auto;
  min-width: 86px;
  height: 38px;
  padding: 0 18px;
  background: transparent;
  color: #111;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .34em;
  cursor: pointer;
}

.theme-quick-toggle {
  width: 40px;
  height: 38px;
  border: none;
  border-left: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.25);
  color: #111;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.theme-quick-icon {
  width: 23px;
  height: 23px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  letter-spacing: 0;
}

.theme-menu-v12 .theme-menu-panel {
  top: 46px;
  right: 0;
}


/* ==================================================
   03. ARCHIVE CENTERING + HEADER
   ================================================== */

.archive-system {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 44px;
}

.archive-header {
  grid-template-columns: minmax(420px, 1fr) auto;
  align-items: start;
}

.archive-side-controls-v12 {
  justify-items: end;
  align-content: start;
  gap: 18px;
}

.archive-system-status-v12 {
  padding: 16px 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.26);
}

.archive-view-toggle-v12 {
  display: flex;
  gap: 0;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
}

.archive-view-toggle-v12 .view-btn {
  border: none;
  border-right: 1px solid rgba(0,0,0,.07);
  background: transparent;
  padding: 12px 16px;
  font-size: 8px;
  letter-spacing: .28em;
}

.archive-view-toggle-v12 .view-btn:last-child {
  border-right: none;
}

.archive-view-toggle-v12 .view-btn.active {
  background: rgba(227,34,34,.055);
  color: var(--red);
}

.archive-memo-top {
  max-width: 760px;
  margin-top: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.09);
  justify-content: flex-end;
  gap: 26px;
  font-size: 9px;
  letter-spacing: .36em;
}


/* ==================================================
   04. ARCHIVE ROWS LIKE F 3.5 FINAL
   ================================================== */

.archive-directory {
  max-width: none;
  width: 100%;
  margin-top: 34px;
}

.archive-dossier {
  grid-template-columns: 170px 110px minmax(260px, 1fr) 86px 48px;
  gap: 24px;
  min-height: 82px;
  padding-right: 22px;
}

.archive-info h3 {
  font-weight: 500;
  letter-spacing: .52em;
}

.archive-status.archive-lock-only,
.archive-status.archive-omega-only {
  justify-self: center;
  align-self: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(0,0,0,.09);
  background: rgba(255,255,255,.28);
  display: grid;
  place-items: center;
  color: var(--red);
  text-align: center;
  letter-spacing: 0;
}

.archive-omega-only {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 800;
  color: #111;
}

.cm-lock-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cm-lock-icon-large {
  width: 24px;
  height: 24px;
}


/* ==================================================
   05. ARCHIVE VIEW MODES
   ================================================== */

.archive-directory.view-grid,
.archive-directory.view-large,
.archive-directory.view-xl {
  display: grid;
  border-top: none;
  gap: 18px;
}

.archive-directory.view-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.archive-directory.view-grid .archive-dossier {
  min-height: 240px;
  grid-template-columns: 1fr;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-grid .archive-thumb {
  width: 100%;
  height: 112px;
}

.archive-directory.view-grid .archive-num,
.archive-directory.view-grid .archive-status,
.archive-directory.view-grid .archive-arrow {
  justify-self: center;
  text-align: center;
}

.archive-directory.view-large {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.archive-directory.view-large .archive-dossier {
  grid-template-columns: 1fr;
  min-height: 310px;
  padding: 28px;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-large .archive-thumb {
  width: 100%;
  height: 155px;
}

.archive-directory.view-xl {
  grid-template-columns: 1fr;
}

.archive-directory.view-xl .archive-dossier {
  grid-template-columns: 40% 80px 1fr 70px 50px;
  min-height: 250px;
  padding: 0 26px 0 0;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-xl .archive-thumb {
  width: 100%;
  height: 250px;
}


/* ==================================================
   06. HYBRID PALINDROME MODAL
   ================================================== */

.modal-v12 {
  background: rgba(245,245,242,.84);
  backdrop-filter: blur(18px);
}

.archive-modal-panel-v12 {
  width: min(1160px, 82vw);
  grid-template-columns: 330px 1fr;
  gap: 44px;
  align-items: center;
}

.archive-modal-panel-v12 h2 {
  font-weight: 400;
  letter-spacing: .46em;
}

.archive-video-frame-v12 {
  aspect-ratio: 16 / 9;
  min-height: auto;
  height: auto;
}

.archive-video-frame-v12 .palindrome-mini {
  font-weight: 400;
}

.archive-restricted-box-v12 {
  margin-top: 30px;
  padding: 34px 0;
  border-top: 1px solid rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(0,0,0,.14);
  text-align: left;
}

.restricted-lock-v12 {
  width: 74px;
  height: 74px;
  border: 1px solid rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  color: var(--red);
  margin-bottom: 24px;
}

.archive-lock-box-v12 {
  margin-top: 30px;
}

.access-input-wrap {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  width: 100%;
  margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.42);
}

.access-input-icon {
  display: grid;
  place-items: center;
  color: #999;
  letter-spacing: 0;
  font-size: 13px;
}

.access-input-wrap input {
  border: none;
  background: transparent;
  padding: 14px 12px;
  margin: 0;
  outline: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
}

.lock-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.lock-actions button {
  margin-top: 0;
}

#archiveUnlockButton {
  background: #111;
  border-color: #111;
  color: #fff;
}

.back-to-archives {
  border-color: rgba(227,34,34,.45);
  background: transparent;
  color: var(--red);
}


/* ==================================================
   07. GLOBE RING THINNER
   ================================================== */

.geo-sphere::after {
  inset: 24px !important;
  border: 1px solid rgba(227,34,34,.16) !important;
  box-shadow: none !important;
  opacity: .45 !important;
}


/* ==================================================
   08. NIGHT MODE
   ================================================== */

body.theme-night .menu-slider-shell,
body.theme-night .sound-switch,
body.theme-night .archive-system-status-v12,
body.theme-night .archive-view-toggle-v12 {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

body.theme-night .theme-menu-v12 .theme-menu-button,
body.theme-night .theme-quick-toggle,
body.theme-night .sound-switch,
body.theme-night .socials-v12 a,
body.theme-night .socials-v12 span,
body.theme-night .ig-link-v12,
body.theme-night .copyright-v12 {
  color: #f3f3f0;
}

body.theme-night .theme-quick-icon,
body.theme-night .archive-status.archive-lock-only,
body.theme-night .archive-status.archive-omega-only,
body.theme-night .restricted-lock-v12,
body.theme-night .access-input-wrap {
  border-color: rgba(255,255,255,.14);
}

body.theme-night .archive-omega-only {
  color: #f3f3f0;
}


/* ==================================================
   09. MOBILE
   ================================================== */

@media (max-width: 768px) {
  .sidebar-footer-v12 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 18px;
    gap: 10px;
  }

  .socials-v12 {
    gap: 8px;
    font-size: 11px;
  }

  .ig-link-v12 {
    font-size: 6px;
    letter-spacing: .22em;
  }

  .sound-switch {
    width: 86px;
    height: 34px;
    grid-template-columns: 16px 1fr;
    gap: 5px;
    padding: 0 6px;
  }

  .sound-switch-track {
    display: none;
  }

  .sound-switch-text {
    font-size: 5.7px;
    letter-spacing: .12em;
  }

  .sound-svg {
    width: 11px;
    height: 11px;
  }

  .copyright-v12 {
    max-width: 90px;
    font-size: 5.6px;
    letter-spacing: .15em;
    line-height: 1.6;
    white-space: normal;
  }

  .copyright-v12 .copyright-full {
    display: none;
  }

  .copyright-v12 .copyright-short {
    display: inline;
  }

  .rights-line {
    font-size: 5px;
    letter-spacing: .13em;
  }

  .theme-menu-v12 {
    right: 18px;
    top: 82px;
  }

  .menu-slider-shell {
    transform: scale(.86);
    transform-origin: right top;
  }

  .archive-header {
    grid-template-columns: 1fr;
  }

  .archive-side-controls-v12 {
    justify-items: start;
  }

  .archive-view-toggle-v12 {
    flex-wrap: wrap;
  }

  .archive-memo-top {
    justify-content: flex-start;
    display: grid;
    gap: 10px;
    font-size: 7px;
    letter-spacing: .2em;
  }

  .archive-dossier,
  .archive-directory.view-grid .archive-dossier,
  .archive-directory.view-large .archive-dossier,
  .archive-directory.view-xl .archive-dossier {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 20px 0;
  }

  .archive-directory.view-grid,
  .archive-directory.view-large,
  .archive-directory.view-xl {
    grid-template-columns: 1fr;
  }

  .archive-thumb,
  .archive-directory.view-grid .archive-thumb,
  .archive-directory.view-large .archive-thumb,
  .archive-directory.view-xl .archive-thumb {
    width: 100%;
    height: 145px;
  }

  .archive-status.archive-lock-only,
  .archive-status.archive-omega-only {
    justify-self: start;
    width: 36px;
    height: 36px;
  }

  .archive-modal-panel-v12 {
    width: calc(100vw - 120px);
    grid-template-columns: 1fr;
    gap: 28px;
    margin-left: 92px;
  }

  .lock-actions {
    grid-template-columns: 1fr;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 12.2 FINAL SMOOTHING OVERRIDES */

/*
  VERSION 12.2 GOAL:
  - Revert archive list alignment back to the older left-aligned structure.
  - Keep the newer top-right system/memo controls.
  - Add lock icon + clearance notation back.
  - Restore archive title font weight.
  - Make menu + sound controls rounded.
  - Keep full IG handle.
  - Add true drag behavior styling for the sound slider.
*/

/* 01. SIDEBAR FOOTER / FULL IG / ROUNDED SOUND SLIDER */
.sidebar-footer-v12 {
  display: grid;
  gap: 14px;
  align-items: start;
  justify-items: start;
}

.socials-v12 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  color: #777;
  font-size: 13px;
  letter-spacing: 0;
}

.socials-v12 a,
.socials-v12 span {
  color: #777;
  text-decoration: none;
  opacity: .82;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}

.socials-v12 a:hover,
.socials-v12 span:hover {
  color: var(--red);
  opacity: 1;
  transform: translateY(-2px);
}

.ig-link-v12 {
  display: inline-block;
  color: #777;
  text-decoration: none;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.2;
  white-space: nowrap;
  transition: color .25s ease;
}

.ig-link-v12:hover { color: var(--red); }

.sound-switch {
  width: 154px;
  height: 38px;
  margin-top: 0;
  padding: 0 8px;
  border: 1px solid rgba(227,34,34,.46);
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  display: grid;
  grid-template-columns: 18px 1fr 38px;
  align-items: center;
  gap: 8px;
  color: var(--red);
  cursor: pointer;
  user-select: none;
  touch-action: pan-y;
  box-shadow: 0 0 20px rgba(227,34,34,.08);
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.sound-switch:hover {
  transform: translateX(3px);
  border-color: rgba(227,34,34,.68);
  box-shadow: 0 0 26px rgba(227,34,34,.13);
}

.sound-switch-icon {
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

.sound-svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-switch-text {
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .22em;
  white-space: nowrap;
}

.sound-switch-track {
  width: 36px;
  height: 17px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 999px;
  position: relative;
  background: rgba(0,0,0,.035);
  cursor: grab;
}

.sound-switch-track:active { cursor: grabbing; }

.sound-switch-knob {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #999;
  transform: translateY(-50%);
  transition: left .25s ease, background .25s ease, box-shadow .25s ease;
}

.sound-switch.active {
  color: var(--red);
  border-color: rgba(227,34,34,.62);
  background: rgba(255,255,255,.68);
}

.sound-switch.active .sound-switch-knob {
  left: 22px;
  background: var(--red);
  box-shadow: 0 0 13px rgba(227,34,34,.55);
}

.copyright-v12 {
  position: static;
  left: auto;
  bottom: auto;
  max-width: none;
  color: #777;
  font-size: 6.5px;
  letter-spacing: .18em;
  line-height: 1.75;
  white-space: nowrap;
}

.copyright-v12 .copyright-short { display: none; }

.rights-line {
  display: block;
  margin-top: 4px;
  font-size: 5.8px;
  letter-spacing: .18em;
  color: #999;
}

/* 02. ROUNDED MENU / LIGHT-DARK SLIDER */
.theme-menu-v12 {
  position: fixed;
  right: 34px;
  top: 52px;
  z-index: 70;
  display: grid;
  justify-items: end;
}

.menu-slider-shell {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0,0,0,.045);
}

.theme-menu-v12 .theme-menu-button {
  position: static;
  border: none;
  width: auto;
  min-width: 88px;
  height: 38px;
  padding: 0 18px 0 20px;
  background: transparent;
  color: #111;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .34em;
  cursor: pointer;
}

.theme-quick-toggle {
  width: 42px;
  height: 38px;
  border: none;
  border-left: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.28);
  color: #111;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.theme-quick-icon {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  letter-spacing: 0;
}

.theme-menu-v12 .theme-menu-panel {
  top: 48px;
  right: 0;
  border-radius: 16px;
  overflow: hidden;
}

/* 03. ARCHIVE HEADER: OLD LEFT ALIGNMENT + NEW CONTROLS */
.archive-system {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-bottom: 50px;
}

.archive-header {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(440px, 560px);
  align-items: start;
  gap: 54px;
}

.archive-side-controls-v12 {
  justify-items: end;
  align-content: start;
  gap: 18px;
}

.archive-system-status-v12 {
  padding: 16px 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.27);
}

.archive-view-toggle-v12 {
  display: flex;
  gap: 0;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
}

.archive-view-toggle-v12 .view-btn {
  border: none;
  border-right: 1px solid rgba(0,0,0,.07);
  background: transparent;
  padding: 12px 16px;
  font-size: 8px;
  letter-spacing: .28em;
}

.archive-view-toggle-v12 .view-btn:last-child { border-right: none; }

.archive-view-toggle-v12 .view-btn.active {
  background: rgba(227,34,34,.055);
  color: var(--red);
}

.archive-memo-top {
  max-width: 720px;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.10);
  justify-content: flex-end;
  gap: 26px;
  font-size: 9px;
  letter-spacing: .34em;
}

/* 04. ARCHIVE ROWS: LEFT-ALIGNED LIST + LOCK TEXT RESTORED */
.archive-directory {
  max-width: 1180px;
  width: 100%;
  margin: 58px 0 0;
  gap: 0;
}

.archive-dossier {
  grid-template-columns: 190px 110px minmax(330px, 1fr) 310px 50px;
  gap: 28px;
  min-height: 82px;
  padding: 0 22px 0 0;
  border-top: 1px solid rgba(0,0,0,.095);
  background: rgba(255,255,255,.22);
}

.archive-dossier:last-child { border-bottom: 1px solid rgba(0,0,0,.095); }

.archive-dossier:hover {
  background: rgba(255,255,255,.62);
  transform: translateX(7px);
}

.archive-thumb {
  width: 190px;
  height: 76px;
}

.archive-info h3,
.archive-card h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .52em;
}

.archive-info p,
.archive-card p {
  margin-top: 8px;
  color: #666;
  font-size: 9px;
  letter-spacing: .38em;
}

.archive-status {
  color: var(--red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .36em;
  text-align: left;
}

.archive-lock-status,
.archive-omega-status {
  justify-self: start;
  align-self: center;
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--red);
  text-align: left;
  letter-spacing: .34em;
  white-space: nowrap;
}

.archive-lock-icon-box,
.archive-omega-icon {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(0,0,0,.09);
  background: rgba(255,255,255,.28);
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  letter-spacing: 0;
}

.archive-omega-icon {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 800;
  color: #111;
}

.cm-lock-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cm-lock-icon-large {
  width: 24px;
  height: 24px;
}

/* 05. ARCHIVE VIEW MODES: LIST / GRID / LARGE / XL */
.archive-directory.view-grid,
.archive-directory.view-large,
.archive-directory.view-xl {
  display: grid;
  border-top: none;
  gap: 18px;
}

.archive-directory.view-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.archive-directory.view-grid .archive-dossier {
  min-height: 245px;
  grid-template-columns: 1fr;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-grid .archive-thumb {
  width: 100%;
  height: 112px;
}

.archive-directory.view-grid .archive-num,
.archive-directory.view-grid .archive-status,
.archive-directory.view-grid .archive-arrow,
.archive-directory.view-grid .archive-lock-status,
.archive-directory.view-grid .archive-omega-status {
  justify-self: center;
  text-align: center;
}

.archive-directory.view-grid .archive-lock-status,
.archive-directory.view-grid .archive-omega-status {
  flex-direction: column;
  gap: 10px;
}

.archive-directory.view-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.archive-directory.view-large .archive-dossier {
  grid-template-columns: 1fr;
  min-height: 315px;
  padding: 28px;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-large .archive-thumb {
  width: 100%;
  height: 155px;
}

.archive-directory.view-xl { grid-template-columns: 1fr; }

.archive-directory.view-xl .archive-dossier {
  grid-template-columns: 40% 80px 1fr 310px 50px;
  min-height: 250px;
  padding: 0 26px 0 0;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-xl .archive-thumb {
  width: 100%;
  height: 250px;
}

/* 06. HYBRID PALINDROME MODAL */
.modal-v12 {
  background: rgba(245,245,242,.84);
  backdrop-filter: blur(18px);
}

.archive-modal-panel-v12 {
  width: min(1160px, 82vw);
  grid-template-columns: 330px 1fr;
  gap: 44px;
  align-items: center;
}

.archive-modal-panel-v12 h2 {
  font-weight: 400;
  letter-spacing: .46em;
}

.archive-video-frame-v12 {
  aspect-ratio: 16 / 9;
  min-height: auto;
  height: auto;
}

.archive-video-frame-v12 .palindrome-mini { font-weight: 400; }

.archive-restricted-box-v12 {
  margin-top: 30px;
  padding: 34px 0;
  border-top: 1px solid rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(0,0,0,.14);
  text-align: left;
}

.restricted-lock-v12 {
  width: 74px;
  height: 74px;
  border: 1px solid rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  color: var(--red);
  margin-bottom: 24px;
}

.archive-lock-box-v12 { margin-top: 30px; }

.access-input-wrap {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  width: 100%;
  margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.42);
}

.access-input-icon {
  display: grid;
  place-items: center;
  color: #999;
  letter-spacing: 0;
  font-size: 13px;
}

.access-input-wrap input {
  border: none;
  background: transparent;
  padding: 14px 12px;
  margin: 0;
  outline: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
}

.lock-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.lock-actions button { margin-top: 0; }

#archiveUnlockButton {
  background: #111;
  border-color: #111;
  color: #fff;
}

.back-to-archives {
  border-color: rgba(227,34,34,.45);
  background: transparent;
  color: var(--red);
}

/* 07. GLOBE RING THINNER / SMALLER */
.geo-sphere::after {
  inset: 24px !important;
  border: 1px solid rgba(227,34,34,.16) !important;
  box-shadow: none !important;
  opacity: .45 !important;
}

/* 08. NIGHT MODE */
body.theme-night .menu-slider-shell,
body.theme-night .sound-switch,
body.theme-night .archive-system-status-v12,
body.theme-night .archive-view-toggle-v12 {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

body.theme-night .theme-menu-v12 .theme-menu-button,
body.theme-night .theme-quick-toggle,
body.theme-night .sound-switch,
body.theme-night .socials-v12 a,
body.theme-night .socials-v12 span,
body.theme-night .ig-link-v12,
body.theme-night .copyright-v12 {
  color: #f3f3f0;
}

body.theme-night .theme-quick-icon,
body.theme-night .archive-lock-icon-box,
body.theme-night .archive-omega-icon,
body.theme-night .restricted-lock-v12,
body.theme-night .access-input-wrap {
  border-color: rgba(255,255,255,.14);
}

body.theme-night .archive-omega-icon { color: #f3f3f0; }

/* 09. MOBILE CLEANUP */
@media (max-width: 768px) {
  .sidebar {
    width: 132px;
    padding: 24px 12px 18px;
    overflow: hidden;
  }

  .main {
    margin-left: 132px;
    width: calc(100% - 132px);
  }

  .nav a {
    grid-template-columns: 17px 1fr;
    gap: 7px;
  }

  .nav-label {
    font-size: 6.15px;
    letter-spacing: .075em;
    white-space: nowrap;
  }

  .nav-num {
    font-size: 8px;
    letter-spacing: .06em;
  }

  .sidebar-footer-v12 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 18px;
    gap: 10px;
  }

  .socials-v12 {
    gap: 8px;
    font-size: 11px;
  }

  .ig-link-v12 {
    font-size: 5.3px;
    letter-spacing: .035em;
    max-width: 108px;
  }

  .sound-switch {
    width: 108px;
    height: 34px;
    grid-template-columns: 14px 1fr 30px;
    gap: 5px;
    padding: 0 7px;
  }

  .sound-switch-text {
    font-size: 5.35px;
    letter-spacing: .075em;
  }

  .sound-svg {
    width: 11px;
    height: 11px;
  }

  .sound-switch-track {
    width: 29px;
    height: 15px;
  }

  .sound-switch-knob {
    width: 9px;
    height: 9px;
    left: 2px;
  }

  .sound-switch.active .sound-switch-knob { left: 17px; }

  .copyright-v12 {
    max-width: 108px;
    font-size: 5.3px;
    letter-spacing: .10em;
    line-height: 1.55;
    white-space: normal;
  }

  .copyright-v12 .copyright-full { display: none; }
  .copyright-v12 .copyright-short { display: inline; }

  .rights-line {
    font-size: 4.9px;
    letter-spacing: .08em;
  }

  .theme-menu-v12 {
    right: 18px;
    top: 82px;
  }

  .menu-slider-shell {
    transform: scale(.86);
    transform-origin: right top;
  }

  .back-home { left: 146px; }

  .archive-header { grid-template-columns: 1fr; }
  .archive-side-controls-v12 { justify-items: start; }
  .archive-view-toggle-v12 { flex-wrap: wrap; }

  .archive-memo-top {
    justify-content: flex-start;
    display: grid;
    gap: 10px;
    font-size: 7px;
    letter-spacing: .2em;
  }

  .archive-directory { margin-top: 34px; }

  .archive-dossier,
  .archive-directory.view-grid .archive-dossier,
  .archive-directory.view-large .archive-dossier,
  .archive-directory.view-xl .archive-dossier {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 20px 0;
  }

  .archive-directory.view-grid,
  .archive-directory.view-large,
  .archive-directory.view-xl {
    grid-template-columns: 1fr;
  }

  .archive-thumb,
  .archive-directory.view-grid .archive-thumb,
  .archive-directory.view-large .archive-thumb,
  .archive-directory.view-xl .archive-thumb {
    width: 100%;
    height: 145px;
  }

  .archive-lock-status,
  .archive-omega-status {
    justify-self: start;
    gap: 10px;
    font-size: 7px;
    letter-spacing: .16em;
    white-space: normal;
  }

  .archive-lock-icon-box,
  .archive-omega-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .archive-modal-panel-v12 {
    width: calc(100vw - 148px);
    grid-template-columns: 1fr;
    gap: 28px;
    margin-left: 132px;
  }

  .lock-actions { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .sidebar { width: 126px; }

  .main {
    margin-left: 126px;
    width: calc(100% - 126px);
  }

  .back-home { left: 140px; }

  .nav-label {
    font-size: 5.85px;
    letter-spacing: .055em;
  }

  .ig-link-v12 { font-size: 5px; }

  .sound-switch { width: 102px; }

  .archive-modal-panel-v12 {
    width: calc(100vw - 140px);
    margin-left: 126px;
  }
}

/* 🟥 RED HIGHLIGHT END: VERSION 12.2 FINAL SMOOTHING OVERRIDES */


/* 🟩 GREEN HIGHLIGHT START: VERSION 12.4 TRUE DO-OVER FROM 12.2 BASE */

/*
  VERSION 12.4 TRUE DO-OVER:
  This patch starts from Version 12.2, not Version 10 and not Version 12.3.

  Keep from 12.2:
  - Archive layout with thumbnails
  - Rounded menu/light toggle
  - Rounded sound slider
  - Full IG handle
  - Lock icon + clearance text
  - LIST / GRID / LARGE / XL view system

  Only adjust:
  1. Palindrome modal/video frame closer to Version 10 size.
  2. Sound text slightly bigger and button pulled left so it does not hit the sidebar grid line.
  3. GLOBAL SIGNAL LIVE moved down so it is not hidden by the menu toggle.
*/

/* 01. PALINDROME MODAL — KEEP 12.2, RESTORE V10 VIDEO PROPORTION */
.modal-v12 .archive-modal-panel-v12,
.archive-modal-panel-v12 {
  width: min(1160px, 82vw) !important;
  grid-template-columns: 390px minmax(620px, 1fr) !important;
  gap: 44px !important;
  align-items: center !important;
}

.modal-v12 .archive-video-frame-v12,
.archive-video-frame-v12 {
  width: 100% !important;
  max-width: 760px !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  height: auto !important;
  justify-self: start !important;
}

.modal-v12 .archive-video-frame-v12 .palindrome-mini,
.archive-video-frame-v12 .palindrome-mini {
  font-weight: 400 !important;
  font-size: clamp(18px, 2vw, 34px) !important;
  letter-spacing: .55em !important;
}

/* 02. SOUND SLIDER — KEEP 12.2 SHAPE, CLEANER FIT IN LEFT SIDEBAR */
.sidebar-footer-v12 .sound-switch,
.sound-switch {
  width: 132px !important;
  height: 38px !important;
  margin-left: -6px !important;
  padding: 0 7px !important;
  grid-template-columns: 15px 1fr 30px !important;
  gap: 6px !important;
  border-radius: 999px !important;
}

.sound-switch-text {
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: .17em !important;
}

.sound-svg {
  width: 12px !important;
  height: 12px !important;
}

.sound-switch-track {
  width: 30px !important;
  height: 16px !important;
}

.sound-switch-knob {
  width: 9px !important;
  height: 9px !important;
  left: 3px !important;
}

.sound-switch.active .sound-switch-knob {
  left: 18px !important;
}

/* Keep copyright one line on desktop without pushing the sound button into the grid line. */
.copyright-v12 {
  max-width: none !important;
  white-space: nowrap !important;
}

/* 03. GLOBAL SIGNAL LIVE — MOVE DOWN BELOW THE MENU TOGGLE */
@media (min-width: 901px) {
  .geo-header {
    top: 42px !important;
    right: 38px !important;
  }
}

/* 04. MOBILE — PRESERVE 12.2 BUT PREVENT CROWDING */
@media (max-width: 768px) {
  .sidebar-footer-v12 .sound-switch,
  .sound-switch {
    width: 108px !important;
    margin-left: 0 !important;
    grid-template-columns: 14px 1fr 28px !important;
    gap: 5px !important;
  }

  .sound-switch-text {
    font-size: 5.8px !important;
    letter-spacing: .09em !important;
  }

  .sound-switch-track {
    width: 28px !important;
    height: 15px !important;
  }

  .sound-switch.active .sound-switch-knob {
    left: 16px !important;
  }

  .archive-modal-panel-v12 {
    width: calc(100vw - 148px) !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-left: 132px !important;
  }

  .archive-video-frame-v12 {
    max-width: 100% !important;
  }

  .archive-video-frame-v12 .palindrome-mini {
    font-size: 18px !important;
    letter-spacing: .32em !important;
  }

  .geo-header {
    top: 34px !important;
  }
}

@media (max-width: 390px) {
  .archive-modal-panel-v12 {
    width: calc(100vw - 140px) !important;
    margin-left: 126px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: VERSION 12.4 TRUE DO-OVER FROM 12.2 BASE */

/* 🟩 GREEN HIGHLIGHT START: VERSION 14 PHASE 1.2 — DYNAMIC ARCHIVE VIDEO SCREENS */

/*
  PURPOSE:
  - Keep the existing modal layout.
  - Keep the existing video frame size.
  - Archive 005 shows the interactive Palindrome cipher.
  - All other archives get their own themed video screen.
  - Add visible play buttons for non-005 archives.
  - Shift the frame slightly right on desktop so it does not collide with PALINDROME FILE.
*/

.archive-video-frame-v14p2 {
  position: relative;
  overflow: hidden;
  cursor: default;
}

.archive-video-frame-v14p2::before,
.archive-video-frame-v14p2::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 901px) {
  .archive-video-frame-v14p2 {
    transform: translateX(34px);
  }
}

/* Default: show custom archive video screen */
.archive-video-frame-v14p2 .archive-dynamic-preview {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  background: #080808;
  color: #fff;
}

.archive-video-frame-v14p2 .palindrome-cipher {
  display: none;
}

/* Archive 005 only: hide preview, show interactive cipher */
.archive-video-frame-v14p2.is-archive-005 .archive-dynamic-preview {
  display: none;
}

.archive-video-frame-v14p2.is-archive-005 .palindrome-cipher {
  display: grid;
}

/* General video-screen art */
.archive-preview-art {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(135deg, #050505, #191919 54%, #070707);
}

.archive-preview-art::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .85;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
}

.archive-preview-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(0,0,0,.28) 68%, rgba(0,0,0,.74) 100%);
}

.archive-preview-label {
  position: absolute;
  left: 28px;
  top: 24px;
  z-index: 4;
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .42em;
}

/* Play button */
.archive-preview-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.archive-preview-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: rgba(227,34,34,.95);
  background: rgba(227,34,34,.14);
  box-shadow: 0 0 32px rgba(227,34,34,.22);
}

.archive-preview-play span {
  position: absolute;
  left: 30px;
  top: 23px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 18px solid #fff;
}

/* Caption strip */
.archive-preview-caption {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  padding: 0 30px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(5,5,5,.94);
}

.archive-preview-caption strong {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .42em;
}

.archive-preview-caption small {
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .38em;
}

/* ARCHIVE 001 — NYE / fireworks */
.archive-video-frame-v14p2.archive-visual-001 .archive-preview-art {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 32%, rgba(255,255,255,.75) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 42%, rgba(227,34,34,.36), transparent 20%),
    radial-gradient(circle at 50% 72%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, #020202, #111 55%, #050505);
}

/* ARCHIVE 002 — Love & Rock / stage */
.archive-video-frame-v14p2.archive-visual-002 .archive-preview-art {
  background:
    radial-gradient(circle at 22% 26%, rgba(255,255,255,.18), transparent 16%),
    radial-gradient(circle at 74% 28%, rgba(255,255,255,.16), transparent 18%),
    linear-gradient(105deg, transparent 0 42%, rgba(255,255,255,.14) 43%, transparent 52%),
    linear-gradient(255deg, transparent 0 46%, rgba(227,34,34,.18) 47%, transparent 58%),
    linear-gradient(180deg, #050505, #171717 54%, #030303);
}

/* ARCHIVE 003 — Cabana / pool/dayclub */
.archive-video-frame-v14p2.archive-visual-003 .archive-preview-art {
  background:
    radial-gradient(circle at 48% 72%, rgba(255,255,255,.22), transparent 16%),
    linear-gradient(0deg, rgba(160,210,230,.20), transparent 42%),
    linear-gradient(90deg, rgba(255,255,255,.08) 0 12%, transparent 13% 100%),
    radial-gradient(circle at 75% 34%, rgba(255,255,255,.15), transparent 20%),
    linear-gradient(180deg, #0b0d0e, #1a1d1e 58%, #070707);
}

/* ARCHIVE 004 — Night Luxe / city after dark */
.archive-video-frame-v14p2.archive-visual-004 .archive-preview-art {
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.14) 11% 12%, transparent 13% 100%),
    linear-gradient(90deg, transparent 0 38%, rgba(255,255,255,.18) 39% 40%, transparent 41% 100%),
    linear-gradient(0deg, rgba(227,34,34,.14), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(180deg, #030303, #151515 50%, #040404);
}

/* ARCHIVE 006 — Classified */
.archive-video-frame-v14p2.archive-visual-006 .archive-preview-art {
  background:
    linear-gradient(90deg, rgba(0,0,0,.9), transparent 42%, rgba(0,0,0,.88)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.34), transparent 13%),
    linear-gradient(180deg, #050505, #161616 54%, #030303);
}

/* ARCHIVE 007 — Top Secret */
.archive-video-frame-v14p2.archive-visual-007 .archive-preview-art {
  background:
    linear-gradient(18deg, transparent 0 38%, rgba(255,255,255,.12) 39% 44%, transparent 45% 100%),
    radial-gradient(circle at 52% 52%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(180deg, #040404, #161616 50%, #030303);
}

.archive-video-frame-v14p2.archive-visual-007 .archive-preview-art::before {
  content: "TOP SECRET";
  position: absolute;
  left: 32%;
  top: 45%;
  transform: rotate(-10deg);
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.25);
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .3em;
}

/* ARCHIVE 008 — God File / redacted signal */
.archive-video-frame-v14p2.archive-visual-008 .archive-preview-art {
  background:
    radial-gradient(circle at 50% 48%, rgba(227,34,34,.22), transparent 20%),
    linear-gradient(90deg, transparent 0 20%, rgba(255,255,255,.1) 21% 25%, transparent 26% 100%),
    linear-gradient(0deg, transparent 0 42%, rgba(255,255,255,.12) 43% 47%, transparent 48% 100%),
    linear-gradient(180deg, #050505, #171717 55%, #030303);
}

.archive-video-frame-v14p2.archive-visual-008 .archive-preview-art::before {
  content: "△";
  display: grid;
  place-items: center;
  color: rgba(227,34,34,.78);
  font-size: 96px;
  background: radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(227,34,34,.12) 29% 30%, transparent 31%);
}

/* ARCHIVE 009 — Omega */
.archive-video-frame-v14p2.archive-visual-009 .archive-preview-art {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.36), transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.16), transparent 30%),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(255,255,255,.16) 29% 30%, transparent 31%),
    linear-gradient(180deg, #050505, #161616 54%, #020202);
}

.archive-video-frame-v14p2.archive-visual-009 .archive-preview-art::before {
  content: "Ω";
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.62);
  font-size: 82px;
  font-family: Georgia, serif;
}

/* Interactive Palindrome cipher */
.palindrome-cipher {
  position: absolute;
  inset: 0;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 24px;
  padding: 38px 28px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 47% 50%, rgba(227,34,34,.17), transparent 37%),
    linear-gradient(90deg, rgba(227,34,34,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(135deg, #070707, #1b1b1b 54%, #050505);
  background-size:
    100% 100%,
    78px 78px,
    22px 22px,
    100% 100%;
}

.palindrome-cipher::before {
  content: "";
  position: absolute;
  left: 43%;
  top: 50%;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(227,34,34,.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.palindrome-cipher::after {
  content: "";
  position: absolute;
  left: 43%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(227,34,34,.25);
  box-shadow: 0 0 28px rgba(227,34,34,.28);
  pointer-events: none;
}

.cipher-kicker {
  position: absolute;
  left: 28px;
  top: 22px;
  z-index: 4;
  color: var(--red);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .46em;
}

.cipher-grid {
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(5, 64px);
  grid-template-rows: repeat(5, 56px);
  border: 1px solid rgba(255,255,255,.14);
  position: relative;
  z-index: 3;
}

.cipher-cell {
  border: none;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.88);
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  cursor: pointer;
}

.cipher-cell:nth-child(5n) {
  border-right: none;
}

.cipher-cell:nth-last-child(-n + 5) {
  border-bottom: none;
}

.cipher-cell:hover,
.cipher-cell.is-active {
  color: var(--red);
  background: rgba(227,34,34,.16);
}

.cipher-cell.is-axis {
  color: var(--red);
  background: rgba(227,34,34,.09);
}

.cipher-cell.is-mirror {
  color: #fff;
  background: rgba(255,255,255,.12);
}

.cipher-readout {
  align-self: center;
  position: relative;
  z-index: 4;
  border-left: 1px solid rgba(255,255,255,.08);
  padding-left: 22px;
}

.cipher-readout-header span,
.cipher-readout-header small {
  display: block;
  color: var(--red);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .38em;
}

.cipher-readout-header strong {
  display: block;
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .34em;
  margin: 14px 0 10px;
}

.cipher-readout p {
  color: rgba(255,255,255,.64) !important;
  font-size: 7.8px !important;
  letter-spacing: .21em !important;
  line-height: 1.9 !important;
  margin: 18px 0 20px !important;
}

.cipher-symbol-list {
  display: grid;
  gap: 10px;
}

.cipher-symbol-card {
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  color: #fff;
  text-align: left;
  padding: 11px 13px;
  cursor: pointer;
}

.cipher-symbol-card:hover,
.cipher-symbol-card.active {
  border-color: rgba(227,34,34,.46);
  background: rgba(227,34,34,.12);
}

.cipher-symbol-card strong {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .34em;
  margin-bottom: 7px;
}

.cipher-symbol-card span {
  display: block;
  color: var(--red);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .28em;
}

/* Mobile */
@media (max-width: 900px) {
  .archive-video-frame-v14p2 {
    transform: none;
  }

  .palindrome-cipher {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 48px 18px 22px;
    min-height: 560px;
  }

  .cipher-grid {
    width: 100%;
    grid-template-columns: repeat(5, minmax(38px, 1fr));
    grid-template-rows: repeat(5, 52px);
  }

  .cipher-cell {
    font-size: 27px;
  }

  .cipher-readout {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-left: 0;
    padding-top: 18px;
  }
}

/* 🟥 RED HIGHLIGHT END: VERSION 14 PHASE 1.2 — DYNAMIC ARCHIVE VIDEO SCREENS */

/* 🟩 GREEN HIGHLIGHT START: VERSION 20 HOMEPAGE — VERSION 6 CENTER RESTORE */

/*
  VERSION 20 GOAL:
  - Restore Version 6-style homepage balance.
  - CM hero mark is centered and no longer touches the top.
  - Countdown stays locked bottom-left.
  - Stay In The Loop stays below the logo, but no longer pushes the logo upward.
  - Keep System / Coming Soon and bottom-right loading text.
*/

@media (min-width: 901px) {
  .home {
    display: block !important;
    position: relative !important;
    min-height: 100vh !important;
    padding: 0 88px !important;
    text-align: center;
  }

  .hero-wrap {
    position: absolute !important;
    left: 50% !important;
    top: calc(50% - 70px) !important;
    width: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 12;
  }

  .hero-mark {
    width: min(590px, 54vw, calc(100vh - 140px)) !important;
    height: min(590px, 54vw, calc(100vh - 140px)) !important;
    margin: 0 auto !important;
  }

  .home-signup {
    position: absolute !important;
    left: 50% !important;
    bottom: 54px !important;
    transform: translateX(-50%) !important;
    width: min(430px, 32vw) !important;
    max-width: 430px !important;
    z-index: 16;
    text-align: left;
  }

  .loop-label {
    color: var(--ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .48em;
    margin-bottom: 16px;
  }

  .loop-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 10px;
    align-items: center;
  }

  .loop-form input {
    width: 100%;
    height: 38px;
    border: 1px solid rgba(0,0,0,.18);
    background: rgba(255,255,255,.34);
    color: #111;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: .06em;
    outline: none;
  }

  .loop-form input:focus {
    border-color: rgba(227,34,34,.62);
    box-shadow: 0 0 18px rgba(227,34,34,.08);
  }

  .loop-form button {
    height: 38px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .34em;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }

  .loop-form button:hover {
    background: var(--red);
    border-color: var(--red);
  }

  .loop-copy {
    margin-top: 16px;
    color: #555;
    font-size: 8px;
    letter-spacing: .36em;
    line-height: 1.8;
  }

  .launch-countdown {
    position: absolute !important;
    left: 52px !important;
    bottom: 46px !important;
    transform: none !important;
    transform-origin: left bottom !important;
    z-index: 16 !important;
    max-width: 620px;
    text-align: left;
  }

  .loading {
    position: absolute !important;
    right: 52px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 16 !important;
    opacity: 1 !important;
  }

  .tagline {
    position: absolute !important;
    right: 52px !important;
    bottom: 58px !important;
    z-index: 16 !important;
    opacity: 1 !important;
    text-align: right;
  }

  .geo-panel {
    display: none !important;
  }
}

/* Short desktop height protection */
@media (min-width: 901px) and (max-height: 760px) {
  .hero-mark {
    width: min(560px, 52vw, calc(100vh - 126px)) !important;
    height: min(560px, 52vw, calc(100vh - 126px)) !important;
  }

  .home-signup {
    bottom: 46px !important;
  }

  .launch-countdown {
    bottom: 40px !important;
  }

  .tagline {
    bottom: 44px !important;
  }
}

@media (max-width: 900px) {
  .geo-panel {
    display: none !important;
  }

  .hero-wrap {
    transform: none !important;
  }

  .hero-mark {
    margin-left: 0 !important;
  }

  .home-signup {
    width: 100%;
    max-width: 360px;
    margin-top: 26px;
    text-align: center;
    z-index: 16;
  }

  .loop-label {
    color: var(--ink);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .32em;
    margin-bottom: 14px;
  }

  .loop-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .loop-form input,
  .loop-form button {
    height: 38px;
  }

  .loop-copy {
    margin-top: 14px;
    color: #555;
    font-size: 7px;
    letter-spacing: .24em;
    line-height: 1.9;
  }
}

body.theme-night .loop-form input {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: #f3f3f0;
}

body.theme-night .loop-label {
  color: #f3f3f0;
}

body.theme-night .loop-copy {
  color: #b9b9b4;
}

/* 🟥 RED HIGHLIGHT END: VERSION 20 HOMEPAGE — VERSION 6 CENTER RESTORE */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — ARCHIVE HEADER AND THEME MODE CLEANUP */

/*
  VERSION 23.1 GOAL:
  - Move MODE control below the hamburger lines.
  - Rename MENU visually to MODE in HTML.
  - Add light / dark / auto icons.
  - Add red active dot.
  - Realign Archive controls above the archive list.
  - Keep archive list left-aligned.
  - Keep archive memo on one clean line on desktop.
*/

/* ==================================================
   01. TOP-RIGHT MODE CONTROL — BELOW HAMBURGER
   ================================================== */

.hamburger {
  z-index: 95 !important;
}

.theme-menu-v12 {
  top: 76px !important;
  right: 34px !important;
  z-index: 90 !important;
}

.menu-slider-shell {
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.055) !important;
}

.theme-menu-v12 .theme-menu-button {
  min-width: 82px !important;
  height: 38px !important;
  padding: 0 18px 0 20px !important;
  letter-spacing: .36em !important;
}

.theme-quick-toggle {
  width: 42px !important;
  height: 38px !important;
}

.theme-quick-icon {
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Dropdown panel */
.theme-menu-v12 .theme-menu-panel {
  position: absolute !important;
  right: 0 !important;
  top: 50px !important;
  min-width: 215px !important;
  margin-top: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.14) !important;
}

.theme-menu-v12.open .theme-menu-panel {
  display: grid !important;
}

/* Theme option row: icon | label | red active dot */
.theme-menu-v12 .theme-option {
  display: grid !important;
  grid-template-columns: 22px 1fr 12px !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  background: transparent !important;
  color: #111 !important;
  text-align: left !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .28em !important;
}

.theme-menu-v12 .theme-option:last-child {
  border-bottom: none !important;
}

.theme-menu-v12 .theme-option-icon {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  color: #111 !important;
}

.theme-menu-v12 .theme-option-label {
  white-space: nowrap !important;
}

.theme-option-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  opacity: 0 !important;
  box-shadow: 0 0 0 rgba(227,34,34,0) !important;
  transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease !important;
}

.theme-menu-v12 .theme-option:hover {
  color: var(--red) !important;
  background: rgba(227,34,34,.035) !important;
}

.theme-menu-v12 .theme-option:hover .theme-option-dot {
  opacity: .38 !important;
}

.theme-menu-v12 .theme-option.active {
  color: var(--red) !important;
  background: rgba(227,34,34,.055) !important;
}

.theme-menu-v12 .theme-option.active .theme-option-dot {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  box-shadow:
    0 0 0 4px rgba(227,34,34,.08),
    0 0 16px rgba(227,34,34,.72) !important;
}

/* ==================================================
   02. ARCHIVE HEADER CONTROLS — ABOVE LIST, LEFT-ALIGNED
   ================================================== */

   /* 🟩 GREEN HIGHLIGHT ADD */

   /* ==================================================
      02. ARCHIVE HEADER CONTROLS — STACKED / RIGHT-JUSTIFIED
      ================================================== */

   @media (min-width: 901px) {
     .archive-system {
       max-width: none !important;
       width: 100% !important;
       margin: 0 !important;
     }

     /*
       VERSION 23.1 REFINED:
       - Keep archive title/copy on the left.
       - Stack SYSTEM, LIST/GRID, and MEMO vertically.
       - Right-justify the control block like Version 12.
       - Keep the block slightly more centered than Version 12 by limiting the header width.
     */
     .archive-header {
       display: grid !important;
       grid-template-columns: minmax(520px, 1fr) minmax(520px, 670px) !important;
       align-items: start !important;
       gap: 38px !important;
       width: 100% !important;
       max-width: 1180px !important;
     }

     .archive-side-controls-v12 {
       justify-self: end !important;
       align-self: start !important;
       display: grid !important;
       grid-template-columns: 1fr !important;
       justify-items: end !important;
       align-content: start !important;
       gap: 16px !important;
       width: min(670px, 100%) !important;
       margin-top: 8px !important;
       transform: translateX(0) !important;
       text-align: right !important;
     }

     .archive-system-status-v12 {
       justify-self: end !important;
       display: flex !important;
       align-items: center !important;
       justify-content: flex-end !important;
       gap: 24px !important;
       margin: 0 !important;
       padding: 16px 24px !important;
       min-height: 46px !important;
       min-width: 410px !important;
       border: 1px solid rgba(0,0,0,.08) !important;
       background: rgba(255,255,255,.30) !important;
       font-size: 10px !important;
       font-weight: 500 !important;
       letter-spacing: .48em !important;
     }

     .archive-system-status-v12 span,
     .archive-system-status-v12 strong {
       font-weight: 500 !important;
     }

     .archive-system-status-v12 strong {
       color: var(--red) !important;
     }

     .archive-system-status-v12::after {
       content: "" !important;
       display: block !important;
       width: 58px !important;
       height: 1px !important;
       background: var(--red) !important;
     }

     .archive-view-toggle-v12 {
       justify-self: end !important;
       display: flex !important;
       gap: 0 !important;
       margin: 0 !important;
       min-height: 44px !important;
       border: 1px solid rgba(0,0,0,.08) !important;
       background: rgba(255,255,255,.48) !important;
     }

     .archive-view-toggle-v12 .view-btn {
       min-height: 44px !important;
       padding: 0 20px !important;
       border: none !important;
       border-right: 1px solid rgba(0,0,0,.07) !important;
       background: transparent !important;
       font-size: 8px !important;
       font-weight: 500 !important;
       letter-spacing: .28em !important;
     }

     .archive-view-toggle-v12 .view-btn:last-child {
       border-right: none !important;
     }

     .archive-view-toggle-v12 .view-btn.active {
       color: var(--red) !important;
       background: rgba(227,34,34,.055) !important;
       font-weight: 500 !important;
     }

     /*
       Memo sits below the controls, right-justified.
       The full phrase stays on one clean line.
     */
     .archive-memo-top {
       justify-self: end !important;
       display: flex !important;
       flex-wrap: nowrap !important;
       align-items: center !important;
       justify-content: flex-end !important;
       gap: 28px !important;
       max-width: none !important;
       margin: 0 !important;
       padding-top: 16px !important;
       border-top: 1px solid rgba(0,0,0,.10) !important;
       white-space: nowrap !important;
       color: #555 !important;
       font-size: 9px !important;
       font-weight: 500 !important;
       letter-spacing: .34em !important;
       text-align: right !important;
     }

     .archive-memo-top span {
       display: inline-block !important;
       white-space: nowrap !important;
       font-weight: 500 !important;
     }

     .archive-memo-top span:first-child {
       color: var(--red) !important;
     }

     /*
       Keep archive list left-aligned.
       Keep archive titles bold.
     */
     .archive-directory {
       max-width: 1180px !important;
       width: 100% !important;
       margin: 48px 0 0 !important;
     }

     .archive-info h3,
     .archive-card h3 {
       font-weight: 700 !important;
     }
   }

   /* Mid-size desktop protection */
   @media (min-width: 901px) and (max-width: 1320px) {
     .archive-header {
       grid-template-columns: 1fr !important;
     }

     .archive-side-controls-v12 {
       justify-self: end !important;
       justify-items: end !important;
       width: min(670px, 100%) !important;
       margin-top: 24px !important;
       text-align: right !important;
     }

     .archive-memo-top {
       flex-wrap: wrap !important;
       justify-content: flex-end !important;
       white-space: normal !important;
       gap: 14px !important;
     }
   }

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — ARCHIVE HEADER AND THEME MODE CLEANUP */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — ARCHIVE CONTROL FONT-WEIGHT MATCH V12 */

.archive-system-status-v12,
.archive-system-status-v12 span,
.archive-system-status-v12 strong,
.archive-view-toggle-v12 .view-btn,
.archive-view-toggle-v12 .view-btn.active,
.archive-memo-top,
.archive-memo-top span {
  font-weight: 700 !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — ARCHIVE CONTROL FONT-WEIGHT MATCH V12 */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE ARCHIVE BOX FINAL RESTORE */

/*
  FIX:
  The 23.1 archive header boxes use light-mode backgrounds with !important.
  This final night-mode override must come AFTER the 23.1 archive header patch.
  It restores the darker v12/v23 night-mode box style.
*/

body.theme-night .archive-header .archive-side-controls-v12 .archive-system-status-v12,
body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 {
  background: rgba(255,255,255,.05) !important;
  background-color: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 .view-btn {
  background: transparent !important;
  background-color: transparent !important;
  border-right-color: rgba(255,255,255,.10) !important;
  color: #f3f3f0 !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 .view-btn.active {
  background: rgba(227,34,34,.08) !important;
  background-color: rgba(227,34,34,.08) !important;
  color: var(--red) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-system-status-v12 span {
  color: #f3f3f0 !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-system-status-v12 strong {
  color: var(--red) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-system-status-v12::after {
  background: var(--red) !important;
  opacity: .85 !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-memo-top {
  color: rgba(243,243,240,.58) !important;
  border-top-color: rgba(255,255,255,.10) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-memo-top span {
  color: rgba(243,243,240,.58) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-memo-top span:first-child {
  color: var(--red) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE ARCHIVE BOX FINAL RESTORE */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE MODE BUTTON RESTORE */

/*
  FIX:
  Archive night mode is now correct.
  This only restores the MODE button shell so it no longer looks gray/white in night mode.
*/

body.theme-night .theme-menu-v12 .menu-slider-shell {
  background: rgba(0,0,0,.28) !important;
  background-color: rgba(0,0,0,.28) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: none !important;
}

body.theme-night .theme-menu-v12 .theme-menu-button {
  background: transparent !important;
  background-color: transparent !important;
  color: #f3f3f0 !important;
  border-color: transparent !important;
}

body.theme-night .theme-menu-v12 .theme-quick-toggle {
  background: rgba(255,255,255,.035) !important;
  background-color: rgba(255,255,255,.035) !important;
  color: #f3f3f0 !important;
  border-left-color: rgba(255,255,255,.14) !important;
}

body.theme-night .theme-menu-v12 .theme-quick-icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #f3f3f0 !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Optional: dropdown panel also stays dark/clean if opened */
body.theme-night .theme-menu-v12 .theme-menu-panel {
  background: rgba(0,0,0,.82) !important;
  background-color: rgba(0,0,0,.82) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.36) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE MODE BUTTON RESTORE */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE ICON VISIBILITY POLISH */

/*
  PURPOSE:
  Keep the darker infrared night mode.
  Do NOT make the boxes gray again.
  Only brighten small icons, borders, arrows, and micro UI details.
*/

/* MODE moon/sun/auto icon — brighter but still dark-mode clean */
body.theme-night .theme-menu-v12 .theme-quick-icon {
  color: rgba(243,243,240,.95) !important;
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.045),
    0 0 14px rgba(255,255,255,.06) !important;
  opacity: 1 !important;
}

/* MODE dropdown icons if the panel is open */
body.theme-night .theme-menu-v12 .theme-option-icon {
  color: rgba(243,243,240,.92) !important;
  border-color: rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.045) !important;
  opacity: 1 !important;
}

/* Active red dot in dropdown — keep it infrared */
body.theme-night .theme-menu-v12 .theme-option.active .theme-option-dot {
  opacity: 1 !important;
  box-shadow:
    0 0 0 4px rgba(227,34,34,.10),
    0 0 16px rgba(227,34,34,.78) !important;
}

/* Archive arrows — slightly brighter so they don't vanish */
body.theme-night .archive-arrow {
  color: rgba(243,243,240,.86) !important;
  opacity: .92 !important;
}

/* Locked archive icon boxes — visible but not gray-filled */
body.theme-night .archive-lock-icon-box,
body.theme-night .archive-omega-icon {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: var(--red) !important;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.035),
    0 0 12px rgba(227,34,34,.06) !important;
  opacity: 1 !important;
}

/* Lock SVG itself — crisp red */
body.theme-night .archive-lock-icon-box .cm-lock-icon {
  color: var(--red) !important;
  stroke: currentColor !important;
  opacity: .95 !important;
}

/* Omega symbol — readable but still premium */
body.theme-night .archive-omega-icon {
  color: rgba(243,243,240,.92) !important;
}

/* Back button / close button micro borders */
body.theme-night .back-home,
body.theme-night .close {
  border-color: rgba(255,255,255,.20) !important;
  color: rgba(243,243,240,.90) !important;
}

/* Keep hover states alive without making the whole UI gray */
body.theme-night .archive-card:hover .archive-arrow,
body.theme-night .archive-dossier:hover .archive-arrow,
body.theme-night .theme-menu-v12 .theme-quick-toggle:hover .theme-quick-icon {
  color: var(--red) !important;
  border-color: rgba(227,34,34,.42) !important;
  box-shadow:
    0 0 0 4px rgba(227,34,34,.06),
    0 0 18px rgba(227,34,34,.22) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE ICON VISIBILITY POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE HERO RING + TEXT POLISH */

/*
  PURPOSE:
  - Keep the current CMV_23.1 homepage structure.
  - Do NOT rebuild into Homepage-B yet.
  - Make the night-mode CM ring feel darker / more graphite like Homepage-B.
  - Improve readability of “CINEMATIC VISUALS WITH A PULSE.”
*/

/* Make the moving white ring less bright in night mode */
body.theme-night .home .orbit {
  border-color: rgba(243,243,240,.34) !important;
  box-shadow:
    inset 0 0 46px rgba(0,0,0,.62),
    0 0 34px rgba(255,255,255,.035) !important;
  opacity: .82 !important;
}

/* Darken the inner globe so it feels more like black/graphite glass */
body.theme-night .home .globe {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.30), rgba(80,80,78,.34) 28%, rgba(10,10,10,.76) 68%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.025) 35px),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.022) 35px) !important;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.72),
    inset 0 0 32px rgba(255,255,255,.045) !important;
  opacity: .86 !important;
}

/* Reduce the gray continent blobs slightly so they do not muddy the CM letters */
body.theme-night .home .continent {
  background: rgba(255,255,255,.10) !important;
  opacity: .65 !important;
}

/* Keep CM strong but less blown-out */
body.theme-night .home .letters {
  color: rgba(255,255,255,.92) !important;
  text-shadow:
    0 18px 36px rgba(0,0,0,.58),
    0 0 18px rgba(255,255,255,.08) !important;
}

/* Make the subtitle readable without overpowering the logo */
body.theme-night .hero-title p {
  color: rgba(243,243,240,.68) !important;
  text-shadow: 0 0 12px rgba(0,0,0,.55) !important;
}

body.theme-night .hero-title p span {
  color: var(--red) !important;
  text-shadow: 0 0 12px rgba(227,34,34,.28) !important;
}

/* “FULL EXPERIENCE LOADING” should remain subtle but readable */
body.theme-night .coming-soon-copy {
  color: rgba(243,243,240,.48) !important;
}

/* Make the dotted outer rings more like a system overlay, less white */
body.theme-night .home .rings,
body.theme-night .home .rings::after {
  border-color: rgba(255,255,255,.10) !important;
  opacity: .58 !important;
}

/* Keep speedlines subtle in night mode */
body.theme-night .home .speedlines {
  opacity: .26 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 14px,
    rgba(255,255,255,.035) 15px,
    transparent 16px 28px
  ) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE HERO RING + TEXT POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE MINI LOGO READABILITY POLISH */

/*
  PURPOSE:
  Keep the top-left CM logo dark and premium,
  but make the CM letters readable in night mode.
*/

body.theme-night .mini-logo {
  color: rgba(243,243,240,.72) !important;
  border-color: rgba(255,255,255,.24) !important;
  background: radial-gradient(circle at 38% 34%, rgba(255,255,255,.14), rgba(255,255,255,.035) 42%, rgba(0,0,0,.38) 100%) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.055),
    0 0 18px rgba(255,255,255,.045) !important;
  opacity: 1 !important;
}

body.theme-night .mini-logo:hover {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(227,34,34,.42) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.07),
    0 0 20px rgba(227,34,34,.16) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE MINI LOGO READABILITY POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE VIEW TOGGLE BLACK CONTRAST FINAL */

/*
  PURPOSE:
  Only darken the LIST / GRID / LARGE / XL box in night mode.
  Keep SYSTEM ONLINE, MODE, hero, sidebar, and everything else unchanged.
*/

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 {
  background: rgba(0,0,0,.58) !important;
  background-color: rgba(0,0,0,.58) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.025),
    0 0 18px rgba(0,0,0,.26) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 .view-btn {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(243,243,240,.88) !important;
  border-right-color: rgba(255,255,255,.10) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 .view-btn.active {
  background: rgba(227,34,34,.10) !important;
  background-color: rgba(227,34,34,.10) !important;
  color: var(--red) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 .view-btn:hover {
  background: rgba(227,34,34,.07) !important;
  color: var(--red) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE VIEW TOGGLE BLACK CONTRAST FINAL */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.2 — ARCHIVE TITLE RED DASH INLINE FIX */

/*
  PURPOSE:
  Move the red dash beside ARCHIVE SYSTEM instead of letting it fall underneath.
  This only affects the Archive page title.
*/

.archive .section-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 26px !important;
  white-space: nowrap !important;
}

.archive .section-title::after {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 2px !important;
  margin-left: 0 !important;
  vertical-align: middle !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.2 — ARCHIVE TITLE RED DASH INLINE FIX */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.2 — PORTFOLIO CARD VISUAL POLISH */

/*
  PURPOSE:
  - Keep CMV_23.2 as a naming/content update.
  - Do NOT make cards clickable yet.
  - Make Portfolio cards feel more cinematic/dossier-like.
  - Match the stronger Archive system without changing layout logic.
*/

.portfolio .soon-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: 1120px !important;
}

.portfolio .soon-grid div {
  position: relative !important;
  overflow: hidden !important;
  min-height: 230px !important;
  padding: 24px 22px !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(180deg, #050505, #171717 58%, #070707) !important;
  color: #f3f3f0 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.12) !important;
}

.portfolio .soon-grid div::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, transparent 0 28%, rgba(0,0,0,.32) 70%) !important;
  background-size:
    42px 42px,
    42px 42px,
    100% 100% !important;
  opacity: .8 !important;
  pointer-events: none !important;
}

.portfolio .soon-grid div::after {
  position: absolute !important;
  left: 50% !important;
  top: 38% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 28px !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 18px rgba(255,255,255,.18) !important;
}

.portfolio .soon-grid div:nth-child(1)::after {
  content: "✦" !important;
}

.portfolio .soon-grid div:nth-child(2)::after {
  content: "♬" !important;
}

.portfolio .soon-grid div:nth-child(3)::after {
  content: "☼" !important;
}

.portfolio .soon-grid div:nth-child(4)::after {
  content: "◐" !important;
}

.portfolio .soon-grid span,
.portfolio .soon-grid strong,
.portfolio .soon-grid small {
  position: relative !important;
  z-index: 2 !important;
}

.portfolio .soon-grid span {
  color: var(--red) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .38em !important;
}

.portfolio .soon-grid strong {
  color: #f3f3f0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .34em !important;
  line-height: 1.55 !important;
}

.portfolio .soon-grid small {
  color: rgba(243,243,240,.72) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .27em !important;
  line-height: 1.8 !important;
}

.portfolio .soon-grid div:hover {
  transform: translateY(-7px) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(227,34,34,.20), transparent 24%),
    linear-gradient(180deg, #050505, #191919 58%, #060606) !important;
  border-color: rgba(227,34,34,.42) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.18),
    0 0 26px rgba(227,34,34,.10) !important;
}

/* Night mode: keep cards dark, but make red glow stronger */
body.theme-night .portfolio .soon-grid div {
  border-color: rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(180deg, #030303, #121212 58%, #050505) !important;
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.025),
    0 22px 54px rgba(0,0,0,.26) !important;
}

body.theme-night .portfolio .soon-grid div:hover {
  border-color: rgba(227,34,34,.48) !important;
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.025),
    0 26px 70px rgba(0,0,0,.32),
    0 0 28px rgba(227,34,34,.14) !important;
}

/* Mobile/tablet protection */
@media (max-width: 1180px) {
  .portfolio .soon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .portfolio .soon-grid {
    grid-template-columns: 1fr !important;
  }

  .portfolio .soon-grid div {
    min-height: 190px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.2 — PORTFOLIO CARD VISUAL POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.3 — PORTFOLIO VIEW TOGGLE SYSTEM */

/*
  PURPOSE:
  - Add Portfolio TILE / WIDE view modes.
  - Keep TILE as the default CMV_23.2 cinematic card layout.
  - Add WIDE as a cleaner, older-style layout.
  - Do NOT make Portfolio cards clickable yet.
  - Do NOT affect Archive LIST / GRID / LARGE / XL.
*/

/* Tighten Portfolio intro spacing once controls are added */
.portfolio .soon-panel .portfolio-copy {
  margin-bottom: 24px !important;
}

/* Portfolio view control row */
.portfolio-view-controls-v23 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 28px;
  color: #111;
}

.portfolio-view-controls-v23 > span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .38em;
  color: #111;
  white-space: nowrap;
}

.portfolio-view-toggle {
  display: flex;
  gap: 0;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.42);
}

.portfolio-view-btn {
  border: none;
  border-right: 1px solid rgba(0,0,0,.08);
  background: transparent;
  color: #111;
  padding: 11px 18px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .30em;
  cursor: pointer;
  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.portfolio-view-btn:last-child {
  border-right: none;
}

.portfolio-view-btn.active,
.portfolio-view-btn:hover {
  color: var(--red);
  background: rgba(227,34,34,.065);
}

/* TILE VIEW — keep approved CMV_23.2 card direction */
.portfolio .soon-grid.portfolio-view-tile {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: 1120px !important;
}

/* WIDE VIEW — cleaner, calmer, older-layout-inspired option */
.portfolio .soon-grid.portfolio-view-wide {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  max-width: 1120px !important;
}

.portfolio .soon-grid.portfolio-view-wide div {
  min-height: 112px !important;
  padding: 22px 30px 22px 132px !important;
  display: grid !important;
  grid-template-columns: 90px minmax(250px, 1fr) minmax(260px, 1fr) !important;
  align-items: center !important;
  column-gap: 28px !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(255,255,255,.12), transparent 16%),
    linear-gradient(180deg, #050505, #141414 58%, #060606) !important;
}

/* Move the icons left in WIDE mode */
.portfolio .soon-grid.portfolio-view-wide div::after {
  left: 64px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 24px !important;
  opacity: .92 !important;
}

/* WIDE view typography layout */
.portfolio .soon-grid.portfolio-view-wide span {
  grid-column: 1 !important;
  align-self: center !important;
}

.portfolio .soon-grid.portfolio-view-wide strong {
  grid-column: 2 !important;
  align-self: center !important;
  font-size: 14px !important;
  letter-spacing: .36em !important;
}

.portfolio .soon-grid.portfolio-view-wide small {
  grid-column: 3 !important;
  align-self: center !important;
  color: rgba(243,243,240,.64) !important;
  font-size: 8px !important;
  letter-spacing: .28em !important;
  line-height: 1.7 !important;
}

/* WIDE hover should feel premium but less dramatic than TILE */
.portfolio .soon-grid.portfolio-view-wide div:hover {
  transform: translateX(7px) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(227,34,34,.18), transparent 18%),
    linear-gradient(180deg, #050505, #161616 58%, #060606) !important;
  border-color: rgba(227,34,34,.40) !important;
}

/* Night mode controls */
body.theme-night .portfolio-view-controls-v23 > span {
  color: rgba(243,243,240,.86);
}

body.theme-night .portfolio-view-toggle {
  background: rgba(0,0,0,.58);
  border-color: rgba(255,255,255,.15);
}

body.theme-night .portfolio-view-btn {
  color: rgba(243,243,240,.82);
  border-right-color: rgba(255,255,255,.10);
}

body.theme-night .portfolio-view-btn.active,
body.theme-night .portfolio-view-btn:hover {
  color: var(--red);
  background: rgba(227,34,34,.11);
}

/* Night mode WIDE */
body.theme-night .portfolio .soon-grid.portfolio-view-wide div {
  border-color: rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(255,255,255,.10), transparent 16%),
    linear-gradient(180deg, #030303, #111 58%, #050505) !important;
}

body.theme-night .portfolio .soon-grid.portfolio-view-wide div:hover {
  border-color: rgba(227,34,34,.46) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(227,34,34,.18), transparent 18%),
    linear-gradient(180deg, #030303, #131313 58%, #050505) !important;
}

/* Tablet protection */
@media (max-width: 1180px) {
  .portfolio .soon-grid.portfolio-view-tile {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .portfolio .soon-grid.portfolio-view-wide div {
    grid-template-columns: 70px 1fr !important;
    padding-left: 112px !important;
  }

  .portfolio .soon-grid.portfolio-view-wide small {
    grid-column: 2 !important;
    margin-top: 10px !important;
  }
}

/* Mobile protection */
@media (max-width: 768px) {
  .portfolio-view-controls-v23 {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .portfolio-view-toggle {
    width: 100%;
  }

  .portfolio-view-btn {
    flex: 1;
    padding: 11px 12px;
    font-size: 7px;
    letter-spacing: .22em;
  }

  .portfolio .soon-grid.portfolio-view-tile,
  .portfolio .soon-grid.portfolio-view-wide {
    grid-template-columns: 1fr !important;
  }

  .portfolio .soon-grid.portfolio-view-wide div {
    min-height: 170px !important;
    padding: 26px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .portfolio .soon-grid.portfolio-view-wide div::after {
    left: 50% !important;
    top: 42% !important;
    font-size: 24px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.3 — PORTFOLIO VIEW TOGGLE SYSTEM */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.3 — PORTFOLIO VIEW CONTROL CENTER ALIGNMENT */

/*
  PURPOSE:
  Center the PORTFOLIO VIEW / TILE / WIDE control group
  so it feels balanced above the Portfolio cards.
  This does not affect Archive controls.
*/

.portfolio-view-controls-v23 {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.portfolio-view-controls-v23 > span {
  text-align: center !important;
}

.portfolio-view-toggle {
  justify-content: center !important;
}

.portfolio-view-btn {
  min-width: 78px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

/* Mobile: keep it centered but stacked cleanly */
@media (max-width: 768px) {
  .portfolio-view-controls-v23 {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .portfolio-view-toggle {
    width: min(100%, 260px) !important;
    margin: 0 auto !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.3 — PORTFOLIO VIEW CONTROL CENTER ALIGNMENT */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.3 — PORTFOLIO TILE CARD TEXT CENTER ALIGNMENT */

/*
  PURPOSE:
  Center the main Portfolio card words:
  NYE DOSSIER / KINETIC STAGE / DAYLIGHT MOTION / NIGHT LUXE.

  Keep the red archive numbers in their current position.
  Only affects TILE view.
*/

.portfolio .soon-grid.portfolio-view-tile strong {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  align-self: center !important;
}

.portfolio .soon-grid.portfolio-view-tile small {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  align-self: center !important;
}

/* Keep the red numbers untouched / dossier-style */
.portfolio .soon-grid.portfolio-view-tile span {
  align-self: flex-start !important;
  text-align: left !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.3 — PORTFOLIO TILE CARD TEXT CENTER ALIGNMENT */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4 — CLICKABLE COMING SOON CARDS + MODAL */

/*
  PURPOSE:
  - Make Portfolio cards clickable.
  - Make Services cards clickable.
  - Add one shared Coming Soon modal.
  - Keep Archive modal completely separate.
  - Preserve Portfolio TILE / WIDE behavior.
*/

/* Make button cards inherit the existing card design */
.soon-grid > .coming-soon-card,
.info-grid > .coming-soon-card {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.36);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.soon-grid > .coming-soon-card {
  min-height: 160px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.info-grid > .coming-soon-card {
  min-height: 160px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.soon-grid > .coming-soon-card:hover,
.info-grid > .coming-soon-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.62);
  border-color: rgba(227,34,34,.35);
  box-shadow: 0 22px 60px rgba(0,0,0,.09);
}

.soon-grid > .coming-soon-card:focus-visible,
.info-grid > .coming-soon-card:focus-visible {
  outline: 1px solid rgba(227,34,34,.75);
  outline-offset: 4px;
}

/* Preserve text styling inside button cards */
.coming-soon-card span {
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .42em;
}

.coming-soon-card strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .38em;
}

.coming-soon-card small {
  color: #777;
  font-size: 9px;
  letter-spacing: .4em;
}

/* Shared modal */
.coming-soon-modal-v234 {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .42s ease, visibility .42s ease;
}

.coming-soon-modal-v234.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.coming-soon-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(245,245,242,.78);
  backdrop-filter: blur(18px);
}

.coming-soon-panel {
  position: relative;
  z-index: 2;
  width: min(860px, 82vw);
  min-height: 520px;
  padding: 42px;
  border: 1px solid rgba(0,0,0,.12);
  background:
    radial-gradient(circle at 72% 38%, rgba(227,34,34,.10), transparent 28%),
    rgba(248,248,245,.86);
  box-shadow: 0 34px 100px rgba(0,0,0,.18);
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-areas:
    "meta preview"
    "copy preview"
    "status preview";
  gap: 24px 38px;
  align-items: start;
}

.coming-soon-close {
  position: absolute;
  right: 24px;
  top: 22px;
  border: none;
  background: transparent;
  color: #111;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .38em;
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}

.coming-soon-close:hover {
  color: var(--red);
  transform: translateX(-3px);
}

#comingSoonKicker {
  grid-area: meta;
  align-self: start;
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .44em;
}

#comingSoonTitle {
  grid-area: meta;
  margin-top: 34px;
  color: #111;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: .42em;
  line-height: 1.35;
}

#comingSoonMeta {
  grid-area: meta;
  margin-top: 118px;
  color: #666;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .34em;
  line-height: 2;
}

.coming-soon-copy-panel {
  grid-area: copy;
  color: #333;
  font-size: 11px;
  line-height: 2.1;
  letter-spacing: .32em;
  max-width: 330px;
}

.coming-soon-preview {
  grid-area: preview;
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.18), transparent 30%),
    linear-gradient(135deg, #050505, #202020 60%, #070707);
  box-shadow: var(--shadow);
}

.coming-soon-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent, rgba(0,0,0,.38)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.035) 19px);
}

.coming-soon-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(227,34,34,.22), transparent);
  transform: translateX(-110%);
  animation: comingSoonScan 3.8s ease-in-out infinite;
}

.coming-soon-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.coming-soon-play span {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 19px solid #fff;
}

.coming-soon-preview-label {
  position: absolute;
  left: 26px;
  bottom: 24px;
  color: rgba(255,255,255,.78);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .42em;
}

.coming-soon-status-row {
  grid-area: status;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.12);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .36em;
}

.coming-soon-status-row span {
  color: #777;
}

.coming-soon-status-row strong {
  color: var(--red);
}

/* Night mode */
body.theme-night .soon-grid > .coming-soon-card,
body.theme-night .info-grid > .coming-soon-card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
  color: #f3f3f0;
}

body.theme-night .soon-grid > .coming-soon-card:hover,
body.theme-night .info-grid > .coming-soon-card:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(227,34,34,.42);
}

body.theme-night .coming-soon-modal-backdrop {
  background: rgba(5,5,5,.84);
}

body.theme-night .coming-soon-panel {
  background:
    radial-gradient(circle at 72% 38%, rgba(227,34,34,.13), transparent 28%),
    rgba(10,10,10,.88);
  border-color: rgba(255,255,255,.14);
}

body.theme-night .coming-soon-close,
body.theme-night #comingSoonTitle {
  color: #f3f3f0;
}

body.theme-night #comingSoonMeta,
body.theme-night .coming-soon-copy-panel {
  color: #b9b9b4;
}

body.theme-night .coming-soon-status-row {
  border-top-color: rgba(255,255,255,.14);
}

/* Mobile */
@media (max-width: 768px) {
  .coming-soon-panel {
    width: calc(100vw - 154px);
    min-height: auto;
    margin-left: 132px;
    padding: 34px 24px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "preview"
      "copy"
      "status";
    gap: 24px;
  }

  #comingSoonTitle {
    margin-top: 30px;
    font-size: 24px;
    letter-spacing: .28em;
  }

  #comingSoonMeta {
    margin-top: 100px;
    font-size: 8px;
    letter-spacing: .22em;
  }

  .coming-soon-copy-panel {
    max-width: none;
    font-size: 8px;
    letter-spacing: .22em;
  }

  .coming-soon-preview {
    min-height: 230px;
  }

  .coming-soon-status-row {
    display: grid;
    gap: 10px;
    font-size: 8px;
    letter-spacing: .24em;
  }
}

@media (max-width: 390px) {
  .coming-soon-panel {
    width: calc(100vw - 144px);
    margin-left: 126px;
  }
}

@keyframes comingSoonScan {
  0%, 100% {
    transform: translateX(-110%);
    opacity: 0;
  }

  35% {
    opacity: .9;
  }

  65% {
    transform: translateX(110%);
    opacity: 0;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4 — CLICKABLE COMING SOON CARDS + MODAL */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4.3 — RESTORE DARK PORTFOLIO CARD STYLE */

/*
  PURPOSE:
  Restore the approved CMV_23.3 dark Portfolio TILE/WIDE card look
  after converting Portfolio cards from divs into clickable buttons.

  This only targets Portfolio cards.
  Services cards stay light/minimal.
  Archive modal and Archive 005 are untouched.
*/

/* TILE VIEW — clickable Portfolio buttons should look like the approved 23.3 dark cards */
.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 230px !important;
  padding: 24px 22px !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(180deg, #050505, #171717 58%, #070707) !important;
  color: #f3f3f0 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.12) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: left !important;
}

/* Grid overlay */
.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, transparent 0 28%, rgba(0,0,0,.32) 70%) !important;
  background-size:
    42px 42px,
    42px 42px,
    100% 100% !important;
  opacity: .8 !important;
  pointer-events: none !important;
}

/* Portfolio icon layer */
.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card::after {
  position: absolute !important;
  left: 50% !important;
  top: 38% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 28px !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 18px rgba(255,255,255,.18) !important;
}

.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card:nth-child(1)::after {
  content: "✦" !important;
}

.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card:nth-child(2)::after {
  content: "♬" !important;
}

.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card:nth-child(3)::after {
  content: "☼" !important;
}

.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card:nth-child(4)::after {
  content: "◐" !important;
}

/* Keep text above overlay */
.portfolio .soon-grid > .coming-soon-card span,
.portfolio .soon-grid > .coming-soon-card strong,
.portfolio .soon-grid > .coming-soon-card small {
  position: relative !important;
  z-index: 2 !important;
}

.portfolio .soon-grid > .coming-soon-card span {
  color: var(--red) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .38em !important;
}

.portfolio .soon-grid > .coming-soon-card strong {
  color: #f3f3f0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .34em !important;
  line-height: 1.55 !important;
}

.portfolio .soon-grid > .coming-soon-card small {
  color: rgba(243,243,240,.72) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .27em !important;
  line-height: 1.8 !important;
}

.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card:hover {
  transform: translateY(-7px) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(227,34,34,.20), transparent 24%),
    linear-gradient(180deg, #050505, #191919 58%, #060606) !important;
  border-color: rgba(227,34,34,.42) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.18),
    0 0 26px rgba(227,34,34,.10) !important;
}

/* WIDE VIEW — make clickable buttons obey the existing wide layout */
.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 112px !important;
  padding: 22px 30px 22px 132px !important;
  display: grid !important;
  grid-template-columns: 90px minmax(250px, 1fr) minmax(260px, 1fr) !important;
  align-items: center !important;
  column-gap: 28px !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(255,255,255,.12), transparent 16%),
    linear-gradient(180deg, #050505, #141414 58%, #060606) !important;
  color: #f3f3f0 !important;
  text-align: left !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card::after {
  position: absolute !important;
  left: 64px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 24px !important;
  opacity: .92 !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card:nth-child(1)::after {
  content: "✦" !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card:nth-child(2)::after {
  content: "♬" !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card:nth-child(3)::after {
  content: "☼" !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card:nth-child(4)::after {
  content: "◐" !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card span {
  grid-column: 1 !important;
  align-self: center !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card strong {
  grid-column: 2 !important;
  align-self: center !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card small {
  grid-column: 3 !important;
  align-self: center !important;
}

/* Night mode protection */
body.theme-night .portfolio .soon-grid.portfolio-view-tile > .coming-soon-card,
body.theme-night .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card {
  border-color: rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(180deg, #030303, #121212 58%, #050505) !important;
}

/* Mobile/tablet protection */
@media (max-width: 1180px) {
  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card {
    grid-template-columns: 70px 1fr !important;
    padding-left: 112px !important;
  }

  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card small {
    grid-column: 2 !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 768px) {
  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card {
    min-height: 170px !important;
    padding: 26px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card::after {
    left: 50% !important;
    top: 42% !important;
    font-size: 24px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4.3 — RESTORE DARK PORTFOLIO CARD STYLE */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4.4 — HIDE ARCHIVE 005 CIPHER PREVIEW */

/*
  PURPOSE:
  Hide the visible MADAM / ALULA / DUGUD cipher puzzle for now.

  Archive 005 should look like the other archive video preview screens.
  The cipher code stays in the file for CMV_24, but it is not displayed yet.
*/

/* Force Archive 005 to show the normal preview screen instead of the cipher */
.archive-video-frame-v14p2.is-archive-005 .archive-dynamic-preview {
  display: grid !important;
}

/* Hide the actual puzzle/cipher interface */
.archive-video-frame-v14p2.is-archive-005 .palindrome-cipher,
.palindrome-cipher {
  display: none !important;
}

/* Give Archive 005 its own sealed-preview look */
.archive-video-frame-v14p2.archive-visual-005 .archive-preview-art {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.18), transparent 24%),
    linear-gradient(135deg, #050505, #191919 58%, #070707) !important;
}

.archive-video-frame-v14p2.archive-visual-005 .archive-preview-art::before {
  content: "CIPHER SEALED";
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 5;
  color: rgba(255,255,255,.52);
  border: 1px solid rgba(255,255,255,.20);
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .34em;
}

.archive-video-frame-v14p2.archive-visual-005 .archive-preview-play {
  opacity: .7;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4.4 — HIDE ARCHIVE 005 CIPHER PREVIEW */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4.5 — MOBILE VIEWING STABILIZATION */

/*
  PURPOSE:
  - Improve cellphone viewing without changing desktop.
  - Reduce fixed sidebar width on phones.
  - Give Portfolio / Archive / Services more breathing room.
  - Improve Coming Soon modal on phone.
  - Improve Archive modal on phone.
  - Keep Portfolio TILE / WIDE intact.
  - Keep Archive 005 cipher hidden for now.
*/

@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    letter-spacing: .18em !important;
    cursor: default !important;
  }

  .site {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow-x: hidden !important;
  }

  /* MOBILE SIDEBAR — smaller, cleaner, more content space */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 108px !important;
    height: 100vh !important;
    padding: 22px 10px 16px !important;
    z-index: 60 !important;
    overflow: hidden !important;
  }

  .main {
    margin-left: 108px !important;
    width: calc(100% - 108px) !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
  }

  .mini-logo {
    width: 52px !important;
    height: 52px !important;
    font-size: 19px !important;
    margin: 0 auto !important;
  }

  .nav {
    margin-top: 64px !important;
    gap: 24px !important;
    letter-spacing: 0 !important;
  }

  .nav a {
    grid-template-columns: 16px 1fr !important;
    gap: 6px !important;
    align-items: center !important;
    line-height: 1 !important;
  }

  .nav-num {
    font-size: 7px !important;
    letter-spacing: .05em !important;
  }

  .nav-label {
    font-size: 5.8px !important;
    letter-spacing: .045em !important;
    white-space: nowrap !important;
  }

  .nav a:hover {
    transform: none !important;
  }

  .nav a.active::after {
    right: -17px !important;
    width: 14px !important;
    height: 2px !important;
  }

  .sidebar-footer-v12 {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 14px !important;
    gap: 9px !important;
  }

  .socials-v12 {
    gap: 7px !important;
    font-size: 10px !important;
  }

  .ig-link-v12 {
    font-size: 4.9px !important;
    letter-spacing: .02em !important;
    max-width: 86px !important;
    line-height: 1.4 !important;
  }

  .sound-switch {
    width: 88px !important;
    height: 32px !important;
    margin-left: 0 !important;
    padding: 0 6px !important;
    grid-template-columns: 13px 1fr !important;
    gap: 5px !important;
  }

  .sound-switch-track {
    display: none !important;
  }

  .sound-switch-text {
    font-size: 5.25px !important;
    letter-spacing: .04em !important;
  }

  .sound-svg {
    width: 10px !important;
    height: 10px !important;
  }

  .copyright-v12 {
    max-width: 88px !important;
    white-space: normal !important;
    font-size: 4.9px !important;
    letter-spacing: .07em !important;
    line-height: 1.5 !important;
  }

  .rights-line {
    font-size: 4.5px !important;
    letter-spacing: .06em !important;
  }

  /* TOP CONTROLS */
  .theme-menu-v12 {
    right: 12px !important;
    top: 72px !important;
    z-index: 80 !important;
  }

  .menu-slider-shell {
    transform: scale(.78) !important;
    transform-origin: right top !important;
  }

  .back-home {
    left: 120px !important;
    top: 18px !important;
    padding: 9px 10px !important;
    font-size: 6px !important;
    letter-spacing: .12em !important;
    z-index: 75 !important;
  }

  .hamburger {
    display: none !important;
  }

  /* SCREEN LAYOUT */
  .screen {
    position: relative !important;
    inset: auto !important;
    min-height: 100vh !important;
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
  }

  .screen.active {
    display: block !important;
  }

  .home,
  .portfolio,
  .archive,
  .info-screen {
    padding: 84px 16px 72px !important;
    min-height: 100vh !important;
  }

  .section-title {
    font-size: 21px !important;
    letter-spacing: .22em !important;
    line-height: 1.35 !important;
    margin-bottom: 20px !important;
  }

  .section-title::after {
    width: 24px !important;
    margin-left: 14px !important;
  }

  .portfolio-copy {
    max-width: 100% !important;
    font-size: 7.6px !important;
    letter-spacing: .17em !important;
    line-height: 2 !important;
    margin-bottom: 28px !important;
  }

  /* HOME */
  .home {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-wrap {
    width: 100% !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
  }

  .hero-mark {
    width: min(72vw, 276px) !important;
    height: min(72vw, 276px) !important;
    max-width: 276px !important;
    max-height: 276px !important;
    margin: 0 auto !important;
  }

  .orbit {
    border-width: 14px !important;
  }

  .globe {
    inset: 42px !important;
  }

  .rings {
    inset: -14px !important;
  }

  .letters {
    font-size: clamp(72px, 22vw, 108px) !important;
  }

  .hero-title {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: -18px !important;
  }

  .coming-soon-kicker {
    font-size: 7px !important;
    letter-spacing: .24em !important;
  }

  .hero-title h1 {
    font-size: clamp(21px, 7vw, 32px) !important;
    letter-spacing: .22em !important;
    line-height: 1.35 !important;
  }

  .hero-title p,
  .coming-soon-copy {
    font-size: 7px !important;
    letter-spacing: .17em !important;
    line-height: 2 !important;
  }

  .home-signup {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 260px !important;
    margin: 26px auto 0 !important;
    z-index: 10 !important;
  }

  .loop-label,
  .loop-copy {
    font-size: 6.5px !important;
    letter-spacing: .18em !important;
    line-height: 1.8 !important;
  }

  .loop-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .loop-form input,
  .loop-form button {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 7px !important;
    letter-spacing: .15em !important;
  }

  .loading {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 28px !important;
    gap: 12px !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
  }

  .bar {
    width: 76px !important;
  }

  .tagline {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 26px !important;
    text-align: center !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
    line-height: 2 !important;
  }

  .launch-countdown {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin: 26px auto 0 !important;
    max-width: 260px !important;
    text-align: center !important;
    transform: none !important;
  }

  .launch-label {
    font-size: 7px !important;
    letter-spacing: .22em !important;
  }

  .launch-time {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
  }

  .launch-time div {
    min-width: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
  }

  .launch-time strong {
    font-size: 18px !important;
  }

  .launch-time span {
    font-size: 6px !important;
    letter-spacing: .18em !important;
  }

  .geo-panel {
    display: none !important;
  }

  /* PORTFOLIO */
  .soon-panel {
    min-height: auto !important;
    justify-content: flex-start !important;
  }

  .portfolio-view-controls-v23 {
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto 24px !important;
    display: grid !important;
    gap: 10px !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .portfolio-view-controls-v23 > span {
    font-size: 7px !important;
    letter-spacing: .22em !important;
  }

  .portfolio-view-toggle {
    width: 100% !important;
    max-width: 250px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .portfolio-view-btn {
    min-height: 36px !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
  }

  .soon-grid,
  .portfolio .soon-grid.portfolio-view-tile,
  .portfolio .soon-grid.portfolio-view-wide {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    margin-top: 26px !important;
  }

  .portfolio .soon-grid.portfolio-view-tile > .coming-soon-card,
  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card {
    min-height: 182px !important;
    padding: 22px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .portfolio .soon-grid.portfolio-view-tile > .coming-soon-card::after,
  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card::after {
    left: 50% !important;
    top: 42% !important;
    font-size: 23px !important;
  }

  .portfolio .soon-grid > .coming-soon-card span {
    font-size: 7.5px !important;
    letter-spacing: .22em !important;
  }

  .portfolio .soon-grid > .coming-soon-card strong {
    font-size: 11px !important;
    letter-spacing: .22em !important;
    line-height: 1.55 !important;
  }

  .portfolio .soon-grid > .coming-soon-card small {
    font-size: 7px !important;
    letter-spacing: .16em !important;
    line-height: 1.75 !important;
  }

  /* SERVICES / ABOUT / CONTACT */
  .info-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    margin-top: 30px !important;
  }

  .info-grid > .coming-soon-card {
    min-height: 136px !important;
    padding: 22px 20px !important;
  }

  .info-grid span,
  .contact-line span {
    font-size: 7px !important;
    letter-spacing: .20em !important;
  }

  .info-grid strong {
    font-size: 12px !important;
    letter-spacing: .22em !important;
  }

  .info-grid small {
    font-size: 6.8px !important;
    letter-spacing: .15em !important;
    line-height: 1.7 !important;
  }

  .info-statement {
    margin-top: 38px !important;
    font-size: 12px !important;
    letter-spacing: .24em !important;
    line-height: 1.8 !important;
  }

  .contact-line strong {
    font-size: 10px !important;
    letter-spacing: .10em !important;
    overflow-wrap: anywhere !important;
  }

  /* ARCHIVE */
  .archive-header {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .archive-side-controls-v12 {
    justify-items: start !important;
    gap: 14px !important;
  }

  .archive-system-status-v12 {
    width: 100% !important;
    padding: 13px 14px !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
  }

  .archive-view-toggle-v12 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .archive-view-toggle-v12 .view-btn {
    padding: 11px 0 !important;
    font-size: 6.5px !important;
    letter-spacing: .10em !important;
  }

  .archive-memo-top {
    width: 100% !important;
    display: grid !important;
    gap: 8px !important;
    font-size: 6.5px !important;
    letter-spacing: .14em !important;
    line-height: 1.7 !important;
    justify-content: start !important;
  }

  .archive-directory {
    width: 100% !important;
    margin-top: 30px !important;
  }

  .archive-dossier,
  .archive-directory.view-grid .archive-dossier,
  .archive-directory.view-large .archive-dossier,
  .archive-directory.view-xl .archive-dossier {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: auto !important;
    padding: 18px 0 20px !important;
  }

  .archive-thumb,
  .archive-directory.view-grid .archive-thumb,
  .archive-directory.view-large .archive-thumb,
  .archive-directory.view-xl .archive-thumb {
    width: 100% !important;
    height: 126px !important;
  }

  .archive-info h3,
  .archive-card h3 {
    font-size: 16px !important;
    letter-spacing: .22em !important;
    line-height: 1.45 !important;
  }

  .archive-info p,
  .archive-card p {
    font-size: 7px !important;
    letter-spacing: .16em !important;
    line-height: 1.7 !important;
  }

  .archive-status,
  .archive-lock-status,
  .archive-omega-status {
    justify-self: start !important;
    font-size: 6.7px !important;
    letter-spacing: .12em !important;
    white-space: normal !important;
  }

  .archive-lock-icon-box,
  .archive-omega-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .archive-arrow {
    font-size: 20px !important;
    text-align: left !important;
  }

  /* ARCHIVE MODAL */
  .modal {
    align-items: center !important;
    justify-items: center !important;
  }

  .modal-panel,
  .archive-modal-panel,
  .archive-modal-panel-v12 {
    width: calc(100vw - 124px) !important;
    max-height: calc(100vh - 54px) !important;
    margin-left: 108px !important;
    padding: 0 0 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    overflow-y: auto !important;
  }

  .archive-video-frame-v14p2,
  .archive-video-frame-v12,
  .modal-v12 .archive-video-frame-v12 {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    justify-self: stretch !important;
  }

  .archive-preview-caption {
    display: grid !important;
    gap: 7px !important;
    padding: 13px 16px !important;
  }

  .archive-preview-caption strong {
    font-size: 8.5px !important;
    letter-spacing: .20em !important;
    line-height: 1.5 !important;
  }

  .archive-preview-caption small {
    font-size: 6.5px !important;
    letter-spacing: .15em !important;
  }

  .archive-preview-label {
    left: 16px !important;
    top: 16px !important;
    font-size: 6.5px !important;
    letter-spacing: .18em !important;
  }

  .archive-preview-play {
    width: 58px !important;
    height: 58px !important;
  }

  .archive-preview-play span {
    left: 23px !important;
    top: 18px !important;
    border-top-width: 10px !important;
    border-bottom-width: 10px !important;
    border-left-width: 15px !important;
  }

  .close {
    top: 14px !important;
    right: 14px !important;
    padding: 10px 12px !important;
    background: rgba(245,245,242,.78) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
    z-index: 120 !important;
  }

  body.theme-night .close {
    background: rgba(0,0,0,.72) !important;
    border-color: rgba(255,255,255,.14) !important;
  }

  .modal h2 {
    font-size: 22px !important;
    letter-spacing: .22em !important;
    line-height: 1.4 !important;
  }

  .modal p {
    font-size: 7.2px !important;
    letter-spacing: .14em !important;
    line-height: 2 !important;
  }

  .archive-restricted-box-v12,
  .archive-lock-box-v12,
  .archive-detail-box {
    margin-top: 22px !important;
  }

  .restricted-title,
  .lock-mark {
    font-size: 7px !important;
    letter-spacing: .22em !important;
  }

  .restricted-copy,
  .lock-copy {
    font-size: 7px !important;
    letter-spacing: .14em !important;
    line-height: 2 !important;
  }

  .access-input-wrap {
    grid-template-columns: 32px 1fr !important;
  }

  .access-input-wrap input {
    font-size: 7px !important;
    letter-spacing: .14em !important;
  }

  .lock-actions {
    grid-template-columns: 1fr !important;
  }

  .lock-actions button,
  .archive-restricted-box button {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 7px !important;
    letter-spacing: .16em !important;
  }

  /* COMING SOON MODAL */
  .coming-soon-modal-v234 {
    align-items: center !important;
    justify-items: center !important;
  }

  .coming-soon-panel {
    width: calc(100vw - 124px) !important;
    max-height: calc(100vh - 54px) !important;
    min-height: auto !important;
    margin-left: 108px !important;
    padding: 28px 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "meta"
      "preview"
      "copy"
      "status" !important;
    gap: 18px !important;
    overflow-y: auto !important;
  }

  .coming-soon-close {
    right: 16px !important;
    top: 16px !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
  }

  #comingSoonKicker {
    font-size: 7px !important;
    letter-spacing: .22em !important;
  }

  #comingSoonTitle {
    margin-top: 28px !important;
    font-size: 22px !important;
    letter-spacing: .18em !important;
    line-height: 1.45 !important;
  }

  #comingSoonMeta {
    margin-top: 84px !important;
    font-size: 6.5px !important;
    letter-spacing: .13em !important;
    line-height: 1.9 !important;
  }

  .coming-soon-preview {
    min-height: 190px !important;
  }

  .coming-soon-copy-panel {
    max-width: none !important;
    font-size: 7px !important;
    letter-spacing: .13em !important;
    line-height: 2 !important;
  }

  .coming-soon-status-row {
    display: grid !important;
    gap: 9px !important;
    font-size: 6.5px !important;
    letter-spacing: .14em !important;
  }
}

@media (max-width: 390px) {
  .sidebar {
    width: 102px !important;
  }

  .main {
    margin-left: 102px !important;
    width: calc(100% - 102px) !important;
  }

  .nav-label {
    font-size: 5.45px !important;
    letter-spacing: .025em !important;
  }

  .nav a {
    grid-template-columns: 14px 1fr !important;
    gap: 5px !important;
  }

  .sidebar-footer-v12 {
    left: 8px !important;
    right: 8px !important;
  }

  .sound-switch {
    width: 84px !important;
  }

  .ig-link-v12 {
    max-width: 82px !important;
    font-size: 4.7px !important;
  }

  .copyright-v12 {
    max-width: 84px !important;
    font-size: 4.6px !important;
  }

  .back-home {
    left: 114px !important;
  }

  .home,
  .portfolio,
  .archive,
  .info-screen {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .modal-panel,
  .archive-modal-panel,
  .archive-modal-panel-v12,
  .coming-soon-panel {
    width: calc(100vw - 116px) !important;
    margin-left: 102px !important;
  }

  .section-title {
    font-size: 19px !important;
    letter-spacing: .18em !important;
  }

  .portfolio-copy {
    font-size: 7px !important;
    letter-spacing: .13em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4.5 — MOBILE VIEWING STABILIZATION */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4.6 — MOBILE TITLE POLISH */

/*
  PURPOSE:
  - Fix tight mobile title spacing.
  - Keep desktop unchanged.
  - Make ARCHIVE SYSTEM / PORTFOLIO / SERVICES cleaner on phone.
*/

@media (max-width: 768px) {
  .section-title {
    font-size: 18px !important;
    letter-spacing: .14em !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  .archive .section-title {
    font-size: 17px !important;
    letter-spacing: .115em !important;
  }

  .section-title::after {
    width: 18px !important;
    margin-left: 8px !important;
  }

  .screen > small,
  .soon-panel > small,
  .info-screen > small,
  .archive small {
    font-size: 7px !important;
    letter-spacing: .16em !important;
  }

  .portfolio-copy {
    font-size: 7px !important;
    letter-spacing: .115em !important;
    line-height: 2 !important;
  }

  .back-home {
    font-size: 5.7px !important;
    letter-spacing: .08em !important;
    padding: 8px 9px !important;
  }
}

@media (max-width: 390px) {
  .section-title {
    font-size: 17px !important;
    letter-spacing: .10em !important;
  }

  .archive .section-title {
    font-size: 16px !important;
    letter-spacing: .075em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4.6 — MOBILE TITLE POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4.7 — PREVIEW SIGNUP DISABLED STATE */

.loop-form-disabled input,
.loop-form-disabled button {
  cursor: not-allowed !important;
}

.loop-form-disabled input {
  color: #777 !important;
  opacity: .72 !important;
}

.loop-form-disabled button {
  background: #111 !important;
  color: #f8f8f5 !important;
  opacity: .88 !important;
}

.loop-form-disabled button:hover {
  transform: none !important;
  background: #111 !important;
  color: #f8f8f5 !important;
}

body.theme-night .loop-form-disabled button {
  background: #f3f3f0 !important;
  color: #050505 !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4.7 — PREVIEW SIGNUP DISABLED STATE */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4.8 — MOBILE OVERFLOW + LANDSCAPE + SOUND FIX */

/*
  PURPOSE:
  - Stop horizontal left/right swiping on phone.
  - Keep the site as one vertical mobile experience.
  - Add proper landscape phone support.
  - Stop the sound toggle from crowding/obstructing the sidebar.
  - Keep desktop unchanged.
*/

/* --------------------------------------------
   01. PHONE PORTRAIT / GENERAL MOBILE LOCKDOWN
   -------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --cmv-mobile-sidebar: 108px;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  body {
    position: relative !important;
  }

  .site {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
  }

  .sidebar {
    width: var(--cmv-mobile-sidebar) !important;
    max-width: var(--cmv-mobile-sidebar) !important;
    overflow: hidden !important;
  }

  .main {
    margin-left: var(--cmv-mobile-sidebar) !important;
    width: calc(100% - var(--cmv-mobile-sidebar)) !important;
    max-width: calc(100% - var(--cmv-mobile-sidebar)) !important;
    overflow-x: hidden !important;
  }

  .screen,
  .screen.active,
  .home,
  .portfolio,
  .archive,
  .info-screen,
  .soon-panel,
  .archive-system,
  .archive-directory,
  .soon-grid,
  .portfolio-grid,
  .info-grid {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .home,
  .portfolio,
  .archive,
  .info-screen {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero-wrap,
  .hero-title,
  .home-signup,
  .launch-countdown,
  .loading,
  .tagline,
  .portfolio-copy,
  .archive-header,
  .archive-side-controls-v12 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-mark {
    width: min(82%, 276px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 276px !important;
    max-height: 276px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .speedlines,
  .red-sweep {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .loop-form,
  .loop-form input,
  .loop-form button {
    max-width: 100% !important;
  }

  .launch-time {
    width: 100% !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .bar {
    max-width: 70px !important;
  }

  .theme-menu-v12 {
    right: 10px !important;
    max-width: calc(100vw - var(--cmv-mobile-sidebar) - 20px) !important;
  }

  .menu-slider-shell {
    max-width: 100% !important;
  }

  .hamburger {
    display: none !important;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100% !important;
  }

  /* Sidebar footer / sound toggle protection */
  .sidebar-footer-v12 {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    gap: 7px !important;
  }

  .sound-switch {
    width: 82px !important;
    height: 30px !important;
    margin-left: 0 !important;
    padding: 0 5px !important;
    grid-template-columns: 12px 1fr !important;
    gap: 4px !important;
    transform: none !important;
  }

  .sound-switch:hover {
    transform: none !important;
  }

  .sound-switch-track {
    display: none !important;
  }

  .sound-switch-text {
    font-size: 4.9px !important;
    letter-spacing: .025em !important;
    white-space: nowrap !important;
  }

  .sound-svg {
    width: 10px !important;
    height: 10px !important;
  }

  .ig-link-v12 {
    max-width: 84px !important;
    overflow-wrap: anywhere !important;
  }

  .copyright-v12 {
    max-width: 84px !important;
    overflow-wrap: anywhere !important;
  }
}

/* Extra narrow phones */
@media (max-width: 390px) {
  :root {
    --cmv-mobile-sidebar: 102px;
  }

  .sound-switch {
    width: 76px !important;
  }

  .sound-switch-text {
    font-size: 4.6px !important;
    letter-spacing: .01em !important;
  }

  .home,
  .portfolio,
  .archive,
  .info-screen {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* --------------------------------------------
   02. PHONE LANDSCAPE SUPPORT
   -------------------------------------------- */

/*
  NOTE:
  The website cannot override the user's phone rotation lock.
  But when the phone/browser rotates, this makes the site respond properly.
*/

@media (max-width: 932px) and (orientation: landscape) {
  :root {
    --cmv-mobile-sidebar: 92px;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .site {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
  }

  .sidebar {
    width: var(--cmv-mobile-sidebar) !important;
    max-width: var(--cmv-mobile-sidebar) !important;
    height: 100vh !important;
    padding: 12px 8px 10px !important;
    overflow: hidden !important;
  }

  .main {
    margin-left: var(--cmv-mobile-sidebar) !important;
    width: calc(100% - var(--cmv-mobile-sidebar)) !important;
    max-width: calc(100% - var(--cmv-mobile-sidebar)) !important;
    overflow-x: hidden !important;
  }

  .mini-logo {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  .nav {
    margin-top: 24px !important;
    gap: 12px !important;
  }

  .nav a {
    grid-template-columns: 13px 1fr !important;
    gap: 4px !important;
  }

  .nav-num {
    font-size: 6px !important;
  }

  .nav-label {
    font-size: 4.8px !important;
    letter-spacing: .025em !important;
  }

  .sidebar-footer-v12 {
    bottom: 8px !important;
    gap: 5px !important;
  }

  .socials-v12,
  .ig-link-v12,
  .copyright-v12 {
    display: none !important;
  }

  /* Icon-only sound button in landscape so it never blocks the sidebar */
  .sound-switch {
    width: 36px !important;
    height: 32px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
  }

  .sound-switch-icon {
    display: grid !important;
    place-items: center !important;
  }

  .sound-switch-text,
  .sound-switch-track {
    display: none !important;
  }

  .sound-svg {
    width: 13px !important;
    height: 13px !important;
  }

  .home,
  .portfolio,
  .archive,
  .info-screen {
    padding: 48px 18px 28px !important;
  }

  .home {
    display: grid !important;
    grid-template-columns: minmax(180px, .85fr) minmax(260px, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    text-align: left !important;
  }

  .hero-wrap {
    grid-column: 1 !important;
    align-self: center !important;
  }

  .hero-mark {
    width: min(34vw, 230px) !important;
    max-width: 230px !important;
    margin: 0 auto !important;
  }

  .hero-title {
    grid-column: 2 !important;
    margin-top: 0 !important;
    text-align: left !important;
  }

  .home-signup,
  .launch-countdown,
  .loading,
  .tagline {
    grid-column: 2 !important;
    text-align: left !important;
  }

  .home-signup {
    max-width: 360px !important;
    margin-top: 16px !important;
  }

  .loop-form {
    display: grid !important;
    grid-template-columns: 1fr 140px !important;
    gap: 8px !important;
  }

  .loading {
    justify-content: flex-start !important;
    margin-top: 16px !important;
  }

  .launch-countdown {
    margin-top: 16px !important;
  }

  .launch-time {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
  }

  .launch-time strong {
    font-size: 15px !important;
  }

  .launch-time span {
    font-size: 5.5px !important;
    letter-spacing: .10em !important;
  }

  .theme-menu-v12 {
    right: 10px !important;
    top: 10px !important;
  }

  .menu-slider-shell {
    transform: scale(.72) !important;
    transform-origin: right top !important;
  }

  .back-home {
    left: calc(var(--cmv-mobile-sidebar) + 10px) !important;
    top: 10px !important;
  }

  .section-title {
    font-size: 17px !important;
    letter-spacing: .11em !important;
  }

  .archive .section-title {
    font-size: 16px !important;
    letter-spacing: .08em !important;
  }

  .portfolio-copy {
    font-size: 6.6px !important;
    letter-spacing: .10em !important;
  }

  .coming-soon-panel,
  .modal-panel,
  .archive-modal-panel,
  .archive-modal-panel-v12 {
    width: calc(100vw - var(--cmv-mobile-sidebar) - 28px) !important;
    max-width: calc(100vw - var(--cmv-mobile-sidebar) - 28px) !important;
    margin-left: var(--cmv-mobile-sidebar) !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }
}

/* Extra short landscape screens */
@media (max-width: 932px) and (orientation: landscape) and (max-height: 430px) {
  .home,
  .portfolio,
  .archive,
  .info-screen {
    padding-top: 38px !important;
    padding-bottom: 22px !important;
  }

  .hero-mark {
    width: min(30vw, 190px) !important;
    max-width: 190px !important;
  }

  .hero-title h1 {
    font-size: 20px !important;
    letter-spacing: .16em !important;
  }

  .coming-soon-kicker {
    font-size: 6px !important;
    letter-spacing: .16em !important;
  }

  .hero-title p,
  .coming-soon-copy {
    font-size: 6px !important;
    letter-spacing: .10em !important;
  }

  .loop-copy,
  .tagline {
    display: none !important;
  }

  .nav {
    gap: 10px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4.8 — MOBILE OVERFLOW + LANDSCAPE + SOUND FIX */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4.9 — MOBILE MODAL + SIDEBAR FINAL FIX */

/*
  PURPOSE:
  - Stop remaining horizontal swipe on phone.
  - Fix Archive modal cutting off to the right.
  - Make sound toggle icon-only on mobile so it does not obstruct the sidebar.
  - Keep desktop unchanged.
*/

@media (max-width: 768px) {
  :root {
    --cmv-mobile-sidebar: 104px;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  body {
    touch-action: pan-y !important;
  }

  .site {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .sidebar {
    width: var(--cmv-mobile-sidebar) !important;
    max-width: var(--cmv-mobile-sidebar) !important;
    overflow: hidden !important;
  }

  .main {
    margin-left: var(--cmv-mobile-sidebar) !important;
    width: calc(100vw - var(--cmv-mobile-sidebar)) !important;
    max-width: calc(100vw - var(--cmv-mobile-sidebar)) !important;
    overflow-x: hidden !important;
  }

  .screen,
  .screen.active,
  .home,
  .portfolio,
  .archive,
  .info-screen,
  .soon-panel,
  .archive-system,
  .archive-directory,
  .soon-grid,
  .portfolio-grid,
  .info-grid {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .home,
  .portfolio,
  .archive,
  .info-screen {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero-wrap,
  .hero-title,
  .home-signup,
  .launch-countdown,
  .loading,
  .tagline,
  .portfolio-copy,
  .archive-header,
  .archive-side-controls-v12 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-mark {
    width: min(88%, 266px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 266px !important;
    max-height: 266px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .speedlines,
  .red-sweep {
    display: none !important;
  }

  .launch-time {
    width: 100% !important;
    max-width: 250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* SOUND TOGGLE — mobile icon-only so it no longer blocks the sidebar */
  .sidebar-footer-v12 {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    display: grid !important;
    justify-items: center !important;
    gap: 0 !important;
    pointer-events: none !important;
  }

  .sidebar-footer-v12 .socials-v12,
  .sidebar-footer-v12 .ig-link-v12,
  .sidebar-footer-v12 .copyright-v12 {
    display: none !important;
  }

  .sound-switch {
    pointer-events: auto !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    border-radius: 999px !important;
    transform: none !important;
  }

  .sound-switch:hover {
    transform: none !important;
  }

  .sound-switch-text,
  .sound-switch-track {
    display: none !important;
  }

  .sound-svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* ARCHIVE / COMING SOON MODALS — fix right-side cutoff */
  .modal,
  .coming-soon-modal-v234 {
    box-sizing: border-box !important;
    padding-left: var(--cmv-mobile-sidebar) !important;
    padding-right: 12px !important;
    align-items: center !important;
    justify-items: center !important;
    overflow-x: hidden !important;
  }

  .modal-panel,
  .archive-modal-panel,
  .archive-modal-panel-v12,
  .coming-soon-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    grid-template-columns: 1fr !important;
  }

  .archive-video-frame-v12,
  .archive-video-frame-v14p2,
  .modal-v12 .archive-video-frame-v12 {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    transform: none !important;
  }

  .archive-preview-caption {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .archive-preview-caption strong {
    font-size: 8px !important;
    letter-spacing: .16em !important;
  }

  .archive-preview-caption small {
    font-size: 6.5px !important;
    letter-spacing: .12em !important;
  }

  .close {
    right: 12px !important;
    top: 12px !important;
    z-index: 140 !important;
  }

  .theme-menu-v12 {
    right: 10px !important;
    max-width: calc(100vw - var(--cmv-mobile-sidebar) - 20px) !important;
  }

  .menu-slider-shell {
    max-width: 100% !important;
  }
}

@media (max-width: 390px) {
  :root {
    --cmv-mobile-sidebar: 98px;
  }

  .home,
  .portfolio,
  .archive,
  .info-screen {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .nav {
    gap: 22px !important;
  }

  .nav-label {
    font-size: 5.35px !important;
    letter-spacing: .025em !important;
  }

  .sound-switch {
    width: 36px !important;
    height: 36px !important;
  }

  .hero-mark {
    width: min(88%, 246px) !important;
    max-width: 246px !important;
  }
}

/* LANDSCAPE PHONE SUPPORT */
@media (max-width: 932px) and (orientation: landscape) {
  :root {
    --cmv-mobile-sidebar: 86px;
  }

  html,
  body,
  .site,
  .main {
    overflow-x: hidden !important;
  }

  .sidebar {
    width: var(--cmv-mobile-sidebar) !important;
    max-width: var(--cmv-mobile-sidebar) !important;
    height: 100vh !important;
    padding: 12px 8px 10px !important;
  }

  .main {
    margin-left: var(--cmv-mobile-sidebar) !important;
    width: calc(100vw - var(--cmv-mobile-sidebar)) !important;
    max-width: calc(100vw - var(--cmv-mobile-sidebar)) !important;
  }

  .mini-logo {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  .nav {
    margin-top: 24px !important;
    gap: 11px !important;
  }

  .nav a {
    grid-template-columns: 13px 1fr !important;
    gap: 4px !important;
  }

  .nav-num {
    font-size: 6px !important;
  }

  .nav-label {
    font-size: 4.8px !important;
    letter-spacing: .015em !important;
  }

  .sidebar-footer-v12 {
    bottom: 8px !important;
  }

  .sound-switch {
    width: 36px !important;
    height: 32px !important;
  }

  .home,
  .portfolio,
  .archive,
  .info-screen {
    padding: 46px 18px 28px !important;
  }

  .home {
    display: grid !important;
    grid-template-columns: minmax(160px, .8fr) minmax(260px, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    text-align: left !important;
  }

  .hero-wrap {
    grid-column: 1 !important;
  }

  .hero-mark {
    width: min(32vw, 210px) !important;
    max-width: 210px !important;
  }

  .hero-title,
  .home-signup,
  .launch-countdown,
  .loading,
  .tagline {
    grid-column: 2 !important;
    text-align: left !important;
  }

  .home-signup {
    max-width: 360px !important;
    margin-top: 14px !important;
  }

  .loop-form {
    display: grid !important;
    grid-template-columns: 1fr 132px !important;
    gap: 8px !important;
  }

  .launch-time {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
  }

  .theme-menu-v12 {
    right: 10px !important;
    top: 10px !important;
  }

  .menu-slider-shell {
    transform: scale(.72) !important;
    transform-origin: right top !important;
  }

  .back-home {
    left: calc(var(--cmv-mobile-sidebar) + 10px) !important;
    top: 10px !important;
  }

  .modal,
  .coming-soon-modal-v234 {
    padding-left: var(--cmv-mobile-sidebar) !important;
    padding-right: 12px !important;
  }

  .modal-panel,
  .archive-modal-panel,
  .archive-modal-panel-v12,
  .coming-soon-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4.9 — MOBILE MODAL + SIDEBAR FINAL FIX */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4.10 — PUBLIC PREVIEW LINK CLEANUP */

.contact-line a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}

.contact-line a:hover {
  color: var(--red);
}

.contact-line a:focus-visible {
  outline: 1px solid rgba(227,34,34,.72);
  outline-offset: 4px;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4.10 — PUBLIC PREVIEW LINK CLEANUP */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.4 — PUBLIC PREVIEW CONTACT POLISH */

.contact-line-secondary {
  margin-top: 28px;
}

.contact-line strong a {
  word-break: break-word;
}

@media (max-width: 768px) {
  .contact-line-secondary {
    margin-top: 24px;
  }

  .contact-line strong {
    line-height: 1.8;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.4 — PUBLIC PREVIEW CONTACT POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.5 — MOBILE TAP / FOCUS POLISH */

html {
  -webkit-text-size-adjust: 100%;
}

a,
button,
.project,
.archive-card,
.coming-soon-card,
.view-btn,
.portfolio-view-btn,
.theme-option,
.theme-quick-toggle,
.theme-menu-button,
.sound-toggle {
  -webkit-tap-highlight-color: rgba(227, 34, 34, .12);
}

a:focus-visible,
button:focus-visible,
.project:focus-visible,
.archive-card:focus-visible {
  outline: 1px solid rgba(227, 34, 34, .82);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  input,
  textarea,
  select,
  button {
    font-size: 16px;
  }

  .contact-line strong a {
    letter-spacing: .12em;
    line-height: 1.9;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.5 — MOBILE TAP / FOCUS POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.1 — ARCHIVE 005 CIPHER REVEAL AFTER CLEARANCE */

/*
  PURPOSE:
  - Archive 005 stays visually sealed before clearance.
  - After successful clearance, the MADAM / ALULA / DUGUD cipher appears.
  - This overrides the CMV_23.4 sealed-preview rules only for unlocked Archive 005.
*/

/* Default Archive 005 state: sealed preview remains visible */
.archive-video-frame-v14p2.is-archive-005-sealed .archive-dynamic-preview,
.archive-video-frame-v14p2.is-archive-005:not(.is-archive-005-unlocked) .archive-dynamic-preview {
  display: grid !important;
}

.archive-video-frame-v14p2.is-archive-005-sealed .palindrome-cipher,
.archive-video-frame-v14p2.is-archive-005:not(.is-archive-005-unlocked) .palindrome-cipher {
  display: none !important;
}

/* Cleared Archive 005 state: reveal cipher */
.archive-video-frame-v14p2.is-archive-005-unlocked .archive-dynamic-preview {
  display: none !important;
}

.archive-video-frame-v14p2.is-archive-005-unlocked .palindrome-cipher {
  display: grid !important;
}

/* Make the unlocked cipher feel intentional and centered */
.archive-video-frame-v14p2.is-archive-005-unlocked {
  background: #050505 !important;
}

.archive-video-frame-v14p2.is-archive-005-unlocked .palindrome-cipher {
  position: absolute !important;
  inset: 0 !important;
  padding: 28px !important;
  grid-template-columns: minmax(230px, 0.95fr) minmax(220px, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
  color: #fff !important;
}

/* Keep cipher readable */
.palindrome-cipher .cipher-kicker {
  grid-column: 1 / -1 !important;
  color: var(--red) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .34em !important;
}

.cipher-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
}

.cipher-cell {
  aspect-ratio: 1 / 1 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.045) !important;
  color: rgba(255,255,255,.88) !important;
  font-family: Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease !important;
}

.cipher-cell:hover,
.cipher-cell.active {
  color: #fff !important;
  border-color: rgba(227,34,34,.74) !important;
  background: rgba(227,34,34,.14) !important;
  transform: translateY(-2px) !important;
}

.cipher-readout {
  display: grid !important;
  gap: 18px !important;
}

.cipher-readout-header {
  display: grid !important;
  gap: 8px !important;
}

.cipher-readout-header span {
  color: var(--red) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .34em !important;
}

.cipher-readout-header strong {
  color: #fff !important;
  font-family: Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: .34em !important;
}

.cipher-readout-header small {
  color: rgba(255,255,255,.62) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .24em !important;
}

#cipherActiveCopy {
  color: rgba(255,255,255,.70) !important;
  font-size: 9px !important;
  line-height: 2 !important;
  letter-spacing: .20em !important;
  margin-bottom: 0 !important;
}

.cipher-symbol-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.cipher-symbol-card {
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.74) !important;
  padding: 10px !important;
  cursor: pointer !important;
  text-align: left !important;
}

.cipher-symbol-card strong {
  display: block !important;
  color: #fff !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  margin-bottom: 5px !important;
}

.cipher-symbol-card span {
  display: block !important;
  color: var(--red) !important;
  font-size: 6px !important;
  letter-spacing: .18em !important;
}

.cipher-symbol-card.active {
  border-color: rgba(227,34,34,.68) !important;
  background: rgba(227,34,34,.12) !important;
}

/* Mobile cipher protection */
@media (max-width: 768px) {
  .archive-video-frame-v14p2.is-archive-005-unlocked .palindrome-cipher {
    position: relative !important;
    inset: auto !important;
    padding: 18px !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    min-height: 520px !important;
    overflow-y: auto !important;
  }

  .palindrome-cipher .cipher-kicker {
    font-size: 6px !important;
    letter-spacing: .18em !important;
  }

  .cipher-cell {
    font-size: 16px !important;
  }

  .cipher-readout-header strong {
    font-size: 20px !important;
    letter-spacing: .22em !important;
  }

  #cipherActiveCopy {
    font-size: 7px !important;
    letter-spacing: .12em !important;
  }

  .cipher-symbol-list {
    grid-template-columns: 1fr !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.1 — ARCHIVE 005 CIPHER REVEAL AFTER CLEARANCE */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.2.1 — ARCHIVE 005 RED CIPHER LIGHT-UP REPAIR */

/*
  PURPOSE:
  - Repair the empty CMV_24.2 glow block.
  - Make Archive 005 light up like the older 71 Archive 005 versions.
  - Style the JS classes: is-active, is-axis, is-mirror, is-sequence.
  - Keep Archive 005 sealed before unlock.
*/

/* Unlocked Archive 005 frame glow */
.archive-video-frame-v14p2.is-archive-005-unlocked {
  background:
    radial-gradient(circle at 50% 48%, rgba(227,34,34,.20), transparent 34%),
    linear-gradient(135deg, #030303, #111 58%, #050505) !important;
  box-shadow:
    inset 0 0 70px rgba(227,34,34,.16),
    0 0 54px rgba(227,34,34,.20),
    var(--shadow) !important;
}

/* Red scan sweep across the unlocked cipher screen */
.archive-video-frame-v14p2.is-archive-005-unlocked::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, transparent, rgba(227,34,34,.22), transparent),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(255,255,255,.035) 14px, transparent 15px 28px) !important;
  mix-blend-mode: screen !important;
  opacity: .62 !important;
  animation: cmvCipherScanRepair 4.8s ease-in-out infinite !important;
}

/* Inner red frame */
.archive-video-frame-v14p2.is-archive-005-unlocked::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 18px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 1px solid rgba(227,34,34,.24) !important;
  box-shadow:
    inset 0 0 38px rgba(227,34,34,.12),
    0 0 26px rgba(227,34,34,.16) !important;
  opacity: .78 !important;
}

/* Keep cipher above scan overlays */
.archive-video-frame-v14p2.is-archive-005-unlocked .palindrome-cipher {
  z-index: 5 !important;
  background:
    radial-gradient(circle at 28% 42%, rgba(227,34,34,.13), transparent 32%),
    radial-gradient(circle at 68% 50%, rgba(255,255,255,.05), transparent 30%),
    rgba(0,0,0,.76) !important;
}

/* Live grid panel */
.archive-video-frame-v14p2.is-archive-005-unlocked .cipher-grid {
  position: relative !important;
  border: 1px solid rgba(227,34,34,.34) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.09), transparent 55%),
    rgba(255,255,255,.025) !important;
  box-shadow:
    inset 0 0 36px rgba(227,34,34,.18),
    0 0 38px rgba(227,34,34,.14) !important;
  animation: cmvCipherGridBreathRepair 3.6s ease-in-out infinite !important;
}

/* Base letters */
.archive-video-frame-v14p2.is-archive-005-unlocked .cipher-cell {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.025) !important;
  color: rgba(255,255,255,.84) !important;
  text-shadow: 0 0 8px rgba(255,255,255,.12) !important;
}

/* Main red illuminated letters */
.archive-video-frame-v14p2.is-archive-005-unlocked .cipher-cell:hover,
.archive-video-frame-v14p2.is-archive-005-unlocked .cipher-cell.is-active,
.archive-video-frame-v14p2.is-archive-005-unlocked .cipher-cell.is-sequence {
  color: #fff !important;
  border-color: rgba(227,34,34,.98) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.52), rgba(227,34,34,.20) 58%, rgba(0,0,0,.08)) !important;
  text-shadow:
    0 0 6px rgba(255,255,255,.95),
    0 0 18px rgba(227,34,34,.95),
    0 0 36px rgba(227,34,34,.68) !important;
  box-shadow:
    inset 0 0 24px rgba(227,34,34,.32),
    0 0 18px rgba(227,34,34,.54),
    0 0 38px rgba(227,34,34,.30) !important;
  transform: translateY(-2px) scale(1.03) !important;
  animation: cmvCipherRedPulseRepair 1.28s ease-in-out infinite !important;
}

/* Axis glow */
.archive-video-frame-v14p2.is-archive-005-unlocked .cipher-cell.is-axis {
  color: rgba(255,255,255,.96) !important;
  border-color: rgba(227,34,34,.58) !important;
  background: rgba(227,34,34,.14) !important;
  text-shadow:
    0 0 9px rgba(227,34,34,.74),
    0 0 20px rgba(227,34,34,.38) !important;
  box-shadow:
    inset 0 0 18px rgba(227,34,34,.18),
    0 0 14px rgba(227,34,34,.26) !important;
}

/* Mirror point glow */
.archive-video-frame-v14p2.is-archive-005-unlocked .cipher-cell.is-mirror {
  color: #fff !important;
  border-color: rgba(255,255,255,.76) !important;
  background: rgba(255,255,255,.17) !important;
  text-shadow:
    0 0 8px rgba(255,255,255,.92),
    0 0 18px rgba(255,255,255,.38) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.13),
    0 0 18px rgba(255,255,255,.25) !important;
}

/* Readout glow */
.archive-video-frame-v14p2.is-archive-005-unlocked .cipher-readout-header strong {
  color: #fff !important;
  text-shadow:
    0 0 8px rgba(255,255,255,.46),
    0 0 24px rgba(227,34,34,.44) !important;
}

.archive-video-frame-v14p2.is-archive-005-unlocked .cipher-symbol-card.active {
  border-color: rgba(227,34,34,.86) !important;
  background:
    linear-gradient(90deg, rgba(227,34,34,.28), rgba(227,34,34,.09)) !important;
  box-shadow:
    inset 0 0 18px rgba(227,34,34,.14),
    0 0 20px rgba(227,34,34,.20) !important;
}

/* Animations */
@keyframes cmvCipherRedPulseRepair {
  0%, 100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.28);
  }
}

@keyframes cmvCipherGridBreathRepair {
  0%, 100% {
    box-shadow:
      inset 0 0 28px rgba(227,34,34,.12),
      0 0 28px rgba(227,34,34,.10);
  }

  50% {
    box-shadow:
      inset 0 0 46px rgba(227,34,34,.24),
      0 0 46px rgba(227,34,34,.18);
  }
}

@keyframes cmvCipherScanRepair {
  0%, 100% {
    transform: translateX(-100%);
    opacity: .14;
  }

  45% {
    opacity: .68;
  }

  68% {
    transform: translateX(100%);
    opacity: .20;
  }
}

/* Mobile: keep glow visible but controlled */
@media (max-width: 768px) {
  .archive-video-frame-v14p2.is-archive-005-unlocked .cipher-cell.is-active,
  .archive-video-frame-v14p2.is-archive-005-unlocked .cipher-cell.is-sequence {
    text-shadow:
      0 0 5px rgba(255,255,255,.78),
      0 0 14px rgba(227,34,34,.84),
      0 0 26px rgba(227,34,34,.44) !important;
    box-shadow:
      inset 0 0 15px rgba(227,34,34,.26),
      0 0 15px rgba(227,34,34,.36) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.2.1 — ARCHIVE 005 RED CIPHER LIGHT-UP REPAIR */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.3 — ARCHIVE 005 MOBILE / MODAL POLISH */

/*
  PURPOSE:
  - Keep the approved CMV_24.2.1 red cipher glow untouched.
  - Stop iPhone Safari from zooming into the username/password fields.
  - Give Archive 005 modal more readable mobile spacing.
  - Let unlocked Archive 005 show the cipher first on mobile.
  - Keep desktop intact.
*/

@media (max-width: 768px) {
  /* Full-width modal on phone. The modal already sits above the sidebar, so do not reserve sidebar space here. */
  #modal.open {
    padding-top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    padding-right: 14px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    padding-left: 14px !important;
    align-items: flex-start !important;
    justify-items: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #modal.open .archive-modal-panel-v12,
  #modal.open .archive-modal-panel,
  #modal.open .modal-panel {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    max-height: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 54px 0 26px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #modal.open .archive-access-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #modal.open #modalSubtitle {
    display: block !important;
    font-size: 7px !important;
    letter-spacing: .20em !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  #modal.open #modalTitle {
    max-width: 100% !important;
    font-size: clamp(20px, 6.3vw, 26px) !important;
    letter-spacing: .15em !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  #modal.open #modalCopy,
  #modal.open .restricted-copy,
  #modal.open .lock-copy,
  #modal.open .detail-block p {
    max-width: 100% !important;
    font-size: 8.5px !important;
    letter-spacing: .09em !important;
    line-height: 1.95 !important;
    overflow-wrap: break-word !important;
  }

  #modal.open .restricted-title,
  #modal.open .lock-mark,
  #modal.open .detail-block span {
    font-size: 8px !important;
    letter-spacing: .18em !important;
    line-height: 1.7 !important;
  }

  #modal.open .archive-restricted-box-v12,
  #modal.open .archive-lock-box-v12,
  #modal.open .archive-detail-box {
    width: 100% !important;
    margin-top: 22px !important;
    box-sizing: border-box !important;
  }

  #modal.open .restricted-lock-v12 {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 20px !important;
  }

  /* iOS Safari zoom prevention: mobile inputs need 16px computed font size. */
  #modal.open .access-input-wrap {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    min-height: 50px !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #modal.open .access-input-wrap input {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
    padding: 14px 10px !important;
    box-sizing: border-box !important;
  }

  #modal.open .access-input-wrap input::placeholder {
    font-size: 13px !important;
    letter-spacing: .18em !important;
  }

  #modal.open .lock-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #modal.open .lock-actions button,
  #modal.open .archive-restricted-box button {
    min-height: 44px !important;
    font-size: 8px !important;
    letter-spacing: .16em !important;
  }

  /* Keep normal archive previews controlled on mobile. */
  #modal.open .archive-video-frame-v14p2,
  #modal.open .archive-video-frame-v12 {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    justify-self: stretch !important;
  }

  /* Once Archive 005 is unlocked, show the cipher first on mobile so it does not feel buried below the text. */
  #modal.open .archive-video-frame-v14p2.is-archive-005-unlocked {
    order: -1 !important;
    aspect-ratio: auto !important;
    min-height: 650px !important;
    overflow: hidden !important;
  }

  #modal.open .archive-video-frame-v14p2.is-archive-005-unlocked .palindrome-cipher {
    position: relative !important;
    inset: auto !important;
    min-height: 650px !important;
    height: auto !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-content: start !important;
    overflow: visible !important;
  }

  #modal.open .palindrome-cipher .cipher-kicker {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-column: auto !important;
    font-size: 6.5px !important;
    letter-spacing: .18em !important;
    line-height: 1.7 !important;
  }

  #modal.open .cipher-grid {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, clamp(42px, 11.8vw, 54px)) !important;
    gap: 5px !important;
  }

  #modal.open .cipher-cell {
    font-size: clamp(18px, 5.2vw, 24px) !important;
  }

  #modal.open .cipher-readout {
    width: 100% !important;
    display: grid !important;
    gap: 14px !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    padding-left: 0 !important;
    padding-top: 16px !important;
  }

  #modal.open .cipher-readout-header strong {
    font-size: clamp(20px, 6.5vw, 25px) !important;
    letter-spacing: .16em !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  #modal.open .cipher-readout-header span,
  #modal.open .cipher-readout-header small {
    font-size: 7px !important;
    letter-spacing: .16em !important;
    line-height: 1.6 !important;
  }

  #modal.open #cipherActiveCopy {
    font-size: 8px !important;
    letter-spacing: .08em !important;
    line-height: 1.9 !important;
  }

  #modal.open .cipher-symbol-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #modal.open .cipher-symbol-card {
    min-height: 52px !important;
    padding: 10px !important;
  }

  #modal.open .cipher-symbol-card strong {
    font-size: 8px !important;
    letter-spacing: .14em !important;
  }

  #modal.open .cipher-symbol-card span {
    font-size: 6px !important;
    letter-spacing: .07em !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 360px) {
  #modal.open .cipher-symbol-list {
    grid-template-columns: 1fr !important;
  }

  #modal.open .archive-video-frame-v14p2.is-archive-005-unlocked,
  #modal.open .archive-video-frame-v14p2.is-archive-005-unlocked .palindrome-cipher {
    min-height: 720px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.3 — ARCHIVE 005 MOBILE / MODAL POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.8.1 — CONTACT VISIBILITY REPAIR */

/*
  Keep #contact using the normal .screen / .info-screen system.
  Do not override the screen positioning here.
*/

.booking-panel {
  width: min(760px, 100%);
  margin: 36px 0 8px;
  padding: 30px;
  border: 1px solid rgba(0,0,0,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.26)),
    radial-gradient(circle at 92% 18%, rgba(227,34,34,.10), transparent 28%);
  box-shadow: 0 22px 70px rgba(0,0,0,.07);
}

.booking-panel-header {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.booking-panel-header span {
  color: var(--red);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .42em;
}

.booking-panel-header strong {
  color: #111;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .36em;
  line-height: 1.6;
}

.booking-panel p {
  max-width: 640px;
  color: #444;
  font-size: 10px;
  line-height: 2;
  letter-spacing: .32em;
  margin-bottom: 24px;
}

.booking-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}

.booking-list span {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.34);
  color: #555;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .24em;
  text-align: center;
  line-height: 1.7;
}

.booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.booking-button {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.44);
  color: #111;
  text-decoration: none;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .32em;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

.booking-button:hover {
  transform: translateY(-3px);
  border-color: rgba(227,34,34,.5);
  color: var(--red);
  box-shadow: 0 16px 42px rgba(0,0,0,.10);
}

.booking-button-primary {
  background: #111;
  border-color: #111;
  color: #fff;
}

.booking-button-primary:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 18px 48px rgba(227,34,34,.18);
}

body.theme-night .booking-panel {
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    radial-gradient(circle at 92% 18%, rgba(227,34,34,.16), transparent 30%);
}

body.theme-night .booking-panel-header strong,
body.theme-night .booking-button {
  color: #f3f3f0;
}

body.theme-night .booking-panel p {
  color: #b9b9b4;
}

body.theme-night .booking-list span {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #b9b9b4;
}

body.theme-night .booking-button {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}

body.theme-night .booking-button-primary {
  background: #f3f3f0;
  border-color: #f3f3f0;
  color: #111;
}

@media (max-width: 768px) {
  .booking-panel {
    margin-top: 34px;
    padding: 22px;
  }

  .booking-panel-header span {
    font-size: 7px;
    letter-spacing: .28em;
  }

  .booking-panel-header strong {
    font-size: 13px;
    letter-spacing: .22em;
  }

  .booking-panel p {
    font-size: 8px;
    letter-spacing: .20em;
    line-height: 2;
  }

  .booking-list {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .booking-list span {
    min-height: 48px;
    font-size: 6.5px;
    letter-spacing: .16em;
  }

  .booking-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .booking-button {
    width: 100%;
    min-height: 46px;
    font-size: 7px;
    letter-spacing: .22em;
    text-align: center;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.8 — CONTACT / BOOKING CTA UPGRADE */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.8.1 — CONTACT DIRECT LINKS VISIBILITY SAFETY */

#contact .contact-line-primary {
  margin-top: 34px;
}

#contact .contact-line {
  width: min(760px, 100%);
}

#contact .contact-line strong a {
  display: inline-block;
  color: inherit;
}

#contact .booking-panel {
  clear: both;
}

@media (max-width: 768px) {
  #contact .contact-line-primary {
    margin-top: 30px;
  }

  #contact .contact-line {
    gap: 12px;
  }

  #contact .contact-line strong {
    font-size: 10px !important;
    letter-spacing: .10em !important;
    line-height: 1.8 !important;
  }

  #contact .contact-line strong a {
    overflow-wrap: anywhere;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.8.1 — CONTACT DIRECT LINKS VISIBILITY SAFETY */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.8.2 — CONTACT LINK HOVER RESTORE */

#contact .contact-line strong a {
  transition:
    color .25s ease,
    text-shadow .25s ease,
    transform .25s ease;
}

#contact .contact-line strong a:hover,
#contact .contact-line strong a:focus-visible,
#contact .contact-line strong a:active {
  color: var(--red) !important;
  text-shadow: 0 0 14px rgba(227,34,34,.24);
  transform: translateY(-1px);
}

#contact .contact-line strong a:focus-visible {
  outline: 1px solid rgba(227,34,34,.72);
  outline-offset: 4px;
}

body.theme-night #contact .contact-line strong a:hover,
body.theme-night #contact .contact-line strong a:focus-visible,
body.theme-night #contact .contact-line strong a:active {
  color: var(--red) !important;
  text-shadow: 0 0 16px rgba(227,34,34,.30);
}

/* 🟥 RED HIGHLIGHT END: CMV_24.8.2 — CONTACT LINK HOVER RESTORE */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.9 — PERFORMANCE / MOBILE LOAD CLEANUP */

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

  .scanline,
  .red-sweep,
  .geo-scan,
  .speedlines,
  .intro-load::after,
  .bar::before {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .grid-bg {
    animation-duration: 36s;
    opacity: .14;
  }

  .scanline {
    animation-duration: 14s;
    opacity: .08;
  }

  .red-sweep {
    animation-duration: 7s;
  }

  .geo-scan {
    animation-duration: 8s;
    opacity: .55;
  }

  .hero-mark,
  .geo-sphere {
    will-change: auto;
  }

  .archive-preview-art::before {
    opacity: .42;
  }

  .archive-preview-art::after {
    opacity: .84;
  }
}

@media (max-width: 480px) {
  .noise {
    opacity: .045;
  }

  .grid-bg {
    opacity: .10;
  }

  .scanline {
    opacity: .06;
  }

  .rings {
    animation-duration: 7s;
  }

  .orbit {
    animation-duration: 32s;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.9 — PERFORMANCE / MOBILE LOAD CLEANUP */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.10 — FINAL ACCESSIBILITY / TAP QA */

.nav-link,
.archive-card,
.project,
.booking-button,
.view-btn,
.portfolio-view-btn,
.theme-menu-button,
.theme-quick-toggle,
.theme-option,
.sound-toggle,
.back-home,
.close,
.archive-preview-play,
.cipher-symbol-card,
.back-to-archives {
  -webkit-tap-highlight-color: rgba(227,34,34,.14);
  touch-action: manipulation;
}

.nav-link:focus-visible,
.archive-card:focus-visible,
.project:focus-visible,
.booking-button:focus-visible,
.view-btn:focus-visible,
.portfolio-view-btn:focus-visible,
.theme-menu-button:focus-visible,
.theme-quick-toggle:focus-visible,
.theme-option:focus-visible,
.sound-toggle:focus-visible,
.back-home:focus-visible,
.close:focus-visible,
.archive-preview-play:focus-visible,
.cipher-symbol-card:focus-visible,
.back-to-archives:focus-visible {
  outline: 1px solid rgba(227,34,34,.82);
  outline-offset: 4px;
  box-shadow: 0 0 18px rgba(227,34,34,.14);
}

.archive-card:focus-visible,
.project:focus-visible {
  background: rgba(255,255,255,.62);
  transform: translateX(7px);
}

.nav-link:focus-visible {
  color: var(--red);
}

body.theme-night .archive-card:focus-visible,
body.theme-night .project:focus-visible {
  background: rgba(255,255,255,.06);
}

@media (max-width: 768px) {
  .view-btn,
  .portfolio-view-btn,
  .theme-option,
  .booking-button,
  .back-to-archives,
  #archiveUnlockButton,
  #requestClearanceButton {
    min-height: 44px;
  }

  .nav-link {
    min-height: 24px;
  }

  .archive-card:focus-visible,
  .project:focus-visible {
    transform: none;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.10 — FINAL ACCESSIBILITY / TAP QA */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.1 — MOBILE PAGE ISOLATION / CENTERING REPAIR */

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    height: auto;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: smooth;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    cursor: auto;
  }

  .site {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 14px 12px !important;
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 14px;
    z-index: 95;
    overflow: visible !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line);
    background: rgba(245,245,242,.94) !important;
    backdrop-filter: blur(18px);
  }

  .mini-logo {
    grid-column: 1;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    font-size: 16px !important;
  }

  .nav {
    grid-column: 1 / -1;
    display: flex !important;
    gap: 8px !important;
    margin-top: 2px !important;
    padding: 6px 0 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 34px !important;
    padding: 0 12px !important;
    gap: 0 !important;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.46);
    text-decoration: none;
  }

  .nav a.active {
    color: var(--red);
    border-color: rgba(227,34,34,.42);
    background: rgba(227,34,34,.06);
    box-shadow: 0 0 18px rgba(227,34,34,.08);
  }

  .nav a.active::after {
    display: none !important;
  }

  .nav-num {
    display: none !important;
  }

  .nav-label {
    font-size: 7px !important;
    letter-spacing: .18em !important;
    white-space: nowrap;
  }

  .sidebar-footer-v12,
  .socials-v12,
  .ig-link-v12,
  .copyright-v12 {
    display: none !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: calc(100svh - 92px) !important;
    overflow: visible !important;
  }

  .hamburger {
    display: none !important;
  }

  .theme-menu-v12 {
    position: fixed !important;
    top: 14px !important;
    right: 12px !important;
    z-index: 110 !important;
  }

  .menu-slider-shell {
    transform: scale(.82) !important;
    transform-origin: right top;
  }

  .back-home {
    display: none !important;
  }

  .screen {
    position: relative !important;
    inset: auto !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .screen.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    overflow: visible !important;
  }

  .home.screen.active {
    display: flex !important;
    min-height: calc(100svh - 96px) !important;
    padding: 56px 18px 70px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }

  .hero-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .hero-mark {
    width: min(78vw, 300px) !important;
    height: min(78vw, 300px) !important;
    max-width: 300px !important;
    max-height: 300px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .globe {
    inset: 42px !important;
  }

  .orbit {
    border-width: 14px !important;
  }

  .letters {
    font-size: clamp(70px, 20vw, 108px) !important;
  }

  .hero-title {
    margin-top: -20px !important;
    text-align: center !important;
  }

  .portfolio,
  .archive,
  .info-screen {
    padding: 74px 20px 78px !important;
    overflow: visible !important;
    text-align: center;
  }

  .soon-panel {
    min-height: auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .section-title {
    font-size: clamp(22px, 8vw, 34px) !important;
    letter-spacing: .28em !important;
    line-height: 1.45;
    text-align: center !important;
  }

  .portfolio-copy {
    font-size: 8px !important;
    letter-spacing: .20em !important;
    line-height: 2;
    max-width: 100%;
    text-align: center !important;
  }

  .launch-countdown,
  .tagline,
  .loading {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
  }

  .launch-countdown {
    margin: 30px auto 0 !important;
  }

  .portfolio-view-controls-v23 {
    width: 100% !important;
    max-width: 270px !important;
    margin: 0 auto 26px !important;
    display: grid !important;
    gap: 10px !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .portfolio-view-toggle {
    width: 100% !important;
    max-width: 260px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .portfolio-view-btn {
    min-height: 40px !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
  }

  .soon-grid,
  .portfolio-grid,
  .portfolio .soon-grid.portfolio-view-tile,
  .portfolio .soon-grid.portfolio-view-wide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 26px auto 0 !important;
    grid-template-columns: 1fr !important;
  }

  .portfolio .soon-grid.portfolio-view-tile > .coming-soon-card {
    min-height: 184px !important;
    padding: 22px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card {
    min-height: 112px !important;
    padding: 18px 18px 18px 72px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: left !important;
  }

  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card::after {
    left: 34px !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 20px !important;
  }

  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card span,
  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card strong,
  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card small {
    grid-column: auto !important;
    width: 100% !important;
  }

  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card strong {
    font-size: 11px !important;
    letter-spacing: .26em !important;
    line-height: 1.45 !important;
  }

  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card small {
    margin-top: 6px !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
    line-height: 1.6 !important;
  }

  .archive-system {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: left !important;
  }

  .archive-header {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  .archive-side-controls-v12 {
    justify-items: start !important;
  }

  .archive-view-toggle-v12 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .archive-view-toggle-v12 .view-btn {
    min-height: 40px !important;
    padding: 10px 0 !important;
    font-size: 6.5px !important;
    letter-spacing: .10em !important;
  }

  .archive-directory {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 32px !important;
  }

  .archive-directory.view-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .archive-directory.view-grid .archive-dossier {
    min-height: 188px !important;
    padding: 14px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    text-align: center !important;
  }

  .archive-directory.view-grid .archive-thumb {
    width: 100% !important;
    height: 86px !important;
  }

  .archive-directory.view-large {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .archive-directory.view-large .archive-dossier {
    min-height: 260px !important;
    padding: 22px !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    text-align: left !important;
  }

  .archive-directory.view-large .archive-thumb {
    width: 100% !important;
    height: 178px !important;
  }

  .archive-directory.view-xl {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .archive-directory.view-xl .archive-dossier {
    min-height: 360px !important;
    padding: 0 0 24px !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .archive-directory.view-xl .archive-thumb {
    width: 100% !important;
    height: 260px !important;
  }

  .archive-directory.view-xl .archive-info,
  .archive-directory.view-xl .archive-num,
  .archive-directory.view-xl .archive-status,
  .archive-directory.view-xl .archive-lock-status,
  .archive-directory.view-xl .archive-omega-status,
  .archive-directory.view-xl .archive-arrow {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .modal {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: 86px 18px 30px !important;
  }

  .modal-panel,
  .archive-modal-panel-v12 {
    width: min(100%, 620px) !important;
    margin-left: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .archive-video-frame-v12 {
    max-width: 100% !important;
    transform: none !important;
  }

  .close {
    top: 16px !important;
    right: 18px !important;
  }
}

@media (max-width: 390px) {
  .nav-label {
    font-size: 6.5px !important;
    letter-spacing: .14em !important;
  }

  .nav a {
    padding: 0 10px !important;
  }

  .portfolio,
  .archive,
  .info-screen {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero-mark {
    width: min(76vw, 286px) !important;
    height: min(76vw, 286px) !important;
  }
}

@media (max-width: 768px) {
  body.theme-night .sidebar {
    background: rgba(5,5,5,.94) !important;
    border-bottom-color: rgba(255,255,255,.14);
  }

  body.theme-night .nav a {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.045);
  }

  body.theme-night .nav a.active {
    color: var(--red);
    border-color: rgba(227,34,34,.48);
    background: rgba(227,34,34,.10);
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.1 — MOBILE PAGE ISOLATION / CENTERING REPAIR */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.2 — MOBILE CROP / CONTROLS VISIBILITY REPAIR */

@media (max-width: 768px) {
  :root {
    --cmv-mobile-safe-top: calc(12px + env(safe-area-inset-top, 0px));
    --cmv-mobile-safe-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-bottom: var(--cmv-mobile-safe-bottom) !important;
  }

  .site,
  .main,
  .screen,
  .screen.active {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Mobile header: keep CM logo, sound, mode, and nav visible */
  .sidebar {
    padding: var(--cmv-mobile-safe-top) 12px 10px !important;
    grid-template-columns: 44px 1fr 88px !important;
    gap: 8px 10px !important;
    align-items: center !important;
  }

  .mini-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 40px !important;
    height: 40px !important;
    justify-self: start !important;
  }

  /* Make all nav items visible instead of letting CONTACT get cut off */
  .nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 8px 0 0 !important;
    margin: 0 !important;
  }

  .nav a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
  }

  .nav-label {
    max-width: 100% !important;
    font-size: 6.2px !important;
    letter-spacing: .13em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
  }

  /* Restore sound + copyright on mobile */
  .sidebar-footer-v12 {
    display: contents !important;
  }

  .socials-v12,
  .ig-link-v12 {
    display: none !important;
  }

  .sound-switch {
    position: fixed !important;
    top: var(--cmv-mobile-safe-top) !important;
    right: 96px !important;
    z-index: 170 !important;
    width: 38px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.66) !important;
    backdrop-filter: blur(14px);
  }

  .sound-switch:hover {
    transform: none !important;
  }

  .sound-switch-icon {
    display: grid !important;
    place-items: center !important;
  }

  .sound-switch-text,
  .sound-switch-track {
    display: none !important;
  }

  .sound-svg {
    width: 16px !important;
    height: 16px !important;
  }

  .copyright-v12 {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: var(--cmv-mobile-safe-bottom) !important;
    z-index: 80 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    color: rgba(0,0,0,.48) !important;
    font-size: 6px !important;
    line-height: 1.4 !important;
    letter-spacing: .18em !important;
    text-align: center !important;
    pointer-events: none !important;
  }

  .copyright-full {
    display: none !important;
  }

  .copyright-short,
  .rights-line {
    display: inline !important;
  }

  /* Restore Mode / Light button visibility */
  .theme-menu-v12 {
    display: grid !important;
    position: fixed !important;
    top: var(--cmv-mobile-safe-top) !important;
    right: 10px !important;
    z-index: 175 !important;
  }

  .menu-slider-shell {
    transform: none !important;
    transform-origin: right top !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  .theme-menu-v12 .theme-menu-button {
    min-width: 54px !important;
    height: 34px !important;
    padding: 0 9px !important;
    font-size: 6.5px !important;
    letter-spacing: .16em !important;
  }

  .theme-quick-toggle {
    width: 34px !important;
    height: 34px !important;
  }

  .theme-quick-icon {
    width: 21px !important;
    height: 21px !important;
    font-size: 12px !important;
  }

  .theme-menu-v12 .theme-menu-panel {
    top: 42px !important;
    right: 0 !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* Homepage crop repair */
  .home.screen.active {
    min-height: auto !important;
    padding: 34px 18px 148px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .hero-mark {
    width: min(68vw, 258px) !important;
    height: min(68vw, 258px) !important;
    max-width: 258px !important;
    max-height: 258px !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  .rings {
    inset: -20px !important;
  }

  .globe {
    inset: 36px !important;
  }

  .orbit {
    border-width: 12px !important;
  }

  .letters {
    font-size: clamp(62px, 18vw, 96px) !important;
    transform: skewX(-9deg) translateZ(40px) !important;
  }

  .speedlines {
    left: 4% !important;
    right: 4% !important;
    width: auto !important;
    height: 80px !important;
    opacity: .30 !important;
  }

  .red-sweep {
    left: -38px !important;
    width: 96px !important;
  }

  .hero-title {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto 0 !important;
    padding: 0 4px !important;
    text-align: center !important;
  }

  .coming-soon-kicker {
    margin-bottom: 12px !important;
    font-size: 7px !important;
    letter-spacing: .26em !important;
  }

  .hero-title h1 {
    max-width: 100% !important;
    margin: 0 auto 10px !important;
    font-size: clamp(20px, 6.1vw, 26px) !important;
    letter-spacing: .22em !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-title p {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
    line-height: 1.8 !important;
  }

  .coming-soon-copy {
    font-size: 7px !important;
    letter-spacing: .18em !important;
  }

  /* Keep Stay In The Loop / Coming Soon / Launching In visible */
  .home-signup {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    margin: 28px auto 0 !important;
    text-align: center !important;
  }

  .loop-label {
    font-size: 7px !important;
    letter-spacing: .26em !important;
    margin-bottom: 12px !important;
  }

  .loop-form {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .loop-form input,
  .loop-form button {
    width: 100% !important;
    min-height: 38px !important;
    text-align: center !important;
  }

  .loop-copy {
    font-size: 6.5px !important;
    letter-spacing: .16em !important;
    line-height: 1.8 !important;
  }

  .loading,
  .tagline,
  .launch-countdown {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .loading {
    margin-top: 26px !important;
    justify-content: center !important;
  }

  .tagline {
    margin-top: 22px !important;
    font-size: 7px !important;
    letter-spacing: .24em !important;
    line-height: 2 !important;
  }

  .launch-countdown {
    margin-top: 24px !important;
  }

  .launch-time {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: start !important;
  }

  .launch-time div {
    min-width: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
  }

  .launch-time strong {
    font-size: 18px !important;
    letter-spacing: .08em !important;
  }

  .launch-time span {
    font-size: 6px !important;
    letter-spacing: .16em !important;
  }

  /* Section top spacing: prevent page headings from being cut */
  .portfolio,
  .archive,
  .info-screen {
    padding-top: 42px !important;
    padding-bottom: 148px !important;
  }

  .section-title {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

@media (max-width: 390px) {
  .nav-label {
    font-size: 5.9px !important;
    letter-spacing: .10em !important;
  }

  .nav a {
    min-height: 31px !important;
    padding: 0 3px !important;
  }

  .hero-mark {
    width: min(66vw, 244px) !important;
    height: min(66vw, 244px) !important;
  }

  .hero-title h1 {
    font-size: clamp(18px, 5.8vw, 23px) !important;
    letter-spacing: .18em !important;
  }

  .launch-time strong {
    font-size: 16px !important;
  }
}

@media (max-width: 768px) {
  body.theme-night .sound-switch,
  body.theme-night .menu-slider-shell {
    background: rgba(10,10,10,.72) !important;
    border-color: rgba(255,255,255,.16) !important;
  }

  body.theme-night .copyright-v12 {
    color: rgba(255,255,255,.46) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.2 — MOBILE CROP / CONTROLS VISIBILITY REPAIR */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.3 — MOBILE MODE / SOUND / BEIGE THEME REPAIR */

/* Beige / Afternoon mode */
body.theme-beige {
  --bg: #efe3d0;
  --white: #f8eddd;
  --ink: #17120c;
  --muted: #756656;
  --line: rgba(74, 49, 29, .18);
  --glass: rgba(255, 246, 232, .58);
  --shadow: 0 30px 90px rgba(78, 52, 31, .16);

  background: #efe3d0;
  color: var(--ink);
}

body.theme-beige .site {
  background:
    radial-gradient(circle at var(--mx, 55%) var(--my, 45%), rgba(255,248,235,.92), transparent 31%),
    linear-gradient(135deg, #f5ead8 0%, #ead8bd 46%, #f7efdf 100%);
}

body.theme-beige .sidebar {
  background: rgba(239, 226, 207, .72);
  border-right-color: rgba(74,49,29,.16);
}

body.theme-beige .nav a,
body.theme-beige .hamburger span,
body.theme-beige .section-title,
body.theme-beige .archive-info h3,
body.theme-beige .hero-title h1 {
  color: #17120c;
}

body.theme-beige .nav a.active,
body.theme-beige .nav a:hover,
body.theme-beige .hero-title span,
body.theme-beige .tagline span {
  color: var(--red);
}

body.theme-beige .portfolio-copy,
body.theme-beige .archive-info p,
body.theme-beige .modal p,
body.theme-beige .detail-block p {
  color: rgba(23,18,12,.68);
}

body.theme-beige .modal {
  background: rgba(20, 14, 9, .58);
}

body.theme-beige .modal-panel,
body.theme-beige .soon-grid div,
body.theme-beige .info-grid div,
body.theme-beige .archive-dossier,
body.theme-beige .booking-panel,
body.theme-beige .coming-soon-panel {
  background: rgba(255, 247, 233, .68);
  border-color: rgba(74, 49, 29, .16);
}

body.theme-beige .close,
body.theme-beige .back-home,
body.theme-beige .view-btn,
body.theme-beige .portfolio-view-btn,
body.theme-beige .theme-menu-button,
body.theme-beige .theme-quick-toggle,
body.theme-beige .theme-option,
body.theme-beige .booking-button {
  color: #17120c;
  border-color: rgba(74,49,29,.18);
  background: rgba(255, 248, 235, .58);
}

body.theme-beige .view-btn.active,
body.theme-beige .portfolio-view-btn.active,
body.theme-beige .theme-option.active,
body.theme-beige .booking-button-primary {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

/* Beige hero emblem: black / red ring feeling */
body.theme-beige .orbit {
  border-color: rgba(20, 16, 12, .82);
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.12),
    0 0 26px rgba(227,34,34,.10);
}

body.theme-beige .rings,
body.theme-beige .rings::after {
  border-color: rgba(20, 16, 12, .24);
  box-shadow: 0 0 20px rgba(227,34,34,.08);
}

body.theme-beige .red-sweep {
  box-shadow: 0 0 24px rgba(227,34,34,.68);
}

body.theme-beige .letters {
  color: rgba(17,17,17,.92);
  text-shadow:
    0 18px 35px rgba(0,0,0,.18),
    0 -2px 0 rgba(255,248,235,.82);
}

body.theme-beige .globe {
  background:
    radial-gradient(circle at 35% 32%, rgba(255,250,238,.95), rgba(226,210,187,.74) 45%, rgba(154,132,108,.46)),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(0,0,0,.05) 35px),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(0,0,0,.05) 35px);
}

/* Mobile-only repairs */
@media (max-width: 768px) {
  /* Make LIGHT / BEIGE / DARK / AUTO readable in mobile dark mode */
  body.theme-night .theme-menu-v12 .theme-menu-panel {
    background: rgba(8,8,8,.96) !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  body.theme-night .theme-menu-v12 .theme-option,
  body.theme-night .theme-menu-v12 .theme-option-label,
  body.theme-night .theme-menu-v12 .theme-option-icon {
    color: rgba(255,255,255,.92) !important;
  }

  body.theme-night .theme-menu-v12 .theme-option.active,
  body.theme-night .theme-menu-v12 .theme-option:hover {
    color: var(--red) !important;
  }

  body.theme-night .theme-menu-v12 .theme-option.active .theme-option-label,
  body.theme-night .theme-menu-v12 .theme-option:hover .theme-option-label,
  body.theme-night .theme-menu-v12 .theme-option.active .theme-option-icon,
  body.theme-night .theme-menu-v12 .theme-option:hover .theme-option-icon {
    color: var(--red) !important;
  }

  /* Make SOUND ON / SOUND OFF text visible on mobile */
  .sound-switch {
    right: 106px !important;
    width: 78px !important;
    height: 34px !important;
    min-height: 34px !important;
    display: inline-grid !important;
    grid-template-columns: 18px 1fr !important;
    gap: 5px !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 0 8px !important;
  }

  .sound-switch-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .sound-switch-text {
    display: inline-block !important;
    font-size: 5.8px !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
    color: rgba(0,0,0,.74) !important;
  }

  .sound-switch-track {
    display: none !important;
  }

  body.theme-night .sound-switch-text {
    color: rgba(255,255,255,.90) !important;
  }

  body.theme-night .sound-svg {
    stroke: rgba(255,255,255,.92) !important;
  }

  body.theme-beige .sidebar {
    background: rgba(239, 226, 207, .94) !important;
    border-bottom-color: rgba(74,49,29,.18);
  }

  body.theme-beige .nav a {
    border-color: rgba(74,49,29,.14);
    background: rgba(255,248,235,.50);
  }

  body.theme-beige .nav a.active {
    color: var(--red);
    border-color: rgba(227,34,34,.42);
    background: rgba(227,34,34,.07);
  }

  body.theme-beige .sound-switch,
  body.theme-beige .menu-slider-shell {
    background: rgba(255,248,235,.72) !important;
    border-color: rgba(74,49,29,.16) !important;
  }

  body.theme-beige .copyright-v12 {
    color: rgba(23,18,12,.52) !important;
  }
}

@media (max-width: 390px) {
  .sound-switch {
    right: 100px !important;
    width: 72px !important;
    grid-template-columns: 16px 1fr !important;
    gap: 4px !important;
    padding: 0 6px !important;
  }

  .sound-switch-text {
    font-size: 5.4px !important;
    letter-spacing: .10em !important;
  }

  .theme-menu-v12 .theme-menu-button {
    min-width: 50px !important;
    padding: 0 7px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.3 — MOBILE MODE / SOUND / BEIGE THEME REPAIR */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.8 — MOBILE BACK TOP / SOUND SLIDER / DARK BORDER REPAIR */

.mobile-identity-footer {
  display: none;
}

.back-top-mobile {
  display: none;
}

/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.9 — DESKTOP MODE MENU POSITION RESTORE */

/*
  Desktop only:
  Restore the Mode / Light control to the CMV_24.11.6 position and size.
  Mobile still uses the Sound + Mode header row from CMV_24.11.8.
*/
@media (min-width: 769px) {
  .sidebar,
  .sidebar-footer-v12 {
    overflow: visible !important;
  }

  .theme-menu-v12 {
    position: fixed !important;
    top: 52px !important;
    right: 34px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 300 !important;
    display: grid !important;
    justify-items: end !important;
    width: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .theme-menu-v12 .menu-slider-shell {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    transform: none !important;
    transform-origin: right top !important;
  }

  .theme-menu-v12 .theme-menu-button {
    min-width: 88px !important;
    height: 38px !important;
    padding: 0 18px 0 20px !important;
    font-size: 8px !important;
    letter-spacing: .34em !important;
  }

  .theme-menu-v12 .theme-quick-toggle {
    width: 42px !important;
    height: 38px !important;
  }

  .theme-menu-v12 .theme-quick-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
  }

  .theme-menu-v12 .theme-menu-panel {
    position: absolute !important;
    top: 48px !important;
    right: 0 !important;
    left: auto !important;
    max-width: none !important;
    min-width: 178px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.9 — DESKTOP MODE MENU POSITION RESTORE */

@media (max-width: 768px) {
  :root {
    --cmv-mobile-control-top: calc(12px + env(safe-area-inset-top, 0px));
  }

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .site,
  .main,
  .screen,
  .screen.active {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    grid-template-columns: 42px minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px 7px !important;
    padding: var(--cmv-mobile-control-top) 10px 10px !important;
    z-index: 220 !important;
  }

  .mini-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 40px !important;
    height: 40px !important;
  }

  .sidebar-footer-v12 {
    display: contents !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
  }

  .sidebar-footer-v12 .socials-v12,
  .sidebar-footer-v12 .ig-link-v12,
  .sidebar-footer-v12 .copyright-v12 {
    display: none !important;
  }

  /* Sound beside Mode: stable, compact, and no lag-related JS changes */
  .sound-switch {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 104px !important;
    height: 31px !important;
    min-height: 31px !important;
    display: grid !important;
    grid-template-columns: 15px 1fr 24px !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 3px !important;
    padding: 0 5px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    touch-action: manipulation !important;
  }

  .sound-switch:hover {
    transform: none !important;
  }

  .sound-switch-icon {
    width: 15px !important;
    height: 15px !important;
    display: grid !important;
    place-items: center !important;
  }

  .sound-svg {
    width: 13px !important;
    height: 13px !important;
  }

  .sound-switch-text {
    display: block !important;
    width: 100% !important;
    font-size: 5.15px !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: rgba(0,0,0,.78) !important;
  }

  .sound-switch-track {
    display: block !important;
    position: relative !important;
    width: 24px !important;
    height: 14px !important;
    min-width: 24px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.08) !important;
    border: 1px solid rgba(0,0,0,.18) !important;
  }

  .sound-switch-knob {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 2px !important;
    right: auto !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(0,0,0,.42) !important;
    transform: translate3d(0, -50%, 0) !important;
    transition:
      transform .22s ease,
      background .22s ease,
      box-shadow .22s ease !important;
  }

  .sound-switch.active .sound-switch-knob {
    left: 2px !important;
    background: var(--red) !important;
    transform: translate3d(11px, -50%, 0) !important;
    box-shadow: 0 0 10px rgba(227,34,34,.50) !important;
  }

  .theme-menu-v12 {
    position: relative !important;
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    top: auto !important;
    right: auto !important;
    z-index: 230 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .theme-menu-v12 .menu-slider-shell {
    transform: none !important;
    transform-origin: right top !important;
    display: flex !important;
    align-items: center !important;
    height: 31px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  .theme-menu-v12 .theme-menu-button {
    min-width: 47px !important;
    height: 31px !important;
    padding: 0 7px !important;
    font-size: 6.1px !important;
    letter-spacing: .12em !important;
  }

  .theme-quick-toggle {
    width: 31px !important;
    height: 31px !important;
  }

  .theme-quick-icon {
    width: 19px !important;
    height: 19px !important;
    font-size: 12px !important;
  }

  .theme-menu-v12 .theme-menu-panel {
    position: absolute !important;
    top: 39px !important;
    right: 0 !important;
    max-width: calc(100vw - 20px) !important;
  }

  .nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  .nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 39px !important;
    padding: 5px 3px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,.13) !important;
  }

  .nav-num {
    display: block !important;
    font-size: 5.4px !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    opacity: .62 !important;
    color: currentColor !important;
  }

  .nav-label {
    display: block !important;
    font-size: 5.9px !important;
    line-height: 1 !important;
    letter-spacing: .105em !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .nav a.active .nav-num,
  .nav a.active .nav-label {
    color: var(--red) !important;
    opacity: 1 !important;
  }

  /* Mobile-only floating BACK TO TOP */
  .back-top-mobile {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 150 !important;
    width: auto !important;
    max-width: 124px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(227,34,34,.42) !important;
    background: rgba(245,245,242,.82) !important;
    color: var(--red) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
    font-size: 5.7px !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .back-top-mobile.is-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .back-home-desktop {
    display: none !important;
  }

  .mobile-identity-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 6px !important;
    width: calc(100% - 36px) !important;
    max-width: 360px !important;
    margin: 14px auto calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(0,0,0,.10) !important;
  }

  .mobile-footer-home {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 134px !important;
    max-width: 160px !important;
    min-height: 31px !important;
    margin: 0 auto 4px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(227,34,34,.38) !important;
    background: transparent !important;
    color: var(--red) !important;
    font-size: 5.7px !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }

  .mobile-footer-home.is-hidden {
    display: none !important;
  }

  .mobile-footer-socials {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
  }

  .mobile-footer-socials a,
  .mobile-footer-socials span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    color: var(--ink) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    opacity: .78 !important;
    text-decoration: none !important;
  }

  .mobile-footer-ig {
    justify-self: center !important;
    color: var(--ink) !important;
    font-size: 5.55px !important;
    line-height: 1.2 !important;
    letter-spacing: .14em !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    opacity: .78 !important;
  }

  .mobile-footer-rights {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    color: rgba(0,0,0,.50) !important;
    font-size: 5.6px !important;
    line-height: 1.3 !important;
    letter-spacing: .13em !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .home.screen.active {
    padding-bottom: 36px !important;
  }

  .portfolio,
  .archive,
  .info-screen {
    padding-bottom: 42px !important;
  }
}

@media (max-width: 390px) {
  .sound-switch {
    width: 98px !important;
    grid-template-columns: 14px 1fr 22px !important;
    gap: 2px !important;
    padding: 0 5px !important;
  }

  .sound-switch-text {
    font-size: 4.9px !important;
    letter-spacing: .045em !important;
  }

  .theme-menu-v12 .theme-menu-button {
    min-width: 45px !important;
    padding: 0 6px !important;
  }

  .nav-num {
    font-size: 5px !important;
    letter-spacing: .08em !important;
  }

  .nav-label {
    font-size: 5.35px !important;
    letter-spacing: .075em !important;
  }

  .mobile-footer-ig {
    font-size: 5.05px !important;
    letter-spacing: .105em !important;
  }

  .mobile-footer-rights {
    font-size: 5.1px !important;
    letter-spacing: .10em !important;
  }
}

@media (max-width: 768px) {
  body.theme-night .sidebar {
    background: rgba(5,5,5,.94) !important;
    border-bottom-color: rgba(255,255,255,.18) !important;
  }

  body.theme-night .nav a {
    color: rgba(255,255,255,.86) !important;
    border-color: rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
  }

  body.theme-night .nav a.active {
    color: var(--red) !important;
    border-color: rgba(227,34,34,.55) !important;
    background: rgba(227,34,34,.12) !important;
  }

  body.theme-night .sound-switch-text {
    color: rgba(255,255,255,.88) !important;
  }

  body.theme-night .sound-switch-track {
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.26) !important;
  }

  body.theme-night .sound-switch-knob {
    background: rgba(255,255,255,.62) !important;
    box-shadow: 0 0 8px rgba(255,255,255,.18) !important;
  }

  body.theme-night .sound-switch.active .sound-switch-knob {
    background: var(--red) !important;
    box-shadow: 0 0 12px rgba(227,34,34,.62) !important;
  }

  body.theme-night .mobile-identity-footer {
    border-top-color: rgba(255,255,255,.12) !important;
  }

  body.theme-night .mobile-footer-socials a,
  body.theme-night .mobile-footer-socials span,
  body.theme-night .mobile-footer-ig {
    color: rgba(255,255,255,.78) !important;
  }

  body.theme-night .mobile-footer-rights {
    color: rgba(255,255,255,.50) !important;
  }

  body.theme-night .back-top-mobile,
  body.theme-night .mobile-footer-home {
    background: rgba(10,10,10,.78) !important;
    border-color: rgba(227,34,34,.42) !important;
    color: var(--red) !important;
  }

  body.theme-beige .nav a {
    border-color: rgba(74,49,29,.16) !important;
  }

  body.theme-beige .mobile-identity-footer {
    border-top-color: rgba(74,49,29,.14) !important;
  }

  body.theme-beige .mobile-footer-socials a,
  body.theme-beige .mobile-footer-socials span,
  body.theme-beige .mobile-footer-ig {
    color: rgba(23,18,12,.76) !important;
  }

  body.theme-beige .mobile-footer-rights {
    color: rgba(23,18,12,.52) !important;
  }

  body.theme-beige .back-top-mobile,
  body.theme-beige .mobile-footer-home {
    background: rgba(255,248,235,.84) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.8 — MOBILE BACK TOP / SOUND SLIDER / DARK BORDER REPAIR */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.10 — DESKTOP MODE / MOBILE READABILITY FINAL FIX */

/* Hide removed Back to Top control completely */
.back-top-mobile {
  display: none !important;
}

/* Desktop: force Mode menu back to true top-right main-layer position */
@media (min-width: 769px) {
  .theme-menu-v12 {
    position: fixed !important;
    top: 76px !important;
    right: 34px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 9999 !important;
    display: grid !important;
    justify-items: end !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .theme-menu-v12 .menu-slider-shell {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    transform: none !important;
    transform-origin: right top !important;
  }

  .theme-menu-v12 .theme-menu-button {
    min-width: 82px !important;
    height: 38px !important;
    padding: 0 18px 0 20px !important;
    font-size: 8px !important;
    letter-spacing: .36em !important;
  }

  .theme-menu-v12 .theme-quick-toggle {
    width: 42px !important;
    height: 38px !important;
  }

  .theme-menu-v12 .theme-quick-icon {
    width: 23px !important;
    height: 23px !important;
    font-size: 14px !important;
  }

  .theme-menu-v12 .theme-menu-panel {
    position: absolute !important;
    top: 50px !important;
    right: 0 !important;
    left: auto !important;
    min-width: 215px !important;
    max-width: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
}

/* Mobile: place Mode beside Sound from main layer */
@media (max-width: 768px) {
  .theme-menu-v12 {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 9999 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .sound-switch {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 100px !important;
    z-index: 9998 !important;
  }

  /* Slightly larger mobile nav labels */
  .nav-num {
    font-size: 5.9px !important;
    letter-spacing: .12em !important;
  }

  .nav-label {
    font-size: 6.35px !important;
    letter-spacing: .095em !important;
  }

  .nav a {
    min-height: 41px !important;
  }

  /*
    No floating Back to Top button.
    Re-tap the active top nav item to return to the top of that section.
  */
  .back-top-mobile {
    display: none !important;
  }

  .mobile-footer-home {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 20 !important;
  }
}

@media (max-width: 390px) {
  .nav-num {
    font-size: 5.55px !important;
  }

  .nav-label {
    font-size: 5.95px !important;
    letter-spacing: .07em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.10 — DESKTOP MODE / MOBILE READABILITY FINAL FIX */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.13 — MOBILE MODE HEADER ALIGNMENT + MODAL HIDE FIX */

/*
  Mobile repair after CMV_24.11.12:
  - Use the CMV_24.11.10 mobile-header geometry again.
  - Keep only ONE Mode menu in the HTML.
  - Keep Desktop Mode layout unchanged through the existing desktop fixed-position rules.
  - Hide Sound + Mode while the Archive modal is open so they do not cover CLOSE.
*/
@media (max-width: 768px) {
  .sidebar-footer-v12 {
    display: contents !important;
  }

  .sidebar-footer-v12 .sound-switch {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 104px !important;
    height: 31px !important;
    min-height: 31px !important;
    display: grid !important;
    grid-template-columns: 15px 1fr 24px !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 3px !important;
    padding: 0 5px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    z-index: 230 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .sidebar-footer-v12 .theme-menu-v12 {
    position: relative !important;
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 230 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .sidebar-footer-v12 .theme-menu-v12 .menu-slider-shell {
    display: flex !important;
    align-items: center !important;
    height: 31px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    transform: none !important;
    transform-origin: right top !important;
  }

  .sidebar-footer-v12 .theme-menu-v12 .theme-menu-button {
    min-width: 47px !important;
    height: 31px !important;
    padding: 0 7px !important;
    font-size: 6.1px !important;
    letter-spacing: .12em !important;
  }

  .sidebar-footer-v12 .theme-menu-v12 .theme-quick-toggle {
    width: 31px !important;
    height: 31px !important;
  }

  .sidebar-footer-v12 .theme-menu-v12 .theme-quick-icon {
    width: 19px !important;
    height: 19px !important;
    font-size: 12px !important;
  }

  .sidebar-footer-v12 .theme-menu-v12 .theme-menu-panel {
    position: absolute !important;
    top: 39px !important;
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 150px !important;
    z-index: 260 !important;
  }

  body.archive-modal-open .sidebar-footer-v12 .sound-switch,
  body.archive-modal-open .sidebar-footer-v12 .theme-menu-v12 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 390px) {
  .sidebar-footer-v12 .sound-switch {
    width: 98px !important;
    grid-template-columns: 14px 1fr 22px !important;
    gap: 2px !important;
    padding: 0 5px !important;
  }

  .sidebar-footer-v12 .theme-menu-v12 .theme-menu-button {
    min-width: 45px !important;
    padding: 0 6px !important;
    font-size: 6px !important;
    letter-spacing: .10em !important;
  }

  .sidebar-footer-v12 .theme-menu-v12 .theme-quick-toggle {
    width: 31px !important;
    height: 31px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.13 — MOBILE MODE HEADER ALIGNMENT + MODAL HIDE FIX */


/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.14 — DESKTOP MODE MENU RIGHT DOCK RESTORE */

/*
  Desktop-only repair after CMV_24.11.13:
  The Mode menu was moved back into sidebar-footer-v12 to fix mobile alignment.
  On desktop, that placed the fixed control inside the blurred sidebar context,
  making it shift left again. JS now docks the same single Mode menu to <body>
  on desktop only, and this CSS restores the top-right desktop position.

  Mobile is intentionally untouched.
*/
@media (min-width: 769px) {
  body > .theme-menu-v12.theme-menu-desktop-docked {
    position: fixed !important;
    top: 76px !important;
    right: 34px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 9999 !important;
    display: grid !important;
    justify-items: end !important;
    width: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body > .theme-menu-v12.theme-menu-desktop-docked .menu-slider-shell {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    transform: none !important;
    transform-origin: right top !important;
  }

  body > .theme-menu-v12.theme-menu-desktop-docked .theme-menu-button {
    min-width: 82px !important;
    height: 38px !important;
    padding: 0 18px 0 20px !important;
    font-size: 8px !important;
    letter-spacing: .36em !important;
  }

  body > .theme-menu-v12.theme-menu-desktop-docked .theme-quick-toggle {
    width: 42px !important;
    height: 38px !important;
  }

  body > .theme-menu-v12.theme-menu-desktop-docked .theme-quick-icon {
    width: 23px !important;
    height: 23px !important;
    font-size: 14px !important;
  }

  body > .theme-menu-v12.theme-menu-desktop-docked .theme-menu-panel {
    position: absolute !important;
    top: 50px !important;
    right: 0 !important;
    left: auto !important;
    min-width: 215px !important;
    max-width: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.14 — DESKTOP MODE MENU RIGHT DOCK RESTORE */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.15 — DESKTOP MODE MENU BODY DOCK FINAL SAFETY */

/*
  Safety layer for CMV_24.11.15.
  This only applies after JS has moved #themeMenu directly under <body>.
  Mobile remains untouched because this is min-width: 769px only.
*/
@media (min-width: 769px) {
  body > #themeMenu.theme-menu-v12.theme-menu-desktop-docked {
    position: fixed !important;
    top: 76px !important;
    right: 34px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 9999 !important;
    display: grid !important;
    justify-items: end !important;
    width: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.15 — DESKTOP MODE MENU BODY DOCK FINAL SAFETY */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.16 — MODE / ARCHIVE MODAL CONTROL LOCK */

/*
  Safety lock after CMV_24.11.15:
  - Keeps the fixed desktop Mode menu from appearing over Archive modal controls.
  - Keeps mobile Sound + Mode hidden while Archive modal is open.
  - Does not change normal desktop or mobile positioning.
*/

@media (min-width: 769px) {
  body.archive-modal-open > #themeMenu.theme-menu-v12.theme-menu-desktop-docked {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 768px) {
  body.archive-modal-open #themeMenu.theme-menu-v12,
  body.archive-modal-open #soundToggle.sound-switch {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.16 — MODE / ARCHIVE MODAL CONTROL LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.17 — MOBILE FINAL SPACING QA */

/*
  Mobile-only spacing QA after CMV_24.11.16.

  Purpose:
  - Reduce extra mobile bottom whitespace.
  - Keep section spacing cleaner.
  - Tighten mobile footer identity spacing.
  - Preserve the working Sound + Mode control system.
  - Preserve desktop layout completely.

  Do not add Mode/Sound positioning here.
*/

@media (max-width: 768px) {
  body.cmv-mobile-pages {
    padding-bottom: 0 !important;
  }

  body.cmv-mobile-pages .main {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.cmv-mobile-pages .screen {
    min-height: auto !important;
  }

  body.cmv-mobile-pages .screen.active {
    min-height: calc(100svh - 112px) !important;
  }

  body.cmv-mobile-pages .home.screen.active {
    padding-top: 24px !important;
    padding-bottom: 30px !important;
  }

  body.cmv-mobile-pages .portfolio.screen.active,
  body.cmv-mobile-pages .archive.screen.active,
  body.cmv-mobile-pages .info-screen.screen.active {
    padding-top: 34px !important;
    padding-bottom: 30px !important;
  }

  body.cmv-mobile-pages .section-title {
    margin-bottom: 18px !important;
  }

  body.cmv-mobile-pages .portfolio-copy {
    margin-bottom: 24px !important;
  }

  body.cmv-mobile-pages .soon-grid,
  body.cmv-mobile-pages .archive-system,
  body.cmv-mobile-pages .booking-panel {
    margin-bottom: 18px !important;
  }

  body.cmv-mobile-pages .archive-directory {
    padding-bottom: 10px !important;
  }

  body.cmv-mobile-pages .mobile-identity-footer {
    margin-top: 10px !important;
    margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    padding-top: 10px !important;
    gap: 5px !important;
  }

  body.cmv-mobile-pages .mobile-footer-home {
    min-height: 30px !important;
    margin-bottom: 3px !important;
    padding: 0 13px !important;
  }

  body.cmv-mobile-pages .mobile-footer-socials {
    gap: 12px !important;
  }

  body.cmv-mobile-pages .mobile-footer-rights {
    gap: 5px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 768px) and (max-height: 720px) {
  body.cmv-mobile-pages .nav a {
    min-height: 37px !important;
  }

  body.cmv-mobile-pages .home.screen.active {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }

  body.cmv-mobile-pages .portfolio.screen.active,
  body.cmv-mobile-pages .archive.screen.active,
  body.cmv-mobile-pages .info-screen.screen.active {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }

  body.cmv-mobile-pages .mobile-identity-footer {
    margin-top: 8px !important;
    padding-top: 8px !important;
    gap: 4px !important;
  }
}

@media (max-width: 390px) {
  body.cmv-mobile-pages .portfolio.screen.active,
  body.cmv-mobile-pages .archive.screen.active,
  body.cmv-mobile-pages .info-screen.screen.active {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.cmv-mobile-pages .mobile-footer-socials {
    gap: 10px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.17 — MOBILE FINAL SPACING QA */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.18 — THEME READABILITY POLISH */

/*
  Visual-only theme polish after CMV_24.11.17.

  Purpose:
  - Improve Light / Beige / Dark readability.
  - Strengthen card, modal, dropdown, and control contrast.
  - Keep the existing layout and Mode/Sound positioning untouched.
  - Keep Archive 005, Portfolio TILE/WIDE, and Archive LIST/GRID/LARGE/XL untouched.
*/


/* LIGHT MODE — CLEAN DEFAULT READABILITY */
body:not(.theme-night):not(.theme-beige) .soon-grid div,
body:not(.theme-night):not(.theme-beige) .info-grid div,
body:not(.theme-night):not(.theme-beige) .archive-dossier,
body:not(.theme-night):not(.theme-beige) .booking-panel,
body:not(.theme-night):not(.theme-beige) .coming-soon-panel,
body:not(.theme-night):not(.theme-beige) .modal-panel {
  border-color: rgba(0,0,0,.13) !important;
  background-color: rgba(255,255,255,.58) !important;
}

body:not(.theme-night):not(.theme-beige) .portfolio-copy,
body:not(.theme-night):not(.theme-beige) .archive-info p,
body:not(.theme-night):not(.theme-beige) .detail-block p,
body:not(.theme-night):not(.theme-beige) .modal p,
body:not(.theme-night):not(.theme-beige) .soon-grid small,
body:not(.theme-night):not(.theme-beige) .info-grid small {
  color: rgba(16,16,16,.68) !important;
}

body:not(.theme-night):not(.theme-beige) .theme-menu-v12 .theme-menu-panel {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(0,0,0,.14) !important;
}

body:not(.theme-night):not(.theme-beige) .theme-menu-v12 .theme-option,
body:not(.theme-night):not(.theme-beige) .theme-menu-v12 .theme-option-label,
body:not(.theme-night):not(.theme-beige) .theme-menu-v12 .theme-option-icon {
  color: rgba(10,10,10,.90) !important;
}


/* BEIGE MODE — WARM BUT READABLE */
body.theme-beige .soon-grid div,
body.theme-beige .info-grid div,
body.theme-beige .archive-dossier,
body.theme-beige .booking-panel,
body.theme-beige .coming-soon-panel,
body.theme-beige .modal-panel {
  background: rgba(255,248,235,.66) !important;
  border-color: rgba(74,49,29,.20) !important;
}

body.theme-beige .portfolio-copy,
body.theme-beige .archive-info p,
body.theme-beige .detail-block p,
body.theme-beige .modal p,
body.theme-beige .soon-grid small,
body.theme-beige .info-grid small,
body.theme-beige .mobile-footer-rights {
  color: rgba(39,28,18,.68) !important;
}

body.theme-beige .soon-grid strong,
body.theme-beige .info-grid strong,
body.theme-beige .archive-info h3,
body.theme-beige .section-title,
body.theme-beige .hero-title h1 {
  color: rgba(20,16,12,.94) !important;
}

body.theme-beige .theme-menu-v12 .theme-menu-panel {
  background: rgba(255,248,235,.96) !important;
  border-color: rgba(74,49,29,.20) !important;
}

body.theme-beige .theme-menu-v12 .theme-option,
body.theme-beige .theme-menu-v12 .theme-option-label,
body.theme-beige .theme-menu-v12 .theme-option-icon {
  color: rgba(23,18,12,.90) !important;
}

body.theme-beige .theme-menu-v12 .theme-option.active,
body.theme-beige .theme-menu-v12 .theme-option:hover,
body.theme-beige .theme-menu-v12 .theme-option.active .theme-option-label,
body.theme-beige .theme-menu-v12 .theme-option:hover .theme-option-label,
body.theme-beige .theme-menu-v12 .theme-option.active .theme-option-icon,
body.theme-beige .theme-menu-v12 .theme-option:hover .theme-option-icon {
  color: var(--red) !important;
}


/* DARK MODE — STRONGER TEXT + BORDER VISIBILITY */
body.theme-night .soon-grid div,
body.theme-night .info-grid div,
body.theme-night .archive-dossier,
body.theme-night .booking-panel,
body.theme-night .coming-soon-panel,
body.theme-night .modal-panel {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.16) !important;
}

body.theme-night .portfolio-copy,
body.theme-night .archive-info p,
body.theme-night .detail-block p,
body.theme-night .modal p,
body.theme-night .soon-grid small,
body.theme-night .info-grid small,
body.theme-night .mobile-footer-rights {
  color: rgba(245,245,240,.70) !important;
}

body.theme-night .soon-grid strong,
body.theme-night .info-grid strong,
body.theme-night .archive-info h3,
body.theme-night .section-title,
body.theme-night .hero-title h1 {
  color: rgba(248,248,245,.96) !important;
}

body.theme-night .nav a {
  color: rgba(248,248,245,.78) !important;
}

body.theme-night .nav a.active,
body.theme-night .nav a:hover {
  color: var(--red) !important;
}

body.theme-night .theme-menu-v12 .theme-menu-panel {
  background: rgba(8,8,8,.97) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.44) !important;
}

body.theme-night .theme-menu-v12 .theme-option,
body.theme-night .theme-menu-v12 .theme-option-label,
body.theme-night .theme-menu-v12 .theme-option-icon {
  color: rgba(255,255,255,.90) !important;
}

body.theme-night .theme-menu-v12 .theme-option.active,
body.theme-night .theme-menu-v12 .theme-option:hover,
body.theme-night .theme-menu-v12 .theme-option.active .theme-option-label,
body.theme-night .theme-menu-v12 .theme-option:hover .theme-option-label,
body.theme-night .theme-menu-v12 .theme-option.active .theme-option-icon,
body.theme-night .theme-menu-v12 .theme-option:hover .theme-option-icon {
  color: var(--red) !important;
}

body.theme-night .menu-slider-shell,
body.theme-night .sound-switch,
body.theme-night .archive-system-status-v12,
body.theme-night .archive-view-toggle-v12,
body.theme-night .portfolio-view-toggle {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.17) !important;
}

body.theme-night .view-btn,
body.theme-night .portfolio-view-btn,
body.theme-night .theme-menu-button,
body.theme-night .theme-quick-toggle,
body.theme-night .close,
body.theme-night .back-home {
  color: rgba(248,248,245,.92) !important;
  border-color: rgba(255,255,255,.18) !important;
}


/* ACTIVE RED DOT — CONSISTENT IN ALL THEMES */
.theme-menu-v12 .theme-option.active .theme-option-dot {
  opacity: 1 !important;
  transform: scale(1.12) !important;
  box-shadow:
    0 0 0 4px rgba(227,34,34,.10),
    0 0 18px rgba(227,34,34,.76) !important;
}

body.theme-night .theme-menu-v12 .theme-option.active .theme-option-dot {
  box-shadow:
    0 0 0 4px rgba(227,34,34,.16),
    0 0 20px rgba(227,34,34,.88) !important;
}


/* MOBILE THEME READABILITY SAFETY */
@media (max-width: 768px) {
  body.theme-night .section-title,
  body.theme-night .soon-grid strong,
  body.theme-night .info-grid strong,
  body.theme-night .archive-info h3 {
    color: rgba(248,248,245,.96) !important;
  }

  body.theme-night .portfolio-copy,
  body.theme-night .archive-info p,
  body.theme-night .modal p,
  body.theme-night .detail-block p {
    color: rgba(248,248,245,.72) !important;
  }

  body.theme-beige .portfolio-copy,
  body.theme-beige .archive-info p,
  body.theme-beige .modal p,
  body.theme-beige .detail-block p {
    color: rgba(39,28,18,.70) !important;
  }

  body.theme-beige .mobile-footer-socials a,
  body.theme-beige .mobile-footer-socials span,
  body.theme-beige .mobile-footer-ig,
  body.theme-beige .mobile-footer-rights {
    color: rgba(23,18,12,.66) !important;
  }

  body.theme-night .mobile-footer-socials a,
  body.theme-night .mobile-footer-socials span,
  body.theme-night .mobile-footer-ig,
  body.theme-night .mobile-footer-rights {
    color: rgba(248,248,245,.68) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.18 — THEME READABILITY POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.19 — MODAL / ARCHIVE QA PASS */

/*
  Archive modal QA pass after CMV_24.11.18.

  Purpose:
  - Keep Archive modal above all normal page controls.
  - Keep CLOSE button unobstructed on desktop and mobile.
  - Prevent background page scrolling while Archive modal is open.
  - Improve modal panel scrolling on small screens.
  - Preserve Archive 005 lock/cipher logic.
  - Preserve Mode/Sound logic and positioning.
*/


/* GLOBAL MODAL SAFETY */
body.archive-modal-open {
  overflow: hidden !important;
}

#modal.open.modal-v12 {
  z-index: 5000 !important;
  overscroll-behavior: contain !important;
}

#modal.open .close {
  z-index: 5020 !important;
  pointer-events: auto !important;
  min-width: 70px !important;
  min-height: 38px !important;
  display: inline-grid !important;
  place-items: center !important;
}

#modal.open .archive-modal-panel-v12,
#modal.open .archive-modal-panel,
#modal.open .modal-panel {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}


/* DESKTOP MODAL QA */
@media (min-width: 769px) {
  #modal.open.modal-v12 {
    padding: 72px 34px 46px !important;
    box-sizing: border-box !important;
  }

  #modal.open .archive-modal-panel-v12,
  #modal.open .archive-modal-panel,
  #modal.open .modal-panel {
    max-height: calc(100svh - 128px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #modal.open .close {
    top: 34px !important;
    right: 38px !important;
  }
}


/* MOBILE MODAL QA */
@media (max-width: 768px) {
  #modal.open.modal-v12 {
    width: 100vw !important;
    height: 100svh !important;
    max-height: 100svh !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
    padding-right: 14px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px) !important;
    padding-left: 14px !important;
    align-items: flex-start !important;
    justify-items: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #modal.open .archive-modal-panel-v12,
  #modal.open .archive-modal-panel,
  #modal.open .modal-panel {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding-top: 22px !important;
    padding-right: 0 !important;
    padding-bottom: 28px !important;
    padding-left: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #modal.open .close {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 14px !important;
    min-width: 74px !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
    border-radius: 999px !important;
    background: rgba(245,245,242,.88) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(0,0,0,.14) !important;
  }

  body.theme-night #modal.open .close {
    background: rgba(0,0,0,.78) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: rgba(248,248,245,.94) !important;
  }

  body.theme-beige #modal.open .close {
    background: rgba(255,248,235,.92) !important;
    border-color: rgba(74,49,29,.20) !important;
    color: rgba(23,18,12,.90) !important;
  }

  #modal.open .archive-access-panel,
  #modal.open .archive-detail-box,
  #modal.open .archive-restricted-box-v12,
  #modal.open .archive-lock-box-v12 {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #modal.open .archive-video-frame-v12,
  #modal.open .archive-video-frame-v14p2 {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* SMALL MOBILE MODAL QA */
@media (max-width: 390px) {
  #modal.open.modal-v12 {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  #modal.open .close {
    right: 12px !important;
    min-width: 70px !important;
    min-height: 36px !important;
    font-size: 6.7px !important;
  }

  #modal.open #modalTitle {
    font-size: clamp(19px, 6vw, 24px) !important;
    letter-spacing: .13em !important;
  }
}


/* 🟥 RED HIGHLIGHT END: CMV_24.11.19 — MODAL / ARCHIVE QA PASS */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.19.1 — ARCHIVE MODAL EXPANSION + FULLSCREEN CONTROL */

/*
  Repair after CMV_24.11.19:
  - Expand Archive modal frame.
  - Remove bottom horizontal scrollbar.
  - Give video / lock / access content more room.
  - Add visual fullscreen mode.
  - Keep CLOSE rounded during close fade-out.
*/


/* CLOSE BUTTON — STAYS ROUNDED EVEN DURING MODAL FADE-OUT */
.modal-v12 .archive-close-v12 {
  position: fixed !important;
  z-index: 5020 !important;
  min-width: 74px !important;
  min-height: 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(245,245,242,.88) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  pointer-events: auto !important;
}

body.theme-night .modal-v12 .archive-close-v12 {
  background: rgba(0,0,0,.78) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(248,248,245,.94) !important;
}

body.theme-beige .modal-v12 .archive-close-v12 {
  background: rgba(255,248,235,.92) !important;
  border-color: rgba(74,49,29,.20) !important;
  color: rgba(23,18,12,.90) !important;
}


/* FULLSCREEN BUTTON */
.archive-fullscreen-toggle {
  position: fixed;
  z-index: 5020;
  min-height: 38px;
  padding: 0 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(245,245,242,.88);
  backdrop-filter: blur(14px);
  color: #111;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
}

.archive-fullscreen-toggle:hover {
  color: var(--red);
  border-color: rgba(227,34,34,.38);
}

body.theme-night .archive-fullscreen-toggle {
  background: rgba(0,0,0,.78);
  border-color: rgba(255,255,255,.18);
  color: rgba(248,248,245,.94);
}

body.theme-night .archive-fullscreen-toggle:hover {
  color: var(--red);
}

body.theme-beige .archive-fullscreen-toggle {
  background: rgba(255,248,235,.92);
  border-color: rgba(74,49,29,.20);
  color: rgba(23,18,12,.90);
}


/* DESKTOP — BIGGER ARCHIVE MODAL BOX */
@media (min-width: 769px) {
  #modal.open.modal-v12 {
    padding: 58px 38px 42px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #modal.open .archive-modal-panel-v12,
  #modal.open .archive-modal-panel,
  #modal.open .modal-panel {
    width: min(1500px, calc(100vw - 96px)) !important;
    max-width: 1500px !important;
    max-height: calc(100svh - 104px) !important;
    grid-template-columns: minmax(360px, 430px) minmax(760px, 1fr) !important;
    gap: clamp(36px, 4vw, 64px) !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 6px 24px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #modal.open .archive-access-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #modal.open #modalTitle {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(30px, 2.7vw, 42px) !important;
    letter-spacing: .34em !important;
    line-height: 1.35 !important;
  }

  #modal.open .archive-video-frame-v14p2,
  #modal.open .archive-video-frame-v12 {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    transform: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #modal.open .archive-video-frame-v14p2 .archive-dynamic-preview,
  #modal.open .archive-video-frame-v14p2 .palindrome-cipher {
    inset: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #modal.open .archive-close-v12 {
    top: 34px !important;
    right: 38px !important;
  }

  #modal.open .archive-fullscreen-toggle {
    top: 34px !important;
    right: 126px !important;
  }
}


/* DESKTOP FULLSCREEN MODE */
@media (min-width: 769px) {
  #modal.open.archive-fullscreen-active.modal-v12 {
    padding: 40px 28px 30px !important;
  }

  #modal.open.archive-fullscreen-active .archive-modal-panel-v12,
  #modal.open.archive-fullscreen-active .archive-modal-panel,
  #modal.open.archive-fullscreen-active .modal-panel {
    width: min(1700px, calc(100vw - 56px)) !important;
    max-width: 1700px !important;
    max-height: calc(100svh - 72px) !important;
    grid-template-columns: minmax(380px, 470px) minmax(680px, 1fr) !important;
    gap: clamp(38px, 4vw, 72px) !important;
  }

  #modal.open.archive-fullscreen-active .archive-video-frame-v14p2,
  #modal.open.archive-fullscreen-active .archive-video-frame-v12 {
    width: 100% !important;
    max-width: none !important;
  }
}


/* MOBILE — KEEP MODAL FULL-WIDTH BUT CLEAN */
@media (max-width: 768px) {
  #modal.open.modal-v12 {
    width: 100vw !important;
    height: 100svh !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
    padding-right: 10px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    padding-left: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #modal.open .archive-modal-panel-v12,
  #modal.open .archive-modal-panel,
  #modal.open .modal-panel {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    max-height: none !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px 0 26px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

  #modal.open .archive-video-frame-v14p2,
  #modal.open .archive-video-frame-v12 {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    justify-self: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #modal.open .archive-close-v12 {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 14px !important;
  }

  #modal.open .archive-fullscreen-toggle {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    left: 14px !important;
    right: auto !important;
    min-width: 98px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 6.8px !important;
    letter-spacing: .14em !important;
  }

  #modal.open.archive-fullscreen-active .archive-modal-panel-v12,
  #modal.open.archive-fullscreen-active .archive-modal-panel,
  #modal.open.archive-fullscreen-active .modal-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* SMALL MOBILE */
@media (max-width: 390px) {
  #modal.open.modal-v12 {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  #modal.open .archive-fullscreen-toggle {
    left: 12px !important;
    min-width: 88px !important;
    font-size: 6.4px !important;
    letter-spacing: .11em !important;
  }

  #modal.open .archive-close-v12 {
    right: 12px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.19.1 — ARCHIVE MODAL EXPANSION + FULLSCREEN CONTROL */
/* 🟩 GREEN HIGHLIGHT START: CMV TEST — REAL ARCHIVE VIDEO PLAYER */

/*
  Test-only real video player for Archive 003 / Daylight Motion.
  This does not change Archive 005 lock/cipher behavior.
*/

.archive-real-video {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  background: #000;
  border: 0;
}

.archive-video-frame.has-real-video .archive-real-video {
  display: block;
}

.archive-video-frame.has-real-video .archive-dynamic-preview {
  display: none !important;
}

.archive-video-frame.has-real-video .palindrome-cipher {
  display: none !important;
}

@media (max-width: 768px) {
  .archive-real-video {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    object-fit: cover;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV TEST — REAL ARCHIVE VIDEO PLAYER */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.20 — CONTACT / FOOTER FINAL POLISH */

/*
  Contact / footer polish after CMV_24.11.19.2.

  Purpose:
  - Make Contact feel more finished and premium.
  - Improve email / Instagram readability.
  - Tighten booking panel spacing.
  - Improve booking button behavior.
  - Refine mobile footer identity.
  - Preserve Archive video player test/system.
  - Preserve Mode/Sound logic and positioning.
*/


/* CONTACT SECTION — FINAL WIDTH + SPACING */
#contact.info-screen {
  box-sizing: border-box !important;
}

#contact .portfolio-copy {
  max-width: 760px !important;
  line-height: 2.05 !important;
}


/* CONTACT DIRECT LINES */
#contact .contact-line {
  width: min(760px, 100%) !important;
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 22px !important;
  padding: 18px 22px !important;
  border: 1px solid rgba(0,0,0,.115) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.22)),
    radial-gradient(circle at 100% 50%, rgba(227,34,34,.075), transparent 34%) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.055) !important;
  box-sizing: border-box !important;
}

#contact .contact-line + .contact-line {
  margin-top: 12px !important;
}

#contact .contact-line span {
  color: var(--red) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .34em !important;
  text-transform: uppercase !important;
}

#contact .contact-line strong {
  min-width: 0 !important;
  color: rgba(12,12,12,.92) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  line-height: 1.6 !important;
  text-transform: uppercase !important;
}

#contact .contact-line strong a {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-decoration: none !important;
}


/* BOOKING PANEL — FINAL POLISH */
#contact .booking-panel {
  width: min(800px, 100%) !important;
  margin-top: 28px !important;
  margin-bottom: 0 !important;
  padding: 30px 32px !important;
  border-radius: 0 !important;
  border-color: rgba(0,0,0,.125) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.28)),
    radial-gradient(circle at 95% 8%, rgba(227,34,34,.11), transparent 34%) !important;
  box-shadow:
    0 24px 72px rgba(0,0,0,.075),
    inset 0 1px 0 rgba(255,255,255,.50) !important;
}

#contact .booking-panel-header {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

#contact .booking-panel-header span {
  font-size: 8px !important;
  letter-spacing: .40em !important;
}

#contact .booking-panel-header strong {
  font-size: clamp(14px, 1.15vw, 18px) !important;
  letter-spacing: .32em !important;
  line-height: 1.55 !important;
}

#contact .booking-panel p {
  max-width: 690px !important;
  margin-bottom: 22px !important;
  color: rgba(20,20,20,.66) !important;
  font-size: 9px !important;
  line-height: 2.05 !important;
  letter-spacing: .28em !important;
}

#contact .booking-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}

#contact .booking-list span {
  min-height: 52px !important;
  padding: 11px 10px !important;
  border-color: rgba(0,0,0,.105) !important;
  background: rgba(255,255,255,.38) !important;
  font-size: 6.8px !important;
  letter-spacing: .20em !important;
}

#contact .booking-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

#contact .booking-button {
  min-height: 44px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  font-size: 7.4px !important;
  letter-spacing: .26em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#contact .booking-button:hover,
#contact .booking-button:focus-visible {
  transform: translateY(-2px) !important;
}

#contact .booking-button:focus-visible {
  outline: 1px solid rgba(227,34,34,.70) !important;
  outline-offset: 4px !important;
}


/* DESKTOP SIDEBAR FOOTER — FINAL IDENTITY POLISH */
@media (min-width: 769px) {
  .sidebar-footer-v12 {
    gap: 14px !important;
  }

  .socials-v12 {
    gap: 13px !important;
  }

  .socials-v12 a,
  .socials-v12 span {
    width: 22px !important;
    height: 22px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.26) !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .socials-v12 a:hover,
  .socials-v12 span:hover {
    border-color: rgba(227,34,34,.42) !important;
    color: var(--red) !important;
    transform: translateY(-1px) !important;
  }

  .ig-link-v12 {
    line-height: 1.45 !important;
    opacity: .72 !important;
  }

  .ig-link-v12:hover {
    opacity: 1 !important;
  }
}


/* MOBILE CONTACT — CLEANER STACK */
@media (max-width: 768px) {
  #contact.info-screen.screen.active {
    padding-bottom: 26px !important;
  }

  #contact .portfolio-copy {
    max-width: 100% !important;
    margin-bottom: 22px !important;
    line-height: 2 !important;
  }

  #contact .contact-line {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 15px 16px !important;
  }

  #contact .contact-line-primary {
    margin-top: 26px !important;
  }

  #contact .contact-line span {
    font-size: 6.7px !important;
    letter-spacing: .30em !important;
  }

  #contact .contact-line strong {
    font-size: 9.2px !important;
    letter-spacing: .12em !important;
    line-height: 1.75 !important;
  }

  #contact .booking-panel {
    margin-top: 22px !important;
    padding: 20px 16px !important;
    width: 100% !important;
  }

  #contact .booking-panel-header {
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  #contact .booking-panel-header span {
    font-size: 6.7px !important;
    letter-spacing: .28em !important;
  }

  #contact .booking-panel-header strong {
    font-size: 12px !important;
    letter-spacing: .20em !important;
    line-height: 1.6 !important;
  }

  #contact .booking-panel p {
    margin-bottom: 18px !important;
    font-size: 7.4px !important;
    line-height: 2 !important;
    letter-spacing: .17em !important;
  }

  #contact .booking-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }

  #contact .booking-list span {
    min-height: 46px !important;
    padding: 10px 8px !important;
    font-size: 6.2px !important;
    letter-spacing: .13em !important;
  }

  #contact .booking-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #contact .booking-button {
    width: 100% !important;
    min-height: 44px !important;
    white-space: normal !important;
    font-size: 6.8px !important;
    letter-spacing: .19em !important;
    line-height: 1.45 !important;
  }
}


/* MOBILE FOOTER — FINAL IDENTITY POLISH */
@media (max-width: 768px) {
  body.cmv-mobile-pages .mobile-identity-footer {
    width: calc(100% - 32px) !important;
    max-width: 360px !important;
    margin-top: 8px !important;
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    padding-top: 10px !important;
    gap: 5px !important;
  }

  body.cmv-mobile-pages .mobile-footer-home {
    min-height: 30px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 6.15px !important;
    letter-spacing: .18em !important;
  }

  body.cmv-mobile-pages .mobile-footer-socials {
    gap: 11px !important;
  }

  body.cmv-mobile-pages .mobile-footer-socials a,
  body.cmv-mobile-pages .mobile-footer-socials span {
    width: 22px !important;
    height: 22px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.25) !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  body.cmv-mobile-pages .mobile-footer-socials a:hover,
  body.cmv-mobile-pages .mobile-footer-socials span:hover {
    border-color: rgba(227,34,34,.42) !important;
    color: var(--red) !important;
  }

  body.cmv-mobile-pages .mobile-footer-ig {
    font-size: 5.4px !important;
    letter-spacing: .13em !important;
    line-height: 1.45 !important;
    opacity: .72 !important;
  }

  body.cmv-mobile-pages .mobile-footer-ig:hover {
    opacity: 1 !important;
    color: var(--red) !important;
  }

  body.cmv-mobile-pages .mobile-footer-rights {
    gap: 4px !important;
    font-size: 5.3px !important;
    letter-spacing: .12em !important;
    line-height: 1.25 !important;
    opacity: .66 !important;
  }
}


/* SMALL MOBILE SAFETY */
@media (max-width: 390px) {
  #contact .contact-line {
    padding: 14px 14px !important;
  }

  #contact .contact-line strong {
    font-size: 8.7px !important;
    letter-spacing: .09em !important;
  }

  #contact .booking-panel {
    padding: 18px 14px !important;
  }

  #contact .booking-list span {
    font-size: 5.9px !important;
    letter-spacing: .105em !important;
  }

  body.cmv-mobile-pages .mobile-identity-footer {
    width: calc(100% - 28px) !important;
  }

  body.cmv-mobile-pages .mobile-footer-socials {
    gap: 9px !important;
  }
}


/* THEME SAFETY — CONTACT / FOOTER */
body.theme-night #contact .contact-line {
  border-color: rgba(255,255,255,.15) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    radial-gradient(circle at 100% 50%, rgba(227,34,34,.13), transparent 36%) !important;
  box-shadow: 0 18px 56px rgba(0,0,0,.22) !important;
}

body.theme-night #contact .contact-line strong,
body.theme-night #contact .contact-line strong a {
  color: rgba(248,248,245,.92) !important;
}

body.theme-night #contact .booking-panel {
  border-color: rgba(255,255,255,.15) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    radial-gradient(circle at 95% 8%, rgba(227,34,34,.15), transparent 34%) !important;
}

body.theme-night #contact .booking-panel p,
body.theme-night #contact .booking-list span {
  color: rgba(248,248,245,.68) !important;
}

body.theme-night #contact .booking-list span {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.045) !important;
}

body.theme-night .socials-v12 a,
body.theme-night .socials-v12 span,
body.theme-night .mobile-footer-socials a,
body.theme-night .mobile-footer-socials span {
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.045) !important;
}

body.theme-beige #contact .contact-line {
  border-color: rgba(74,49,29,.18) !important;
  background:
    linear-gradient(135deg, rgba(255,248,235,.70), rgba(255,248,235,.36)),
    radial-gradient(circle at 100% 50%, rgba(227,34,34,.075), transparent 36%) !important;
}

body.theme-beige #contact .contact-line strong,
body.theme-beige #contact .contact-line strong a {
  color: rgba(23,18,12,.90) !important;
}

body.theme-beige #contact .booking-panel {
  border-color: rgba(74,49,29,.18) !important;
  background:
    linear-gradient(135deg, rgba(255,248,235,.76), rgba(255,248,235,.42)),
    radial-gradient(circle at 95% 8%, rgba(227,34,34,.09), transparent 34%) !important;
}

body.theme-beige #contact .booking-panel p,
body.theme-beige #contact .booking-list span {
  color: rgba(39,28,18,.66) !important;
}

body.theme-beige #contact .booking-list span {
  border-color: rgba(74,49,29,.16) !important;
  background: rgba(255,248,235,.42) !important;
}

body.theme-beige .socials-v12 a,
body.theme-beige .socials-v12 span,
body.theme-beige .mobile-footer-socials a,
body.theme-beige .mobile-footer-socials span {
  border-color: rgba(74,49,29,.14) !important;
  background: rgba(255,248,235,.32) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.20 — CONTACT / FOOTER FINAL POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.20.1 — CONTACT DIRECT LINES REVERT + FOOTER IDENTITY CONTRAST */

/*
  REPAIR AFTER CMV_24.11.20.

  KEEP:
  - NEW CIRCULAR SOCIAL ICONS.
  - RED SOCIAL HOVER HIGHLIGHTS.
  - ROUNDED BOOKING BUTTONS.
  - UPDATED BOOKING INQUIRIES SECTION.

  REVERT:
  - CONTACT EMAIL / INSTAGRAM DIRECT LINES BACK TO THE CLEANER PREVIOUS STYLE.
  - REMOVE RECTANGULAR BOX LOOK FROM EMAIL / INSTAGRAM.
  - STOP FORCING EMAIL / INSTAGRAM VALUES INTO ALL CAPS.
  - RESTORE DARKER FOOTER IG / CONTACT ID READABILITY.
*/


/* CONTACT EMAIL / INSTAGRAM — REMOVE RECTANGULAR BOX LOOK */
#contact .contact-line {
  width: min(760px, 100%) !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(96px, 130px) minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#contact .contact-line + .contact-line {
  margin-top: 16px !important;
}

#contact .contact-line span {
  color: var(--red) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
}

#contact .contact-line strong {
  min-width: 0 !important;
  color: rgba(12,12,12,.82) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  line-height: 1.65 !important;
  text-transform: none !important;
}

#contact .contact-line strong a {
  color: inherit !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-decoration: none !important;
  text-transform: none !important;
}

#contact .contact-line strong a:hover {
  color: var(--red) !important;
}


/* MOBILE CONTACT DIRECT LINES — CLEAN STACK, NO BOX */
@media (max-width: 768px) {
  #contact .contact-line {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #contact .contact-line-primary {
    margin-top: 24px !important;
  }

  #contact .contact-line + .contact-line {
    margin-top: 15px !important;
  }

  #contact .contact-line span {
    font-size: 6.8px !important;
    letter-spacing: .27em !important;
  }

  #contact .contact-line strong {
    font-size: 9.4px !important;
    letter-spacing: .045em !important;
    line-height: 1.65 !important;
    text-transform: none !important;
  }

  #contact .contact-line strong a {
    text-transform: none !important;
  }
}


/* FOOTER IG / CONTACT ID — RESTORE DARKER READABILITY WHILE KEEPING CIRCULAR ICONS */
.ig-link-v12 {
  opacity: .88 !important;
  color: rgba(12,12,12,.70) !important;
}

.ig-link-v12:hover {
  opacity: 1 !important;
  color: var(--red) !important;
}

body.cmv-mobile-pages .mobile-footer-ig {
  opacity: .86 !important;
  color: rgba(12,12,12,.70) !important;
}

body.cmv-mobile-pages .mobile-footer-ig:hover {
  opacity: 1 !important;
  color: var(--red) !important;
}

body.cmv-mobile-pages .mobile-footer-rights {
  opacity: .76 !important;
  color: rgba(12,12,12,.62) !important;
}


/* DARK MODE SAFETY */
body.theme-night #contact .contact-line {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.theme-night #contact .contact-line strong,
body.theme-night #contact .contact-line strong a {
  color: rgba(248,248,245,.82) !important;
}

body.theme-night #contact .contact-line strong a:hover {
  color: var(--red) !important;
}

body.theme-night .ig-link-v12,
body.theme-night body.cmv-mobile-pages .mobile-footer-ig {
  color: rgba(248,248,245,.76) !important;
}

body.theme-night .mobile-footer-ig {
  color: rgba(248,248,245,.76) !important;
}

body.theme-night .mobile-footer-rights {
  color: rgba(248,248,245,.66) !important;
}


/* BEIGE MODE SAFETY */
body.theme-beige #contact .contact-line {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.theme-beige #contact .contact-line strong,
body.theme-beige #contact .contact-line strong a {
  color: rgba(23,18,12,.80) !important;
}

body.theme-beige #contact .contact-line strong a:hover {
  color: var(--red) !important;
}

body.theme-beige .ig-link-v12,
body.theme-beige .mobile-footer-ig {
  color: rgba(23,18,12,.68) !important;
}

body.theme-beige .mobile-footer-rights {
  color: rgba(23,18,12,.58) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.20.1 — CONTACT DIRECT LINES REVERT + FOOTER IDENTITY CONTRAST */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.20.2 — CONTACT BOX RESTORE + NATURAL CASE */

/*
  REPAIR AFTER CMV_24.11.20.1.

  PURPOSE:
  - RESTORE THE CMV_24.11.20 EMAIL / INSTAGRAM BOX STYLE.
  - KEEP THE EMAIL / INSTAGRAM VALUES NATURAL CASE / LOWERCASE.
  - KEEP THE BOOKING INQUIRIES SECTION UNCHANGED.
  - KEEP CIRCULAR FOOTER SOCIAL ICONS.
  - KEEP DARKER FOOTER IG / CONTACT ID READABILITY.
*/


/* CONTACT EMAIL / INSTAGRAM — RESTORE 24.11.20 BOX STYLE */
#contact .contact-line {
  width: min(760px, 100%) !important;
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 22px !important;
  padding: 18px 22px !important;
  border: 1px solid rgba(0,0,0,.115) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.22)),
    radial-gradient(circle at 100% 50%, rgba(227,34,34,.075), transparent 34%) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.055) !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

#contact .contact-line + .contact-line {
  margin-top: 12px !important;
}

#contact .contact-line span {
  color: var(--red) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .34em !important;
  text-transform: uppercase !important;
}

#contact .contact-line strong {
  min-width: 0 !important;
  color: rgba(12,12,12,.92) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  line-height: 1.6 !important;
  text-transform: none !important;
}

#contact .contact-line strong a {
  color: inherit !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-decoration: none !important;
  text-transform: none !important;
}

#contact .contact-line strong a:hover {
  color: var(--red) !important;
}


/* MOBILE CONTACT — RESTORE 24.11.20 BOX STYLE, KEEP NATURAL CASE */
@media (max-width: 768px) {
  #contact .contact-line {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 15px 16px !important;
    border: 1px solid rgba(0,0,0,.115) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.22)),
      radial-gradient(circle at 100% 50%, rgba(227,34,34,.075), transparent 34%) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.055) !important;
    border-radius: 0 !important;
  }

  #contact .contact-line-primary {
    margin-top: 26px !important;
  }

  #contact .contact-line + .contact-line {
    margin-top: 12px !important;
  }

  #contact .contact-line span {
    font-size: 6.7px !important;
    letter-spacing: .30em !important;
  }

  #contact .contact-line strong {
    font-size: 9.2px !important;
    letter-spacing: .12em !important;
    line-height: 1.75 !important;
    text-transform: none !important;
  }

  #contact .contact-line strong a {
    text-transform: none !important;
  }
}


/* SMALL MOBILE SAFETY */
@media (max-width: 390px) {
  #contact .contact-line {
    padding: 14px 14px !important;
  }

  #contact .contact-line strong {
    font-size: 8.7px !important;
    letter-spacing: .09em !important;
  }
}


/* DARK MODE — RESTORE BOX STYLE */
body.theme-night #contact .contact-line {
  border: 1px solid rgba(255,255,255,.15) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    radial-gradient(circle at 100% 50%, rgba(227,34,34,.13), transparent 36%) !important;
  box-shadow: 0 18px 56px rgba(0,0,0,.22) !important;
}

body.theme-night #contact .contact-line strong,
body.theme-night #contact .contact-line strong a {
  color: rgba(248,248,245,.92) !important;
  text-transform: none !important;
}

body.theme-night #contact .contact-line strong a:hover {
  color: var(--red) !important;
}


/* BEIGE MODE — RESTORE BOX STYLE */
body.theme-beige #contact .contact-line {
  border: 1px solid rgba(74,49,29,.18) !important;
  background:
    linear-gradient(135deg, rgba(255,248,235,.70), rgba(255,248,235,.36)),
    radial-gradient(circle at 100% 50%, rgba(227,34,34,.075), transparent 36%) !important;
  box-shadow: 0 16px 48px rgba(74,49,29,.055) !important;
}

body.theme-beige #contact .contact-line strong,
body.theme-beige #contact .contact-line strong a {
  color: rgba(23,18,12,.90) !important;
  text-transform: none !important;
}

body.theme-beige #contact .contact-line strong a:hover {
  color: var(--red) !important;
}


/* FOOTER IG / CONTACT ID — KEEP 24.11.20.1 DARKER READABILITY */
.ig-link-v12 {
  opacity: .88 !important;
  color: rgba(12,12,12,.70) !important;
}

.ig-link-v12:hover {
  opacity: 1 !important;
  color: var(--red) !important;
}

body.cmv-mobile-pages .mobile-footer-ig {
  opacity: .86 !important;
  color: rgba(12,12,12,.70) !important;
}

body.cmv-mobile-pages .mobile-footer-ig:hover {
  opacity: 1 !important;
  color: var(--red) !important;
}

body.cmv-mobile-pages .mobile-footer-rights {
  opacity: .76 !important;
  color: rgba(12,12,12,.62) !important;
}

body.theme-night .ig-link-v12,
body.theme-night .mobile-footer-ig {
  color: rgba(248,248,245,.76) !important;
}

body.theme-night .mobile-footer-rights {
  color: rgba(248,248,245,.66) !important;
}

body.theme-beige .ig-link-v12,
body.theme-beige .mobile-footer-ig {
  color: rgba(23,18,12,.68) !important;
}

body.theme-beige .mobile-footer-rights {
  color: rgba(23,18,12,.58) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.20.2 — CONTACT BOX RESTORE + NATURAL CASE */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.20.3 — CONTACT DIRECT LINES OLD STYLE RESTORE */

/*
  REPAIR AFTER CMV_24.11.20.2.

  PURPOSE:
  - RESTORE THE TOP EMAIL / INSTAGRAM DIRECT LINES TO THE CMV_24.11.19.2 STYLE.
  - REMOVE THE 24.11.20 / 24.11.20.2 RECTANGULAR BOX LOOK FROM EMAIL / INSTAGRAM ONLY.
  - KEEP THE BOOKING INQUIRIES SECTION FROM CMV_24.11.20 / 24.11.20.2.
  - KEEP ROUNDED BOOKING BUTTONS.
  - KEEP CIRCULAR FOOTER SOCIAL ICONS.
*/


/* CONTACT EMAIL / INSTAGRAM — RESTORE CMV_24.11.19.2 TOP STYLE */
#contact .contact-line {
  width: min(760px, 100%) !important;
  min-height: auto !important;
  margin-top: 44px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

#contact .contact-line-primary {
  margin-top: 34px !important;
}

#contact .contact-line-secondary {
  margin-top: 28px !important;
}

#contact .contact-line + .contact-line {
  margin-top: 28px !important;
}

#contact .contact-line span {
  color: var(--red) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .38em !important;
  text-transform: uppercase !important;
}

#contact .contact-line strong {
  min-width: 0 !important;
  color: rgba(12,12,12,.86) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .34em !important;
  line-height: 1.7 !important;
  text-transform: none !important;
}

#contact .contact-line strong a {
  display: inline-block !important;
  color: inherit !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition:
    color .25s ease,
    text-shadow .25s ease,
    transform .25s ease !important;
}

#contact .contact-line strong a:hover,
#contact .contact-line strong a:focus-visible,
#contact .contact-line strong a:active {
  color: var(--red) !important;
  text-shadow: 0 0 14px rgba(227,34,34,.24) !important;
  transform: translateY(-1px) !important;
}

#contact .contact-line strong a:focus-visible {
  outline: 1px solid rgba(227,34,34,.72) !important;
  outline-offset: 4px !important;
}


/* MOBILE CONTACT DIRECT LINES — RESTORE OLD STACK */
@media (max-width: 768px) {
  #contact .contact-line {
    width: min(760px, 100%) !important;
    min-height: auto !important;
    margin-top: 30px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #contact .contact-line-primary {
    margin-top: 30px !important;
  }

  #contact .contact-line-secondary,
  #contact .contact-line + .contact-line {
    margin-top: 24px !important;
  }

  #contact .contact-line span {
    font-size: 7px !important;
    letter-spacing: .20em !important;
  }

  #contact .contact-line strong {
    font-size: 10px !important;
    letter-spacing: .10em !important;
    line-height: 1.8 !important;
    text-transform: none !important;
    overflow-wrap: anywhere !important;
  }

  #contact .contact-line strong a {
    text-transform: none !important;
    overflow-wrap: anywhere !important;
  }
}


/* SMALL MOBILE SAFETY */
@media (max-width: 390px) {
  #contact .contact-line strong {
    font-size: 9.4px !important;
    letter-spacing: .085em !important;
  }
}


/* DARK MODE — OLD CONTACT STYLE, THEME-SAFE */
body.theme-night #contact .contact-line {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.theme-night #contact .contact-line strong,
body.theme-night #contact .contact-line strong a {
  color: rgba(248,248,245,.82) !important;
  text-transform: none !important;
}

body.theme-night #contact .contact-line strong a:hover,
body.theme-night #contact .contact-line strong a:focus-visible,
body.theme-night #contact .contact-line strong a:active {
  color: var(--red) !important;
  text-shadow: 0 0 16px rgba(227,34,34,.30) !important;
}


/* BEIGE MODE — OLD CONTACT STYLE, THEME-SAFE */
body.theme-beige #contact .contact-line {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.theme-beige #contact .contact-line strong,
body.theme-beige #contact .contact-line strong a {
  color: rgba(23,18,12,.82) !important;
  text-transform: none !important;
}

body.theme-beige #contact .contact-line strong a:hover,
body.theme-beige #contact .contact-line strong a:focus-visible,
body.theme-beige #contact .contact-line strong a:active {
  color: var(--red) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.20.3 — CONTACT DIRECT LINES OLD STYLE RESTORE */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.20.4 — DARK CONTACT / FOOTER CONTRAST RESTORE */

/*
  REPAIR AFTER CMV_24.11.20.3.

  PURPOSE:
  - KEEP THE CMV_24.11.20.3 CONTACT LAYOUT.
  - RESTORE THE BRIGHTER CMV_24.11.19.2 DARK-MODE CONTACT VALUE FEEL.
  - RESTORE THE BRIGHTER BOTTOM-LEFT IG / @THE_COMEBACKID FOOTER ID IN DARK MODE.
  - DO NOT TOUCH BOOKING INQUIRIES, BUTTONS, ARCHIVE, VIDEO PLAYER, MODE, OR SOUND.
*/


/* DARK MODE — TOP EMAIL / INSTAGRAM VALUES BRIGHTER */
body.theme-night #contact .contact-line strong,
body.theme-night #contact .contact-line strong a {
  color: rgba(248,248,245,.93) !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(255,255,255,.045) !important;
}

body.theme-night #contact .contact-line strong a:hover,
body.theme-night #contact .contact-line strong a:focus-visible,
body.theme-night #contact .contact-line strong a:active {
  color: var(--red) !important;
  opacity: 1 !important;
  text-shadow: 0 0 16px rgba(227,34,34,.34) !important;
}


/* DARK MODE — BOTTOM LEFT FOOTER IG / CONTACT ID BRIGHTER */
body.theme-night .ig-link-v12 {
  color: rgba(248,248,245,.88) !important;
  opacity: .96 !important;
  text-shadow: 0 0 10px rgba(255,255,255,.035) !important;
}

body.theme-night .ig-link-v12:hover {
  color: var(--red) !important;
  opacity: 1 !important;
  text-shadow: 0 0 14px rgba(227,34,34,.30) !important;
}


/* DARK MODE — MOBILE FOOTER ID MATCHES DESKTOP CONTRAST */
body.theme-night body.cmv-mobile-pages .mobile-footer-ig,
body.theme-night .mobile-footer-ig {
  color: rgba(248,248,245,.86) !important;
  opacity: .94 !important;
  text-shadow: 0 0 10px rgba(255,255,255,.03) !important;
}

body.theme-night body.cmv-mobile-pages .mobile-footer-ig:hover,
body.theme-night .mobile-footer-ig:hover {
  color: var(--red) !important;
  opacity: 1 !important;
  text-shadow: 0 0 14px rgba(227,34,34,.30) !important;
}

body.theme-night .mobile-footer-rights {
  color: rgba(248,248,245,.72) !important;
  opacity: .86 !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.20.4 — DARK CONTACT / FOOTER CONTRAST RESTORE */
/* 🟩 GREEN HIGHLIGHT START: CMV_24.11.20.5 — BOOKING INQUIRIES TYPOGRAPHY RESTORE */

/*
  REPAIR AFTER CMV_24.11.20.4.

  PURPOSE:
  - RESTORE THE BIGGER CMV_24.11.19.2 BOOKING INQUIRIES WORD SIZE.
  - KEEP THE CURRENT BOOKING PANEL STRUCTURE.
  - KEEP THE ROUNDED BOOKING BUTTONS.
  - DO NOT TOUCH CONTACT EMAIL / INSTAGRAM TOP SECTION.
  - DO NOT TOUCH FOOTER ICONS, ARCHIVE, VIDEO PLAYER, MODE, OR SOUND.
*/


/* BOOKING INQUIRIES — RESTORE OLDER LARGER TYPOGRAPHY */
#contact .booking-panel-header span {
  font-size: 9px !important;
  letter-spacing: .42em !important;
}

#contact .booking-panel-header strong {
  font-size: 17px !important;
  letter-spacing: .36em !important;
  line-height: 1.6 !important;
}

#contact .booking-panel p {
  max-width: 640px !important;
  font-size: 10px !important;
  line-height: 2 !important;
  letter-spacing: .32em !important;
  margin-bottom: 24px !important;
}

#contact .booking-list span {
  min-height: 54px !important;
  padding: 12px !important;
  font-size: 7px !important;
  letter-spacing: .24em !important;
  line-height: 1.7 !important;
}

#contact .booking-button {
  min-height: 44px !important;
  padding: 0 20px !important;
  font-size: 8px !important;
  letter-spacing: .32em !important;
  line-height: 1.45 !important;
}


/* MOBILE — RESTORE OLDER LARGER BOOKING TYPOGRAPHY */
@media (max-width: 768px) {
  #contact .booking-panel-header span {
    font-size: 7px !important;
    letter-spacing: .28em !important;
  }

  #contact .booking-panel-header strong {
    font-size: 13px !important;
    letter-spacing: .22em !important;
    line-height: 1.6 !important;
  }

  #contact .booking-panel p {
    font-size: 8px !important;
    letter-spacing: .20em !important;
    line-height: 2 !important;
  }

  #contact .booking-list span {
    min-height: 48px !important;
    font-size: 6.5px !important;
    letter-spacing: .16em !important;
    line-height: 1.7 !important;
  }

  #contact .booking-button {
    min-height: 46px !important;
    font-size: 7px !important;
    letter-spacing: .22em !important;
    line-height: 1.45 !important;
  }
}


/* SMALL MOBILE SAFETY */
@media (max-width: 390px) {
  #contact .booking-panel-header strong {
    font-size: 12.5px !important;
    letter-spacing: .20em !important;
  }

  #contact .booking-panel p {
    font-size: 7.7px !important;
    letter-spacing: .18em !important;
  }

  #contact .booking-list span {
    font-size: 6.3px !important;
    letter-spacing: .145em !important;
  }

  #contact .booking-button {
    font-size: 6.8px !important;
    letter-spacing: .20em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_24.11.20.5 — BOOKING INQUIRIES TYPOGRAPHY RESTORE */
/* 🟩 GREEN HIGHLIGHT START: CMV_25.0 — 07 WORLD MAP SECTION FOUNDATION */

/*
  CMV_25.0 PURPOSE:
  - Add 07 WORLD MAP as a new section.
  - Create a placeholder global map / globe visual system.
  - Keep this lightweight: no 3D library yet.
  - Preserve Archive, Mode/Sound, Contact, Portfolio, and existing layout.
*/


/* WORLD MAP SECTION */
.world-map .portfolio-copy {
  max-width: 820px !important;
}

.world-map-panel {
  width: min(960px, 100%) !important;
  margin-top: 38px !important;
  display: grid !important;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr) !important;
  gap: 34px !important;
  align-items: center !important;
  padding: 34px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.22)),
    radial-gradient(circle at 80% 20%, rgba(227,34,34,.09), transparent 34%) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.54) !important;
  box-sizing: border-box !important;
}

.world-map-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 330px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background:
    radial-gradient(circle at center, rgba(0,0,0,.10), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.08), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.10)) !important;
}

.world-map-orb {
  position: relative !important;
  z-index: 3 !important;
  width: 176px !important;
  height: 176px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.72), rgba(255,255,255,.20) 42%, rgba(0,0,0,.08) 100%) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.11),
    inset 0 1px 0 rgba(255,255,255,.56) !important;
}

.world-map-orb span {
  color: rgba(0,0,0,.52) !important;
  font-family: Georgia, serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -.08em !important;
}

.world-map-rings {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
}

.world-map-rings span {
  position: absolute !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

.world-map-rings span:nth-child(1) {
  width: 68% !important;
  height: 68% !important;
}

.world-map-rings span:nth-child(2) {
  width: 84% !important;
  height: 84% !important;
}

.world-map-rings span:nth-child(3) {
  width: 100% !important;
  height: 100% !important;
  border-style: dashed !important;
  opacity: .7 !important;
}

.world-map-pulse {
  position: absolute !important;
  z-index: 4 !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  box-shadow: 0 0 18px rgba(227,34,34,.58) !important;
}

.world-map-pulse-a {
  top: 34% !important;
  left: 31% !important;
}

.world-map-pulse-b {
  top: 55% !important;
  right: 28% !important;
}

.world-map-pulse-c {
  bottom: 28% !important;
  left: 47% !important;
}

.world-map-meta {
  min-width: 0 !important;
}

.world-map-meta span {
  display: block !important;
  margin-bottom: 18px !important;
  color: var(--red) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .42em !important;
  text-transform: uppercase !important;
}

.world-map-meta strong {
  display: block !important;
  margin-bottom: 22px !important;
  color: rgba(12,12,12,.92) !important;
  font-size: clamp(22px, 2.5vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: .42em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}

.world-map-meta p {
  max-width: 520px !important;
  color: rgba(20,20,20,.64) !important;
  font-size: 9px !important;
  line-height: 2.05 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
}

.world-map-list {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

.world-map-list span {
  min-height: 50px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.34) !important;
  color: rgba(20,20,20,.64) !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}


/* DARK MODE */
body.theme-night .world-map-panel {
  border-color: rgba(255,255,255,.15) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    radial-gradient(circle at 80% 20%, rgba(227,34,34,.14), transparent 34%) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.24) !important;
}

body.theme-night .world-map-frame {
  border-color: rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.12), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
}

body.theme-night .world-map-orb {
  border-color: rgba(255,255,255,.20) !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.20), rgba(255,255,255,.07) 42%, rgba(0,0,0,.55) 100%) !important;
}

body.theme-night .world-map-orb span {
  color: rgba(248,248,245,.78) !important;
}

body.theme-night .world-map-rings span {
  border-color: rgba(255,255,255,.12) !important;
}

body.theme-night .world-map-meta strong {
  color: rgba(248,248,245,.94) !important;
}

body.theme-night .world-map-meta p,
body.theme-night .world-map-list span {
  color: rgba(248,248,245,.68) !important;
}

body.theme-night .world-map-list span {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.045) !important;
}


/* BEIGE MODE */
body.theme-beige .world-map-panel {
  border-color: rgba(74,49,29,.18) !important;
  background:
    linear-gradient(135deg, rgba(255,248,235,.76), rgba(255,248,235,.42)),
    radial-gradient(circle at 80% 20%, rgba(227,34,34,.08), transparent 34%) !important;
}

body.theme-beige .world-map-frame,
body.theme-beige .world-map-list span {
  border-color: rgba(74,49,29,.14) !important;
}

body.theme-beige .world-map-meta strong {
  color: rgba(23,18,12,.92) !important;
}

body.theme-beige .world-map-meta p,
body.theme-beige .world-map-list span {
  color: rgba(39,28,18,.66) !important;
}


/* MOBILE WORLD MAP */
@media (max-width: 768px) {
  .world-map.screen.active {
    padding-top: 34px !important;
    padding-bottom: 30px !important;
  }

  .world-map .portfolio-copy {
    max-width: 100% !important;
  }

  .world-map-panel {
    width: 100% !important;
    margin-top: 28px !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 20px 16px !important;
  }

  .world-map-frame {
    min-height: 260px !important;
  }

  .world-map-orb {
    width: 140px !important;
    height: 140px !important;
  }

  .world-map-orb span {
    font-size: 28px !important;
  }

  .world-map-meta span {
    font-size: 6.8px !important;
    letter-spacing: .28em !important;
  }

  .world-map-meta strong {
    font-size: 18px !important;
    letter-spacing: .28em !important;
  }

  .world-map-meta p {
    font-size: 7.6px !important;
    letter-spacing: .18em !important;
    line-height: 2 !important;
  }

  .world-map-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .world-map-list span {
    min-height: 44px !important;
    font-size: 6.2px !important;
    letter-spacing: .14em !important;
  }
}


/* SMALL MOBILE */
@media (max-width: 390px) {
  .world-map-panel {
    padding: 18px 14px !important;
  }

  .world-map-frame {
    min-height: 230px !important;
  }

  .world-map-meta strong {
    font-size: 16px !important;
    letter-spacing: .22em !important;
  }

  .world-map-list span {
    font-size: 5.9px !important;
    letter-spacing: .12em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_25.0 — 07 WORLD MAP SECTION FOUNDATION */
/* 🟩 GREEN HIGHLIGHT START: CMV_25.0 — WORLD MAP FINAL NAV / LOCATION LABEL POLISH */

/* Keep the seventh nav item inside the real nav stack without changing existing Mode/Sound systems. */
.nav .nav-link[data-page="world-map"] .nav-label {
  letter-spacing: .30em !important;
}

.world-map-location {
  position: absolute !important;
  z-index: 6 !important;
  display: grid !important;
  gap: 4px !important;
  min-width: 118px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(255,255,255,.58) !important;
  backdrop-filter: blur(12px) !important;
  color: rgba(16,16,16,.68) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  pointer-events: auto !important;
}

.world-map-location::before {
  content: "" !important;
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  box-shadow: 0 0 16px rgba(227,34,34,.62) !important;
}

.world-map-location span {
  color: var(--red) !important;
}

.world-map-location small {
  color: inherit !important;
  font-size: 5.8px !important;
  letter-spacing: .16em !important;
}

.location-austin {
  top: 22% !important;
  left: 8% !important;
}

.location-austin::before {
  right: -14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.location-houston {
  top: 50% !important;
  right: 7% !important;
}

.location-houston::before {
  left: -14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.location-lagos {
  bottom: 18% !important;
  left: 15% !important;
}

.location-lagos::before {
  right: -14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.location-future {
  bottom: 9% !important;
  right: 10% !important;
}

.location-future::before {
  left: -14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

body.theme-night .world-map-location {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(9,9,9,.58) !important;
  color: rgba(248,248,245,.66) !important;
}

body.theme-beige .world-map-location {
  border-color: rgba(74,49,29,.16) !important;
  background: rgba(255,248,235,.66) !important;
  color: rgba(39,28,18,.66) !important;
}

@media (max-width: 768px) {
  .nav .nav-link[data-page="world-map"] .nav-label {
    letter-spacing: .07em !important;
  }

  .world-map-location {
    min-width: 92px !important;
    padding: 6px 7px !important;
    font-size: 5.7px !important;
    letter-spacing: .10em !important;
  }

  .world-map-location small {
    display: none !important;
  }

  .location-austin {
    top: 14% !important;
    left: 5% !important;
  }

  .location-houston {
    top: 42% !important;
    right: 4% !important;
  }

  .location-lagos {
    bottom: 20% !important;
    left: 7% !important;
  }

  .location-future {
    bottom: 8% !important;
    right: 5% !important;
  }
}

@media (max-width: 390px) {
  .world-map-location {
    min-width: 82px !important;
    font-size: 5.2px !important;
    letter-spacing: .07em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_25.0 — WORLD MAP FINAL NAV / LOCATION LABEL POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_25.1 — WORLD MAP ROUTE SIGNAL POLISH */

/*
  CMV_25.1 PURPOSE:
  - Add subtle route lines from the CMV orb toward future map labels.
  - Add a small system status strip under the World Map location list.
  - Preserve the CMV_25.0 foundation.
  - Do not touch Archive, Portfolio, Mode, Sound, Contact, Booking, or Footer systems.
*/

.world-map-route-lines {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.world-route {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 34% !important;
  height: 1px !important;
  transform-origin: left center !important;
  background: linear-gradient(
    90deg,
    rgba(227,34,34,.58),
    rgba(227,34,34,.24),
    rgba(227,34,34,0)
  ) !important;
  box-shadow: 0 0 14px rgba(227,34,34,.18) !important;
  opacity: .42 !important;
  animation: worldRouteSignal 4.8s ease-in-out infinite !important;
}

.world-route::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
  background: var(--red) !important;
  box-shadow: 0 0 16px rgba(227,34,34,.48) !important;
}

.world-route-austin {
  width: 32% !important;
  transform: rotate(218deg) !important;
  animation-delay: 0s !important;
}

.world-route-houston {
  width: 31% !important;
  transform: rotate(8deg) !important;
  animation-delay: .7s !important;
}

.world-route-lagos {
  width: 30% !important;
  transform: rotate(137deg) !important;
  animation-delay: 1.4s !important;
}

.world-route-future {
  width: 36% !important;
  transform: rotate(48deg) !important;
  animation-delay: 2.1s !important;
}

@keyframes worldRouteSignal {
  0%, 100% {
    opacity: .22;
  }

  50% {
    opacity: .64;
  }
}

.world-map-status-strip {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

.world-map-status-strip span {
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  background: rgba(255,255,255,.26) !important;
  color: rgba(20,20,20,.50) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.theme-night .world-route {
  background: linear-gradient(
    90deg,
    rgba(227,34,34,.72),
    rgba(227,34,34,.30),
    rgba(227,34,34,0)
  ) !important;
  box-shadow: 0 0 18px rgba(227,34,34,.22) !important;
}

body.theme-night .world-map-status-strip span {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.035) !important;
  color: rgba(248,248,245,.56) !important;
}

body.theme-beige .world-map-status-strip span {
  border-color: rgba(74,49,29,.12) !important;
  background: rgba(255,248,235,.42) !important;
  color: rgba(39,28,18,.52) !important;
}

@media (max-width: 768px) {
  .world-route {
    opacity: .22 !important;
  }

  .world-route-austin {
    width: 30% !important;
    transform: rotate(224deg) !important;
  }

  .world-route-houston {
    width: 28% !important;
    transform: rotate(4deg) !important;
  }

  .world-route-lagos {
    width: 29% !important;
    transform: rotate(142deg) !important;
  }

  .world-route-future {
    width: 32% !important;
    transform: rotate(48deg) !important;
  }

  .world-map-status-strip {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .world-map-status-strip span {
    min-height: 30px !important;
    font-size: 5.7px !important;
    letter-spacing: .16em !important;
  }
}

@media (max-width: 390px) {
  .world-map-route-lines {
    opacity: .76 !important;
  }

  .world-map-status-strip span {
    font-size: 5.2px !important;
    letter-spacing: .12em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_25.1 — WORLD MAP ROUTE SIGNAL POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_25.2 — WORLD MAP INFRARED BACKPLANE */

/*
  CMV_25.2 PURPOSE:
  - Use the existing infrared-globe-map.png asset as a subtle cinematic backplane.
  - Keep it behind the CMV orb, rings, route lines, pulses, and location labels.
  - Preserve the lightweight 2D foundation.
  - No real 3D globe yet.
*/

.world-map-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 3% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: url("assets/images/infrared-globe-map.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: .20 !important;
  filter: grayscale(1) contrast(1.15) brightness(1.18) !important;
  transform: scale(1.08) !important;
  mix-blend-mode: multiply !important;
  mask-image: radial-gradient(
    ellipse at center,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.92) 52%,
    rgba(0,0,0,.54) 67%,
    rgba(0,0,0,0) 82%
  ) !important;
  animation: worldMapBackplaneDrift 26s ease-in-out infinite !important;
}

@keyframes worldMapBackplaneDrift {
  0%, 100% {
    transform: scale(1.08) translate3d(0, 0, 0);
    opacity: .18;
  }

  50% {
    transform: scale(1.12) translate3d(1.5%, -1%, 0);
    opacity: .24;
  }
}

body.theme-night .world-map-frame::before {
  opacity: .28 !important;
  filter: grayscale(1) contrast(1.22) brightness(.95) !important;
  mix-blend-mode: screen !important;
}

body.theme-beige .world-map-frame::before {
  opacity: .18 !important;
  filter: sepia(.28) grayscale(.78) contrast(1.04) brightness(1.12) !important;
  mix-blend-mode: multiply !important;
}

@media (max-width: 768px) {
  .world-map-frame::before {
    inset: 0 !important;
    opacity: .16 !important;
    transform: scale(1.12) !important;
  }

  body.theme-night .world-map-frame::before {
    opacity: .22 !important;
  }

  body.theme-beige .world-map-frame::before {
    opacity: .15 !important;
  }
}

@media (max-width: 390px) {
  .world-map-frame::before {
    opacity: .13 !important;
  }

  body.theme-night .world-map-frame::before {
    opacity: .18 !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_25.2 — WORLD MAP INFRARED BACKPLANE */
/* 🟩 GREEN HIGHLIGHT START: CMV_25.3 — WORLD MAP COORDINATE GRID HUD */

/*
  CMV_25.3 PURPOSE:
  - Add a subtle coordinate/grid HUD over the infrared World Map backplane.
  - Keep it behind the CMV orb, rings, route lines, pulses, and labels.
  - Preserve the CMV_25.2 infrared backplane.
  - No real 3D globe yet.
*/

.world-map-frame::after {
  content: "" !important;
  position: absolute !important;
  inset: 4% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .34 !important;
  background:
    linear-gradient(rgba(227,34,34,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,34,34,.10) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 0 32%, rgba(227,34,34,.12) 33%, transparent 34%),
    radial-gradient(circle at center, transparent 0 48%, rgba(0,0,0,.09) 49%, transparent 50%),
    radial-gradient(circle at center, transparent 0 64%, rgba(227,34,34,.08) 65%, transparent 66%) !important;
  background-size:
    42px 42px,
    42px 42px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-position: center !important;
  mix-blend-mode: multiply !important;
  mask-image: radial-gradient(
    ellipse at center,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.70) 58%,
    rgba(0,0,0,.22) 76%,
    rgba(0,0,0,0) 90%
  ) !important;
  animation: worldMapGridBreath 9s ease-in-out infinite !important;
}

@keyframes worldMapGridBreath {
  0%, 100% {
    opacity: .24;
    transform: scale(1);
  }

  50% {
    opacity: .42;
    transform: scale(1.015);
  }
}

body.theme-night .world-map-frame::after {
  opacity: .42 !important;
  mix-blend-mode: screen !important;
  background:
    linear-gradient(rgba(227,34,34,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,34,34,.16) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 0 32%, rgba(227,34,34,.20) 33%, transparent 34%),
    radial-gradient(circle at center, transparent 0 48%, rgba(255,255,255,.10) 49%, transparent 50%),
    radial-gradient(circle at center, transparent 0 64%, rgba(227,34,34,.14) 65%, transparent 66%) !important;
  background-size:
    42px 42px,
    42px 42px,
    100% 100%,
    100% 100%,
    100% 100% !important;
}

body.theme-beige .world-map-frame::after {
  opacity: .28 !important;
  mix-blend-mode: multiply !important;
  background:
    linear-gradient(rgba(116,70,38,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,70,38,.10) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 0 32%, rgba(227,34,34,.10) 33%, transparent 34%),
    radial-gradient(circle at center, transparent 0 48%, rgba(74,49,29,.08) 49%, transparent 50%),
    radial-gradient(circle at center, transparent 0 64%, rgba(227,34,34,.07) 65%, transparent 66%) !important;
  background-size:
    42px 42px,
    42px 42px,
    100% 100%,
    100% 100%,
    100% 100% !important;
}

@media (max-width: 768px) {
  .world-map-frame::after {
    inset: 2% !important;
    opacity: .22 !important;
    background-size:
      34px 34px,
      34px 34px,
      100% 100%,
      100% 100%,
      100% 100% !important;
  }

  body.theme-night .world-map-frame::after {
    opacity: .30 !important;
  }

  body.theme-beige .world-map-frame::after {
    opacity: .20 !important;
  }
}

@media (max-width: 390px) {
  .world-map-frame::after {
    opacity: .18 !important;
    background-size:
      30px 30px,
      30px 30px,
      100% 100%,
      100% 100%,
      100% 100% !important;
  }

  body.theme-night .world-map-frame::after {
    opacity: .25 !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_25.3 — WORLD MAP COORDINATE GRID HUD */
/* 🟩 GREEN HIGHLIGHT START: CMV_25.4 — WORLD MAP SCAN SWEEP + COORDINATE READOUT */

/*
  CMV_25.4 PURPOSE:
  - Add a subtle scan sweep across the World Map frame.
  - Add a compact coordinate-style readout below the World Map status strip.
  - Preserve the CMV_25.3 coordinate grid HUD.
  - No real 3D globe yet.
*/

.world-map-scan-sweep {
  position: absolute !important;
  top: 0 !important;
  left: -42% !important;
  z-index: 2 !important;
  width: 30% !important;
  height: 100% !important;
  pointer-events: none !important;
  opacity: .28 !important;
  background: linear-gradient(
    90deg,
    rgba(227,34,34,0),
    rgba(227,34,34,.22),
    rgba(255,255,255,.20),
    rgba(227,34,34,.12),
    rgba(227,34,34,0)
  ) !important;
  filter: blur(.2px) !important;
  mix-blend-mode: multiply !important;
  mask-image: radial-gradient(
    ellipse at center,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.52) 62%,
    rgba(0,0,0,0) 86%
  ) !important;
  transform: translateX(0) skewX(-16deg) !important;
  animation: worldMapScanSweep 8.5s ease-in-out infinite !important;
}

@keyframes worldMapScanSweep {
  0% {
    transform: translateX(0) skewX(-16deg);
    opacity: 0;
  }

  18% {
    opacity: .18;
  }

  48% {
    opacity: .34;
  }

  78% {
    opacity: .16;
  }

  100% {
    transform: translateX(520%) skewX(-16deg);
    opacity: 0;
  }
}

.world-map-coordinate-readout {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

.world-map-coordinate-chip {
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
  padding: 8px 6px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.20) !important;
  color: rgba(20,20,20,.54) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  cursor: default !important;
  pointer-events: auto !important;
  transition:
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    color .22s ease !important;
}

.world-map-coordinate-chip strong {
  color: var(--red) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .24em !important;
  line-height: 1 !important;
}

.world-map-coordinate-chip em {
  color: inherit !important;
  font-size: 5.7px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  line-height: 1.2 !important;
}

.world-map-coordinate-chip:hover {
  border-color: rgba(227,34,34,.28) !important;
  background: rgba(227,34,34,.055) !important;
  color: rgba(20,20,20,.72) !important;
  transform: translateY(-1px) !important;
}

body.theme-night .world-map-scan-sweep {
  opacity: .34 !important;
  mix-blend-mode: screen !important;
  background: linear-gradient(
    90deg,
    rgba(227,34,34,0),
    rgba(227,34,34,.34),
    rgba(255,255,255,.16),
    rgba(227,34,34,.20),
    rgba(227,34,34,0)
  ) !important;
}

body.theme-night .world-map-coordinate-chip {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(248,248,245,.56) !important;
}

body.theme-night .world-map-coordinate-chip:hover {
  border-color: rgba(227,34,34,.34) !important;
  background: rgba(227,34,34,.075) !important;
  color: rgba(248,248,245,.78) !important;
}

body.theme-beige .world-map-scan-sweep {
  opacity: .22 !important;
  mix-blend-mode: multiply !important;
  background: linear-gradient(
    90deg,
    rgba(227,34,34,0),
    rgba(227,34,34,.16),
    rgba(255,248,235,.18),
    rgba(116,70,38,.10),
    rgba(227,34,34,0)
  ) !important;
}

body.theme-beige .world-map-coordinate-chip {
  border-color: rgba(74,49,29,.12) !important;
  background: rgba(255,248,235,.36) !important;
  color: rgba(39,28,18,.54) !important;
}

body.theme-beige .world-map-coordinate-chip:hover {
  border-color: rgba(227,34,34,.24) !important;
  background: rgba(227,34,34,.045) !important;
  color: rgba(39,28,18,.72) !important;
}

@media (max-width: 768px) {
  .world-map-scan-sweep {
    width: 38% !important;
    left: -52% !important;
    opacity: .18 !important;
    animation-duration: 9.5s !important;
  }

  .world-map-coordinate-readout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .world-map-coordinate-chip {
    min-height: 36px !important;
    padding: 7px 5px !important;
  }

  .world-map-coordinate-chip strong {
    font-size: 7px !important;
    letter-spacing: .20em !important;
  }

  .world-map-coordinate-chip em {
    font-size: 5.2px !important;
    letter-spacing: .12em !important;
  }
}

@media (max-width: 390px) {
  .world-map-coordinate-readout {
    gap: 6px !important;
  }

  .world-map-coordinate-chip {
    min-height: 34px !important;
  }

  .world-map-coordinate-chip strong {
    font-size: 6.5px !important;
  }

  .world-map-coordinate-chip em {
    font-size: 4.9px !important;
    letter-spacing: .09em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_25.4 — WORLD MAP SCAN SWEEP + COORDINATE READOUT */
/* 🟩 GREEN HIGHLIGHT START: CMV_25.5 — WORLD MAP LAYER STACK + MOBILE READABILITY LOCK */

/*
  CMV_25.5 PURPOSE:
  - Lock the World Map visual stack after 25.1–25.4.
  - Keep the infrared backplane and coordinate grid behind everything.
  - Keep route lines and scan sweep behind the orb and labels.
  - Improve mobile readability without redesigning the World Map.
  - No Archive, Portfolio, Mode, Sound, Contact, Booking, or Footer changes.
*/

.world-map-frame {
  isolation: isolate !important;
}

.world-map-frame::before {
  z-index: 0 !important;
}

.world-map-frame::after {
  z-index: 1 !important;
}

.world-map-rings {
  z-index: 2 !important;
}

.world-map-route-lines {
  z-index: 3 !important;
}

.world-map-scan-sweep {
  z-index: 4 !important;
}

.world-map-orb {
  z-index: 5 !important;
}

.world-map-pulse {
  z-index: 6 !important;
}

.world-map-location {
  z-index: 7 !important;
}

.world-map-location:hover {
  border-color: rgba(227,34,34,.30) !important;
  background: rgba(255,255,255,.74) !important;
  transform: translateY(-1px) !important;
}

body.theme-night .world-map-location:hover {
  border-color: rgba(227,34,34,.38) !important;
  background: rgba(12,12,12,.74) !important;
}

body.theme-beige .world-map-location:hover {
  border-color: rgba(227,34,34,.28) !important;
  background: rgba(255,248,235,.78) !important;
}

@media (max-width: 768px) {
  .world-map-panel {
    gap: 18px !important;
  }

  .world-map-frame {
    min-height: 280px !important;
  }

  .world-map-frame::before {
    opacity: .12 !important;
  }

  .world-map-frame::after {
    opacity: .16 !important;
  }

  .world-route {
    opacity: .18 !important;
  }

  .world-map-scan-sweep {
    opacity: .14 !important;
  }

  .world-map-location {
    min-width: 84px !important;
    padding: 5px 6px !important;
    font-size: 5.3px !important;
    letter-spacing: .08em !important;
    backdrop-filter: blur(10px) !important;
  }

  .world-map-location::before {
    width: 5px !important;
    height: 5px !important;
    box-shadow: 0 0 11px rgba(227,34,34,.52) !important;
  }

  .world-map-orb {
    width: 132px !important;
    height: 132px !important;
  }

  .world-map-orb span {
    font-size: 26px !important;
  }

  body.theme-night .world-map-frame::before {
    opacity: .18 !important;
  }

  body.theme-night .world-map-frame::after {
    opacity: .24 !important;
  }

  body.theme-beige .world-map-frame::before {
    opacity: .11 !important;
  }

  body.theme-beige .world-map-frame::after {
    opacity: .15 !important;
  }
}

@media (max-width: 430px) {
  .world-map-panel {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .world-map-frame {
    min-height: 265px !important;
  }

  .location-austin {
    top: 12% !important;
    left: 4% !important;
  }

  .location-houston {
    top: 40% !important;
    right: 3% !important;
  }

  .location-lagos {
    bottom: 19% !important;
    left: 5% !important;
  }

  .location-future {
    bottom: 7% !important;
    right: 4% !important;
  }

  .world-map-coordinate-readout {
    grid-template-columns: 1fr 1fr !important;
  }

  .world-map-status-strip span,
  .world-map-coordinate-chip {
    border-radius: 0 !important;
  }
}

@media (max-width: 390px) {
  .world-map-frame {
    min-height: 250px !important;
  }

  .world-map-location {
    min-width: 76px !important;
    padding: 5px 5px !important;
    font-size: 4.9px !important;
    letter-spacing: .06em !important;
  }

  .world-map-orb {
    width: 118px !important;
    height: 118px !important;
  }

  .world-map-orb span {
    font-size: 23px !important;
  }

  .world-map-status-strip span {
    min-height: 28px !important;
  }

  .world-map-coordinate-chip {
    min-height: 32px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_25.5 — WORLD MAP LAYER STACK + MOBILE READABILITY LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_25.6 — WORLD MAP PIN SYSTEM FOUNDATION */

/*
  CMV_25.6 PURPOSE:
  - Add safe interactive World Map hit pins.
  - Add a small selected-signal readout.
  - Keep the current 2D World Map foundation.
  - Do not start the real 3D globe yet.
*/

.world-map-hit-pins {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
}

.world-map-hit-pin {
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  border: 1px solid rgba(227,34,34,.58) !important;
  border-radius: 999px !important;
  background: rgba(227,34,34,.88) !important;
  box-shadow:
    0 0 0 6px rgba(227,34,34,.08),
    0 0 18px rgba(227,34,34,.42) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) !important;
  transition:
    width .22s ease,
    height .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    opacity .22s ease !important;
}

.world-map-hit-pin::before,
.world-map-hit-pin::after {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  border: 1px solid rgba(227,34,34,.24) !important;
  border-radius: 999px !important;
  opacity: .65 !important;
  animation: worldMapPinPulse 2.8s ease-in-out infinite !important;
}

.world-map-hit-pin::after {
  inset: -14px !important;
  opacity: .34 !important;
  animation-delay: .7s !important;
}

.world-map-hit-pin:hover,
.world-map-hit-pin:focus-visible,
.world-map-hit-pin.active {
  width: 18px !important;
  height: 18px !important;
  border-color: rgba(227,34,34,.86) !important;
  background: var(--red) !important;
  box-shadow:
    0 0 0 8px rgba(227,34,34,.10),
    0 0 26px rgba(227,34,34,.62) !important;
  outline: none !important;
}

.world-map-hit-pin-austin {
  top: 31% !important;
  left: 38% !important;
}

.world-map-hit-pin-houston {
  top: 51% !important;
  left: 58% !important;
}

.world-map-hit-pin-lagos {
  top: 66% !important;
  left: 43% !important;
}

.world-map-hit-pin-future {
  top: 72% !important;
  left: 63% !important;
}

@keyframes worldMapPinPulse {
  0%, 100% {
    transform: scale(.92);
    opacity: .28;
  }

  50% {
    transform: scale(1.15);
    opacity: .72;
  }
}

.world-map-pin-readout {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 6px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  background: rgba(255,255,255,.22) !important;
  color: rgba(20,20,20,.56) !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

.world-map-pin-readout span {
  color: rgba(20,20,20,.42) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: .26em !important;
  line-height: 1 !important;
}

.world-map-pin-readout strong {
  color: var(--red) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .32em !important;
  line-height: 1.1 !important;
}

.world-map-pin-readout em {
  color: rgba(20,20,20,.62) !important;
  font-size: 7px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  line-height: 1.2 !important;
}

.world-map-pin-readout p {
  max-width: 720px !important;
  margin: 0 !important;
  color: rgba(20,20,20,.48) !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  line-height: 1.8 !important;
}

body.theme-night .world-map-hit-pin {
  border-color: rgba(227,34,34,.70) !important;
  background: rgba(227,34,34,.92) !important;
  box-shadow:
    0 0 0 6px rgba(227,34,34,.10),
    0 0 22px rgba(227,34,34,.56) !important;
}

body.theme-night .world-map-pin-readout {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.035) !important;
  color: rgba(248,248,245,.58) !important;
}

body.theme-night .world-map-pin-readout span {
  color: rgba(248,248,245,.38) !important;
}

body.theme-night .world-map-pin-readout em,
body.theme-night .world-map-pin-readout p {
  color: rgba(248,248,245,.56) !important;
}

body.theme-beige .world-map-hit-pin {
  border-color: rgba(227,34,34,.52) !important;
  background: rgba(227,34,34,.82) !important;
  box-shadow:
    0 0 0 6px rgba(227,34,34,.07),
    0 0 16px rgba(116,70,38,.22) !important;
}

body.theme-beige .world-map-pin-readout {
  border-color: rgba(74,49,29,.12) !important;
  background: rgba(255,248,235,.36) !important;
}

body.theme-beige .world-map-pin-readout span {
  color: rgba(39,28,18,.40) !important;
}

body.theme-beige .world-map-pin-readout em,
body.theme-beige .world-map-pin-readout p {
  color: rgba(39,28,18,.56) !important;
}

@media (max-width: 768px) {
  .world-map-hit-pin {
    width: 12px !important;
    height: 12px !important;
    box-shadow:
      0 0 0 5px rgba(227,34,34,.07),
      0 0 14px rgba(227,34,34,.36) !important;
  }

  .world-map-hit-pin:hover,
  .world-map-hit-pin:focus-visible,
  .world-map-hit-pin.active {
    width: 15px !important;
    height: 15px !important;
  }

  .world-map-hit-pin-austin {
    top: 30% !important;
    left: 39% !important;
  }

  .world-map-hit-pin-houston {
    top: 50% !important;
    left: 59% !important;
  }

  .world-map-hit-pin-lagos {
    top: 65% !important;
    left: 41% !important;
  }

  .world-map-hit-pin-future {
    top: 72% !important;
    left: 64% !important;
  }

  .world-map-pin-readout {
    padding: 12px 12px !important;
    gap: 5px !important;
  }

  .world-map-pin-readout strong {
    font-size: 11px !important;
    letter-spacing: .26em !important;
  }

  .world-map-pin-readout em {
    font-size: 6px !important;
    letter-spacing: .16em !important;
  }

  .world-map-pin-readout p {
    font-size: 6px !important;
    letter-spacing: .11em !important;
    line-height: 1.7 !important;
  }
}

@media (max-width: 390px) {
  .world-map-hit-pin {
    width: 10px !important;
    height: 10px !important;
  }

  .world-map-hit-pin:hover,
  .world-map-hit-pin:focus-visible,
  .world-map-hit-pin.active {
    width: 13px !important;
    height: 13px !important;
  }

  .world-map-pin-readout strong {
    font-size: 10px !important;
    letter-spacing: .22em !important;
  }

  .world-map-pin-readout p {
    font-size: 5.6px !important;
    letter-spacing: .08em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_25.6 — WORLD MAP PIN SYSTEM FOUNDATION */
/* 🟩 GREEN HIGHLIGHT START: CMV_25.7 — WORLD MAP FINAL QA / LAUNCH LOCK */

/*
  CMV_25.7 PURPOSE:
  - Final safety/readability lock for the completed CMV_25 World Map foundation.
  - No new visual features.
  - No real 3D globe yet.
  - Preserve all Archive, Portfolio, Mode, Sound, Contact, Booking, and Footer systems.
*/

/* Final World Map containment lock */
.world-map-panel,
.world-map-frame,
.world-map-meta,
.world-map-list,
.world-map-status-strip,
.world-map-coordinate-readout,
.world-map-pin-readout {
  box-sizing: border-box !important;
}

.world-map-frame {
  overflow: hidden !important;
}

/* Keep all decorative World Map layers non-interactive except real pins/labels/chips */
.world-map-frame::before,
.world-map-frame::after,
.world-map-rings,
.world-map-route-lines,
.world-route,
.world-map-scan-sweep,
.world-map-pulse {
  pointer-events: none !important;
}

/* Keep intentional interactive elements active */
.world-map-location,
.world-map-hit-pin,
.world-map-coordinate-chip {
  pointer-events: auto !important;
}

/* Final selected pin clarity */
.world-map-hit-pin.active {
  opacity: 1 !important;
}

.world-map-hit-pin:not(.active) {
  opacity: .78 !important;
}

.world-map-hit-pin:hover,
.world-map-hit-pin:focus-visible {
  opacity: 1 !important;
}

/* Final keyboard focus polish */
.world-map-hit-pin:focus-visible,
.world-map-coordinate-chip:focus-visible {
  outline: 1px solid rgba(227,34,34,.72) !important;
  outline-offset: 5px !important;
}

/* Final readout text wrapping safety */
.world-map-pin-readout,
.world-map-meta,
.world-map-status-strip span,
.world-map-coordinate-chip {
  overflow-wrap: anywhere !important;
}

/* Final theme readability */
body.theme-night .world-map-pin-readout,
body.theme-night .world-map-coordinate-chip,
body.theme-night .world-map-status-strip span,
body.theme-night .world-map-location {
  text-shadow: 0 0 18px rgba(0,0,0,.42) !important;
}

body.theme-beige .world-map-pin-readout,
body.theme-beige .world-map-coordinate-chip,
body.theme-beige .world-map-status-strip span,
body.theme-beige .world-map-location {
  text-shadow: none !important;
}

/* Motion accessibility safety */
@media (prefers-reduced-motion: reduce) {
  .world-map-frame::before,
  .world-map-frame::after,
  .world-map-rings span,
  .world-map-route-lines .world-route,
  .world-map-scan-sweep,
  .world-map-pulse,
  .world-map-hit-pin::before,
  .world-map-hit-pin::after {
    animation: none !important;
  }

  .world-map-hit-pin,
  .world-map-location,
  .world-map-coordinate-chip {
    transition: none !important;
  }
}

/* Final mobile readability lock */
@media (max-width: 768px) {
  .world-map-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .world-map-frame {
    width: 100% !important;
    max-width: 100% !important;
  }

  .world-map-pin-readout {
    text-align: center !important;
  }

  .world-map-pin-readout p {
    max-width: 100% !important;
  }

  .world-map-location:hover {
    transform: none !important;
  }

  .world-map-coordinate-chip:hover {
    transform: none !important;
  }
}

/* Final small-phone lock */
@media (max-width: 390px) {
  .world-map-list,
  .world-map-status-strip,
  .world-map-coordinate-readout {
    width: 100% !important;
  }

  .world-map-pin-readout {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_25.7 — WORLD MAP FINAL QA / LAUNCH LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_26.0 — 3D GLOBAL MAP ENGINE FOUNDATION */

/*
  CMV_26.0 PURPOSE:
  - Begin the real 3D globe engine without removing the CMV_25 2D World Map.
  - Canvas is hidden by default so CMV_25 remains the fallback.
  - JavaScript only activates the 3D layer on safe desktop conditions.
  - Mobile, reduced-motion, or unsupported browsers stay on the 2D fallback.
*/

.world-map-frame {
  isolation: isolate !important;
}

.world-map-3d-shell {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .45s ease, visibility .45s ease !important;
}

.world-map-3d-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.12)) !important;
}

.world-map-3d-core {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 3 !important;
  width: 58px !important;
  height: 58px !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(227,34,34,.42) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.52) !important;
  color: rgba(227,34,34,.90) !important;
  font-family: Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -.05em !important;
  box-shadow:
    0 0 0 8px rgba(227,34,34,.045),
    0 0 22px rgba(227,34,34,.18) !important;
}

.world-map-3d-status {
  position: absolute !important;
  left: 18px !important;
  bottom: 16px !important;
  z-index: 4 !important;
  max-width: calc(100% - 36px) !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.46) !important;
  color: rgba(20,20,20,.54) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(12px) !important;
}

.world-map.world-map-3d-ready .world-map-3d-shell {
  opacity: 1 !important;
  visibility: visible !important;
}

.world-map.world-map-3d-ready .world-map-orb,
.world-map.world-map-3d-ready .world-map-rings,
.world-map.world-map-3d-ready .world-map-route-lines,
.world-map.world-map-3d-ready .world-map-pulse {
  opacity: 0 !important;
  visibility: hidden !important;
}

.world-map.world-map-3d-ready .world-map-scan-sweep {
  opacity: .20 !important;
}

.world-map.world-map-3d-ready .world-map-frame::before {
  opacity: .14 !important;
}

.world-map.world-map-3d-ready .world-map-frame::after {
  opacity: .18 !important;
}

.world-map-engine-badge {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 2px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.28) !important;
  color: rgba(20,20,20,.52) !important;
  text-transform: uppercase !important;
}

.world-map-engine-badge span {
  color: rgba(20,20,20,.44) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: .24em !important;
  line-height: 1.2 !important;
}

.world-map-engine-badge strong {
  color: var(--red) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: .24em !important;
  line-height: 1.2 !important;
  text-align: right !important;
}

body.theme-night .world-map-3d-core {
  border-color: rgba(227,34,34,.64) !important;
  background: rgba(10,10,10,.60) !important;
  color: rgba(248,248,245,.92) !important;
  box-shadow:
    0 0 0 8px rgba(227,34,34,.08),
    0 0 28px rgba(227,34,34,.34) !important;
}

body.theme-night .world-map-3d-status,
body.theme-night .world-map-engine-badge {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(248,248,245,.58) !important;
}

body.theme-night .world-map-engine-badge span {
  color: rgba(248,248,245,.46) !important;
}

body.theme-beige .world-map-3d-core {
  border-color: rgba(227,34,34,.38) !important;
  background: rgba(255,248,235,.58) !important;
  box-shadow:
    0 0 0 8px rgba(116,70,38,.05),
    0 0 20px rgba(116,70,38,.16) !important;
}

body.theme-beige .world-map-3d-status,
body.theme-beige .world-map-engine-badge {
  border-color: rgba(74,49,29,.12) !important;
  background: rgba(255,248,235,.36) !important;
}

@media (max-width: 768px) {
  .world-map-3d-shell {
    display: none !important;
  }

  .world-map-engine-badge {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .world-map-engine-badge strong {
    text-align: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-map-3d-shell {
    display: none !important;
  }

  .world-map.world-map-3d-ready .world-map-orb,
  .world-map.world-map-3d-ready .world-map-rings,
  .world-map.world-map-3d-ready .world-map-route-lines,
  .world-map.world-map-3d-ready .world-map-pulse {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_26.0 — 3D GLOBAL MAP ENGINE FOUNDATION */
/* 🟩 GREEN HIGHLIGHT START: CMV_26.1 — 3D GLOBE VISUAL + CONTROL POLISH */

/*
  CMV_26.1 PURPOSE:
  - Keep CMV_26.0.1 freeze repair locked.
  - Add manual AUTO / 3D / 2D World Map display control.
  - Make the 3D globe feel intentional while keeping the CMV_25 2D fallback safe.
  - Do not affect Archive, Portfolio, Mode, Sound, Contact, Booking, or Footer systems.
*/

.world-map-engine-controls {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 10px 12px !important;
  align-items: center !important;
  margin-top: 2px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.30) !important;
  color: rgba(20,20,20,.52) !important;
  text-transform: uppercase !important;
}

.world-map-engine-controls > span {
  color: rgba(20,20,20,.44) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: .24em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.world-map-engine-control-buttons {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.world-map-view-btn {
  appearance: none !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(255,255,255,.32) !important;
  color: rgba(20,20,20,.44) !important;
  min-width: 46px !important;
  padding: 7px 8px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  line-height: 1 !important;
  text-align: center !important;
  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease !important;
}

.world-map-view-btn:hover,
.world-map-view-btn.active {
  border-color: rgba(227,34,34,.48) !important;
  background: rgba(227,34,34,.08) !important;
  color: var(--red) !important;
  box-shadow: 0 0 18px rgba(227,34,34,.12) !important;
}

.world-map-view-btn:hover {
  transform: translateY(-1px) !important;
}

.world-map-engine-controls small {
  grid-column: 1 / -1 !important;
  display: block !important;
  color: rgba(20,20,20,.42) !important;
  font-size: 6px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
}

.world-map.world-map-3d-ready .world-map-hit-pins,
.world-map.world-map-3d-ready .world-map-location {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.world-map.world-map-3d-ready .world-map-3d-canvas {
  opacity: .96 !important;
  filter:
    drop-shadow(0 20px 44px rgba(0,0,0,.14))
    drop-shadow(0 0 18px rgba(227,34,34,.08)) !important;
}

.world-map.world-map-3d-ready .world-map-3d-core {
  transform: translate(-50%, -50%) scale(.94) !important;
}

.world-map.world-map-3d-ready .world-map-3d-status {
  color: rgba(227,34,34,.82) !important;
  border-color: rgba(227,34,34,.20) !important;
  background: rgba(255,255,255,.58) !important;
}

body.theme-night .world-map-engine-controls {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(248,248,245,.58) !important;
}

body.theme-night .world-map-engine-controls > span,
body.theme-night .world-map-engine-controls small {
  color: rgba(248,248,245,.46) !important;
}

body.theme-night .world-map-view-btn {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(248,248,245,.48) !important;
}

body.theme-night .world-map-view-btn:hover,
body.theme-night .world-map-view-btn.active {
  border-color: rgba(227,34,34,.58) !important;
  background: rgba(227,34,34,.12) !important;
  color: rgba(248,248,245,.88) !important;
  box-shadow: 0 0 20px rgba(227,34,34,.20) !important;
}

body.theme-night .world-map.world-map-3d-ready .world-map-3d-status {
  color: rgba(248,248,245,.78) !important;
  border-color: rgba(227,34,34,.30) !important;
  background: rgba(0,0,0,.38) !important;
}

body.theme-beige .world-map-engine-controls {
  border-color: rgba(74,49,29,.12) !important;
  background: rgba(255,248,235,.38) !important;
}

body.theme-beige .world-map-engine-controls > span,
body.theme-beige .world-map-engine-controls small {
  color: rgba(74,49,29,.50) !important;
}

body.theme-beige .world-map-view-btn {
  border-color: rgba(74,49,29,.14) !important;
  background: rgba(255,248,235,.40) !important;
  color: rgba(74,49,29,.48) !important;
}

body.theme-beige .world-map-view-btn:hover,
body.theme-beige .world-map-view-btn.active {
  border-color: rgba(227,34,34,.40) !important;
  background: rgba(227,34,34,.08) !important;
  color: var(--red) !important;
}

@media (max-width: 768px) {
  .world-map-engine-controls {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 12px 10px !important;
  }

  .world-map-engine-control-buttons {
    justify-content: center !important;
  }

  .world-map-view-btn {
    min-width: 54px !important;
    padding: 8px 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-map-view-btn:hover {
    transform: none !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_26.1 — 3D GLOBE VISUAL + CONTROL POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_26.3 — 3D ROUTE ARCS + SCAN LINE SYSTEM */

/*
  CMV_26.3 PURPOSE:
  - Route arcs and scan motion are drawn directly inside the existing safe canvas renderer.
  - CSS stays intentionally light so the 26.1 display controls and 26.2 projected pins remain untouched.
*/

.world-map.world-map-3d-ready .world-map-engine-badge strong {
  letter-spacing: .20em !important;
}

.world-map.world-map-3d-ready .world-map-engine-controls small {
  color: rgba(227,34,34,.58) !important;
}

body.theme-night .world-map.world-map-3d-ready .world-map-engine-controls small {
  color: rgba(248,248,245,.58) !important;
}

body.theme-beige .world-map.world-map-3d-ready .world-map-engine-controls small {
  color: rgba(116,70,38,.60) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_26.3 — 3D ROUTE ARCS + SCAN LINE SYSTEM */
/* 🟩 GREEN HIGHLIGHT START: CMV_26.4 — 3D INTERACTIVE PIN HOVER + READOUT SYSTEM */

/*
  CMV_26.4 PURPOSE:
  - Make the 3D canvas pins feel interactive without adding WebGL or heavy assets.
  - Enable hover/click hit areas only while the safe 3D globe is active.
  - Keep the CMV_25 2D fallback and existing World Map readout intact.
*/

.world-map.world-map-3d-ready .world-map-3d-shell {
  pointer-events: auto !important;
}

.world-map.world-map-3d-ready .world-map-3d-canvas {
  cursor: crosshair !important;
  pointer-events: auto !important;
}

.world-map.world-map-3d-ready .world-map-3d-canvas.has-hover-pin {
  cursor: pointer !important;
}

.world-map-3d-tooltip {
  position: absolute !important;
  z-index: 8 !important;
  min-width: 132px !important;
  max-width: 180px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(227,34,34,.24) !important;
  background: rgba(255,255,255,.62) !important;
  color: rgba(20,20,20,.70) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.10),
    0 0 22px rgba(227,34,34,.10) !important;
  backdrop-filter: blur(14px) !important;
  transform: translate(0, -50%) scale(.96) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease !important;
}

.world-map-3d-tooltip.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(0, -50%) scale(1) !important;
}

.world-map-3d-tooltip span,
.world-map-3d-tooltip strong,
.world-map-3d-tooltip em {
  display: block !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
}

.world-map-3d-tooltip span {
  margin-bottom: 5px !important;
  color: rgba(227,34,34,.72) !important;
  font-size: 5.5px !important;
  font-weight: 900 !important;
  letter-spacing: .24em !important;
}

.world-map-3d-tooltip strong {
  color: rgba(20,20,20,.78) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
}

.world-map-3d-tooltip em {
  margin-top: 4px !important;
  color: rgba(20,20,20,.48) !important;
  font-size: 6px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
}

.world-map.world-map-3d-ready .world-map-3d-status {
  min-width: 132px !important;
}

body.theme-night .world-map-3d-tooltip {
  border-color: rgba(227,34,34,.34) !important;
  background: rgba(0,0,0,.44) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.34),
    0 0 26px rgba(227,34,34,.18) !important;
}

body.theme-night .world-map-3d-tooltip strong {
  color: rgba(248,248,245,.86) !important;
}

body.theme-night .world-map-3d-tooltip em {
  color: rgba(248,248,245,.52) !important;
}

body.theme-beige .world-map-3d-tooltip {
  border-color: rgba(227,34,34,.22) !important;
  background: rgba(255,248,235,.68) !important;
}

body.theme-beige .world-map-3d-tooltip strong {
  color: rgba(74,49,29,.78) !important;
}

body.theme-beige .world-map-3d-tooltip em {
  color: rgba(74,49,29,.50) !important;
}

@media (max-width: 768px) {
  .world-map-3d-tooltip {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-map-3d-tooltip {
    transition: none !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_26.4 — 3D INTERACTIVE PIN HOVER + READOUT SYSTEM */
/* 🟩 GREEN HIGHLIGHT START: CMV_26.5 — 3D ROUTE READOUT + SELECTED ROUTE POLISH */

/*
  CMV_26.5 PURPOSE:
  - Keep the top label as 3D ROUTE ENGINE.
  - Add a selected-route readout below the display controls.
  - Make selected routes feel connected to clicked 3D pins.
*/

.world-map-route-readout {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 8px 12px !important;
  align-items: center !important;
  margin-top: 2px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(227,34,34,.16) !important;
  background: rgba(255,255,255,.34) !important;
  color: rgba(20,20,20,.54) !important;
  text-transform: uppercase !important;
}

.world-map-route-readout span {
  color: rgba(227,34,34,.68) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: .24em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.world-map-route-readout strong {
  color: rgba(20,20,20,.72) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  line-height: 1.2 !important;
  text-align: right !important;
}

.world-map-route-readout em {
  grid-column: 1 / -1 !important;
  display: block !important;
  color: rgba(20,20,20,.44) !important;
  font-size: 6px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  line-height: 1.45 !important;
}

.world-map.world-map-3d-ready .world-map-route-readout {
  border-color: rgba(227,34,34,.26) !important;
  background: rgba(227,34,34,.055) !important;
  box-shadow: 0 0 24px rgba(227,34,34,.08) !important;
}

body.theme-night .world-map-route-readout {
  border-color: rgba(227,34,34,.26) !important;
  background: rgba(255,255,255,.04) !important;
}

body.theme-night .world-map-route-readout strong {
  color: rgba(248,248,245,.78) !important;
}

body.theme-night .world-map-route-readout em {
  color: rgba(248,248,245,.48) !important;
}

body.theme-beige .world-map-route-readout {
  border-color: rgba(227,34,34,.20) !important;
  background: rgba(255,248,235,.42) !important;
}

body.theme-beige .world-map-route-readout strong {
  color: rgba(74,49,29,.72) !important;
}

body.theme-beige .world-map-route-readout em {
  color: rgba(74,49,29,.48) !important;
}

@media (max-width: 768px) {
  .world-map-route-readout {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .world-map-route-readout strong {
    text-align: center !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_26.5 — 3D ROUTE READOUT + SELECTED ROUTE POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_26.6 — GLOBE VISUAL DEPTH + CONTINENT SILHOUETTE TEST */

/*
  CMV_26.6 PURPOSE:
  - Add lightweight globe visual depth.
  - Add stylized continent contour lines inside the existing canvas renderer.
  - Keep this as a test layer, not a final high-detail map texture.
*/

.world-map.world-map-3d-ready .world-map-3d-canvas {
  filter:
    drop-shadow(0 22px 46px rgba(0,0,0,.15))
    drop-shadow(0 0 20px rgba(227,34,34,.10)) !important;
}

.world-map.world-map-3d-ready .world-map-engine-badge strong {
  color: var(--red) !important;
}

.world-map.world-map-3d-ready .world-map-route-readout {
  background:
    linear-gradient(135deg, rgba(227,34,34,.065), rgba(255,255,255,.30)) !important;
}

body.theme-night .world-map.world-map-3d-ready .world-map-route-readout {
  background:
    linear-gradient(135deg, rgba(227,34,34,.11), rgba(255,255,255,.035)) !important;
}

body.theme-beige .world-map.world-map-3d-ready .world-map-route-readout {
  background:
    linear-gradient(135deg, rgba(227,34,34,.060), rgba(255,248,235,.42)) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_26.6 — GLOBE VISUAL DEPTH + CONTINENT SILHOUETTE TEST */
/* 🟩 GREEN HIGHLIGHT START: CMV_26.7 — MOBILE + PERFORMANCE QA LOCK */

/*
  CMV_26.7 PURPOSE:
  - Keep the 3D globe visually stable.
  - Make 3D safety states clearer.
  - Preserve mobile 2D fallback behavior.
  - Prepare CMV_26 for final launch lock.
*/

.world-map-view-btn.safe-locked {
  opacity: .52 !important;
  cursor: not-allowed !important;
}

.world-map-view-btn.safe-locked:hover {
  transform: none !important;
  box-shadow: none !important;
}

.world-map.world-map-3d-deferred .world-map-engine-badge strong,
.world-map.world-map-3d-fallback .world-map-engine-badge strong {
  color: rgba(227,34,34,.78) !important;
}

.world-map.world-map-3d-deferred .world-map-engine-controls small,
.world-map.world-map-3d-fallback .world-map-engine-controls small {
  color: rgba(20,20,20,.46) !important;
}

body.theme-night .world-map.world-map-3d-deferred .world-map-engine-controls small,
body.theme-night .world-map.world-map-3d-fallback .world-map-engine-controls small {
  color: rgba(248,248,245,.52) !important;
}

body.theme-beige .world-map.world-map-3d-deferred .world-map-engine-controls small,
body.theme-beige .world-map.world-map-3d-fallback .world-map-engine-controls small {
  color: rgba(74,49,29,.52) !important;
}

@media (max-width: 768px) {
  .world-map-view-btn[data-world-map-mode="3d"] {
    opacity: .58 !important;
  }

  .world-map-engine-controls small {
    max-width: 32rem !important;
    margin-inline: auto !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .world-map.world-map-3d-ready .world-map-3d-canvas {
    filter:
      drop-shadow(0 18px 34px rgba(0,0,0,.12))
      drop-shadow(0 0 14px rgba(227,34,34,.08)) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_26.7 — MOBILE + PERFORMANCE QA LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_26.8_FINAL — 3D GLOBAL MAP ENGINE LAUNCH LOCK */

/*
  CMV_26.8 FINAL PURPOSE:
  - Final status/readability polish only.
  - No new 3D feature layer.
  - Preserve CMV_25 fallback and every CMV_26 safety system.
*/

.world-map.world-map-3d-ready .world-map-engine-badge,
.world-map.world-map-3d-ready .world-map-route-readout,
.world-map.world-map-3d-ready .world-map-engine-controls {
  box-shadow: 0 0 24px rgba(227,34,34,.075) !important;
}

.world-map.world-map-3d-ready .world-map-engine-badge strong {
  color: var(--red) !important;
  letter-spacing: .18em !important;
}

.world-map.world-map-3d-fallback .world-map-route-readout,
.world-map.world-map-3d-deferred .world-map-route-readout {
  opacity: .84 !important;
}

body.theme-night .world-map.world-map-3d-ready .world-map-engine-badge,
body.theme-night .world-map.world-map-3d-ready .world-map-route-readout,
body.theme-night .world-map.world-map-3d-ready .world-map-engine-controls {
  box-shadow: 0 0 28px rgba(227,34,34,.11) !important;
}

@media (max-width: 768px) {
  .world-map-route-readout {
    margin-top: 0 !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_26.8_FINAL — 3D GLOBAL MAP ENGINE LAUNCH LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_27.2 — SEARCH BAR VISUAL FOUNDATION */

/*
  Purpose:
  Add a lightweight YouTube / Vimeo-inspired site search bar.
  This is a section-navigation search foundation, not a full content index yet.
*/

.cmv-site-search {
  position: absolute;
  top: 36px;
  left: 86px;
  right: 128px;
  z-index: 29;
  max-width: 720px;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr);
  align-items: center;
  gap: 10px 14px;
  pointer-events: auto;
}

.cmv-search-kicker {
  color: var(--red);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .44em;
  white-space: nowrap;
}

.cmv-search-box {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(0,0,0,.13);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.36));
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.58),
    0 14px 34px rgba(0,0,0,.08);
  backdrop-filter: blur(16px);
  overflow: hidden;
  transition:
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

.cmv-search-box:focus-within {
  border-color: rgba(227,34,34,.46);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.70),
    0 0 0 1px rgba(227,34,34,.12),
    0 18px 40px rgba(227,34,34,.09);
  transform: translateY(-1px);
}

.cmv-search-icon {
  padding-left: 17px;
  padding-right: 10px;
  color: rgba(227,34,34,.86);
  font-size: 16px;
  line-height: 1;
}

.cmv-search-input {
  width: 100%;
  height: 42px;
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #151515;
  font: 800 9px Inter, Arial, sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.cmv-search-input::placeholder {
  color: rgba(20,20,20,.42);
}

.cmv-search-submit {
  height: 42px;
  border: 0;
  border-left: 1px solid rgba(0,0,0,.10);
  padding: 0 18px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,.36);
  color: rgba(20,20,20,.62);
  font: 900 8px Inter, Arial, sans-serif;
  letter-spacing: .34em;
  cursor: pointer;
  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.cmv-search-submit:hover,
.cmv-search-submit:focus-visible {
  color: var(--red);
  background: rgba(227,34,34,.07);
  border-left-color: rgba(227,34,34,.24);
  outline: none;
}

.cmv-search-status {
  grid-column: 2;
  color: rgba(20,20,20,.40);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .32em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Night mode readability */
body.theme-night .cmv-search-box {
  border-color: rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(0,0,0,.58), rgba(255,255,255,.035));
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.035),
    0 16px 36px rgba(0,0,0,.26);
}

body.theme-night .cmv-search-box:focus-within {
  border-color: rgba(227,34,34,.52);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.045),
    0 0 0 1px rgba(227,34,34,.16),
    0 18px 42px rgba(227,34,34,.12);
}

body.theme-night .cmv-search-input {
  color: rgba(248,248,245,.86);
}

body.theme-night .cmv-search-input::placeholder {
  color: rgba(248,248,245,.38);
}

body.theme-night .cmv-search-submit {
  border-left-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  color: rgba(248,248,245,.58);
}

body.theme-night .cmv-search-submit:hover,
body.theme-night .cmv-search-submit:focus-visible {
  color: var(--red);
  background: rgba(227,34,34,.10);
  border-left-color: rgba(227,34,34,.28);
}

body.theme-night .cmv-search-status {
  color: rgba(248,248,245,.42);
}

/* Beige mode readability */
body.theme-beige .cmv-search-box {
  border-color: rgba(92,59,32,.14);
  background:
    linear-gradient(135deg, rgba(255,248,235,.76), rgba(248,231,199,.42));
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.44),
    0 14px 34px rgba(92,59,32,.08);
}

body.theme-beige .cmv-search-input {
  color: rgba(66,43,25,.86);
}

body.theme-beige .cmv-search-input::placeholder {
  color: rgba(74,49,29,.42);
}

body.theme-beige .cmv-search-submit {
  border-left-color: rgba(92,59,32,.12);
  background: rgba(255,248,235,.42);
  color: rgba(74,49,29,.62);
}

body.theme-beige .cmv-search-status {
  color: rgba(74,49,29,.44);
}

/*
  Mobile safety:
  Keep the search foundation desktop-only for CMV_27.2 so it does not disturb
  the locked mobile Sound + Mode alignment. Mobile search can be added later
  after the mobile readability patch.
*/
@media (max-width: 768px) {
  .cmv-site-search {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .cmv-site-search {
    left: 44px;
    right: 94px;
    max-width: 560px;
    grid-template-columns: 1fr;
  }

  .cmv-search-kicker {
    display: none;
  }

  .cmv-search-status {
    grid-column: 1;
  }

  .cmv-search-input {
    letter-spacing: .20em;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_27.2 — SEARCH BAR VISUAL FOUNDATION */
/* 🟩 GREEN HIGHLIGHT START: CMV_27.2.1 — SEARCH BAR / BACK HOME COLLISION REPAIR */

/*
  Fix:
  On non-home desktop pages, the new Search bar was colliding with
  the fixed ← BACK TO HOME button. This keeps the Home search layout
  intact, then shifts the Search bar safely to the right on all
  non-home pages.
*/

@media (min-width: 1351px) {
  body:not([data-cmv-page="home"]) .cmv-site-search {
    top: 28px;
    left: 380px;
    right: 186px;
    max-width: 620px;
  }
}

/*
  Medium desktop safety:
  If the browser is not wide enough to place Search beside Back to Home,
  drop Search below the Back to Home button instead of forcing a collision.
*/

@media (min-width: 769px) and (max-width: 1350px) {
  body:not([data-cmv-page="home"]) .cmv-site-search {
    top: 76px;
    left: 44px;
    right: 94px;
    max-width: 560px;
    grid-template-columns: 1fr;
  }

  body:not([data-cmv-page="home"]) .cmv-search-kicker {
    display: none;
  }

  body:not([data-cmv-page="home"]) .cmv-search-status {
    grid-column: 1;
  }
}

/*
  Archive modal safety:
  Keep the Search bar from floating above Archive modal work.
*/

body.archive-modal-open .cmv-site-search {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_27.2.1 — SEARCH BAR / BACK HOME COLLISION REPAIR */
/* 🟩 GREEN HIGHLIGHT START: CMV_27.3 — FAQ / QUESTIONS & ANSWERS SECTION */

/*
  Purpose:
  Add a clean FAQ screen without disturbing Portfolio, Archive, Contact,
  Search, Mode, Sound, or World Map systems.
*/

.faq .portfolio-copy {
  max-width: 760px;
}

.faq-grid {
  width: min(980px, 100%);
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.faq-card {
  position: relative;
  border: 1px solid rgba(0,0,0,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,255,255,.18)),
    radial-gradient(circle at 14% 18%, rgba(227,34,34,.075), transparent 30%);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.42),
    0 18px 40px rgba(0,0,0,.06);
  overflow: hidden;
  transition:
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

.faq-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .45;
  pointer-events: none;
}

.faq-card[open],
.faq-card:hover {
  border-color: rgba(227,34,34,.28);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.50),
    0 22px 48px rgba(227,34,34,.07);
  transform: translateY(-2px);
}

.faq-card summary {
  position: relative;
  z-index: 1;
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}

.faq-card summary::-webkit-details-marker {
  display: none;
}

.faq-card summary::after {
  content: "+";
  color: var(--red);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  transition: transform .28s ease;
}

.faq-card[open] summary::after {
  transform: rotate(45deg);
}

.faq-card summary span {
  color: var(--red);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .35em;
}

.faq-card summary strong {
  color: rgba(18,18,18,.78);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .34em;
  line-height: 1.9;
}

.faq-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 24px 24px 72px;
  max-width: 640px;
  color: rgba(20,20,20,.54);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 2;
  text-transform: uppercase;
}

/* Light mode protection */
body:not(.theme-night):not(.theme-beige) .faq-card {
  border-color: rgba(0,0,0,.12);
}

body:not(.theme-night):not(.theme-beige) .faq-card summary strong {
  color: rgba(18,18,18,.78);
}

/* Beige mode readability */
body.theme-beige .faq-card {
  border-color: rgba(92,59,32,.14);
  background:
    linear-gradient(135deg, rgba(255,248,235,.72), rgba(248,231,199,.34)),
    radial-gradient(circle at 14% 18%, rgba(160,62,28,.08), transparent 30%);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.34),
    0 18px 40px rgba(92,59,32,.07);
}

body.theme-beige .faq-card[open],
body.theme-beige .faq-card:hover {
  border-color: rgba(160,62,28,.30);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.38),
    0 22px 48px rgba(92,59,32,.10);
}

body.theme-beige .faq-card summary strong {
  color: rgba(66,43,25,.80);
}

body.theme-beige .faq-card p {
  color: rgba(74,49,29,.58);
}

/* Night mode readability */
body.theme-night .faq-card {
  border-color: rgba(255,255,255,.11);
  background:
    linear-gradient(135deg, rgba(255,255,255,.050), rgba(255,255,255,.018)),
    radial-gradient(circle at 14% 18%, rgba(227,34,34,.09), transparent 30%);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.025),
    0 20px 46px rgba(0,0,0,.22);
}

body.theme-night .faq-card::before {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
}

body.theme-night .faq-card[open],
body.theme-night .faq-card:hover {
  border-color: rgba(227,34,34,.34);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.035),
    0 22px 52px rgba(227,34,34,.10);
}

body.theme-night .faq-card summary strong {
  color: rgba(248,248,245,.82);
}

body.theme-night .faq-card p {
  color: rgba(248,248,245,.54);
}

/* Mobile safety */
@media (max-width: 768px) {
  .faq-grid {
    width: 100%;
    margin-top: 34px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .faq-card summary {
    min-height: 68px;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 18px 18px;
  }

  .faq-card summary span {
    grid-column: 1 / -1;
    font-size: 8px;
  }

  .faq-card summary strong {
    font-size: 9px;
    letter-spacing: .24em;
  }

  .faq-card p {
    padding: 0 18px 20px;
    font-size: 9px;
    letter-spacing: .18em;
    line-height: 1.9;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_27.3 — FAQ / QUESTIONS & ANSWERS SECTION */
/* 🟩 GREEN HIGHLIGHT START: CMV_27.4 — PORTFOLIO CLICKABLE PLACEHOLDER / COMING SOON MODAL RESTORE */

/*
  Purpose:
  Restore the actual Coming Soon modal layer for Portfolio placeholder cards.
  The CSS/JS foundation already existed, but the modal HTML was missing.
  This safety layer prevents Search, Back Home, Mode, and Sound controls
  from floating above the Coming Soon modal.
*/

body.coming-soon-modal-open .cmv-site-search,
body.coming-soon-modal-open .back-home,
body.coming-soon-modal-open #themeMenu.theme-menu-v12,
body.coming-soon-modal-open #soundToggle.sound-switch {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.portfolio-coming-soon-modal .coming-soon-panel {
  isolation: isolate;
}

.portfolio-coming-soon-modal .coming-soon-preview {
  border: 1px solid rgba(255,255,255,.14);
}

.portfolio-coming-soon-modal .coming-soon-preview-label {
  max-width: calc(100% - 52px);
  line-height: 1.8;
}

body.theme-beige .portfolio-coming-soon-modal .coming-soon-panel {
  background:
    radial-gradient(circle at 72% 38%, rgba(160,62,28,.10), transparent 28%),
    rgba(255,248,235,.88);
}

body.theme-beige .portfolio-coming-soon-modal .coming-soon-modal-backdrop {
  background: rgba(248,231,199,.76);
}

body.theme-beige .portfolio-coming-soon-modal #comingSoonTitle {
  color: rgba(66,43,25,.86);
}

body.theme-beige .portfolio-coming-soon-modal #comingSoonMeta,
body.theme-beige .portfolio-coming-soon-modal .coming-soon-copy-panel {
  color: rgba(74,49,29,.62);
}

@media (max-width: 768px) {
  body.coming-soon-modal-open .mobile-identity-footer {
    display: none !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_27.4 — PORTFOLIO CLICKABLE PLACEHOLDER / COMING SOON MODAL RESTORE */
/* 🟩 GREEN HIGHLIGHT START: CMV_27.4.1 — DESKTOP PORTFOLIO MODAL TEXT CROP REPAIR */

/*
  Purpose:
  Desktop-only correction for Portfolio Coming Soon modal text.
  Fixes NIGHT LUXE / 004 AFTER DARK meta text visually colliding
  with the large title inside the Coming Soon modal.

  Mobile is intentionally untouched because the mobile layout is already working.
*/

@media (min-width: 769px) {
  .portfolio-coming-soon-modal .coming-soon-panel {
    grid-template-columns: minmax(300px, 340px) minmax(420px, 1fr);
    gap: 24px 42px;
  }

  .portfolio-coming-soon-modal #comingSoonTitle {
    max-width: 330px;
    margin-top: 40px;
    font-size: clamp(24px, 2.35vw, 34px);
    letter-spacing: .34em;
    line-height: 1.38;
    overflow: visible;
  }

  .portfolio-coming-soon-modal #comingSoonMeta {
    max-width: 320px;
    margin-top: 164px;
    font-size: 8.5px;
    letter-spacing: .27em;
    line-height: 1.9;
    overflow: visible;
  }

  .portfolio-coming-soon-modal .coming-soon-copy-panel {
    margin-top: 6px;
    max-width: 340px;
    font-size: 10px;
    letter-spacing: .26em;
    line-height: 2.05;
  }

  .portfolio-coming-soon-modal .coming-soon-status-row {
    margin-top: 8px;
  }

  .portfolio-coming-soon-modal .coming-soon-preview {
    min-height: 370px;
  }

  .portfolio-coming-soon-modal .coming-soon-preview-label {
    max-width: calc(100% - 52px);
    white-space: normal;
    line-height: 1.8;
  }
}

/*
  Desktop Portfolio card text safety:
  Prevents long labels from appearing visually clipped in TILE or WIDE view.
*/

@media (min-width: 769px) {
  .portfolio .soon-grid > .coming-soon-card strong,
  .portfolio .soon-grid > .coming-soon-card small {
    overflow: visible !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  .portfolio .soon-grid.portfolio-view-tile > .coming-soon-card {
    padding-bottom: 30px !important;
  }

  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card small {
    padding-right: 10px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_27.4.1 — DESKTOP PORTFOLIO MODAL TEXT CROP REPAIR */
/* 🟩 GREEN HIGHLIGHT START: CMV_27.5 — SERVICES CLICKABLE PLACEHOLDER / SERVICE INFO POLISH */

/*
  Purpose:
  Make the Services placeholder cards feel more intentional without building
  full pricing pages yet. This keeps the shared Coming Soon modal system,
  but gives Services its own visual tone.
*/

.service-grid-v275 {
  align-items: stretch;
}

.service-grid-v275 > .service-coming-soon-card {
  position: relative;
  min-height: 188px;
  overflow: hidden;
}

.service-grid-v275 > .service-coming-soon-card::before {
  content: "SERVICE MODULE";
  position: absolute;
  top: 18px;
  right: 18px;
  color: rgba(227,34,34,.62);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .32em;
  opacity: .88;
}

.service-grid-v275 > .service-coming-soon-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(227,34,34,.42), transparent);
  opacity: .72;
}

.service-grid-v275 > .service-coming-soon-card strong {
  max-width: 260px;
  line-height: 1.75;
  letter-spacing: .34em;
}

.service-grid-v275 > .service-coming-soon-card small {
  max-width: 300px;
  line-height: 1.8;
  letter-spacing: .34em;
}

.service-grid-v275 > .service-coming-soon-card:hover::before,
.service-grid-v275 > .service-coming-soon-card:focus-visible::before {
  opacity: 1;
}

/* Service-specific Coming Soon modal tone */
.coming-soon-modal-v234[data-soon-type="service"] .coming-soon-panel {
  background:
    radial-gradient(circle at 72% 38%, rgba(227,34,34,.11), transparent 30%),
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.22), transparent 32%),
    rgba(12,12,12,.90);
}

.coming-soon-modal-v234[data-soon-type="service"] #comingSoonKicker::before {
  content: "04 / SERVICES";
  display: block;
  margin-bottom: 10px;
  color: rgba(227,34,34,.90);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .38em;
}

.coming-soon-modal-v234[data-soon-type="service"] .coming-soon-preview {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.15), transparent 32%),
    rgba(0,0,0,.34);
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.coming-soon-modal-v234[data-soon-type="service"] .coming-soon-status-row strong {
  color: rgba(227,34,34,.88);
}

/* Beige mode service modal readability */
body.theme-beige .coming-soon-modal-v234[data-soon-type="service"] .coming-soon-panel {
  background:
    radial-gradient(circle at 72% 38%, rgba(160,62,28,.13), transparent 30%),
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.36), transparent 32%),
    rgba(255,248,235,.90);
}

body.theme-beige .coming-soon-modal-v234[data-soon-type="service"] .coming-soon-preview {
  background:
    linear-gradient(rgba(92,59,32,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,59,32,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(160,62,28,.13), transparent 32%),
    rgba(255,248,235,.36);
  background-size: 42px 42px, 42px 42px, auto, auto;
}

/* Light mode service modal readability */
body:not(.theme-night):not(.theme-beige) .coming-soon-modal-v234[data-soon-type="service"] .coming-soon-panel {
  background:
    radial-gradient(circle at 72% 38%, rgba(227,34,34,.10), transparent 30%),
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.42), transparent 32%),
    rgba(248,248,245,.92);
}

/* Desktop service card safety */
@media (min-width: 769px) {
  .services .service-grid-v275 > .service-coming-soon-card {
    padding-top: 34px;
  }

  .services .service-grid-v275 > .service-coming-soon-card span,
  .services .service-grid-v275 > .service-coming-soon-card strong,
  .services .service-grid-v275 > .service-coming-soon-card small {
    position: relative;
    z-index: 1;
  }
}

/* Mobile safety */
@media (max-width: 768px) {
  .service-grid-v275 > .service-coming-soon-card {
    min-height: 150px;
  }

  .service-grid-v275 > .service-coming-soon-card::before {
    top: 14px;
    right: 14px;
    font-size: 6.5px;
    letter-spacing: .24em;
  }

  .service-grid-v275 > .service-coming-soon-card strong {
    letter-spacing: .24em;
  }

  .service-grid-v275 > .service-coming-soon-card small {
    letter-spacing: .22em;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_27.5 — SERVICES CLICKABLE PLACEHOLDER / SERVICE INFO POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_27.6 — ARCHIVE DESKTOP CONTROL ALIGNMENT PATCH */

/*
  Purpose:
  Desktop-only Archive repair after CMV_27.5.

  Fixes:
  - EXIT FULL looked too small.
  - CLOSE looked too large.
  - EXIT FULL and CLOSE now share a consistent button language.
  - Archive page content shifts slightly right so text/cards do not touch the left edge.

  Preserved:
  - Mobile Archive layout.
  - Archive 005 lock / cipher behavior.
  - Existing fullscreen toggle logic.
  - Archive video player system.
  - Future video size expansion reserved for CMV_27.7.
*/

@media (min-width: 769px) {
  /*
    Desktop Archive page breathing room.
    This shifts the Archive header/list slightly inward without changing mobile.
  */

  .archive.screen.active .archive-system {
    padding-left: clamp(30px, 3.2vw, 56px) !important;
    padding-right: clamp(24px, 2.4vw, 46px) !important;
    box-sizing: border-box !important;
  }

  .archive.screen.active .archive-header,
  .archive.screen.active .archive-directory {
    max-width: 1240px !important;
  }

  .archive.screen.active .archive-dossier {
    padding-left: 18px !important;
    box-sizing: border-box !important;
  }

  .archive.screen.active .archive-directory.view-grid .archive-dossier,
  .archive.screen.active .archive-directory.view-large .archive-dossier,
  .archive.screen.active .archive-directory.view-xl .archive-dossier {
    padding-left: 22px !important;
  }

  /*
    Desktop Archive modal control alignment.
    CLOSE and FULL SCREEN / EXIT FULL now feel like one matched control system.
  */
  /* 🟩 GREEN HIGHLIGHT START: CMV_27.6.1 — ARCHIVE MODAL CONTROL SIZE BUMP */

  #modal.open .archive-close-v12,
  #modal.open .archive-fullscreen-toggle {
    height: 44px !important;
    min-height: 44px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .20em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    box-sizing: border-box !important;
  }

  #modal.open .archive-close-v12 {
    min-width: 96px !important;
    top: 32px !important;
    right: 38px !important;
  }

  #modal.open .archive-fullscreen-toggle {
    min-width: 142px !important;
    top: 32px !important;
    right: 152px !important;
  }

  #modal.open .archive-fullscreen-toggle[aria-pressed="true"] {
    min-width: 126px !important;
  }

  /* 🟥 RED HIGHLIGHT END: CMV_27.6.1 — ARCHIVE MODAL CONTROL SIZE BUMP */
}

/* 🟥 RED HIGHLIGHT END: CMV_27.6 — ARCHIVE DESKTOP CONTROL ALIGNMENT PATCH */


/* 🟩 GREEN HIGHLIGHT START: CMV_27.7 — ARCHIVE VIDEO SIZE CONTROL SYSTEM */

/*
  Purpose:
  Add desktop Archive video size controls:
  - ORIGINAL: smaller classic modal/video scale.
  - WIDE: current default layout.
  - EXTRA WIDE: previous visual fullscreen / XL layout.
  - FULL VIEW: fills the browser viewport while keeping the OS window/menu.
  - BROWSER FULL: uses the browser Fullscreen API like YouTube when supported.

  Mobile is intentionally protected: the existing mobile FULL SCREEN button remains.
*/

@media (min-width: 769px) {
  #modal.open .archive-mobile-fullscreen-toggle,
  #modal.open #archiveFullscreenToggle {
    display: none !important;
  }

  /* 🟩 GREEN HIGHLIGHT START: CMV_28.5.11 — EXTERNAL PLAYER CONTROL BAR RESTORE */

  /*
    Purpose:
    Restore the CMV_28.5.6 external Archive control bar height and placement,
    but keep the newer player options.
  */

  #modal.open .archive-video-size-controls.archive-video-player-dock-external {
    position: fixed;
    top: 32px;
    left: var(--archive-video-control-left, 38px);
    z-index: 5025;
    display: flex;
    align-items: center;
    gap: 7px;
    width: auto;
    max-width: min(var(--archive-video-control-width, calc(100vw - 220px)), calc(100vw - 76px));
    padding: 5px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 38px rgba(0,0,0,.28);
    pointer-events: auto;
    overflow: visible;
  }

  .archive-player-bar-label,
  .archive-player-bar-btn,
  .archive-quality-option {
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 0 13px;
    background: rgba(255,255,255,.035);
    color: rgba(248,248,245,.64);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .16em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition:
      color .24s ease,
      border-color .24s ease,
      background .24s ease,
      transform .24s ease,
      box-shadow .24s ease;
  }

  .archive-player-bar-label {
    cursor: default;
    color: rgba(255,255,255,.38);
    border-color: rgba(255,255,255,.06);
    background: rgba(255,255,255,.025);
  }

  .archive-player-bar-btn:hover,
  .archive-player-bar-btn:focus-visible,
  .archive-player-bar-btn.active,
  .archive-quality-option:hover,
  .archive-quality-option:focus-visible,
  .archive-quality-option.active {
    color: var(--red);
    border-color: rgba(227,34,34,.42);
    background: rgba(227,34,34,.13);
    box-shadow: inset 0 0 14px rgba(227,34,34,.08);
    outline: none;
  }

  .archive-player-bar-btn:active,
  .archive-quality-option:active {
    transform: scale(.98);
  }

  .archive-player-bar-btn.is-unavailable {
    opacity: .45;
  }

  .archive-player-quality-control {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .archive-quality-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 118px;
    display: none;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(0,0,0,.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 42px rgba(0,0,0,.38);
  }

  .archive-quality-menu.open {
    display: grid;
    gap: 5px;
  }

  .archive-quality-option {
    width: 100%;
    min-height: 28px;
    justify-content: center;
    padding: 0 9px;
    font-size: 6.5px;
    letter-spacing: .10em;
    background: rgba(255,255,255,.045);
  }

  @media (max-width: 1100px) {
    #modal.open .archive-video-size-controls.archive-video-player-dock-external {
      gap: 5px;
      padding: 5px;
    }

    .archive-player-bar-label,
    .archive-player-bar-btn {
      min-height: 31px;
      padding: 0 9px;
      font-size: 6.2px;
      letter-spacing: .10em;
    }
  }

  @media (max-width: 768px) {
    #modal.open .archive-video-size-controls.archive-video-player-dock-external {
      display: none !important;
    }
  }

  /* 🟥 RED HIGHLIGHT END: CMV_28.5.11 — EXTERNAL PLAYER CONTROL BAR RESTORE */

  .archive-size-btn {
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 0 13px;
    background: rgba(255,255,255,.035);
    color: rgba(248,248,245,.64);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      color .24s ease,
      border-color .24s ease,
      background .24s ease,
      transform .24s ease,
      box-shadow .24s ease;
  }

  .archive-size-btn:hover,
  .archive-size-btn:focus-visible,
  .archive-size-btn.active {
    color: var(--red);
    border-color: rgba(227,34,34,.42);
    background: rgba(227,34,34,.13);
    box-shadow: inset 0 0 14px rgba(227,34,34,.08);
    outline: none;
  }

  .archive-size-btn:active {
    transform: scale(.98);
  }

  /*
    ORIGINAL:
    Smaller classic viewing mode.
  */
  #modal.open.archive-size-original.modal-v12 {
    padding: 78px 52px 46px !important;
  }

  #modal.open.archive-size-original .archive-modal-panel-v12,
  #modal.open.archive-size-original .archive-modal-panel,
  #modal.open.archive-size-original .modal-panel {
    width: min(1220px, calc(100vw - 140px)) !important;
    max-width: 1220px !important;
    grid-template-columns: minmax(330px, 400px) minmax(560px, 680px) !important;
    gap: 38px !important;
  }

  #modal.open.archive-size-original .archive-video-frame-v14p2,
  #modal.open.archive-size-original .archive-video-frame-v12 {
    min-height: 360px !important;
    max-height: min(54svh, 520px) !important;
  }

  /*
    WIDE:
    Current default layout. Kept intentionally light.
  */
  #modal.open.archive-size-wide .archive-video-frame-v14p2,
  #modal.open.archive-size-wide .archive-video-frame-v12 {
    min-height: 430px !important;
  }

  /*
    EXTRA WIDE:
    Uses the existing archive-fullscreen-active layout from the previous patch.
  */
  #modal.open.archive-size-extra-wide .archive-video-frame-v14p2,
  #modal.open.archive-size-extra-wide .archive-video-frame-v12 {
    min-height: 520px !important;
  }

  /*
    FULL VIEW:
    Browser-window fullscreen. This covers the visible site area but keeps
    the operating system / Windows menu available.
  */
  #modal.open.archive-size-full-view.modal-v12 {
    padding: 84px 18px 18px !important;
    overflow: hidden !important;
  }

  #modal.open.archive-size-full-view .archive-modal-panel-v12,
  #modal.open.archive-size-full-view .archive-modal-panel,
  #modal.open.archive-size-full-view .modal-panel {
    width: 100% !important;
    max-width: none !important;
    height: calc(100svh - 104px) !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #modal.open.archive-size-full-view .archive-access-panel {
    display: none !important;
  }

  #modal.open.archive-size-full-view .archive-video-frame-v14p2,
  #modal.open.archive-size-full-view .archive-video-frame-v12 {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 18px !important;
  }

  #modal.open.archive-size-full-view .archive-real-video {
    object-fit: contain !important;
  }

  /*
    Browser fullscreen:
    True browser fullscreen similar to YouTube. This affects only the
    frame that enters fullscreen.
  */
  .archive-video-frame:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: #000 !important;
  }

  .archive-video-frame:fullscreen .archive-real-video {
    object-fit: contain !important;
  }

  .archive-video-frame:fullscreen .archive-dynamic-preview,
  .archive-video-frame:fullscreen .palindrome-cipher {
    width: 100% !important;
    height: 100% !important;
    inset: 0 !important;
  }
}

/* CMV_27.8.1 — Archive video controls use a dark player-control palette in all modes */
body.theme-night .archive-video-size-controls,
body.theme-beige .archive-video-size-controls,
body:not(.theme-night):not(.theme-beige) .archive-video-size-controls {
  border-color: rgba(255,255,255,.13);
  background: rgba(0,0,0,.84);
  box-shadow: 0 16px 38px rgba(0,0,0,.30);
}

body.theme-night .archive-size-btn,
body.theme-beige .archive-size-btn,
body:not(.theme-night):not(.theme-beige) .archive-size-btn {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: rgba(248,248,245,.66);
}

body.theme-night .archive-size-btn:hover,
body.theme-night .archive-size-btn:focus-visible,
body.theme-night .archive-size-btn.active,
body.theme-beige .archive-size-btn:hover,
body.theme-beige .archive-size-btn:focus-visible,
body.theme-beige .archive-size-btn.active,
body:not(.theme-night):not(.theme-beige) .archive-size-btn:hover,
body:not(.theme-night):not(.theme-beige) .archive-size-btn:focus-visible,
body:not(.theme-night):not(.theme-beige) .archive-size-btn.active {
  color: var(--red);
  border-color: rgba(227,34,34,.42);
  background: rgba(227,34,34,.13);
}

/* Mobile safety:
   Keep the old single FULL SCREEN / EXIT FULL button on mobile. */
@media (max-width: 768px) {
  .archive-video-size-controls {
    display: none !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_27.7 — ARCHIVE VIDEO SIZE CONTROL SYSTEM */
/* 🟩 GREEN HIGHLIGHT START: CMV_27.8.1 — ARCHIVE CONTROL ALIGNMENT + MOBILE LIST REPAIR */

/*
  Purpose:
  - Keep desktop LIST / WIDE LIST / GRID / LARGE / XL.
  - Revert mobile top navigation back to CMV_27.7 behavior.
  - Keep mobile LIST compact, but restore thumbnail, subtitle, and status.
  - Make mobile WIDE LIST look like the old CMV_27.7 mobile LIST.
*/

.mobile-nav-toggle {
  display: none !important;
}

/* DESKTOP — Archive Wide List stays active */
@media (min-width: 769px) {
  .archive-view-toggle-v12 {
    max-width: 100%;
    flex-wrap: nowrap;
  }

  .archive-view-toggle-v12 .view-btn {
    min-height: 40px;
    padding-left: 13px;
    padding-right: 13px;
    white-space: nowrap;
  }

  .archive-directory.view-wide-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: none;
  }

  .archive-directory.view-wide-list .archive-dossier {
    grid-template-columns: 220px 104px minmax(300px, 1fr) 310px 52px;
    gap: 28px;
    min-height: 118px;
    padding: 0 24px 0 0;
    border-top: 1px solid rgba(0,0,0,.095);
    background:
      linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.15));
  }

  .archive-directory.view-wide-list .archive-dossier:last-child {
    border-bottom: 1px solid rgba(0,0,0,.095);
  }

  .archive-directory.view-wide-list .archive-thumb {
    width: 220px;
    height: 112px;
  }

  .archive-directory.view-wide-list .archive-info h3 {
    font-size: 17px;
    letter-spacing: .50em;
  }

  .archive-directory.view-wide-list .archive-info p {
    margin-top: 10px;
    font-size: 9px;
    letter-spacing: .36em;
  }

  .archive-directory.view-wide-list .archive-status,
  .archive-directory.view-wide-list .archive-lock-status,
  .archive-directory.view-wide-list .archive-omega-status {
    justify-self: start;
    align-self: center;
  }

  .archive-directory.view-wide-list .archive-arrow {
    align-self: center;
  }
}

/* 🟩 GREEN HIGHLIGHT START: CMV_27.8.3 — FINAL MOBILE ARCHIVE / NAV QA LOCK */

/*
  Purpose:
  Finalize CMV_27 mobile navigation after side drawer testing.
  The active mobile navigation system is the visible 01–08 top nav.
  The side drawer remains parked for a future CMV_32 side-pocket experiment.
*/

.mobile-side-drawer,
.mobile-nav-toggle {
  display: none !important;
}

body.mobile-nav-open::before {
  content: none !important;
  display: none !important;
}

body.mobile-nav-open {
  overflow: auto !important;
}

@media (max-width: 768px) {
  .sidebar .nav {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin-top: 2px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-right: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .sidebar .nav::before {
    content: none !important;
    display: none !important;
  }

  .sidebar .nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 40px !important;
    padding: 5px 3px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,.13) !important;
    background: transparent !important;
    color: rgba(18,18,18,.74) !important;
    text-align: center !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(227,34,34,.12) !important;
  }

  .sidebar .nav-num {
    display: block !important;
    font-size: 5.4px !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    opacity: .62 !important;
    color: currentColor !important;
  }

  .sidebar .nav-label {
    display: block !important;
    font-size: 5.9px !important;
    line-height: 1 !important;
    letter-spacing: .105em !important;
    white-space: nowrap !important;
    text-align: center !important;
    color: currentColor !important;
  }

  .sidebar .nav a.active {
    border-color: rgba(227,34,34,.34) !important;
    background: rgba(227,34,34,.045) !important;
  }

  .sidebar .nav a.active .nav-num,
  .sidebar .nav a.active .nav-label {
    color: var(--red) !important;
    opacity: 1 !important;
  }
}

/* Theme support for locked mobile top nav */
@media (max-width: 768px) {
  body.theme-night .sidebar .nav a {
    border-color: rgba(255,255,255,.14) !important;
    color: rgba(248,248,245,.72) !important;
  }

  body.theme-night .sidebar .nav a.active {
    border-color: rgba(227,34,34,.42) !important;
    background: rgba(227,34,34,.09) !important;
  }

  body.theme-beige .sidebar .nav a {
    border-color: rgba(92,59,32,.16) !important;
    color: rgba(66,43,25,.76) !important;
  }

  body.theme-beige .sidebar .nav a.active {
    border-color: rgba(227,34,34,.34) !important;
    background: rgba(227,34,34,.055) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_27.8.3 — FINAL MOBILE ARCHIVE / NAV QA LOCK */

/* MOBILE — Archive view controls now support 5 buttons */
@media (max-width: 768px) {
  .archive-view-toggle-v12 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .archive-view-toggle-v12 .view-btn {
    min-height: 38px !important;
    padding: 8px 1px !important;
    font-size: 5.5px !important;
    letter-spacing: .045em !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* MOBILE — compact LIST with thumbnail / subtitle / status restored */
@media (max-width: 768px) {
  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-dossier {
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto 18px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 9px 10px !important;
    border-top: 1px solid rgba(0,0,0,.095) !important;
    background: rgba(255,255,255,.24) !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-thumb {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 10px !important;
  }

  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-num {
    display: none !important;
  }

  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-info {
    min-width: 0 !important;
  }

  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-info h3 {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: 8px !important;
    letter-spacing: .15em !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-info p {
    display: block !important;
    margin-top: 3px !important;
    max-width: 100% !important;
    font-size: 5.8px !important;
    letter-spacing: .10em !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-status,
  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-lock-status,
  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-omega-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 72px !important;
    min-height: 24px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: 4.8px !important;
    letter-spacing: .07em !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-lock-icon-box {
    display: none !important;
  }

  .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-arrow {
    justify-self: end !important;
    font-size: 13px !important;
  }
}

/* MOBILE — WIDE LIST becomes the CMV_27.7 mobile LIST style */
@media (max-width: 768px) {
  .archive-directory.view-wide-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 32px !important;
  }

  .archive-directory.view-wide-list .archive-dossier {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: 12px !important;
    padding: 20px 0 !important;
    border-top: 1px solid rgba(0,0,0,.095) !important;
    background: transparent !important;
    text-align: left !important;
    overflow: visible !important;
  }

  .archive-directory.view-wide-list .archive-thumb {
    display: block !important;
    width: 100% !important;
    height: 145px !important;
    border-radius: 0 !important;
  }

  .archive-directory.view-wide-list .archive-num {
    display: block !important;
    align-self: start !important;
    font-size: 7px !important;
    letter-spacing: .14em !important;
  }

  .archive-directory.view-wide-list .archive-info {
    min-width: 0 !important;
  }

  .archive-directory.view-wide-list .archive-info h3 {
    font-size: 10px !important;
    letter-spacing: .22em !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  .archive-directory.view-wide-list .archive-info p {
    display: block !important;
    margin-top: 5px !important;
    font-size: 7px !important;
    letter-spacing: .14em !important;
    line-height: 1.45 !important;
  }

  .archive-directory.view-wide-list .archive-status,
  .archive-directory.view-wide-list .archive-lock-status,
  .archive-directory.view-wide-list .archive-omega-status {
    display: inline-flex !important;
    justify-self: start !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 6px !important;
    letter-spacing: .12em !important;
  }

  .archive-directory.view-wide-list .archive-arrow {
    justify-self: start !important;
    align-self: center !important;
  }
}

/* Theme readability for repaired mobile list / wide list */
body.theme-night .archive-directory.view-wide-list .archive-dossier,
body.theme-night .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-dossier {
  border-color: rgba(255,255,255,.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.020)) !important;
}

body.theme-beige .archive-directory.view-wide-list .archive-dossier,
body.theme-beige .archive-directory:not(.view-wide-list):not(.view-grid):not(.view-large):not(.view-xl) .archive-dossier {
  border-color: rgba(92,59,32,.14) !important;
  background:
    linear-gradient(135deg, rgba(255,248,235,.62), rgba(248,231,199,.26)) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_27.8.1 — ARCHIVE CONTROL ALIGNMENT + MOBILE LIST REPAIR */
/* 🟩 GREEN HIGHLIGHT START: CMV_27.8.1 — ARCHIVE CLOSE FLASH REPAIR */

/*
  Fix:
  Prevents the old/global CLOSE styling from briefly showing during modal close.
*/

#modal.modal-v12:not(.open) .archive-close-v12,
#modal.modal-v12:not(.open) .archive-fullscreen-toggle,
#modal.modal-v12:not(.open) .archive-video-size-controls {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_27.8.1 — ARCHIVE CLOSE FLASH REPAIR */


/* 🟩 GREEN HIGHLIGHT START: CMV_28.0 — REAL PORTFOLIO / FOOTAGE RELEASE SYSTEM FOUNDATION */

/*
  Purpose:
  Begin moving Portfolio from placeholder-only into a real media release system.
  This is a foundation layer: actual images/videos can be connected in later CMV_28 patches.
*/

.portfolio-copy-v28 {
  max-width: 640px;
}

.portfolio-release-status {
  width: min(100%, 640px);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  background:
    linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  box-shadow: inset 0 0 18px rgba(255,255,255,.22);
}

.portfolio-release-status span,
.portfolio-release-status em {
  color: rgba(16,16,16,.54);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-style: normal;
}

.portfolio-release-status strong {
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.portfolio-release-grid-v28 {
  position: relative;
}

.portfolio-release-grid-v28::before {
  content: "REAL MEDIA RELEASE FOUNDATION";
  position: absolute;
  left: 0;
  top: -24px;
  color: rgba(227,34,34,.72);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .36em;
  text-transform: uppercase;
}

.portfolio-release-card {
  position: relative;
  overflow: hidden;
}

.portfolio-release-card::before {
  content: attr(data-release-type);
}

.portfolio-release-card::after {
  opacity: .26;
}

.portfolio-release-badge {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(227,34,34,.26);
  border-radius: 999px;
  color: var(--red);
  background: rgba(227,34,34,.055);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .20em;
  line-height: 1;
  text-transform: uppercase;
  font-style: normal;
  pointer-events: none;
}

.portfolio .soon-grid.portfolio-view-wide > .portfolio-release-card {
  min-height: 132px;
  padding-right: 132px;
}

.portfolio .soon-grid.portfolio-view-wide > .portfolio-release-card .portfolio-release-badge {
  right: 22px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* Night mode */
body.theme-night .portfolio-release-status {
  border-color: rgba(255,255,255,.13);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 0 22px rgba(255,255,255,.035);
}

body.theme-night .portfolio-release-status span,
body.theme-night .portfolio-release-status em {
  color: rgba(248,248,245,.54);
}

body.theme-night .portfolio-release-card .portfolio-release-badge {
  border-color: rgba(227,34,34,.34);
  background: rgba(227,34,34,.10);
}

/* Beige mode */
body.theme-beige .portfolio-release-status {
  border-color: rgba(92,59,32,.16);
  background:
    linear-gradient(135deg, rgba(255,248,235,.68), rgba(248,231,199,.25));
}

body.theme-beige .portfolio-release-status span,
body.theme-beige .portfolio-release-status em {
  color: rgba(66,43,25,.58);
}

/* Mobile */
@media (max-width: 768px) {
  .portfolio-release-status {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 18px;
    padding: 12px;
  }

  .portfolio-release-status span,
  .portfolio-release-status strong,
  .portfolio-release-status em {
    font-size: 6px;
    letter-spacing: .20em;
  }

  .portfolio-release-grid-v28::before {
    position: relative;
    display: block;
    top: auto;
    margin-bottom: 12px;
    font-size: 6px;
    letter-spacing: .22em;
  }

  .portfolio-release-badge {
    right: 14px;
    bottom: 14px;
    min-height: 20px;
    font-size: 5.5px;
    letter-spacing: .16em;
  }

  .portfolio .soon-grid.portfolio-view-wide > .portfolio-release-card {
    padding-right: 28px;
  }

  .portfolio .soon-grid.portfolio-view-wide > .portfolio-release-card .portfolio-release-badge {
    top: auto;
    right: 14px;
    bottom: 14px;
    transform: none;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_28.0 — REAL PORTFOLIO / FOOTAGE RELEASE SYSTEM FOUNDATION */
/* 🟩 GREEN HIGHLIGHT START: CMV_28.1 — PORTFOLIO RELEASE MODAL COPY + MEDIA SLOT POLISH */

/*
  Purpose:
  Upgrade the Portfolio modal from generic Coming Soon language into a staged CMV media release slot.
  This does not touch Archive, Archive 005, mobile nav, globe, search, services logic, or lock behavior.
*/

.portfolio-release-modal-v281 .coming-soon-panel {
  overflow: hidden;
}

.portfolio-release-modal-v281[data-soon-type="portfolio"] .coming-soon-panel {
  background:
    radial-gradient(circle at 72% 38%, rgba(227,34,34,.14), transparent 28%),
    radial-gradient(circle at 20% 84%, rgba(0,0,0,.08), transparent 26%),
    rgba(248,248,245,.90);
}

.portfolio-media-slot-v281 {
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 50% 44%, rgba(227,34,34,.20), transparent 28%),
    linear-gradient(135deg, #030303, #191919 58%, #050505);
}

.portfolio-media-slot-v281::after {
  content: attr(data-release-type);
  position: absolute;
  left: 50%;
  top: 28%;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(255,255,255,.16);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .42em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.portfolio-media-slot-topline {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 20px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,.72);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.portfolio-media-slot-topline strong {
  color: var(--red);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .28em;
}

.portfolio-media-slot-corners {
  position: absolute;
  inset: 22px;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}

.portfolio-media-slot-corners::before,
.portfolio-media-slot-corners::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border-color: rgba(227,34,34,.42);
  border-style: solid;
  pointer-events: none;
}

.portfolio-media-slot-corners::before {
  left: -1px;
  top: -1px;
  border-width: 1px 0 0 1px;
}

.portfolio-media-slot-corners::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}

.portfolio-release-status-row-v281 {
  flex-wrap: wrap;
  gap: 12px 18px;
}

.portfolio-release-status-row-v281 em {
  color: rgba(17,17,17,.58);
  font-style: normal;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
}

body.theme-night .portfolio-release-modal-v281[data-soon-type="portfolio"] .coming-soon-panel {
  background:
    radial-gradient(circle at 72% 38%, rgba(227,34,34,.16), transparent 28%),
    radial-gradient(circle at 20% 84%, rgba(255,255,255,.045), transparent 26%),
    rgba(10,10,10,.90);
}

body.theme-night .portfolio-release-status-row-v281 em {
  color: rgba(248,248,245,.54);
}

body.theme-beige .portfolio-release-modal-v281[data-soon-type="portfolio"] .coming-soon-panel {
  background:
    radial-gradient(circle at 72% 38%, rgba(227,34,34,.11), transparent 28%),
    radial-gradient(circle at 20% 84%, rgba(92,59,32,.08), transparent 26%),
    rgba(255,248,235,.90);
}

body.theme-beige .portfolio-release-status-row-v281 em {
  color: rgba(66,43,25,.58);
}

@media (max-width: 768px) {
  .portfolio-media-slot-topline {
    left: 18px;
    right: 18px;
    top: 17px;
    display: grid;
    gap: 7px;
    font-size: 5.8px;
    letter-spacing: .20em;
  }

  .portfolio-media-slot-topline strong {
    font-size: 5.8px;
    letter-spacing: .18em;
  }

  .portfolio-media-slot-v281::after {
    top: 30%;
    max-width: 80%;
    font-size: 7px;
    letter-spacing: .22em;
    text-align: center;
    white-space: normal;
    line-height: 1.7;
  }

  .portfolio-media-slot-corners {
    inset: 18px;
  }

  .portfolio-release-status-row-v281 em {
    font-size: 7px;
    letter-spacing: .18em;
    line-height: 1.7;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_28.1 — PORTFOLIO RELEASE MODAL COPY + MEDIA SLOT POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_28.2 — PORTFOLIO MEDIA ASSET HOOKS / FIRST REAL FOOTAGE SLOT */

/*
  Purpose:
  Let Portfolio release modals display real video or image media when a card has media enabled.
  Safe fallback remains active when data-media-enabled="false" or when no media source is provided.
*/

.portfolio-real-media-shell {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .45s ease,
    filter .45s ease;
}

.portfolio-real-media-video,
.portfolio-real-media-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .92;
  filter:
    contrast(1.08)
    saturate(.82)
    brightness(.74);
}

.portfolio-media-slot-v282.has-real-media .portfolio-real-media-shell {
  opacity: 1;
}

.portfolio-media-slot-v282.has-real-media::after {
  z-index: 4;
  top: 24%;
  color: rgba(255,255,255,.22);
  text-shadow: 0 0 18px rgba(0,0,0,.55);
}

.portfolio-media-slot-v282.has-real-media::before {
  z-index: 2;
  background:
    linear-gradient(transparent, rgba(0,0,0,.44)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.03) 19px);
}

.portfolio-media-slot-v282 .coming-soon-scan {
  z-index: 5;
}

.portfolio-media-slot-v282 .portfolio-media-slot-topline,
.portfolio-media-slot-v282 .portfolio-media-slot-corners,
.portfolio-media-slot-v282 .coming-soon-play,
.portfolio-media-slot-v282 .coming-soon-preview-label {
  z-index: 6;
}

.portfolio-media-slot-v282.has-real-media .coming-soon-play {
  width: 66px;
  height: 66px;
  border-color: rgba(255,255,255,.70);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
}

.portfolio-media-slot-v282.has-real-media .coming-soon-preview-label {
  color: rgba(255,255,255,.86);
  text-shadow: 0 0 14px rgba(0,0,0,.62);
}

.portfolio-media-slot-v282.has-real-media .portfolio-media-slot-topline {
  color: rgba(255,255,255,.82);
  text-shadow: 0 0 12px rgba(0,0,0,.62);
}

.portfolio-media-slot-v282.has-real-media .portfolio-media-slot-topline strong {
  color: rgba(255,92,92,.94);
}

body.theme-beige .portfolio-media-slot-v282.has-real-media .portfolio-real-media-video,
body.theme-beige .portfolio-media-slot-v282.has-real-media .portfolio-real-media-image {
  filter:
    contrast(1.02)
    saturate(.74)
    brightness(.78)
    sepia(.10);
}

body.theme-night .portfolio-media-slot-v282.has-real-media .portfolio-real-media-video,
body.theme-night .portfolio-media-slot-v282.has-real-media .portfolio-real-media-image {
  filter:
    contrast(1.14)
    saturate(.74)
    brightness(.62);
}

@media (max-width: 768px) {
  .portfolio-media-slot-v282.has-real-media .coming-soon-play {
    width: 56px;
    height: 56px;
  }

  .portfolio-media-slot-v282.has-real-media .coming-soon-play span {
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 15px;
  }

  .portfolio-real-media-video,
  .portfolio-real-media-image {
    opacity: .88;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_28.2 — PORTFOLIO MEDIA ASSET HOOKS / FIRST REAL FOOTAGE SLOT */
/* 🟩 GREEN HIGHLIGHT START: CMV_28.3 — PORTFOLIO MEDIA FAILSAFE + SLOT 001 QA LOCK */

/*
  Purpose:
  Add visible media loading / ready / error states for Portfolio release slots.
  This prevents broken-looking media frames if a file path is activated before the actual MP4/JPG is uploaded.
*/

.portfolio-media-slot-v283.media-loading .portfolio-media-slot-topline strong {
  color: rgba(255,255,255,.82);
}

.portfolio-media-slot-v283.media-ready .portfolio-media-slot-topline strong {
  color: rgba(129,255,182,.92);
}

.portfolio-media-slot-v283.media-error {
  background:
    radial-gradient(circle at 50% 44%, rgba(227,34,34,.15), transparent 28%),
    linear-gradient(135deg, #030303, #141414 58%, #050505);
}

.portfolio-media-slot-v283.media-error .portfolio-real-media-shell {
  opacity: 0 !important;
  visibility: hidden !important;
}

.portfolio-media-slot-v283.media-error::after {
  content: "MEDIA PENDING";
  top: 29%;
  color: rgba(255,255,255,.20);
  text-shadow: 0 0 18px rgba(0,0,0,.55);
}

.portfolio-media-slot-v283.media-error .coming-soon-play {
  border-color: rgba(227,34,34,.58);
  background: rgba(227,34,34,.08);
}

.portfolio-media-slot-v283.media-error .coming-soon-preview-label {
  color: rgba(255,255,255,.72);
}

.portfolio-media-slot-v283.media-loading .coming-soon-scan {
  opacity: .82;
}

.portfolio-media-slot-v283.media-ready .coming-soon-scan {
  opacity: .35;
}

.portfolio-media-slot-v283.media-error .coming-soon-scan {
  opacity: .55;
}

body.theme-beige .portfolio-media-slot-v283.media-error {
  background:
    radial-gradient(circle at 50% 44%, rgba(227,34,34,.12), transparent 28%),
    linear-gradient(135deg, #140f0a, #24180f 58%, #100b07);
}

body.theme-night .portfolio-media-slot-v283.media-error {
  background:
    radial-gradient(circle at 50% 44%, rgba(227,34,34,.16), transparent 28%),
    linear-gradient(135deg, #020202, #101010 58%, #000);
}

@media (max-width: 768px) {
  .portfolio-media-slot-v283.media-error::after {
    top: 31%;
    font-size: 7px;
    letter-spacing: .22em;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_28.3 — PORTFOLIO MEDIA FAILSAFE + SLOT 001 QA LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_28.4 — SLOT 001 ACTIVATION READY / POSTER FRAME POLISH */

/*
  Purpose:
  Add a clean activation badge to the Portfolio release modal.
  This keeps Slot 001 feeling intentional even before the real MP4 is uploaded.
*/

.portfolio-media-activation-badge {
  display: none;
}

.portfolio-release-modal-v284[data-soon-type="portfolio"] .portfolio-media-activation-badge {
  position: absolute;
  left: 50%;
  top: 58px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 7px 11px 6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  color: rgba(255,255,255,.74);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .24em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.portfolio-release-modal-v284[data-soon-type="portfolio"] .portfolio-media-activation-badge[data-media-badge-state="idle"] {
  color: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.14);
}

.portfolio-release-modal-v284[data-soon-type="portfolio"] .portfolio-media-activation-badge[data-media-badge-state="loading"] {
  color: rgba(255,255,255,.86);
  border-color: rgba(255,255,255,.24);
}

.portfolio-release-modal-v284[data-soon-type="portfolio"] .portfolio-media-activation-badge[data-media-badge-state="ready"] {
  color: rgba(129,255,182,.92);
  border-color: rgba(129,255,182,.32);
  background: rgba(20,80,48,.25);
}

.portfolio-release-modal-v284[data-soon-type="portfolio"] .portfolio-media-activation-badge[data-media-badge-state="error"] {
  color: rgba(255,112,112,.92);
  border-color: rgba(227,34,34,.34);
  background: rgba(227,34,34,.12);
}

.portfolio-media-slot-v284:not(.has-real-media) {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 -60px 120px rgba(0,0,0,.32);
}

.portfolio-media-slot-v284:not(.has-real-media) .coming-soon-play {
  transform: translate(-50%, -50%);
}

.portfolio-media-slot-v284:not(.has-real-media) .coming-soon-preview-label {
  letter-spacing: .32em;
}

body.theme-beige .portfolio-release-modal-v284[data-soon-type="portfolio"] .portfolio-media-activation-badge {
  background: rgba(40,25,14,.38);
  color: rgba(255,246,230,.78);
  border-color: rgba(255,246,230,.16);
}

body.theme-night .portfolio-release-modal-v284[data-soon-type="portfolio"] .portfolio-media-activation-badge {
  background: rgba(0,0,0,.42);
  color: rgba(248,248,245,.76);
}

@media (max-width: 768px) {
  .portfolio-release-modal-v284[data-soon-type="portfolio"] .portfolio-media-activation-badge {
    top: 52px;
    max-width: calc(100% - 42px);
    padding: 6px 9px 5px;
    font-size: 6px;
    letter-spacing: .17em;
    line-height: 1.45;
    white-space: normal;
  }

  .portfolio-media-slot-v284:not(.has-real-media) .coming-soon-preview-label {
    letter-spacing: .18em;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_28.4 — SLOT 001 ACTIVATION READY / POSTER FRAME POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_28.5 — PORTFOLIO MEDIA ACTIVATION CHECK + MOBILE QA LOCK */

/*
  Purpose:
  Add a visible Portfolio media QA row so Slot 001 can be checked safely before real media is activated.
  This does not activate the MP4. It only shows whether the slot is offline, checking, online, or pending.
*/

.portfolio-media-qa-row {
  display: none;
}

.portfolio-release-modal-v285[data-soon-type="portfolio"] .portfolio-media-qa-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: -4px;
  padding: 13px 14px 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.34);
  color: rgba(17,17,17,.62);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .22em;
  line-height: 1.6;
  text-transform: uppercase;
}

.portfolio-media-qa-row span {
  color: rgba(17,17,17,.46);
}

.portfolio-media-qa-row strong {
  color: var(--red);
  white-space: nowrap;
}

.portfolio-media-qa-row em {
  color: rgba(17,17,17,.54);
  font-style: normal;
  letter-spacing: .18em;
}

.portfolio-media-qa-row[data-media-qa-state="loading"] strong {
  color: rgba(17,17,17,.76);
}

.portfolio-media-qa-row[data-media-qa-state="ready"] strong {
  color: rgba(30,140,78,.92);
}

.portfolio-media-qa-row[data-media-qa-state="error"] strong {
  color: var(--red);
}

body.theme-beige .portfolio-release-modal-v285[data-soon-type="portfolio"] .portfolio-media-qa-row {
  border-color: rgba(83,55,31,.15);
  background: rgba(255,246,230,.36);
  color: rgba(66,43,25,.62);
}

body.theme-beige .portfolio-media-qa-row span,
body.theme-beige .portfolio-media-qa-row em {
  color: rgba(66,43,25,.54);
}

body.theme-night .portfolio-release-modal-v285[data-soon-type="portfolio"] .portfolio-media-qa-row {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: rgba(248,248,245,.62);
}

body.theme-night .portfolio-media-qa-row span,
body.theme-night .portfolio-media-qa-row em {
  color: rgba(248,248,245,.50);
}

body.theme-night .portfolio-media-qa-row[data-media-qa-state="loading"] strong {
  color: rgba(248,248,245,.82);
}

body.theme-night .portfolio-media-qa-row[data-media-qa-state="ready"] strong {
  color: rgba(129,255,182,.92);
}

@media (max-width: 768px) {
  .portfolio-release-modal-v285[data-soon-type="portfolio"] .portfolio-media-qa-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 0;
    padding: 12px;
    font-size: 6.5px;
    letter-spacing: .16em;
    line-height: 1.7;
  }

  .portfolio-media-qa-row strong {
    white-space: normal;
  }

  .portfolio-media-qa-row em {
    letter-spacing: .14em;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_28.5 — PORTFOLIO MEDIA ACTIVATION CHECK + MOBILE QA LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_28.5.1 — VERTICAL PORTFOLIO MEDIA SAFE FIT HOTFIX */

/*
  Purpose:
  Let vertical Instagram Reel / Story videos display fully inside the Portfolio preview frame.
  This prevents vertical footage from being cropped by object-fit: cover.
*/

.portfolio-media-slot-v2851.has-real-media.media-fit-contain .portfolio-real-media-video,
.portfolio-media-slot-v2851.has-real-media.media-fit-contain .portfolio-real-media-image {
  object-fit: contain;
  object-position: center center;
  background: #030303;
}

.portfolio-media-slot-v2851.has-real-media.media-fit-cover .portfolio-real-media-video,
.portfolio-media-slot-v2851.has-real-media.media-fit-cover .portfolio-real-media-image {
  object-fit: cover;
  object-position: center center;
}

.portfolio-media-slot-v2851.has-real-media.media-aspect-vertical .portfolio-real-media-video,
.portfolio-media-slot-v2851.has-real-media.media-aspect-vertical .portfolio-real-media-image {
  background:
    radial-gradient(circle at 50% 40%, rgba(227,34,34,.10), transparent 30%),
    #030303;
}

.portfolio-media-slot-v2851.has-real-media.media-aspect-vertical::after {
  top: 20%;
  color: rgba(255,255,255,.18);
}

.portfolio-media-slot-v2851.has-real-media.media-aspect-vertical .coming-soon-play {
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(8px);
}

body.theme-beige .portfolio-media-slot-v2851.has-real-media.media-fit-contain .portfolio-real-media-video,
body.theme-beige .portfolio-media-slot-v2851.has-real-media.media-fit-contain .portfolio-real-media-image {
  background: #130d08;
}

body.theme-night .portfolio-media-slot-v2851.has-real-media.media-fit-contain .portfolio-real-media-video,
body.theme-night .portfolio-media-slot-v2851.has-real-media.media-fit-contain .portfolio-real-media-image {
  background: #000;
}

@media (max-width: 768px) {
  .portfolio-media-slot-v2851.has-real-media.media-aspect-vertical::after {
    top: 21%;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_28.5.1 — VERTICAL PORTFOLIO MEDIA SAFE FIT HOTFIX */
/* 🟩 GREEN HIGHLIGHT START: CMV_28.5.2 — UNIVERSAL MEDIA FIT + PORTFOLIO PLAYBACK + ARCHIVE ALIGNMENT HOTFIX */

/*
  Purpose:
  - Make Portfolio preview video playable through the center play button.
  - Keep vertical Portfolio videos fully visible.
  - Make Archive videos support both vertical and horizontal footage.
  - Override the old mobile archive 16:9 rule that cropped vertical video.
*/

/* PORTFOLIO PLAYBACK CONTROL */

.portfolio-release-modal-v2852[data-soon-type="portfolio"] .coming-soon-play {
  cursor: pointer;
  pointer-events: auto;
}

.portfolio-release-modal-v2852[data-soon-type="portfolio"] .coming-soon-play:focus-visible {
  outline: 1px solid rgba(227,34,34,.72);
  outline-offset: 6px;
}

.portfolio-media-slot-v2852.has-real-media.is-media-playing .coming-soon-play {
  opacity: .42;
}

.portfolio-media-slot-v2852.has-real-media.is-media-playing .coming-soon-play span {
  width: 12px;
  height: 22px;
  border: 0;
  border-left: 4px solid rgba(255,255,255,.88);
  border-right: 4px solid rgba(255,255,255,.88);
  transform: translateX(0);
}

/* ARCHIVE UNIVERSAL FIT SYSTEM */

.archive-video-frame.has-real-video.archive-fit-contain .archive-real-video {
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}

.archive-video-frame.has-real-video.archive-fit-cover .archive-real-video {
  object-fit: cover !important;
  object-position: center center !important;
}

.archive-video-frame.has-real-video.archive-aspect-vertical {
  background:
    radial-gradient(circle at 50% 44%, rgba(227,34,34,.10), transparent 32%),
    #000 !important;
}

.archive-video-frame.has-real-video.archive-aspect-vertical .archive-real-video {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

.archive-video-frame.has-real-video.archive-aspect-horizontal .archive-real-video {
  width: 100% !important;
  height: 100% !important;
}

/* IMPORTANT: Override older mobile rule that forced Archive video into 16:9 */
@media (max-width: 768px) {
  .archive-video-frame.has-real-video .archive-real-video {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    aspect-ratio: auto !important;
  }

  .archive-video-frame.has-real-video.archive-fit-contain .archive-real-video {
    object-fit: contain !important;
  }

  .archive-video-frame.has-real-video.archive-fit-cover .archive-real-video {
    object-fit: cover !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_28.5.2 — UNIVERSAL MEDIA FIT + PORTFOLIO PLAYBACK + ARCHIVE ALIGNMENT HOTFIX */
/* 🟩 GREEN HIGHLIGHT START: CMV_28.5.4 — ARCHIVE MULTI-VIDEO STACK RENDER FIX + DAYLIGHT PLACEHOLDER QA */

/*
  Purpose:
  Render multiple videos inside one Archive as a clean selectable stack.
  Archive 003 / Daylight Motion can now show VIDEO 01, VIDEO 02, VIDEO 03 rows.
*/

.archive-video-stack {
  grid-column: 2 / 3;
  width: 100%;
  max-width: 760px;
  justify-self: start;
  display: grid;
  gap: 10px;
  margin-top: -18px;
}

.archive-video-stack.is-hidden {
  display: none !important;
}

.archive-video-stack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px;
  color: rgba(17,17,17,.44);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.archive-video-stack-header strong {
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .24em;
}

.archive-video-stack-list {
  display: grid;
  gap: 8px;
}

.archive-video-stack-card {
  width: 100%;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) minmax(160px, .75fr);
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.32);
  color: rgba(17,17,17,.64);
  text-align: left;
  cursor: pointer;
  transition:
    border-color .22s ease,
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}

.archive-video-stack-card span,
.archive-video-stack-card strong,
.archive-video-stack-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-video-stack-card span {
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.archive-video-stack-card strong {
  color: rgba(17,17,17,.78);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.archive-video-stack-card small {
  color: rgba(17,17,17,.48);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.archive-video-stack-card:hover,
.archive-video-stack-card.active {
  border-color: rgba(227,34,34,.34);
  background: rgba(227,34,34,.065);
  transform: translateY(-1px);
}

.archive-video-stack-card.active strong {
  color: var(--red);
}

body.theme-beige .archive-video-stack-header,
body.theme-beige .archive-video-stack-card small {
  color: rgba(66,43,25,.52);
}

body.theme-beige .archive-video-stack-card {
  border-color: rgba(83,55,31,.14);
  background: rgba(255,246,230,.34);
}

body.theme-beige .archive-video-stack-card strong {
  color: rgba(66,43,25,.78);
}

body.theme-night .archive-video-stack-header,
body.theme-night .archive-video-stack-card small {
  color: rgba(248,248,245,.46);
}

body.theme-night .archive-video-stack-card {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: rgba(248,248,245,.64);
}

body.theme-night .archive-video-stack-card strong {
  color: rgba(248,248,245,.78);
}

body.theme-night .archive-video-stack-card:hover,
body.theme-night .archive-video-stack-card.active {
  border-color: rgba(227,34,34,.40);
  background: rgba(227,34,34,.10);
}

@media (max-width: 768px) {
  .archive-video-stack {
    grid-column: 1 / -1;
    max-width: 100%;
    margin-top: 0;
    gap: 9px;
  }

  .archive-video-stack-header {
    display: grid;
    gap: 5px;
    font-size: 6.5px;
    letter-spacing: .18em;
  }

  .archive-video-stack-header strong {
    font-size: 6.5px;
    letter-spacing: .16em;
  }

  .archive-video-stack-card {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
  }

  .archive-video-stack-card span {
    font-size: 7px;
    letter-spacing: .18em;
  }

  .archive-video-stack-card strong {
    font-size: 9px;
    letter-spacing: .14em;
  }

  .archive-video-stack-card small {
    font-size: 7px;
    letter-spacing: .12em;
    white-space: normal;
    line-height: 1.55;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_28.5.4 — ARCHIVE MULTI-VIDEO STACK RENDER FIX + DAYLIGHT PLACEHOLDER QA */
/* 🟩 GREEN HIGHLIGHT START: CMV_28.5.5 — ARCHIVE VIDEO STACK VIEW MODES + THUMBNAIL GRID SYSTEM */

/*
  Purpose:
  Add YouTube / Google Drive / Dropbox-style viewing modes for Archive video stacks.
  Default view is TILE: square thumbnail cards.
*/

.archive-video-stack-view-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.archive-stack-view-btn {
  min-height: 24px;
  padding: 6px 8px 5px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.28);
  color: rgba(17,17,17,.48);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color .22s ease,
    background .22s ease,
    color .22s ease;
}

.archive-stack-view-btn:hover,
.archive-stack-view-btn.active {
  border-color: rgba(227,34,34,.36);
  background: rgba(227,34,34,.08);
  color: var(--red);
}

.archive-video-stack-thumb {
  display: none;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background:
    radial-gradient(circle at 50% 42%, rgba(227,34,34,.14), transparent 34%),
    linear-gradient(135deg, #080808, #1b1b1b 58%, #050505);
  background-size: cover;
  background-position: center;
}

.archive-video-stack-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent, rgba(0,0,0,.54)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(255,255,255,.035) 14px);
  pointer-events: none;
}

.archive-video-stack-thumb b {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  color: rgba(255,255,255,.82);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.archive-video-stack-thumb.no-poster::before {
  content: "CMV";
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,.18);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .18em;
}

/* TILE VIEW — default square thumbnail boxes */

.archive-video-stack.stack-view-tile .archive-video-stack-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.archive-video-stack.stack-view-tile .archive-video-stack-card {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
}

.archive-video-stack.stack-view-tile .archive-video-stack-thumb {
  display: block;
}

.archive-video-stack.stack-view-tile .archive-video-stack-card span {
  font-size: 7px;
  letter-spacing: .18em;
}

.archive-video-stack.stack-view-tile .archive-video-stack-card strong,
.archive-video-stack.stack-view-tile .archive-video-stack-card small {
  white-space: normal;
}

.archive-video-stack.stack-view-tile .archive-video-stack-card small {
  line-height: 1.55;
}

/* LIST VIEW — original row layout */

.archive-video-stack.stack-view-list .archive-video-stack-list {
  grid-template-columns: 1fr;
}

.archive-video-stack.stack-view-list .archive-video-stack-thumb {
  display: none;
}

.archive-video-stack.stack-view-list .archive-video-stack-card {
  grid-template-columns: 86px minmax(0, 1fr) minmax(160px, .75fr);
}

/* STRIP VIEW — smaller icon style */

.archive-video-stack.stack-view-strip .archive-video-stack-list {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}

.archive-video-stack.stack-view-strip .archive-video-stack-card {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px;
}

.archive-video-stack.stack-view-strip .archive-video-stack-thumb {
  display: block;
}

.archive-video-stack.stack-view-strip .archive-video-stack-card span {
  font-size: 6px;
  letter-spacing: .14em;
}

.archive-video-stack.stack-view-strip .archive-video-stack-card strong {
  font-size: 8px;
  letter-spacing: .12em;
  white-space: normal;
}

.archive-video-stack.stack-view-strip .archive-video-stack-card small {
  display: none;
}

/* DETAIL VIEW — large thumbnail with expanded metadata */

.archive-video-stack.stack-view-detail .archive-video-stack-list {
  grid-template-columns: 1fr;
  gap: 10px;
}

.archive-video-stack.stack-view-detail .archive-video-stack-card {
  grid-template-columns: 150px 86px minmax(0, 1fr) minmax(170px, .75fr);
  align-items: center;
  padding: 10px 12px;
}

.archive-video-stack.stack-view-detail .archive-video-stack-thumb {
  display: block;
  aspect-ratio: 16 / 10;
}

.archive-video-stack.stack-view-detail .archive-video-stack-card strong,
.archive-video-stack.stack-view-detail .archive-video-stack-card small {
  white-space: normal;
  line-height: 1.55;
}

/* Theme support */

body.theme-beige .archive-stack-view-btn {
  border-color: rgba(83,55,31,.14);
  background: rgba(255,246,230,.34);
  color: rgba(66,43,25,.54);
}

body.theme-beige .archive-stack-view-btn:hover,
body.theme-beige .archive-stack-view-btn.active {
  border-color: rgba(227,34,34,.34);
  color: var(--red);
}

body.theme-night .archive-stack-view-btn {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: rgba(248,248,245,.50);
}

body.theme-night .archive-stack-view-btn:hover,
body.theme-night .archive-stack-view-btn.active {
  border-color: rgba(227,34,34,.42);
  background: rgba(227,34,34,.10);
  color: rgba(255,92,92,.95);
}

/* Mobile */

@media (max-width: 768px) {
  .archive-video-stack-header {
    gap: 10px;
  }

  .archive-video-stack-view-controls {
    justify-content: flex-start;
  }

  .archive-stack-view-btn {
    min-height: 25px;
    padding: 6px 7px 5px;
    font-size: 6px;
    letter-spacing: .13em;
  }

  .archive-video-stack.stack-view-tile .archive-video-stack-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .archive-video-stack.stack-view-detail .archive-video-stack-card {
    grid-template-columns: 1fr;
  }

  .archive-video-stack.stack-view-detail .archive-video-stack-thumb {
    aspect-ratio: 1 / 1;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_28.5.5 — ARCHIVE VIDEO STACK VIEW MODES + THUMBNAIL GRID SYSTEM */
/* 🟩 GREEN HIGHLIGHT START: CMV_28.5.12 — ARCHIVE VIEW HOTKEYS + VIEW TOGGLE */

/*
  Purpose:
  Make the external VIEW label a real toggle.
  Expanded: full control bar is visible.
  Collapsed: only VIEW remains visible.
*/

.archive-view-bar-toggle {
  cursor: pointer !important;
  color: rgba(255,255,255,.68);
}

.archive-view-bar-toggle:hover,
.archive-view-bar-toggle:focus-visible,
.archive-view-bar-toggle.active {
  color: var(--red) !important;
  border-color: rgba(227,34,34,.42) !important;
  background: rgba(227,34,34,.13) !important;
  box-shadow: inset 0 0 14px rgba(227,34,34,.08) !important;
  outline: none;
}

#modal.open .archive-video-size-controls.archive-view-bar-collapsed {
  width: auto !important;
  max-width: none !important;
  gap: 0 !important;
}

#modal.open .archive-video-size-controls.archive-view-bar-collapsed .archive-player-bar-btn,
#modal.open .archive-video-size-controls.archive-view-bar-collapsed .archive-player-quality-control {
  display: none !important;
}

#modal.open .archive-video-size-controls.archive-view-bar-collapsed .archive-view-bar-toggle {
  margin: 0 !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_28.5.12 — ARCHIVE VIEW HOTKEYS + VIEW TOGGLE */
/* 🟩 GREEN HIGHLIGHT START: CMV_29.2 — PORTFOLIO LIGHT MODE CARD METADATA READABILITY */

/*
  Purpose:
  Light mode readability repair for Portfolio release cards only.
  The global light-mode readability rule was turning the card metadata dark,
  which made ORIGIN REEL / NEW YEAR’S EVE nearly disappear on the dark Portfolio cards.
  Beige and Night mode are intentionally untouched.
*/

body:not(.theme-night):not(.theme-beige) .portfolio .soon-grid > .portfolio-release-card span {
  color: var(--red) !important;
}

body:not(.theme-night):not(.theme-beige) .portfolio .soon-grid > .portfolio-release-card strong {
  color: rgba(248,248,245,.96) !important;
  text-shadow: 0 0 16px rgba(255,255,255,.10) !important;
}

body:not(.theme-night):not(.theme-beige) .portfolio .soon-grid > .portfolio-release-card small {
  display: block !important;
  color: rgba(243,243,240,.78) !important;
  opacity: 1 !important;
  text-shadow: 0 0 14px rgba(255,255,255,.08) !important;
}

body:not(.theme-night):not(.theme-beige) .portfolio .soon-grid > .portfolio-release-card .portfolio-release-badge {
  color: rgba(255,72,72,.92) !important;
  border-color: rgba(227,34,34,.32) !important;
  background: rgba(227,34,34,.085) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_29.2 — PORTFOLIO LIGHT MODE CARD METADATA READABILITY */

/* 🟩 GREEN HIGHLIGHT START: CMV_29.3 — MOBILE 3D OVERRIDE COMPLETION + ARCHIVE MOBILE QA POLISH */

/*
  Purpose:
  Complete the CMV_29.2 mobile 3D manual override and add small mobile Archive top-control polish.
  AUTO still keeps mobile in 2D. Manual 3D can now display the current canvas globe on mobile.
  Reduced-motion still blocks the 3D shell.
*/

/* MOBILE WORLD MAP — allow manual 3D shell to appear only when JS marks the map ready */
@media (max-width: 768px) {
  .world-map.world-map-3d-ready .world-map-3d-shell {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  .world-map.world-map-3d-ready .world-map-3d-canvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 280px !important;
    opacity: .94 !important;
  }

  .world-map.world-map-3d-ready .world-map-3d-status {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    max-width: none !important;
    padding: 7px 9px !important;
    font-size: 5.4px !important;
    letter-spacing: .16em !important;
    text-align: center !important;
  }

  .world-map-view-btn[data-world-map-mode="3d"]:not(.safe-locked) {
    opacity: 1 !important;
    cursor: pointer !important;
  }

  .world-map.world-map-3d-ready .world-map-engine-controls small {
    color: rgba(227,34,34,.78) !important;
  }
}

/* Reduced-motion remains the final safety lock even if mobile manual 3D is selected */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .world-map.world-map-3d-ready .world-map-3d-shell {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* MOBILE ARCHIVE — keep top controls readable, tappable, and clear of the phone safe area */
@media (max-width: 768px) {
  #modal.open.modal-v12 {
    padding-top: calc(env(safe-area-inset-top, 0px) + 74px) !important;
  }

  #modal.open .archive-close-v12,
  #modal.open .archive-fullscreen-toggle {
    z-index: 5045 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-width: calc(50vw - 22px) !important;
    padding: 0 12px !important;
    font-size: 6.6px !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #modal.open .archive-fullscreen-toggle {
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
  }

  #modal.open .archive-close-v12 {
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
  }
}

@media (max-width: 390px) {
  #modal.open .archive-close-v12,
  #modal.open .archive-fullscreen-toggle {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 6px !important;
    letter-spacing: .09em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_29.3 — MOBILE 3D OVERRIDE COMPLETION + ARCHIVE MOBILE QA POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_29.4 — FINAL ACCESSIBILITY + CONTROL STATE CLEANUP */

/*
  Purpose:
  Add clear keyboard focus states for launch QA without changing the visual design.
  This supports Archive controls, World Map mode buttons, Portfolio view buttons, Mode controls, and Search.
*/

#modal.open .archive-close-v12:focus-visible,
#modal.open .archive-fullscreen-toggle:focus-visible,
#modal.open .archive-player-bar-btn:focus-visible,
#modal.open .archive-player-menu-toggle:focus-visible,
#modal.open .archive-quality-option:focus-visible,
.world-map-view-btn:focus-visible,
.portfolio-view-btn:focus-visible,
.theme-menu-button:focus-visible,
.theme-quick-toggle:focus-visible,
.theme-option:focus-visible,
.sound-toggle:focus-visible,
.cmv-site-search-submit:focus-visible,
.nav-link:focus-visible,
.mini-logo:focus-visible {
  outline: 1px solid rgba(227,34,34,.92) !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.68),
    0 0 22px rgba(227,34,34,.22) !important;
}

body.theme-night #modal.open .archive-close-v12:focus-visible,
body.theme-night #modal.open .archive-fullscreen-toggle:focus-visible,
body.theme-night #modal.open .archive-player-bar-btn:focus-visible,
body.theme-night #modal.open .archive-player-menu-toggle:focus-visible,
body.theme-night #modal.open .archive-quality-option:focus-visible,
body.theme-night .world-map-view-btn:focus-visible,
body.theme-night .portfolio-view-btn:focus-visible,
body.theme-night .theme-menu-button:focus-visible,
body.theme-night .theme-quick-toggle:focus-visible,
body.theme-night .theme-option:focus-visible,
body.theme-night .sound-toggle:focus-visible,
body.theme-night .cmv-site-search-submit:focus-visible,
body.theme-night .nav-link:focus-visible,
body.theme-night .mini-logo:focus-visible {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.34),
    0 0 24px rgba(227,34,34,.34) !important;
}

body.theme-beige #modal.open .archive-close-v12:focus-visible,
body.theme-beige #modal.open .archive-fullscreen-toggle:focus-visible,
body.theme-beige #modal.open .archive-player-bar-btn:focus-visible,
body.theme-beige #modal.open .archive-player-menu-toggle:focus-visible,
body.theme-beige #modal.open .archive-quality-option:focus-visible,
body.theme-beige .world-map-view-btn:focus-visible,
body.theme-beige .portfolio-view-btn:focus-visible,
body.theme-beige .theme-menu-button:focus-visible,
body.theme-beige .theme-quick-toggle:focus-visible,
body.theme-beige .theme-option:focus-visible,
body.theme-beige .sound-toggle:focus-visible,
body.theme-beige .cmv-site-search-submit:focus-visible,
body.theme-beige .nav-link:focus-visible,
body.theme-beige .mini-logo:focus-visible {
  box-shadow:
    0 0 0 1px rgba(74,49,29,.24),
    0 0 20px rgba(227,34,34,.18) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_29.4 — FINAL ACCESSIBILITY + CONTROL STATE CLEANUP */
/* 🟩 GREEN HIGHLIGHT START: CMV_30.0 — CLIENT / PRIVATE GALLERY SYSTEM FOUNDATION */

.client-system {
  width: min(1120px, 100%);
}

.client-system-grid {
  width: min(1080px, 100%);
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 18px;
}

.client-access-panel,
.client-delivery-preview,
.client-flow-card {
  border: 1px solid rgba(0,0,0,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.24)),
    rgba(255,255,255,.26);
  box-shadow: 0 22px 70px rgba(0,0,0,.08);
  backdrop-filter: blur(18px);
}

.client-access-panel,
.client-delivery-preview {
  min-height: 360px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.client-access-panel::before,
.client-delivery-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(227,34,34,.08), transparent),
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,.025) 0,
      rgba(0,0,0,.025) 1px,
      transparent 1px,
      transparent 10px
    );
  opacity: .6;
}

.client-access-header,
.client-preview-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.client-access-header span,
.client-preview-header span {
  font-size: 8px;
  letter-spacing: .34em;
  color: var(--muted);
}

.client-access-header strong,
.client-preview-header strong {
  font-size: 10px;
  letter-spacing: .32em;
  color: var(--red);
}

.client-access-panel p {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  max-width: 520px;
  font-size: 10px;
  line-height: 2;
  letter-spacing: .2em;
  color: rgba(0,0,0,.62);
}

.client-access-fields {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  display: grid;
  gap: 10px;
}

.client-access-fields label {
  font-size: 8px;
  letter-spacing: .34em;
  color: rgba(0,0,0,.58);
}

.client-access-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.42);
  color: var(--ink);
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: .28em;
  outline: none;
}

.client-access-input:focus {
  border-color: rgba(227,34,34,.58);
  box-shadow: 0 0 0 1px rgba(227,34,34,.14);
}

.client-access-submit,
.client-reset-button {
  min-height: 44px;
  border: 1px solid rgba(227,34,34,.42);
  background: rgba(227,34,34,.08);
  color: var(--red);
  font-size: 9px;
  letter-spacing: .32em;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.client-access-submit:hover,
.client-reset-button:hover {
  transform: translateY(-1px);
  background: rgba(227,34,34,.14);
  border-color: rgba(227,34,34,.62);
}

.client-access-status {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  font-size: 7.5px;
  letter-spacing: .26em;
  color: rgba(0,0,0,.52);
}

.client-preview-screen {
  position: relative;
  z-index: 2;
  height: 150px;
  margin-top: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.12);
  background:
    radial-gradient(circle at 50% 45%, rgba(227,34,34,.13), transparent 44%),
    linear-gradient(135deg, rgba(0,0,0,.06), rgba(255,255,255,.24));
}

.client-preview-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(227,34,34,.35);
  border-radius: 50%;
  font: 800 18px Georgia, serif;
  letter-spacing: -.08em;
  color: var(--red);
}

.client-preview-screen p {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  text-align: center;
  font-size: 7px;
  letter-spacing: .35em;
  color: rgba(0,0,0,.5);
}

.client-delivery-cards {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.client-delivery-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.28);
}

.client-delivery-card span,
.client-flow-card span {
  font-size: 8px;
  letter-spacing: .28em;
  color: var(--red);
}

.client-delivery-card strong,
.client-flow-card strong {
  font-size: 10px;
  letter-spacing: .28em;
}

.client-delivery-card small,
.client-flow-card small {
  grid-column: 2;
  margin-top: -4px;
  font-size: 7px;
  letter-spacing: .22em;
  color: rgba(0,0,0,.52);
}

.client-reset-button {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 14px;
}

.client-delivery-preview.is-locked .client-delivery-card,
.client-delivery-preview.is-locked .client-preview-screen {
  opacity: .45;
  filter: grayscale(.75);
}

.client-delivery-preview.is-unlocked {
  border-color: rgba(227,34,34,.34);
  box-shadow:
    0 24px 80px rgba(0,0,0,.1),
    0 0 38px rgba(227,34,34,.08);
}

.client-delivery-preview.is-unlocked .client-preview-screen {
  animation: clientPreviewPulse 2.8s ease-in-out infinite;
}

.client-flow-grid {
  width: min(1080px, 100%);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.client-flow-card {
  min-height: 118px;
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 10px;
}

@keyframes clientPreviewPulse {
  0%, 100% {
    box-shadow: inset 0 0 0 rgba(227,34,34,0);
  }

  50% {
    box-shadow: inset 0 0 44px rgba(227,34,34,.12);
  }
}

body.theme-night .client-access-panel,
body.theme-night .client-delivery-preview,
body.theme-night .client-flow-card {
  border-color: rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(0,0,0,.22);
  box-shadow: 0 24px 80px rgba(0,0,0,.26);
}

body.theme-night .client-access-panel p,
body.theme-night .client-access-status,
body.theme-night .client-preview-screen p,
body.theme-night .client-delivery-card small,
body.theme-night .client-flow-card small,
body.theme-night .client-access-fields label,
body.theme-night .client-access-header span,
body.theme-night .client-preview-header span {
  color: rgba(255,255,255,.58);
}

body.theme-night .client-access-input,
body.theme-night .client-delivery-card {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.86);
}

body.theme-beige .client-access-panel,
body.theme-beige .client-delivery-preview,
body.theme-beige .client-flow-card {
  border-color: rgba(74,49,29,.16);
  background:
    linear-gradient(135deg, rgba(255,248,235,.62), rgba(244,226,196,.22)),
    rgba(245,231,206,.28);
}

.client-access-submit:focus-visible,
.client-reset-button:focus-visible,
.client-access-input:focus-visible,
.client-delivery-card:focus-visible,
.client-flow-card:focus-visible {
  outline: 1px solid rgba(227,34,34,.92);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .client-system-grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
    gap: 14px;
  }

  .client-access-panel,
  .client-delivery-preview {
    min-height: auto;
    padding: 18px;
  }

  .client-access-panel p {
    font-size: 9px;
    letter-spacing: .14em;
    line-height: 1.8;
  }

  .client-flow-grid {
    grid-template-columns: 1fr 1fr;
  }

  .client-flow-card {
    min-height: 96px;
    padding: 13px;
  }

  .client-delivery-card strong,
  .client-flow-card strong {
    font-size: 8.5px;
    letter-spacing: .18em;
  }

  .client-delivery-card small,
  .client-flow-card small {
    font-size: 6.4px;
    letter-spacing: .14em;
  }
}

@media (max-width: 390px) {
  .client-flow-grid {
    grid-template-columns: 1fr;
  }

  .client-access-header,
  .client-preview-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_30.0 — CLIENT / PRIVATE GALLERY SYSTEM FOUNDATION */
/* 🟩 GREEN HIGHLIGHT START: CMV_30.1 — CLIENT GALLERY CARD GRID + PROJECT STATUS SYSTEM */

.client-gallery-grid {
  width: min(1080px, 100%);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.client-gallery-card {
  min-height: 132px;
  padding: 16px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,.18)),
    rgba(255,255,255,.2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 54px rgba(0,0,0,.065);
  backdrop-filter: blur(16px);
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}

.client-gallery-card:hover {
  transform: translateY(-2px);
  border-color: rgba(227,34,34,.34);
  box-shadow:
    0 22px 64px rgba(0,0,0,.085),
    0 0 28px rgba(227,34,34,.06);
}

.client-gallery-card.is-active {
  border-color: rgba(227,34,34,.52);
  background:
    linear-gradient(135deg, rgba(227,34,34,.12), rgba(255,255,255,.26)),
    rgba(255,255,255,.24);
}

.client-gallery-card span {
  font-size: 8px;
  letter-spacing: .3em;
  color: var(--red);
}

.client-gallery-card strong {
  display: block;
  font-size: 10px;
  letter-spacing: .24em;
}

.client-gallery-card small {
  display: block;
  font-size: 6.8px;
  line-height: 1.7;
  letter-spacing: .2em;
  color: rgba(0,0,0,.52);
}

.client-gallery-card em {
  width: fit-content;
  padding: 5px 7px;
  border: 1px solid rgba(227,34,34,.28);
  background: rgba(227,34,34,.07);
  color: var(--red);
  font-style: normal;
  font-size: 6.5px;
  letter-spacing: .24em;
}

body.theme-night .client-gallery-card {
  border-color: rgba(255,255,255,.13);
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    rgba(0,0,0,.24);
  color: rgba(255,255,255,.86);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}

body.theme-night .client-gallery-card small {
  color: rgba(255,255,255,.55);
}

body.theme-night .client-gallery-card.is-active {
  border-color: rgba(227,34,34,.52);
  background:
    linear-gradient(135deg, rgba(227,34,34,.14), rgba(255,255,255,.04)),
    rgba(0,0,0,.26);
}

body.theme-beige .client-gallery-card {
  border-color: rgba(74,49,29,.16);
  background:
    linear-gradient(135deg, rgba(255,248,235,.64), rgba(244,226,196,.24)),
    rgba(245,231,206,.24);
}

.client-gallery-card:focus-visible {
  outline: 1px solid rgba(227,34,34,.92);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .client-gallery-grid {
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
  }

  .client-gallery-card {
    min-height: 112px;
    padding: 13px;
  }

  .client-gallery-card strong {
    font-size: 8.5px;
    letter-spacing: .18em;
  }

  .client-gallery-card small {
    font-size: 6.4px;
    letter-spacing: .14em;
  }

  .client-gallery-card em {
    font-size: 6px;
    letter-spacing: .16em;
  }
}

@media (max-width: 390px) {
  .client-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_30.1 — CLIENT GALLERY CARD GRID + PROJECT STATUS SYSTEM */
/* 🟩 GREEN HIGHLIGHT START: CMV_30.2 — REAL MEDIA GALLERY VIEWER + CLIENT REVIEW DELIVERY */

.client-media-viewer {
  width: min(1080px, 100%);
  margin: 18px auto 0;
  padding: 20px;
  border: 1px solid rgba(0,0,0,.13);
  background:
    linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.2)),
    rgba(255,255,255,.24);
  box-shadow: 0 24px 76px rgba(0,0,0,.08);
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}

.client-media-viewer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(227,34,34,.07), transparent),
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,.025) 0,
      rgba(0,0,0,.025) 1px,
      transparent 1px,
      transparent 12px
    );
  opacity: .55;
}

/* 🟩 GREEN HIGHLIGHT START: CMV_30.3 — LOCKED MEDIA FULL SEAL */
.client-media-viewer.is-client-locked .client-media-actions,
.client-media-viewer.is-client-locked .client-media-tabs,
.client-media-viewer.is-client-locked .client-media-panel,
.client-media-viewer.is-client-locked .client-media-empty {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.client-media-viewer.is-client-locked {
  min-height: 320px;
}

.client-media-viewer.is-client-locked::after {
  content: "ACCESS REQUIRED";
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  min-height: 160px;
  margin: 28px auto 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(227,34,34,.32);
  background:
    radial-gradient(circle at 50% 45%, rgba(227,34,34,.12), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.36), rgba(255,255,255,.12));
  color: var(--red);
  font-size: 10px;
  letter-spacing: .42em;
  text-align: center;
  box-shadow: inset 0 0 44px rgba(227,34,34,.06);
}
/* 🟥 RED HIGHLIGHT END: CMV_30.3 — LOCKED MEDIA FULL SEAL */

.client-media-viewer.is-client-unlocked {
  border-color: rgba(227,34,34,.35);
  box-shadow:
    0 26px 82px rgba(0,0,0,.1),
    0 0 40px rgba(227,34,34,.08);
}

.client-media-header,
.client-media-note,
.client-media-actions,
.client-media-tabs,
.client-media-panel,
.client-media-empty {
  position: relative;
  z-index: 2;
}

.client-media-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.client-media-header span {
  display: block;
  margin-bottom: 8px;
  font-size: 8px;
  letter-spacing: .34em;
  color: var(--red);
}

.client-media-header h2 {
  margin: 0;
  font-size: clamp(20px, 3vw, 42px);
  letter-spacing: -.06em;
  line-height: .9;
}

.client-media-header p {
  margin: 10px 0 0;
  font-size: 8px;
  letter-spacing: .28em;
  color: rgba(0,0,0,.52);
}

.client-media-header strong {
  padding: 7px 9px;
  border: 1px solid rgba(227,34,34,.3);
  background: rgba(227,34,34,.08);
  color: var(--red);
  font-size: 7px;
  letter-spacing: .28em;
  white-space: nowrap;
}

.client-media-note {
  max-width: 780px;
  margin: 16px 0 0;
  font-size: 9px;
  line-height: 1.9;
  letter-spacing: .18em;
  color: rgba(0,0,0,.58);
}

.client-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.client-media-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(227,34,34,.35);
  background: rgba(227,34,34,.07);
  color: var(--red);
  text-decoration: none;
  font-size: 7px;
  letter-spacing: .28em;
}

.client-media-tabs {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.client-media-tab {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.26);
  color: var(--ink);
  cursor: pointer;
  font-size: 7px;
  letter-spacing: .3em;
}

.client-media-tab.is-active {
  border-color: rgba(227,34,34,.44);
  background: rgba(227,34,34,.08);
  color: var(--red);
}

.client-media-panel {
  display: none;
  margin-top: 14px;
}

.client-media-panel.is-active {
  display: block;
}

.client-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.client-media-card {
  min-height: 150px;
  border: 1px solid rgba(0,0,0,.11);
  background: rgba(255,255,255,.28);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  position: relative;
  width: 100%;
  text-align: left;
}

button.client-media-card {
  cursor: zoom-in;
}

.client-photo-card,
.client-video-card,
.client-download-card {
  display: grid;
  align-content: end;
}

/* 🟩 GREEN HIGHLIGHT START: CMV_30.4 — NON-CROPPED CLIENT MEDIA PREVIEWS */
.client-photo-card img {
  width: 100%;
  height: 178px;
  object-fit: contain;
  display: block;
  background:
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.08), transparent 46%),
    rgba(0,0,0,.045);
}

.client-video-card video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  display: block;
  background: rgba(0,0,0,.92);
}
/* 🟥 RED HIGHLIGHT END: CMV_30.4 — NON-CROPPED CLIENT MEDIA PREVIEWS */

.client-media-card span,
.client-media-card strong,
.client-media-card small {
  position: relative;
  z-index: 2;
}

.client-media-card span {
  display: block;
  padding: 12px 12px 4px;
  font-size: 7px;
  letter-spacing: .28em;
  color: var(--red);
}

.client-media-card strong {
  display: block;
  padding: 0 12px 4px;
  font-size: 10px;
  letter-spacing: .2em;
}

.client-media-card small {
  display: block;
  padding: 0 12px 12px;
  font-size: 6.8px;
  line-height: 1.6;
  letter-spacing: .18em;
  color: rgba(0,0,0,.52);
}

.client-photo-card.is-missing {
  min-height: 150px;
  display: grid;
  align-content: end;
  background:
    radial-gradient(circle at 50% 35%, rgba(227,34,34,.12), transparent 42%),
    linear-gradient(135deg, rgba(0,0,0,.04), rgba(255,255,255,.28));
}

.client-photo-card.is-missing::before {
  content: "FILE PENDING";
  position: absolute;
  top: 18px;
  left: 14px;
  right: 14px;
  text-align: center;
  color: rgba(0,0,0,.42);
  font-size: 8px;
  letter-spacing: .28em;
}

.client-download-card {
  padding-top: 40px;
}

.client-media-empty {
  display: none;
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed rgba(227,34,34,.32);
  color: rgba(0,0,0,.54);
  font-size: 7px;
  letter-spacing: .24em;
  text-align: center;
}

.client-media-empty.is-visible {
  display: block;
}

body.theme-night .client-media-viewer {
  border-color: rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(0,0,0,.24);
}

body.theme-night .client-media-header p,
body.theme-night .client-media-note,
body.theme-night .client-media-card small,
body.theme-night .client-media-empty {
  color: rgba(255,255,255,.56);
}

body.theme-night .client-media-tab,
body.theme-night .client-media-card {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.86);
}

body.theme-night .client-photo-card.is-missing::before {
  color: rgba(255,255,255,.48);
}

body.theme-beige .client-media-viewer {
  border-color: rgba(74,49,29,.16);
  background:
    linear-gradient(135deg, rgba(255,248,235,.64), rgba(244,226,196,.24)),
    rgba(245,231,206,.26);
}

.client-media-action:focus-visible,
.client-media-tab:focus-visible,
.client-media-card:focus-visible {
  outline: 1px solid rgba(227,34,34,.92);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .client-media-viewer {
    padding: 16px;
  }

  .client-media-header {
    flex-direction: column;
  }

  .client-media-header h2 {
    font-size: 28px;
  }

  .client-media-grid {
    grid-template-columns: 1fr 1fr;
  }

  .client-media-tabs {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .client-media-tab {
    flex: 0 0 auto;
  }

  .client-photo-card img,
  .client-video-card video {
    height: 138px;
  }
}

@media (max-width: 430px) {
  .client-media-grid {
    grid-template-columns: 1fr;
  }

  .client-media-actions {
    display: grid;
  }

  .client-media-action {
    width: 100%;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_30.2 — REAL MEDIA GALLERY VIEWER + CLIENT REVIEW DELIVERY */
/* 🟩 GREEN HIGHLIGHT START: CMV_30.3 — LOCKED MEDIA SEAL THEME SUPPORT */

body.theme-night .client-media-viewer.is-client-locked::after {
  border-color: rgba(227,34,34,.42);
  background:
    radial-gradient(circle at 50% 45%, rgba(227,34,34,.16), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow:
    inset 0 0 48px rgba(227,34,34,.08),
    0 0 38px rgba(0,0,0,.24);
}

body.theme-beige .client-media-viewer.is-client-locked::after {
  border-color: rgba(227,34,34,.28);
  background:
    radial-gradient(circle at 50% 45%, rgba(227,34,34,.10), transparent 48%),
    linear-gradient(135deg, rgba(255,248,235,.48), rgba(244,226,196,.18));
}

/* 🟥 RED HIGHLIGHT END: CMV_30.3 — LOCKED MEDIA SEAL THEME SUPPORT */
/* 🟩 GREEN HIGHLIGHT START: CMV_30.5 — CLEAN CLIENT LIGHTBOX + PHOTO NEXT / PREV CONTROLS */

body.client-lightbox-open {
  overflow: hidden;
}

body.client-lightbox-open .cmv-site-search,
body.client-lightbox-open .back-home,
body.client-lightbox-open .sound-toggle,
body.client-lightbox-open .theme-menu,
body.client-lightbox-open .hamburger {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.client-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.client-lightbox.open {
  display: flex;
}

.client-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(227,34,34,.10), transparent 42%),
    rgba(5,5,5,.92);
  backdrop-filter: blur(18px);
  cursor: pointer;
}

.client-lightbox-panel {
  position: relative;
  z-index: 2;
  width: min(1240px, 96vw);
  max-height: 94vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(7,7,7,.96);
  box-shadow:
    0 44px 140px rgba(0,0,0,.58),
    inset 0 0 60px rgba(227,34,34,.035);
  overflow: hidden;
}

.client-lightbox-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.11);
}

.client-lightbox-title-stack {
  display: grid;
  gap: 5px;
}

.client-lightbox-title-stack span {
  color: rgba(255,255,255,.82);
  font-size: 8px;
  letter-spacing: .34em;
}

.client-lightbox-title-stack small {
  color: rgba(255,255,255,.42);
  font-size: 7px;
  letter-spacing: .28em;
}

.client-lightbox-close {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(227,34,34,.48);
  background: rgba(227,34,34,.13);
  color: #ff4b4b;
  cursor: pointer;
  font-size: 8px;
  letter-spacing: .28em;
}

.client-lightbox-stage-wrap {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
}

.client-lightbox-stage {
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 18px 72px;
}

.client-lightbox-stage img,
.client-lightbox-stage video {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: rgba(0,0,0,.88);
}

.client-lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  min-width: 54px;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.78);
  cursor: pointer;
  font-size: 8px;
  letter-spacing: .24em;
  backdrop-filter: blur(10px);
}

.client-lightbox-prev {
  left: 14px;
}

.client-lightbox-next {
  right: 14px;
}

.client-lightbox-nav:hover {
  border-color: rgba(227,34,34,.52);
  color: #ff4b4b;
  background: rgba(227,34,34,.11);
}

.client-lightbox-nav:disabled {
  opacity: .28;
  cursor: default;
}

.client-lightbox-help {
  margin: 0;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.44);
  font-size: 7px;
  letter-spacing: .24em;
  text-align: center;
}

.client-lightbox-close:focus-visible,
.client-lightbox-backdrop:focus-visible,
.client-lightbox-nav:focus-visible {
  outline: 1px solid rgba(227,34,34,.92);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .client-lightbox {
    padding: 10px;
  }

  .client-lightbox-panel {
    width: 96vw;
    max-height: 91vh;
  }

  .client-lightbox-header {
    min-height: 54px;
    padding: 0 12px;
  }

  .client-lightbox-stage {
    padding: 12px 44px;
  }

  .client-lightbox-stage img,
  .client-lightbox-stage video {
    max-height: 70vh;
  }

  .client-lightbox-nav {
    min-width: 38px;
    min-height: 38px;
    font-size: 0;
  }

  .client-lightbox-prev::before {
    content: "‹";
    font-size: 28px;
    line-height: 1;
  }

  .client-lightbox-next::before {
    content: "›";
    font-size: 28px;
    line-height: 1;
  }

  .client-lightbox-prev {
    left: 8px;
  }

  .client-lightbox-next {
    right: 8px;
  }

  .client-lightbox-help {
    font-size: 6px;
    letter-spacing: .18em;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_30.5 — CLEAN CLIENT LIGHTBOX + PHOTO NEXT / PREV CONTROLS */
/* 🟩 GREEN HIGHLIGHT START: CMV_30.9 — CLIENT ACTION CARDS + DELIVERY FLOW CLICK BEHAVIOR */

button.client-delivery-card,
button.client-flow-card {
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.client-action-card {
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    opacity .25s ease,
    filter .25s ease;
}

.client-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(227,34,34,.38);
  background:
    linear-gradient(135deg, rgba(227,34,34,.08), rgba(255,255,255,.24)),
    rgba(255,255,255,.28);
  box-shadow:
    0 18px 56px rgba(0,0,0,.08),
    0 0 26px rgba(227,34,34,.055);
}

.client-delivery-preview.is-locked .client-action-card {
  opacity: .68;
  filter: grayscale(.35);
}

.client-delivery-preview.is-locked .client-action-card:hover {
  opacity: .9;
  filter: grayscale(0);
}

body.theme-night .client-action-card:hover {
  background:
    linear-gradient(135deg, rgba(227,34,34,.12), rgba(255,255,255,.035)),
    rgba(0,0,0,.26);
}

.client-action-card:focus-visible {
  outline: 1px solid rgba(227,34,34,.92);
  outline-offset: 3px;
}

/* 🟥 RED HIGHLIGHT END: CMV_30.9 — CLIENT ACTION CARDS + DELIVERY FLOW CLICK BEHAVIOR */

/* 🟩 GREEN HIGHLIGHT START: CMV_30.10 — GALLERY-SPECIFIC MEDIA VISIBILITY LOCK */

.client-media-card.client-media-hidden,
.client-media-card[hidden],
[data-client-media-gallery][hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_30.10 — GALLERY-SPECIFIC MEDIA VISIBILITY LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_30.11 — SINGLE EMAIL NOTE ACTION STYLING */

button.client-download-card {
  font-family: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
}

button.client-download-card.client-email-action-card {
  cursor: pointer;
}

button.client-download-card.client-email-action-card:hover {
  border-color: rgba(227,34,34,.42);
  background:
    linear-gradient(135deg, rgba(227,34,34,.09), rgba(255,255,255,.24)),
    rgba(255,255,255,.3);
  box-shadow:
    0 18px 56px rgba(0,0,0,.08),
    0 0 28px rgba(227,34,34,.06);
}

body.theme-night button.client-download-card.client-email-action-card:hover {
  background:
    linear-gradient(135deg, rgba(227,34,34,.12), rgba(255,255,255,.035)),
    rgba(0,0,0,.26);
}

/* 🟥 RED HIGHLIGHT END: CMV_30.11 — SINGLE EMAIL NOTE ACTION STYLING */
/* 🟩 GREEN HIGHLIGHT START: CMV_31.0 — CLIENT DELIVERY VISUAL EXPANSION */

.client-visual-command {
  width: min(1080px, 100%);
  margin: 18px auto 0;
  padding: 18px;
  border: 1px solid rgba(0,0,0,.13);
  background:
    radial-gradient(circle at 18% 18%, rgba(227,34,34,.09), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.2)),
    rgba(255,255,255,.24);
  box-shadow:
    0 24px 76px rgba(0,0,0,.08),
    inset 0 0 48px rgba(227,34,34,.035);
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}

.client-visual-command::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(227,34,34,.07), transparent),
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,.024) 0,
      rgba(0,0,0,.024) 1px,
      transparent 1px,
      transparent 11px
    );
  opacity: .55;
}

.client-visual-command-main,
.client-visual-stats,
.client-delivery-timeline {
  position: relative;
  z-index: 2;
}

.client-visual-command-main {
  display: grid;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.11);
}

.client-visual-command-main span {
  font-size: 8px;
  letter-spacing: .36em;
  color: var(--red);
}

.client-visual-command-main strong {
  font-size: clamp(24px, 4vw, 52px);
  line-height: .86;
  letter-spacing: -.07em;
}

.client-visual-command-main p {
  max-width: 760px;
  margin: 0;
  font-size: 8px;
  line-height: 1.9;
  letter-spacing: .26em;
  color: rgba(0,0,0,.56);
}

.client-visual-stats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.client-visual-stat {
  min-height: 72px;
  padding: 13px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.28);
}

.client-visual-stat span {
  font-size: 7px;
  letter-spacing: .32em;
  color: rgba(0,0,0,.46);
}

.client-visual-stat strong {
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--red);
}

.client-delivery-timeline {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.client-delivery-step {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.22);
  color: rgba(0,0,0,.46);
  font-size: 7px;
  letter-spacing: .26em;
  text-align: center;
  transition:
    border-color .25s ease,
    background .25s ease,
    color .25s ease,
    opacity .25s ease;
}

.client-delivery-step.is-current {
  border-color: rgba(227,34,34,.42);
  background: rgba(227,34,34,.08);
  color: var(--red);
}

.client-delivery-step.is-complete {
  border-color: rgba(227,34,34,.24);
  color: rgba(227,34,34,.68);
  background: rgba(227,34,34,.045);
}

body.theme-night .client-visual-command {
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 18% 18%, rgba(227,34,34,.14), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(0,0,0,.22);
  box-shadow: 0 24px 80px rgba(0,0,0,.26);
}

body.theme-night .client-visual-command-main {
  border-bottom-color: rgba(255,255,255,.11);
}

body.theme-night .client-visual-command-main p,
body.theme-night .client-visual-stat span,
body.theme-night .client-delivery-step {
  color: rgba(255,255,255,.52);
}

body.theme-night .client-visual-stat,
body.theme-night .client-delivery-step {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

body.theme-night .client-delivery-step.is-current,
body.theme-night .client-delivery-step.is-complete {
  border-color: rgba(227,34,34,.38);
  background: rgba(227,34,34,.10);
  color: #ff4b4b;
}

body.theme-beige .client-visual-command {
  border-color: rgba(74,49,29,.16);
  background:
    radial-gradient(circle at 18% 18%, rgba(227,34,34,.08), transparent 32%),
    linear-gradient(135deg, rgba(255,248,235,.62), rgba(244,226,196,.22)),
    rgba(245,231,206,.28);
}

@media (max-width: 768px) {
  .client-visual-command {
    margin-top: 14px;
    padding: 15px;
  }

  .client-visual-command-main strong {
    font-size: clamp(26px, 12vw, 42px);
  }

  .client-visual-command-main p {
    font-size: 7px;
    letter-spacing: .2em;
  }

  .client-visual-stats {
    grid-template-columns: 1fr;
  }

  .client-visual-stat {
    min-height: 62px;
  }

  .client-delivery-timeline {
    grid-template-columns: 1fr 1fr;
  }

  .client-delivery-step {
    min-height: 32px;
    font-size: 6.5px;
    letter-spacing: .2em;
  }
}

@media (max-width: 390px) {
  .client-delivery-timeline {
    grid-template-columns: 1fr;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_31.0 — CLIENT DELIVERY VISUAL EXPANSION */
/* 🟩 GREEN HIGHLIGHT START: CMV_31.1 — CLIENT ACCESS GRANTED STATUS + MOBILE POLISH */

:root {
  --cmv-access-green: #24b15f;
  --cmv-access-green-soft: rgba(36,177,95,.12);
  --cmv-access-green-mid: rgba(36,177,95,.34);
  --cmv-access-green-line: rgba(36,177,95,.48);
}

.client-visual-command {
  transition:
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    transform .28s ease;
}

.client-visual-command.is-locked {
  border-color: rgba(227,34,34,.20);
}

.client-visual-command.is-unlocked {
  border-color: var(--cmv-access-green-line);
  background:
    radial-gradient(circle at 18% 18%, rgba(36,177,95,.13), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.22)),
    rgba(255,255,255,.26);
  box-shadow:
    0 24px 76px rgba(0,0,0,.08),
    0 0 0 1px rgba(36,177,95,.08),
    inset 0 0 52px rgba(36,177,95,.07);
}

.client-visual-command.is-unlocked::before {
  background:
    linear-gradient(90deg, transparent, rgba(36,177,95,.12), transparent),
    repeating-linear-gradient(
      180deg,
      rgba(36,177,95,.035) 0,
      rgba(36,177,95,.035) 1px,
      transparent 1px,
      transparent 11px
    );
  opacity: .75;
}

.client-visual-stat-status {
  position: relative;
}

.client-visual-stat-status::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 12px;
  right: 12px;
  border-radius: 50%;
  background: var(--red);
  box-shadow:
    0 0 0 4px rgba(227,34,34,.08),
    0 0 18px rgba(227,34,34,.28);
}

.client-visual-stat-status.is-unlocked::before {
  background: var(--cmv-access-green);
  box-shadow:
    0 0 0 4px rgba(36,177,95,.11),
    0 0 20px rgba(36,177,95,.42);
}

.client-visual-stat-status.is-unlocked {
  border-color: var(--cmv-access-green-line);
  background: var(--cmv-access-green-soft);
}

.client-visual-stat-status.is-unlocked strong,
.client-visual-command.is-unlocked .client-visual-stat strong,
.client-visual-command.is-unlocked .client-visual-command-main span {
  color: var(--cmv-access-green);
}

.client-visual-command.is-unlocked .client-delivery-step.is-current {
  border-color: var(--cmv-access-green-line);
  background: var(--cmv-access-green-soft);
  color: var(--cmv-access-green);
}

.client-visual-command.is-unlocked .client-delivery-step.is-complete {
  border-color: var(--cmv-access-green-mid);
  background: rgba(36,177,95,.075);
  color: rgba(36,177,95,.82);
}

.client-visual-command.is-unlocked .client-delivery-step.is-complete::after,
.client-visual-command.is-unlocked .client-delivery-step.is-current::after {
  content: "✓";
  margin-left: 8px;
  font-size: 8px;
  letter-spacing: 0;
}

body.theme-night .client-visual-command.is-unlocked {
  border-color: rgba(36,177,95,.52);
  background:
    radial-gradient(circle at 18% 18%, rgba(36,177,95,.18), transparent 30%),
    linear-gradient(135deg, rgba(36,177,95,.075), rgba(255,255,255,.025)),
    rgba(0,0,0,.26);
  box-shadow:
    0 24px 80px rgba(0,0,0,.32),
    0 0 32px rgba(36,177,95,.08),
    inset 0 0 48px rgba(36,177,95,.07);
}

body.theme-night .client-visual-stat-status.is-unlocked,
body.theme-night .client-visual-command.is-unlocked .client-delivery-step.is-current,
body.theme-night .client-visual-command.is-unlocked .client-delivery-step.is-complete {
  border-color: rgba(36,177,95,.48);
  background: rgba(36,177,95,.10);
  color: #3ee17d;
}

body.theme-night .client-visual-stat-status.is-unlocked strong,
body.theme-night .client-visual-command.is-unlocked .client-visual-stat strong,
body.theme-night .client-visual-command.is-unlocked .client-visual-command-main span {
  color: #3ee17d;
}

body.theme-beige .client-visual-command.is-unlocked {
  border-color: rgba(36,177,95,.38);
  background:
    radial-gradient(circle at 18% 18%, rgba(36,177,95,.12), transparent 32%),
    linear-gradient(135deg, rgba(255,248,235,.64), rgba(244,226,196,.23)),
    rgba(245,231,206,.30);
}

@media (max-width: 768px) {
  .client-visual-command {
    width: 100%;
    margin-top: 12px;
    padding: 14px;
  }

  .client-visual-command-main {
    gap: 7px;
    padding-bottom: 13px;
  }

  .client-visual-command-main span {
    font-size: 7px;
    letter-spacing: .28em;
  }

  .client-visual-command-main strong {
    font-size: clamp(30px, 13vw, 44px);
    letter-spacing: -.075em;
  }

  .client-visual-command-main p {
    max-width: 100%;
    font-size: 6.8px;
    line-height: 1.85;
    letter-spacing: .17em;
  }

  .client-visual-stats {
    margin-top: 12px;
    gap: 8px;
  }

  .client-visual-stat {
    min-height: 58px;
    padding: 12px;
  }

  .client-visual-stat span {
    font-size: 6.5px;
    letter-spacing: .28em;
  }

  .client-visual-stat strong {
    font-size: 9px;
    letter-spacing: .2em;
  }

  .client-visual-stat-status::before {
    top: 10px;
    right: 10px;
  }

  .client-delivery-timeline {
    gap: 7px;
  }

  .client-delivery-step {
    min-height: 34px;
    padding: 0 8px;
    font-size: 6.3px;
    letter-spacing: .16em;
  }

  .client-visual-command.is-unlocked .client-delivery-step.is-complete::after,
  .client-visual-command.is-unlocked .client-delivery-step.is-current::after {
    margin-left: 5px;
    font-size: 7px;
  }
}

@media (max-width: 390px) {
  .client-visual-command-main strong {
    font-size: clamp(28px, 15vw, 38px);
  }

  .client-visual-stat strong {
    line-height: 1.35;
  }

  .client-delivery-step {
    min-height: 32px;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_31.1 — CLIENT ACCESS GRANTED STATUS + MOBILE POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_31.2 — CLIENT CLEARANCE CONTRAST BALANCE */

/*
  CMV_31.2 direction:
  - Green is now a clearance signal, not a full-panel color wash.
  - Red remains the active/current action color.
  - Completed steps turn green.
  - Current step stays red.
  - Dark mode keeps a stronger green clearance glow.
*/

:root {
  --cmv-access-green: #218f50;
  --cmv-access-green-soft: rgba(33,143,80,.075);
  --cmv-access-green-mid: rgba(33,143,80,.26);
  --cmv-access-green-line: rgba(33,143,80,.36);
}

/* Light/default mode: reduce green wash and keep the panel mostly neutral */
.client-visual-command.is-unlocked {
  border-color: rgba(33,143,80,.30);
  background:
    radial-gradient(circle at 18% 18%, rgba(33,143,80,.055), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.56), rgba(255,255,255,.22)),
    rgba(255,255,255,.26);
  box-shadow:
    0 24px 76px rgba(0,0,0,.08),
    0 0 0 1px rgba(33,143,80,.045),
    inset 0 0 42px rgba(33,143,80,.035);
}

.client-visual-command.is-unlocked::before {
  background:
    linear-gradient(90deg, transparent, rgba(227,34,34,.045), transparent),
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,.022) 0,
      rgba(0,0,0,.022) 1px,
      transparent 1px,
      transparent 11px
    );
  opacity: .48;
}

/* Do not make every readout green */
.client-visual-command.is-unlocked .client-visual-command-main span {
  color: var(--red);
}

.client-visual-command.is-unlocked .client-visual-stat strong {
  color: var(--red);
}

/* Only clearance-critical text stays green */
.client-visual-command.is-unlocked #clientVisualStatus,
.client-visual-command.is-unlocked #clientVisualFlow {
  color: var(--cmv-access-green);
}

.client-visual-command.is-unlocked #clientVisualMode {
  color: var(--red);
}

/* Status card gets the green clearance language */
.client-visual-stat-status.is-unlocked {
  border-color: var(--cmv-access-green-line);
  background: rgba(33,143,80,.065);
}

.client-visual-stat-status.is-unlocked::before {
  background: var(--cmv-access-green);
  box-shadow:
    0 0 0 4px rgba(33,143,80,.09),
    0 0 16px rgba(33,143,80,.32);
}

/* Timeline: completed = green, current = red */
.client-visual-command.is-unlocked .client-delivery-step.is-current {
  border-color: rgba(227,34,34,.42);
  background: rgba(227,34,34,.065);
  color: var(--red);
}

.client-visual-command.is-unlocked .client-delivery-step.is-current::after {
  content: "";
  margin-left: 0;
}

.client-visual-command.is-unlocked .client-delivery-step.is-complete {
  border-color: var(--cmv-access-green-mid);
  background: rgba(33,143,80,.06);
  color: rgba(33,143,80,.82);
}

.client-visual-command.is-unlocked .client-delivery-step.is-complete::after {
  content: "✓";
  margin-left: 8px;
  font-size: 8px;
  letter-spacing: 0;
}

/* Active unlocked gallery receives a subtle clearance mark */
.client-gallery-card {
  position: relative;
  overflow: hidden;
}

.client-gallery-card.is-client-cleared {
  border-color: rgba(33,143,80,.42);
  box-shadow:
    0 22px 64px rgba(0,0,0,.08),
    0 0 24px rgba(33,143,80,.08);
}

.client-gallery-card.is-client-cleared::after {
  content: "✓";
  width: 18px;
  height: 18px;
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(33,143,80,.44);
  background: rgba(33,143,80,.10);
  color: var(--cmv-access-green);
  font-size: 9px;
  line-height: 1;
}

/* Beige mode: same balanced clearance system, warmer background */
body.theme-beige .client-visual-command.is-unlocked {
  border-color: rgba(33,143,80,.28);
  background:
    radial-gradient(circle at 18% 18%, rgba(33,143,80,.055), transparent 32%),
    linear-gradient(135deg, rgba(255,248,235,.64), rgba(244,226,196,.22)),
    rgba(245,231,206,.30);
}

/* Night mode: keep stronger green clearance glow, but current action still stays red */
body.theme-night .client-visual-command.is-unlocked {
  border-color: rgba(36,177,95,.52);
  background:
    radial-gradient(circle at 18% 18%, rgba(36,177,95,.18), transparent 30%),
    linear-gradient(135deg, rgba(36,177,95,.075), rgba(255,255,255,.025)),
    rgba(0,0,0,.26);
  box-shadow:
    0 24px 80px rgba(0,0,0,.32),
    0 0 32px rgba(36,177,95,.08),
    inset 0 0 48px rgba(36,177,95,.07);
}

body.theme-night .client-visual-command.is-unlocked::before {
  background:
    linear-gradient(90deg, transparent, rgba(36,177,95,.12), transparent),
    repeating-linear-gradient(
      180deg,
      rgba(36,177,95,.032) 0,
      rgba(36,177,95,.032) 1px,
      transparent 1px,
      transparent 11px
    );
  opacity: .72;
}

body.theme-night .client-visual-command.is-unlocked .client-visual-stat strong,
body.theme-night .client-visual-command.is-unlocked .client-visual-command-main span,
body.theme-night .client-visual-command.is-unlocked #clientVisualMode {
  color: #ff4b4b;
}

body.theme-night .client-visual-command.is-unlocked #clientVisualStatus,
body.theme-night .client-visual-command.is-unlocked #clientVisualFlow {
  color: #3ee17d;
}

body.theme-night .client-visual-command.is-unlocked .client-delivery-step.is-current {
  border-color: rgba(227,34,34,.58);
  background: rgba(227,34,34,.13);
  color: #ff4b4b;
}

body.theme-night .client-visual-command.is-unlocked .client-delivery-step.is-current::after {
  content: "";
  margin-left: 0;
}

body.theme-night .client-visual-command.is-unlocked .client-delivery-step.is-complete {
  border-color: rgba(36,177,95,.48);
  background: rgba(36,177,95,.10);
  color: #3ee17d;
}

body.theme-night .client-gallery-card.is-client-cleared {
  border-color: rgba(36,177,95,.48);
  box-shadow:
    0 22px 70px rgba(0,0,0,.30),
    0 0 26px rgba(36,177,95,.10);
}

body.theme-night .client-gallery-card.is-client-cleared::after {
  border-color: rgba(36,177,95,.48);
  background: rgba(36,177,95,.13);
  color: #3ee17d;
}

@media (max-width: 768px) {
  .client-gallery-card.is-client-cleared::after {
    width: 16px;
    height: 16px;
    right: 10px;
    bottom: 10px;
    font-size: 8px;
  }

  .client-visual-command.is-unlocked .client-delivery-step.is-complete::after {
    margin-left: 5px;
    font-size: 7px;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_31.2 — CLIENT CLEARANCE CONTRAST BALANCE */
/* 🟩 GREEN HIGHLIGHT START: CMV_31.3 — CLIENT THEME CLEARANCE BALANCE REPAIR */

/*
  CMV_31.3 correction:
  - Dark mode returns closer to the stronger 31.1 clearance look.
  - Light and beige keep the 31.2 balanced structure.
  - MEDIA LIVE turns green after unlock.
  - The active/current review step turns green after unlock.
  - Light and beige receive slightly stronger contrast so the UI does not feel too soft.
*/

/* Slightly stronger default/light contrast */
.client-visual-command {
  border-color: rgba(0,0,0,.16);
}

.client-visual-stat,
.client-delivery-step,
.client-gallery-card {
  border-color: rgba(0,0,0,.14);
}

.client-visual-command.is-unlocked {
  border-color: rgba(33,143,80,.34);
  background:
    radial-gradient(circle at 18% 18%, rgba(33,143,80,.06), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.28)),
    rgba(255,255,255,.30);
  box-shadow:
    0 26px 78px rgba(0,0,0,.10),
    0 0 0 1px rgba(33,143,80,.055),
    inset 0 0 42px rgba(33,143,80,.035);
}

/* Light mode: keep current action green after access is granted */
.client-visual-command.is-unlocked #clientVisualStatus,
.client-visual-command.is-unlocked #clientVisualMode,
.client-visual-command.is-unlocked #clientVisualFlow {
  color: var(--cmv-access-green);
}

.client-visual-command.is-unlocked .client-delivery-step.is-current {
  border-color: var(--cmv-access-green-line);
  background: rgba(33,143,80,.075);
  color: var(--cmv-access-green);
}

.client-visual-command.is-unlocked .client-delivery-step.is-current::after {
  content: "✓";
  margin-left: 8px;
  font-size: 8px;
  letter-spacing: 0;
}

/* Prevent the active cleared gallery from feeling half-green / half-red */
.client-gallery-card.is-active.is-client-cleared {
  border-color: rgba(33,143,80,.48);
  background:
    linear-gradient(135deg, rgba(33,143,80,.085), rgba(255,255,255,.30)),
    rgba(255,255,255,.28);
}

.client-gallery-card.is-active.is-client-cleared span,
.client-gallery-card.is-active.is-client-cleared em {
  color: var(--cmv-access-green);
}

.client-gallery-card.is-active.is-client-cleared em {
  border-color: rgba(33,143,80,.32);
  background: rgba(33,143,80,.075);
}

/* Beige mode: keep the new direction but add contrast and green MEDIA LIVE/current step */
body.theme-beige .client-visual-command {
  border-color: rgba(74,49,29,.20);
}

body.theme-beige .client-visual-stat,
body.theme-beige .client-delivery-step,
body.theme-beige .client-gallery-card {
  border-color: rgba(74,49,29,.18);
}

body.theme-beige .client-visual-command.is-unlocked {
  border-color: rgba(33,143,80,.36);
  background:
    radial-gradient(circle at 18% 18%, rgba(33,143,80,.065), transparent 32%),
    linear-gradient(135deg, rgba(255,248,235,.72), rgba(244,226,196,.30)),
    rgba(245,231,206,.34);
  box-shadow:
    0 26px 78px rgba(74,49,29,.11),
    0 0 0 1px rgba(33,143,80,.055),
    inset 0 0 42px rgba(33,143,80,.035);
}

body.theme-beige .client-visual-command.is-unlocked #clientVisualStatus,
body.theme-beige .client-visual-command.is-unlocked #clientVisualMode,
body.theme-beige .client-visual-command.is-unlocked #clientVisualFlow {
  color: var(--cmv-access-green);
}

body.theme-beige .client-visual-command.is-unlocked .client-delivery-step.is-current {
  border-color: var(--cmv-access-green-line);
  background: rgba(33,143,80,.075);
  color: var(--cmv-access-green);
}

body.theme-beige .client-visual-command.is-unlocked .client-delivery-step.is-current::after {
  content: "✓";
  margin-left: 8px;
  font-size: 8px;
  letter-spacing: 0;
}

/* Dark mode: revert closer to the stronger 31.1 clearance language */
body.theme-night .client-visual-command.is-unlocked {
  border-color: rgba(36,177,95,.52);
  background:
    radial-gradient(circle at 18% 18%, rgba(36,177,95,.18), transparent 30%),
    linear-gradient(135deg, rgba(36,177,95,.075), rgba(255,255,255,.025)),
    rgba(0,0,0,.26);
  box-shadow:
    0 24px 80px rgba(0,0,0,.32),
    0 0 32px rgba(36,177,95,.08),
    inset 0 0 48px rgba(36,177,95,.07);
}

body.theme-night .client-visual-command.is-unlocked::before {
  background:
    linear-gradient(90deg, transparent, rgba(36,177,95,.12), transparent),
    repeating-linear-gradient(
      180deg,
      rgba(36,177,95,.032) 0,
      rgba(36,177,95,.032) 1px,
      transparent 1px,
      transparent 11px
    );
  opacity: .72;
}

body.theme-night .client-visual-command.is-unlocked .client-visual-stat strong,
body.theme-night .client-visual-command.is-unlocked .client-visual-command-main span,
body.theme-night .client-visual-command.is-unlocked #clientVisualStatus,
body.theme-night .client-visual-command.is-unlocked #clientVisualMode,
body.theme-night .client-visual-command.is-unlocked #clientVisualFlow {
  color: #3ee17d;
}

body.theme-night .client-visual-command.is-unlocked .client-delivery-step.is-current,
body.theme-night .client-visual-command.is-unlocked .client-delivery-step.is-complete {
  border-color: rgba(36,177,95,.48);
  background: rgba(36,177,95,.10);
  color: #3ee17d;
}

body.theme-night .client-visual-command.is-unlocked .client-delivery-step.is-current::after,
body.theme-night .client-visual-command.is-unlocked .client-delivery-step.is-complete::after {
  content: "✓";
  margin-left: 8px;
  font-size: 8px;
  letter-spacing: 0;
}

/* Dark mode: remove the awkward green-border/red-inside active gallery mix */
body.theme-night .client-gallery-card.is-active.is-client-cleared {
  border-color: rgba(36,177,95,.48);
  background:
    linear-gradient(135deg, rgba(36,177,95,.11), rgba(255,255,255,.035)),
    rgba(0,0,0,.28);
  box-shadow:
    0 22px 70px rgba(0,0,0,.30),
    0 0 26px rgba(36,177,95,.10);
}

body.theme-night .client-gallery-card.is-active.is-client-cleared span,
body.theme-night .client-gallery-card.is-active.is-client-cleared em {
  color: #3ee17d;
}

body.theme-night .client-gallery-card.is-active.is-client-cleared em {
  border-color: rgba(36,177,95,.42);
  background: rgba(36,177,95,.12);
}

@media (max-width: 768px) {
  .client-visual-command.is-unlocked .client-delivery-step.is-current::after,
  body.theme-beige .client-visual-command.is-unlocked .client-delivery-step.is-current::after,
  body.theme-night .client-visual-command.is-unlocked .client-delivery-step.is-current::after {
    margin-left: 5px;
    font-size: 7px;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_31.3 — CLIENT THEME CLEARANCE BALANCE REPAIR */
/* 🟩 GREEN HIGHLIGHT START: CMV_31.4 — CLIENT MEDIA PREVIEW POLISH */

/*
  CMV_31.4 direction:
  - Keep the 31.3 access/color system stable.
  - Make the actual Photos / Videos / Downloads area feel more premium.
  - Improve thumbnail rhythm, review summary, lightbox presentation, and mobile readability.
*/

.client-media-viewer.is-client-locked .client-media-reviewbar {
  display: none !important;
}

.client-media-reviewbar {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.2fr .9fr 1fr;
  gap: 9px;
}

.client-media-reviewbar div {
  min-height: 58px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 7px;
  border: 1px solid rgba(0,0,0,.13);
  background:
    linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.18)),
    rgba(255,255,255,.24);
}

.client-media-reviewbar span {
  font-size: 6.8px;
  letter-spacing: .3em;
  color: rgba(0,0,0,.44);
}

.client-media-reviewbar strong {
  font-size: 9px;
  letter-spacing: .24em;
  color: var(--red);
}

.client-media-reviewbar.is-review-open div {
  border-color: rgba(33,143,80,.24);
}

.client-media-reviewbar.is-review-open strong {
  color: var(--cmv-access-green);
}

/* More premium review panel spacing */
.client-media-viewer.is-client-unlocked {
  padding: 22px;
}

.client-media-viewer.is-client-unlocked .client-media-tabs {
  margin-top: 16px;
  padding-top: 2px;
}

.client-media-viewer.is-client-unlocked .client-media-panel {
  margin-top: 16px;
}

/* Photos: cleaner gallery strip / grid rhythm */
.client-photo-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
}

.client-video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.client-download-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.client-media-card {
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}

.client-photo-card {
  min-height: 188px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.14)),
    rgba(255,255,255,.22);
}

.client-photo-card img {
  height: 148px;
  object-fit: cover;
  background:
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.055), transparent 46%),
    rgba(0,0,0,.045);
  filter: saturate(.96) contrast(1.02);
  transition:
    transform .32s ease,
    filter .32s ease;
}

.client-photo-card:hover {
  transform: translateY(-2px);
  border-color: rgba(227,34,34,.35);
  box-shadow:
    0 18px 48px rgba(0,0,0,.09),
    0 0 26px rgba(227,34,34,.05);
}

.client-photo-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.02) contrast(1.06);
}

.client-video-card,
.client-download-card {
  min-height: 158px;
  border-color: rgba(0,0,0,.13);
}

.client-video-card video {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 50% 45%, rgba(227,34,34,.14), transparent 42%),
    rgba(0,0,0,.92);
}

.client-download-card {
  padding-top: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.16)),
    rgba(255,255,255,.24);
}

.client-download-card:hover {
  transform: translateY(-2px);
  border-color: rgba(227,34,34,.34);
  box-shadow:
    0 18px 50px rgba(0,0,0,.08),
    0 0 24px rgba(227,34,34,.045);
}

.client-media-tab {
  transition:
    border-color .22s ease,
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}

.client-media-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(227,34,34,.28);
  color: var(--red);
}

/* Lightbox polish */
.client-lightbox-panel {
  width: min(1320px, 96vw);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 48px 150px rgba(0,0,0,.62),
    0 0 46px rgba(227,34,34,.055),
    inset 0 0 72px rgba(227,34,34,.035);
}

.client-lightbox-stage {
  background:
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.045), transparent 48%),
    rgba(255,255,255,.015);
}

.client-lightbox-stage img,
.client-lightbox-stage video {
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 28px 90px rgba(0,0,0,.46),
    0 0 0 1px rgba(0,0,0,.3);
}

.client-lightbox-title-stack span {
  color: rgba(255,255,255,.9);
}

.client-lightbox-title-stack small {
  color: rgba(255,255,255,.52);
}

.client-lightbox-nav {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(0,0,0,.28);
}

/* Night mode keeps the media room cinematic */
body.theme-night .client-media-reviewbar div {
  border-color: rgba(255,255,255,.13);
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    rgba(0,0,0,.18);
}

body.theme-night .client-media-reviewbar span {
  color: rgba(255,255,255,.48);
}

body.theme-night .client-media-reviewbar.is-review-open strong {
  color: #3ee17d;
}

body.theme-night .client-photo-card,
body.theme-night .client-video-card,
body.theme-night .client-download-card {
  border-color: rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(0,0,0,.22);
}

body.theme-night .client-photo-card:hover,
body.theme-night .client-download-card:hover {
  border-color: rgba(227,34,34,.42);
  box-shadow:
    0 20px 60px rgba(0,0,0,.34),
    0 0 28px rgba(227,34,34,.08);
}

/* Beige mode gets slightly more tactile contrast */
body.theme-beige .client-media-reviewbar div {
  border-color: rgba(74,49,29,.18);
  background:
    linear-gradient(135deg, rgba(255,248,235,.66), rgba(244,226,196,.26)),
    rgba(245,231,206,.26);
}

body.theme-beige .client-photo-card,
body.theme-beige .client-video-card,
body.theme-beige .client-download-card {
  border-color: rgba(74,49,29,.18);
  background:
    linear-gradient(135deg, rgba(255,248,235,.54), rgba(244,226,196,.22)),
    rgba(245,231,206,.22);
}

/* Mobile review room polish */
@media (max-width: 768px) {
  .client-media-viewer.is-client-unlocked {
    padding: 15px;
  }

  .client-media-header {
    gap: 12px;
  }

  .client-media-reviewbar {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 13px;
  }

  .client-media-reviewbar div {
    min-height: 52px;
    padding: 11px;
  }

  .client-media-reviewbar span {
    font-size: 6.4px;
    letter-spacing: .24em;
  }

  .client-media-reviewbar strong {
    font-size: 8.2px;
    letter-spacing: .2em;
  }

  .client-media-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .client-media-tab {
    min-height: 36px;
    padding: 0 8px;
    font-size: 6.4px;
    letter-spacing: .18em;
  }

  .client-photo-grid,
  .client-video-grid,
  .client-download-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .client-photo-card {
    min-height: 152px;
  }

  .client-photo-card img {
    height: 112px;
  }

  .client-video-card,
  .client-download-card {
    min-height: 136px;
  }

  .client-download-card {
    padding-top: 24px;
  }

  .client-media-card span {
    padding: 10px 10px 3px;
    font-size: 6.2px;
    letter-spacing: .2em;
  }

  .client-media-card strong {
    padding: 0 10px 3px;
    font-size: 8.2px;
    letter-spacing: .16em;
  }

  .client-media-card small {
    padding: 0 10px 10px;
    font-size: 6.2px;
    letter-spacing: .13em;
  }

  .client-lightbox-panel {
    width: 96vw;
    max-height: 92vh;
  }

  .client-lightbox-stage {
    padding: 10px 42px;
  }
}

@media (max-width: 430px) {
  .client-photo-grid,
  .client-video-grid,
  .client-download-grid {
    grid-template-columns: 1fr;
  }

  .client-photo-card img {
    height: 170px;
  }

  .client-media-tabs {
    grid-template-columns: 1fr;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_31.4 — CLIENT MEDIA PREVIEW POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_31.5_FINAL — CLIENT LIGHTBOX + ACCESS SOUND QA LOCK */

/*
  Final Client Delivery patch:
  - Prevents lightbox close from jumping the page back to the top.
  - Adds Full Screen photo review mode.
  - Keeps visual styling consistent with CMV_31.4.
*/

.client-lightbox-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-lightbox-fullscreen {
  min-width: 104px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.78);
  font-size: 7px;
  letter-spacing: .24em;
  cursor: pointer;
  transition:
    border-color .22s ease,
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}

.client-lightbox-fullscreen:hover {
  transform: translateY(-1px);
  border-color: rgba(227,34,34,.42);
  color: #fff;
  background: rgba(227,34,34,.10);
}

.client-lightbox-fullscreen[aria-pressed="true"] {
  border-color: rgba(227,34,34,.46);
  background: rgba(227,34,34,.13);
  color: #fff;
}

.client-lightbox-fullscreen:focus-visible {
  outline: 1px solid rgba(227,34,34,.75);
  outline-offset: 3px;
}

.client-lightbox.is-client-lightbox-fullscreen {
  padding: 0;
}

.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-panel,
.client-lightbox-panel.is-client-lightbox-panel-fullscreen,
#clientLightboxPanel:fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage-wrap,
#clientLightboxPanel:fullscreen .client-lightbox-stage-wrap {
  min-height: 0;
}

.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage,
#clientLightboxPanel:fullscreen .client-lightbox-stage {
  min-height: calc(100vh - 118px);
}

.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage img,
.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage video,
#clientLightboxPanel:fullscreen .client-lightbox-stage img,
#clientLightboxPanel:fullscreen .client-lightbox-stage video {
  max-width: min(96vw, 1800px);
  max-height: calc(100vh - 138px);
}

@media (max-width: 768px) {
  .client-lightbox-header {
    align-items: flex-start;
  }

  .client-lightbox-header-actions {
    gap: 6px;
  }

  .client-lightbox-fullscreen {
    min-width: 88px;
    height: 32px;
    font-size: 6.2px;
    letter-spacing: .18em;
  }

  .client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage,
  #clientLightboxPanel:fullscreen .client-lightbox-stage {
    min-height: calc(100vh - 128px);
  }

  .client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage img,
  .client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage video,
  #clientLightboxPanel:fullscreen .client-lightbox-stage img,
  #clientLightboxPanel:fullscreen .client-lightbox-stage video {
    max-width: 94vw;
    max-height: calc(100vh - 150px);
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_31.5_FINAL — CLIENT LIGHTBOX + ACCESS SOUND QA LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_31.5.1_FINAL — CLIENT LIGHTBOX CLICK + SCROLL HOTFIX */

/*
  Hotfix:
  - Keeps fullscreen class-based instead of native browser fullscreen.
  - Prevents Escape/Close from forcing the page back to the top.
  - Keeps photo cards clickable and stable.
*/

.client-lightbox.is-client-lightbox-fullscreen {
  display: flex;
  padding: 0;
}

.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-panel,
.client-lightbox-panel.is-client-lightbox-panel-fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage {
  min-height: calc(100vh - 118px);
}

.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage img,
.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage video {
  max-width: min(96vw, 1800px);
  max-height: calc(100vh - 138px);
}

.client-photo-card[data-client-lightbox-src] {
  cursor: pointer;
  touch-action: manipulation;
}

@media (max-width: 768px) {
  .client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage {
    min-height: calc(100vh - 128px);
  }

  .client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage img,
  .client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage video {
    max-width: 94vw;
    max-height: calc(100vh - 150px);
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_31.5.1_FINAL — CLIENT LIGHTBOX CLICK + SCROLL HOTFIX */

/* 🟩 GREEN HIGHLIGHT START: CMV_31.5.2_FINAL — 31.3 LIGHTBOX RESTORE + FULLSCREEN REPAIR */

/*
  Final restore:
  - Restores the 31.3 centered lightbox behavior.
  - Keeps the Full Screen button.
  - Prevents the 31.5.1 hotfix from forcing awkward positioning.
*/

.client-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: center !important;
}

.client-lightbox.open {
  display: flex !important;
}

.client-lightbox:not(.is-client-lightbox-fullscreen) {
  padding: 22px !important;
}

.client-lightbox:not(.is-client-lightbox-fullscreen) .client-lightbox-panel {
  width: min(1320px, 96vw) !important;
  height: auto !important;
  max-height: 94vh !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.client-lightbox:not(.is-client-lightbox-fullscreen) .client-lightbox-stage {
  min-height: 0 !important;
  padding: 18px 72px !important;
}

.client-lightbox:not(.is-client-lightbox-fullscreen) .client-lightbox-stage img,
.client-lightbox:not(.is-client-lightbox-fullscreen) .client-lightbox-stage video {
  max-width: 100% !important;
  max-height: 76vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.client-lightbox.is-client-lightbox-fullscreen {
  padding: 0 !important;
}

.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-panel,
.client-lightbox-panel.is-client-lightbox-panel-fullscreen,
#clientLightboxPanel:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(7,7,7,.98) !important;
}

.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage,
#clientLightboxPanel:fullscreen .client-lightbox-stage {
  min-height: calc(100vh - 118px) !important;
  padding: 18px 72px !important;
}

.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage img,
.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage video,
#clientLightboxPanel:fullscreen .client-lightbox-stage img,
#clientLightboxPanel:fullscreen .client-lightbox-stage video {
  max-width: min(96vw, 1800px) !important;
  max-height: calc(100vh - 138px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.client-photo-card[data-client-lightbox-src] {
  cursor: pointer;
  touch-action: manipulation;
}

@media (max-width: 768px) {
  .client-lightbox:not(.is-client-lightbox-fullscreen) {
    padding: 10px !important;
  }

  .client-lightbox:not(.is-client-lightbox-fullscreen) .client-lightbox-panel {
    width: 96vw !important;
    max-height: 91vh !important;
  }

  .client-lightbox:not(.is-client-lightbox-fullscreen) .client-lightbox-stage {
    padding: 12px 44px !important;
  }

  .client-lightbox:not(.is-client-lightbox-fullscreen) .client-lightbox-stage img,
  .client-lightbox:not(.is-client-lightbox-fullscreen) .client-lightbox-stage video {
    max-height: 70vh !important;
  }

  .client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage,
  #clientLightboxPanel:fullscreen .client-lightbox-stage {
    min-height: calc(100vh - 128px) !important;
    padding: 12px 44px !important;
  }

  .client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage img,
  .client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage video,
  #clientLightboxPanel:fullscreen .client-lightbox-stage img,
  #clientLightboxPanel:fullscreen .client-lightbox-stage video {
    max-width: 94vw !important;
    max-height: calc(100vh - 150px) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_31.5.2_FINAL — 31.3 LIGHTBOX RESTORE + FULLSCREEN REPAIR */
/* 🟩 GREEN HIGHLIGHT START: CMV_31.5.3_FINAL — CLIENT LIGHTBOX POP-IN RESTORE */

/*
  Final visual polish:
  - Restores the older “photo pops open in front of you” feeling.
  - Keeps the 31.5.2 click/fullscreen logic.
  - Changes photo hover cursor back to a zoom/magnify feel.
  - Keeps fullscreen mode untouched.
*/

/* Photo cards should feel like zoom targets, not normal buttons */
.client-photo-card[data-client-lightbox-src],
.client-photo-card[data-client-lightbox-src] img {
  cursor: zoom-in !important;
}

/* Make the overlay appear immediately in the center */
.client-lightbox.open:not(.is-client-lightbox-fullscreen) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Restore the pop-in / zoom-in feel */
.client-lightbox.open:not(.is-client-lightbox-fullscreen) .client-lightbox-panel {
  transform-origin: center center !important;
  animation: cmvClientLightboxPopIn .22s cubic-bezier(.18,.82,.28,1) both !important;
  will-change: transform, opacity;
}

/* Make the image itself feel like it expands into place */
.client-lightbox.open:not(.is-client-lightbox-fullscreen) .client-lightbox-stage img,
.client-lightbox.open:not(.is-client-lightbox-fullscreen) .client-lightbox-stage video {
  animation: cmvClientMediaZoomIn .24s cubic-bezier(.18,.82,.28,1) both !important;
  transform-origin: center center !important;
}

/* Subtle backdrop arrival so the photo feels like it comes forward */
.client-lightbox.open .client-lightbox-backdrop {
  animation: cmvClientLightboxBackdropIn .18s ease-out both !important;
}

/* Avoid animation conflicts in fullscreen */
.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-panel,
.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage img,
.client-lightbox.is-client-lightbox-fullscreen .client-lightbox-stage video,
#clientLightboxPanel:fullscreen,
#clientLightboxPanel:fullscreen .client-lightbox-stage img,
#clientLightboxPanel:fullscreen .client-lightbox-stage video {
  animation: none !important;
}

/* Pop animation */
@keyframes cmvClientLightboxPopIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Media zoom animation */
@keyframes cmvClientMediaZoomIn {
  0% {
    opacity: 0;
    transform: scale(.965);
    filter: brightness(.86) contrast(.96);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) contrast(1);
  }
}

/* Backdrop fade */
@keyframes cmvClientLightboxBackdropIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Mobile: keep it snappy, not floaty */
@media (max-width: 768px) {
  .client-lightbox.open:not(.is-client-lightbox-fullscreen) .client-lightbox-panel {
    animation-duration: .18s !important;
  }

  .client-lightbox.open:not(.is-client-lightbox-fullscreen) .client-lightbox-stage img,
  .client-lightbox.open:not(.is-client-lightbox-fullscreen) .client-lightbox-stage video {
    animation-duration: .2s !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_31.5.3_FINAL — CLIENT LIGHTBOX POP-IN RESTORE */
/* 🟩 GREEN HIGHLIGHT START: CMV_32.0 — SERVICE INQUIRY PHASE + CONTACT ROUTER */

/*
  CMV_32.0:
  Converts the Services modal into an inquiry-phase contact path.
  This does not launch full booking packages.
  This does not touch Client Delivery or the paused split-preview idea.
*/

.coming-soon-booking-link {
  display: none;
  width: 100%;
  margin: 1rem 0 0;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(120, 0, 0, 0.42);
  border-radius: 999px;
  background: rgba(120, 0, 0, 0.08);
  color: var(--cm-red);
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-align: center;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.coming-soon-modal-v234[data-soon-type="service"] .coming-soon-booking-link {
  display: flex;
}

.coming-soon-booking-link:hover,
.coming-soon-booking-link:focus-visible {
  transform: translateY(-1px);
  background: rgba(120, 0, 0, 0.14);
  border-color: rgba(120, 0, 0, 0.72);
  outline: none;
}

body.theme-night .coming-soon-booking-link {
  border-color: rgba(255, 85, 85, 0.36);
  background: rgba(255, 85, 85, 0.08);
  color: rgba(255, 170, 170, 0.94);
}

body.theme-night .coming-soon-booking-link:hover,
body.theme-night .coming-soon-booking-link:focus-visible {
  background: rgba(255, 85, 85, 0.14);
  border-color: rgba(255, 130, 130, 0.7);
}

body.theme-beige .coming-soon-booking-link {
  border-color: rgba(115, 46, 25, 0.34);
  background: rgba(115, 46, 25, 0.08);
  color: #6f2f1e;
}

body.theme-beige .coming-soon-booking-link:hover,
body.theme-beige .coming-soon-booking-link:focus-visible {
  background: rgba(115, 46, 25, 0.14);
  border-color: rgba(115, 46, 25, 0.62);
}

@media (max-width: 768px) {
  .coming-soon-booking-link {
    padding: 0.9rem 0.85rem;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_32.0 — SERVICE INQUIRY PHASE + CONTACT ROUTER */
/* 🟩 GREEN HIGHLIGHT START: CMV_32.2 — SERVICE INQUIRY PHASE COPY LOCK */

/*
  Adds a clear inquiry-phase notice so Services does not feel fully launched yet.
  This patch is copy/positioning only.
  It does not touch Client Delivery or the ignored 32.1_TEST full-width experiment.
*/

.service-inquiry-phase-note {
  width: min(100%, 760px);
  margin: 1.15rem 0 1.35rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(120, 0, 0, 0.26);
  border-radius: 18px;
  background: rgba(120, 0, 0, 0.045);
  display: grid;
  gap: 0.34rem;
}

.service-inquiry-phase-note span {
  color: var(--cm-red);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.service-inquiry-phase-note strong {
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.service-inquiry-phase-note em {
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.08em;
  font-style: normal;
  text-transform: uppercase;
}

body.theme-night .service-inquiry-phase-note {
  border-color: rgba(255, 85, 85, 0.24);
  background: rgba(255, 85, 85, 0.055);
}

body.theme-night .service-inquiry-phase-note span {
  color: rgba(255, 150, 150, 0.96);
}

body.theme-night .service-inquiry-phase-note strong {
  color: rgba(255, 238, 238, 0.9);
}

body.theme-night .service-inquiry-phase-note em {
  color: rgba(255, 220, 220, 0.58);
}

body.theme-beige .service-inquiry-phase-note {
  border-color: rgba(115, 46, 25, 0.25);
  background: rgba(115, 46, 25, 0.055);
}

body.theme-beige .service-inquiry-phase-note span {
  color: #7b2f1c;
}

body.theme-beige .service-inquiry-phase-note strong {
  color: #2b1c15;
}

body.theme-beige .service-inquiry-phase-note em {
  color: rgba(43, 28, 21, 0.64);
}

@media (max-width: 768px) {
  .service-inquiry-phase-note {
    width: 100%;
    margin: 1rem 0 1.15rem;
    padding: 0.9rem 0.85rem;
    border-radius: 16px;
  }

  .service-inquiry-phase-note span {
    font-size: 0.58rem;
    letter-spacing: 0.18em;
  }

  .service-inquiry-phase-note strong {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    line-height: 1.5;
  }

  .service-inquiry-phase-note em {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    line-height: 1.65;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_32.2 — SERVICE INQUIRY PHASE COPY LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_32.3 — SERVICE INQUIRY MOBILE QA + FINAL LOCK */

/*
  Final QA lock for CMV_32:
  - Fixes Contact checklist layout after adding DELIVERY TIMELINE.
  - Keeps Services clearly in inquiry phase.
  - Tightens mobile spacing.
  - Does not touch Client Delivery.
  - Does not restore the ignored CMV_32.1_TEST client full-width experiment.
*/

/* Desktop: five inquiry chips now fit intentionally across the panel */
@media (min-width: 769px) {
  #contact .booking-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  #contact .booking-list span {
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 10px 8px !important;
    font-size: 6.4px !important;
    letter-spacing: 0.16em !important;
    overflow-wrap: anywhere !important;
  }
}

/* Services inquiry note: keep it visible but not too heavy */
.service-inquiry-phase-note {
  overflow: hidden;
}

.service-inquiry-phase-note span,
.service-inquiry-phase-note strong,
.service-inquiry-phase-note em {
  overflow-wrap: anywhere;
}

/* Modal inquiry CTA: make the button read cleanly inside service modals */
body.coming-soon-service-open .coming-soon-booking-link {
  min-height: 46px;
  line-height: 1.45;
  white-space: normal;
}

/* Mobile: cleaner Services + Contact inquiry layout */
@media (max-width: 768px) {
  #services .service-inquiry-phase-note {
    margin: 0.95rem 0 1rem !important;
    padding: 0.85rem 0.8rem !important;
  }

  #services .service-grid-v275 {
    gap: 12px !important;
  }

  #services .service-grid-v275 > .service-coming-soon-card {
    min-height: 128px !important;
  }

  body.coming-soon-service-open .coming-soon-booking-link {
    margin-top: 0.85rem !important;
    padding: 0.85rem 0.75rem !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.13em !important;
  }

  #contact .booking-list {
    grid-template-columns: 1fr 1fr !important;
  }

  #contact .booking-list span:last-child {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
  }
}

/* Small mobile: prevent inquiry text from feeling cramped */
@media (max-width: 390px) {
  #services .service-inquiry-phase-note strong {
    font-size: 0.64rem !important;
    letter-spacing: 0.09em !important;
  }

  #services .service-inquiry-phase-note em {
    font-size: 0.61rem !important;
    letter-spacing: 0.045em !important;
  }

  body.coming-soon-service-open .coming-soon-booking-link {
    font-size: 0.55rem !important;
    letter-spacing: 0.105em !important;
  }

  #contact .booking-list span:last-child {
    font-size: 5.8px !important;
    letter-spacing: 0.095em !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_32.3 — SERVICE INQUIRY MOBILE QA + FINAL LOCK */
/* 🟩 GREEN HIGHLIGHT START: CMV_33.1 — MOBILE HAMBURGER BUTTON FOUNDATION */

/*
  Purpose:
  - Add the mobile triple-horizontal navigation button visually.
  - Keep it inactive for now.
  - Do not open a drawer yet.
  - Do not hide the existing mobile nav yet.
  - Do not affect desktop layout.
*/

@media (min-width: 769px) {
  .mobile-nav-toggle {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: inline-flex !important;
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    left: 64px !important;
    z-index: 240 !important;

    width: 38px !important;
    height: 31px !important;
    min-width: 38px !important;
    min-height: 31px !important;

    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 5px !important;

    padding: 0 8px !important;
    margin: 0 !important;

    border: 1px solid rgba(0,0,0,.14) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.62) !important;
    color: rgba(12,12,12,.82) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.07) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(227,34,34,.12) !important;
  }

  .mobile-nav-toggle span {
    display: block !important;
    height: 1px !important;
    margin: 0 !important;
    background: currentColor !important;
    border-radius: 999px !important;
    transform: none !important;
    transition: width .25s ease, background .25s ease, opacity .25s ease !important;
  }

  .mobile-nav-toggle span:nth-child(1) {
    width: 22px !important;
  }

  .mobile-nav-toggle span:nth-child(2) {
    width: 16px !important;
  }

  .mobile-nav-toggle span:nth-child(3) {
    width: 10px !important;
  }

  .mobile-nav-toggle:active {
    transform: scale(.96) !important;
  }

  body.theme-night .mobile-nav-toggle {
    border-color: rgba(255,255,255,.18) !important;
    background: rgba(10,10,10,.56) !important;
    color: rgba(248,248,245,.86) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.32) !important;
  }

  body.theme-beige .mobile-nav-toggle {
    border-color: rgba(92,59,32,.18) !important;
    background: rgba(242,226,199,.62) !important;
    color: rgba(66,43,25,.84) !important;
  }

  body.archive-modal-open .mobile-nav-toggle,
  body.client-lightbox-open .mobile-nav-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_33.1 — MOBILE HAMBURGER BUTTON FOUNDATION */
/* 🟩 GREEN HIGHLIGHT START: CMV_33.1.1 — MOBILE HEADER ORDER SWAP */

/*
  Purpose:
  - Put the triple-horizontal mobile button to the left of the CM logo.
  - Keep the CM logo immediately after the button.
  - Keep the button inactive for now.
  - Do not build drawer behavior yet.
  - Do not affect desktop layout.
*/

@media (max-width: 768px) {
  .sidebar {
    grid-template-columns: 38px 42px minmax(0, 1fr) auto !important;
    gap: 8px 7px !important;
  }

  .mobile-nav-toggle {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 38px !important;
    height: 31px !important;
    min-width: 38px !important;
    min-height: 31px !important;
    z-index: 230 !important;
  }

  .mini-logo-home {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;

    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  .sound-switch {
    grid-column: 3 !important;
  }

  .theme-menu-v12 {
    grid-column: 4 !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_33.1.1 — MOBILE HEADER ORDER SWAP */

/* 🟩 GREEN HIGHLIGHT START: CMV_33.2 — MOBILE DRAWER SHELL PREVIEW */

/*
  Purpose:
  - Add a clean mobile-only CMV command drawer.
  - Let the hamburger open/close it.
  - Keep the existing mobile top nav visible for this patch as a fallback.
  - Do not remove the old mobile nav until the drawer is visually approved.
*/

.mobile-nav-backdrop,
.cmv-mobile-drawer {
  display: none;
}

@media (min-width: 769px) {
  .mobile-nav-backdrop,
  .cmv-mobile-drawer {
    display: none !important;
  }

  body.mobile-nav-open {
    overflow: auto !important;
  }
}

@media (max-width: 768px) {
  body.mobile-nav-open {
    overflow: hidden !important;
  }

  .mobile-nav-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 260 !important;
    background:
      radial-gradient(circle at top left, rgba(227,34,34,.10), transparent 38%),
      rgba(8,8,8,.42) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .24s ease, visibility .24s ease !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
  }

  .cmv-mobile-drawer {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 270 !important;

    width: min(82vw, 330px) !important;
    max-width: 330px !important;
    height: 100svh !important;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;

    border-right: 1px solid rgba(0,0,0,.12) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,242,236,.90)),
      radial-gradient(circle at 0% 0%, rgba(227,34,34,.10), transparent 36%) !important;
    box-shadow: 28px 0 70px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;

    transform: translateX(-104%) !important;
    opacity: .98 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform .28s cubic-bezier(.18,.82,.28,1),
      visibility .28s ease !important;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.mobile-nav-open .cmv-mobile-drawer {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-drawer-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 16px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(0,0,0,.10) !important;
  }

  .mobile-drawer-head span {
    display: block !important;
    color: var(--red) !important;
    font-size: 8px !important;
    letter-spacing: .38em !important;
    line-height: 1 !important;
  }

  .mobile-drawer-head strong {
    display: block !important;
    margin-top: 6px !important;
    color: rgba(12,12,12,.78) !important;
    font-size: 11px !important;
    letter-spacing: .34em !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }

  .mobile-drawer-close {
    min-width: 72px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(0,0,0,.14) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.52) !important;
    color: rgba(14,14,14,.72) !important;
    font-size: 7px !important;
    letter-spacing: .24em !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .mobile-drawer-nav {
    display: grid !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .mobile-drawer-link {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(0,0,0,.105) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.36) !important;
    color: rgba(12,12,12,.72) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(227,34,34,.12) !important;
  }

  .mobile-drawer-link .nav-num {
    display: block !important;
    color: rgba(227,34,34,.82) !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
    opacity: 1 !important;
  }

  .mobile-drawer-link .nav-label {
    display: block !important;
    color: currentColor !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .25em !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  .mobile-drawer-link.active {
    border-color: rgba(227,34,34,.38) !important;
    background: rgba(227,34,34,.075) !important;
    color: var(--red) !important;
  }

  .mobile-drawer-foot {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(0,0,0,.10) !important;
    display: grid !important;
    gap: 7px !important;
  }

  .mobile-drawer-foot a,
  .mobile-drawer-foot span,
  .mobile-drawer-foot em {
    color: rgba(12,12,12,.54) !important;
    font-size: 7px !important;
    line-height: 1.5 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-style: normal !important;
  }

  .mobile-drawer-foot a {
    color: var(--red) !important;
  }

  body.theme-night .cmv-mobile-drawer {
    border-right-color: rgba(255,255,255,.12) !important;
    background:
      linear-gradient(180deg, rgba(12,12,12,.94), rgba(6,6,6,.92)),
      radial-gradient(circle at 0% 0%, rgba(227,34,34,.16), transparent 38%) !important;
    box-shadow: 28px 0 70px rgba(0,0,0,.52) !important;
  }

  body.theme-night .mobile-drawer-head {
    border-bottom-color: rgba(255,255,255,.12) !important;
  }

  body.theme-night .mobile-drawer-head strong {
    color: rgba(248,248,245,.82) !important;
  }

  body.theme-night .mobile-drawer-close,
  body.theme-night .mobile-drawer-link {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.045) !important;
    color: rgba(248,248,245,.74) !important;
  }

  body.theme-night .mobile-drawer-link.active {
    border-color: rgba(227,34,34,.46) !important;
    background: rgba(227,34,34,.12) !important;
    color: var(--red) !important;
  }

  body.theme-night .mobile-drawer-foot {
    border-top-color: rgba(255,255,255,.12) !important;
  }

  body.theme-night .mobile-drawer-foot a,
  body.theme-night .mobile-drawer-foot span,
  body.theme-night .mobile-drawer-foot em {
    color: rgba(248,248,245,.52) !important;
  }

  body.theme-night .mobile-drawer-foot a {
    color: rgba(255,150,150,.9) !important;
  }

  body.theme-beige .cmv-mobile-drawer {
    border-right-color: rgba(92,59,32,.16) !important;
    background:
      linear-gradient(180deg, rgba(244,229,205,.94), rgba(237,219,190,.90)),
      radial-gradient(circle at 0% 0%, rgba(115,46,25,.12), transparent 38%) !important;
  }

  body.theme-beige .mobile-drawer-head,
  body.theme-beige .mobile-drawer-foot {
    border-color: rgba(92,59,32,.14) !important;
  }

  body.theme-beige .mobile-drawer-head strong,
  body.theme-beige .mobile-drawer-link {
    color: rgba(66,43,25,.78) !important;
  }

  body.theme-beige .mobile-drawer-close,
  body.theme-beige .mobile-drawer-link {
    border-color: rgba(92,59,32,.14) !important;
    background: rgba(255,248,235,.42) !important;
  }

  body.theme-beige .mobile-drawer-link.active {
    border-color: rgba(227,34,34,.36) !important;
    background: rgba(227,34,34,.075) !important;
    color: var(--red) !important;
  }

  body.archive-modal-open .mobile-nav-backdrop,
  body.archive-modal-open .cmv-mobile-drawer,
  body.client-lightbox-open .mobile-nav-backdrop,
  body.client-lightbox-open .cmv-mobile-drawer {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_33.2 — MOBILE DRAWER SHELL PREVIEW */
/* 🟩 GREEN HIGHLIGHT START: CMV_33.2.1 — CHATGPT-STYLE MOBILE DRAWER WIDTH + BACKDROP POLISH */

/*
  Purpose:
  - Make the mobile drawer feel closer to the ChatGPT mobile side panel.
  - Reduce the drawer width from the heavier CMV_33.2 shell.
  - Remove the cloudy blur from the right-side page area.
  - Keep the existing mobile top nav visible for now.
  - Do not remove or redesign navigation yet.
*/

@media (max-width: 768px) {
  .mobile-nav-backdrop {
    background: rgba(0, 0, 0, .50) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .cmv-mobile-drawer {
    width: min(74vw, 300px) !important;
    max-width: 300px !important;

    padding:
      calc(18px + env(safe-area-inset-top, 0px))
      14px
      calc(18px + env(safe-area-inset-bottom, 0px)) !important;

    border-right: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 0 !important;

    background: rgba(250, 249, 246, .985) !important;
    box-shadow: 18px 0 42px rgba(0,0,0,.16) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-drawer-head {
    padding-bottom: 14px !important;
    margin-bottom: 13px !important;
  }

  .mobile-drawer-close {
    min-width: 68px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    background: rgba(255,255,255,.72) !important;
  }

  .mobile-drawer-nav {
    gap: 6px !important;
  }

  .mobile-drawer-link {
    min-height: 41px !important;
    padding: 0 11px !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.46) !important;
  }

  .mobile-drawer-link .nav-num {
    font-size: 7.5px !important;
  }

  .mobile-drawer-link .nav-label {
    font-size: 7.5px !important;
    letter-spacing: .24em !important;
  }

  .mobile-drawer-foot {
    padding-top: 14px !important;
  }

  body.theme-night .mobile-nav-backdrop {
    background: rgba(0, 0, 0, .58) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.theme-night .cmv-mobile-drawer {
    border-right-color: rgba(255,255,255,.10) !important;
    background: rgba(5, 5, 5, .985) !important;
    box-shadow: 18px 0 44px rgba(0,0,0,.56) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.theme-night .mobile-drawer-close,
  body.theme-night .mobile-drawer-link {
    background: rgba(255,255,255,.055) !important;
  }

  body.theme-beige .mobile-nav-backdrop {
    background: rgba(32, 24, 18, .48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.theme-beige .cmv-mobile-drawer {
    border-right-color: rgba(92,59,32,.14) !important;
    background: rgba(244, 229, 205, .985) !important;
    box-shadow: 18px 0 42px rgba(56,35,20,.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.theme-beige .mobile-drawer-close,
  body.theme-beige .mobile-drawer-link {
    background: rgba(255,248,235,.50) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_33.2.1 — CHATGPT-STYLE MOBILE DRAWER WIDTH + BACKDROP POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_33.2.2 — MOBILE NAV VIEW TOGGLE */

/*
  Purpose:
  - Add a temporary mobile-only NAV VIEW toggle.
  - TOP mode keeps the existing mobile top nav visible.
  - SIDE mode hides the existing mobile top nav and uses the drawer as the primary nav.
  - This is for testing before permanently removing anything.
*/

@media (max-width: 768px) {
  .mobile-drawer-view-toggle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 0 0 13px !important;
    margin: -2px 0 12px !important;
    border-bottom: 1px solid rgba(0,0,0,.10) !important;
  }

  .mobile-drawer-view-toggle > span {
    display: block !important;
    color: rgba(12,12,12,.52) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .28em !important;
    text-transform: uppercase !important;
  }

  .mobile-drawer-view-options {
    display: inline-flex !important;
    align-items: center !important;
    overflow: hidden !important;

    min-height: 30px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.46) !important;
  }

  .mobile-nav-view-option {
    min-width: 48px !important;
    min-height: 30px !important;
    padding: 0 12px !important;

    border: 0 !important;
    border-right: 1px solid rgba(0,0,0,.10) !important;
    background: transparent !important;

    color: rgba(12,12,12,.54) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;

    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(227,34,34,.12) !important;
  }

  .mobile-nav-view-option:last-child {
    border-right: 0 !important;
  }

  .mobile-nav-view-option.active {
    background: rgba(227,34,34,.10) !important;
    color: var(--red) !important;
  }

  body.mobile-nav-side .sidebar > .nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.mobile-nav-top .sidebar > .nav {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.theme-night .mobile-drawer-view-toggle {
    border-bottom-color: rgba(255,255,255,.12) !important;
  }

  body.theme-night .mobile-drawer-view-toggle > span {
    color: rgba(248,248,245,.48) !important;
  }

  body.theme-night .mobile-drawer-view-options {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.055) !important;
  }

  body.theme-night .mobile-nav-view-option {
    border-right-color: rgba(255,255,255,.10) !important;
    color: rgba(248,248,245,.52) !important;
  }

  body.theme-night .mobile-nav-view-option.active {
    background: rgba(227,34,34,.16) !important;
    color: rgba(255,150,150,.92) !important;
  }

  body.theme-beige .mobile-drawer-view-toggle {
    border-bottom-color: rgba(92,59,32,.14) !important;
  }

  body.theme-beige .mobile-drawer-view-toggle > span {
    color: rgba(66,43,25,.52) !important;
  }

  body.theme-beige .mobile-drawer-view-options {
    border-color: rgba(92,59,32,.14) !important;
    background: rgba(255,248,235,.50) !important;
  }

  body.theme-beige .mobile-nav-view-option {
    border-right-color: rgba(92,59,32,.12) !important;
    color: rgba(66,43,25,.56) !important;
  }

  body.theme-beige .mobile-nav-view-option.active {
    background: rgba(227,34,34,.10) !important;
    color: var(--red) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_33.2.2 — MOBILE NAV VIEW TOGGLE */
/* 🟩 GREEN HIGHLIGHT START: CMV_33.2.4 — MOBILE DRAWER FOOTER CONTROLS */

/*
  Purpose:
  - Add Sound, Mode, Instagram, Venmo, and YouTube controls to the mobile drawer footer.
  - Keep top Sound + Mode active for now.
  - Avoid duplicate IDs from earlier Mode-menu issues.
*/

@media (max-width: 768px) {
  .mobile-drawer-foot {
    gap: 9px !important;
  }

  .mobile-drawer-control-stack {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 3px !important;
  }

  .drawer-control-pill,
  .drawer-mode-control {
    width: 100% !important;
    min-height: 36px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.52) !important;
    color: rgba(12,12,12,.62) !important;
  }

  .drawer-sound-toggle {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(227,34,34,.12) !important;
  }

  .drawer-control-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--red) !important;
  }

  .drawer-control-icon svg {
    width: 14px !important;
    height: 14px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .drawer-sound-text,
  .drawer-mode-label {
    display: block !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  .drawer-sound-track {
    position: relative !important;
    display: block !important;
    width: 38px !important;
    height: 18px !important;
    border: 1px solid rgba(0,0,0,.16) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.08) !important;
  }

  .drawer-sound-knob {
    position: absolute !important;
    top: 50% !important;
    left: 3px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(12,12,12,.48) !important;
    transform: translateY(-50%) !important;
    transition: left .22s ease, background .22s ease !important;
  }

  .drawer-sound-toggle.active .drawer-sound-knob {
    left: 21px !important;
    background: var(--red) !important;
  }

  .drawer-mode-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 8px 0 12px !important;
  }

  .drawer-mode-options {
    display: inline-flex !important;
    align-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.38) !important;
  }

  .drawer-theme-option {
    width: 30px !important;
    height: 28px !important;
    border: 0 !important;
    border-right: 1px solid rgba(0,0,0,.09) !important;
    background: transparent !important;
    color: rgba(12,12,12,.54) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .drawer-theme-option:last-child {
    border-right: 0 !important;
  }

  .drawer-theme-option.active {
    background: rgba(227,34,34,.10) !important;
    color: var(--red) !important;
  }

  .mobile-drawer-social-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 2px !important;
  }

  .mobile-drawer-social-row a,
  .mobile-drawer-social-row span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.44) !important;
    color: rgba(12,12,12,.54) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
  }

  .mobile-drawer-social-row a {
    color: var(--red) !important;
  }

  .mobile-drawer-ig-link {
    margin-top: 2px !important;
  }

  body.theme-night .drawer-control-pill,
  body.theme-night .drawer-mode-control,
  body.theme-night .mobile-drawer-social-row a,
  body.theme-night .mobile-drawer-social-row span {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.055) !important;
    color: rgba(248,248,245,.58) !important;
  }

  body.theme-night .drawer-sound-track,
  body.theme-night .drawer-mode-options {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.05) !important;
  }

  body.theme-night .drawer-sound-knob {
    background: rgba(248,248,245,.48) !important;
  }

  body.theme-night .drawer-sound-toggle.active .drawer-sound-knob,
  body.theme-night .drawer-theme-option.active {
    background: rgba(227,34,34,.18) !important;
    color: rgba(255,150,150,.92) !important;
  }

  body.theme-beige .drawer-control-pill,
  body.theme-beige .drawer-mode-control,
  body.theme-beige .mobile-drawer-social-row a,
  body.theme-beige .mobile-drawer-social-row span {
    border-color: rgba(92,59,32,.14) !important;
    background: rgba(255,248,235,.52) !important;
    color: rgba(66,43,25,.58) !important;
  }

  body.theme-beige .drawer-sound-track,
  body.theme-beige .drawer-mode-options {
    border-color: rgba(92,59,32,.14) !important;
    background: rgba(255,248,235,.44) !important;
  }

  body.theme-beige .drawer-theme-option.active {
    background: rgba(227,34,34,.10) !important;
    color: var(--red) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_33.2.4 — MOBILE DRAWER FOOTER CONTROLS */
/* 🟩 GREEN HIGHLIGHT START: CMV_33.2.5 — DRAWER CONTROL READABILITY + RED ACTIVE POLISH */

/*
  Purpose:
  - Brighten the lower drawer controls so they match the clarity of the 01–09 nav cards.
  - Make active red states cleaner, brighter, and more consistent.
  - Improve NAV VIEW, SOUND, MODE, and social icon readability in Light / Beige / Night.
  - CSS-only visual polish. No drawer logic change.
*/

@media (max-width: 768px) {
  .mobile-drawer-view-toggle > span,
  .drawer-sound-text,
  .drawer-mode-label {
    color: rgba(18,18,18,.74) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 10px rgba(255,255,255,.36) !important;
  }

  .mobile-nav-view-option,
  .drawer-theme-option {
    color: rgba(18,18,18,.70) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
  }

  .mobile-nav-view-option.active,
  .drawer-theme-option.active {
    color: #e32222 !important;
    background:
      linear-gradient(180deg, rgba(227,34,34,.155), rgba(227,34,34,.075)) !important;
    text-shadow: 0 0 12px rgba(227,34,34,.20) !important;
  }

  .mobile-drawer-view-options,
  .drawer-control-pill,
  .drawer-mode-control,
  .drawer-mode-options {
    border-color: rgba(0,0,0,.17) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 8px 24px rgba(0,0,0,.045) !important;
  }

  .drawer-control-icon {
    color: #e32222 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 7px rgba(227,34,34,.22)) !important;
  }

  .drawer-sound-toggle.active {
    color: rgba(18,18,18,.78) !important;
  }

  .drawer-sound-toggle.active .drawer-sound-track {
    border-color: rgba(0,0,0,.16) !important;
    background: rgba(0,0,0,.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      0 7px 18px rgba(0,0,0,.035) !important;
  }

  .drawer-sound-toggle.active .drawer-sound-knob {
    background: #e32222 !important;
    box-shadow:
      0 0 0 1px rgba(227,34,34,.28),
      0 0 11px rgba(227,34,34,.42) !important;
  }

  .mobile-drawer-social-row a,
  .mobile-drawer-social-row span {
    color: rgba(18,18,18,.68) !important;
    opacity: 1 !important;
    border-color: rgba(0,0,0,.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.50),
      0 8px 20px rgba(0,0,0,.04) !important;
  }

  .mobile-drawer-social-row a,
  .mobile-drawer-social-row span:first-of-type {
    color: #e32222 !important;
  }

  .mobile-drawer-ig-link,
  .mobile-drawer-foot span,
  .mobile-drawer-foot em {
    opacity: 1 !important;
  }

  .mobile-drawer-ig-link {
    color: #c83232 !important;
    font-weight: 600 !important;
  }

  body.theme-beige .mobile-drawer-view-toggle > span,
  body.theme-beige .drawer-sound-text,
  body.theme-beige .drawer-mode-label {
    color: rgba(66,43,25,.76) !important;
    text-shadow: 0 1px 10px rgba(255,248,235,.42) !important;
  }

  body.theme-beige .mobile-nav-view-option,
  body.theme-beige .drawer-theme-option {
    color: rgba(66,43,25,.70) !important;
  }

  body.theme-beige .mobile-nav-view-option.active,
  body.theme-beige .drawer-theme-option.active {
    color: #e32222 !important;
    background:
      linear-gradient(180deg, rgba(227,34,34,.16), rgba(227,34,34,.075)) !important;
    text-shadow: 0 0 12px rgba(227,34,34,.18) !important;
  }

  body.theme-beige .drawer-sound-toggle.active .drawer-sound-track {
    border-color: rgba(92,59,32,.14) !important;
    background: rgba(255,248,235,.44) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,248,235,.46),
      0 7px 18px rgba(56,35,20,.045) !important;
  }

  body.theme-beige .drawer-sound-toggle.active .drawer-sound-knob {
    background: #e32222 !important;
    box-shadow:
      0 0 0 1px rgba(227,34,34,.26),
      0 0 11px rgba(227,34,34,.36) !important;
  }

  body.theme-beige .mobile-drawer-ig-link,
  body.theme-beige .mobile-drawer-social-row a,
  body.theme-beige .mobile-drawer-social-row span:first-of-type {
    color: #d73333 !important;
  }

  body.theme-night .mobile-drawer-view-toggle > span,
  body.theme-night .drawer-sound-text,
  body.theme-night .drawer-mode-label {
    color: rgba(248,248,245,.78) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 12px rgba(255,255,255,.08) !important;
  }

  body.theme-night .mobile-nav-view-option,
  body.theme-night .drawer-theme-option {
    color: rgba(248,248,245,.66) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
  }

  body.theme-night .mobile-nav-view-option.active,
  body.theme-night .drawer-theme-option.active {
    color: #ff5a5a !important;
    background:
      linear-gradient(180deg, rgba(227,34,34,.28), rgba(227,34,34,.13)) !important;
    text-shadow: 0 0 14px rgba(227,34,34,.35) !important;
  }

  body.theme-night .mobile-drawer-view-options,
  body.theme-night .drawer-control-pill,
  body.theme-night .drawer-mode-control,
  body.theme-night .drawer-mode-options {
    border-color: rgba(255,255,255,.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 8px 24px rgba(0,0,0,.20) !important;
  }

  body.theme-night .drawer-control-icon {
    color: #ff5a5a !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 9px rgba(227,34,34,.30)) !important;
  }

  body.theme-night .drawer-sound-toggle.active .drawer-sound-track {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.05) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 7px 18px rgba(0,0,0,.20) !important;
  }

  body.theme-night .drawer-sound-toggle.active .drawer-sound-knob {
    background: #ff4a4a !important;
    box-shadow:
      0 0 0 1px rgba(255,90,90,.34),
      0 0 13px rgba(227,34,34,.48) !important;
  }

  body.theme-night .mobile-drawer-social-row a,
  body.theme-night .mobile-drawer-social-row span {
    color: rgba(248,248,245,.68) !important;
    opacity: 1 !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 8px 20px rgba(0,0,0,.18) !important;
  }

  body.theme-night .mobile-drawer-social-row a,
  body.theme-night .mobile-drawer-social-row span:first-of-type,
  body.theme-night .mobile-drawer-ig-link {
    color: #ff6a6a !important;
  }

  body.theme-night .mobile-drawer-foot span,
  body.theme-night .mobile-drawer-foot em {
    color: rgba(248,248,245,.58) !important;
    opacity: 1 !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_33.2.5 — DRAWER CONTROL READABILITY + RED ACTIVE POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_33.3 — MOBILE DRAWER FINAL FIT + SCROLL POLISH */

/*
  Purpose:
  - Keep the drawer header and footer controls accessible.
  - Allow only the 01–09 navigation list to scroll on shorter screens.
  - Prevent the entire drawer from overflowing or becoming cut off.
  - Preserve SIDE as the default and TOP as the optional fallback.
  - Preserve the current visual design.
*/

@media (max-width: 768px) {
  .cmv-mobile-drawer {
    height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  @supports (height: 100dvh) {
    .cmv-mobile-drawer {
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }

  .mobile-drawer-head {
    flex: 0 0 auto !important;
  }

  .mobile-drawer-view-toggle {
    flex: 0 0 auto !important;
  }

  .mobile-drawer-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;

    padding-right: 2px !important;
    padding-bottom: 8px !important;

    scrollbar-width: none !important;
  }

  .mobile-drawer-nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .mobile-drawer-foot {
    flex: 0 0 auto !important;
    margin-top: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 2px !important;
  }

  .mobile-drawer-link {
    flex-shrink: 0 !important;
    min-height: 42px !important;
  }

  .mobile-drawer-control-stack,
  .mobile-drawer-social-row,
  .drawer-control-pill,
  .drawer-mode-control {
    flex-shrink: 0 !important;
  }

  /*
    Keep focus states visible for keyboard and accessibility testing,
    without changing the normal mobile appearance.
  */

  .mobile-nav-toggle:focus-visible,
  .mobile-drawer-close:focus-visible,
  .mobile-drawer-link:focus-visible,
  .mobile-nav-view-option:focus-visible,
  .drawer-sound-toggle:focus-visible,
  .drawer-theme-option:focus-visible,
  .mobile-drawer-social-row a:focus-visible {
    outline: 1px solid var(--red) !important;
    outline-offset: 2px !important;
  }

  /*
    Prevent accidental horizontal movement while the drawer is open.
  */

  body.mobile-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: pan-y !important;
  }

  body.mobile-nav-open .cmv-mobile-drawer {
    touch-action: pan-y !important;
  }
}

/* Short-height mobile safety pass */

@media (max-width: 768px) and (max-height: 720px) {
  .cmv-mobile-drawer {
    padding-top:
      calc(12px + env(safe-area-inset-top, 0px)) !important;

    padding-bottom:
      calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-drawer-head {
    padding-bottom: 10px !important;
    margin-bottom: 9px !important;
  }

  .mobile-drawer-view-toggle {
    padding-bottom: 10px !important;
    margin-bottom: 9px !important;
  }

  .mobile-drawer-nav {
    gap: 5px !important;
  }

  .mobile-drawer-foot {
    gap: 6px !important;
    margin-top: 8px !important;
    padding-top: 9px !important;
  }

  .mobile-drawer-control-stack {
    gap: 6px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_33.3 — MOBILE DRAWER FINAL FIT + SCROLL POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_34.0 — SOCIAL PLATFORM ICON + INTERACTION SYNC */

/*
  Shared social-link system for:
  - Desktop sidebar
  - Mobile drawer
  - Mobile identity footer

  The existing CMV_33.4 navigation structure and drawer dimensions
  are intentionally preserved.
*/

.cmv-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: inherit;
  line-height: 1;
  text-decoration: none;
  opacity: .82;

  transition:
    color .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    opacity .2s ease,
    transform .2s ease,
    box-shadow .2s ease;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.cmv-social-icon {
  display: block;
  width: 14px;
  height: 14px;
  overflow: visible;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

.cmv-social-icon .cmv-social-fill {
  fill: currentColor;
  stroke: none;
}

/* Desktop sidebar icon dimensions */

.socials-v12 .cmv-social-link {
  width: 18px;
  height: 18px;
  color: #777;
}

.socials-v12 .cmv-social-icon {
  width: 14px;
  height: 14px;
}

/* Shared mouse-hover state */

@media (hover: hover) {
  .cmv-social-link:hover {
    color: var(--red) !important;
    opacity: 1 !important;
    transform: translateY(-2px);
  }
}

/* Shared keyboard-focus state */

.cmv-social-link:focus-visible {
  color: var(--red) !important;
  opacity: 1 !important;
  outline: 2px solid var(--red) !important;
  outline-offset: 3px !important;
  transform: translateY(-1px);
}

/* Shared tap/click state */

.cmv-social-link:active {
  opacity: 1 !important;
  transform: scale(.93);
}

/* Mobile drawer + mobile footer sizing */

@media (max-width: 768px) {

  .mobile-drawer-social-row .cmv-social-link {
    width: 30px !important;
    height: 30px !important;

    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.44) !important;
    color: rgba(12,12,12,.58) !important;

    opacity: 1 !important;
  }

  .mobile-drawer-social-row .cmv-social-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .mobile-drawer-social-row .cmv-social-link:hover,
  .mobile-drawer-social-row .cmv-social-link:focus-visible {
    border-color: rgba(227,34,34,.68) !important;
    background: rgba(227,34,34,.07) !important;
    color: var(--red) !important;
  }

  .mobile-footer-socials .cmv-social-link {
    width: 17px !important;
    height: 17px !important;
    color: var(--ink) !important;
    opacity: .78 !important;
  }

  .mobile-footer-socials .cmv-social-icon {
    width: 13px !important;
    height: 13px !important;
  }

  .mobile-footer-socials .cmv-social-link:hover,
  .mobile-footer-socials .cmv-social-link:focus-visible {
    color: var(--red) !important;
    opacity: 1 !important;
  }

  body.theme-night .mobile-drawer-social-row .cmv-social-link {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.055) !important;
    color: rgba(248,248,245,.62) !important;
  }

  body.theme-night .mobile-footer-socials .cmv-social-link {
    color: rgba(248,248,245,.78) !important;
  }

  body.theme-night .mobile-drawer-social-row .cmv-social-link:hover,
  body.theme-night .mobile-drawer-social-row .cmv-social-link:focus-visible,
  body.theme-night .mobile-footer-socials .cmv-social-link:hover,
  body.theme-night .mobile-footer-socials .cmv-social-link:focus-visible {
    color: rgba(255,150,150,.95) !important;
    border-color: rgba(227,34,34,.55) !important;
  }

  body.theme-beige .mobile-drawer-social-row .cmv-social-link {
    border-color: rgba(92,59,32,.14) !important;
    background: rgba(255,248,235,.52) !important;
    color: rgba(66,43,25,.64) !important;
  }

  body.theme-beige .mobile-footer-socials .cmv-social-link {
    color: rgba(66,43,25,.76) !important;
  }

  body.theme-beige .mobile-drawer-social-row .cmv-social-link:hover,
  body.theme-beige .mobile-drawer-social-row .cmv-social-link:focus-visible,
  body.theme-beige .mobile-footer-socials .cmv-social-link:hover,
  body.theme-beige .mobile-footer-socials .cmv-social-link:focus-visible {
    color: var(--red) !important;
    border-color: rgba(227,34,34,.50) !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_34.0 — SOCIAL PLATFORM ICON + INTERACTION SYNC */