/* ========================================================================
   MDS CINEMATIC VIDEO STORY
   Purpose-built for the Real Estate Lead Systems landing page.
   ======================================================================== */

.cinematic-story{
  --story-progress:0;
  --story-blue:#73b2ff;
  --story-gold:#d6b976;
  --story-ink:#07152f;
  position:relative;
  height:320svh;
  background:#030a18;
  color:#fff;
  isolation:isolate;
  overflow:clip;
}
.cinematic-story__stage{
  position:sticky;
  z-index:2;
  top:0;
  height:100svh;
  min-height:0;
  overflow:hidden;
  background:#030a18;
}
.cinematic-story__media,
.cinematic-story__poster,
.cinematic-story__player,
.cinematic-story__wash,
.cinematic-story__grain{
  position:absolute;
  inset:0;
}
.cinematic-story__media{
  z-index:0;
  overflow:hidden;
  background:#030a18;
  transition:inset .8s cubic-bezier(.22,1,.36,1),width .8s cubic-bezier(.22,1,.36,1),height .8s cubic-bezier(.22,1,.36,1),border-radius .8s cubic-bezier(.22,1,.36,1),box-shadow .8s ease,transform .8s cubic-bezier(.22,1,.36,1);
}
.cinematic-story__poster{
  background:
    linear-gradient(90deg,rgba(3,10,24,.88),rgba(3,10,24,.28) 55%,rgba(3,10,24,.46)),
    url("https://i.ytimg.com/vi/64HUMVre1QM/maxresdefault.jpg") center/cover no-repeat;
  transform:scale(1.02);
}
.cinematic-story__player{
  z-index:1;
  top:50%;left:50%;right:auto;bottom:auto;
  width:100vw;
  height:56.25vw;
  min-width:177.78vh;
  min-height:100vh;
  border:0;
  transform:translate(-50%,-50%) scale(1.035);
  pointer-events:none;
  opacity:0;
  transition:opacity .8s ease,transform 1.1s cubic-bezier(.22,1,.36,1);
}
.cinematic-story.is-video-ready .cinematic-story__player{opacity:1}
.cinematic-story.is-video-ready .cinematic-story__poster{opacity:0;transition:opacity 1s ease}
.cinematic-story__wash{
  z-index:2;
  background:
    linear-gradient(90deg,rgba(2,8,20,.87) 0%,rgba(2,8,20,.54) 33%,rgba(2,8,20,.12) 63%,rgba(2,8,20,.42) 100%),
    linear-gradient(0deg,rgba(2,8,20,.78) 0%,transparent 38%,rgba(2,8,20,.22) 76%,rgba(2,8,20,.48) 100%);
  transition:background .8s ease,opacity .65s ease;
}
.cinematic-story[data-active-beat="1"] .cinematic-story__wash{
  background:
    linear-gradient(270deg,rgba(2,8,20,.88) 0%,rgba(2,8,20,.5) 36%,rgba(2,8,20,.1) 65%,rgba(2,8,20,.38) 100%),
    linear-gradient(0deg,rgba(2,8,20,.78),transparent 43%,rgba(2,8,20,.28));
}
.cinematic-story[data-active-beat="2"] .cinematic-story__wash{
  background:
    linear-gradient(90deg,rgba(2,8,20,.9),rgba(2,8,20,.46) 42%,rgba(2,8,20,.12) 72%),
    linear-gradient(0deg,rgba(2,8,20,.84),transparent 48%,rgba(2,8,20,.27));
}
.cinematic-story[data-active-beat="3"] .cinematic-story__wash{
  background:linear-gradient(0deg,rgba(2,8,20,.83),rgba(2,8,20,.34) 58%,rgba(2,8,20,.52));
}
.cinematic-story__grain{
  z-index:3;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
}

.cinematic-story__chrome{
  position:absolute;
  z-index:8;
  top:98px;
  right:clamp(24px,4.2vw,72px);
  left:clamp(24px,4.2vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.24);
  color:rgba(232,240,250,.66);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:opacity .45s ease;
}
.cinematic-story__chrome span:last-child{color:#e4ca94}

.cinematic-story__story{
  position:absolute;
  z-index:7;
  inset:0;
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);
}
.cinematic-story__beat{
  position:absolute;
  width:min(540px,44vw);
  opacity:0;
  visibility:hidden;
  transform:translateY(36px);
  transition:opacity .62s ease,transform .78s cubic-bezier(.22,1,.36,1),visibility .62s;
}
.cinematic-story__beat.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
}
.cinematic-story__beat--left{left:clamp(24px,7.5vw,132px);top:29%}
.cinematic-story__beat--right{right:clamp(24px,7vw,122px);top:31%;text-align:right}
.cinematic-story__beat--right .cinematic-story__eyebrow{justify-content:flex-end}
.cinematic-story__beat--right .cinematic-story__telemetry{margin-left:auto;text-align:left}
.cinematic-story__beat--lower{top:43%}
.cinematic-story__beat--center{
  top:28%;left:50%;
  width:min(720px,66vw);
  transform:translate(-50%,36px);
  text-align:center;
}
.cinematic-story__beat--center.is-active{transform:translate(-50%,0)}
.cinematic-story__eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 1.1rem;
  color:#b9d7ff;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.cinematic-story__eyebrow span{width:36px;height:1px;background:linear-gradient(90deg,var(--story-gold),var(--story-blue))}
