/* ── Mobile First ─────────────────────────────────────── */
.vhcs {
  position: relative;
  height: 80svh;
  height: 80vh; /* fallback */
  height: 80svh;
  min-height: 300px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* diagonal dark gradient (same angle as reference) */
.vhcs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #0e0e0e 6%, transparent 85%);
  z-index: 1;
  pointer-events: none;
}

/* Full-cover without object-fit: video maintains its own aspect ratio,
   min-width/min-height force it to always overfill the container,
   translate(-50%,-50%) keeps it centred. No black bars on any screen. */
.vhcs video {
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 0;
}

/* Fix: give the header a stacking context above .vhcs so the mobile
   navigation dropdown is never painted behind the video section */
#header {
  position: relative;
  z-index: 999;
}

/* overlay is now just the slides container, no background */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #fff;
}

/* ── Slide ────────────────────────────────────────────── */
.slide {
  position: absolute;
  bottom: 10%;
  left: 5%;
  width: 85%;
  max-width: 480px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.slide.active {
  pointer-events: auto;
}

.slide h1,
.slide h2 {
  font-size: clamp(1.8rem, 7vw, 2.2rem);
  line-height: 1.15;
  font-weight: 400;
  color: #fff;
  margin: 0 0 12px;
}

/* subtitle line */
.slide p.subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.85rem, 3vw, 0.95rem);
  line-height: 1.5;
  font-weight: 600;
  margin: 0 0 6px;
}

/* description line */
.slide p.desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(0.8rem, 2.8vw, 0.875rem);
  line-height: 1.55;
  font-weight: 400;
  margin: 0 0 20px;
  display: none; /* hidden on mobile like reference */
}

/* underline-style button */
.btn {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 0 8px;
  margin-top: 20px;
  border-bottom: 1px solid rgba(217, 217, 217, 0.6);
  transition: border-color 0.4s;
}

.btn:hover {
  border-color: #4caf50;
}

/* ── Tablet 600px+ ────────────────────────────────────── */
@media (min-width: 600px) {

  .slide {
    max-width: 550px;
    width: 65%;
  }

  .slide h1,
  .slide h2 { font-size: clamp(2.2rem, 4.5vw, 2.8rem); }

  .slide p.desc { display: block; }

  .btn { font-size: 0.72rem; }
}

/* ── Desktop 1024px+ ──────────────────────────────────── */
@media (min-width: 1024px) {

  .vhcs {
    height: 75svh;
    height: 75vh; /* fallback */
    height: 75svh;
  }

  .slide {
    left: 5%;
    max-width: 680px;
  }

  .slide h1,
  .slide h2 {
    font-size: clamp(2.8rem, 3.8vw, 3.75rem);
    line-height: 1.08;
    margin-bottom: 16px;
  }

  .slide p.subtitle { font-size: 1.1rem; }
  .slide p.desc     { font-size: 1rem; }

  .btn {
    font-size: 0.75rem;
    margin-top: 30px;
  }
}

/* ── XL 1440px+ ───────────────────────────────────────── */
@media (min-width: 1440px) {
  .slide {
    max-width: 800px;
    /* align with 90%-width content grid like the reference */
    left: max(5%, calc((100% - min(90%, 120rem)) / 2));
  }

  .slide h1,
  .slide h2 { font-size: clamp(3.5rem, 4.5vw, 4.5rem); }
}