/* Chapter One v1.4 — video-only visual treatment.
   Deliberately no YouTube embeds, frame numbers, channel labels, pause icons,
   external branding, tiny status copy or redundant film labels. */
#cinema-wrap .showreel-shell{
  background:#07152b!important;
  border:1px solid #8baedc83!important;
  box-shadow:0 30px 90px #020916a1,0 0 65px #76b7ff19!important;
}
#cinema-wrap .showreel-shell .showreel-visual{isolation:isolate}
#cinema-wrap .showreel-shell .showreel-montage{
  inset:0!important;
  position:absolute!important;
  opacity:1!important;
  z-index:12!important;
  pointer-events:auto;
  background:#081527;
  border-radius:inherit;
}
#cinema-wrap .showreel-shell .montage-fallback{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 48% 42%,#36578078,transparent 65%),
    linear-gradient(135deg,#172b49,#081326 75%);
  overflow:hidden;
}
#cinema-wrap .showreel-shell .montage-fallback::after{
  content:"";
  position:absolute;inset:-60%;
  background:linear-gradient(100deg,transparent 36%,#9bbfff0d 45%,transparent 53%);
  animation:fiqri-clean-glow 8s ease-in-out infinite alternate;
}
@keyframes fiqri-clean-glow{from{transform:translateX(-17%)}to{transform:translateX(17%)}}
#cinema-wrap .showreel-shell video.montage-clip{
  position:absolute!important;inset:0!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center;
  pointer-events:none;user-select:none;
  opacity:0!important;
  visibility:visible!important;
  filter:brightness(.87) saturate(.98);
  transition:opacity .5s ease!important;
}
#cinema-wrap .showreel-shell video.montage-clip.is-current{opacity:1!important;z-index:3!important}
#cinema-wrap .showreel-shell .showreel-montage::after{
  position:absolute;inset:0;z-index:5;
  content:"";pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,#02091600 66%,#020b19b8 100%);
}
#cinema-wrap .showreel-shell .montage-overlay{
  position:absolute;z-index:8;
  left:clamp(15px,3.5%,36px);right:clamp(15px,3.5%,36px);
  bottom:clamp(17px,5.5%,42px);
  display:flex;align-items:end;justify-content:space-between;gap:18px;
  pointer-events:none;
  color:#f7fbff;
}
#cinema-wrap .showreel-shell .montage-title{
  display:block!important;
  max-width:75%;
  font:650 clamp(18px,2.4vw,33px)/1.12 "Space Grotesk",sans-serif!important;
  letter-spacing:-.05em!important;
  text-shadow:0 2px 15px #000c;
  margin:0;padding:0;min-height:1.15em;
}
#cinema-wrap .showreel-shell .montage-timestamp{
  flex:none;
  color:#d3e6ff;
  font:600 clamp(9px,.77vw,12px)/1.2 "Space Grotesk",sans-serif!important;
  letter-spacing:.06em;
  text-shadow:0 2px 12px #000;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#cinema-wrap .showreel-shell .montage-progress{
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  z-index:13!important;width:100%!important;height:3px!important;
  background:#e3f2ff36!important;border:0!important;
  overflow:hidden;margin:0;padding:0;
}
#cinema-wrap .showreel-shell .montage-progress>span{
  display:block!important;width:100%!important;height:100%!important;
  background:#b4d7ff!important;
  transform:scaleX(var(--segment-progress,0))!important;
  transform-origin:left!important;
  animation:none!important;
  transition:none!important;
}
#cinema-wrap .showreel-shell .montage-skip{
  position:absolute!important;z-index:11!important;inset:0!important;
  width:100%!important;height:100%!important;padding:0!important;
  background:transparent!important;border:0!important;cursor:pointer;
  display:flex!important;align-items:flex-start!important;justify-content:flex-end!important;
  font-size:0;opacity:1!important;
}
#cinema-wrap .showreel-shell .montage-skip span{
  display:block;
  margin:13px 16px;
  padding:7px 11px;
  color:#eaf5ff;
  background:#091a32b6;
  border:1px solid #aacffb5c;border-radius:999px;
  font:600 11px/1.2 "Space Grotesk",sans-serif;
  letter-spacing:0!important;text-shadow:none;
  opacity:0;transform:translateY(5px);
  transition:opacity .18s,transform .18s;
}
#cinema-wrap .showreel-shell:hover .montage-skip span,
#cinema-wrap .showreel-shell:focus-within .montage-skip span{opacity:1;transform:none}
#cinema-wrap .showreel-shell .montage-skip:focus-visible{outline:3px solid #d2e8ff;outline-offset:-5px}
#cinema-wrap .showreel-shell .montage-skip:active span{transform:scale(.97)}
/* Even if old CSS survives a stale browser cache, no YouTube UI is visible. */
#cinema-wrap .showreel-shell .showreel-topline,
#cinema-wrap .showreel-shell .showreel-bottomline,
#cinema-wrap .showreel-shell .showreel-vignette,
#cinema-wrap .showreel-shell .showreel-frame-lines,
#cinema-wrap .showreel-shell .showreel-placeholder,
#cinema-wrap .showreel-shell .montage-credit,
#cinema-wrap .showreel-shell .montage-youtube-panel,
#cinema-wrap .showreel-shell .montage-shot{display:none!important}
@media(max-width:700px){
  #cinema-wrap .showreel-shell .montage-title{font-size:clamp(15px,4vw,21px)!important;max-width:70%}
  #cinema-wrap .showreel-shell .montage-overlay{left:13px;right:13px;bottom:17px;gap:8px}
  #cinema-wrap .showreel-shell .montage-timestamp{font-size:9px!important}
  #cinema-wrap .showreel-shell .montage-skip span{font-size:9px;margin:7px;padding:6px 9px}
  #cinema-wrap .showreel-shell .montage-progress{height:2px!important}
}
@media(prefers-reduced-motion:reduce){
  #cinema-wrap .showreel-shell .montage-fallback::after{animation:none}
  #cinema-wrap .showreel-shell video.montage-clip{transition:none!important}
}

