.movva-gallery {
  --movva-orange: #ff3600;
  --movva-green: #78a57b;
  --movva-ink: #101511;
  --movva-cream: #f4efe7;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    #0c110d;
  background-size: 46px 46px;
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.movva-gallery,
.movva-gallery * {
  box-sizing: border-box;
}

.movva-gallery::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--movva-orange) 0 66%, var(--movva-green) 66% 81%, var(--movva-orange) 81%);
}

.movva-gallery-glow {
  position: absolute;
  z-index: -1;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  filter: blur(55px);
  opacity: 0.14;
  pointer-events: none;
}

.movva-gallery-glow--orange {
  top: -20vw;
  right: -22vw;
  background: radial-gradient(circle, var(--movva-orange), transparent 67%);
}

.movva-gallery-glow--green {
  bottom: 4%;
  left: -30vw;
  background: radial-gradient(circle, var(--movva-green), transparent 67%);
}

.movva-gallery-inner {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(105px, 13vh, 170px) clamp(28px, 5.8vw, 92px) clamp(78px, 10vh, 125px);
}

.movva-gallery-header {
  max-width: 1300px;
  margin-bottom: clamp(46px, 7vh, 82px);
}

.movva-gallery-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 31px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.movva-gallery.is-visible .movva-gallery-kicker {
  opacity: 1;
  transform: none;
}

.movva-gallery-kicker span,
.movva-gallery-kicker strong {
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.movva-gallery-kicker span { color: var(--movva-orange); }
.movva-gallery-kicker strong { color: rgba(255, 255, 255, 0.58); }

.movva-gallery-kicker i {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, var(--movva-orange), var(--movva-green));
}

.movva-gallery h2 {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(46px, 6.2vw, 93px);
  font-weight: 760;
  line-height: 0.93;
  letter-spacing: -0.068em;
  text-transform: uppercase;
}

.movva-gallery h2 span,
.movva-gallery h2 strong {
  display: block;
  opacity: 0;
  transform: translateY(0.55em);
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.75s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.movva-gallery h2 span {
  color: rgba(255, 255, 255, 0.48);
  font-weight: 420;
}

.movva-gallery h2 strong {
  margin-top: 0.09em;
  color: #fff;
  font-weight: 790;
  transition-delay: 0.13s;
}

.movva-gallery h2 strong::before {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.12em;
  margin-right: 0.18em;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--movva-orange), var(--movva-green));
  vertical-align: 0.16em;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.7s;
}

.movva-gallery.is-visible h2 span,
.movva-gallery.is-visible h2 strong {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
}

.movva-gallery.is-visible h2 strong::before { transform: scaleX(1); }

.movva-gallery-filters {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 0;
  overflow-x: auto;
  padding: 3px 3px 8px;
  scrollbar-width: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease 0.28s, transform 0.65s ease 0.28s;
}

.movva-gallery.has-results .movva-gallery-filters {
  margin-bottom: clamp(30px, 4vw, 48px);
}

.movva-gallery-filters::-webkit-scrollbar { display: none; }

.movva-gallery.is-visible .movva-gallery-filters {
  opacity: 1;
  transform: none;
}

