/**
 * MTC Innovation Accelerator — main stylesheet.
 *
 * Consumes the custom properties declared in tokens.css. No raw colour, size or
 * radius values should appear below: if you need one, add it to tokens.css with
 * its provenance in the prototype.
 *
 * Structure:
 *   1. Reset & base
 *   2. Layout primitives
 *   3. Typography primitives
 *   4. Components (button, card, accordion)
 *   5. Header & nav
 *   6. Sections
 *   7. Footer
 *   8. Motion
 */

/* ========================================================== 1. Reset & base */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Backstop: any absolutely-positioned decoration that overshoots the
     viewport must not widen the document and leave a white gutter. `clip`
     rather than `hidden` so it does not create a scroll container. */
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--mtc-white);
  color: var(--mtc-navy);
  font-family: var(--mtc-font-body);
  font-size: var(--mtc-fs-body);
  line-height: var(--mtc-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1, h2, h3, h4, p, figure, blockquote {
  margin: 0;
}
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--mtc-cyan);
  outline-offset: 3px;
  border-radius: 2px;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mtc-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--mtc-space-12) var(--mtc-space-20);
  background: var(--mtc-navy);
  color: var(--mtc-white);
  text-decoration: none;
}
.mtc-skip-link:focus {
  left: var(--mtc-space-16);
  top: var(--mtc-space-16);
}
/* =================================================== 2. Layout primitives */

.mtc-container {
  width: 100%;
  max-width: var(--mtc-container);
  margin-inline: auto;
  padding-inline: clamp(var(--mtc-gutter), 4vw, var(--mtc-space-48));
}
.mtc-section {
  padding-block: var(--mtc-section-y);
}
/* Background modifiers — values map to the `background` select in ACF. */
.mtc-bg--white    { background: var(--mtc-white); }
.mtc-bg--mint     { background: var(--mtc-mint-050); }
.mtc-bg--navy     { background: var(--mtc-navy); color: var(--mtc-white); }
.mtc-bg--gradient-green-cyan { background: linear-gradient(90deg, var(--mtc-green), var(--mtc-cyan)); }
.mtc-bg--gradient-cyan-green { background: linear-gradient(88deg, var(--mtc-cyan) 0.6%, var(--mtc-green) 59%); }
.mtc-bg--gradient-purple     { background: linear-gradient(90deg, var(--mtc-grad-purple-from), var(--mtc-grad-purple-to)); }
.mtc-measure {
  max-width: var(--mtc-measure);
  margin-inline: auto;
}
.mtc-center {
  text-align: center;
}
/* =============================================== 3. Typography primitives */

.mtc-eyebrow {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-eyebrow-size);
  line-height: var(--mtc-eyebrow-lh);
  letter-spacing: var(--mtc-track-eyebrow);
  color: var(--mtc-navy);
  margin-bottom: var(--mtc-space-12);
}
.mtc-bg--navy .mtc-eyebrow {
  color: var(--mtc-green);
}
.mtc-title {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-title);
  line-height: var(--mtc-lh-title);
  color: var(--mtc-navy);
  text-wrap: balance;
}
.mtc-bg--navy .mtc-title {
  color: var(--mtc-white);
}
.mtc-subtitle {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-subtitle);
  line-height: var(--mtc-lh-subtitle);
  color: var(--mtc-navy);
}
.mtc-body {
  font-family: var(--mtc-font-body);
  font-size: var(--mtc-fs-body);
  line-height: var(--mtc-lh-body);
  color: var(--mtc-ink-75);
}
.mtc-bg--navy .mtc-body {
  color: var(--mtc-on-dark-75);
}
.mtc-body p + p {
  margin-top: var(--mtc-space-16);
}
.mtc-prose > * + * {
  margin-top: var(--mtc-space-16);
}
/* ============================================================ 4. Components */

.mtc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mtc-space-8);
  padding-inline: var(--mtc-btn-padding-x);
  border-radius: var(--mtc-radius-sm);
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-btn);
  line-height: 1.5;
  min-height: var(--mtc-btn-height);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--mtc-duration) var(--mtc-ease),
              background-color var(--mtc-duration) var(--mtc-ease),
              color var(--mtc-duration) var(--mtc-ease);
}
.mtc-btn--solid {
  background: var(--mtc-green);
  color: var(--mtc-navy);
}
.mtc-btn--outline {
  background: transparent;
  color: var(--mtc-green);
  border: 1px solid var(--mtc-green);
}
.mtc-bg--white .mtc-btn--outline,
.mtc-bg--mint .mtc-btn--outline {
  color: var(--mtc-navy);
}
.mtc-btn:hover {
  transform: translateY(-2px);
}
.mtc-btn--outline:hover {
  background: var(--mtc-green);
  color: var(--mtc-navy);
}
/* The brand card shape: large bottom-left radius, small elsewhere. */
.mtc-card {
  background: var(--mtc-white);
  border-radius: var(--mtc-radius-lg);
  overflow: hidden;
}
.mtc-card--bordered {
  border: 1px solid var(--mtc-ink-10);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
.mtc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mtc-card__body {
  padding: var(--mtc-space-24);
}
/* Bullet list with the green marker used throughout the design. */
.mtc-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--mtc-space-12);
}
.mtc-bullets li {
  display: flex;
  gap: var(--mtc-space-12);
  align-items: flex-start;
}
.mtc-bullets li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--mtc-green);
}

/* In the solution cards the marker takes the text colour rather than the
   accent. currentColor keeps it correct if the card's colour ever changes. */
.mtc-solution__card .mtc-bullets li::before {
  background: currentcolor;
}
/* Accordion — shared by Focus areas and FAQ. */
.mtc-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--mtc-space-12);
}
.mtc-accordion__item {
  border-radius: var(--mtc-radius-md);
  overflow: hidden;
  background: var(--mtc-navy);
  color: var(--mtc-white);
  transition: transform var(--mtc-duration) var(--mtc-ease),
              box-shadow var(--mtc-duration) var(--mtc-ease);
}

