:root {
  --mp-light-canvas: #f5f5f7;
  --mp-light-surface: #fff;
  --mp-light-surface-soft: #ececf0;
  --mp-light-line: rgba(5, 5, 5, 0.1);
  --mp-light-bridge: clamp(96px, 10vw, 160px);
}

/*
 * Light-page material hierarchy
 *
 * The pages alternate between broad white and soft-gray chapters. Long
 * gradients bridge the chapters so the surface rhythm feels continuous,
 * while pure white still reads as the brighter accent plane.
 */
.site-shell--about,
.site-shell--about .about-principal,
.site-shell--contact:not(.site-shell--agencies),
.site-shell--legal-light,
.site-shell--agencies,
.site-shell--agencies .agency-main,
.site-shell--agencies .agency-section--proof,
.site-shell--agencies .agency-section--process {
  --page-header-bg: var(--mp-light-surface);
  background: var(--mp-light-surface) !important;
}

.site-shell--about .home-header:not(.is-open)::before,
.site-shell--about .home-header.is-scrolled:not(.is-open)::before,
.site-shell--contact:not(.site-shell--agencies) .home-header:not(.is-open)::before,
.site-shell--contact:not(.site-shell--agencies) .home-header.is-scrolled:not(.is-open)::before,
.site-shell--legal-light .home-header:not(.is-open)::before,
.site-shell--legal-light .home-header.is-scrolled:not(.is-open)::before,
.site-shell--agencies .home-header:not(.is-open),
.site-shell--agencies .home-header.is-scrolled:not(.is-open),
.site-shell--agencies .home-header:not(.is-open)::before,
.site-shell--agencies .home-header.is-scrolled:not(.is-open)::before {
  background: var(--mp-light-surface) !important;
}

/* About: white opening, soft-gray story field, white proof chapter, gray close. */
.site-shell--about main {
  background: var(--mp-light-surface) !important;
}

.site-shell--about .about-principal {
  background: linear-gradient(
    180deg,
    var(--mp-light-surface) 0,
    var(--mp-light-surface) 54%,
    var(--mp-light-canvas) 86%,
    var(--mp-light-canvas) 100%
  ) !important;
}

.site-shell--about .about-selected {
  background: linear-gradient(
    180deg,
    var(--mp-light-canvas) 0,
    var(--mp-light-surface) var(--mp-light-bridge),
    var(--mp-light-surface) 76%,
    var(--mp-light-canvas) 100%
  ) !important;
}

.site-shell--about .about-principal__stats div,
.site-shell--about .about-selected__grid div {
  background: var(--mp-light-surface);
}

.site-shell--about .about-principal__stats div {
  border-color: var(--mp-light-line);
}

/* Contact: a bright opening gives way to alternating, full-width information planes. */
.site-shell--contact:not(.site-shell--agencies) .contact-main {
  background: var(--mp-light-surface) !important;
}

.site-shell--contact:not(.site-shell--agencies) .contact-hero {
  background: linear-gradient(
    180deg,
    var(--mp-light-surface) 0,
    var(--mp-light-surface) 58%,
    var(--mp-light-canvas) 100%
  ) !important;
}

.site-shell--contact:not(.site-shell--agencies) .contact-panel {
  background: linear-gradient(
    180deg,
    var(--mp-light-canvas) 0,
    var(--mp-light-canvas) 24%,
    var(--mp-light-surface) 39%,
    var(--mp-light-surface) 64%,
    var(--mp-light-canvas) 80%,
    var(--mp-light-canvas) 100%
  ) !important;
}

.site-shell--contact:not(.site-shell--agencies) .contact-list {
  background: transparent !important;
}

/* Agencies: each major chapter gets its own tonal plane; media remains untouched. */
.site-shell--agencies .agency-campaign-hero {
  background:
    radial-gradient(circle at 74% 34%, rgba(229, 9, 20, 0.045), transparent 36%),
    linear-gradient(
      180deg,
      var(--mp-light-surface) 0,
      var(--mp-light-surface) 70%,
      var(--mp-light-canvas) 100%
    ) !important;
}

