/* ===== Hero nền sáng — 2 cột (logo | chữ) ===== */
.hero {
  background: #f5f5f5;
  color: var(--text);
  padding-block: clamp(44px, 8vw, 128px) clamp(32px, 4vw, 72px);
}

.hero-inner {
  max-width: 1280px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(48px, 12vw, 200px);
}

.hero-logo-col { flex: 0 0 162px; width: 162px; }
.hero-logo { width: 100%; height: auto; }
.hero-text-col { flex: 1; }

.hero-eyebrow {
  font-size: clamp(16px, 1.33rem - 0.33vw, 20px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: #000;
}

.hero-title {
  margin: 0;
  padding-top: 20px;
  font-size: 46px;
  font-weight: 400;
  line-height: clamp(42px, 3.54rem - 0.99vw, 52.9px);
  letter-spacing: -0.92px;
  color: #1b1b1b;
}
/* "intelligent action." — Cormorant Garamond nghiêng, lớn hơn dòng sans */
.hero-title .serif {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(64px, 3.96rem + 0.19vw, 66px);
  line-height: clamp(51px, 2.99rem + 0.89vw, 60.7px);
  letter-spacing: -1.28px;
}

.hero-desc {
  padding-top: 30px;
  margin-top: 0;
  font-size: clamp(14px, 0.83rem + 0.19vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: #373737;
  max-width: 620px;
}

/* ===== Khối video ngay dưới hero (full-width, tỉ lệ 16/9 như gốc) ===== */
.hero-video {
  padding: 0;
  background: #000;
  line-height: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero-video-bg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}