/* Subtle lift on hover, matching the buttons and the who-for cards. The
   prototype slides these sideways instead; swapping the transform for
   translateX(-4px) reproduces that. */
.mtc-accordion__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -6px rgba(18, 13, 51, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .mtc-accordion__item:hover { transform: none; }
}
/* Open state, shared by both accordions: inverts to white with navy text and
   a 2px navy border. The closed state carries a transparent border of the same
   width so opening does not shift the layout by 2px. */
.mtc-accordion__item {
  border: 2px solid transparent;
}
.mtc-accordion__item.is-open {
  background: var(--mtc-white);
  color: var(--mtc-navy);
  border-color: var(--mtc-navy);
}
.mtc-accordion__item.is-open .mtc-accordion__chevron {
  color: var(--mtc-navy);
}
.mtc-accordion__item.is-open .mtc-accordion__panel-inner {
  color: var(--mtc-navy);
}
/* The FAQ answer runs a touch larger than the focus-area panels. */
.mtc-faq__list .mtc-accordion__panel-inner {
  font-size: var(--mtc-fs-body-sm);
  line-height: 1.6;
}
.mtc-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--mtc-space-16);
  width: 100%;
  padding: var(--mtc-space-20) var(--mtc-space-24);
  text-align: left;
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-body);
  line-height: 1.4;
}
/* The two accordions are not the same size in the design: FAQ questions are
   17px on mobile / 20px on desktop, focus-area titles a flat 14px. */
.mtc-faq__list .mtc-accordion__trigger {
  padding-block: var(--mtc-faq-pad-y);
  font-size: var(--mtc-fs-faq-q);
  line-height: 1.41;
}
.mtc-faq__list .mtc-accordion__chevron {
  width: var(--mtc-faq-chevron-w);
}
.mtc-focus__accordion .mtc-accordion__trigger {
  font-size: var(--mtc-fs-focus-q);
  line-height: 1.43;
}
.mtc-accordion__marker {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.mtc-accordion__chevron {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  width: var(--mtc-chevron-w);
  color: var(--mtc-green);
  transition: transform var(--mtc-duration) var(--mtc-ease);
}

.mtc-accordion__chevron svg { width: 100%; height: auto; }
.mtc-accordion__trigger[aria-expanded="true"] .mtc-accordion__chevron {
  transform: rotate(180deg);
}
/* Height is animated by JS via inline max-height so the panel can grow with
   whatever content the editor puts in it. */
.mtc-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--mtc-duration) var(--mtc-ease);
}
.mtc-accordion__panel-inner {
  padding: 0 var(--mtc-space-24) var(--mtc-space-24);
  font-size: var(--mtc-fs-small);
  line-height: var(--mtc-lh-small);
  color: var(--mtc-on-dark-85);
}
.mtc-accordion__item[data-variant="light"] .mtc-accordion__panel-inner {
  color: var(--mtc-ink-70);
}
/* ========================================================= 5. Header & nav */

.mtc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--mtc-navy) 95%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mtc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mtc-space-24);
  width: 100%;
  max-width: var(--mtc-container);
  margin-inline: auto;
  padding-block: var(--mtc-header-pad-y);
  padding-inline: clamp(var(--mtc-space-20), 4vw, var(--mtc-space-48));
}
.mtc-header__logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
}
.mtc-header__logo img {
  width: var(--mtc-header-logo-w);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}
.mtc-header__toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  color: var(--mtc-white);
}
.mtc-header__toggle-bar,
.mtc-header__toggle-bar::before,
.mtc-header__toggle-bar::after {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: currentcolor;
  transform: translateX(-50%);
  transition: transform var(--mtc-duration) var(--mtc-ease),
              opacity var(--mtc-duration) var(--mtc-ease);
}
.mtc-header__toggle-bar {
  top: 50%;
  margin-top: -1px;
}
.mtc-header__toggle-bar::before,
.mtc-header__toggle-bar::after {
  content: "";
  top: 0;
}
.mtc-header__toggle-bar::before { transform: translate(-50%, -7px); }
.mtc-header__toggle-bar::after  { transform: translate(-50%, 7px); }
.mtc-header__toggle[aria-expanded="true"] .mtc-header__toggle-bar { background: transparent; }
.mtc-header__toggle[aria-expanded="true"] .mtc-header__toggle-bar::before { transform: translate(-50%, 0) rotate(45deg); }
.mtc-header__toggle[aria-expanded="true"] .mtc-header__toggle-bar::after  { transform: translate(-50%, 0) rotate(-45deg); }
.mtc-nav {
  display: flex;
  align-items: center;
  gap: var(--mtc-space-32);
}
.mtc-nav__list {
  display: flex;
  align-items: center;
  gap: var(--mtc-space-24);
}
.mtc-nav__link {
  font-family: var(--mtc-font-body);
  font-weight: 400;
  font-size: var(--mtc-fs-nav);
  color: var(--mtc-white);
  text-decoration: none;
  transition: color var(--mtc-duration) var(--mtc-ease);
}
.mtc-nav__link:hover {
  color: var(--mtc-green);
}
@media (max-width: 1023px) {
  .mtc-header__toggle { display: block; }
  .mtc-nav {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--mtc-space-16);
    padding: var(--mtc-space-24) clamp(var(--mtc-gutter), 4vw, var(--mtc-space-48)) var(--mtc-space-32);
    background: var(--mtc-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
  }
  .mtc-nav.is-open { display: flex; }
  .mtc-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mtc-space-8);
  }
  .mtc-nav__link {
    display: block;
    padding-block: var(--mtc-space-8);
    font-size: var(--mtc-fs-lead);
  }
  .mtc-nav__cta { align-self: flex-start; }
}
@media (min-width: 1024px) {
  /* Desktop header is a fixed 109px band (export: Container h-[109px]). */
  .mtc-header__inner {
    min-height: var(--mtc-header-height);
    padding-block: 0;
  }
  /* Desktop buttons are slightly tighter than mobile — the one place the
     mobile design is the larger of the two. */
  :root {
    --mtc-btn-height: 42px;
    --mtc-btn-padding-x: 22px;
    --mtc-header-logo-w: 600px;
  }
}
/* ============================================================= 6. Sections */

