/* =========================================================================
   PAGE: i/RTB (irtb.html) — page-specific CSS.
   @imported by ../styles.css. All rules scoped under .page-irtb so the
   deconstruction can copy this file verbatim into the Blade @section('css').
   Built from mafo.css: same components, i/RTB content. Single brand accent
   is YELLOW (vs MAFO red); section sub-headings are neutral grey.
   ========================================================================= */

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

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

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

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

.page-irtb .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-irtb .footer__links a:link,
.page-irtb .footer__links a:visited,
.page-irtb .footer__links a:active { color: var(--color-neutral-lighter); }
.page-irtb .footer__links a:hover,
.page-irtb .footer__links a:focus { color: #ffffff; }

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

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

/* ===========================================================
   SECTION TITLE + SUBTITLE (shared across sections)
   =========================================================== */
/* Type comes from the shared `.headline-small` class. */
.page-irtb .irtb-section-title {
  margin: 0 0 32px;
}
.page-irtb .irtb-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-neutral-400);        /* #858080 — i/RTB sub-heads are grey */
}
/* Sections that carry a sub-heading: tighten the title→sub gap to 8px. */
.page-irtb .irtb-demand > .irtb-section-title,
.page-irtb .irtb-supply > .irtb-section-title { margin-bottom: 8px; }

/* ===========================================================
   HERO — purple→yellow gradient card + partner strip
   =========================================================== */
.page-irtb .irtb-hero__card {
  background-image: linear-gradient(-36.36deg, rgba(235, 184, 252, 0.27) 19.8%, rgba(249, 196, 38, 0.27) 80.8%);
  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-irtb .irtb-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-irtb .irtb-hero__logo { grid-area: logo; width: 265px; height: auto; margin-bottom: 32px; }
.page-irtb .irtb-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-irtb .irtb-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-irtb .irtb-hero__actions { grid-area: actions; display: flex; gap: 16px; flex-wrap: wrap; }
.page-irtb .irtb-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-irtb .irtb-hero__btn--light {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  color: #0a0a0a;
}
.page-irtb .irtb-hero__btn--light:hover { background: var(--color-neutral-100); }
.page-irtb .irtb-hero__media { grid-area: media; align-self: center; width: 603px; }
.page-irtb .irtb-hero__media img,
.page-irtb .irtb-hero__video {
  display: block;
  width: 100%;
  height: auto;
  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-irtb .irtb-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;
}
/* Cap to 27px so the logo strip is the SAME height as MAFO's (51px block:
   12px padding + 27px tallest logo); the taller partner marks (Sovrn,
   MobilityWare, Media.net) scale down to fit. */
.page-irtb .irtb-hero__logos img { width: auto; max-height: 27px; flex-shrink: 1; min-width: 0; }

/* ===========================================================
   CAPABILITY CHIPS — 5 coloured icon cards (3 per row)
   =========================================================== */
.page-irtb .irtb-chips {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 28px;
}
.page-irtb .irtb-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-irtb .irtb-chip__icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-irtb .irtb-chip__icon img { width: 32px; height: 32px; }
.page-irtb .irtb-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-irtb .irtb-chip__icon--red400    { background: var(--color-red-400); }
.page-irtb .irtb-chip__icon--yellow400 { background: var(--color-yellow-400); }
.page-irtb .irtb-chip__icon--blue400   { background: var(--color-blue-400); }
.page-irtb .irtb-chip__icon--neutral400{ background: var(--color-neutral-400); }
.page-irtb .irtb-chip__icon--red300    { background: var(--color-red-300); }

/* ===========================================================
   KEY FACTS — 4 coloured stat cards (shared .fact-card pattern)
   =========================================================== */
.page-irtb .irtb-facts { margin-top: 128px; }
.page-irtb .irtb-facts__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-irtb .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-irtb .irtb-facts__grid .fact-card:nth-child(2) { width: 319px; }
.page-irtb .fact-card--blue    { background: var(--color-blue-100); }
.page-irtb .fact-card--yellow  { background: var(--color-yellow-100); }
.page-irtb .fact-card--red     { background: var(--color-red-100); }
.page-irtb .fact-card--neutral { background: var(--color-neutral-100); }
.page-irtb .fact-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.page-irtb .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-irtb .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-irtb .fact-card__chip img { width: 16px; height: 16px; }
.page-irtb .fact-card--blue    .fact-card__chip { background: var(--color-blue-200);    color: var(--color-blue-300); }
.page-irtb .fact-card--yellow  .fact-card__chip { background: var(--color-yellow-300);  color: var(--color-yellow-600); }
.page-irtb .fact-card--red     .fact-card__chip { background: var(--color-red-200);     color: var(--color-red-300); }
.page-irtb .fact-card--neutral .fact-card__chip { background: var(--color-neutral-200); color: var(--color-neutral-400); }
.page-irtb .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 i/RTB — intro + yellow "Core capabilities" card
   =========================================================== */
.page-irtb .irtb-what { margin-top: 128px; }
.page-irtb .irtb-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-irtb .irtb-what__intro { flex: 0 0 555px; max-width: 555px; padding: 0 51px; }
.page-irtb .irtb-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-irtb .irtb-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-irtb .irtb-what__cap-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.page-irtb .irtb-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-irtb .irtb-cap__header {
  background: var(--color-yellow-400);      /* i/RTB accent (MAFO was red) */
  border-radius: var(--radius-sm);
  padding: 13px 12px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.page-irtb .irtb-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-irtb .irtb-cap__icon img { width: 32px; height: 32px; }
.page-irtb .irtb-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-1000);       /* dark text on yellow header */
}
/* ===========================================================
   ICON LIST — DS component "Icon_list_medium": 24px icon + title +
   description. Used by Core capabilities, the Identity/Agentic demand
   slides and the Supply Yield card.

   Generic, page-neutral class names + a self-contained block, so the
   next page copies this verbatim as `.page-<slug> .icon-list` — the
   forked-library pattern used by .arrow-btn / .btn / .ui-form.
   NOTE: MAFO's `.mafo-gda__item-*` is this same component under a
   page-prefixed name; it should migrate onto these classes.
   =========================================================== */