.movva-gallery-filters button {
  flex: 0 0 auto;
  padding: 12px 17px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  font: inherit;
  font-size: 8px;
  font-weight: 820;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.movva-gallery-filters button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.movva-gallery-filters button[aria-pressed="true"] {
  border-color: var(--movva-orange);
  background: var(--movva-orange);
  color: #fff;
}

.movva-gallery-grid {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.5vw, 23px);
  width: 100%;
  height: clamp(410px, 41vw, 575px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 16px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--movva-orange) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
  animation: movva-gallery-results-in 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.movva-work {
  flex: 0 0 clamp(340px, 38vw, 560px);
  min-width: 300px;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(20px, 2vw, 30px);
  background: #171c18;
  opacity: 0;
  transform: translateY(52px);
  scroll-snap-align: start;
  transition: opacity 0.62s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.movva-work:nth-child(2n) { transition-delay: 0.05s; }
.movva-work:nth-child(3n) { transition-delay: 0.1s; }

.movva-work--large {
  flex-basis: clamp(440px, 52vw, 750px);
}

.movva-work--tall {
  flex-basis: clamp(300px, 31vw, 460px);
}

.movva-work--wide {
  flex-basis: clamp(430px, 50vw, 720px);
}

.movva-work.is-visible {
  opacity: 1;
  transform: none;
}

.movva-work[hidden] { display: none !important; }

.movva-gallery-grid[hidden] { display: none !important; }

.movva-work-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: #151a16;
  color: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.movva-work-button > img,
.movva-work-button > video {
  display: block;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  margin: -12px;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) contrast(1.06) brightness(0.84);
  transform: scale(1.015);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
}

.movva-work:nth-child(3) .movva-work-button > img,
.movva-work:nth-child(6) .movva-work-button > img,
.movva-work:nth-child(7) .movva-work-button > img { object-position: center top; }

.movva-work-button:hover > img,
.movva-work-button:hover > video,
.movva-work-button:focus-visible > img,
.movva-work-button:focus-visible > video {
  filter: saturate(1) contrast(1.05) brightness(0.7);
  transform: scale(1.075);
}

.movva-work-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 8, 0.1), transparent 38%),
    linear-gradient(0deg, rgba(7, 11, 8, 0.88), transparent 58%);
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.movva-work-button:hover .movva-work-shade,
.movva-work-button:focus-visible .movva-work-shade { opacity: 0.9; }

.movva-work-number {
  position: absolute;
  top: 21px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(8, 12, 9, 0.16);
  color: #fff;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.1em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.movva-work-copy {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateY(16px);
  opacity: 0;
  transition: opacity 0.38s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.movva-work-button:hover .movva-work-copy,
.movva-work-button:focus-visible .movva-work-copy {
  opacity: 1;
  transform: none;
}

.movva-work-copy small {
  margin-bottom: 9px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 7px;
  font-weight: 820;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.movva-work-copy strong {
  max-width: 88%;
  color: #fff;
  font-size: clamp(24px, 2.7vw, 42px);
  font-weight: 770;
  line-height: 0.98;
  letter-spacing: -0.052em;
  text-transform: uppercase;
}

.movva-work-open {
  position: absolute;
  right: 22px;
  top: 21px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--movva-orange);
  color: #fff;
  opacity: 0;
  transform: scale(0.75) rotate(-8deg);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.movva-work-button:hover .movva-work-open,
.movva-work-button:focus-visible .movva-work-open {
  opacity: 1;
  transform: none;
}

.movva-work-open i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.movva-work-open i::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 1px;
}

.movva-work-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(54px, 5vw, 76px);
  height: clamp(54px, 5vw, 76px);
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  background: rgba(9, 13, 10, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, transform 0.3s ease;
}

.movva-work-play i {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}

.movva-work-button:hover .movva-work-play {
  background: var(--movva-orange);
  transform: translate(-50%, -50%) scale(1.08);
}

.movva-gallery-dialog {
  position: fixed;
  inset: 0;
  width: min(94vw, 1320px);
  max-width: none;
  height: min(88vh, 820px);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: clamp(24px, 2.5vw, 38px);
  background: transparent;
  color: #fff;
}

.movva-gallery-dialog::backdrop {
  background: rgba(5, 8, 6, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.movva-gallery-dialog[open] {
  animation: movva-gallery-dialog-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.movva-gallery-dialog-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.35fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: inherit;
  background: #101511;
  box-shadow: 0 45px 130px rgba(0, 0, 0, 0.62);
}

.movva-gallery-dialog-media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #080b09;
}

.movva-gallery-dialog-media img,
.movva-gallery-dialog-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.movva-gallery-dialog-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(34px, 4.5vw, 66px);
  background:
    radial-gradient(circle at 100% 0, rgba(120, 165, 123, 0.15), transparent 35%),
    #131914;
}

.movva-gallery-dialog-copy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--movva-orange), var(--movva-green), var(--movva-orange));
}

