/*Scrollbars*/

.credits::-webkit-scrollbar-thumb,
.project-stills-track::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
.updatelist::-webkit-scrollbar-thumb {
  background: var(--back-dark);
}

.credits::-webkit-scrollbar,
.project-stills-track::-webkit-scrollbar,
main::-webkit-scrollbar,
.updatelist::-webkit-scrollbar {
  width: 8px;
  height: 7px;
}

.credits,
.project-stills-track,
main,
.updatelist {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 191, 94, 0.42) transparent;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

:root {
  --back-dark: #050609;
  --back-light: #101827;
  --text-dark: #93f5ff;
  --text-light: rgba(232, 247, 255, 0.82);
  --text-muted: rgba(218, 229, 238, 0.74);
  --text-head: rgba(255, 255, 255, 0.94);
  --magenta-accent: #d96dff;
  --main-border: rgba(255, 255, 255, 0.2);
  --emph-light: #b9f8ff;
  --emph-dark: #958cff;
  --glass-dark: rgba(9, 14, 22, 0.36);
  --glass-light: rgba(255, 255, 255, 0.12);
  --glass-edge: rgba(255, 255, 255, 0.34);
  --prism-cyan: rgba(119, 244, 255, 0.32);
  --prism-violet: rgba(162, 140, 255, 0.34);
  --prism-rose: rgba(255, 134, 219, 0.28);
  --prism-red: rgba(255, 74, 86, 0.24);
  --prism-orange: rgba(255, 138, 48, 0.34);
  --prism-gold: rgba(255, 229, 145, 0.22);
  --liquid-ink-gradient:
    linear-gradient(112deg, #ff8735 0%, #ffbf5e 16%, #ff6aa8 32%, #c77dff 50%, #73f1ff 68%, #8d72ff 84%, #ff8735 100%);
  --site-background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.78) 7%, transparent 21%, transparent 79%, rgba(0, 0, 0, 0.8) 93%, rgba(0, 0, 0, 0.98) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, transparent 18%, transparent 78%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(104deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.44) 25%, transparent 34%, transparent 62%, rgba(0, 0, 0, 0.4) 70%, transparent 82%),
    linear-gradient(76deg, rgba(0, 0, 0, 0.62) 0%, transparent 15%, transparent 41%, rgba(0, 0, 0, 0.32) 48%, transparent 58%, transparent 100%),
    radial-gradient(circle at 14% 5%, rgba(255, 130, 38, 0.28), transparent 25rem),
    radial-gradient(circle at 76% 9%, rgba(108, 233, 255, 0.22), transparent 28rem),
    radial-gradient(circle at 87% 39%, rgba(255, 74, 164, 0.19), transparent 28rem),
    radial-gradient(circle at 7% 74%, rgba(255, 186, 58, 0.15), transparent 31rem),
    linear-gradient(118deg, rgba(95, 226, 255, 0.16) 0%, transparent 28%, rgba(255, 151, 225, 0.16) 54%, rgba(255, 138, 48, 0.1) 78%, transparent 92%),
    linear-gradient(32deg, transparent 0%, rgba(255, 236, 172, 0.08) 34%, transparent 61%),
    linear-gradient(180deg, #020204 0%, #090e17 48%, #020204 100%);
  --section-bg:
    linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.14) 36%, rgba(255, 255, 255, 0.06) 72%),
    linear-gradient(116deg, var(--prism-cyan), transparent 25%, var(--prism-rose) 44%, var(--prism-orange) 66%, var(--prism-violet) 86%, var(--prism-gold) 100%),
    linear-gradient(rgba(10, 15, 24, 0.24), rgba(10, 15, 24, 0.24)),
    var(--back-dark);
  --section-fade: rgba(5, 6, 9, 0.9);
  --credit-gutter: clamp(2rem, 9vw, 9rem);
  --content-max: 70rem;
  --section-side: max(var(--credit-gutter), calc((100vw - var(--content-max)) / 2));
  --scroll-edge-fade: clamp(0.7rem, 1.75vw, 1.45rem);
  --scroll-edge-clear: clamp(0.08rem, 0.3vw, 0.18rem);
  --scroll-list-inset: calc(var(--scroll-edge-fade) + var(--scroll-edge-clear));
  --hover-liquid-duration: 14s;
  --hover-liquid-svg-duration: 14s;
  --tv-liquid-duration: 9s;
  --tv-liquid-glow-duration: 8s;
  --color-reveal-duration: 5s;
  --hover-liquid-transition:
    color 2.2s ease,
    fill 2.2s ease,
    background-color 2.2s ease,
    background-position 4s ease,
    border-color 2.2s ease,
    box-shadow 2.4s ease,
    filter 2.4s ease,
    opacity 1.8s ease,
    transform 0.8s ease;
  --index-display-font: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

@font-face {
  font-family: "Archivo Black";
  src: url("Fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Patua One";
  src: url("Fonts/PatuaOne-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Rouge Script";
  src: url("Fonts/RougeScript-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kinkie";
  src: url("Fonts/Kinkie-Zpwm.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barrio";
  src: url("Fonts/Barrio-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* {
  transition: 0.2s ease;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

main {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  /*1*rgb(13, 177, 75);*/
}

nav a:hover,
.navbold {
  color: transparent;
  background-image: var(--liquid-ink-gradient);
  background-size: 320% 320%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate;
  text-shadow: none;
}

header h1,
.seemore {
  color: var(--text-head);
  /*1*rgb(153, 212, 191);*/
}

header h3,
main,
.footer,
.credits a,
.contact,
.contact-form a input,
.contact-form a textarea,
.contactPage,
::placeholder {
  color: var(--text-light);
  /*1*rgb(179, 63, 151);*/
}

main,
.contact-form a textarea,
.input {
  background-color: transparent;
}

h1, h2, h3, h4, h5, h6,
p {
  margin-top: 0;
}

/* Icons */

.socials {
  color: rgba(0, 0, 0, 0);
  text-decoration: none;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: clamp(100px, 100%, 300px);
  justify-content: space-evenly;
  margin-inline: auto
}

header .socials {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: auto;
  gap: 0.95rem;
  margin-inline: 0;
}

header .icon {
  height: 1.45rem;
}

.icon {
  height: 32px; /* Sets the height */
  width: auto; /* Allows width to scale proportionally */
  display: block; /* Prevents baseline alignment issues */
  fill: var(--text-light);
  transition: var(--hover-liquid-transition);
}

.instagram-icon {
  transform: scale(1.1);
}

.tube-icon {
  transform: scale(1.2);
}

.linkedin-icon {
  transform: scale(1.17);
  margin-inline: -6px -8px;
}
.icon:hover {
  fill: #ffbf5e;
  animation: liquidGlassSvgFill var(--hover-liquid-duration) ease-in-out infinite alternate;
}

.socials a:hover .icon,
.socials a:focus-visible .icon {
  animation: liquidGlassSvgFill var(--hover-liquid-duration) ease-in-out infinite alternate;
}

.linkedin-icon:hover, .instagram-icon:hover {
  transform: scale(1.5);
}

.tube-icon:hover {
  transform: scale(1.7);
}

.imdb-icon:hover {
  transform: scale(1.2);
}

.icon:active {
  transform: scale(0.9);
}

header .socials {
  align-items: center;
  gap: 0.72rem;
}

header .socials a {
  width: 1.95rem;
  height: 1.95rem;
  display: inline-grid;
  flex: 0 0 1.95rem;
  place-items: center;
  justify-content: center;
  align-items: center;
}

header .icon {
  width: 1.45rem;
  height: 1.45rem;
}

header .tube-icon {
  width: 1.58rem;
  height: 1.4rem;
  transform: scale(1.08);
}

header .instagram-icon {
  width: 1.32rem;
  height: 1.45rem;
  transform: scale(1.08);
}

header .linkedin-icon {
  width: 1.42rem;
  height: 1.42rem;
  margin-inline: 0;
  transform: scale(1.08);
}

header .imdb-icon {
  width: 2.55rem;
  height: 1.43rem;
}

header .socials a[aria-label="IMDb"],
header .socials a[aria-label="IMDB"] {
  width: 2.7rem;
  flex-basis: 2.7rem;
}

.icon path {
  fill: inherit;
}


/*BODY*/

body {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.78) 7%, transparent 21%, transparent 79%, rgba(0, 0, 0, 0.8) 93%, rgba(0, 0, 0, 0.98) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, transparent 18%, transparent 78%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(104deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.44) 25%, transparent 34%, transparent 62%, rgba(0, 0, 0, 0.4) 70%, transparent 82%),
    linear-gradient(76deg, rgba(0, 0, 0, 0.62) 0%, transparent 15%, transparent 41%, rgba(0, 0, 0, 0.32) 48%, transparent 58%, transparent 100%),
    radial-gradient(circle at 14% 5%, rgba(255, 130, 38, 0.28), transparent 25rem),
    radial-gradient(circle at 76% 9%, rgba(108, 233, 255, 0.22), transparent 28rem),
    radial-gradient(circle at 87% 39%, rgba(255, 74, 164, 0.19), transparent 28rem),
    radial-gradient(circle at 7% 74%, rgba(255, 186, 58, 0.15), transparent 31rem),
    linear-gradient(118deg, rgba(95, 226, 255, 0.16) 0%, transparent 28%, rgba(255, 151, 225, 0.16) 54%, rgba(255, 138, 48, 0.1) 78%, transparent 92%),
    linear-gradient(32deg, transparent 0%, rgba(255, 236, 172, 0.08) 34%, transparent 61%),
    linear-gradient(180deg, #020204 0%, #090e17 48%, #020204 100%);
  background-color: var(--back-dark);
  background-attachment: fixed;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  transition:
    background var(--color-reveal-duration) cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color var(--color-reveal-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.site-monochrome {
  background: #000;
  background-color: #000;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -34vmax;
  z-index: 0;
  pointer-events: none;
  will-change: transform, filter;
  transition: opacity var(--color-reveal-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.site-monochrome::before,
body.site-monochrome::after {
  opacity: 0;
}

body.site-monochrome .site-logo,
body.site-monochrome .footer-logo,
body.site-monochrome .section-heading:hover {
  background-image: linear-gradient(112deg, #f4f4f4 0%, #b8b8b8 34%, #ffffff 58%, #9f9f9f 100%);
  filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.14));
}

body.site-monochrome .icon {
  fill: rgba(238, 238, 238, 0.82);
}

body.site-monochrome .read-more,
body.site-monochrome .contact,
body.site-monochrome footer {
  color: rgba(238, 238, 238, 0.88);
}

body::before {
  background:
    linear-gradient(115deg, transparent 10%, rgba(255, 130, 48, 0.42) 19%, transparent 30%),
    linear-gradient(68deg, transparent 18%, rgba(115, 241, 255, 0.34) 32%, transparent 47%),
    linear-gradient(142deg, transparent 22%, rgba(255, 82, 172, 0.34) 42%, transparent 58%),
    linear-gradient(36deg, transparent 36%, rgba(166, 132, 255, 0.32) 54%, transparent 70%),
    linear-gradient(100deg, transparent 52%, rgba(255, 224, 120, 0.22) 68%, transparent 82%);
  filter: blur(42px) saturate(145%);
  mix-blend-mode: screen;
  opacity: 0.54;
  animation: liquidBarsDrift 34s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(ellipse at 18% 34%, rgba(255, 255, 255, 0.16), transparent 25%),
    linear-gradient(74deg, transparent 16%, rgba(110, 232, 255, 0.2) 30%, rgba(255, 148, 60, 0.18) 46%, transparent 62%),
    linear-gradient(128deg, transparent 28%, rgba(255, 113, 220, 0.2) 50%, rgba(151, 133, 255, 0.18) 66%, transparent 78%);
  filter: blur(56px) saturate(160%);
  mix-blend-mode: lighten;
  opacity: 0.44;
  animation: liquidBarsCross 46s ease-in-out infinite alternate;
}

@keyframes liquidBarsDrift {
  0% {
    transform: translate3d(-8%, -5%, 0) rotate(-7deg) scale(1.06);
  }
  50% {
    transform: translate3d(6%, 4%, 0) rotate(5deg) scale(1.12);
  }
  100% {
    transform: translate3d(12%, -2%, 0) rotate(-2deg) scale(1.08);
  }
}

@keyframes liquidBarsCross {
  0% {
    transform: translate3d(9%, 3%, 0) rotate(8deg) scale(1.08);
  }
  50% {
    transform: translate3d(-5%, -6%, 0) rotate(-4deg) scale(1.15);
  }
  100% {
    transform: translate3d(-11%, 4%, 0) rotate(5deg) scale(1.1);
  }
}

@keyframes tvLiquidGlassInk {
  0% {
    background-position: 0% 50%, 18% 12%, 85% 80%, 0% 0%;
  }
  45% {
    background-position: 72% 45%, 48% 82%, 34% 18%, 100% 25%;
  }
  100% {
    background-position: 100% 55%, 92% 28%, 8% 72%, 35% 100%;
  }
}

@keyframes liquidGlassTextShift {
  0% {
    background-position: 0% 50%;
    filter: saturate(1.06) hue-rotate(0deg);
  }
  22% {
    background-position: 26% 46%;
    filter: saturate(1.14) hue-rotate(10deg);
  }
  45% {
    background-position: 52% 56%;
    filter: saturate(1.2) hue-rotate(26deg);
  }
  72% {
    background-position: 78% 44%;
    filter: saturate(1.18) hue-rotate(40deg);
  }
  100% {
    background-position: 100% 50%;
    filter: saturate(1.12) hue-rotate(54deg);
  }
}

@keyframes liquidGlassSurfaceCycle {
  0% {
    background-position: 0% 50%, 20% 12%, 80% 84%;
    filter: saturate(1.08) hue-rotate(0deg);
  }
  28% {
    background-position: 34% 44%, 62% 76%, 20% 24%;
    filter: saturate(1.2) hue-rotate(14deg);
  }
  55% {
    background-position: 64% 58%, 90% 26%, 48% 68%;
    filter: saturate(1.18) hue-rotate(34deg);
  }
  100% {
    background-position: 100% 50%, 12% 80%, 86% 18%;
    filter: saturate(1.14) hue-rotate(56deg);
  }
}

@keyframes liquidGlassForegroundCycle {
  0% {
    color: #ffbf5e;
    fill: #ffbf5e;
    border-color: rgba(255, 191, 94, 0.94);
    text-shadow:
      0 0 0.3rem rgba(255, 191, 94, 0.56),
      0 0 0.9rem rgba(255, 135, 53, 0.28);
    filter: drop-shadow(0 0 0.24rem rgba(255, 191, 94, 0.3));
  }
  24% {
    color: #ff8735;
    fill: #ff8735;
    border-color: rgba(255, 135, 53, 0.94);
    text-shadow:
      0 0 0.32rem rgba(255, 135, 53, 0.52),
      0 0 0.9rem rgba(255, 106, 168, 0.2);
    filter: drop-shadow(0 0 0.24rem rgba(255, 135, 53, 0.28));
  }
  46% {
    color: #ff6aa8;
    fill: #ff6aa8;
    border-color: rgba(255, 106, 168, 0.94);
    text-shadow:
      0 0 0.34rem rgba(255, 106, 168, 0.52),
      0 0 0.95rem rgba(199, 125, 255, 0.24);
    filter: drop-shadow(0 0 0.25rem rgba(255, 106, 168, 0.28));
  }
  68% {
    color: #c77dff;
    fill: #c77dff;
    border-color: rgba(199, 125, 255, 0.94);
    text-shadow:
      0 0 0.34rem rgba(199, 125, 255, 0.5),
      0 0 0.95rem rgba(115, 241, 255, 0.2);
    filter: drop-shadow(0 0 0.25rem rgba(199, 125, 255, 0.26));
  }
  100% {
    color: #73f1ff;
    fill: #73f1ff;
    border-color: rgba(115, 241, 255, 0.94);
    text-shadow:
      0 0 0.34rem rgba(115, 241, 255, 0.54),
      0 0 1rem rgba(141, 114, 255, 0.24);
    filter: drop-shadow(0 0 0.26rem rgba(115, 241, 255, 0.3));
  }
}

@keyframes liquidGlassStrokeGlow {
  0% {
    border-color: rgba(255, 191, 94, 0.9);
    box-shadow:
      0 0 0.42rem rgba(255, 191, 94, 0.32),
      0 0 1.1rem rgba(255, 135, 53, 0.18);
    text-shadow:
      0 0 0.3rem rgba(255, 191, 94, 0.52),
      0 0 0.85rem rgba(255, 135, 53, 0.26);
    filter: drop-shadow(0 0 0.22rem rgba(255, 191, 94, 0.28));
  }
  32% {
    border-color: rgba(255, 106, 168, 0.92);
    box-shadow:
      0 0 0.48rem rgba(255, 106, 168, 0.32),
      0 0 1.2rem rgba(199, 125, 255, 0.18);
    text-shadow:
      0 0 0.32rem rgba(255, 106, 168, 0.5),
      0 0 0.9rem rgba(199, 125, 255, 0.24);
    filter: drop-shadow(0 0 0.24rem rgba(255, 106, 168, 0.26));
  }
  50% {
    border-color: rgba(115, 241, 255, 0.9);
    box-shadow:
      0 0 0.5rem rgba(115, 241, 255, 0.34),
      0 0 1.25rem rgba(141, 114, 255, 0.2);
    text-shadow:
      0 0 0.32rem rgba(115, 241, 255, 0.52),
      0 0 0.95rem rgba(141, 114, 255, 0.26);
    filter: drop-shadow(0 0 0.26rem rgba(115, 241, 255, 0.28));
  }
  68% {
    border-color: rgba(199, 125, 255, 0.9);
    box-shadow:
      0 0 0.48rem rgba(199, 125, 255, 0.3),
      0 0 1.2rem rgba(115, 241, 255, 0.16);
    text-shadow:
      0 0 0.32rem rgba(199, 125, 255, 0.46),
      0 0 0.9rem rgba(115, 241, 255, 0.2);
    filter: drop-shadow(0 0 0.24rem rgba(199, 125, 255, 0.24));
  }
  100% {
    border-color: rgba(141, 114, 255, 0.9);
    box-shadow:
      0 0 0.5rem rgba(141, 114, 255, 0.32),
      0 0 1.25rem rgba(115, 241, 255, 0.18);
    text-shadow:
      0 0 0.32rem rgba(141, 114, 255, 0.5),
      0 0 0.95rem rgba(115, 241, 255, 0.24);
    filter: drop-shadow(0 0 0.26rem rgba(141, 114, 255, 0.28));
  }
}

@keyframes liquidGlassSvgFill {
  0% {
    fill: #ffbf5e;
    filter: drop-shadow(0 0 0.28rem rgba(255, 191, 94, 0.38));
  }
  20% {
    fill: #ff8735;
    filter: drop-shadow(0 0 0.28rem rgba(255, 135, 53, 0.36));
  }
  40% {
    fill: #ff6aa8;
    filter: drop-shadow(0 0 0.28rem rgba(255, 106, 168, 0.36));
  }
  60% {
    fill: #c77dff;
    filter: drop-shadow(0 0 0.28rem rgba(199, 125, 255, 0.34));
  }
  80% {
    fill: #73f1ff;
    filter: drop-shadow(0 0 0.3rem rgba(115, 241, 255, 0.38));
  }
  100% {
    fill: #8d72ff;
    filter: drop-shadow(0 0 0.3rem rgba(141, 114, 255, 0.34));
  }
}

@keyframes liquidGlassHotspotWash {
  0%, 100% {
    fill: rgba(255, 191, 94, 0.16);
    stroke: rgba(255, 191, 94, 0.58);
    filter:
      drop-shadow(0 0 7px rgba(255, 191, 94, 0.28))
      drop-shadow(0 0 12px rgba(255, 135, 53, 0.18));
  }
  32% {
    fill: rgba(255, 106, 168, 0.16);
    stroke: rgba(255, 106, 168, 0.58);
    filter:
      drop-shadow(0 0 7px rgba(255, 106, 168, 0.28))
      drop-shadow(0 0 12px rgba(199, 125, 255, 0.18));
  }
  50% {
    fill: rgba(115, 241, 255, 0.14);
    stroke: rgba(115, 241, 255, 0.58);
    filter:
      drop-shadow(0 0 7px rgba(115, 241, 255, 0.28))
      drop-shadow(0 0 12px rgba(141, 114, 255, 0.18));
  }
  68% {
    fill: rgba(199, 125, 255, 0.15);
    stroke: rgba(199, 125, 255, 0.58);
    filter:
      drop-shadow(0 0 7px rgba(199, 125, 255, 0.26))
      drop-shadow(0 0 12px rgba(115, 241, 255, 0.16));
  }
}

@keyframes posterLiquidShadow {
  0%, 100% {
    box-shadow:
      9px 5px 8px rgba(0, 0, 0, 0.46),
      0 0 0 1px rgba(255, 191, 94, 0.28),
      6px 2px 0.42rem rgba(255, 135, 53, 0.18);
  }
  32% {
    box-shadow:
      10px 5px 8px rgba(0, 0, 0, 0.46),
      0 0 0 1px rgba(255, 106, 168, 0.28),
      6px 2px 0.45rem rgba(255, 106, 168, 0.18);
  }
  50% {
    box-shadow:
      10px 5px 9px rgba(0, 0, 0, 0.48),
      0 0 0 1px rgba(119, 244, 255, 0.28),
      6px 2px 0.48rem rgba(119, 244, 255, 0.18);
  }
  68% {
    box-shadow:
      10px 5px 9px rgba(0, 0, 0, 0.48),
      0 0 0 1px rgba(141, 114, 255, 0.28),
      6px 2px 0.48rem rgba(141, 114, 255, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition:
      filter 700ms ease,
      -webkit-filter 700ms ease;
  }

  body::before,
  body::after,
  .site-logo,
  .project-title-logo,
  .liquid-text-hover:hover,
  .section-heading:hover,
  .socials a:hover .icon,
  .submit:hover {
    animation: none;
  }
}

.container {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: auto;
  margin-right: auto;
}

.container::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--color-reveal-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.site-monochrome .container::before {
  opacity: 1;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: min-content min-content;
  align-items: start;
  gap: 0 2rem;
  text-align: left;
  line-height: 1;
  padding: 1.2rem var(--section-side) 0;
  border-bottom: 0;
  background: transparent;
}

.header-title-stack {
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: start;
  align-self: start;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: clamp(0.02rem, 0.18vw, 0.08rem);
}

.header-title-stack h1,
.header-title-stack h3 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
}

.header-title-stack h3 {
  margin: 0;
}

header h1 {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  white-space: nowrap;
  margin: 0;
  text-decoration: none;
  text-shadow: 0 0 18px rgba(131, 243, 255, 0.22);
  font-size: clamp(0.84rem, 1.55vw, 1.18rem);
  line-height: 0.82;
  /* JS will set font-size dynamically between these bounds */
}

.site-logo {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: center;
  align-self: center;
  color: transparent;
  background-image: var(--liquid-ink-gradient);
  background-size: 320% 320%;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 900;
  line-height: 0.85;
  text-shadow: none;
  filter:
    drop-shadow(0 0 0.5rem rgba(199, 125, 255, 0.26))
    drop-shadow(0 0 1.15rem rgba(255, 106, 168, 0.16));
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate;
  transition: var(--hover-liquid-transition);
}

header h3 {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  font-size: clamp(0.58rem, 1vw, 0.72rem);
  padding-bottom: 0;
  text-align: left;
  margin: clamp(0.72rem, 1.35vw, 0.98rem) 0 0;
  font-weight: 500;
  line-height: 0.95;
  color: var(--text-light);
  max-width: 24rem;
}

h1, h2, h3 {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}

/* Buttons */
.read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.48rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.48rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(4, 4, 10, 0.56);
  color: var(--text-head);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0.7rem 1.5rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px) saturate(130%);
  transition: var(--hover-liquid-transition);
}

.read-more:hover,
.read-more:focus-visible {
  color: var(--text-head) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025)),
    var(--liquid-ink-gradient);
  background-size: 320% 320%;
  border-color: rgba(255, 106, 168, 0.44);
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0.7rem rgba(199, 125, 255, 0.24),
    0 0 1.25rem rgba(255, 106, 168, 0.16);
}

.read-more:focus-visible {
  outline: 2px solid rgba(255, 106, 168, 0.5);
  outline-offset: 0.22rem;
}

/* Contact*/

.contact {
  width: 100%;
  margin: 0 auto; /* centers the section */
  gap: 0.35rem; /* optional: adds spacing between the two items */
  justify-content: center;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.contact.credit-row {
  min-height: auto;
  padding-block: clamp(0.32rem, 0.85vw, 0.62rem) clamp(0.45rem, 1vw, 0.75rem);
}

.contact-wrap {
  width: min(62%, 540px);
  display: flex;
  flex-direction: row;
  margin: 0.08rem auto 0.1rem;
  text-align: center;
  align-items: center;
  gap: 0.35rem;
}

.contact-heading {
  text-align: center;
  margin: 0 auto;
  font-weight: bolder;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 40%;
  min-width: 0;
  gap: 0.12rem;
  margin-block: auto;
}

.contact-heading h2 {
  font-size: clamp(0.86rem, 1.45vw, 1.08rem);
  margin: 0;
}

.contact-heading h3 {
  font-size: clamp(0.68rem, 1.1vw, 0.82rem);
  margin: 0;
}

.contact-heading p {
  width: 100%;
  font-size: clamp(0.66rem, 1vw, 0.78rem);
  text-align: center;
  margin-block: 0.08rem;
  overflow-wrap: anywhere;
}

.contact-heading p strong a {
  text-decoration: none;
  color: inherit;
}

.contact-heading .socials {
  width: fit-content;
  max-width: 100%;
  gap: 0.58rem;
  justify-content: center;
  margin-top: 0.18rem;
}

.contact-heading > .socials {
  display: none !important;
}

.contact-heading .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-heading .icon {
  height: 0.72rem;
}

.contact-heading .linkedin-icon {
  margin-inline: -3px -4px;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, calc((230px - 0.2em) / 2)));
  grid-template-rows: auto auto 2fr auto;
  justify-content: center;
  gap: 0.2em;
  flex: 1 1 60%;
  min-width: 0;
  width: 100%;
  padding: 0.22em;
}

.contact-form input[type="text"],
.contact-form input[type="email"] {
  font-size: 0.78rem;
  font-family: inherit;
  padding-left: 0.34rem;
  width: 100%;
  height: 1.62em;
  box-sizing: border-box;
}

.contact-form input[type="email"] {
  grid-column: 1 / span 2;
}

.contact-form textarea {
  grid-column: 1 / span 2;
  height: 2.65rem;
  font-size: 0.7rem;
  font-family: inherit;
  padding: 0.28rem 0 0 0.34rem;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
}

.credit-row:nth-child(even) .contact-form input[type="text"],
.credit-row:nth-child(even) .contact-form input[type="email"],
.credit-row:nth-child(even) .contact-form textarea {
  color: var(--text-light);
  border: 1px solid var(--glass-edge);
}

.credit-row:nth-child(odd) .contact-form input[type="text"],
.credit-row:nth-child(odd) .contact-form input[type="email"],
.credit-row:nth-child(odd) .contact-form textarea {
  color: var(--text-light);
  border: 1px solid var(--glass-edge);
}

.credit-row:nth-child(even) .submit,
.credit-row:nth-child(odd) .submit {
  color: var(--back-dark);
  background-color: transparent;
  border: 0;
}

.credit-row:nth-child(even) .submit:hover,
.credit-row:nth-child(odd) .submit:hover {
  color: var(--back-dark);
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate;
  box-shadow:
    0 0 0.6rem rgba(255, 191, 94, 0.24),
    0 0 1rem rgba(255, 106, 168, 0.18);
}

.credit-row:nth-child(even) .icon {
  fill: var(--text-light);
}

.credit-row:nth-child(odd) .icon {
  fill: var(--text-light);
}

.credit-row:nth-child(even) .icon:hover {
  animation: liquidGlassSvgFill var(--hover-liquid-duration) ease-in-out infinite alternate;
} 

.credit-row:nth-child(odd) .icon:hover {
  animation: liquidGlassSvgFill var(--hover-liquid-duration) ease-in-out infinite alternate;
} 

.submit {
  position: relative;
  isolation: isolate;
  grid-column: 1 / span 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.16rem;
  border: 0;
  border-radius: 0.32rem;
  background: transparent;
  box-sizing: border-box;
  font-size: 0.62rem;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  box-shadow: none;
  transition:
    color 1.15s ease,
    box-shadow 1.35s ease,
    filter 1.35s ease,
    font-size 0.55s ease,
    transform 0.55s ease;
}

.submit::before,
.submit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.submit::before {
  background: var(--emph-light);
  opacity: 1;
  transition: opacity 1.35s ease;
}

.submit::after {
  background-image: var(--liquid-ink-gradient);
  background-size: 320% 320%;
  background-position: 0% 50%;
  opacity: 0;
  transition: opacity 1.35s ease;
}

.submit:hover {
  font-size: 0.66rem;
  border: 0;
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate;
}

.submit:hover::after,
.submit:focus-visible::after {
  opacity: 1;
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate;
}

.submit:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0.4rem rgba(255, 191, 94, 0.24),
    0 0 0.95rem rgba(255, 106, 168, 0.18);
}

.submit:active {
  font-size: 0.64rem;
  border: 0;
  transform: translateY(1px);
}

.socials a:hover .icon,
.socials a:focus-visible .icon,
.socials a:hover .icon path,
.socials a:focus-visible .icon path {
  fill: #ffbf5e;
  color: #ffbf5e;
  animation: liquidGlassSvgFill var(--hover-liquid-svg-duration) ease-in-out infinite alternate;
}

.submit:hover::after,
.submit:focus-visible::after,
.read-more:hover,
.read-more:focus-visible {
  background-size: 320% 320%, 180% 180%, 190% 190%;
  animation: liquidGlassSurfaceCycle var(--hover-liquid-duration) ease-in-out infinite alternate;
}

.submit:hover,
.submit:focus-visible {
  box-shadow:
    0 0 0.56rem rgba(255, 191, 94, 0.24),
    0 0 1rem rgba(255, 106, 168, 0.18);
}

/* Footer */

footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  text-align: center;
  margin-top: 0.65rem;
  padding-block: 0.65rem 1rem;
}

.footer-logo {
  display: block;
  grid-column: auto;
  grid-row: auto;
  justify-self: center;
  align-self: center;
  width: max-content;
  margin: 0 auto 0.18rem;
  font-size: clamp(0.82rem, 1.6vw, 1.15rem);
  line-height: 0.85;
}

/* Modals */

.modal .close {
  position: sticky;
  top: 0;
  margin-left: auto;
  z-index: 10;
  padding: 0.5rem 1rem;
  font-size: 2rem;
  cursor: pointer;
  color: var(--text-head);
  background: none;
  border: none;
}

.modal-header {
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
}

.modal-header .close {
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  color: var(--text-head);
  border-radius: 0 0 0 10px;
  position: absolute;
}

.modal-body {
  display: flex;
  flex-direction: row;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-section {
  flex: 1;
  padding: 1em;
}

.modal-body .modal-section {
  flex: 2;
}

/* Modal styling */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: var(--back-dark);
  border: 5px solid var(--emph-dark);
  border-radius: 20px;
  padding: 1rem;
  font-family: "Patua One";
  color: var(--text-light);
  position: relative;
  width: clamp(400px, 100%, 850px);
  display: flex;
  flex-direction: row;
  overflow-y: auto;
  position: relative;
}

.modal-title {
  font-size: 2.4rem; /* Adjust as needed */
  margin: 0;
  line-height: 4rem;
  white-space: nowrap;
}

.modal-year {
  font-size: 1.5rem;
}

.modal-director {
  font-size: 1.5rem;
}

.modal-description {
  font-size: 1.3rem;
  line-height: 1.6;
}

.modal-content p {
  margin: 0.25em 0;
}

.modal-content img {
  max-width: 100%;
  max-height: 550px;
  margin-top: 1rem;
  border-radius: 20px;
}

.modal-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Webkit (Chrome, Safari, Edge) */
.modal-content::-webkit-scrollbar {
  width: 0.5rem;
}

.modal-content::-webkit-scrollbar-track {
  background: var(--scroll-track, var(--emph-dark));
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb, var(--text-dark));
  border-radius: 20px;
  border: 2px solid transparent; /* Creates padding effect */
}

.modal-description p {
  margin: 0 0 0.4rem 0 !important; /* top, right, bottom, left */
  padding: 0;
  line-height: 1.3;
}

/* Project Modal */

.project-modal-body {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.project-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 1em;
  padding: 2em;
  overflow-y: auto;
  text-align: left;
}

.project-modal-grid .grid-left {
  grid-column: 1 / span 2;
  grid-row: 1 / span 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left !important;
  align-items: flex-start;
}

.project-modal-grid .grid-right {
  grid-column: 3;
  grid-row: 1 / span 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-modal-grid img {
  max-height: 100%;
  max-width: 100%;
  min-width: 20rem;
  object-fit: contain;
}

.project-modal-grid .modal-iframe-container {
  margin-top: 1em;
}

.project-modal-grid .modal-links {
  display: flex;
  gap: 1em;
  margin-top: 1em;
}

.project-modal-flex {
  display: flex;
  flex-direction: row;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

#photo-gallery img {
  border: 0;
}

/* Lightbox */

#lightbox {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  left: 0;
  touch-action: pan-y;
}

#lightbox.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#lightbox img {
  max-width: 90%;
  max-height: 80%;
  border: 0;
  border-bottom-width: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow:
    8px 8px 0 rgba(0, 0, 0, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.42);
}

#lightbox .lightbox-image {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 240ms ease;
  will-change: opacity;
}

#lightbox .lightbox-image.is-next,
#lightbox .lightbox-image.is-exiting {
  opacity: 0;
  pointer-events: none;
}

