/* ===== HERO ===== */
.hero { --h: 889; background: var(--white); }
.hero .stage { background: transparent; }

/* Photo area clips at 832 (matches Figma main overflow-clip) */
.hero__photo {
  position: absolute; top: 0; left: 0; width: 1920px; height: 832px;
  overflow: hidden; z-index: 0;
}
.hero__bg {
  position: absolute; top: 0; left: 0; width: 1920px; height: 832px; object-fit: cover;
}
/* Woman cutout on top of bg */
.hero__woman {
  position: absolute; top: 17px; left: 286px; width: 723px; height: 1078px;
  object-fit: contain; object-position: top center; pointer-events: none;
}

/* --- Accessibility floating gold button --- */
.hero__a11y {
  position: absolute; left: 9px; top: 235px; width: 40px; height: 40px;
  background: var(--gold); border-radius: 900px; z-index: 6;
  display: flex; align-items: center; justify-content: center; border: 0;
}
.hero__a11y img { width: 20px; height: 22px; }

/* --- DUNS / trust strip (left) — single composited image (BDi + DUNS + 4.9 laurel) --- */
.hero__trust {
  position: absolute; left: 0; top: 301px; width: 115px; height: 265px; z-index: 5;
}
.hero__trust-img { width: 115px; height: 265px; object-fit: cover; border-radius: 0 7px 7px 0; }

/* --- Hero copy (right) --- */
.hero__copy { position: absolute; top: 191px; right: 311px; width: 643px; z-index: 4; text-align: right; color: #fff; }
.hero__eyebrow { font-size: 34px; font-weight: 400; line-height: 1.1; }
.hero__title {
  font-size: 66px; font-weight: 700; line-height: 68px; margin-top: 8px; width: 636px;
  background: var(--gradient-heading);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hero__lead { font-size: 21px; line-height: 30px; margin-top: 28px; }
.hero__lead b { font-weight: 700; }
.hero__why-block { position: absolute; top: 537px; right: 311px; width: 643px; z-index: 4; text-align: right; color: #fff; }
.hero__why { font-size: 21px; font-weight: 700; line-height: 30px; }

.hero__bullets { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.hero__bullets li { display: flex; direction: rtl; align-items: center; gap: 12px; }
.hero__bullets .mark { flex: 0 0 11px; width: 11px; height: 10px; }
.hero__bullets p { font-size: 18px; line-height: 24px; }
.hero__bullets b { font-weight: 700; }

/* --- Lead form card (overlapping hero bottom) --- */
.hero__form {
  position: absolute; top: 764px; left: 50%; transform: translateX(-50%);
  width: 1301px; height: 125px; background: #fff; border-radius: 10px;
  box-shadow: var(--shadow-form); z-index: 7;
  display: flex; direction: rtl; align-items: center; justify-content: space-between;
  padding: 0 29px; gap: 16px;
}
.hf__intro { flex: 0 0 auto; text-align: right; }
.hf__intro-top { font-size: 25px; color: var(--ink); line-height: 1.15; }
.hf__intro-top b { font-weight: 700; }
.hf__call { display: flex; direction: rtl; align-items: center; gap: 9px; margin-top: 8px; }
.hf__call-label { font-weight: 600; font-size: 32px; color: var(--ink); line-height: 1; }
.hf__call-ic { width: 26px; height: 26px; }
.hf__call-num { font-family: var(--font-num); font-weight: 800; font-size: 32px; color: var(--green-900); line-height: 1; direction: ltr; }
.hf__fields { display: flex; direction: rtl; gap: 18px; flex: 1; justify-content: center; }
.hf__input {
  width: 307px; height: 60px; background: var(--cream); border: 0; border-bottom: 1px solid var(--cream-border);
  border-radius: 4px; padding: 0 18px; font: inherit; font-size: 19px; color: var(--ink-soft); text-align: right;
}
.hf__input::placeholder { color: var(--ink-soft); }
.hf__submit {
  flex: 0 0 auto; display: flex; direction: ltr; align-items: center; gap: 12px;
  height: 60px; padding: 0 24px 0 6px; background: var(--green-900); border: 0; border-radius: 900px;
  color: #fff; font-weight: 700; font-size: 21px;
}
.hf__submit .circ { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; }
.hf__submit .circ img { width: 27px; height: 27px; }

/* ===== Mobile hero (design node 5125:7337) ===== */
@media (max-width: 1024px) {
  .hero { --h: auto; height: auto; min-height: auto; background: var(--green-900); }
  .hero .stage { position: static; width: 100%; height: auto; transform: none; background: none; padding: 0; }
  .hero__inner { position: relative; display: flex; flex-direction: column; padding-bottom: 40px; }

  /* photo block at top (375x332 -> aspect) */
  .hero__photo {
    display: block; position: relative; order: 0; width: 100%; height: auto; aspect-ratio: 375 / 332;
    background: url('../images/m-hero-photo.png') center / 100% 100% no-repeat; overflow: hidden;
  }
  .hero__bg, .hero__woman { display: none; }

  /* trust strip on photo right */
  .hero__trust {
    position: absolute; order: 0; top: calc(100vw * 88 / 375); right: 0; left: auto;
    width: calc(100vw * 80 / 375); height: auto; z-index: 6;
  }
  .hero__trust-img {
    width: 100%; height: auto; border-radius: 5px 0 0 5px;
  }

  /* copy: eyebrow + title + lead (centered, on green) */
  .hero__copy { order: 1; position: static; width: auto; right: auto; text-align: center; padding: 18px 18px 0; }
  .hero__eyebrow { font-size: clamp(22px, 7vw, 28px); line-height: 1.1; color: #fff; }
  .hero__title {
    font-size: clamp(30px, 10vw, 38px); line-height: 1.1; width: auto; margin: 6px auto 0; max-width: 340px;
  }
  .hero__copy::after {
    content: ""; display: block; width: 90%; max-width: 342px; height: 1px;
    background: rgba(229,195,139,.45); margin: 18px auto 0;
  }
  .hero__lead { font-size: clamp(16px, 5vw, 20px); line-height: 1.4; margin-top: 16px; color: #fff; }
  .hero__lead b { font-weight: 700; }

  /* form card */
  .hero__form {
    order: 2; position: static; transform: none; width: auto; height: auto; margin: 26px 16px 0;
    flex-direction: column; align-items: stretch; padding: 26px 20px 24px; gap: 16px;
  }
  .hf__intro { text-align: center; }
  .hf__intro-top { font-size: clamp(22px, 6.4vw, 26px); }
  .hf__call { justify-content: center; margin-top: 6px; }
  .hf__call-label, .hf__call-num { font-size: clamp(26px, 8vw, 32px); }
  .hf__fields { flex-direction: column; gap: 14px; }
  .hf__input { width: 100%; height: 54px; }
  .hf__submit { justify-content: center; align-self: center; height: 52px; width: 182px; }

  /* why + bullets (centered, on green) */
  .hero__why-block { order: 3; position: static; top: auto; right: auto; width: auto; padding: 30px 18px 0; }
  .hero__why { font-size: clamp(22px, 7.5vw, 28px); text-align: center; }
  .hero__bullets { margin-top: 18px; gap: 14px; }
  .hero__bullets li { justify-content: flex-end; }
  .hero__bullets p { font-size: 16px; line-height: 1.25; }
}