.ui-dialog .ui-dialog-titlebar {
  background-color: var(--mt-color-tint);
  border-color: var(--mt-color-tint);
}

.site-branding__logo img {
  height: 80px; 
}

.path-frontpage .site-branding__logo img, #subfooter .site-branding__logo, #block-mt-business-baseplus-sitebranding-2 .site-branding__logo {
  filter: brightness(0) invert(1);
}

.content-top-highlighted__section {
  padding: 40px 0 40px;
}

.tp-caption__title {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);    /* 27–36px, theme: 40px */
}

.owl-carousel .owl-item img {
    background-color: #fff;
}

@media (min-width: 1200px) {
#block-mt-business-baseplus-about .mt-text-content {
    padding-right: 65px;
}
}

/*transparent header mobile*/

@media (max-width: 991px) {
  .transparent-header-active:not(.onscroll) .header-container.js-transparent-header {
    left: 0;
    right: 0;
  }
  .header-container.js-transparent-header {
    position: absolute;
    width: 100%;
    z-index: 22;
  }
  .header {
    background-color: rgba(255, 255, 255, 0);
  }
  .path-frontpage .header-container .region--bright-background .sf-accordion-toggle.sf-style-none a {
    color: #fff;
}
}

.internal-banner-container {
  background-image: url(/sites/default/files/banner2_10.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#hero-top {
    background: rgba(0,0,0,0.5);
}

.system-messages {
  background-color: #164471;
}

.breadcrumb {
  padding: 14px 0 9px !important;
}

.block-system-breadcrumb-block .breadcrumb__items {
  margin: auto;
}

.block-system-breadcrumb-block .breadcrumb__items a {
  color: #fff;
}

.internal-banner-container .page-title {
  margin-bottom: 0;
  text-align: center;
}


/*fullwidth images adjustments

.container-fluid .field--mt-bg-image-block {
  margin: 0 -15px !important;
}

.container-fluid .view-mt-slideshow-full-width, .container-fluid .view-mt-slideshow-fullscreen {
  margin-left: -15px !important;
  margin-right: -15px !important;
}*/

 .container-fluid .field--name-field-mt-main-slideshow-slide {
    margin-left: 0rem;
    margin-right: 0rem;
  }

/* ==========================================================================
   M4 Digital Group – Base+ adapted to the look of m4digitalgroup.com
   css/theme/local-theme.css (last-loaded local file, weight 150).
   All colours are variables from css/theme/color-blue.css.

    1. Font                     9.  Cards
    2. Text and headings        10. Icon features and service icons
    3. Page background          11. Highlight figures
    4. Header and main menu     12. Forms
    5. Page title banner        13. Footer
       and breadcrumb band      14. Scroll-to-top button
    6. Navy sections            15. Building blocks for the new structure
    7. Buttons                      (.m4-lead, .m4-process, .m4-logo-grid,
    8. Links and "Read more"         .m4-cert-strip, .m4-icon-mail)
   ========================================================================== */

/* 1. Font – Barlow, as on the live site.
   Select "Barlow" for all four font settings (Appearance > Base+ > Font) so
   the theme loads it; the variables below then apply it everywhere. */
:root body {
  --mt-pff: var(--mt-ff-49);
  --mt-hff: var(--mt-ff-49);
  --mt-sff: var(--mt-ff-49);
  --mt-slff: var(--mt-ff-49);
}

/* 2. Text and headings */
body {
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--m4-text);
}
p {
  line-height: 1.85;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--mt-color-high-contrast);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
h3 { font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.5rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }

/* 3. Page background – light grey behind everything, white for header,
   cards and white sections. */
body {
  background-color: var(--m4-page-bg);
}

/* 4. Header and main menu */
.header-container .header.region--bright-background,
.header-container .header.region--default-background {
  background-color: transparent !important;
}
@media (min-width: 992px) {
  .onscroll.fixed-header-enabled--scroll-up.headroom--scroll-up .header.js-fixed,
  .onscroll.fixed-header-enabled--scroll .header.js-fixed {
    border-bottom-color: transparent;
    box-shadow: var(--m4-shadow-header);
  }
}
.header-container ul.menu > li > a,
.header-container ul.menu > li > span {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--m4-text);
}
.header-container ul.menu > li > a:hover,
.header-container ul.menu > li > a:focus,
.header-container ul.menu > li.sfHover > a,
.header-container ul.menu > li > a.is-active {
  color: var(--m4-orange);
}
.header-container .sf-menu ul li a,
.header-container .sf-menu ul li > span {
  font-size: 1rem;
  font-weight: 400;
}
.header-container .sf-menu.menu:not(.sf-accordion) ul {
  border-color: var(--m4-line);
  border-top: 2px solid var(--m4-orange);
}

