.story {
    display:flex;
    flex-wrap:wrap;
    gap:50px;
    padding:80px 50px;
    background:#f9f9f9;
}

.story:nth-child(even){
    background:#fff;
}

.story-text{
    flex:1 1 420px;
    display:flex;
    flex-direction:column;
    gap:20px;
    justify-content:center;
}

.story-text h2{
    font-size:36px;
    font-weight:700;
    color:#333;
}

.story-text p{
    font-size:18px;
    line-height:1.6;
    color:#666;
}

.story img {
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Video */

.story-media{
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    justify-content: center;
    gap: .25rem;
    flex: 1 1 380px;
    position: relative;
}

.story-video {
  max-width: 100%;
  height: auto;     /* maintains aspect ratio */
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.video-support{
    color:#555;        /* dark-grey */
    font-size:.85rem;
    font-weight:600;   /* slightly thicker */
    margin-top:.25rem;
    text-align:left;   /* text flush left */
}

/* Carousel */

.video-carousel {
  width: 100%;
  position: relative;
}

/* hide every clip except the active one */
.story-video { display: none; }
.story-video.active { display: block; }

.video-dots{
  display:flex;
  gap: 8px;
  margin-top: .5rem;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ccc;
  border:0;
  cursor:pointer;
}
.dot.active{ background:#555; }   /* darker for the current clip */