/*
 * Hero section
 * Anne's spec (PDF p.5): logo, short headline, consultation CTA, reassuring imagery.
 * Above the fold must show: who we are + why trust us + WhatsApp CTA.
 * Ratio enforced: lots of white, restrained green accent, blush only in subtle texture.
 */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 5vw, 5rem) clamp(4rem, 7vw, 7rem);
  background:
    radial-gradient(1100px 600px at 92% -10%, rgba(232, 185, 187, 0.35), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(196, 215, 155, 0.22), transparent 60%),
    var(--color-white);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.hero__eyebrow { margin-bottom: var(--sp-4); }

.hero__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--color-charcoal);
  margin-bottom: var(--sp-5);
  max-width: 18ch;
}
.hero__heading .accent {
  background: linear-gradient(180deg, transparent 65%, rgba(196, 215, 155, 0.6) 65%);
  padding-inline: 0.1em;
}

.hero__lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--sp-6);
  max-width: 46ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.hero__trust {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-line);
}

/* Media column */
.hero__media {
  position: relative;
  isolation: isolate;
}
.hero__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-blush);
  box-shadow: var(--shadow-card);
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Floating credibility card on top of image */
.hero__credibility {
  position: absolute;
  left: -1.25rem;
  bottom: -1.25rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: var(--sp-2);
  max-width: 280px;
}
.hero__credibility-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-green);
}
.hero__credibility-fig {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--color-charcoal);
}
.hero__credibility-note {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* Soft green chip floating top-right of media */
.hero__chip {
  position: absolute;
  top: -0.75rem;
  right: -0.5rem;
  background: var(--color-green);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.hero__chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-sage);
  box-shadow: 0 0 0 4px rgba(196, 215, 155, 0.25);
}

@media (min-width: 880px) {
  .hero__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(3rem, 5vw, 6rem);
  }
  .hero__credibility { left: -2rem; bottom: -1.5rem; }
}

@media (min-width: 1100px) {
  .hero__grid { gap: 6rem; }
}