/* How it works: red highlights in titles + cinematic dark sections */
.hiw-hl { color: var(--tungsten); }

.cine { position: relative; isolation: isolate; overflow: hidden; background: #060609; }
.cine::before {
  content: ""; position: absolute; inset: 0 0 0 38%; z-index: -2;
  background: var(--cine) center 30% / cover no-repeat;
  opacity: 0.5; filter: saturate(0.7) contrast(1.12) brightness(0.85);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 85%, transparent 100%);
}
.cine::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(216,11,42,0.16), transparent 70%),
    linear-gradient(180deg, rgba(6,6,9,0.85) 0%, rgba(6,6,9,0) 22%, rgba(6,6,9,0) 72%, rgba(6,6,9,0.95) 100%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.cine > .wrap { position: relative; }
.cine .info-strip > div, .cine .acc { background-color: rgba(10,10,14,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cine-head { --cine: url("/assets/img/editorial/crew-camera.jpg"); }
.cine-crew { --cine: url("/assets/img/editorial/crew-gaffer.jpg"); }
.cine-crew::before { inset: 0 0 0 50%; opacity: 0.32; }
.cine-delivery { --cine: url("/assets/img/editorial/usecase-foreign.jpg"); }
.cine-delivery::before { opacity: 0.42; }
/* "Start your list": the photo sits inside the rounded card */
.cine-cta .wrap {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 50% 80% at 0% 100%, rgba(216,11,42,0.18), transparent 70%),
    linear-gradient(90deg, rgba(8,8,12,0.97) 30%, rgba(8,8,12,0.7) 60%, rgba(8,8,12,0.5)),
    url("/assets/img/editorial/usecase-commercials.jpg") right 40% / cover no-repeat;
}

@media (max-width: 767px) {
  .cine::before, .cine-crew::before, .cine-delivery::before {
    inset: 0; opacity: 0.26;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  }
}