.cinematic-story__beat h2{
  max-width:780px;
  margin:0 0 1.2rem;
  color:#fff;
  font-size:clamp(2.5rem,4.4vw,4.25rem);
  font-weight:560;
  line-height:1.04;
  letter-spacing:-.04em;
  text-wrap:balance;
}
.cinematic-story__beat--right h2{margin-left:auto}
.cinematic-story__beat--center h2{margin-inline:auto}
.cinematic-story__beat>p:not(.cinematic-story__eyebrow){
  max-width:540px;
  margin:0;
  color:#e5edf7;
  font-size:clamp(.95rem,1.2vw,1.12rem);
  line-height:1.75;
}
.cinematic-story__beat--right>p:not(.cinematic-story__eyebrow){margin-left:auto}
.cinematic-story__beat--center>p:not(.cinematic-story__eyebrow){margin-inline:auto}
.cinematic-story__telemetry{
  width:min(330px,100%);
  margin-top:2rem;
  padding:1rem 0 0 1.1rem;
  border-top:1px solid rgba(255,255,255,.22);
  border-left:1px solid rgba(214,185,118,.5);
}
.cinematic-story__telemetry small,
.cinematic-story__telemetry strong{display:block}
.cinematic-story__telemetry small{margin-bottom:.25rem;color:#d7ba79;font-size:.58rem;font-weight:800;letter-spacing:.16em}
.cinematic-story__telemetry strong{color:#e9eff7;font-size:.77rem;font-weight:650}
.cinematic-story__cta{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  margin-top:2rem;
  padding:.95rem 1.2rem;
  border:1px solid rgba(255,255,255,.38);
  border-radius:2px;
  background:transparent;
  color:#fff;
  font-size:.78rem;
  font-weight:800;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.cinematic-story__cta:hover{background:#fff;color:#07152f;border-color:#fff;transform:translateY(-2px)}

.cinematic-story__signal{
  position:absolute;
  z-index:8;
  right:clamp(24px,4.2vw,72px);
  bottom:42px;
  left:clamp(24px,4.2vw,72px);
  transition:opacity .45s ease,transform .45s ease;
}
.cinematic-story__signal-track{
  position:relative;
  height:1px;
  background:rgba(255,255,255,.24);
}
.cinematic-story__signal-track i{
  position:absolute;
  top:0;left:0;
  width:calc(var(--story-progress) * 100%);
  height:1px;
  background:linear-gradient(90deg,var(--story-gold),#8ebeff 58%,#fff);
  box-shadow:0 0 18px rgba(115,178,255,.36);
}
.cinematic-story__signal-track b{
  position:absolute;
  top:50%;left:calc(var(--story-progress) * 100%);
  width:7px;height:7px;
  border:1px solid #fff;
  border-radius:50%;
  background:#0a67f2;
  box-shadow:0 0 0 6px rgba(10,103,242,.12);
  transform:translate(-50%,-50%);
}
.cinematic-story__signal-labels{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-top:10px;
  color:rgba(225,234,246,.62);
  font-size:.55rem;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cinematic-story__signal-labels span:nth-child(2),.cinematic-story__signal-labels span:nth-child(3){text-align:center}
.cinematic-story__signal-labels span:last-child{text-align:right}

.cinematic-story__watch{
  position:absolute;
  z-index:9;
  right:clamp(24px,4.2vw,72px);
  bottom:96px;
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:13px;
  align-items:center;
  min-width:230px;
  padding:12px 0;
  border:0;
  border-bottom:1px solid rgba(214,185,118,.7);
  border-radius:0;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:background .3s ease,border-color .3s ease,transform .3s ease,opacity .45s ease;
}
.cinematic-story__watch:hover{border-color:#fff;transform:translateY(-2px)}
.cinematic-story__watch-mark{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.28);border-radius:50%}
.cinematic-story__watch-mark::before{content:"";width:0;height:0;margin-left:3px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #fff}
.cinematic-story__watch-mark i{display:none}
@keyframes cinematic-pulse{0%{opacity:.72;transform:scale(.84)}75%,100%{opacity:0;transform:scale(1.32)}}
.cinematic-story__watch small,.cinematic-story__watch strong{display:block}
.cinematic-story__watch small{margin-bottom:2px;color:#9fb3cc;font-size:.51rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cinematic-story__watch strong{font-size:.74rem;font-weight:800}
.cinematic-story__watch em{color:#d9c08a;font-style:normal}
.cinematic-story__hint{position:absolute;z-index:8;bottom:94px;left:clamp(24px,4.2vw,72px);margin:0;color:rgba(227,235,245,.58);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;transition:opacity .4s ease}

/* Full film mode */
.cinematic-story.is-watch-mode{z-index:110;overflow:visible}
.cinematic-story__viewer{
  position:absolute;
  z-index:12;
  inset:0;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease,visibility .5s;
}
.cinematic-story.is-watch-mode .cinematic-story__stage{
  position:fixed;
  z-index:1;
  inset:0;
  top:0;
  width:100%;
  height:100dvh;
  min-height:0;
  background:#020711;
}
.cinematic-story.is-watch-mode .cinematic-story__media{
  top:50%;right:auto;bottom:auto;left:50%;
  width:min(1320px,calc(100vw - 64px),calc((100dvh - 180px) * 16 / 9));
  height:auto;
  aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.13);
  border-radius:4px;
  box-shadow:0 44px 120px rgba(0,0,0,.54);
  transform:translate(-50%,-50%);
}
.cinematic-story.is-watch-mode .cinematic-story__player{
  top:0;left:0;
  width:100%;height:100%;
  min-width:0;min-height:0;
  transform:none;
}
.cinematic-story.is-watch-mode .cinematic-story__wash{opacity:0}
.cinematic-story.is-watch-mode .cinematic-story__grain{opacity:.025}
.cinematic-story.is-watch-mode .cinematic-story__story,
.cinematic-story.is-watch-mode .cinematic-story__signal,
.cinematic-story.is-watch-mode .cinematic-story__watch,
.cinematic-story.is-watch-mode .cinematic-story__hint,
.cinematic-story.is-watch-mode .cinematic-story__chrome{opacity:0;pointer-events:none;transform:translateY(12px)}
.cinematic-story.is-watch-mode .cinematic-story__viewer{opacity:1;visibility:visible;pointer-events:auto}
@media(max-width:900px){
  /* Keep the persistent audit bar from covering the story's Watch affordance. */
  body.cinematic-story-in-view .mobile-audit-cta.is-visible{
    opacity:0!important;
    pointer-events:none!important;
    transform:translateY(calc(100% + 30px))!important;
  }
}
.cinematic-story__viewer-head{
  position:absolute;
  top:32px;
  right:clamp(24px,4vw,64px);
  left:clamp(24px,4vw,64px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
}
.cinematic-story__viewer-head small,.cinematic-story__viewer-head strong{display:block}
.cinematic-story__viewer-head small{margin-bottom:4px;color:#8fbfff;font-size:.55rem;font-weight:800;letter-spacing:.16em}
.cinematic-story__viewer-head strong{font-size:.78rem;font-weight:650}
.cinematic-story__viewer-head button{
  padding:.65rem .85rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:2px;
  background:#07152f;
  color:#fff;
  font:inherit;
  font-size:.78rem;
  min-height:44px;
  font-weight:750;
  cursor:pointer;
  backdrop-filter:blur(12px);
}
.cinematic-story__viewer-head{z-index:2;top:max(20px,env(safe-area-inset-top))}
.cinematic-story__feedback{position:absolute;top:80px;left:24px;right:24px;text-align:center;font-size:12px;color:#d6e1ef}
.cinematic-story__feedback p{margin:0 0 5px}
.cinematic-story__feedback:has(p:empty){display:none}
.cinematic-story__feedback a{color:#d6b976;text-decoration:underline;text-underline-offset:4px}
.cinematic-story__control:disabled,.cinematic-story__scrub:disabled{opacity:.45;cursor:wait}
.cinematic-story button:focus-visible,.cinematic-story a:focus-visible{outline:2px solid #d6b976;outline-offset:5px}
.cinematic-story__viewer-head button span{margin-left:.5rem;font-size:1rem}
.cinematic-story__controls{
  position:absolute;
  right:clamp(48px,8vw,150px);
  bottom:30px;
  left:clamp(48px,8vw,150px);
  display:grid;
  grid-template-columns:auto auto 1fr auto auto;
  gap:14px;
  align-items:center;
  color:#fff;
}
.cinematic-story__control{
  min-width:44px;
  height:40px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font:inherit;
  font-size:.65rem;
  cursor:pointer;
}
.cinematic-story__sound{min-width:84px}
.cinematic-story__time{color:#9dabc0;font-size:.62rem;font-variant-numeric:tabular-nums}
.cinematic-story__scrub{
  position:relative;
  height:24px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.cinematic-story__scrub::before,
.cinematic-story__scrub i,
.cinematic-story__scrub b{
  content:"";
  position:absolute;
  top:50%;left:0;
  height:2px;
  border-radius:2px;
  transform:translateY(-50%);
}
.cinematic-story__scrub::before{right:0;background:rgba(255,255,255,.2)}
.cinematic-story__scrub i{width:var(--video-buffer,0%);background:rgba(255,255,255,.3)}
.cinematic-story__scrub b{width:var(--video-played,0%);background:linear-gradient(90deg,#d6b976,#75b4ff)}
.cinematic-story__scrub span{
  position:absolute;
  top:50%;left:var(--video-played,0%);
  width:9px;height:9px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 5px rgba(117,180,255,.12);
  transform:translate(-50%,-50%);
}
body.cinematic-watch-open{overflow:hidden}

@media(max-width:900px){
  .cinematic-story{height:300svh}
  .cinematic-story__chrome{top:84px}
  .cinematic-story__beat{width:min(530px,66vw)}
  .cinematic-story__beat h2{font-size:clamp(2.4rem,5.4vw,3.5rem)}
  .cinematic-story__beat--left{left:32px}
  .cinematic-story__beat--right{right:32px}
  .cinematic-story.is-watch-mode .cinematic-story__media{width:min(calc(100vw - 40px),calc((100dvh - 180px) * 16 / 9))}
}
@media(max-width:620px){
  .cinematic-story{height:270svh}
  .cinematic-story__stage{min-height:0}
  .cinematic-story__chrome{top:76px;right:18px;left:18px;font-size:.48rem}
  .cinematic-story__chrome span:last-child{display:none}
  .cinematic-story__beat,
  .cinematic-story__beat--center{
    top:23%;right:22px;left:22px;
    width:auto;
    text-align:left;
    transform:translateY(28px);
  }
  .cinematic-story__beat--center.is-active{transform:none}
  .cinematic-story__beat--right .cinematic-story__eyebrow{justify-content:flex-start}
  .cinematic-story__beat--right h2,
  .cinematic-story__beat--right>p:not(.cinematic-story__eyebrow),
  .cinematic-story__beat--center h2,
  .cinematic-story__beat--center>p:not(.cinematic-story__eyebrow){margin-left:0;margin-right:0}
  .cinematic-story__beat h2{font-size:clamp(2rem,8.8vw,2.65rem);line-height:1.08;max-width:340px}
  .cinematic-story__beat>p:not(.cinematic-story__eyebrow){max-width:92%;font-size:.92rem}
  .cinematic-story__telemetry{margin-top:1rem;padding-top:.65rem}
  .cinematic-story__signal{right:18px;bottom:24px;left:18px}
  .cinematic-story__watch{right:18px;bottom:82px;min-width:210px}
  .cinematic-story__hint{display:none}
  .cinematic-story__signal-labels{font-size:.47rem;letter-spacing:.08em}
  .cinematic-story.is-watch-mode .cinematic-story__media{width:min(calc(100vw - 20px),calc((100dvh - 160px) * 16 / 9));border-radius:2px;min-height:200px}
  .cinematic-story__viewer-head{top:18px;right:16px;left:16px}
  .cinematic-story__viewer-head>div{display:none}
  .cinematic-story__viewer-head{justify-content:flex-end}
  .cinematic-story__controls{right:16px;bottom:18px;left:16px;grid-template-columns:auto 1fr auto}
  .cinematic-story__time{display:none}
  .cinematic-story__sound{min-width:76px}
}
@media(prefers-reduced-motion:reduce){
  .cinematic-story{height:100svh}
  .cinematic-story__player{display:none}
  .cinematic-story__poster{opacity:1!important}
  .cinematic-story__beat{display:none}
  .cinematic-story__beat[data-story-beat="3"]{display:block;opacity:1;visibility:visible;transform:translate(-50%,0)}
  .cinematic-story__watch-mark i{animation:none}
  .cinematic-story__signal{display:none}
  .cinematic-story__hint{display:none}
  .cinematic-story *, .cinematic-story *::before, .cinematic-story *::after{animation:none!important;transition:none!important}
  .cinematic-story.is-watch-mode .cinematic-story__player{display:block}
  .cinematic-story.is-watch-mode.is-video-ready .cinematic-story__poster{opacity:0!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:620px){
  .cinematic-story__beat[data-story-beat="3"]{transform:none}
}
@media(max-height:650px){
  .cinematic-story__chrome{top:76px}
  .cinematic-story__beat,.cinematic-story__beat--center{top:24%}
  .cinematic-story__beat h2{font-size:clamp(1.8rem,4vw,2.8rem)}
  .cinematic-story__telemetry{display:none}
  .cinematic-story__beat>p:not(.cinematic-story__eyebrow){font-size:.875rem;line-height:1.5}
  .cinematic-story__cta{margin-top:1rem}
}