/* ==========================================================
   AASHMAAN HOMEPAGE INTRO FILM
   Production
   ========================================================== */

.atl-film{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(72px,7vw,108px) 0;
  background:
    radial-gradient(circle at 82% 18%,rgba(226,189,104,.10),transparent 31%),
    radial-gradient(circle at 8% 95%,rgba(49,112,145,.12),transparent 34%),
    #071724;
  color:#fff;
}

.atl-film::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent);
}

.atl-film-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(270px,.78fr) minmax(0,1.45fr);
  align-items:center;
  gap:clamp(42px,5vw,82px);
}

.atl-film-copy{
  max-width:470px;
}

.atl-film-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 20px;
  color:#e2bd68;
  font-family:"Manrope",Arial,sans-serif;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.17em;
  line-height:1.2;
  text-transform:uppercase;
}

.atl-film-eyebrow::before{
  content:"";
  width:32px;
  height:1px;
  background:#e2bd68;
}

.atl-film h2{
  margin:0;
  color:#fff;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(3rem,4.3vw,5.15rem);
  font-weight:600;
  line-height:.94;
  letter-spacing:-.035em;
}

.atl-film h2 span{
  display:block;
  margin-top:8px;
  color:#d8e2e7;
  font-style:italic;
}

.atl-film-copy > p{
  max-width:445px;
  margin:27px 0 0;
  color:rgba(235,242,245,.76);
  font-family:"Manrope",Arial,sans-serif;
  font-size:clamp(.94rem,1.05vw,1.04rem);
  line-height:1.82;
}

.atl-film-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px 18px;
  margin-top:30px;
  padding-top:25px;
  border-top:1px solid rgba(255,255,255,.11);
}

.atl-film-tags span{
  position:relative;
  color:rgba(255,255,255,.67);
  font-family:"Manrope",Arial,sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.atl-film-tags span:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-11px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#e2bd68;
  transform:translateY(-50%);
}

.atl-film-media{
  min-width:0;
}

.atl-film-frame{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 40%,rgba(25,77,104,.7),transparent 50%),
    #031019;
  box-shadow:
    0 32px 80px rgba(0,0,0,.36),
    0 0 0 1px rgba(226,189,104,.05) inset;
}

.atl-film-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.30),transparent 42%),
    linear-gradient(120deg,rgba(255,255,255,.025),transparent 36%);
}

.atl-film-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#031019;
}