/* ------------------------------------------------------------------- hero */
.mtc-hero {
  position: relative;
  background: var(--mtc-navy);
  color: var(--mtc-white);
  isolation: isolate;
}
.mtc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.mtc-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mtc-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* The hero photo is treated completely differently at the two sizes, so each
   scrim is scoped to its own range. They must not be left unscoped: media
   queries add no specificity, so an unscoped mobile rule sitting later in the
   file silently overrides the desktop one — which is exactly what buried the
   photo under an almost-opaque navy wash. */

/* Mobile: full-bleed photo at 60%, vertical scrim. */
@media (max-width: 1023px) {
  .mtc-hero__bg img {
    opacity: 0.6;
  }

  .mtc-hero__bg::after {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--mtc-navy) 95%, transparent),
      color-mix(in srgb, var(--mtc-navy) 85%, transparent) 50%,
      color-mix(in srgb, var(--mtc-navy) 95%, transparent)
    );
  }
}

/* Desktop: photo on the right ~68% at full opacity, horizontal scrim that is
   solid behind the copy and clears completely at the right edge. */
@media (min-width: 1024px) {
  .mtc-hero__bg img {
    position: absolute;
    top: 0;
    left: 31.95%;
    width: 68.05%;
    height: 100%;
    opacity: 1;
    /* The photo has a hard left edge where it starts at 32%. Masking it out
       over the first fifth dissolves that seam into the navy instead of
       leaving a visible vertical line. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  }

  .mtc-hero__bg::after {
    background: linear-gradient(
      90deg,
      var(--mtc-navy) 37%,
      rgba(18, 13, 51, 0.62) 95%,
      rgba(18, 13, 51, 0.3) 100%
    );
  }
}
.mtc-hero__inner {
  padding-block: clamp(2rem, 0.5rem + 6vw, 6.5rem);
  max-width: var(--mtc-measure-wide);
}

/* The export pins the hero to 700.984px and stacks the title on three lines:
   MTC / Innovation / Challenge. Both parts are block-level so "MTC" always
   keeps its own line regardless of how long the accent text runs. */
@media (min-width: 1024px) {
  .mtc-hero {
    min-height: var(--mtc-hero-height);
    display: flex;
    align-items: center;
  }

  .mtc-hero > .mtc-container { width: 100%; }
}

.mtc-hero__title-lead,
.mtc-hero__title-accent {
  display: block;
}
/* The hero is the one heading the client wants at semibold; the rest of the
   page stays on the 500 display weight. Bai Jamjuree 600 is shipped for this:
   without it the browser jumps to the 700 italic face and renders too heavy. */
.mtc-hero__title {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-hero);
  font-style: italic;
  font-size: var(--mtc-fs-hero);
  line-height: var(--mtc-lh-hero);
  letter-spacing: var(--mtc-track-display);
  text-wrap: balance;
}
.mtc-hero__title-accent { color: var(--mtc-green); }
.mtc-hero__kicker {
  margin-top: 6px;
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-style: italic;
  font-size: 1.3125rem;   /* 21px */
  color: var(--mtc-green);
}
.mtc-hero__copy {
  margin-top: var(--mtc-space-24);
  color: var(--mtc-on-dark-85);
  font-size: var(--mtc-fs-lead);   /* 20px */
  line-height: 1.5;
}
.mtc-hero__lead { font-weight: var(--mtc-weight-bold); }
.mtc-hero__body {
  margin-top: 2px;
  font-weight: 400;
}
/* Both hero buttons share a width. An inline grid with equal auto-columns
   sizes every column to the widest label, so this keeps holding if the labels
   are edited in wp-admin — no hard-coded min-width to go stale. Falls back to
   wrapping flex below 480px, where two side-by-side buttons stop fitting. */
.mtc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mtc-space-12);
  margin-top: var(--mtc-space-32);
}

