/* =========================================================================
   PAGE: MAFO (mafo.html) — page-specific CSS.
   @imported by ../styles.css. All rules scoped under .page-mafo so the
   deconstruction can copy this file verbatim into the Blade @section('css').
   ========================================================================= */

/* ---------- Anti-cascade overrides (defeat layout.min.css + bootstrap.min.css) ---------- */
.page-mafo a:link,
.page-mafo a:visited,
.page-mafo a:hover,
.page-mafo a:focus,
.page-mafo a:active { color: inherit; text-decoration: none; }

.page-mafo button {
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.page-mafo img { display: block; max-width: 100%; }

.page-mafo ul { list-style: none; padding: 0; margin: 0; }

.page-mafo .container {
  width: 1320px;
  max-width: 1320px;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Re-assert shared footer link colors (the link reset above out-specifies the
   shared .footer__links a rule and would otherwise turn them body-black). */
.page-mafo .footer__links a:link,
.page-mafo .footer__links a:visited,
.page-mafo .footer__links a:active { color: var(--color-neutral-lighter); }
.page-mafo .footer__links a:hover,
.page-mafo .footer__links a:focus { color: #ffffff; }

/* Shared mobile-nav Products toggle keeps its global padding. */
.page-mafo .mobile-nav__products-toggle { padding: 4px 6px; }

/* ---------- Page shell / sticky footer ---------- */
.page-mafo {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The absolutely-positioned .mafo-contact__gradient bleeds past the footer and
     would lengthen the page (empty band under the footer). Clip it at the page
     wrapper — which ends at the footer — instead of touching the shared footer.
     `clip` (not hidden) doesn't create a scroll container, so the fixed nav and
     any sticky descendants are unaffected. */
  overflow: clip;
}
.page-mafo .mafo-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: 115px;       /* clears the fixed floating nav */
}
.page-mafo .footer-wrap {
  margin-top: 80px;
  margin-bottom: 30px;
}

/* ===========================================================
   SECTION TITLE + SUBTITLE (shared across sections)
   =========================================================== */
/* Type comes from the shared `.headline-small` class. */
.page-mafo .mafo-section-title {
  margin: 0 0 32px;
}
.page-mafo .mafo-section-sub {
  margin: 0 0 32px;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-title-small);       /* 28 */
  line-height: 1.3;
  color: var(--color-red-300);            /* #ec6663 — design accent sub-heading */
}
/* Sections that carry a sub-heading: tighten the title→sub gap to 8px. */
.page-mafo .mafo-demand > .mafo-section-title,
.page-mafo .mafo-supply > .mafo-section-title,
.page-mafo .mafo-ai > .mafo-section-title { margin-bottom: 8px; }

/* ===========================================================
   HERO — pink gradient card + partner strip
   =========================================================== */
.page-mafo .mafo-hero__card {
  background-image: linear-gradient(107deg, rgba(228, 37, 33, 0.14) 26%, rgba(217, 71, 214, 0.14) 99%);
  border-radius: 32px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
/* Grid so the sub can reflow full-width below at tablet/mobile (matches Figma)
   without breaking the desktop left-stack + right-image layout. */
.page-mafo .mafo-hero__top {
  display: grid;
  grid-template-columns: 552px 603px;
  justify-content: space-between;
  align-content: center;
  grid-template-areas:
    "logo    media"
    "title   media"
    "sub     media"
    "actions media";
}
.page-mafo .mafo-hero__logo { grid-area: logo; width: 304px; height: auto; margin-bottom: 32px; }
.page-mafo .mafo-hero__title {
  grid-area: title;
  margin: 0 0 12px;
  font-family: var(--font-family-headline);
  font-weight: 500;
  font-size: var(--fs-headline-small);    /* 40 desktop / 32 ≤1023 */
  line-height: 1.28;
  color: var(--color-neutral-1000);
}
.page-mafo .mafo-hero__sub {
  grid-area: sub;
  margin: 0 0 32px;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-large);        /* 22 desktop / 18 ≤1023 */
  line-height: 1.45;
  color: var(--color-neutral-600);
}
.page-mafo .mafo-hero__actions { grid-area: actions; display: flex; gap: 16px; flex-wrap: wrap; }
.page-mafo .mafo-hero__btn {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--fs-body-extra-small);  /* 14 */
  line-height: 20px;
}
.page-mafo .mafo-hero__btn--light {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  color: #0a0a0a;
}
.page-mafo .mafo-hero__btn--light:hover { background: var(--color-neutral-100); }
.page-mafo .mafo-hero__media { grid-area: media; align-self: center; width: 603px; }
.page-mafo .mafo-hero__media img,
.page-mafo .mafo-hero__video {
  display: block;
  width: 100%;
  height: auto;             /* defeat the height="339" attr so aspect-ratio drives height */
  aspect-ratio: 603 / 339;
  object-fit: cover;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.14);
}
.page-mafo .mafo-hero__video { background: #000; }
.page-mafo .mafo-hero__logos {
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.page-mafo .mafo-hero__logos img { width: auto; flex-shrink: 1; min-width: 0; }

/* ===========================================================
   CAPABILITY CHIPS — 6 coloured icon cards (3 per row)
   =========================================================== */
.page-mafo .mafo-chips {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 28px;
}
.page-mafo .mafo-chip {
  width: calc((100% - 56px) / 3);
  min-height: 104px;
  background: var(--color-light-blue-100);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  backdrop-filter: blur(3.4px);
  -webkit-backdrop-filter: blur(3.4px);
}
.page-mafo .mafo-chip__icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-mafo .mafo-chip__icon img { width: 32px; height: 32px; }
.page-mafo .mafo-chip__label {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-large);        /* 22 */
  line-height: 1.2;
  color: var(--color-neutral-1000);
}
.page-mafo .mafo-chip__icon--red400    { background: var(--color-red-400); }
.page-mafo .mafo-chip__icon--yellow400 { background: var(--color-yellow-400); }
.page-mafo .mafo-chip__icon--blue400   { background: var(--color-blue-400); }
.page-mafo .mafo-chip__icon--blue300   { background: var(--color-blue-300); }
.page-mafo .mafo-chip__icon--neutral400{ background: var(--color-neutral-400); }
.page-mafo .mafo-chip__icon--red300    { background: var(--color-red-300); }

/* ===========================================================
   KEY FACTS — 4 coloured stat cards (shared .fact-card pattern)
   =========================================================== */
.page-mafo .mafo-facts { margin-top: 128px; }
.page-mafo .mafo-facts__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-mafo .fact-card {
  width: 300px;
  height: 172px;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(3.4px);
  -webkit-backdrop-filter: blur(3.4px);
}
.page-mafo .mafo-facts__grid .fact-card:nth-child(2) { width: 319px; }
.page-mafo .fact-card--blue    { background: var(--color-blue-100); }
.page-mafo .fact-card--yellow  { background: var(--color-yellow-100); }
.page-mafo .fact-card--red     { background: var(--color-red-100); }
.page-mafo .fact-card--neutral { background: var(--color-neutral-100); }
.page-mafo .fact-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.page-mafo .fact-card__num {
  margin: 0;
  font-family: var(--font-family-headline);
  font-weight: 600;
  font-size: var(--fs-title-large);       /* 36 */
  line-height: 1.2;
  letter-spacing: -0.36px;
  color: var(--color-neutral-800);        /* #231b1b */
  white-space: nowrap;
}
.page-mafo .fact-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-extra-small);
  line-height: 1.2;
  white-space: nowrap;
}
.page-mafo .fact-card__chip img { width: 16px; height: 16px; }
.page-mafo .fact-card--blue    .fact-card__chip { background: var(--color-blue-200);    color: var(--color-blue-300); }
.page-mafo .fact-card--yellow  .fact-card__chip { background: var(--color-yellow-300);  color: var(--color-yellow-600); }
.page-mafo .fact-card--red     .fact-card__chip { background: var(--color-red-200);     color: var(--color-red-300); }
.page-mafo .fact-card--neutral .fact-card__chip { background: var(--color-neutral-200); color: var(--color-neutral-400); }
.page-mafo .fact-card__label {
  margin: 0;
  padding: 12px;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-small);
  line-height: 1.5;
  color: var(--color-neutral-1000);
}

