@font-face {
  font-family: "League Gothic";
  src: url("../assets/fonts/league-gothic.regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Digital 7";
  src: url("../assets/fonts/digital-7.regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vcrosd";
  src: url("../assets/fonts/vcrosdmonorus_vhsicons.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "VHS";
  src: url("../assets/fonts/VHS.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Permanent Marker";
  src: url("../assets/fonts/PermanentMarker.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "League Gothic", Impact, "Arial Narrow", sans-serif;
  --font-body: "VHS", Georgia, "Times New Roman", serif;
  --font-placeholder: "vcrosd", var(--font-body);
  --font-tape-label: "Permanent Marker", "Comic Sans MS", cursive;
  /* Secondary font height control: 1 = normal, .95 = lower, 1.05 = taller. */
  --font-body-y-scale: 1.00;
}

html,
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.35;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

input,
textarea {
  font-family: var(--font-placeholder);
  font-size: inherit;
  font-style: normal;
}

button {
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: 400;
}

h1,
h2,
h3,
#menu,
.mobilenav,
.portfolio-categories__item,
.field label,
.reference-toggle,
.btn,
.contact-details p {
  font-family: var(--font-display);
  font-weight: 400;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ====================== BOTTOM MENU =========================== */

#menu {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--site-menu-height, 70px);
  padding: 0 60px;
  border-top: 1px solid #222;
  background: #000;
  color: #ccc;
}

#logo-menu,
.icon-list a,
.mobilenav a,
.mobile-brand {
  letter-spacing: .020em;
  -webkit-text-stroke: .01em currentColor;
}

#logo-menu {
  position: relative;
  flex: 0 0 220px;
  display: grid;
  align-items: center;
  min-height: 44px;
  color: #ddd;
  font-size: 21px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.42s ease,
    transform 0.42s ease;
  isolation: isolate;
  overflow: visible;
}

.site-menu__brand-text {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  opacity: 1;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

#logo-menu.is-loading .site-menu__brand-text,
#menu:not(.is-off-scene) .site-menu__brand-text {
  opacity: 0;
  transform: translateY(-6px);
}

#menu.is-off-scene #logo-menu {
  opacity: 1;
  transform: translateY(0);
}

#logo-menu.is-loading {
  opacity: 1;
  transform: translateY(0);
}

#men,
#social,
.mobilenav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#men {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 36px;
  transform: translateX(-50%);
}

#social {
  position: relative;
  display: flex;
  flex: 0 0 220px;
  justify-content: flex-end;
  gap: 10px;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.24s ease,
    visibility 0s linear 0s;
}

#social > li:not(.site-menu__credit) {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity 0.24s ease 1.5s,
    transform 0.24s ease 1.5s,
    visibility 0s linear 1.5s;
}

#social .site-menu__credit {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(calc(-50% + 8px));
  visibility: hidden;
  color: #cfcfcf;
  font-family: "vcrosd", var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  transition:
    opacity 0.42s ease 0.2s,
    transform 0.42s ease 0.2s,
    visibility 0s linear 0.42s;
}

#social .site-menu__credit a {
  display: inline;
  width: auto;
  height: auto;
  color: inherit;
  text-decoration: none;
}

#social .site-menu__credit a:hover,
#social .site-menu__credit a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

#menu.is-contact-section #social {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.24s ease,
    visibility 0s linear 0s;
}

#menu.is-contact-section #social > li:not(.site-menu__credit) {
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    visibility 0s linear 0.24s;
}

#menu.is-contact-section #social .site-menu__credit {
  opacity: 1;
  transform: translateY(-50%);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.42s ease,
    transform 0.42s ease,
    visibility 0s linear 0s;
}

#menu a {
  color: #ccc;
  text-decoration: none;
}

#social a {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  transition: color 0.2s ease;
}

#social svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: currentColor;
}

#menu a:hover,
#menu a:focus-visible {
  color: #666;
}

.icon-list a {
  position: relative;
  display: inline-block;
  color: #666 !important;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.icon-list a::before {
  content: attr(data-hover);
  position: absolute;
  top: 0;
  left: 0;
  max-height: 100%;
  overflow: hidden;
  color: #ddd;
  transition: max-height 0.5s ease;
}

.icon-list a:hover::before,
.icon-list a:focus-visible::before {
  max-height: 0%;
}

.mobilenav {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

.mobilenav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.5s ease,
    visibility 0s;
}

.mobilenav li {
  padding: 2vh;
  text-align: center;
}

.mobilenav a,
.mobile-brand {
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
}

.mobile-brand {
  margin-bottom: 2vh;
  color: #ddd;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.42s ease,
    transform 0.42s ease;
}

#menu.is-off-scene .mobile-brand {
  opacity: 1;
  transform: translateY(0);
}

.mobile-social {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.mobile-social a {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
}

.mobile-social svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.icon {
  position: relative;
  z-index: 1000;
  display: none;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hamburger {
  position: relative;
  display: block;
  width: 25px;
  height: 26px;
  margin: 0 auto;
}

.menui {
  position: absolute;
  left: 0;
  width: 25px;
  height: 2px;
  border-radius: 10px;
  background: #fff;
  transition: 0.6s ease;
  transition-timing-function: cubic-bezier(0.75, 0, 0.29, 1.01);
}

.top-menu {
  top: 5px;
}

.mid-menu {
  top: 13px;
}

.bottom-menu {
  top: 21px;
}

.top-animate {
  top: 13px;
  transform: rotate(45deg);
}

.mid-animate {
  opacity: 0;
}

.bottom-animate {
  top: 13px;
  transform: rotate(-225deg);
}

body.menu-open {
  overflow: hidden;
}

body.is-video-modal-open {
  overflow: hidden;
}

body.is-vhs-dragging {
  cursor: grabbing;
  user-select: none;
}

body.is-gallery-progress-dragging {
  cursor: grabbing;
  user-select: none;
}

@media (max-width: 991px) {
  #men,
  #social {
    display: none;
  }

  #menu {
    padding: 0 60px;
  }

  #logo-menu {
    flex-basis: auto;
  }

  .icon {
    display: block;
  }
}

@media (max-width: 600px) {
  #menu {
    padding: 0 30px;
  }

  .mobilenav li:first-child {
    margin-top: 30px;
  }
}

@media (max-width: 440px) {
  .mobilenav li {
    padding: 1.3vh;
  }

  .mobilenav li:first-child {
    margin-top: 15px;
    margin-bottom: 5px;
    padding: 0;
  }
}

@media (max-width: 320px) {
  .mobile-brand {
    display: none;
  }
}

/* ------------------------------------------------------------------TV Scene Section---------------------------*/

.main-area {
  --scene-grain-opacity: 0.05;
  --scene-grain-speed: 0.40s;
  --scene-grain-spread: 50%;

  block-size: 100svh;
  
  background: #000;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
}

.main-area::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: calc(var(--scene-grain-spread) * -1);
  pointer-events: none;
  opacity: var(--scene-grain-opacity);
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png");
  background-repeat: repeat;
  animation: scene-grain var(--scene-grain-speed) steps(2, end) infinite;
}

