.lv-original-work {
  display: none !important;
}

/* Hide the legacy project journey before the live project world mounts. */
.work-section#work {
  display: none !important;
}

html[lang="en"] .lv-world {
  display: none !important;
}

html[lang="en"] #work.lv-original-work {
  display: block !important;
}

.lv-world {
  --lv-ink: #101b35;
  --lv-pink: #f59abd;
  --lv-cyan: #72d9ee;
  width: min(100% - 36px, 1520px);
  margin: 0 auto;
  padding: 72px 0 140px;
  color: var(--lv-ink);
}

.lv-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .58fr);
  gap: 42px;
  align-items: end;
  width: min(100% - 80px, 1220px);
  margin: 0 auto 24px;
}

.lv-kicker {
  margin: 0 0 16px;
  color: #e66f98;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}

.lv-intro h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(44px, 5.2vw, 74px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.065em;
}

.lv-intro h2 em {
  color: #e8769a;
  font-style: normal;
  font-weight: inherit;
}

.lv-intro-copy {
  margin: 0 0 7px;
  color: #59667a;
  font-size: 15px;
  line-height: 1.8;
}

.lv-stage {
  --lv-x: 0px;
  --lv-y: 0px;
  --lv-rotate: 0deg;
  --lv-space-x: 0px;
  --lv-space-y: 0px;
  position: relative;
  min-height: clamp(650px, 55vw, 760px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(100,134,171,.22);
  border-radius: 50px;
  background:
    radial-gradient(circle at 73% 42%, rgba(108,225,242,.24), transparent 25%),
    radial-gradient(circle at 82% 12%, rgba(242,150,186,.23), transparent 23%),
    linear-gradient(125deg, #08162d 0%, #152f55 48%, #6d526c 76%, #d1a06d 100%);
  box-shadow: 0 50px 125px rgba(20,40,72,.22);
  touch-action: auto;
}

.lv-stage-image {
  position: absolute;
  z-index: 13;
  right: -2%;
  bottom: -3%;
  width: min(62%, 850px);
  height: auto;
  object-fit: contain;
  translate: var(--lv-x) var(--lv-y);
  rotate: var(--lv-rotate);
  transform: translate3d(0, 0, 0);
  filter: drop-shadow(-22px 28px 44px rgba(2,10,24,.34));
  animation: lv-stage-breathe 5.8s ease-in-out infinite;
  transition:
    translate .2s cubic-bezier(.2,.72,.2,1),
    rotate .24s cubic-bezier(.2,.72,.2,1),
    filter .3s ease;
  will-change: transform, translate, rotate;
  pointer-events: none;
}

.lv-stage.is-interacting .lv-stage-image {
  filter: drop-shadow(-24px 31px 48px rgba(2,10,24,.4));
}

@keyframes lv-stage-breathe {
  0%,
  100% {
    transform: translate3d(0, 2px, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -8px, 0) scale(1.008);
  }
}

.lv-stage::before {
  position: absolute;
  z-index: 4;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4,13,30,.5), transparent 49%, transparent 84%, rgba(4,13,30,.1)),
    linear-gradient(180deg, rgba(4,13,30,.08), transparent 56%, rgba(4,13,30,.58));
  pointer-events: none;
  content: "";
}

.lv-stage::after {
  position: absolute;
  z-index: 5;
  top: -30%;
  left: -20%;
  width: 55%;
  height: 140%;
  opacity: .34;
  background: linear-gradient(105deg, transparent 15%, rgba(137,230,255,.25) 42%, transparent 58%);
  transform: translateX(-45%) rotate(7deg);
  animation: lv-scan 9s ease-in-out infinite;
  pointer-events: none;
  content: "";
}

.lv-space {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  translate: var(--lv-space-x) var(--lv-space-y);
  transition: translate .3s cubic-bezier(.2,.72,.2,1);
  will-change: translate;
  pointer-events: none;
}

.lv-grid {
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(126,224,244,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,224,244,.25) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(600px) rotateX(64deg) scale(1.45) translateY(27%);
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, black, transparent 74%);
  mask-image: linear-gradient(to top, black, transparent 74%);
}

.lv-orbit {
  position: absolute;
  top: 43%;
  right: 18%;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(141,232,247,.4);
  border-radius: 50%;
  box-shadow:
    inset 0 0 45px rgba(93,219,240,.08),
    0 0 55px rgba(93,219,240,.08);
}

.lv-orbit::before,
.lv-orbit::after {
  position: absolute;
  border-radius: 50%;
  background: #9deaf6;
  box-shadow: 0 0 18px #81def0;
  content: "";
}

.lv-orbit::before {
  top: 12%;
  left: 8%;
  width: 7px;
  height: 7px;
}

.lv-orbit::after {
  right: 5%;
  bottom: 21%;
  width: 4px;
  height: 4px;
}

.lv-orbit-a {
  transform: translate(50%, -50%) rotateX(67deg) rotateZ(22deg);
  animation: lv-orbit-a 13s linear infinite;
}

.lv-orbit-b {
  width: 330px;
  height: 330px;
  transform: translate(50%, -50%) rotateY(68deg) rotateZ(-18deg);
  border-color: rgba(244,158,192,.38);
  animation: lv-orbit-b 16s linear infinite reverse;
}

@keyframes lv-orbit-a {
  to { transform: translate(50%, -50%) rotateX(67deg) rotateZ(382deg); }
}

@keyframes lv-orbit-b {
  to { transform: translate(50%, -50%) rotateY(68deg) rotateZ(342deg); }
}

.lv-portal-core {
  position: absolute;
  top: 43%;
  right: 18%;
  width: 300px;
  height: 300px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,249,255,.62), rgba(91,213,238,.15) 42%, transparent 70%);
  filter: blur(3px);
  animation: lv-pulse 4.8s ease-in-out infinite;
}

@keyframes lv-pulse {
  50% { transform: translate(50%, -50%) scale(1.08); opacity: .72; }
}

.lv-heritage-line {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54%;
  height: 32%;
  opacity: .18;
  background:
    linear-gradient(135deg, transparent 46%, #ffd6a1 47% 53%, transparent 54%) 0 0 / 90px 70px,
    linear-gradient(45deg, transparent 46%, #ffd6a1 47% 53%, transparent 54%) 0 0 / 90px 70px;
  -webkit-mask-image: linear-gradient(to top, black, transparent);
  mask-image: linear-gradient(to top, black, transparent);
}

.lv-scene-copy {
  position: absolute;
  z-index: 12;
  top: 116px;
  left: 54px;
  width: min(430px, 39%);
  color: white;
}

.lv-scene-copy small,
.lv-scene-copy strong,
.lv-scene-copy span {
  display: block;
}

.lv-scene-copy small {
  margin-bottom: 20px;
  color: #87e2f2;
  font: 800 8px/1 sans-serif;
  letter-spacing: .16em;
}

.lv-scene-copy strong {
  font-size: clamp(25px, 2.7vw, 43px);
  font-weight: 590;
  line-height: 1.55;
  letter-spacing: -.035em;
}

.lv-scene-copy span {
  margin-top: 18px;
  color: rgba(255,255,255,.58);
  font-size: 9px;
}

@keyframes lv-scan {
  0%, 18% { transform: translateX(-55%) rotate(7deg); }
  70%, 100% { transform: translateX(270%) rotate(7deg); }
}

.lv-motes {
  position: absolute;
  z-index: 7;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lv-grain {
  position: absolute;
  z-index: 8;
  inset: 0;
  opacity: .1;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.lv-topline {
  position: absolute;
  z-index: 20;
  top: 23px;
  right: 28px;
  left: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.9);
  font: 800 8px/1.4 sans-serif;
  letter-spacing: .13em;
  text-shadow: 0 3px 18px rgba(7,17,35,.55);
}

.lv-topline span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.lv-topline span:first-child::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8eebda;
  box-shadow: 0 0 0 6px rgba(142,235,218,.13);
  content: "";
}

.lv-rail {
  position: absolute;
  z-index: 22;
  right: auto;
  bottom: 20px;
  left: 22px;
  width: min(720px, 57%);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 24px;
  background: rgba(6,18,38,.38);
  box-shadow: 0 18px 55px rgba(4,14,29,.22);
  backdrop-filter: blur(8px) saturate(115%);
  scrollbar-width: thin;
  scrollbar-color: rgba(133,229,244,.72) rgba(255,255,255,.08);
}

.lv-rail::-webkit-scrollbar {
  display: block;
  height: 5px;
}

.lv-rail::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.lv-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, #80e5f3, #f5a1c0);
}

.lv-signal {
  position: relative;
  flex: 0 0 91px;
  min-width: 0;
  height: 76px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 17px;
  color: white;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lv-signal::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(5,15,31,.78));
  pointer-events: none;
  content: "";
}

.lv-signal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  transition: transform .55s cubic-bezier(.2,.75,.2,1);
}

.lv-signal span {
  position: absolute;
  z-index: 2;
  right: 7px;
  bottom: 6px;
  left: 7px;
  overflow: hidden;
  font-size: 7px;
  font-weight: 800;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  white-space: nowrap;
}

.lv-signal:hover,
.lv-signal:focus-visible,
.lv-signal[aria-pressed="true"] {
  z-index: 2;
  transform: translateY(-7px);
  border-color: rgba(126,226,244,.86);
  box-shadow: 0 13px 30px rgba(76,202,231,.24);
}

.lv-signal:hover img,
.lv-signal:focus-visible img,
.lv-signal[aria-pressed="true"] img {
  transform: scale(1.09);
}

.lv-signal:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}

.lv-drawer {
  position: absolute;
  z-index: 60;
  top: 14px;
  bottom: 14px;
  left: 14px;
  width: min(460px, calc(100% - 28px));
  overflow: hidden;
  transform: translateX(calc(-100% - 30px));
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 32px;
  color: white;
  background:
    radial-gradient(circle at 10% 0, rgba(64,187,225,.2), transparent 34%),
    linear-gradient(155deg, rgba(15,31,58,.96), rgba(7,19,40,.9));
  box-shadow: 32px 0 90px rgba(4,15,31,.28);
  transition: transform .42s cubic-bezier(.2,.78,.2,1);
}

.lv-drawer.is-open {
  transform: translateX(0);
}

.lv-drawer-close {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 50%;
  color: white;
  background: rgba(4,15,33,.38);
  font-size: 21px;
  cursor: pointer;
}

.lv-drawer-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 17px 17px 24px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}

.lv-drawer-visual {
  position: relative;
  height: 190px;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
}

.lv-drawer-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5,17,36,.5));
  pointer-events: none;
  content: "";
}

.lv-drawer-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lv-drawer-meta {
  display: flex;
  justify-content: space-between;
  margin: 19px 3px 0;
  color: #8de8f7;
  font: 800 8px/1.3 sans-serif;
  letter-spacing: .1em;
}

.lv-drawer h3 {
  margin: 10px 3px 8px;
  font-size: 38px;
  font-weight: 680;
  line-height: 1.2;
}

.lv-drawer-summary {
  margin: 0 3px;
  color: rgba(255,255,255,.76);
  font-size: 12px;
  line-height: 1.85;
}

.lv-role {
  margin: 20px 3px 7px;
  padding: 14px 15px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
}

.lv-role small,
.lv-role strong {
  display: block;
}

.lv-role small {
  margin-bottom: 5px;
  color: #f4a6bf;
  font-size: 8px;
  font-weight: 850;
}

.lv-role strong {
  font-size: 10px;
  line-height: 1.7;
}

.lv-story {
  margin: 10px 3px 0;
}

.lv-story section {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.13);
}

.lv-story section > span {
  padding-top: 4px;
  color: #8de8f7;
  font: 750 8px/1 sans-serif;
}

.lv-story h4 {
  margin: 0 0 4px;
  font-size: 11px;
}

.lv-story p {
  margin: 0;
  color: rgba(255,255,255,.67);
  font-size: 9px;
  line-height: 1.8;
}

.lv-drawer-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.13);
}

.lv-drawer-nav button {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 999px;
  color: white;
  background: rgba(255,255,255,.06);
  font-size: 8px;
  cursor: pointer;
}

.lv-drawer-index {
  color: rgba(255,255,255,.58);
  font: 750 8px/1 sans-serif;
}

@media (max-width: 880px) {
  .lv-world {
    width: min(100% - 18px, 700px);
    padding: 46px 0 76px;
  }

  .lv-intro {
    grid-template-columns: 1fr;
    gap: 12px;
    width: calc(100% - 26px);
    margin-bottom: 16px;
  }

  .lv-intro h2 {
    font-size: clamp(38px, 11.5vw, 54px);
  }

  .lv-intro-copy {
    font-size: 13px;
  }

  .lv-stage {
    min-height: 760px;
    border-radius: 30px;
  }

  .lv-stage-image {
    right: -39%;
    bottom: 92px;
    width: 118%;
    max-width: none;
    height: auto;
    transform: none !important;
  }

  .lv-scene-copy {
    top: 80px;
    left: 20px;
    width: 72%;
  }

  .lv-scene-copy strong {
    font-size: 25px;
  }

  .lv-scene-copy span {
    display: none;
  }

  .lv-orbit,
  .lv-portal-core {
    top: 42%;
    right: 41%;
  }

  .lv-orbit {
    width: 330px;
    height: 330px;
  }

  .lv-orbit-b {
    width: 250px;
    height: 250px;
  }

  .lv-portal-core {
    width: 230px;
    height: 230px;
  }

  .lv-topline {
    top: 18px;
    right: 17px;
    left: 17px;
  }

  .lv-topline span:last-child {
    display: none;
  }

  .lv-rail {
    right: 11px;
    bottom: 11px;
    left: 11px;
    width: auto;
    gap: 7px;
    padding: 7px;
    border-radius: 19px;
  }

  .lv-signal {
    flex-basis: 78px;
    height: 68px;
    border-radius: 14px;
  }

  .lv-drawer {
    top: 126px;
    right: 7px;
    bottom: 7px;
    left: 7px;
    width: auto;
    transform: translateY(calc(100% + 20px));
    border-radius: 27px;
  }

  .lv-drawer.is-open {
    transform: translateY(0);
  }

  .lv-drawer-visual {
    height: 165px;
  }

  .lv-drawer h3 {
    font-size: 31px;
  }
}

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

/* Project discovery and flexible media drawer */

.lv-stage {
  min-height: clamp(720px, 59vw, 820px);
}

.lv-scene-copy {
  transition: opacity .4s ease, transform .55s ease;
}

.lv-has-open-drawer .lv-scene-copy {
  opacity: .18;
  transform: translateX(24px);
}

.lv-discovery-cue {
  position: absolute;
  z-index: 41;
  bottom: 143px;
  left: 552px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  width: min(350px, calc(100% - 580px));
  overflow: hidden;
  padding: 13px 15px 17px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 18px;
  color: white;
  background: rgba(5,17,37,.52);
  box-shadow: 0 20px 50px rgba(1,9,24,.2);
  backdrop-filter: blur(8px) saturate(115%);
  transition: opacity .35s ease, transform .35s ease;
}

.lv-cue-orbit {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(133,231,246,.5);
  border-radius: 50%;
}

.lv-cue-orbit::before,
.lv-cue-orbit::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.lv-cue-orbit::before {
  inset: 7px;
  border: 1px solid rgba(244,161,193,.55);
}

.lv-cue-orbit::after {
  top: 4px;
  left: 14px;
  width: 5px;
  height: 5px;
  background: #8ee9f7;
  box-shadow: 0 0 12px #8ee9f7;
  animation: lv-cue-spin 3.8s linear infinite;
  transform-origin: 3px 13px;
}

@keyframes lv-cue-spin {
  to { transform: rotate(360deg); }
}

