/* ============================================================
   SECTION: HERO
   Targets: #section-hero
   ============================================================ */

.hero {
  padding: 72px 0 0;
  text-align: center;
}

/* Hero headline — large, centred, fills the screen */
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #ffffff;
  margin: 0 auto 30px;
  max-width: 860px;
  text-align: center;
}

/* Subheadline — larger and readable */
.hero-sub {
  font-size: clamp(16px, 1.8vw, 22px);
  color: rgba(255,255,255,.65);
  line-height: 1.55;
  font-weight: 300;
  max-width: 560px;
  text-align: center;
  margin: 0 auto 10px;
}

/* Video placeholder / embed wrapper */
.video-thumb {
  width: 100%;
  max-width: 700px;
  aspect-ratio: 16 / 9;
  background: #1a1a1a;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0; /* bleed handled by bottom:-40px in index.html */
}

.video-thumb iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Play button (placeholder until real video is embedded) */
.play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s;
}

.play-btn:hover { transform: scale(1.08); }

.play-btn::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #111;
  margin-left: 4px;
}