@media (min-width: 480px) {
  .mtc-hero__actions {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}
/* -------------------------------------------------------------- rich_text */
/* A little more air above this block than the standard section rhythm. */
.mtc-section--rich-text {
  padding-top: calc(var(--mtc-section-y) + 30px);
}

.mtc-richtext__grid {
  display: grid;
  gap: clamp(var(--mtc-space-24), 4vw, var(--mtc-space-56));
}
@media (min-width: 900px) {
  .mtc-richtext__grid--with-media {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
.mtc-richtext__media {
  border-radius: var(--mtc-radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.mtc-richtext__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.mtc-richtext__body { margin-top: var(--mtc-space-20); }
/* ----------------------------------------------------------------- banner */
/* A little more air below this block than the standard section rhythm. */
.mtc-section--banner {
  padding-bottom: calc(var(--mtc-section-y) + 30px);
}

.mtc-banner__inner {
  max-width: var(--mtc-measure);
  margin-inline: auto;
  text-align: center;
}
.mtc-banner__body { margin-top: var(--mtc-space-16); }
/* --------------------------------------------------------- solution_cards */
.mtc-solution__head {
  max-width: var(--mtc-measure);
  margin-inline: auto;
  text-align: center;
}

/* The client asked for this heading a step down from the general title size. */
.mtc-solution__head .mtc-title {
  font-size: var(--mtc-fs-solution-title);
}
.mtc-solution__body { margin-top: var(--mtc-space-16); }
.mtc-solution__cards {
  display: grid;
  gap: var(--mtc-space-24);
  margin-top: clamp(var(--mtc-space-32), 4vw, var(--mtc-space-48));
}
@media (min-width: 800px) {
  .mtc-solution__cards { grid-template-columns: repeat(2, 1fr); }
}
.mtc-solution__card {
  position: relative;
  padding: var(--mtc-space-32);
  border-radius: var(--mtc-radius-lg);
  background: var(--mtc-white);
  border: 2px solid var(--mtc-accent, var(--mtc-red));
}
.mtc-solution__card[data-accent="red"]   { --mtc-accent: var(--mtc-red); }
.mtc-solution__card[data-accent="lilac"] { --mtc-accent: var(--mtc-grad-lilac); }
.mtc-solution__card[data-accent="green"] { --mtc-accent: var(--mtc-green); }
.mtc-solution__card[data-accent="cyan"]  { --mtc-accent: var(--mtc-cyan); }
.mtc-solution__card-title {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-card-title-sm);
  color: var(--mtc-navy);
}
.mtc-solution__card-label {
  margin-top: var(--mtc-space-12);
  font-weight: var(--mtc-weight-semibold);
  font-size: var(--mtc-fs-small);
  color: var(--mtc-navy);
}
.mtc-solution__card .mtc-bullets {
  margin-top: var(--mtc-space-12);
  font-size: var(--mtc-fs-small);
  line-height: 1.43;
  color: var(--mtc-navy);
}
/* ------------------------------------------------------------ outcome_cta */
.mtc-outcome {
  text-align: center;
}
.mtc-outcome__inner {
  max-width: var(--mtc-measure);
  margin-inline: auto;
}
.mtc-outcome__action { margin-top: var(--mtc-space-24); }
/* ------------------------------------------------------------ focus_areas */
/* The prototype inverts the usual relationship here: the intro text runs the
   full content width while the accordion is narrower and centred. */
.mtc-focus__head {
  max-width: var(--mtc-measure-full);
  margin-inline: auto;
  text-align: center;
}
.mtc-focus__standfirst {
  margin-top: var(--mtc-space-16);
  font-weight: var(--mtc-weight-semibold);
  font-size: 1.125rem;
  line-height: 1.444;
  color: var(--mtc-navy);
}
.mtc-focus__body {
  margin-top: var(--mtc-space-16);
  font-size: var(--mtc-fs-body);
  line-height: var(--mtc-lh-body);
  color: var(--mtc-ink-70);
}

.mtc-focus__body p + p {
  margin-top: var(--mtc-space-16);
}
.mtc-focus__list { margin-top: clamp(var(--mtc-space-32), 4vw, var(--mtc-space-40)); }
.mtc-focus__list-title {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-card-title-sm);
  color: var(--mtc-navy);
}
.mtc-focus__rule {
  height: 1px;
  margin-top: var(--mtc-space-16);
  background: var(--mtc-green);
}
.mtc-focus__list {
  max-width: var(--mtc-focus-list-w);
  margin-inline: auto;
}

.mtc-focus__accordion { margin-top: var(--mtc-space-20); }
/* ------------------------------------------------------------- quote_band */
.mtc-quote {
  position: relative;
  background: var(--mtc-navy);
  color: var(--mtc-white);
  text-align: center;
  padding-block: var(--mtc-quote-pad-y);
  /* The decorative rules straddle the top and bottom edges, so this must not
     clip. The margin opens the white gap they protrude into. */
  overflow: visible;
  margin-block: var(--mtc-quote-bleed);
}

/* Decorative rules that bracket the band, and the two quote marks. */
.mtc-quote__rule {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--mtc-quote-rule-h);
  color: var(--mtc-cyan);
  pointer-events: none;
}

/* Centred on the edge: half the curve sits over the navy, half over the white
   gap opened by the section margin. */
.mtc-quote__rule--top {
  top: 0;
  transform: translateY(-50%);
}

.mtc-quote__rule--bottom {
  bottom: 0;
  transform: translateY(50%) scaleY(-1);
}

.mtc-quote__rule svg { width: 100%; height: 100%; }

.mtc-quote__inner {
  position: relative;
  display: inline-block;
  max-width: var(--mtc-quote-measure);
}

.mtc-quote__mark {
  position: absolute;
  width: var(--mtc-quote-mark-w);
  height: auto;
  color: var(--mtc-green);
}

/* Mirrored: each mark sits the same distance outside its own corner of the
   text block, so the pair reads as a matched set. */
.mtc-quote__mark--open {
  left: calc(var(--mtc-quote-mark-gap) * -1);
  top: calc(var(--mtc-quote-mark-rise) * -1);
}
.mtc-quote__mark--close {
  right: calc(var(--mtc-quote-mark-gap) * -1);
  bottom: calc(var(--mtc-quote-mark-rise) * -1);
}

@media (max-width: 899px) {
  .mtc-quote__mark { display: none; }
}
.mtc-quote__text {
  max-width: var(--mtc-quote-measure);
  margin-inline: auto;
  font-size: var(--mtc-fs-quote);
  line-height: 1.5;
}
.mtc-quote__attribution {
  margin-top: var(--mtc-space-24);
  font-weight: var(--mtc-weight-bold);
  font-size: 1.125rem;
  line-height: 1.44;
}
/* ---------------------------------------------------------------- who_for */
.mtc-whofor__head { text-align: center; }
.mtc-whofor__cards {
  display: grid;
  gap: var(--mtc-space-20);
  margin-top: clamp(var(--mtc-space-32), 4vw, var(--mtc-space-40));
}
@media (min-width: 800px) {
  .mtc-whofor__cards { grid-template-columns: repeat(3, 1fr); }
}
.mtc-whofor__card {
  position: relative;
  border-radius: var(--mtc-radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  isolation: isolate;
  min-height: var(--mtc-whofor-card-h);
  display: flex;
  align-items: flex-end;
  transition: transform var(--mtc-duration) var(--mtc-ease);
}
.mtc-whofor__card:hover { transform: translateY(-6px); }
.mtc-whofor__card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--mtc-ease);
}

.mtc-whofor__card:hover img {
  transform: scale(1.06);
}
.mtc-whofor__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mtc-ink-70);
}
.mtc-whofor__card-body {
  padding: var(--mtc-space-24);
  color: var(--mtc-white);
}
.mtc-whofor__card-title {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-card-title);
}
.mtc-whofor__card-text {
  margin-top: var(--mtc-space-8);
  font-size: var(--mtc-fs-body-sm);
  line-height: 1.6;
  color: var(--mtc-on-dark-85);
}
.mtc-benefits {
  margin-top: calc(var(--mtc-space-24) + 30px);
  padding: clamp(var(--mtc-space-24), 3vw, var(--mtc-space-40));
  border-radius: var(--mtc-radius-lg);
  background: var(--mtc-navy);
  color: var(--mtc-white);
}
.mtc-benefits .mtc-eyebrow { color: var(--mtc-green-ink); }
.mtc-benefits__title {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-card-title);
  line-height: 1.33;
}
.mtc-benefits__body {
  margin-top: var(--mtc-space-16);
  color: var(--mtc-on-dark-75);
}
/* Two columns from 900px: copy on the left, benefit list on the right. */
/* Two columns from 900px: copy on the left, benefit list on the right. The
   copy has to be wrapped in its own element — making the panel a grid with the
   eyebrow, title, body and list as direct children lays them out in a 2x2
   checkerboard instead. */