.lv-discovery-cue small,
.lv-discovery-cue strong,
.lv-discovery-cue .lv-cue-status {
  display: block;
}

.lv-discovery-cue small {
  margin: 1px 0 4px;
  color: #8de8f7;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
}

.lv-discovery-cue strong {
  font-size: 12px;
  line-height: 1.55;
}

.lv-discovery-cue .lv-cue-status {
  margin-top: 3px;
  color: rgba(255,255,255,.6);
  font-size: 8px;
  line-height: 1.65;
}

.lv-auto-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #80e5f3, #f5a1c0);
  transform: scaleX(0);
  transform-origin: right center;
}

.lv-auto-running .lv-auto-progress {
  animation: lv-auto-progress 7s linear forwards;
}

@keyframes lv-auto-progress {
  to { transform: scaleX(1); }
}

.lv-auto-paused .lv-discovery-cue {
  opacity: .78;
}

.lv-rail-wrap {
  position: absolute;
  z-index: 42;
  right: 22px;
  bottom: 18px;
  left: 548px;
}

.lv-rail-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 6px 7px;
  color: rgba(255,255,255,.84);
  font-size: 8px;
  font-weight: 800;
}

.lv-rail-label small {
  color: rgba(255,255,255,.48);
  font-size: 7px;
  font-weight: 650;
}

.lv-rail-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.lv-rail-actions button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: white;
  background: rgba(8,22,44,.72);
  font: 800 13px/1 sans-serif;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.lv-rail-actions button:hover,
.lv-rail-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(139,231,245,.76);
  background: rgba(72,180,207,.24);
  outline: none;
}

.lv-rail {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  gap: 9px;
  padding: 9px;
  border-radius: 22px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  direction: ltr;
}

.lv-rail.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

.lv-signal {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: end;
  flex: 0 0 126px;
  height: 88px;
  scroll-snap-align: start;
  direction: rtl;
  text-align: right;
}

.lv-signal::after {
  background:
    linear-gradient(180deg, rgba(5,15,31,.04) 16%, rgba(5,15,31,.9) 89%),
    linear-gradient(90deg, rgba(5,15,31,.4), transparent);
}

.lv-signal-number {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  color: white;
  background: rgba(5,15,31,.35);
  font: 800 6px/1 sans-serif;
  backdrop-filter: blur(10px);
}

.lv-signal-copy {
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 7px;
  left: 9px;
  display: block;
}

.lv-signal-copy strong,
.lv-signal-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lv-signal-copy strong {
  font-size: 9px;
  line-height: 1.45;
}

.lv-signal-copy small {
  max-height: 0;
  color: #8fe9f6;
  font-size: 7px;
  opacity: 0;
  transform: translateY(5px);
  transition: max-height .3s ease, opacity .3s ease, transform .3s ease;
}

.lv-signal:hover .lv-signal-copy small,
.lv-signal:focus-visible .lv-signal-copy small,
.lv-signal[aria-pressed="true"] .lv-signal-copy small {
  max-height: 12px;
  margin-top: 2px;
  opacity: 1;
  transform: translateY(0);
}

.lv-signal[aria-pressed="true"] {
  flex-basis: 126px;
  transform: translateY(-3px);
  border-color: rgba(126,226,244,.96);
  box-shadow: 0 13px 38px rgba(76,202,231,.27), inset 0 0 0 1px rgba(255,255,255,.28);
}

.lv-drawer {
  width: min(520px, calc(100% - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  transform: translateX(calc(-100% - 36px));
  background:
    radial-gradient(circle at 2% 0, rgba(83,211,239,.23), transparent 31%),
    radial-gradient(circle at 100% 100%, rgba(237,143,180,.11), transparent 37%),
    linear-gradient(155deg, rgba(14,31,59,.975), rgba(5,16,35,.95));
  box-shadow: 35px 0 110px rgba(1,10,25,.4);
}

.lv-drawer.is-open {
  transform: translateX(0);
}

.lv-drawer-head {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 12px 14px 10px 19px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(7,19,40,.7);
  backdrop-filter: blur(18px);
}

.lv-drawer-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lv-drawer-head .lv-drawer-index {
  display: inline-grid;
  place-items: center;
  min-width: 55px;
  min-height: 28px;
  border: 1px solid rgba(138,231,246,.24);
  border-radius: 999px;
  color: #8ee8f6;
  direction: ltr;
  font-size: 9px;
}

.lv-drawer-mode {
  color: rgba(255,255,255,.48);
  font-size: 9px;
  font-weight: 700;
}

.lv-drawer-close {
  position: static;
  flex: 0 0 38px;
}

.lv-drawer-scroll {
  height: auto;
  min-height: 0;
  padding: 12px 15px 28px;
}

.lv-media-block {
  margin-bottom: 16px;
}

.lv-media-stage {
  position: relative;
}

.lv-media-main {
  position: relative;
  height: 234px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    #091b38;
  box-shadow: 0 22px 42px rgba(1,10,25,.22);
}

.lv-media-main::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(3,12,28,.5));
  pointer-events: none;
  content: "";
}

.lv-media-main > img,
.lv-media-main > video,
.lv-media-main > .lv-video-embed,
.lv-media-main > .lv-pdf-view {
  width: 100%;
  height: 100%;
}

.lv-media-main > img,
.lv-media-main > video {
  display: block;
  object-fit: cover;
}

.lv-media-kind {
  position: absolute;
  z-index: 3;
  top: 11px;
  left: 11px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  color: white;
  background: rgba(4,15,33,.42);
  font-size: 6px;
  font-weight: 850;
  backdrop-filter: blur(14px);
}

.lv-media-expand {
  position: absolute;
  z-index: 4;
  right: 11px;
  bottom: 11px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: white;
  background: rgba(4,15,33,.56);
  font-size: 7px;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.lv-media-stage > p {
  margin: 8px 4px 0;
  color: rgba(255,255,255,.5);
  font-size: 9px;
  line-height: 1.6;
}

.lv-media-strip {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-top: 10px;
  padding: 2px 1px 5px;
  scrollbar-width: thin;
}

.lv-media-strip[hidden] {
  display: none;
}

.lv-media-strip button {
  position: relative;
  flex: 0 0 82px;
  height: 61px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  color: white;
  background: rgba(255,255,255,.06);
  cursor: pointer;
}

.lv-media-strip button[aria-pressed="true"] {
  border-color: #8be7f5;
  box-shadow: 0 0 0 2px rgba(139,231,245,.14);
}

.lv-media-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .74;
}

.lv-media-strip small {
  position: absolute;
  right: 5px;
  bottom: 4px;
  left: 5px;
  overflow: hidden;
  font-size: 6px;
  text-align: right;
  text-overflow: ellipsis;
  text-shadow: 0 2px 7px #000;
  white-space: nowrap;
}

.lv-media-icon {
  height: 100%;
  display: grid;
  place-items: center;
  color: #8be7f5;
  font: 800 10px/1 sans-serif;
}

.lv-drawer-meta {
  margin-top: 4px;
}

.lv-drawer h3 {
  margin-top: 8px;
  font-size: clamp(34px, 3.2vw, 45px);
}

.lv-media-overview {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 3px 4px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
}

.lv-media-overview[hidden] {
  display: none;
}

.lv-media-overview small {
  margin-left: auto;
  color: rgba(255,255,255,.48);
  font-size: 9px;
}

.lv-media-overview span {
  padding: 4px 7px;
  border-radius: 999px;
  color: #9deaf6;
  background: rgba(126,226,244,.09);
  font-size: 8px;
  font-weight: 800;
}

.lv-role {
  margin-top: 12px;
}

.lv-drawer-summary {
  font-size: 14px;
  line-height: 1.9;
}

.lv-role small {
  font-size: 9px;
}

.lv-role strong {
  font-size: 12px;
  line-height: 1.75;
}

.lv-story section {
  padding: 14px 0;
}

.lv-story section > span {
  font-size: 9px;
}

.lv-story h4 {
  font-size: 13px;
}

.lv-story p {
  font-size: 11px;
  line-height: 1.85;
}

.lv-drawer-nav {
  position: relative;
  z-index: 8;
  grid-template-columns: 1fr 1.25fr 1fr;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(6,18,38,.83);
  backdrop-filter: blur(18px);
}

.lv-drawer-nav button {
  min-height: 38px;
  font-size: 9px;
  transition: border-color .25s ease, background .25s ease;
}

.lv-drawer-nav button:hover,
.lv-drawer-nav button:focus-visible {
  border-color: rgba(139,231,245,.58);
  background: rgba(139,231,245,.09);
}

.lv-drawer-nav .lv-open-media {
  border-color: rgba(241,158,190,.38);
  color: #ffd5e5;
}

.lv-drawer-nav button[hidden] {
  display: none;
}

.lv-pdf-view {
  position: relative;
  background: #e8edf4;
}

.lv-video-embed {
  background: #020817;
}

.lv-video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lv-pdf-view iframe {
  width: 100%;
  height: calc(100% - 34px);
  border: 0;
}

.lv-pdf-view a {
  height: 34px;
  display: grid;
  place-items: center;
  color: #0b2348;
  font-size: 7px;
  font-weight: 800;
  text-decoration: none;
}

.lv-media-lightbox {
  width: min(1120px, calc(100vw - 34px));
  height: min(790px, calc(100vh - 34px));
  overflow: hidden;
  padding: 52px 16px 16px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 28px;
  color: white;
  background:
    radial-gradient(circle at 50% 0, rgba(89,207,235,.14), transparent 34%),
    rgba(4,14,31,.97);
  box-shadow: 0 35px 120px rgba(0,0,0,.65);
}

.lv-media-lightbox::backdrop {
  background: rgba(2,8,20,.76);
  backdrop-filter: blur(14px);
}

.lv-lightbox-close {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 13px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: white;
  background: rgba(255,255,255,.07);
  font-size: 20px;
  cursor: pointer;
}

.lv-lightbox-content {
  height: calc(100% - 28px);
}

.lv-lightbox-content > img,
.lv-lightbox-content > video,
.lv-lightbox-content > .lv-video-embed,
.lv-lightbox-content > .lv-pdf-view {
  width: 100%;
  height: 100%;
}

.lv-lightbox-content > img,
.lv-lightbox-content > video {
  display: block;
  object-fit: contain;
}

.lv-lightbox-caption {
  height: 28px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.58);
  font-size: 8px;
}

@media (max-width: 1120px) and (min-width: 881px) {
  .lv-drawer {
    width: min(470px, calc(100% - 28px));
  }

  .lv-rail-wrap {
    left: 495px;
  }

  .lv-discovery-cue {
    left: 500px;
    width: min(300px, calc(100% - 525px));
  }

  .lv-signal {
    flex-basis: 112px;
  }
}