#lightbox .lightbox-arrow {
  appearance: none;
  position: absolute;
  top: 50%;
  z-index: 1001;
  width: clamp(2.15rem, 5vw, 3.6rem);
  height: clamp(3rem, 7vw, 5.25rem);
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.45rem, 6.5vw, 4.8rem);
  font-weight: 300;
  line-height: 0.75;
  text-align: center;
  text-shadow: 0 0 0.75rem rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
  transition:
    color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

#lightbox .lightbox-arrow-previous {
  left: max(0.2rem, env(safe-area-inset-left));
}

#lightbox .lightbox-arrow-next {
  right: max(0.2rem, env(safe-area-inset-right));
}

#lightbox .lightbox-arrow:hover,
#lightbox .lightbox-arrow:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(215, 184, 255, 0.72);
  opacity: 1;
  transform: translateY(-50%) scale(1.02);
}

#lightbox .lightbox-arrow:active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 204, 82, 0.76);
  transform: translateY(-50%) scale(0.98);
}

@media (max-width: 800px) {
  #lightbox {
    --lightbox-mobile-arrow-lane: clamp(2.05rem, 11vw, 2.65rem);
  }

  #lightbox img,
  #lightbox .lightbox-image {
    max-width: calc(100vw - (var(--lightbox-mobile-arrow-lane) * 2)) !important;
    max-height: 84vh !important;
  }

  #lightbox .lightbox-arrow {
    width: var(--lightbox-mobile-arrow-lane);
    height: min(42vh, 15rem);
    font-size: clamp(2rem, 11vw, 3rem);
  }

  #lightbox .lightbox-arrow-previous {
    left: 0 !important;
  }

  #lightbox .lightbox-arrow-next {
    right: 0 !important;
  }
}

/* Project Pages */

header h1 a {
  color: inherit;
  text-decoration: none;
}

.project-page header .socials a {
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.project-page header .project-title-logo {
  grid-row: 2;
  align-self: start;
  max-width: min(56rem, 66vw);
  text-align: center;
  white-space: nowrap;
  text-wrap: balance;
  color: var(--project-title-color, var(--text-head));
  -webkit-text-fill-color: var(--project-title-color, var(--text-head));
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  font-family: var(--project-title-font, "Roboto", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(3rem, 7.4vw, 7.2rem);
  font-weight: 400;
  line-height: 0.86;
  margin-top: clamp(1.15rem, 2.2vw, 2rem);
  margin-bottom: clamp(2.7rem, 5.6vw, 4.5rem);
  text-shadow:
    0 0 0.7rem color-mix(in srgb, var(--project-title-color, #ffffff) 42%, transparent),
    0 0 1.8rem rgba(0, 0, 0, 0.72);
  filter: none;
  animation: none;
}

.project-main {
  width: 100%;
  overflow-x: hidden;
}

body.project-page.project-bg-paint-leather-dark {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.99) 0%, rgba(0, 0, 0, 0.9) 13%, transparent 31%, transparent 69%, rgba(0, 0, 0, 0.9) 87%, rgba(0, 0, 0, 0.99) 100%),
    radial-gradient(circle at 14% 18%, rgba(255, 0, 24, 0.46), transparent 17rem),
    radial-gradient(circle at 78% 13%, rgba(0, 72, 255, 0.36), transparent 21rem),
    radial-gradient(ellipse at 88% 58%, rgba(255, 40, 0, 0.24), transparent 23rem),
    radial-gradient(ellipse at 17% 78%, rgba(0, 35, 190, 0.32), transparent 22rem),
    radial-gradient(circle at 50% 42%, rgba(120, 0, 42, 0.15), transparent 26rem),
    linear-gradient(180deg, #000 0%, #030004 38%, #00030b 63%, #000 100%);
  background-color: #000;
}

body.project-page.project-bg-paint-leather-dark::before {
  background:
    linear-gradient(115deg, transparent 12%, rgba(255, 0, 28, 0.34) 23%, transparent 37%),
    linear-gradient(62deg, transparent 42%, rgba(0, 91, 255, 0.3) 56%, transparent 72%),
    radial-gradient(circle at 19% 25%, rgba(255, 0, 24, 0.34), transparent 16rem),
    radial-gradient(circle at 70% 32%, rgba(0, 73, 255, 0.22), transparent 19rem);
  mix-blend-mode: screen;
  opacity: 0.5;
  filter: blur(48px) saturate(130%);
  animation: liquidBarsDrift 52s ease-in-out infinite alternate;
}

body.project-page.project-bg-paint-leather-dark::after {
  background:
    linear-gradient(104deg, rgba(0, 0, 0, 0.82) 0%, transparent 24%, rgba(0, 0, 0, 0.68) 48%, transparent 70%, rgba(0, 0, 0, 0.88) 100%),
    radial-gradient(ellipse at 54% 18%, rgba(255, 0, 43, 0.12), transparent 19rem),
    radial-gradient(ellipse at 12% 88%, rgba(0, 69, 255, 0.14), transparent 22rem);
  mix-blend-mode: normal;
  opacity: 0.78;
  filter: blur(34px) saturate(115%);
  animation: liquidBarsCross 68s ease-in-out infinite alternate;
}

body.project-page.project-bg-incidents-orange {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.995) 0%, rgba(0, 0, 0, 0.94) 15%, transparent 34%, transparent 66%, rgba(0, 0, 0, 0.94) 85%, rgba(0, 0, 0, 0.995) 100%),
    linear-gradient(112deg, transparent 0%, transparent 31%, rgba(255, 116, 24, 0.2) 38%, transparent 46%),
    linear-gradient(72deg, transparent 12%, rgba(255, 83, 0, 0.18) 23%, transparent 35%, transparent 100%),
    radial-gradient(ellipse at 18% 28%, rgba(255, 108, 16, 0.18), transparent 18rem),
    radial-gradient(ellipse at 84% 76%, rgba(255, 74, 0, 0.15), transparent 21rem),
    linear-gradient(180deg, #000 0%, #030202 42%, #050301 65%, #000 100%);
  background-color: #000;
}

body.project-page.project-bg-incidents-orange::before {
  background:
    linear-gradient(102deg, transparent 8%, rgba(255, 132, 31, 0.26) 19%, transparent 27%),
    linear-gradient(66deg, transparent 48%, rgba(255, 92, 0, 0.22) 58%, transparent 70%),
    radial-gradient(circle at 63% 23%, rgba(255, 156, 49, 0.12), transparent 18rem);
  mix-blend-mode: screen;
  opacity: 0.34;
  filter: blur(42px) saturate(120%);
  animation: liquidBarsDrift 60s ease-in-out infinite alternate;
}

body.project-page.project-bg-incidents-orange::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.9)),
    linear-gradient(154deg, transparent 22%, rgba(255, 93, 0, 0.1) 34%, transparent 47%),
    linear-gradient(25deg, transparent 56%, rgba(255, 128, 28, 0.09) 68%, transparent 82%);
  mix-blend-mode: normal;
  opacity: 0.82;
  filter: blur(28px) saturate(105%);
  animation: liquidBarsCross 72s ease-in-out infinite alternate;
}

body.project-page.project-bg-playing-fire-magenta {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.995) 0%, rgba(0, 0, 0, 0.93) 16%, transparent 39%, transparent 61%, rgba(0, 0, 0, 0.93) 84%, rgba(0, 0, 0, 0.995) 100%),
    radial-gradient(ellipse at 18% 24%, rgba(255, 74, 0, 0.28), transparent 17rem),
    radial-gradient(ellipse at 76% 20%, rgba(255, 0, 210, 0.25), transparent 20rem),
    linear-gradient(118deg, transparent 10%, rgba(255, 119, 0, 0.2) 22%, transparent 34%),
    linear-gradient(62deg, transparent 48%, rgba(214, 0, 255, 0.18) 60%, transparent 72%),
    linear-gradient(180deg, #000 0%, #050103 43%, #090006 66%, #000 100%);
  background-color: #000;
}

body.project-page.project-bg-playing-fire-magenta::before {
  background:
    linear-gradient(112deg, transparent 11%, rgba(255, 92, 0, 0.34) 23%, transparent 36%),
    linear-gradient(58deg, transparent 46%, rgba(231, 0, 255, 0.26) 58%, transparent 71%),
    radial-gradient(circle at 45% 32%, rgba(255, 178, 0, 0.13), transparent 18rem);
  mix-blend-mode: screen;
  opacity: 0.42;
  filter: blur(48px) saturate(135%);
  animation: liquidBarsDrift 58s ease-in-out infinite alternate;
}

body.project-page.project-bg-playing-fire-magenta::after {
  background:
    linear-gradient(94deg, rgba(0, 0, 0, 0.88), transparent 28%, rgba(0, 0, 0, 0.56) 52%, transparent 74%, rgba(0, 0, 0, 0.91)),
    radial-gradient(ellipse at 83% 78%, rgba(255, 0, 180, 0.12), transparent 19rem),
    radial-gradient(ellipse at 16% 72%, rgba(255, 87, 0, 0.13), transparent 18rem);
  mix-blend-mode: normal;
  opacity: 0.82;
  filter: blur(30px) saturate(112%);
  animation: liquidBarsCross 74s ease-in-out infinite alternate;
}

body.project-page.project-bg-twisted-prism {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.995) 0%, rgba(0, 0, 0, 0.94) 14%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.94) 86%, rgba(0, 0, 0, 0.995) 100%),
    radial-gradient(ellipse at 18% 22%, rgba(0, 245, 232, 0.24), transparent 18rem),
    radial-gradient(ellipse at 78% 18%, rgba(255, 117, 0, 0.22), transparent 20rem),
    radial-gradient(ellipse at 68% 76%, rgba(255, 28, 0, 0.16), transparent 18rem),
    linear-gradient(112deg, transparent 8%, rgba(255, 210, 37, 0.16) 21%, transparent 33%),
    linear-gradient(58deg, transparent 44%, rgba(0, 255, 220, 0.18) 56%, transparent 69%),
    linear-gradient(180deg, #000 0%, #000607 42%, #070300 65%, #000 100%);
  background-color: #000;
}

body.project-page.project-bg-twisted-prism::before {
  background:
    linear-gradient(105deg, transparent 9%, rgba(0, 239, 225, 0.28) 21%, transparent 34%),
    linear-gradient(68deg, transparent 44%, rgba(255, 121, 0, 0.25) 57%, transparent 69%),
    radial-gradient(circle at 54% 25%, rgba(255, 218, 58, 0.12), transparent 16rem);
  mix-blend-mode: screen;
  opacity: 0.4;
  filter: blur(46px) saturate(132%);
  animation: liquidBarsDrift 64s ease-in-out infinite alternate;
}

body.project-page.project-bg-twisted-prism::after {
  background:
    linear-gradient(96deg, rgba(0, 0, 0, 0.9), transparent 25%, rgba(0, 0, 0, 0.5) 52%, transparent 73%, rgba(0, 0, 0, 0.9)),
    radial-gradient(ellipse at 16% 82%, rgba(0, 225, 255, 0.1), transparent 19rem),
    radial-gradient(ellipse at 84% 72%, rgba(255, 58, 0, 0.12), transparent 20rem);
  mix-blend-mode: normal;
  opacity: 0.84;
  filter: blur(32px) saturate(112%);
  animation: liquidBarsCross 76s ease-in-out infinite alternate;
}

.project-hero,
.project-details-section,
.project-stills-section,
.gallery-hero,
.gallery-page-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.project-hero::before,
.project-details-section::before,
.project-stills-section::before,
.gallery-hero::before,
.gallery-page-section::before {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.2), transparent 26%, rgba(130, 246, 255, 0.12) 45%, rgba(255, 150, 225, 0.1) 68%, transparent 88%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(255, 255, 255, 0.035));
  pointer-events: none;
}

.project-hero {
  display: flex;
  min-height: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.95rem, 2vw, 1.55rem);
  padding: clamp(7.45rem, 10.8vw, 9.75rem) var(--section-side) clamp(0.75rem, 1.7vw, 1.3rem);
  background: transparent;
  box-sizing: border-box;
}

.project-page-title {
  width: min(62rem, 94vw);
  margin: clamp(0.9rem, 1.8vw, 1.55rem) auto clamp(0.95rem, 2vw, 1.65rem);
  color: var(--project-title-color, var(--text-head));
  font-family: var(--project-title-font, "Roboto", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(2.4rem, 8vw, 6.8rem);
  font-weight: 400;
  line-height: 0.86;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 0 0.7rem color-mix(in srgb, var(--project-title-color, #ffffff) 38%, transparent),
    0 0 1.8rem rgba(0, 0, 0, 0.7);
}

.project-slideshow-frame {
  position: relative;
  width: min(38rem, 68vw, 100%);
  aspect-ratio: 16 / 9;
  margin-top: clamp(2.7rem, 6vw, 4.6rem);
  overflow: hidden;
  border: 0;
  border-radius: 0.65rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(5, 6, 9, 0.54);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 14px 28px rgba(0, 0, 0, 0.32);
}

.project-slideshow-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 18%),
    linear-gradient(112deg, rgba(130, 246, 255, 0.1), transparent 42%, rgba(255, 126, 50, 0.12));
  mix-blend-mode: screen;
  opacity: 0.42;
}

.project-intro {
  width: min(44rem, 100%);
  text-align: center;
}

.project-intro h1 {
  margin: 0 0 0.45rem;
  color: var(--text-head);
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  line-height: 1;
}

.project-intro p {
  margin: 0;
  color: var(--text-light);
  font-size: clamp(0.86rem, 1.2vw, 1rem);
  line-height: 1.45;
}

.project-details-section {
  width: min(46rem, 100%);
  display: grid;
  grid-template-columns: minmax(13rem, 20.5rem) minmax(10rem, 16rem);
  gap: clamp(1rem, 2.8vw, 2.2rem);
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  padding: clamp(1rem, 2.6vw, 2.25rem) var(--section-side);
  background: transparent;
  box-sizing: border-box;
}

.project-poster-large img {
  width: 100%;
  max-height: 31rem;
  display: block;
  object-fit: contain;
  border-radius: 0.8rem;
  box-shadow: 8px 10px 22px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(188, 232, 255, 0.22);
  cursor: pointer;
}

.project-details-copy {
  width: min(100%, 16rem);
  color: var(--text-light);
  text-align: left;
}

.project-details-copy h2,
.project-stills-section h2 {
  margin: 0 0 1rem;
  color: var(--text-head);
  font-size: clamp(1rem, 2vw, 1.6rem);
  line-height: 1;
}

.project-stills-section {
  padding: clamp(0.8rem, 2.2vw, 1.65rem) var(--section-side) clamp(2rem, 4.4vw, 3.4rem);
  background: transparent;
  box-sizing: border-box;
}

.project-stills-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, clamp(8.5rem, 15vw, 12rem));
  grid-auto-columns: max-content;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 1rem var(--scroll-list-inset);
  scroll-padding-left: var(--scroll-list-inset);
  scroll-snap-type: x proximity;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0,
      rgba(0, 0, 0, 0.04) var(--scroll-edge-clear),
      #000 var(--scroll-edge-fade),
      #000 calc(100% - var(--scroll-edge-fade)),
      rgba(0, 0, 0, 0.04) calc(100% - var(--scroll-edge-clear)),
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0,
      rgba(0, 0, 0, 0.04) var(--scroll-edge-clear),
      #000 var(--scroll-edge-fade),
      #000 calc(100% - var(--scroll-edge-fade)),
      rgba(0, 0, 0, 0.04) calc(100% - var(--scroll-edge-clear)),
      transparent 100%
    );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.project-still {
  height: 100%;
  width: clamp(13rem, 24vw, 20rem);
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
}

.project-still img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0.65rem;
  cursor: pointer;
}

.project-still.is-portrait-sideways {
  position: relative;
  width: var(--sideways-still-width) !important;
}

.project-still.is-portrait-sideways img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sideways-still-img-width);
  height: var(--sideways-still-img-height);
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}

.project-page .project-contact {
  border-top: 0;
  background: transparent;
}

/* Sound Credit Pages */

.sound-list-page header .socials a {
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.sound-list-page header .site-logo {
  grid-row: 2;
  align-self: start;
  max-width: min(40rem, 44vw);
  text-align: center;
  white-space: normal;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 0.85;
}

.sound-list-main {
  width: 100%;
  overflow-x: hidden;
}

.sound-list-hero,
.sound-list-section {
  position: relative;
  isolation: isolate;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  overflow: hidden;
}

.sound-list-hero {
  display: flex;
  min-height: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.2vw, 0.9rem);
  padding: clamp(6.4rem, 9.4vw, 8rem) var(--section-side) clamp(2.7rem, 5vw, 4rem);
  overflow: visible;
  text-align: center;
}

.sound-list-video {
  width: min(38rem, 68vw, 100%);
  margin-top: clamp(0.15rem, 0.8vw, 0.55rem);
  margin-bottom: clamp(0.55rem, 1.4vw, 1rem);
}

.sound-list-hero h1 {
  margin: 0;
  color: transparent;
  background-image: var(--liquid-ink-gradient);
  background-size: 320% 320%;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  font-weight: 900;
  line-height: 0.95;
  filter:
    drop-shadow(0 0 0.45rem rgba(255, 106, 168, 0.22))
    drop-shadow(0 0 1.2rem rgba(141, 114, 255, 0.16));
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate;
}

.sound-list-back {
  margin-top: 0.35rem;
}

.sound-list-section {
  padding: 0 var(--section-side) clamp(3rem, 7vw, 5.5rem);
}

.sound-filter-tabs {
  width: min(var(--content-max), 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 4.5vw, 3rem);
  margin: 0 auto clamp(1.05rem, 2.6vw, 1.85rem);
}

.sound-filter-tab {
  appearance: none;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(232, 247, 255, 0.48);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition:
    color 1.4s ease,
    filter 1.4s ease,
    transform 0.45s ease,
    opacity 1.2s ease;
}

.sound-filter-tab:hover,
.sound-filter-tab:focus-visible {
  color: var(--text-head);
  filter: drop-shadow(0 0 0.32rem rgba(255, 106, 168, 0.18));
  outline: 0;
}

.sound-filter-tab.is-active {
  color: transparent;
  background-image: var(--liquid-ink-gradient);
  background-size: 320% 320%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: liquidGlassTextShift var(--tv-liquid-duration) ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 0.28rem rgba(255, 106, 168, 0.28))
    drop-shadow(0 0 0.85rem rgba(115, 241, 255, 0.12));
}

.sound-list-grid {
  width: min(var(--content-max), 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 2.8rem);
  margin: 0 auto;
}

.sound-list-category {
  min-width: 0;
}

.sound-list-category-title {
  margin: 0 0 clamp(0.85rem, 1.8vw, 1.2rem);
  color: var(--text-head);
  font-size: clamp(1.05rem, 2.2vw, 1.65rem);
  line-height: 1;
  text-align: center;
}

.sound-list-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.8vw, 1.1rem);
}

.sound-list-card {
  display: grid;
  grid-template-columns: clamp(4.4rem, 8vw, 6.5rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  min-width: 0;
  padding: clamp(0.55rem, 1.3vw, 0.85rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(5, 6, 9, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 22px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
  transition: var(--hover-liquid-transition);
}

.sound-list-card:hover {
  transform: translateY(-0.15rem);
  animation: liquidGlassStrokeGlow var(--hover-liquid-duration) ease-in-out infinite alternate;
}

.sound-list-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(255, 106, 168, 0.2), rgba(141, 114, 255, 0.16)),
    rgba(0, 0, 0, 0.38);
  box-shadow: 6px 8px 14px rgba(0, 0, 0, 0.3);
}

.sound-list-poster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sound-list-poster-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-head);
  font-size: clamp(1rem, 2.3vw, 1.45rem);
  font-weight: 900;
  background:
    linear-gradient(135deg, rgba(255, 135, 53, 0.22), rgba(199, 125, 255, 0.24)),
    rgba(0, 0, 0, 0.28);
}

.sound-list-copy {
  min-width: 0;
  color: var(--text-light);
}

.sound-list-copy h2 {
  margin: 0 0 0.35rem;
  color: var(--text-head);
  font-size: clamp(0.92rem, 1.55vw, 1.22rem);
  line-height: 1.08;
}

.sound-list-copy p {
  margin: 0.18rem 0;
  color: var(--text-light);
  font-size: clamp(0.72rem, 1.1vw, 0.86rem);
  line-height: 1.35;
}

.sound-list-copy p:last-child {
  color: rgba(232, 247, 255, 0.66);
}

.sound-list-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-light);
  text-align: center;
}

.page-footer {
  width: 100%;
  margin: clamp(0.65rem, 2vw, 1.2rem) auto 0;
  padding: 0.65rem var(--section-side) 1.9rem;
  box-sizing: border-box;
  color: var(--text-light);
}

.floating-page-nav {
  position: fixed;
  right: clamp(0.9rem, 2.2vw, 1.45rem);
  bottom: clamp(0.9rem, 2.2vw, 1.45rem);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 0.52rem;
  pointer-events: none;
}

.floating-page-link {
  width: clamp(2.35rem, 4.5vw, 2.9rem);
  aspect-ratio: 1;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.28), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(6, 9, 18, 0.44);
  color: rgba(224, 253, 255, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0.35rem 0.45rem 0.9rem rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  pointer-events: auto;
  transition: var(--hover-liquid-transition);
}

.floating-page-link svg {
  width: 54%;
  height: 54%;
  display: block;
  fill: currentColor;
}

.floating-page-link:hover,
.floating-page-link:focus-visible {
  color: rgba(4, 6, 14, 0.9);
  border-color: rgba(225, 255, 255, 0.54);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 38%),
    var(--liquid-ink-gradient),
    rgba(255, 255, 255, 0.08);
  background-size: 140% 140%, 320% 320%, auto;
  transform: translateY(-0.08rem) scale(1.06);
  animation: liquidGlassSurfaceCycle var(--hover-liquid-duration) ease-in-out infinite alternate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0.38rem 0.48rem 0.92rem rgba(0, 0, 0, 0.22),
    0 0 0.8rem rgba(115, 241, 255, 0.2),
    0 0 1.2rem rgba(255, 106, 168, 0.14);
}

.floating-page-link:focus-visible {
  outline: 2px solid rgba(115, 241, 255, 0.58);
  outline-offset: 0.2rem;
}

/* Gallery Page */

.gallery-page header .site-logo {
  font-size: clamp(2rem, 4.8vw, 3.6rem);
}

.gallery-main {
  width: 100%;
  overflow-x: hidden;
}

.gallery-hero {
  min-height: clamp(18rem, 34vw, 25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6.8rem, 9vw, 8rem) var(--section-side) clamp(2rem, 5vw, 3rem);
  background: transparent;
  box-sizing: border-box;
}

.gallery-heading-block,
.gallery-art-grid {
  width: min(var(--content-max), 100%);
}

.gallery-heading-block {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.gallery-kicker {
  margin: 0 0 0.25rem;
  color: var(--emph-light);
  font-size: clamp(0.7rem, 1.2vw, 0.88rem);
  font-weight: 800;
}

.gallery-heading-block h1 {
  margin: 0;
  color: var(--text-head);
  font-size: clamp(1.9rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 0.95;
  text-shadow:
    0 0 24px rgba(185, 248, 255, 0.36),
    0 0 70px rgba(160, 145, 255, 0.3);
}

.gallery-heading-block p:last-child {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  color: var(--text-light);
  font-size: clamp(0.86rem, 1.2vw, 1rem);
  line-height: 1.45;
}

.gallery-page-section {
  min-height: 40rem;
  padding: clamp(6.8rem, 9vw, 8rem) var(--section-side) clamp(3rem, 7vw, 6rem);
  background: transparent;
  box-sizing: border-box;
  overflow: visible;
}

.gallery-art-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(6.5rem, 9.6vw, 9.6rem);
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
  margin: 0 auto;
  overflow: visible;
}

.gallery-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  grid-column: span 4;
  grid-row: span 2;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-bottom-width: 0;
  border-radius: 0;
  background: transparent;
  box-shadow:
    7px 7px 0 rgba(0, 0, 0, 0.18),
    0 9px 18px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.gallery-tile.is-lead,
.gallery-tile.is-large {
  grid-column: span 7;
  grid-row: span 3;
}

.gallery-tile.is-wide {
  grid-column: span 5;
  grid-row: span 2;
}

.gallery-tile.is-tall {
  grid-column: span 4;
  grid-row: span 3;
}

.gallery-tile.is-portrait {
  grid-column: span 5;
  grid-row: span 3;
}

.gallery-tile.is-square {
  grid-column: span 4;
  grid-row: span 2;
}

.gallery-tile.is-small {
  grid-column: span 3;
  grid-row: span 2;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
}

.project-modal .modal-content {
  width: min(40rem, calc(100vw - 4rem));
  box-sizing: border-box;
}

@media (max-width: 800px) {
  :root {
    --scroll-list-inset: 0.85rem;
  }

  header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.12rem 1rem;
    padding: 1rem;
  }

  .header-title-stack {
    grid-column: 1;
    grid-row: 1 / 3;
    gap: 0.02rem;
  }

  header h1 {
    max-width: 100%;
    white-space: nowrap;
    text-wrap: nowrap;
    font-size: clamp(0.55rem, 2.9vw, 0.95rem);
    line-height: 0.86;
  }

  header h3 {
    grid-row: 2;
    font-size: clamp(0.54rem, 2.5vw, 0.68rem);
    margin: 0.06rem 0 0;
    line-height: 0.9;
  }

  .site-logo {
    grid-row: 1 / 3;
    font-size: clamp(1.8rem, 8.5vw, 2.45rem);
  }

  header .socials {
    grid-row: 1;
    align-self: start;
    gap: clamp(0.18rem, 1.4vw, 0.42rem);
    margin-top: -0.08rem;
  }

  header .socials a {
    width: clamp(1.18rem, 5.2vw, 1.58rem);
    height: clamp(1.18rem, 5.2vw, 1.58rem);
    flex-basis: clamp(1.18rem, 5.2vw, 1.58rem);
  }

  header .icon {
    width: clamp(0.95rem, 4.2vw, 1.18rem);
    height: clamp(0.95rem, 4.2vw, 1.18rem);
  }

  header .tube-icon {
    width: clamp(1.08rem, 4.7vw, 1.3rem);
    height: clamp(0.95rem, 4vw, 1.12rem);
  }

  header .instagram-icon {
    width: clamp(0.95rem, 4vw, 1.1rem);
    height: clamp(1.02rem, 4.4vw, 1.18rem);
  }

  header .linkedin-icon {
    width: clamp(1rem, 4.3vw, 1.16rem);
    height: clamp(1rem, 4.3vw, 1.16rem);
  }

  header .imdb-icon {
    width: clamp(1.74rem, 7.4vw, 2.1rem);
    height: clamp(0.98rem, 4.15vw, 1.18rem);
  }

  header .socials a[aria-label="IMDb"],
  header .socials a[aria-label="IMDB"] {
    width: clamp(1.84rem, 7.9vw, 2.22rem);
    flex-basis: clamp(1.84rem, 7.9vw, 2.22rem);
  }

  body:not(.project-page):not(.gallery-page):not(.sound-list-page) header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: min-content min-content;
  }

  body:not(.project-page):not(.gallery-page):not(.sound-list-page) .header-title-stack {
    grid-column: 1;
  }

  body:not(.project-page):not(.gallery-page):not(.sound-list-page) header .socials {
    grid-column: 2;
  }

  .project-page header {
    position: relative;
    padding-bottom: 0;
  }

  .project-page header .project-title-logo {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    align-self: start;
    max-width: min(92vw, 30rem);
    font-size: clamp(2.85rem, 10.8vw, 3.9rem);
    line-height: 1.08;
    margin-top: clamp(1.55rem, 5vw, 2.35rem);
    margin-bottom: clamp(1.65rem, 6vw, 2.75rem);
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: normal;
    transform: none;
  }

  .project-page header .socials {
    gap: clamp(0.18rem, 1.4vw, 0.42rem);
  }

  .project-page header .socials a {
    font-size: 0.58rem;
  }

  .project-page-title {
    width: min(34rem, 92vw);
    margin: clamp(1.35rem, 5vw, 2.35rem) auto clamp(1.05rem, 4vw, 1.75rem);
    font-size: clamp(2.1rem, 13vw, 4rem);
    line-height: 1;
    white-space: normal;
    text-wrap: balance;
  }

  .sound-list-page header .site-logo {
    grid-row: 2;
    align-self: start;
    max-width: 34vw;
    font-size: clamp(1.8rem, 8.5vw, 2.45rem);
  }

  .sound-list-page header .socials {
    gap: clamp(0.18rem, 1.4vw, 0.42rem);
  }

  .sound-list-hero {
    padding: 5.4rem 1rem 1.4rem;
  }

  .sound-list-video {
    width: min(34rem, 94vw);
  }

  .sound-list-category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sound-list-section {
    padding: 0 1rem 3rem;
  }

  .sound-list-grid {
    grid-template-columns: 1fr;
  }

  .sound-list-card {
    grid-template-columns: 4.35rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .project-hero {
    min-height: auto;
    padding: clamp(0.75rem, 3vw, 1.35rem) 1rem 0.8rem;
    gap: 0.72rem;
  }

  .project-slideshow-frame {
    width: min(100%, 30rem);
    margin-top: clamp(0.95rem, 3.6vw, 1.65rem);
    border-radius: 0.5rem;
  }

  .project-intro {
    width: min(100%, 28rem);
  }

  .project-details-section {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.05rem 1rem;
  }

  .project-details-copy {
    width: min(20rem, 100%);
    margin-inline: auto;
  }

  .project-poster-large {
    width: min(16.25rem, 76vw);
    margin-inline: auto;
  }

  .project-stills-section {
    padding: 0.85rem 1rem 2.1rem;
  }

  .project-stills-track {
    grid-template-rows: minmax(0, clamp(11.4rem, 45vw, 13.5rem));
    grid-auto-columns: max-content;
  }

  .project-still {
    width: min(13rem, 72vw);
  }

  .gallery-hero {
    min-height: auto;
    align-items: center;
    padding: 6.4rem 1rem 2rem;
  }

  .gallery-heading-block {
    max-width: 100%;
  }

  .gallery-heading-block h1 {
    font-size: clamp(1.8rem, 11vw, 3rem);
  }

  .gallery-page-section {
    padding: 6.4rem 1rem 3rem;
  }

  .gallery-art-grid {
    width: min(100%, 28rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.05rem;
    grid-template-columns: none;
    grid-auto-rows: auto;
  }

  .gallery-tile,
  .gallery-tile.is-small,
  .gallery-tile.is-square,
  .gallery-tile.is-lead,
  .gallery-tile.is-large,
  .gallery-tile.is-wide,
  .gallery-tile.is-tall,
  .gallery-tile.is-portrait {
    width: min(100%, calc(100vw - 2rem));
    height: auto;
    max-width: calc(100vw - 2rem);
    grid-column: auto;
    grid-row: auto;
    overflow: visible;
    box-sizing: border-box;
  }

  .gallery-tile img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
  }
  
  /* Contact */

  .contact {
    align-items: center;
    flex-direction: column;
    width: min(100%, calc(100vw - 1rem));
    padding: 0.78rem 0.75rem 0.58rem;
    margin-inline: auto;
    text-align: center;
  }

  .contact.credit-row {
    align-items: center;
  }

  .contact footer,
  .page-footer {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .footer-logo {
    font-size: 0.82rem;
    margin-bottom: 0.14rem;
  }

  .contact-wrap {
    width: min(100%, 28rem);
    flex-direction: column;
    margin: 0.45rem auto 0.2rem;
    gap: 0.7rem;
  }

  .contact-heading {
    flex: 0 1 auto;
    width: 100%;
    align-items: center;
    text-align: center;
    margin-bottom: 0.25rem;
  }

  .contact-heading p {
    text-align: center;
  }

  .contact-heading .socials {
    justify-content: center;
  }

  .contact-heading h2 {
    font-size: clamp(1.05rem, 4.8vw, 1.28rem);
  }

  .contact-form {
    flex: 0 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
    width: min(100%, 20.5rem);
    padding: 0;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"] {
    height: 1.95rem;
    font-size: 0.86rem;
  }

  .contact-form textarea {
    height: 3.35rem;
    font-size: 0.78rem;
  }

  .contact-form .submit {
    height: 1.42rem;
    font-size: 0.68rem;
  }

  .floating-page-nav {
    position: fixed;
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 5000;
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
  }

  .floating-page-link {
    width: clamp(2.2rem, 11vw, 2.65rem);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Modals */

  .about-slideshow {
    margin-top: 1rem;
    height: 40rem;
  }

  .project-modal-body {
    flex-direction: column;
  }

  .project-modal-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
  }

  .project-modal-grid .grid-right,
  .project-modal-grid .grid-left {
    width: 100%;
  }

  .project-modal-grid .grid-right {
    order: -1; /* show image first */
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
  }

  .project-modal-grid img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .project-modal-flex {
    flex-direction: column;
  }

  .project-modal-flex > div {
    width: 100%;
  }

  .project-modal-flex img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
  }

  .project-modal-flex .modal-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Custom Cursor */

:root {
  --cursor-prism-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22glass%22%20x1%3D%224%22%20y1%3D%222%22%20x2%3D%2218%22%20y2%3D%2220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220.35%22%20stop-color%3D%22%2373f1ff%22%20stop-opacity%3D%220.58%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220.68%22%20stop-color%3D%22%23ff6aa8%22%20stop-opacity%3D%220.52%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffbf5e%22%20stop-opacity%3D%220.46%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22shine%22%20cx%3D%220.35%22%20cy%3D%220.18%22%20r%3D%220.78%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.74%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220.42%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.18%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%20%20%3C%2FradialGradient%3E%0A%20%20%20%20%3Cfilter%20id%3D%22soft%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%0A%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221%22%20stdDeviation%3D%220.8%22%20flood-color%3D%22%23000000%22%20flood-opacity%3D%220.32%22%2F%3E%0A%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%220%22%20dy%3D%220%22%20stdDeviation%3D%221.2%22%20flood-color%3D%22%2373f1ff%22%20flood-opacity%3D%220.14%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20d%3D%22M5.1%203.2C4.35%202.75%203.55%203.43%203.81%204.26l5.52%2017.32c.28.88%201.48.98%201.9.16l2.65-5.13c.17-.34.47-.59.83-.7l5.56-1.78c.86-.28.98-1.45.2-1.91Z%22%20fill%3D%22%23050609%22%20opacity%3D%220.2%22%20transform%3D%22translate(0.8%200.7)%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M5.1%203.2C4.35%202.75%203.55%203.43%203.81%204.26l5.52%2017.32c.28.88%201.48.98%201.9.16l2.65-5.13c.17-.34.47-.59.83-.7l5.56-1.78c.86-.28.98-1.45.2-1.91Z%22%20fill%3D%22url(%23glass)%22%20filter%3D%22url(%23soft)%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M5.95%205.15%2010.1%2018.1l1.88-3.64c.38-.74%201.02-1.29%201.81-1.54l3.96-1.27Z%22%20fill%3D%22url(%23shine)%22%20opacity%3D%220.9%22%2F%3E%0A%3C%2Fsvg%3E") 4 3, auto;
  --cursor-prism-action: pointer;
}

html,
body,
.container {
  cursor: var(--cursor-prism-arrow);
}

a,
button,
[role="button"],
summary,
.sound-list-card,
.submit {
  cursor: var(--cursor-prism-action) !important;
}

input,
textarea,
[contenteditable="true"] {
  cursor: text;
}

:root {
  --interactive-tv-liquid:
    linear-gradient(
      112deg,
      rgba(255, 106, 168, 0.94) 0%,
      rgba(255, 79, 139, 0.92) 18%,
      rgba(255, 135, 53, 0.88) 36%,
      rgba(255, 191, 94, 0.88) 52%,
      rgba(141, 114, 255, 0.9) 70%,
      rgba(199, 125, 255, 0.9) 86%,
      rgba(255, 106, 168, 0.94) 100%
    ),
    radial-gradient(circle at 50% 48%, rgba(199, 125, 255, 0.36), transparent 24%),
    radial-gradient(circle at 78% 68%, rgba(255, 106, 168, 0.88), transparent 28%),
    linear-gradient(58deg, rgba(255, 106, 168, 0.22), transparent 44%, rgba(141, 114, 255, 0.26));
}

@keyframes tvLiquidGlassIconCycle {
  0% {
    color: #ff6aa8;
    fill: #ff6aa8;
    filter: drop-shadow(0 0 0.34rem rgba(255, 106, 168, 0.46));
  }
  25% {
    color: #ff8735;
    fill: #ff8735;
    filter: drop-shadow(0 0 0.34rem rgba(255, 135, 53, 0.42));
  }
  52% {
    color: #ffbf5e;
    fill: #ffbf5e;
    filter: drop-shadow(0 0 0.34rem rgba(255, 191, 94, 0.46));
  }
  76% {
    color: #8d72ff;
    fill: #8d72ff;
    filter: drop-shadow(0 0 0.36rem rgba(141, 114, 255, 0.46));
  }
  100% {
    color: #c77dff;
    fill: #c77dff;
    filter: drop-shadow(0 0 0.36rem rgba(199, 125, 255, 0.44));
  }
}

button:hover:not(.submit):not(.sound-filter-tab):not(.short-film-title-tab):not(.lightbox-arrow),
button:focus-visible:not(.submit):not(.sound-filter-tab):not(.short-film-title-tab):not(.lightbox-arrow),
.read-more:hover,
.read-more:focus-visible,
.floating-page-link:hover,
.floating-page-link:focus-visible {
  animation: liquidGlassForegroundCycle var(--hover-liquid-duration) ease-in-out infinite alternate !important;
  border-color: currentColor !important;
  box-shadow:
    0 0 0.55rem rgba(115, 241, 255, 0.2),
    0 0 1rem rgba(255, 106, 168, 0.14) !important;
  color: #ffbf5e;
  fill: currentColor;
}

.submit:hover::before,
.submit:focus-visible::before {
  opacity: 1 !important;
}

.submit:hover::after,
.submit:focus-visible::after {
  opacity: 0 !important;
}

.socials a {
  border-radius: 999px;
  transition: var(--hover-liquid-transition);
}

.socials a:hover,
.socials a:focus-visible {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--text-light);
  animation: none !important;
}

