/*
 * Stable presentation canvas for UHD and scaled 4K desktops.
 *
 * The approved compositions were designed around a 1440–1920px artboard.
 * Letting full-bleed heroes continue to grow while their copy and subsequent
 * sections stay fixed makes the page look disconnected on ultrawide screens.
 * Keep one centred 1920px stage and preserve the original geometry inside it.
 */
@media (min-width: 1761px) {
  :root {
    --site-stage-width: min(100vw, 1920px);
    --container: 1600px;
  }

  html {
    font-size: 17px;
  }

  body {
    background:
      radial-gradient(circle at 50% 7%, rgb(33 48 86 / 15%), transparent 46rem),
      #020610;
  }

  .site-header {
    width: var(--site-stage-width);
    max-width: 100%;
    margin-inline: auto;
    box-shadow:
      0 1px rgb(255 255 255 / 5%),
      0 28px 90px rgb(0 0 0 / 28%);
  }

  .site-header .site-header__inner {
    width: calc(100% - 56px);
    max-width: 1864px;
    margin-inline: auto;
    padding-inline: 0;
    gap: 12px;
  }

  .site-header .brand {
    gap: 14px;
  }

  .site-header .brand__logo {
    width: 144px;
  }

  .site-header .brand__divider {
    width: 1px;
    height: 46px;
    display: block;
  }

  .site-header .brand__descriptor {
    width: 156px;
    max-width: 156px;
    display: block;
    font-size: 0.61rem;
    line-height: 1.5;
  }

  .site-header .site-nav {
    min-width: 0;
    margin-left: auto;
    padding-right: 0;
    display: flex;
    gap: clamp(11px, 0.72vw, 16px);
  }

  .site-header .site-nav a {
    padding-block: 14px;
    font-size: 0.68rem;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  .site-header .header-contacts {
    display: flex;
    gap: 7px;
  }

  .site-header .site-header__cta {
    width: 190px;
    min-width: 190px;
    min-height: 50px;
    height: 50px;
    margin-left: 0;
    padding-inline: 16px;
    border-radius: 12px;
    font-size: 0.69rem;
  }

  .site-header .mobile-menu {
    margin-left: 0;
    display: block;
    flex: 0 0 auto;
  }

  .site-header .mobile-menu__toggle {
    width: 48px;
    height: 48px;
  }

  body > main,
  body > .site-footer {
    width: var(--site-stage-width);
    max-width: 100%;
    margin-inline: auto;
  }

  body > main {
    background: var(--mock-bg, var(--bg));
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 4%),
      0 44px 180px rgb(0 0 0 / 44%);
  }

  .mockup-shell,
  .mock-container,
  .clients-shell,
  .partner-shell {
    width: min(calc(100% - 96px), var(--container));
  }

  .page--services-mockup,
  .page--formats-mockup {
    --container: 1600px;
  }

  .cases-mockup {
    --cases-max: 1600px;
  }

  .blog-mockup {
    --blog-max: 1600px;
  }

  .cases-hero,
  .blog-hero {
    width: min(100%, 1720px);
  }

  .mock-home-hero {
    height: 720px;
    grid-template-columns: 42% 58%;
  }

  .mock-home-hero__copy,
  .mock-home-hero__media {
    height: 720px;
  }

  .mock-home-hero__copy {
    padding-left: 80px;
  }

  .mock-capability-bar {
    height: 200px;
    padding-inline: 64px;
  }

  .mock-capability-bar h2,
  .mock-capability-bar p {
    font-size: 14px;
  }

  /* Generic split heroes use viewport math below UHD. On the fixed stage the
     corresponding bleed is the distance from the 1600px shell to 1920px. */
  .hero-media,
  .format-hero__media {
    margin-right: calc((var(--site-stage-width) - var(--container)) / -2);
  }

  .mock-about-hero__copy {
    padding-left: max(40px, calc((var(--site-stage-width) - var(--container)) / 2));
  }

  .cases-hero__copy {
    padding-left: max(40px, calc((min(var(--site-stage-width), 1720px) - var(--cases-max)) / 2));
  }

  .blog-hero__copy {
    padding-left: max(40px, calc((min(var(--site-stage-width), 1720px) - var(--blog-max)) / 2));
  }
}