.site-shell--agencies .agency-section--proof {
  background: linear-gradient(
    180deg,
    var(--mp-light-canvas) 0,
    var(--mp-light-surface) 12%,
    var(--mp-light-surface) 36%,
    var(--mp-light-canvas) 72%,
    var(--mp-light-canvas) 100%
  ) !important;
}

.site-shell--agencies .agency-section--uses {
  background: linear-gradient(
    180deg,
    var(--mp-light-canvas) 0,
    var(--mp-light-surface) 26%,
    var(--mp-light-surface) 58%,
    var(--mp-light-canvas) 100%
  ) !important;
}

.site-shell--agencies .agency-section--process {
  background: var(--mp-light-canvas) !important;
}

.site-shell--agencies .agency-transition-arrow {
  background: var(--mp-light-canvas);
  box-shadow: 0 0 0 100vmax var(--mp-light-canvas);
  clip-path: inset(0 -100vmax);
}

.site-shell--agencies .agency-card,
.site-shell--agencies .agency-process-list li {
  background: transparent;
}

.site-shell--agencies .agency-final {
  background: linear-gradient(
    180deg,
    var(--mp-light-canvas) 0,
    var(--mp-light-surface) var(--mp-light-bridge),
    var(--mp-light-surface) 82%,
    var(--mp-light-canvas) 100%
  ) !important;
}

/* Legal pages are one continuous reading surface, without inset gray bands. */
.site-shell--legal-light .legal-page {
  background: var(--mp-light-surface) !important;
}

.site-shell--legal-light .legal-page__content {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 720px) {
  .site-shell--about .about-selected {
    background: linear-gradient(
      180deg,
      var(--mp-light-canvas) 0,
      var(--mp-light-surface) var(--mp-light-bridge),
      var(--mp-light-surface) 78%,
      var(--mp-light-canvas) 100%
    ) !important;
  }

  .site-shell--about .about-principal {
    background: linear-gradient(
      180deg,
      var(--mp-light-surface) 0,
      var(--mp-light-surface) 52%,
      var(--mp-light-canvas) 86%,
      var(--mp-light-canvas) 100%
    ) !important;
  }

  .site-shell--contact:not(.site-shell--agencies) .contact-hero {
    background: linear-gradient(
      180deg,
      var(--mp-light-surface) 0,
      var(--mp-light-surface) 58%,
      var(--mp-light-canvas) 100%
    ) !important;
  }

  .site-shell--contact:not(.site-shell--agencies) .contact-panel {
    background: linear-gradient(
      180deg,
      var(--mp-light-canvas) 0,
      var(--mp-light-canvas) 26%,
      var(--mp-light-surface) 40%,
      var(--mp-light-surface) 66%,
      var(--mp-light-canvas) 82%,
      var(--mp-light-canvas) 100%
    ) !important;
  }

  .site-shell--agencies .agency-section--proof {
    background: linear-gradient(
      180deg,
      var(--mp-light-canvas) 0,
      var(--mp-light-surface) 9%,
      var(--mp-light-surface) 34%,
      var(--mp-light-canvas) 70%,
      var(--mp-light-canvas) 100%
    ) !important;
  }

  .site-shell--agencies .agency-section--uses {
    background: linear-gradient(
      180deg,
      var(--mp-light-canvas) 0,
      var(--mp-light-surface) 28%,
      var(--mp-light-surface) 58%,
      var(--mp-light-canvas) 100%
    ) !important;
  }

  .site-shell--agencies .agency-final {
    background: linear-gradient(
      180deg,
      var(--mp-light-canvas) 0,
      var(--mp-light-surface) var(--mp-light-bridge),
      var(--mp-light-surface) 82%,
      var(--mp-light-canvas) 100%
    ) !important;
  }

  .site-shell--legal-light .legal-page {
    background: var(--mp-light-surface) !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --mp-light-canvas: #f0f0f2;
    --mp-light-line: rgba(5, 5, 5, 0.2);
  }
}

