/* Hero Video Carousel Styles */
.hero { position: relative; overflow: hidden; }
.hero-video-slider { position: relative; height: 100%; min-height: 100%; }
.hero-video-slider .swiper-container,
.hero-video-slider .swiper { height: 70vh; }
.hero-video-slide { position: relative; width: 100%; height: 100%; }

.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; background:#000; }
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  /* Disable blur for visibility */
  filter: none;
  transition: none;
}
.hero-video.is-ready video { filter: none; }

/* Optional overlay for gradient/darken */
.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Controls or captions container (optional) */
.hero-captions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }

/* Ensure Swiper layout fills height if parent supplies fixed height */
.hero-video-slider .swiper-container,
.hero-video-slider .swiper-wrapper,
.hero-video-slider .swiper-slide { height: 100%; min-height: 100%; }

/* Text/overlay layering on top of video */
.hero-video-slide { position: relative; overflow: hidden; }
.hero-video-slide .hero-cnt {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 40px;
  color: #fff;
}
.hero-overlay {
  background: rgba(0,0,0,.25);
  z-index: 1;
}

/* Simple Hero (standalone) */
.simple-hero { position: relative; }
.simple-hero .simple-hero-swiper { height: 100vh; }
.simple-hero .swiper-slide { position: relative; }
.simple-hero__video { position: absolute; inset:0; z-index:0; background:#000; }
.simple-hero__video video { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.simple-hero__overlay { position:absolute; inset:0; background:rgba(0,0,0,.25); z-index:1; pointer-events:none; }
.simple-hero__content { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center !important; text-align:center; padding:0 40px; color:#fff; }
@media (min-width: 1400px){
  .simple-hero__content{ align-items:flex-start; text-align:left; justify-content:center; }
}
.simple-hero__title { font-size: clamp(28px, 4vw, 54px); font-weight:700; margin:0 0 12px; }
.simple-hero__subtitle { font-size: clamp(16px, 2vw, 24px); opacity:.95; margin:0; display:block; }
.simple-hero__subtitle::after { content: ""; display:block; height:1px; width:100%; background: rgba(255,255,255,.7); margin-top: 18px; position: relative;   top: -23px;  left: 271px; width:100%;}

/* Per-slide progress under subtitle */
.simple-hero__progress { display:flex; align-items:center; gap:12px; margin-top:16px; width:min(100px, 30vw); }
.simple-hero__progress .progress-current,
.simple-hero__progress .progress-total { font-size:14px; opacity:.9; }
.simple-hero__progress .progress-bar { position:relative; flex:1; height:4px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden; }
.simple-hero__progress .progress-bar__fill { position:absolute; left:0; top:0; bottom:0; width:0%; background:#fff; }

/* Hide arrow nav; we'll use a loading bar (progressbar) instead */
.simple-hero__nav { display:none !important; }

/* Loading bar (Swiper progressbar) */
.simple-hero .simple-hero__pagination.swiper-pagination-progressbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255,255,255,0.25);
  z-index: 3;
}
.simple-hero .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #fff;
}

/* Hwaseung-style bottom design line */
.simple-hero { position: relative; }
.simple-hero .hero-design-line{
  position: absolute;
  bottom: 13px;
  left: 60px; /* default gutter on small/medium */
  display: block;
  height: 1px;
  width: 0;
  background-color: #fff;
  opacity: .9;
  z-index: 4;
  animation: heroDesignLine 0.8s linear 0.8s forwards;
}
@keyframes heroDesignLine { from{ width: 0; } to{ width: clamp(220px, 48vw, 760px); } }
@media (min-width: 1400px){
  /* align to content left edge for 1400px container */
  .simple-hero .hero-design-line{ left: calc((100vw - 1400px)/2); }
}

/* Subpage Hero */
.sub-hero {
  position: relative;
  height: 400px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.sub-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35));
}
.sub-hero__inner { position: relative; z-index: 1; padding: 0 20px; }
.sub-hero__title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; margin: 0; }