/* ==========================================================================
   Our Story - Premium Editorial Split Section (About Page)
   Cinematic Corporate Event Video Visual + Pure Storytelling Content
   ========================================================================== */

:root {
  --os-bg-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 50%, #F1F5F9 100%);
  --os-text-heading: #0F172A;
  --os-text-sub: #2563EB;
  --os-text-body: #475569;
  --os-font-heading: 'Syne', 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --os-font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

.os-section {
  position: relative;
  background: var(--os-bg-gradient);
  color: var(--os-text-heading);
  padding: 130px 0 140px;
  overflow: hidden;
  font-family: var(--os-font-body);
}

/* Subtle Curved Abstract Background Accent */
.os-bg-curve {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.os-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

.os-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

/* Left Column: 16:9 Cinematic Video Visual */
.os-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  border-radius: 28px;
  overflow: hidden;
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.15), 0 0 35px rgba(37, 99, 235, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
  animation: osVideoFloat 7s ease-in-out infinite alternate;
}

.os-video-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.os-video-wrapper:hover {
  box-shadow: 0 35px 75px -15px rgba(15, 23, 42, 0.22), 0 0 45px rgba(37, 99, 235, 0.12);
}

.os-video-wrapper iframe,
.os-video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.os-video-wrapper:hover iframe,
.os-video-wrapper:hover video {
  transform: scale(1.04);
}

@keyframes osVideoFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

/* Right Column: Editorial Text */
.os-content-col {
  max-width: 600px;
}

.os-heading {
  position: relative;
  font-family: var(--os-font-heading);
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--os-text-heading);
  margin: 0 0 20px;
  padding-bottom: 14px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.os-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #2563EB 0%, #D4A139 100%);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.os-heading span {
  color: var(--os-text-sub);
}

.os-subheading {
  font-family: var(--os-font-heading);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 700;
  color: var(--os-text-sub);
  line-height: 1.35;
  margin: 0 0 24px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.os-paragraph {
  font-family: var(--os-font-body);
  font-size: clamp(1.05rem, 1.2vw, 1.18rem);
  line-height: 1.85;
  color: var(--os-text-body);
  margin: 0 0 20px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.os-paragraph:last-child {
  margin-bottom: 0;
}

.os-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
  .os-section {
    padding: 100px 0 110px;
  }
  .os-split-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .os-content-col {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .os-section {
    padding: 80px 0 90px;
  }
  .os-video-wrapper {
    border-radius: 20px;
  }
}