@import url("https://fonts.cdnfonts.com/css/avenir");

/*
 * GENERATED by tools/build-partials.js from styles/ (see styles/manifest.txt). Do not edit:
 * change the files under styles/ and re-run the build. Linked from every page.
 */

/* ==== styles/base.css ==== */
/* Base text: site font, body, and the small eyebrow label above section headings. */

body {
  font-family: Avenir-Book, "Avenir Book", Arial, sans-serif;
  background-color: #f9f9f9;
}

/* Small label above a section heading ("our culture", "open positions", …). */
.section-eyebrow {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
}

/* 2.4.11 Focus not obscured: when focus or an in-page link scrolls something into view, stop
   short of the sticky header (80px, 64px on small screens) plus a little breathing room. */
html {
  scroll-padding-top: 96px;
}

@media only screen and (max-width: 999px) {
  html {
    scroll-padding-top: 80px;
  }
}

/* ==== styles/components/footer.css ==== */
/* ---- Footer call-to-action band: "If this excites you, we'd love to meet up!".
   The gradient is on the band itself (not a separate layer behind the text), so contrast
   checkers measure the real pair. Black on the brand gradient (#7cc78e -> #4ec2c5): 10:1 or
   better; white was 2:1. */

.mq-footer-cta {
  padding: 6vw 5%;
  text-align: center;
  color: #000000;
  background-image: linear-gradient(133deg, #7cc78e 0%, #4ec2c5 100%);
}

.mq-footer-cta .mq-footer-cta__title {
  margin: 0 0 60px;
  color: #000000;
}

.mq-footer-cta .mq-footer-cta__link {
  display: inline-block;
  padding-bottom: 2px;
  font-family: Avenir-Book;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;
  border-bottom: 2px solid #000000;
}

.mq-footer-cta .mq-footer-cta__link:hover {
  color: #000000;
  border-bottom-width: 4px;
  padding-bottom: 0;
}

@media only screen and (max-width: 1000px) {
  .mq-footer-cta {
    padding: 48px 5%;
  }
}

@media only screen and (max-width: 690px) {
  .mq-footer-cta {
    padding: 24px 5%;
  }

  .mq-footer-cta .mq-footer-cta__title {
    margin-bottom: 40px;
  }
}

/* ---- Footer bands (partials/footer.html): stock ticker, disclosure, links (home page) and
   copyright. Each band runs edge to edge and carries its own background, so contrast checkers
   measure the real colours. */
.mq-footer-band {
  box-sizing: border-box;
}

#footDisc {
  padding: 4vw 5vw;
  background-color: #f2f2f2;
}

#footDisc p {
  margin: 0;
  padding: 0;
  font-family: Avenir-Book;
  font-size: 13px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 1px;
  text-align: left;
  color: #000000;
}

#footLinks {
  padding: 56px 5vw;
}

/* Home page: registration details and two link lists, side by side on wide screens. */
.mq-footer-links {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  font-family: Avenir-Book, "Avenir Book", Arial, sans-serif;
  gap: 40px 56px;
  max-width: 1126px;
  margin: 0 auto;
}

.mq-footer .mq-footer-links h2 {
  margin: 0 0 12px;
  font-family: Avenir-Medium;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: #000000;
}

.mq-footer-links p {
  margin: 0 0 28px;
  padding: 0;
  font-size: 15px;
  line-height: 26px;
  color: #333333;
}

.mq-footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mq-footer-links li {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 22px;
}

/* #1b6f6b on white: 5.9:1. */
.mq-footer-links a {
  color: #1b6f6b;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.mq-footer-links a:hover {
  color: #0f4744;
}

#footCredits {
  padding: 2vw 5vw;
  text-align: center;
}

#footCredits p {
  margin: 0;
  padding: 0;
  font-family: Avenir-Book;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000000;
}

/* Investor-charter and useful-link pages: copyright bar only, on grey. */
.before-footer.mq-footer--minimal {
  margin-top: -5rem;
}