/* ===========================================================
   WHAT IS MAFO — intro + red "Core capabilities" card
   =========================================================== */
.page-mafo .mafo-what { margin-top: 128px; }
.page-mafo .mafo-what__card {
  background: var(--color-light-blue-100);
  border-radius: 32px;
  padding: 48px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  box-shadow: 0 32px 32px rgba(0, 0, 0, 0.14);
}
.page-mafo .mafo-what__intro { flex: 0 0 555px; max-width: 555px; padding: 0 51px; }
.page-mafo .mafo-what__heading {
  margin: 0 0 16px;
  font-family: var(--font-family-body);
  font-weight: 600;
  font-size: var(--fs-title-small);       /* 28 */
  line-height: 1.3;
  color: var(--color-neutral-1000);
}
.page-mafo .mafo-what__text {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);       /* 18 */
  line-height: 1.5;
  color: var(--color-neutral-1000);
}
.page-mafo .mafo-what__cap-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.page-mafo .mafo-cap {
  width: 612px;
  max-width: 100%;
  background: var(--color-neutral-0);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-mafo .mafo-cap__header {
  background: var(--color-red-400);
  border-radius: var(--radius-sm);
  padding: 13px 12px;       /* ~13px red inset around the 64px white icon (Figma) */
  display: flex;
  align-items: center;
  gap: 20px;
}
.page-mafo .mafo-cap__icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-mafo .mafo-cap__icon img { width: 32px; height: 32px; }
.page-mafo .mafo-cap__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-large);        /* 22 */
  line-height: 1.2;
  color: var(--color-neutral-0);
}
.page-mafo .mafo-cap__cols { display: flex; gap: 12px; }
.page-mafo .mafo-cap__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
}
.page-mafo .mafo-cap__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
}
.page-mafo .mafo-cap__item img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }
.page-mafo .mafo-cap__item span {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);       /* 18 */
  line-height: 1.4;
  color: var(--color-neutral-800);
}