.socials a:hover .icon,
.socials a:focus-visible .icon,
.socials a:hover .icon path,
.socials a:focus-visible .icon path {
  color: #ffbf5e;
  fill: #ffbf5e;
  animation: liquidGlassSvgFill var(--hover-liquid-duration) ease-in-out infinite alternate !important;
  filter: drop-shadow(0 0 0.28rem rgba(255, 191, 94, 0.34));
}

.read-more:hover,
.read-more:focus-visible {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(4, 4, 10, 0.56) !important;
  background-size: auto !important;
}

.floating-page-link:hover,
.floating-page-link:focus-visible {
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.28), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(6, 9, 18, 0.44) !important;
  background-size: auto !important;
}

.submit:hover,
.submit:focus-visible {
  color: var(--back-dark) !important;
  border: 0 !important;
  animation: none !important;
  box-shadow:
    0 0 0.56rem rgba(255, 191, 94, 0.24),
    0 0 1rem rgba(255, 106, 168, 0.18) !important;
}

.submit:hover::before,
.submit:focus-visible::before {
  opacity: 0 !important;
}

.submit:hover::after,
.submit:focus-visible::after {
  opacity: 1 !important;
  background-image: var(--liquid-ink-gradient) !important;
  background-size: 320% 320% !important;
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate !important;
}

/* Keep visual media edges square across posters, stills, and galleries. */
.gallery-tile,
.gallery-tile img,
.project-slideshow-frame,
.project-poster-large,
.project-poster-large img,
.project-still,
.project-still img,
.project-modal-grid img,
.project-modal-flex img,
.modal-content img,
.sound-list-poster,
.sound-list-poster img,
#photo-gallery img,
#lightbox img {
  border-radius: 0 !important;
}

.gallery-page .gallery-tile,
.gallery-page .gallery-tile img,
#lightbox img {
  border: 0 !important;
  border-bottom-width: 0 !important;
  background-color: transparent !important;
}

/* Sound project liquid-glass modal */
#project-modal.sound-project-modal {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 106, 168, 0.18), transparent 28%),
    radial-gradient(circle at 84% 72%, rgba(115, 241, 255, 0.13), transparent 30%),
    rgba(0, 0, 0, 0.76);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.sound-modal-content {
  position: relative;
  isolation: isolate;
  width: min(42rem, calc(100vw - 4rem)) !important;
  max-height: min(84vh, 42rem);
  box-sizing: border-box;
  display: block !important;
  overflow: hidden auto !important;
  padding: clamp(1rem, 2.5vw, 1.55rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.5rem !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(4, 6, 14, 0.62) !important;
  color: var(--text-light) !important;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0.7rem 0.85rem 2.1rem rgba(0, 0, 0, 0.38),
    0 0 1.4rem rgba(255, 106, 168, 0.12),
    0 0 2.2rem rgba(115, 241, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
}

.sound-modal-content::before {
  content: "";
  position: absolute;
  inset: -42%;
  z-index: -2;
  background: var(--interactive-tv-liquid);
  background-size: 320% 320%, 180% 180%, 190% 190%, 240% 240%;
  opacity: 0.22;
  filter: blur(2.5rem) saturate(140%);
  animation: tvLiquidGlassInk var(--tv-liquid-duration) ease-in-out infinite alternate;
}

.sound-modal-content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 28%, rgba(115, 241, 255, 0.08) 48%, transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%);
  opacity: 0.56;
}

.sound-modal-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 14rem);
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem) !important;
  width: 100%;
}

.sound-modal-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1vw, 0.72rem);
  text-align: left;
}

.sound-modal-kicker {
  margin: 0;
  color: rgba(184, 206, 216, 0.78);
  font-family: "OCR A Std", "Monaco", "Courier New", monospace;
  font-size: clamp(0.58rem, 0.9vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.sound-modal-content .modal-title {
  margin: 0 !important;
  color: transparent;
  background-image: var(--liquid-ink-gradient);
  background-size: 320% 320%;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(1.45rem, 4vw, 3.1rem);
  font-weight: 900;
  line-height: 0.95;
  white-space: normal;
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 0.42rem rgba(255, 106, 168, 0.22))
    drop-shadow(0 0 0.95rem rgba(115, 241, 255, 0.12));
}

.sound-modal-meta {
  display: grid;
  gap: 0.18rem;
  margin: 0;
}

.sound-modal-meta div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: baseline;
}

.sound-modal-meta dt {
  color: var(--text-head);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sound-modal-meta dd {
  margin: 0;
  color: var(--text-light);
  font-size: 0.82rem;
}

.sound-modal-description {
  max-width: 42rem;
  margin: 0 !important;
  color: rgba(232, 247, 255, 0.78);
  font-size: clamp(0.82rem, 1.1vw, 0.96rem) !important;
  line-height: 1.45 !important;
}

.sound-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.25rem;
}

.sound-modal-iframe {
  flex: 1 1 17rem;
  min-width: min(100%, 17rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.32);
  box-shadow:
    0.45rem 0.5rem 0.95rem rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sound-modal-iframe iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.sound-modal-links {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  gap: 0.65rem !important;
  margin: 0 !important;
}

.sound-modal-links a {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  color: var(--text-light);
  text-decoration: none;
}

.sound-modal-links .icon {
  width: 1.45rem;
  height: 1.45rem;
}

.sound-modal-links .imdb-icon {
  width: 2rem;
  height: 1.25rem;
}

.sound-modal-poster {
  width: min(100%, 13rem);
  margin: 0 auto;
}

.sound-modal-poster img {
  width: 100%;
  max-height: 22rem !important;
  display: block;
  object-fit: contain;
  cursor: pointer;
  box-shadow:
    0.55rem 0.65rem 1.05rem rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.sound-modal-header {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
}

.sound-modal-header .close {
  position: static !important;
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)),
    rgba(4, 6, 14, 0.5) !important;
  color: var(--text-head);
  font-size: 1.35rem !important;
  line-height: 1;
  box-shadow: 0.35rem 0.45rem 0.9rem rgba(0, 0, 0, 0.24);
}

.sound-modal-header .close:hover,
.sound-modal-header .close:focus-visible {
  color: #ffbf5e;
  animation: liquidGlassForegroundCycle var(--hover-liquid-duration) ease-in-out infinite alternate !important;
}

@media (max-width: 800px) {
  .project-modal .modal-content {
    width: min(100%, calc(100vw - 1.35rem));
  }

  .sound-modal-content {
    width: min(100%, calc(100vw - 1.35rem)) !important;
    max-height: 86vh;
    padding: 1.15rem 0.85rem !important;
  }

  .sound-modal-body {
    grid-template-columns: 1fr;
    gap: 1rem !important;
  }

  .sound-modal-poster {
    width: min(11rem, 54vw);
    order: -1;
  }

  .sound-modal-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .sound-modal-iframe {
    width: 100%;
    min-width: 0;
  }
}

/* Match the TV/footer liquid color cycle on primary hover fills. */
.submit:hover,
.submit:focus-visible {
  color: var(--back-dark) !important;
  animation: none !important;
}

.submit:hover::before,
.submit:focus-visible::before {
  opacity: 0 !important;
}

.submit:hover::after,
.submit:focus-visible::after {
  opacity: 1 !important;
  background: var(--interactive-tv-liquid) !important;
  background-size: 320% 320%, 180% 180%, 190% 190%, 240% 240% !important;
  animation: tvLiquidGlassInk var(--tv-liquid-duration) ease-in-out infinite alternate !important;
}

/* Smooth, single-source hover cycling. Keeps foreground fills animated without flashing. */
.sound-list-card:hover,
.sound-list-card:focus-visible {
  animation: tvLiquidGlassIconCycle var(--tv-liquid-duration) ease-in-out infinite alternate !important;
}

.sound-list-card {
  cursor: pointer;
  outline: 0;
}

.sound-list-card:hover,
.sound-list-card:focus-visible {
  color: #ff6aa8;
  border-color: currentColor;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0.45rem 0.5rem 1rem rgba(0, 0, 0, 0.28),
    0 0 0.85rem rgba(255, 106, 168, 0.18),
    0 0 1.2rem rgba(115, 241, 255, 0.12) !important;
}

.sound-list-card:hover .sound-list-copy h2,
.sound-list-card:focus-visible .sound-list-copy h2 {
  color: currentColor;
}

.sound-filter-tab:hover,
.sound-filter-tab:focus-visible {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--text-head) !important;
  filter: none !important;
  animation: none !important;
  outline: 0 !important;
}

.sound-filter-tab.is-active,
.sound-filter-tab.is-active:hover,
.sound-filter-tab.is-active:focus-visible {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  color: transparent !important;
  background-image: var(--liquid-ink-gradient) !important;
  background-size: 320% 320% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: liquidGlassTextShift var(--tv-liquid-duration) ease-in-out infinite alternate !important;
}

.modal-content,
.sound-modal-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 247, 255, 0.16) transparent;
}

.modal-content::-webkit-scrollbar,
.sound-modal-content::-webkit-scrollbar {
  width: 0.22rem;
  height: 0.22rem;
}

.modal-content::-webkit-scrollbar-track,
.sound-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.modal-content::-webkit-scrollbar-thumb,
.sound-modal-content::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background-color: rgba(232, 247, 255, 0.14);
}

.modal-content::-webkit-scrollbar-thumb:hover,
.sound-modal-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(232, 247, 255, 0.24);
}

@keyframes submitLiquidSolidFill {
  0% {
    background-color: #ffbf5e;
    box-shadow:
      0 0 0.55rem rgba(255, 191, 94, 0.32),
      0 0 1rem rgba(255, 135, 53, 0.18);
  }
  24% {
    background-color: #ff8735;
    box-shadow:
      0 0 0.58rem rgba(255, 135, 53, 0.32),
      0 0 1.05rem rgba(255, 106, 168, 0.18);
  }
  46% {
    background-color: #ff6aa8;
    box-shadow:
      0 0 0.6rem rgba(255, 106, 168, 0.34),
      0 0 1.1rem rgba(199, 125, 255, 0.2);
  }
  68% {
    background-color: #c77dff;
    box-shadow:
      0 0 0.58rem rgba(199, 125, 255, 0.32),
      0 0 1.08rem rgba(115, 241, 255, 0.18);
  }
  84% {
    background-color: #73f1ff;
    box-shadow:
      0 0 0.58rem rgba(115, 241, 255, 0.32),
      0 0 1.08rem rgba(141, 114, 255, 0.18);
  }
  100% {
    background-color: #8d72ff;
    box-shadow:
      0 0 0.55rem rgba(141, 114, 255, 0.32),
      0 0 1rem rgba(115, 241, 255, 0.18);
  }
}

/* Authoritative liquid hover fills for contact/social controls. */
.submit:hover,
.submit:focus-visible {
  color: var(--back-dark) !important;
  background-color: #ffbf5e;
  background-image: none !important;
  animation: submitLiquidSolidFill var(--hover-liquid-duration) ease-in-out infinite alternate !important;
  border: 0 !important;
}

.submit:hover::before,
.submit:focus-visible::before,
.submit:hover::after,
.submit:focus-visible::after {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.socials a:hover,
.socials a:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

.socials a:hover .icon,
.socials a:focus-visible .icon,
.socials a:hover .icon path,
.socials a:focus-visible .icon path {
  fill: #ffbf5e;
  color: #ffbf5e;
  animation: liquidGlassSvgFill var(--hover-liquid-duration) ease-in-out infinite alternate !important;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.read-more:focus:not(:focus-visible),
.submit:focus:not(:focus-visible),
.floating-page-link:focus:not(:focus-visible),
.sound-filter-tab:focus:not(:focus-visible) {
  outline: 0 !important;
}

.short-film-title-list {
  --short-film-border-width: clamp(0.16rem, 0.34vw, 0.27rem);
  --short-film-border-color: currentColor;
  --short-film-button-color: #ff6aa8;
  --short-film-button-bg: #061018;
  --short-film-button-bg-hover: #0a1722;
  --short-film-tab-width: clamp(13rem, 20vw, 22rem);
  --short-film-control-height: clamp(13rem, 19vw, 17rem);
  --short-film-index-label-gap: clamp(0.45rem, 0.9vw, 0.85rem);
  --short-film-index-label-width: clamp(1rem, 1.45vw, 1.35rem);
  position: relative;
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  flex: 0 0 var(--short-film-tab-width);
  min-width: var(--short-film-tab-width);
  align-self: center;
  justify-self: auto;
  width: var(--short-film-tab-width);
  height: var(--short-film-control-height);
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

.home-short-film-controls {
  position: absolute;
  left: 0;
  top: 62%;
  z-index: 8;
  margin: 0;
  transform: translateY(-50%);
  pointer-events: auto;
}

.home-short-film-controls .short-film-title-main {
  padding-left: clamp(0.38rem, 0.8vw, 0.68rem);
}

.home-short-film-controls .short-film-title-sub {
  padding-left: clamp(0.42rem, 0.8vw, 0.68rem);
}

.short-film-title-list::after {
  content: "index";
  position: absolute;
  top: 2px;
  right: auto;
  left: calc(100% + var(--short-film-index-label-gap));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: auto;
  width: var(--short-film-index-label-width);
  padding: 0;
  border: 0;
  background: transparent;
  color: #ff6aa8;
  box-sizing: border-box;
  font-family: var(--index-display-font);
  font-size: clamp(1.12rem, 1.95vw, 1.42rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1;
  text-align: center;
  text-align-last: center;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  text-transform: uppercase;
  white-space: nowrap;
  transform: none;
  animation: liquidGlassForegroundCycle var(--tv-liquid-duration) ease-in-out infinite alternate;
  pointer-events: none;
}

.home-short-film-controls::after {
  left: calc(100% + var(--short-film-index-label-gap));
}

.short-film-title-tab {
  --short-film-title-pad-x: clamp(0.42rem, 0.8vw, 0.68rem);
  --short-film-title-pad-y: clamp(0.25rem, 0.48vw, 0.38rem);
  appearance: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0;
  gap: clamp(0.18rem, 0.45vw, 0.36rem);
  width: 100%;
  min-height: 0;
  padding: var(--short-film-title-pad-y) 0;
  border: var(--short-film-border-width) solid currentColor;
  border-radius: 0;
  background: var(--short-film-button-bg);
  color: var(--short-film-button-color);
  box-shadow: none;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 260ms ease;
}

.short-film-title-tab:not(.is-selected) {
  animation: liquidGlassForegroundCycle var(--tv-liquid-duration) ease-in-out infinite alternate;
  border-color: currentColor;
}

.short-film-title-tab + .short-film-title-tab {
  margin-top: calc(-1 * var(--short-film-border-width));
}

.short-film-title-tab:first-child {
  border-top: var(--short-film-border-width) solid var(--short-film-border-color);
}

.short-film-title-tab:last-child {
  border-bottom: var(--short-film-border-width) solid var(--short-film-border-color);
}

.short-film-title-main {
  display: block;
  width: 100%;
  max-width: none;
  padding-left: clamp(0.26rem, 0.75vw, 0.55rem);
  overflow: hidden;
  box-sizing: border-box;
  white-space: nowrap;
  color: inherit;
  font-family: var(--index-display-font);
  font-size: clamp(1.38rem, 2.4vw, 2.05rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.8;
}

.short-film-title-track,
.short-film-title-sub-track {
  display: inline-block;
  max-width: none;
  white-space: nowrap;
  will-change: transform;
}

.short-film-title-main.is-overflowing .short-film-title-track,
.short-film-title-sub.is-overflowing .short-film-title-sub-track {
  animation: shortFilmTitlePan var(--title-pan-duration, 6s) ease-in-out infinite alternate;
}

.short-film-title-main.is-entering .short-film-title-track {
  animation: shortFilmTitleEnter 1.1s cubic-bezier(0.16, 0.84, 0.22, 1) both;
  animation-delay: var(--title-enter-delay, 0ms);
}

@keyframes shortFilmTitleEnter {
  from {
    transform: translateX(-110vw);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes shortFilmTitlePan {
  0%,
  8% {
    transform: translateX(0);
  }

  92%,
  100% {
    transform: translateX(calc(var(--title-overflow-distance, 0px) * -1));
  }
}

.short-film-title-sub {
  display: block;
  width: 100%;
  padding-inline: var(--short-film-title-pad-x);
  overflow: hidden;
  box-sizing: border-box;
  white-space: nowrap;
  color: var(--short-film-button-color);
  font-size: clamp(0.42rem, 0.58vw, 0.54rem);
  font-weight: 900;
  letter-spacing: 0.085em;
  line-height: 1;
}

.short-film-title-tab:not(.is-selected):hover,
.short-film-title-tab:not(.is-selected):focus-visible {
  color: #ffbf5e;
  border-color: var(--short-film-border-color);
  background: var(--short-film-button-bg);
  outline: 0;
  box-shadow: none;
}

.short-film-title-tab.is-selected,
.short-film-title-tab.is-selected:hover,
.short-film-title-tab.is-selected:focus-visible {
  color: var(--short-film-button-color);
  border-color: var(--short-film-border-color) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  animation: none !important;
  transform: none !important;
  cursor: default !important;
}

.short-film-title-tab.is-selected .short-film-title-sub {
  color: var(--short-film-button-color);
}

body.site-monochrome .short-film-title-list {
  --short-film-button-color: rgba(244, 244, 244, 0.9);
  --short-film-button-bg: #080808;
  --short-film-button-bg-hover: #111;
}

body.site-monochrome .short-film-title-tab:not(.is-selected),
body.site-monochrome .short-film-title-list::after {
  animation: none !important;
  border-color: currentColor !important;
  color: rgba(244, 244, 244, 0.9) !important;
  box-shadow: none !important;
}

body.site-monochrome .short-film-title-tab:not(.is-selected):hover,
body.site-monochrome .short-film-title-tab:not(.is-selected):focus-visible {
  background: #080808 !important;
}

@media (max-width: 800px) {
  .short-film-title-list {
    --short-film-tab-width: clamp(13rem, 20vw, 22rem);
    --short-film-control-height: clamp(13rem, 19vw, 17rem);
    --short-film-index-label-gap: clamp(0.45rem, 1.4vw, 0.7rem);
    --short-film-index-label-width: clamp(0.95rem, 3vw, 1.2rem);
  }

  .home-short-film-controls {
    position: relative;
    left: 0;
    top: auto;
    order: 2;
    align-self: flex-start;
    margin: clamp(1.2rem, 3.2vw, 2rem) 0 0;
    transform: none;
  }

  .home-short-film-controls::after {
    left: 0;
  }

  .home-short-film-controls .short-film-title-main {
    padding-left: clamp(0.38rem, 0.8vw, 0.68rem);
  }

  .home-short-film-controls .short-film-title-sub {
    padding-left: clamp(0.42rem, 0.8vw, 0.68rem);
  }

  .short-film-title-list {
    border-left: 0;
    border-top: 0;
    justify-self: end;
    width: var(--short-film-tab-width);
    min-width: var(--short-film-tab-width);
    padding: 0;
    gap: 0;
  }

  .short-film-title-list::after {
    top: 2px;
    right: auto;
    left: calc(100% + var(--short-film-index-label-gap));
    height: auto;
    font-size: clamp(1rem, 3.65vw, 1.18rem);
  }

  .short-film-title-tab {
    --short-film-title-pad-x: 0.46rem;
    min-height: 0;
    padding: 0.28rem 0;
  }

  .short-film-title-main {
    font-size: clamp(1.34rem, 5.8vw, 1.88rem);
    line-height: 0.78;
  }

  .short-film-title-sub {
    font-size: clamp(0.33rem, 1.55vw, 0.43rem);
  }
}

/* Home block-index direction */
body.home-index-page {
  min-height: 100vh;
}

body.home-index-page .container {
  min-height: 100vh;
  justify-content: flex-start;
}

body.home-index-page main {
  min-height: 100vh;
  overflow: visible;
}

body.home-index-page .credits {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem) 0;
  box-sizing: border-box;
  overflow: visible;
}

body.home-index-page .short-films-row,
body.home-index-page .floating-page-nav,
body.home-index-page .credit-scroll-spacer {
  display: none !important;
}

body.home-index-page .floating-page-nav {
  --home-index-border-width: clamp(0.12rem, 0.22vw, 0.2rem);
  --home-index-border: var(--home-index-border-width) solid #fff;
  right: 0;
  bottom: 0;
  z-index: 5000;
  display: flex !important;
  gap: 0;
}

body.home-index-page .floating-page-link {
  width: clamp(2.6rem, 4.4vw, 3.35rem);
  height: clamp(2.6rem, 4.4vw, 3.35rem);
  aspect-ratio: 1 / 1;
  border: var(--home-index-border);
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background:
    linear-gradient(rgba(2, 4, 8, 0.74), rgba(2, 4, 8, 0.74)),
    rgba(255, 255, 255, 0.035);
  color: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px) saturate(122%);
  backdrop-filter: blur(16px) saturate(122%);
  transform-origin: bottom right;
}

body.home-index-page .floating-page-link svg {
  width: 58%;
  height: 58%;
}

body.home-index-page .floating-page-link:hover,
body.home-index-page .floating-page-link:focus-visible {
  background:
    linear-gradient(rgba(2, 4, 8, 0.74), rgba(2, 4, 8, 0.74)),
    rgba(255, 255, 255, 0.035) !important;
  border-color: currentColor !important;
  color: #ffbf5e;
  transform: none;
}

body.home-index-page .home-index-shell {
  --home-index-width: clamp(15rem, 20vw, 20rem);
  --home-grid-width: min(76rem, calc(100vw - clamp(1rem, 4vw, 3rem)));
  --home-index-border-width: clamp(0.12rem, 0.22vw, 0.2rem);
  --home-index-border: var(--home-index-border-width) solid #fff;
  position: relative;
  z-index: 10;
  display: flex;
  width: 100vw;
  max-width: 100vw;
  flex: 0 0 100vw;
  min-height: calc(100vh - clamp(2rem, 6vw, 4rem));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: clamp(0.65rem, 1.6vh, 1.25rem);
  padding-bottom: clamp(3.7rem, 6.8vh, 5.2rem);
  box-sizing: border-box;
  color: #ff6aa8;
}

body.home-index-page .home-index-shell > header {
  position: relative;
  inset: auto;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: min-content min-content;
  width: var(--home-index-width);
  padding: 0 0 0.38rem;
  gap: 0.04rem 0.55rem;
  border: 0;
  box-sizing: border-box;
  background: transparent;
  color: currentColor;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.home-index-page .home-index-shell .header-title-stack {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
  justify-self: start;
  gap: 0.02rem;
}

body.home-index-page .home-index-shell header h1 {
  color: currentColor;
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  line-height: 0.88;
  text-shadow: none;
}

body.home-index-page .home-index-shell.has-selected-film header h1 {
  cursor: pointer;
}

body.home-index-page .home-index-shell.has-selected-film header h1:focus-visible {
  outline: var(--home-index-border-width) solid currentColor;
  outline-offset: 0.18rem;
}

body.home-index-page .home-index-shell header h3 {
  color: rgba(232, 247, 255, 0.74);
  font-size: clamp(0.5rem, 0.74vw, 0.6rem);
  line-height: 0.9;
  margin: 0;
}

body.home-index-page .home-index-shell header .socials {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
  justify-self: end;
  gap: clamp(0.56rem, 1.25vw, 0.8rem);
  transition: gap 220ms ease;
}

body.home-index-page .home-index-shell.has-selected-film header .socials {
  gap: clamp(0.56rem, 1.25vw, 0.8rem);
}

body.home-index-page .home-index-shell header .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
}

body.home-index-page .home-index-shell header .icon {
  width: auto;
  height: 0.78rem;
  fill: currentColor;
}

body.home-index-page .home-index-shell header .imdb-icon {
  height: 0.84rem;
}

body.home-index-page .home-index-shell > .home-socials {
  display: flex;
  width: var(--home-index-width);
  justify-content: flex-end;
  gap: clamp(0.56rem, 1.25vw, 0.8rem);
  margin: clamp(0.32rem, 0.9vw, 0.62rem) 0 0;
  color: currentColor;
}

body.home-index-page .home-index-shell.has-selected-film > .home-socials {
  width: min(var(--home-grid-width), var(--home-strict-width, var(--home-grid-width)));
  gap: clamp(0.56rem, 1.25vw, 0.8rem);
}

body.home-index-page .home-index-shell > .home-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

body.home-index-page .home-index-shell > .home-socials .icon {
  width: auto;
  height: 0.78rem;
  fill: currentColor;
}

body.home-index-page .home-index-shell > .home-socials .imdb-icon {
  height: 0.84rem;
}

body.home-index-page .home-work-grid {
  display: flex;
  width: var(--home-index-width);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

body.home-index-page .home-work-grid:not(.is-active) {
  max-height: min(78vh, 44rem);
}

body.home-index-page .home-work-grid.is-active {
  --home-strict-width: var(--home-grid-width);
  --home-strict-height: clamp(27rem, 74vh, 42rem);
  --home-index-col: clamp(11.5rem, 16vw, 15rem);
  --home-poster-col: clamp(14rem, 24vw, 20rem);
  display: grid;
  width: min(var(--home-grid-width), var(--home-strict-width));
  height: var(--home-strict-height);
  min-height: 0;
  grid-template-columns:
    var(--home-index-col)
    minmax(0, 1fr)
    minmax(0, 1fr)
    var(--home-poster-col);
  grid-template-rows: 0.62fr 0.9fr 0.78fr 1.5fr;
  grid-template-areas:
    "index video video poster"
    "index video video poster"
    "index stills stills poster"
    "contact stills stills poster";
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  color: #ff6aa8;
  overflow: hidden;
}

body.home-index-page .home-short-film-controls {
  --short-film-border-color: #fff;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  z-index: 3;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: clamp(11.5rem, 34vh, 17rem);
  flex: 0 0 auto;
  order: 1;
  align-self: stretch;
  justify-self: stretch;
  margin: 0;
  transform: none !important;
}

body.home-index-page .home-work-grid.is-active .home-short-film-controls {
  grid-area: index;
  width: 100%;
  height: 100%;
  align-self: start;
}

body.home-index-page .home-short-film-controls::after {
  content: "";
  display: none;
}

body.home-index-page .short-film-title-tab {
  --short-film-title-pad-y: clamp(0.24rem, 0.44vw, 0.38rem);
  --short-film-title-pad-x: clamp(0.52rem, 0.9vw, 0.8rem);
  box-sizing: border-box;
  min-height: 0;
  padding: var(--short-film-title-pad-y) 0;
  border-width: var(--home-index-border-width);
  border-color: var(--short-film-border-color);
  background: rgba(6, 12, 18, 0.9);
  color: currentColor;
  box-shadow: none;
}

body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected),
body.home-index-page.site-monochrome .home-film-cell,
body.home-index-page.site-monochrome .contact.credit-row {
  border-color: #fff !important;
}

body.home-index-page .short-film-title-tab:not(.is-selected):hover,
body.home-index-page .short-film-title-tab:not(.is-selected):focus-visible {
  color: #ffbf5e !important;
  border-color: var(--short-film-border-color);
  background: rgba(6, 12, 18, 0.9);
  box-shadow: none;
}

body.home-index-page .short-film-title-tab.is-selected,
body.home-index-page .short-film-title-tab.is-selected:hover,
body.home-index-page .short-film-title-tab.is-selected:focus-visible {
  color: currentColor !important;
  background: transparent !important;
  border-color: var(--short-film-border-color) !important;
  box-shadow: none !important;
}

body.home-index-page .short-film-title-main {
  padding-inline: var(--short-film-title-pad-x);
  font-size: clamp(1.22rem, 1.78vw, 1.82rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
}

body.home-index-page .short-film-title-sub {
  padding-inline: var(--short-film-title-pad-x);
  color: currentColor;
  font-size: clamp(0.4rem, 0.58vw, 0.52rem);
  line-height: 0.95;
}

body.home-index-page .short-film-title-info {
  display: block;
  max-height: 0;
  width: 100%;
  padding-inline: var(--short-film-title-pad-x);
  overflow: hidden;
  box-sizing: border-box;
  color: rgba(244, 244, 244, 0.82);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.46rem, 0.58vw, 0.56rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  opacity: 0;
  text-transform: none;
  transition:
    max-height 320ms ease,
    opacity 220ms ease;
}

body.home-index-page .short-film-title-description {
  display: -webkit-box;
  position: relative;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  text-overflow: ellipsis;
}

body.home-index-page .short-film-title-read-more {
  display: flex;
  width: calc(100% + (var(--short-film-title-pad-x) * 2));
  min-height: clamp(1.18rem, 2.25vw, 1.55rem);
  align-items: center;
  justify-content: center;
  margin-top: auto;
  margin-bottom: calc(var(--short-film-title-pad-y) * -1);
  margin-inline: calc(var(--short-film-title-pad-x) * -1);
  padding-inline: var(--short-film-title-pad-x);
  border: 0;
  border-top: var(--home-index-border-width) solid #fff;
  background: #061018;
  color: #73f1ff;
  box-sizing: border-box;
  font-family: var(--index-display-font);
  font-size: clamp(0.64rem, 1.05vw, 0.86rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.85;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease;
}

body.home-index-page .short-film-title-read-more:hover,
body.home-index-page .short-film-title-read-more:focus-visible {
  border-color: #fff;
  background: #061018;
  color: #ffbf5e;
  outline: 0;
  transform: none;
}

body.home-index-page .short-film-title-tab.is-selected {
  flex: 2.6 1 0;
  justify-content: flex-start;
  padding-top: clamp(0.34rem, 0.58vw, 0.52rem);
}

body.home-index-page .short-film-title-tab.is-selected .short-film-title-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-height: none;
  opacity: 1;
}

body.home-index-page .contact.credit-row {
  grid-area: contact;
  order: 2;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: var(--home-index-border);
  border-top: 0;
  box-sizing: border-box;
  background:
    linear-gradient(rgba(3, 5, 10, 0.8), rgba(3, 5, 10, 0.8)),
    var(--section-bg);
  color: currentColor;
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  backdrop-filter: blur(16px) saturate(118%);
  overflow: hidden;
}

body.home-index-page .contact-wrap {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.26rem;
  margin: 0;
  padding: 0.48rem;
  box-sizing: border-box;
}

body.home-index-page .contact-heading {
  gap: 0.08rem;
}

body.home-index-page .contact-heading p {
  font-size: clamp(0.52rem, 0.75vw, 0.64rem);
  line-height: 1.1;
  margin-block: 0;
}

body.home-index-page .contact-heading .socials {
  gap: 0.42rem;
}

body.home-index-page .contact-heading .icon {
  height: 0.7rem;
}

body.home-index-page .contact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 0.22rem;
  width: 100%;
  padding: 0;
}

body.home-index-page .contact-form input[type="text"],
body.home-index-page .contact-form input[type="email"] {
  height: 1.34rem;
  font-size: 0.62rem;
}

body.home-index-page .contact-form textarea {
  height: 1.9rem;
  font-size: 0.6rem;
}

body.home-index-page .submit {
  height: 1.24rem;
  border: var(--home-index-border) !important;
  border-radius: 0;
  background: #030303 !important;
  color: rgba(244, 244, 244, 0.92) !important;
  font-family: "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: color 180ms ease;
}

body.home-index-page .submit::before,
body.home-index-page .submit::after {
  display: none !important;
}

body.home-index-page .submit:hover,
body.home-index-page .submit:focus-visible {
  border-color: #fff !important;
  background: #030303 !important;
  color: #ffbf5e !important;
  animation: none !important;
  box-shadow: none !important;
}

body.home-index-page footer {
  margin-top: 0;
  padding-block: 0.2rem 0.45rem;
  font-size: 0.56rem;
}

body.home-index-page .footer-logo {
  font-size: 0.72rem;
}

body.home-index-page .home-index-shell > footer {
  position: static;
  inset: auto;
  z-index: 9;
  width: var(--home-index-width);
  max-width: var(--home-index-width);
  margin: clamp(1.1rem, 4vw, 1.8rem) auto 0;
  padding-block: 0.18rem 0.35rem;
  pointer-events: auto;
}

body.home-index-page .home-work-grid.is-active .contact.credit-row {
  border: var(--home-index-border);
  overflow: hidden;
}

body.home-index-page .home-work-grid.is-active .contact-wrap {
  gap: 0.16rem;
  padding: 0.34rem;
}

body.home-index-page .home-work-grid.is-active .contact-heading p {
  font-size: 0.48rem;
  line-height: 1;
}

body.home-index-page .home-work-grid.is-active .contact-heading .socials {
  margin-top: 0.04rem;
}

body.home-index-page .home-work-grid.is-active .contact-heading .icon {
  height: 0.58rem;
}

body.home-index-page .home-work-grid.is-active .contact-form {
  gap: 0.14rem;
}

body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
body.home-index-page .home-work-grid.is-active .contact-form input[type="email"] {
  height: 1rem;
  font-size: 0.52rem;
  padding-left: 0.22rem;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  height: 1.35rem;
  font-size: 0.5rem;
  padding: 0.16rem 0 0 0.22rem;
}

body.home-index-page .home-work-grid.is-active .submit {
  height: 0.92rem;
  font-size: 0.48rem;
}

body.home-index-page .home-work-grid.is-active footer {
  padding-block: 0.1rem 0.2rem;
  font-size: 0.42rem;
}

body.home-index-page .home-work-grid.is-active .footer-logo {
  font-size: 0.54rem;
}

body.home-index-page .home-film-cell {
  min-width: 0;
  min-height: 0;
  border: var(--home-index-border);
  background: rgba(2, 4, 8, 0.68);
  box-sizing: border-box;
  overflow: hidden;
}

body.home-index-page .home-film-cell[hidden] {
  display: none !important;
}

body.home-index-page .home-film-video-cell {
  grid-area: video;
  display: grid;
  place-items: stretch;
  background: #000;
}

body.home-index-page .home-film-video-frame {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  place-items: stretch;
  overflow: hidden;
  background: #000;
}

body.home-index-page .home-film-video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  object-fit: contain;
  background: #000;
}

body.home-index-page iframe.home-film-video {
  height: 100%;
}

body.home-index-page .home-video-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--home-index-border);
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.home-index-page .home-video-control {
  min-width: 0;
  height: clamp(1.15rem, 2.1vw, 1.48rem);
  padding: 0;
  border: 0;
  border-right: var(--home-index-border);
  border-radius: 0;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.52rem, 0.82vw, 0.68rem);
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease;
}

body.home-index-page .home-video-control:last-child {
  border-right: 0;
}

body.home-index-page .home-video-control:hover,
body.home-index-page .home-video-control:focus-visible {
  background: transparent !important;
  color: #ffbf5e !important;
  outline: 0;
  transform: none;
}

body.home-index-page .home-film-text-cell {
  display: none !important;
  grid-area: text;
}

body.home-index-page .home-film-text-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.42rem;
  padding: clamp(0.42rem, 0.72vw, 0.68rem);
  color: rgba(232, 247, 255, 0.86);
  text-align: left;
}

body.home-index-page .home-work-grid.is-active .home-film-text-cell {
  justify-content: flex-start;
  gap: clamp(0.22rem, 0.44vw, 0.36rem);
  padding: clamp(0.34rem, 0.58vw, 0.52rem);
}

body.home-index-page .home-work-grid.is-active .home-film-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: clamp(0.48rem, 0.62vw, 0.6rem);
  line-height: 1.12;
}

