/*
 * LuxBMI mobile header — 2026-11-01
 * Mobile ONLY: the header keeps Discovery and Consultation artwork;
 * Home / Services / Portfolio / About / Contact / Settings stay in hamburger.
 * Does not alter desktop/tablet-large navigation or any supplied CTA artwork.
 */
@media (max-width: 960px) {
  /* Never show the scroll-triggered collection of ordinary navigation buttons. */
  .lux-header.is-navigation-condensed .lux-header__inner #lux-primary-nav:not(.is-open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Keep the two illustrated actions as the ONLY mobile header CTAs, at any scroll position. */
  body:not(.lux-menu-open) .lux-header .lux-header__inner > .lux-header__actions > .lux-nav__app,
  body:not(.lux-menu-open) .lux-header .lux-header__inner > .lux-header__actions > a.lux-nav__cta--art {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > .lux-nav__app,
  .lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > a.lux-nav__cta--art {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* Retain the original accessible Command Center in its own overlay. */
  .lux-header .lux-header__inner #lux-primary-nav.is-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Respect the overlay, which intentionally hides header artwork on menu open. */
  body.lux-menu-open .lux-header .lux-header__inner > .lux-header__actions > :is(.lux-nav__app,a.lux-nav__cta--art) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
@media (min-width: 691px) and (max-width:960px) {
  .lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions {
    display: flex !important;
    gap: clamp(6px,1vw,12px) !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
    margin-left: auto !important;
    width: auto !important;
  }
  .lux-header .lux-header__inner > .lux-header__actions > .lux-nav__app,
  .lux-header .lux-header__inner > .lux-header__actions > a.lux-nav__cta--art {
    width: clamp(128px, 22vw, 205px) !important;
  }
}
@media (max-width: 690px) {
  /* On small phones the brand sits above two adjacent illustrated buttons. */
  .lux-header.is-navigation-condensed .lux-header__inner {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    row-gap: 3px !important;
    width: min(calc(100% - 16px), 1510px) !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .lux-header.is-navigation-condensed .lux-header__inner > .lux-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
  }
  .lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: clamp(5px,2vw,11px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 4px !important;
    top: auto !important;
  }
  .lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > .lux-nav__app {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > a.lux-nav__cta--art {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* No extra navigation strip means no need for the old scrolled strip gap. */
  .lux-header.is-navigation-condensed .lux-header__inner #lux-primary-nav:not(.is-open) {
    height: 0 !important;
    min-height: 0 !important;
  }
}
@media (prefers-reduced-motion:reduce) and (max-width:960px) {
  .lux-header .lux-header__inner > .lux-header__actions a {transition:none!important;}
}


/* Mobile header contains just the two visual primary actions. The existing
 * floating hamburger button opens the full accessible navigation, including
 * Home, Services, Portfolio, About, Contact and Settings. The existing mobile
 * floating mute retains audio access without taking up header button space. */
@media (max-width:960px) {
  .lux-header .lux-header__inner > .lux-header__actions > button.lux-menu-toggle,
  .lux-header .lux-header__inner > .lux-header__actions > button.lux-header__quick-mute {
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* Scrolled-state specificity guard against the legacy navigation reset. */
@media (max-width:960px) {
  html body:not(.lux-menu-open) header.lux-header.is-navigation-condensed
    .lux-header__inner > .lux-header__actions > div.lux-nav__app {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:relative !important;
  }
}

/* Mobile HOME only: illustrated CTAs at top right, hide header while scrolling. */
@media (max-width:960px) {
  html body.home header.lux-header:not(.is-scrolled) .lux-header__inner {
    display:flex!important; align-items:flex-start!important;
    justify-content:space-between!important; gap:6px!important;
  }
  html body.home header.lux-header:not(.is-scrolled) .lux-header__inner > .lux-brand {
    flex:0 1 auto!important; min-width:0!important;
    margin:0!important; justify-self:start!important;
  }
  html body.home header.lux-header:not(.is-scrolled) .lux-header__inner > .lux-header__actions {
    display:flex!important; flex-flow:column nowrap!important;
    align-items:flex-end!important; justify-content:flex-start!important;
    gap:3px!important; flex:0 0 auto!important;
    width:clamp(108px,35vw,190px)!important;
    margin-left:auto!important; padding:0!important;
    position:relative!important; top:auto!important;
  }
  html body.home header.lux-header:not(.is-scrolled) .lux-header__actions > :is(.lux-nav__app,a.lux-nav__cta--art) {
    display:block!important; width:100%!important;
    max-width:100%!important; min-width:0!important;
  }
html body.home header.lux-header {
    transition:transform .22s ease,opacity .18s ease,visibility .18s ease;
  }
}
@media (prefers-reduced-motion:reduce) and (max-width:960px) {
  html body.home header.lux-header {transition:none!important;}
}

/* Engineer 01 — 2026-11-01: MOBILE WEBSITE HEADER ONLY.
 * No hamburger icon inside the header. Preserve the separate floating
 * Command Center control. Keep the two picture CTAs at the page top, but
 * remove BOTH from the header as soon as the scrolled state engages.
 * Desktop (961px+) and the actual Business Discovery app are untouched. */
@media screen and (max-width:960px) {
  html body header.lux-header .lux-header__inner > button.lux-menu-toggle,
  html body header.lux-header .lux-header__inner > .lux-header__actions > button.lux-menu-toggle {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions,
  html body header.lux-header.is-scrolled .lux-header__inner > .lux-header__actions {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  /* Extra specificity defeats older "always show CTA" mobile rules. */
  html body:not(.lux-menu-open) header.lux-header.is-navigation-condensed
    .lux-header__inner > .lux-header__actions > div.lux-nav__app,
  html body:not(.lux-menu-open) header.lux-header.is-navigation-condensed
    .lux-header__inner > .lux-header__actions > a.lux-nav__cta--art,
  html body:not(.lux-menu-open) header.lux-header.is-scrolled
    .lux-header__inner > .lux-header__actions > div.lux-nav__app,
  html body:not(.lux-menu-open) header.lux-header.is-scrolled
    .lux-header__inner > .lux-header__actions > a.lux-nav__cta--art {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}

/* Legacy scrolled-header master hamburger has a higher-specificity rule.
   It must be hidden too; the separately floating mobile menu remains intact. */
@media screen and (max-width:960px) {
  html body header.lux-header.is-navigation-condensed .lux-header__inner > button.lux-menu-toggle[data-menu-toggle],
  html body header.lux-header.is-scrolled .lux-header__inner > button.lux-menu-toggle[data-menu-toggle] {
    display:none!important;visibility:hidden!important;
    opacity:0!important;pointer-events:none!important;
  }
}

/* The menu controller is relocated into .lux-header__actions at runtime.
   Explicitly match that actual DOM position in BOTH scroll classes. */
@media screen and (max-width:960px) {
  html body header.lux-header.is-navigation-condensed
    .lux-header__inner > .lux-header__actions > button.lux-menu-toggle[data-menu-toggle],
  html body header.lux-header.is-scrolled
    .lux-header__inner > .lux-header__actions > button.lux-menu-toggle[data-menu-toggle] {
    display:none!important;visibility:hidden!important;opacity:0!important;
    pointer-events:none!important;
  }
}

/* Mobile site-wide: two illustrated CTAs horizontal in top-right corner.
   The existing is-scrolled hiding behavior stays unchanged. */
@media screen and (max-width: 960px) {
  html body header.lux-header:not(.is-scrolled) .lux-header__inner > .lux-header__actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    gap: clamp(3px, 1vw, 8px) !important;
    width: min(66vw, 320px) !important;
    flex: 0 0 min(66vw, 320px) !important;
    margin-left: auto !important;
  }
  html body header.lux-header:not(.is-scrolled) .lux-header__inner > .lux-header__actions > :is(.lux-nav__app, a.lux-nav__cta--art) {
    flex: 0 1 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 4px) !important;
    margin: 0 !important;
  }
}

/* Engineer 01 — Mobile floating controls: menu ABOVE mute (not side by side).
   Only the existing mobile breakpoint. Both stay in the same fixed dock. */
@media screen and (max-width:960px) {
  html body .lux-mobile-control-dock {
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    width:48px!important;
    height:auto!important;
  }
  html body .lux-mobile-control-dock > .lux-mobile-menu-bubble {
    order:0!important;
  }
  html body .lux-mobile-control-dock > .lux-mobile-floating-mute {
    order:1!important;
  }
}

/* Preserve the homepage's more specific original flex rule while sharing the
   horizontal layout with every other standard WordPress page. */
@media screen and (max-width:960px) {
  html body.home header.lux-header:not(.is-scrolled) .lux-header__inner > .lux-header__actions {
    display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important;
    align-items:flex-start!important; justify-content:flex-end!important;
    gap:clamp(3px,1vw,8px)!important; width:min(66vw,320px)!important;
    flex:0 0 min(66vw,320px)!important; margin-left:auto!important;
  }
  html body.home header.lux-header:not(.is-scrolled) .lux-header__inner > .lux-header__actions > :is(.lux-nav__app,a.lux-nav__cta--art) {
    flex:0 1 calc(50% - 4px)!important; width:calc(50% - 4px)!important;
    min-width:0!important; max-width:calc(50% - 4px)!important;
    margin:0!important;
  }
}

/* Standard interior pages: match homepage top-right CTA vertical coordinate.
   Homepage itself, CTA spacing, desktop and scroll behavior stay unchanged. */
@media screen and (max-width:960px) {
  html body:not(.home) header.lux-header:not(.is-scrolled) .lux-header__inner > .lux-header__actions {
    position:relative!important;
    top:-43px!important;
  }
}

/* Gold-and-cyan menu actions for phones. Header artwork unchanged. */
@media(min-width:961px){.lux-nav > a.lux-mobile-menu-action{display:none!important}}
@media(max-width:960px){
 html body .lux-header .lux-nav.is-open > a.lux-mobile-menu-action{
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:10px!important;width:min(100%,490px)!important;min-height:48px!important;
  flex:0 0 auto!important;margin:3px auto!important;padding:12px 20px!important;
  color:#fff8e7!important;font:800 13px/1.25 'Oxanium',sans-serif!important;
  letter-spacing:.035em;text-decoration:none!important;
  border:1px solid rgba(231,188,104,.72)!important;border-radius:12px!important;
  background:linear-gradient(120deg,rgba(91,61,24,.9),rgba(28,52,79,.95))!important;
  box-shadow:0 8px 23px rgba(0,5,19,.32)!important;
  visibility:visible!important;opacity:1!important;pointer-events:auto!important;
 }
 html body .lux-header .lux-nav.is-open > a.lux-mobile-menu-action--consult{
  border-color:rgba(116,206,244,.7)!important;
  background:linear-gradient(120deg,rgba(17,66,95,.95),rgba(21,40,80,.94))!important;
 }
}

/* Supplied PNG artwork overrides old Command Center menu gradients. */
@media screen and (max-width:960px) {
 html body header.lux-header nav#lux-primary-nav.is-open > a.lux-mobile-menu-action.lux-mobile-menu-action--discovery {
  background:transparent url('header-buttons/app2button.png?v=1') center/contain no-repeat!important;
  border:0!important;box-shadow:none!important;min-height:68px!important;height:68px!important;
  font-size:0!important;color:transparent!important; 
 }
 html body header.lux-header nav#lux-primary-nav.is-open > a.lux-mobile-menu-action.lux-mobile-menu-action--consult {
  background:transparent url('header-buttons/Conbutton.png?v=1') center/contain no-repeat!important;
  border:0!important;box-shadow:none!important;min-height:68px!important;height:68px!important;
  font-size:0!important;color:transparent!important;
 }
 html body header.lux-header nav#lux-primary-nav.is-open > a.lux-mobile-menu-action > span {
  font-size:0!important;color:transparent!important;
 }
}


/* Desktop: suppress duplicate text/menu shortcuts, retain separate PNG CTAs.
   Keep these shortcuts in the mobile hamburger, where they use PNG artwork. */
@media screen and (min-width:961px) {
 html body header.lux-header nav#lux-primary-nav > a.lux-mobile-menu-action.lux-mobile-menu-action--discovery,
 html body header.lux-header nav#lux-primary-nav > a.lux-mobile-menu-action.lux-mobile-menu-action--consult {
  display:none!important;visibility:hidden!important;pointer-events:none!important;
 }
}

/* 2026-11-02: 5% larger original PNG CTAs, desktop scrolled ONLY. */
@media screen and (min-width:1181px) {
  html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions {
    gap:10px!important;
  }
  html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > .lux-nav__app,
  html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > a.lux-nav__cta--art {
    scale:1.05!important;
    transform-origin:center center!important;
  }
}
@media screen and (max-width:960px) {
  html body header.lux-header nav#lux-primary-nav.is-open > a.lux-mobile-menu-action.lux-mobile-menu-action--discovery,
  html body header.lux-header nav#lux-primary-nav.is-open > a.lux-mobile-menu-action.lux-mobile-menu-action--consult {
    height:68px!important;
    min-height:68px!important;
  }
}

/* Provide the extra CTA slot width required for true 5% visual scaling. */
@media screen and (min-width:1181px){
  html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions{
    flex:0 0 clamp(253px,calc(22vw + 8px),333px)!important;
    width:clamp(253px,calc(22vw + 8px),333px)!important;
  }
}


/* Desktop scrolled header: bring the 5%-larger PNG buttons toward the centered navigation.
   The nav is positioned independently; this closes the large gap without disturbing it. */
@media screen and (min-width:1181px) {
 html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions {
  transform:translateX(calc(160px - 20vw))!important;
 }
}


/* Desktop scrolled header: 10% larger PNG CTAs, 10% smaller speaker/mute.
   Keep navigation nearby and leave desktop-top + mobile states untouched. */
@media screen and (min-width:1181px) {
  html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions {
    gap:17px!important;
    flex:0 0 clamp(269px,calc(22vw + 24px),349px)!important;
    width:clamp(269px,calc(22vw + 24px),349px)!important;
    transform:translateX(calc(176px - 20vw))!important;
  }
  html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > .lux-nav__app,
  html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > a.lux-nav__cta--art {
    scale:1.10!important;
    transform-origin:center center!important;
  }
  html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > button.lux-header__quick-mute {
    scale:.90!important;
    transform-origin:center center!important;
  }
}


/* Desktop scrolled header: PNG artwork at 120%, speaker/mute at 90% of original.
   Allocate room for 120% images; preserve centered-nav proximity and avoid overlaps.
   Desktop top-of-page and all mobile states remain untouched. */
@media screen and (min-width:1181px) {
 html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions {
  gap:35px!important;
  flex:0 0 clamp(305px,calc(22vw + 60px),385px)!important;
  width:clamp(305px,calc(22vw + 60px),385px)!important;
  transform:translateX(calc(214px - 20vw))!important;
 }
 html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > .lux-nav__app,
 html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > a.lux-nav__cta--art {
  scale:1.20!important;
  transform-origin:center center!important;
 }
 html body header.lux-header.is-navigation-condensed .lux-header__inner > .lux-header__actions > button.lux-header__quick-mute {
  scale:.90!important;
  transform-origin:center center!important;
 }
}