/* ===========================================================
   INSIGHT — red-bar "Positioning" quote (Demand + Supply)
   =========================================================== */
.page-mafo .mafo-insight {
  margin-top: 32px;
  max-width: 740px;          /* Figma: Positioning block is 740 wide, not full-bleed */
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
.page-mafo .mafo-insight__bar {
  flex: 0 0 12px;
  width: 12px;
  align-self: stretch;
  border-radius: 62px;
  background: var(--color-red-400);
}
.page-mafo .mafo-insight__title {
  margin: 0 0 12px;
  font-family: var(--font-family-body);
  font-weight: 600;
  font-size: var(--fs-title-small);       /* 28 */
  line-height: 1.3;
  color: var(--color-neutral-1000);
}
.page-mafo .mafo-insight__text {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);       /* 18 — Figma body-medium */
  line-height: 1.5;
  color: var(--color-neutral-1000);
}

/* ===========================================================
   MAFO DEMAND — stacked-card slider (sticky stack + GSAP scale)
   =========================================================== */
/* clears the fixed nav when the hero CTAs (or a direct #hash) land on a section */
.page-mafo .mafo-demand,
.page-mafo .mafo-supply { scroll-margin-top: 120px; }
.page-mafo .mafo-demand { margin-top: 128px; }
.page-mafo .demand-stack-outer { position: relative; margin-top: 40px; }
.page-mafo .demand-stack { position: relative; padding-bottom: 40px; }
.page-mafo .demand-card {
  position: sticky;
  top: 110px;
  background: var(--color-light-blue-100);
  border-radius: var(--radius-md);
  /* Top-weighted halo (-2 up-offset · blur 64 · +7 spread) so the seam reads
     clearly on the card stacked behind it. */
  box-shadow: 0px -2px 64px 7px rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 32px;
  margin-bottom: 24px;
  transform-origin: top center;
  will-change: transform;
}
.page-mafo .demand-card:nth-child(2) { top: 130px; }
.page-mafo .demand-card:nth-child(3) { top: 150px; }
.page-mafo .demand-card:nth-child(4) { top: 170px; }
.page-mafo .demand-card:nth-child(5) { top: 190px; }
.page-mafo .demand-card:last-child { margin-bottom: 0; }
/* Left column is a fixed 635px zone with the 436px text block centred inside
   it (matches Figma Frame 622566/622421); right column fills the rest with the
   426px media card centred. */