@keyframes scene-grain {
  0% {
    transform: translate3d(0, 0, 0);
  }

  10% {
    transform: translate3d(-12px, -18px, 0);
  }

  20% {
    transform: translate3d(16px, -8px, 0);
  }

  30% {
    transform: translate3d(-8px, 14px, 0);
  }

  40% {
    transform: translate3d(20px, 10px, 0);
  }

  50% {
    transform: translate3d(-18px, 6px, 0);
  }

  60% {
    transform: translate3d(10px, -14px, 0);
  }

  70% {
    transform: translate3d(-14px, 20px, 0);
  }

  80% {
    transform: translate3d(18px, 16px, 0);
  }

  90% {
    transform: translate3d(-10px, -10px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.tv-area {
  --tv-turn-on-duration: 0.48s;    /* tv bloom on/off duration */
  --tv-turn-off-duration: 0.42s;
}

.tv-area {
  position: relative;
  overflow-x: hidden;
}

.tv-content {
  position: absolute;
  inset: 0;
  z-index: 0;
  top: 43%;
  left: 50%;
  width: 24%;
  height: 31%;
  transform: translate(-50%, -50%); /* center on both axes */
  overflow: hidden;
  background: #070e0f;
}

.tv-content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.055),
      rgba(0, 0, 0, 0.08)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.16) 0,
      rgba(255, 255, 255, 0.16) 1px,
      rgba(0, 0, 0, 0.13) 1px,
      rgba(0, 0, 0, 0.13) 2px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 64, 64, 0.035) 0,
      rgba(255, 64, 64, 0.035) 1px,
      rgba(88, 255, 142, 0.028) 1px,
      rgba(88, 255, 142, 0.028) 2px,
      rgba(88, 150, 255, 0.035) 2px,
      rgba(88, 150, 255, 0.035) 3px
    );
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tv-content.is-on::after {
  opacity: 0.42;
}

.tv-content.is-switching-off::after {
  opacity: 0;
}

.tv-bloom {
  position: absolute;
  z-index: 3;
  top: 43%;
  left: 50%;
  width: 32%;
  height: 44%;
  transform: translate(-50%, -50%);
  border-radius: 18%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(108, 188, 255, 0.34) 0%,
      rgba(81, 158, 255, 0.18) 42%,
      rgba(63, 138, 255, 0) 76%
    );
  filter: blur(22px);
  opacity: 0;
  transition: opacity var(--tv-turn-off-duration) cubic-bezier(0.55, 0.08, 0.68, 0.53);
  pointer-events: none;
}

.screen {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  background: #ffffff;
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter: brightness(1.35);
}

.screen__signal {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: url("../assets/img/vhsnoise.gif") center / cover no-repeat;
  transition: opacity 0.18s ease 0.34s;
}

.screen__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: rgba(95, 255, 142, 0.92);
  font-family: "Digital 7", var(--font-display);
  font-size: clamp(22px, 2.4vw, 46px);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    0 0 3px rgba(88, 255, 142, 0.82),
    0 0 8px rgba(88, 255, 142, 0.48);
  background: #050606 url("../assets/img/vhsnoise.gif") center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.screen-controls-layer {
  position: absolute;
  z-index: 6;
  top: 43%;
  left: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(4px, 0.55vw, 8px);
  width: 24%;
  height: 31%;
  padding: clamp(5px, 1.1vw, 14px);
  overflow: hidden;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.screen-controls-layer[hidden] {
  display: none;
}

.screen-controls-layer .screen__control {
  opacity: 0;
  pointer-events: none;
}

.screen-controls-layer:hover .screen__control,
.screen-controls-layer:focus-within .screen__control {
  opacity: 0.74;
  pointer-events: auto;
}

.screen-controls-layer .screen__control:hover,
.screen-controls-layer .screen__control:focus-visible,
.screen-controls-layer:hover .screen__control.is-active,
.screen-controls-layer:focus-within .screen__control.is-active {
  opacity: 1;
}

.screen__control {
  display: grid;
  width: clamp(28px, 3vw, 44px);
  height: clamp(28px, 3vw, 44px);
  place-items: center;
  min-width: 0;
  border: 1px solid rgba(232, 238, 242, 0.32);
  border-radius: 4px;
  padding: 0;
  background: rgba(0, 0, 0, 0.36);
  color: rgba(232, 238, 242, 0.62);
  pointer-events: auto;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease;
}

.screen__control:hover,
.screen__control:focus-visible,
.screen__control.is-active {
  border-color: rgba(255, 211, 107, 0.72);
  background: rgba(0, 0, 0, 0.68);
  color: rgba(255, 236, 183, 0.94);
  outline: 0;
}

.screen__control-icon {
  display: block;
  width: 58%;
  height: 58%;
  fill: currentColor;
}

.screen__control-icon--sound {
  display: none;
}

.screen__control.is-active .screen__control-icon--muted {
  display: none;
}

.screen__control.is-active .screen__control-icon--sound {
  display: block;
}

.screen__video.is-active {
  opacity: 1;
}

.screen__video.has-player {
  background: #020202;
}

.screen__video::before {
  content: attr(data-active-tape);
  position: relative;
  z-index: 1;
}

.screen__video.has-player::before {
  content: none;
}

.screen__video-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  min-width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  background: #020202;
  transform: translate(-50%, -50%);
}

.screen__video-frame iframe,
.screen__video video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.screen__video-frame iframe {
  pointer-events: none;
}

.screen__video.has-player video {
  background: #020202;
}

.tv-content.is-on .screen {
  width: 100%;
  height: 100%;
  opacity: 1;
  background: #16222a;
  filter: brightness(1);
  animation: tv-screen-turn-on var(--tv-turn-on-duration) cubic-bezier(0.19, 1, 0.22, 1) both;
}

.tv-content.is-on .screen__signal {
  opacity: 1;
}

.tv-content.is-switching-off .screen {
  opacity: 1;
  animation: tv-screen-turn-off var(--tv-turn-off-duration) cubic-bezier(0.55, 0.08, 0.68, 0.53) both;
}

.tv-content.is-switching-off .screen__signal {
  opacity: 0;
  transition-delay: 0s;
}

.tv-bloom.is-on {
  opacity: 0.82;
  transition-duration: var(--tv-turn-on-duration);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.tv-room-image {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.vcr-clock {
  --vcr-clock-left: 50%;
  --vcr-clock-top: 79.7%;
  --vcr-clock-scale: 1;
  --vcr-clock-rotate: 0deg;

  position: absolute;
  z-index: 4;
  left: var(--vcr-clock-left);
  top: var(--vcr-clock-top);
  transform: translate(-50%, -50%) scale(var(--vcr-clock-scale)) rotate(var(--vcr-clock-rotate));
  transform-origin: center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(42px, 5.4vw, 95px);
  padding: clamp(1px, 0.16vw, 3px) clamp(4px, 0.42vw, 7px);
  border-radius: 2px;
  color: rgba(95, 255, 142, 0.92);
  font-family: "Digital 7", var(--font-display);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 3px rgba(88, 255, 142, 0.82),
    0 0 8px rgba(88, 255, 142, 0.48);
}

.vcr-clock__time {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcr-clock__status {
  display: none;
}

.vcr-clock.is-status .vcr-clock__time {
  display: none;
}

.vcr-clock.is-status .vcr-clock__status {
  display: block;
}

.vcr-clock__colon {
  animation: vcr-clock-colon-blink 1s steps(2, end) infinite;
}

@keyframes vcr-clock-colon-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.16;
  }
}

.vcr-slot-target {
  --vcr-slot-left: 50%;
  --vcr-slot-top: 76.4%;
  --vcr-slot-width: 11.3%;
  --vcr-slot-height: 3.5%;

  position: absolute;
  z-index: 5;
  left: var(--vcr-slot-left);
  top: var(--vcr-slot-top);
  width: var(--vcr-slot-width);
  height: var(--vcr-slot-height);
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(95, 255, 142, 0.88);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 8px rgba(95, 255, 142, 0.5),
    inset 0 0 10px rgba(0, 0, 0, 0.62);
  transition: opacity 0.18s ease;
}

.vcr-slot-target::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0;
  background: rgba(0, 0, 0, 0.92);
}

.vcr-slot-target.is-awaiting-tape,
.vcr-slot-target.is-closing {
  opacity: 1;
}

.vcr-slot-target.is-awaiting-tape {
  animation: vcr-slot-border-pulse 0.72s steps(2, end) infinite;
}

.vcr-slot-target.is-awaiting-tape::before {
  animation: vcr-slot-open 0.5s ease-out both;
}

.vcr-slot-target.is-closing {
  border-color: rgba(95, 255, 142, 0.45);
}

.vcr-slot-target.is-closing::before {
  animation: vcr-slot-close 0.48s ease-in both;
}