@media (max-width: 880px) {
  .lv-stage {
    min-height: 830px;
  }

  .lv-has-open-drawer .lv-stage-image {
    opacity: .42;
  }

  .lv-discovery-cue {
    top: 64px;
    right: 14px;
    bottom: auto;
    left: 14px;
    width: auto;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 10px 11px 13px;
  }

  .lv-cue-orbit {
    width: 28px;
    height: 28px;
  }

  .lv-cue-orbit::before {
    inset: 6px;
  }

  .lv-cue-orbit::after {
    left: 11px;
    transform-origin: 3px 10px;
  }

  .lv-discovery-cue strong {
    font-size: 9px;
  }

  .lv-rail-wrap {
    right: 9px;
    bottom: 9px;
    left: 9px;
  }

  .lv-rail-label {
    margin-bottom: 5px;
  }

  .lv-rail {
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
  }

  .lv-signal {
    flex-basis: 108px;
    height: 78px;
  }

  .lv-signal[aria-pressed="true"] {
    flex-basis: 108px;
    transform: none;
  }

  .lv-drawer {
    top: 132px;
    right: 7px;
    bottom: 7px;
    left: 7px;
    width: auto;
    max-height: none;
    transform: translateY(calc(100% + 22px));
  }

  .lv-drawer.is-open {
    transform: translateY(0);
  }

  .lv-drawer-head {
    min-height: 57px;
  }

  .lv-drawer-scroll {
    padding: 10px 12px 24px;
  }

  .lv-media-main {
    height: 220px;
  }

  .lv-drawer h3 {
    font-size: 34px;
  }

  .lv-drawer-nav {
    padding: 8px 10px 10px;
  }

  .lv-media-lightbox {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    padding: 48px 8px 10px;
    border-radius: 22px;
  }

  .lv-stage-image {
    filter: none;
  }

  .lv-motes {
    display: none;
  }

  .lv-stage::after,
  .lv-orbit,
  .lv-portal-core,
  .lv-cue-orbit::after {
    animation: none;
  }

  .lv-rail,
  .lv-discovery-cue,
  .lv-drawer-head,
  .lv-drawer-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (hover: none) {
  .lv-signal:hover,
  .lv-signal:hover img {
    transform: none;
  }
}

/* Project dimensions and XR filters */

.lv-format-filters {
  width: min(100% - 80px, 1220px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: -10px auto 22px;
  padding: 11px 13px 11px 18px;
  border: 1px solid rgba(103,136,173,.18);
  border-radius: 22px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 42px rgba(36,63,94,.08);
}

.lv-format-filters > span {
  color: #56667e;
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.lv-format-filters > div {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}

.lv-format-filters > div::-webkit-scrollbar {
  display: none;
}

.lv-format-filters button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(89,120,158,.2);
  border-radius: 999px;
  color: #253a5b;
  background: rgba(244,248,252,.82);
  font: 800 9px/1 sans-serif;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.lv-format-filters button small {
  min-width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #71819a;
  background: rgba(28,53,83,.07);
  font-size: 7px;
}

.lv-format-filters button:hover,
.lv-format-filters button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(62,190,216,.52);
  outline: none;
}

.lv-format-filters button[aria-pressed="true"] {
  border-color: #5bc9df;
  color: white;
  background: linear-gradient(120deg, #183452, #2e7893);
  box-shadow: 0 10px 24px rgba(42,132,158,.18);
}

.lv-format-filters button[aria-pressed="true"] small {
  color: #d8f9ff;
  background: rgba(255,255,255,.13);
}

.lv-signal[hidden] {
  display: none !important;
}

.lv-signal .lv-signal-format {
  top: 8px;
  right: auto;
  bottom: auto;
  left: 8px;
  width: auto;
  max-width: 62px;
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: #dffbff;
  background: rgba(5,18,37,.45);
  font: 800 5px/1 sans-serif;
  direction: ltr;
  letter-spacing: .04em;
  text-overflow: clip;
  backdrop-filter: blur(8px);
}

.lv-drawer-formats {
  display: flex;
  gap: 6px;
  margin: 8px 3px 0;
  direction: ltr;
}

.lv-drawer-formats span {
  min-width: 38px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid rgba(135,231,246,.3);
  border-radius: 999px;
  color: #bff7ff;
  background: rgba(121,224,242,.08);
  font: 850 8px/1 sans-serif;
  letter-spacing: .06em;
}

/* Lightweight interactive cloud layers in the opening section */

.hero[data-cloud-interaction="ready"] {
  --hero-cloud-x: 0px;
  --hero-cloud-y: 0px;
  --hero-cloud-x-far: 0px;
  --hero-cloud-y-far: 0px;
}

.hero[data-cloud-interaction="ready"] .hero-scene {
  transform: translate3d(var(--hero-cloud-x), var(--hero-cloud-y), 0) scale(1.025);
  transform-origin: 50% 48%;
  transition: transform .55s cubic-bezier(.2,.72,.2,1);
  will-change: transform;
}

.hero-cloud-interaction {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-cloud-float {
  position: absolute;
  display: block;
  border-radius: 999px;
  opacity: .24;
  background:
    radial-gradient(circle at 22% 60%, rgba(255,255,255,.94) 0 18%, transparent 19%),
    radial-gradient(circle at 43% 42%, rgba(255,255,255,.92) 0 26%, transparent 27%),
    radial-gradient(circle at 70% 60%, rgba(222,246,255,.82) 0 22%, transparent 23%),
    linear-gradient(90deg, transparent 7%, rgba(241,251,255,.8) 23% 78%, transparent 94%);
  filter: blur(5px);
  transition: transform .7s cubic-bezier(.2,.72,.2,1), opacity .35s ease;
  will-change: transform;
}

.hero-cloud-float-a {
  top: 8%;
  left: -7%;
  width: 460px;
  height: 190px;
  transform: translate3d(var(--hero-cloud-x-far), var(--hero-cloud-y-far), 0);
}

.hero-cloud-float-b {
  top: 36%;
  right: -8%;
  width: 390px;
  height: 160px;
  opacity: .18;
  transform: translate3d(var(--hero-cloud-x), var(--hero-cloud-y), 0);
}

.hero-cloud-float-c {
  bottom: 3%;
  left: 24%;
  width: 320px;
  height: 130px;
  opacity: .13;
  transform: translate3d(var(--hero-cloud-x-far), var(--hero-cloud-y), 0);
}

.hero[data-cloud-interaction="ready"] .hero-copy,
.hero[data-cloud-interaction="ready"] .hero-status,
.hero[data-cloud-interaction="ready"] .hero-coordinate,
.hero[data-cloud-interaction="ready"] .hero-hint {
  z-index: 4;
}

@media (max-width: 880px) {
  .lv-format-filters {
    width: calc(100% - 18px);
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    margin: -5px auto 14px;
    padding: 10px;
    border-radius: 18px;
  }

  .lv-format-filters > div {
    width: 100%;
  }

  .lv-format-filters button {
    flex: 0 0 auto;
  }

  .hero-cloud-float {
    filter: blur(7px);
    opacity: .13;
  }

  .hero-cloud-float-a {
    width: 300px;
    height: 125px;
  }

  .hero-cloud-float-b {
    width: 260px;
    height: 105px;
  }

  .hero-cloud-float-c {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero[data-cloud-interaction="ready"] .hero-scene,
  .hero-cloud-float {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}


/* Performance cleanup 2026-07-23: keep the visual design without continuous GPU-heavy motion. */
.lv-world *, .lv-world *::before, .lv-world *::after,
.hero-cloud *, .hero-cloud *::before, .hero-cloud *::after {
  animation: none !important;
}
.lv-world canvas { display: none !important; }
.lv-stage-image, .hero-cloud-float {
  filter: none !important;
  will-change: auto !important;
}
.lv-signal, .lv-drawer, .lv-drawer-nav, .lv-filter-button, .lv-media-strip button, .lv-lightbox {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.lv-stage-image, .lv-drawer, .lv-signal, .hero-cloud-float {
  will-change: auto !important;
}

.lv-world * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }


/* Smooth lightweight interactions 2026-07-23 */
html { scroll-behavior: smooth; }
.lv-world { animation: lv-soft-enter .45s cubic-bezier(.2,.75,.25,1) both !important; }
@keyframes lv-soft-enter { from { opacity: .72; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lv-signal, .lv-filter-button, .lv-rail-controls button, .lv-drawer-nav button, .lv-media-strip button, .lv-media-expand {
  transition: transform .22s cubic-bezier(.2,.75,.25,1), opacity .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .lv-signal:hover { transform: translateY(-4px) scale(1.012); }
  .lv-filter-button:hover, .lv-rail-controls button:hover, .lv-drawer-nav button:hover, .lv-media-expand:hover { transform: translateY(-2px); }
  .lv-media-strip button:hover { transform: translateY(-3px) scale(1.02); }
}
.lv-world button:active { transform: scale(.975); }
.lv-world button:focus-visible { outline: 2px solid #8ee9f7; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lv-world { animation: none !important; }
  .lv-world * { transition-duration: .01ms !important; }
}


/* UX/UI implementation 2026-07-23 */
:root {
  --ux-ink: #10203d;
  --ux-muted: #46546b;
  --ux-accent: #d84f83;
  --ux-focus: #167d9a;
  --ux-ease: cubic-bezier(.2,.75,.25,1);
}
.hero-copy h1, .hero-copy h1 span:first-child { color: var(--ux-ink) !important; }
.hero-copy h1 .hero-accent { color: var(--ux-accent) !important; }
.hero-copy .eyebrow, .hero-intro, .hero-signature, .hero-status, .hero-hint { color: var(--ux-muted) !important; }
.hero-intro { max-width: 62ch; line-height: 1.9; }
.hero-signature { border-inline-start-color: var(--ux-accent) !important; }
.hero-actions .primary-button {
  background: var(--ux-ink) !important;
  color: #fff !important;
  border-color: var(--ux-ink) !important;
  box-shadow: 0 12px 30px rgba(16,32,61,.16);
}
.hero-actions .primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(16,32,61,.22); }
.hero-actions .text-button { color: var(--ux-ink) !important; }
.lv-featured-hidden { display: none !important; }
.lv-signal[data-featured="true"]::after {
  content: attr(data-featured-label);
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f5a3bc;
  color: #10203d;
  font: 800 10px/1.2 inherit;
  letter-spacing: .02em;
}
.lv-show-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 360px);
  min-height: 48px;
  margin: 24px auto 0;
  padding: 12px 22px;
  border: 1px solid rgba(16,32,61,.18);
  border-radius: 999px;
  background: #fff;
  color: var(--ux-ink);
  font-weight: 850;
  cursor: pointer;
  transition: transform .22s var(--ux-ease), box-shadow .22s ease, border-color .22s ease;
}
.lv-show-all:hover { transform: translateY(-2px); border-color: rgba(16,32,61,.4); box-shadow: 0 12px 28px rgba(16,32,61,.1); }
.lv-format-filters > div { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scroll-snap-type: inline proximity; }
.lv-format-filters button { flex: 0 0 auto; scroll-snap-align: start; }
.lv-drawer-close { min-width: 44px; min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ux-focus) !important; outline-offset: 3px !important; }
@media (max-width: 720px) {
  .hero-copy h1 { font-size: clamp(3rem, 13vw, 4.75rem) !important; line-height: .98 !important; }
  .hero-intro { font-size: 1rem; line-height: 1.85; }
  .hero-actions { gap: 12px; }
  .hero-actions .primary-button, .hero-actions .text-button { min-height: 48px; }
  .lv-intro h2 { font-size: clamp(2.35rem, 11.5vw, 3.4rem) !important; line-height: 1.03 !important; }
  .lv-format-filters { padding-inline: 14px; }
  .lv-format-filters > div { padding-block-end: 8px; }
  .lv-drawer-head { position: sticky; inset-block-start: 0; z-index: 5; background: #081a37; }
  .lv-show-all { width: calc(100% - 32px); }
}

/* Projects: immediate discovery, calmer cards, no reveal gate */
.lv-show-all,
.lv-featured-hidden {
  display: none !important;
}

.lv-rail {
  gap: 12px;
  padding: 10px;
}

.lv-signal {
  flex-basis: clamp(144px, 12vw, 176px);
  height: 102px;
  border-radius: 20px;
  border-color: rgba(255,255,255,.2);
  background-color: rgba(7,22,45,.72);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
}

.lv-signal strong {
  font-size: 11px;
  line-height: 1.55;
}

.lv-signal[data-active] {
  border-color: rgba(133,231,246,.82);
  box-shadow: 0 0 0 1px rgba(133,231,246,.2), 0 14px 34px rgba(0,0,0,.24);
}

.lv-drawer {
  box-shadow: 18px 0 55px rgba(1,10,26,.24);
}

.lv-drawer-summary {
  max-width: 48ch;
  line-height: 1.9;
}

@media (max-width: 880px) {
  .lv-signal {
    flex-basis: 148px;
    height: 98px;
  }
}

/* Project rail cards: stronger hierarchy and consistent imagery */
.lv-rail {
  scroll-padding-inline: 12px;
}

.lv-signal {
  flex-basis: clamp(156px, 13vw, 188px);
  height: 112px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  isolation: isolate;
}

.lv-signal::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4,15,32,.1) 25%, rgba(4,15,32,.45) 56%, rgba(4,15,32,.96) 100%),
    linear-gradient(90deg, rgba(4,15,32,.24), transparent 60%);
}

.lv-signal img {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
  filter: saturate(.86) brightness(.78) contrast(1.05);
  transform: scale(1.015);
}

.lv-signal:hover img,
.lv-signal:focus-visible img,
.lv-signal[aria-pressed="true"] img {
  filter: saturate(1) brightness(.9) contrast(1.06);
  transform: scale(1.055);
}

.lv-signal-number {
  top: 9px;
  right: 9px;
  width: 28px;
  height: 20px;
  border-radius: 999px;
  background: rgba(4,16,34,.72);
  font-size: 7px;
}

.lv-signal .lv-signal-format {
  top: 9px;
  left: 9px;
  min-height: 20px;
  display: grid;
  place-items: center;
  padding-inline: 8px;
  border-color: rgba(147,234,248,.42);
  background: rgba(4,16,34,.72);
  font-size: 6px;
}

.lv-signal-copy {
  right: 11px;
  bottom: 10px;
  left: 11px;
}

.lv-signal-copy strong {
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
  letter-spacing: -.01em;
}

.lv-signal-copy small {
  display: none;
}

.lv-signal:hover,
.lv-signal:focus-visible,
.lv-signal[aria-pressed="true"] {
  transform: translateY(-4px);
}

.lv-signal[aria-pressed="true"] {
  flex-basis: clamp(164px, 13.5vw, 196px);
  border-color: rgba(137,233,248,.95);
  box-shadow:
    0 0 0 2px rgba(137,233,248,.12),
    0 16px 38px rgba(3,13,29,.34);
}

@media (max-width: 880px) {
  .lv-signal,
  .lv-signal[aria-pressed="true"] {
    flex-basis: 156px;
    height: 104px;
    border-radius: 17px;
  }

  .lv-signal-copy strong {
    font-size: 11px;
  }
}

/* Performance and interaction pass */
.site-nav {
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  background: rgba(244, 250, 252, .88) !important;
}

.identity-section,
.skills-section,
.manifesto-section,
.lab-section,
.contact-section,
footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 820px;
}

.lv-format-filters button,
.lv-rail-actions button,
.lv-drawer-close,
.lv-drawer-nav button,
.lv-open-media,
.lv-media-expand {
  min-width: 44px;
  min-height: 44px;
}

.lv-rail-actions button {
  width: 44px;
  height: 44px;
}

.lv-media-strip button {
  min-width: 56px;
  min-height: 56px;
}

@media (max-width: 880px) {
  .site-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(244, 250, 252, .96) !important;
  }

  .lv-motes,
  .lv-grain,
  .hero-cloud-interaction {
    display: none !important;
  }

  .identity-card,
  .weather-sample,
  .contact-form,
  .lv-discovery-cue,
  .lv-signal-number,
  .lv-signal .lv-signal-format {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .lv-signal-number,
  .lv-signal .lv-signal-format {
    background: rgba(4, 16, 34, .9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-motes,
  .lv-grain,
  .hero-cloud-interaction {
    display: none !important;
  }

  .lv-stage-image,
  .lv-orbit,
  .lv-portal-core,
  .lv-stage::after {
    animation: none !important;
  }

  .lv-stage-image,
  .lv-space {
    translate: 0 0 !important;
  }

  .lv-stage-image {
    rotate: 0deg !important;
    transform: none !important;
  }
}

/* Hero: clearer hierarchy with less repeated information */
.hero-traits {
  display: none !important;
}

.hero-copy .eyebrow {
  max-width: 52ch;
  line-height: 1.65;
}

.hero-intro {
  max-width: 52ch;
  line-height: 1.75;
}

.hero-signature {
  max-width: 47ch;
  margin-top: 14px;
  padding-block: 2px;
  line-height: 1.7;
}

.hero-actions {
  margin-top: 24px;
}

@media (max-width: 720px) {
  .hero-copy .eyebrow {
    max-width: 34ch;
  }

  .hero-intro {
    max-width: 34ch;
    line-height: 1.7;
  }

  .hero-signature {
    display: none;
  }

  .hero-actions {
    margin-top: 20px;
  }
}

/* Make the bilingual experience easy to discover from the first screen. */
.language-switch {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(15, 43, 74, .2);
  border-radius: 999px;
  color: #0b1b36;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 10px 28px rgba(11, 27, 54, .08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition:
    transform .2s ease,
    color .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}

.language-switch:hover {
  transform: translateY(-2px);
  color: #087a99;
  border-color: rgba(8, 122, 153, .42);
  background: #fff;
  box-shadow: 0 14px 34px rgba(11, 27, 54, .13);
}

.language-switch:focus-visible {
  outline: 3px solid rgba(27, 161, 190, .28);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .language-switch {
    min-width: 78px;
    height: 40px;
    padding-inline: 12px;
    font-size: 11px;
  }
}

/* The two identity cards now behave like a deliberate, accessible choice. */
.identity-card {
  cursor: pointer;
  transition:
    transform .24s var(--ux-ease),
    opacity .24s ease,
    filter .24s ease,
    border-color .24s ease,
    box-shadow .24s ease !important;
}

.identity-card[aria-pressed="true"] {
  transform: translateY(-6px);
  border-color: rgba(22, 125, 154, .62) !important;
  box-shadow:
    0 22px 54px rgba(16, 32, 61, .18),
    0 0 0 1px rgba(114, 217, 238, .24) !important;
}

.identity-portrait.has-identity-focus .identity-card:not([aria-pressed="true"]) {
  opacity: .68;
  filter: saturate(.72);
}

.identity-card[role="button"]:focus-visible {
  outline: 3px solid var(--ux-focus) !important;
  outline-offset: 4px !important;
}

@media (max-width: 720px) {
  .identity-card[aria-pressed="true"] {
    transform: translateY(-3px);
  }
}

/* Mobile length, modal scrolling, and anchor stability 2026-07-23 */
#work,
#about,
#skills,
#lab,
#contact {
  scroll-margin-top: 92px;
}

html.lv-project-modal-open,
body.lv-project-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

@media (max-width: 880px) {
  #work,
  #about,
  #skills,
  #lab,
  #contact {
    scroll-margin-top: 72px;
  }

  /* Avoid large placeholder gaps and late anchor jumps on small screens. */
  .identity-section,
  .skills-section,
  .manifesto-section,
  .lab-section,
  .contact-section,
  footer {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }

  .hero {
    min-height: 100svh !important;
    height: auto !important;
  }

  .lv-world {
    padding-block: 28px 44px !important;
  }

  .lv-intro {
    margin-bottom: 12px !important;
  }

  .lv-stage {
    height: clamp(650px, calc(100svh - 20px), 760px) !important;
    min-height: 0 !important;
    max-height: 760px;
  }

  .identity-section,
  .skills-section,
  .lab-section,
  .contact-section {
    min-height: 0 !important;
    padding-block: 56px !important;
  }

  .manifesto-section {
    min-height: min(620px, 78svh) !important;
    padding-block: 56px !important;
  }

  .identity-intro,
  .skills-heading,
  .lab-copy {
    margin-bottom: 28px !important;
  }

  .skills-grid,
  .weather-samples {
    gap: 14px !important;
  }

  .skill-front,
  .weather-sample {
    min-height: 0 !important;
  }

  footer {
    padding-block: 32px !important;
  }

  /* The project detail becomes one viewport modal with one scroll surface. */
  .lv-drawer {
    position: fixed !important;
    z-index: 1200 !important;
    inset:
      max(8px, env(safe-area-inset-top))
      8px
      max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 24px !important;
    transform: translateY(calc(100% + 24px)) !important;
  }

  .lv-drawer.is-open {
    transform: translateY(0) !important;
  }

  .lv-drawer-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 12px 15px 28px !important;
  }

  .lv-media-main {
    height: clamp(180px, 25svh, 220px) !important;
  }

  .lv-drawer h3 {
    font-size: clamp(30px, 8.5vw, 36px) !important;
    line-height: 1.2 !important;
  }

  .lv-drawer-summary {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  .lv-role strong,
  .lv-story p {
    font-size: 13px !important;
    line-height: 1.75 !important;
  }

  .lv-drawer-meta,
  .lv-drawer-mode,
  .lv-drawer-head .lv-drawer-index {
    font-size: 10px !important;
  }

  .lv-drawer-nav button {
    min-height: 48px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 720px) {
  .hero-copy h1 {
    font-size: clamp(2.65rem, 11vw, 4rem) !important;
    line-height: 1.04 !important;
  }

  .hero-intro {
    font-size: .96rem !important;
    line-height: 1.7 !important;
  }

  .lv-intro h2,
  .identity-intro h2,
  .skills-heading h2,
  .manifesto-section h2,
  .lab-copy h2,
  .contact-copy h2 {
    font-size: clamp(2.05rem, 9vw, 3.15rem) !important;
    line-height: 1.08 !important;
  }

  .hero-actions .primary-button,
  .hero-actions .text-button {
    font-size: .9rem !important;
  }
}

/* Final hierarchy and pacing refinement 2026-07-23 */
.identity-intro > p:not(.eyebrow),
.skills-heading > p:not(.eyebrow),
.lab-copy > p:not(.eyebrow),
.contact-copy > p:not(.eyebrow) {
  font-size: clamp(.96rem, 1.15vw, 1.05rem) !important;
  line-height: 1.9 !important;
}

.weather-sample p {
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.lv-drawer-summary {
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.lv-role strong,
.lv-story p {
  font-size: 13px !important;
  line-height: 1.75 !important;
}

.lv-drawer-meta,
.lv-drawer-mode {
  font-size: 10.5px !important;
}

.lv-drawer-nav button {
  min-height: 46px !important;
  font-size: 11.5px !important;
}

@media (min-width: 881px) {
  .hero-copy h1 {
    font-size: clamp(4.8rem, 7.2vw, 5.75rem) !important;
    line-height: 1.02 !important;
  }

  .identity-section {
    padding-block: 112px !important;
  }

  .skills-section {
    padding-block: 112px 120px !important;
  }

  .lab-section {
    padding-block: 112px 120px !important;
  }

  .identity-intro h2,
  .skills-heading h2,
  .lab-copy h2 {
    font-size: clamp(3.6rem, 5.4vw, 4.8rem) !important;
    line-height: 1.08 !important;
    text-wrap: balance;
  }

  .manifesto-section {
    min-height: 620px !important;
    padding-block: 92px !important;
  }

  .manifesto-section h2 {
    width: min(100%, 1100px);
    max-width: 1100px !important;
    margin-inline: auto;
    font-size: clamp(3.8rem, 6.3vw, 5.4rem) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

/* Mobile project navigation: easier swiping and clean section boundaries. */
@media (max-width: 720px) {
  #work.lv-world {
    width: calc(100% - 12px);
    margin-block: 0 18px !important;
    padding-block: 22px 34px !important;
  }

  .lv-intro {
    width: calc(100% - 18px);
    gap: 8px;
    margin-bottom: 10px !important;
  }

  .lv-intro-copy {
    font-size: 13.5px;
    line-height: 1.7;
  }

  .lv-format-filters {
    width: calc(100% - 12px);
    gap: 6px;
    margin: 0 auto 10px !important;
    padding: 8px !important;
  }

  .lv-format-filters > span {
    font-size: 11px;
  }

  .lv-format-filters > div {
    width: 100%;
    padding-block-end: 3px !important;
  }

  .lv-format-filters button {
    min-height: 40px;
    padding-inline: 11px;
  }

  .lv-stage {
    height: clamp(610px, calc(100svh - 56px), 700px) !important;
    min-height: 610px !important;
    max-height: 700px !important;
    border-radius: 24px;
  }

  .lv-discovery-cue {
    display: none !important;
  }

  .lv-scene-copy {
    top: 58px;
    right: 14px;
    left: 14px;
    width: auto;
    max-width: 310px;
  }

  .lv-scene-copy strong {
    font-size: 22px;
    line-height: 1.3;
  }

  .lv-stage-image {
    right: -28%;
    bottom: 146px;
    width: 108%;
    max-height: 68%;
    object-fit: contain;
  }

  .lv-rail-wrap {
    right: 7px;
    bottom: 7px;
    left: 7px;
  }

  .lv-rail-label {
    min-height: 38px;
    margin-bottom: 5px;
  }

  .lv-rail-label > span {
    font-size: 11px;
  }

  .lv-rail {
    gap: 9px;
    padding: 8px;
    scroll-padding-inline: 46px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .lv-rail::-webkit-scrollbar {
    display: none;
  }

  .lv-signal,
  .lv-signal[aria-pressed="true"] {
    flex-basis: min(68vw, 250px) !important;
    height: 112px !important;
    border-radius: 17px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .lv-signal-copy {
    padding: 11px 12px;
  }

  .lv-signal-copy strong {
    font-size: 13px !important;
    line-height: 1.45;
  }

  .lv-signal-number,
  .lv-signal .lv-signal-format {
    font-size: 9px;
  }

  .lv-drawer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform .32s cubic-bezier(.2,.78,.2,1),
      opacity .2s ease,
      visibility 0s linear .32s !important;
  }

  .lv-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform .32s cubic-bezier(.2,.78,.2,1),
      opacity .2s ease,
      visibility 0s linear 0s !important;
  }

  #about {
    clear: both;
    margin-top: 0 !important;
  }
}

/* Lightweight interactive portrait motion: compositor-only transforms. */
@media (prefers-reduced-motion: no-preference) {
  .lv-stage-image {
    animation: lv-stage-breathe 5.8s ease-in-out infinite !important;
    will-change: transform, translate, rotate !important;
  }

  .lv-space {
    will-change: translate !important;
  }

  .lv-orbit-a {
    animation: lv-orbit-a 15s linear infinite !important;
  }

  .lv-orbit-b {
    animation: lv-orbit-b 18s linear infinite reverse !important;
  }

  .lv-portal-core {
    animation: lv-pulse 5.4s ease-in-out infinite !important;
  }
}

/* Compact opening scene with lightweight, depth-based cloud interaction. */
.hero[data-cloud-interaction="ready"] {
  --hero-scene-x: 0px;
  --hero-scene-y: 0px;
  --hero-light-x: 0px;
  --hero-light-y: 0px;
  --hero-pointer-x: 50%;
  --hero-pointer-y: 45%;
  --hero-cloud-rotate: 0deg;
  --hero-cloud-rotate-far: 0deg;
  overflow: hidden !important;
  touch-action: pan-y;
}

@media (min-width: 881px) {
  .hero {
    min-height: clamp(600px, 82svh, 700px) !important;
    padding: 88px clamp(48px, 6vw, 96px) 40px !important;
  }

  .hero-copy {
    max-width: min(760px, 63vw) !important;
  }

  .hero-copy h1 {
    font-size: clamp(4.35rem, 6vw, 5rem) !important;
    line-height: 1 !important;
  }

  .hero-intro {
    line-height: 1.72 !important;
  }

  .hero-signature {
    margin-top: 10px !important;
  }

  .hero-actions {
    margin-top: 18px !important;
  }
}

@media (min-width: 881px) and (max-height: 760px) {
  .hero-coordinate,
  .hero-hint {
    display: none !important;
  }
}

@media (max-width: 880px) {
  .hero {
    min-height: clamp(590px, 88svh, 680px) !important;
    padding: 88px 18px 38px !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 38rem !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.55rem, 10.5vw, 3.55rem) !important;
    line-height: 1.02 !important;
  }

  .hero-intro {
    max-width: 36ch !important;
    line-height: 1.7 !important;
  }

  .hero-actions {
    margin-top: 18px !important;
  }

  .hero-coordinate,
  .hero-hint {
    display: none !important;
  }
}

.hero-cloud-light {
  position: absolute;
  z-index: 1;
  top: 44%;
  left: 36%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: .3;
  background: radial-gradient(circle, rgba(188,241,249,.32), transparent 68%);
  translate: var(--hero-light-x) var(--hero-light-y);
  scale: 1;
  transition:
    translate .5s cubic-bezier(.2,.72,.2,1),
    opacity .35s ease,
    scale .8s cubic-bezier(.16,.74,.18,1);
  pointer-events: none;
}

.hero-cloud-pointer {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: clamp(190px, 24vw, 360px);
  aspect-ratio: 2.05;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.74) 0 13%, rgba(214,244,250,.3) 38%, transparent 72%),
    radial-gradient(ellipse at 68% 48%, rgba(245,186,210,.2), transparent 56%);
  transform: translate3d(var(--hero-pointer-x), var(--hero-pointer-y), 0) translate(-50%, -50%) scale(.68);
  transition: transform .32s cubic-bezier(.2,.72,.2,1), opacity .32s ease;
  pointer-events: none;
}

.hero-cloud-bloom {
  position: absolute;
  z-index: 3;
  width: 72px;
  height: 42px;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 32% 64%, rgba(255,255,255,.88) 0 17%, transparent 19%),
    radial-gradient(ellipse at 55% 42%, rgba(222,247,251,.8) 0 27%, transparent 29%),
    radial-gradient(ellipse at 76% 64%, rgba(244,190,213,.42) 0 18%, transparent 20%);
  transform: translate(-50%, -50%) scale(.45);
  animation: hero-cloud-bloom .78s cubic-bezier(.18,.72,.18,1) forwards;
  pointer-events: none;
}