.atl-film-play{
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  padding:0;
  border:1px solid rgba(255,255,255,.68);
  border-radius:50%;
  background:rgba(5,22,33,.64);
  box-shadow:0 14px 45px rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
  transform:translate(-50%,-50%);
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.atl-film-play::before{
  content:"";
  width:0;
  height:0;
  margin-left:7px;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:18px solid #e2bd68;
}

.atl-film-play:hover,
.atl-film-play:focus-visible{
  border-color:#e2bd68;
  background:rgba(7,23,36,.88);
  transform:translate(-50%,-50%) scale(1.06);
}

.atl-film-frame.is-playing .atl-film-play{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.atl-film-caption{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-top:17px;
  color:rgba(255,255,255,.55);
  font-family:"Manrope",Arial,sans-serif;
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.5;
  text-transform:uppercase;
}

.atl-film-caption strong{
  color:#e2bd68;
  font-weight:700;
}

@media (max-width:900px){

  .atl-film{
    padding:60px 0 66px;
  }

  .atl-film-inner{
    grid-template-columns:1fr;
    gap:36px;
  }

  .atl-film-copy{
    max-width:660px;
  }

  .atl-film h2{
    font-size:clamp(2.75rem,11vw,4.15rem);
    line-height:.96;
  }

  .atl-film-copy > p{
    margin-top:22px;
    font-size:.94rem;
    line-height:1.72;
  }

  .atl-film-tags{
    margin-top:24px;
    padding-top:20px;
  }

  .atl-film-frame{
    border-radius:16px;
  }

  .atl-film-play{
    width:76px;
    height:76px;
  }

  .atl-film-play::before{
    border-top-width:9px;
    border-bottom-width:9px;
    border-left-width:14px;
  }

  .atl-film-caption{
    margin-top:13px;
    font-size:.61rem;
  }
}

@media (max-width:520px){

  .atl-film{
    padding:52px 0 56px;
  }

  .atl-film-inner{
    gap:29px;
  }

  .atl-film-eyebrow{
    margin-bottom:16px;
    font-size:.64rem;
  }

  .atl-film h2{
    font-size:clamp(2.45rem,12.5vw,3.45rem);
  }

  .atl-film-copy > p{
    font-size:.9rem;
  }

  .atl-film-tags{
    gap:8px 15px;
  }

  .atl-film-tags span{
    font-size:.60rem;
  }

  .atl-film-tags span:not(:last-child)::after{
    right:-9px;
  }

  .atl-film-frame{
    border-radius:13px;
  }

  .atl-film-caption{
    display:block;
  }

  .atl-film-caption span:last-child{
    display:block;
    margin-top:4px;
  }
}

@media (prefers-reduced-motion:reduce){
  .atl-film-play{
    transition:none;
  }
}

/* ==========================================================
   AASHMAAN FILM — FINAL VISUAL REFINEMENT
   ========================================================== */

.atl-film{
  padding:clamp(60px,5.5vw,86px) 0;
}

.atl-film-copy > p{
  color:rgba(235,242,245,.84);
}

.atl-film-tags span{
  color:rgba(255,255,255,.74);
}

.atl-film-caption{
  color:rgba(255,255,255,.66);
}

.atl-film-frame:not(.is-playing) .atl-film-video{
  cursor:pointer;
}

.atl-film-frame:not(.is-playing) .atl-film-video::-webkit-media-controls{
  display:none !important;
}

@media (max-width:900px){
  .atl-film{
    padding:52px 0 56px;
  }
}

@media (max-width:520px){
  .atl-film{
    padding:46px 0 50px;
  }
}


/* ==========================================================
   AASHMAAN FILM — MOBILE FINAL
   Desktop intentionally untouched
   ========================================================== */

@media (max-width:900px){

  /* Guarantee section remains available on mobile */
  body.v8.home-page .atl-film{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    width:100%;
    margin:0;
    padding:46px 0 50px;

    overflow:hidden;

    background:
      radial-gradient(circle at 82% 12%,rgba(226,189,104,.08),transparent 28%),
      radial-gradient(circle at 5% 94%,rgba(49,112,145,.11),transparent 30%),
      #071724;
  }


  body.v8.home-page .atl-film-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    width:100%;
    max-width:none;

    gap:28px;

    padding-left:20px;
    padding-right:20px;
  }


  /* -------------------------------------------------------
     COPY
     ------------------------------------------------------- */

  body.v8.home-page .atl-film-copy{
    display:block !important;

    width:100%;
    max-width:620px;

    margin:0 auto;
  }


  body.v8.home-page .atl-film-eyebrow{
    margin:0 0 15px;

    gap:10px;

    font-size:.63rem;
    line-height:1.2;

    letter-spacing:.15em;
  }


  body.v8.home-page .atl-film-eyebrow::before{
    width:26px;
  }


  body.v8.home-page .atl-film h2{
    margin:0;

    max-width:520px;

    font-size:clamp(2.45rem,10.8vw,3.7rem);
    line-height:.96;

    letter-spacing:-.035em;
  }


  body.v8.home-page .atl-film h2 span{
    margin-top:5px;

    font-size:.94em;
  }


  body.v8.home-page .atl-film-copy > p{
    max-width:540px;

    margin:20px 0 0;

    color:rgba(235,242,245,.84);

    font-size:.91rem;
    line-height:1.72;
  }


  /* -------------------------------------------------------
     CAPABILITY TAGS
     ------------------------------------------------------- */

  body.v8.home-page .atl-film-tags{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:8px 15px;

    margin-top:21px;
    padding-top:18px;
  }


  body.v8.home-page .atl-film-tags span{
    font-size:.59rem;
    line-height:1.5;

    letter-spacing:.065em;

    white-space:nowrap;
  }


  /* -------------------------------------------------------
     VIDEO
     ------------------------------------------------------- */

  body.v8.home-page .atl-film-media{
    display:block !important;

    width:100%;
    max-width:680px;

    margin:0 auto;

    min-width:0;
  }


  body.v8.home-page .atl-film-frame{
    display:block !important;

    position:relative;

    width:100%;
    max-width:100%;

    aspect-ratio:16 / 9;

    margin:0;

    overflow:hidden;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.13);

    box-shadow:
      0 20px 46px rgba(0,0,0,.30),
      0 0 0 1px rgba(226,189,104,.04) inset;
  }


  body.v8.home-page .atl-film-video{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100%;

    margin:0;

    object-fit:cover;

    background:#031019;
  }


  /* -------------------------------------------------------
     PLAY BUTTON
     ------------------------------------------------------- */

  body.v8.home-page .atl-film-play{
    display:flex;

    width:70px;
    height:70px;

    border-width:1px;

    box-shadow:
      0 12px 34px rgba(0,0,0,.34),
      0 0 0 7px rgba(255,255,255,.035);
  }


  body.v8.home-page .atl-film-play::before{
    margin-left:5px;

    border-top-width:9px;
    border-bottom-width:9px;
    border-left-width:14px;
  }


  body.v8.home-page .atl-film-frame.is-playing .atl-film-play{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }


  /* -------------------------------------------------------
     CAPTION
     ------------------------------------------------------- */

  body.v8.home-page .atl-film-caption{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:12px;

    margin-top:12px;

    color:rgba(255,255,255,.63);

    font-size:.58rem;
    line-height:1.4;

    letter-spacing:.065em;
  }


  body.v8.home-page .atl-film-caption span:last-child{
    text-align:right;
  }

}


@media (max-width:520px){

  body.v8.home-page .atl-film{
    padding:42px 0 46px;
  }


  body.v8.home-page .atl-film-inner{
    gap:24px;

    padding-left:17px;
    padding-right:17px;
  }


  body.v8.home-page .atl-film h2{
    font-size:clamp(2.25rem,11.8vw,3.1rem);
  }


  body.v8.home-page .atl-film-copy > p{
    margin-top:17px;

    font-size:.88rem;
    line-height:1.67;
  }


  body.v8.home-page .atl-film-tags{
    gap:7px 13px;

    margin-top:19px;
    padding-top:16px;
  }


  body.v8.home-page .atl-film-tags span{
    font-size:.56rem;
  }


  body.v8.home-page .atl-film-frame{
    border-radius:12px;
  }


  body.v8.home-page .atl-film-play{
    width:64px;
    height:64px;
  }


  body.v8.home-page .atl-film-caption{
    font-size:.54rem;
  }

}


/* Very narrow phones */

@media (max-width:380px){

  body.v8.home-page .atl-film-inner{
    padding-left:14px;
    padding-right:14px;
  }


  body.v8.home-page .atl-film h2{
    font-size:2.18rem;
  }


  body.v8.home-page .atl-film-caption{
    display:block;
  }


  body.v8.home-page .atl-film-caption span{
    display:block;
  }


  body.v8.home-page .atl-film-caption span:last-child{
    margin-top:4px;

    text-align:left;
  }

}