/* ============================================================
   HERO — sección principal con foto y CTA
   ============================================================ */

.hero { background: var(--photo-bg); position: relative; overflow: hidden }

.hero::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,44,84,.05), transparent 70%);
  top: -120px;
  left: -100px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 2.5rem;
  align-items: end;
  padding: 3.2rem 0 0;
}

.hero-copy { position: relative; z-index: 2; padding-bottom: 3.4rem }

.hero .pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--mist);
  border: 1px solid var(--line);
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 1.4rem;
  color: var(--slate);
}
.hero .pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fa86b;
  box-shadow: 0 0 0 4px rgba(47,168,107,.18);
}

.hero h1 { font-size: clamp(2.3rem, 4.7vw, 3.5rem); font-weight: 600; color: var(--ink) }
.hero h1 em { font-style: normal; color: var(--gold-600) }

.hero p.sub { font-size: 1.18rem; color: var(--slate); margin: 1.3rem 0 2rem; max-width: 34ch }
.hero p.sub strong { color: var(--ink) }

.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center }

.hero-meta { display: flex; gap: 2rem; margin-top: 2.4rem; flex-wrap: wrap }
.hero-meta div { display: flex; flex-direction: column }
.hero-meta b    { font-family: 'Fraunces', serif; font-size: 1.55rem; color: var(--navy-800) }
.hero-meta span { font-size: .82rem; color: var(--slate) }

.hero-photo {
  position: relative;
  z-index: 2;
  align-self: end;
  display: flex;
  justify-content: flex-end;
}
.hero-photo img { display: block; width: 100%; max-width: 430px; height: auto; vertical-align: bottom }

.hero-badge {
  position: absolute;
  left: 6px;
  bottom: 54px;
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  padding: .8rem 1.05rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: .65rem;
  z-index: 3;
  border: 1px solid var(--line);
}
.hero-badge .ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(200,155,60,.14);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}
.hero-badge b    { font-size: .92rem; display: block }
.hero-badge span { font-size: .76rem; color: var(--slate) }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 2rem; text-align: center }
  .hero-copy { padding-bottom: 1rem }
  .hero p.sub { max-width: none; margin-inline: auto }
  .hero-cta, .hero-meta { justify-content: center }
  .hero-photo { justify-content: center; margin-top: .5rem }
  .hero-photo img { max-width: 330px }
  .hero-badge { left: 0 }
}