.hero-cloud-burst {
  position: absolute;
  z-index: 4;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hero-cloud-core,
.hero-cloud-wave,
.hero-cloud-wisp {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
}

.hero-cloud-core {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.96) 0 8%, rgba(184,239,249,.68) 24%, rgba(245,163,198,.28) 46%, transparent 72%);
  filter: blur(.3px);
  transform: translate(-50%, -50%) scale(.2);
  animation: hero-cloud-core 1.05s cubic-bezier(.16,.74,.18,1) forwards;
}

.hero-cloud-wave {
  width: 96px;
  height: 50px;
  border: 1px solid rgba(117, 211, 231, .5);
  border-radius: 50%;
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.34),
    0 0 34px rgba(234,143,183,.16);
  transform: translate(-50%, -50%) scale(.24);
  animation: hero-cloud-wave 1.18s cubic-bezier(.14,.72,.18,1) forwards;
}

.hero-cloud-wave-2 {
  border-color: rgba(238, 141, 183, .38);
  animation-delay: 110ms;
}

.hero-cloud-wisp {
  width: clamp(54px, 6vw, 88px);
  height: clamp(28px, 3.4vw, 44px);
  border-radius: 999px;
  opacity: 0;
  background:
    radial-gradient(ellipse at 28% 64%, rgba(255,255,255,.94) 0 19%, transparent 21%),
    radial-gradient(ellipse at 52% 39%, rgba(226,248,251,.9) 0 31%, transparent 33%),
    radial-gradient(ellipse at 77% 63%, rgba(247,195,216,.56) 0 21%, transparent 23%),
    linear-gradient(90deg, rgba(205,240,247,.38), rgba(255,255,255,.72), rgba(242,166,200,.24));
  filter: drop-shadow(0 12px 20px rgba(61, 129, 151, .12));
  transform: translate(-50%, -50%) scale(.38);
  animation: hero-cloud-wisp 1.14s cubic-bezier(.12,.7,.16,1) var(--cloud-burst-delay) forwards;
}

@keyframes hero-cloud-drift-a {
  0%,
  100% { transform: translate3d(-8px, 2px, 0) scale(.985); }
  50% { transform: translate3d(10px, -5px, 0) scale(1.025); }
}

@keyframes hero-cloud-drift-b {
  0%,
  100% { transform: translate3d(8px, -3px, 0) scale(1.015); }
  50% { transform: translate3d(-11px, 5px, 0) scale(.98); }
}

@keyframes hero-cloud-drift-c {
  0%,
  100% { transform: translate3d(-5px, 4px, 0) scale(.98); }
  50% { transform: translate3d(9px, -4px, 0) scale(1.03); }
}

@keyframes hero-cloud-bloom {
  0% {
    opacity: .74;
    transform: translate(-50%, -50%) scale(.45);
  }
  58% { opacity: .34; }
  100% {
    opacity: 0;
    transform: translate(-50%, -58%) scale(3.3);
  }
}

@keyframes hero-cloud-core {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.18);
  }
  24% { opacity: .92; }
  62% { opacity: .38; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.4);
  }
}

@keyframes hero-cloud-wave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.24);
  }
  20% { opacity: .72; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.6);
  }
}

@keyframes hero-cloud-wisp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.38) rotate(0deg);
  }
  18% { opacity: .82; }
  64% { opacity: .48; }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate3d(var(--cloud-burst-x), var(--cloud-burst-y), 0)
      scale(var(--cloud-burst-scale))
      rotate(var(--cloud-burst-rotate));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero[data-cloud-interaction="ready"] .hero-cloud-interaction {
    display: block !important;
  }

  .hero[data-cloud-interaction="ready"] .hero-scene {
    translate: var(--hero-scene-x) var(--hero-scene-y);
    transform: scale(1.035) !important;
    transition: translate .44s cubic-bezier(.2,.72,.2,1) !important;
    will-change: auto !important;
  }

  .hero.is-cloud-interacting .hero-scene {
    will-change: translate !important;
  }

  .hero-cloud-float {
    filter: none !important;
    background:
      radial-gradient(ellipse at 20% 66%, rgba(255,255,255,.96) 0 18%, transparent 19.5%),
      radial-gradient(ellipse at 42% 43%, rgba(255,255,255,.9) 0 27%, transparent 28.5%),
      radial-gradient(ellipse at 69% 61%, rgba(216,243,249,.76) 0 23%, transparent 24.5%),
      linear-gradient(90deg, transparent 5%, rgba(225,247,250,.68) 23% 65%, rgba(247,203,220,.3) 82%, transparent 96%);
    box-shadow: 0 22px 60px rgba(89,154,173,.08);
    transform: translate3d(0, 0, 0);
    transition:
      translate .48s cubic-bezier(.2,.72,.2,1),
      rotate .48s cubic-bezier(.2,.72,.2,1),
      scale .74s cubic-bezier(.16,.74,.18,1),
      opacity .3s ease !important;
    animation-play-state: paused !important;
    will-change: auto !important;
  }

  .hero-cloud-float-a {
    opacity: .38;
    translate: var(--hero-cloud-x-far) var(--hero-cloud-y-far);
    rotate: var(--hero-cloud-rotate-far);
    animation: hero-cloud-drift-a 14s ease-in-out infinite !important;
  }

  .hero-cloud-float-b {
    opacity: .3;
    translate: var(--hero-cloud-x) var(--hero-cloud-y);
    rotate: var(--hero-cloud-rotate);
    animation: hero-cloud-drift-b 17s ease-in-out infinite !important;
  }

  .hero-cloud-float-c {
    opacity: .21;
    translate: var(--hero-cloud-x-far) var(--hero-cloud-y);
    rotate: var(--hero-cloud-rotate-far);
    animation: hero-cloud-drift-c 20s ease-in-out infinite !important;
  }

  .hero.is-cloud-visible .hero-cloud-float {
    animation-play-state: running !important;
    will-change: transform, translate !important;
  }

  .hero.is-cloud-interacting .hero-cloud-float {
    opacity: .5;
  }

  .hero.is-cloud-interacting .hero-cloud-light {
    opacity: .58;
  }

  .hero.is-cloud-interacting .hero-cloud-pointer {
    opacity: .38;
    transform: translate3d(var(--hero-pointer-x), var(--hero-pointer-y), 0) translate(-50%, -50%) scale(1);
    will-change: transform;
  }

  .hero.is-cloud-pressed .hero-cloud-pointer {
    opacity: .56;
    transform: translate3d(var(--hero-pointer-x), var(--hero-pointer-y), 0) translate(-50%, -50%) scale(1.13);
  }

  .hero.is-cloud-dispersing .hero-cloud-float-a {
    translate:
      calc(var(--hero-cloud-x-far) - 74px)
      calc(var(--hero-cloud-y-far) - 18px);
    rotate: calc(var(--hero-cloud-rotate-far) - 2deg);
    scale: 1.08;
    opacity: .16;
  }

  .hero.is-cloud-dispersing .hero-cloud-float-b {
    translate:
      calc(var(--hero-cloud-x) + 78px)
      calc(var(--hero-cloud-y) - 8px);
    rotate: calc(var(--hero-cloud-rotate) + 2.4deg);
    scale: 1.13;
    opacity: .14;
  }

  .hero.is-cloud-dispersing .hero-cloud-float-c {
    translate:
      calc(var(--hero-cloud-x-far) - 46px)
      calc(var(--hero-cloud-y) + 34px);
    rotate: calc(var(--hero-cloud-rotate-far) - 1.2deg);
    scale: 1.05;
    opacity: .1;
  }

  .hero.is-cloud-dispersing .hero-cloud-light {
    opacity: .86;
    scale: 1.18;
  }
}

