/* ==========================================================================
   Monal Group — Trusted by Excellence widget
   Converted from the static build (assets/css/style.css). Values are the
   original Figma-derived numbers: 1 unit of --monal-u == 1 Figma px / 10.
   ========================================================================== */

/* ==========================================================================
   TRUSTED  (Figma 1:1014 / 1:1046 / 1:1049 / 1:1017)
   ========================================================================== */
.monal-trusted { padding-top: calc(var(--monal-u) * 8); }
.monal-trusted .monal-h2 { text-align: center; max-width: calc(var(--monal-u) * 26); margin-inline: auto; }
.monal-trusted__lead { margin: calc(var(--monal-u) * 1.4) auto 0; max-width: calc(var(--monal-u) * 28.4); text-align: center; font-size: calc(var(--monal-u) * 1.6); line-height: calc(var(--monal-u) * 2.2); color: var(--monal-c-muted); }
.monal-laurels {
  /* Mobile frame 1:1824: the panel is 108 tall around a 78 laurel, so 30 of
     padding, not 52. The old values made it 131 and squeezed the gap to the
     award rows below. */
  display: flex; justify-content: space-around; margin: calc(var(--monal-u) * 4.8) calc(var(--monal-gutter) * -1 + calc(var(--monal-u) * 1.1)) 0; padding: calc(var(--monal-u) * 1.8) calc(var(--monal-u) * .6) calc(var(--monal-u) * 1.2);
  border-top: 1px solid rgba(237,120,44,.7);
  background: linear-gradient(to bottom, rgba(237,120,44,.1), rgba(237,120,44,0)); /* Figma 1:1047 */
}
/* min-width:0 so the three can compress: each is a fixed 10u, which at 320
   needs 300 in a 286 row and pushed the last one past the edge. */