.movva-gallery-dialog-copy small {
  margin-bottom: 15px;
  color: var(--movva-green);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.movva-gallery-dialog-copy h3 {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(34px, 4vw, 61px);
  font-weight: 780;
  line-height: 0.94;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.movva-gallery-dialog-copy p {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.66;
}

.movva-gallery-close {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(12, 17, 13, 0.72);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.25s ease, transform 0.25s ease;
}

.movva-gallery-close:hover {
  background: var(--movva-orange);
  transform: rotate(4deg);
}

.movva-gallery-close i::before,
.movva-gallery-close i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

.movva-gallery-close i::before { transform: translate(-50%, -50%) rotate(45deg); }
.movva-gallery-close i::after { transform: translate(-50%, -50%) rotate(-45deg); }

@keyframes movva-gallery-dialog-in {
  from { opacity: 0; transform: translateY(25px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes movva-gallery-results-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .movva-gallery-grid {
    height: clamp(390px, 58vw, 510px);
  }

  .movva-work,
  .movva-work--large,
  .movva-work--tall,
  .movva-work--wide {
    flex-basis: min(70vw, 570px);
  }

  .movva-work--large,
  .movva-work--wide { flex-basis: min(82vw, 690px); }

  .movva-work--tall { flex-basis: min(54vw, 430px); }

  .movva-gallery-dialog-panel {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr);
  }
}

@media (max-width: 700px) {
  .movva-gallery-inner {
    padding-top: 90px;
    padding-bottom: 82px;
  }

  .movva-gallery h2 {
    font-size: clamp(39px, 10.8vw, 62px);
    line-height: 0.96;
  }

  .movva-gallery h2 strong::before { display: none; }

  .movva-gallery-grid {
    width: calc(100% + 17px);
    height: clamp(360px, 111vw, 480px);
    margin-right: -17px;
    gap: 18px;
    padding-right: 17px;
  }

  .movva-work,
  .movva-work--large,
  .movva-work--tall,
  .movva-work--wide {
    flex: 0 0 min(83vw, 430px);
    min-width: 0;
    height: 100%;
  }

  .movva-work--large,
  .movva-work--wide { flex-basis: min(88vw, 470px); }

  .movva-work--tall { flex-basis: min(76vw, 390px); }

  .movva-work-copy {
    right: 23px;
    bottom: 23px;
    left: 23px;
    opacity: 1;
    transform: none;
  }

  .movva-work-copy strong {
    font-size: clamp(27px, 8vw, 39px);
  }

  .movva-work-open {
    opacity: 1;
    transform: none;
  }

  .movva-work-shade { opacity: 0.76; }

  .movva-gallery-dialog {
    width: calc(100vw - 24px);
    height: min(92vh, 860px);
  }

  .movva-gallery-dialog-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .movva-gallery-dialog-copy {
    min-height: 210px;
    padding: 30px 27px 31px;
  }

  .movva-gallery-dialog-copy::before {
    width: 100%;
    height: 4px;
  }

  .movva-gallery-dialog-copy h3 { font-size: 33px; }
  .movva-gallery-dialog-copy p { margin-top: 15px; }
}

@media (max-width: 480px) {
  .movva-gallery-inner { padding: 78px 17px 94px; }
  .movva-gallery-header { margin-bottom: 40px; }

  .movva-gallery h2 {
    font-size: clamp(36px, 10.7vw, 50px);
    overflow-wrap: anywhere;
  }

  .movva-gallery-filters {
    width: calc(100% + 34px);
    margin-left: -17px;
    padding-right: 17px;
    padding-left: 17px;
  }

  .movva-work { border-radius: 22px; }
  .movva-work-number { top: 17px; left: 17px; }
  .movva-work-open { top: 17px; right: 17px; }
  .movva-gallery-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .movva-gallery *,
  .movva-gallery *::before,
  .movva-gallery *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .movva-gallery-kicker,
  .movva-gallery h2 span,
  .movva-gallery h2 strong,
  .movva-gallery-filters,
  .movva-work {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}