@media (max-width: 880px) and (prefers-reduced-motion: no-preference) {
  .hero-cloud-float {
    opacity: .23;
  }

  .hero-cloud-float-a {
    top: 10%;
    left: -24%;
    width: 290px;
    height: 120px;
  }

  .hero-cloud-float-b {
    top: 43%;
    right: -28%;
    width: 245px;
    height: 100px;
  }

  .hero-cloud-float-c {
    display: none !important;
  }

  .hero-cloud-light {
    top: 33%;
    left: 6%;
    width: 220px;
    height: 220px;
  }

  .hero-cloud-pointer {
    width: 210px;
  }

  .hero.is-cloud-interacting .hero-cloud-float {
    opacity: .34;
  }

  .hero.is-cloud-interacting .hero-cloud-pointer {
    opacity: .22;
  }

  .hero.is-cloud-dispersing .hero-cloud-float-a {
    translate:
      calc(var(--hero-cloud-x-far) - 34px)
      calc(var(--hero-cloud-y-far) - 10px);
  }

  .hero.is-cloud-dispersing .hero-cloud-float-b {
    translate:
      calc(var(--hero-cloud-x) + 38px)
      calc(var(--hero-cloud-y) - 5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cloud-interaction {
    display: none !important;
  }

  .hero[data-cloud-interaction="ready"] .hero-scene {
    translate: 0 0 !important;
    transform: scale(1.015) !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Content focus and compact section rhythm 2026-07-24 */
.manifesto-section,
a[href="#lab"] {
  display: none !important;
}

.identity-section,
.skills-section,
.lab-section,
.contact-section {
  min-height: 0 !important;
  scroll-margin-top: 76px;
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

.identity-hint,
.identity-principles > :nth-child(n + 4),
.skill-front li:nth-child(n + 4),
.weather-samples > :nth-child(n + 4) {
  display: none !important;
}

.identity-intro,
.skills-heading,
.lab-copy {
  margin-bottom: 34px !important;
}

.identity-intro h2,
.skills-heading h2,
.lab-copy h2,
.contact-copy h2 {
  text-wrap: balance;
}

.identity-intro > p:not(.eyebrow),
.skills-heading > p:not(.eyebrow),
.lab-copy > p:not(.eyebrow),
.contact-copy > p:not(.eyebrow) {
  max-width: 58ch;
  line-height: 1.75 !important;
}

.identity-principles {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.skills-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.skill-front {
  min-height: 270px !important;
  padding: 24px 20px !important;
}

.skill-front h3 {
  font-size: clamp(1.18rem, 1.7vw, 1.5rem) !important;
  line-height: 1.3 !important;
}

.skill-front ul {
  gap: 10px !important;
}

.skill-front li {
  font-size: .92rem !important;
  line-height: 1.5 !important;
}

.weather-samples {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.weather-sample {
  min-height: 240px !important;
  padding: 24px !important;
}

.weather-sample p {
  line-height: 1.65 !important;
}

.contact-form {
  padding: 28px !important;
}

.contact-form input {
  min-height: 50px !important;
}

.contact-form textarea {
  min-height: 96px !important;
}

@media (min-width: 881px) {
  .identity-section {
    padding-block: 76px !important;
  }

  .skills-section,
  .lab-section {
    padding-block: 80px !important;
  }

  .contact-section {
    padding-block: 80px !important;
    align-items: center !important;
  }

  .identity-intro {
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr) !important;
    gap: clamp(36px, 5vw, 72px) !important;
  }

  .identity-intro h2,
  .skills-heading h2,
  .lab-copy h2 {
    font-size: clamp(3rem, 4.4vw, 4rem) !important;
    line-height: 1.06 !important;
  }

  .identity-portrait {
    height: 360px !important;
    min-height: 360px !important;
  }

  .identity-card {
    width: min(31%, 330px) !important;
    min-height: 118px !important;
    height: auto !important;
    padding: 18px 20px !important;
  }

  .identity-card strong {
    font-size: clamp(1.7rem, 2.7vw, 2.5rem) !important;
  }

  .identity-principles {
    margin-top: 22px !important;
  }

  .skills-heading,
  .lab-copy {
    max-width: 900px !important;
  }

  .contact-copy h2 {
    font-size: clamp(3.1rem, 4.7vw, 4.5rem) !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 880px) {
  .identity-section,
  .skills-section,
  .lab-section,
  .contact-section {
    padding-block: 54px !important;
  }

  .identity-intro,
  .skills-heading,
  .lab-copy {
    margin-bottom: 26px !important;
  }

  .identity-intro h2,
  .skills-heading h2,
  .lab-copy h2,
  .contact-copy h2 {
    font-size: clamp(2rem, 8.8vw, 2.7rem) !important;
    line-height: 1.08 !important;
  }

  .identity-intro {
    gap: 18px !important;
  }

  .identity-intro > p:not(.eyebrow),
  .skills-heading > p:not(.eyebrow),
  .lab-copy > p:not(.eyebrow),
  .contact-copy > p:not(.eyebrow) {
    font-size: .95rem !important;
    line-height: 1.7 !important;
  }

  .identity-portrait {
    height: 420px !important;
    min-height: 420px !important;
  }

  .identity-card {
    min-height: 104px !important;
    height: auto !important;
    padding: 14px 16px !important;
  }

  .identity-card strong {
    font-size: 1.8rem !important;
  }

  .identity-card span {
    font-size: .78rem !important;
    line-height: 1.45 !important;
  }

  .identity-principles {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }

  .identity-principles > div {
    min-height: 48px !important;
    padding: 12px 14px !important;
  }

  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .skill-front {
    min-height: 222px !important;
    padding: 18px 14px !important;
  }

  .skill-front h3 {
    font-size: 1.02rem !important;
  }

  .skill-front li {
    font-size: .78rem !important;
  }

  .weather-samples {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .weather-sample {
    min-height: 0 !important;
    padding: 20px !important;
  }

  .weather-sample p {
    margin-top: 8px !important;
  }

  .contact-section {
    gap: 28px !important;
  }

  .contact-form {
    padding: 22px 18px !important;
  }
}

@media (max-width: 420px) {
  .skill-front {
    min-height: 210px !important;
    padding-inline: 12px !important;
  }

  .skill-front-meta {
    font-size: .62rem !important;
  }
}

/* Unified bilingual project modes: story view + cloud world */
html[lang="en"] .lv-world,
.lv-world {
  display: block !important;
}

.lv-original-work {
  display: none !important;
}

.lv-world [hidden] {
  display: none !important;
}

.lv-mode-switch {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(420px, 1fr);
  gap: 24px;
  align-items: center;
  width: min(100% - 40px, 1180px);
  margin: 0 auto 18px;
  padding: 14px 14px 14px 20px;
  border: 1px solid rgba(32, 72, 106, .14);
  border-radius: 24px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 14px 42px rgba(22, 52, 84, .08);
}

.lv-mode-copy {
  min-width: 0;
}

.lv-mode-copy small,
.lv-mode-copy strong {
  display: block;
}

.lv-mode-copy small {
  margin-bottom: 4px;
  color: #da698b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lv-mode-copy strong {
  color: #12203b;
  font-size: clamp(.95rem, 1.4vw, 1.12rem);
  line-height: 1.45;
}

.lv-mode-options {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border-radius: 18px;
  background: #edf3f7;
}

.lv-mode-options button {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #5b6b80;
  text-align: start;
  cursor: pointer;
  transition:
    transform .22s ease,
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.lv-mode-options button:hover {
  color: #12203b;
  transform: translateY(-1px);
}

.lv-mode-options button[aria-selected="true"] {
  border-color: rgba(93, 194, 217, .28);
  background: #fff;
  color: #12203b;
  box-shadow: 0 8px 24px rgba(24, 59, 91, .11);
}

.lv-mode-options button:focus-visible {
  outline: 2px solid #50bdd6;
  outline-offset: 2px;
}

.lv-mode-options button > span:last-child,
.lv-mode-options button strong,
.lv-mode-options button small {
  display: block;
}

.lv-mode-options button strong {
  font-size: .86rem;
  line-height: 1.3;
}

.lv-mode-options button small {
  margin-top: 3px;
  color: #758397;
  font-size: .68rem;
  line-height: 1.35;
}

.lv-mode-icon {
  position: relative;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(145deg, #0d2443, #194c67);
}

.lv-mode-icon-story i {
  position: absolute;
  right: 8px;
  left: 8px;
  height: 4px;
  border-radius: 4px;
  background: #8fe2ef;
}

.lv-mode-icon-story i:nth-child(1) { top: 10px; }
.lv-mode-icon-story i:nth-child(2) { top: 19px; width: 18px; }
.lv-mode-icon-story i:nth-child(3) { top: 28px; width: 23px; }

.lv-mode-icon-cloud {
  background: linear-gradient(145deg, #d9f1f6, #f9e7ee);
}

.lv-mode-icon-cloud i {
  position: absolute;
  bottom: 10px;
  width: 18px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 12px rgba(67, 126, 150, .13);
}

.lv-mode-icon-cloud i:nth-child(1) { left: 7px; }
.lv-mode-icon-cloud i:nth-child(2) { left: 15px; bottom: 14px; width: 20px; height: 16px; }
.lv-mode-icon-cloud i:nth-child(3) { right: 5px; }

.lv-world.is-switching-view [data-mode-panel] {
  animation: lv-mode-enter .42s cubic-bezier(.2, .72, .22, 1) both;
}

@keyframes lv-mode-enter {
  from { opacity: 0; transform: translateY(12px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.lv-cloud-view {
  width: 100%;
}

.lv-cloud-intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(260px, .55fr);
  gap: 36px;
  align-items: end;
  width: min(100% - 76px, 1180px);
  margin: 28px auto 18px;
}

.lv-cloud-intro p {
  margin: 0 0 7px;
  color: #db6d8d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lv-cloud-intro h3 {
  max-width: 700px;
  margin: 0;
  color: #12203b;
  font-size: clamp(2rem, 4.2vw, 4.4rem);
  font-weight: 720;
  line-height: 1.03;
  letter-spacing: -.045em;
}

.lv-cloud-intro > span {
  color: #66748a;
  font-size: .88rem;
  line-height: 1.8;
}

.lv-cloud-stage {
  --cloud-world-x: 0px;
  --cloud-world-y: 0px;
  --cloud-world-rotate: 0deg;
  position: relative;
  min-height: min(760px, 80svh);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(95, 158, 183, .23);
  border-radius: 46px;
  background:
    radial-gradient(circle at 50% 72%, rgba(255,255,255,.98) 0 7%, transparent 34%),
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.96), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(255,232,241,.78), transparent 26%),
    linear-gradient(150deg, #daf1f5 0%, #edf7fa 46%, #f8e9ee 100%);
  box-shadow: 0 34px 95px rgba(24, 62, 92, .14);
  perspective: 1400px;
  touch-action: pan-y;
}

.lv-cloud-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .34;
  background:
    radial-gradient(circle at 17% 31%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 73% 21%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 88% 61%, rgba(255,255,255,.9) 0 2px, transparent 3px);
  background-size: 125px 125px, 170px 170px, 215px 215px;
  pointer-events: none;
  content: "";
}

.lv-cloud-stage::after {
  position: absolute;
  z-index: 7;
  right: -8%;
  bottom: -105px;
  left: -8%;
  height: 250px;
  background:
    radial-gradient(ellipse at 10% 50%, #fff 0 21%, transparent 50%),
    radial-gradient(ellipse at 38% 62%, rgba(255,255,255,.98) 0 28%, transparent 58%),
    radial-gradient(ellipse at 71% 56%, #fff 0 28%, transparent 58%),
    radial-gradient(ellipse at 95% 48%, rgba(255,255,255,.96) 0 20%, transparent 50%);
  filter: blur(13px);
  pointer-events: none;
  content: "";
}

.lv-cloud-topline {
  position: absolute;
  z-index: 30;
  top: 24px;
  right: 30px;
  left: 30px;
  display: flex;
  justify-content: space-between;
  color: #66768b;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
}

.lv-cloud-live {
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

.lv-cloud-live::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4fc4a6;
  box-shadow: 0 0 0 6px rgba(79,196,166,.13);
  content: "";
}

.lv-cloud-depth {
  position: absolute;
  z-index: 0;
  width: 390px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  filter: blur(22px);
  pointer-events: none;
}

.lv-cloud-depth-a {
  top: 190px;
  left: -170px;
  animation: lv-cloud-depth 15s ease-in-out infinite alternate;
}

.lv-cloud-depth-b {
  top: 350px;
  right: -190px;
  width: 470px;
  animation: lv-cloud-depth 19s ease-in-out infinite alternate-reverse;
}

@keyframes lv-cloud-depth {
  to { transform: translate3d(48px, 18px, 0) scale(1.08); }
}

.lv-cloud-aura {
  position: absolute;
  z-index: 1;
  bottom: 40px;
  left: 50%;
  width: 430px;
  height: 430px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0 14%, rgba(142,211,226,.3) 45%, transparent 72%);
  pointer-events: none;
}

.lv-cloud-character {
  position: absolute;
  z-index: 8;
  bottom: -18px;
  left: 50%;
  width: min(27vw, 340px);
  height: min(68vh, 540px);
  transform: translate3d(calc(-50% + var(--cloud-world-x)), var(--cloud-world-y), 70px) rotate(var(--cloud-world-rotate));
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 28px 34px rgba(31, 64, 95, .2));
  pointer-events: none;
  transition: transform .28s ease-out;
}

.lv-project-clouds {
  position: absolute;
  z-index: 16;
  inset: 0;
  transform: translate3d(calc(var(--cloud-world-x) * -.5), calc(var(--cloud-world-y) * -.35), 0);
  transition: transform .28s ease-out;
}

.lv-project-cloud {
  --cloud-x: 50%;
  --cloud-y: 22%;
  position: absolute;
  top: var(--cloud-y);
  left: var(--cloud-x);
  width: 176px;
  height: 116px;
  padding: 0;
  transform: translate(-50%, -50%) scale(.86);
  border: 0;
  background: transparent;
  color: #12203b;
  cursor: pointer;
  transition:
    top .68s cubic-bezier(.18,.72,.18,1),
    left .68s cubic-bezier(.18,.72,.18,1),
    opacity .36s ease,
    transform .68s cubic-bezier(.18,.72,.18,1),
    filter .35s ease;
}

.lv-project-cloud[data-position="active"] {
  --cloud-x: 50%;
  --cloud-y: 18%;
  z-index: 8;
  transform: translate(-50%, -50%) scale(1.12);
}

.lv-project-cloud[data-position="left"] {
  --cloud-x: 23%;
  --cloud-y: 28%;
  z-index: 5;
  transform: translate(-50%, -50%) scale(.91);
}

.lv-project-cloud[data-position="right"] {
  --cloud-x: 77%;
  --cloud-y: 28%;
  z-index: 5;
  transform: translate(-50%, -50%) scale(.91);
}

.lv-project-cloud[data-position="far-left"] {
  --cloud-x: 8%;
  --cloud-y: 48%;
  z-index: 3;
  transform: translate(-50%, -50%) scale(.72);
  opacity: .72;
}

.lv-project-cloud[data-position="far-right"] {
  --cloud-x: 92%;
  --cloud-y: 48%;
  z-index: 3;
  transform: translate(-50%, -50%) scale(.72);
  opacity: .72;
}

.lv-project-cloud:hover,
.lv-project-cloud:focus-visible {
  filter: drop-shadow(0 16px 22px rgba(66, 126, 151, .2));
}

.lv-project-cloud:focus-visible {
  outline: 2px solid #48bcd5;
  outline-offset: 5px;
  border-radius: 44%;
}

.lv-project-cloud-shape {
  position: absolute;
  z-index: -1;
  inset: 15px 5px 18px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 48% 52% 46% 54% / 55% 48% 52% 45%;
  background:
    radial-gradient(circle at 31% 34%, #fff 0 23%, transparent 24%),
    radial-gradient(circle at 58% 28%, rgba(255,255,255,.98) 0 29%, transparent 30%),
    radial-gradient(circle at 74% 55%, rgba(255,255,255,.94) 0 29%, transparent 30%),
    linear-gradient(150deg, rgba(255,255,255,.94), rgba(214,237,243,.88));
  box-shadow:
    0 18px 30px rgba(69, 127, 151, .14),
    inset 0 -10px 18px rgba(134, 196, 210, .12);
  animation: lv-project-cloud-breathe 5.2s ease-in-out infinite alternate;
}

.lv-project-cloud:nth-child(3n + 2) .lv-project-cloud-shape {
  animation-delay: -1.8s;
}

.lv-project-cloud:nth-child(3n) .lv-project-cloud-shape {
  animation-delay: -3.4s;
}

@keyframes lv-project-cloud-breathe {
  to { transform: translateY(-7px) scale(1.035) rotate(.8deg); }
}

.lv-project-cloud-image {
  position: absolute;
  z-index: 1;
  top: 25px;
  left: 50%;
  width: 58px;
  height: 46px;
  overflow: hidden;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 14px;
  background: #dceaf0;
  box-shadow: 0 8px 18px rgba(44, 91, 116, .16);
}

.lv-project-cloud-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lv-project-cloud-number {
  position: absolute;
  z-index: 2;
  top: 17px;
  right: 15px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #12203b;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
}

.lv-project-cloud > strong {
  position: absolute;
  z-index: 2;
  right: 15px;
  bottom: 19px;
  left: 15px;
  overflow: hidden;
  font-size: .72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lv-project-cloud > small {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 17px;
  color: #4c778e;
  font-size: 7px;
  font-weight: 900;
}

.lv-project-cloud-particles {
  position: absolute;
  z-index: 4;
  inset: 50%;
  pointer-events: none;
}

.lv-project-cloud-particles i {
  --burst-x: 0px;
  --burst-y: 0px;
  position: absolute;
  width: 20px;
  height: 11px;
  opacity: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
}

.lv-project-cloud-particles i:nth-child(1) { --burst-x: -92px; --burst-y: -30px; }
.lv-project-cloud-particles i:nth-child(2) { --burst-x: -70px; --burst-y: 47px; }
.lv-project-cloud-particles i:nth-child(3) { --burst-x: -12px; --burst-y: -70px; }
.lv-project-cloud-particles i:nth-child(4) { --burst-x: 82px; --burst-y: -38px; }
.lv-project-cloud-particles i:nth-child(5) { --burst-x: 92px; --burst-y: 38px; }
.lv-project-cloud-particles i:nth-child(6) { --burst-x: 18px; --burst-y: 72px; }

.lv-project-cloud.is-bursting .lv-project-cloud-shape {
  animation: lv-cloud-open .82s cubic-bezier(.16,.75,.18,1);
}

.lv-project-cloud.is-bursting .lv-project-cloud-particles i {
  animation: lv-cloud-particle .78s cubic-bezier(.15,.72,.18,1) forwards;
}

.lv-project-cloud.is-bursting .lv-project-cloud-particles i:nth-child(even) {
  animation-delay: 35ms;
}

@keyframes lv-cloud-open {
  0% { transform: scale(1); opacity: 1; }
  42% { transform: scale(1.16); opacity: .58; filter: brightness(1.14); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes lv-cloud-particle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  28% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1.4); }
}

.lv-cloud-card {
  position: absolute;
  z-index: 25;
  bottom: 86px;
  left: 28px;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  width: min(420px, calc(50% - 54px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 24px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 22px 58px rgba(38, 77, 108, .16);
}

[dir="ltr"] .lv-cloud-card {
  right: 28px;
  left: auto;
}

.lv-cloud-card.is-changing {
  animation: lv-cloud-card-change .4s cubic-bezier(.2,.72,.2,1) both;
}

@keyframes lv-cloud-card-change {
  from { opacity: .2; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.lv-cloud-card-visual {
  min-height: 100%;
  background: #d8e8ee;
}

.lv-cloud-card-visual img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.lv-cloud-card-copy {
  padding: 17px 18px 16px;
}

.lv-cloud-card-meta {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  color: #6c7b90;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lv-cloud-card h3 {
  margin: 10px 0 6px;
  color: #12203b;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.1;
}

.lv-cloud-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #5f6d80;
  font-size: .72rem;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lv-cloud-card-role {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(57, 87, 116, .1);
}

.lv-cloud-card-role small,
.lv-cloud-card-role strong {
  display: block;
}

.lv-cloud-card-role small {
  color: #df6e8f;
  font-size: 8px;
  font-weight: 900;
}

.lv-cloud-card-role strong {
  margin-top: 3px;
  color: #34485e;
  font-size: .67rem;
  line-height: 1.45;
}

.lv-cloud-card button {
  margin-top: 11px;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  background: #12203b;
  color: #fff;
  font: inherit;
  font-size: .68rem;
  font-weight: 850;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.lv-cloud-card button:hover {
  transform: translateY(-1px);
  background: #1b5971;
}

.lv-cloud-controls {
  position: absolute;
  z-index: 26;
  right: 50%;
  bottom: 30px;
  display: flex;
  gap: 10px;
  align-items: center;
  transform: translateX(50%);
}

.lv-cloud-controls button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(43, 80, 111, .16);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #12203b;
  cursor: pointer;
}

.lv-cloud-controls span {
  min-width: 58px;
  color: #52667d;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.lv-cloud-rail {
  position: absolute;
  z-index: 24;
  right: 28px;
  bottom: 24px;
  display: flex;
  gap: 7px;
  width: min(38%, 470px);
  overflow-x: auto;
  padding: 5px 3px 8px;
  scrollbar-color: rgba(63, 137, 160, .58) transparent;
  scrollbar-width: thin;
}

[dir="ltr"] .lv-cloud-rail {
  right: auto;
  left: 28px;
}

.lv-cloud-rail button {
  flex: 0 0 112px;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid rgba(44, 85, 115, .13);
  border-radius: 13px;
  background: rgba(255,255,255,.7);
  color: #44576d;
  text-align: start;
  cursor: pointer;
}

.lv-cloud-rail button[aria-pressed="true"] {
  border-color: rgba(61, 177, 202, .58);
  background: #fff;
  color: #12203b;
  box-shadow: 0 8px 22px rgba(40, 87, 117, .12);
}

.lv-cloud-rail span,
.lv-cloud-rail strong {
  display: block;
}

.lv-cloud-rail span {
  color: #dc6c8d;
  font-size: 8px;
  font-weight: 900;
}

.lv-cloud-rail strong {
  overflow: hidden;
  margin-top: 4px;
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1050px) {
  .lv-mode-switch {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lv-mode-copy {
    padding-inline: 4px;
  }

  .lv-cloud-stage {
    min-height: 700px;
  }

  .lv-cloud-character {
    width: 300px;
  }

  .lv-cloud-card {
    width: min(390px, calc(55% - 38px));
  }

  .lv-cloud-rail {
    width: 36%;
  }
}

@media (max-width: 880px) {
  .lv-mode-switch {
    width: calc(100% - 18px);
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 19px;
  }

  .lv-mode-copy {
    padding: 2px 5px;
  }

  .lv-mode-options {
    gap: 5px;
    padding: 4px;
  }

  .lv-mode-options button {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    min-height: 56px;
    padding: 7px;
  }

  .lv-mode-icon {
    width: 34px;
    height: 34px;
  }

  .lv-mode-options button strong {
    font-size: .74rem;
  }

  .lv-mode-options button small {
    font-size: .58rem;
  }

  .lv-cloud-intro {
    grid-template-columns: 1fr;
    gap: 8px;
    width: calc(100% - 26px);
    margin: 18px auto 12px;
  }

  .lv-cloud-intro h3 {
    font-size: clamp(1.8rem, 8.8vw, 2.7rem);
  }

  .lv-cloud-intro > span {
    font-size: .78rem;
    line-height: 1.6;
  }

  .lv-cloud-stage {
    min-height: 620px;
    border-radius: 28px;
  }

  .lv-cloud-topline {
    top: 16px;
    right: 16px;
    left: 16px;
    font-size: 8px;
  }

  .lv-project-cloud {
    width: 132px;
    height: 92px;
  }

  .lv-project-cloud[data-position="active"] {
    --cloud-y: 16%;
    transform: translate(-50%, -50%) scale(1.02);
  }

  .lv-project-cloud[data-position="left"] {
    --cloud-x: 17%;
    --cloud-y: 31%;
    transform: translate(-50%, -50%) scale(.72);
  }

  .lv-project-cloud[data-position="right"] {
    --cloud-x: 83%;
    --cloud-y: 31%;
    transform: translate(-50%, -50%) scale(.72);
  }

  .lv-project-cloud[data-position="far-left"],
  .lv-project-cloud[data-position="far-right"] {
    display: none !important;
  }

  .lv-project-cloud-image {
    top: 20px;
    width: 45px;
    height: 35px;
  }

  .lv-project-cloud-number {
    top: 14px;
    right: 9px;
    width: 21px;
    height: 21px;
  }

  .lv-project-cloud > strong {
    right: 9px;
    bottom: 15px;
    left: 9px;
    font-size: .59rem;
  }

  .lv-project-cloud > small {
    top: 15px;
    left: 10px;
    font-size: 6px;
  }

  .lv-cloud-character {
    top: 112px;
    bottom: auto;
    width: 220px;
    height: 310px;
  }

  .lv-cloud-aura {
    top: 92px;
    bottom: auto;
    width: 330px;
    height: 330px;
  }

  .lv-cloud-card,
  [dir="ltr"] .lv-cloud-card {
    right: 12px;
    bottom: 72px;
    left: 12px;
    grid-template-columns: 86px minmax(0, 1fr);
    width: auto;
    border-radius: 19px;
  }

  .lv-cloud-card-visual img {
    min-height: 176px;
  }

  .lv-cloud-card-copy {
    padding: 12px;
  }

  .lv-cloud-card h3 {
    margin-top: 7px;
    font-size: 1.15rem;
  }

  .lv-cloud-card p {
    font-size: .66rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
  }

  .lv-cloud-card-role strong {
    font-size: .61rem;
  }

  .lv-cloud-card button {
    margin-top: 8px;
    padding: 8px 11px;
  }

  .lv-cloud-controls {
    bottom: 20px;
  }

  .lv-cloud-rail {
    display: none;
  }
}

@media (max-width: 520px) {
  .lv-mode-options button small {
    display: none;
  }

  .lv-mode-options button {
    min-height: 48px;
  }

  .lv-cloud-stage {
    min-height: 590px;
  }

  .lv-cloud-topline span:last-child {
    display: none;
  }

  .lv-cloud-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .lv-cloud-card-visual img {
    min-height: 170px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-world.is-switching-view [data-mode-panel],
  .lv-cloud-depth,
  .lv-project-cloud-shape,
  .lv-project-cloud.is-bursting .lv-project-cloud-shape,
  .lv-project-cloud.is-bursting .lv-project-cloud-particles i,
  .lv-cloud-card.is-changing {
    animation: none !important;
  }

  .lv-project-cloud,
  .lv-cloud-character,
  .lv-project-clouds {
    transition-duration: .01ms !important;
  }
}

/* Restore the original weather-driven cloud journey.
   The simplified experimental cloud stage stays retired. */
.lv-original-work.lv-legacy-cloud-visible {
  display: block !important;
}

.lv-world[data-project-view="cloud"] {
  padding-bottom: 12px;
}

.lv-world[data-project-view="cloud"] > .lv-intro,
.lv-world[data-project-view="cloud"] > .lv-format-filters,
.lv-world[data-project-view="cloud"] > .lv-cloud-view {
  display: none !important;
}

.lv-world[data-project-view="cloud"] .lv-mode-switch {
  margin-bottom: 0;
}

.lv-original-work.lv-legacy-cloud-visible {
  position: relative;
  z-index: 1;
  width: min(100% - 36px, 1520px);
  margin-inline: auto;
}

@media (max-width: 880px) {
  .lv-world[data-project-view="cloud"] {
    padding-top: 28px;
    padding-bottom: 0;
  }

  .lv-original-work.lv-legacy-cloud-visible {
    width: min(100% - 20px, 1520px);
  }
}

/* Unified 18-project weather journey */
.lv-original-work,
.lv-original-work.lv-legacy-cloud-visible {
  display: none !important;
}

.lv-world[data-project-view="cloud"] {
  padding-bottom: 34px;
}

.lv-world[data-project-view="cloud"] > .lv-intro,
.lv-world[data-project-view="cloud"] > .lv-format-filters {
  display: none !important;
}

.lv-world[data-project-view="cloud"] > .lv-cloud-view {
  display: block !important;
}

.lv-world[data-project-view="cloud"] .lv-mode-switch {
  margin-bottom: 18px;
}

.lv-cloud-stage {
  --journey-accent: #ff6fba;
  --journey-accent-2: #71e7f2;
  --journey-sky-1: #191749;
  --journey-sky-2: #81376f;
  --journey-cloud-1: #ffd5ef;
  --journey-cloud-2: #82e7f1;
  min-height: min(760px, 82svh);
  border-color: color-mix(in srgb, var(--journey-accent-2) 36%, transparent);
  background:
    radial-gradient(circle at 52% 34%, color-mix(in srgb, var(--journey-accent-2) 28%, transparent), transparent 28%),
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--journey-accent) 25%, transparent), transparent 27%),
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--journey-accent-2) 20%, transparent), transparent 25%),
    linear-gradient(145deg, var(--journey-sky-1), var(--journey-sky-2));
  box-shadow:
    0 34px 95px color-mix(in srgb, var(--journey-sky-1) 26%, transparent),
    inset 0 1px rgba(255,255,255,.16);
  transition: background .85s ease, border-color .85s ease, box-shadow .85s ease;
}

.lv-cloud-stage::before {
  z-index: 0;
  opacity: .48;
  background:
    radial-gradient(circle at 17% 31%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 21%, var(--journey-accent-2) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 61%, var(--journey-accent) 0 1px, transparent 2px);
  background-size: 110px 110px, 170px 170px, 215px 215px;
  mix-blend-mode: screen;
}

.lv-cloud-stage::after {
  z-index: 5;
  bottom: -145px;
  height: 260px;
  opacity: .42;
  background:
    radial-gradient(ellipse at 10% 50%, var(--journey-cloud-1) 0 21%, transparent 52%),
    radial-gradient(ellipse at 38% 62%, var(--journey-cloud-2) 0 28%, transparent 60%),
    radial-gradient(ellipse at 71% 56%, var(--journey-cloud-1) 0 28%, transparent 60%),
    radial-gradient(ellipse at 95% 48%, var(--journey-cloud-2) 0 20%, transparent 52%);
  filter: blur(19px);
  transition: background .85s ease;
}

.lv-cloud-character {
  display: none;
}

.lv-cloud-depth {
  z-index: 2;
  opacity: .24;
  background: color-mix(in srgb, var(--journey-cloud-1) 76%, transparent);
  filter: blur(34px);
}

.lv-cloud-aura {
  z-index: 2;
  bottom: 10%;
  width: min(52vw, 620px);
  height: min(52vw, 620px);
  opacity: .55;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--journey-accent-2) 34%, white) 0 5%,
    color-mix(in srgb, var(--journey-accent) 24%, transparent) 34%,
    transparent 70%
  );
  filter: blur(12px);
  transition: background .85s ease;
}

.lv-cloud-topline {
  z-index: 40;
  color: rgba(255,255,255,.7);
}

.lv-cloud-live::before {
  background: var(--journey-accent-2);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--journey-accent-2) 16%, transparent);
}

.lv-cloud-weather {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lv-weather-glow,
.lv-weather-horizon,
.lv-weather-bands,
.lv-weather-bolts,
.lv-weather-particles {
  position: absolute;
  inset: 0;
}

.lv-weather-glow {
  opacity: .64;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--journey-accent-2) 32%, transparent), transparent 24%),
    radial-gradient(circle at 20% 70%, color-mix(in srgb, var(--journey-accent) 24%, transparent), transparent 30%);
  filter: blur(18px);
  animation: lv-weather-glow 7s ease-in-out infinite alternate;
}

@keyframes lv-weather-glow {
  to { opacity: .88; transform: scale(1.08) translate3d(2%, -1%, 0); }
}

.lv-weather-horizon {
  top: 56%;
  height: 1px;
  opacity: .48;
  background: linear-gradient(90deg, transparent, var(--journey-accent-2), var(--journey-accent), transparent);
  box-shadow: 0 0 30px 5px color-mix(in srgb, var(--journey-accent-2) 24%, transparent);
}

.lv-weather-particles i {
  position: absolute;
  top: -12%;
  left: var(--particle-x);
  display: block;
  width: 4px;
  height: 14px;
  opacity: .72;
  border-radius: 999px;
  background: var(--journey-accent-2);
  box-shadow: 0 0 12px color-mix(in srgb, var(--journey-accent-2) 55%, transparent);
  animation: lv-weather-fall 4.4s linear infinite;
  animation-delay: var(--particle-delay);
}

.lv-weather-particles i:nth-child(3n + 1) {
  background: var(--journey-accent);
}

.lv-weather-particles i:nth-child(4n) {
  width: 8px;
  height: 8px;
}

@keyframes lv-weather-fall {
  from { transform: translate3d(0, -8vh, 0) rotate(10deg); }
  to { transform: translate3d(34px, 98vh, 0) rotate(250deg); }
}

.lv-weather-bands {
  display: none;
  opacity: .48;
  filter: blur(18px);
}

.lv-weather-bands i {
  position: absolute;
  top: 9%;
  left: -12%;
  width: 125%;
  height: 28%;
  transform: rotate(-8deg);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--journey-accent-2), var(--journey-accent), transparent);
  animation: lv-weather-band 8s ease-in-out infinite alternate;
}

.lv-weather-bands i:nth-child(2) {
  top: 26%;
  opacity: .52;
  transform: rotate(8deg);
  animation-delay: -3s;
}

.lv-weather-bands i:nth-child(3) {
  top: 43%;
  opacity: .34;
  animation-delay: -6s;
}

@keyframes lv-weather-band {
  to { transform: translate3d(8%, 4%, 0) rotate(4deg) scaleY(1.18); }
}

.lv-weather-bolts {
  display: none;
}

.lv-weather-bolts i {
  position: absolute;
  top: 8%;
  left: 28%;
  width: 3px;
  height: 32%;
  opacity: 0;
  transform: rotate(19deg);
  background: linear-gradient(var(--journey-accent-2), transparent);
  filter: drop-shadow(0 0 11px white);
  clip-path: polygon(45% 0, 100% 0, 62% 45%, 100% 45%, 0 100%, 33% 56%, 0 56%);
  animation: lv-weather-bolt 4.8s steps(1) infinite;
}

.lv-weather-bolts i:nth-child(2) {
  left: 67%;
  height: 23%;
  animation-delay: -1.6s;
}

.lv-weather-bolts i:nth-child(3) {
  left: 82%;
  height: 18%;
  animation-delay: -3.2s;
}

@keyframes lv-weather-bolt {
  0%, 88%, 100% { opacity: 0; }
  90%, 93% { opacity: .9; }
  91%, 96% { opacity: .18; }
}

.lv-cloud-stage[data-weather="aurora"] .lv-weather-bands,
.lv-cloud-stage[data-weather="thread-wind"] .lv-weather-bands {
  display: block;
}

.lv-cloud-stage[data-weather="aurora"] .lv-weather-particles i {
  width: 3px;
  height: 3px;
  animation-duration: 7s;
}

.lv-cloud-stage[data-weather="digital-snow"] .lv-weather-particles i {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  animation-duration: 5.8s;
}

.lv-cloud-stage[data-weather="spring-rain"] .lv-weather-particles i {
  width: 2px;
  height: 24px;
  opacity: .58;
  animation-duration: 2.9s;
}

.lv-cloud-stage[data-weather="letter-rain"] .lv-weather-particles i {
  width: auto;
  height: auto;
  background: transparent;
  color: var(--journey-accent-2);
  font: 800 16px/1 serif;
  box-shadow: none;
}

.lv-cloud-stage[data-weather="letter-rain"] .lv-weather-particles i::before {
  content: "ح";
}

.lv-cloud-stage[data-weather="letter-rain"] .lv-weather-particles i:nth-child(3n + 1)::before {
  content: "ع";
}

.lv-cloud-stage[data-weather="letter-rain"] .lv-weather-particles i:nth-child(3n + 2)::before {
  content: "م";
}

.lv-cloud-stage[data-weather="revealing-fog"] .lv-weather-particles i {
  width: 150px;
  height: 42px;
  opacity: .14;
  border-radius: 50%;
  background: white;
  filter: blur(15px);
  animation-duration: 10s;
}

.lv-cloud-stage[data-weather="star-storm"] .lv-weather-particles i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation-duration: 3.8s;
}

.lv-cloud-stage[data-weather="pattern-dust"] .lv-weather-particles i,
.lv-cloud-stage[data-weather="sandstorm"] .lv-weather-particles i {
  width: 11px;
  height: 3px;
  opacity: .48;
  animation-duration: 4.8s;
}

.lv-cloud-stage[data-weather="thread-wind"] .lv-weather-particles i {
  top: var(--particle-x);
  left: -12%;
  width: 55px;
  height: 2px;
  animation-name: lv-weather-wind;
  animation-duration: 5s;
}

@keyframes lv-weather-wind {
  from { transform: translate3d(-8vw, 0, 0) rotate(-5deg); }
  to { transform: translate3d(120vw, 24px, 0) rotate(6deg); }
}

.lv-cloud-stage[data-weather="lightning"] .lv-weather-bolts {
  display: block;
}

.lv-cloud-stage[data-weather="lightning"] .lv-weather-particles i {
  width: 2px;
  height: 22px;
  animation-duration: 2.4s;
}

.lv-cloud-weather-copy {
  position: absolute;
  z-index: 32;
  top: 72px;
  right: 32px;
  display: grid;
  max-width: 245px;
  color: white;
  text-align: right;
}

[dir="ltr"] .lv-cloud-weather-copy {
  right: auto;
  left: 32px;
  text-align: left;
}

.lv-cloud-weather-copy small {
  color: var(--journey-accent-2);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}

.lv-cloud-weather-copy strong {
  margin-top: 5px;
  font-size: clamp(1.35rem, 2.4vw, 2.2rem);
  line-height: 1;
}

.lv-cloud-weather-copy span {
  margin-top: 8px;
  color: rgba(255,255,255,.68);
  font-size: .7rem;
  line-height: 1.55;
}

.lv-project-clouds {
  z-index: 16;
}

.lv-project-cloud {
  width: 190px;
  height: 130px;
  color: white;
}

.lv-project-cloud[data-position="active"] {
  --cloud-y: 35%;
  width: 330px;
  height: 225px;
  transform: translate(-50%, -50%) scale(1);
  filter: drop-shadow(0 28px 48px color-mix(in srgb, var(--journey-accent) 30%, transparent));
}

.lv-project-cloud[data-position="left"] {
  --cloud-x: 18%;
  --cloud-y: 40%;
  transform: translate(-50%, -50%) scale(.82);
  opacity: .55;
}

.lv-project-cloud[data-position="right"] {
  --cloud-x: 82%;
  --cloud-y: 40%;
  transform: translate(-50%, -50%) scale(.82);
  opacity: .55;
}

.lv-project-cloud[data-position="far-left"],
.lv-project-cloud[data-position="far-right"] {
  opacity: .18;
  filter: blur(2px);
}

.lv-project-cloud-shape {
  inset: 10px 3px 14px;
  border-color: rgba(255,255,255,.45);
  background:
    radial-gradient(circle at 27% 36%, color-mix(in srgb, var(--journey-cloud-1) 84%, white) 0 24%, transparent 25%),
    radial-gradient(circle at 55% 28%, color-mix(in srgb, var(--journey-cloud-2) 84%, white) 0 31%, transparent 32%),
    radial-gradient(circle at 76% 57%, color-mix(in srgb, var(--journey-cloud-1) 72%, white) 0 31%, transparent 32%),
    linear-gradient(145deg, var(--journey-cloud-1), var(--journey-cloud-2));
  box-shadow:
    0 24px 45px color-mix(in srgb, var(--journey-sky-1) 44%, transparent),
    inset 0 1px 22px rgba(255,255,255,.52),
    inset 0 -20px 30px color-mix(in srgb, var(--journey-accent) 18%, transparent);
  transition: background .85s ease, box-shadow .85s ease;
}

.lv-project-cloud[data-position="active"] .lv-project-cloud-image {
  top: 42px;
  width: 126px;
  height: 94px;
  border-width: 3px;
  border-radius: 25px;
  box-shadow:
    0 16px 38px rgba(14,24,54,.28),
    0 0 0 7px rgba(255,255,255,.13);
}

.lv-project-cloud[data-position="active"] .lv-project-cloud-number {
  top: 30px;
  right: 34px;
  width: 34px;
  height: 34px;
  background: rgba(12,24,54,.78);
  backdrop-filter: blur(10px);
}

.lv-project-cloud[data-position="active"] > strong {
  right: 34px;
  bottom: 38px;
  left: 34px;
  font-size: 1rem;
  text-shadow: 0 1px 10px rgba(15,25,55,.28);
}

.lv-project-cloud[data-position="active"] > small {
  top: 35px;
  left: 36px;
  color: rgba(18,32,59,.74);
  font-size: 8px;
}

.lv-project-cloud[data-position="active"]::after {
  position: absolute;
  right: 50%;
  bottom: -28px;
  transform: translateX(50%);
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  content: "اضغط لفتح التفاصيل";
}

[lang="en"] .lv-project-cloud[data-position="active"]::after {
  content: "Open full project details";
}

.lv-cloud-card {
  bottom: 78px;
  left: 26px;
  grid-template-columns: 112px minmax(0, 1fr);
  width: min(440px, calc(50% - 42px));
  border-color: color-mix(in srgb, var(--journey-accent-2) 32%, rgba(255,255,255,.28));
  background: rgba(10,19,45,.73);
  box-shadow: 0 24px 64px rgba(4,10,28,.34);
  backdrop-filter: blur(22px) saturate(1.2);
}

[dir="ltr"] .lv-cloud-card {
  right: 26px;
}

.lv-cloud-card-visual img {
  min-height: 218px;
}

.lv-cloud-card-meta {
  color: rgba(255,255,255,.58);
}

.lv-cloud-card h3 {
  color: white;
}

.lv-cloud-card p,
.lv-cloud-card-role strong {
  color: rgba(255,255,255,.68);
}

.lv-cloud-card-role {
  border-color: rgba(255,255,255,.12);
}

.lv-cloud-card-role small {
  color: var(--journey-accent);
}

.lv-cloud-card button {
  background: linear-gradient(135deg, var(--journey-accent), var(--journey-accent-2));
  color: #10203b;
  box-shadow: 0 10px 25px color-mix(in srgb, var(--journey-accent) 24%, transparent);
}

.lv-cloud-card button:hover {
  background: linear-gradient(135deg, var(--journey-accent-2), var(--journey-accent));
}

.lv-cloud-controls button {
  border-color: rgba(255,255,255,.24);
  background: rgba(8,18,43,.62);
  color: white;
  backdrop-filter: blur(12px);
}

.lv-cloud-controls span {
  color: rgba(255,255,255,.75);
}

.lv-cloud-counter {
  direction: ltr;
  unicode-bidi: isolate;
}

.lv-cloud-rail {
  border-radius: 16px;
  background: rgba(7,16,39,.34);
  backdrop-filter: blur(14px);
}

.lv-cloud-rail button {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.66);
}

.lv-cloud-rail button[aria-pressed="true"] {
  border-color: var(--journey-accent-2);
  background: color-mix(in srgb, var(--journey-accent) 20%, rgba(12,24,54,.78));
  color: white;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--journey-accent) 24%, transparent);
}