/*
 * Wide-view planes
 *
 * The 1720px limit belongs to the readable content, not to the material
 * behind it. Paint each capped chapter across the viewport while keeping its
 * established content measure. The Agencies work rail may travel to the
 * viewport edges, but its first card stays aligned with the capped content.
 */
@media (min-width: 1720px) {
  .site-shell--about .about-principal {
    --mp-wide-plane: linear-gradient(
      180deg,
      var(--mp-light-surface) 0,
      var(--mp-light-surface) 54%,
      var(--mp-light-canvas) 86%,
      var(--mp-light-canvas) 100%
    );
    overflow: visible;
  }

  .site-shell--contact:not(.site-shell--agencies) .contact-hero {
    --mp-wide-plane: linear-gradient(
      180deg,
      var(--mp-light-surface) 0,
      var(--mp-light-surface) 58%,
      var(--mp-light-canvas) 100%
    );
  }

  .site-shell--contact:not(.site-shell--agencies) .contact-panel {
    --mp-wide-plane: linear-gradient(
      180deg,
      var(--mp-light-canvas) 0,
      var(--mp-light-canvas) 24%,
      var(--mp-light-surface) 39%,
      var(--mp-light-surface) 64%,
      var(--mp-light-canvas) 80%,
      var(--mp-light-canvas) 100%
    );
  }

  .site-shell--agencies .agency-section--proof {
    --mp-wide-plane: linear-gradient(
      180deg,
      var(--mp-light-canvas) 0,
      var(--mp-light-surface) 12%,
      var(--mp-light-surface) 36%,
      var(--mp-light-canvas) 72%,
      var(--mp-light-canvas) 100%
    );
  }

  .site-shell--agencies .agency-section--uses {
    --mp-wide-plane: linear-gradient(
      180deg,
      var(--mp-light-canvas) 0,
      var(--mp-light-surface) 26%,
      var(--mp-light-surface) 58%,
      var(--mp-light-canvas) 100%
    );
  }

  .site-shell--agencies .agency-section--process {
    --mp-wide-plane: var(--mp-light-canvas);
  }

  .site-shell--agencies .agency-final {
    --mp-wide-plane: linear-gradient(
      180deg,
      var(--mp-light-canvas) 0,
      var(--mp-light-surface) var(--mp-light-bridge),
      var(--mp-light-surface) 82%,
      var(--mp-light-canvas) 100%
    );
  }

  .site-shell--about .about-principal,
  .site-shell--contact:not(.site-shell--agencies) .contact-hero,
  .site-shell--contact:not(.site-shell--agencies) .contact-panel,
  .site-shell--agencies .agency-section--proof,
  .site-shell--agencies .agency-section--uses,
  .site-shell--agencies .agency-section--process,
  .site-shell--agencies .agency-final {
    position: relative;
    isolation: isolate;
    background: transparent !important;
  }

  .site-shell--about .about-principal::before,
  .site-shell--contact:not(.site-shell--agencies) .contact-hero::before,
  .site-shell--contact:not(.site-shell--agencies) .contact-panel::before,
  .site-shell--agencies .agency-section--proof::before,
  .site-shell--agencies .agency-section--uses::before,
  .site-shell--agencies .agency-section--process::before,
  .site-shell--agencies .agency-final::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    background: var(--mp-wide-plane);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .site-shell--agencies .agency-proof-grid {
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: max(72px, calc((100vw - 1720px) / 2 + 72px));
    padding-left: max(72px, calc((100vw - 1720px) / 2 + 72px));
    scroll-padding-inline: max(72px, calc((100vw - 1720px) / 2 + 72px));
  }
}