/* "Get in Touch" (last menu item with the theme's call-to-action option):
   white pill with an orange outline and an envelope icon. */
.header-container .menu.cta-active > li:last-child > a,
.header-container .menu.cta-active > li:last-child > a.is-active {
  background-color: transparent;
  border: 2px solid var(--m4-orange);
  border-radius: 50px;
  color: var(--m4-text);
  padding: 16px 32px 16px 62px;
  position: relative;
}
.header-container .menu.cta-active > li:last-child > a::after {
  content: "";
  position: absolute;
  left: 32px;
  top: 50%;
  width: 20px;
  height: 16px;
  margin-top: -8px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M2 1h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm-1 1 11 8 11-8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M2 1h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm-1 1 11 8 11-8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.header-container .menu.cta-active > li:last-child > a:hover,
.header-container .menu.cta-active > li:last-child > a:focus,
.header-container .menu.cta-active > li:last-child > a.is-active:hover {
  background-color: var(--m4-orange);
  border-color: var(--m4-orange);
  color: var(--m4-white);
}
.header-container .menu.cta-active > li:last-child > a:hover:before,
.header-container .menu.cta-active > li:last-child > a:focus:before {
  opacity: 0;
}
/* transparent header over the homepage video: white text, orange outline */
@media (min-width: 992px) {
  .inverted-header-enabled:not(.onscroll) .js-transparent-header .header-container .menu.cta-active > li:last-child > a,
  .inverted-header-enabled:not(.onscroll) .js-transparent-header .menu.cta-active > li:last-child > a {
    border-color: var(--m4-orange);
    color: var(--m4-white);
  }
  .inverted-header-enabled:not(.onscroll) .js-transparent-header ul.menu > li > a:hover {
    color: var(--m4-orange);
  }
}

/* 5. Page title banner and breadcrumb band
   Applies to every banner region that holds the Page title block: network
   photo with a navy veil, large white title, and the breadcrumb in a
   full-width navy band underneath (whatever the block order).
   Save the live site's title photo as images/m4-page-title.jpg in the theme;
   until then a navy gradient is shown. */
.banner:has(.block-page-title-block) {
  padding: 0;
  overflow-x: clip;
  background-color: var(--m4-navy);
  background-image: var(--m4-title-overlay), url("../../images/m4-page-title.jpg"), var(--m4-title-fallback);
  background-size: cover;
  background-position: center center;
}
.banner:has(.block-page-title-block) .banner__section {
  display: flex;
  flex-direction: column;
}
.banner:has(.block-page-title-block) .block-page-title-block {
  order: 1;
}
.banner:has(.block-page-title-block) .block-system-breadcrumb-block {
  order: 2;
}
.banner .block-page-title-block h1.page-title,
.banner__section .block:first-child:last-child h1.page-title,
.banner__section .block:last-child h1.page-title {
  color: var(--m4-white);
  font-size: clamp(2.5rem, 1.25rem + 4.2vw, 5.5rem);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  margin: 0;
  padding: 36px 0 30px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.banner .block-system-breadcrumb-block {
  position: relative;
  padding: 20px 0;
  --mt-color-high-contrast: var(--m4-white);
}
.banner .block-system-breadcrumb-block::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--m4-band-gradient);
  z-index: -1;
}
.banner .block-system-breadcrumb-block .breadcrumb,
.banner__section .block:first-child .breadcrumb,
.banner__section .block:first-child:last-child .breadcrumb {
  padding: 0;
  margin: 0;
  text-align: center;
}
.banner .block-system-breadcrumb-block .breadcrumb__items {
  padding: 0;
}
.banner .block-system-breadcrumb-block .breadcrumb__item {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--m4-white);
}
.banner .block-system-breadcrumb-block .breadcrumb__item a {
  color: var(--m4-text-on-dark-soft);
  text-decoration: none;
}
.banner .block-system-breadcrumb-block .breadcrumb__item a:hover,
.banner .block-system-breadcrumb-block .breadcrumb__item a:focus {
  color: var(--m4-white);
}
.banner .block-system-breadcrumb-block .breadcrumb__item-separator {
  color: var(--m4-text-on-dark-soft);
  margin: 0 8px 0 4px;
}