body.home-index-page .home-work-grid.is-active .home-film-meta {
  gap: 0.12rem 0.36rem;
  font-size: clamp(0.4rem, 0.5vw, 0.48rem);
  line-height: 1;
}

body.home-index-page .home-work-grid.is-active .home-film-project-link {
  margin-top: auto;
  font-size: clamp(0.42rem, 0.5vw, 0.48rem);
}

body.home-index-page .home-film-description {
  margin: 0;
  font-size: clamp(0.58rem, 0.78vw, 0.74rem);
  line-height: 1.16;
}

body.home-index-page .home-film-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.18rem 0.55rem;
  margin: 0;
  font-size: clamp(0.48rem, 0.62vw, 0.58rem);
  line-height: 1.08;
}

body.home-index-page .home-film-meta dt {
  color: rgba(232, 247, 255, 0.5);
  font-weight: 900;
  text-transform: uppercase;
}

body.home-index-page .home-film-meta dd {
  margin: 0;
  color: rgba(232, 247, 255, 0.82);
}

body.home-index-page .home-film-project-link {
  width: fit-content;
  color: currentColor;
  font-size: clamp(0.5rem, 0.62vw, 0.6rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

body.home-index-page .home-film-poster-cell {
  grid-area: poster;
  display: grid;
  place-items: stretch;
  background: #000;
}

body.home-index-page .home-film-poster-link {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: stretch;
  color: inherit;
  text-decoration: none;
}

body.home-index-page .home-film-poster-link.is-empty {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08) 0 1px,
      transparent 1px 0.5rem
    );
}

body.home-index-page .home-film-poster {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  background: #000;
  box-shadow: none;
}

body.home-index-page .home-film-stills-cell {
  grid-area: stills;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

body.home-index-page .home-stills-row {
  position: relative;
  flex: 1 1 50%;
  min-height: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

body.home-index-page .home-stills-row:hover,
body.home-index-page .home-stills-row:focus-within {
  scrollbar-color: rgba(255, 255, 255, 0.42) transparent;
  scrollbar-width: thin;
}

body.home-index-page .home-stills-row + .home-stills-row {
  border-top: var(--home-index-border);
}

body.home-index-page .home-stills-row::-webkit-scrollbar {
  height: 0;
}

body.home-index-page .home-stills-row:hover::-webkit-scrollbar,
body.home-index-page .home-stills-row:focus-within::-webkit-scrollbar {
  height: 0.32rem;
}

body.home-index-page .home-stills-row::-webkit-scrollbar-track {
  background: transparent;
}

body.home-index-page .home-stills-row::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 0;
}

body.home-index-page .home-stills-row:hover::-webkit-scrollbar-thumb,
body.home-index-page .home-stills-row:focus-within::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.42);
}

body.home-index-page .home-stills-track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: stretch;
  animation: none;
}

body.home-index-page .home-stills-row {
  will-change: scroll-position;
}

body.home-index-page .home-stills-item {
  display: flex;
  flex: 0 0 auto;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.home-index-page .home-stills-item + .home-stills-item {
  border-left: var(--home-index-border);
}

body.home-index-page .home-film-stills-cell img {
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  border-radius: 0;
  object-fit: cover;
  scroll-snap-align: none;
  cursor: pointer;
}

body.home-index-page .home-film-stills-cell img + img {
  border-left: 0;
}

body.home-index-page .home-film-stills-cell img:focus-visible {
  outline: var(--home-index-border-width) solid #73f1ff;
  outline-offset: calc(-1 * var(--home-index-border-width));
}

body.home-index-page .home-index-shell.has-selected-film {
  justify-content: flex-start;
  min-height: auto;
  padding-top: clamp(0.25rem, 0.8vw, 0.65rem);
  padding-bottom: clamp(3.6rem, 7vh, 5.4rem);
}

body.home-index-page .home-index-shell.has-selected-film > header {
  width: min(var(--home-grid-width), var(--home-strict-width, var(--home-grid-width)));
  margin-bottom: clamp(2.25rem, 7vh, 4.25rem);
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 0.34rem;
}

body.home-index-page.site-monochrome .home-index-shell,
body.home-index-page.site-monochrome .home-index-shell > header,
body.home-index-page.site-monochrome .contact.credit-row {
  color: rgba(244, 244, 244, 0.92);
}

body.home-index-page.site-monochrome .home-index-shell > header,
body.home-index-page.site-monochrome .contact.credit-row,
body.home-index-page.site-monochrome .home-film-cell,
body.home-index-page.site-monochrome .short-film-title-tab {
  background: rgba(3, 3, 3, 0.92);
}

body.home-index-page.site-monochrome .home-index-shell > header {
  background: transparent;
}

@media (max-width: 800px) {
  body.home-index-page .home-index-shell {
    --home-index-width: min(21rem, calc(100vw - 2rem));
    --home-index-border-width: calc(clamp(0.12rem, 0.22vw, 0.2rem) + 2px);
    --home-index-border: var(--home-index-border-width) solid #fff;
  }

  body.home-index-page .home-work-grid.is-active {
    width: var(--home-index-width);
    max-width: calc(100vw - 2rem);
    height: auto;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "index"
      "video"
      "poster"
      "stills"
      "contact";
  }

  body.home-index-page .home-work-grid.is-active .home-short-film-controls {
    height: clamp(15rem, 42vh, 22rem);
  }

  body.home-index-page .home-film-cell,
  body.home-index-page .home-work-grid.is-active .contact.credit-row {
    border: var(--home-index-border);
    border-top: 0;
  }

  body.home-index-page .home-film-video-cell {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  body.home-index-page .home-film-text-cell {
    min-height: 8rem;
  }

  body.home-index-page .home-film-poster-cell {
    height: auto;
    aspect-ratio: var(--home-poster-ratio, 0.75);
  }

  body.home-index-page .home-film-stills-cell {
    height: clamp(18rem, 80vw, 24rem);
    min-height: 0;
    overflow: hidden;
  }

  body.home-index-page .home-film-stills-cell img {
    aspect-ratio: 4 / 3;
  }

body.home-index-page .home-work-grid.is-active .contact.credit-row {
    min-height: 12rem;
  }
}

/* Project pages: block media box direction */
body.home-index-page .submit,
body.project-page .submit {
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

body.home-index-page .submit:hover,
body.home-index-page .submit:focus-visible,
body.project-page .submit:hover,
body.project-page .submit:focus-visible {
  color: #ffbf5e !important;
  background: transparent !important;
  border-color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

body.project-page {
  --project-block-width: min(76rem, calc(100vw - clamp(1rem, 4vw, 3rem)));
  --project-block-border-width: clamp(0.12rem, 0.22vw, 0.2rem);
  --project-block-border: var(--project-block-border-width) solid #fff;
}

body.project-page .container {
  min-height: 100vh;
  justify-content: flex-start;
}

body.project-page header {
  position: relative;
  inset: auto;
  width: var(--project-block-width);
  margin: clamp(1rem, 2.6vw, 1.8rem) auto 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  background: transparent;
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.project-page header h1,
body.project-page header h1 a,
body.project-page header h3,
body.project-page header .socials a {
  color: #fff;
  text-shadow: none;
}

body.project-page .project-title-logo {
  margin-top: clamp(1.45rem, 4vw, 3.4rem);
  margin-bottom: clamp(0.55rem, 1.4vw, 1.15rem);
}

body.project-page[data-project="incidents"] .project-title-logo {
  font-weight: 900;
  letter-spacing: 0.045em;
}

body.project-page .project-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

body.project-page .project-hero {
  width: var(--project-block-width);
  padding: 0;
  margin: 0 auto clamp(0.7rem, 1.6vw, 1.15rem);
  align-items: stretch;
  justify-content: flex-start;
}

body.project-page .project-intro {
  width: 100%;
  margin: 0;
  text-align: left;
}

body.project-page .project-intro p {
  width: min(46rem, 100%);
  margin: 0;
  color: #fff;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.78rem, 1vw, 0.96rem);
  font-weight: 700;
  line-height: 1.35;
}

body.project-page .project-work-box {
  width: var(--project-block-width);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  border: var(--project-block-border);
  background: rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  overflow: hidden;
}

body.project-page .project-media-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(13rem, 22vw, 18rem);
  grid-template-rows: auto minmax(0, clamp(20rem, 46vw, 32rem));
  grid-template-areas:
    "video video"
    "stills poster";
  min-height: 0;
  background: rgba(3, 5, 10, 0.26);
}

body.project-page .project-video-cell {
  grid-area: video;
  min-width: 0;
  border-bottom: var(--project-block-border);
  background: #000;
}

body.project-page .project-slideshow-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

body.project-page .project-slideshow-frame::after {
  display: none;
}

body.project-page .project-slideshow-frame .feature-video {
  object-fit: contain;
}

body.project-page .project-stills-section {
  grid-area: stills;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-right: var(--project-block-border);
  background: rgba(3, 5, 10, 0.36);
  overflow: hidden;
}

body.project-page .project-stills-track {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}

body.project-page .project-stills-column {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
  scrollbar-width: thin;
}

body.project-page .project-stills-column + .project-stills-column {
  border-left: var(--project-block-border);
}

body.project-page .project-stills-column::-webkit-scrollbar {
  width: 0.32rem;
}

body.project-page .project-stills-column::-webkit-scrollbar-track {
  background: transparent;
}

body.project-page .project-stills-column::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0;
}

body.project-page .project-still {
  width: 100% !important;
  height: auto;
  min-height: clamp(7rem, 12vw, 10rem);
  margin: 0;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  border-bottom: var(--project-block-border);
  box-sizing: border-box;
  overflow: hidden;
  scroll-snap-align: start;
}

body.project-page .project-still img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

body.project-page .project-details-section {
  grid-area: poster;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  margin: 0;
  padding: clamp(0.7rem, 1.45vw, 1.1rem);
  background: #000;
  box-sizing: border-box;
  overflow: hidden;
}

body.project-page .project-poster-large {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #000;
}

body.project-page .project-poster-large img {
  width: auto;
  height: auto;
  max-width: min(100%, 17rem);
  max-height: min(100%, 28rem);
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
}

body.project-page .project-details-copy {
  width: 100%;
  margin: 0;
  padding: clamp(0.6rem, 1.25vw, 0.95rem);
  border-top: var(--project-block-border);
  box-sizing: border-box;
  background: rgba(3, 5, 10, 0.54);
  color: #fff;
}

body.project-page .project-contact {
  width: var(--project-block-width);
  margin: clamp(0.95rem, 2vw, 1.45rem) auto 0;
  border: var(--project-block-border);
  background: rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

body.project-page .project-contact .contact-wrap {
  width: 100%;
}

body.project-page .project-contact .submit {
  border: var(--project-block-border);
  border-radius: 0;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none;
}

body.project-page .project-contact .submit::before,
body.project-page .project-contact .submit::after {
  display: none;
}

@media (max-width: 800px) {
  body.project-page {
    --project-block-width: min(100%, calc(100vw - 1rem));
  }

  body.project-page header {
    margin-top: 1rem;
  }

  body.project-page .project-title-logo {
    max-width: min(92vw, 34rem);
    margin-top: clamp(1.4rem, 5vw, 2.35rem);
    margin-bottom: clamp(0.65rem, 2vw, 1rem);
    font-size: clamp(2.35rem, 12vw, 4rem);
    line-height: 1;
    white-space: normal;
  }

  body.project-page .project-media-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 19rem) minmax(0, 22rem);
    grid-template-areas:
      "video"
      "stills"
      "poster";
  }

  body.project-page .project-stills-section {
    border-right: 0;
    border-bottom: var(--project-block-border);
  }

  body.project-page .project-stills-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.project-page .project-still {
    width: 100% !important;
    height: auto;
    min-height: clamp(6rem, 28vw, 8.5rem);
    border-right: 0;
    border-bottom: var(--project-block-border);
  }

  body.project-page .project-poster-large img {
    max-width: min(100%, 15.5rem);
    max-height: min(100%, 20rem);
  }

  body.project-page .project-details-copy {
    padding: 0.7rem;
  }
}

/* Block-index and photography-page refinements */
body.home-index-page .home-work-grid {
  position: relative;
}

body.home-index-page .home-work-grid.is-active {
  overflow: visible !important;
}

body.home-index-page .home-work-grid::before {
  content: "Index";
  position: absolute;
  top: 4px;
  left: calc(-1 * (clamp(0.88rem, 1.25vw, 1.08rem) + 0.18rem));
  z-index: 6;
  width: max-content;
  color: #fff;
  font-family: "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.88rem, 1.45vw, 1.28rem);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: none;
  pointer-events: none;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: top left;
}

body.gallery-page {
  --gallery-block-width: min(76rem, calc(100vw - clamp(1rem, 4vw, 3rem)));
  --gallery-block-border-width: clamp(0.12rem, 0.22vw, 0.2rem);
  --gallery-block-border: var(--gallery-block-border-width) solid #fff;
  --gallery-image-gap: clamp(0.28rem, 0.65vw, 0.48rem);
}

body.gallery-page .container {
  min-height: 100vh;
  justify-content: flex-start;
}

body.gallery-page header {
  position: relative;
  inset: auto;
  width: var(--gallery-block-width);
  margin: clamp(1rem, 3vw, 2rem) auto 0;
  padding: 0 0 0.42rem;
  border: 0;
  box-sizing: border-box;
  background: transparent;
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.gallery-page header h1,
body.gallery-page header h1 a,
body.gallery-page header h3,
body.gallery-page header .socials a {
  color: #fff;
  text-shadow: none;
}

body.gallery-page header h3 {
  color: #fff;
}

body.gallery-page header .site-logo {
  color: #fff;
  background-image: none;
  -webkit-text-fill-color: #fff;
  animation: none;
  filter: none;
}

body.gallery-page .gallery-main {
  padding-bottom: clamp(3.2rem, 6vw, 5rem);
}

body.gallery-page .gallery-page-section {
  width: var(--gallery-block-width);
  min-height: 0;
  margin: clamp(1.05rem, 2.5vw, 1.9rem) auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

body.gallery-page .gallery-art-grid {
  width: 100%;
  gap: var(--gallery-image-gap);
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

body.gallery-page .gallery-tile {
  border: 0 !important;
  box-shadow: none;
  background: transparent !important;
}

body.gallery-page .page-footer {
  width: var(--gallery-block-width);
  padding-inline: 0;
  color: #fff;
}

body.gallery-page .floating-page-nav {
  right: 0;
  bottom: 0;
  gap: 0;
  z-index: 5000;
}

body.gallery-page .floating-page-link {
  width: clamp(2.6rem, 4.4vw, 3.35rem);
  height: clamp(2.6rem, 4.4vw, 3.35rem);
  aspect-ratio: 1 / 1;
  border: var(--gallery-block-border);
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background:
    linear-gradient(rgba(2, 4, 8, 0.74), rgba(2, 4, 8, 0.74)),
    rgba(255, 255, 255, 0.035);
  color: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px) saturate(122%);
  backdrop-filter: blur(16px) saturate(122%);
  transform: none;
}

body.gallery-page .floating-page-link:hover,
body.gallery-page .floating-page-link:focus-visible {
  border-color: #fff;
  background:
    linear-gradient(rgba(2, 4, 8, 0.74), rgba(2, 4, 8, 0.74)),
    rgba(255, 255, 255, 0.035) !important;
  color: #ffbf5e;
  transform: none;
  animation: none;
  box-shadow: none;
}

@media (max-width: 800px) {
  body.home-index-page .home-index-shell:not(.has-selected-film) {
    justify-content: flex-start;
    padding-top: clamp(0.85rem, 4.5vh, 1.65rem);
  }

  body.home-index-page .home-index-shell:not(.has-selected-film) > header {
    margin-bottom: clamp(2.2rem, 8.5vh, 4rem);
  }

  body.home-index-page .home-work-grid::before {
    top: 4px;
    left: calc(-1 * (clamp(0.72rem, 2.8vw, 0.95rem) + 0.16rem));
    font-size: clamp(0.8rem, 3.2vw, 1rem);
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: top left;
  }
}

@media (max-width: 800px) {
  body.gallery-page {
    --gallery-block-width: min(100%, calc(100vw - 1rem));
  }

  body.gallery-page header {
    margin-top: 1rem;
  }

  body.gallery-page .gallery-page-section {
    margin-top: 1rem;
    padding: 0;
  }

  body.gallery-page .gallery-art-grid {
    width: 100%;
    align-items: stretch;
  }

  body.gallery-page .gallery-tile,
  body.gallery-page .gallery-tile.is-small,
  body.gallery-page .gallery-tile.is-square,
  body.gallery-page .gallery-tile.is-lead,
  body.gallery-page .gallery-tile.is-large,
  body.gallery-page .gallery-tile.is-wide,
  body.gallery-page .gallery-tile.is-tall,
  body.gallery-page .gallery-tile.is-portrait {
    width: 100%;
    max-width: 100%;
  }
}

body.home-index-page .short-film-title-tab:not(.is-selected):hover,
body.home-index-page .short-film-title-tab:not(.is-selected):focus-visible,
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected):hover,
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected):focus-visible {
  background: var(--home-index-fill) !important;
  color: #ff6aa8 !important;
}

body.home-index-page .home-short-film-controls .short-film-title-tab:not(.is-selected):hover,
body.home-index-page .home-short-film-controls .short-film-title-tab:not(.is-selected):focus-visible {
  color: #ffbf5e !important;
  border-color: var(--short-film-border-color) !important;
  background: rgba(6, 12, 18, 0.9) !important;
  box-shadow: none !important;
}

body.home-index-page.site-monochrome .home-short-film-controls .short-film-title-tab:not(.is-selected):hover,
body.home-index-page.site-monochrome .home-short-film-controls .short-film-title-tab:not(.is-selected):focus-visible {
  border-color: #fff !important;
  background: rgba(3, 3, 3, 0.92) !important;
}

body.home-index-page .short-film-title-read-more:hover,
body.home-index-page .short-film-title-read-more:focus-visible {
  color: #ffbf5e !important;
  border-color: #fff !important;
  background: #061018 !important;
  box-shadow: none !important;
}

/* Keep the stripped-down home index white over the color-reveal background. */
body.home-index-page .home-index-shell,
body.home-index-page .home-work-grid,
body.home-index-page .home-work-grid.is-active,
body.home-index-page .home-index-shell > header,
body.home-index-page .home-index-shell header h1,
body.home-index-page .home-index-shell header h3,
body.home-index-page .home-index-shell > .home-socials,
body.home-index-page .contact.credit-row,
body.home-index-page footer {
  color: #fff !important;
}

body.home-index-page .home-short-film-controls,
body.home-index-page .short-film-title-list {
  --short-film-border-color: #fff !important;
  --short-film-button-color: #fff !important;
}

body.home-index-page .short-film-title-tab,
body.home-index-page .short-film-title-tab:not(.is-selected):hover,
body.home-index-page .short-film-title-tab:not(.is-selected):focus-visible,
body.home-index-page.site-monochrome .short-film-title-tab,
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected):hover,
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected):focus-visible,
body.home-index-page .contact.credit-row,
body.home-index-page.site-monochrome .contact.credit-row {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.home-index-page .short-film-title-read-more,
body.home-index-page .short-film-title-read-more:hover,
body.home-index-page .short-film-title-read-more:focus-visible,
body.home-index-page .submit,
body.home-index-page .submit:hover,
body.home-index-page .submit:focus-visible {
  color: #fff !important;
}

body.home-index-page .home-work-grid {
  background: rgba(0, 0, 0, 0.26);
}

body.home-index-page .home-work-grid.is-active {
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body.home-index-page .short-film-title-tab,
body.home-index-page .short-film-title-tab:not(.is-selected):hover,
body.home-index-page .short-film-title-tab:not(.is-selected):focus-visible,
body.home-index-page .short-film-title-tab.is-selected,
body.home-index-page .short-film-title-tab.is-selected:hover,
body.home-index-page .short-film-title-tab.is-selected:focus-visible,
body.home-index-page .short-film-title-read-more,
body.home-index-page .short-film-title-read-more:hover,
body.home-index-page .short-film-title-read-more:focus-visible,
body.home-index-page .submit,
body.home-index-page .submit:hover,
body.home-index-page .submit:focus-visible,
body.home-index-page .home-video-controls,
body.home-index-page .home-video-control,
body.home-index-page .home-video-control:hover,
body.home-index-page .home-video-control:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

body.home-index-page .home-film-cell,
body.home-index-page .contact.credit-row,
body.home-index-page.site-monochrome .home-film-cell,
body.home-index-page.site-monochrome .contact.credit-row {
  background: transparent !important;
}

/* Stable home index: the reveal affects only the page backdrop and footer mark. */
body.home-index-page .home-index-shell {
  --home-index-fill: rgba(3, 5, 10, 0.54);
  --home-index-fill-hover: rgba(3, 5, 10, 0.54);
  color: #fff !important;
}

body.home-index-page .home-index-shell > header,
body.home-index-page .home-index-shell header h1,
body.home-index-page .home-index-shell header h3,
body.home-index-page .home-index-shell > .home-socials,
body.home-index-page .home-index-shell > .home-socials a,
body.home-index-page .home-index-shell .short-film-title-tab,
body.home-index-page .home-index-shell .short-film-title-tab *,
body.home-index-page .home-index-shell .contact.credit-row,
body.home-index-page .home-index-shell .contact.credit-row *,
body.home-index-page .home-index-shell .submit {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  text-shadow: none !important;
}

body.home-index-page .home-work-grid,
body.home-index-page .home-work-grid.is-active {
  background: rgba(0, 0, 0, 0.12) !important;
}

body.home-index-page .short-film-title-tab,
body.home-index-page.site-monochrome .short-film-title-tab,
body.home-index-page .short-film-title-tab:not(.is-selected),
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected),
body.home-index-page .short-film-title-tab:not(.is-selected):hover,
body.home-index-page .short-film-title-tab:not(.is-selected):focus-visible,
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected):hover,
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected):focus-visible,
body.home-index-page .short-film-title-tab.is-selected,
body.home-index-page .short-film-title-tab.is-selected:hover,
body.home-index-page .short-film-title-tab.is-selected:focus-visible,
body.home-index-page .contact.credit-row,
body.home-index-page.site-monochrome .contact.credit-row {
  animation: none !important;
  background: var(--home-index-fill) !important;
  border-color: #fff !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

body.home-index-page .short-film-title-tab:not(.is-selected):hover,
body.home-index-page .short-film-title-tab:not(.is-selected):focus-visible,
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected):hover,
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected):focus-visible {
  background: var(--home-index-fill-hover) !important;
  color: #fff !important;
}

body.home-index-page .short-film-title-tab.is-selected .short-film-title-main,
body.home-index-page .short-film-title-tab.is-selected:hover .short-film-title-main,
body.home-index-page .short-film-title-tab.is-selected:focus-visible .short-film-title-main {
  color: var(--magenta-accent) !important;
}

body.home-index-page .short-film-title-tab.is-selected .short-film-title-sub,
body.home-index-page .short-film-title-tab.is-selected .short-film-title-info {
  color: #fff !important;
}

body.home-index-page .short-film-title-read-more,
body.home-index-page .short-film-title-read-more:hover,
body.home-index-page .short-film-title-read-more:focus-visible,
body.home-index-page .submit,
body.home-index-page .submit:hover,
body.home-index-page .submit:focus-visible {
  background: transparent !important;
  color: #fff !important;
}

body.home-index-page .short-film-title-read-more,
body.home-index-page .short-film-title-read-more:visited {
  color: var(--magenta-accent) !important;
}

body.home-index-page .short-film-title-read-more:hover,
body.home-index-page .short-film-title-read-more:focus-visible {
  color: #ffbf5e !important;
}

body.home-index-page footer {
  color: #fff !important;
}

body.home-index-page.site-monochrome .footer-logo {
  color: #fff !important;
  background-image: none !important;
  -webkit-text-fill-color: #fff !important;
  animation: none !important;
}

body.home-index-page:not(.site-monochrome) .footer-logo {
  color: transparent !important;
  background-image: var(--liquid-ink-gradient) !important;
  background-size: 320% 320% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate !important;
}