.lv-cloud-rail span {
  color: var(--journey-accent-2);
}

@media (max-width: 1050px) {
  .lv-project-cloud[data-position="active"] {
    width: 290px;
    height: 205px;
  }

  .lv-cloud-card {
    width: min(400px, calc(52% - 32px));
  }
}

@media (max-width: 880px) {
  .lv-world[data-project-view="cloud"] {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .lv-cloud-intro {
    margin-top: 12px;
  }

  .lv-cloud-intro h3 {
    font-size: clamp(1.65rem, 8vw, 2.45rem);
  }

  .lv-cloud-intro > span {
    max-width: 36rem;
  }

  .lv-cloud-stage {
    min-height: 660px;
    border-radius: 28px;
  }

  .lv-cloud-weather-copy {
    top: 50px;
    right: 16px;
    max-width: 175px;
  }

  [dir="ltr"] .lv-cloud-weather-copy {
    right: auto;
    left: 16px;
  }

  .lv-cloud-weather-copy strong {
    font-size: 1.15rem;
  }

  .lv-cloud-weather-copy span {
    display: none;
  }

  .lv-project-cloud[data-position="active"] {
    --cloud-y: 27%;
    width: 260px;
    height: 185px;
  }

  .lv-project-cloud[data-position="left"] {
    --cloud-x: 5%;
    --cloud-y: 34%;
    transform: translate(-50%, -50%) scale(.55);
    opacity: .28;
  }

  .lv-project-cloud[data-position="right"] {
    --cloud-x: 95%;
    --cloud-y: 34%;
    transform: translate(-50%, -50%) scale(.55);
    opacity: .28;
  }

  .lv-project-cloud[data-position="active"] .lv-project-cloud-image {
    top: 34px;
    width: 102px;
    height: 76px;
    border-radius: 19px;
  }

  .lv-project-cloud[data-position="active"] .lv-project-cloud-number {
    top: 25px;
    right: 25px;
    width: 29px;
    height: 29px;
  }

  .lv-project-cloud[data-position="active"] > small {
    top: 29px;
    left: 27px;
  }

  .lv-project-cloud[data-position="active"] > strong {
    right: 26px;
    bottom: 31px;
    left: 26px;
    font-size: .82rem;
  }

  .lv-project-cloud[data-position="active"]::after {
    bottom: -22px;
    font-size: 8px;
  }

  .lv-cloud-card,
  [dir="ltr"] .lv-cloud-card {
    right: 12px;
    bottom: 72px;
    left: 12px;
    grid-template-columns: 86px minmax(0, 1fr);
    width: auto;
  }

  .lv-cloud-card-visual img {
    min-height: 205px;
  }

  .lv-cloud-card p {
    -webkit-line-clamp: 2;
  }

  .lv-cloud-controls {
    bottom: 18px;
  }
}

@media (max-width: 520px) {
  .lv-cloud-stage {
    min-height: 640px;
  }

  .lv-cloud-card {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .lv-cloud-card-visual img {
    min-height: 200px;
  }

  .lv-cloud-card-role strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-weather-glow,
  .lv-weather-particles i,
  .lv-weather-bands i,
  .lv-weather-bolts i {
    animation: none !important;
  }
}

/* Generated identity cloud hero: real copy stays HTML and the artwork mirrors with language direction. */
.hero[data-identity-visual="ready"] {
  --hero-art-direction: 1;
  background: #dceff4 !important;
  isolation: isolate;
}

html[dir="rtl"] .hero[data-identity-visual="ready"] {
  --hero-art-direction: -1;
}

.hero[data-identity-visual="ready"] .hero-scene {
  display: none !important;
}

.hero-identity-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-identity-picture {
  position: absolute;
  inset: -2.4%;
  display: block;
  transform:
    translate3d(var(--hero-scene-x), var(--hero-scene-y), 0)
    scale(1.035);
  transition: transform .58s cubic-bezier(.2,.72,.2,1);
  will-change: auto;
}

.hero-identity-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scaleX(var(--hero-art-direction));
  filter: saturate(.95) contrast(.98);
  transition: filter .55s ease, transform .8s cubic-bezier(.18,.74,.18,1);
}

.hero-identity-scrim,
.hero-identity-glint,
.hero-identity-dust {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.hero-identity-scrim {
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(229,244,247,.97) 0%,
      rgba(233,244,246,.9) 27%,
      rgba(237,244,245,.62) 43%,
      rgba(243,242,241,.12) 66%,
      transparent 79%
    ),
    linear-gradient(0deg, rgba(246,241,238,.3), transparent 42%);
}

html[dir="rtl"] .hero-identity-scrim {
  transform: scaleX(-1);
}

.hero-identity-glint {
  z-index: 2;
  opacity: 0;
  background: radial-gradient(
    circle 180px at var(--hero-pointer-x) var(--hero-pointer-y),
    rgba(255,255,255,.46),
    rgba(142,225,241,.17) 32%,
    transparent 72%
  );
  mix-blend-mode: soft-light;
  transition: opacity .32s ease;
}

.hero-identity-dust {
  z-index: 2;
  opacity: .25;
  background:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 18%, rgba(255,255,255,.8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 84% 62%, rgba(246,181,208,.62) 0 1px, transparent 2px);
  background-size: 122px 122px, 178px 178px, 216px 216px;
  transform: translate3d(var(--hero-cloud-x-far), var(--hero-cloud-y-far), 0);
}

.hero[data-identity-visual="ready"] .hero-cloud-interaction {
  z-index: 3;
}

.hero[data-identity-visual="ready"] .hero-copy,
.hero[data-identity-visual="ready"] .hero-status,
.hero[data-identity-visual="ready"] .hero-coordinate,
.hero[data-identity-visual="ready"] .hero-hint {
  z-index: 5;
}

.hero[data-identity-visual="ready"].is-cloud-interacting .hero-identity-picture {
  will-change: transform;
}

.hero[data-identity-visual="ready"].is-cloud-interacting .hero-identity-glint {
  opacity: .76;
}

.hero[data-identity-visual="ready"].is-cloud-pressed .hero-identity-image {
  filter: saturate(1.04) contrast(1.01) brightness(1.045);
}

.hero[data-identity-visual="ready"].is-cloud-dispersing .hero-identity-picture {
  transform:
    translate3d(var(--hero-scene-x), calc(var(--hero-scene-y) - 5px), 0)
    scale(1.052);
}

@media (min-width: 881px) {
  .hero[data-identity-visual="ready"] {
    min-height: clamp(610px, 84svh, 720px) !important;
  }

  .hero[data-identity-visual="ready"] .hero-copy {
    width: min(51vw, 650px) !important;
    max-width: min(51vw, 650px) !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
  }
}

@media (max-width: 880px) {
  .hero[data-identity-visual="ready"] {
    min-height: clamp(760px, 96svh, 880px) !important;
    padding-top: 82px !important;
    align-items: flex-end !important;
  }

  .hero-identity-picture {
    inset: 0;
    transform: translate3d(var(--hero-scene-x), var(--hero-scene-y), 0) scale(1.015);
  }

  .hero-identity-image {
    object-position: center 30%;
  }

  .hero-identity-scrim {
    background:
      linear-gradient(
        0deg,
        rgba(239,244,245,.99) 0%,
        rgba(239,244,245,.97) 38%,
        rgba(239,244,245,.69) 57%,
        rgba(239,244,245,.08) 76%,
        transparent 88%
      ),
      linear-gradient(90deg, rgba(226,244,248,.2), rgba(251,236,232,.2));
    transform: none !important;
  }

  .hero[data-identity-visual="ready"] .hero-copy {
    width: 100% !important;
    max-width: 38rem !important;
    margin-top: clamp(285px, 39svh, 350px) !important;
  }

  .hero[data-identity-visual="ready"] .hero-copy h1 {
    font-size: clamp(2.45rem, 10vw, 3.35rem) !important;
  }

  .hero[data-identity-visual="ready"] .hero-intro {
    max-width: 38ch !important;
    font-size: .91rem !important;
    line-height: 1.65 !important;
  }

  .hero[data-identity-visual="ready"] .hero-signature {
    font-size: .7rem !important;
    line-height: 1.55 !important;
  }

  .hero[data-identity-visual="ready"] .hero-actions {
    margin-top: 14px !important;
  }

  .hero[data-identity-visual="ready"] .hero-status {
    top: 72px !important;
  }
}

@media (max-width: 520px) {
  .hero[data-identity-visual="ready"] {
    min-height: 820px !important;
  }

  .hero[data-identity-visual="ready"] .hero-copy {
    margin-top: 315px !important;
  }

  .hero[data-identity-visual="ready"] .hero-copy .eyebrow {
    font-size: .58rem !important;
  }

  .hero[data-identity-visual="ready"] .hero-copy h1 {
    font-size: clamp(2.25rem, 10.7vw, 3rem) !important;
  }

  .hero[data-identity-visual="ready"] .hero-actions {
    gap: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-identity-picture,
  .hero-identity-image,
  .hero-identity-glint,
  .hero-identity-dust {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }

  html[dir="rtl"] .hero-identity-image {
    transform: scaleX(-1) !important;
  }

  .hero-identity-glint {
    display: none !important;
  }
}

/* One focused project story, with a distinct atmosphere for every project. */
.lv-stage {
  --story-accent: #ff6fba;
  --story-accent-2: #71e7f2;
  --story-sky-1: #101d3b;
  --story-sky-2: #6c456d;
  --story-cloud-1: #ffd4ed;
  --story-cloud-2: #8ce7f1;
  background:
    radial-gradient(circle at 72% 38%, color-mix(in srgb, var(--story-accent-2) 29%, transparent), transparent 27%),
    radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--story-accent) 25%, transparent), transparent 25%),
    linear-gradient(128deg, var(--story-sky-1), var(--story-sky-2));
  border-color: color-mix(in srgb, var(--story-accent-2) 38%, transparent);
  box-shadow:
    0 45px 120px color-mix(in srgb, var(--story-sky-1) 24%, transparent),
    inset 0 1px rgba(255,255,255,.12);
  transition: border-color .7s ease, box-shadow .7s ease, background-color .7s ease;
}