.mq-footer--minimal #footCredits {
  margin-top: 2rem;
  padding-top: 22.9px;
  padding-bottom: 22.9px;
  background-color: #f2f2f2;
}

/* Home page: risk statement under the footer. */
.mq-footer-risk {
  padding: 1em 5vw 0;
  font-family: Avenir-Book;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  color: #000000;
  background-color: #f2f2f2;
}

.mq-footer-risk p {
  padding-bottom: 1rem !important;
}

@media only screen and (max-width: 1000px) {
  .mq-footer-links {
    grid-template-columns: 1fr 1fr;
  }

  .mq-footer-links__group:first-child {
    grid-column: 1 / -1;
  }

  #footDisc p {
    line-height: 27px;
    letter-spacing: 0.9px;
  }
}

@media only screen and (max-width: 690px) {
  .mq-footer-links {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  #footLinks {
    padding-left: 20px;
    padding-right: 20px;
  }

  #footLinks,
  #footCredits,
  .mq-footer--minimal #footCredits {
    padding-top: 25.6px;
    padding-bottom: 25.6px;
  }
}

/* ==== styles/components/header.css ==== */
/* ---- Header (partials/header.html). A plain sticky bar: logo centred on wide screens and
   left-aligned on small ones, Search and Menu on the right. It does not use the theme's header,
   so there are no logo swaps, transparency states or shrink-on-scroll animations. */
.mq-header {
  position: sticky;
  top: 0;
  z-index: 100000;
  background-color: #ffffff;
  border-bottom: 1px solid #e6e6e6;
}

.mq-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 80px;
  padding: 0 28px;
}

.mq-header__logo {
  grid-column: 2;
  display: block;
  line-height: 0;
}

.mq-header__logo img {
  display: block;
  width: auto;
  height: 56px;
}

.mq-header__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Search and Menu share one button style. */
.mq-header .mq-header__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  font-family: Avenir-Medium, "Avenir Book", Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  color: #000000;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.mq-header .mq-header__button:hover .mq-header__label {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mq-header__burger {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.mq-header__burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.mq-header__burger span:nth-child(1) { top: 0; }
.mq-header__burger span:nth-child(2) { top: 7px; }
.mq-header__burger span:nth-child(3) { top: 14px; }

/* Menu open: the three lines become an X. */
.mq-menu-toggle[aria-expanded="true"] .mq-header__burger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.mq-menu-toggle[aria-expanded="true"] .mq-header__burger span:nth-child(2) { opacity: 0; }
.mq-menu-toggle[aria-expanded="true"] .mq-header__burger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