.page-irtb .icon-list { display: flex; flex-direction: column; gap: 12px; }
/* --slot = the white surface, for when the list sits on a coloured
   card (demand slides). Omit it when the parent is already white. */
.page-irtb .icon-list--slot {
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.page-irtb .icon-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
}
.page-irtb .icon-list__icon { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }
.page-irtb .icon-list__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-irtb .icon-list__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-large);        /* 22 */
  line-height: 1.5;
  color: var(--mobupps-black);
}
.page-irtb .icon-list__desc {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-small);        /* 16 */
  line-height: 1.5;
  color: var(--color-neutral-1000);
}
/* Desktop-only forced break inside a description, to steer an awkward wrap
   (e.g. a one-word last line). Below 1024 the column is narrower and re-wraps
   on its own, so the break is dropped. Same idea as MAFO's .mafo-gda__br. */
@media (max-width: 1023px) {
  .page-irtb .icon-list__br { display: none; }
}

/* ===========================================================
   INSIGHT — yellow-bar "Positioning" quote (Demand + Supply)
   =========================================================== */
.page-irtb .irtb-insight {
  margin-top: 32px;
  max-width: 740px;
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
.page-irtb .irtb-insight__bar {
  flex: 0 0 12px;
  width: 12px;
  align-self: stretch;
  border-radius: 62px;
  background: var(--color-yellow-400);      /* i/RTB accent (MAFO was red) */
}
.page-irtb .irtb-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-irtb .irtb-insight__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);
}

/* ===========================================================
   i/RTB DEMAND — stacked-card slider (sticky stack + GSAP scale)
   =========================================================== */
.page-irtb .irtb-demand,
.page-irtb .irtb-supply { scroll-margin-top: 120px; }
.page-irtb .irtb-demand { margin-top: 128px; }
.page-irtb .demand-stack-outer { position: relative; margin-top: 40px; }
.page-irtb .demand-stack { position: relative; padding-bottom: 40px; }
.page-irtb .demand-card {
  position: sticky;
  top: 110px;
  background: var(--color-light-blue-100);
  border-radius: var(--radius-md);
  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-irtb .demand-card:nth-child(2) { top: 130px; }
.page-irtb .demand-card:nth-child(3) { top: 150px; }
.page-irtb .demand-card:nth-child(4) { top: 170px; }
.page-irtb .demand-card:nth-child(5) { top: 190px; }
.page-irtb .demand-card:last-child { margin-bottom: 0; }
.page-irtb .demand-card__text-col {
  width: 635px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-irtb .demand-card__text { width: 436px; max-width: 100%; }
.page-irtb .demand-card__media-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-irtb .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-irtb .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-irtb .demand-card__media {
  width: 426px;
  max-width: 100%;
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-irtb .demand-card__media--blue   { background: var(--color-blue-100); }
.page-irtb .demand-card__media--yellow { background: var(--color-yellow-200); }
.page-irtb .demand-card__media--red    { background: var(--color-red-100); }
/* Identity + Agentic slides hold title+description items, so their card fills
   the media column (597 on desktop) instead of the 426 default. Two classes
   out-specify the ≤1023 `.demand-card__media` width rule at every breakpoint. */
.page-irtb .demand-card__media.demand-card__media--wide { width: 100%; }
.page-irtb .demand-card__media-head { display: flex; align-items: center; gap: 20px; }
.page-irtb .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-irtb .demand-card__media-icon img { width: 32px; height: 32px; }
.page-irtb .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-irtb .demand-card__list {
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-irtb .demand-card__list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; }
.page-irtb .demand-card__list img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }
.page-irtb .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);
}