@media (min-width: 900px) {
  .mtc-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--mtc-space-32), 4vw, var(--mtc-space-56));
    align-items: start;
  }

  .mtc-benefits__list { margin-top: 0; }
}

.mtc-benefits__list {
  display: flex;
  flex-direction: column;
  gap: var(--mtc-space-16);
  margin-top: var(--mtc-space-24);
}
.mtc-benefits__list li {
  display: flex;
  gap: var(--mtc-space-12);
  align-items: flex-start;
  color: var(--mtc-on-dark-90);
}
.mtc-benefits__plus {
  display: flex;
  flex: 0 0 auto;
  margin-top: 2px;
}
/* --------------------------------------------------------------- timeline */
.mtc-timeline__head { text-align: center; }
.mtc-timeline__list {
  position: relative;
  display: grid;
  gap: var(--mtc-space-32);
  margin-top: clamp(var(--mtc-space-32), 4vw, var(--mtc-space-48));
  padding-left: var(--mtc-space-32);
}
.mtc-timeline__list::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--mtc-cyan), var(--mtc-green));
}
@media (min-width: 900px) {
  .mtc-timeline__list {
    /* Adapts to however many milestones the editor adds, rather than being
       pinned to four — a fifth used to wrap onto its own row. */
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: var(--mtc-space-24);
    padding-left: 0;
    padding-top: var(--mtc-timeline-gap);
  }
  .mtc-timeline__list::before {
    left: 0;
    right: 0;
    top: 10px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--mtc-cyan), var(--mtc-green));
  }
}
.mtc-timeline__item { position: relative; }
.mtc-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--mtc-space-32) * -1 + 0px);
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mtc-green);
}
@media (min-width: 900px) {
  .mtc-timeline__item {
    padding-top: var(--mtc-timeline-gap);
  }
  .mtc-timeline__item::before {
    left: 0;
    top: calc(var(--mtc-timeline-gap) * -1 - 1px);
  }
}
.mtc-timeline__month {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-bold);
  font-size: var(--mtc-fs-timeline-month);
  line-height: 1.1;
  color: var(--mtc-navy);
}
.mtc-timeline__day {
  font-family: var(--mtc-font-display);
  font-weight: 400;
  font-size: var(--mtc-fs-lead);
  line-height: 1.2;
  min-height: 1em;   /* reserves the slot when there is no day */
  color: var(--mtc-navy);
}
.mtc-timeline__title {
  margin-top: 10px;
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-lead);
  line-height: var(--mtc-lh-lead);
  color: var(--mtc-navy);
}
.mtc-timeline__sub {
  font-size: var(--mtc-fs-body-sm);
  line-height: 1.47;
  color: var(--mtc-ink-65);
}
/* -------------------------------------------------------- success_stories */
.mtc-stories__head {
  max-width: var(--mtc-measure);
  margin-inline: auto;
  text-align: center;
}
.mtc-stories__body { margin-top: var(--mtc-space-16); }
.mtc-stories__list {
  display: grid;
  gap: var(--mtc-space-24);
  margin-top: clamp(var(--mtc-space-32), 4vw, var(--mtc-space-40));
}
@media (min-width: 800px) {
  .mtc-stories__list { grid-template-columns: repeat(2, 1fr); }
}
.mtc-stories__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.mtc-stories__tag {
  display: inline-block;
  padding: var(--mtc-space-4) var(--mtc-space-12);
  border-radius: 3px 3px 3px 12px;
  background: var(--mtc-lake-blue);
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-micro);
  color: var(--mtc-white);
}
.mtc-stories__name {
  margin-top: var(--mtc-space-16);
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: 1.3125rem;
  color: var(--mtc-navy);
}
.mtc-stories__text {
  margin-top: var(--mtc-space-12);
  font-size: var(--mtc-fs-body-sm);
  line-height: 1.6;
  color: var(--mtc-ink-70);
}
/* Bold, upright, and bracketed by the brand plus marks rather than a green
   rule and typographic quotes. */
.mtc-stories__quote {
  display: flex;
  align-items: flex-start;
  gap: var(--mtc-space-8);
  margin-top: var(--mtc-space-20);
  font-family: var(--mtc-font-body);
  font-weight: var(--mtc-weight-semibold);
  font-size: var(--mtc-fs-body-sm);
  line-height: 1.6;
  color: var(--mtc-navy);
}

.mtc-stories__quote-mark {
  flex: 0 0 auto;
  width: var(--mtc-stories-mark-w);
}

