/*!
 * Contact Hero — 1:2770 - 1:2776, the eyebrow and title over the texture and band.
 *
 * Figma 1:2769 in the Monal-Pages file AlYDxKHhVoiNp5UI47BElc.
 *
 * Split from design/contact.css, which stays the source of truth. Mobile first;
 * desktop values are the frame's, as --monal-u units (1u == 1 Figma px / 10).
 */

/* ==========================================================================
   Monal Group — Contact page
   HTML prototype stylesheet, split into the four widget stylesheets by
   design/_split-contact-css.php (re-run it after any change here).

   Figma file AlYDxKHhVoiNp5UI47BElc (Monal-Pages), frame 1:2769
   "The Monal Group | Contact", 1920 x 4102. Every desktop length is the
   Figma value / 10 in --monal-u. Mobile is written first and is derived:
   no mobile frame exists.
   ========================================================================== */

/* ==========================================================================
   1. HERO  1:2770 - 1:2776
   ========================================================================== */
/* 11u on mobile: the shared first-section clearance below the floating
   header (it ends at 7.9u). */
.monal-contact-hero { position: relative; padding: calc(var(--monal-u) * 11) 0 calc(var(--monal-u) * 7); text-align: center; }

.monal-contact-hero__title {
  margin-top: calc(var(--monal-u) * 1.4);
  font-weight: 500; font-size: max(calc(var(--monal-u) * 3.4), 28px); line-height: 1.08;
  letter-spacing: -.04em; color: var(--monal-c-black);
}

/* 1:2772 — the notched band, turned 180 so the orange collects at the bottom
   and the notch points down at the content. On phones it spans the hero and
   the notch tip lands in the gap below the title. The art is turned on the
   pseudo-element, which GSAP never touches. */
.monal-contact-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: 0; bottom: 0;
  background: url(../../assets/monal/img/pages/impact-band.svg) center / 100% 100% no-repeat;
  transform: rotate(180deg);
}

@media (min-width: 1200px) {
  
    /* --- hero ------------------------------------------------------------ */
    /* The eyebrow at y245 (1:2774, 22/28), the title at y293 (1:2776, 72/78).
       The band ends at 537.9 with its notch; the section closes there. */
    .monal-contact-hero { padding: calc(var(--monal-u) * 24.5) 0 0; min-height: calc(var(--monal-u) * 53.79); }
  
    .monal-contact-hero__title {
      margin-top: calc(var(--monal-u) * 2);
      font-size: calc(var(--monal-u) * 7.2); line-height: calc(var(--monal-u) * 7.8);
      letter-spacing: calc(var(--monal-u) * -.288);
    }
  
    /* 1:2771 — 1920 x 491.011 from y0, turned 180, multiply at 50%. The source
       is 169.77% x 284.31% of the box at -34.89%, i.e. 3259.58 x 1396 at
       -669.89, top 0 (absolute: a CSS % in background-position means something
       else). */
    .monal-contact-hero::before {
      content: ""; position: absolute; z-index: -1; pointer-events: none;
      left: 50%; width: 100vw; margin-left: -50vw;
      top: 0; height: calc(var(--monal-u) * 49.101);
      background: url(../../assets/monal/img/pages/impact-texture.jpg) calc(var(--monal-u) * -66.989) 0 / calc(var(--monal-u) * 325.958) calc(var(--monal-u) * 139.6) no-repeat;
      mix-blend-mode: multiply; opacity: .5;
      transform: rotate(180deg);
    }
  
    /* 1:2772 — the band at y153.51, 384.392 tall, its art inset 1.26% from the
       top (the same export as the Impact band). */
    .monal-contact-hero::after {
      left: 50%; right: auto; bottom: auto; width: 100vw; margin-left: -50vw;
      top: calc(var(--monal-u) * 15.351); height: calc(var(--monal-u) * 38.439);
      background: url(../../assets/monal/img/pages/impact-band.svg) center calc(var(--monal-u) * .484) / 100% calc(var(--monal-u) * 37.954) no-repeat;
    }
}