.vcr-slot-target.is-hot {
  border-color: rgba(255, 245, 184, 0.98);
  box-shadow:
    0 0 10px rgba(255, 245, 184, 0.72),
    0 0 22px rgba(95, 255, 142, 0.46),
    inset 0 0 12px rgba(0, 0, 0, 0.72);
}

@keyframes vcr-slot-open {
  from {
    height: 0;
  }

  to {
    height: 100%;
  }
}

@keyframes vcr-slot-close {
  from {
    height: 100%;
  }

  to {
    height: 0;
  }
}

@keyframes vcr-slot-border-pulse {
  0%,
  100% {
    border-color: rgba(95, 255, 142, 0.9);
  }

  50% {
    border-color: rgba(255, 245, 184, 0.95);
  }
}

/* Shared hotspot rules */
.hotspot {
  position: absolute;
  z-index: 4;            /* above the scene image */
  display: block;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
}



/* Box hotspot position and size, as percentages of the image size */
.hotspot-vhs {
  /* Adjust these percentages for the source image resolution. */
  left: 70%;      /* x position */
  top: 48%;       /* y position */
  width: 17%;     /* hotspot width */
  height: 16%;    /* hotspot height */
}

.hotspot-tv-power {
  /* Power light settings: blink interval and dim/bright colors. */
  --tv-power-blink-duration: 10s;
  --tv-power-blink-dim-bg: rgba(120, 10, 10, 0.58);
  --tv-power-blink-dim-inner: rgba(0, 0, 0, 0.08);
  --tv-power-blink-dim-glow: rgba(255, 35, 35, 0.2);
  --tv-power-blink-bright-bg: rgba(255, 20, 20, 0.96);
  --tv-power-blink-bright-inner: rgba(255, 235, 235, 0.32);
  --tv-power-blink-bright-glow: rgba(255, 55, 55, 0.86);

  left: 39.85%;
  top: 63.5%;
  width: 20px;
  height: 6px;
  border-radius: 1.6px;
  background: var(--tv-power-blink-dim-bg);
  box-shadow:
    inset 0 0 0 1px var(--tv-power-blink-dim-inner),
    0 0 3px var(--tv-power-blink-dim-glow);
  animation: tv-power-blink var(--tv-power-blink-duration) steps(1, end) infinite;
  transition: transform 0.18s ease;
}

.hotspot-tv-power:hover {
  transform: scale(1.08);
}

.hotspot-tv-power.is-on {
  background: rgba(54, 214, 112, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(224, 255, 235, 0.42),
    0 0 8px rgba(90, 255, 149, 0.78),
    0 0 18px rgba(90, 255, 149, 0.34);
  animation: none;
}

@keyframes tv-power-blink {
  0%,
  49.99% {
    background: var(--tv-power-blink-dim-bg);
    box-shadow:
      inset 0 0 0 1px var(--tv-power-blink-dim-inner),
      0 0 3px var(--tv-power-blink-dim-glow);
  }

  50%,
  100% {
    background: var(--tv-power-blink-bright-bg);
    box-shadow:
      inset 0 0 0 1px var(--tv-power-blink-bright-inner),
      0 0 8px var(--tv-power-blink-bright-glow),
      0 0 18px var(--tv-power-blink-bright-glow);
  }
}

@keyframes tv-screen-turn-on {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    background: #ffffff;
    filter: brightness(2.4);
  }

  16% {
    width: 2px;
    height: 2px;
    opacity: 1;
    background: #ffffff;
    filter: brightness(2.4);
  }

  48% {
    width: 100%;
    height: 2px;
    opacity: 1;
    background: #ffffff;
    filter: brightness(2.2);
  }

  100% {
    width: 100%;
    height: 100%;
    opacity: 1;
    background: #16222a;
    filter: brightness(1);
  }
}

@keyframes tv-screen-turn-off {
  0% {
    width: 100%;
    height: 100%;
    opacity: 1;
    background: #16222a;
    filter: brightness(1);
  }

  54% {
    width: 100%;
    height: 2px;
    opacity: 1;
    background: #ffffff;
    filter: brightness(2.3);
  }

  100% {
    width: 0;
    height: 0;
    opacity: 0;
    background: #ffffff;
    filter: brightness(2.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-area::after,
  .tv-content.is-on .screen,
  .tv-content.is-switching-off .screen,
  .screen__signal,
  .vcr-slot-target,
  .vcr-slot-target::before {
    animation: none;
  }

  .tv-content.is-on .screen {
    width: 100%;
    height: 100%;
    opacity: 1;
    background: #16222a;
  }

  .tv-content.is-switching-off .screen {
    width: 0;
    height: 0;
    opacity: 0;
  }

  .tv-content.is-on .screen__signal {
    opacity: 1;
  }

  .vcr-slot-target.is-awaiting-tape::before {
    height: 100%;
  }

  .vcr-slot-target.is-closing::before {
    height: 0;
  }
}


.vhs-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  z-index: 3;              /* above the background and glow */
  pointer-events: none;    /* does not block hotspot clicks */
}

/* The hotspot remains a clickable mask above everything */
.hotspot { z-index: 4; }   /* keep this above vhs-box */

/* Glow behind the box */
.vhs-glow {
  position: absolute;
  z-index: 2;              /* between the background and vhs-box */
  pointer-events: none;
  /* Center the glow relative to the box. */
  left: 78%;
  top: 54%;
  width: 22%;
  height: 23%;
  transform: translate(-50%, -50%);
  border-radius: 50%;

  /* The light itself: a soft spot that can be intensified or softened. */
  background:
    radial-gradient(ellipse at center,
      rgba(255, 215, 102, 0.85) 0%,
      rgba(255, 208, 80, 0.5) 32%,
      rgba(255, 200, 60, 0.18) 68%,
      rgba(255, 200, 60, 0.0) 100%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .44s ease;
}

/* Enable the glow when the hotspot is hovered. */
.hotspot-vhs:hover + .vhs-glow {
  opacity: 1;
}

/* Keep keyboard accessibility: focus also enables the glow. */
.hotspot:focus-visible + .vhs-glow {
  opacity: 1;
}

/* Remove has-lamp-flicker from .main-area in src/index.html to disable this overlay. */
.lamp-glow {
  --lamp-glow-left: 82.7%;
  --lamp-glow-top: 31.4%;
  --lamp-glow-width: 13%;
  --lamp-glow-height: 19%;
  --lamp-glow-idle-opacity: 0.22;
  --lamp-glow-flicker-duration: 19s;

  position: absolute;
  z-index: 2;
  left: var(--lamp-glow-left);
  top: var(--lamp-glow-top);
  width: var(--lamp-glow-width);
  height: var(--lamp-glow-height);
  transform: translate(-50%, -50%) rotate(-14deg);
  transform-origin: center;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(255, 226, 118, 0.7) 0%,
      rgba(255, 190, 50, 0.34) 42%,
      rgba(255, 172, 34, 0.12) 70%,
      rgba(255, 172, 34, 0.0) 100%);
  filter: blur(20px) brightness(1);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: opacity, filter;
}

.main-area.has-lamp-flicker .lamp-glow {
  opacity: var(--lamp-glow-idle-opacity);
  animation: lamp-bad-contact var(--lamp-glow-flicker-duration) steps(1, end) infinite;
}

@keyframes lamp-bad-contact {
  0%,
  78%,
  88%,
  100% {
    opacity: var(--lamp-glow-idle-opacity);
    filter: blur(20px) brightness(1);
  }

  79% {
    opacity: 0.05;
    filter: blur(20px) brightness(0.58);
  }

  80% {
    opacity: 0.38;
    filter: blur(20px) brightness(1.3);
  }

  81% {
    opacity: 0.08;
    filter: blur(20px) brightness(0.68);
  }

  82% {
    opacity: 0.28;
    filter: blur(20px) brightness(1.12);
  }

  83% {
    opacity: 0.12;
    filter: blur(20px) brightness(0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-area.has-lamp-flicker .lamp-glow {
    animation: none;
  }
}
/* Remove the browser outline from the link-style hotspot. */
.hotspot { outline: none; }
.hotspot:focus,
.hotspot:focus-visible { outline: none; }


/* ====================== VHS MENU =========================== */

.vhs-menu {
  --vhs-menu-closed-extra-x: 190px;
  --vhs-menu-slide-duration: 0.58s;
  --vhs-menu-closed-x: calc(100% + var(--vhs-menu-closed-extra-x));

  position: absolute;
  right: 0;
  bottom: clamp(73px, 2vw, 24px);
  width: clamp(220px, 26vw, 565px);
  aspect-ratio: 1250 / 1600;
  z-index: 5;
  background: url("../assets/img/box-bg.png") center / contain no-repeat;
  filter: drop-shadow(-10px 12px 18px rgba(0, 0, 0, 0.48));

  transform: translateX(var(--vhs-menu-closed-x));
  transition: transform var(--vhs-menu-slide-duration) cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  will-change: transform;
}

.vhs-menu.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.vhs-menu__content {
  --vhs-cassette-x: clamp(0px, 0.42vw, 8px);
  --vhs-cassette-width: min(464px, calc(100% - clamp(6px, 0.55vw, 12px)));
  --vhs-cassette-height-scale: 1.0;
  --vhs-cassette-gap: 3px;
  --vhs-cassette-hover-scale: 1.025;
  --vhs-cassette-backdrop-inset: 1% 3% 3%;
  --vhs-cassette-backdrop-opacity: 0.88;
  --vhs-cassette-backdrop-blur: 4px;
  --vhs-cassette-backdrop-scale: 1.08;

  position: absolute;
  top: 4.3%;
  right: 3.6%;
  left: 3.6%;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  transform: translateX(var(--vhs-cassette-x));
  filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.58));
  isolation: isolate;
}

.vhs-menu__content::before {
  content: "";
  position: absolute;
  inset: var(--vhs-cassette-backdrop-inset);
  z-index: 0;
  pointer-events: none;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 48%,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(8, 5, 3, 0.68) 48%,
      rgba(0, 0, 0, 0.0) 78%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.72) 54%,
      rgba(0, 0, 0, 0.9) 100%);
  box-shadow:
    inset 0 20px 42px rgba(0, 0, 0, 0.62),
    inset 0 -30px 56px rgba(0, 0, 0, 0.86);
  filter: blur(var(--vhs-cassette-backdrop-blur));
  opacity: var(--vhs-cassette-backdrop-opacity);
  transform: scale(var(--vhs-cassette-backdrop-scale));
  transform-origin: center;
}

