/* ==========================================================================
   Marvell — global stylesheet
   Design tokens, brand typeface and the page container.
   Component styles live in css/components/, never here.
   ========================================================================== */

@import url("clientlib-refresh/css/fonts.css");

/* --------------------------------------------------------------------------
   Design tokens
   Values from the approved design palette (Color, Color 2, …).
   Names below are ours.
   -------------------------------------------------------------------------- */

:root {
  --mrvll-color-brand: #0072ce;
  --mrvll-color-accent: #02b5e2;

  --mrvll-color-text: #212322;
  --mrvll-color-text-muted: #62666a;
  --mrvll-color-inverse: #fff;

  --mrvll-color-gray: #a7a8a9;
  --mrvll-color-gray-light: #c8c9c7;
  --mrvll-color-surface: #d9d9d6;
  --mrvll-color-surface-cool: #e9e9ec;

  --mrvll-font-family: "setimo", "Helvetica Neue", helvetica, arial, sans-serif;

  /* Content measures 1473px in the design; the max-width adds the gutters on
     top so a 1680px viewport lands on the 103px side margins. */
  --mrvll-container-max: 1513px;
  --mrvll-container-gutter: 16px;
  --mrvll-container-gutter-wide: 20px;
}

@media (max-width: 1470px) and (min-width: 801px) {
  :root {
    --mrvll-container-gutter-wide: 60px;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background-color: var(--mrvll-color-inverse, #fff);
  color: var(--mrvll-color-text, #212322);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* Keyboard focus stays visible everywhere; components may restyle it but must
   never remove it. */
:focus-visible {
  outline: 2px solid var(--mrvll-color-brand, #0072ce);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Container
   The design lays content out at roughly 1470px, which Bootstrap 3's
   .container (1170px max) cannot cover. Home modules now own this measure
   on their own __inner; this helper remains for any future page that needs
   a shared wrapper.
   -------------------------------------------------------------------------- */

.mrvll-container {
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-left: var(--mrvll-container-gutter, 16px);
}

/* Full-bleed background with contained content. */
.mrvll-container--flush {
  padding-right: 0;
  padding-left: 0;
}

/* Shared imagery behind the CTA band and footer so they read as one plane. */
.mrvll-close {
  position: relative;
  overflow: hidden;
  background-color: #040309;
  background-image: url("clientlib-refresh/resources/images/cta-footer-bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 801px) {
  .mrvll-container {
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  .mrvll-container--flush {
    padding-right: 0;
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Section
   Page-level scaffolding: vertical rhythm and full-bleed backgrounds. It
   carries no component styling, so components stay free of outer spacing.
   -------------------------------------------------------------------------- */

.mrvll-section {
  position: relative;
  padding-top: 68px;
  padding-bottom: 8px;
}

/* Overlay label at the top of the section that follows the hero. Absolutely
   positioned so it does not push the section's own content down, and it
   mirrors the container box to line up with it. Wide view only. */
.mrvll-scroll-hint {
  display: none;
}

/* Grey-to-transparent wash that continues the hero downwards. */
.mrvll-section--fade {
  background-image: linear-gradient(to bottom, var(--mrvll-color-gray-light, #c8c9c7), rgba(200, 201, 199, 0));
  background-repeat: no-repeat;
  background-size: 100% 54px;
}

/* Real desktops, plus tablets in landscape. Written as an OR pair (rather
   than a min-width query negated with `not()`) so this CSS ships to the
   browser unprocessed. See components/portfolio.css for the full rationale. */
@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-section {
    padding-top: 199px;
    padding-bottom: 100px;
  }

  .mrvll-section--fade {
    background-size: 100% 402px;
  }

  .mrvll-scroll-hint {
    position: absolute;
    top: 24px;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: var(--mrvll-container-max, 1513px);
    margin: 0 auto;
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
    color: var(--mrvll-color-text, #212322);
    font-size: 0.8125rem;
    letter-spacing: 1.3px;
    text-transform: uppercase;
  }

  .mrvll-scroll-hint .mrvll-scroll-hint__icon {
    display: block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
  }
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */

.mrvll-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mrvll-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  background-color: var(--mrvll-color-inverse, #fff);
  color: var(--mrvll-color-text, #212322);
  transform: translateY(-100%);
}

.mrvll-skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Setimo
   Local faces for the Home preview. Production clientlib-base points at
   /content/dam/marvell/... which 404s off marvell.com, so this sheet must
   load on the static handoff. Light Italic is included for Results titles.
   ========================================================================== */

@font-face {
  font-family: "setimo";
  src: url("clientlib-refresh/resources/fonts/Setimo_W_Lt.woff2") format("woff2"),
       url("clientlib-refresh/resources/fonts/Setimo_W_Lt.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "setimo";
  src: url("clientlib-refresh/resources/fonts/Setimo_W_LtIt.woff2") format("woff2"),
       url("clientlib-refresh/resources/fonts/Setimo_W_LtIt.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "setimo";
  src: url("clientlib-refresh/resources/fonts/Setimo_W_Rg.woff2") format("woff2"),
       url("clientlib-refresh/resources/fonts/Setimo_W_Rg.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "setimo";
  src: url("clientlib-refresh/resources/fonts/Setimo_W_Bd.woff2") format("woff2"),
       url("clientlib-refresh/resources/fonts/Setimo_W_Bd.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Button
   Shared primitive. Variants are driven by modifiers so a component never
   restyles a button from the outside.
   ========================================================================== */

.mrvll-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  min-height: 50px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  transition: background-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
    color 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mrvll-button--block {
  display: flex;
  width: 100%;
}

/* Production already ships .mrvll-button with a trailing arrow ::after.
   This design has no arrow; equal specificity, loaded after clientlib-base. */
.mrvll-button::after {
  content: none;
}

/* White mask wipe from the bottom, matching immersive-v5 .cmp-cta--mask.
   Uses ::before so production's .mrvll-button::after arrow stays suppressed. */
.mrvll-button--primary,
.mrvll-button--outline,
.mrvll-button--outline-brand {
  overflow: hidden;
  isolation: isolate;
  transition: color 480ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mrvll-button--primary::before,
.mrvll-button--outline::before,
.mrvll-button--outline-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--mrvll-color-inverse, #fff);
  transform: translate3d(0, 105%, 0);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.mrvll-button--primary > span,
.mrvll-button--outline > span,
.mrvll-button--outline-brand > span {
  position: relative;
  z-index: 1;
}

.mrvll-button--primary:hover::before,
.mrvll-button--primary:focus-visible::before,
.mrvll-button--outline:hover::before,
.mrvll-button--outline:focus-visible::before,
.mrvll-button--outline-brand:hover::before,
.mrvll-button--outline-brand:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.mrvll-button--primary {
  background-color: var(--mrvll-color-brand, #0072ce);
  border-color: var(--mrvll-color-brand, #0072ce);
  color: var(--mrvll-color-inverse, #fff);
}

.mrvll-button--primary:hover,
.mrvll-button--primary:focus-visible {
  background-color: var(--mrvll-color-brand, #0072ce);
  border-color: #000;
  color: var(--mrvll-color-text, #212322);
}

/* Sits on dark imagery, so the accent-coloured global focus ring would not
   read. */
.mrvll-button--primary:focus-visible,
.mrvll-button--outline:focus-visible {
  outline-color: var(--mrvll-color-inverse, #fff);
}

.mrvll-button--outline {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--mrvll-color-inverse, #fff);
  color: var(--mrvll-color-inverse, #fff);
}

.mrvll-button--outline:hover,
.mrvll-button--outline:focus-visible {
  background-color: transparent;
  border-color: var(--mrvll-color-inverse, #fff);
  color: var(--mrvll-color-text, #212322);
}

.mrvll-button--outline-brand {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--mrvll-color-brand, #0072ce);
  color: var(--mrvll-color-brand, #0072ce);
}

.mrvll-button--outline-brand:hover,
.mrvll-button--outline-brand:focus-visible {
  background-color: transparent;
  border-color: var(--mrvll-color-brand, #0072ce);
  color: var(--mrvll-color-text, #212322);
}

@media (prefers-reduced-motion: reduce) {
  .mrvll-button,
  .mrvll-button--primary,
  .mrvll-button--outline,
  .mrvll-button--outline-brand,
  .mrvll-button--primary::before,
  .mrvll-button--outline::before,
  .mrvll-button--outline-brand::before {
    transition: none;
  }

  .mrvll-button--primary:hover,
  .mrvll-button--primary:focus-visible {
    background-color: var(--mrvll-color-inverse, #fff);
    border-color: #000;
    color: var(--mrvll-color-text, #212322);
  }

  .mrvll-button--outline:hover,
  .mrvll-button--outline:focus-visible,
  .mrvll-button--outline-brand:hover,
  .mrvll-button--outline-brand:focus-visible {
    background-color: var(--mrvll-color-inverse, #fff);
    color: var(--mrvll-color-text, #212322);
  }
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-button {
    min-height: 60px;
  }

  .mrvll-button--block {
    display: inline-flex;
    width: auto;
  }
}

/* ==========================================================================
   CTA band
   Join-us pitch. On Home it shares a background plane with the footer via
   the .mrvll-close wrapper.
   ========================================================================== */

.mrvll-close {
  position: relative;
  overflow: hidden;
  background-color: #040309;
  background-image: url("clientlib-refresh/resources/images/cta-footer-bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mrvll-close .mrvll-close__video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.mrvll-close .mrvll-cta-band {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mrvll-close .mrvll-close__video {
    display: none;
  }
}

.mrvll-cta-band {
  padding-top: 48px;
  padding-bottom: 40px;
  background: transparent;
  color: var(--mrvll-color-inverse, #fff);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-cta-band,
.mrvll-cta-band *,
.mrvll-cta-band *::before,
.mrvll-cta-band *::after {
  box-sizing: border-box;
}

.mrvll-cta-band .mrvll-cta-band__inner {
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-left: var(--mrvll-container-gutter, 16px);
}

.mrvll-cta-band .mrvll-cta-band__layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.mrvll-cta-band .mrvll-cta-band__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 34px;
}

.mrvll-cta-band .mrvll-cta-band__body {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 26px;
}

.mrvll-cta-band .mrvll-cta-band__title .cmp-title,
.mrvll-cta-band .mrvll-cta-band__title .cmp-title__text,
.mrvll-cta-band .mrvll-cta-band__body .cmp-text,
.mrvll-cta-band .mrvll-cta-band__body .cmp-text > * {
  margin: 0;
  color: inherit;
  font: inherit;
}

.mrvll-cta-band .mrvll-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mrvll-cta-band .mrvll-cta-band__actions .mrvll-button {
  flex: 1 1 calc(50% - 6px);
  min-height: 40px;
  padding: 0 12px;
  font-size: 0.8125rem;
  letter-spacing: 1.2px;
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-cta-band {
    padding-top: 72px;
    padding-bottom: 64px;
  }

  .mrvll-cta-band .mrvll-cta-band__inner {
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  .mrvll-cta-band .mrvll-cta-band__layout {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

  .mrvll-cta-band .mrvll-cta-band__copy {
    flex: 0 1 556px;
    max-width: 556px;
  }

  .mrvll-cta-band .mrvll-cta-band__title {
    font-size: 2.6875rem;
    line-height: 44px;
  }

  .mrvll-cta-band .mrvll-cta-band__body {
    margin-top: 24px;
    font-size: 1rem;
    line-height: 30px;
  }

  .mrvll-cta-band .mrvll-cta-band__actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 16px;
    padding-bottom: 4px;
  }

  .mrvll-cta-band .mrvll-cta-band__actions .mrvll-button {
    flex: 0 0 auto;
    min-width: 226px;
    min-height: 50px;
    padding: 0 24px;
    font-size: 0.9375rem;
    letter-spacing: 1.5px;
  }
}

@media (min-width: 801px) and (max-width: 1470px) {
  .mrvll-cta-band .mrvll-cta-band__inner {
    padding-right: 60px;
    padding-left: 60px;
  }
}

/* AEM: footer XF wrapper chain must not exceed viewport width.
   Scoped with :has(.mrvll-close) so the header XF is untouched. */
.experiencefragment.aem-GridColumn:has(.mrvll-close),
.experiencefragment.aem-GridColumn:has(.mrvll-close) .xf-content-height,
.experiencefragment.aem-GridColumn:has(.mrvll-close) .aem-Grid,
.experiencefragment.aem-GridColumn:has(.mrvll-close) .footer.aem-GridColumn,
.experiencefragment.aem-GridColumn:has(.mrvll-close) .mrvll-close {
  float: none;
  clear: both;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

@media (max-width: 800px) {
  .experiencefragment.aem-GridColumn:has(.mrvll-close) .mrvll-cta-band__inner,
  .experiencefragment.aem-GridColumn:has(.mrvll-close) .mrvll-footer__inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   Distance explorer
   Full-bleed dark band with a frosted info card, a six-stop slider and a CTA.
   Stops swap the card copy; the designed state is the farthest stop.
   ========================================================================== */

.mrvll-distance-explorer {
  position: relative;
  color: var(--mrvll-color-inverse, #fff);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-distance-explorer,
.mrvll-distance-explorer *,
.mrvll-distance-explorer *::before,
.mrvll-distance-explorer *::after {
  box-sizing: border-box;
}

.mrvll-distance-explorer .mrvll-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mrvll-distance-explorer .mrvll-distance-explorer__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #0a1628;
}

.mrvll-distance-explorer .mrvll-distance-explorer__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mrvll-distance-explorer .mrvll-distance-explorer__image .cmp-image,
.mrvll-distance-explorer .mrvll-distance-explorer__image .cmp-image__image {
  display: block;
  width: 100%;
  height: 100%;
}

.mrvll-distance-explorer .mrvll-distance-explorer__image .cmp-image__image {
  object-fit: cover;
  object-position: center;
}

.mrvll-distance-explorer .mrvll-distance-explorer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.mrvll-distance-explorer .mrvll-distance-explorer__inner {
  position: relative;
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-top: 48px;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-bottom: 70px;
  padding-left: var(--mrvll-container-gutter, 16px);
}

/* --------------------------------------------------------------------------
   Stage: scene + card
   -------------------------------------------------------------------------- */

.mrvll-distance-explorer .mrvll-distance-explorer__stage {
  display: flex;
  flex-direction: column;
  gap: 32px;
  touch-action: pan-y;
}

.mrvll-distance-explorer .mrvll-distance-explorer__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
}

.mrvll-distance-explorer .mrvll-distance-explorer__caption {
  width: 100%;
  margin: 0;
  min-height: 1.25em;
  font-size: 0.875rem;
  text-align: center;
}

/* Locked 4:3 slot so swapping SVGs cannot change the stage height. */
.mrvll-distance-explorer .mrvll-distance-explorer__illustration {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 480px;
  max-height: 360px;
  aspect-ratio: 4 / 3;
}

.mrvll-distance-explorer .mrvll-distance-explorer__visual {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 360px;
  opacity: 0;
  transition: opacity 280ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
}

.mrvll-distance-explorer .mrvll-distance-explorer__visual.is-active {
  opacity: 1;
}

.mrvll-distance-explorer .mrvll-distance-explorer__visual .cmp-image,
.mrvll-distance-explorer .mrvll-distance-explorer__visual .cmp-image__image {
  display: block;
  width: 100%;
  height: 100%;
}

.mrvll-distance-explorer .mrvll-distance-explorer__visual .cmp-image__image {
  object-fit: contain;
}

.mrvll-distance-explorer .mrvll-distance-explorer__visual.is-swapping {
  opacity: 0;
}

/* Swap target is a wrapper so reveal's .mrvll-enter.is-in on the inner
   copy cannot override opacity or delay the fade. */
.mrvll-distance-explorer .mrvll-distance-explorer__swap {
  opacity: 1;
  transition: opacity 280ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: 0s;
}

.mrvll-distance-explorer .mrvll-distance-explorer__swap.is-swapping {
  opacity: 0;
}

.mrvll-distance-explorer .mrvll-distance-explorer__caption .mrvll-distance-explorer__swap {
  display: inline-block;
}

.mrvll-distance-explorer .mrvll-distance-explorer__card > .mrvll-distance-explorer__swap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* Card */

.mrvll-distance-explorer .mrvll-distance-explorer__card {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  -webkit-backdrop-filter: blur(42px);
  backdrop-filter: blur(42px);
}

.mrvll-distance-explorer .mrvll-distance-explorer__distance {
  margin: 0;
  min-height: 50px;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 50px;
}

.mrvll-distance-explorer .mrvll-distance-explorer__title {
  margin: 8px 0 0;
  min-height: 70px;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 35px;
}

.mrvll-distance-explorer .mrvll-distance-explorer__body {
  margin: 16px 0 0;
  min-height: 252px;
  font-size: 1rem;
  line-height: 28px;
}

.mrvll-distance-explorer .mrvll-distance-explorer__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  box-sizing: border-box;
  height: 39px;
  min-height: 39px;
  margin-top: auto;
  padding: 0 14px;
  color: var(--mrvll-color-inverse, #fff);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 34px;
  font-size: 0.625rem;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

/* Neutralize production Core defaults while keeping presentation on fields. */
.mrvll-distance-explorer .mrvll-distance-explorer__caption .cmp-text,
.mrvll-distance-explorer .mrvll-distance-explorer__caption .cmp-text > *,
.mrvll-distance-explorer .mrvll-distance-explorer__distance .cmp-text,
.mrvll-distance-explorer .mrvll-distance-explorer__distance .cmp-text > *,
.mrvll-distance-explorer .mrvll-distance-explorer__title .cmp-title,
.mrvll-distance-explorer .mrvll-distance-explorer__title .cmp-title__text,
.mrvll-distance-explorer .mrvll-distance-explorer__body .cmp-text,
.mrvll-distance-explorer .mrvll-distance-explorer__body .cmp-text > *,
.mrvll-distance-explorer .mrvll-distance-explorer__note .cmp-text,
.mrvll-distance-explorer .mrvll-distance-explorer__note .cmp-text > *,
.mrvll-distance-explorer .mrvll-distance-explorer__drag-label .cmp-text,
.mrvll-distance-explorer .mrvll-distance-explorer__drag-label .cmp-text > * {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.mrvll-distance-explorer .mrvll-distance-explorer__tag .cmp-text,
.mrvll-distance-explorer .mrvll-distance-explorer__tag .cmp-text > * {
  display: contents;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* --------------------------------------------------------------------------
   Slider
   Title + frosted panel are one controls block under the stage, so the label
   does not sit as a full-width spacer between the two modules.
   -------------------------------------------------------------------------- */

.mrvll-distance-explorer .mrvll-distance-explorer__controls {
  position: relative;
  top: 0;
  margin-top: 8px;
}

.mrvll-distance-explorer .mrvll-distance-explorer__drag-label {
  display: none;
}

.mrvll-distance-explorer .mrvll-distance-explorer__slider {
  margin-top: 0;
  padding: 24px 16px 27px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px 4px 0 0;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  touch-action: none;
  cursor: grab;
}

.mrvll-distance-explorer .mrvll-distance-explorer__slider:active {
  cursor: grabbing;
}

.mrvll-distance-explorer .mrvll-distance-explorer__track-wrap {
  position: relative;
  height: 48px;
  margin-bottom: 12px;
}

.mrvll-distance-explorer .mrvll-distance-explorer__track {
  position: absolute;
  top: 23px;
  right: 16px;
  left: 16px;
  height: 2px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.55);
}

.mrvll-distance-explorer .mrvll-distance-explorer__fill {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--mrvll-color-accent, #02b5e2);
  transition: width 0.2s ease;
}

.mrvll-distance-explorer .mrvll-distance-explorer__stops {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mrvll-distance-explorer .mrvll-distance-explorer__stops > li {
  flex: 0 0 32px;
  width: 32px;
}

.mrvll-distance-explorer .mrvll-distance-explorer__stop {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 0;
  font-size: 0;
  -webkit-appearance: none;
  appearance: none;
}

.mrvll-distance-explorer .mrvll-distance-explorer__stop::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -50%);
}

.mrvll-distance-explorer .mrvll-distance-explorer__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  height: 32px;
  margin: -16px 0 0;
  padding: 0;
  background: none;
  border: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.mrvll-distance-explorer .mrvll-distance-explorer__thumb img {
  display: block;
  width: 32px;
  height: 32px;
}

.mrvll-distance-explorer .mrvll-distance-explorer__labels {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.6875rem;
  letter-spacing: 1.5px;
  text-transform: none;
}

.mrvll-distance-explorer .mrvll-distance-explorer__labels li:first-child {
  text-align: left;
}

.mrvll-distance-explorer .mrvll-distance-explorer__labels li:last-child {
  text-align: right;
}

.mrvll-distance-explorer .mrvll-distance-explorer__labels li:not(:first-child):not(:last-child) {
  text-align: center;
}

.mrvll-distance-explorer .mrvll-distance-explorer__footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 25px 0;
}

.mrvll-distance-explorer .mrvll-distance-explorer__note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 20px;
}

.mrvll-distance-explorer .mrvll-distance-explorer__cta .mrvll-button {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .mrvll-distance-explorer .mrvll-distance-explorer__thumb,
  .mrvll-distance-explorer .mrvll-distance-explorer__fill,
  .mrvll-distance-explorer .mrvll-distance-explorer__visual,
  .mrvll-distance-explorer .mrvll-distance-explorer__swap {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Wide layout
   -------------------------------------------------------------------------- */

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-distance-explorer .mrvll-distance-explorer__inner {
    padding-top: 86px;
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-bottom: 70px;
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__stage {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 560px;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__controls {
    top: -30px;
    margin-top: 0;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__scene {
    flex: 1 1 auto;
    padding-top: 0;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__card {
    flex: 0 0 472px;
    width: 472px;
    min-height: 560px;
    padding: 26px 36px 36px;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__distance {
    min-height: 65px;
    font-size: 2.625rem;
    line-height: 65px;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__title {
    margin-top: 26px;
    min-height: 80px;
    font-size: 1.5rem;
    line-height: 40px;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__body {
    margin-top: 54px;
    min-height: 196px;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__drag-label {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 15px;
    color: var(--mrvll-color-surface, #d9d9d6);
    font-size: 1.0625rem;
    letter-spacing: 3.4px;
    text-transform: uppercase;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__slider {
    margin-top: 0;
    padding: 17px 46px 27px;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__track-wrap {
    height: 32px;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__track {
    top: 12px;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__labels {
    font-size: 0.75rem;
    letter-spacing: 2.4px;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 25px 0;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__note {
    flex: 0 1 496px;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__cta {
    flex: 0 0 418px;
    width: 418px;
    min-width: 0;
    margin-left: auto;
  }

  .mrvll-distance-explorer .mrvll-distance-explorer__cta .mrvll-button {
    width: 100%;
  }
}

@media (min-width: 801px) and (max-width: 1470px) {
  .mrvll-distance-explorer .mrvll-distance-explorer__inner {
    padding-right: 60px;
    padding-left: 60px;
  }
}

/* ==========================================================================
   Footer
   Logo, four link columns, social row and legal bar. On narrow viewports the
   columns rearrange into a two-by-two grid (no accordion).
   ========================================================================== */

.mrvll-footer {
  padding-top: 24px;
  padding-bottom: 15px;
  background: transparent;
  color: var(--mrvll-color-inverse, #fff);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

/* Production paints .mrvll-footer with a solid grey. Inside the close-of-page
   wrapper the image lives on the parent, so this has to stay transparent. */
.mrvll-close .mrvll-footer {
  position: relative;
  z-index: 1;
  background: transparent;
}

.mrvll-footer,
.mrvll-footer *,
.mrvll-footer *::before,
.mrvll-footer *::after {
  box-sizing: border-box;
}

/* Production already ships a .mrvll-footer (light grey band, padded lists,
   35px item gaps). Equal-or-higher selectors, loaded after clientlib-base,
   restore this design. */
.mrvll-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mrvll-footer ul li {
  margin: 0;
  padding: 0;
}

.mrvll-footer a {
  background: none;
}

.mrvll-footer .mrvll-footer__inner {
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-left: var(--mrvll-container-gutter, 16px);
}

.mrvll-footer .mrvll-footer__top {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.mrvll-footer .mrvll-footer__logo {
  display: inline-block;
  line-height: 0;
}

.mrvll-footer .mrvll-footer__logo img {
  display: block;
  width: 163px;
  height: auto;
}

.mrvll-footer .mrvll-footer__logo .cmp-image {
  display: block;
}

.mrvll-footer .mrvll-footer__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mrvll-footer .mrvll-footer__heading {
  margin: 0 0 8px;
  color: var(--mrvll-color-inverse, #fff);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 26px;
}

.mrvll-footer .mrvll-footer__heading .cmp-text,
.mrvll-footer .mrvll-footer__heading .cmp-text > *,
.mrvll-footer .mrvll-footer__copy .cmp-text,
.mrvll-footer .mrvll-footer__copy .cmp-text > * {
  margin: 0;
  color: inherit;
  font: inherit;
}

.mrvll-footer .mrvll-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mrvll-footer .mrvll-footer__link {
  display: block;
  color: var(--mrvll-color-gray-light, #c8c9c7);
  font-size: 0.6875rem;
  line-height: 22px;
  text-decoration: none;
}

.mrvll-footer .mrvll-footer__link:hover,
.mrvll-footer .mrvll-footer__link:focus {
  color: var(--mrvll-color-inverse, #fff);
}

.mrvll-footer .mrvll-footer__social {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.mrvll-footer .mrvll-footer__social-link {
  display: block;
  line-height: 0;
  opacity: 0.92;
}

.mrvll-footer .mrvll-footer__social-link:hover,
.mrvll-footer .mrvll-footer__social-link:focus {
  opacity: 1;
}

.mrvll-footer .mrvll-footer__social-link img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.mrvll-footer .mrvll-footer__rule {
  display: none;
  width: 100%;
  height: 1px;
  margin: 28px 0 0;
  border: 0;
  background-color: rgba(255, 255, 255, 0.18);
}

.mrvll-footer .mrvll-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
}

.mrvll-footer .mrvll-footer__legal-links {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  order: -1;
  width: 100%;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mrvll-footer .mrvll-footer__legal-link {
  display: inline-block;
  color: var(--mrvll-color-gray-light, #c8c9c7);
  font-size: 0.8125rem;
  line-height: 32px;
  text-decoration: none;
  white-space: nowrap;
}

.mrvll-footer .mrvll-footer__legal-link:hover,
.mrvll-footer .mrvll-footer__legal-link:focus {
  color: var(--mrvll-color-inverse, #fff);
}

.mrvll-footer .mrvll-footer__copy {
  flex: 1 1 auto;
  margin: 0;
  color: var(--mrvll-color-gray-light, #c8c9c7);
  font-size: 0.8125rem;
  line-height: 32px;
  text-align: center;
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-footer {
    padding-top: 40px;
    padding-bottom: 48px;
  }

  .mrvll-footer .mrvll-footer__inner {
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  .mrvll-footer .mrvll-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
  }

  .mrvll-footer .mrvll-footer__logo img {
    width: 298px;
  }

  .mrvll-footer .mrvll-footer__columns {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0;
  }

  .mrvll-footer .mrvll-footer__column {
    flex: 0 0 auto;
    width: 230px;
  }

  .mrvll-footer .mrvll-footer__column--worldwide {
    width: 152px;
  }

  .mrvll-footer .mrvll-footer__heading {
    margin-bottom: 9px;
    font-size: 0.9375rem;
  }

  .mrvll-footer .mrvll-footer__link {
    font-size: 0.9375rem;
    line-height: 42px;
  }

  .mrvll-footer .mrvll-footer__social {
    justify-content: flex-start;
    margin-top: 56px;
    gap: 21px;
  }

  .mrvll-footer .mrvll-footer__social-link img {
    width: auto;
    height: 19px;
  }

  .mrvll-footer .mrvll-footer__rule {
    display: block;
    margin-top: 24px;
  }

  .mrvll-footer .mrvll-footer__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
  }

  .mrvll-footer .mrvll-footer__legal-links {
    order: 0;
    width: auto;
    flex-wrap: nowrap;
    gap: 0 48px;
  }

  .mrvll-footer .mrvll-footer__legal-link,
  .mrvll-footer .mrvll-footer__copy {
    line-height: 42px;
  }

  .mrvll-footer .mrvll-footer__copy {
    text-align: left;
  }
}

@media (min-width: 801px) and (max-width: 1470px) {
  .mrvll-footer .mrvll-footer__inner {
    padding-right: 60px;
    padding-left: 60px;
  }
}

/* The mobile social row and legal bar use `justify-content: space-between`
   to fill a ~343px phone width edge to edge. A portrait tablet runs the same
   mobile layout across ~900px of content, so space-between spreads both rows
   out to the point of looking broken; restore the wide layout's flex-start
   grouping without pulling in its other structural changes (order, width). */
@media (min-width: 801px) and (max-width: 1024px) and (orientation: portrait) {
  .mrvll-footer .mrvll-footer__social {
    justify-content: flex-start;
    gap: 21px;
  }

  .mrvll-footer .mrvll-footer__legal-links {
    justify-content: flex-start;
    gap: 0 48px;
  }
}

/* Inside the AEM close-of-page plane, neutralise the legacy clientlib-base
   footer rule (.mrvll-footer ul { margin: 0 0 25px; padding: 30px 30px 30px 0 })
   so the link lists carry no stray padding that would offset the columns.
   Do NOT reset margin here: this selector is (0,2,1) and outranks every
   .mrvll-footer .mrvll-footer__* rule (0,2,0), including the social row's own
   top margin at both breakpoints. Each list already zeroes its own margin. */
.mrvll-close .mrvll-footer ul {
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   Header
   In flow by default. The --overlay modifier fixes it above a full-bleed
   hero, which is how the Home page uses it.
   ========================================================================== */

.mrvll-header {
  position: relative;
  z-index: 20;
  padding-top: 20px;
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-header,
.mrvll-header *,
.mrvll-header *::before,
.mrvll-header *::after {
  box-sizing: border-box;
}

.mrvll-header .mrvll-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Page chrome that sits just above the header. */
.mrvll-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  background-color: var(--mrvll-color-inverse, #fff);
  color: var(--mrvll-color-text, #212322);
  transform: translateY(-100%);
}

.mrvll-skip-link:focus {
  transform: translateY(0);
}

.mrvll-header .mrvll-header__inner {
  position: relative;
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-left: var(--mrvll-container-gutter, 16px);
}

.mrvll-header--overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

/* Runtime state applied only while the mobile menu is open. */
html.mrvll-header-mobile-menu-open,
body.mrvll-header-mobile-menu-open {
  overflow: hidden;
}

html.mrvll-header-mobile-menu-open {
  scrollbar-gutter: stable;
}

/* Optional Home-page behavior: keep the header visible over the hero, hide it
   while scrolling down past the hero and reveal it again when scrolling up. */
.mrvll-header--auto-hide {
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mrvll-header--auto-hide.mrvll-header--hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* Wraps so the collapsed panel drops onto a second line below the logo row. */
.mrvll-header .mrvll-header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 16px;
  background-color: var(--mrvll-color-inverse, #fff);
  border-radius: 1px;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

/* The logo sets the height of the logo row, so it stays constant whether the
   panel is open or closed. */
.mrvll-header .mrvll-header__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 56px;
  line-height: 0;
}

.mrvll-header .mrvll-header__logo img {
  display: block;
  width: 110px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Toggle — narrow viewports only
   -------------------------------------------------------------------------- */

.mrvll-header .mrvll-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 56px;
  margin-left: auto;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.mrvll-header .mrvll-header__toggle img {
  display: block;
  width: 20px;
  height: auto;
}

.mrvll-header .mrvll-header__toggle .mrvll-header__toggle-icon--close {
  display: none;
  width: 18px;
  height: 18px;
}

.mrvll-header .mrvll-header__mobile-search {
  display: none;
}

.mrvll-header--open .mrvll-header__toggle .mrvll-header__toggle-icon--menu {
  display: none;
}

.mrvll-header--open .mrvll-header__toggle .mrvll-header__toggle-icon--close {
  display: block;
}

/* --------------------------------------------------------------------------
   Collapsible panel
   Mobile open state follows the supplied Figma reference.
   -------------------------------------------------------------------------- */

.mrvll-header .mrvll-header__panel {
  display: none;
  width: 100%;
  padding-bottom: 20px;
}

.mrvll-header--open .mrvll-header__panel {
  display: block;
}

.mrvll-header .mrvll-header__list,
.mrvll-header .mrvll-header__actions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mrvll-header .mrvll-header__link {
  position: relative;
  display: inline-block;
  padding: 12px 0;
  color: var(--mrvll-color-text, #212322);
  font-size: 0.9375rem;
  letter-spacing: 1.5px;
  text-decoration: none;
  text-transform: uppercase;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.mrvll-header .mrvll-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 100%;
  height: 2px;
  background-color: var(--mrvll-color-brand, #0072ce);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mrvll-header .mrvll-header__link:hover::after,
.mrvll-header .mrvll-header__link:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .mrvll-header--auto-hide {
    transition: none;
  }

  .mrvll-header .mrvll-header__link::after,
  .mrvll-header .mrvll-header__dropdown,
  .mrvll-header .mrvll-header__search-panel {
    transition: none;
  }
}

.mrvll-header .mrvll-header__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 12px;
}

.mrvll-header .mrvll-header__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--mrvll-color-text, #212322);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.mrvll-header .mrvll-header__action img {
  display: block;
  width: 18px;
  height: auto;
}

.mrvll-header .mrvll-header__label-mobile {
  display: none;
}

.mrvll-header .mrvll-header__action-label {
  display: none;
}

/* --------------------------------------------------------------------------
   Language dropdown popover + search autosuggest
   Shared (all viewports) look. The popover is positioned in the wide layout;
   on narrow viewports it expands inline within the mobile action row.
   -------------------------------------------------------------------------- */

.mrvll-header .mrvll-header__language-menu[hidden] {
  display: none;
}

.mrvll-header .mrvll-header__language-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mrvll-header .mrvll-header__language-link {
  display: block;
  padding: 10px 22px;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease;
}

.mrvll-header .mrvll-header__language-link:hover,
.mrvll-header .mrvll-header__language-link:focus-visible {
  color: var(--mrvll-color-brand, #0072ce);
  background-color: var(--mrvll-color-surface, #f5f5f5);
}

.mrvll-header .mrvll-header__language-link.is-active {
  color: var(--mrvll-color-text, #212322);
  font-weight: 700;
}

.mrvll-header .mrvll-header__search-suggestions {
  margin: 8px 0 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
}

.mrvll-header .mrvll-header__search-suggestion {
  padding: 10px 12px;
  color: var(--mrvll-color-text, #212322);
  font-size: 0.9375rem;
  line-height: 1.35;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.mrvll-header .mrvll-header__search-suggestion:hover,
.mrvll-header .mrvll-header__search-suggestion.is-active {
  color: var(--mrvll-color-brand, #0072ce);
  background-color: var(--mrvll-color-surface, #f5f5f5);
}

@keyframes mrvll-header-language-menu-in {
  from {
    opacity: 0;
    transform: translate(-50%, -10px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 800px),
       (max-width: 1024px) and (orientation: portrait) {
  .mrvll-header .mrvll-header__mobile-search {
    position: absolute;
    top: 0;
    right: 46px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 56px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .mrvll-header .mrvll-header__mobile-search img {
    display: block;
    width: 18px;
    height: 18px;
  }

  .mrvll-header--mobile-search-open .mrvll-header__bar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mrvll-header.mrvll-header--mobile-search-open .mrvll-header__search-panel {
    position: absolute;
    top: 56px;
    right: var(--mrvll-container-gutter, 16px);
    left: var(--mrvll-container-gutter, 16px);
    z-index: 2;
    display: block;
    padding: 0 24px;
    background: var(--mrvll-color-inverse, #fff);
    border-top: 1px solid var(--mrvll-color-border, #d9d9d6);
  }

  .mrvll-header--mobile-search-open .mrvll-header__search-form,
  .mrvll-header--mobile-search-open .mrvll-header__search-form label {
    display: block;
    width: 100%;
    margin: 0;
  }

  .mrvll-header--mobile-search-open .mrvll-header__search-form label {
    position: relative;
  }

  .mrvll-header--mobile-search-open .mrvll-header__search-form label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 18px;
    height: 18px;
    background: url("clientlib-refresh/resources/icons/icon-search.svg") center / contain no-repeat;
    transform: translateY(-50%);
  }

  .mrvll-header--mobile-search-open .mrvll-header__search-input {
    width: 100%;
    height: 67px;
    padding: 0 0 0 32px;
    color: var(--mrvll-color-text, #212322);
    font-family: inherit;
    font-size: 1rem;
    outline: 0;
    background: transparent;
    border: 0;
  }

  .mrvll-header--open .mrvll-header__action-item--search {
    display: none;
  }

  .mrvll-header .mrvll-header__bar {
    padding-left: 10px;
  }

  /* Keep both icons centered in the same hit area in either menu state. */
  .mrvll-header .mrvll-header__toggle {
    position: absolute;
    top: 0;
    right: 6px;
    z-index: 2;
    margin: 0;
  }

  .mrvll-header .mrvll-header__dropdown[hidden],
  .mrvll-header .mrvll-header__search-panel {
    display: none;
  }

  .mrvll-header--open .mrvll-header__bar {
    min-height: 320px;
    padding-right: 2px;
    padding-left: 2px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mrvll-header--open .mrvll-header__logo,
  .mrvll-header--open .mrvll-header__toggle {
    position: absolute;
    top: 0;
    z-index: 2;
  }

  .mrvll-header--open .mrvll-header__logo {
    left: 10px;
  }

  .mrvll-header--open .mrvll-header__panel {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 0;
  }

  .mrvll-header--open .mrvll-header__nav {
    position: absolute;
    top: 73px;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    text-align: center;
  }

  .mrvll-header--open .mrvll-header__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
  }

  .mrvll-header--open .mrvll-header__list > li,
  .mrvll-header--open .mrvll-header__action-item {
    margin: 0;
    padding: 0;
  }

  .mrvll-header--open .mrvll-header__link {
    padding: 0;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    line-height: 1;
  }

  .mrvll-header--open .mrvll-header__link::after {
    bottom: -7px;
  }

  .mrvll-header--open .mrvll-header__panel::after {
    content: "";
    position: absolute;
    top: 239px;
    left: 50%;
    width: 220px;
    height: 1px;
    background-color: var(--mrvll-color-border, #c7c9c8);
    transform: translateX(-50%);
  }

  .mrvll-header--open .mrvll-header__actions {
    position: static;
    display: block;
    margin: 0;
  }

  .mrvll-header--open .mrvll-header__action-item {
    position: absolute;
    top: 266px;
  }

  .mrvll-header--open .mrvll-header__action-item--account {
    left: calc(50% - 44px);
  }

  .mrvll-header--open .mrvll-header__action-item--language {
    left: calc(50% + 20px);
  }

  .mrvll-header--open .mrvll-header__action-item--search {
    position: fixed;
    top: 36px;
    right: 72px;
    z-index: 3;
  }

  .mrvll-header--open .mrvll-header__action--account img {
    width: 15px;
  }

  .mrvll-header--open .mrvll-header__action--search img {
    width: 18px;
  }

  .mrvll-header--open .mrvll-header__action {
    justify-content: center;
  }

  /* Accordion state. The authored dropdown is moved below its trigger by JS,
     so links are never duplicated between desktop and mobile. */
  .mrvll-header--mobile-submenu-open .mrvll-header__bar {
    display: block;
    height: auto;
    max-height: calc(100dvh - 40px);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__nav {
    position: static;
    display: block;
    height: auto;
    margin-top: 73px;
    text-align: center;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__list {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 40px;
    text-align: center;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__list > li {
    width: 100%;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__link {
    display: inline-block;
    width: auto;
    padding: 0;
    border: 0;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1;
    text-align: center;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__link::after {
    display: block;
    bottom: -3px;
  }

  .mrvll-header--open .mrvll-header__link::before {
    content: "";
    position: absolute;
    top: 4px;
    left: calc(100% + 10px);
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--mrvll-color-brand, #0072ce);
    border-bottom: 1.5px solid var(--mrvll-color-brand, #0072ce);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 220ms ease;
  }

  .mrvll-header--open .mrvll-header__link[aria-expanded="true"]::before {
    transform: translateY(-25%) rotate(225deg);
  }

  .mrvll-header .mrvll-header__label-mobile::after {
    display: none;
  }

  .mrvll-header .mrvll-header__label-mobile[aria-expanded="true"]::after {
    transform: translateY(-25%) rotate(225deg);
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__link[aria-expanded="true"]::after {
    transform: scaleX(1);
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__panel::after {
    display: none;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__panel {
    position: static;
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__actions {
    position: relative;
    display: flex;
    width: 220px;
    margin: 40px auto 30px;
    padding-top: 34px;
    justify-content: center;
    gap: 44px;
    border-top: 1px solid var(--mrvll-color-border, #c7c9c8);
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__action-item {
    position: static;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__action-item--search {
    position: fixed;
    top: 36px;
    right: 72px;
    z-index: 3;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__dropdown {
    position: static;
    display: block;
    width: 100%;
    margin-top: 30px;
    background-color: transparent;
    box-shadow: none;
    text-align: center;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__dropdown-content,
  .mrvll-header--mobile-submenu-open .mrvll-header__dropdown-content--with-promo,
  .mrvll-header--mobile-submenu-open .mrvll-header__dropdown-content--support {
    display: block;
    padding: 0;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__label-desktop {
    display: none;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__label-mobile {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mrvll-color-text-muted, #62666a);
    font-family: inherit;
    font-size: 0.75rem;
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
  }

  .mrvll-header--mobile-submenu-open [data-header-mobile-section][aria-expanded="false"] + [data-header-mobile-section-body] {
    display: none;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__product-grid,
  .mrvll-header--mobile-submenu-open .mrvll-header__company-grid,
  .mrvll-header--mobile-submenu-open .mrvll-header__support-columns,
  .mrvll-header--mobile-submenu-open .mrvll-header__markets ul {
    display: block;
    margin: 0;
    padding: 22px 23px 0;
    list-style: none;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group {
    margin: 0;
    text-align: center;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group + .mrvll-header__group {
    margin-top: 20px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group h3,
  .mrvll-header--mobile-submenu-open .mrvll-header__group ul {
    margin: 0;
    padding: 0;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    color: var(--mrvll-color-text, #212322);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.25;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group h3:has(.mrvll-header__group-toggle[aria-expanded="true"]) {
    margin-bottom: 18px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    letter-spacing: inherit;
    text-align: center;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group-toggle::after {
    content: "";
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--mrvll-color-brand, #0072ce);
    border-bottom: 1.5px solid var(--mrvll-color-brand, #0072ce);
    transform: translateY(-25%) rotate(45deg);
    transition: transform 220ms ease;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group-toggle[aria-expanded="true"]::after {
    transform: translateY(25%) rotate(225deg);
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group h3:has(.mrvll-header__group-toggle[aria-expanded="false"]) + [data-header-mobile-group-body] {
    display: none;
  }

  .mrvll-header--mobile-submenu-open [data-header-dropdown="products"] .mrvll-header__group h3::before {
    display: none;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group ul {
    list-style: none;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group li + li,
  .mrvll-header--mobile-submenu-open .mrvll-header__markets li + li {
    margin-top: 16px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group a,
  .mrvll-header--mobile-submenu-open .mrvll-header__markets a {
    color: var(--mrvll-color-text-muted, #4d4d4f);
    font-size: 0.75rem;
    line-height: 1.35;
    text-decoration: none;
    text-align: center;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__product-grid > .mrvll-header__group + .mrvll-header__group {
    margin-top: 20px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__markets {
    margin: 24px 0 0;
    padding: 0;
    border: 0;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__company-grid {
    padding: 0 23px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__dropdown-content--support {
    padding: 0 23px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__support-columns {
    padding: 0;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__support-products + .mrvll-header__group {
    margin-top: 20px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__support-columns ul + ul {
    margin-top: 23px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__promo {
    display: none;
  }

  /* Mobile navigation: row-based accordion treatment supplied for the
     expanded submenu state. Desktop retains the centered mega-menu layout. */
  .mrvll-header--mobile-submenu-open .mrvll-header__bar {
    padding: 0;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__nav {
    margin-top: 56px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__list {
    align-items: stretch;
    gap: 0;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__list > li {
    border-bottom: 1px solid var(--mrvll-color-border, #d9d9d6);
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__link {
    display: flex;
    width: 100%;
    min-height: 80px;
    padding: 0 24px;
    align-items: center;
    justify-content: space-between;
    color: var(--mrvll-color-text, #212322);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: left;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__link::after {
    display: none;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__link::before {
    position: static;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__link[aria-expanded="true"]::before {
    transform: translateY(25%) rotate(225deg);
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__dropdown {
    margin-top: 0;
    text-align: left;
  }
mrvll-header__dropdown-content mrvll-header__dropdown-content--products mrvll-header__dropdown-content--with-promo
  .mrvll-header--mobile-submenu-open .mrvll-header__dropdown-content,
  .mrvll-header--mobile-submenu-open .mrvll-header__dropdown-content--with-promo,
  .mrvll-header--mobile-submenu-open .mrvll-header__dropdown-content--support {
    background-color: #f5f5f5;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__label-mobile {
    display: flex;
    min-height: 50px;
    padding: 0 24px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--mrvll-color-border, #d9d9d6);
    color: var(--mrvll-color-text, #212322);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    text-align: left;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__label-mobile::after {
    content: "";
    display: block;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid var(--mrvll-color-brand, #0072ce);
    border-bottom: 2px solid var(--mrvll-color-brand, #0072ce);
    transform: rotate(45deg);
    transition: transform 220ms ease;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__label-mobile[aria-expanded="true"]::after {
    transform: translateY(25%) rotate(225deg);
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__label-mobile--static::after {
    display: none;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__product-grid,
  .mrvll-header--mobile-submenu-open .mrvll-header__company-grid,
  .mrvll-header--mobile-submenu-open .mrvll-header__support-columns,
  .mrvll-header--mobile-submenu-open .mrvll-header__markets ul {
    padding: 22px 24px 24px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__markets {
    margin-top: 0;
  }

  .mrvll-header--mobile-submenu-open [data-header-dropdown="support"] .mrvll-header__dropdown-content--support {
    padding: 24px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group,
  .mrvll-header--mobile-submenu-open .mrvll-header__group h3,
  .mrvll-header--mobile-submenu-open .mrvll-header__group-toggle,
  .mrvll-header--mobile-submenu-open .mrvll-header__group a,
  .mrvll-header--mobile-submenu-open .mrvll-header__markets a {
    text-align: left;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group h3 {
    justify-content: flex-start;
    margin-bottom: 18px;
    font-size: 1rem;
    font-weight: 700;
  }

  .mrvll-header--mobile-submenu-open [data-header-dropdown="products"] .mrvll-header__group h3 {
    margin-bottom: 18px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group-toggle {
    font-size: inherit;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__group a,
  .mrvll-header--mobile-submenu-open .mrvll-header__markets a {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__actions {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 0;
    border-top: 0;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__action-item {
    display: block;
    width: 100%;
    min-height: 80px;
    border-bottom: 1px solid var(--mrvll-color-border, #d9d9d6);
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__action-item--search {
    display: none;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__action-item--account {
    order: 1;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__action-item--language {
    order: 2;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__action {
    width: 100%;
    min-height: 80px;
    padding: 0 24px;
    justify-content: flex-start;
    gap: 18px;
    color: var(--mrvll-color-text, #212322);
    font-size: 0.875rem;
    text-decoration: none;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__action img {
    width: 22px;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__action-label {
    display: block;
  }

  .mrvll-header--mobile-submenu-open .mrvll-header__action--language::after {
    content: "+";
    margin-left: auto;
    color: var(--mrvll-color-brand, #0072ce);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
  }

  /* The initial mobile-menu state uses the same row treatment before a
     primary accordion is selected. */
  .mrvll-header--open .mrvll-header__bar {
    display: block;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 40px);
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .mrvll-header--open .mrvll-header__panel {
    position: static;
    display: flex;
    min-height: 0;
    padding-bottom: 0;
    flex-direction: column;
  }

  .mrvll-header--open .mrvll-header__panel::after {
    display: none;
  }

  .mrvll-header--open .mrvll-header__nav {
    position: static;
    display: block;
    height: auto;
    margin-top: 56px;
    text-align: left;
  }

  .mrvll-header--open .mrvll-header__list {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 0;
  }

  .mrvll-header--open .mrvll-header__list > li {
    width: 100%;
    border-bottom: 1px solid var(--mrvll-color-border, #d9d9d6);
  }

  .mrvll-header--open .mrvll-header__link {
    display: flex;
    width: 100%;
    min-height: 80px;
    padding: 0 24px;
    align-items: center;
    justify-content: space-between;
    color: var(--mrvll-color-text, #212322);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    text-align: left;
  }

  .mrvll-header--open .mrvll-header__link::after {
    content: "";
    position: relative;
    top: -2px;
    display: block;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-left: auto;
    background: transparent;
    border-right: 2px solid var(--mrvll-color-brand, #0072ce);
    border-bottom: 2px solid var(--mrvll-color-brand, #0072ce);
    transform: rotate(45deg);
  }

  .mrvll-header--open .mrvll-header__link::before {
    content: none;
  }

  .mrvll-header--open .mrvll-header__link[aria-expanded="true"]::after {
    transform: translateY(25%) rotate(225deg);
  }

  .mrvll-header--open .mrvll-header__actions {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 0;
    border-top: 0;
  }

  .mrvll-header--open .mrvll-header__action-item {
    position: static;
    display: block;
    width: 100%;
    min-height: 80px;
    border-bottom: 1px solid var(--mrvll-color-border, #d9d9d6);
  }

  .mrvll-header--open .mrvll-header__action-item--search {
    display: none;
  }

  .mrvll-header--open .mrvll-header__action-item--account {
    order: 1;
  }

  .mrvll-header--open .mrvll-header__action-item--language {
    order: 2;
  }

  .mrvll-header--open .mrvll-header__action {
    width: 100%;
    min-height: 80px;
    padding: 0 24px;
    justify-content: flex-start;
    gap: 18px;
    color: var(--mrvll-color-text, #212322);
    font-size: 0.875rem;
    text-decoration: none;
  }

  .mrvll-header--open .mrvll-header__action img {
    width: 22px;
  }

  .mrvll-header--open .mrvll-header__action-label {
    display: block;
  }

  .mrvll-header--open .mrvll-header__action--language::after {
    content: "+";
    margin-left: auto;
    color: var(--mrvll-color-brand, #0072ce);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
  }

  /* Language menu expands inline (below its row) inside the mobile menu. */
  .mrvll-header--open .mrvll-header__language-menu,
  .mrvll-header--mobile-submenu-open .mrvll-header__language-menu {
    width: 100%;
    padding-bottom: 12px;
  }

  .mrvll-header--open .mrvll-header__language-link,
  .mrvll-header--mobile-submenu-open .mrvll-header__language-link {
    padding: 14px 24px 14px 60px;
    color: var(--mrvll-color-text-muted, #4d4d4f);
    font-size: 0.875rem;
    text-align: left;
  }

  .mrvll-header--open .mrvll-header__language-link:hover,
  .mrvll-header--open .mrvll-header__language-link.is-active,
  .mrvll-header--mobile-submenu-open .mrvll-header__language-link:hover,
  .mrvll-header--mobile-submenu-open .mrvll-header__language-link.is-active {
    background-color: transparent;
    color: var(--mrvll-color-brand, #0072ce);
  }
}

/* --------------------------------------------------------------------------
   Wide layout
   -------------------------------------------------------------------------- */

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-header {
    padding-top: 36px;
  }

  .mrvll-header .mrvll-header__inner {
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  .mrvll-header .mrvll-header__bar {
    flex-wrap: nowrap;
    padding: 0 36px;
    border-radius: 0;
  }

  .mrvll-header .mrvll-header__logo {
    min-height: 71px;
  }

  .mrvll-header .mrvll-header__logo img {
    width: 120px;
  }

  .mrvll-header .mrvll-header__toggle {
    display: none;
  }

  /* Lets the nav and the actions become direct children of the bar, so the
     panel wrapper only exists for the collapsed layout. */
  .mrvll-header .mrvll-header__panel {
    display: contents;
  }

  /* The design centres the links on the bar itself, not on the space left
     over by the logo, so they are taken out of the flow. */
  .mrvll-header .mrvll-header__nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .mrvll-header .mrvll-header__list {
    display: flex;
    align-items: center;
    gap: 79px;
    white-space: nowrap;
  }

  .mrvll-header .mrvll-header__link {
    padding: 26px 0;
  }

  .mrvll-header .mrvll-header__link::after {
    bottom: 22px;
  }

  .mrvll-header .mrvll-header__link[aria-expanded="true"]::after {
    transform: scaleX(1);
  }

  .mrvll-header .mrvll-header__actions {
    gap: 49px;
    margin-top: 0;
    margin-left: auto;
  }

  .mrvll-header .mrvll-header__action--search {
    transition: filter 180ms ease;
  }

  .mrvll-header .mrvll-header__action--search:hover,
  .mrvll-header .mrvll-header__action--search:focus-visible,
  .mrvll-header .mrvll-header__action--search[aria-expanded="true"] {
    filter: invert(35%) sepia(99%) saturate(1417%) hue-rotate(179deg) brightness(91%) contrast(102%);
  }

  .mrvll-header .mrvll-header__dropdown,
  .mrvll-header .mrvll-header__search-panel {
    position: absolute;
    top: 71px;
    right: var(--mrvll-container-gutter-wide, 20px);
    left: var(--mrvll-container-gutter-wide, 20px);
    z-index: 1;
    background-color: var(--mrvll-color-inverse, #fff);
    border-top: 1px solid var(--mrvll-color-border, #d9d9d6);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    transition:
      opacity 380ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 560ms;
  }

  .mrvll-header .mrvll-header__dropdown.is-open,
  .mrvll-header .mrvll-header__search-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Match the reference mega-menu's internal reveal: content groups rise in
     sequence, then each link follows with a short row-level stagger. */
  .mrvll-header .mrvll-header__dropdown-eyebrow,
  .mrvll-header .mrvll-header__group,
  .mrvll-header .mrvll-header__promo,
  .mrvll-header .mrvll-header__markets li,
  .mrvll-header .mrvll-header__search-form {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
      opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mrvll-header .mrvll-header__group {
    --mrvll-header-group-delay: 110ms;
  }

  .mrvll-header .mrvll-header__promo {
    transform: translate3d(0, 18px, 0) scale(0.97);
    transform-origin: center top;
  }

  .mrvll-header .mrvll-header__group:nth-child(2) {
    --mrvll-header-group-delay: 160ms;
  }

  .mrvll-header .mrvll-header__group:nth-child(3) {
    --mrvll-header-group-delay: 210ms;
  }

  .mrvll-header .mrvll-header__group:nth-child(4) {
    --mrvll-header-group-delay: 260ms;
  }

  .mrvll-header .mrvll-header__group:nth-child(5) {
    --mrvll-header-group-delay: 310ms;
  }

  .mrvll-header .mrvll-header__group li {
    --mrvll-header-link-delay: 40ms;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
      opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mrvll-header .mrvll-header__group li:nth-child(2) {
    --mrvll-header-link-delay: 75ms;
  }

  .mrvll-header .mrvll-header__group li:nth-child(3) {
    --mrvll-header-link-delay: 110ms;
  }

  .mrvll-header .mrvll-header__group li:nth-child(4) {
    --mrvll-header-link-delay: 145ms;
  }

  .mrvll-header .mrvll-header__group li:nth-child(5) {
    --mrvll-header-link-delay: 180ms;
  }

  .mrvll-header .mrvll-header__group li:nth-child(6) {
    --mrvll-header-link-delay: 215ms;
  }

  .mrvll-header .mrvll-header__group li:nth-child(7) {
    --mrvll-header-link-delay: 250ms;
  }

  .mrvll-header .mrvll-header__group li:nth-child(8) {
    --mrvll-header-link-delay: 285ms;
  }

  .mrvll-header .mrvll-header__group li:nth-child(9) {
    --mrvll-header-link-delay: 320ms;
  }

  .mrvll-header .mrvll-header__group li:nth-child(10) {
    --mrvll-header-link-delay: 355ms;
  }

  .mrvll-header .mrvll-header__group li:nth-child(11) {
    --mrvll-header-link-delay: 390ms;
  }

  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__dropdown-eyebrow,
  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__group,
  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__promo,
  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__markets li,
  .mrvll-header .mrvll-header__search-panel.is-open .mrvll-header__search-form {
    opacity: 1;
    transform: none;
  }

  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__dropdown-eyebrow {
    transition-delay: 70ms;
  }

  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__group {
    transition-delay: var(--mrvll-header-group-delay);
  }

  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__group li {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--mrvll-header-group-delay) + var(--mrvll-header-link-delay));
  }

  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__promo {
    transition-delay: 180ms;
  }

  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__markets > .mrvll-header__dropdown-eyebrow {
    transition-delay: 280ms;
  }

  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__markets li:nth-child(1) {
    transition-delay: 320ms;
  }

  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__markets li:nth-child(2) {
    transition-delay: 370ms;
  }

  .mrvll-header .mrvll-header__dropdown.is-open .mrvll-header__markets li:nth-child(3) {
    transition-delay: 420ms;
  }

  .mrvll-header .mrvll-header__search-panel.is-open .mrvll-header__search-form {
    transition-delay: 70ms;
  }

  .mrvll-header .mrvll-header__dropdown[hidden],
  .mrvll-header .mrvll-header__search-panel[hidden] {
    display: none;
  }

  .mrvll-header .mrvll-header__dropdown-content {
    padding: 62px 48px 50px;
  }

  .mrvll-header .mrvll-header__dropdown-eyebrow {
    margin-bottom: 32px;
    color: var(--mrvll-color-text-muted, #62666a);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .mrvll-header .mrvll-header__product-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 1.15fr 1.1fr 0.75fr;
    gap: 34px;
  }

  .mrvll-header .mrvll-header__group h3,
  .mrvll-header .mrvll-header__group ul,
  .mrvll-header .mrvll-header__markets ul {
    margin: 0;
    padding: 0;
  }

  .mrvll-header .mrvll-header__group h3 {
    margin-bottom: 12px;
    color: var(--mrvll-color-text, #212322);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .mrvll-header .mrvll-header__group-toggle {
    display: block;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .mrvll-header .mrvll-header__group-title-mobile {
    display: none;
  }

  .mrvll-header .mrvll-header__group ul,
  .mrvll-header .mrvll-header__markets ul {
    list-style: none;
  }

  .mrvll-header .mrvll-header__group li {
    margin: 0 0 7px;
  }

  .mrvll-header .mrvll-header__group a,
  .mrvll-header .mrvll-header__markets a {
    color: var(--mrvll-color-text-muted, #62666a);
    font-size: 0.9375rem;
    line-height: 1.35;
    text-decoration: none;
    transition: color 160ms ease;
  }

  .mrvll-header .mrvll-header__group a:hover,
  .mrvll-header .mrvll-header__group a:focus-visible,
  .mrvll-header .mrvll-header__markets a:hover,
  .mrvll-header .mrvll-header__markets a:focus-visible {
    color: var(--mrvll-color-brand, #0072ce);
  }

  .mrvll-header .mrvll-header__markets {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--mrvll-color-border, #d9d9d6);
  }

  .mrvll-header .mrvll-header__markets .mrvll-header__dropdown-eyebrow {
    margin-bottom: 18px;
  }

  .mrvll-header .mrvll-header__markets ul {
    display: flex;
    gap: 70px;
  }

  .mrvll-header .mrvll-header__markets a {
    color: var(--mrvll-color-text, #212322);
    font-weight: 700;
  }

  .mrvll-header .mrvll-header__markets a span {
    margin-left: 8px;
    color: var(--mrvll-color-brand, #0072ce);
  }

  .mrvll-header .mrvll-header__dropdown-content--with-promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 72px;
    align-items: start;
    padding-top: 60px;
    padding-bottom: 32px;
  }

  .mrvll-header .mrvll-header__company-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px;
    padding-top: 20px;
  }

  .mrvll-header .mrvll-header__promo {
    position: relative;
    display: flex;
    min-height: 370px;
    padding: 30px 34px;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }

  .mrvll-header .mrvll-header__promo-image,
  .mrvll-header .mrvll-header__promo-image .cmp-image,
  .mrvll-header .mrvll-header__promo-image .cmp-image__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .mrvll-header .mrvll-header__promo-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
  }

  .mrvll-header .mrvll-header__promo-image .cmp-image__image {
    object-fit: cover;
  }

  .mrvll-header .mrvll-header__promo-kicker,
  .mrvll-header .mrvll-header__promo strong,
  .mrvll-header .mrvll-header__promo-cta {
    position: relative;
    z-index: 1;
  }

  .mrvll-header .mrvll-header__promo-kicker {
    font-size: 1.25rem;
  }

  .mrvll-header .mrvll-header__promo strong {
    max-width: 250px;
    margin-top: 12px;
    font-size: 2.25rem;
    line-height: 1.13;
  }

  .mrvll-header .mrvll-header__promo-cta {
    margin-top: auto;
    padding: 16px 30px;
    background: #fff;
    color: var(--mrvll-color-text, #212322);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .mrvll-header .mrvll-header__promo-cta span {
    margin-left: 12px;
    color: var(--mrvll-color-brand, #0072ce);
  }

  .mrvll-header .mrvll-header__dropdown-content--support {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.8fr);
    gap: 100px;
    padding-top: 76px;
    padding-bottom: 62px;
  }

  .mrvll-header .mrvll-header__support-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 70px;
  }

  .mrvll-header .mrvll-header__search-panel {
    padding: 28px 48px 20px;
  }

  .mrvll-header .mrvll-header__search-form {
    width: 100%;
    max-width: 714px;
    margin: 0 auto;
  }

  .mrvll-header .mrvll-header__search-form label {
    display: block;
    margin: 0;
  }

  .mrvll-header .mrvll-header__search-input {
    width: 100%;
    padding: 0 2px 10px;
    border: 0;
    border-bottom: 2px solid var(--mrvll-color-brand, #0072ce);
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--mrvll-color-text, #212322);
    font-family: inherit;
    font-size: 1.125rem;
  }

  /* Search suggestions align under the centered search form. */
  .mrvll-header .mrvll-header__search-suggestions {
    width: 100%;
    max-width: 714px;
    margin: 12px auto 0;
  }

  /* Language popover hangs below the globe action, matching the mega-menu look. */
  .mrvll-header .mrvll-header__action-item--language {
    position: relative;
  }

  .mrvll-header .mrvll-header__language-menu {
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    z-index: 3;
    min-width: 220px;
    padding: 10px 0;
    background-color: var(--mrvll-color-inverse, #fff);
    border-top: 2px solid var(--mrvll-color-brand, #0072ce);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    transform: translateX(-50%);
  }

  .mrvll-header .mrvll-header__language-menu.is-open {
    animation: mrvll-header-language-menu-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@media (min-width: 801px) and (max-width: 1470px) {
  .mrvll-header .mrvll-header__inner {
    padding-right: 60px;
    padding-left: 60px;
  }

  .mrvll-header .mrvll-header__dropdown,
  .mrvll-header .mrvll-header__search-panel {
    right: 60px;
    left: 60px;
  }
}

@media (min-width: 1025px) and (max-width: 1100px),
       (min-width: 801px) and (max-width: 1100px) and (orientation: landscape) {
  .mrvll-header .mrvll-header__dropdown-content {
    padding-right: 28px;
    padding-left: 28px;
  }

  .mrvll-header .mrvll-header__product-grid {
    gap: 20px;
  }

  .mrvll-header .mrvll-header__group a {
    font-size: 0.8125rem;
  }

  .mrvll-header .mrvll-header__dropdown-content--with-promo {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 32px;
  }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce),
       (min-width: 801px) and (orientation: landscape) and (prefers-reduced-motion: reduce) {
  .mrvll-header .mrvll-header__dropdown,
  .mrvll-header .mrvll-header__search-panel,
  .mrvll-header .mrvll-header__dropdown-eyebrow,
  .mrvll-header .mrvll-header__group,
  .mrvll-header .mrvll-header__group li,
  .mrvll-header .mrvll-header__promo,
  .mrvll-header .mrvll-header__markets li,
  .mrvll-header .mrvll-header__search-form {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mrvll-header .mrvll-header__language-menu.is-open {
    animation: none;
  }
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce),
       (max-width: 1024px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .mrvll-header--mobile-submenu-open .mrvll-header__link::before,
  .mrvll-header .mrvll-header__label-mobile::after,
  .mrvll-header--mobile-submenu-open .mrvll-header__group-toggle::after {
    transition: none;
  }
}

/* Portrait tablets run the mobile header but the 60px-and-1470px gutter rule
   above still applies at this width, so .mrvll-header__inner keeps its 60px
   padding instead of the 16px a phone gets. The offsets below are hardcoded
   against that 16px gutter, so they need to move in by the 44px difference
   or they collide with (search icon) or overshoot (search panel) the bar. */
@media (min-width: 801px) and (max-width: 1024px) and (orientation: portrait) {
  .mrvll-header--open .mrvll-header__action-item--search,
  .mrvll-header--mobile-submenu-open .mrvll-header__action-item--search {
    right: 116px;
  }

  .mrvll-header.mrvll-header--mobile-search-open .mrvll-header__search-panel {
    right: 60px;
    left: 60px;
  }
}
/* --------------------------------------------------------------------------
   AEM host-page fix (author only)
   Neutralizes OOTB xfpage wrapper: .xf-content-height{min-height:46px}.
   Applies to all Experience Fragment includes on rebranding pages (header +
   footer). No-op on publish — that OOTB rule is not served there.
   -------------------------------------------------------------------------- */
.xf-content-height {
  min-height: 0 !important;
}

/* ==========================================================================
   Hero teaser
   Insight-style slider: one visible card, dual stacked images for a crossfade,
   and a text body that fades out/in on change. Matches immersive-v5 motion
   using only jQuery plus CSS transitions.
   ========================================================================== */

.mrvll-hero-teaser {
  position: relative;
  z-index: 2;
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-hero-teaser,
.mrvll-hero-teaser *,
.mrvll-hero-teaser *::before,
.mrvll-hero-teaser *::after {
  box-sizing: border-box;
}

.mrvll-hero-teaser .mrvll-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mrvll-hero-teaser .mrvll-hero-teaser__card {
  display: flex;
  align-items: stretch;
  min-height: 162px;
  overflow: hidden;
  background-color: var(--mrvll-color-inverse, #fff);
  border: 1px solid var(--mrvll-color-surface, #d9d9d6);
  border-radius: 2px 0 0 2px;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.mrvll-hero-teaser .mrvll-hero-teaser__viewport {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  touch-action: pan-y;
}

.mrvll-hero-teaser .mrvll-hero-teaser__link {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  width: 100%;
  min-height: 162px;
  color: var(--mrvll-color-text, #212322);
  text-decoration: none;
}

/* Dual images for crossfade; hidden on narrow viewports per the design. */
.mrvll-hero-teaser .mrvll-hero-teaser__media {
  display: none;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  background-color: #0b1220;
}

.mrvll-hero-teaser .mrvll-hero-teaser__thumb {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition:
    opacity 640ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 780ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
  z-index: 0;
}

.mrvll-hero-teaser .mrvll-hero-teaser__thumb .cmp-image,
.mrvll-hero-teaser .mrvll-hero-teaser__thumb .cmp-image__image {
  display: block;
  width: 100%;
  height: 100%;
}

.mrvll-hero-teaser .mrvll-hero-teaser__thumb .cmp-image__image {
  object-fit: cover;
}

.mrvll-hero-teaser .mrvll-hero-teaser__thumb.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.mrvll-hero-teaser .mrvll-hero-teaser__thumb.is-exit {
  opacity: 0;
  transform: scale(1.02);
  z-index: 1;
}

.mrvll-hero-teaser .mrvll-hero-teaser__thumb.is-prep {
  opacity: 0;
  transform: scale(1.06);
  transition: none;
  z-index: 2;
}

.mrvll-hero-teaser .mrvll-hero-teaser__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 22px 18px;
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 480ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
}

.mrvll-hero-teaser .mrvll-hero-teaser__body.is-out,
.mrvll-hero-teaser .mrvll-hero-teaser__body.is-prep {
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0);
}

.mrvll-hero-teaser .mrvll-hero-teaser__body.is-prep {
  transition: none;
}

.mrvll-hero-teaser .mrvll-hero-teaser__body.is-in {
  opacity: 1;
  transform: none;
}

.mrvll-hero-teaser .mrvll-hero-teaser__eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.mrvll-hero-teaser .mrvll-hero-teaser__title {
  display: block;
  margin-top: 30px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 31px;
}

.mrvll-hero-teaser .mrvll-hero-teaser__eyebrow .cmp-text,
.mrvll-hero-teaser .mrvll-hero-teaser__eyebrow .cmp-text > *,
.mrvll-hero-teaser .mrvll-hero-teaser__title .cmp-title,
.mrvll-hero-teaser .mrvll-hero-teaser__title .cmp-title__text {
  display: inherit;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Slide data lives in the DOM for AEM; the visible card is driven by JS. */
.mrvll-hero-teaser .mrvll-hero-teaser__slides {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.mrvll-hero-teaser .mrvll-hero-teaser__arrows {
  display: none;
}

.mrvll-hero-teaser .mrvll-hero-teaser__dots {
  position: absolute;
  top: 22px;
  right: 21px;
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}

.mrvll-hero-teaser .mrvll-hero-teaser__dot {
  width: 17px;
  height: 17px;
  padding: 5px;
  background: none;
  border: 0;
  cursor: pointer;
}

.mrvll-hero-teaser .mrvll-hero-teaser__dot::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  background-color: var(--mrvll-color-surface, #d9d9d6);
  border-radius: 50%;
}

.mrvll-hero-teaser .mrvll-hero-teaser__dot[aria-current="true"]::before {
  background-color: var(--mrvll-color-brand, #0072ce);
}

@media (prefers-reduced-motion: reduce) {
  .mrvll-hero-teaser .mrvll-hero-teaser__thumb,
  .mrvll-hero-teaser .mrvll-hero-teaser__body {
    transition: none;
  }
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-hero-teaser .mrvll-hero-teaser__card {
    width: 617px;
    min-height: 168px;
    margin-left: auto;
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__link {
    min-height: 168px;
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__media {
    display: block;
    width: 195px;
    height: 156px;
    margin: 6px;
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__body {
    justify-content: center;
    padding: 0 0 0 20px;
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__eyebrow {
    font-size: 0.9375rem;
    letter-spacing: 3px;
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__title {
    margin-top: 41px;
    font-size: 1.5625rem;
    line-height: 32px;
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__arrows {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 93px;
    border-left: 1px solid var(--mrvll-color-surface, #d9d9d6);
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__arrow {
    display: flex;
    flex: 1 1 50%;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: var(--mrvll-color-inverse, #fff);
    border: 0;
    cursor: pointer;
    transition: background-color 220ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__arrow + .mrvll-hero-teaser__arrow {
    border-top: 1px solid var(--mrvll-color-surface, #d9d9d6);
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__arrow:hover,
  .mrvll-hero-teaser .mrvll-hero-teaser__arrow:focus {
    background-color: rgba(0, 114, 206, 0.1);
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__arrow img {
    display: block;
    width: 8px;
    height: auto;
    transition: transform 280ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__arrow--prev:hover img,
  .mrvll-hero-teaser .mrvll-hero-teaser__arrow--prev:focus img {
    transform: translateX(-3px);
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__arrow--next img {
    transform: scaleX(-1);
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__arrow--next:hover img,
  .mrvll-hero-teaser .mrvll-hero-teaser__arrow--next:focus img {
    transform: scaleX(-1) translateX(-3px);
  }

  .mrvll-hero-teaser .mrvll-hero-teaser__dots {
    display: none;
  }

  /* Out of flow on wide viewports so this wrapper cannot leave a 1px page
     gap between the hero and the grey band. The card hangs over both. */
  .mrvll-hero-teaser--overlap {
    height: 0;
    margin: 0;
    overflow: visible;
  }

  .mrvll-hero-teaser--overlap .mrvll-hero-teaser__card {
    position: relative;
    z-index: 2;
    top: -137px;
  }
}

/* A sibling rule, not nested inside the wide block above: the overlap wrapper
   is full-bleed with no horizontal padding of its own (mobile phones use the
   viewport edge), so a portrait tablet running the mobile layout needs this
   60px gutter restated here too, the same way every other component does. */
@media (min-width: 801px) and (max-width: 1470px) {
  .mrvll-hero-teaser--overlap {
    padding-right: 60px;
    padding-left: 60px;
  }
}

/* ==========================================================================
   Hero
   Full-bleed background with the headline block on top. Supports a static
   image (default) or a background video via .mrvll-hero--video — same
   pattern as .mrvll-close (poster + CSS fallback + reduced-motion guard).
   The header is a sibling that overlays it, so the media keeps its own height.
   ========================================================================== */

.mrvll-hero {
  position: relative;
  background-color: var(--mrvll-color-text, #212322);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-hero,
.mrvll-hero *,
.mrvll-hero *::before,
.mrvll-hero *::after {
  box-sizing: border-box;
}

.mrvll-hero .mrvll-hero__media {
  position: relative;
  display: flex;
  min-height: 569px;
  overflow: hidden;
  background-color: var(--mrvll-color-text, #212322);
  background-image: url("clientlib-refresh/resources/images/hero-ai-scales.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mrvll-hero .mrvll-hero__video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: none;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.mrvll-hero.mrvll-hero--video .mrvll-hero__video {
  display: block;
}

.mrvll-hero.mrvll-hero--video .mrvll-hero__image {
  display: none;
}

.mrvll-hero .mrvll-hero__image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.mrvll-hero .mrvll-hero__image .cmp-image,
.mrvll-hero .mrvll-hero__image .cmp-image__image {
  display: block;
  width: 100%;
  height: 100%;
}

.mrvll-hero .mrvll-hero__image .cmp-image__image {
  object-fit: cover;
  object-position: center;
}

.mrvll-hero .mrvll-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.2);
}

.mrvll-hero .mrvll-hero__inner {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-top: 115px;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-bottom: 40px;
  padding-left: var(--mrvll-container-gutter, 16px);
  color: var(--mrvll-color-inverse, #fff);
}

.mrvll-hero .mrvll-hero__eyebrow {
  margin: 0 0 24px;
  font-size: 0.75rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.mrvll-hero .mrvll-hero__title {
  margin: 0 0 24px;
  max-width: 968px;
  font-size: 2.625rem;
  font-weight: 400;
  line-height: 1;
}

.mrvll-hero .mrvll-hero__lead {
  margin: 0 0 56px;
  max-width: 683px;
  font-size: 1rem;
  line-height: 22px;
}

/* Core Component output inherits the field wrapper's presentation. */
.mrvll-hero .mrvll-hero__eyebrow .cmp-text,
.mrvll-hero .mrvll-hero__eyebrow .cmp-text > *,
.mrvll-hero .mrvll-hero__title .cmp-title,
.mrvll-hero .mrvll-hero__title .cmp-title__text,
.mrvll-hero .mrvll-hero__lead .cmp-text,
.mrvll-hero .mrvll-hero__lead .cmp-text > * {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.mrvll-hero .mrvll-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .mrvll-hero .mrvll-hero__video {
    display: none;
  }

  .mrvll-hero.mrvll-hero--video .mrvll-hero__image {
    display: block;
  }
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-hero .mrvll-hero__media {
    min-height: 802px;
  }

  .mrvll-hero .mrvll-hero__inner {
    padding-top: 190px;
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-bottom: 96px;
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  .mrvll-hero .mrvll-hero__eyebrow {
    margin-bottom: 76px;
    font-size: 0.875rem;
    letter-spacing: 2.8px;
  }

  .mrvll-hero .mrvll-hero__title {
    margin-bottom: 42px;
    font-size: 4.5rem;
    line-height: 80px;
  }

  /* The design gives this gap 110px, but its paragraph is set in Inter and
     runs three lines. In Setimo it runs four, so the gap absorbs the extra
     line to keep the buttons and the media edge on the designed positions. */
  .mrvll-hero .mrvll-hero__lead {
    margin-bottom: 81px;
    font-size: 1.5625rem;
    line-height: 40px;
  }

  .mrvll-hero .mrvll-hero__actions {
    flex-direction: row;
    gap: 20px;
  }
}

@media (min-width: 801px) and (max-width: 1470px) {
  .mrvll-hero .mrvll-hero__inner {
    padding-right: 60px;
    padding-left: 60px;
  }
}

/* ==========================================================================
   News card
   Featured tile, compact row and media teaser. Independent of the news band
   so authors can add, remove or reorder cards. Placement in the grid is
   owned by news.css on the layout container.

   Self-sufficient: every custom property carries the approved value as a
   fallback, so the card renders if the host page has not declared the tokens.
   ========================================================================== */

.mrvll-news-card {
  display: block;
  overflow: hidden;
  background-color: var(--mrvll-color-inverse, #fff);
  color: inherit;
  text-decoration: none;
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-news-card,
.mrvll-news-card *,
.mrvll-news-card *::before,
.mrvll-news-card *::after {
  box-sizing: border-box;
}

.mrvll-news-card .mrvll-news-card__media {
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: #0a0a12;
}

.mrvll-news-card .mrvll-news-card__image {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mrvll-news-card .mrvll-news-card__image .cmp-image,
.mrvll-news-card .mrvll-news-card__image .cmp-image__image {
  display: block;
  width: 100%;
  height: 100%;
}

.mrvll-news-card .mrvll-news-card__image .cmp-image__image {
  object-fit: cover;
}

.mrvll-news-card .mrvll-news-card__body-wrap {
  padding: 16px 17px 18px;
}

.mrvll-news-card .mrvll-news-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 0.75rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.mrvll-news-card .mrvll-news-card__title {
  margin: 10px 0 0;
  color: var(--mrvll-color-text, #212322);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 26px;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mrvll-news-card:hover .mrvll-news-card__image,
.mrvll-news-card:focus-visible .mrvll-news-card__image {
  transform: scale(1.04);
}

.mrvll-news-card:hover .mrvll-news-card__title,
.mrvll-news-card:focus-visible .mrvll-news-card__title {
  color: var(--mrvll-color-brand, #0072ce);
}

.mrvll-news-card .mrvll-news-card__body {
  display: none;
  margin: 12px 0 0;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 1rem;
  line-height: 26px;
}

.mrvll-news-card .mrvll-news-card__meta .cmp-text,
.mrvll-news-card .mrvll-news-card__meta .cmp-text > *,
.mrvll-news-card .mrvll-news-card__title .cmp-title,
.mrvll-news-card .mrvll-news-card__title .cmp-title__text,
.mrvll-news-card .mrvll-news-card__body .cmp-text,
.mrvll-news-card .mrvll-news-card__body .cmp-text > * {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.mrvll-news-card .mrvll-news-card__meta .cmp-text {
  width: 100%;
  min-width: 0;
}

.mrvll-news-card .mrvll-news-card__meta .cmp-text > * {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.mrvll-news-card .mrvll-news-card__meta span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mrvll-news-card .mrvll-news-card__meta time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.mrvll-news-card .mrvll-news-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--mrvll-color-brand, #0072ce);
  font-size: 0.9375rem;
  line-height: 24px;
  text-decoration: none;
}

.mrvll-news-card .mrvll-news-card__link-label {
  border-bottom: 1px solid var(--mrvll-color-brand, #0072ce);
}

.mrvll-news-card .mrvll-news-card__link-icon {
  display: block;
  width: 14px;
  height: 11px;
}

/* Featured */

.mrvll-news-card--featured .mrvll-news-card__image {
  aspect-ratio: 357 / 144;
}

/* Media teaser: image beside copy on all viewports */

.mrvll-news-card--media {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.mrvll-news-card--media .mrvll-news-card__media {
  flex: 0 0 clamp(100px, 32%, 159px);
  width: clamp(100px, 32%, 159px);
}

.mrvll-news-card--media .mrvll-news-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.mrvll-news-card--media .mrvll-news-card__body-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px 16px 16px;
}

.mrvll-news-card--media .mrvll-news-card__title {
  margin-top: auto;
  font-size: 1.125rem;
  line-height: 24px;
}

.mrvll-news-card--media .mrvll-news-card__meta {
  font-size: 0.6875rem;
  letter-spacing: 1.8px;
}

/* Compact rows: text only on narrow viewports */

.mrvll-news-card--compact {
  min-height: 73px;
}

.mrvll-news-card--compact .mrvll-news-card__media {
  display: none;
}

.mrvll-news-card--compact .mrvll-news-card__body-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 11px 14px;
}

.mrvll-news-card--compact .mrvll-news-card__meta {
  font-size: 0.6875rem;
  letter-spacing: 1.8px;
}

.mrvll-news-card--compact .mrvll-news-card__title {
  margin-top: auto;
  font-size: 1rem;
  line-height: 22px;
}

@media (max-width: 400px) {
  .mrvll-news-card--media .mrvll-news-card__meta {
    font-size: 0.625rem;
    letter-spacing: 1.4px;
  }

  .mrvll-news-card--media .mrvll-news-card__meta .cmp-text > * {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mrvll-news-card .mrvll-news-card__image,
  .mrvll-news-card .mrvll-news-card__title {
    transition: none;
  }

  .mrvll-news-card:hover .mrvll-news-card__image,
  .mrvll-news-card:focus-visible .mrvll-news-card__image {
    transform: none;
  }
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-news-card--featured {
    display: flex;
    flex-direction: column;
  }

  .mrvll-news-card--featured .mrvll-news-card__media {
    flex: 0 0 auto;
  }

  .mrvll-news-card--featured .mrvll-news-card__image {
    aspect-ratio: 750 / 303;
  }

  .mrvll-news-card--featured .mrvll-news-card__body-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 24px 39px 32px;
  }

  .mrvll-news-card--featured .mrvll-news-card__meta {
    font-size: 0.9375rem;
    letter-spacing: 3px;
  }

  .mrvll-news-card--featured .mrvll-news-card__title {
    margin-top: 16px;
    font-size: 1.5625rem;
    line-height: 32px;
  }

  .mrvll-news-card--featured .mrvll-news-card__body {
    display: block;
    margin-top: 14px;
    font-size: 1.3125rem;
    line-height: 28px;
  }

  .mrvll-news-card--featured .mrvll-news-card__link {
    margin-top: auto;
    padding-top: 20px;
  }

  .mrvll-news-card--compact {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 115px;
    min-height: 115px;
  }

  .mrvll-news-card--compact .mrvll-news-card__media {
    display: block;
    flex: 0 0 113px;
    width: 113px;
  }

  .mrvll-news-card--compact .mrvll-news-card__image {
    width: 100%;
    height: 100%;
    min-height: 111px;
    aspect-ratio: auto;
  }

  .mrvll-news-card--compact .mrvll-news-card__body-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 20px 16px 16px;
  }

  .mrvll-news-card--compact .mrvll-news-card__meta {
    font-size: 0.9375rem;
    letter-spacing: 3px;
  }

  .mrvll-news-card--compact .mrvll-news-card__title {
    margin-top: auto;
    font-size: 1.5625rem;
    line-height: 32px;
  }

  .mrvll-news-card--compact .mrvll-news-card__title .cmp-title__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .mrvll-news-card--media {
    min-height: 307px;
  }

  .mrvll-news-card--media .mrvll-news-card__media {
    flex: 0 0 310px;
    width: 310px;
  }

  .mrvll-news-card--media .mrvll-news-card__image {
    min-height: 305px;
  }

  .mrvll-news-card--media .mrvll-news-card__body-wrap {
    justify-content: space-between;
    padding: 28px 30px 28px 24px;
  }

  .mrvll-news-card--media .mrvll-news-card__meta {
    font-size: 0.9375rem;
    letter-spacing: 3px;
  }

  .mrvll-news-card--media .mrvll-news-card__title {
    margin-top: auto;
    font-size: 1.5625rem;
    line-height: 32px;
  }
}

/* ==========================================================================
   News
   Tabbed listing band: intro, category tabs, grid and CTA. Card internals
   live in news-card.css. The container owns placement of the card variants
   in the grid.

   Self-sufficient: every custom property carries the approved value as a
   fallback, and the content width lives here rather than in a shared page
   helper.
   ========================================================================== */

.mrvll-news {
  padding-top: 56px;
  padding-bottom: 56px;
  background-color: var(--mrvll-color-surface-cool, #e9e9ec);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-news,
.mrvll-news *,
.mrvll-news *::before,
.mrvll-news *::after {
  box-sizing: border-box;
}

.mrvll-news .mrvll-news__inner {
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-left: var(--mrvll-container-gutter, 16px);
}

.mrvll-news .mrvll-news__intro {
  margin-bottom: 28px;
}

.mrvll-news .mrvll-news__tabs {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
  width: 100%;
  max-width: min(100%, 522px);
  height: 50px;
  margin: 0 auto 24px;
  padding: 5px;
  list-style: none;
  background-color: var(--mrvll-color-surface, #d9d9d6);
  border-radius: 30px;
}

.mrvll-news .mrvll-news__tabs > li {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.mrvll-news .mrvll-news__tab {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 25px;
  background-color: transparent;
  color: var(--mrvll-color-text, #212322);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: background-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mrvll-news .mrvll-news__tab[aria-selected="true"] {
  background-color: var(--mrvll-color-text, #212322);
  color: var(--mrvll-color-inverse, #fff);
}

.mrvll-news .mrvll-news__tab:not([aria-selected="true"]):hover,
.mrvll-news .mrvll-news__tab:not([aria-selected="true"]):focus-visible {
  background-color: rgba(33, 35, 34, 0.08);
}

.mrvll-news .mrvll-news__panels {
  display: block;
}

/* Only the active panel is in flow, so the band + CTA hug the current tab's
   content instead of the tallest tab. Inactive panels keep the native hidden
   attribute (display:none) and leave layout. */
.mrvll-news .mrvll-news__panel.is-active {
  animation: mrvll-news-panel-in 320ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
}

@keyframes mrvll-news-panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mrvll-news .mrvll-news__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mrvll-news .mrvll-news__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mrvll-news .mrvll-news__cta {
  margin-top: 24px;
  text-align: center;
}

.mrvll-news .mrvll-news__cta .mrvll-button {
  width: 100%;
  max-width: 334px;
  min-height: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .mrvll-news .mrvll-news__panel.is-active {
    animation: none;
  }

  .mrvll-news .mrvll-news__tab {
    transition: none;
  }
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-news {
    padding-top: 72px;
    padding-bottom: 110px;
  }

  .mrvll-news .mrvll-news__inner {
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  .mrvll-news .mrvll-news__intro {
    margin-bottom: 36px;
  }

  .mrvll-news .mrvll-news__tabs {
    max-width: 522px;
    height: 50px;
    margin-bottom: 40px;
    padding: 5px;
    gap: 10px;
  }

  .mrvll-news .mrvll-news__tab {
    padding: 0 18px;
    font-size: 0.9375rem;
  }

  .mrvll-news .mrvll-news__grid {
    display: grid;
    grid-template-columns: minmax(0, 750fr) minmax(0, 692fr);
    grid-template-rows: auto auto;
    gap: 8px 27px;
    align-items: stretch;
  }

  .mrvll-news .mrvll-news-card--featured {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .mrvll-news .mrvll-news-card--media {
    grid-column: 2;
    grid-row: 2;
  }

  .mrvll-news .mrvll-news__list {
    grid-column: 2;
    grid-row: 1;
    gap: 8px;
  }

  .mrvll-news .mrvll-news__cta {
    margin-top: 45px;
  }

  .mrvll-news .mrvll-news__cta .mrvll-button {
    width: auto;
    max-width: none;
    min-height: 60px;
  }
}

@media (min-width: 801px) and (max-width: 1470px) {
  .mrvll-news .mrvll-news__inner {
    padding-right: 60px;
    padding-left: 60px;
  }
}

/* ==========================================================================
   Portfolio carousel
   Dark band: left-aligned intro, white card beside a wide image. Tabs sit on
   the image with a timed progress rule (4s). Previous/next arrows sit on the
   card. Narrow viewports stack image, card and dash-style tabs.
   ========================================================================== */

.mrvll-portfolio {
  padding-top: 56px;
  padding-bottom: 56px;
  background-color: #040309;
  color: var(--mrvll-color-inverse, #fff);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-portfolio,
.mrvll-portfolio *,
.mrvll-portfolio *::before,
.mrvll-portfolio *::after {
  box-sizing: border-box;
}

.mrvll-portfolio .mrvll-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mrvll-portfolio .mrvll-portfolio__inner {
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-left: var(--mrvll-container-gutter, 16px);
}

.mrvll-portfolio .mrvll-portfolio__intro {
  margin-bottom: 40px;
}

.mrvll-portfolio .mrvll-portfolio__stage {
  display: flex;
  flex-direction: column;
  gap: 0;
  touch-action: pan-y;
}

.mrvll-portfolio .mrvll-portfolio__media {
  position: relative;
  order: 1;
  overflow: hidden;
  aspect-ratio: 978 / 609;
  background-color: #0a0a12;
}

.mrvll-portfolio .mrvll-portfolio__media::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 116px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
  pointer-events: none;
}

.mrvll-portfolio .mrvll-portfolio__image-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 700ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
}

.mrvll-portfolio .mrvll-portfolio__image-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.mrvll-portfolio .mrvll-portfolio__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mrvll-portfolio .mrvll-portfolio__card {
  display: none;
  order: 2;
  flex-direction: column;
  padding: 26px 23px 24px;
  background-color: var(--mrvll-color-inverse, #fff);
  color: var(--mrvll-color-text, #212322);
}

.mrvll-portfolio .mrvll-portfolio__card.is-active {
  display: flex;
}

.mrvll-portfolio .mrvll-portfolio__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 30px;
}

.mrvll-portfolio .mrvll-portfolio__body {
  margin: 17px 0 0;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 1rem;
  line-height: 26px;
}

.mrvll-portfolio .mrvll-portfolio__title .cmp-title,
.mrvll-portfolio .mrvll-portfolio__title .cmp-title__text,
.mrvll-portfolio .mrvll-portfolio__body .cmp-text,
.mrvll-portfolio .mrvll-portfolio__body .cmp-text > *,
.mrvll-portfolio .mrvll-portfolio__body .cmp-text p,
.mrvll-portfolio .mrvll-portfolio__body .cmp-text ul,
.mrvll-portfolio .mrvll-portfolio__body .cmp-text ol {
  margin: 0;
  color: inherit;
  font: inherit;
}

.mrvll-portfolio .mrvll-portfolio__body .cmp-text ul,
.mrvll-portfolio .mrvll-portfolio__body .cmp-text ol {
  padding-left: 1.2em;
}

.mrvll-portfolio .mrvll-portfolio__body .cmp-text p + p,
.mrvll-portfolio .mrvll-portfolio__body .cmp-text p + ul,
.mrvll-portfolio .mrvll-portfolio__body .cmp-text p + ol {
  margin-top: 0.6em;
}

.mrvll-portfolio .mrvll-portfolio__body .cmp-text a {
  color: inherit;
  text-decoration: underline;
}

.mrvll-portfolio .mrvll-portfolio__body .cmp-text img {
  max-width: 100%;
  height: auto;
}

/* Phones, and tablets held vertically. Every iPad portrait width is <= 1024
   (mini 744, 10.2" 810, Air 820, Pro 11" 834, Pro 12.9" 1024) while every iPad
   landscape width is >= 1080, so 1024 cleanly separates the two. */
@media (max-width: 800px),
       (max-width: 1024px) and (orientation: portrait) {
  .mrvll-portfolio .mrvll-portfolio__title .cmp-title__text {
    max-width: 280px;
  }
}

.mrvll-portfolio .mrvll-portfolio__image .cmp-image,
.mrvll-portfolio .mrvll-portfolio__image .cmp-image__image {
  display: block;
  width: 100%;
  height: 100%;
}

.mrvll-portfolio .mrvll-portfolio__image .cmp-image__image {
  object-fit: cover;
}

.mrvll-portfolio .mrvll-portfolio__cta {
  box-sizing: border-box;
  align-self: stretch;
  height: 50px;
  min-height: 50px;
  margin-top: 32px;
  padding-top: 0;
  padding-bottom: 0;
}

.mrvll-portfolio .mrvll-portfolio__card.is-active .mrvll-portfolio__cta {
  animation: mrvll-portfolio-fade-in 480ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
}

@keyframes mrvll-portfolio-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Arrows — wide only
   -------------------------------------------------------------------------- */

.mrvll-portfolio .mrvll-portfolio__arrows {
  display: none;
}

/* --------------------------------------------------------------------------
   Tabs — overlaid on the media
   -------------------------------------------------------------------------- */

.mrvll-portfolio .mrvll-portfolio__tabs {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 16px 18px;
  list-style: none;
}

.mrvll-portfolio .mrvll-portfolio__tabs > li {
  flex: 1 1 0;
  min-width: 0;
}

.mrvll-portfolio .mrvll-portfolio__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--mrvll-color-inverse, #fff);
  cursor: pointer;
  opacity: 0.7;
  text-align: left;
}

.mrvll-portfolio .mrvll-portfolio__tab[aria-selected="true"],
.mrvll-portfolio .mrvll-portfolio__tab.is-done {
  opacity: 1;
}

.mrvll-portfolio .mrvll-portfolio__tab-rule {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  margin-bottom: 10px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.35);
}

.mrvll-portfolio .mrvll-portfolio__tab-progress {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--mrvll-color-brand, #0072ce);
  transform: scaleX(0);
  transform-origin: left center;
}

.mrvll-portfolio .mrvll-portfolio__tab.is-done .mrvll-portfolio__tab-progress {
  transform: scaleX(1);
}

.mrvll-portfolio .mrvll-portfolio__tab-label {
  display: none;
  overflow: hidden;
  font-size: 0.75rem;
  letter-spacing: 2.4px;
  line-height: 1.25;
  text-transform: uppercase;
}

.mrvll-portfolio .mrvll-portfolio__tab[aria-selected="true"] .mrvll-portfolio__tab-label {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .mrvll-portfolio .mrvll-portfolio__card.is-active .mrvll-portfolio__cta {
    animation: none;
  }

  .mrvll-portfolio .mrvll-portfolio__image-slide {
    transition: none;
  }

  .mrvll-portfolio .mrvll-portfolio__image,
  .mrvll-portfolio.is-story-running .mrvll-portfolio__image-slide.is-active .mrvll-portfolio__image {
    transform: none;
    animation: none;
  }

  .mrvll-portfolio .mrvll-portfolio__arrow,
  .mrvll-portfolio .mrvll-portfolio__arrow img {
    transition: none;
  }

  .mrvll-portfolio .mrvll-portfolio__arrow--prev:hover img,
  .mrvll-portfolio .mrvll-portfolio__arrow--prev:focus img,
  .mrvll-portfolio .mrvll-portfolio__arrow--next:hover img,
  .mrvll-portfolio .mrvll-portfolio__arrow--next:focus img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Wide layout

   Real desktops, plus tablets in landscape. The two branches are the logical
   complement of the mobile query above (width >= 801 AND NOT (<= 1024 AND
   portrait)), written as an OR pair so no Media Queries Level 4 `not()` is
   needed — this CSS ships to the browser unprocessed.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-portfolio {
    padding-top: 191px;
    padding-bottom: 120px;
  }

  .mrvll-portfolio .mrvll-portfolio__inner {
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  .mrvll-portfolio .mrvll-portfolio__intro {
    margin-bottom: 30px;
  }

  .mrvll-portfolio .mrvll-portfolio__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 488px) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  .mrvll-portfolio .mrvll-portfolio__card {
    display: none;
    grid-column: 1;
    grid-row: 1;
    min-height: 609px;
    padding: 46px 38px 50px;
  }

  .mrvll-portfolio .mrvll-portfolio__card.is-active {
    display: flex;
  }

  .mrvll-portfolio .mrvll-portfolio__title {
    font-size: 2.0625rem;
    line-height: 40px;
  }

  .mrvll-portfolio .mrvll-portfolio__body {
    margin-top: 16px;
    font-size: 1.0625rem;
    line-height: 28px;
  }

  .mrvll-portfolio .mrvll-portfolio__cta {
    align-self: flex-start;
    box-sizing: border-box;
    width: auto;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    margin-top: auto;
    font-size: 0.875rem;
    letter-spacing: 1.4px;
  }

  .mrvll-portfolio .mrvll-portfolio__media {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    height: 609px;
    aspect-ratio: auto;
  }

  .mrvll-portfolio .mrvll-portfolio__arrows {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    gap: 3px;
    align-self: end;
    justify-self: end;
    z-index: 2;
    /* Match the card’s bottom padding so arrows share the CTA baseline. */
    margin: 0 38px 50px 0;
  }

  .mrvll-portfolio .mrvll-portfolio__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 0;
    background-color: var(--mrvll-color-inverse, #fff);
    border: 1px solid var(--mrvll-color-surface, #d9d9d6);
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 220ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .mrvll-portfolio .mrvll-portfolio__arrow:hover,
  .mrvll-portfolio .mrvll-portfolio__arrow:focus {
    background-color: rgba(0, 114, 206, 0.1);
  }

  .mrvll-portfolio .mrvll-portfolio__arrow img {
    display: block;
    width: 6px;
    height: 10px;
    transition: transform 280ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .mrvll-portfolio .mrvll-portfolio__arrow--prev:hover img,
  .mrvll-portfolio .mrvll-portfolio__arrow--prev:focus img {
    transform: translateX(-3px);
  }

  .mrvll-portfolio .mrvll-portfolio__arrow--next:hover img,
  .mrvll-portfolio .mrvll-portfolio__arrow--next:focus img {
    transform: translateX(3px);
  }

  .mrvll-portfolio .mrvll-portfolio__tabs {
    gap: 37px;
    padding: 0 40px 32px;
  }

  .mrvll-portfolio .mrvll-portfolio__tab-label {
    display: block;
  }
}

/* Deliberately NOT orientation-scoped. At 801-1470px the neighbouring sections
   are still in desktop layout and use the 60px wide gutter from global.css, so
   a portrait tablet keeps this gutter and stays horizontally aligned with them
   even though its own layout is now the mobile one. */
@media (min-width: 801px) and (max-width: 1470px) {
  .mrvll-portfolio .mrvll-portfolio__inner {
    padding-right: 60px;
    padding-left: 60px;
  }
}

/* ==========================================================================
   Reveal (scroll entrances)
   Port of the immersive-v5 enter pattern: elements start hidden via
   .mrvll-enter and animate only when .is-in is added. Transition lives on
   the revealed state so marking .mrvll-enter does not fade content out first.
   ========================================================================== */

:root {
  --mrvll-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
}

.mrvll-enter {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}

.mrvll-hero__eyebrow.mrvll-enter,
.mrvll-section-intro__eyebrow.mrvll-enter,
.mrvll-scale-panel__eyebrow.mrvll-enter,
.mrvll-stats__eyebrow.mrvll-enter,
.mrvll-news-card__meta.mrvll-enter,
.mrvll-distance-explorer__drag-label.mrvll-enter {
  transform: translate3d(0, 0.55rem, 0);
}

.mrvll-hero__title.mrvll-enter,
.mrvll-section-intro__title.mrvll-enter,
.mrvll-distance-explorer__title.mrvll-enter,
.mrvll-distance-explorer__distance.mrvll-enter,
.mrvll-stats__title.mrvll-enter,
.mrvll-news-card__title.mrvll-enter,
.mrvll-cta-band__title.mrvll-enter,
.mrvll-stats-card__value.mrvll-enter {
  transform: translate3d(0, 1.7rem, 0);
}

.mrvll-stats-card__icon.mrvll-enter {
  transform: translate3d(0, 1rem, 0);
}

.mrvll-stats-card__text.mrvll-enter,
.mrvll-stats__lead.mrvll-enter {
  transform: translate3d(0, 0.85rem, 0);
}

.mrvll-hero__actions .mrvll-button.mrvll-enter,
.mrvll-hero-teaser__card.mrvll-enter,
.mrvll-scroll-hint.mrvll-enter,
.mrvll-news__tabs.mrvll-enter,
.mrvll-news__cta.mrvll-enter,
.mrvll-cta-band__actions .mrvll-button.mrvll-enter,
.mrvll-distance-explorer__footer .mrvll-button.mrvll-enter {
  transform: translate3d(0, 0.85rem, 0);
}

.mrvll-enter.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 780ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1)), transform 780ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: var(--enter-delay, 0ms);
}

.mrvll-hero__title.mrvll-enter.is-in,
.mrvll-section-intro__title.mrvll-enter.is-in,
.mrvll-distance-explorer__title.mrvll-enter.is-in,
.mrvll-distance-explorer__distance.mrvll-enter.is-in,
.mrvll-stats__title.mrvll-enter.is-in,
.mrvll-news-card__title.mrvll-enter.is-in,
.mrvll-cta-band__title.mrvll-enter.is-in,
.mrvll-stats-card__value.mrvll-enter.is-in {
  transition-duration: 900ms;
}

/* Early hide for above-the-fold hero copy while JS prepares .mrvll-enter.
   Only applies when JS is available and motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.motion-reduce) .mrvll-hero__eyebrow:not(.is-in),
  html.js:not(.motion-reduce) .mrvll-hero__title:not(.is-in),
  html.js:not(.motion-reduce) .mrvll-hero__lead:not(.is-in),
  html.js:not(.motion-reduce) .mrvll-hero__actions .mrvll-button:not(.is-in),
  html.js:not(.motion-reduce) .mrvll-hero-teaser__card:not(.is-in),
  html.js:not(.motion-reduce) .mrvll-scroll-hint:not(.is-in) {
    opacity: 0;
  }
}

/* ==========================================================================
   Scale panel
   One card: label, scale diagram (Image) and paragraph. Independent of any
   wrapper, so it can be placed on its own or repeated inside a layout
   container.

   Label and paragraph match AEM Core Components output: parent wrappers
   (__eyebrow, __body) around Title v3 and Text v2. Design type lives on the
   wrapper; core-component hooks inherit it.

   The diagram is one Image (bg_01 / bg_02) in the infographic slot from the
   approved layout — under the label, above the paragraph. The PNG is
   transparent line art; it must not be stretched as a full-card background.

   Self-sufficient: every custom property carries the approved value as a
   fallback, so the component renders correctly on a page that declares no
   design tokens at all. Declaring the tokens site-wide still wins.
   ========================================================================== */

.mrvll-scale-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 380px;
  padding: 23px 15px 24px;
  background-color: var(--mrvll-color-surface, #d9d9d6);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-scale-panel,
.mrvll-scale-panel *,
.mrvll-scale-panel *::before,
.mrvll-scale-panel *::after {
  box-sizing: border-box;
}

.mrvll-scale-panel .cmp-title,
.mrvll-scale-panel .cmp-text,
.mrvll-scale-panel .cmp-image {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Field type — on the wrapper, then inherited by Title / Text
   -------------------------------------------------------------------------- */

.mrvll-scale-panel .mrvll-scale-panel__eyebrow {
  flex: 0 0 auto;
  margin: 0 0 24px;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 2.4px;
  line-height: 1.2;
  text-transform: uppercase;
}

.mrvll-scale-panel .mrvll-scale-panel__body {
  flex: 0 0 auto;
  margin-top: 32px;
  color: var(--mrvll-color-text, #212322);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 24px;
}

/* AEM data-sly-resource decoration uses the child node name as a class
   (label, text). Bootstrap 3 .label is a badge with color:#fff — reset it. */
.mrvll-scale-panel .mrvll-scale-panel__eyebrow > .label,
.mrvll-scale-panel .mrvll-scale-panel__body > .text {
  display: block;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: inherit;
  white-space: normal;
  vertical-align: baseline;
  border-radius: 0;
  background: transparent;
}

.mrvll-scale-panel .mrvll-scale-panel__eyebrow .cmp-title,
.mrvll-scale-panel .mrvll-scale-panel__eyebrow .cmp-title__text,
.mrvll-scale-panel .mrvll-scale-panel__eyebrow .cmp-title__link,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text p,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text ul,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text ol,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text__paragraph {
  margin: 0;
  padding: 0;
  width: auto;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

.mrvll-scale-panel .mrvll-scale-panel__eyebrow .cmp-title__link {
  text-decoration: none;
}

.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text ul,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text ol {
  padding-left: 1.2em;
}

.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text p + p,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text p + ul,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text p + ol {
  margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
   Diagram — Image in the Figma infographic slot
   Locked 660:350 slot so swapping authored assets cannot change card height.
   Desktop card is 730×640. Label baseline sits ~63px from the top; SCALE
   ACROSS starts at 164px; the paragraph starts at 443px.
   -------------------------------------------------------------------------- */

.mrvll-scale-panel .mrvll-scale-panel__diagram {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 660 / 350;
  overflow: hidden;
}

/* Image v3 may wrap the img in a picture (srcset) or a link. Authored DAM
   images also pass through marvell-common .mrvll-image-wrap. */
.mrvll-scale-panel .mrvll-scale-panel__diagram .cmp-image,
.mrvll-scale-panel .mrvll-scale-panel__diagram .cmp-image__link,
.mrvll-scale-panel .mrvll-scale-panel__diagram .mrvll-image-wrap,
.mrvll-scale-panel .mrvll-scale-panel__diagram picture {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.mrvll-scale-panel .mrvll-scale-panel__diagram .cmp-image__image,
.mrvll-scale-panel .mrvll-scale-panel__diagram .mrvll-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Wide layout — approved 730×640 card
   -------------------------------------------------------------------------- */

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-scale-panel {
    min-height: 640px;
    padding: 63px 51px 48px;
  }

  .mrvll-scale-panel .mrvll-scale-panel__eyebrow {
    margin-bottom: 83px;
    font-size: 0.875rem;
    letter-spacing: 2.8px;
  }

  .mrvll-scale-panel .mrvll-scale-panel__body {
    font-size: 1.5625rem;
    line-height: 32px;
    padding-top: 35px;
  }
}

/* ==========================================================================
   Scale panels container
   Grey-to-transparent wash, content width and the responsive row that
   arranges any number of section intros and scale panels. position: relative
   is required so the page-level scroll hint can overlay this band.

   The container owns the position and spacing of its direct children. It
   never styles their internals — see scale-panel.css and section-intro.css.
   ========================================================================== */

.mrvll-scale-panels {
  position: relative;
  padding-top: 68px;
  padding-bottom: 48px;
  background-image: linear-gradient(to bottom, var(--mrvll-color-gray-light, #c8c9c7), rgba(200, 201, 199, 0));
  background-repeat: no-repeat;
  background-size: 100% 54px;
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-scale-panels,
.mrvll-scale-panels *,
.mrvll-scale-panels *::before,
.mrvll-scale-panels *::after {
  box-sizing: border-box;
}

.mrvll-scale-panels .mrvll-scale-panels__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-left: var(--mrvll-container-gutter, 16px);
}

.mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-section-intro {
  flex: 1 0 100%;
  width: 100%;
  max-width: none;
}

/* drop zone = full-width row inside __inner */
.mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-scale-panels__panels {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
}

/* panels row is a direct flex container (no AEM grid) */
.mrvll-scale-panels .mrvll-scale-panels__panels {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

/* card sizing */
.mrvll-scale-panels .mrvll-scale-panels__panels .mrvll-scale-panel {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-section-intro:not(:first-child) {
  margin-top: 56px;
}

.mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-section-intro:not(:last-child) {
  margin-bottom: 56px;
}

.mrvll-scale-panels .mrvll-scroll-hint {
  display: none;
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-scale-panels {
    margin-top: -1px;
    padding-top: 199px;
    padding-bottom: 100px;
    background-size: 100% 402px;
  }

  .mrvll-scale-panels .mrvll-scale-panels__inner {
    gap: 13px;
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  /* panels row gap */
  .mrvll-scale-panels .mrvll-scale-panels__panels {
    gap: 13px;
  }

  /* Two current panels retain the approved half-row width. A minimum basis
     makes additional authored panels wrap instead of shrinking indefinitely. */
  .mrvll-scale-panels .mrvll-scale-panels__panels .mrvll-scale-panel {
    flex: 1 1 360px;
    width: auto;
    max-width: none;
    min-width: min(100%, 360px);
  }

  .mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-section-intro:not(:first-child) {
    margin-top: 87px;
  }

  .mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-section-intro:not(:last-child) {
    margin-bottom: 87px;
  }

  .mrvll-scale-panels .mrvll-scroll-hint {
    position: absolute;
    top: 24px;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: var(--mrvll-container-max, 1513px);
    margin: 0 auto;
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
    color: var(--mrvll-color-text, #212322);
    font-size: 0.8125rem;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    pointer-events: none;
  }

  .mrvll-scale-panels .mrvll-scroll-hint .mrvll-scroll-hint__icon {
    display: block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
  }
}

@media (min-width: 801px) and (max-width: 1470px) {
  .mrvll-scale-panels .mrvll-scale-panels__inner,
  .mrvll-scale-panels .mrvll-scroll-hint {
    padding-right: 60px;
    padding-left: 60px;
  }
}

/* ==========================================================================
   Section intro
   Eyebrow, headline and an optional supporting paragraph. Left aligned by
   default; the centred modifier is the one the scale panels layout uses.

   Markup matches AEM Core Components output: each field is a parent wrapper
   (__eyebrow, __title, __body) around Title v3 or Text v2.

   Design type lives on the field wrapper. Core-component hooks inherit it, so
   Bootstrap / production heading and paragraph rules cannot keep their own
   size, weight or line-height. Never target h1–h6 by tag name.

   Self-sufficient: every custom property carries the approved value as a
   fallback, so the component renders correctly on a page that declares no
   design tokens at all. Declaring the tokens site-wide still wins.
   ========================================================================== */

.mrvll-section-intro {
  margin: 0;
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-section-intro,
.mrvll-section-intro *,
.mrvll-section-intro *::before,
.mrvll-section-intro *::after {
  box-sizing: border-box;
}

.mrvll-section-intro .cmp-title,
.mrvll-section-intro .cmp-text {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Field type — on the wrapper, then inherited by Title / Text
   -------------------------------------------------------------------------- */

.mrvll-section-intro .mrvll-section-intro__eyebrow {
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 2.4px;
  line-height: 1.2;
  text-transform: uppercase;
}

.mrvll-section-intro .mrvll-section-intro__title {
  margin-top: 14px;
  color: var(--mrvll-color-text, #212322);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 34px;
}

.mrvll-section-intro .mrvll-section-intro__body {
  margin-top: 18px;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 1rem;
  font-weight: 400;
  line-height: 26px;
}

/* Beat UA / Bootstrap heading + paragraph metrics without targeting tag names. */
.mrvll-section-intro .mrvll-section-intro__eyebrow .cmp-text,
.mrvll-section-intro .mrvll-section-intro__eyebrow .cmp-text p,
.mrvll-section-intro .mrvll-section-intro__eyebrow .cmp-text__paragraph,
.mrvll-section-intro .mrvll-section-intro__title .cmp-title,
.mrvll-section-intro .mrvll-section-intro__title .cmp-title__text,
.mrvll-section-intro .mrvll-section-intro__title .cmp-title__link,
.mrvll-section-intro .mrvll-section-intro__title .cmp-text,
.mrvll-section-intro .mrvll-section-intro__title .cmp-text > *,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text p,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text ul,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text ol,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text__paragraph {
  margin: 0;
  padding: 0;
  width: auto;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

.mrvll-section-intro .mrvll-section-intro__title .cmp-title__link {
  text-decoration: none;
}

.mrvll-section-intro .mrvll-section-intro__body .cmp-text ul,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text ol {
  padding-left: 1.2em;
}

.mrvll-section-intro .mrvll-section-intro__body .cmp-text p + p,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text p + ul,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text p + ol {
  margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
   Modifiers
   -------------------------------------------------------------------------- */

.mrvll-section-intro--center {
  text-align: center;
  width: 100%;
}

.mrvll-section-intro--inverse .mrvll-section-intro__eyebrow,
.mrvll-section-intro--inverse .mrvll-section-intro__title,
.mrvll-section-intro--inverse .mrvll-section-intro__body {
  color: var(--mrvll-color-inverse, #fff);
}

.mrvll-section-intro--portfolio .mrvll-section-intro__eyebrow {
  color: var(--mrvll-color-gray, #a7a8a9);
}

.mrvll-section-intro--portfolio .mrvll-section-intro__title .cmp-title__text {
  max-width: 280px;
}

.mrvll-section-intro--news .mrvll-section-intro__title {
  line-height: 34px;
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-section-intro .mrvll-section-intro__eyebrow {
    font-size: 0.875rem;
    letter-spacing: 2.8px;
  }

  .mrvll-section-intro .mrvll-section-intro__title {
    margin-top: 20px;
    font-size: 2.6875rem;
    line-height: 50px;
  }

  .mrvll-section-intro .mrvll-section-intro__body {
    margin-top: 20px;
    font-size: 1.3125rem;
    line-height: 28px;
  }

  /* 658px measure on the copy, not on the root, so a flex parent can still
     give this component a full row. */
  .mrvll-section-intro--center .mrvll-section-intro__eyebrow,
  .mrvll-section-intro--center .mrvll-section-intro__title,
  .mrvll-section-intro--center .mrvll-section-intro__body {
    max-width: 658px;
    margin-right: auto;
    margin-left: auto;
  }

  .mrvll-section-intro--news .mrvll-section-intro__title {
    line-height: 46px;
  }

  .mrvll-section-intro--portfolio .mrvll-section-intro__title .cmp-title__text {
    max-width: 1000px;
  }
}

@media (min-width: 501px) and (max-width: 800px),
       (min-width: 501px) and (max-width: 1024px) and (orientation: portrait) {
  .mrvll-section-intro--portfolio .mrvll-section-intro__title .cmp-title__text {
    max-width: 650px;
  }
}

@media (min-width: 1501px) {
  .mrvll-section-intro--portfolio .mrvll-section-intro__title .cmp-title__text {
    max-width: none;
  }
}

/* ==========================================================================
   Stats card
   One Results metric: icon, value, body. Independent of the band so authors
   can add, remove or reorder cards. Placement in the grid is owned by
   stats.css on the layout container.
   ========================================================================== */

.mrvll-stats-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  column-gap: 16px;
  row-gap: 12px;
  padding: 20px 14px 24px;
  background-color: var(--mrvll-color-surface, #d9d9d6);
  border: 1px solid var(--mrvll-color-gray-light, #c8c9c7);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-stats-card,
.mrvll-stats-card *,
.mrvll-stats-card *::before,
.mrvll-stats-card *::after {
  box-sizing: border-box;
}

.mrvll-stats-card .mrvll-stats-card__icon {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  display: block;
  width: 40px;
  height: 40px;
}

.mrvll-stats-card .mrvll-stats-card__icon .cmp-image,
.mrvll-stats-card .mrvll-stats-card__icon .cmp-image__image {
  display: block;
  width: 100%;
  height: 100%;
}

.mrvll-stats-card .mrvll-stats-card__icon .cmp-image__image {
  object-fit: contain;
}

.mrvll-stats-card .mrvll-stats-card__value {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 2rem;
  font-weight: 400;
  line-height: 32px;
}

.mrvll-stats-card .mrvll-stats-card__text {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: calc(1rem + 7pt);
  line-height: calc(24px + 7pt);
}

.mrvll-stats-card:not(:has(.mrvll-stats-card__value)) .mrvll-stats-card__text {
  grid-row: 1;
}

.mrvll-stats-card .mrvll-stats-card__value .cmp-text,
.mrvll-stats-card .mrvll-stats-card__value .cmp-text > *,
.mrvll-stats-card .mrvll-stats-card__text .cmp-text,
.mrvll-stats-card .mrvll-stats-card__text .cmp-text > * {
  margin: 0;
  color: inherit;
  font: inherit;
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-stats-card {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    box-sizing: border-box;
    min-height: 293px;
    padding: 36px 41px 32px;
  }

  .mrvll-stats-card .mrvll-stats-card__icon {
    grid-column: auto;
    grid-row: auto;
    align-self: flex-start;
    justify-self: auto;
    width: 55px;
    height: 55px;
    margin: 0;
  }

  .mrvll-stats-card .mrvll-stats-card__value {
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 auto;
    margin-top: 25px;
    font-size: 3.5625rem;
    line-height: 72px;
  }

  .mrvll-stats-card .mrvll-stats-card__text {
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 auto;
    margin-top: 12px;
    font-size: calc(1.1875rem + 7pt);
    line-height: calc(28px + 7pt);
  }

  .mrvll-stats-card:not(:has(.mrvll-stats-card__value)) .mrvll-stats-card__text {
    margin-top: 25px;
  }
}

/* ==========================================================================
   Stats
   Results band and the grid that arranges the intro plus any number of
   stats cards. Card internals live in stats-card.css.
   ========================================================================== */

.mrvll-stats {
  padding-top: 56px;
  padding-bottom: 56px;
  background-color: var(--mrvll-color-inverse, #fff);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-stats,
.mrvll-stats *,
.mrvll-stats *::before,
.mrvll-stats *::after {
  box-sizing: border-box;
}

.mrvll-stats .mrvll-stats__inner {
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-left: var(--mrvll-container-gutter, 16px);
}

.mrvll-stats .mrvll-stats__layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mrvll-stats .mrvll-stats__intro {
  order: 0;
  margin-bottom: 16px;
}

.mrvll-stats .mrvll-stats__title {
  margin: 14px 0 0;
  color: var(--mrvll-color-text, #212322);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 34px;
}

.mrvll-stats .mrvll-stats__title em {
  font-family: inherit;
  font-weight: 300;
  font-style: italic;
}

.mrvll-stats .mrvll-stats__lead {
  margin: 18px 0 0;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 1.25rem;
  line-height: 28px;
}

.mrvll-stats .mrvll-stats__eyebrow {
  margin: 0;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 0.75rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.mrvll-stats .mrvll-stats__eyebrow .cmp-text,
.mrvll-stats .mrvll-stats__eyebrow .cmp-text > *,
.mrvll-stats .mrvll-stats__title .cmp-text,
.mrvll-stats .mrvll-stats__title .cmp-text > *,
.mrvll-stats .mrvll-stats__lead .cmp-text,
.mrvll-stats .mrvll-stats__lead .cmp-text > * {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-stats {
    padding-top: 152px;
    padding-bottom: 152px;
  }

  .mrvll-stats .mrvll-stats__inner {
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  .mrvll-stats .mrvll-stats__layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 30px;
    align-items: stretch;
  }

  .mrvll-stats .mrvll-stats__intro {
    grid-column: 1;
    grid-row: 1;
    order: 0;
    margin-bottom: 0;
    padding-top: 25px;
  }

  .mrvll-stats .mrvll-stats__eyebrow {
    font-size: 0.875rem;
    letter-spacing: 2.8px;
  }

  .mrvll-stats .mrvll-stats__title {
    margin-top: 11px;
    font-size: 2.6875rem;
    line-height: 50px;
  }

  .mrvll-stats .mrvll-stats__lead {
    margin-top: 20px;
    font-size: 1.3125rem;
    line-height: 28px;
  }
}

@media (min-width: 801px) and (max-width: 1470px) {
  .mrvll-stats .mrvll-stats__inner {
    padding-right: 60px;
    padding-left: 60px;
  }
}

/* ==========================================================================
   Setimo for the demo page only — do not ship
   This page loads the production clientlib, which declares Setimo against
   marvell.com/content/dam/. The CDN refuses that font to any other origin,
   so on a demo host the request fails and the browser falls back to Arial.
   On marvell.com itself the font is same-origin and the clientlib is enough.

   Declaring the face here keeps the demo in the approved typeface without
   touching the components: it sets no colour, spacing or body font, so the
   page still proves the components are self-sufficient.
   ========================================================================== */

@font-face {
  font-family: "setimo";
  src: url("clientlib-refresh/resources/fonts/Setimo_W_Rg.woff2") format("woff2"),
       url("clientlib-refresh/resources/fonts/Setimo_W_Rg.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Preview page only — do not ship
   Page scaffolding that a real host page already provides: body reset, the
   local Setimo face, and a visible focus ring. None of the components depend
   on this file; it exists so index.html renders on its own.
   ========================================================================== */

@font-face {
  font-family: "setimo";
  src: url("clientlib-refresh/resources/fonts/Setimo_W_Rg.woff2") format("woff2"),
       url("clientlib-refresh/resources/fonts/Setimo_W_Rg.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  background-color: #fff;
  color: #212322;
  font-family: "setimo", "Helvetica Neue", helvetica, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: 2px solid #0072ce;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Reveal (scroll entrances) — optional
   Elements start hidden via .mrvll-enter and animate once .is-in is added by
   reveal.js. The transition lives on the revealed state so marking an element
   never fades visible content out first. Drop this file and reveal.js to ship
   the components without entrance motion.
   ========================================================================== */

.mrvll-enter {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}

.mrvll-section-intro__eyebrow.mrvll-enter,
.mrvll-scale-panel__eyebrow.mrvll-enter {
  transform: translate3d(0, 0.55rem, 0);
}

.mrvll-section-intro__title.mrvll-enter {
  transform: translate3d(0, 1.7rem, 0);
}

.mrvll-enter.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 780ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 780ms var(--mrvll-ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: var(--enter-delay, 0ms);
}

.mrvll-section-intro__title.mrvll-enter.is-in {
  transition-duration: 900ms;
}

/* ==========================================================================
   Scale panel
   One card: label, scale diagram (Image) and paragraph. Independent of any
   wrapper, so it can be placed on its own or repeated inside a layout
   container.

   Label and paragraph match AEM Core Components output: parent wrappers
   (__eyebrow, __body) around Title v3 and Text v2. Design type lives on the
   wrapper; core-component hooks inherit it.

   The diagram is one Image (bg_01 / bg_02) in the infographic slot from the
   approved layout — under the label, above the paragraph. The PNG is
   transparent line art; it must not be stretched as a full-card background.

   Self-sufficient: every custom property carries the approved value as a
   fallback, so the component renders correctly on a page that declares no
   design tokens at all. Declaring the tokens site-wide still wins.
   ========================================================================== */

.mrvll-scale-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 380px;
  padding: 23px 15px 24px;
  background-color: var(--mrvll-color-surface, #d9d9d6);
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-scale-panel,
.mrvll-scale-panel *,
.mrvll-scale-panel *::before,
.mrvll-scale-panel *::after {
  box-sizing: border-box;
}

.mrvll-scale-panel .cmp-title,
.mrvll-scale-panel .cmp-text,
.mrvll-scale-panel .cmp-image {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Field type — on the wrapper, then inherited by Title / Text
   -------------------------------------------------------------------------- */

.mrvll-scale-panel .mrvll-scale-panel__eyebrow {
  flex: 0 0 auto;
  margin: 0 0 24px;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 2.4px;
  line-height: 1.2;
  text-transform: uppercase;
}

.mrvll-scale-panel .mrvll-scale-panel__body {
  flex: 0 0 auto;
  margin-top: 32px;
  color: var(--mrvll-color-text, #212322);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 24px;
}

/* AEM data-sly-resource decoration uses the child node name as a class
   (label, text). Bootstrap 3 .label is a badge with color:#fff — reset it. */
.mrvll-scale-panel .mrvll-scale-panel__eyebrow > .label,
.mrvll-scale-panel .mrvll-scale-panel__body > .text {
  display: block;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: inherit;
  white-space: normal;
  vertical-align: baseline;
  border-radius: 0;
  background: transparent;
}

.mrvll-scale-panel .mrvll-scale-panel__eyebrow .cmp-title,
.mrvll-scale-panel .mrvll-scale-panel__eyebrow .cmp-title__text,
.mrvll-scale-panel .mrvll-scale-panel__eyebrow .cmp-title__link,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text p,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text ul,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text ol,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text__paragraph {
  margin: 0;
  padding: 0;
  width: auto;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

.mrvll-scale-panel .mrvll-scale-panel__eyebrow .cmp-title__link {
  text-decoration: none;
}

.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text ul,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text ol {
  padding-left: 1.2em;
}

.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text p + p,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text p + ul,
.mrvll-scale-panel .mrvll-scale-panel__body .cmp-text p + ol {
  margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
   Diagram — Image in the Figma infographic slot
   Locked 660:350 slot so swapping authored assets cannot change card height.
   Desktop card is 730×640. Label baseline sits ~63px from the top; SCALE
   ACROSS starts at 164px; the paragraph starts at 443px.
   -------------------------------------------------------------------------- */

.mrvll-scale-panel .mrvll-scale-panel__diagram {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 660 / 350;
  overflow: hidden;
}

/* Image v3 may wrap the img in a picture (srcset) or a link. Authored DAM
   images also pass through marvell-common .mrvll-image-wrap. */
.mrvll-scale-panel .mrvll-scale-panel__diagram .cmp-image,
.mrvll-scale-panel .mrvll-scale-panel__diagram .cmp-image__link,
.mrvll-scale-panel .mrvll-scale-panel__diagram .mrvll-image-wrap,
.mrvll-scale-panel .mrvll-scale-panel__diagram picture {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.mrvll-scale-panel .mrvll-scale-panel__diagram .cmp-image__image,
.mrvll-scale-panel .mrvll-scale-panel__diagram .mrvll-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Wide layout — approved 730×640 card
   -------------------------------------------------------------------------- */

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-scale-panel {
    min-height: 640px;
    padding: 63px 51px 48px;
  }

  .mrvll-scale-panel .mrvll-scale-panel__eyebrow {
    margin-bottom: 83px;
    font-size: 0.875rem;
    letter-spacing: 2.8px;
  }

  .mrvll-scale-panel .mrvll-scale-panel__body {
    font-size: 1.5625rem;
    line-height: 32px;
    padding-top: 35px;
  }
}

/* ==========================================================================
   Scale panels container
   The band that holds the module: grey-to-transparent wash at the top edge,
   vertical rhythm, content width, and the responsive row that arranges any
   number of section intros and scale panels.

   The container owns the position and spacing of its direct children. It
   never styles their internals — each child component keeps full ownership
   of what is inside it.

   Self-sufficient: every custom property carries the approved value as a
   fallback, and the content width lives here rather than in a shared page
   helper, so the band renders correctly on a page that provides nothing.
   ========================================================================== */

.mrvll-scale-panels {
  padding-top: 68px;
  padding-bottom: 48px;
  background-image: linear-gradient(to bottom, var(--mrvll-color-gray-light, #c8c9c7), rgba(200, 201, 199, 0));
  background-repeat: no-repeat;
  background-size: 100% 54px;
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-scale-panels,
.mrvll-scale-panels *,
.mrvll-scale-panels *::before,
.mrvll-scale-panels *::after {
  box-sizing: border-box;
}

/* Content measures 1473px in the approved design; the max-width adds the
   gutters on top so a 1680px viewport lands on the 103px side margins. */
.mrvll-scale-panels .mrvll-scale-panels__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: var(--mrvll-container-max, 1513px);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--mrvll-container-gutter, 16px);
  padding-left: var(--mrvll-container-gutter, 16px);
}

/* --------------------------------------------------------------------------
   Child slots
   A section intro always takes a full row, which is what makes panels group
   themselves between two intros. This container also owns panel sizing.
   -------------------------------------------------------------------------- */

.mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-section-intro {
  flex: 1 0 100%;
  width: 100%;
  max-width: none;
}

/* drop zone = full-width row inside __inner */
.mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-scale-panels__panels {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
}

/* panels row is a direct flex container (no AEM grid) */
.mrvll-scale-panels .mrvll-scale-panels__panels {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

/* card sizing */
.mrvll-scale-panels .mrvll-scale-panels__panels .mrvll-scale-panel {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* The row gap covers the space between panels. Intros need a wider break, so
   they add the difference on the side that faces the rest of the content. */
.mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-section-intro:not(:first-child) {
  margin-top: 56px;
}

.mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-section-intro:not(:last-child) {
  margin-bottom: 56px;
}

/* --------------------------------------------------------------------------
   Wide layout
   -------------------------------------------------------------------------- */

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-scale-panels {
    padding-top: 199px;
    padding-bottom: 100px;
    background-size: 100% 402px;
  }

  .mrvll-scale-panels .mrvll-scale-panels__inner {
    gap: 13px;
    padding-right: var(--mrvll-container-gutter-wide, 20px);
    padding-left: var(--mrvll-container-gutter-wide, 20px);
  }

  /* panels row gap */
  .mrvll-scale-panels .mrvll-scale-panels__panels {
    gap: 13px;
  }

  /* Two current panels retain the approved half-row width. A minimum basis
     makes additional authored panels wrap instead of shrinking indefinitely. */
  .mrvll-scale-panels .mrvll-scale-panels__panels .mrvll-scale-panel {
    flex: 1 1 360px;
    width: auto;
    max-width: none;
    min-width: min(100%, 360px);
  }

  .mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-section-intro:not(:first-child) {
    margin-top: 87px;
  }

  .mrvll-scale-panels .mrvll-scale-panels__inner > .mrvll-section-intro:not(:last-child) {
    margin-bottom: 87px;
  }
}

/* ==========================================================================
   Section intro
   Eyebrow, headline and an optional supporting paragraph. Left aligned by
   default; the centred modifier is the one the scale panels layout uses.

   Markup matches AEM Core Components output: each field is a parent wrapper
   (__eyebrow, __title, __body) around Title v3 or Text v2.

   Design type lives on the field wrapper. Core-component hooks inherit it, so
   Bootstrap / production heading and paragraph rules cannot keep their own
   size, weight or line-height. Never target h1–h6 by tag name.

   Self-sufficient: every custom property carries the approved value as a
   fallback, so the component renders correctly on a page that declares no
   design tokens at all. Declaring the tokens site-wide still wins.
   ========================================================================== */

.mrvll-section-intro {
  margin: 0;
  font-family: var(--mrvll-font-family, "setimo", "Helvetica Neue", helvetica, arial, sans-serif);
}

.mrvll-section-intro,
.mrvll-section-intro *,
.mrvll-section-intro *::before,
.mrvll-section-intro *::after {
  box-sizing: border-box;
}

.mrvll-section-intro .cmp-title,
.mrvll-section-intro .cmp-text {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Field type — on the wrapper, then inherited by Title / Text
   -------------------------------------------------------------------------- */

.mrvll-section-intro .mrvll-section-intro__eyebrow {
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 2.4px;
  line-height: 1.2;
  text-transform: uppercase;
}

.mrvll-section-intro .mrvll-section-intro__title {
  margin-top: 14px;
  color: var(--mrvll-color-text, #212322);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 34px;
}

.mrvll-section-intro .mrvll-section-intro__body {
  margin-top: 18px;
  color: var(--mrvll-color-text-muted, #62666a);
  font-size: 1rem;
  font-weight: 400;
  line-height: 26px;
}

/* Beat UA / Bootstrap heading + paragraph metrics without targeting tag names. */
.mrvll-section-intro .mrvll-section-intro__eyebrow .cmp-text,
.mrvll-section-intro .mrvll-section-intro__eyebrow .cmp-text p,
.mrvll-section-intro .mrvll-section-intro__eyebrow .cmp-text__paragraph,
.mrvll-section-intro .mrvll-section-intro__title .cmp-title,
.mrvll-section-intro .mrvll-section-intro__title .cmp-title__text,
.mrvll-section-intro .mrvll-section-intro__title .cmp-title__link,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text p,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text ul,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text ol,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text__paragraph {
  margin: 0;
  padding: 0;
  width: auto;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

.mrvll-section-intro .mrvll-section-intro__title .cmp-title__link {
  text-decoration: none;
}

.mrvll-section-intro .mrvll-section-intro__body .cmp-text ul,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text ol {
  padding-left: 1.2em;
}

.mrvll-section-intro .mrvll-section-intro__body .cmp-text p + p,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text p + ul,
.mrvll-section-intro .mrvll-section-intro__body .cmp-text p + ol {
  margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
   Modifiers
   -------------------------------------------------------------------------- */

.mrvll-section-intro--center {
  text-align: center;
  width: 100%;
}

.mrvll-section-intro--inverse .mrvll-section-intro__eyebrow,
.mrvll-section-intro--inverse .mrvll-section-intro__title,
.mrvll-section-intro--inverse .mrvll-section-intro__body {
  color: var(--mrvll-color-inverse, #fff);
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-section-intro .mrvll-section-intro__eyebrow {
    font-size: 0.875rem;
    letter-spacing: 2.8px;
  }

  .mrvll-section-intro .mrvll-section-intro__title {
    margin-top: 20px;
    font-size: 2.6875rem;
    line-height: 50px;
  }

  .mrvll-section-intro .mrvll-section-intro__body {
    margin-top: 20px;
    font-size: 1.3125rem;
    line-height: 28px;
  }

  /* 658px measure on the copy, not on the root, so a flex parent can still
     give this component a full row. */
  .mrvll-section-intro--center .mrvll-section-intro__eyebrow,
  .mrvll-section-intro--center .mrvll-section-intro__title,
  .mrvll-section-intro--center .mrvll-section-intro__body {
    max-width: 658px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* ==========================================================================
   Design tokens — optional
   The component stylesheets no longer depend on this file: every custom
   property they read carries the approved value as a fallback. Load it only
   to centralise the palette, or to override a value in one place. When these
   tokens are declared site-wide the declarations win over the fallbacks.
   ========================================================================== */

:root {
  --mrvll-color-text: #212322;
  --mrvll-color-text-muted: #62666a;
  --mrvll-color-inverse: #fff;

  --mrvll-color-gray-light: #c8c9c7;
  --mrvll-color-surface: #d9d9d6;

  --mrvll-font-family: "setimo", "Helvetica Neue", helvetica, arial, sans-serif;

  --mrvll-container-max: 1513px;
  --mrvll-container-gutter: 16px;
  --mrvll-container-gutter-wide: 20px;
}