@media (max-width: 800px) {
  body.home-index-page .home-work-grid.is-active {
    display: flex !important;
    width: var(--home-index-width) !important;
    max-width: calc(100vw - 2rem) !important;
    height: auto !important;
    flex-direction: column;
    overflow: visible !important;
  }

  body.home-index-page .home-work-grid.is-active .home-short-film-controls {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto;
    overflow: visible;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab {
    flex: 0 0 auto !important;
    min-height: clamp(4rem, 17vw, 5.8rem);
    overflow: hidden;
    transition:
      min-height 300ms ease,
      color 180ms ease;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected {
    min-height: 0 !important;
    overflow: visible;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-info {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
    min-height: clamp(1.45rem, 7vw, 1.9rem);
    align-items: center;
    padding-block: 0.18rem;
    line-height: 1.08 !important;
    overflow: visible;
  }

  body.home-index-page .home-mobile-film-panel {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(0.38rem, 1.4vw, 0.68rem);
    color: #fff;
  }

  body.home-index-page .home-mobile-film-panel .home-film-cell {
    width: 100%;
    border: 0 !important;
    border-top: var(--home-index-border) !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-video-cell {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  body.home-index-page .home-mobile-film-panel .home-film-poster-cell {
    height: auto;
    aspect-ratio: var(--home-poster-ratio, 0.75);
  }

  body.home-index-page .home-mobile-film-panel .home-film-stills-cell {
    height: clamp(16rem, 75vw, 24rem);
    min-height: 0;
    overflow: hidden;
  }

  body.home-index-page .home-work-grid.is-active .contact.credit-row {
    min-height: 12rem;
  }
}

body.home-index-page .submit:hover,
body.home-index-page .submit:focus-visible,
body.project-page .submit:hover,
body.project-page .submit:focus-visible {
  color: #ffbf5e !important;
  background: transparent !important;
  border-color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

body.home-index-page .home-short-film-controls .short-film-title-tab:not(.is-selected),
body.home-index-page .home-short-film-controls .short-film-title-tab:not(.is-selected):hover,
body.home-index-page .home-short-film-controls .short-film-title-tab:not(.is-selected):focus-visible,
body.home-index-page.site-monochrome .home-short-film-controls .short-film-title-tab:not(.is-selected),
body.home-index-page.site-monochrome .home-short-film-controls .short-film-title-tab:not(.is-selected):hover,
body.home-index-page.site-monochrome .home-short-film-controls .short-film-title-tab:not(.is-selected):focus-visible {
  background: var(--home-index-fill, rgba(3, 5, 10, 0.54)) !important;
  border-color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

body.home-index-page .home-short-film-controls .short-film-title-tab:not(.is-selected):hover .short-film-title-main,
body.home-index-page .home-short-film-controls .short-film-title-tab:not(.is-selected):hover .short-film-title-sub,
body.home-index-page .home-short-film-controls .short-film-title-tab:not(.is-selected):focus-visible .short-film-title-main,
body.home-index-page .home-short-film-controls .short-film-title-tab:not(.is-selected):focus-visible .short-film-title-sub {
  color: #ffbf5e !important;
}

/* Restore project pages to the earlier open portfolio layout. */
body.project-page .project-hero {
  width: 100%;
  display: flex;
  min-height: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.55rem);
  margin: 0;
  padding: clamp(1.1rem, 2.6vw, 1.9rem) var(--section-side) clamp(0.95rem, 2vw, 1.45rem);
  background: transparent;
  box-sizing: border-box;
}

body.project-page .project-slideshow-frame {
  position: relative;
  width: min(38rem, 68vw, 100%);
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: #000;
  box-shadow: none;
}

body.project-page .project-slideshow-frame::after {
  display: none;
}

body.project-page .project-slideshow-frame .feature-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

body.project-page .project-intro {
  width: min(44rem, 100%);
  margin: 0;
  text-align: center;
}

body.project-page .project-intro p {
  margin: 0;
  color: rgba(232, 247, 255, 0.82);
  font-size: clamp(0.86rem, 1.2vw, 1rem);
  font-weight: 700;
  line-height: 1.45;
}

body.project-page .project-details-section {
  width: min(46rem, 100%);
  display: grid;
  grid-template-columns: minmax(13rem, 20.5rem) minmax(10rem, 16rem);
  gap: clamp(1rem, 2.8vw, 2.2rem);
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: clamp(0.4rem, 1vw, 0.75rem) auto 0;
  padding: clamp(1rem, 2.6vw, 2.25rem) var(--section-side);
  border: 0;
  background: transparent;
  box-sizing: border-box;
  overflow: visible;
}

body.project-page .project-poster-large {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  background: transparent;
}

body.project-page .project-poster-large img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 31rem;
  display: block;
  object-fit: contain;
  box-shadow: none;
  cursor: pointer;
}

body.project-page .project-details-copy {
  width: min(100%, 16rem);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(232, 247, 255, 0.82);
  text-align: left;
}

body.project-page .project-details-text {
  max-width: 16rem;
  margin: 0;
  color: rgba(232, 247, 255, 0.82);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.86rem, 1.2vw, 1rem);
  font-weight: 700;
  line-height: 1.32;
}

body.project-page .project-details-text p {
  margin: 0 0 0.72rem;
}

body.project-page .project-details-text p:last-child {
  margin-bottom: 0;
}

body.project-page .project-details-text a {
  color: #ffbf5e;
  font-weight: 900;
  text-decoration: none;
}

body.project-page .project-details-text a:hover,
body.project-page .project-details-text a:focus-visible {
  color: #ff6aa8;
  outline: 0;
}

body.project-page .project-stills-section {
  width: 100%;
  min-width: 0;
  min-height: auto;
  margin: 0;
  padding: clamp(0.8rem, 2.2vw, 1.65rem) var(--section-side) clamp(2rem, 4.4vw, 3.4rem);
  border: 0;
  background: transparent;
  box-sizing: border-box;
  overflow: visible;
}

body.project-page .project-stills-track {
  display: grid;
  width: min(var(--content-max), 100%);
  height: auto;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-template-rows: repeat(2, clamp(8.5rem, 15vw, 12rem));
  grid-auto-columns: max-content;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  margin: 0 auto;
  padding: 0 0 1rem var(--scroll-list-inset);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-left: var(--scroll-list-inset);
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(255, 255, 255, 0.42) transparent;
  scrollbar-width: thin;
}

body.project-page .project-stills-track::-webkit-scrollbar {
  height: 0.32rem;
  width: auto;
}

body.project-page .project-stills-track::-webkit-scrollbar-track {
  background: transparent;
}

body.project-page .project-stills-track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.36);
}

body.project-page .project-still {
  width: clamp(13rem, 24vw, 20rem) !important;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
}

body.project-page .project-still img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: pointer;
}

body.project-page .project-contact {
  width: 100%;
  margin-top: clamp(0.65rem, 2vw, 1.2rem);
  border: 0;
  background: transparent;
}

@media (max-width: 800px) {
  body.project-page .project-hero {
    padding: clamp(0.95rem, 3vw, 1.35rem) 1rem 0.8rem;
    gap: 0.9rem;
  }

  body.project-page .project-slideshow-frame {
    width: min(100%, 30rem);
  }

  body.project-page .project-intro {
    width: min(100%, 28rem);
  }

  body.project-page .project-details-section {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.05rem 1rem;
  }

  body.project-page .project-poster-large {
    width: min(16.25rem, 76vw);
    margin-inline: auto;
  }

  body.project-page .project-details-copy {
    width: min(20rem, 100%);
    margin-inline: auto;
  }

  body.project-page .project-stills-section {
    padding: 0.85rem 1rem 2.1rem;
  }

  body.project-page .project-stills-track {
    width: 100%;
    grid-template-rows: minmax(0, clamp(11.4rem, 45vw, 13.5rem));
    grid-auto-columns: max-content;
  }

  body.project-page .project-still {
    width: min(13rem, 72vw) !important;
  }
}

/* Home grid contact form: let the form fill its box instead of feeling miniature. */
body.home-index-page .contact.credit-row {
  display: grid;
  align-items: stretch;
}

body.home-index-page .contact-wrap {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: clamp(0.24rem, 0.55vw, 0.38rem);
  padding: clamp(0.56rem, 1vw, 0.76rem);
}

body.home-index-page .contact-form {
  height: 100%;
  align-self: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows:
    minmax(1.38rem, auto)
    minmax(1.38rem, auto)
    minmax(3rem, 1fr)
    minmax(1.24rem, auto);
  gap: clamp(0.2rem, 0.44vw, 0.3rem);
}

body.home-index-page .contact-form input[type="text"],
body.home-index-page .contact-form input[type="email"] {
  height: clamp(1.32rem, 2vw, 1.56rem);
  font-size: clamp(0.62rem, 0.85vw, 0.72rem);
}

body.home-index-page .contact-form textarea {
  height: 100%;
  min-height: clamp(3rem, 5.4vw, 4.4rem);
  font-size: clamp(0.6rem, 0.78vw, 0.68rem);
}

body.home-index-page .submit {
  height: clamp(1.2rem, 1.8vw, 1.42rem);
  font-size: clamp(0.54rem, 0.72vw, 0.64rem);
}

body.home-index-page .home-work-grid.is-active .contact-wrap {
  gap: clamp(0.22rem, 0.48vw, 0.34rem);
  padding: clamp(0.44rem, 0.82vw, 0.62rem);
}

body.home-index-page .home-work-grid.is-active .contact-heading p {
  font-size: clamp(0.52rem, 0.68vw, 0.6rem);
  line-height: 1.08;
}

body.home-index-page .home-work-grid.is-active .contact-form {
  gap: clamp(0.18rem, 0.38vw, 0.28rem);
}

body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
body.home-index-page .home-work-grid.is-active .contact-form input[type="email"] {
  height: clamp(1.18rem, 1.62vw, 1.4rem);
  font-size: clamp(0.58rem, 0.68vw, 0.66rem);
  padding-left: 0.3rem;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  height: 100%;
  min-height: clamp(2.45rem, 4.7vw, 3.7rem);
  font-size: clamp(0.56rem, 0.64vw, 0.62rem);
  padding: 0.24rem 0 0 0.3rem;
}

body.home-index-page .home-work-grid.is-active .submit {
  height: clamp(1.06rem, 1.38vw, 1.24rem);
  font-size: clamp(0.5rem, 0.6vw, 0.56rem);
}

body.home-index-page .submit,
body.project-page .project-contact .submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border: 0 !important;
  border-top: var(--home-index-border-width, var(--project-block-border-width, 0.16rem)) solid #fff !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ff6aa8 !important;
  font-family: "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.85;
  text-align: center;
  text-transform: uppercase;
  transition: color 180ms ease;
  transform: none !important;
}

body.home-index-page .submit::before,
body.home-index-page .submit::after,
body.project-page .project-contact .submit::before,
body.project-page .project-contact .submit::after {
  display: none !important;
}

body.home-index-page .submit:hover,
body.home-index-page .submit:focus-visible,
body.project-page .project-contact .submit:hover,
body.project-page .project-contact .submit:focus-visible {
  border-color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffbf5e !important;
  outline: 0;
  transform: none !important;
}

body.home-index-page .home-work-grid.is-active .contact-form {
  grid-template-rows:
    minmax(1.18rem, auto)
    minmax(1.18rem, auto)
    clamp(1.75rem, 3vw, 2.35rem)
    minmax(1.06rem, auto);
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  height: clamp(1.75rem, 3vw, 2.35rem);
  min-height: 0;
  max-height: clamp(1.75rem, 3vw, 2.35rem);
}