.vhs-menu__cassette {
  --tape-label-single-size: clamp(18px, 6.25cqw, 40px);
  --tape-label-split-size: clamp(14px, 4.9cqw, 32px);
  --tape-label-long-size: clamp(11px, 4.05cqw, 26px);
  --tape-label-extra-long-size: clamp(9px, 3.1cqw, 20px);

  position: relative;
  z-index: 1;
  display: block;
  width: var(--vhs-cassette-width);
  max-width: 100%;
  height: auto;
  border: 0;
  padding: 0;
  flex: 0 0 auto;
  background: transparent;
  color: inherit;
  transform: scaleY(var(--vhs-cassette-height-scale));
  transform-origin: center;
  transition: transform 0.22s ease;
  cursor: grab;
  font: inherit;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  container-type: inline-size;
}

.vhs-menu__cassette-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.vhs-menu__cassette-label {
  position: absolute;
  top: 22%;
  right: 10.5%;
  left: 12.5%;
  z-index: 2;
  display: flex;
  height: 56%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(24, 18, 12, 0.92);
  font-family: var(--font-tape-label);
  font-size: clamp(18px, 2.8vw, 40px);
  font-size: var(--tape-label-single-size);
  font-weight: 400;
  line-height: 0.88;
  overflow-wrap: anywhere;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  text-transform: none;
  transform: rotate(-1.5deg);
  pointer-events: none;
}

.vhs-menu__cassette-label > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.vhs-menu__cassette-label.is-split {
  font-size: clamp(14px, 2.1vw, 32px);
  font-size: var(--tape-label-split-size);
  line-height: 0.84;
}

.vhs-menu__cassette-label.is-long {
  font-size: clamp(11px, 1.7vw, 26px);
  font-size: var(--tape-label-long-size);
  line-height: 0.84;
}

.vhs-menu__cassette-label.is-extra-long {
  font-size: clamp(9px, 1.35vw, 20px);
  font-size: var(--tape-label-extra-long-size);
  line-height: 0.82;
}

.vhs-menu__cassette + .vhs-menu__cassette {
  margin-top: var(--vhs-cassette-gap);
}

.vhs-menu__cassette:hover {
  z-index: 3;
  transform:
    scale(var(--vhs-cassette-hover-scale))
    scaleY(var(--vhs-cassette-height-scale));
}

.vhs-menu__cassette:active {
  cursor: grabbing;
}

.vhs-menu__cassette.is-picked {
  opacity: 0;
  pointer-events: none;
}

.vhs-menu__empty {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--vhs-cassette-width);
  min-height: clamp(92px, 9vw, 148px);
  place-items: center;
  margin-top: clamp(18px, 4vw, 54px);
  border: 1px solid rgba(232, 232, 232, 0.16);
  border-radius: 4px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.34);
  color: rgba(232, 232, 232, 0.58);
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 42px);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.vhs-drag-ghost {
  --vhs-drag-scale: 1;
  --vhs-drag-rotate: -2deg;

  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  display: block;
  width: var(--vhs-drag-width, 360px);
  height: auto;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--vhs-drag-scale)) rotate(var(--vhs-drag-rotate));
  transform-origin: center;
  filter:
    drop-shadow(0 18px 18px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 12px rgba(95, 255, 142, 0.2));
  will-change: top, left, transform, opacity;
}

.vhs-drag-ghost.is-near-vcr {
  --vhs-drag-rotate: -0.5deg;

  filter:
    drop-shadow(0 10px 12px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 18px rgba(255, 245, 184, 0.28));
  transition: transform 0.1s ease-out, filter 0.12s ease;
}

.vhs-drag-ghost.is-entering-vcr {
  --vhs-drag-rotate: 0deg;

  opacity: 0;
  transition:
    top 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    left 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.18s ease 0.28s;
}

.vhs-drag-ghost.is-returning-home {
  --vhs-drag-scale: 1;
  --vhs-drag-rotate: 0deg;

  transition:
    top 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    left 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.22s ease;
}

.vhs-drag-ghost.is-flying-away {
  --vhs-drag-scale: 0.72;
  --vhs-drag-rotate: 13deg;

  opacity: 0;
  transition:
    top 0.52s cubic-bezier(0.55, 0.08, 0.68, 0.53),
    left 0.72s cubic-bezier(0.55, 0.08, 0.68, 0.53),
    transform 0.72s cubic-bezier(0.55, 0.08, 0.68, 0.53),
    opacity 0.48s ease 0.12s;
}

.scene-loader {
  --loader-frame-position: 0%;
  --scene-loader-size: clamp(70px, 30vw, 96px);

  grid-area: 1 / 1;
  position: relative;
  justify-self: start;
  width: min(var(--scene-loader-size), 100%);
  aspect-ratio: 1;
  z-index: 1;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  background: url("../assets/img/reel-loader-sheet.png") var(--loader-frame-position) 0 / 500% 100% no-repeat;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
  image-rendering: auto;
}

.scene-loader.is-visible {
  opacity: 1;
  transform: translateY(-3px) scale(1);
}