.mtc-stories__quote-mark svg { width: 100%; height: auto; }

.mtc-stories__quote-mark--close {
  align-self: flex-end;
}

.mtc-stories__quote-text { flex: 1 1 auto; }
.mtc-stories__author {
  margin-top: var(--mtc-space-16);
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-body-sm);
  color: var(--mtc-navy);
}
.mtc-stories__role {
  font-size: var(--mtc-fs-small);
  color: var(--mtc-ink-60);
}
/* ---------------------------------------------------- programme_activities */
.mtc-activities__head {
  max-width: var(--mtc-measure);
  margin-inline: auto;
  text-align: center;
}
.mtc-activities__title {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-activities-title);
  line-height: 1.29;
  letter-spacing: -0.5px;
  color: var(--mtc-navy);
  text-wrap: balance;
}
.mtc-activities__list {
  display: grid;
  gap: var(--mtc-space-24);
  margin-top: clamp(var(--mtc-space-32), 4vw, var(--mtc-space-40));
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mtc-activities__card { display: flex; flex-direction: column; }
.mtc-activities__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* Neutral stand-in while the final activity photography is outstanding. */
.mtc-activities__media--empty {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--mtc-mint-050), color-mix(in srgb, var(--mtc-cyan) 20%, var(--mtc-white)));
}
/* Sits over the top-left of the card image, styled like the success-story
   tags: brand gradient, navy text, the asymmetric brand radius. */
.mtc-activities__media {
  position: relative;
}
.mtc-activities__tag {
  position: absolute;
  top: var(--mtc-space-16);
  left: var(--mtc-space-16);
  padding: var(--mtc-space-4) var(--mtc-space-12);
  border-radius: 3px 3px 3px 12px;
  background: var(--mtc-lake-blue);
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-micro);
  color: var(--mtc-white);
}
.mtc-activities__card-title {
  margin-top: var(--mtc-space-12);
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: 1.3125rem;
  line-height: 1.33;
  color: var(--mtc-navy);
}
.mtc-activities__card-desc {
  margin-top: var(--mtc-space-8);
  font-size: var(--mtc-fs-body-sm);
  line-height: 1.6;
  color: var(--mtc-ink-70);
}
/* -------------------------------------------------------------------- faq */
.mtc-faq__head { text-align: center; }
.mtc-faq__eyebrow {
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-lead);
  color: var(--mtc-navy);
}
.mtc-faq__title {
  margin-top: var(--mtc-space-8);
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-subtitle);
  line-height: var(--mtc-lh-subtitle);
  color: var(--mtc-navy);
}
.mtc-faq__list {
  max-width: var(--mtc-faq-list-w);
  margin: clamp(var(--mtc-space-32), 4vw, var(--mtc-space-40)) auto 0;
}
/* ---------------------------------------------------------- partner_panel */
.mtc-partner {
  background: var(--mtc-white);
}
.mtc-partner__panel {
  padding: clamp(var(--mtc-space-32), 4vw, var(--mtc-space-56));
  border-radius: var(--mtc-radius-lg);
  background: var(--mtc-navy);
  color: var(--mtc-white);
  display: grid;
  gap: clamp(var(--mtc-space-24), 3vw, var(--mtc-space-40));
}
@media (min-width: 900px) {
  .mtc-partner__panel {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
.mtc-partner__media {
  border-radius: var(--mtc-radius-lg);
  overflow: hidden;
}
.mtc-partner__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mtc-partner__logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.mtc-partner__body {
  margin-top: var(--mtc-space-20);
  color: var(--mtc-on-dark-80);
  line-height: 1.69;
}
.mtc-partner__action { margin-top: var(--mtc-space-24); }
/* =============================================================== 7. Footer */

.mtc-footer {
  background: var(--mtc-navy);
  color: var(--mtc-white);
  padding-block: clamp(var(--mtc-space-40), 5vw, 80px) var(--mtc-space-48);
}
.mtc-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mtc-space-24);
  padding-bottom: var(--mtc-space-24);
  border-bottom: 1px solid var(--mtc-rule);
}
.mtc-footer__logo img {
  width: auto;
  max-width: min(100%, 520px);
  height: clamp(32px, 4vw, 41px);
  object-fit: contain;
  object-position: left center;
}
.mtc-footer__social {
  display: flex;
  align-items: center;
  gap: var(--mtc-space-16);
}
.mtc-footer__follow {
  font-weight: var(--mtc-weight-semibold);
  font-size: 1.125rem;
}
.mtc-footer__social-list {
  display: flex;
  align-items: center;
  gap: var(--mtc-space-12);
}
.mtc-footer__social-link {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transition: color var(--mtc-duration) var(--mtc-ease);
}
.mtc-footer__social-link:hover { color: var(--mtc-green); }
.mtc-icon { width: 100%; height: 100%; }
.mtc-footer__copyright {
  margin-top: var(--mtc-space-20);
  font-size: var(--mtc-fs-small);
  line-height: 1.43;
}
/* =============================================================== 8. Motion */

.mtc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--mtc-ease), transform 0.7s var(--mtc-ease);
}
.mtc-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mtc-reveal {
    opacity: 1;
    transform: none;
  }
}

/* The brand plus, wherever it appears as a standalone mark. */
.mtc-plus { display: block; }

.mtc-whofor__card-plus {
  display: block;
  margin-bottom: var(--mtc-space-12);
}