body.project-page .project-contact {
  width: min(34rem, calc(100vw - 2rem));
  margin: clamp(1rem, 2.2vw, 1.6rem) auto 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.project-page .project-contact .contact-wrap {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding: clamp(0.68rem, 1.35vw, 0.95rem);
  gap: clamp(0.48rem, 1.1vw, 0.72rem);
  box-sizing: border-box;
}

body.project-page .project-contact .contact-heading h2 {
  font-size: clamp(0.88rem, 1.35vw, 1.08rem);
  line-height: 0.9;
}

body.project-page .project-contact .contact-heading p {
  font-size: clamp(0.62rem, 0.82vw, 0.74rem);
  line-height: 1.18;
}

body.project-page .project-contact .contact-form {
  gap: clamp(0.28rem, 0.62vw, 0.42rem);
}

body.project-page .project-contact .contact-form input[type="text"],
body.project-page .project-contact .contact-form input[type="email"] {
  height: clamp(1.28rem, 1.9vw, 1.48rem);
  font-size: clamp(0.62rem, 0.82vw, 0.72rem);
}

body.project-page .project-contact .contact-form textarea {
  min-height: clamp(3.2rem, 5.4vw, 4.4rem);
  font-size: clamp(0.62rem, 0.82vw, 0.72rem);
}

body.project-page .project-contact .submit {
  height: clamp(1.18rem, 1.6vw, 1.36rem);
  font-size: clamp(0.56rem, 0.72vw, 0.66rem);
}

body.project-page .project-page-footer {
  width: min(34rem, calc(100vw - 2rem));
  margin: clamp(0.75rem, 1.8vw, 1.15rem) auto 0;
  padding: 0.4rem 0 clamp(1.35rem, 2.8vw, 2rem);
  color: #fff !important;
  text-align: center;
  font-size: clamp(0.62rem, 0.78vw, 0.74rem);
  line-height: 1.2;
}

body.project-page .project-page-footer .footer-logo {
  color: #fff;
  font-size: clamp(0.78rem, 1.1vw, 0.95rem);
}

@media (max-width: 800px) {
  body.project-page .project-contact,
  body.project-page .project-page-footer {
    width: min(100%, calc(100vw - 1rem));
  }

  body.project-page .project-contact .contact-wrap {
    padding: 0.72rem;
  }
}

/* Restore the floating home/gallery shortcuts to the original round liquid-glass feel. */
.floating-page-nav,
body.home-index-page .floating-page-nav,
body.gallery-page .floating-page-nav,
body.sound-list-page .floating-page-nav {
  position: fixed;
  right: clamp(0.9rem, 2.2vw, 1.45rem);
  bottom: clamp(0.9rem, 2.2vw, 1.45rem);
  z-index: 5000;
  display: flex !important;
  flex-direction: column;
  gap: 0.52rem;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.floating-page-link,
body.home-index-page .floating-page-link,
body.gallery-page .floating-page-link,
body.sound-list-page .floating-page-link {
  width: clamp(2.35rem, 4.5vw, 2.9rem);
  height: auto;
  aspect-ratio: 1 / 1;
  display: inline-grid;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.28), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(6, 9, 18, 0.44) !important;
  color: rgba(224, 253, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0.35rem 0.45rem 0.9rem rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transform-origin: center;
  transition:
    color 600ms ease,
    background 600ms ease,
    box-shadow 600ms ease,
    transform 220ms ease,
    filter 600ms ease;
}

.floating-page-link svg,
body.home-index-page .floating-page-link svg,
body.gallery-page .floating-page-link svg,
body.sound-list-page .floating-page-link svg {
  width: 54%;
  height: 54%;
  display: block;
  fill: currentColor;
}

.floating-page-link:hover,
.floating-page-link:focus-visible,
body.home-index-page .floating-page-link:hover,
body.home-index-page .floating-page-link:focus-visible,
body.gallery-page .floating-page-link:hover,
body.gallery-page .floating-page-link:focus-visible,
body.sound-list-page .floating-page-link:hover,
body.sound-list-page .floating-page-link:focus-visible {
  border: 0 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 38%),
    var(--liquid-ink-gradient),
    rgba(255, 255, 255, 0.08) !important;
  background-size: 140% 140%, 320% 320%, auto !important;
  color: rgba(4, 6, 14, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0.42rem 0.58rem 1rem rgba(0, 0, 0, 0.3),
    0 0 1.15rem rgba(115, 241, 255, 0.16);
  outline: 0;
  transform: translateY(-0.08rem) scale(1.06);
  animation: liquidGlassSurfaceCycle var(--hover-liquid-duration) ease-in-out infinite alternate;
}

/* Closed home index contact: stack identity fields beside a full-height message box. */
body.home-index-page .home-work-grid:not(.is-active) .contact-form {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  grid-template-rows:
    minmax(1.18rem, 1fr)
    minmax(1.18rem, 1fr)
    minmax(1.16rem, auto);
  align-items: stretch;
  gap: clamp(0.18rem, 0.42vw, 0.28rem);
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form input[name="firstName"] {
  grid-column: 1;
  grid-row: 1;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form input[name="email"] {
  grid-column: 1;
  grid-row: 2;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 100%;
  min-height: 0;
  max-height: none;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form .submit {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* Contact form refinement: no last-name field, compact send bar, state-specific grids. */
body.home-index-page .contact-form input[name="firstName"] {
  grid-column: auto;
}

body.home-index-page .submit {
  height: clamp(0.78rem, 1.08vw, 0.95rem);
  min-height: 0;
  margin-inline: 0;
  padding-block: 0;
  border-top-width: var(--home-index-border-width, 0.16rem) !important;
  font-size: clamp(0.46rem, 0.62vw, 0.56rem);
  line-height: 0.82;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  grid-template-rows:
    minmax(1.18rem, 1fr)
    minmax(1.18rem, 1fr)
    minmax(0.78rem, auto);
  align-items: stretch;
  gap: 0;
  column-gap: clamp(0.18rem, 0.42vw, 0.28rem);
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form input[name="firstName"] {
  grid-column: 1;
  grid-row: 1;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form input[name="email"] {
  grid-column: 1;
  grid-row: 2;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 100%;
  min-height: 0;
  max-height: none;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form .submit {
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100%;
  margin-top: 0;
}

body.home-index-page .home-work-grid.is-active .contact-wrap {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}

body.home-index-page .home-work-grid.is-active .contact-form {
  align-self: end;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows:
    minmax(1rem, auto)
    clamp(3.4rem, 6.3vw, 4.65rem)
    minmax(0.72rem, auto);
  gap: 0;
  column-gap: clamp(0.16rem, 0.32vw, 0.24rem);
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"] {
  grid-column: 1;
  grid-row: 1;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
  grid-column: 2;
  grid-row: 1;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  grid-column: 1 / -1;
  grid-row: 2;
  height: clamp(3.4rem, 6.3vw, 4.65rem);
  min-height: 0;
  max-height: clamp(3.4rem, 6.3vw, 4.65rem);
}

body.home-index-page .home-work-grid.is-active .contact-form .submit {
  grid-column: 1 / -1;
  grid-row: 3;
  height: clamp(0.72rem, 0.95vw, 0.84rem);
}

body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
body.home-index-page .home-work-grid.is-active .contact-form input[type="email"] {
  height: clamp(1rem, 1.35vw, 1.16rem);
}

body.project-page .project-contact .contact-form {
  grid-template-rows:
    minmax(1.28rem, auto)
    minmax(3.2rem, auto)
    minmax(1.18rem, auto);
}

/* Let the home send bar connect to the contact box edges while fields stay inset. */
body.home-index-page .contact-wrap {
  --home-contact-pad: clamp(0.56rem, 1vw, 0.76rem);
}

body.home-index-page .home-work-grid.is-active .contact-wrap {
  --home-contact-pad: clamp(0.44rem, 0.82vw, 0.62rem);
}

body.home-index-page .contact-form .submit {
  width: calc(100% + (var(--home-contact-pad) * 2)) !important;
  min-width: calc(100% + (var(--home-contact-pad) * 2));
  max-width: none;
  margin-inline: calc(var(--home-contact-pad) * -1);
  justify-self: start;
  box-sizing: border-box;
}

/* Keep the contact text directly attached to the form stack. */
body.home-index-page .contact-wrap,
body.home-index-page .home-work-grid.is-active .contact-wrap {
  grid-template-rows: auto auto;
  align-content: end;
  gap: clamp(0.04rem, 0.16vw, 0.1rem);
}

body.home-index-page .contact-heading,
body.home-index-page .home-work-grid.is-active .contact-heading {
  align-self: end;
  margin: 0;
  gap: 0;
}

body.home-index-page .contact-heading p,
body.home-index-page .home-work-grid.is-active .contact-heading p {
  margin: 0;
  line-height: 1.02;
}

body.home-index-page .contact-form,
body.home-index-page .home-work-grid.is-active .contact-form {
  align-self: end;
}

/* Let the entire home contact form run edge-to-edge inside the index box. */
body.home-index-page .contact-form,
body.home-index-page .home-work-grid.is-active .contact-form {
  width: calc(100% + (var(--home-contact-pad) * 2));
  margin-inline: calc(var(--home-contact-pad) * -1);
  max-width: none;
}

body.home-index-page .contact-form .submit,
body.home-index-page .home-work-grid.is-active .contact-form .submit {
  width: 100% !important;
  min-width: 0;
  margin-inline: 0;
}

/* Keep secondary pages filling the viewport so their footers land at the page bottom. */
body.project-page,
body.gallery-page,
body.sound-list-page {
  min-height: 100vh;
}

body.project-page .container,
body.gallery-page .container,
body.sound-list-page .container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

body.project-page .project-main,
body.gallery-page .gallery-main,
body.sound-list-page .sound-list-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 0;
}

body.project-page .project-page-footer,
body.gallery-page .page-footer,
body.sound-list-page .page-footer {
  flex-shrink: 0;
  margin-top: auto !important;
}

/* Project contact form: stack name, email, message, and send with no stray row gap. */
body.project-page .project-contact .contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    minmax(1.28rem, auto)
    minmax(1.28rem, auto)
    minmax(3.2rem, auto)
    minmax(1.18rem, auto);
  justify-content: stretch;
  gap: 0;
  row-gap: 0;
  column-gap: 0;
  width: 100%;
  padding: 0;
}

body.project-page .project-contact .contact-form input[name="firstName"],
body.project-page .project-contact .contact-form input[name="email"],
body.project-page .project-contact .contact-form textarea,
body.project-page .project-contact .contact-form .submit {
  grid-column: 1 / -1 !important;
  width: 100%;
  margin-top: 0;
  box-sizing: border-box;
}

body.project-page .project-contact .contact-form input[name="firstName"] {
  grid-row: 1;
}

body.project-page .project-contact .contact-form input[name="email"] {
  grid-row: 2;
}

body.project-page .project-contact .contact-form textarea {
  grid-row: 3;
}

body.project-page .project-contact .contact-form .submit {
  grid-row: 4;
}

/* Home index contact: make adjacent columns touch cleanly in both states. */
body.home-index-page .home-work-grid:not(.is-active) .contact-form,
body.home-index-page .home-work-grid.is-active .contact-form {
  gap: 0;
  column-gap: 0;
  row-gap: 0;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"],
body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
  width: 100%;
  margin-inline: 0;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea {
  margin-inline: 0;
}

/* Open index contact: stretch the form to fill its grid box. */
body.home-index-page .home-work-grid.is-active .contact.credit-row {
  height: 100%;
  min-height: 0;
  display: grid;
  align-items: stretch;
}

body.home-index-page .home-work-grid.is-active .contact-wrap {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
}

body.home-index-page .home-work-grid.is-active .contact-form {
  height: 100%;
  align-self: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows:
    minmax(1rem, auto)
    minmax(0, 1fr)
    minmax(0.72rem, auto);
  gap: 0;
  column-gap: 0;
  row-gap: 0;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"] {
  grid-column: 1;
  grid-row: 1;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
  grid-column: 2;
  grid-row: 1;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 100%;
  min-height: 0;
  max-height: none;
}

body.home-index-page .home-work-grid.is-active .contact-form .submit {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* Project page contact: keep name and email side by side. */
body.project-page .project-contact .contact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows:
    minmax(1.28rem, auto)
    minmax(3.2rem, auto)
    minmax(1.18rem, auto);
  gap: 0;
  column-gap: 0;
  row-gap: 0;
}

body.project-page .project-contact .contact-form input[name="firstName"] {
  grid-column: 1 !important;
  grid-row: 1;
}

body.project-page .project-contact .contact-form input[name="email"] {
  grid-column: 2 !important;
  grid-row: 1;
}

body.project-page .project-contact .contact-form textarea {
  grid-column: 1 / -1 !important;
  grid-row: 2;
}

body.project-page .project-contact .contact-form .submit {
  grid-column: 1 / -1 !important;
  grid-row: 3;
}

/* Bring the header closer to the expanded home index box. */
body.home-index-page .home-index-shell.has-selected-film > header {
  margin-bottom: clamp(0.55rem, 1.4vh, 0.95rem);
}

/* Project contact: narrower stacked copy over form, with a larger send label. */
body.project-page .project-contact {
  width: min(20.5rem, calc(100vw - 2rem));
}

body.project-page .project-contact .contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  justify-items: stretch;
  gap: clamp(0.34rem, 0.9vw, 0.58rem);
}

body.project-page .project-contact .contact-heading {
  width: 100%;
  max-width: none;
  flex: none;
  align-items: center;
  margin: 0;
  text-align: center;
}

body.project-page .project-contact .contact-form {
  width: 100%;
}

body.project-page .project-contact .submit {
  height: clamp(1.18rem, 1.6vw, 1.36rem);
  padding-block: 0;
  font-size: clamp(0.72rem, 0.95vw, 0.86rem);
  line-height: 0.78;
}

/* Photography page footer logo gets the liquid color cycle. */
body.gallery-page .page-footer .footer-logo {
  color: transparent !important;
  background-image: var(--liquid-ink-gradient) !important;
  background-size: 320% 320% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate !important;
}

/* Home index: trim interior media borders in the expanded grid. */
body.home-index-page .home-work-grid.is-active .home-film-video-cell,
body.home-index-page .home-work-grid.is-active .home-film-stills-cell,
body.home-index-page .home-work-grid.is-active .home-film-poster-cell {
  border-left: 0 !important;
}

body.home-index-page .home-work-grid.is-active .home-film-video-cell {
  border-bottom: 0 !important;
}

body.home-index-page .home-work-grid.is-active .home-film-stills-cell {
  border-top: var(--home-index-border) !important;
}

body.home-index-page .home-work-grid.is-active.has-no-poster {
  grid-template-columns:
    var(--home-index-col)
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 1fr);
  grid-template-areas:
    "index video video video"
    "index video video video"
    "index stills stills stills"
    "contact stills stills stills";
}

body.home-index-page .home-work-grid.is-active.has-no-poster .home-film-poster-cell {
  display: none !important;
}

body.project-page .project-details-section.has-no-poster {
  width: min(44rem, calc(100vw - 2rem));
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

body.project-page .project-details-section.has-no-poster .project-details-copy {
  width: min(34rem, 100%);
  margin-inline: auto;
  text-align: center;
}

body.project-page .project-details-section.has-no-poster .project-details-text {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

body.project-page .project-details-section.has-no-poster .project-poster-large {
  display: none !important;
}

/* Consistent footer placement and styling across pages. */
html,
body.project-page,
body.gallery-page,
body.sound-list-page {
  min-height: 100vh;
  min-height: 100dvh;
}

body.project-page .container,
body.gallery-page .container,
body.sound-list-page .container {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

body.project-page .project-main,
body.gallery-page .gallery-main,
body.sound-list-page .sound-list-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 0 !important;
}

body.project-page .page-footer,
body.gallery-page .page-footer,
body.sound-list-page .page-footer {
  flex-shrink: 0;
  width: min(76rem, calc(100vw - clamp(1rem, 4vw, 3rem))) !important;
  margin: auto auto 0 !important;
  padding: clamp(0.38rem, 0.9vw, 0.62rem) 0 clamp(1rem, 2vw, 1.45rem) !important;
  box-sizing: border-box;
  color: #fff !important;
  text-align: center;
  font-size: clamp(0.58rem, 0.78vw, 0.72rem);
  line-height: 1.12;
}

body.home-index-page footer {
  color: #fff !important;
  text-align: center;
}

body.home-index-page .footer-logo,
body.project-page .page-footer .footer-logo,
body.gallery-page .page-footer .footer-logo,
body.sound-list-page .page-footer .footer-logo {
  display: block;
  width: max-content;
  margin: 0 auto 0.12rem;
  font-size: clamp(0.72rem, 1.1vw, 0.95rem);
  line-height: 0.85;
}

body.project-page .page-footer .footer-logo,
body.gallery-page .page-footer .footer-logo,
body.sound-list-page .page-footer .footer-logo {
  color: transparent !important;
  background-image: var(--liquid-ink-gradient) !important;
  background-size: 320% 320% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: liquidGlassTextShift var(--hover-liquid-duration) ease-in-out infinite alternate !important;
}

body.project-page .page-footer .footer-rights,
body.gallery-page .page-footer .footer-rights,
body.sound-list-page .page-footer .footer-rights {
  color: var(--text-muted) !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  animation: none !important;
}

/* Contact button polish for the current blocky layout. */
body.home-index-page .contact-wrap {
  padding-bottom: 0 !important;
}

body.home-index-page .submit,
body.project-page .project-contact .submit {
  font-size: clamp(0.82rem, 1.1vw, 1rem) !important;
  line-height: 0.82;
}

body.home-index-page .home-work-grid.is-active .contact-form .submit {
  align-self: end;
  height: clamp(0.88rem, 1.1vw, 1.02rem);
}

body.project-page .project-contact {
  width: min(17.5rem, calc(100vw - 2rem));
}

body.project-page .project-contact .contact-wrap {
  padding-bottom: 0;
}

body.project-page .project-contact .contact-form .submit {
  border: var(--project-block-border) !important;
  height: clamp(1.22rem, 1.7vw, 1.42rem);
}

body.project-page .project-contact .contact-form .submit:hover,
body.project-page .project-contact .contact-form .submit:focus-visible {
  border: var(--project-block-border) !important;
  color: #ffbf5e !important;
}

body.home-index-page .contact-form input[type="text"],
body.home-index-page .contact-form input[type="email"],
body.home-index-page .contact-form textarea,
body.project-page .project-contact .contact-form input[type="text"],
body.project-page .project-contact .contact-form input[type="email"],
body.project-page .project-contact .contact-form textarea {
  border: var(--home-index-border-width, var(--project-block-border-width, 0.16rem)) solid #fff !important;
  color: #fff !important;
}

body.home-index-page .submit {
  color: #fff !important;
  font-size: clamp(0.68rem, 0.92vw, 0.8rem) !important;
}

body.home-index-page .submit:hover,
body.home-index-page .submit:focus-visible {
  color: #ffbf5e !important;
}

body.project-page .project-details-section {
  margin-top: clamp(2.35rem, 4.8vw, 3.9rem);
}

body.project-page .project-contact {
  width: min(15.5rem, calc(100vw - 2rem));
  margin-bottom: clamp(0.85rem, 1.8vw, 1.35rem);
}

body.project-page .project-contact .submit,
body.project-page .project-contact .contact-form .submit {
  color: #fff !important;
  font-size: clamp(0.58rem, 0.76vw, 0.68rem) !important;
}

body.project-page .project-contact .submit:hover,
body.project-page .project-contact .submit:focus-visible,
body.project-page .project-contact .contact-form .submit:hover,
body.project-page .project-contact .contact-form .submit:focus-visible {
  color: #ffbf5e !important;
}

body.project-page .project-page-footer {
  padding-top: clamp(0.8rem, 1.8vw, 1.25rem) !important;
}

/* Contact field border pass: side borders off, with index-state exceptions. */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  border-left: 0 !important;
  border-right: 0 !important;
}

body.home-index-page .contact-form input[type="text"],
body.home-index-page .contact-form input[type="email"],
body.home-index-page .contact-form textarea,
body.project-page .project-contact .contact-form input[type="text"],
body.project-page .project-contact .contact-form input[type="email"],
body.project-page .project-contact .contact-form textarea {
  border-left: 0 !important;
  border-right: 0 !important;
}

.contact-form textarea {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

body.home-index-page .contact-form textarea,
body.project-page .project-contact .contact-form textarea {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
  border-left: var(--home-index-border-width, 0.16rem) solid #fff !important;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form input[name="email"] {
  border-bottom: 0 !important;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea {
  border-top: var(--home-index-border-width, 0.16rem) solid #fff !important;
  border-bottom: 0 !important;
}

/* Contact field border refinements for closed index and project pages. */
body.home-index-page .home-work-grid:not(.is-active) .contact-form input[name="email"] {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea {
  border-top: var(--home-index-border-width, 0.16rem) solid #fff !important;
  border-bottom: 0 !important;
  border-left: var(--home-index-border-width, 0.16rem) solid #fff !important;
  border-right: 0 !important;
}

body.project-page .project-contact .contact-form input[name="firstName"] {
  border-left: var(--project-block-border-width, 0.16rem) solid #fff !important;
  border-right: 0 !important;
}

body.project-page .project-contact .contact-form input[name="email"],
body.project-page .project-contact .contact-form textarea {
  border-left: var(--project-block-border-width, 0.16rem) solid #fff !important;
  border-right: var(--project-block-border-width, 0.16rem) solid #fff !important;
}

body.project-page .project-contact .contact-form textarea {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Open home index: remove the contact section's top edge only. */
body.home-index-page .home-work-grid.is-active .contact.credit-row {
  border-top: 0 !important;
}

/* Contact heading/form spacing: keep the blocky feel, with a touch more air. */
body.home-index-page .contact-wrap,
body.home-index-page .home-work-grid.is-active .contact-wrap {
  gap: clamp(0.5rem, 1.05vw, 0.78rem) !important;
  row-gap: clamp(0.5rem, 1.05vw, 0.78rem) !important;
}

body.project-page .project-contact .contact-wrap {
  gap: clamp(0.5rem, 1.05vw, 0.78rem) !important;
  row-gap: clamp(0.5rem, 1.05vw, 0.78rem) !important;
}

body.home-index-page .home-work-grid.is-active .contact-form {
  grid-template-rows:
    minmax(clamp(1.32rem, 1.75vw, 1.52rem), auto)
    minmax(0, 1fr)
    minmax(0.72rem, auto);
}

body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
body.home-index-page .home-work-grid.is-active .contact-form input[type="email"] {
  height: clamp(1.32rem, 1.75vw, 1.52rem);
}

/* Floating shortcuts: icon-only marks, no bubble treatment. */
.floating-page-link,
body.home-index-page .floating-page-link,
body.gallery-page .floating-page-link,
body.sound-list-page .floating-page-link {
  width: clamp(1.45rem, 3vw, 2rem) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: #fff !important;
  filter: none !important;
  transform: none !important;
}

.floating-page-link svg,
body.home-index-page .floating-page-link svg,
body.gallery-page .floating-page-link svg,
body.sound-list-page .floating-page-link svg {
  width: 100% !important;
  height: 100% !important;
}

.floating-page-link:hover,
.floating-page-link:focus-visible,
body.home-index-page .floating-page-link:hover,
body.home-index-page .floating-page-link:focus-visible,
body.gallery-page .floating-page-link:hover,
body.gallery-page .floating-page-link:focus-visible,
body.sound-list-page .floating-page-link:hover,
body.sound-list-page .floating-page-link:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffbf5e !important;
  filter: none !important;
  outline: 0;
  transform: none !important;
  animation: none !important;
}

/* Project pages: add more air between video/synopsis and poster/details. */
body.project-page .project-details-section {
  width: min(62rem, 100%);
  grid-template-columns: minmax(17rem, 28rem) minmax(9rem, 15rem);
  gap: clamp(2rem, 4.4vw, 4rem);
  margin-top: clamp(7.5rem, 13vw, 10.5rem) !important;
}

body.project-page .project-poster-large img {
  max-height: clamp(34rem, 76vh, 46rem);
}

@media (max-width: 800px) {
  body.project-page .project-details-section {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.35rem, 5vw, 2rem);
    padding-inline: 1rem;
    margin-top: clamp(1rem, 4vw, 1.65rem) !important;
  }

  body.project-page .project-poster-large {
    width: min(24rem, 88vw);
    margin-inline: auto;
  }

  body.project-page .project-poster-large img {
    max-height: none;
  }

  body.project-page .project-details-copy {
    width: min(20rem, 100%);
    margin-inline: auto;
  }

  body.home-index-page .home-mobile-film-panel {
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }

  body.home-index-page .home-mobile-film-panel .home-film-cell {
    width: 100%;
    min-width: 0;
    min-height: 0;
    grid-area: auto !important;
    flex: 0 0 auto;
  }

  body.home-index-page .home-mobile-film-panel .home-film-video-cell {
    order: 1;
    display: grid;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-video-frame {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-video {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain;
  }

  body.home-index-page .home-mobile-film-panel .home-film-stills-cell {
    order: 2;
    width: 100%;
    height: clamp(12rem, 56vw, 18rem);
    border-top: var(--home-index-border) !important;
  }

  body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-film-stills-cell {
    border-top: var(--home-index-border) !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-poster-cell {
    order: 3;
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible;
  }

  body.home-index-page .home-mobile-film-panel .home-film-poster-link {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    display: block;
  }

  body.home-index-page .home-mobile-film-panel .home-film-poster {
    width: 100%;
    height: auto !important;
    max-width: 100%;
    max-height: none !important;
    display: block;
    object-fit: contain;
  }
}

/* Contact copy: heavier so it reads separate from the index buttons. */
.contact-heading p,
.contact-heading p strong,
.contact-heading p a {
  color: #fff !important;
  font-weight: 900 !important;
}

body.home-index-page .contact-heading p,
body.home-index-page .contact-heading p strong,
body.home-index-page .contact-heading p a {
  font-size: clamp(0.64rem, 0.98vw, 0.82rem) !important;
  letter-spacing: 0.012em;
  line-height: 1.08;
}

/* Home index: add more air between the selected film text and Read More. */
body.home-index-page .short-film-title-tab.is-selected .short-film-title-description {
  margin-bottom: clamp(1rem, 1.8vw, 1.45rem);
}

@media (max-width: 800px) {
  body.home-index-page .short-film-title-tab.is-selected .short-film-title-description {
    margin-bottom: clamp(1.55rem, 6vw, 2.15rem);
  }
}

/* Mobile home: keep the footer under the index instead of pinned to the viewport. */
@media (max-width: 800px) {
  body.home-index-page .home-index-shell > footer,
  body.home-index-page .home-index-shell > footer.home-footer {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: min(var(--home-index-width), calc(100vw - 2rem)) !important;
    margin: clamp(1.1rem, 4vw, 1.8rem) auto 0 !important;
    padding: 0 0 clamp(0.8rem, 3vw, 1.2rem) !important;
    pointer-events: auto !important;
    flex: 0 0 auto;
  }

  body.home-index-page .home-index-shell.has-selected-film > footer,
  body.home-index-page .home-index-shell.has-selected-film > footer.home-footer {
    width: min(100%, calc(100vw - 1rem)) !important;
  }

  body.home-index-page .home-index-shell.has-selected-film > .home-socials {
    width: min(var(--home-index-width), calc(100vw - 2rem)) !important;
    margin-inline: auto !important;
    align-self: center !important;
    justify-content: flex-end !important;
  }
}

/* Mobile home contact: stack the fields full-width inside the index box. */
@media (max-width: 800px) {
  body.home-index-page .contact.credit-row,
  body.home-index-page .home-work-grid.is-active .contact.credit-row {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    align-self: stretch !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  body.home-index-page .contact.credit-row .contact-wrap,
  body.home-index-page .home-work-grid.is-active .contact.credit-row .contact-wrap {
    --home-contact-pad: clamp(0.56rem, 1vw, 0.76rem);
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    justify-self: stretch !important;
    min-height: auto !important;
    padding: var(--home-contact-pad) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
  }

  body.home-index-page .home-work-grid:not(.is-active) .contact-form,
  body.home-index-page .home-work-grid.is-active .contact-form {
    width: calc(100% + (var(--home-contact-pad, 0.56rem) * 2)) !important;
    max-width: none !important;
    margin-inline: calc(var(--home-contact-pad, 0.56rem) * -1) !important;
    justify-self: start;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:
      minmax(1.18rem, auto)
      minmax(1.18rem, auto)
      minmax(3.7rem, auto)
      minmax(0.78rem, auto) !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  body.home-index-page .home-work-grid:not(.is-active) .contact-form input[type="text"],
  body.home-index-page .home-work-grid:not(.is-active) .contact-form input[type="email"],
  body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
  body.home-index-page .home-work-grid.is-active .contact-form input[type="email"] {
    height: clamp(1.32rem, 2vw, 1.56rem) !important;
    font-size: clamp(0.62rem, 0.85vw, 0.72rem) !important;
    padding-left: 0.34rem !important;
  }

  body.home-index-page .home-work-grid:not(.is-active) .contact-form input[name="firstName"],
  body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"] {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  body.home-index-page .home-work-grid:not(.is-active) .contact-form input[name="email"],
  body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea,
  body.home-index-page .home-work-grid.is-active .contact-form textarea {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0;
    min-height: clamp(3.7rem, 16vw, 5.1rem);
    font-size: clamp(0.6rem, 0.78vw, 0.68rem) !important;
    padding: 0.28rem 0 0 0.34rem !important;
    height: auto !important;
    max-height: none !important;
    border-top: var(--home-index-border) !important;
    border-left: 0 !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
    border-top: var(--home-index-border) !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"],
  body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
    border-bottom: 0 !important;
  }

  body.home-index-page .contact-heading p,
  body.home-index-page .contact-heading p strong,
  body.home-index-page .contact-heading p a {
    font-size: clamp(0.72rem, 3vw, 0.9rem) !important;
  }

  body.home-index-page .home-work-grid:not(.is-active) .contact-form .submit,
  body.home-index-page .home-work-grid.is-active .contact-form .submit {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    height: clamp(1.2rem, 1.8vw, 1.42rem) !important;
    font-size: clamp(0.8rem, 2.7vw, 0.94rem) !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
    border-left: 0 !important;
  }
}

/* Open home index: keep the contact header compact without affecting the closed index. */
body.home-index-page .home-work-grid.is-active .contact-heading p,
body.home-index-page .home-work-grid.is-active .contact-heading p strong,
body.home-index-page .home-work-grid.is-active .contact-heading p a {
  font-size: clamp(0.52rem, 0.72vw, 0.62rem) !important;
}

/* Homepage entrance: gently fade the index layout upward on first load. */
@keyframes home-page-fade-up {
  from {
    opacity: 0;
    transform: translateY(1.1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.home-index-page .home-index-shell > header,
body.home-index-page .home-work-grid,
body.home-index-page .home-index-shell > .home-socials,
body.home-index-page .home-index-shell > footer,
body.home-index-page .floating-page-nav {
  animation: home-page-fade-up 820ms cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

body.home-index-page .home-index-shell > header {
  animation-delay: 70ms;
}

body.home-index-page .home-work-grid {
  animation-delay: 160ms;
}

body.home-index-page .home-index-shell > .home-socials {
  animation-delay: 230ms;
}

body.home-index-page .home-index-shell > footer,
body.home-index-page .floating-page-nav {
  animation-delay: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  body.home-index-page .home-index-shell > header,
  body.home-index-page .home-work-grid,
  body.home-index-page .home-index-shell > .home-socials,
  body.home-index-page .home-index-shell > footer,
  body.home-index-page .floating-page-nav {
    animation: none !important;
  }
}

/* Desktop project pages: lower the title/video/synopsis group into the first view. */
@media (min-width: 821px) {
  body.project-page .project-title-logo {
    margin-top: clamp(3.35rem, 7vh, 5.65rem) !important;
    margin-bottom: clamp(1rem, 2.4vh, 1.75rem) !important;
  }

  body.project-page .project-hero {
    padding-top: clamp(1.65rem, 4.2vh, 3.25rem) !important;
  }

  body.project-page .project-details-section {
    margin-top: clamp(2.4rem, 6vh, 4.8rem) !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(1.35rem);
    transition:
      opacity 700ms ease,
      transform 700ms ease,
      visibility 700ms ease;
    visibility: hidden;
  }

  body.project-page.project-details-visible .project-details-section {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.project-page .project-details-section {
    transition: none !important;
  }
}

/* Mobile device safe areas: keep content clear of notches and bottom home bars. */
@media (max-width: 800px) {
  :root {
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-left: env(safe-area-inset-left, 0px);
    --mobile-safe-right: env(safe-area-inset-right, 0px);
    --mobile-safe-inline: calc(var(--mobile-safe-left) + var(--mobile-safe-right));
  }

  html {
    min-height: 100%;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.78) 7%, transparent 21%, transparent 79%, rgba(0, 0, 0, 0.8) 93%, rgba(0, 0, 0, 0.98) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, transparent 18%, transparent 78%, rgba(0, 0, 0, 0.78) 100%),
      linear-gradient(104deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.44) 25%, transparent 34%, transparent 62%, rgba(0, 0, 0, 0.4) 70%, transparent 82%),
      linear-gradient(76deg, rgba(0, 0, 0, 0.62) 0%, transparent 15%, transparent 41%, rgba(0, 0, 0, 0.32) 48%, transparent 58%, transparent 100%),
      radial-gradient(circle at 14% 5%, rgba(255, 130, 38, 0.28), transparent 25rem),
      radial-gradient(circle at 76% 9%, rgba(108, 233, 255, 0.22), transparent 28rem),
      radial-gradient(circle at 87% 39%, rgba(255, 74, 164, 0.19), transparent 28rem),
      radial-gradient(circle at 7% 74%, rgba(255, 186, 58, 0.15), transparent 31rem),
      linear-gradient(118deg, rgba(95, 226, 255, 0.16) 0%, transparent 28%, rgba(255, 151, 225, 0.16) 54%, rgba(255, 138, 48, 0.1) 78%, transparent 92%),
      linear-gradient(32deg, transparent 0%, rgba(255, 236, 172, 0.08) 34%, transparent 61%),
      linear-gradient(180deg, #020204 0%, #090e17 48%, #020204 100%);
    background-color: var(--back-dark);
    background-attachment: scroll;
    transition:
      background var(--color-reveal-duration) cubic-bezier(0.22, 0.61, 0.36, 1),
      background-color var(--color-reveal-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  html.site-monochrome-root {
    background: #000;
    background-color: #000;
  }

  body {
    background-attachment: scroll;
  }

  body.home-index-page,
  body.project-page,
  body.gallery-page,
  body.sound-list-page {
    min-height: 100svh;
    min-height: 100dvh;
  }

  body.home-index-page .container,
  body.project-page .container,
  body.gallery-page .container,
  body.sound-list-page .container {
    min-height: 100svh;
    min-height: 100dvh;
  }

  body.home-index-page .credits {
    padding-left: var(--mobile-safe-left);
    padding-right: var(--mobile-safe-right);
  }

  body.home-index-page .home-index-shell {
    --home-index-width: min(21rem, calc(100vw - 2rem - var(--mobile-safe-inline)));
    width: calc(100vw - var(--mobile-safe-inline));
    max-width: calc(100vw - var(--mobile-safe-inline));
    min-height: calc(100svh - var(--mobile-safe-top) - var(--mobile-safe-bottom));
  }

  body.home-index-page .home-index-shell:not(.has-selected-film) {
    padding-top: calc(clamp(0.85rem, 4.5vh, 1.65rem) + var(--mobile-safe-top)) !important;
    padding-bottom: calc(clamp(3.7rem, 6.8vh, 5.2rem) + var(--mobile-safe-bottom)) !important;
  }

  body.home-index-page .home-index-shell.has-selected-film {
    padding-top: calc(clamp(0.25rem, 0.8vw, 0.65rem) + var(--mobile-safe-top)) !important;
    padding-bottom: calc(clamp(3.6rem, 7vh, 5.4rem) + var(--mobile-safe-bottom)) !important;
  }

  body.home-index-page .home-work-grid.is-active {
    max-width: calc(100vw - 2rem - var(--mobile-safe-inline));
  }

  body.home-index-page .home-index-shell > footer,
  body.home-index-page .home-index-shell > footer.home-footer {
    padding-bottom: calc(clamp(0.8rem, 3vw, 1.2rem) + var(--mobile-safe-bottom)) !important;
  }

  body.project-page header,
  body.gallery-page header,
  body.sound-list-page header {
    margin-top: calc(1rem + var(--mobile-safe-top)) !important;
  }

  body.project-page .page-footer,
  body.gallery-page .page-footer,
  body.sound-list-page .page-footer {
    width: min(76rem, calc(100vw - clamp(1rem, 4vw, 3rem) - var(--mobile-safe-inline))) !important;
    padding-bottom: calc(clamp(1rem, 2vw, 1.45rem) + var(--mobile-safe-bottom)) !important;
  }

  .floating-page-nav,
  body.home-index-page .floating-page-nav,
  body.gallery-page .floating-page-nav,
  body.sound-list-page .floating-page-nav {
    right: max(0.75rem, var(--mobile-safe-right)) !important;
    bottom: max(0.75rem, var(--mobile-safe-bottom)) !important;
  }
}

/* No-crop image pass: preserve each photo's full frame and natural aspect ratio. */
.gallery-tile img,
body.home-index-page .home-film-stills-cell img,
body.project-page .project-still img,
.project-still img,
.project-modal-grid img,
.project-modal-flex img,
.modal-content img,
.sound-list-poster img,
#lightbox img {
  object-fit: contain !important;
}

body.home-index-page .home-film-stills-cell img {
  width: auto !important;
  height: 100% !important;
  aspect-ratio: var(--home-still-ratio, auto) !important;
  max-width: none !important;
  background: #000;
}

body.project-page .project-stills-track {
  display: flex !important;
  width: min(var(--content-max), 100%);
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  overflow: hidden;
  overflow-y: hidden;
  scroll-padding-left: var(--scroll-list-inset);
  scroll-snap-type: x proximity;
}

body.project-page .project-stills-row {
  display: flex;
  width: 100%;
  height: clamp(8.5rem, 15vw, 12rem);
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}

body.project-page .project-stills-row + .project-stills-row {
  border-top: 0;
}

body.project-page .project-stills-row:hover,
body.project-page .project-stills-row:focus-within {
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  scrollbar-width: thin;
}

body.project-page .project-stills-row::-webkit-scrollbar {
  height: 0;
}

body.project-page .project-stills-row:hover::-webkit-scrollbar,
body.project-page .project-stills-row:focus-within::-webkit-scrollbar {
  height: 0.26rem;
}

body.project-page .project-stills-row::-webkit-scrollbar-track {
  background: transparent;
}

body.project-page .project-stills-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
}

body.project-page .project-still,
.project-still {
  width: var(--project-still-width, auto) !important;
  height: 100%;
  aspect-ratio: var(--project-still-ratio, 16 / 9);
  overflow: visible !important;
  background: #000;
}

body.project-page .project-still img,
.project-still img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: 100% !important;
  transform: none !important;
  background: #000;
}

.project-still.is-portrait-sideways,
.project-still.is-portrait-sideways img {
  position: static !important;
  transform: none !important;
}

body.gallery-page .gallery-art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  grid-auto-rows: auto;
  align-items: start;
}

body.gallery-page .gallery-tile,
body.gallery-page .gallery-tile.is-small,
body.gallery-page .gallery-tile.is-square,
body.gallery-page .gallery-tile.is-lead,
body.gallery-page .gallery-tile.is-large,
body.gallery-page .gallery-tile.is-wide,
body.gallery-page .gallery-tile.is-tall,
body.gallery-page .gallery-tile.is-portrait {
  grid-column: auto !important;
  grid-row: auto !important;
  overflow: visible !important;
}

body.gallery-page .gallery-tile img {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

/* Mobile open index: keep the header locked to the index box width. */
@media (max-width: 800px) {
  body.home-index-page .home-index-shell.has-selected-film > header {
    width: var(--home-index-width) !important;
    max-width: calc(100vw - 2rem - var(--mobile-safe-inline, 0px)) !important;
    margin-inline: auto !important;
    align-self: center !important;
  }
}

/* Photography page: add side breathing room around the full gallery block. */
body.gallery-page {
  --gallery-page-side-space: clamp(1.5rem, 5vw, 4.5rem);
  --gallery-block-width: min(76rem, calc(100vw - (var(--gallery-page-side-space) * 2)));
}

@media (max-width: 800px) {
  body.gallery-page {
    --gallery-page-side-space: clamp(1rem, 5vw, 1.35rem);
    --gallery-block-width: calc(100vw - (var(--gallery-page-side-space) * 2));
  }
}

body.gallery-page .page-footer {
  padding-top: clamp(1.6rem, 4vw, 3rem) !important;
}

/* Photography page: masonry packing keeps the gallery tiled without cropping. */
body.gallery-page {
  --gallery-image-gap: clamp(0.35rem, 0.8vw, 0.65rem);
}

body.gallery-page .gallery-art-grid {
  display: block !important;
  column-count: 3;
  column-width: 16rem;
  column-gap: var(--gallery-image-gap);
  width: 100%;
  margin: 0 auto;
  overflow: visible;
}

body.gallery-page .gallery-tile,
body.gallery-page .gallery-tile.is-small,
body.gallery-page .gallery-tile.is-square,
body.gallery-page .gallery-tile.is-lead,
body.gallery-page .gallery-tile.is-large,
body.gallery-page .gallery-tile.is-wide,
body.gallery-page .gallery-tile.is-tall,
body.gallery-page .gallery-tile.is-portrait {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 var(--gallery-image-gap) !important;
  break-inside: avoid;
  page-break-inside: avoid;
  overflow: visible !important;
}

body.gallery-page .gallery-tile img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Open home index: make the name/email contact fields read larger. */
body.home-index-page .home-work-grid.is-active .contact-form {
  grid-template-rows:
    minmax(clamp(1.62rem, 2.2vw, 1.95rem), auto)
    minmax(0, 1fr)
    minmax(0.72rem, auto) !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
body.home-index-page .home-work-grid.is-active .contact-form input[type="email"] {
  height: clamp(1.62rem, 2.2vw, 1.95rem) !important;
  font-size: clamp(0.72rem, 0.95vw, 0.86rem) !important;
  padding-left: clamp(0.38rem, 0.7vw, 0.52rem) !important;
}

@media (max-width: 800px) {
  body.home-index-page .home-work-grid.is-active .contact-form {
    grid-template-rows:
      minmax(clamp(1.58rem, 5.2vw, 1.9rem), auto)
      minmax(clamp(1.58rem, 5.2vw, 1.9rem), auto)
      minmax(3.7rem, auto)
      minmax(0.78rem, auto) !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
  body.home-index-page .home-work-grid.is-active .contact-form input[type="email"] {
    height: clamp(1.58rem, 5.2vw, 1.9rem) !important;
    font-size: clamp(0.72rem, 3.6vw, 0.9rem) !important;
  }
}

@media (max-width: 840px) {
  body.gallery-page .gallery-art-grid {
    column-count: 2 !important;
    column-width: auto !important;
  }
}

@media (max-width: 520px) {
  body.gallery-page .gallery-art-grid {
    column-count: 1 !important;
    column-width: auto !important;
  }
}

/* Project laurels: cleaned festival graphics below the project notes. */
body.project-page {
  font-size: clamp(1rem, 1vw, 1.12rem);
}

body.project-page .project-intro p {
  font-size: clamp(1rem, 1.06vw, 1.12rem) !important;
}

body.project-page .project-details-text {
  font-size: clamp(0.88rem, 0.94vw, 1rem) !important;
}

body.project-page .project-details-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.4vw, 1.25rem);
}

body.project-page .project-laurels {
  display: grid;
  width: min(100%, 18rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.65vw, 1.35rem) clamp(0.75rem, 1.3vw, 1rem);
  align-items: center;
}

body.project-page .project-laurels[hidden] {
  display: none !important;
}

body.project-page .project-laurels img {
  display: block;
  width: 100%;
  height: clamp(2.7rem, 5vw, 4.2rem);
  object-fit: contain;
  filter: drop-shadow(0 0 0.18rem rgba(255, 255, 255, 0.14));
}

@media (max-width: 800px) {
  body.project-page .project-laurels {
    width: min(100%, 20rem);
    margin-inline: auto;
  }

  body.project-page .project-laurels img {
    height: clamp(3rem, 14vw, 4.6rem);
  }
}

/* Readable type floor: keep small labels and subheadings from dropping too tiny. */
:root {
  --site-type-min: 0.78rem;
  --site-type-small: clamp(var(--site-type-min), 0.95vw, 0.94rem);
  --site-type-caption: clamp(0.74rem, 0.88vw, 0.86rem);
}

header h3,
body.home-index-page .home-index-shell header h3,
body.project-page header h3,
body.gallery-page header h3,
body.sound-list-page header h3 {
  font-size: var(--site-type-small) !important;
  line-height: 0.98 !important;
}

header h1,
header h1 a,
body.home-index-page .home-index-shell header h1,
body.home-index-page .home-index-shell header h1 a,
body.project-page header h1,
body.project-page header h1 a,
body.gallery-page header h1,
body.gallery-page header h1 a,
body.sound-list-page header h1,
body.sound-list-page header h1 a {
  font-size: clamp(0.92rem, 1.1vw, 1.06rem) !important;
  line-height: 0.94 !important;
}

body.home-index-page .short-film-title-sub,
body.home-index-page .short-film-title-sub-track,
body.home-index-page .short-film-title-info,
body.home-index-page .short-film-title-description {
  font-size: var(--site-type-caption) !important;
  line-height: 1.08 !important;
}

body.home-index-page .short-film-title-read-more,
body.home-index-page .submit,
body.project-page .project-contact .submit,
body.gallery-page .submit,
body.sound-list-page .submit {
  font-size: var(--site-type-small) !important;
}

.contact-heading p,
.contact-heading p strong,
.contact-heading p a,
body.home-index-page .contact-heading p,
body.home-index-page .contact-heading p strong,
body.home-index-page .contact-heading p a,
body.home-index-page .home-work-grid.is-active .contact-heading p,
body.home-index-page .home-work-grid.is-active .contact-heading p strong,
body.home-index-page .home-work-grid.is-active .contact-heading p a,
body.project-page .project-contact .contact-heading p,
body.project-page .project-contact .contact-heading p strong,
body.project-page .project-contact .contact-heading p a {
  font-size: var(--site-type-small) !important;
  line-height: 1.12 !important;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
body.home-index-page .contact-form input[type="text"],
body.home-index-page .contact-form input[type="email"],
body.home-index-page .contact-form textarea,
body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
body.home-index-page .home-work-grid.is-active .contact-form input[type="email"],
body.home-index-page .home-work-grid.is-active .contact-form textarea,
body.project-page .project-contact .contact-form input[type="text"],
body.project-page .project-contact .contact-form input[type="email"],
body.project-page .project-contact .contact-form textarea {
  font-size: var(--site-type-small) !important;
}

body.home-index-page .contact-form textarea,
body.home-index-page .home-work-grid.is-active .contact-form textarea,
body.project-page .project-contact .contact-form textarea,
body.gallery-page .contact-form textarea,
body.sound-list-page .contact-form textarea {
  font-size: var(--site-type-small) !important;
  line-height: 1.12 !important;
}

.footer-rights,
body.home-index-page footer,
body.home-index-page .home-work-grid.is-active footer,
body.project-page .page-footer .footer-rights,
body.gallery-page .page-footer .footer-rights,
body.sound-list-page .page-footer .footer-rights {
  font-size: var(--site-type-caption) !important;
}

@media (max-width: 800px) {
  :root {
    --site-type-min: 0.82rem;
    --site-type-small: clamp(0.82rem, 3.2vw, 0.98rem);
    --site-type-caption: clamp(0.78rem, 2.9vw, 0.94rem);
  }

  header h1,
  header h1 a,
  body.home-index-page .home-index-shell header h1,
  body.home-index-page .home-index-shell header h1 a,
  body.project-page header h1,
  body.project-page header h1 a,
  body.gallery-page header h1,
  body.gallery-page header h1 a,
  body.sound-list-page header h1,
  body.sound-list-page header h1 a {
    font-size: clamp(0.96rem, 3.6vw, 1.16rem) !important;
  }
}

/* Floating page shortcuts: soft liquid-glass bubbles for home/gallery links. */
.floating-page-nav,
body.home-index-page .floating-page-nav,
body.gallery-page .floating-page-nav,
body.sound-list-page .floating-page-nav {
  position: fixed !important;
  right: max(1rem, env(safe-area-inset-right, 0px)) !important;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 5000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(0.5rem, 1.4vw, 0.72rem) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.floating-page-link,
body.home-index-page .floating-page-link,
body.gallery-page .floating-page-link,
body.sound-list-page .floating-page-link {
  position: relative !important;
  display: inline-flex !important;
  width: clamp(2.1rem, 3.4vw, 2.55rem) !important;
  height: clamp(2.1rem, 3.4vw, 2.55rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.045) 46%, rgba(115, 241, 255, 0.12)),
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.32), transparent 34%),
    rgba(5, 8, 14, 0.42) !important;
  color: #fff !important;
  box-shadow:
    0 0.75rem 1.9rem rgba(0, 0, 0, 0.28),
    inset 0 0.08rem 0.16rem rgba(255, 255, 255, 0.28),
    inset 0 -0.08rem 0.2rem rgba(0, 0, 0, 0.22) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  outline: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  transition:
    color 220ms ease,
    background 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    transform 220ms ease !important;
}

.floating-page-link::before,
body.home-index-page .floating-page-link::before,
body.gallery-page .floating-page-link::before,
body.sound-list-page .floating-page-link::before {
  content: "";
  position: absolute;
  inset: 0.18rem;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 106, 168, 0.16), transparent 42%, rgba(255, 191, 94, 0.16)),
    linear-gradient(300deg, rgba(115, 241, 255, 0.14), transparent 48%);
  opacity: 0.68;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.floating-page-link svg,
body.home-index-page .floating-page-link svg,
body.gallery-page .floating-page-link svg,
body.sound-list-page .floating-page-link svg {
  position: relative !important;
  z-index: 1 !important;
  width: 68% !important;
  height: 68% !important;
  display: block !important;
  fill: currentColor !important;
  filter: drop-shadow(0 0.08rem 0.16rem rgba(0, 0, 0, 0.3));
}

.floating-page-link:hover,
.floating-page-link:focus-visible,
body.home-index-page .floating-page-link:hover,
body.home-index-page .floating-page-link:focus-visible,
body.gallery-page .floating-page-link:hover,
body.gallery-page .floating-page-link:focus-visible,
body.sound-list-page .floating-page-link:hover,
body.sound-list-page .floating-page-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 106, 168, 0.1) 42%, rgba(115, 241, 255, 0.16)),
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.38), transparent 34%),
    rgba(5, 8, 14, 0.5) !important;
  color: #ffbf5e !important;
  box-shadow:
    0 0.95rem 2.2rem rgba(0, 0, 0, 0.32),
    0 0 1.15rem rgba(255, 191, 94, 0.22),
    inset 0 0.08rem 0.16rem rgba(255, 255, 255, 0.3),
    inset 0 -0.08rem 0.2rem rgba(0, 0, 0, 0.22) !important;
  transform: translateY(-0.08rem) !important;
}

.floating-page-link:hover::before,
.floating-page-link:focus-visible::before,
body.home-index-page .floating-page-link:hover::before,
body.home-index-page .floating-page-link:focus-visible::before,
body.gallery-page .floating-page-link:hover::before,
body.gallery-page .floating-page-link:focus-visible::before,
body.sound-list-page .floating-page-link:hover::before,
body.sound-list-page .floating-page-link:focus-visible::before {
  opacity: 1;
}

@media (max-width: 800px) {
  .floating-page-nav,
  body.home-index-page .floating-page-nav,
  body.gallery-page .floating-page-nav,
  body.sound-list-page .floating-page-nav {
    right: max(0.82rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(0.82rem, env(safe-area-inset-bottom, 0px)) !important;
    gap: 0.52rem !important;
  }

  .floating-page-link,
  body.home-index-page .floating-page-link,
  body.gallery-page .floating-page-link,
  body.sound-list-page .floating-page-link {
    width: clamp(2.05rem, 9.2vw, 2.45rem) !important;
    height: clamp(2.05rem, 9.2vw, 2.45rem) !important;
  }
}

/* Individual project pages: gutters between still rows and stills. */
body.project-page {
  --project-stills-gap: clamp(0.24rem, 0.56vw, 0.44rem);
}

body.project-page .project-stills-track {
  gap: var(--project-stills-gap) !important;
}

body.project-page .project-stills-row {
  gap: var(--project-stills-gap) !important;
}

@media (max-width: 800px) {
  body.project-page .project-stills-section {
    width: 112vw;
    margin-left: calc(50% - 56vw);
    margin-right: calc(50% - 56vw);
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.project-page .project-stills-track {
    width: 112vw !important;
    max-width: 112vw !important;
  }
}

/* Muted supporting copy for a clearer title/subtitle hierarchy. */
header h3,
body.home-index-page .home-index-shell header h3 {
  color: var(--text-muted) !important;
}

body.home-index-page .short-film-title-sub,
body.home-index-page .short-film-title-tab.is-selected .short-film-title-sub,
body.home-index-page .short-film-title-tab:not(.is-selected):hover .short-film-title-sub,
body.home-index-page .short-film-title-tab:not(.is-selected):focus-visible .short-film-title-sub,
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected):hover .short-film-title-sub,
body.home-index-page.site-monochrome .short-film-title-tab:not(.is-selected):focus-visible .short-film-title-sub {
  color: var(--text-muted) !important;
}

body.home-index-page .short-film-title-description {
  color: rgba(218, 229, 238, 0.8) !important;
}

/* Browser-stable project details width: keep side padding from squeezing the grid. */
@media (min-width: 821px) {
  body.project-page .project-details-section {
    width: calc(100% - 2rem) !important;
    max-width: 62rem !important;
    margin-top: clamp(0.2rem, 0.8vh, 0.65rem) !important;
    padding-inline: 0 !important;
    gap: clamp(0.7rem, 1.6vw, 1.35rem) !important;
    grid-template-columns: minmax(18rem, 30rem) minmax(13rem, 18rem) !important;
  }

  body.project-page .project-hero {
    padding-bottom: clamp(0.2rem, 0.8vh, 0.55rem) !important;
  }

  body.project-page .project-details-copy,
  body.project-page .project-details-text {
    width: min(100%, 18rem) !important;
    max-width: 18rem !important;
  }

  body.project-page .project-details-section.has-no-poster {
    width: calc(100% - 2rem) !important;
    max-width: 44rem !important;
    margin-top: clamp(0.2rem, 0.8vh, 0.65rem) !important;
    padding-inline: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.project-page .project-details-section.has-no-poster .project-details-copy,
  body.project-page .project-details-section.has-no-poster .project-details-text {
    width: min(100%, 34rem) !important;
    max-width: 34rem !important;
  }
}

@media (max-width: 800px) {
  body.project-page .project-hero {
    padding-bottom: clamp(0.25rem, 1.6vw, 0.55rem) !important;
  }

  body.project-page .project-details-section {
    margin-top: clamp(0.25rem, 1.7vw, 0.6rem) !important;
  }
}

.footer-rights,
body.home-index-page .footer-rights,
body.home-index-page footer .footer-rights,
body.home-index-page .home-work-grid.is-active footer .footer-rights,
body.project-page .page-footer .footer-rights,
body.gallery-page .page-footer .footer-rights {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

/* Browser-stable project contact width. */
body.project-page .project-contact {
  width: min(23rem, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
}

body.project-page .project-contact .contact-wrap,
body.project-page .project-contact .contact-form {
  width: 100% !important;
  max-width: none !important;
}

.contact-location,
body.home-index-page .contact-location,
body.project-page .contact-location,
body.gallery-page .contact-location {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

:root {
  --footer-rights-color: rgba(190, 194, 202, 0.68);
}

.footer-rights,
body.home-index-page .footer-rights,
body.home-index-page footer .footer-rights,
body.home-index-page .home-work-grid.is-active footer .footer-rights,
body.project-page .page-footer .footer-rights,
body.gallery-page .page-footer .footer-rights,
body.sound-list-page .page-footer .footer-rights {
  color: var(--footer-rights-color) !important;
  -webkit-text-fill-color: var(--footer-rights-color) !important;
  background: none !important;
  background-image: none !important;
  background-size: auto !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none !important;
  text-shadow: none !important;
}

/* Project and photography pages: smaller, quieter header treatment. */
body.project-page header,
body.gallery-page header {
  margin-top: clamp(0.62rem, 1.45vw, 1.05rem) !important;
  padding-bottom: clamp(0.08rem, 0.32vw, 0.2rem) !important;
  column-gap: clamp(0.7rem, 1.4vw, 1.25rem) !important;
}

body.project-page .header-title-stack,
body.gallery-page .header-title-stack {
  gap: 0 !important;
}

body.project-page header h1,
body.project-page header h1 a,
body.gallery-page header h1,
body.gallery-page header h1 a {
  font-size: clamp(0.68rem, 0.82vw, 0.82rem) !important;
  line-height: 0.88 !important;
}

body.project-page header h3,
body.gallery-page header h3 {
  font-size: clamp(0.54rem, 0.68vw, 0.64rem) !important;
  line-height: 0.9 !important;
}

body.project-page header .socials,
body.gallery-page header .socials {
  gap: clamp(0.22rem, 0.55vw, 0.42rem) !important;
}

body.project-page header .socials a,
body.gallery-page header .socials a {
  width: clamp(1.16rem, 1.7vw, 1.34rem) !important;
  height: clamp(1.16rem, 1.7vw, 1.34rem) !important;
  flex-basis: clamp(1.16rem, 1.7vw, 1.34rem) !important;
}

body.project-page header .icon,
body.gallery-page header .icon {
  width: clamp(0.88rem, 1.25vw, 1rem) !important;
  height: clamp(0.88rem, 1.25vw, 1rem) !important;
}

body.project-page header .tube-icon,
body.gallery-page header .tube-icon {
  width: clamp(1rem, 1.45vw, 1.12rem) !important;
  height: clamp(0.84rem, 1.18vw, 0.98rem) !important;
}

body.project-page header .instagram-icon,
body.gallery-page header .instagram-icon {
  width: clamp(0.84rem, 1.15vw, 0.96rem) !important;
  height: clamp(0.9rem, 1.28vw, 1.04rem) !important;
}

body.project-page header .linkedin-icon,
body.gallery-page header .linkedin-icon {
  width: clamp(0.9rem, 1.25vw, 1rem) !important;
  height: clamp(0.9rem, 1.25vw, 1rem) !important;
}

body.project-page header .imdb-icon,
body.gallery-page header .imdb-icon {
  width: clamp(1.55rem, 2.35vw, 1.85rem) !important;
  height: clamp(0.82rem, 1.22vw, 0.98rem) !important;
}

body.project-page header .socials a[aria-label="IMDb"],
body.project-page header .socials a[aria-label="IMDB"],
body.gallery-page header .socials a[aria-label="IMDb"],
body.gallery-page header .socials a[aria-label="IMDB"] {
  width: clamp(1.62rem, 2.45vw, 1.92rem) !important;
  flex-basis: clamp(1.62rem, 2.45vw, 1.92rem) !important;
}

body.project-page header .socials a:hover .icon,
body.project-page header .socials a:focus-visible .icon,
body.gallery-page header .socials a:hover .icon,
body.gallery-page header .socials a:focus-visible .icon {
  transform: scale(1.1) !important;
}

@media (min-width: 821px) {
  body.project-page .project-title-logo {
    margin-top: clamp(2.7rem, 5.5vh, 4.45rem) !important;
    margin-bottom: clamp(0.8rem, 1.7vh, 1.25rem) !important;
  }
}

/* Mobile project pages: center the detail copy once it stacks under the poster. */
@media (max-width: 800px) {
  body.project-page .project-details-copy,
  body.project-page .project-details-text {
    justify-self: center !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body.project-page .project-details-text p {
    text-align: center !important;
  }

  body.project-page .project-laurels {
    justify-self: center !important;
    margin-inline: auto !important;
  }
}

/* Mobile homepage display font lock: prevent thin Impact-style fallbacks. */
@media (max-width: 800px) {
  body.home-index-page .short-film-title-list::after,
  body.home-index-page .short-film-title-main,
  body.home-index-page .short-film-title-track,
  body.home-index-page .short-film-title-read-more,
  body.home-index-page .submit,
  body.home-index-page .contact-form .submit {
    font-family: var(--index-display-font) !important;
    font-synthesis-weight: auto;
    font-weight: 900 !important;
    -webkit-font-smoothing: auto;
    text-rendering: geometricPrecision;
  }

  body.home-index-page .short-film-title-list::after,
  body.home-index-page .short-film-title-main,
  body.home-index-page .short-film-title-track {
    letter-spacing: -0.02em !important;
    -webkit-text-stroke: 0.012em currentColor;
    paint-order: stroke fill;
  }

  body.home-index-page .short-film-title-read-more,
  body.home-index-page .submit,
  body.home-index-page .contact-form .submit {
    letter-spacing: 0.018em !important;
    line-height: 1 !important;
    -webkit-text-stroke: 0.01em currentColor;
    paint-order: stroke fill;
  }
}

/* Home index loading gate: preload selected media before expanding the grid. */
body.home-index-page .short-film-title-tab {
  position: relative;
}

body.home-index-page .short-film-title-tab.is-loading {
  cursor: wait;
}

body.home-index-page .short-film-title-tab.is-loading .short-film-title-main,
body.home-index-page .short-film-title-tab.is-loading .short-film-title-sub {
  opacity: 0.68;
  transition: opacity 180ms ease;
}

body.home-index-page .short-film-title-tab.is-loading::after {
  content: "";
  position: absolute;
  top: var(--short-film-title-pad-y, 0.35rem);
  right: var(--short-film-title-pad-x, 0.6rem);
  z-index: 2;
  display: block;
  width: clamp(0.42rem, 0.8vw, 0.62rem);
  aspect-ratio: 1;
  border: max(1px, var(--home-index-border-width, 0.12rem)) solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  opacity: 0.9;
  pointer-events: none;
  animation: homeIndexLoadingSpin 760ms linear infinite;
}

@keyframes homeIndexLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-index-page .short-film-title-tab.is-loading::after {
    animation: none;
  }
}

/* Home social icons: keep every logo visually level after the header moves. */
body.home-index-page .home-index-shell header .socials a,
body.home-index-page .home-index-shell > .home-socials a {
  width: 1.1rem !important;
  height: 1.1rem !important;
  flex: 0 0 1.1rem !important;
  display: inline-grid !important;
  place-items: center !important;
}

body.home-index-page .home-index-shell header .icon,
body.home-index-page .home-index-shell > .home-socials .icon {
  display: block !important;
  width: 0.82rem !important;
  height: 0.82rem !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

body.home-index-page .home-index-shell header .tube-icon,
body.home-index-page .home-index-shell > .home-socials .tube-icon {
  width: 0.96rem !important;
  height: 0.94rem !important;
}

body.home-index-page .home-index-shell header .instagram-icon,
body.home-index-page .home-index-shell > .home-socials .instagram-icon {
  width: 0.8rem !important;
  height: 0.84rem !important;
}

body.home-index-page .home-index-shell header .linkedin-icon,
body.home-index-page .home-index-shell > .home-socials .linkedin-icon {
  width: 0.82rem !important;
  height: 0.82rem !important;
}

body.home-index-page .home-index-shell header .imdb-icon,
body.home-index-page .home-index-shell > .home-socials .imdb-icon {
  width: 1.34rem !important;
  height: 0.76rem !important;
}

body.home-index-page .home-index-shell header .socials a[aria-label="IMDb"],
body.home-index-page .home-index-shell header .socials a[aria-label="IMDB"],
body.home-index-page .home-index-shell > .home-socials a[aria-label="IMDb"],
body.home-index-page .home-index-shell > .home-socials a[aria-label="IMDB"] {
  width: 1.46rem !important;
  flex-basis: 1.46rem !important;
}

body.home-index-page .home-index-shell header .socials a:hover .icon,
body.home-index-page .home-index-shell header .socials a:focus-visible .icon,
body.home-index-page .home-index-shell > .home-socials a:hover .icon,
body.home-index-page .home-index-shell > .home-socials a:focus-visible .icon {
  transform: scale(1.08) !important;
}

/* Home social icons should be white from first paint, before JS rehomes them. */
body.home-index-page header .socials,
body.home-index-page header .socials a,
body.home-index-page .home-index-shell > .home-socials,
body.home-index-page .home-index-shell > .home-socials a {
  color: #fff !important;
}

body.home-index-page header .socials .icon,
body.home-index-page header .socials .icon path,
body.home-index-page .home-index-shell > .home-socials .icon,
body.home-index-page .home-index-shell > .home-socials .icon path {
  fill: #fff !important;
}

@media (max-width: 800px) {
  body.home-index-page .home-index-shell header .socials a,
  body.home-index-page .home-index-shell > .home-socials a {
    width: 1.34rem !important;
    height: 1.34rem !important;
    flex-basis: 1.34rem !important;
  }

  body.home-index-page .home-index-shell header .icon,
  body.home-index-page .home-index-shell > .home-socials .icon {
    width: 1rem !important;
    height: 1rem !important;
  }

  body.home-index-page .home-index-shell header .tube-icon,
  body.home-index-page .home-index-shell > .home-socials .tube-icon {
    width: 1.12rem !important;
    height: 1.06rem !important;
  }

  body.home-index-page .home-index-shell header .instagram-icon,
  body.home-index-page .home-index-shell > .home-socials .instagram-icon {
    width: 0.98rem !important;
    height: 1.04rem !important;
  }

  body.home-index-page .home-index-shell header .linkedin-icon,
  body.home-index-page .home-index-shell > .home-socials .linkedin-icon {
    width: 1rem !important;
    height: 1rem !important;
  }

  body.home-index-page .home-index-shell header .imdb-icon,
  body.home-index-page .home-index-shell > .home-socials .imdb-icon {
    width: 1.58rem !important;
    height: 0.94rem !important;
  }

  body.home-index-page .home-index-shell header .socials a[aria-label="IMDb"],
  body.home-index-page .home-index-shell header .socials a[aria-label="IMDB"],
  body.home-index-page .home-index-shell > .home-socials a[aria-label="IMDb"],
  body.home-index-page .home-index-shell > .home-socials a[aria-label="IMDB"] {
    width: 1.72rem !important;
    flex-basis: 1.72rem !important;
  }
}

/* Index contact send button: give the label enough vertical room. */
body.home-index-page .home-work-grid:not(.is-active) .contact-form .submit,
body.home-index-page .home-work-grid.is-active .contact-form .submit {
  height: clamp(1.32rem, 1.95vw, 1.54rem) !important;
  min-height: clamp(1.32rem, 1.95vw, 1.54rem) !important;
  line-height: 1 !important;
  padding-block: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Project contact sections: lighter, separated fields. */
body.project-page .project-contact {
  --project-contact-soft-border: rgba(255, 255, 255, 0.38);
  width: min(21rem, calc(100vw - 2rem)) !important;
}

body.project-page .project-contact .contact-wrap {
  padding-bottom: clamp(0.72rem, 1.35vw, 1rem) !important;
}

body.project-page .project-contact .contact-form {
  gap: clamp(0.34rem, 0.85vw, 0.58rem) !important;
  column-gap: clamp(0.34rem, 0.85vw, 0.58rem) !important;
  row-gap: clamp(0.34rem, 0.85vw, 0.58rem) !important;
}

body.project-page .project-contact .contact-form input[type="text"],
body.project-page .project-contact .contact-form input[type="email"],
body.project-page .project-contact .contact-form textarea {
  border: 1px solid var(--project-contact-soft-border) !important;
}

body.project-page .project-contact .contact-form input[name="firstName"],
body.project-page .project-contact .contact-form input[name="email"],
body.project-page .project-contact .contact-form textarea {
  border-top: 1px solid var(--project-contact-soft-border) !important;
  border-right: 1px solid var(--project-contact-soft-border) !important;
  border-bottom: 1px solid var(--project-contact-soft-border) !important;
  border-left: 1px solid var(--project-contact-soft-border) !important;
}

body.project-page .project-contact .contact-form .submit {
  width: min(6.6rem, 44%) !important;
  min-width: 0 !important;
  justify-self: center !important;
  align-self: center !important;
  border: 1px solid var(--project-contact-soft-border) !important;
  height: clamp(1.18rem, 1.55vw, 1.34rem) !important;
}

body.project-page .project-contact .contact-form .submit:hover,
body.project-page .project-contact .contact-form .submit:focus-visible {
  border: 1px solid rgba(255, 191, 94, 0.7) !important;
}

/* Site-wide loading gate: hide generated layouts until each page is ready. */
html.site-loading {
  background: #050505;
}

html.site-loading body {
  overflow: hidden;
}

html.site-loading body > .container,
html.site-loading body > .floating-page-nav {
  opacity: 0 !important;
  transform: none;
  pointer-events: none;
}

html.site-loading::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: block;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.035), transparent 18rem),
    #050505;
  pointer-events: none;
}

html.site-loading::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2147483001;
  width: clamp(1rem, 2vw, 1.28rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(255, 106, 168, 0.72);
  border-radius: 999px;
  box-shadow:
    0 0 0.85rem rgba(255, 255, 255, 0.08),
    0 0 1.4rem rgba(217, 109, 255, 0.12);
  transform: translate(-50%, -50%);
  animation: siteLoaderSpin 880ms linear infinite;
  pointer-events: none;
}

html.site-ready body > .container,
html.site-ready body > .floating-page-nav {
  animation: siteContentFadeIn 1350ms ease-out both;
}

html.site-ready body > .floating-page-nav {
  animation-delay: 90ms;
}

@keyframes siteLoaderSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes siteContentFadeIn {
  from {
    opacity: 0;
    transform: none;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.site-loading::after {
    animation: none;
  }

  html.site-ready body > .container,
  html.site-ready body > .floating-page-nav {
    animation-duration: 1ms;
  }
}

body.gallery-page .gallery-art-grid .gallery-tile img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

body.gallery-page .gallery-art-grid .gallery-tile[role="button"] {
  cursor: pointer;
  outline: 0;
}

body.gallery-page .gallery-art-grid .gallery-tile[role="button"]:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 0.18rem;
}

/* Safari-safe still scrollbars: hide native scrollbars and draw a custom hover thumb. */
body.home-index-page .home-stills-row,
body.home-index-page .home-stills-track,
body.project-page .project-stills-track,
body.project-page .project-stills-row {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
}

body.home-index-page .home-stills-row::-webkit-scrollbar,
body.home-index-page .home-stills-track::-webkit-scrollbar,
body.project-page .project-stills-track::-webkit-scrollbar,
body.project-page .project-stills-row::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.home-index-page .home-stills-row::-webkit-scrollbar-track,
body.home-index-page .home-stills-row::-webkit-scrollbar-track-piece,
body.home-index-page .home-stills-row::-webkit-scrollbar-button,
body.home-index-page .home-stills-row::-webkit-scrollbar-thumb,
body.home-index-page .home-stills-track::-webkit-scrollbar-track,
body.home-index-page .home-stills-track::-webkit-scrollbar-track-piece,
body.home-index-page .home-stills-track::-webkit-scrollbar-button,
body.home-index-page .home-stills-track::-webkit-scrollbar-thumb,
body.project-page .project-stills-track::-webkit-scrollbar-track,
body.project-page .project-stills-track::-webkit-scrollbar-track-piece,
body.project-page .project-stills-track::-webkit-scrollbar-button,
body.project-page .project-stills-track::-webkit-scrollbar-thumb,
body.project-page .project-stills-row::-webkit-scrollbar-track,
body.project-page .project-stills-row::-webkit-scrollbar-track-piece,
body.project-page .project-stills-row::-webkit-scrollbar-button,
body.project-page .project-stills-row::-webkit-scrollbar-thumb {
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.home-index-page .home-stills-row,
body.project-page .project-stills-row {
  position: relative;
}

.still-scrollbar {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 0;
  z-index: 8;
  height: 0.24rem;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.still-scrollbar[hidden] {
  display: none !important;
}

.still-scrollbar-thumb {
  display: block;
  height: 100%;
  min-width: 1.4rem;
  background: rgba(255, 255, 255, 0.34);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

body.home-index-page .home-stills-row:hover > .still-scrollbar,
body.project-page .project-stills-row:hover > .still-scrollbar {
  opacity: 1;
}

body.home-index-page .submit,
body.home-index-page .contact-form .submit,
body.project-page .project-contact .submit,
body.project-page .project-contact .contact-form .submit,
body.gallery-page .submit,
body.sound-list-page .submit,
.submit {
  color: var(--text-muted) !important;
}

body.home-index-page .submit:hover,
body.home-index-page .submit:focus-visible,
body.home-index-page .contact-form .submit:hover,
body.home-index-page .contact-form .submit:focus-visible {
  color: #ffbf5e !important;
}

@media (max-width: 800px) {
  body.home-index-page .submit,
  body.home-index-page .contact-form .submit,
  body.home-index-page .home-work-grid:not(.is-active) .contact-form .submit,
  body.home-index-page .home-work-grid.is-active .contact-form .submit {
    line-height: 1.16 !important;
    letter-spacing: 0.026em !important;
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
    padding-top: 0.03em !important;
    text-rendering: optimizeLegibility;
  }
}

body.project-page .project-stills-track {
  padding-left: 0 !important;
  padding-right: 0 !important;
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

body.project-page .project-stills-row {
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

/* Home index project buttons: let selected copy use the full button area. */
body.home-index-page .home-work-grid.is-active .short-film-title-tab {
  --short-film-title-pad-y: clamp(0.34rem, 0.62vw, 0.54rem);
  padding-top: var(--short-film-title-pad-y) !important;
}

body.home-index-page .short-film-title-tab.is-selected {
  padding-top: clamp(0.54rem, 0.9vw, 0.78rem) !important;
}

body.home-index-page .short-film-title-tab.is-selected .short-film-title-info {
  width: 100% !important;
  min-height: 0;
}

body.home-index-page .short-film-title-tab.is-selected .short-film-title-description {
  display: block !important;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin-bottom: clamp(0.42rem, 0.8vw, 0.68rem) !important;
  overflow: hidden;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* Mobile home index: keep contact identical whether the index is open or closed. */
@media (max-width: 800px) {
  body.home-index-page .home-index-shell header .socials,
  body.home-index-page .home-index-shell > .home-socials,
  body.home-index-page .contact-heading .socials {
    gap: clamp(0.72rem, 4.2vw, 1.02rem) !important;
  }

  body.home-index-page .home-index-shell header .socials a,
  body.home-index-page .home-index-shell > .home-socials a {
    width: 1.52rem !important;
    height: 1.52rem !important;
    flex: 0 0 1.52rem !important;
  }

  body.home-index-page .home-index-shell header .icon,
  body.home-index-page .home-index-shell > .home-socials .icon,
  body.home-index-page .contact-heading .icon {
    width: 1.14rem !important;
    height: 1.14rem !important;
  }

  body.home-index-page .home-index-shell header .tube-icon,
  body.home-index-page .home-index-shell > .home-socials .tube-icon,
  body.home-index-page .contact-heading .tube-icon {
    width: 1.3rem !important;
    height: 1.22rem !important;
  }

  body.home-index-page .home-index-shell header .instagram-icon,
  body.home-index-page .home-index-shell > .home-socials .instagram-icon,
  body.home-index-page .contact-heading .instagram-icon {
    width: 1.1rem !important;
    height: 1.16rem !important;
  }

  body.home-index-page .home-index-shell header .linkedin-icon,
  body.home-index-page .home-index-shell > .home-socials .linkedin-icon,
  body.home-index-page .contact-heading .linkedin-icon {
    width: 1.14rem !important;
    height: 1.14rem !important;
  }

  body.home-index-page .home-index-shell header .imdb-icon,
  body.home-index-page .home-index-shell > .home-socials .imdb-icon,
  body.home-index-page .contact-heading .imdb-icon {
    width: 1.78rem !important;
    height: 1.06rem !important;
  }

  body.home-index-page .home-index-shell header .socials a[aria-label="IMDb"],
  body.home-index-page .home-index-shell header .socials a[aria-label="IMDB"],
  body.home-index-page .home-index-shell > .home-socials a[aria-label="IMDb"],
  body.home-index-page .home-index-shell > .home-socials a[aria-label="IMDB"] {
    width: 1.92rem !important;
    flex-basis: 1.92rem !important;
  }

  body.home-index-page .contact.credit-row,
  body.home-index-page .home-work-grid:not(.is-active) .contact.credit-row,
  body.home-index-page .home-work-grid.is-active .contact.credit-row {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    border: var(--home-index-border) !important;
    border-top: 0 !important;
    overflow: hidden !important;
  }

  body.home-index-page .contact-wrap,
  body.home-index-page .home-work-grid:not(.is-active) .contact-wrap,
  body.home-index-page .home-work-grid.is-active .contact-wrap {
    --home-contact-pad: clamp(0.56rem, 2.2vw, 0.76rem);
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: end !important;
    gap: clamp(0.48rem, 2vw, 0.68rem) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: var(--home-contact-pad) var(--home-contact-pad) 0 !important;
    box-sizing: border-box !important;
  }

  body.home-index-page .contact-heading,
  body.home-index-page .home-work-grid:not(.is-active) .contact-heading,
  body.home-index-page .home-work-grid.is-active .contact-heading {
    align-self: end !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  body.home-index-page .contact-heading p,
  body.home-index-page .contact-heading p strong,
  body.home-index-page .contact-heading p a,
  body.home-index-page .home-work-grid:not(.is-active) .contact-heading p,
  body.home-index-page .home-work-grid:not(.is-active) .contact-heading p strong,
  body.home-index-page .home-work-grid:not(.is-active) .contact-heading p a,
  body.home-index-page .home-work-grid.is-active .contact-heading p,
  body.home-index-page .home-work-grid.is-active .contact-heading p strong,
  body.home-index-page .home-work-grid.is-active .contact-heading p a {
    font-size: clamp(0.72rem, 3vw, 0.9rem) !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }

  body.home-index-page .contact-form,
  body.home-index-page .home-work-grid:not(.is-active) .contact-form,
  body.home-index-page .home-work-grid.is-active .contact-form {
    display: grid !important;
    width: calc(100% + (var(--home-contact-pad) * 2)) !important;
    max-width: none !important;
    margin-inline: calc(var(--home-contact-pad) * -1) !important;
    justify-self: start !important;
    align-self: end !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:
      minmax(clamp(1.58rem, 5.2vw, 1.9rem), auto)
      minmax(clamp(1.58rem, 5.2vw, 1.9rem), auto)
      minmax(3.7rem, auto)
      minmax(1.32rem, auto) !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  body.home-index-page .contact-form input[name="firstName"],
  body.home-index-page .home-work-grid:not(.is-active) .contact-form input[name="firstName"],
  body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"] {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.home-index-page .contact-form input[name="email"],
  body.home-index-page .home-work-grid:not(.is-active) .contact-form input[name="email"],
  body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.home-index-page .contact-form textarea,
  body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea,
  body.home-index-page .home-work-grid.is-active .contact-form textarea {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    height: auto !important;
    min-height: clamp(3.7rem, 16vw, 5.1rem) !important;
    max-height: none !important;
  }

  body.home-index-page .contact-form .submit,
  body.home-index-page .home-work-grid:not(.is-active) .contact-form .submit,
  body.home-index-page .home-work-grid.is-active .contact-form .submit {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(1.32rem, 4vw, 1.52rem) !important;
    min-height: clamp(1.32rem, 4vw, 1.52rem) !important;
    margin: 0 !important;
  }

  body.home-index-page .contact-form input[type="text"],
  body.home-index-page .contact-form input[type="email"],
  body.home-index-page .home-work-grid:not(.is-active) .contact-form input[type="text"],
  body.home-index-page .home-work-grid:not(.is-active) .contact-form input[type="email"],
  body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
  body.home-index-page .home-work-grid.is-active .contact-form input[type="email"] {
    width: 100% !important;
    height: clamp(1.58rem, 5.2vw, 1.9rem) !important;
    padding-left: 0.34rem !important;
    font-size: clamp(0.72rem, 3.6vw, 0.9rem) !important;
    border: var(--home-index-border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  body.home-index-page .contact-form textarea,
  body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea,
  body.home-index-page .home-work-grid.is-active .contact-form textarea {
    padding: 0.28rem 0 0 0.34rem !important;
    font-size: clamp(0.72rem, 3.6vw, 0.9rem) !important;
    border: var(--home-index-border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
}

/* Project pages: keep the YouTube/video section clean and borderless. */
body.project-page .project-hero .project-slideshow-frame,
body.project-page .project-slideshow-frame,
body.project-page .project-video-cell,
body.project-page .project-slideshow-frame .feature-video,
body.project-page iframe.feature-video,
body.project-page video.feature-video {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.project-page .project-video-cell {
  border-bottom: 0 !important;
}

body.project-page .project-slideshow-frame::before,
body.project-page .project-slideshow-frame::after {
  display: none !important;
}

/* Mobile index typography: keep the labels blocky without looking compressed. */
@media (max-width: 800px) {
  body.home-index-page .home-work-grid::before,
  body.home-index-page .short-film-title-list::after {
    font-family: var(--index-display-font) !important;
    font-weight: 400 !important;
    font-stretch: normal !important;
    letter-spacing: 0.08em !important;
    line-height: 1.08 !important;
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
    text-rendering: optimizeLegibility !important;
  }

  body.home-index-page .submit,
  body.home-index-page .contact-form .submit,
  body.home-index-page .home-work-grid:not(.is-active) .contact-form .submit,
  body.home-index-page .home-work-grid.is-active .contact-form .submit {
    font-family: var(--index-display-font) !important;
    font-weight: 400 !important;
    font-stretch: normal !important;
    font-size: clamp(0.76rem, 2.95vw, 0.9rem) !important;
    letter-spacing: 0.06em !important;
    line-height: 1.28 !important;
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
    padding-top: 0 !important;
    text-rendering: optimizeLegibility !important;
  }

  body.home-index-page .short-film-title-main {
    font-size: clamp(1.48rem, 6.8vw, 2.08rem) !important;
    line-height: 0.84 !important;
  }
}

/* Mobile safe-area color: black on load, colorful once the index opens/reveals. */
@media (max-width: 800px) {
  html.site-color-revealed,
  html.site-monochrome-root.site-color-revealed {
    background: var(--site-background) !important;
    background-color: var(--back-dark) !important;
    background-attachment: scroll !important;
  }
}

body.home-index-page .contact-form textarea {
  resize: none;
}

body.project-page .project-contact {
  margin-top: clamp(0.28rem, 0.9vw, 0.62rem) !important;
}

body.home-index-page .home-work-grid.is-active .contact-form {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows:
    minmax(clamp(1.32rem, 1.75vw, 1.52rem), auto)
    minmax(clamp(1.32rem, 1.75vw, 1.52rem), auto)
    minmax(0, 1fr)
    minmax(0.72rem, auto) !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"] {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  border-left: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form .submit {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
}

body.home-index-page .home-work-grid.is-active .contact-wrap {
  overflow: hidden !important;
}

body.home-index-page .home-work-grid.is-active .contact-form {
  width: calc(100% + (var(--home-contact-pad, 0.62rem) * 2)) !important;
  margin-inline: calc(var(--home-contact-pad, 0.62rem) * -1) !important;
  justify-self: start !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"] {
  border-bottom: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
  border-top: var(--home-index-border) !important;
  border-bottom: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  border-top: var(--home-index-border) !important;
  border-bottom: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form .submit {
  border-top: var(--home-index-border) !important;
}

body.home-index-page .short-film-title-tab:not(.is-selected) {
  justify-content: center !important;
}

@media (max-width: 800px) {
  body.home-index-page .short-film-title-tab:not(.is-selected) {
    justify-content: center !important;
  }

  body.home-index-page .short-film-title-tab.is-selected .short-film-title-info {
    margin-top: clamp(0.42rem, 2.2vw, 0.72rem) !important;
  }

  body.home-index-page .short-film-title-tab.is-selected .short-film-title-description {
    padding-top: clamp(0.2rem, 1.25vw, 0.38rem) !important;
  }

  body.home-index-page footer,
  body.home-index-page .home-index-shell > footer,
  body.home-index-page .home-index-shell > footer.home-footer,
  body.home-index-page .footer-rights {
    font-size: clamp(0.7rem, 2.65vw, 0.86rem) !important;
    line-height: 1.18 !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-wrap {
    --home-contact-pad: clamp(0.56rem, 2.2vw, 0.76rem);
    padding-inline: var(--home-contact-pad) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-form {
    width: calc(100% + (var(--home-contact-pad) * 2)) !important;
    margin-inline: calc(var(--home-contact-pad) * -1) !important;
    justify-self: start !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:
      minmax(clamp(1.32rem, 4.8vw, 1.62rem), auto)
      minmax(clamp(1.32rem, 4.8vw, 1.62rem), auto)
      minmax(3.7rem, auto)
      minmax(1.26rem, auto) !important;
    gap: 0 !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"] {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    border-top: var(--home-index-border) !important;
    border-bottom: 0 !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    border-top: var(--home-index-border) !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-form textarea {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    border-top: var(--home-index-border) !important;
    border-bottom: 0 !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-form .submit {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    border-top: var(--home-index-border) !important;
  }
}

/* Open index contact: let the form itself connect cleanly to the box edges. */
body.home-index-page .home-work-grid.is-active .contact.credit-row {
  overflow: hidden !important;
}

body.home-index-page .home-work-grid.is-active .contact-wrap {
  --home-contact-pad: 0rem !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

body.home-index-page .home-work-grid.is-active .contact-heading {
  padding: clamp(0.42rem, 0.82vw, 0.62rem) clamp(0.44rem, 0.82vw, 0.62rem)
    clamp(0.36rem, 0.74vw, 0.54rem) !important;
  box-sizing: border-box !important;
}

body.home-index-page .home-work-grid.is-active .contact-form {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows:
    minmax(clamp(1.32rem, 1.75vw, 1.52rem), auto)
    minmax(clamp(1.32rem, 1.75vw, 1.52rem), auto)
    minmax(0, 1fr)
    minmax(0.72rem, auto) !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  box-sizing: border-box !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"],
body.home-index-page .home-work-grid.is-active .contact-form input[name="email"],
body.home-index-page .home-work-grid.is-active .contact-form textarea,
body.home-index-page .home-work-grid.is-active .contact-form .submit {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"] {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  border-bottom: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  border-top: var(--home-index-border) !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  border-top: var(--home-index-border) !important;
  border-bottom: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form .submit {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  border-top: var(--home-index-border) !important;
}

body.home-index-page .home-work-grid.is-active .contact.credit-row {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.home-index-page .home-work-grid.is-active .contact-wrap {
  --home-contact-pad: 0rem !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  box-sizing: border-box !important;
}

body.home-index-page .home-work-grid.is-active .contact-heading {
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(0.42rem, 0.82vw, 0.62rem) clamp(0.44rem, 0.82vw, 0.62rem)
    clamp(0.36rem, 0.74vw, 0.54rem) !important;
  box-sizing: border-box !important;
}

body.home-index-page .home-work-grid.is-active .contact-form {
  display: grid !important;
  width: calc(100% + (var(--home-index-border-width) * 2)) !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: calc(var(--home-index-border-width) * -1) !important;
  margin-block: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows:
    minmax(clamp(1.32rem, 1.75vw, 1.52rem), auto)
    minmax(clamp(1.32rem, 1.75vw, 1.52rem), auto)
    minmax(0, 1fr)
    minmax(0.72rem, auto) !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"],
body.home-index-page .home-work-grid.is-active .contact-form input[name="email"],
body.home-index-page .home-work-grid.is-active .contact-form textarea,
body.home-index-page .home-work-grid.is-active .contact-form .submit {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="firstName"] {
  grid-row: 1 !important;
  border-bottom: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form input[name="email"] {
  grid-row: 2 !important;
  border-top: var(--home-index-border) !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  grid-row: 3 !important;
  border-top: var(--home-index-border) !important;
  border-bottom: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form .submit {
  grid-row: 4 !important;
  border-top: var(--home-index-border) !important;
}

body.home-index-page .home-work-grid.is-active .contact.credit-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  align-content: stretch !important;
  justify-content: stretch !important;
}

body.home-index-page .home-work-grid.is-active .contact.credit-row > .contact-wrap {
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

/* Restore the original index-button feel after the contact edge fix. */
body.home-index-page .short-film-title-tab,
body.home-index-page .home-work-grid.is-active .short-film-title-tab,
body.home-index-page .short-film-title-tab:hover,
body.home-index-page .short-film-title-tab:focus-visible,
body.home-index-page.site-monochrome .short-film-title-tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: clamp(0.18rem, 0.45vw, 0.36rem) !important;
  padding: var(--short-film-title-pad-y) 0 !important;
  background: var(--home-index-fill, rgba(3, 5, 10, 0.54)) !important;
  border-color: #fff !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:hover,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:focus-visible {
  flex: 2.6 1 0 !important;
  justify-content: flex-start !important;
  padding-top: clamp(0.34rem, 0.58vw, 0.52rem) !important;
  padding-bottom: var(--short-film-title-pad-y) !important;
  background: transparent !important;
  color: #fff !important;
  cursor: default !important;
}

body.home-index-page .short-film-title-tab:not(.is-selected):hover,
body.home-index-page .short-film-title-tab:not(.is-selected):focus-visible {
  background: var(--home-index-fill, rgba(3, 5, 10, 0.54)) !important;
  color: #ffbf5e !important;
  border-color: #fff !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-main,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-sub {
  flex: 0 0 auto !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-main {
  color: var(--magenta-accent) !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-info {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  margin-top: clamp(0.24rem, 0.5vw, 0.42rem) !important;
  opacity: 1 !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-description {
  display: -webkit-box !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  line-clamp: 5 !important;
  margin-bottom: clamp(0.32rem, 0.62vw, 0.52rem) !important;
}

body.home-index-page .short-film-title-read-more,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
  display: flex !important;
  width: calc(100% + (var(--short-film-title-pad-x) * 2)) !important;
  min-height: clamp(0.92rem, 1.45vw, 1.12rem) !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: auto !important;
  margin-bottom: calc(var(--short-film-title-pad-y) * -1) !important;
  margin-inline: calc(var(--short-film-title-pad-x) * -1) !important;
  padding-block: 0.04rem !important;
  padding-inline: var(--short-film-title-pad-x) !important;
  font-size: clamp(0.56rem, 0.78vw, 0.68rem) !important;
  line-height: 1 !important;
  background: transparent !important;
  border-top: var(--home-index-border-width) solid #fff !important;
  color: var(--magenta-accent) !important;
}

body.home-index-page .short-film-title-read-more:hover,
body.home-index-page .short-film-title-read-more:focus-visible {
  color: #ffbf5e !important;
}

@media (max-width: 800px) {
  body.home-index-page .home-work-grid.is-active .short-film-title-tab {
    flex: 0 0 auto !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:hover,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:focus-visible {
    flex: 0 0 auto !important;
    min-height: clamp(8.6rem, 42vw, 11.2rem) !important;
    padding-top: clamp(0.46rem, 1.9vw, 0.72rem) !important;
    overflow: hidden !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-info {
    margin-top: clamp(0.42rem, 2vw, 0.68rem) !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-description {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    margin-bottom: clamp(0.54rem, 2.4vw, 0.82rem) !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more,
  body.home-index-page .short-film-title-read-more {
    min-height: clamp(1.08rem, 4.2vw, 1.28rem) !important;
    padding-block: 0.06rem !important;
    font-size: clamp(0.7rem, 2.8vw, 0.84rem) !important;
    line-height: 1.04 !important;
  }
}

/* Closed home index: remove the extra visual air under each film label. */
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-tab:not(.is-selected) {
  padding-top: calc(var(--short-film-title-pad-y) + 0.18rem) !important;
  padding-bottom: max(0px, calc(var(--short-film-title-pad-y) - 0.18rem)) !important;
}

:root {
  --site-footer-logo-size: clamp(0.72rem, 1vw, 0.9rem);
  --site-footer-rights-size: clamp(0.58rem, 0.74vw, 0.68rem);
  --site-footer-line-height: 1.12;
  --site-footer-logo-gap: 0.12rem;
  --site-footer-pad-top: clamp(0.38rem, 0.9vw, 0.56rem);
  --site-footer-pad-bottom: clamp(0.82rem, 1.65vw, 1.08rem);
}

footer[data-site-footer],
body.home-index-page footer[data-site-footer],
body.home-index-page .home-index-shell > footer[data-site-footer],
body.project-page .page-footer[data-site-footer],
body.gallery-page .page-footer[data-site-footer],
body.sound-list-page .page-footer[data-site-footer] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: var(--site-footer-pad-top) 0
    calc(var(--site-footer-pad-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  text-align: center !important;
  font-size: var(--site-footer-rights-size) !important;
  line-height: var(--site-footer-line-height) !important;
  color: var(--footer-rights-color) !important;
}

footer[data-site-footer] .footer-logo,
body.home-index-page footer[data-site-footer] .footer-logo,
body.project-page .page-footer[data-site-footer] .footer-logo,
body.gallery-page .page-footer[data-site-footer] .footer-logo,
body.sound-list-page .page-footer[data-site-footer] .footer-logo {
  display: block !important;
  width: max-content !important;
  margin: 0 auto var(--site-footer-logo-gap) !important;
  font-size: var(--site-footer-logo-size) !important;
  line-height: 0.86 !important;
}

footer[data-site-footer] .footer-rights,
body.home-index-page footer[data-site-footer] .footer-rights,
body.project-page .page-footer[data-site-footer] .footer-rights,
body.gallery-page .page-footer[data-site-footer] .footer-rights,
body.sound-list-page .page-footer[data-site-footer] .footer-rights {
  margin: 0 !important;
  font-size: var(--site-footer-rights-size) !important;
  line-height: var(--site-footer-line-height) !important;
  color: var(--footer-rights-color) !important;
  -webkit-text-fill-color: var(--footer-rights-color) !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
  text-shadow: none !important;
}

@media (max-width: 800px) {
  footer[data-site-footer],
  body.home-index-page footer[data-site-footer],
  body.home-index-page .home-index-shell > footer[data-site-footer],
  body.project-page .page-footer[data-site-footer],
  body.gallery-page .page-footer[data-site-footer],
  body.sound-list-page .page-footer[data-site-footer],
  footer[data-site-footer] .footer-rights,
  body.home-index-page footer[data-site-footer] .footer-rights,
  body.project-page .page-footer[data-site-footer] .footer-rights,
  body.gallery-page .page-footer[data-site-footer] .footer-rights,
  body.sound-list-page .page-footer[data-site-footer] .footer-rights {
    font-size: var(--site-footer-rights-size) !important;
    line-height: var(--site-footer-line-height) !important;
  }

  footer[data-site-footer] .footer-logo,
  body.home-index-page footer[data-site-footer] .footer-logo,
  body.project-page .page-footer[data-site-footer] .footer-logo,
  body.gallery-page .page-footer[data-site-footer] .footer-logo,
  body.sound-list-page .page-footer[data-site-footer] .footer-logo {
    font-size: var(--site-footer-logo-size) !important;
    line-height: 0.86 !important;
  }
}

/* Read-more labels: let the heavy display font use the full button height. */
body.home-index-page .short-film-title-read-more,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0.04em !important;
  line-height: 1.28 !important;
  overflow: visible !important;
  -webkit-text-stroke: 0 !important;
  paint-order: normal !important;
  text-rendering: optimizeLegibility !important;
}

@media (max-width: 800px) {
  body.home-index-page .short-film-title-read-more,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
    padding-top: 0 !important;
    padding-bottom: 0.05em !important;
    line-height: 1.34 !important;
  }
}

/* Home index titles: slightly larger project names. */
body.home-index-page .short-film-title-main,
body.home-index-page .short-film-title-track {
  font-size: clamp(1.38rem, 2.15vw, 2rem) !important;
}

@media (max-width: 800px) {
  body.home-index-page .short-film-title-main,
  body.home-index-page .short-film-title-track {
    font-size: clamp(1.62rem, 7.5vw, 2.28rem) !important;
  }
}

/* Home index polish: lighter panels, stable selected fill, readable read-more, matching message field. */
body.home-index-page {
  --home-index-fill: rgba(3, 5, 10, 0.38);
  --home-index-fill-hover: rgba(3, 5, 10, 0.38);
}

body.home-index-page .home-work-grid,
body.home-index-page .home-work-grid.is-active,
body.home-index-page .short-film-title-tab,
body.home-index-page .short-film-title-tab:not(.is-selected),
body.home-index-page .short-film-title-tab.is-selected,
body.home-index-page .short-film-title-tab.is-selected:hover,
body.home-index-page .short-film-title-tab.is-selected:focus-visible,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:hover,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:focus-visible,
body.home-index-page .contact.credit-row,
body.home-index-page.site-monochrome .contact.credit-row {
  background: var(--home-index-fill) !important;
}

body.home-index-page .short-film-title-read-more,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  padding-inline: var(--short-film-title-pad-x) !important;
  font-size: clamp(0.66rem, 0.92vw, 0.78rem) !important;
  line-height: 1.2 !important;
  color: #efa2ff !important;
}

body.home-index-page .contact-form input[type="text"],
body.home-index-page .contact-form input[type="email"],
body.home-index-page .contact-form textarea {
  font-size: var(--site-type-small) !important;
}

body.home-index-page .contact-form textarea {
  padding-left: 0.34rem !important;
  padding-right: 0.34rem !important;
  text-indent: 0 !important;
}

body.home-index-page .contact-form textarea::placeholder {
  font-size: inherit !important;
  color: inherit !important;
}

@media (max-width: 800px) {
  body.home-index-page .short-film-title-read-more,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: clamp(0.8rem, 3.1vw, 0.94rem) !important;
    line-height: 1.2 !important;
  }

  body.home-index-page .contact-form input[type="text"],
  body.home-index-page .contact-form input[type="email"],
  body.home-index-page .contact-form textarea {
    font-size: clamp(0.62rem, 0.85vw, 0.72rem) !important;
  }

  body.home-index-page .contact-form textarea {
    padding-left: 0.34rem !important;
    padding-right: 0.34rem !important;
  }
}

body.home-index-page {
  --home-index-fill: rgba(3, 5, 10, 0.30);
  --home-index-fill-hover: rgba(3, 5, 10, 0.30);
}

body.home-index-page .home-work-grid,
body.home-index-page .home-work-grid.is-active,
body.home-index-page .short-film-title-tab,
body.home-index-page .short-film-title-tab:not(.is-selected),
body.home-index-page .short-film-title-tab.is-selected,
body.home-index-page .short-film-title-tab.is-selected:hover,
body.home-index-page .short-film-title-tab.is-selected:focus-visible,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:hover,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:focus-visible,
body.home-index-page .contact.credit-row,
body.home-index-page.site-monochrome .contact.credit-row {
  background: var(--home-index-fill) !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:hover,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:focus-visible {
  padding-top: clamp(0.48rem, 0.78vw, 0.68rem) !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-main {
  padding-top: clamp(0.08rem, 0.24vw, 0.16rem) !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-info {
  display: grid !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: clamp(0.38rem, 0.82vw, 0.62rem) !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-description {
  display: -webkit-box !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 8 !important;
  line-clamp: 8 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home-index-page .short-film-title-read-more,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
  display: flex !important;
  flex: 0 0 auto !important;
  width: calc(100% + (var(--short-film-title-pad-x) * 2)) !important;
  min-height: 0 !important;
  height: auto !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-inline: calc(var(--short-film-title-pad-x) * -1) !important;
  padding: 3px var(--short-film-title-pad-x) !important;
  overflow: visible !important;
  font-size: clamp(0.68rem, 0.94vw, 0.8rem) !important;
  line-height: 1.2 !important;
  color: #efa2ff !important;
}

body.home-index-page .contact-form input::placeholder,
body.home-index-page .contact-form textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  font-size: inherit !important;
}

body.home-index-page .contact-form textarea,
body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea,
body.home-index-page .home-work-grid.is-active .contact-form textarea {
  padding-left: 0.34rem !important;
  padding-right: 0.34rem !important;
  font-size: var(--site-type-small) !important;
  text-indent: 0 !important;
}

body.project-page .project-laurels img {
  cursor: pointer;
}

body.project-page .project-laurels img:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.62);
  outline-offset: 0.18rem;
}

@media (min-width: 601px) and (max-width: 1200px) {
  body.project-page .project-hero {
    padding-bottom: clamp(0.2rem, 0.85vh, 0.6rem) !important;
  }

  body.project-page .project-details-section,
  body.project-page .project-details-section.has-no-poster {
    margin-top: clamp(0.35rem, 1.1vw, 0.85rem) !important;
  }
}

@media (max-width: 800px) {
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected {
    padding-top: clamp(0.62rem, 2.4vw, 0.88rem) !important;
    padding-bottom: 0 !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-info {
    gap: clamp(0.62rem, 3vw, 0.92rem) !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-description {
    -webkit-line-clamp: 5 !important;
    line-clamp: 5 !important;
  }

  body.home-index-page .short-film-title-read-more,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    font-size: clamp(0.78rem, 3vw, 0.9rem) !important;
    line-height: 1.2 !important;
  }

  body.home-index-page .contact-form textarea,
  body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea,
  body.home-index-page .home-work-grid.is-active .contact-form textarea {
    padding-left: 0.34rem !important;
    padding-right: 0.34rem !important;
    font-size: var(--site-type-small) !important;
  }
}

body.home-index-page .home-index-shell {
  --home-index-fill: rgba(3, 5, 10, 0.30) !important;
  --home-index-fill-hover: rgba(3, 5, 10, 0.30) !important;
}

body.home-index-page .contact-form input[type="text"],
body.home-index-page .contact-form input[type="email"],
body.home-index-page .contact-form textarea,
body.home-index-page .home-work-grid:not(.is-active) .contact-form input[type="text"],
body.home-index-page .home-work-grid:not(.is-active) .contact-form input[type="email"],
body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea,
body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
body.home-index-page .home-work-grid.is-active .contact-form input[type="email"],
body.home-index-page .home-work-grid.is-active .contact-form textarea {
  font-size: clamp(0.82rem, 1vw, 0.9rem) !important;
}

body.home-index-page .contact-form textarea,
body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea,
body.home-index-page .home-work-grid.is-active .contact-form textarea {
  padding-left: 0.34rem !important;
  padding-right: 0.34rem !important;
}

/* Contact placeholders: make the message field read exactly like Name and Email. */
body.home-index-page .contact-form input[type="text"]::placeholder,
body.home-index-page .contact-form input[type="email"]::placeholder,
body.home-index-page .contact-form textarea::placeholder,
body.home-index-page .home-work-grid:not(.is-active) .contact-form input[type="text"]::placeholder,
body.home-index-page .home-work-grid:not(.is-active) .contact-form input[type="email"]::placeholder,
body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea::placeholder,
body.home-index-page .home-work-grid.is-active .contact-form input[type="text"]::placeholder,
body.home-index-page .home-work-grid.is-active .contact-form input[type="email"]::placeholder,
body.home-index-page .home-work-grid.is-active .contact-form textarea::placeholder {
  color: var(--text-muted) !important;
  font: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  opacity: 1 !important;
}

body.home-index-page .contact-form textarea,
body.home-index-page .home-work-grid:not(.is-active) .contact-form textarea,
body.home-index-page .home-work-grid.is-active .contact-form textarea {
  padding-inline-start: 0.34rem !important;
  text-indent: 0 !important;
}

/* Phone home index: use one consistent mobile layout breakpoint. */
@media (max-width: 800px) {
  body.home-index-page .home-index-shell {
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-left: env(safe-area-inset-left, 0px);
    --mobile-safe-right: env(safe-area-inset-right, 0px);
    --mobile-safe-inline: calc(var(--mobile-safe-left) + var(--mobile-safe-right));
    --home-index-width: calc(100vw - 4rem - var(--mobile-safe-inline)) !important;
    align-items: center !important;
    padding-inline: max(1rem, var(--mobile-safe-left)) max(1rem, var(--mobile-safe-right)) !important;
    box-sizing: border-box !important;
  }

  body.home-index-page .home-index-shell.has-selected-film {
    --home-index-width: min(500px, calc(100vw - 4rem - var(--mobile-safe-inline))) !important;
  }

  body.home-index-page .home-index-shell > header,
  body.home-index-page .home-work-grid,
  body.home-index-page .home-work-grid:not(.is-active),
  body.home-index-page .home-index-shell > .home-socials {
    width: var(--home-index-width) !important;
    max-width: var(--home-index-width) !important;
  }

  body.home-index-page .home-work-grid.is-active {
    display: flex !important;
    width: var(--home-index-width) !important;
    max-width: var(--home-index-width) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    overflow: visible !important;
  }

  body.home-index-page .home-work-grid.is-active .home-short-film-controls,
  body.home-index-page .home-short-film-controls {
    grid-area: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    align-self: stretch !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab {
    flex: 0 0 auto !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:hover,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:focus-visible {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.home-index-page .home-mobile-film-panel {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-cell {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    grid-area: auto !important;
    flex: 0 0 auto !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-video-cell {
    order: 1 !important;
    display: grid !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-video-frame,
  body.home-index-page .home-mobile-film-panel .home-film-video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-stills-cell {
    order: 2 !important;
    width: 100% !important;
    height: clamp(13rem, 38vw, 21rem) !important;
    border-top: var(--home-index-border) !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-poster-cell {
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-poster-link {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-poster {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  body.home-index-page .contact.credit-row,
  body.home-index-page .home-work-grid.is-active .contact.credit-row {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  body.home-index-page .home-index-shell.has-selected-film > .home-socials {
    width: var(--home-index-width) !important;
    max-width: var(--home-index-width) !important;
    margin-inline: auto !important;
    justify-content: flex-end !important;
  }
}

/* Project send button: match the heavier send-button typography used elsewhere. */
body.project-page .project-contact .submit,
body.project-page .project-contact .contact-form .submit {
  font-family: var(--index-display-font) !important;
  font-weight: 400 !important;
  font-stretch: normal !important;
  font-synthesis: none !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  -webkit-text-stroke: 0 !important;
  text-rendering: optimizeLegibility !important;
}

/* Closed home index repair: keep startup rows compact and readable. */
body.home-index-page .home-work-grid:not(.is-active) .home-short-film-controls {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

body.home-index-page .home-work-grid:not(.is-active) .short-film-title-tab,
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-tab.is-selected,
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-tab.is-selected:hover,
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-tab.is-selected:focus-visible {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: clamp(3rem, 5.8vw, 4rem) !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: clamp(0.44rem, 0.78vw, 0.58rem) 0 !important;
  overflow: hidden !important;
  background: var(--home-index-fill, rgba(3, 5, 10, 0.3)) !important;
  color: #fff !important;
}

body.home-index-page .home-work-grid:not(.is-active) .short-film-title-main,
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-sub {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 1em !important;
  max-height: none !important;
  overflow: hidden !important;
}

body.home-index-page .home-work-grid:not(.is-active) .short-film-title-track,
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-sub-track {
  display: inline-block !important;
  height: auto !important;
  min-height: 1em !important;
  max-height: none !important;
}

body.home-index-page .home-work-grid:not(.is-active) .short-film-title-main {
  line-height: 0.78 !important;
  margin-bottom: -0.04em !important;
}

body.home-index-page .home-work-grid:not(.is-active) .short-film-title-sub {
  line-height: 0.82 !important;
  margin-top: -0.02em !important;
}

body.home-index-page .home-work-grid:not(.is-active) .short-film-title-info,
body.home-index-page .home-work-grid:not(.is-active) .home-mobile-film-panel {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* Active index loglines: clamp before the button clips them. */
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-info {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-description {
  display: -webkit-box !important;
  position: relative !important;
  min-height: 0 !important;
  max-height: calc(1.18em * var(--active-logline-lines, 4)) !important;
  overflow: hidden !important;
  font-size: var(--active-logline-font-size, clamp(0.52rem, 0.72vw, 0.74rem)) !important;
  line-height: 1.18 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: var(--active-logline-lines, 4) !important;
  line-clamp: var(--active-logline-lines, 4) !important;
  text-overflow: ellipsis !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-description.is-clamped {
  padding-right: 0 !important;
}

@media (min-width: 801px) and (max-width: 1100px) {
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-description {
    max-height: calc(1.18em * var(--active-logline-lines, 3)) !important;
    -webkit-line-clamp: var(--active-logline-lines, 3) !important;
    line-clamp: var(--active-logline-lines, 3) !important;
  }
}

@media (max-width: 520px) {
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-description {
    max-height: calc(1.18em * var(--active-logline-lines, 3)) !important;
    -webkit-line-clamp: var(--active-logline-lines, 3) !important;
    line-clamp: var(--active-logline-lines, 3) !important;
  }
}

body.home-index-page .contact.credit-row,
body.home-index-page .home-work-grid.is-active .contact.credit-row,
body.home-index-page.site-monochrome .contact.credit-row {
  background: var(--home-index-fill, rgba(3, 5, 10, 0.3)) !important;
  background-color: var(--home-index-fill, rgba(3, 5, 10, 0.3)) !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:hover,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:focus-visible {
  cursor: default !important;
}

body.home-index-page .home-work-grid.is-active .short-film-title-tab:not(.is-selected) {
  cursor: pointer !important;
}

@media (max-width: 800px) {
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    font-size: clamp(0.68rem, 2.35vw, 0.78rem) !important;
    line-height: 1.02 !important;
  }
}

body.home-index-page .home-index-shell .short-film-title-tab,
body.home-index-page .home-index-shell .short-film-title-tab:not(.is-selected),
body.home-index-page .home-index-shell .short-film-title-tab.is-selected,
body.home-index-page .home-index-shell .short-film-title-tab.is-selected:hover,
body.home-index-page .home-index-shell .short-film-title-tab.is-selected:focus-visible,
body.home-index-page .home-index-shell .contact.credit-row,
body.home-index-page .home-index-shell .home-work-grid.is-active .contact.credit-row {
  background: var(--home-index-fill, rgba(3, 5, 10, 0.3)) !important;
  background-color: var(--home-index-fill, rgba(3, 5, 10, 0.3)) !important;
  background-image: none !important;
}

body.home-index-page .home-index-shell .contact.credit-row {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 800px) {
  body.home-index-page .home-index-shell,
  body.home-index-page .home-index-shell.has-selected-film {
    --home-index-width: min(500px, calc(100vw - 4rem - var(--mobile-safe-inline, 0px))) !important;
  }

  body.home-index-page .home-index-shell:not(.has-selected-film) > header {
    margin-bottom: clamp(0.18rem, 1.2vh, 0.42rem) !important;
    padding-bottom: clamp(0.08rem, 0.8vh, 0.18rem) !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    font-size: clamp(0.86rem, 3.75vw, 1.04rem) !important;
    line-height: 1.06 !important;
  }

  body.home-index-page .home-work-grid.is-active .contact-form input[type="text"],
  body.home-index-page .home-work-grid.is-active .contact-form input[type="email"],
  body.home-index-page .home-work-grid.is-active .contact-form textarea {
    padding-left: clamp(0.46rem, 2.2vw, 0.58rem) !important;
    padding-inline-start: clamp(0.46rem, 2.2vw, 0.58rem) !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-stills-cell,
  body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-film-stills-cell {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: var(--home-index-border) !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-stills-cell::before {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }

  body.home-index-page .home-mobile-film-panel .home-film-stills-cell::before {
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    z-index: 6 !important;
    border-top: var(--home-index-border) !important;
    transform: translateY(calc(var(--home-index-border-width) * -0.5)) !important;
  }

  body.home-index-page .home-mobile-film-panel .home-stills-row {
    flex: 1 1 50% !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.home-index-page .home-mobile-film-panel .home-stills-row + .home-stills-row {
    border-top: 0 !important;
  }

  body.home-index-page .home-mobile-film-panel .home-stills-track {
    height: 100% !important;
    align-items: stretch !important;
  }

  body.home-index-page .home-mobile-film-panel .home-stills-item {
    height: 100% !important;
    box-sizing: border-box !important;
  }

  body.home-index-page .home-mobile-film-panel .home-stills-item + .home-stills-item {
    border-left: var(--home-index-border) !important;
  }

  body.home-index-page .home-mobile-film-panel .home-stills-image {
    display: block !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  body.home-index-page .home-index-shell > footer.home-footer,
  body.home-index-page .home-index-shell > footer[data-site-footer] {
    position: static !important;
    inset: auto !important;
    width: var(--home-index-width) !important;
    max-width: var(--home-index-width) !important;
    margin: clamp(1.1rem, 4vw, 1.8rem) auto 0 !important;
    padding-inline: 0 !important;
    pointer-events: auto !important;
  }
}

body.home-index-page .short-film-title-read-more,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
  position: relative !important;
  display: block !important;
  width: calc(100% + (var(--short-film-title-pad-x) * 2)) !important;
  min-height: 0 !important;
  height: clamp(1.22rem, 1.92vw, 1.42rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-inline: calc(var(--short-film-title-pad-x) * -1) !important;
  padding: 0 var(--short-film-title-pad-x) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.home-index-page .short-film-title-read-more-text {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: inline-block !important;
  width: max-content !important;
  max-width: calc(100% - (var(--short-film-title-pad-x) * 2)) !important;
  font: inherit !important;
  line-height: 0.7 !important;
  transform: translate(-50%, -50%) scaleY(1.08) !important;
  transform-origin: 50% 50% !important;
  text-align: center !important;
}

@media (max-width: 800px) {
  body.home-index-page .home-index-shell:not(.has-selected-film) {
    padding-top: calc(clamp(0.85rem, 4.5vh, 1.65rem) + 0.75rem) !important;
  }

  body.home-index-page .short-film-title-read-more,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
    height: clamp(1.26rem, 5vw, 1.46rem) !important;
    font-size: clamp(0.94rem, 4vw, 1.06rem) !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.home-index-page .short-film-title-read-more-text {
    line-height: 0.68 !important;
    transform: translate(-50%, -63%) scaleY(1.1) !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .home-mobile-film-panel {
    margin-top: 0 !important;
  }
}

/* Closed index buttons: keep the film labels off the top and bottom edges. */
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-tab,
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-tab:not(.is-selected),
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-tab.is-selected,
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-tab.is-selected:hover,
body.home-index-page .home-work-grid:not(.is-active) .short-film-title-tab.is-selected:focus-visible {
  padding-top: clamp(0.46rem, 0.82vw, 0.62rem) !important;
  padding-bottom: clamp(0.46rem, 0.82vw, 0.62rem) !important;
}

/* Mobile read-more: keep the old compact strip without fake text offsets. */
@media (max-width: 800px) {
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-info {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more {
    position: relative !important;
    display: flex !important;
    width: calc(100% + (var(--short-film-title-pad-x) * 2)) !important;
    height: auto !important;
    min-height: clamp(1.08rem, 4.2vw, 1.28rem) !important;
    align-items: center !important;
    align-self: stretch !important;
    justify-content: center !important;
    margin-inline: calc(var(--short-film-title-pad-x) * -1) !important;
    padding: 0.06rem var(--short-film-title-pad-x) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    line-height: 1 !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more-text {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    line-height: 1 !important;
    transform: none !important;
  }
}

/* Disable the old stills divider layer now that stills use white gaps. */
body.home-index-page .home-work-grid.is-active .home-film-stills-cell::before,
body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-film-stills-cell::before {
  content: none !important;
  display: none !important;
}

/* Home index stills: white background with interior gaps only, no perimeter borders. */
body.home-index-page .home-work-grid.is-active .home-film-stills-cell,
body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-film-stills-cell {
  --home-stills-gap: var(--home-index-border-width, 1px);
  gap: var(--home-stills-gap) !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.home-index-page .home-work-grid.is-active .home-stills-row,
body.home-index-page .home-work-grid.is-active .home-stills-row:first-child,
body.home-index-page .home-work-grid.is-active .home-stills-row + .home-stills-row,
body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-stills-row,
body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-stills-row:first-child,
body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-stills-row + .home-stills-row {
  border: 0 !important;
  background: transparent !important;
}

body.home-index-page .home-work-grid.is-active .home-stills-track,
body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-stills-track {
  gap: var(--home-stills-gap) !important;
  background: transparent !important;
}

body.home-index-page .home-work-grid.is-active .home-stills-item,
body.home-index-page .home-work-grid.is-active .home-stills-item + .home-stills-item,
body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-stills-item,
body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-stills-item + .home-stills-item {
  border: 0 !important;
  background: transparent !important;
}

body.home-index-page .home-work-grid.is-active.is-loading-selection .home-film-stills-cell,
body.home-index-page .home-work-grid.is-active.is-loading-selection .home-mobile-film-panel .home-film-stills-cell {
  visibility: hidden !important;
}

@media (min-width: 801px) {
  body.home-index-page .home-work-grid.is-active .home-film-stills-cell {
    padding-left: 0 !important;
  }
}

body.home-index-page .short-film-title-read-more {
  transition: color 160ms ease !important;
}

body.home-index-page .short-film-title-read-more:hover,
body.home-index-page .short-film-title-read-more:focus-visible,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more:hover,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more:focus-visible {
  color: #ffbf5e !important;
  -webkit-text-fill-color: #ffbf5e !important;
}

body.home-index-page .short-film-title-read-more:hover .short-film-title-read-more-text,
body.home-index-page .short-film-title-read-more:focus-visible .short-film-title-read-more-text,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more:hover .short-film-title-read-more-text,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more:focus-visible .short-film-title-read-more-text {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* Home index video viewer needs a bottom edge above the stills area. */
body.home-index-page .home-work-grid.is-active .home-film-video-cell,
body.home-index-page .home-work-grid.is-active .home-mobile-film-panel .home-film-video-cell {
  border-bottom: var(--home-index-border) !important;
}

@media (min-width: 801px) {
  body.home-index-page .home-work-grid.is-active {
    border-right: var(--home-index-border) !important;
    box-sizing: border-box !important;
  }

  body.home-index-page .home-work-grid.is-active .home-film-video-cell {
    border-right: 0 !important;
  }

  body.home-index-page .home-work-grid.is-active .home-film-poster-cell {
    border-left: var(--home-index-border) !important;
    border-right: 0 !important;
  }

  body.home-index-page .home-work-grid.is-active .home-film-stills-cell {
    border-bottom: var(--home-index-border) !important;
  }
}

/* Keep index button joins as one clean white seam instead of overlapping top borders. */
body.home-index-page .home-index-shell .short-film-title-tab + .short-film-title-tab {
  margin-top: 0 !important;
  border-top: 0 !important;
}

body.home-index-page .home-index-shell .short-film-title-tab:first-child {
  border-top: var(--home-index-border) !important;
}

/* Project pages only show project-specific socials. */
body.project-page .socials a[aria-label="Instagram"],
body.project-page .socials a[aria-label="LinkedIn"],
body.project-page:not(.project-has-imdb) .socials a[aria-label="IMDb"] {
  display: none !important;
}

html.site-loading::before {
  background: transparent !important;
}

@media (max-width: 800px) {
  html.site-color-revealed,
  html[data-page-type="gallery"],
  html[data-background-preference="default"] {
    background: var(--site-background) !important;
    background-color: var(--back-dark) !important;
    background-attachment: scroll !important;
  }

  html[data-background-preference="paint-leather-dark"] {
    background:
      radial-gradient(circle at 14% 18%, rgba(255, 0, 24, 0.32), transparent 17rem),
      radial-gradient(circle at 78% 13%, rgba(0, 72, 255, 0.25), transparent 21rem),
      #000 !important;
    background-color: #000 !important;
  }

  html[data-background-preference="incidents-orange"] {
    background:
      linear-gradient(112deg, transparent 20%, rgba(255, 116, 24, 0.18) 39%, transparent 52%),
      radial-gradient(ellipse at 18% 28%, rgba(255, 108, 16, 0.16), transparent 18rem),
      #000 !important;
    background-color: #000 !important;
  }

  html[data-background-preference="playing-fire-magenta"] {
    background:
      radial-gradient(ellipse at 18% 24%, rgba(255, 74, 0, 0.24), transparent 17rem),
      radial-gradient(ellipse at 76% 20%, rgba(255, 0, 210, 0.2), transparent 20rem),
      #000 !important;
    background-color: #000 !important;
  }

  html[data-background-preference="twisted-prism"] {
    background:
      radial-gradient(ellipse at 18% 22%, rgba(0, 245, 232, 0.2), transparent 18rem),
      radial-gradient(ellipse at 78% 18%, rgba(255, 117, 0, 0.18), transparent 20rem),
      radial-gradient(ellipse at 68% 76%, rgba(255, 28, 0, 0.12), transparent 18rem),
      #000 !important;
    background-color: #000 !important;
  }
}

body.home-index-page .short-film-title-read-more,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more,
body.home-index-page .short-film-title-read-more .short-film-title-read-more-text,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more .short-film-title-read-more-text {
  color: var(--magenta-accent) !important;
  -webkit-text-fill-color: var(--magenta-accent) !important;
}

body.home-index-page .short-film-title-read-more:hover,
body.home-index-page .short-film-title-read-more:focus-visible,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more:hover,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more:focus-visible,
body.home-index-page .short-film-title-read-more:hover .short-film-title-read-more-text,
body.home-index-page .short-film-title-read-more:focus-visible .short-film-title-read-more-text,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more:hover .short-film-title-read-more-text,
body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-read-more:focus-visible .short-film-title-read-more-text {
  color: #ffbf5e !important;
  -webkit-text-fill-color: #ffbf5e !important;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  padding-left: 0.34rem !important;
  padding-inline-start: 0.34rem !important;
  font: inherit !important;
  font-size: clamp(0.82rem, 1vw, 0.9rem) !important;
  text-indent: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea::placeholder {
  color: var(--text-muted) !important;
  font: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  opacity: 1 !important;
}

body.home-index-page .home-work-grid.is-active.is-loading-selection .home-film-stills-cell,
body.home-index-page .home-work-grid.is-active.is-loading-selection .home-mobile-film-panel .home-film-stills-cell {
  visibility: visible !important;
}

body.project-page header,
body.gallery-page header {
  margin-top: clamp(1rem, 2.2vw, 1.55rem) !important;
}

@media (max-width: 800px) {
  body.home-index-page .home-index-shell {
    --home-index-border-width: 1px !important;
    --home-index-border: 1px solid #fff !important;
    padding-inline: max(1.18rem, env(safe-area-inset-left, 0px))
      max(1.18rem, env(safe-area-inset-right, 0px)) !important;
  }

  body.home-index-page .home-index-shell:not(.has-selected-film) {
    padding-top: calc(clamp(1.22rem, 5.8vh, 2.1rem) + env(safe-area-inset-top, 0px)) !important;
  }

  body.home-index-page .home-index-shell > header {
    padding-left: clamp(0.22rem, 2vw, 0.48rem) !important;
    padding-right: clamp(0.22rem, 2vw, 0.48rem) !important;
    box-sizing: border-box !important;
  }

  body.home-index-page .home-index-shell:not(.has-selected-film) > footer.home-footer,
  body.home-index-page .home-index-shell:not(.has-selected-film) > footer[data-site-footer] {
    position: static !important;
    inset: auto !important;
    width: var(--home-index-width) !important;
    max-width: var(--home-index-width) !important;
    margin: clamp(1.1rem, 4vw, 1.8rem) auto 0 !important;
    padding-inline: 0 !important;
    pointer-events: auto !important;
  }

  body.home-index-page .home-index-shell.has-selected-film > footer.home-footer,
  body.home-index-page .home-index-shell.has-selected-film > footer[data-site-footer] {
    position: static !important;
    inset: auto !important;
    width: var(--home-index-width) !important;
    max-width: var(--home-index-width) !important;
    margin: clamp(1.1rem, 4vw, 1.8rem) auto 0 !important;
    padding: var(--site-footer-pad-top) 0
      calc(var(--site-footer-pad-bottom) + env(safe-area-inset-bottom, 0px)) !important;
    pointer-events: auto !important;
  }

  body.project-page header,
  body.gallery-page header {
    margin-top: calc(clamp(1.25rem, 4.8vw, 1.85rem) + env(safe-area-inset-top, 0px)) !important;
  }
}

body.project-page header {
  margin-top: clamp(1.35rem, 2.75vw, 2.05rem) !important;
  padding-left: clamp(1rem, 2.4vw, 1.8rem) !important;
  padding-right: clamp(1rem, 2.4vw, 1.8rem) !important;
  box-sizing: border-box !important;
}

body.gallery-page header {
  width: var(--gallery-block-width) !important;
  max-width: var(--gallery-block-width) !important;
  margin-top: clamp(1.35rem, 2.75vw, 2.05rem) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.gallery-page .page-footer[data-site-footer] {
  margin-top: clamp(1.6rem, 4.6vw, 3.2rem) !important;
}

body.project-page .project-contact .contact-form input[type="text"]::placeholder,
body.project-page .project-contact .contact-form input[type="email"]::placeholder,
body.project-page .project-contact .contact-form textarea::placeholder {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  opacity: 1 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea {
  padding-left: 0.52rem !important;
  padding-inline-start: 0.52rem !important;
  text-indent: 0 !important;
}

body.home-index-page .home-work-grid.is-active .contact-form textarea::placeholder {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  font: inherit !important;
  opacity: 1 !important;
}

.contact-email {
  display: inline;
  margin-left: 0.36em;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  overflow-wrap: anywhere;
  text-decoration: none;
}

body.home-index-page .home-index-shell {
  --home-index-border-width: 1px !important;
  --home-index-border: 1px solid #fff !important;
}

body.project-page {
  --project-block-border-width: 1px !important;
  --project-block-border: 1px solid #fff !important;
}

body.gallery-page {
  --gallery-block-border-width: 1px !important;
  --gallery-block-border: 1px solid #fff !important;
}

.contact-location,
.contact-email {
  display: block !important;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

.contact-email {
  margin-left: 0 !important;
  margin-top: 0.08em;
}

body.home-index-page .contact-location,
body.home-index-page .contact-email {
  display: block !important;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

body.home-index-page .home-index-shell,
body.home-index-page .home-work-grid,
body.home-index-page .home-short-film-controls,
body.home-index-page .short-film-title-tab,
body.home-index-page .home-mobile-film-panel {
  overflow-anchor: none !important;
}

@media (max-width: 800px) {
  body.project-page header {
    margin-top: calc(clamp(1.55rem, 6vw, 2.25rem) + env(safe-area-inset-top, 0px)) !important;
    padding-left: max(1.05rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1.05rem, env(safe-area-inset-right, 0px)) !important;
  }

  body.gallery-page header {
    width: var(--gallery-block-width) !important;
    max-width: var(--gallery-block-width) !important;
    margin-top: calc(clamp(1.55rem, 6vw, 2.25rem) + env(safe-area-inset-top, 0px)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.gallery-page .page-footer[data-site-footer] {
    margin-top: clamp(1.9rem, 8vw, 3.4rem) !important;
  }
}

@media (max-width: 800px) {
  html,
  html.site-loading,
  html.site-monochrome-root {
    background-color: #151326 !important;
  }

  html[data-page-type="home"],
  html[data-page-type="home"].site-loading,
  html[data-page-type="home"].site-ready,
  html[data-page-type="home"].site-loaded,
  html[data-page-type="home"].site-monochrome-root,
  html[data-page-type="home"].site-color-revealed,
  html[data-page-type="home"].site-monochrome-root:not(.site-color-revealed) {
    background: var(--site-background) !important;
    background-color: var(--back-dark) !important;
    background-attachment: scroll !important;
  }

  body.home-index-page {
    min-height: 100svh !important;
    background-attachment: scroll !important;
  }

  body.home-index-page .container::before,
  body.home-index-page.site-monochrome .container::before,
  body.home-index-page:not(.site-monochrome) .container::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }

  body.home-index-page:not(.site-monochrome),
  body.home-index-page:not(.site-monochrome) .container,
  body.home-index-page:not(.site-monochrome) main,
  body.home-index-page:not(.site-monochrome) .credits {
    background: transparent !important;
    background-color: transparent !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:hover,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected:focus-visible,
  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-info {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.home-index-page .home-work-grid.is-active .short-film-title-tab.is-selected .short-film-title-description {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: clamp(0.78rem, 3.25vw, 0.98rem) !important;
    line-height: 1.22 !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    text-overflow: clip !important;
  }
}