/* ---------------------------------------------------------------------------
   Rich text — heading + WYSIWYG on a surface.

   Not a port. Type sizes measured off the live Elementor CSS
   (post-103326.css #bbd11de/#f63427f, post-102357.css #d18d7fd/#89bfbe9):
   heading DM Serif Display 40px/1.1em w500, body Montserrat 17px;
   50px / 30px heading and 16px body at the two live breakpoints.

   A background image is a real <img> in an absolutely-positioned layer rather
   than a CSS background, so it takes width/height and lazy-loads like any
   other image. The overlay is #11172D at .5, verbatim from live.
   --------------------------------------------------------------------------- */

.mp-rich {
  --mp-rich-pad: var(--mp-section-y);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--mp-section-y);
}

.mp-rich--white { background: #fff; color: var(--mp-rich-textcolor, var(--mp-ink-body)); }
.mp-rich--blue  { background: var(--mp-surface-blue); color: var(--mp-ink); }
.mp-rich--pink  { background: var(--mp-surface-pink); color: var(--mp-ink); }

.mp-rich--white .mp-rich__title { color: var(--mp-rich-tcolor, var(--mp-ink-heading)); }
.mp-rich--blue .mp-rich__title,
.mp-rich--pink .mp-rich__title { color: var(--mp-ink); }

/* An image background always carries the dark overlay, so the copy on top is
   white whatever the surface underneath it is. */
.mp-rich--has-image { color: var(--mp-ink); }
.mp-rich--has-image .mp-rich__title { color: var(--mp-ink); }

/* media layer -------------------------------------------------------------- */
.mp-rich__media { position: absolute; inset: 0; z-index: -2; }
.mp-rich__bg { width: 100%; height: 100%; object-fit: cover; }
.mp-rich__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mp-navy-panel);
  opacity: .5;
}

/* content ------------------------------------------------------------------ */
.mp-rich__inner { position: relative; z-index: 1; }
.mp-rich--center .mp-rich__inner { text-align: center; }
.mp-rich--center .mp-rich__body { margin-inline: auto; }

.mp-rich__title {
  margin: 0 0 var(--mp-rich-tgap, 20px);
  font-family: var(--mp-font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
}

.mp-rich__body {
  max-width: 900px;
  font-family: var(--mp-font-ui);
  font-size: 17px;
  line-height: var(--mp-lh-body);
}
.mp-rich__body h2,
.mp-rich__body h3,
.mp-rich__body h4 { color: inherit; }
.mp-rich__body h3 { font-size: var(--mp-fs-h3); margin-top: 1.5em; }
.mp-rich__body ul,
.mp-rich__body ol { padding-left: 1.3em; }
.mp-rich__body li + li { margin-top: .4em; }
.mp-rich__body a { text-decoration: underline; text-underline-offset: 3px; }
.mp-rich--white .mp-rich__body a { color: var(--mp-blue-ui); }
/* a row whose widget sets its copy colour keeps links in it (live: bold #000) */
.mp-rich--white.mp-rich--inked .mp-rich__body a { color: inherit; }

.mp-rich__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-gap);
  margin-top: 30px;
}
.mp-rich--center .mp-rich__actions { justify-content: center; }