@media (max-width: 700px) {
  body {
    font-size: 18px;
  }

  .tv-area {
    --mobile-scene-shift-x: -4vw;

    position: absolute;
    top: calc(50% - 10px);
    left: 50%;
    width: 260vw;
    max-width: none;
    aspect-ratio: 16 / 9;

    overflow: hidden;
    transform: translate(calc(-50% + var(--mobile-scene-shift-x)), -50%);
  }

  .tv-room-image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
  }

  .vcr-clock {
    --vcr-clock-left: 50%;
    --vcr-clock-top: 80.1%;
    --vcr-clock-scale: 0.7;
  }

  .tv-content.is-on .screen {
    animation: none;
    background: #050606 url("../assets/img/cinemorph-logo.jpg") center / contain no-repeat;
    filter: brightness(0.95) contrast(1.06);
  }

  .tv-content.is-on .screen__signal {
    opacity: 0.3;
    transition: none;
  }

  .screen__video {
    display: none;
  }

  .vhs-menu,
  .vhs-box {
    display: none !important;
  }

  .hotspot-vhs,
  .vhs-glow {
    display: none !important;
  }
}

@media (max-width: 540px) {
  .tv-area {
    width: 295vw;
  }
}

@media (max-width: 480px) {
  .tv-area {
    --mobile-scene-shift-x: 0vw;

    width: 320vw;
  }
}

@media (max-width: 390px) {
  .tv-area {
    --mobile-scene-shift-x: -8vw;

    width: 340vw;
  }
}

@media (max-width: 360px) {
  .tv-area {
    width: 355vw;
  }
}




/* ------------------------------------------------------------------TV Scene Section END---------------------------*/


/* ------------------------------------------------------------------Scrolling Sections---------------------------*/

:root{
  --dark-bg:#0a0e11;
  --dark-bg-rgb: 10, 14, 17;
  --dark-fg:#e8e8e8;
  --light-bg:#ffffff;
  --light-fg:#111111;
  --muted:#7a8a95;
  --accent:#ffd766;
  --maxw:1100px;
  --radius:14px;
  --shadow:0 12px 28px rgba(0,0,0,.18);
  --site-menu-height: 70px;
}

/* Base section layout */
.section{
  --section-padding-block: clamp(56px, 9vw, 120px);
  --section-noise-image: none;
  --section-bg-shade-image: none;
  --section-fill: var(--dark-bg);
  --section-fill-rgb: var(--dark-bg-rgb);

  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  height: 100vh;
  block-size: 100svh;
  min-height: 100vh;
  min-block-size: 100svh;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding:
    var(--section-padding-top, var(--section-padding-block))
    6vw
    var(--section-padding-bottom, calc(var(--section-padding-block) + var(--site-menu-height)));
  background-color: var(--section-fill);
  background-image:
    linear-gradient(
      104deg,
      var(--section-fill) 0%,
      var(--section-fill) 42%,
      rgba(var(--section-fill-rgb), 0.88) 56%,
      rgba(var(--section-fill-rgb), 0.36) 74%,
      rgba(var(--section-fill-rgb), 0) 100%
    ),
    var(--section-bg-shade-image),
    var(--section-noise-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--dark-fg);
}

.section::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.section__inner{
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
}
.section h1,
.section h2{
  margin:0 0 16px;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing:.02em;
  line-height:1.15;
  text-transform: uppercase;
}
.section p{
  display: inline-block;
  margin:0 0 clamp(6px, .55vw, 10px);
  font-family: var(--font-body);
  font-size: clamp(18px, 1.3vw, 25px);
  line-height: clamp(25px, 1.34vw, 30px);
  transform: scaleY(var(--font-body-y-scale));
  transform-origin: left center;
}

.section--dark,
.section--light{
  --section-fill: var(--dark-bg);
  --section-fill-rgb: var(--dark-bg-rgb);
  color: var(--dark-fg);
}
.lead{ color: var(--muted); max-width: 70ch; }

.lead--statement {
  font-style: italic;
  padding-top: var(--about-statement-offset, 20px);
}

#about {
  --section-padding-bottom: calc(clamp(36px, 5.2vw, 72px) + var(--site-menu-height));
  --about-copy-size: clamp(18px, 2.3vw, 28px);
  --about-copy-line: clamp(24px, 24px, 24px);
  --about-copy-gap: clamp(6px, 17px, 17px);
  --about-statement-size: clamp(16px, 1.8vw, 21px);
  --about-statement-line: clamp(20px, 1vw, 24px);
  --about-statement-offset: clamp(10px, 1.05vw, 18px);
  --about-team-gap: clamp(10px, 1.5vw, 16px);
  --about-team-offset: clamp(24px, 3.5vw, 30px);

  --section-noise-image: url("../assets/img/wallpaper_about_noise.gif");
}

#about .section__inner > p {
  max-width: min(100%, 70ch);
  margin-bottom: var(--about-copy-gap);
  font-size: var(--about-copy-size);
  line-height: var(--about-copy-line);
  text-wrap: pretty;
}

#about .section__inner > .lead--statement {
  font-size: var(--about-statement-size);
  line-height: var(--about-statement-line);
}

.about-team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--about-team-gap);
  margin-top: var(--about-team-offset);
}

.team-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border-radius: 4px;
  background: #11171b;
  color: #fff;
}

.team-card__avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  background: #0b1013;
  filter: grayscale(1) brightness(.82) contrast(1.08);
  object-fit: cover;
  transition:
    filter .28s ease,
    transform .28s ease;
}

.team-card:hover .team-card__avatar,
.team-card:focus-within .team-card__avatar {
  filter: grayscale(.25) brightness(.96) contrast(1.02);
  transform: scale(1.025);
}

.team-card__body {
  padding: clamp(10px, 1.2vw, 15px);
  background: #151c21;
}

.team-card h3 {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-card p {
  display: inline-block;
  margin: 6px 0 0;
  color: #8f9da5;
  font-family: var(--font-body);
  font-size: clamp(11px, .86vw, 13px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  transform: scaleY(var(--font-body-y-scale));
  transform-origin: left center;
}

#portfolio {
  --portfolio-bg-shade-opacity:.80;

  --section-bg-shade-image:
    linear-gradient(
      rgba(0, 0, 0, var(--portfolio-bg-shade-opacity)),
      rgba(0, 0, 0, var(--portfolio-bg-shade-opacity))
    );
  --section-noise-image: url("../assets/img/wallpaper_portfolio_noise.gif");
}

#gallery {
  --gallery-inner-max-height: 790px;
  --section-padding-block: clamp(54px, 8vw, 112px);
  --section-noise-image: url("../assets/img/wallpaper_gallery_noise.gif");

  overflow-y: hidden;
}

#gallery .section__inner {
  display: grid;
  height: min(
    calc(100svh - (var(--section-padding-block) * 2) - var(--site-menu-height)),
    var(--gallery-inner-max-height)
  );
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.gallery-stage {
  display: grid;
  margin: clamp(24px, 3.2vw, 38px) 0 0;
}

#gallery .gallery-stage {
  min-height: 0;
  margin: 0;
  padding-top: clamp(14px, 1.8vw, 24px);
}

.gallery-strip {
  --gallery-magnifier: 16;
  --gallery-gap: clamp(6px, 1vmin, 12px);
  --gallery-transition: .5s;

  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--gallery-gap);
  width: 100%;
  height: clamp(380px, 57vmin, 658px);
  min-height: 0;
  margin: 0;
}

#gallery .gallery-strip {
  height: 100%;
}

.gallery-strip--cinematic {
  overflow: hidden;
}

.gallery-strip::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.gallery-strip__item {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  color: inherit;
  text-decoration: none;
  outline: 0;
  isolation: isolate;
  opacity: .78;
  transition:
    flex var(--gallery-transition) ease,
    opacity var(--gallery-transition) ease;
}

.gallery-strip__item[hidden] {
  display: none;
}

.gallery-strip.is-switching .gallery-strip__item,
.gallery-strip.is-switching .gallery-strip__item img {
  transition: none;
}

.gallery-strip__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, .08),
      rgba(0, 0, 0, 0) 28%,
      rgba(0, 0, 0, .46)
    );
  opacity: .72;
  mix-blend-mode: soft-light;
}