@media only screen and (max-width: 999px) {
  .mq-header__inner {
    grid-template-columns: auto 1fr;
    height: 64px;
    padding: 0 18px;
  }

  .mq-header__logo {
    grid-column: 1;
  }

  .mq-header__logo img {
    height: 40px;
  }

  .mq-header__actions {
    grid-column: 2;
    gap: 8px;
  }

  /* Icons only; both buttons keep their accessible names. */
  .mq-header .mq-header__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mq-header .mq-header__button {
    justify-content: center;
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mq-header__burger span {
    transition: none;
  }
}

/* ==== styles/components/page-hero.css ==== */
/* ---- Page hero (partials/page-hero.html): photo banner with the page title. The dark tint and
   the photo are one background on the same element, so white text always sits on at least a
   55% black overlay. */

/* The theme pads the content area to clear its old fixed header; the new header is sticky and
   takes up its own space, so a page that starts with a hero needs no gap. */
html body .container-wrap:has(> .mq-hero) {
  padding-top: 0;
}

.mq-hero {
  box-sizing: border-box;
  padding: 120px 5vw 100px;
  color: #ffffff;
  background-color: #222222;
  background-position: center;
  background-size: cover;
}

.mq-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.mq-hero__eyebrow {
  margin: 0 0 8px;
  padding: 0;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
}

.mq-hero .mq-hero__title {
  margin: 0;
  font-family: Avenir-Medium;
  font-size: 64px;
  line-height: 1.1;
  color: #ffffff;
}

@media only screen and (max-width: 690px) {
  .mq-hero {
    padding: 64px 20px 56px;
  }

  .mq-hero .mq-hero__title {
    font-size: 40px;
  }
}

/* ==== styles/components/post-list.css ==== */
/* ---- Post cards (partials/post-list.html, data from data/posts.json). The title link is
   stretched over the whole card, so each card is a single link; the author link sits above it. */
.mq-blog {
  box-sizing: border-box;
  max-width: 1248px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.mq-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mq-post-grid .mq-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mq-post-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.mq-post-card:focus-within {
  outline: 3px solid #1b6f6b;
  outline-offset: 2px;
}

.mq-post-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.mq-post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 24px 24px;
}

.mq-post-grid .mq-post-card__title {
  margin: 0 0 10px;
  font-family: Avenir-Medium;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}

.mq-post-grid .mq-post-card__title a {
  color: #000000;
  text-decoration: none;
}

/* Stretch the title link over the card. */
.mq-post-grid .mq-post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.mq-post-grid .mq-post-card__title a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.mq-post-card:hover .mq-post-card__title a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mq-post-grid .mq-post-card__excerpt {
  flex: 1;
  margin: 0 0 20px;
  padding: 0;
  font-size: 15px;
  line-height: 24px;
  color: #333333;
}

.mq-post-grid .mq-post-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  color: #595959;
}

.mq-post-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.mq-post-grid .mq-post-card__meta a {
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 690px) {
  .mq-blog {
    padding: 40px 20px 64px;
  }

  .mq-post-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mq-post-grid .mq-post-card {
    transition: none;
  }

  .mq-post-card:hover {
    transform: none;
  }
}

/* ==== styles/components/post.css ==== */
/* ---- Blog post pages: post-header, article, post-share and post-next partials. */
.mq-hero--post {
  padding-top: 140px;
  padding-bottom: 120px;
  text-align: center;
}

.mq-hero--post .mq-hero__inner {
  max-width: 900px;
}

.mq-hero--post .mq-hero__eyebrow a {
  display: inline-block;
  padding: 4px 12px;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

.mq-hero--post .mq-hero__eyebrow a:hover {
  color: #000000;
  background-color: #ffffff;
}

.mq-hero .mq-hero__meta {
  margin: 20px 0 0;
  padding: 0;
  font-size: 16px;
  color: #ffffff;
}

.mq-hero .mq-hero__meta a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Comfortable reading width and size for the post text. */
.mq-article {
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 24px;
}

.mq-article p {
  margin: 0 0 24px;
  padding: 0;
  font-size: 18px;
  line-height: 1.7;
  color: #222222;
}

.mq-article blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid #1b6f6b;
}

.mq-article blockquote p {
  font-style: italic;
}

.mq-post-share {
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  border-top: 1px solid #e6e6e6;
}

.mq-post-share .mq-post-share__title {
  margin: 0 0 12px;
  font-family: Avenir-Medium;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000000;
}

.mq-post-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mq-post-share__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* White on the darker brand teal: 5.9:1. */
.mq-post-share__list a {
  display: inline-block;
  padding: 8px 16px;
  font-size: 15px;
  line-height: 1.4;
  color: #ffffff !important;
  text-decoration: none !important;
  background-color: #1b6f6b;
  border-radius: 4px;
}

.mq-post-share__list a:hover {
  background-color: #0f4744;
}

/* Next post: one link over a photo band; the tint and photo are one background. */
.mq-post-next {
  box-sizing: border-box;
  background-color: #222222;
  background-position: center;
  background-size: cover;
}

.mq-post-next .mq-post-next__link {
  display: block;
  padding: 96px 5vw;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
}