.page-mafo .demand-card__text-col {
  width: 635px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-mafo .demand-card__text { width: 436px; max-width: 100%; }
.page-mafo .demand-card__media-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-mafo .demand-card__title {
  margin: 0 0 12px;
  font-family: var(--font-family-headline);
  font-weight: 400;
  font-size: var(--fs-title-small);       /* 28 */
  line-height: 1.3;
  color: var(--color-neutral-1000);
}
.page-mafo .demand-card__desc {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);       /* 18 */
  line-height: 1.5;
  color: var(--color-neutral-1000);
}
.page-mafo .demand-card__media {
  width: 426px;
  max-width: 100%;
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-mafo .demand-card__media--blue   { background: var(--color-blue-100); }
.page-mafo .demand-card__media--yellow { background: var(--color-yellow-200); }
.page-mafo .demand-card__media--red    { background: var(--color-red-100); }
.page-mafo .demand-card__media-head { display: flex; align-items: center; gap: 20px; }
.page-mafo .demand-card__media-icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-mafo .demand-card__media-icon img { width: 32px; height: 32px; }
.page-mafo .demand-card__media-title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-large);        /* 22 */
  line-height: 1.25;
  color: var(--color-neutral-1000);
}
.page-mafo .demand-card__list {
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-mafo .demand-card__list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; }
.page-mafo .demand-card__list img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }
.page-mafo .demand-card__list span {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);       /* 18 */
  line-height: 1.4;
  color: var(--color-neutral-1000);
}

/* ===========================================================
   CARD GRID — Supply + AI Decision (mafo-card, 3 per row)
   =========================================================== */
.page-mafo .mafo-supply { margin-top: 128px; }
.page-mafo .mafo-ai { margin-top: 128px; }
.page-mafo .mafo-cardgrid {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px 24px;
  align-items: stretch;
}
.page-mafo .mafo-ai .mafo-cardgrid { margin-top: 32px; }
.page-mafo .mafo-card {
  width: calc((100% - 48px) / 3);
  background: var(--color-light-blue-100);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(3.4px);
  -webkit-backdrop-filter: blur(3.4px);
}
.page-mafo .mafo-card__head { display: flex; align-items: center; gap: 20px; }
.page-mafo .mafo-card__icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-mafo .mafo-card__icon img { width: 32px; height: 32px; }
.page-mafo .mafo-card__icon--red400  { background: var(--color-red-400); }
.page-mafo .mafo-card__icon--yellow400{ background: var(--color-yellow-400); }
.page-mafo .mafo-card__icon--blue400 { background: var(--color-blue-400); }
.page-mafo .mafo-card__icon--blue300 { background: var(--color-blue-300); }
.page-mafo .mafo-card__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-large);        /* 22 */
  line-height: 1.25;
  color: var(--color-neutral-1000);
}
.page-mafo .mafo-card__slot {
  flex: 1 1 auto;
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-mafo .mafo-card__lead {
  margin: 0;
  background: #ebebeb;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: var(--fs-body-medium);       /* 18 */
  line-height: 1.3;
  color: var(--color-neutral-1000);
}
.page-mafo .mafo-card__list { display: flex; flex-direction: column; gap: 12px; }
.page-mafo .mafo-card__list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; }
.page-mafo .mafo-card__list img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }
.page-mafo .mafo-card__list span {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);       /* 18 */
  line-height: 1.4;
  color: var(--color-neutral-1000);
}
.page-mafo .mafo-card__text {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);       /* 18 */
  line-height: 1.5;
  color: var(--color-neutral-1000);
}

/* ===========================================================
   SUPPLY SLIDER — desktop/tablet = plain grid (Swiper destroyed),
   mobile = Swiper one-card slider with arrow nav (js/mafo.js)
   =========================================================== */
.page-mafo .mafo-supply__slider { margin-top: 40px; }
.page-mafo .mafo-slider__nav { display: none; }   /* arrows: mobile only */