.gallery-strip__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--gallery-focus-x, 50%) var(--gallery-focus-y, 50%);
  transform: scale(1.02);
  transform-origin: var(--gallery-focus-x, 50%) var(--gallery-focus-y, 50%);
  transition: transform var(--gallery-transition) ease;
}

.gallery-strip__item:hover,
.gallery-strip__item:focus-visible {
  flex: var(--gallery-magnifier) 1 0;
  opacity: 1;
}

.gallery-strip__item:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 215, 102, .86);
}

.gallery-strip__item:hover img,
.gallery-strip__item:focus-visible img {
  transform: scale(1.04);
}

.media-empty {
  display: grid;
  width: 100%;
  min-height: clamp(160px, 24vmin, 260px);
  place-items: center;
  color: rgba(232, 232, 232, .42);
  font-family: var(--font-display);
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gallery-strip .media-empty {
  height: 100%;
}

.gallery-strip.is-empty-row {
  display: none;
}

.portfolio-grid.is-empty .media-empty {
  grid-column: 1 / -1;
}

.gallery-progress {
  --gallery-progress: 0;
  --gallery-progress-size: 20%;

  position: relative;
  width: min(34vw, 360px);
  height: 22px;
  margin: clamp(14px, 2vw, 24px) auto 0;
  opacity: .82;
  cursor: grab;
  outline: 0;
  touch-action: none;
  user-select: none;
}

.gallery-progress[hidden] {
  display: none;
}

.gallery-progress:focus-visible {
  opacity: 1;
}

.gallery-progress.is-dragging {
  cursor: grabbing;
  opacity: 1;
}

.gallery-progress::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(232, 232, 232, .18);
  box-shadow: 0 0 12px rgba(255, 255, 255, .04);
  transform: translateY(-50%);
}

.gallery-progress__thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--gallery-progress) * (100% - var(--gallery-progress-size)));
  width: var(--gallery-progress-size);
  height: 9px;
  border-radius: 999px;
  background: rgba(232, 232, 232, .72);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14),
    0 0 14px rgba(232, 232, 232, .18);
  transform: translateY(-50%);
  transition: left .18s ease;
}

.gallery-progress.is-dragging .gallery-progress__thumb {
  transition: none;
}

#services {
  --service-title-size: clamp(26px, 1.9vw, 36px);
  --service-copy-size: clamp(13px, .82vw, 16px);
  --service-copy-line: clamp(19px, 1.18vw, 23px);
  --service-card-padding: clamp(16px, 1.7vw, 22px);
  --service-grid-gap: clamp(14px, 2vw, 22px);

  --section-noise-image: url("../assets/img/wallpaper_services_noise.gif");
}

#contact {
  --section-bg-shade-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .18),
      rgba(0, 0, 0, .64)
    );
  --section-noise-image: url("../assets/img/wallpaper_contact_noise.gif");
}

/* Portfolio */
.portfolio-categories{
  display:flex;
  gap: clamp(18px, 3vw, 42px);
  align-items:center;
  overflow-x:auto;
  margin:0;
  padding:0;
  white-space:nowrap;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.portfolio-categories::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
.portfolio-categories__item{
  position:relative;
  border:0;
  padding:0;
  background:transparent;
  color:rgba(232,232,232,.38);
  font-size: clamp(20px, 2.1vw, 34px);
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
  transition: color .2s ease;
}
.portfolio-categories__item:hover,
.portfolio-categories__item:focus-visible{
  color:rgba(232,232,232,.7);
}
.portfolio-categories__item.is-active{
  color:#fff;
}
.portfolio-grid{
  --portfolio-cell-height: clamp(154px, 17vw, 214px);

  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: var(--portfolio-cell-height);
  grid-auto-flow: dense;
  column-gap: 9px;
  row-gap: 13px;
  margin-top: 24px;
  counter-reset: portfolio-card;
}
.card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
  overflow:visible;
  background: transparent;
  color:#fff;
  counter-increment: portfolio-card;
}
.card--light{ background: transparent; color:#fff; }
.card--feature{
  grid-column:span 2;
  grid-row:span 2;
}
.ph-thumb{
  position:relative;
  order:2;
  flex:1 1 auto;
  min-height:0;
  margin:0;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  outline:0;
  /*border:1px solid rgba(255,255,255,.08);*/
  /*border-radius:var(--radius);*/
  background:rgba(255,255,255,.02);
}
.ph-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  pointer-events:none;
}
.ph-thumb::before{
  z-index:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 62%, rgba(255,255,255,.04) 100%),
    rgba(255,255,255,.02);
}
.portfolio-poster,
.portfolio-gif{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.portfolio-poster{
  z-index:1;
  opacity:.74;
  transition:
    opacity .35s ease,
    transform .35s ease;
}
.portfolio-poster:not([src]){
  opacity:0;
}
.portfolio-gif{
  z-index:2;
  opacity:0;
  transition:opacity .49s ease;
}
.portfolio-gif.is-playing{
  opacity:1;
}
.card:hover .portfolio-poster,
.card:focus-within .portfolio-poster{
  opacity:.96;
  transform:scale(1.025);
}
.ph-thumb:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(255, 215, 102, .86);
}
.ph-thumb--empty::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 62%, rgba(255,255,255,.035)),
    rgba(255,255,255,.018);
}
.card--light .ph-thumb{ background:rgba(255,255,255,.02); }
.card__body{
  order:1;
  flex:0 0 auto;
  min-width:0;
  padding:0;
}
.card h3{
  display:block;
  margin:0 0 10px;
  overflow:hidden;
  color:#fff;
  font-family: var(--font-display);
  font-size:clamp(15px, 25px, 35px);
  font-weight:400;
  line-height:1;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
.card h3::before{
  content:counter(portfolio-card, decimal-leading-zero) " ";
  margin-right:18px;
}
.card p{ display:none; }
.tag{
  display:none;
}

.video-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:clamp(14px, 4vw, 52px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .24s ease,
    visibility 0s linear .24s;
}
.video-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity .24s ease,
    visibility 0s;
}
.video-modal__backdrop{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  background:rgba(0,0,0,.92);
  cursor:pointer;
}
.video-modal__panel{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:min(100%, 1110px);
  max-height:calc(100svh - clamp(28px, 8vw, 104px));
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:translateY(12px) scale(.985);
  transition:transform .24s ease;
}
.video-modal.is-open .video-modal__panel{
  transform:translateY(0) scale(1);
}
.video-modal__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:34px;
  padding:0 0 12px;
  border:0;
  background:transparent;
}
.video-modal__heading{
  display:flex;
  align-items:baseline;
  min-width:0;
  gap:18px;
  color:#fff;
}
.video-modal__number{
  flex:0 0 auto;
  color:#fff;
  font-family: var(--font-display);
  font-size:clamp(18px, 2vw, 26px);
  font-weight:400;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.video-modal__title{
  min-width:0;
  margin:0;
  overflow:hidden;
  color:#fff;
  font-family: var(--font-display);
  font-size:clamp(18px, 2vw, 26px);
  font-weight:400;
  line-height:1;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
.video-modal__close{
  position:relative;
  display:grid;
  flex:0 0 auto;
  width:40px;
  height:34px;
  place-items:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:4px;
  padding:0;
  background:rgba(255,255,255,.08);
  color:rgba(232,232,232,.86);
  cursor:pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}
.video-modal__close:hover,
.video-modal__close:focus-visible{
  border-color:rgba(255,255,255,.44);
  background:rgba(255,255,255,.13);
  color:#fff;
  outline:0;
}
.video-modal__close span{
  position:relative;
  display:block;
  width:14px;
  height:14px;
}
.video-modal__close span::before,
.video-modal__close span::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:17px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transform-origin:center;
}
.video-modal__close span::before{
  transform:translate(-50%, -50%) rotate(45deg);
}
.video-modal__close span::after{
  transform:translate(-50%, -50%) rotate(-45deg);
}
.video-modal__player{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  max-height:calc(100svh - clamp(86px, 12vw, 156px));
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 62%, rgba(255,255,255,.035)),
    rgba(255,255,255,.018);
}
.video-modal__player iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