.lv-story-atmosphere {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.lv-story-weather-glow {
  position: absolute;
  inset: -20%;
  opacity: .66;
  background:
    radial-gradient(circle at 28% 34%, color-mix(in srgb, var(--story-cloud-1) 40%, transparent), transparent 27%),
    radial-gradient(circle at 77% 50%, color-mix(in srgb, var(--story-cloud-2) 30%, transparent), transparent 28%);
  transform: translate3d(0,0,0);
  transition: opacity .65s ease, background .75s ease;
}

.lv-story-weather-particles,
.lv-story-weather-bands,
.lv-story-weather-bolts {
  position: absolute;
  inset: 0;
}

.lv-story-weather-particles i {
  position: absolute;
  top: -12%;
  left: var(--particle-x);
  width: 5px;
  height: 28px;
  border-radius: 999px;
  opacity: .48;
  background: linear-gradient(to bottom, transparent, var(--story-accent-2));
  transform: translate3d(0,-12vh,0) rotate(8deg);
  animation: lv-story-rain 5.8s linear infinite;
  animation-delay: var(--particle-delay);
  animation-play-state: paused;
}

.lv-world.is-in-view .lv-story-weather-particles i,
.lv-world.is-in-view .lv-story-weather-bands i,
.lv-world.is-in-view .lv-story-weather-bolts i {
  animation-play-state: running;
}

@keyframes lv-story-rain {
  0% { transform: translate3d(0,-14vh,0) rotate(8deg); opacity: 0; }
  12% { opacity: .58; }
  100% { transform: translate3d(5vw,112vh,0) rotate(8deg); opacity: 0; }
}

.lv-stage[data-story-weather="digital-snow"] .lv-story-weather-particles i,
.lv-stage[data-story-weather="star-storm"] .lv-story-weather-particles i {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--story-cloud-1);
  box-shadow: 0 0 12px var(--story-accent-2);
  animation-name: lv-story-snow;
  animation-duration: 7.5s;
}

