/* Approved first block. The second block remains in home.css. */
.home-cinema .cinematic-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto auto;
  row-gap: 12px;
  height: 100svh;
  min-height: 740px;
  padding: calc(clamp(92px,10svh,128px) + var(--safe-top)) 0 max(16px,var(--safe-bottom));
  background: var(--color-background);
}
.cinema-hero-copy { text-align: center; width: min(100%,960px); padding-inline: 24px; margin: 0 auto; }
.cinema-hero-copy .cinema-eyebrow { justify-content: center; margin-bottom: 14px; }
.cinema-hero-copy h1 { font-family: var(--font-body); font-size: clamp(48px,5.7vw,86px); font-weight: 800; line-height: 1.02; letter-spacing: -.065em; color: var(--color-on-primary); }
.cinema-hero-copy h1 > span { display: block; }
.cinema-hero-copy .hero-accent { color: var(--color-primary); }
.cinema-hero-desc { max-width: 590px; margin: 12px auto 0; color: var(--color-text); font-size: clamp(15px,1.3vw,18px); line-height: 1.45; }
.hero-gallery { position: relative; width: 100%; min-height: 0; margin: 0; outline-offset: -3px; }
.hero-gallery-viewport { position: relative; overflow: clip; }
.hero-gallery-items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.hero-tile { margin: 0; min-width: 0; }
.hero-service-card { display: block; color: var(--color-on-primary); cursor:pointer; -webkit-user-drag: none; }
.hero-tile-visual { height: auto; aspect-ratio: 4/5; overflow: hidden; border-radius: 12px; border: 1px solid #ffffff66; background: #17171c; box-shadow: 0 12px 32px #0004; }
.hero-tile img, .hero-tile video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; }
.hero-gallery .hero-tile-visual { position:relative; }
.hero-gallery [data-hero-video] { position:absolute; inset:0; opacity:0; pointer-events:none; }
.hero-gallery [data-hero-video].is-playing { opacity:1; }
/* Framing follows the service, never the changing slot or carousel order. */
.hero-gallery [data-hero-service="branding"][data-level="small"] img { object-position: 50% 64%; }
.hero-gallery [data-hero-service="marketing"][data-level="small"] img { object-position: 50% 35%; }
.hero-gallery [data-hero-service="design3d"][data-level="small"] img,
.hero-gallery [data-hero-service="design3d"][data-level="small"] video { object-position: 50% 46%; }
.hero-tile-caption { display: block; margin-top: 12px; text-align: center; font-size: clamp(14px,1.25vw,19px); font-weight: 600; line-height: 1.25; white-space: nowrap; }
.hero-gallery.is-ready .hero-gallery-items { display: block; position: relative; height: var(--gallery-height); }
.hero-gallery.is-ready .hero-tile { position: absolute; top: 0; left: 0; width: var(--tile-width); transform: translate3d(var(--tile-x),var(--tile-y),0); }
.hero-gallery.is-ready .hero-tile-visual { height: var(--tile-height); aspect-ratio: auto; border-radius: var(--tile-radius); }
.hero-gallery.is-ready .hero-tile[data-level="small"] .hero-tile-caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-gallery.is-ready .hero-tile.is-outside { visibility: hidden; pointer-events: none; }
.cinema-hero-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px; }
.cinema-scroll-hint { justify-self: center; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 6px 16px; font-size: 12px; color: #aaa7a2; opacity: .72; pointer-events: none; user-select: none; }
.cinema-scroll-hint svg { width: 18px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@keyframes scroll-hint-rise {
  0% { transform: translateY(5px); opacity: 0; }
  20% { opacity: 1; }
  80% { transform: translateY(-5px); opacity: 1; }
  100% { transform: translateY(-7px); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* A short-screen fallback belongs to block 2, not this decorative hint. */
  .home-cinema .cinema-scroll-hint svg path { animation: scroll-hint-rise 2s ease-in-out infinite !important; }
}
.home-cinema .cinema-hero-actions .btn { min-height: 54px; border-radius: 15px; font-size: 16px; padding: 14px 30px; }
.hero-idea-box { display:flex; align-items:center; gap:24px; width:min(680px,calc(100% - 48px)); border:1.5px solid var(--color-secondary); border-radius:16px; padding:8px; padding-left:24px; background:#08090be6; }
.hero-idea-prompt { position:relative; flex:1; min-width:0; min-height:44px; display:grid; align-items:center; margin:0; color:var(--color-text); font-size:16px; line-height:1.4; }
.hero-idea-measure,.hero-idea-typing { grid-area:1/1; white-space:pre-wrap; overflow-wrap:anywhere; }
.hero-idea-measure { visibility:hidden; padding-right:5px; }
.hero-idea-typing::after { content:''; display:inline-block; width:1px; height:1.1em; vertical-align:-.15em; background:var(--color-secondary); margin-left:3px; }
.hero-idea-box .btn { flex-shrink:0; }
@media (min-width:1101px) {
  .hero-gallery.is-framing .hero-gallery-viewport { position:absolute; inset-inline:0; top:var(--gallery-overhang); }
  .cinematic-hero:has(.hero-gallery.is-framing) .cinema-hero-copy { position:relative; z-index:2; pointer-events:none; }
  .cinematic-hero:has(.hero-gallery.is-framing) .cinema-hero-actions { position:relative; z-index:2; pointer-events:none; }
  .cinematic-hero:has(.hero-gallery.is-framing) .hero-idea-box { pointer-events:auto; transform:translateY(-30%); }
}
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

@media (min-width:760px) and (max-width:1439px) {
  .hero-idea-box { width:clamp(480px,48vw,680px); max-width:calc(100% - 48px); gap:clamp(10px,1.7vw,24px); padding-left:clamp(12px,1.7vw,24px); }
  .hero-idea-prompt { font-size:clamp(13px,1.143vw,16px); }
  .home-cinema .hero-idea-box .btn { font-size:clamp(14px,1.143vw,16px); padding-inline:clamp(14px,2.14vw,30px); }
}

@media (max-width: 1100px) {
  .home-cinema .navbar .nav-actions { gap: 8px; }
  .cinema-hero-copy h1 { font-size: clamp(48px,7.3vw,80px); }
  .hero-tile-caption { font-size: 14px; }
}
@media (min-width: 760px) and (max-height: 850px) {
  .home-cinema .cinematic-hero { padding-top: calc(84px + var(--safe-top)); row-gap: 8px; }
  .cinema-hero-copy .cinema-eyebrow { margin-bottom: 10px; }
  .cinema-hero-copy h1 { font-size: clamp(46px,7.2svh,60px); }
  .cinema-hero-desc { font-size: 15px; margin-top: 8px; }
}
@media (max-width: 759px) {
  .home-cinema .cinematic-hero { display: flex; flex-direction: column; gap: 0; height: auto; min-height: 100svh; padding: calc(96px + var(--safe-top)) max(18px,var(--safe-left)) max(20px,var(--safe-bottom)); }
  .cinema-hero-copy { padding-inline: 0; }
  .cinema-hero-copy .cinema-eyebrow { font-size: 8px; letter-spacing: .18em; margin-bottom: 15px; }
  .cinema-hero-copy h1 { font-size: clamp(40px,9.7vw,70px); letter-spacing: -.055em; line-height: 1.04; }
  .cinema-hero-desc { font-size: 14px; max-width: 410px; margin-top: 18px; }
  .hero-gallery { width: calc(100% + 36px); margin: 18px -18px 14px; }
  .cinema-scroll-hint { align-self: center; margin-top: auto; padding-top: 12px; min-height: 50px; }
  .hero-gallery-viewport { overflow: clip; padding-block: 0; touch-action: pan-y pinch-zoom; }
  .hero-gallery-items { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 14px; margin-inline: 18px; }
  .hero-gallery.is-ready .hero-gallery-items { margin-inline: 0; }
  .hero-tile-caption { font-size: 16px; }
  .home-cinema .cinema-hero-actions .btn { min-height: 50px; font-size: 14px; padding: 12px 22px; }
  .cinema-hero-actions { gap: 10px; }
  .hero-idea-box { width:100%; gap:10px; padding:6px; padding-left:12px; border-radius:14px; }
  .hero-idea-prompt { min-height:44px; font-size:clamp(11px,3.4vw,14px); }
  .hero-idea-measure,.hero-idea-typing { white-space:nowrap; overflow-wrap:normal; }
  .home-cinema .hero-idea-box .btn { padding:12px 14px; border-radius:10px; }
  .hero-idea-box .hero-contact-arrow { display:none; }
}
@media (max-width: 380px) {
  .home-cinema .navbar .container { gap: 8px; padding-inline: 10px; }
  .home-cinema .nav-actions { gap: 5px; }
  .home-cinema .lang-btn { padding-inline: 5px; }
  .hero-idea-box { gap:4px; padding-left:8px; }
  .home-cinema .hero-idea-box .btn { font-size:13px; padding-inline:6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gallery .hero-tile, .hero-gallery .hero-tile-visual { transition: none !important; }
  .hero-idea-typing::after { display:none; }
}
html:not(.js) .home-cinema .cinematic-hero { padding-top: 40px; }
html:not(.js) .home-cinema .cinematic-hero { display: block; height: auto; }
html:not(.js) .hero-gallery { padding: 24px; }
html:not(.js) .cinema-scroll-hint { display: flex; width: fit-content; margin: 12px auto 0; }