/* Monarchy home v10. Loaded after v9.css.
   1. The panel under the hero video no longer repeats the hero headline (v10.js marks it; it stays in the DOM, visually hidden, as the page h1).
   2. Mobile top nav (<=600px): the language selector moves into the menu (it is already there), so nothing overlaps the logo;
      every header tap target is at least 44px. */

/* 1. repeated panel headline: visually hidden (still the page's h1 for screen readers and crawlers) */
.mx .mx-title.mx-tdup{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;animation:none!important}

/* 2. mobile top nav */
@media (max-width:600px){
  header.nav .nav-in{padding-left:16px!important;padding-right:16px!important;column-gap:8px!important}
  header.nav .nav-in > .nav-logo{display:inline-flex!important;align-items:center;min-height:44px;min-width:0;position:relative;z-index:1}
  header.nav .nav-in > div:last-of-type{gap:6px!important;min-width:0}
  header.nav .nav-in > div:last-of-type > .lang-switch{display:none!important}
  header.nav .nav-in > div:last-of-type > .theme-toggle{width:44px!important;height:44px!important;min-width:44px;padding:0!important;flex:none}
  header.nav .nav-in > div:last-of-type > .nav-burger{width:44px!important;height:44px!important;min-width:44px;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;flex:none}
  header.nav .nav-in > div:last-of-type > .nav-cta{min-height:44px!important;padding-top:0!important;padding-bottom:0!important;padding-left:14px!important;padding-right:14px!important;white-space:nowrap;flex:none;display:inline-flex!important;align-items:center;justify-content:center}
}
@media (max-width:520px){
  /* long translations (it, es) wrap to two lines instead of pushing into the logo */
  header.nav .nav-in > div:last-of-type > .nav-cta{white-space:normal;text-align:center;line-height:1.1;max-width:calc(100vw - 262px)}
  html:not([lang="en"]) header.nav .nav-in > div:last-of-type > .nav-cta{font-size:12.5px!important}
  .nav-mobile .lang-switch{display:flex!important;margin:0 0 .35rem}
  .nav-mobile .lang-switch select{min-height:44px;min-width:44px;font-size:15px;padding:0 2.2rem 0 1rem}
}
@media (max-width:374px){
  header.nav .nav-in{padding-left:12px!important;padding-right:12px!important;column-gap:6px!important}
  header.nav .nav-logo img{max-width:6.4rem!important;height:auto!important}
  header.nav .nav-in > div:last-of-type{gap:4px!important}
  header.nav .nav-in > div:last-of-type > .nav-cta{padding-left:10px!important;padding-right:10px!important;font-size:13px!important;max-width:calc(100vw - 228px)}
  html:not([lang="en"]) header.nav .nav-in > div:last-of-type > .nav-cta{font-size:12px!important}
}

/* 3. brand logos in full colour, per section, in the hero eyebrow row (fixed height: the video never moves) */
.mx-hbrand{order:1;display:flex;align-items:center;gap:18px;height:36px;min-width:0;flex-wrap:nowrap;overflow:hidden}
.mx-hbrand .mx-blogo{display:block;height:30px;width:auto;max-width:170px;object-fit:contain;filter:none!important;opacity:1}
.mx-hbrand .b-aixf{height:36px;mix-blend-mode:screen}
.mx-hbrand .b-nu{height:32px}
.mx-hbrand .b-sephora{height:18px}
html[data-theme="light"] .mx-hbrand .b-aixf{mix-blend-mode:normal;background:#0b0b0d;border-radius:6px;padding:2px 6px;height:36px}
html[data-theme="light"] .mx-hbrand .b-sephora{filter:invert(1)!important}
.mx-hbrand .mx-blogo{animation:mxBIn .35s ease both}
@keyframes mxBIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.mx-rm .mx-hbrand .mx-blogo{animation:none}
@media (prefers-reduced-motion:reduce){.mx-hbrand .mx-blogo{animation:none}}
/* Proof card: Wanted Fertility logo in its brand pink */
.wowb-cases img[src*="wanted-logo"]{filter:none!important}
@media (max-width:860px){
  .mx-hbrand{order:3;flex-basis:100%;height:26px;gap:12px}
  .mx-hbrand .mx-blogo{height:20px;max-width:110px}
  .mx-hbrand .b-aixf{height:26px}.mx-hbrand .b-nu{height:22px}.mx-hbrand .b-sephora{height:12px}
}