/* 6. Navy sections – page regions, landing-page sections and blocks set to
   "dark colored" get the live site's navy gradient (lighter in the centre).
   (Keep each selector on one line: a space would change its meaning.) */
:is(.hero-top, .hero, .content-top, .content-top-highlighted, .main-content, .content-bottom, .content-bottom-highlighted, .featured-top, .featured, .featured-bottom, .sub-featured, .highlighted, .highlighted-top, .footer-top, .footer, .footer-bottom, .subfooter-top, .subfooter, .layout, .block).region--dark-colored-background {
  background-image: var(--m4-band-gradient);
}

/* 7. Buttons – red-to-orange pill, white text (as on the live site).
   The outline variant (class mt-button--outline) is the orange-bordered
   pill used for "Get in Touch" and the footer "Contact". */
a.mt-button,
.mt-button > a,
button.mt-button,
input[type='submit'],
input[type='reset'],
input[type='button'],
a.btn {
  background-color: var(--m4-red);
  background-image: var(--m4-button-gradient);
  border: 0;
  border-radius: 50px;
  color: var(--m4-white);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  padding: 18px 38px;
}
a.mt-button:hover,
a.mt-button:focus,
.mt-button > a:hover,
.mt-button > a:focus,
button.mt-button:hover,
input[type='submit']:hover,
input[type='reset']:hover,
input[type='button']:hover,
a.btn:hover {
  background-color: var(--m4-red);
  background-image: var(--m4-button-gradient-hover);
  color: var(--m4-white);
  box-shadow: var(--m4-shadow-button);
  transform: translateY(-1px);
}
a.mt-button:before,
.mt-button > a:before,
button.mt-button:before {
  background-color: transparent;
}
a.mt-button:focus-visible,
.mt-button > a:focus-visible,
button.mt-button:focus-visible,
input[type='submit']:focus-visible {
  outline: 2px solid var(--m4-navy);
  outline-offset: 3px;
}

a.mt-button.mt-button--outline,
.mt-button.mt-button--outline > a,
input[type='submit'].mt-button--outline,
input[type='button'].mt-button--outline,
.region--default-background a.mt-button.mt-button--outline,
.region--bright-background a.mt-button.mt-button--outline,
.region--tint-background a.mt-button.mt-button--outline {
  background: transparent;
  border: 2px solid var(--m4-orange);
  color: var(--m4-text);
  padding: 15px 32px;
}
:is(.region--dark-colored-background, .region--shade-background, .region--dark-background, .region--colored-background) a.mt-button.mt-button--outline,
:is(.region--dark-colored-background, .region--shade-background, .region--dark-background, .region--colored-background) .mt-button.mt-button--outline > a {
  color: var(--m4-white);
  border-color: var(--m4-orange);
}
a.mt-button.mt-button--outline:hover,
a.mt-button.mt-button--outline:focus,
.mt-button.mt-button--outline > a:hover,
.region--default-background a.mt-button.mt-button--outline:hover,
.region--bright-background a.mt-button.mt-button--outline:hover,
.region--tint-background a.mt-button.mt-button--outline:hover,
:is(.region--dark-colored-background, .region--shade-background, .region--dark-background) a.mt-button.mt-button--outline:hover {
  background: var(--m4-orange);
  border-color: var(--m4-orange);
  color: var(--m4-white);
  box-shadow: none;
}

