/*
 * CIIDT responsive cinematography — v1
 * 16:9 master on wide screens, purpose-composed 9:16 master on phones.
 * Films retain clean boundaries on both viewport shapes.
 */
:root{
  --ciidt-surface:#f4f6f8;
  --ciidt-cinema-midnight:#092438;
  --ciidt-cinema-mint:#bdd9ce;
}
body:not(.infrastructure-page):not(.contact-page) main .hero{
  isolation:isolate!important;
  background:var(--ciidt-cinema-midnight);
}
body:not(.infrastructure-page):not(.contact-page) main .hero :is(.hero-scene,.hero-slide-two,.hero-slide-three){
  overflow:hidden;
}
body:not(.infrastructure-page):not(.contact-page) main .hero :is(.hero-scene,.slide-three-media){
  isolation:isolate;
}
/* Fixed shape: no stretch, no layout shift when the first frame decodes. */
body:not(.infrastructure-page):not(.contact-page) main .hero :is(
  .hero-scene>img,.hero-scene>video,
  .hero-slide-two>video,.slide-three-media>video
){
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  -webkit-mask-size:auto!important;
  mask-size:auto!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  mix-blend-mode:normal!important;
}
body:not(.infrastructure-page):not(.contact-page) main .hero .hero-slide-three .slide-three-media{
  transform:none!important;
  background-position:center!important;
}
/* Keep the opening film separate from the following light section. */
body:not(.infrastructure-page):not(.contact-page) main .hero::before{content:none;display:none;}
body:not(.infrastructure-page):not(.contact-page) main .hero[data-slide="2"]{
  background:#bdd9ce!important;
}
/* The eco-world uses a light, airy grade. No artificial dark filter on the film. */
body:not(.infrastructure-page):not(.contact-page) main .hero[data-slide="2"]::after{
  background:linear-gradient(100deg,
    rgba(215,235,223,.60) 0%,
    rgba(199,227,215,.35) 39%,
    rgba(189,217,206,0) 70%)!important;
  opacity:1!important;
  pointer-events:none;
}
body:not(.infrastructure-page):not(.contact-page) main .hero[data-slide="2"]>.hero-scene{
  background:linear-gradient(125deg,#c9e0d5,#a5d5cc 68%,#87c7c4)!important;
}
body:not(.infrastructure-page):not(.contact-page) main .hero[data-slide="2"]>.hero-scene::after{
  content:"";position:absolute;z-index:3;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(214,234,219,.43) 0%,rgba(206,231,219,.22) 37%,transparent 71%);
}
/* The real engineering footage uses a legible, understated navy grade. */
body:not(.infrastructure-page):not(.contact-page) main .hero[data-slide="1"] .slide-tint,
body:not(.infrastructure-page):not(.contact-page) main .hero[data-slide="3"] .slide-three-shade{
  background:linear-gradient(90deg,
    rgba(6,24,37,.85) 0%,
    rgba(9,31,47,.72) 36%,
    rgba(13,44,61,.40) 70%,
    rgba(15,50,62,.19) 100%)!important;
}
body:not(.infrastructure-page):not(.contact-page) main .hero .ciidt-slider-arrows,
body:not(.infrastructure-page):not(.contact-page) main .hero .hero-dots{
  z-index:13!important;
}
@media(max-width:800px){
  /* Portrait compositions have gradient-filled top space built into the video.
     We display them edge-to-edge, never letterboxed in a 16:9 rectangle. */
  body:not(.infrastructure-page):not(.contact-page) main .hero{
    height:75svh!important;
    min-height:0!important;
  }
  body:not(.infrastructure-page):not(.contact-page) main .hero :is(
    .hero-scene>img,.hero-scene>video,
    .hero-slide-two>video,.slide-three-media>video
  ){
    object-position:center center!important;
    object-fit:cover!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  body:not(.infrastructure-page):not(.contact-page) main .hero[data-slide="2"]>.hero-scene::after{
    background:linear-gradient(180deg,
      rgba(209,235,218,.38) 0%,
      rgba(198,232,216,.15) 36%,
      transparent 65%);
  }
  body:not(.infrastructure-page):not(.contact-page) main .hero[data-slide="2"]::after{
    background:linear-gradient(180deg,
      rgba(220,238,226,.40) 0%,rgba(211,232,220,.17) 45%,transparent 71%)!important;
  }
  body:not(.infrastructure-page):not(.contact-page) main .hero[data-slide="1"] .slide-tint,
  body:not(.infrastructure-page):not(.contact-page) main .hero[data-slide="3"] .slide-three-shade{
    background:linear-gradient(180deg,
      rgba(6,24,38,.84) 0%,
      rgba(7,28,43,.58) 38%,
      rgba(13,38,52,.24) 73%,
      rgba(11,32,45,.10) 100%)!important;
  }
  body:not(.infrastructure-page):not(.contact-page) main .hero::before{
    height:clamp(56px,10svh,105px);
  }
}
@media(max-width:500px) and (max-height:700px){
  body:not(.infrastructure-page):not(.contact-page) main .hero .slide-services{
    row-gap:4px;
    column-gap:4px;
  }
  body:not(.infrastructure-page):not(.contact-page) main .hero .slide-services span{
    padding:4px 6px!important;
  }
}
/* Infrastructure headers: same cinematic system on desktop and phone. */
body.has-video-hero .page-hero-film{
  isolation:isolate;
  background:#102f40!important;
  overflow:hidden;
}
body.has-video-hero .page-hero-film :is(img,video){
  position:absolute!important;
  inset:0!important;
  width:100%!important;height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
}
body.has-video-hero .page-hero-film::after{
  content:"";
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(5,24,37,.70) 0%,
    rgba(7,26,41,.50) 43%,
    rgba(9,34,45,.14) 100%);
}
@media(max-width:800px){
  body.has-video-hero .page-hero-film::after{
    background:linear-gradient(180deg,
      rgba(5,24,37,.74) 0%,
      rgba(7,27,40,.50) 43%,
      rgba(11,37,48,.22) 81%);
  }
  body.has-video-hero :is(.infra-hero,.contact-intro){
    isolation:isolate;
  }
}
/* Photographs and films meet their surrounding panels with crisp edges. */
.solution-card .ciidt-motion-frame::after,
#technology .platform-showcase > .ciidt-motion-frame::after,
.ciidt-globe-film::after{
  content:none;
  display:none;
}
.ciidt-globe-feature{background:#fff!important;}
.ciidt-globe-film{overflow:hidden;background:#fff;}
@media(prefers-reduced-motion:reduce){
  body:not(.infrastructure-page):not(.contact-page) main .hero :is(img,video){transition:none!important;}
}

/* Desktop footer illustration: soften only its outer crop into the white page. */
@media(min-width:801px){
  .ciidt-globe-film::after{
    content:"";
    display:block;
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:
      linear-gradient(90deg,#fff 0%,transparent 10%,transparent 90%,#fff 100%),
      linear-gradient(180deg,#fff 0%,transparent 6%,transparent 82%,#fff 100%);
  }
}