/* ≥768: Swiper is destroyed, so the wrapper/slides are a plain grid */
@media (min-width: 768px) {
  .page-mafo .mafo-supply__swiper { overflow: visible; }
  .page-mafo .mafo-supply__swiper .swiper-wrapper {
    display: flex; flex-wrap: wrap; gap: 48px 24px; height: auto; transform: none !important;
  }
  .page-mafo .mafo-supply__swiper .swiper-slide { width: calc((100% - 48px) / 3); height: auto; flex-shrink: 0; }
  .page-mafo .mafo-supply__swiper .mafo-card { width: 100%; height: 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .page-mafo .mafo-supply__swiper .swiper-wrapper { gap: 12px; align-items: flex-start; }
  .page-mafo .mafo-supply__swiper .swiper-slide { width: calc((100% - 12px) / 2); }
}

/* Shared site slider arrow component (copied verbatim from home.css .arrow-btn,
   forked-library pattern) — reused, NOT recreated, on the Supply slider. */
.page-mafo .arrow-btn {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 300px;
  background: transparent;
  border: 2px solid #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.page-mafo .arrow-btn img { width: 14px; height: 14px; filter: brightness(0); }
.page-mafo .arrow-btn--ghost img { transform: rotate(180deg); }
.page-mafo .arrow-btn:hover:not(:disabled):not(.swiper-button-disabled) { background: #000; }
.page-mafo .arrow-btn:hover:not(:disabled):not(.swiper-button-disabled) img { filter: brightness(0) invert(1); }
.page-mafo .arrow-btn.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* ===========================================================
   WHY MAFO — Traditional vs MAFO Intelligence Layer
   =========================================================== */
.page-mafo .mafo-why { margin-top: 128px; }
.page-mafo .mafo-why__cols { display: flex; gap: 64px; align-items: flex-start; }
.page-mafo .mafo-compare {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-light-blue-100);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 32px 32px rgba(0, 0, 0, 0.14);
}
.page-mafo .mafo-compare__head { display: flex; align-items: center; gap: 20px; }
.page-mafo .mafo-compare__icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-mafo .mafo-compare__icon img { width: 32px; height: 32px; }
.page-mafo .mafo-compare__icon--grey { background: var(--color-neutral-300); }
.page-mafo .mafo-compare__icon--red  { background: var(--color-red-400); }
.page-mafo .mafo-compare__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
  color: var(--color-neutral-800);
}
.page-mafo .mafo-compare__list { display: flex; flex-direction: column; gap: 12px; }
.page-mafo .mafo-compare__item {
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
  padding: 24px;            /* Figma: white box p-12 + inner row p-12 = 24 content inset */
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.page-mafo .mafo-compare__item img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 3px; }
.page-mafo .mafo-compare__item span {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: 20px;          /* Figma literal 20 */
  line-height: 1.3;
  color: var(--color-neutral-1000);
}

/* ===========================================================
   CONTACT — multicolour gradient bleeds BEHIND a glass card
   =========================================================== */
.page-mafo .mafo-contact {
  position: relative;
  margin-top: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Gradient is LARGER than the card and centred slightly right-and-below it, so
   it bleeds well beyond the card on every side (matches Figma node 3279:1975 —
   1591×1035 vs the 1296×575 card). Never clipped: .mafo-contact has no overflow
   clip; the card's own overflow:hidden only clips the card's content. */
.page-mafo .mafo-contact__gradient {
  position: absolute;
  top: 79%;
  left: 62%;
  transform: translate(-50%, -50%);
  width: 2300px;
  max-width: none;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.page-mafo .mafo-contact__card {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 32px;
  padding: 66px 59px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(15.1px);
  -webkit-backdrop-filter: blur(15.1px);
  box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  overflow: hidden;
}
.page-mafo .mafo-contact__intro { flex: 1 1 460px; min-width: 300px; }
/* Type comes from the shared `.headline-small` class. */
.page-mafo .mafo-contact__title {
  margin: 0 0 10px;
}
.page-mafo .mafo-contact__text {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-title-small);       /* 28 — design uses title-small grey */
  line-height: 1.35;
  color: var(--color-neutral-400);        /* #858080 */
}
.page-mafo .mafo-contact__form-wrap {
  flex: 0 0 444px;
  max-width: 100%;
  background: var(--color-light-blue-100);
  border-radius: var(--radius-md);
  padding: 32px;
  border: 2px solid var(--color-neutral-200);
}
/* Form heading: shared `.ui-form__title` in global-2026.css (was a per-page fork). */

/* ===========================================================
   SHARED FORM + BUTTON LIBRARY (page-neutral). Copied from the
   repo fork in career-detail.css — mafo.css references .btn /
   .btn--dark / .ui-form / .field* / .checkbox* but doesn't define
   them (the prototype sourced these from the global styles.css).
   `.form-success-msg*` is the site-wide standard in global-2026.css.
   =========================================================== */
/* =========================================================================
   SHARED COMPONENT LIBRARY — buttons + form controls + success message
   (mirrored from prototype styles.css; see header note re: promotion)
   ========================================================================= */

/* ---- Buttons (primary CTA = black). Compound .btn.btn--dark (0,2,0) beats
   the page's anti-cascade `.page-career-detail button { background:transparent }`
   reset; the :link/:visited/... states (0,3,0) beat the `a { color:inherit }`
   reset so an <a> button keeps its white label. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-family-body);
  border: 0;
  cursor: pointer;
}
.btn.btn--dark {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  font-weight: 500;
  font-size: var(--fs-body-extra-small);
  line-height: 20px;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, transform 0.05s;
}
.btn.btn--dark:link,
.btn.btn--dark:visited,
.btn.btn--dark:hover,
.btn.btn--dark:focus,
.btn.btn--dark:active { color: var(--color-btn-primary-fg); }
.btn.btn--dark:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn.btn--dark:active:not(:disabled) { transform: scale(0.99); }
.btn.btn--dark:disabled,
.btn.btn--dark[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--block { width: 100%; }

/* ---- Form controls (shadcn base). ---- */
.ui-form { display: flex; flex-direction: column; gap: 24px; }
/* Honeypot — hidden from real users; bots that fill it are rejected server-side
   (matches the contact-us input[name="surname"] spam trap). */
.ui-form input[name="surname"] { display: none; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field__label {
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-extra-small);   /* 14px */
  line-height: 20px;
  color: #0a0a0a;
}
.field__control {
  width: 100%;
  min-height: 36px;
  padding: 7.5px 12px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-extra-small);   /* 14px */
  line-height: 20px;
  color: #0a0a0a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field__control::placeholder { color: #737373; }
.field__control:focus {
  border-color: var(--color-blue-300);
  box-shadow: 0 0 0 3px rgba(106, 102, 228, 0.15);
}
.field__control:invalid:not(:placeholder-shown),
.field__control.is-invalid {
  border-color: var(--color-red-400);
  box-shadow: 0 0 0 3px rgba(228, 37, 33, 0.10);
}

/* File control — styled <label> wrapping a visually-hidden native input. */
.field__control--file {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
}
.field__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.field__file-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #737373;
}
.field__file-text strong { font-weight: 600; color: #737373; }
.field__file-icon { flex: 0 0 16px; width: 16px; height: 16px; }

/* Checkbox — 16px box, custom check, shadcn look. */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkbox__box {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid #d4d4d4;
  border-radius: var(--radius-xs);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.checkbox input:checked + .checkbox__box {
  background: var(--color-btn-primary-bg);
  border-color: var(--color-btn-primary-bg);
}
.checkbox input:checked + .checkbox__box::after {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0, -1px);
}
.checkbox.is-invalid .checkbox__box { border-color: var(--color-red-400); }
.checkbox__label {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-extra-small);
  line-height: 20px;
  color: #404040;
}

/* ---- Form success message ----
   Now the SHARED site-wide standard in global-2026.css (`.form-success-msg*`,
   revealed by `form.is-success`). This page's form uses the `--on-white`
   variant (white form card → grey slot). Nothing to define here. ---- */

/* ===========================================================
   TABLET (≤1023)
   =========================================================== */
@media (max-width: 1023px) {
  /* Figma tablet frame uses the SMALL typography mode (= mobile scale):
     body-large 18, title-large 32, etc. Scoped to .page-mafo.
     headline-small is intentionally NOT overridden here — it follows the
     global token (40 desktop/tablet, 32 mobile) so MAFO is not an exception. */
  .page-mafo {
    --fs-headline-large:   48px;
    --fs-headline-medium:  40px;
    --fs-title-large:      32px;
    --fs-title-medium:     28px;
    --fs-title-small:      25px;
    --fs-body-large:       18px;
    --fs-body-medium:      16px;
    --fs-body-small:       14px;
    --fs-body-extra-small: 12px;
  }
  .page-mafo .container { width: 100%; max-width: 100%; padding-left: 32px; padding-right: 32px; }
  .page-mafo .mafo-main { padding-top: 96px; }

  /* Between-blocks rhythm — tablet step (128 desktop / 80 tablet / 40 mobile) */
  .page-mafo .mafo-facts,
  .page-mafo .mafo-what,
  .page-mafo .mafo-demand,
  .page-mafo .mafo-supply,
  .page-mafo .mafo-ai,
  .page-mafo .mafo-why,
  .page-mafo .mafo-contact { margin-top: 80px; }

  /* HERO — logo+H1+buttons left, image right, sub full-width below the row */
  .page-mafo .mafo-hero__card { padding: 16px; border-radius: 16px; gap: 24px; }
  .page-mafo .mafo-hero__top {
    grid-template-columns: 1fr 308px;
    column-gap: 12px;
    grid-template-areas:
      "logo    media"
      "title   media"
      "actions media"
      "sub     sub";
  }
  .page-mafo .mafo-hero__logo { width: 224px; margin-bottom: 24px; }
  .page-mafo .mafo-hero__title { margin-bottom: 24px; font-size: 32px; }  /* hero H1 shrinks to 32 (section titles stay 40) */
  .page-mafo .mafo-hero__actions { margin: 0; align-self: end; }
  .page-mafo .mafo-hero__sub { margin: 32px 0 0; }
  .page-mafo .mafo-hero__media { width: 308px; }
  .page-mafo .mafo-hero__media img { aspect-ratio: 308 / 173; }
  .page-mafo .mafo-hero__logos { justify-content: space-between; gap: 8px; }

  .page-mafo .mafo-chip { width: calc((100% - 28px) / 2); }

  /* KEY FACTS — 4 narrow cards in ONE row, num + chip stacked vertically */
  .page-mafo .mafo-facts__grid { flex-wrap: nowrap; gap: 16px; }
  .page-mafo .mafo-facts__grid .fact-card,
  .page-mafo .mafo-facts__grid .fact-card:nth-child(2) { min-width: 167px; height: 149px; padding: 12px 20px; }
  .page-mafo .fact-card__top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .page-mafo .fact-card__num { font-size: var(--fs-title-medium); letter-spacing: -0.28px; }  /* 28 at tablet */
  .page-mafo .fact-card__label { padding: 12px 0 0; }

  .page-mafo .mafo-what__cap-col { flex: 1 1 100%; }
  .page-mafo .mafo-cap { width: 100%; }
  .page-mafo .mafo-what__card { flex-direction: column; align-items: stretch; gap: 32px; padding: 32px; }
  .page-mafo .mafo-what__intro { flex: none; max-width: 100%; padding: 0; }

  /* DEMAND — stays side-by-side (text 261 + media 404), just narrower */
  .page-mafo .demand-card__text-col { width: 261px; }
  .page-mafo .demand-card__text { width: 100%; }
  .page-mafo .demand-card__media { width: 404px; }

  .page-mafo .mafo-card { width: calc((100% - 24px) / 2); }

  .page-mafo .mafo-why__cols { gap: 24px; }

  .page-mafo .mafo-contact__gradient { top: 54%; left: 50%; width: 300%; height: 200%; }
  .page-mafo .mafo-contact__card { padding: 20px; gap: 24px; }
  .page-mafo .mafo-contact__intro { flex: 1 1 100%; }
  .page-mafo .mafo-contact__form-wrap { flex: 1 1 100%; }
}

/* ===========================================================
   TABLET ONLY (768–1023) — card grids fill the row with a 12px gap,
   short cards hug their content (do NOT leak to mobile or desktop)
   =========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-mafo .mafo-cardgrid { gap: 12px; align-items: flex-start; }
  .page-mafo .mafo-cardgrid .mafo-card { width: calc((100% - 12px) / 2); }
}

/* ===========================================================
   MOBILE (≤767)
   =========================================================== */
@media (max-width: 767px) {
  .page-mafo .container { padding-left: 16px; padding-right: 16px; }
  .page-mafo .mafo-main { padding-top: 80px; }

  /* Title→content inside a block — mobile step (32 desktop / 32 tablet / 16 mobile) */
  .page-mafo .mafo-section-title { margin: 0 0 16px; }
  .page-mafo .mafo-section-sub { margin: 0 0 16px; }

  /* Stacked pieces inside a block (sub→Positioning, Positioning→cards, sub→grid)
     — 16 on mobile, same as title→content */
  .page-mafo .mafo-insight,
  .page-mafo .demand-stack-outer,
  .page-mafo .mafo-supply__slider,
  .page-mafo .mafo-ai .mafo-cardgrid { margin-top: 16px; }

  /* HERO — single column: logo → H1 → buttons → image → sub, then logos */
  .page-mafo .mafo-hero__card { padding: 16px; gap: 24px; }
  .page-mafo .mafo-hero__top {
    grid-template-columns: 1fr;
    column-gap: 0;
    grid-template-areas: "logo" "title" "actions" "media" "sub";
  }
  .page-mafo .mafo-hero__title { margin-bottom: 24px; }
  .page-mafo .mafo-hero__actions { align-self: stretch; margin: 0 0 32px; gap: 8px; }
  .page-mafo .mafo-hero__actions .btn { flex: 1 1 0; }
  .page-mafo .mafo-hero__media { width: 100%; margin-bottom: 32px; }
  .page-mafo .mafo-hero__media img,
  .page-mafo .mafo-hero__video { aspect-ratio: 337 / 189; }
  .page-mafo .mafo-hero__sub { margin: 0; }
  /* logos flow left→right and are smaller so ~4 fit per row (Figma mobile strip) */
  .page-mafo .mafo-hero__logos { flex-wrap: wrap; justify-content: space-between; gap: 18px 16px; }
  .page-mafo .mafo-hero__logos img { height: auto; max-height: 16px; width: auto; }

  .page-mafo .mafo-chips { gap: 16px; margin-top: 40px; }
  .page-mafo .mafo-chip { width: 100%; min-height: 0; }

  /* KEY FACTS — 2×2, 16px row gap */
  .page-mafo .mafo-facts { margin-top: 40px; }
  .page-mafo .mafo-facts__grid { flex-wrap: wrap; gap: 16px 13px; }
  .page-mafo .mafo-facts__grid .fact-card,
  .page-mafo .mafo-facts__grid .fact-card:nth-child(2) { width: calc((100% - 13px) / 2); min-width: 0; height: 149px; }

  .page-mafo .mafo-what { margin-top: 40px; }
  .page-mafo .mafo-what__card { padding: 16px; }
  /* #31 — ONE white box around all 7 items; flatten the per-column boxes so the
     seam gap equals the in-column gap (was box-pad + cols-gap + box-pad at the seam) */
  .page-mafo .mafo-cap__cols {
    flex-direction: column; gap: 12px;
    background: var(--color-neutral-0); border-radius: var(--radius-sm); padding: 12px;
  }
  .page-mafo .mafo-cap__col { padding: 0; background: transparent; border-radius: 0; }

  .page-mafo .mafo-demand,
  .page-mafo .mafo-supply,
  .page-mafo .mafo-ai,
  .page-mafo .mafo-why { margin-top: 40px; }

  /* DEMAND — simple block of cards, NO sticky-stacking on mobile */
  .page-mafo .demand-stack { padding-bottom: 0; }
  .page-mafo .demand-card {
    position: static; top: auto; transform: none; will-change: auto;
    padding: 20px; margin-bottom: 16px;
    flex-direction: column; align-items: stretch; gap: 24px;
  }
  .page-mafo .demand-card__text-col { width: 100%; justify-content: flex-start; }
  .page-mafo .demand-card__media-col { width: 100%; justify-content: flex-start; }
  .page-mafo .demand-card__media { width: 100%; padding: 16px; }

  /* SUPPLY — Swiper one-card slider (init by js/mafo.js); show the arrow nav */
  .page-mafo .mafo-supply__swiper .mafo-card { width: 100%; height: auto; }
  .page-mafo .mafo-slider__nav { display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px; }

  /* AI — vertical stack, one card per row; #33 tighten gap between cards (was 48) */
  .page-mafo .mafo-ai .mafo-card { width: 100%; }
  .page-mafo .mafo-ai .mafo-cardgrid { gap: 24px; }

  /* WHY — horizontal scroll, MAFO column FIRST (Figma mobile order).
     overflow-x:auto also clips the Y axis, which would cut the cards'
     0 32px 32px shadow — so pad the scroll viewport for shadow room and
     cancel it with net-zero negative margins (also bleeds the track to the
     screen edges) so the section spacing is unchanged. */
  .page-mafo .mafo-why__cols {
    flex-direction: row; flex-wrap: nowrap; gap: 16px;
    align-items: stretch;            /* both cards equal height */
    overflow-x: auto;
    padding: 12px 16px 64px;
    margin: -12px -16px -56px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .page-mafo .mafo-compare { flex: 0 0 283.36px; min-width: 283.36px; scroll-snap-align: start; }
  .page-mafo .mafo-compare:nth-child(2) { order: -1; }   /* MAFO Intelligence Layer first */
  .page-mafo .mafo-compare__title { font-size: 18px; }                    /* #35 */
  .page-mafo .mafo-compare__item { padding: 12px; align-items: center; }  /* #34 centre icon ↔ text */
  .page-mafo .mafo-compare__item img { margin-top: 0; }
  .page-mafo .mafo-compare__item span { font-size: 14px; }               /* #34 bullets 14px */
  /* break "Limited validation visibility" onto 2 lines so the last item
     matches the MAFO card's 2-line last item (mobile only) */
  .page-mafo .mafo-br-mob { display: block; }

  .page-mafo .mafo-contact { margin-top: 40px; }
  .page-mafo .mafo-contact__gradient { top: 54%; left: 50%; width: 400%; }
  .page-mafo .mafo-contact__card { padding: 16px; gap: 20px; border-radius: 24px; }
  .page-mafo .mafo-contact__form-wrap { padding: 32px 16px; }
}