.mtc-quote-mark { width: 100%; height: auto; }
.mtc-quote-mark--closing { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
 * The brand plus used as a repeating background motif.
 *
 * The prototype paints this behind the solution-cards section and drifts it
 * horizontally as you scroll. The tile is the plus glyph in a pale mint, drawn
 * as an inline data URI so it costs no extra request. The drift is driven by a
 * CSS custom property that app.js updates on scroll; with JS off or reduced
 * motion on, the pattern simply sits still.
 * ------------------------------------------------------------------------- */
.mtc-section--solution,
.mtc-partner {
  position: relative;
  isolation: isolate;
}

.mtc-section--solution::before,
.mtc-partner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22215%22%20height%3D%22260%22%20viewBox%3D%220%200%20215%20260%22%3E%3Cg%20fill%3D%22%23d5f9ee%22%3E%3Cg%20transform%3D%22translate%280%200%29%20scale%284.5812%29%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5625%209.85876C14.5634%209.85876%209.95869%2013.8878%209.07975%2019.0307L8.13421%2024.0408C8.10015%2024.2224%208.23436%2024.3903%208.4133%2024.3903H12.5279C12.6642%2024.3903%2012.7811%2024.2911%2012.807%2024.1537L14.448%2015.4676C14.5507%2014.924%2015.0117%2014.5316%2015.5486%2014.5316H23.393C23.5297%2014.5316%2023.6461%2014.4324%2023.672%2014.2944L24.4422%2010.2077C24.4763%2010.0267%2024.3421%209.85876%2024.1631%209.85876H19.5625Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0033%200C11.8661%200%2011.7488%200.0998647%2011.7227%200.23883L10.0697%208.98571C9.96675%209.53312%209.5019%209.92835%208.9618%209.92835H1.06148C0.924283%209.92835%200.806536%2010.0287%200.780427%2010.1672L0.00534395%2014.2828C-0.0289563%2014.4651%200.106197%2014.6341%200.286401%2014.6341H4.91898C9.95344%2014.6341%2014.5911%2010.5772%2015.4758%205.39745L16.428%200.351904C16.4628%200.169612%2016.3271%200%2016.1474%200H12.0033Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28107.5%20130.0%29%20scale%284.5812%29%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5625%209.85876C14.5634%209.85876%209.95869%2013.8878%209.07975%2019.0307L8.13421%2024.0408C8.10015%2024.2224%208.23436%2024.3903%208.4133%2024.3903H12.5279C12.6642%2024.3903%2012.7811%2024.2911%2012.807%2024.1537L14.448%2015.4676C14.5507%2014.924%2015.0117%2014.5316%2015.5486%2014.5316H23.393C23.5297%2014.5316%2023.6461%2014.4324%2023.672%2014.2944L24.4422%2010.2077C24.4763%2010.0267%2024.3421%209.85876%2024.1631%209.85876H19.5625Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0033%200C11.8661%200%2011.7488%200.0998647%2011.7227%200.23883L10.0697%208.98571C9.96675%209.53312%209.5019%209.92835%208.9618%209.92835H1.06148C0.924283%209.92835%200.806536%2010.0287%200.780427%2010.1672L0.00534395%2014.2828C-0.0289563%2014.4651%200.106197%2014.6341%200.286401%2014.6341H4.91898C9.95344%2014.6341%2014.5911%2010.5772%2015.4758%205.39745L16.428%200.351904C16.4628%200.169612%2016.3271%200%2016.1474%200H12.0033Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: var(--mtc-motif-w) var(--mtc-motif-h);
  background-position: calc(var(--mtc-drift, 0px) * 1) calc(100% + var(--mtc-motif-offset));
  opacity: 0.85;
  pointer-events: none;
  /* The motif only occupies the lower part of the section in the design, so it
     is masked into a band: fading in below the copy and fading out again
     before the section ends, rather than being cut off by the edge. */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 46%,
    #000 62%,
    #000 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 46%,
    #000 62%,
    #000 84%,
    transparent 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .mtc-section--solution::before,
.mtc-partner::before { background-position: 0 0; }
}

/* --------------------------------------------------------------- Section edges
 * Two treatments that sit on a section boundary:
 *   .mtc-edge-rule — the thin cyan line, straddling the edge
 *   .mtc-edge-wave — the section's own gradient rising over the one above
 * Both need the section to be a positioning context and to not clip.
 */
.mtc-section--timeline,
.mtc-section--stories {
  position: relative;
  overflow: visible;
}

.mtc-edge-rule {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--mtc-quote-rule-h);
  color: var(--mtc-cyan);
  pointer-events: none;
  z-index: 1;
}

.mtc-edge-rule--top {
  top: 0;
  transform: translateY(-50%);
}

.mtc-edge-rule svg { width: 100%; height: 100%; }

.mtc-edge-wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--mtc-wave-h);
  transform: translateY(-100%);
  pointer-events: none;
}

.mtc-edge-wave svg { width: 100%; height: 100%; }

/* A solid band across the foot of the timeline, sitting between it and the
   wave of the section below. The wave paints over its right-hand end, so what
   remains visible is a strip on the left — which is what the design shows. */
.mtc-edge-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--mtc-edge-band-h);
  background: var(--mtc-grad-purple-to);
  transform: translateY(-100%);
  pointer-events: none;
}

/* No gap between these two: the wave alone carries the transition, so the
   purple runs straight into it instead of showing the page background. */

/* The partner block wants the motif centred on its panel, not pushed to the
   foot of the section the way the solution block has it. */
.mtc-partner::before {
  background-position: calc(var(--mtc-drift, 0px) * 1) center;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 16%,
    #000 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 16%,
    #000 84%,
    transparent 100%
  );
}

/* ------------------------------------------------- Section-edge decorations
 * Each decoration is three pieces in a row: a stretching run, the fixed-size
 * curve, another stretching run. Only the runs flex, so the curve keeps its
 * drawn shape at every viewport width — stretching one full-width SVG squashed
 * it differently at every size.
 *
 * The flex ratios put the step at 65% of the width.
 */
.mtc-quote__rule,
.mtc-edge-rule,
.mtc-edge-wave {
  display: flex;
  align-items: stretch;
}

.mtc-quote__rule svg,
.mtc-edge-rule svg,
.mtc-edge-wave svg {
  flex: 0 0 72px;
  width: 72px;
  height: 100%;
}

.mtc-edge__run,
.mtc-edge__fill {
  position: relative;
  display: block;
}