@keyframes lv-story-snow {
  0% { transform: translate3d(0,-10vh,0) rotate(0); opacity: 0; }
  16% { opacity: .72; }
  55% { transform: translate3d(22px,50vh,0) rotate(150deg); }
  100% { transform: translate3d(-15px,108vh,0) rotate(300deg); opacity: 0; }
}

.lv-stage[data-story-weather="candy-rain"] .lv-story-weather-particles i {
  width: 7px;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--story-accent), var(--story-accent-2));
  box-shadow: 0 0 14px color-mix(in srgb, var(--story-accent) 55%, transparent);
}

.lv-stage[data-story-weather="letter-rain"] .lv-story-weather-particles i {
  width: 2px;
  height: 22px;
  border-radius: 0;
  background: var(--story-cloud-1);
  box-shadow: 6px 7px 0 -1px var(--story-accent-2);
}

.lv-stage[data-story-weather="pattern-dust"] .lv-story-weather-particles i,
.lv-stage[data-story-weather="sandstorm"] .lv-story-weather-particles i {
  top: var(--particle-x);
  left: -8%;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--story-cloud-1));
  animation-name: lv-story-wind;
  animation-duration: 6.7s;
}

.lv-stage[data-story-weather="thread-wind"] .lv-story-weather-particles i {
  top: var(--particle-x);
  left: -18%;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--story-accent-2), transparent);
  animation-name: lv-story-wind;
  animation-duration: 8.2s;
}

@keyframes lv-story-wind {
  0% { transform: translate3d(-10vw,0,0); opacity: 0; }
  18% { opacity: .5; }
  100% { transform: translate3d(125vw,-18px,0); opacity: 0; }
}

.lv-stage[data-story-weather="revealing-fog"] .lv-story-weather-particles i {
  top: calc(var(--particle-x) * .65);
  left: -20%;
  width: 180px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--story-cloud-1) 25%, transparent);
  filter: blur(10px);
  animation-name: lv-story-fog;
  animation-duration: 12s;
}

@keyframes lv-story-fog {
  0% { transform: translate3d(-12vw,0,0) scale(.85); opacity: 0; }
  24% { opacity: .35; }
  100% { transform: translate3d(125vw,15px,0) scale(1.25); opacity: 0; }
}

.lv-story-weather-bands {
  display: none;
  opacity: .58;
  transform: rotate(-8deg) scale(1.15);
}

.lv-stage[data-story-weather="aurora"] .lv-story-weather-bands {
  display: block;
}

.lv-story-weather-bands i {
  position: absolute;
  top: 18%;
  right: -10%;
  width: 82%;
  height: 12%;
  border-radius: 50%;
  border-top: 2px solid var(--story-accent-2);
  filter: drop-shadow(0 0 16px var(--story-accent));
  animation: lv-story-aurora 7s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.lv-story-weather-bands i:nth-child(2) { top: 28%; width: 65%; animation-delay: -2s; }
.lv-story-weather-bands i:nth-child(3) { top: 38%; width: 92%; animation-delay: -4s; }

@keyframes lv-story-aurora {
  from { transform: translate3d(-2%,0,0) scaleY(.85); opacity: .22; }
  to { transform: translate3d(4%,18px,0) scaleY(1.15); opacity: .78; }
}

.lv-story-weather-bolts {
  display: none;
}

.lv-stage[data-story-weather="lightning"] .lv-story-weather-bolts {
  display: block;
}

.lv-story-weather-bolts i {
  position: absolute;
  top: 8%;
  left: 18%;
  width: 2px;
  height: 28%;
  opacity: 0;
  background: linear-gradient(var(--story-accent-2), transparent);
  transform: skewX(-24deg);
  box-shadow: 0 0 18px var(--story-accent-2);
  animation: lv-story-lightning 5.4s steps(1,end) infinite;
  animation-play-state: paused;
}

.lv-story-weather-bolts i:nth-child(2) { left: 45%; height: 20%; animation-delay: -2.1s; }
.lv-story-weather-bolts i:nth-child(3) { left: 72%; height: 34%; animation-delay: -3.8s; }

@keyframes lv-story-lightning {
  0%, 88%, 92%, 100% { opacity: 0; }
  89%, 91% { opacity: .82; }
}

@media (max-width: 880px) {
  .lv-story-atmosphere {
    opacity: .72;
  }

  .lv-story-weather-particles i:nth-child(n+13) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-story-weather-particles i,
  .lv-story-weather-bands i,
  .lv-story-weather-bolts i {
    animation: none !important;
  }

  .lv-story-weather-particles i {
    opacity: .18;
    transform: none;
  }
}


/* Mobile: keep project details anchored to the viewport. */
@media (max-width: 880px) {
  .lv-world {
    animation: none !important;
    transform: none !important;
  }
}


/* Mobile: keep the close control below the fixed navigation. */
@media (max-width: 880px) {
  .lv-drawer { top: 80px !important; }
}


/* Mobile: separate the availability status from the hero headline. */
@media (max-width: 720px) {
  .hero-status {
    top: 88px !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: calc(100% - 44px) !important;
  }
}