@media (min-width: 701px) {
  .card {
    height:100%;
  }
}

/* Services */
.services{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: var(--service-grid-gap);
  margin-top: 12px;
}
.service{
  padding: var(--service-card-padding);
  background: rgba(255,255,255,.02);
}
.section--light .service{
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
}
.service h3{
  margin:0 0 clamp(7px, .65vw, 10px);
  font-size: var(--service-title-size);
  line-height: 1;
}
.service p{
  margin:0;
  max-width: 44ch;
  font-size: var(--service-copy-size);
  line-height: var(--service-copy-line);
}

/* Contact */
#contact {
  --section-padding-bottom: calc(clamp(30px, 4vw, 56px) + var(--site-menu-height));
}

#contact .section__inner{
  display:grid;
  grid-template-columns:minmax(0, 620px) minmax(280px, 1fr);
  align-items:start;
  column-gap:clamp(40px, 6vw, 78px);
  row-gap:0;
  min-height:0;
}
#contact .section__inner > h2,
#contact .section__inner > p,
.contact{
  grid-column:1;
}

.contact{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
  max-width:620px;
  min-width:0;
  margin-top: clamp(8px, 11px, 14px);
}
.form-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.contact > .field{
  min-width:0;
}
.contact__actions{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:start;
  gap:20px;
  min-width:0;
}
.contact__actions > .btn{
  justify-self:start;
  align-self:start;
}
.contact__actions > .field--references{
  min-width:0;
}
.contact > .contact__status{
  margin-top:-6px;
}
.field{
  position:relative;
}
.field label{
  display:block;
  margin:7px 0 5px;
  color:rgba(232,232,232,.56);
  font-size:19px;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
}
.input,.textarea{
  display: inline-block;
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  padding:13px 14px;
  background:rgba(5,8,10,.34);
  color:#e9eef2;
  font-family: var(--font-placeholder);
  font-size: inherit;
  font-style: normal;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease;
  transform: scaleY(var(--font-body-y-scale));
  transform-origin: left center;
}
.section--light .input,.section--light .textarea{
  background:#fff; color:#111; border:1px solid rgba(0,0,0,.12);
}
.input::placeholder,
.textarea::placeholder{
  font-family: var(--font-placeholder);
  color:rgba(232,238,242,.30);
  opacity:1;
  transition:opacity .45s ease;
}
.textarea.is-placeholder-changing::placeholder{
  opacity:0;
}
.input:hover,
.textarea:hover{
  border-color:rgba(255,255,255,.24);
  background:rgba(5,8,10,.44);
}
.input:focus,
.textarea:focus{
  border-color:rgba(255,255,255,.46);
  background:rgba(5,8,10,.52);
}
.textarea{ min-height:154px; resize:vertical; }
.message-field__control{
  position:relative;
  min-width:0;
}
.message-field__control .textarea{
  display:block;
  padding-bottom:48px;
}
.field--references{
  display:block;
}
.field--references[hidden]{
  display:none;
}
.reference-toggle{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:2;
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  max-width:calc(100% - 20px);
  width:fit-content;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  padding:5px 8px 5px 7px;
  background:rgba(5,8,10,.24);
  color:rgba(232,232,232,.58) !important;
  font-size:14px !important;
  line-height:1;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  opacity:.68;
  cursor:pointer;
  backdrop-filter:blur(2px);
  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    opacity .18s ease;
  white-space:nowrap;
}
.reference-toggle input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.reference-toggle span{
  display:inline-flex;
  align-items:center;
  position:relative;
  min-height:18px;
  overflow:hidden;
  padding-left:21px;
  text-overflow:ellipsis;
}
.reference-toggle span::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:15px;
  height:15px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:3px;
  background:rgba(5,8,10,.24);
  box-shadow:inset 0 0 0 2px rgba(5,8,10,.62);
  transform:translateY(-50%);
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}
.reference-toggle span::after{
  content:"";
  position:absolute;
  top:50%;
  left:5px;
  width:4px;
  height:8px;
  border:solid rgba(5,8,10,.92);
  border-width:0 2px 2px 0;
  opacity:0;
  transform:translateY(-62%) rotate(45deg) scale(.72);
  transition:
    opacity .18s ease,
    transform .18s ease;
}
.reference-toggle:hover,
.reference-toggle:focus-within{
  border-color:rgba(255,255,255,.22);
  background:rgba(5,8,10,.42);
  color:#fff !important;
  opacity:.96;
}
.reference-toggle:hover span::before,
.reference-toggle:focus-within span::before{
  border-color:rgba(255,255,255,.38);
  background:rgba(255,255,255,.08);
}
.reference-toggle input:checked + span::before{
  border-color:rgba(255,255,255,.52);
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(168,176,184,.72)),
    rgba(232,238,242,.78);
  box-shadow:none;
}
.reference-toggle input:checked + span::after{
  opacity:1;
  transform:translateY(-62%) rotate(45deg) scale(1);
}
.reference-toggle input:focus-visible + span::before{
  outline:1px solid rgba(255,255,255,.5);
  outline-offset:2px;
}
.reference-panel[hidden]{
  display:none;
}
.reference-panel{
  width:100%;
  min-width:0;
  margin:0;
}
.reference-input{
  display:flex;
  height:52px;
  min-height:52px;
  max-height:52px;
  width:100%;
  align-content:center;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  padding:7px 10px;
  background:rgba(5,8,10,.24);
  color:#e9eef2;
  cursor:text;
  scrollbar-width:none;
  -ms-overflow-style:none;
  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease;
}
.reference-input::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
.reference-input:hover{
  border-color:rgba(255,255,255,.24);
  background:rgba(5,8,10,.34);
}
.reference-input:focus-within{
  border-color:rgba(255,255,255,.46);
  background:rgba(5,8,10,.42);
}
.reference-card-list{
  display:flex;
  flex:0 0 auto;
  flex-wrap:nowrap;
  gap:8px;
  min-width:0;
}
.reference-card{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  flex:0 0 auto;
  gap:8px;
  max-width:180px;
  min-height:34px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  padding:5px 7px;
  background:rgba(255,255,255,.07);
  color:#e9eef2;
}
.reference-card__number{
  color:rgba(255,211,107,.88);
  font-family: var(--font-display);
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.reference-card__body{
  display:grid;
  min-width:0;
  gap:2px;
}
.reference-card__title,
.reference-card__url{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reference-card__title{
  color:#fff;
  font-size:13px;
  line-height:1.1;
}
.reference-card__url{
  color:rgba(232,238,242,.48);
  font-family: var(--font-body);
  font-size:11px;
  line-height:1.1;
  transform: scaleY(var(--font-body-y-scale));
  transform-origin: left center;
}
.reference-card__remove{
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  padding:0;
  background:rgba(0,0,0,.16);
  color:rgba(232,238,242,.62);
  cursor:pointer;
}
.reference-card__remove:hover,
.reference-card__remove:focus-visible{
  border-color:rgba(255,255,255,.3);
  color:#fff;
  outline:0;
}
.reference-input__field{
  flex:1 0 170px;
  min-width:120px;
  min-height:34px;
  border:0;
  padding:0 4px;
  background:transparent;
  color:#e9eef2;
  outline:0;
}
.reference-input__field::placeholder{
  font-family: var(--font-placeholder);
  color:rgba(232,238,242,.30);
}
.btn{
  width:fit-content;
  border:1px solid rgba(255,255,255,.24);
  border-radius:4px;
  padding:12px 20px;
  background:rgba(255,255,255,.08);
  color:rgba(232,232,232,.86);
  font-weight:400;
  letter-spacing:.06em;
  cursor:pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}
.btn:hover,
.btn:focus-visible{
  border-color:rgba(255,255,255,.44);
  background:rgba(255,255,255,.13);
  color:#fff;
}
.btn[disabled]{
  cursor:wait;
  opacity:.56;
}
.contact__status{
  display: inline-block;
  min-height:1.25em;
  margin:0;
  color:rgba(232,232,232,.62);
  font-family: var(--font-body);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.04em;
  text-transform:uppercase;
  transform: scaleY(var(--font-body-y-scale));
  transform-origin: left center;
}
.contact__status:empty{
  display:none;
}
.contact__status.is-success{
  color:rgba(155, 255, 193, .84);
}
.contact__status.is-error{
  color:rgba(255, 176, 156, .86);
}
.contact-aside{
  grid-column:2;
  grid-row:1 / 5;
  align-self:stretch;
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:min(100%, 340px);
  gap: clamp(22px, 3vw, 36px);
  margin:0;
  text-align:center;
}
.contact-aside > .contact__status{
  width:100%;
  margin-top:auto;
}
.contact-details{
  display:grid;
  gap:7px;
  width:100%;
}
.contact-details p{
  margin:0;
  color:rgba(232,232,232,.82);
  font-family: var(--font-display);
  font-size:clamp(15px, 1.35vw, 22px);
  font-weight:400;
  line-height:1.35;
  letter-spacing:.08em;
}
.contact-social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(24px, 3.4vw, 44px);
  margin:0;
  padding:0;
  list-style:none;
}
.contact-social a{
  display:grid;
  place-items:center;
  width:clamp(44px, 4.8vw, 62px);
  height:clamp(44px, 4.8vw, 62px);
  color:rgba(232,232,232,.72);
  text-decoration:none;
  outline:0;
  transition:
    color .18s ease,
    transform .18s ease;
}
.contact-social svg{
  display:block;
  width:clamp(28px, 3.1vw, 40px);
  height:clamp(28px, 3.1vw, 40px);
  fill:currentColor;
}
.contact-social a:hover,
.contact-social a:focus-visible{
  color:#fff;
  transform:translateY(-2px);
}

@media (max-width: 1200px) {
  #contact .section__inner{
    min-height:0;
  }

  .contact-aside{
    width:min(100%, 340px);
    margin-top:0;
    transform:none;
  }
}