/* Display the project name at all times, including before pointer hover. */
#cinema-wrap .showreel-shell .montage-title{
 position:relative;z-index:9!important;
 display:block!important;visibility:visible!important;opacity:1!important;
 color:#ffffff!important;text-shadow:0 3px 19px #000e!important;
 white-space:normal!important;
}


/* V1.5: real project playback streams replace the fabricated motion-photo videos.
   Player API playback uses the official YouTube iframe; native video becomes
   possible once actual permitted MP4/WebM source material is supplied. */
#cinema-wrap .showreel-shell .montage-stream{
 position:absolute!important;
 inset:0!important;
 z-index:2!important;
 display:block!important;
 width:100%!important;height:100%!important;
 min-width:0;overflow:hidden;
 background:transparent;
 opacity:0!important;
 pointer-events:none!important;
 transition:opacity .62s ease!important;
 will-change:opacity;
}
#cinema-wrap .showreel-shell .montage-stream.is-current{
 opacity:1!important;
 z-index:3!important;
}
#cinema-wrap .showreel-shell .montage-stream iframe,
#cinema-wrap .showreel-shell .montage-stream>div{
 display:block!important;
 position:absolute!important;
 inset:0;
 height:100%!important;
 width:100%!important;
 max-height:none!important;max-width:none!important;
 border:0!important;
 pointer-events:none!important;
 background:#081527;
}
/* Reels are portrait originals: fill the film surface using a portrait
   player viewport and a central cinema crop, without stretching faces. */