/* 8. Links and "Read more" */
a {
  text-underline-offset: 0.18em;
}
.more-link a,
a.more-link,
.node__links a,
.m4-read-more {
  color: var(--m4-orange);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.more-link a::after,
a.more-link::after,
.m4-read-more::after {
  content: "\203A";
  display: inline-block;
  margin-left: 0.45em;
  font-weight: 700;
  transition: transform 0.2s ease-in-out;
}
.more-link a:hover::after,
a.more-link:hover::after,
.m4-read-more:hover::after {
  transform: translateX(3px);
}

/* 9. Cards – white, small radius, the soft drop shadow of the live
   site's client logo tiles. */
.featured-linked-text-tile,
.view-pricing-tables .pricing-table,
.node--view-mode-mt-featured-teaser--card,
.node--view-mode-mt-featured-teaser-2 .mt-featured-teaser-wrapper,
.node--view-mode-mt-teaser-tile-image,
.node--view-mode-card.region--default-background,
.node--type-mt-post.node--view-mode-mt-teaser-compact.region--default-background,
.node--view-mode-mt-teaser-tile.region--default-background,
.node--type-mt-post.node--view-mode-mt-compact-list-item.region--default-background,
.node--view-mode-mt-teaser-tile-text-2 .region--default-background,
.node--type-mt-post.node--view-mode-mt-teaser-tile-text.region--default-background,
.node--type-mt-post.node--view-mode-mt-teaser-tile-video.region--default-background,
.collapse-group,
.paragraph--type--mt-icon-features.region--default-background {
  box-shadow: var(--m4-shadow-card);
}
.featured-linked-text-tile:not(:is(.region--dark-background, .region--dark-colored-background, .region--colored-background, .region--shade-background) *) {
  background-color: var(--m4-white);
}
.featured-linked-text-tile,
.paragraph--type--mt-icon-features.region--default-background {
  border-radius: 6px;
}
.featured-linked-text-tile:hover,
.paragraph--type--mt-icon-features:hover {
  box-shadow: var(--m4-shadow-card-hover);
  transform: translateY(-3px);
}
.featured-linked-text-tile .featured-linked-text-tile__title {
  font-weight: 600;
}

/* 10. Icon features and service icons – white icon in a navy square,
   titles stay navy on hover (the theme would turn the card orange). */
.feature__icon,
.paragraph--type--mt-icon-features:hover .feature__icon {
  color: var(--m4-white);
}
.paragraph--type--mt-icon-features .feature__icon .fontawesome-icon,
.paragraph--type--mt-icon-features:hover .feature__icon .fontawesome-icon,
.m4-icon-square {
  background-color: var(--m4-navy);
  color: var(--m4-white);
  border-radius: 4px;
}
.paragraph--view-mode--mt-tile .feature__icon .fontawesome-icon {
  width: 62px;
  min-height: 62px;
}
.m4-icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  font-size: 30px;
}
.paragraph--type--mt-icon-features:hover {
  background-color: var(--m4-white);
  color: var(--m4-text);
}
.paragraph--type--mt-icon-features:hover .feature__title,
.paragraph--type--mt-icon-features:hover .feature__title a {
  color: var(--mt-color-high-contrast);
}
.paragraph--type--mt-icon-features:hover a,
.paragraph--type--mt-icon-features:hover .feature__link a {
  color: var(--m4-orange);
}

/* 11. Highlight figures (e.g. "2013 Founded", "200+ years' experience") */
.highlight-figures-wrapper.region--accent-background {
  background-color: var(--m4-white);
  box-shadow: var(--m4-shadow-card);
}
.mt-highlight-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mt-highlight-figure .highlight-figure__figure {
  order: -1;
  font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--m4-navy);
}
.mt-highlight-figure .highlight-figure__label {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--m4-text-light);
  max-width: 200px;
}
.highlight-figures-wrapper .row > .field__item:before {
  background-color: var(--m4-line);
}

/* 12. Forms – tall white fields with a light border, as on "Get in touch" */
.form-control,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='password'],
input[type='search'],
select,
textarea {
  background-color: var(--m4-white);
  border: 1px solid var(--mt-form-border);
  border-radius: 0;
  font-size: 1.125rem;
  padding: 18px 18px;
  min-height: 64px;
}
.form-control:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='tel']:focus,
input[type='search']:focus,
select:focus,
textarea:focus {
  border-color: var(--mt-form-border-focus);
  box-shadow: 0 0 0 3px rgba(var(--m4-navy-value), 0.15);
  outline: none;
}
fieldset {
  border-color: var(--m4-line);
}

/* 13. Footer – navy gradient (section 6), white text, orange hover,
   thin divider above the bottom row. */
.footer__section h4.title,
.footer__section h2.title,
.footer__section nav > h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--m4-white);
}
:is(.footer-top, .footer, .footer-bottom, .subfooter-top, .subfooter).region--dark-colored-background a:not(.mt-button) {
  color: var(--m4-white);
  text-decoration: none;
}
:is(.footer-top, .footer, .footer-bottom, .subfooter-top, .subfooter).region--dark-colored-background a:not(.mt-button):hover,
:is(.footer-top, .footer, .footer-bottom, .subfooter-top, .subfooter).region--dark-colored-background a:not(.mt-button):focus {
  color: var(--m4-orange);
}
:is(.footer-bottom, .subfooter).region--dark-colored-background {
  border-top: 1px solid var(--m4-line-on-dark);
}
:is(.footer-top, .footer, .footer-bottom, .subfooter-top, .subfooter) ul.menu li a {
  font-size: 16px;
}