@media (max-width: 900px) {
  #about {
    --section-padding-bottom: calc(clamp(46px, 8vw, 76px) + var(--site-menu-height));
    --about-copy-size: clamp(17px, 2.4vw, 21px);
    --about-copy-line: clamp(25px, 3.4vw, 31px);
    --about-copy-gap: clamp(8px, 1.6vw, 14px);
    --about-statement-size: clamp(16px, 2.1vw, 19px);
    --about-statement-line: clamp(24px, 3vw, 28px);
    --about-statement-offset: clamp(10px, 2vw, 16px);
    --about-team-gap: clamp(12px, 2vw, 16px);
    --about-team-offset: clamp(22px, 4vw, 34px);
  }

  #about .section__inner {
    max-width: min(100%, 680px);
  }

  #contact .section__inner{
    display:block;
  }

  .contact{
    max-width:620px;
  }

  .contact-aside{
    width:min(100%, 520px);
    margin-top: clamp(20px, 4vw, 34px);
  }

  .contact-aside > .contact__status{
    margin-top: clamp(6px, 1.8vw, 14px);
  }
}

@media (max-width: 700px) {
  .section h1,
  .section h2 {
    font-size: 2.5rem;
  }

  .section p {
    font-size: 16px;
  }

  #about {
    --about-copy-size: clamp(16px, 4.1vw, 19px);
    --about-copy-line: clamp(24px, 6vw, 28px);
    --about-copy-gap: clamp(9px, 2.4vw, 13px);
    --about-statement-size: clamp(15px, 3.8vw, 17px);
    --about-statement-line: clamp(23px, 5.6vw, 26px);
    --about-statement-offset: clamp(10px, 3vw, 14px);
    --about-team-gap: clamp(12px, 3vw, 16px);
    --about-team-offset: clamp(22px, 5vw, 30px);
  }

  #services {
    --service-title-size: clamp(26px, 8vw, 34px);
    --service-copy-size: clamp(13px, 3.6vw, 15px);
    --service-copy-line: clamp(19px, 5vw, 23px);
    --service-card-padding: clamp(14px, 4vw, 18px);
    --service-grid-gap: 12px;
  }

  #about .section__inner {
    text-align: left;
  }

  #about .section h2 {
    margin-bottom: clamp(14px, 4vw, 22px);
    font-size: clamp(42px, 15vw, 64px);
    line-height: .92;
  }

  #about .section__inner > p {
    max-width: 100%;
  }

  .contact__actions {
    grid-template-columns:1fr;
    gap:10px;
  }

  .contact__actions > .btn {
    justify-self:start;
  }

  .reference-input {
    width:100%;
  }

  .about-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--about-team-gap);
    margin-top: var(--about-team-offset);
  }

  .team-card__body {
    padding: clamp(12px, 3.5vw, 16px);
  }

  .team-card h3 {
    font-size: clamp(24px, 7vw, 32px);
  }

  .team-card p {
    font-size: clamp(12px, 3.3vw, 14px);
    line-height: 1.35;
  }

  .portfolio-grid {
    grid-template-columns: minmax(0,1fr);
    grid-auto-rows:auto;
    column-gap: 0;
    row-gap: 18px;
  }

  .card--feature {
    grid-column: auto;
    grid-row: auto;
    height: auto;
  }

  .card--feature .ph-thumb,
  .ph-thumb {
    aspect-ratio: 16 / 9;
  }

  .card h3 {
    margin-bottom: 6px;
    font-size: 20px;
    line-height: 1;
  }

  .card h3::before {
    margin-right: 6px;
  }

  .video-modal {
    padding:12px;
  }

  .video-modal__panel {
    max-height:calc(100svh - 24px);
  }

  .video-modal__bar {
    min-height:30px;
    gap:10px;
    padding:0 0 9px;
  }

  .video-modal__heading {
    gap:10px;
  }

  .video-modal__number {
    font-size:18px;
  }

  .video-modal__title {
    font-size:18px;
  }

  .video-modal__close {
    width:32px;
    height:28px;
  }

  .video-modal__player {
    max-height:calc(100svh - 54px);
  }

  #gallery {
    overflow-y: auto;
  }

  #gallery .section__inner {
    display: block;
    height: auto;
  }

  #gallery .gallery-stage {
    margin-top: 22px;
    padding-top: 0;
  }

  .gallery-strip {
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    height: auto;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .gallery-stage {
    gap: 14px;
    margin-top: 22px;
  }

  .gallery-strip__item {
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    scroll-snap-align: none;
  }

  .gallery-strip__item:hover,
  .gallery-strip__item:focus-visible {
    flex: 0 0 auto;
    transform: none;
  }

  .gallery-strip__item img {
    transform: scale(1);
  }

  .gallery-progress {
    display: none;
  }
}

@media (max-width: 560px) {
  #about {
    --section-padding-bottom: calc(clamp(42px, 9vw, 64px) + var(--site-menu-height));
    --about-copy-size: clamp(16px, 4.5vw, 18px);
    --about-copy-line: clamp(24px, 6.7vw, 27px);
    --about-copy-gap: clamp(9px, 2.6vw, 12px);
    --about-statement-size: clamp(15px, 4vw, 16px);
    --about-statement-line: clamp(23px, 6vw, 25px);
    --about-team-offset: clamp(22px, 7vw, 32px);
  }

  #about .about-team {
    grid-template-columns: minmax(0, min(100%, 360px));
    justify-content: center;
  }

  #about .team-card h3 {
    font-size: clamp(27px, 9vw, 34px);
  }

  #about .team-card p {
    font-size: clamp(13px, 3.8vw, 15px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-strip__item,
  .gallery-strip__item img,
  .gallery-progress__thumb {
    transition: none;
  }
}



















/* ------------------------------------------------------------------Scrolling Sections END---------------------------*/