/* Monarchy home v9: per-section hero title above the video + orange CTAs. Loaded after mx.css, v7.css, v8.css. */
/* 1. every CTA on the home uses the site orange (--brand #FC5000, hover #E64500), dark and light theme.
      Overrides the champagne-gold gradient from wow-b.css / wow-hero-site.css on this page only. */
html body.wow-b .nav-cta,
html body.wow-b header.nav .nav-cta,
html body.wow-b .btn:not(.btn-ghost),
html body.wow-b .wwd-desk-cta,
html body .wow-hero-stage .btn:not(.btn-ghost){
  background:#FC5000!important;background-image:none!important;color:#fff!important;
  border:1px solid transparent!important;font-weight:600!important;filter:none!important;
  box-shadow:0 10px 30px -12px rgba(252,80,0,.9)!important}
html body.wow-b .nav-cta:hover,
html body.wow-b header.nav .nav-cta:hover,
html body.wow-b .btn:not(.btn-ghost):hover,
html body.wow-b .wwd-desk-cta:hover,
html body .wow-hero-stage .btn:not(.btn-ghost):hover{
  background:#E64500!important;background-image:none!important;color:#fff!important;filter:none!important;
  box-shadow:0 12px 30px -12px rgba(252,80,0,.75)!important}
html body.wow-b .nav-cta:focus-visible,html body.wow-b .btn:not(.btn-ghost):focus-visible{outline:2px solid #FF7A33!important;outline-offset:2px}

/* 2. hero head: eyebrow + Human approval pill, then a large per-section title and a short subline */
.mx-hero .mx-intro{display:block;padding:clamp(8px,1.1vw,14px) 0 clamp(10px,1.1vw,16px)}
.mx-hrow{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-bottom:clamp(6px,.7vw,10px)}
.mx-hero .mx-hrow .mx-approve{order:2;margin-left:auto}
.mx-heye{order:1;margin:0;font-family:var(--m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--o2);min-height:1.4em}
/* all titles sit in one grid cell: the cell is as tall as the tallest title, so switching never shifts the video */
.mx-hstack{display:grid;position:relative}
.mx-hstack>*{grid-area:1/1;min-width:0}
.mx-hsz{visibility:hidden;pointer-events:none}
.mx-hlive,.mx-hghost{align-self:start}
.mx-hero .mx-htitle{margin:0;font-size:clamp(26px,2.6vw,40px);line-height:1.1;letter-spacing:-.025em;font-weight:700;color:var(--ink);text-wrap:balance;text-transform:none;max-width:44ch}
.mx-hero .mx-htitle .mx-accent{color:var(--o)}
.mx-hero .mx-hsub{margin:clamp(6px,.6vw,10px) 0 0;font-size:clamp(15px,1.3vw,19px);line-height:1.4;color:var(--mut);font-weight:500;max-width:70ch}
.mx-hlive{transition:opacity .32s ease,transform .32s ease}
.mx-hlive.mx-hin{opacity:0;transform:translateY(6px)}
.mx-hghost{pointer-events:none;transition:opacity .28s ease}
.mx-hghost.mx-hout{opacity:0}
.mx-heye{transition:opacity .28s ease}
.mx-heye.mx-hin{opacity:0}
.mx-rm .mx-hlive,.mx-rm .mx-hghost,.mx-rm .mx-heye{transition:none!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.mx-hlive,.mx-hghost,.mx-heye{transition:none!important;transform:none!important}}
.mx-hero .mx-intro{border-bottom:1px solid var(--ln)}
@media (max-width:860px){
  .mx-hero .mx-intro{padding:4px 2px 12px}
  .mx-hrow{gap:8px}
  .mx-hero .mx-hrow .mx-approve{order:2;margin-left:auto}
  .mx-heye{font-size:10.5px;letter-spacing:.12em}
  .mx-hero .mx-htitle{font-size:clamp(24px,6.6vw,30px);max-width:none}
  .mx-hero .mx-hsub{font-size:15.5px}
}