.mq-post-next__label {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mq-post-next__title {
  display: block;
  font-family: Avenir-Medium;
  font-size: 48px;
  line-height: 1.2;
}

.mq-post-next__link:hover .mq-post-next__title {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.mq-post-next .mq-post-next__link:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: -8px !important;
  box-shadow: none !important;
}

@media only screen and (max-width: 690px) {
  .mq-hero--post {
    padding-top: 80px;
    padding-bottom: 64px;
  }

  .mq-article {
    padding-top: 40px;
  }

  .mq-article p {
    font-size: 17px;
  }

  .mq-post-next .mq-post-next__link {
    padding: 64px 20px;
  }

  .mq-post-next__title {
    font-size: 32px;
  }
}

/* ==== styles/components/stats.css ==== */
/* ---- Key figures (partials/stats.html), on Home, Who we are and Open Positions. */
.mq-stats {
  box-sizing: border-box;
  max-width: 1174px;
  margin: 0 auto;
  padding: 0 24px;
}

.mq-stats .mq-stats__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 6vw 0;
  list-style: none;
}

.mq-stats .mq-stat {
  margin: 0;
  padding: 55px 15px 40px;
  list-style: none;
  text-align: center;
  color: #000000;
}

.mq-stat__number {
  display: block;
  margin-bottom: 10px;
  font-family: Avenir-Medium;
  font-size: 62px;
  line-height: 62px;
}

.mq-stat__number sup {
  top: auto;
  font-size: 32px;
  line-height: 32px;
  vertical-align: top;
}