#cinema-wrap .showreel-shell .montage-stream[data-format="portrait"] iframe{
 inset:auto!important;
 top:-108%!important;left:0!important;
 height:316%!important;width:100%!important;
}
#cinema-wrap .showreel-shell .montage-overlay{
 z-index:8!important;
}
#cinema-wrap .showreel-shell .montage-skip{z-index:11!important}
#cinema-wrap .showreel-shell .montage-progress{z-index:13!important}
#cinema-wrap .showreel-shell .montage-fallback::after{animation:none!important}
#cinema-wrap .showreel-shell[data-preview-state="blocked"] .montage-skip span,
#cinema-wrap .showreel-shell .showreel-montage[data-playback="blocked"] .montage-skip span{
 opacity:1!important;transform:none!important;
}
@media(prefers-reduced-motion:reduce){
 #cinema-wrap .showreel-shell .montage-stream{transition:none!important}
}

/* Avoid suggesting a still picture is real video before playback starts. */
#cinema-wrap .showreel-shell .showreel-montage .montage-overlay{
 opacity:0;
 transition:opacity .24s ease;
}
#cinema-wrap .showreel-shell .showreel-montage[data-playback="playing"] .montage-overlay,
#cinema-wrap .showreel-shell .showreel-montage[data-playback="unavailable"] .montage-overlay{
 opacity:1;
}
#cinema-wrap .showreel-shell .showreel-montage[data-playback="unavailable"] .montage-title{
 font-size:clamp(16px,2.2vw,25px)!important;
}


/* Chapter One V1.6 — three real depth planes, not three identical tiny cards.
   The near Editorial card is intentionally the largest; Event sits in the
   middle; the portrait Product card stays a small atmospheric background cue.
   The central film always paints above all supporting cards. */
#cinema-wrap .float-reel-card{
 pointer-events:auto;
 transform-origin:center center;
 backface-visibility:hidden;
 transition:scale .16s linear,opacity .16s linear,filter .35s ease;
}
#cinema-wrap .float-reel-card--one{
 /* BACKGROUND — vertical product teaser, away from the reading corridor */
 display:block!important;
 left:7.6%!important;right:auto!important;
 top:31%!important;bottom:auto!important;
 width:clamp(106px,9.5vw,146px)!important;
 z-index:3!important;
 --float-base-rot:-9deg;
 scale:var(--depth-far-scale,.83)!important;
 opacity:var(--depth-far-opacity,.67)!important;
 filter:saturate(.79) brightness(.84) blur(.35px);
}
#cinema-wrap .float-reel-card--one .float-reel-card__inner{
 border-color:#b2ccea52;
 box-shadow:0 15px 30px #0009,0 0 24px #659cfa0b;
}
#cinema-wrap .float-reel-card--one .float-reel-card__media{
 aspect-ratio:9/16!important;
}
#cinema-wrap .float-reel-card--two{
 /* FOREGROUND — wide editorial film gets a strong cinematic presence */
 display:block!important;
 right:3.4%!important;left:auto!important;
 top:43%!important;bottom:auto!important;
 width:clamp(248px,22vw,338px)!important;
 z-index:8!important;
 --float-base-rot:6deg;
 scale:var(--depth-near-scale,1.06)!important;
 opacity:var(--depth-near-opacity,1)!important;
 filter:saturate(1.06) brightness(1.04);
}
#cinema-wrap .float-reel-card--two .float-reel-card__inner{
 border-color:#b7d8ffbd;
 border-radius:17px;
 box-shadow:0 38px 104px #010714ef,0 0 48px #88bfff29;
}
#cinema-wrap .float-reel-card--two .float-reel-card__media{
 aspect-ratio:16/9!important;
}
#cinema-wrap .float-reel-card--three{
 /* MIDGROUND — the event banner sits low on the opposite side */
 display:block!important;
 left:4.6%!important;right:auto!important;
 top:auto!important;bottom:12.5%!important;
 width:clamp(185px,16vw,248px)!important;
 z-index:5!important;
 --float-base-rot:4deg;
 scale:var(--depth-mid-scale,.95)!important;
 opacity:var(--depth-mid-opacity,.91)!important;
 filter:saturate(.91) brightness(.96);
}
#cinema-wrap .float-reel-card--three .float-reel-card__inner{
 border-color:#a9d2ff82;
 box-shadow:0 26px 63px #010714c9,0 0 31px #82b4ff1a;
}
#cinema-wrap .float-reel-card--three .float-reel-card__media{
 aspect-ratio:1760/761!important;
}
#cinema-wrap .float-reel-card__media img.float-reel-card__poster{
 width:100%!important;height:100%!important;
 object-fit:cover!important;
}
#cinema-wrap .float-reel-card__meta{
 padding:9px 12px!important;
 font-size:clamp(8px,.72vw,10px)!important;
 letter-spacing:.1em;
}
#cinema-wrap .float-reel-card:hover{
 filter:brightness(1.09) saturate(1.08);
}
#cinema-wrap .cinema-frame.showreel-shell{
 z-index:11!important;
}
/* Preserve the three-plane composition on laptops without swallowing the film. */
@media(max-width:1100px) and (min-width:701px){
 #cinema-wrap .float-reel-card--one{
  left:2.4%!important;top:32%!important;
  width:clamp(90px,10vw,116px)!important;
 }
 #cinema-wrap .float-reel-card--two{
  right:2.7%!important;top:44%!important;
  width:clamp(190px,22vw,252px)!important;
 }
 #cinema-wrap .float-reel-card--three{
  left:1.5%!important;bottom:13%!important;
  width:clamp(150px,17.5vw,196px)!important;
 }
}
@media(max-width:700px){
 /* On phones the film, not three satellite cards, remains the focal point. */
 #cinema-wrap .float-reel-card--one,
 #cinema-wrap .float-reel-card--two,
 #cinema-wrap .float-reel-card--three{display:none!important}
}
@media(prefers-reduced-motion:reduce){
 #cinema-wrap .float-reel-card{transition:none!important}
 #cinema-wrap .float-reel-card--one{scale:.83!important}
 #cinema-wrap .float-reel-card--two{scale:1.06!important}
 #cinema-wrap .float-reel-card--three{scale:.95!important}
}


