/* Pine Villas introduction video — compact timed popup + featured gallery film */
.intro-video-modal{
  padding:28px;
  background:rgba(4,18,12,.82);
  backdrop-filter:blur(8px);
}
.intro-video-modal .modal-shell{
  width:min(760px,calc(100vw - 56px));
  max-width:760px;
  position:relative;
  background:#071b14;
  border:1px solid rgba(221,194,156,.22);
  border-radius:16px;
  overflow:visible;
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}
.intro-video-modal .modal-shell:before{
  content:"Pine Villas · Introduction";
  position:absolute;
  z-index:3;
  left:16px;
  top:-34px;
  color:#eadbc6;
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.intro-video-modal video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  max-height:428px;
  object-fit:contain;
  background:#000;
  border-radius:15px;
}
.intro-video-modal .modal-close{
  top:-42px;
  right:0;
}
.intro-video-modal .intro-sound-note{
  position:absolute;
  z-index:4;
  left:12px;
  bottom:12px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(6,24,17,.8);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  font-size:.54rem;
  letter-spacing:.07em;
  pointer-events:none;
  opacity:.9;
}

/* Intro film leads the Gallery video collection without dominating the entire page */
.video-tile.intro-video-tile{
  grid-column:span 2;
  min-height:440px;
}
.video-tile.intro-video-tile img{
  object-position:center;
}
.video-tile.intro-video-tile:after{
  background:
    linear-gradient(90deg,rgba(4,18,12,.48),rgba(4,18,12,.03) 62%),
    linear-gradient(180deg,transparent 44%,rgba(4,18,12,.76));
}
.video-tile.intro-video-tile .content{
  max-width:620px;
  bottom:26px;
  left:26px;
}
.video-tile.intro-video-tile .content small{
  display:block;
  margin-bottom:7px;
  color:var(--sand-2);
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.video-tile.intro-video-tile h3{
  font-size:clamp(2.25rem,4vw,3.8rem);
  line-height:.97;
}

@media(max-width:880px){
  .intro-video-modal{padding:22px}
  .intro-video-modal .modal-shell{
    width:min(720px,calc(100vw - 36px));
  }
  .intro-video-modal .modal-shell:before{
    top:12px;
    left:14px;
    text-shadow:0 1px 8px rgba(0,0,0,.55);
  }
  .intro-video-modal .modal-close{
    top:10px;
    right:10px;
    background:rgba(4,18,12,.72);
  }
  .video-tile.intro-video-tile{
    grid-column:1/-1;
    min-height:390px;
  }
}
@media(max-width:580px){
  .intro-video-modal{
    padding:16px;
    align-items:center;
  }
  .intro-video-modal .modal-shell{
    width:calc(100vw - 28px);
    max-width:620px;
    border-radius:12px;
  }
  .intro-video-modal video{
    border-radius:11px;
    max-height:56vh;
  }
  .intro-video-modal .intro-sound-note{
    left:9px;
    bottom:9px;
    font-size:.48rem;
  }
  .video-tile.intro-video-tile{
    min-height:320px;
  }
  .video-tile.intro-video-tile .content{
    left:17px;
    right:17px;
    bottom:17px;
  }
}
@media(prefers-reduced-motion:reduce){
  .intro-video-modal *{
    animation:none!important;
    transition:none!important;
  }
}
/* Browsers that block autoplay-with-audio get a one-click sound start. */
.intro-play-gate{
  position:absolute;
  z-index:8;
  inset:0;
  width:100%;
  border:0;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:28px;
  text-align:left;
  color:#fff;
  background:linear-gradient(180deg,rgba(4,18,12,.38),rgba(4,18,12,.8));
  cursor:pointer;
  backdrop-filter:blur(2px);
}
.intro-play-gate>span:last-child{max-width:340px}
.intro-play-gate strong{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.4vw,2rem);
  font-weight:500;
  line-height:1.05;
}
.intro-play-gate small{
  display:block;
  margin-top:6px;
  color:#d5ddd9;
  font-size:.68rem;
  line-height:1.45;
}
.intro-play-icon{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding-left:3px;
  border:1px solid rgba(221,194,156,.5);
  background:rgba(221,194,156,.12);
  color:#eadbc6;
}
.intro-play-gate:hover .intro-play-icon{background:rgba(221,194,156,.2)}
@media(max-width:580px){
  .intro-play-gate{padding:18px;gap:11px}
  .intro-play-icon{flex-basis:42px;width:42px;height:42px}
  .intro-play-gate small{font-size:.6rem}
}