/* ===========================================================
   SUPPLY CARDS — irtb-card (desktop/tablet 3+2 grid, mobile Swiper)
   =========================================================== */
.page-irtb .irtb-supply { margin-top: 128px; }
.page-irtb .irtb-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-irtb .irtb-card__head { display: flex; align-items: center; gap: 20px; }
.page-irtb .irtb-card__icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-irtb .irtb-card__icon img { width: 32px; height: 32px; }
.page-irtb .irtb-card__icon--red400  { background: var(--color-red-400); }
.page-irtb .irtb-card__icon--yellow400{ background: var(--color-yellow-400); }
.page-irtb .irtb-card__icon--blue400 { background: var(--color-blue-400); }
.page-irtb .irtb-card__icon--blue300 { background: var(--color-blue-300); }
.page-irtb .irtb-card__icon--neutral400 { background: var(--color-neutral-400); }
.page-irtb .irtb-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-irtb .irtb-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-irtb .irtb-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-irtb .irtb-card__list { display: flex; flex-direction: column; gap: 12px; }
.page-irtb .irtb-card__list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; }
.page-irtb .irtb-card__list img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }
.page-irtb .irtb-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);
}

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

/* ≥768: Swiper is destroyed, so the wrapper/slides are a plain grid */
@media (min-width: 768px) {
  .page-irtb .irtb-supply__swiper { overflow: visible; }
  /* Row and column gaps are both 24 — Figma's Supply grid puts row 2 at y=620
     under a 596-tall row 1. (Was 48 on the row axis, which read as a loose band
     between the two rows.) */
  .page-irtb .irtb-supply__swiper .swiper-wrapper {
    display: flex; flex-wrap: wrap; gap: 24px; height: auto; transform: none !important;
  }
  .page-irtb .irtb-supply__swiper .swiper-slide { width: calc((100% - 48px) / 3); height: auto; flex-shrink: 0; }
  .page-irtb .irtb-supply__swiper .irtb-card { width: 100%; height: 100%; }
  /* Row 1 is a 50/50 pair — Yield + Transparency at 636 each on a 1296 body
     (Figma "Frame 622572": HORIZONTAL, gap 24, both children FILL). Row 2 then
     takes the remaining 3 cards at a third each. Flex `stretch` keeps the pair
     equal height and .irtb-card__slot fills, matching the Figma slots. */
  .page-irtb .irtb-supply__swiper .swiper-slide--half { width: calc((100% - 24px) / 2); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* `stretch` (set explicitly, not left to the default) is what makes cards on
     the same wrap line share the tallest one's height — the white .irtb-card__slot
     then fills, so their bottom edges line up. This was `flex-start`, which let
     each card hug its own content and left row-mates ragged. Stretch equalises
     per wrap line, so a shorter row is never inflated to match a taller one. */
  .page-irtb .irtb-supply__swiper .swiper-wrapper { gap: 12px; align-items: stretch; }
  .page-irtb .irtb-supply__swiper .swiper-slide { width: calc((100% - 12px) / 2); }
  /* Already 2-up here, so the pair needs no special width. */
  .page-irtb .irtb-supply__swiper .swiper-slide--half { 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-irtb .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-irtb .arrow-btn img { width: 14px; height: 14px; filter: brightness(0); }
.page-irtb .arrow-btn--ghost img { transform: rotate(180deg); }
.page-irtb .arrow-btn:hover:not(:disabled):not(.swiper-button-disabled) { background: #000; }
.page-irtb .arrow-btn:hover:not(:disabled):not(.swiper-button-disabled) img { filter: brightness(0) invert(1); }
.page-irtb .arrow-btn.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* ===========================================================
   WHY i/RTB — Traditional vs i/RTB platform
   =========================================================== */
.page-irtb .irtb-why { margin-top: 128px; }
/* stretch, not flex-start: the two comparison cards sit side by side, so they
   share the taller one's height (CR-14). They match naturally on desktop where
   both titles are one line, but "Traditional Programmatic Platforms" wraps at
   ≤1023 and left the pair ragged. */
.page-irtb .irtb-why__cols { display: flex; gap: 64px; align-items: stretch; }
.page-irtb .irtb-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-irtb .irtb-compare__head { display: flex; align-items: center; gap: 20px; }
.page-irtb .irtb-compare__icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-irtb .irtb-compare__icon img { width: 32px; height: 32px; }
.page-irtb .irtb-compare__icon--grey   { background: var(--color-neutral-400); }
.page-irtb .irtb-compare__icon--accent { background: var(--color-yellow-400); }  /* i/RTB (MAFO was red) */
.page-irtb .irtb-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-irtb .irtb-compare__list { display: flex; flex-direction: column; gap: 12px; }
.page-irtb .irtb-compare__item {
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.page-irtb .irtb-compare__item img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 3px; }
/* Mobile-only bullet line breaks (see mobile block) are suppressed on desktop/tablet. */
.page-irtb .irtb-compare__item br { display: none; }
.page-irtb .irtb-compare__item span {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-neutral-1000);
}

/* ===========================================================
   CONTACT — multicolour gradient bleeds BEHIND a glass card
   =========================================================== */
.page-irtb .irtb-contact {
  position: relative;
  margin-top: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-irtb .irtb-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-irtb .irtb-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-irtb .irtb-contact__intro { flex: 1 1 460px; min-width: 300px; }
/* Type comes from the shared `.headline-small` class. */
.page-irtb .irtb-contact__title {
  margin: 0 0 10px;
}
.page-irtb .irtb-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-irtb .irtb-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 mafo.css / career-detail.css — irtb.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.
   =========================================================== */

/* ---- Buttons (primary CTA = black). Compound .btn.btn--dark (0,2,0) beats
   the page's anti-cascade `.page-irtb 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) {
  .page-irtb {
    --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-irtb .container { width: 100%; max-width: 100%; padding-left: 32px; padding-right: 32px; }
  .page-irtb .irtb-main { padding-top: 96px; }

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

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

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

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

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

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

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

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

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

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

  /* Title→content inside a block — mobile step */
  .page-irtb .irtb-section-title { margin: 0 0 16px; }
  .page-irtb .irtb-section-sub { margin: 0 0 16px; }

  /* Stacked pieces inside a block — 16 on mobile */
  .page-irtb .irtb-insight,
  .page-irtb .demand-stack-outer,
  .page-irtb .irtb-supply__slider { margin-top: 16px; }

  /* HERO — single column: logo → H1 → buttons → image → sub, then logos */
  .page-irtb .irtb-hero__card { padding: 16px; gap: 24px; }
  .page-irtb .irtb-hero__top {
    grid-template-columns: 1fr;
    column-gap: 0;
    grid-template-areas: "logo" "title" "actions" "media" "sub";
  }
  .page-irtb .irtb-hero__title { margin-bottom: 24px; }
  .page-irtb .irtb-hero__actions { align-self: stretch; margin: 0 0 32px; gap: 8px; }
  .page-irtb .irtb-hero__actions .btn { flex: 1 1 0; }
  .page-irtb .irtb-hero__media { width: 100%; margin-bottom: 32px; }
  .page-irtb .irtb-hero__media img,
  .page-irtb .irtb-hero__video { aspect-ratio: 337 / 189; }
  .page-irtb .irtb-hero__sub { margin: 0; }
  .page-irtb .irtb-hero__logos { flex-wrap: wrap; justify-content: space-between; gap: 18px 16px; }
  .page-irtb .irtb-hero__logos img { height: auto; max-height: 16px; width: auto; }

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

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

  .page-irtb .irtb-what { margin-top: 40px; }
  .page-irtb .irtb-what__card { padding: 16px; }

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

  /* DEMAND — simple block of cards, NO sticky-stacking on mobile */
  .page-irtb .demand-stack { padding-bottom: 0; }
  .page-irtb .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-irtb .demand-card__text-col { width: 100%; justify-content: flex-start; }
  .page-irtb .demand-card__media-col { width: 100%; justify-content: flex-start; }
  .page-irtb .demand-card__media { width: 100%; padding: 16px; }

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

  /* WHY — horizontal scroll, i/RTB column FIRST (Figma mobile order).
     Pad the scroll viewport for the cards' shadow and cancel it with net-zero
     negative margins so the section spacing is unchanged. */
  .page-irtb .irtb-why__cols {
    flex-direction: row; flex-wrap: nowrap; gap: 16px;
    align-items: stretch;
    overflow-x: auto;
    padding: 12px 16px 64px;
    margin: -12px -16px -56px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .page-irtb .irtb-compare { flex: 0 0 283.36px; min-width: 283.36px; scroll-snap-align: start; }
  .page-irtb .irtb-compare:nth-child(2) { order: -1; }   /* i/RTB platform first */
  .page-irtb .irtb-compare__title { font-size: 18px; }
  .page-irtb .irtb-compare__item { padding: 12px; align-items: center; }
  .page-irtb .irtb-compare__item img { margin-top: 0; }
  .page-irtb .irtb-compare__item span { font-size: 14px; }
  /* Force matching 2-line bullets (via <br class="mob-br">) so the two cards'
     rows line up; equalise the head height (Traditional's title is 3 lines)
     so the first rows start at the same Y. Mobile only. */
  .page-irtb .irtb-compare__item br { display: inline; }
  .page-irtb .irtb-compare__head { min-height: 70px; align-items: center; }

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