@media (max-width: 1024px) {
  .mp-rich__title { font-size: 50px; }
}
@media (max-width: 767px) {
  .mp-rich__title { font-size: 30px; line-height: 1.2; }
  .mp-rich__body { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
   Full-height image band — the "Hiring Managers" / "Job Seekers" shape.
   Measured on live at 1440x900: min-height 900px, padding 10px, display flex
   with align-items and justify-content both center, body column 1088px,
   heading DM Serif Display 40px, paragraphs 17px centred.
   --------------------------------------------------------------------------- */
.mp-rich--band {
  /* The size comes from live's own min_height (--mp-rich-minh, e.g. 100vh);
     900px is only the fallback for a band that declared none. */
  --mp-rich-pad: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 10px;
}
.mp-rich--band .mp-rich__inner { width: 100%; }
.mp-rich--band .mp-rich__body { max-width: var(--mp-rich-bodyw, 1088px); }
/* live band headings have _margin 0; the gap under them is the copy's own
   leading <p>&nbsp;</p> (24px + 14.4px) */
.mp-rich--band .mp-rich__title { margin-bottom: var(--mp-rich-tgap, 0px); }
.mp-rich--band .mp-rich__body { line-height: 24px; }
.mp-rich--band .mp-rich__body p { margin: 0 0 14.4px; }
@media (max-width: 1024px) { .mp-rich--band .mp-rich__body { line-height: 22.5px; } }
@media (max-width: 767px) { .mp-rich--band .mp-rich__body { line-height: 21px; } }

/* Centred bands: live centres the heading, the copy column and the buttons. */
.mp-rich--center .mp-rich__title { text-align: center; }
.mp-rich--center .mp-rich__body { text-align: center; }


@media (max-width: 767px) {
  .mp-rich--band { padding-block: 40px; }
}

/* A legacy `section` band on an image — measured on live's "Trusted by
   world-class brands": padding 80px top / 112px bottom, heading 45px, copy
   column 656px, all centred. Not full height. */
.mp-rich--has-image:not(.mp-rich--band) {
  --mp-rich-pad: 80px;
  padding-block: 80px 112px;
}
/* live's inner section is 720px with 2em column padding, so the heading wraps
   in the same 656px column as the copy, with no gap under it */
.mp-rich--has-image:not(.mp-rich--band) .mp-rich__title {
  max-width: 656px;
  margin: 0 auto;
  font-size: 45px;
  line-height: 1.2;
}
.mp-rich--has-image:not(.mp-rich--band) .mp-rich__body { max-width: 656px; }

@media (max-width: 767px) {
  .mp-rich--has-image:not(.mp-rich--band) { padding-block: 56px 64px; }
  .mp-rich--has-image:not(.mp-rich--band) .mp-rich__title { font-size: 30px; }
}

/* Live's Elementor `custom_height` applies to the inner container, with the
   section's own padding outside it. */
.mp-rich__inner { min-height: var(--mp-rich-minh, 0px); }
/* The pinned height belongs to the band (border-box, so padding is inside, as
   in Elementor); with it on the inner, the flex centring had nothing to centre
   and band content sat 10px below the top of a 920px band. */
.mp-rich--band { min-height: var(--mp-rich-minh, 900px); }
.mp-rich--band .mp-rich__inner { min-height: 0; }
.mp-rich--has-image:not(.mp-rich--band) .mp-rich__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Heading + CTA pairs stacked inside one pinned band. Measured on live's
   /manufacturing-engineering/: 40px headings, left aligned, the second pair
   starting 241px below the first button. */
.mp-rich__group + .mp-rich__group { margin-top: 128px; }
.mp-rich__group .mp-rich__title { margin: 0 0 18px; }
.mp-rich--center .mp-rich__group { text-align: center; }
@media (max-width: 767px) {
  .mp-rich__group + .mp-rich__group { margin-top: 56px; }
}

/* The staff pages' "Get Connected" row: a hairline rule, then LinkedIn / email
   / phone as round icon buttons. Measured on live: 304px for the whole block. */
.mp-rich__rule {
  width: 60px;
  margin: 22px auto;
  border: 0;
  border-top: 2px solid currentColor;
  opacity: .35;
}
.mp-rich--left .mp-rich__rule { margin-inline: 0; }
.mp-rich__social {
  display: flex;
  gap: 14px;
  justify-content: center;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.mp-rich--left .mp-rich__social { justify-content: flex-start; }
.mp-rich__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  background: currentColor;
  color: inherit;
  transition: transform .18s ease;
}
/* Glyph colour through `color` + fill:currentColor on the paths too: the
   LinkedIn icon's <path> carries its own fill="currentColor", which resolved to
   the chip's white and left an empty white circle. */
.mp-rich__icon svg { width: 20px; height: 20px; color: var(--mp-rich-glyph, var(--mp-blue, #3146CB)); }
.mp-rich__icon svg,
.mp-rich__icon svg path { fill: currentColor; }
.mp-rich__icon:hover, .mp-rich__icon:focus-visible { transform: translateY(-2px); }

/* Live's h6 headings are eyebrow labels, not section titles: small, spaced,
   uppercase, above the real heading. Keeping the .mp-rich__title size for them
   would turn a caption into a 40px headline. */
.mp-rich__title--h6, .mp-rich__title--h5 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--mp-pink, #D02479);
}

/* Plain prose bands (the policy pages and similar) run the FULL container on
   live -- measured 1410-1420px at a 1440 viewport, 16px/24px -- not a reading
   column. Capping them at 900px reflowed every paragraph onto more lines and
   left those five pages 7-32% taller than live. */
/* not kit rows: their inner is the kit container (1500px + padding), and a
   1420px cap here centred the policy copy 10px in from live's x 15 */
.mp-rich--white:not(.mp-rich--has-image):not(.mp-rich--band):not(.mp-rich--kit) .mp-rich__inner {
  /* live's Elementor container on these pages is 1400px + 10px gutters */
  max-width: 1420px;
}
.mp-rich--white:not(.mp-rich--has-image):not(.mp-rich--band) .mp-rich__body { max-width: none; }
/* Not on kit rows: at 0,5,0 this beat the kit's own mobile rule, so policy,
   staff and job pages kept 16px/24px copy on phones where live's kit gives
   14px/21px (+14-23% page height). Kit rows take size and leading from
   .mp-rich--kit below. */
.mp-rich--white:not(.mp-rich--has-image):not(.mp-rich--band):not(.mp-rich--kit) .mp-rich__body {
  font-size: var(--mp-rich-pfs, 16px);
  line-height: 24px;
}
.mp-rich--white:not(.mp-rich--has-image):not(.mp-rich--band):not(.mp-rich--kit) .mp-rich__body p { margin-bottom: 14.4px; }
/* the kit body leading, inherited as a length: 22.5px tablet, 21px mobile */
@media (max-width: 1024px) {
  .mp-rich--white:not(.mp-rich--has-image):not(.mp-rich--band):not(.mp-rich--kit) .mp-rich__body { line-height: 22.5px; }
}
@media (max-width: 767px) {
  .mp-rich--white:not(.mp-rich--has-image):not(.mp-rich--band):not(.mp-rich--kit) .mp-rich__body { line-height: 21px; }
}

/* ---------------------------------------------------------------------------
   Elementor kit presentation (rows with skin "kit").

   The policy, staff and job pages were built from native Elementor widgets
   that take their look from the kit (post 253) and their own settings, not from
   the brand design: Plus Jakarta Sans, 37px/1.2 700 headings in #292929, 16px/24px
   body in #868686, 14.4px paragraph spacing, lists flush at 40px. Per-row values
   (the staff pages' 46px headings with 40px below, the purple band, the 72px
   purple "Get Connected") arrive as --mp-rich-* custom properties.
   --------------------------------------------------------------------------- */
.mp-rich.mp-rich--kit {
  --mp-rich-pad: 0px;
  padding-block: 0;
  background: var(--mp-rich-bg, #fff);
  color: var(--mp-rich-textcolor, var(--e-global-color-primary, #767676));
}
.mp-rich--kit .mp-rich__inner {
  max-width: calc(1500px + 2 * var(--mp-rich-padx, 10px));
  padding-inline: var(--mp-rich-padx, 10px);
  text-align: left;
}
.mp-rich--kit.mp-rich--center .mp-rich__inner { text-align: center; }
.mp-rich--kit .mp-rich__col {
  max-width: var(--mp-rich-innerw, none);
  margin-inline: auto;
  padding: var(--mp-rich-innerpad, 0);
}
.mp-rich--kit .mp-rich__title {
  margin: 0 0 calc(var(--mp-rich-tgap, 0px) + var(--mp-rich-wgap, 20px));
  font-family: var(--mp-rich-tff, var(--mp-font-kit));
  font-size: var(--mp-rich-tfs, 37px);
  font-weight: var(--mp-rich-tfw, 700);
  line-height: var(--mp-rich-tlh, 1.2);
  letter-spacing: var(--mp-rich-tls, -0.5px);
  color: var(--mp-rich-tcolor, var(--e-global-color-secondary, #292929));
  text-transform: none;
}
.mp-rich--kit .mp-rich__title--h1 { font-size: var(--mp-rich-tfs, 50px); letter-spacing: var(--mp-rich-tls, -1px); }
.mp-rich--kit .mp-rich__title--h3 { font-size: var(--mp-rich-tfs, 28px); line-height: var(--mp-rich-tlh, 1.3); letter-spacing: var(--mp-rich-tls, 0); }
.mp-rich--kit .mp-rich__title--h4 { font-size: var(--mp-rich-tfs, 21px); line-height: var(--mp-rich-tlh, 1.3); letter-spacing: var(--mp-rich-tls, 0); }
.mp-rich--kit .mp-rich__title--h5 { font-size: var(--mp-rich-tfs, 16px); line-height: var(--mp-rich-tlh, 1.4); letter-spacing: var(--mp-rich-tls, 0); }
.mp-rich--kit .mp-rich__eyebrow {
  margin: 0 0 var(--mp-rich-wgap, 20px);
  font-family: var(--mp-font-kit);
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--e-global-color-d49ac81, #3146CB);
}
.mp-rich--kit .mp-rich__body {
  max-width: none;
  padding: var(--mp-rich-bodypt, 0px) var(--mp-rich-bodypx, 0px) 0;
  font-family: var(--mp-rich-bff, var(--mp-font-kit));
  font-size: var(--mp-rich-bfs, 16px);
  font-weight: var(--mp-rich-bfw, 400);
  line-height: var(--mp-rich-blh, 1.5);
  color: var(--mp-rich-textcolor, var(--e-global-color-primary, #767676));
  text-align: inherit;
}
.mp-rich--kit .mp-rich__body p { margin: 0 0 14.4px; }
.mp-rich--kit .mp-rich__body p:last-child { margin-bottom: 0; }
/* a paragraph inside a list item keeps Hello's .9rem (live list pitch 38.4px) */
.mp-rich--kit .mp-rich__body li > p:last-child { margin-bottom: 14.4px; }
.mp-rich--kit .mp-rich__body :is(h1, h2, h3, h4, h5, h6) {
  margin: .5rem 0 1rem;
  font-family: var(--mp-font-kit);
  font-weight: 700;
  color: var(--e-global-color-secondary, #292929);
}
.mp-rich--kit .mp-rich__body h2 { font-size: 37px; line-height: 1.2; letter-spacing: -0.5px; }
.mp-rich--kit .mp-rich__body h3 { font-size: 28px; line-height: 1.3; }
.mp-rich--kit .mp-rich__body h4 { font-size: 21px; line-height: 1.3; }
.mp-rich--kit .mp-rich__body h5 { font-size: 16px; line-height: 1.4; }
.mp-rich--kit .mp-rich__body h6 { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.mp-rich--kit .mp-rich__body :is(ul, ol) { margin: 0; padding-left: 40px; }
.mp-rich--kit .mp-rich__body li + li { margin-top: 0; }
/* live's policy <hr>s take 2px and paint nothing */
.mp-rich--kit .mp-rich__body hr { border: 0; border-top: 1px solid transparent; border-bottom: 1px solid transparent; margin: 8px 0; }
.mp-rich--kit .mp-rich__actions { margin-top: var(--mp-rich-wgap, 20px); }
.mp-rich--kit.mp-rich--left .mp-rich__actions { justify-content: flex-start; }

/* divider + icon chips (the staff pages' Get Connected) */
.mp-rich--kit .mp-rich__rule {
  width: var(--mp-rich-divw, 70px);
  margin: var(--mp-rich-wgap, 20px) auto;
  padding-block: 7px;
  border: 0;
  border-top: var(--mp-rich-divh, 1px) solid var(--mp-rich-divc, currentColor);
  opacity: 1;
  box-sizing: content-box;
}
.mp-rich--kit.mp-rich--left .mp-rich__rule { margin-inline: 0; }
.mp-rich--kit .mp-rich__social { gap: 5px; margin-top: var(--mp-rich-wgap, 20px); }
.mp-rich--kit .mp-rich__icon {
  width: auto;
  height: auto;
  padding: var(--mp-rich-iconpad, 1em);
  border-radius: 50%;
  background: var(--mp-rich-chip, var(--e-global-color-c974835, #88218E));
  color: var(--mp-rich-glyph, #fff);
}
.mp-rich--kit .mp-rich__icon svg {
  width: var(--mp-rich-iconsize, 22px);
  height: var(--mp-rich-iconsize, 22px);
  color: var(--mp-rich-glyph, #fff);
}
.mp-rich--kit .mp-rich__icon:hover,
.mp-rich--kit .mp-rich__icon:focus-visible { background: var(--e-global-color-9286677, #253499); }

@media (max-width: 1024px) {
  .mp-rich--kit .mp-rich__title { font-size: min(var(--mp-rich-tfs, 37px), 50px); }
}
/* (mobile kit rules: see "Kit rows on mobile" below) */

/* ---------------------------------------------------------------------------
   Kit rows on mobile (<=767px), from live's 390px captures. The kit's mobile
   type scale applies unless the widget set its own size: body 14px/1.5,
   H1 29px, H2 24px, H3 20px, H4 16px, H5 14px. A custom desktop size with no
   mobile override stays as it is on live (the staff headings' 46px).
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mp-rich--kit .mp-rich__title { --mp-rich-dfs-m: 24px; }
  .mp-rich--kit .mp-rich__title--h1 { --mp-rich-dfs-m: 29px; }
  .mp-rich--kit .mp-rich__title--h3 { --mp-rich-dfs-m: 20px; }
  .mp-rich--kit .mp-rich__title--h4 { --mp-rich-dfs-m: 16px; }
  .mp-rich--kit .mp-rich__title--h5 { --mp-rich-dfs-m: 14px; }
  .mp-rich.mp-rich--kit .mp-rich__title {
    font-size: var(--mp-rich-tfs-m, var(--mp-rich-tfs, var(--mp-rich-dfs-m)));
    line-height: var(--mp-rich-tlh-m, var(--mp-rich-tlh, 1.2));
  }
  .mp-rich.mp-rich--kit .mp-rich__body {
    padding-inline: 0;
    font-size: var(--mp-rich-bfs-m, var(--mp-rich-bfs, 14px));
    line-height: var(--mp-rich-blh, 1.5);
  }
  .mp-rich--kit .mp-rich__body h2 { font-size: 24px; }
  .mp-rich--kit .mp-rich__body h3 { font-size: 20px; }
  .mp-rich--kit .mp-rich__body h4 { font-size: 16px; }
  .mp-rich--kit .mp-rich__body h5 { font-size: 14px; }
  .mp-rich--kit .mp-rich__col { padding: var(--mp-rich-innerpad-m, var(--mp-rich-innerpad, 0)); }
  .mp-rich.mp-rich--kit[style*="--mp-rich-ptm"] { padding-top: calc(var(--mp-rich-ptm) + var(--mp-rich-st, 0px)) !important; }
  .mp-rich.mp-rich--kit[style*="--mp-rich-pbm"] { padding-bottom: var(--mp-rich-pbm) !important; }
}

/* 'Trusted by world-class brands' (the one legacy image section): live's copy
   ends 42px above the bottom of the 50vh inner, so the block is bottom-weighted
   rather than centred (heading 308px, copy 416px below the band top). */
@media (min-width: 768px) {
  .mp-rich--has-image:not(.mp-rich--band) .mp-rich__inner { justify-content: flex-end; padding-bottom: 42px; }
}

/* live text-editors pulled up under their heading by a negative top margin */
.mp-rich__body { margin-top: var(--mp-rich-bodymt, 0px); }

/* about-us 'What We Offer': live's boxed 1600px band with 10+10px padding, the
   copy at its text-editor's own 99.041% (1387px at 1440) */
.mp-rich--band.mp-rich--wide .mp-rich__inner { max-width: 1620px; padding-inline: 20px; }

/* Heading / strap-line / CTA groups (manufacturing-engineering,
   real-estate-development): the band is live's boxed 1600px container with the
   parts inset per nesting level; every offset and gap arrives inline. */
.mp-rich--groups .mp-rich__inner { max-width: 1600px; padding-inline: 0; }
.mp-rich--groups .mp-rich__group .mp-rich__title { margin: 0; line-height: 1.2; }   /* the kit h2's 1.2em unless the widget sets one */
.mp-rich--groups .mp-rich__group .mp-rich__actions { margin-top: 0; }
.mp-rich--groups .mp-rich__group-body { max-width: none; }
@media (max-width: 767px) {
  .mp-rich--groups .mp-rich__inner { padding-inline: 20px; }
  .mp-rich--groups .mp-rich__group > * { margin-left: 0 !important; }
  .mp-rich--groups .mp-rich__group { text-align: center; }
  .mp-rich--groups .mp-rich__group .mp-rich__actions { justify-content: center; }
}

/* a brand row in a bare Elementor container keeps its 10px side padding */
.mp-rich--padx > .mp-rich__inner { padding-inline: var(--mp-rich-padx); }

/* the kit body size, so em paddings (the staff copy's 2em column) resolve as on
   live: 32px desktop, 30px tablet, 28px on phones */
.mp-rich.mp-rich--kit { font-size: 16px; }
@media (max-width: 1024px) { .mp-rich.mp-rich--kit { font-size: 15px; } }
@media (max-width: 767px) { .mp-rich.mp-rich--kit { font-size: 14px; } }

/* ---------------------------------------------------------------------------
   Kit rows on tablets (768-1024px): the widget's tablet size, else its desktop
   size, else the kit's tablet scale (H1 29, H2 24, H3 20, H4 16, H5 15,
   body 15px/1.5); the container's tablet padding where it sets one.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .mp-rich--kit .mp-rich__title { --mp-rich-dfs-t: 24px; }
  .mp-rich--kit .mp-rich__title--h1 { --mp-rich-dfs-t: 29px; }
  .mp-rich--kit .mp-rich__title--h3 { --mp-rich-dfs-t: 20px; }
  .mp-rich--kit .mp-rich__title--h4 { --mp-rich-dfs-t: 16px; }
  .mp-rich--kit .mp-rich__title--h5 { --mp-rich-dfs-t: 15px; }
  .mp-rich.mp-rich--kit .mp-rich__title {
    font-size: var(--mp-rich-tfs-t, var(--mp-rich-tfs, var(--mp-rich-dfs-t)));
    line-height: var(--mp-rich-tlh-t, var(--mp-rich-tlh, 1.2));
  }
  .mp-rich.mp-rich--kit .mp-rich__body { font-size: var(--mp-rich-bfs-t, var(--mp-rich-bfs, 15px)); }
  .mp-rich--kit .mp-rich__body h2 { font-size: 24px; }
  .mp-rich--kit .mp-rich__body h3 { font-size: 20px; }
  .mp-rich--kit .mp-rich__body h4 { font-size: 16px; }
  .mp-rich--kit .mp-rich__body h5 { font-size: 15px; }
  .mp-rich.mp-rich--kit[style*="--mp-rich-ptt"] { padding-top: calc(var(--mp-rich-ptt) + var(--mp-rich-st, 0px)) !important; }
  .mp-rich.mp-rich--kit[style*="--mp-rich-pbt"] { padding-bottom: var(--mp-rich-pbt) !important; }
}