/* Photography and movement have separate layers; no ghosted primitive models. */
.service-visual::before, .service-visual::after { display: none; }
.cinema-panel {
  isolation: isolate;
  background: #0c1015;
  overflow: hidden;
  position: relative;
}
.cinema-depth {
  position: absolute;
  inset: 0;
  transform: none;
  transition: transform 650ms cubic-bezier(.2,.7,.2,1);
  z-index: 0;
}
.cinema-depth picture, .cinema-depth img, .cinema-depth video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cinema-depth video { opacity: 0; transition: opacity 500ms ease; }
.cinema-playing .cinema-depth video { opacity: 1; }
.market-img picture {display: block; width: 100%; height: 100%;}
.cinema-panel:after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(6,10,17,.7), transparent 26%, transparent 80%, rgba(6,10,17,.2));
}
.cinema-panel .badge {z-index: 2; font-size: 12px; letter-spacing: .04em;}
.cinema-toggle {
  position: absolute;
  inset-inline-end: 15px;
  bottom: 14px;
  z-index: 3;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid #ffffff42;
  border-radius: 7px;
  color: #fff;
  background: #111a24db;
  font: 500 12px/1.3 var(--font-body);
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.cinema-toggle:hover {background: #283440;}
.cinema-toggle:focus-visible {outline: 2px solid #fff; outline-offset: 3px;}
.cinema-still .cinema-toggle {display: none;}
.cinema-still .cinema-depth img {opacity: 1;}
.cinema-note {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 26px;
  z-index: 2;
  color: #f3f3f3;
  font-size: 12px;
  line-height: 1.3;
  max-width: 50%;
  text-shadow: 0 1px 4px #000;
}
.story-visual {aspect-ratio: 4/3;}
.service-visual {min-height: 360px; min-width: 0; width: 100%;}
.service-copy {min-width: 0;}
.contact-info, .form-card {min-width: 0;}
.contact-line, .form-card h3 {overflow-wrap: anywhere;}
html[dir="rtl"] .cinema-toggle {font-family: var(--font-arabic);}
@media (max-width: 900px) {
  html[dir="rtl"] .service-card:nth-child(n) {grid-template-columns: 1fr;}
  .service-card .service-copy {order: 2;}
  .service-card .service-visual {order: 1;}
  .service-visual {min-height: 0; aspect-ratio: 16/10;}
  .cinema-note {max-width: 48%; bottom: 21px;}
  .cinema-toggle {max-width: 44%;}
  .story-visual {aspect-ratio: 16/10;}
}
@media (prefers-reduced-motion: reduce) {
  .cinema-depth {transform: none !important; transition: none;}
}