/* V1.7 — separate 16:9 YouTube player from OUR branded caption.
   The iframe receives its full legal viewport: no artificial masking,
   crops of channel text or overlays over YouTube controls/branding. */
#cinema-wrap .cinema-frame.showreel-shell{
 aspect-ratio:auto!important;
 height:auto!important;
 padding:0 0 49px!important;
 overflow:hidden!important;
 box-sizing:border-box!important;
}
#cinema-wrap .cinema-frame.showreel-shell > .showreel-visual{
 position:relative!important;
 inset:auto!important;
 width:100%!important;
 height:auto!important;
 aspect-ratio:16 / 9!important;
 overflow:hidden!important;
 border-radius:0!important;
}
#cinema-wrap .showreel-shell .showreel-montage::after{
 content:none!important;
 display:none!important;
}
#cinema-wrap .showreel-shell > .montage-overlay{
 position:absolute!important;
 left:0!important;right:0!important;bottom:0!important;
 top:auto!important;
 width:100%!important;height:49px!important;
 box-sizing:border-box!important;
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 gap:14px!important;
 padding:0 17px!important;
 margin:0!important;
 z-index:16!important;
 background:linear-gradient(90deg,#0b1729,#0c1b33)!important;
 border-top:1px solid #a9cfff39!important;
 opacity:1!important;
 pointer-events:auto!important;
 color:#f6fbff!important;
}
#cinema-wrap .showreel-shell > .montage-overlay .montage-title{
 display:block!important;
 position:static!important;
 flex:1 1 auto!important;
 min-width:0!important;max-width:none!important;
 white-space:nowrap!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 padding:0!important;margin:0!important;
 font:650 clamp(14px,1.25vw,19px)/1.15 "Space Grotesk",sans-serif!important;
 letter-spacing:-.027em!important;
 color:#f7fbff!important;
 text-shadow:none!important;
}
#cinema-wrap .showreel-shell > .montage-overlay .montage-actions{
 display:flex!important;
 align-items:center!important;
 flex:0 0 auto!important;
 gap:12px!important;
}
#cinema-wrap .showreel-shell > .montage-overlay .montage-timestamp{
 font:600 10px/1.2 "Space Grotesk",sans-serif!important;
 color:#bdd6f2!important;
 letter-spacing:.045em!important;
 text-shadow:none!important;
}
#cinema-wrap .showreel-shell > .montage-overlay .montage-skip{
 position:static!important;
 inset:auto!important;
 display:inline-flex!important;
 flex:0 0 auto!important;
 align-items:center!important;
 justify-content:center!important;
 width:auto!important;height:auto!important;
 min-width:0!important;
 opacity:1!important;
 margin:0!important;padding:0!important;
 cursor:pointer!important;
 background:transparent!important;
 border:0!important;
}
#cinema-wrap .showreel-shell > .montage-overlay .montage-skip span{
 display:inline-block!important;
 color:#e4f2ff!important;
 opacity:1!important;
 transform:none!important;
 margin:0!important;
 padding:7px 10px!important;
 font:600 10px/1.1 "Space Grotesk",sans-serif!important;
 letter-spacing:0!important;
 border-radius:999px!important;
 background:#5d99da16!important;
 border:1px solid #83b8ed6d!important;
 transition:background .2s,border-color .2s!important;
}
#cinema-wrap .showreel-shell > .montage-overlay .montage-skip:hover span{
 background:#75b6ff32!important;
 border-color:#a4d4ff!important;
}
#cinema-wrap .showreel-shell > .montage-overlay .montage-progress{
 position:absolute!important;
 left:0!important;right:0!important;top:auto!important;bottom:0!important;
 width:100%!important;height:2px!important;
 display:block!important;
 background:#afd6ff24!important;
 z-index:19!important;
 pointer-events:none!important;
}
#cinema-wrap .showreel-shell > .montage-overlay .montage-progress span{
 background:#acd2ff!important;
 transform:scaleX(var(--segment-progress,0))!important;
}
#cinema-wrap .showreel-shell:not(.is-playing) > .montage-overlay .montage-title{
 visibility:hidden!important;
}
/* Keep progress/label readable across the responsive breakpoints. */
@media(max-width:700px){
 #cinema-wrap .cinema-frame.showreel-shell{padding-bottom:38px!important}
 #cinema-wrap .showreel-shell > .montage-overlay{
  height:38px!important;
  padding:0 8px!important;
  gap:6px!important;
 }
 #cinema-wrap .showreel-shell > .montage-overlay .montage-title{
  font-size:clamp(10px,2.7vw,13px)!important;
 }
 #cinema-wrap .showreel-shell > .montage-overlay .montage-actions{gap:5px!important}
 #cinema-wrap .showreel-shell > .montage-overlay .montage-timestamp{font-size:8px!important}
 #cinema-wrap .showreel-shell > .montage-overlay .montage-skip span{
  padding:5px 7px!important;font-size:8px!important
 }
}


/* V1.7.1: the film frame keeps its ORIGINAL 16:9 dimensions during scroll.
   Only our caption extends below the frame; the YouTube iframe itself is
   neither masked nor covered by the caption. */
#cinema-wrap .cinema-frame.showreel-shell{
 aspect-ratio:16 / 9!important;
 padding:0!important;
 height:auto!important;
 overflow:visible!important;
}
#cinema-wrap .cinema-frame.showreel-shell > .showreel-visual{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 aspect-ratio:auto!important;
 border-radius:inherit!important;
 overflow:hidden!important;
}
#cinema-wrap .showreel-shell > .montage-overlay{
 bottom:-48px!important;
 height:48px!important;
 border:1px solid #9fc5f35c!important;
 border-top:0!important;
 border-radius:0 0 12px 12px!important;
 box-shadow:0 20px 52px #030b1ac4;
}
@media(max-width:700px){
 #cinema-wrap .showreel-shell > .montage-overlay{
  bottom:-38px!important;
  height:38px!important;
  border-radius:0 0 9px 9px!important;
 }
}