.mtc-edge__run--lo,
.mtc-edge__fill--lo { flex: 65 1 0; }

.mtc-edge__run--hi,
.mtc-edge__fill--hi { flex: 35 1 0; }

/* Rule: a 2px line, low on the left of the curve and high on the right. */
.mtc-edge__run::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentcolor;
}

/* Flush with the curve's stroke: the path runs along y=59 and y=1 with a 2px
   stroke, so it covers 58–60 and 0–2. Insetting these by 1px offset the joins. */
.mtc-edge__run--lo::after { bottom: 0; }
.mtc-edge__run--hi::after { top: 0; }

/* Wave: solid fill, thin on the left of the curve and full height on the right.
   The left run carries the section's own gradient sized to the viewport so the
   colour lines up exactly; past 59% that gradient is flat green, which is what
   the curve and the right run use. */
.mtc-edge__fill--lo {
  align-self: flex-end;
  height: 0;
}

.mtc-edge__fill--hi {
  background: var(--mtc-green);
}

.mtc-edge-wave svg { color: var(--mtc-green); }

/* The rule keeps its cyan-to-green ramp across the three pieces: each carries
   its own slice, matched at the joins. Over 72px the curve's colour barely
   shifts, so a solid mid-tone there is imperceptible. */
.mtc-quote__rule .mtc-edge__run--lo::after,
.mtc-edge-rule .mtc-edge__run--lo::after {
  background: linear-gradient(90deg, var(--mtc-cyan), #00f1d2);
}
.mtc-quote__rule .mtc-edge__run--hi::after,
.mtc-edge-rule .mtc-edge__run--hi::after {
  background: linear-gradient(90deg, #00f1d2, var(--mtc-green));
}
.mtc-quote__rule svg,
.mtc-edge-rule svg {
  color: #00f1d2;
}

/* Card tag, top-right — same treatment as the activity-card tags. */
.mtc-solution__tag {
  position: absolute;
  top: var(--mtc-space-16);
  right: var(--mtc-space-16);
  padding: var(--mtc-space-4) var(--mtc-space-12);
  border-radius: 3px 3px 3px 12px;
  background: var(--mtc-lake-blue);
  font-family: var(--mtc-font-display);
  font-weight: var(--mtc-weight-display);
  font-size: var(--mtc-fs-micro);
  color: var(--mtc-white);
}

/* --------------------------------------------- Programme activities, dark
 * The client asked for the dark treatment from the Plug and Play reference:
 * navy card, white copy, flat chip. The gradient over the photo is not done
 * yet — that was left for a later pass.
 */
.mtc-activities__card {
  background: var(--mtc-lake-blue);
  border-color: transparent;
}

/* The photo dissolves into the card instead of ending on a hard edge, as in
   the Plug and Play reference. The overlay sits above the image but below the
   tag, so the chip stays legible. */
.mtc-activities__media {
  position: relative;
}

.mtc-activities__card .mtc-activities__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 60%,
    color-mix(in srgb, var(--mtc-lake-blue) 30%, transparent) 82%,
    color-mix(in srgb, var(--mtc-lake-blue) 85%, transparent) 100%
  );
  pointer-events: none;
}

.mtc-activities__tag {
  z-index: 1;
}

.mtc-activities__card .mtc-activities__card-title {
  color: var(--mtc-white);
}

.mtc-activities__card .mtc-activities__card-desc {
  color: var(--mtc-on-dark-75);
}

.mtc-activities__tag {
  background: var(--mtc-lake-blue);
  color: var(--mtc-white);
}

/* Play badge over a story image that links out to its film. */
.mtc-stories__play {
  position: relative;
  display: block;
}

.mtc-stories__play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--mtc-white);
}

.mtc-stories__play-badge::before {
  content: "";
  position: absolute;
  width: var(--mtc-play-size);
  height: var(--mtc-play-size);
  border-radius: 50%;
  background: color-mix(in srgb, var(--mtc-navy) 40%, transparent);
  transition: background-color var(--mtc-duration) var(--mtc-ease),
              transform var(--mtc-duration) var(--mtc-ease);
}

.mtc-stories__play-badge svg {
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: 2px;   /* optical centring of the triangle */
  transition: transform var(--mtc-duration) var(--mtc-ease);
}

/* Darkens and grows a little on hover, so the affordance reads without the
   badge competing with the photograph at rest. */
.mtc-stories__play:hover .mtc-stories__play-badge::before {
  background: color-mix(in srgb, var(--mtc-navy) 68%, transparent);
  transform: scale(1.12);
}

.mtc-stories__play:hover .mtc-stories__play-badge svg {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .mtc-stories__play-badge::before,
  .mtc-stories__play-badge svg { transition: none; }
  .mtc-stories__play:hover .mtc-stories__play-badge::before,
  .mtc-stories__play:hover .mtc-stories__play-badge svg { transform: none; }
}

/* ------------------------------------------------------------------ Lightbox
 * A native <dialog>, so focus trapping and Escape come for free.
 */
.mtc-lightbox {
  width: min(92vw, 1100px);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.mtc-lightbox::backdrop {
  background: color-mix(in srgb, var(--mtc-navy) 88%, transparent);
}

.mtc-lightbox__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--mtc-radius-lg);
  overflow: hidden;
  background: #000;
}

.mtc-lightbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mtc-lightbox__close {
  position: absolute;
  top: -46px;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--mtc-white);
}

.mtc-lightbox__close svg { width: 22px; height: 22px; }

.mtc-lightbox__close:hover { color: var(--mtc-green); }

@media (max-width: 600px) {
  /* No room above the video on a phone: sit the control inside the frame. */
  .mtc-lightbox__close {
    top: var(--mtc-space-8);
    right: var(--mtc-space-8);
    background: color-mix(in srgb, var(--mtc-navy) 65%, transparent);
    border-radius: 50%;
    z-index: 1;
  }
}