.hero {
    display: flex;
    height: 90vh;
    align-items: center;
    padding: 0 50px;
    background: #fff;
}

.hero-left,
.hero-right{
  flex:0 0 50%;       /* basis 50 %, don’t grow/shrink beyond it */
  max-width:50%;      /* prevents either side from expanding */
}

.hero-left h4 {
    font-size: 20px;
    color: #888;
    margin-bottom: 10px;
}

.hero-left h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.hero-left p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.hero-right{
    display:flex;
    flex-direction:column;   /* video + caption */
    align-items:flex-start;
    justify-content:center;
    gap:.25rem;
    position:relative;
}

/* square clip fits its 50 % column */
.hero-video{
    width:100%;
    aspect-ratio:1/1;
    border-radius:1rem;
    object-fit:cover;
}

#changing-word {
    transition: opacity 0.25s ease-in-out;
    font-weight: 600;
    color: #3c82f6;           /* tweak to match your palette */
}

.fade-out {
    opacity: 0;
}

@media (max-width:768px){
  .hero{ flex-direction:column; height:auto; }
  .hero-left,
  .hero-right{ flex:1 0 100%; max-width:100%; }
}