/* =====================
   m_hero — PMO Home first section
   Desktop: Figma 1:355 (1142×928) — full viewport, justify-between:
            photo 571×295 top-left, H1 + intro + button bottom, blue «pmo»
            signature over the photo's bottom-right corner.
   Mobile:  Figma 1:631 (353×470) — flow, gap 42, photo 292×150, sig 88×44.
   (Replaces the Embacy baseline hero — no scroll-scale scene in PMO.)
===================== */

.m_hero {
  min-height: calc(100svh - 40px); /* page_main pad-block 20×2 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-block: 16px;
}

.m_hero_media {
  position: relative;
  width: 571px;
  max-width: 60%;
  aspect-ratio: 571 / 295;
  flex-shrink: 0;
}

/* inner wrapper so overflow:hidden (mouse-parallax) can't clip the signature */
.m_hero_media_inner {
  position: absolute;
  inset: 0;
}

.m_hero_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* signature: svg 129.9×64.65, rotated −12.86°; rotated bbox 141×91.9
   at 487/265 in section coords → overflows photo 57px right / 46px down */
.m_hero_sig {
  position: absolute;
  width: 129.9px;
  height: 64.65px;
  right: -51px;
  bottom: -32px;
  transform: rotate(-12.86deg);
  color: var(--swatch--blue);
  pointer-events: none;
}
.m_hero_sig svg { display: block; width: 100%; height: 100%; overflow: visible; }

.m_hero_content {
  width: 808px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.m_hero_text_block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.m_hero_title {
  font-size: var(--font-size--h1);
  line-height: var(--line-height--tight);
}

.m_hero_desc p {
  font-size: var(--font-size--body);
  line-height: var(--line-height--body);
  margin-bottom: 6px;
}
.m_hero_desc p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .m_hero {
    min-height: 0;
    justify-content: flex-start;
    gap: 42px;
    /* clear the fixed glass top bar; bottom clearance lives on .page_main */
    padding-top: calc(var(--navbar-mob-h, 121px) + 40px);
    padding-bottom: 0;
  }

  .m_hero_media {
    width: 292px;
    max-width: 83%;
    aspect-ratio: 292 / 150;
  }

  /* mobile sig: 88×44 at 229/139 of the 292×150 photo */
  .m_hero_sig {
    width: 88px;
    height: 44px;
    right: -30px;
    bottom: -34px;
  }

  .m_hero_content { gap: 16px; }
  .m_hero_text_block { gap: 10px; }
  .m_hero_title { font-size: var(--font-size--h1-mob); }
  /* Figma mobile title wraps naturally (3 lines) — the desktop hard break is off */
  .m_hero_title br { display: none; }
}