.monal-laurel { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.monal-laurel__num {
  position: relative; display: flex; align-items: flex-start; justify-content: center; width: calc(var(--monal-u) * 10); max-width: 100%; height: calc(var(--monal-u) * 6.2); padding-top: calc(var(--monal-u) * .7);
  font-family: var(--monal-f-serif); font-size: calc(var(--monal-u) * 3.1 * var(--monal-laurel-fit, 1)); line-height: 1; letter-spacing: -.04em;
}
.monal-laurel__num::before, .monal-laurel__num::after {
  content: ""; position: absolute; top: calc(var(--monal-u) * .3); width: calc(var(--monal-u) * 3.9); height: calc(var(--monal-u) * 5.9);
  background: url(../../assets/monal/img/laurel.png) center / contain no-repeat;
}
.monal-laurel__num::before { left: 0; transform: scaleX(-1); }
.monal-laurel__num::after { right: 0; }
.monal-laurel__num > span, .monal-laurel__num > sup { position: relative; z-index: 1; }
.monal-laurel__num sup { font-size: .69em; line-height: 1; margin-left: .05em; }
.monal-laurel__label { font-family: var(--monal-f-serif); font-size: calc(var(--monal-u) * 1.3); line-height: 1.2; text-transform: uppercase; letter-spacing: -.04em; }

/* 45 below the laurel panel in the mobile frame, not 17. */
.monal-awards { display: grid; gap: calc(var(--monal-u) * 1.2); margin: calc(var(--monal-u) * 4.5) calc(var(--monal-gutter) * -1 + calc(var(--monal-u) * 1.1)) 0; }
.monal-award {
  /* The figure takes only the room it needs (a shared minimum keeps the
     captions aligned row to row), so its caption follows it directly. */
  display: grid; grid-template-columns: minmax(calc(var(--monal-u) * 6.4), max-content) 1fr auto; align-items: center; gap: calc(var(--monal-u) * 1.6);
  height: calc(var(--monal-u) * 4.6); padding: 0 calc(var(--monal-u) * 1.4); background: var(--monal-c-grey-100); color: var(--monal-c-ink);
  transition: background-color .35s var(--monal-ease-out), color .35s var(--monal-ease-out);
}
.monal-award__a { font-family: var(--monal-f-serif); font-size: calc(var(--monal-u) * 1.4); letter-spacing: -.04em; text-transform: uppercase; }
.monal-award__b { font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 1); letter-spacing: -.04em; text-transform: uppercase; }
.monal-award__icon {
  width: calc(var(--monal-u) * 1.2); height: calc(var(--monal-u) * 1.2); background: currentColor;
  -webkit-mask: url(../../assets/monal/icons/arrow-ne.svg) center / contain no-repeat; mask: url(../../assets/monal/icons/arrow-ne.svg) center / contain no-repeat;
  transform: scaleX(-1) rotate(-90deg);
  transition: transform .4s var(--monal-ease-out);
}
.monal-award.monal-is-active, .monal-award:hover { background: var(--monal-c-ink); color: #fff; }
.monal-award.monal-is-active .monal-award__a { font-style: italic; }
.monal-award:hover .monal-award__icon { transform: scaleX(-1) rotate(-90deg) translate(calc(var(--monal-u) * -.2), calc(var(--monal-u) * -.2)); }

@media (min-width: 768px) {
  .monal-trusted__lead { max-width: calc(var(--monal-u) * 52); }
  .monal-laurels, .monal-awards { margin-inline: 0; }
  .monal-laurel__num { width: calc(var(--monal-u) * 13); height: calc(var(--monal-u) * 8); font-size: calc(var(--monal-u) * 4 * var(--monal-laurel-fit, 1)); }
  .monal-laurel__num::before, .monal-laurel__num::after { width: calc(var(--monal-u) * 5); height: calc(var(--monal-u) * 7.8); }
  .monal-laurel__label { font-size: calc(var(--monal-u) * 1.5); }
  .monal-award { height: calc(var(--monal-u) * 6.4); padding: 0 calc(var(--monal-u) * 2.4); grid-template-columns: minmax(calc(var(--monal-u) * 9), max-content) 1fr auto; gap: calc(var(--monal-u) * 2.4); }
  .monal-award__a { font-size: calc(var(--monal-u) * 2); }
  .monal-award__b { font-size: calc(var(--monal-u) * 1.6); }
}
@media (min-width: 1200px) {
  .monal-trusted { padding-top: 0; order: 0; }
  .monal-presence, .monal-news { order: 0; }
  .monal-trusted__grid { display: grid; grid-template-columns: calc(var(--monal-u) * 72.3) calc(var(--monal-u) * 76); justify-content: space-between; align-items: start; }
  .monal-trusted .monal-h2 { text-align: left; line-height: calc(var(--monal-u) * 7.2); white-space: nowrap; max-width: none; margin: 0; }
  .monal-trusted__lead { margin: calc(var(--monal-u) * 3) 0 0; max-width: calc(var(--monal-u) * 61.3); text-align: left; font-size: max(calc(var(--monal-u) * 2.2), 15px); line-height: calc(var(--monal-u) * 3.4); }
  .monal-laurels { justify-content: flex-start; gap: calc(var(--monal-u) * 5); margin: calc(var(--monal-u) * 8.7) 0 0; padding: calc(var(--monal-u) * 5) 0 0 calc(var(--monal-u) * 5.9); height: calc(var(--monal-u) * 22.4); }
  .monal-laurel { gap: 0; }
  .monal-laurel__num { width: calc(var(--monal-u) * 16.8); height: calc(var(--monal-u) * 10.1); padding-top: calc(var(--monal-u) * 1.1); font-size: calc(var(--monal-u) * 5.42 * var(--monal-laurel-fit, 1)); line-height: calc(var(--monal-u) * 4.7); }
  .monal-laurel__num::before, .monal-laurel__num::after { top: calc(var(--monal-u) * .5); width: calc(var(--monal-u) * 6.5); height: calc(var(--monal-u) * 10); }
  .monal-laurel__num sup { font-size: calc(var(--monal-u) * 3.73); line-height: 1; margin-top: calc(var(--monal-u) * -1.1); }
  .monal-laurel__label { font-size: calc(var(--monal-u) * 2); line-height: calc(var(--monal-u) * 2.3); margin-top: calc(var(--monal-u) * .1); }
  .monal-awards { gap: calc(var(--monal-u) * 2.4); margin: calc(var(--monal-u) * .9) 0 0; }
  .monal-award { grid-template-columns: calc(var(--monal-u) * 27.1) 1fr auto; height: calc(var(--monal-u) * 10); padding: 0 calc(var(--monal-u) * 4.1); gap: 0; }
  .monal-award__a { font-size: calc(var(--monal-u) * 3); line-height: calc(var(--monal-u) * 1.8); }
  .monal-award__b { font-size: calc(var(--monal-u) * 2.8); line-height: calc(var(--monal-u) * 3.2); }
  .monal-award__icon { width: calc(var(--monal-u) * 1.9); height: calc(var(--monal-u) * 1.9); }
}

/* ==========================================================================
   STACKED VARIANT — Newsroom/Awards page (Figma 1:3051)

   Same content model as the Home layout, different arrangement: eyebrow and
   heading centred, the laurel panel full width beneath them, and the awards
   as a row of four cards instead of a stacked list. Every rule is scoped to
   .monal-trusted--stacked so the Home page is untouched.
   ========================================================================== */
/* On Newsroom/Awards this band is the first on the page, where .monal-trusted's
   8u top padding (tuned for its mid-page position on Home) left the eyebrow
   level with the floating header, whose lower edge sits at 7.9u. 11u clears it
   and matches the Story, Leadership and Impact heroes. Home is untouched: it
   never carries the --stacked variant. */
.monal-trusted--stacked { padding-top: calc(var(--monal-u) * 11); }
.monal-trusted--stacked .monal-trusted__eyebrow { text-align: center; }
.monal-trusted--stacked .monal-awards { display: grid; }
/* The award subtitle is a bare 1u (10px) on phones; floored at 12, as all
   small type on these pages is. 768 up already sets 1.6u. */
@media (max-width: 767px) {
  .monal-trusted--stacked .monal-award__b { font-size: max(calc(var(--monal-u) * 1), 12px); }
}

@media (min-width: 1200px) {
  /* The band runs 0 -> 1322.3; the eyebrow sits at y245. */
  .monal-trusted--stacked { padding-top: calc(var(--monal-u) * 24.5); }
  .monal-trusted--stacked .monal-trusted__grid { display: block; }
  /* 1:3133 — 16/24. max() so it does not fall to 10.7 at 1280, where the
     desktop layer scales everything by 100vw/192; 1920 is unaffected. */
  .monal-trusted--stacked .monal-trusted__eyebrow {
    font-size: max(calc(var(--monal-u) * 1.6), 12px); line-height: calc(var(--monal-u) * 2.4);
  }
  /* 1:3273 — 66/72, w745.678, centred at y293. */
  .monal-trusted--stacked .monal-h2 {
    text-align: center; white-space: normal;
    width: calc(var(--monal-u) * 74.57); max-width: 100%; margin: calc(var(--monal-u) * 2.4) auto 0;
    line-height: calc(var(--monal-u) * 7.2); letter-spacing: calc(var(--monal-u) * -.264);
  }
  /* 1:3274 — 22/34 at 70%, w611.779, y395. */
  .monal-trusted--stacked .monal-trusted__lead {
    text-align: center;
    width: calc(var(--monal-u) * 61.18); max-width: none; margin: calc(var(--monal-u) * 3) auto 0;
    font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3.4);
  }
  /* 1:3275 — panel 1096 x 266.711 at y517.8, laurel pitch 314.7. */
  .monal-trusted--stacked .monal-laurels {
    justify-content: space-between; gap: 0;
    width: calc(var(--monal-u) * 109.6); height: calc(var(--monal-u) * 26.67);
    margin: calc(var(--monal-u) * 5.48) auto 0;
    padding: calc(var(--monal-u) * 6.54) calc(var(--monal-u) * 11.2) calc(var(--monal-u) * 2.97);
  }
  .monal-trusted--stacked .monal-laurel__num {
    width: calc(var(--monal-u) * 24.26); height: calc(var(--monal-u) * 14.39);
    padding-top: 0; font-size: calc(var(--monal-u) * 7.82 * var(--monal-laurel-fit, 1));
    line-height: calc(var(--monal-u) * 6.82);
  }
  .monal-trusted--stacked .monal-laurel__num::before,
  .monal-trusted--stacked .monal-laurel__num::after {
    top: 0; width: calc(var(--monal-u) * 9.44); height: calc(var(--monal-u) * 14.39);
  }
  .monal-trusted--stacked .monal-laurel__num sup {
    font-size: calc(var(--monal-u) * 5.38); margin-top: calc(var(--monal-u) * -1.5);
  }
  .monal-trusted--stacked .monal-laurel__label {
    margin-top: calc(var(--monal-u) * -.54);
    font-size: calc(var(--monal-u) * 2.88); line-height: calc(var(--monal-u) * 3.32);
  }

  /* 1:3289 / 1:3280 — four 364.886 x 284.515 cards, pitch 392.89 (gap 28),
     radius TL/BR 60, 1px black outline; the active one fills #1E1916. */
  .monal-trusted--stacked .monal-awards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--monal-u) * 2.8);
    margin: calc(var(--monal-u) * 10.33) 0 0;
  }
  .monal-trusted--stacked .monal-award {
    position: relative; display: block;
    height: calc(var(--monal-u) * 28.45);
    padding: calc(var(--monal-u) * 10.25) calc(var(--monal-u) * 4.588) 0 calc(var(--monal-u) * 5.231);
    border: 1px solid var(--monal-c-black);
    border-radius: calc(var(--monal-u) * 6) 0 calc(var(--monal-u) * 6) 0;
    background: transparent; color: var(--monal-c-ink);
  }
  .monal-trusted--stacked .monal-award__icon {
    position: absolute; top: calc(var(--monal-u) * 4); right: calc(var(--monal-u) * 4);
    width: calc(var(--monal-u) * 1.9); height: calc(var(--monal-u) * 1.9);
    transform: none;
  }
  /* 1:3295 — 30/18 italic serif, with the rule (1:3296) as its underline. */
  .monal-trusted--stacked .monal-award__a {
    display: block; font-style: italic;
    font-size: calc(var(--monal-u) * 3); line-height: calc(var(--monal-u) * 1.8);
    padding-bottom: calc(var(--monal-u) * 4.03);
    border-bottom: 1px solid currentColor;
  }
  /* 1:3294 — 28/32 serif, 21.65 below the rule. */
  .monal-trusted--stacked .monal-award__b {
    display: block; margin-top: calc(var(--monal-u) * 2.17);
    font-family: var(--monal-f-serif); text-transform: uppercase;
    font-size: calc(var(--monal-u) * 2.8); line-height: calc(var(--monal-u) * 3.2);
  }
  .monal-trusted--stacked .monal-award.monal-is-active,
  .monal-trusted--stacked .monal-award:hover {
    background: var(--monal-c-ink); border-color: var(--monal-c-ink); color: #fff;
  }
  .monal-trusted--stacked .monal-award:hover .monal-award__icon { transform: none; }
}