/* When browser zoom shrinks CSS width on a real desktop, keep desktop layout
   so fonts / images / margins / padding stay proportionally the same. */

@media (max-width: 991px) {
  html.ay-force-desktop .navbar-compact .navbar-grid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    padding-left: var(--ayenyx-align, 1.5rem) !important;
    padding-right: var(--ayenyx-align, 1.5rem) !important;
    min-height: var(--navbar-bar-height) !important;
  }

  html.ay-force-desktop .ayenyx,
  html.ay-force-desktop .navbar-compact.navbar {
    --navbar-bar-height: 82px !important;
    --navbar-logo-width: 195px !important;
    --navbar-logo-height: 44px !important;
  }

  html.ay-force-desktop .navbar-compact .navbar-logo,
  html.ay-force-desktop .logo-placeholder--navbar {
    width: var(--navbar-logo-width) !important;
    max-width: var(--navbar-logo-width) !important;
    max-height: var(--navbar-logo-height) !important;
  }

  html.ay-force-desktop .navbar-compact .navbar-grid__toggle {
    display: none !important;
  }

  html.ay-force-desktop .navbar-compact #navbarNav,
  html.ay-force-desktop .navbar-compact .navbar-grid__menu {
    position: static !important;
    display: flex !important;
    visibility: visible !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  html.ay-force-desktop .navbar-compact #navbarNav ul.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 1.85rem !important;
  }

  html.ay-force-desktop .navbar-compact .navbar-mobile-cta {
    display: none !important;
  }

  html.ay-force-desktop .navbar-compact .btn-contact-nav--header {
    display: inline-flex !important;
  }

  html.ay-force-desktop .navbar-compact .btn-contact-nav--header,
  html.ay-force-desktop .navbar-compact .btn-whatsapp-nav--header {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  html.ay-force-desktop .navbar-compact .btn-whatsapp-nav--header {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  html.ay-force-desktop .home-hero {
    --hh-nav: 82px;
  }

  html.ay-force-desktop .home-hero__copy {
    left: var(--ayenyx-align, 1.5rem) !important;
    right: var(--ayenyx-align, 1.5rem) !important;
    width: auto !important;
    max-width: 34rem !important;
    bottom: 7.25rem !important;
    padding: 1.5rem 0 0 !important;
  }

  html.ay-force-desktop .home-hero__title {
    max-width: 18ch !important;
    font-size: var(--ayenyx-fs-h1) !important;
  }

  html.ay-force-desktop .home-hero__lead {
    font-size: var(--ayenyx-fs-body) !important;
  }

  html.ay-force-desktop .home-about-partner__wrap {
    grid-template-columns: minmax(22rem, 0.92fr) minmax(0, 1.18fr) !important;
    min-height: min(72vh, 720px) !important;
  }

  html.ay-force-desktop .home-about-partner__copy {
    padding-top: clamp(3.25rem, 6vw, 5.5rem) !important;
    padding-bottom: clamp(3.25rem, 6vw, 5.5rem) !important;
    padding-right: clamp(1.5rem, 3vw, 2.5rem) !important;
    padding-left: var(--ayenyx-align, 1.5rem) !important;
  }

  html.ay-force-desktop .home-about-partner__title {
    max-width: 12ch !important;
    font-size: var(--ayenyx-fs-h2) !important;
  }

  html.ay-force-desktop .home-about-partner__media {
    min-height: min(72vh, 720px) !important;
    aspect-ratio: auto !important;
  }

  html.ay-force-desktop .home-categories__container,
  html.ay-force-desktop .home-audience__container,
  html.ay-force-desktop .home-brands__container,
  html.ay-force-desktop .home-blog__container,
  html.ay-force-desktop .home-uae__container,
  html.ay-force-desktop .home-final-cta__inner,
  html.ay-force-desktop .home-features__container,
  html.ay-force-desktop .home-principles__container,
  html.ay-force-desktop .home-promo__wrap {
    width: min(var(--ayenyx-container), calc(100% - (2 * var(--ayenyx-gutter)))) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html.ay-force-desktop .home-audience__container {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    width: min(var(--ayenyx-container), calc(100% - (2 * var(--ayenyx-gutter)))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html.ay-force-desktop .home-uae__container {
    display: grid !important;
    grid-template-columns: minmax(0, 0.88fr) minmax(22rem, 1.12fr) !important;
  }

  html.ay-force-desktop .home-hero__actions,
  html.ay-force-desktop .home-final-cta__actions {
    flex-direction: row !important;
    align-items: center !important;
  }

  html.ay-force-desktop .home-hero__btn,
  html.ay-force-desktop .home-final-cta__btn {
    width: auto !important;
  }
}

/* Shared proportional type for main homepage headings */
.home-hero__title {
  font-size: var(--ayenyx-fs-h1) !important;
}

.home-about-partner__title,
.home-categories__title,
.home-brands__title,
.home-audience__title,
.home-uae__title,
.home-blog__title,
.home-promo__title,
.home-final-cta__title,
.home-value__title {
  font-size: var(--ayenyx-fs-h2) !important;
}

.home-hero__lead,
.home-about-partner__lead,
.home-categories__lead,
.home-brands__lead,
.home-audience__lead,
.home-uae__text,
.home-blog__lead,
.home-promo__text,
.home-final-cta__text,
.home-value__lead {
  font-size: var(--ayenyx-fs-body) !important;
}

/* Final scrolled-nav contrast fix (loads last) */
.nav_sticky.is-scrolled .navbar-compact #navbarNav ul li .nav-link,
.nav_sticky.is-scrolled .navbar-compact #navbarNav ul li .nav-link.scrolled,
.nav_sticky.is-scrolled .navbar-compact #navbarNav ul li .nav-link.active,
.nav_sticky.is-scrolled .navbar-compact #navbarNav ul li a,
.nav_sticky.is-scrolled .navbar-compact .products-mega-trigger,
.nav_sticky.is-scrolled .navbar-compact .products-mega-trigger.active {
  color: #111111 !important;
}