/* ============================================
   Hero — cinematic dark, mobile-first
   ============================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 20px 100px;
  overflow: hidden;
}

.hero__bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.4) 100%);
}

.hero__content {
  position: relative; z-index: 1;
  width: 100%;
}

/* Agent card */
.hero__agent {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.hero__portrait {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(255,255,255,0.3);
}
.hero__agent strong {
  display: block; font-size: 14px; font-weight: 600;
}
.hero__agent span {
  font-size: 12px; color: var(--text-2);
}

.hero__title {
  font-size: 32px; font-weight: 600;
  line-height: 1.08; letter-spacing: -0.03em;
  margin-bottom: 10px;
  visibility: hidden;
}

.hero__sub {
  font-size: 15px; color: var(--text-2);
  line-height: 1.5; margin-bottom: 24px;
  max-width: 360px;
}

.hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* Statement */
.statement {
  padding: 48px 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark-surface);
}
.statement__text {
  font-size: 24px; font-weight: 600;
  line-height: 1.25; text-align: center;
  max-width: 500px; letter-spacing: -0.02em;
}
.statement__text em {
  font-style: italic; color: var(--blue);
}
/* SplitType chars */
.statement__text .char {
  display: inline-block;
  transform-origin: 50% 100%;
}

/* ===== DESKTOP ===== */
@media (min-width: 769px) {
  .hero { padding: 0 48px 120px; align-items: flex-end; }
  .hero__content { max-width: 640px; }
  .hero__title { font-size: 56px; }
  .hero__sub { font-size: 17px; max-width: 480px; }
  .hero__portrait { width: 52px; height: 52px; }
  .hero__agent strong { font-size: 16px; }
  .hero__agent span { font-size: 13px; }

  .statement { padding: 80px 24px; min-height: 40vh; }
  .statement__text { font-size: 48px; max-width: 800px; }
}