/* Exact project captures and device presentations. */
.project-story-media--koja-sofa {
  aspect-ratio: 3 / 2 !important;
  background: #9d3c2b;
}

/* Moviq source captures contain an 8 px pale export strip above the page. */
.moviq-laptop-photo--moviq .moviq-laptop-photo__screen img {
  height: 101%;
  transform: translateY(-.9%);
}

/* The supplied KOJA captures fill the actual display in the burgundy scene. */
.koja-architecture-mockup__screen img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: none;
}

/* The laptop frame stays photographic, while the website remains an exact layer. */
.moviq-laptop-photo--sejkora .moviq-laptop-photo__screen {
  top: 16.27%;
  left: 23.32%;
  width: 52.95%;
  height: 54.45%;
}

.moviq-laptop-photo--sejkora .moviq-laptop-photo__screen img {
  object-fit: fill;
}

/* Wide variants of one outdoor scene with unaltered site captures. */
.project-story-media--sejkora-nature {
  aspect-ratio: 1672 / 941 !important;
  background: #6c7357;
}

.sejkora-nature-scene {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1672 / 941;
}

.sejkora-nature-scene__base,
.sejkora-nature-scene__screen {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sejkora-nature-scene__base { object-fit: cover; }
.sejkora-nature-scene__screen { pointer-events: none; }

/* iPhone shells keep each real mobile capture inside the display. */
.project-phone-showcase {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  background: #edf1eb;
}

.project-phone-showcase--sejkora {
  background: #e2ebe6;
}

.project-phone-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  background: radial-gradient(circle at 50% 30%, #fff 0, #e8eee8 72%);
}

.project-phone-showcase--sejkora .project-phone-stage {
  background: radial-gradient(circle at 50% 30%, #f8f9f2 0, #dce8df 74%);
}

.project-phone-stage::after {
  right: 17%;
  bottom: 7%;
  left: 17%;
  z-index: 0;
  height: 8%;
  background: rgba(29, 49, 36, .16);
  filter: blur(20px);
}

.project-phone {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: block;
  width: 18.7%;
  aspect-ratio: 393 / 852;
  padding: .48%;
  border: 2px solid #777b80;
  border-radius: 13% / 6%;
  background: linear-gradient(110deg, #666b70, #191b1f 27%, #060708 68%, #73777b);
  box-shadow: 0 18px 35px rgba(18, 31, 25, .24), inset 0 0 0 1px rgba(255, 255, 255, .32);
  transform: translateY(-50%);
}

.project-phone::before,
.project-phone::after {
  position: absolute;
  z-index: 0;
  width: 2px;
  border-radius: 2px;
  background: #60656a;
  content: "";
}

.project-phone::before { top: 21%; left: -3px; height: 13%; }
.project-phone::after { top: 25%; right: -3px; height: 9%; }

.project-phone--1 { left: 17.5%; }
.project-phone--2 { left: 39.45%; z-index: 2; width: 21.1%; }
.project-phone--3 { right: 17.5%; }

.project-phone__screen {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 11.3% / 5.2%;
  background: #fff;
}

.project-phone__status {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6%;
  padding: 0 8%;
  background: #fff;
  color: #111;
  font: 600 clamp(4px, .78vw, 9px)/1 Arial, sans-serif;
}

.project-phone-showcase--sejkora .project-phone__status { background: #f0f4f0; }

.project-phone__screen img {
  position: absolute;
  top: 6%;
  left: 0;
  display: block;
  width: 100%;
  height: 94%;
  object-fit: fill;
}

.project-phone__island {
  position: absolute;
  top: 2.05%;
  left: 50%;
  z-index: 2;
  width: 30%;
  height: 3.05%;
  border-radius: 999px;
  background: #070809;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  .project-phone-showcase { aspect-ratio: 4 / 3 !important; }
  .project-phone { width: 24%; padding: .8%; border-width: 1px; }
  .project-phone--1 { left: 9%; }
  .project-phone--2 { left: 36%; width: 28%; }
  .project-phone--3 { right: 9%; }
}