/* 14. Scroll-to-top button – round red/orange button */
.to-top {
  width: 68px;
  height: 68px;
  right: 36px;
  bottom: 36px;
  border: 0;
  border-radius: 50%;
  background-color: var(--m4-red);
  background-image: var(--m4-button-gradient);
  color: var(--m4-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: var(--m4-shadow-button);
}
.to-top:hover {
  background-color: var(--m4-red);
  background-image: var(--m4-button-gradient-hover);
}
@media (max-width: 991px) {
  .to-top {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 16px;
    font-size: 20px;
  }
}

/* 15. Building blocks for the new page structure
   Use them in a text field's source view or a block/paragraph class field. */

/* Lead paragraph: the large navy intro text of the live inner pages.
   <p class="m4-lead">…</p> */
.m4-lead {
  color: var(--m4-navy);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  line-height: 1.4;
  font-weight: 400;
  margin-bottom: 1.25em;
}
:is(.region--dark-colored-background, .region--shade-background, .region--dark-background) .m4-lead {
  color: var(--m4-white);
}

/* Process chevrons – replaces the "Consult / Design / Implement / Run"
   image with real, editable text.
   <ol class="m4-process">
     <li><strong>Consult</strong><span>Requirements understanding &amp; assessment</span></li>
     <li><strong>Design</strong><span>Architecture, integration design &amp; target model</span></li>
     <li><strong>Implement</strong><span>Flexible, scalable experts or teams</span></li>
     <li><strong>Run</strong><span>Operational excellence for secure, high-quality outcomes</span></li>
   </ol> */
.m4-process {
  counter-reset: m4-step;
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.m4-process > li {
  counter-increment: m4-step;
  margin: 0;
  padding: 0;
  text-align: center;
}
.m4-process > li::before {
  content: counter(m4-step, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  margin-bottom: 14px;
  color: var(--m4-white);
  font-size: 2.25rem;
  font-weight: 600;
  background-color: var(--m4-navy);
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%);
}
.m4-process > li:nth-child(2)::before { background-color: var(--m4-blue); }
.m4-process > li:nth-child(3)::before { background-color: var(--m4-grey-mid); }
.m4-process > li:nth-child(4)::before { background-color: var(--m4-grey-dark); }
.m4-process > li strong {
  display: block;
  color: var(--m4-blue);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
}
.m4-process > li span {
  display: block;
  margin-top: 0.35rem;
  color: var(--m4-text-light);
  font-size: 1rem;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .m4-process {
    grid-template-columns: 1fr 1fr;
    row-gap: 1.5rem;
  }
}

/* Logo grid – client logos as white tiles (Our Clients page, homepage strip).
   <ul class="m4-logo-grid"><li><img src="…" alt="Home Office"></li>…</ul> */
.m4-logo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 30px;
}
.m4-logo-grid > li {
  margin: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--m4-white);
  box-shadow: var(--m4-shadow-card);
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.m4-logo-grid > li:hover {
  box-shadow: var(--m4-shadow-card-hover);
  transform: translateY(-3px);
}
.m4-logo-grid img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.m4-logo-grid--compact > li {
  aspect-ratio: 16 / 9;
}

/* Certification strip – the badges row of the footer.
   <div class="m4-cert-strip"><img …><img …>…</div> */
.m4-cert-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 36px;
}
.m4-cert-strip img {
  max-height: 88px;
  width: auto;
}
@media (max-width: 767px) {
  .m4-cert-strip {
    justify-content: center;
  }
  .m4-cert-strip img {
    max-height: 64px;
  }
}

/* Envelope icon in front of a button or link text ("Contact" in the footer).
   <a class="mt-button mt-button--outline m4-icon-mail" href="/get-in-touch">Contact</a> */
.m4-icon-mail,
a.mt-button.m4-icon-mail {
  display: inline-flex;
  align-items: center;
}
.m4-icon-mail::after {
  content: "";
  display: inline-block;
  order: -1;
  flex: none;
  width: 20px;
  height: 16px;
  margin-right: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M2 1h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm-1 1 11 8 11-8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M2 1h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm-1 1 11 8 11-8'/%3E%3C/svg%3E") center / contain no-repeat;
}