.mq-stat__label {
  display: block;
  max-width: 198px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media only screen and (max-width: 1000px) {
  .mq-stats .mq-stats__list {
    grid-template-columns: repeat(2, 1fr);
    padding: 48px 0;
  }

  .mq-stats .mq-stat {
    padding: 48px 15px 30px;
  }

  .mq-stat__number {
    font-size: 42px;
    line-height: 42px;
  }

  .mq-stat__label {
    max-width: 264px;
  }
}

@media only screen and (max-width: 690px) {
  .mq-stats .mq-stats__list {
    grid-template-columns: 1fr;
    padding: 24px 0;
  }

  .mq-stats .mq-stat {
    padding: 23px 15px 20px;
  }

  .mq-stat__label {
    max-width: none;
  }
}

/* ==== styles/components/blog-teaser.css ==== */
/* ---- Blog teaser (partials/blog-teaser.html): the three newest posts, on Home and Who we are. */
.mq-blog-teaser {
  box-sizing: border-box;
  max-width: 1248px;
  margin: 0 auto;
  padding: 6vw 24px;
  text-align: center;
}

.mq-blog-teaser__eyebrow {
  margin: 0 0 8px;
  padding: 0;
}

.mq-blog-teaser .mq-blog-teaser__title {
  margin: 0 0 48px;
  color: #000000;
}

.mq-blog-teaser .mq-post-grid {
  text-align: left;
}

.mq-blog-teaser__more {
  margin: 48px 0 0;
  padding: 0;
}

.mq-blog-teaser__more a {
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ==== styles/components/job-list.css ==== */
/* ---- Job list (partials/job-list.html, data from data/jobs.json). Each job is a single link
   stretched over its card. */
.mq-jobs {
  box-sizing: border-box;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.mq-jobs__search {
  margin-bottom: 32px;
}

.mq-jobs__search label {
  display: block;
  margin-bottom: 8px;
  font-family: Avenir-Medium;
  font-size: 16px;
  color: #000000;
}

.mq-jobs__search input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  color: #000000;
  background-color: #ffffff;
  border: 2px solid #595959;
  border-radius: 4px;
}

.mq-jobs__search input:focus {
  border-color: #1b6f6b;
}

.mq-jobs__status {
  min-height: 24px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 15px;
  color: #404040;
}

.mq-jobs__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mq-jobs .mq-job {
  position: relative;
  margin: 0;
  padding: 24px 28px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #1b6f6b;
  border-radius: 4px;
  transition: box-shadow 0.2s ease;
}

.mq-job[hidden] {
  display: none;
}

.mq-job:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.mq-job:focus-within {
  outline: 3px solid #1b6f6b;
  outline-offset: 2px;
}

.mq-jobs .mq-job__title {
  margin: 0 0 6px;
  font-family: Avenir-Medium;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
}

.mq-jobs .mq-job__title a {
  color: #000000;
  text-decoration: none;
}

.mq-jobs .mq-job__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.mq-jobs .mq-job__title a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.mq-job:hover .mq-job__title a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mq-jobs .mq-job__tagline,
.mq-jobs .mq-job__meta {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 26px;
}

.mq-jobs .mq-job__tagline {
  color: #222222;
}

.mq-jobs .mq-job__meta {
  margin-top: 8px;
  font-size: 14px;
  color: #595959;
}

@media (prefers-reduced-motion: reduce) {
  .mq-jobs .mq-job {
    transition: none;
  }
}

/* ==== styles/components/photo-band.css ==== */
/* ---- Full-width photo with the brand shapes behind it (Home, Who we are, Open Positions). */
.mq-photo-band {
  box-sizing: border-box;
  margin: 6vw 0 0;
  padding: 4vw 0;
  background-image: url("wp-content/themes/mathisys/img/homebgLeft.svg"), url("wp-content/themes/mathisys/img/hbgRight.svg");
  background-position: left top, right bottom;
  background-repeat: no-repeat;
  background-size: 50vw auto, 30vw auto;
}

.mq-photo-band img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==== styles/components/menu.css ==== */
/* ---- Site menu (partials/menu.html, assets/menu.js). A white panel under the header with the
   page links and office addresses; it fades in quickly, or appears at once when the system asks
   for reduced motion. */
.mq-menu-open,
.mq-menu-open body {
  overflow: hidden;
}

.mq-menu {
  position: fixed;
  top: 80px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  overflow-y: auto;
  background-color: #ffffff;
  animation: mq-menu-in 0.15s ease-out;
}

.mq-menu[hidden] {
  display: none;
}

@keyframes mq-menu-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mq-menu__inner {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  max-width: 1126px;
  margin: 0 auto;
  padding: 64px 24px;
}

.mq-menu__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mq-menu__nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mq-menu .mq-menu__nav a {
  display: inline-block;
  padding: 6px 0;
  font-family: Avenir-Book, "Avenir Book", Arial, sans-serif;
  font-size: 48px;
  line-height: 1.3;
  color: #000000;
  text-decoration: none;
}

.mq-menu .mq-menu__nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* Current page: darker brand green, 5.4:1 on white, plus an underline so it is not shown by
   colour alone. */
.mq-menu .mq-menu__nav a[aria-current="page"] {
  color: #1e7a3c;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.mq-menu .mq-menu__offices h2 {
  margin: 0 0 16px;
  font-family: Avenir-Medium;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000000;
}

.mq-menu__offices p {
  margin: 0 0 24px;
  padding: 0;
  font-size: 16px;
  line-height: 24px;
  color: #222222;
}

@media only screen and (max-width: 999px) {
  .mq-menu {
    top: 64px;
  }

  .mq-menu__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px 48px;
  }

  .mq-menu .mq-menu__nav a {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mq-menu {
    animation: none;
  }
}

/* ==== styles/components/button.css ==== */
/* ---- Shared button: white on the darker brand teal, 5.9:1. */
.mq-button,
a.mq-button {
  display: inline-block;
  padding: 14px 28px;
  font-family: Avenir-Medium, "Avenir Book", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #ffffff;
  text-decoration: none;
  background-color: #1b6f6b;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.mq-button:hover,
a.mq-button:hover {
  color: #ffffff;
  background-color: #0f4744;
}

/* ==== styles/components/job-detail.css ==== */
/* ---- Job page (partials/job-detail.html, data from data/jobs.json). */
.mq-job-detail {
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 24px 64px;
}

.mq-job-detail .section-eyebrow a {
  color: #1b6f6b;
}

.mq-job-detail h1 {
  margin: 8px 0 12px;
  color: #000000;
}

.mq-job-detail .mq-job-detail__meta {
  margin: 0 0 40px;
  font-size: 16px;
  color: #595959;
}

.mq-job-detail h2 {
  margin: 32px 0 8px;
  font-family: Avenir-Medium;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: #000000;
}

.mq-job-detail p {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.7;
  color: #222222;
}

.mq-job-detail__apply {
  margin-top: 48px;
  padding: 28px;
  background-color: #f2f2f2;
  border-radius: 6px;
}

.mq-job-detail__apply h2 {
  margin-top: 0;
}

.mq-job-detail__apply .mq-button {
  margin-top: 20px;
}

.mq-job-others {
  padding-bottom: 96px;
}

.mq-job-others .mq-job-others__title {
  margin: 0 0 24px;
  text-align: center;
  color: #000000;
}

@media only screen and (max-width: 999px) {
  .mq-job-detail {
    padding-top: 56px;
  }
}

/* ==== styles/layout/prose.css ==== */
/* ---- Text pages (disclaimer, sitemap, investor charter, useful links, contact, credits):
   page content in .mq-prose at a readable width. */
.mq-prose {
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  font-size: 17px;
  line-height: 1.7;
  color: #222222;
  overflow-wrap: break-word;
}

.mq-prose h1 {
  margin: 0 0 32px;
  line-height: 1.2;
  color: #000000;
}

.mq-prose h2,
.mq-prose h3,
.mq-prose h4 {
  margin: 40px 0 12px;
  line-height: 1.3;
  color: #000000;
}

.mq-prose p,
.mq-prose ul,
.mq-prose ol {
  margin: 0 0 18px;
}

.mq-prose ul,
.mq-prose ol {
  padding-left: 24px;
}

.mq-prose a {
  color: #1b6f6b;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Wide tables scroll inside their own box (wrapper added by a11y.js) instead of the page. */
.mq-prose table {
  width: 100%;
  margin: 0 0 32px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.mq-prose th,
.mq-prose td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #d9d9d9;
}

.mq-prose th {
  background-color: #f2f2f2;
}

.mq-icon-external {
  margin-left: 4px;
  vertical-align: -1px;
}

@media only screen and (max-width: 690px) {
  .mq-prose {
    padding: 40px 20px 56px;
    font-size: 16px;
  }
}

/* Main headings on text pages: one size across the legal and information pages. */
.mq-prose h1 {
  font-size: clamp(32px, 4vw, 48px);
}

/* ==== styles/components/page-intro.css ==== */
/* ---- Page intro: centred eyebrow and main heading, used at the top of content pages. */
.mq-page-intro {
  margin: 0 0 56px;
  text-align: center;
}

.mq-page-intro .section-eyebrow {
  margin: 0 0 8px;
}

.mq-prose .mq-page-intro h1 {
  margin: 0;
}

/* Hand-drawn teal underline under a heading phrase. */
.mq-scribble {
  position: relative;
  display: inline-block;
}

.mq-scribble::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -30px;
  width: min(317px, 80%);
  height: 32px;
  background: url("wp-content/themes/mathisys/img/scribble.svg") no-repeat center / contain;
}

@media only screen and (max-width: 690px) {
  .mq-scribble::after {
    right: 0;
    bottom: -22px;
    height: 20px;
  }
}

/* ==== styles/components/photo-shapes.css ==== */
/* ---- Photo with the angled brand shapes behind its top-left corner (Who we are, Contact). */
.mq-photo-shapes {
  box-sizing: border-box;
  margin: 0 0 48px;
  padding: 4vw 4vw 0;
  background: url("wp-content/themes/mathisys/img/insideDividerBG.svg") no-repeat 0 0 / 30% auto;
}

.mq-photo-shapes img {
  display: block;
  width: 100%;
  height: auto;
}