/* Approved shared header presentation. Scope all family overrides to the header. */
.site-header .primary-nav{gap:clamp(16px,1.7vw,26px)}
/* Preserve full branding; collapse navigation before the header becomes cramped. */
@media(max-width:1200px){.site-header .primary-nav{display:none}.site-header .mobile-menu-button{display:block}}
/* The hamburger's visual state follows the shared control's aria-expanded value. */
.site-header .mobile-menu-button{position:relative;width:44px;height:44px;padding:0;border:1px solid transparent;background:transparent;transition:background .25s,border-color .25s}
.site-header .mobile-menu-button span{position:absolute;left:50%;top:50%;width:24px;height:2px;margin:0;transform-origin:center;transition:transform .3s cubic-bezier(.16,1,.3,1),background .25s}
.site-header .mobile-menu-button span:first-child{transform:translate(-50%,calc(-50% - 4px))}
.site-header .mobile-menu-button span:last-child{transform:translate(-50%,calc(-50% + 4px))}
.site-header .mobile-menu-button:is(:hover,:focus-visible),.site-header .mobile-menu-button[aria-expanded="true"]{background:var(--pale);border-color:rgba(71,189,169,.35)}
.site-header .mobile-menu-button[aria-expanded="true"] span{background:var(--teal)}
.site-header .mobile-menu-button[aria-expanded="true"] span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.site-header .mobile-menu-button[aria-expanded="true"] span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
/* Reserve space only for a real scrollbar. A permanent stable gutter exposed
   the menu parent's white background beside the content's pale edge on fitting
   desktop/tablet panels. Whole-menu scrolling and its shared teal track remain. */
.site-header .mega-menu{top:var(--site-header-height);grid-template-columns:minmax(220px,22%) minmax(0,1fr);grid-template-rows:1fr;height:var(--mega-panel-height,auto);min-height:0;max-height:calc(100svh - var(--site-header-height));overflow-y:auto;scrollbar-gutter:auto}
.site-header .mega-rail{display:flex;flex-direction:column;position:sticky;top:0;align-self:start;height:100%;max-height:calc(100svh - var(--site-header-height))}
.site-header .mega-content{grid-template-columns:minmax(210px,28%) minmax(0,1fr);gap:clamp(24px,2.5vw,40px);padding:34px clamp(26px,3.5vw,54px);min-width:0;min-height:min-content;overflow:clip}
/* Shared type and entrance/hover rules come from styles.css and v3.css. */
.site-header .mega-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.site-header .mega-links a{animation-fill-mode:backwards}
/* Shared decorative card glyphs use the site teal in every interaction state. */
.site-header .mega-links a:is(:hover,:focus-visible,:active) .menu-link-icon{background:var(--ink);border-color:var(--teal);color:var(--teal)}
.site-header .mega-links a:is(:hover,:focus-visible,:active) .menu-link-icon .ms-icon{color:var(--teal)}
.site-header .mega-feature{display:flex}
.site-header .category-menu-cta{flex-wrap:wrap}
.site-header .featured-products-cta .mega-feature-icon{font-family:"Material Symbols Home Industry","Material Symbols Outlined"}
.site-header .mega-links .featured-product-link{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;align-items:center;gap:16px;min-height:112px;padding:18px 16px}
.site-header .mega-links .featured-product-logo{width:52px;height:52px;display:grid;place-items:center;background:transparent;border:0}
.site-header .featured-product-logo img{display:block;width:44px;height:44px;object-fit:contain}
.site-header .mega-links .featured-product-copy{display:grid;gap:6px;min-width:0}
.site-header .mega-links .featured-product-copy>span{font-size:.875rem;line-height:1.5;font-weight:400;color:#536878}
.site-header .mega-links .featured-product-link .menu-link-arrow{margin-left:0;align-self:start;margin-top:3px}
/* A soft light wash and drifting rings stay behind the fully opaque white surface. */
.site-header .mega-content:before{animation:mega-surface-rings 12s ease-in-out infinite alternate;animation-play-state:paused}
.site-header .mega-content:after{content:"";position:absolute;inset:-15%;background:radial-gradient(ellipse at 68% 35%,rgba(40,179,192,.11),transparent 55%),linear-gradient(110deg,transparent 35%,rgba(107,217,218,.08) 55%,transparent 74%);pointer-events:none;animation:mega-surface-light 9s ease-in-out infinite alternate;animation-play-state:paused}
.site-header .menu-motion-active .mega-content:before,.site-header .menu-motion-active .mega-content:after{animation-play-state:running}
.site-header .mega-menu:not(.menu-motion-active) .mega-rail:before{animation-play-state:paused}
@keyframes mega-surface-rings{from{transform:translate(0,0) scale(1);opacity:.55}to{transform:translate(-24px,20px) scale(1.035);opacity:.95}}
@keyframes mega-surface-light{from{transform:translateX(-3%);opacity:.4}to{transform:translateX(3%);opacity:1}}
/* Natural-size copies are inert and never displayed; no forced height or motion. */
.site-header .mega-menu.is-menu-measure{position:fixed!important;top:0!important;left:-100000px!important;height:auto!important;min-height:0!important;max-height:none!important;visibility:hidden!important;overflow:hidden!important;animation:none!important;pointer-events:none!important}
.site-header .is-menu-measure .mega-content{max-height:none!important}
.site-header .is-menu-measure *,.site-header .is-menu-measure :before,.site-header .is-menu-measure :after{animation:none!important;transition:none!important}
@media(max-width:1200px){
  /* One navigation language for four panel controls and the direct Insights link. */
  .site-header .mega-rail{padding:18px 12px;gap:4px}
  .site-header .mega-rail :is(button,.mobile-insights-link){position:relative;display:flex;align-items:center;min-height:44px;width:100%;min-width:0;margin:0;padding:10px 32px 10px 12px;border:1px solid rgba(168,200,209,.14);background:rgba(255,255,255,.025);font:700 .9375rem/1.4 var(--font-display);color:#bfd0d9;text-align:left;text-decoration:none;white-space:normal;transform:none;transition:background .25s,color .25s,border-color .25s}
  .site-header .mega-rail :is(button,.mobile-insights-link):before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;height:auto;background:var(--teal);opacity:0;transform:scaleY(.3);transition:opacity .25s,transform .3s cubic-bezier(.16,1,.3,1)}
  .site-header .mega-rail :is(button,.mobile-insights-link):after{content:"";position:absolute;left:auto;right:12px;top:50%;bottom:auto;width:7px;height:7px;margin:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-50%) rotate(-45deg);transition:transform .3s cubic-bezier(.16,1,.3,1),color .25s}
  .site-header .mega-rail :is(button,.mobile-insights-link):is(:hover,:focus-visible,:active),.site-header .mega-rail button.active{background:rgba(71,189,169,.13);border-color:rgba(71,189,169,.35);color:#fff;transform:none}
  .site-header .mega-rail :is(button,.mobile-insights-link):is(:hover,:focus-visible,:active):before,.site-header .mega-rail button.active:before{width:3px;opacity:1;transform:scaleY(1)}
  .site-header .mega-rail button.active:after{color:var(--teal);transform:translateY(-50%) rotate(45deg)}
  .site-header .mega-rail .mobile-insights-link:after{content:"";width:9px;height:9px;border:0;border-top:2px solid currentColor;border-right:2px solid currentColor;background:linear-gradient(135deg,transparent 42%,currentColor 43%,currentColor 57%,transparent 58%);transform:translateY(-50%)}
  .site-header .mega-rail .mobile-insights-link:is(:hover,:focus-visible):after{color:var(--teal);transform:translate(2px,calc(-50% - 2px))}
  .site-header .mega-rail .menu-kicker{display:none}
  .site-header .mega-content{grid-template-columns:minmax(0,1fr);padding:28px;gap:24px}
  .site-header .mega-feature{margin-top:20px}
  .site-header .mega-links .featured-product-link{gap:12px;padding:16px 12px}
}
@media(max-width:600px){
  /* A single five-row stack prevents an orphaned Insights row or wrapped labels. */
  .site-header .mega-rail{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 18px;overflow:visible;align-items:stretch;position:relative;height:auto;max-height:none;align-self:stretch}
  .site-header .mega-rail .mobile-insights-link{grid-column:auto}
  .site-header .mega-menu{grid-template-columns:1fr;max-height:calc(100svh - var(--site-header-height));grid-template-rows:auto 1fr}
  .site-header .mega-content{padding:28px;overflow:clip;max-height:none}
}
@media(max-width:650px){
  .site-header .mega-links{grid-template-columns:minmax(0,1fr)}
  .site-header .mega-content{padding:24px 20px 32px}
  .site-header .mega-links .featured-product-link{min-height:100px;padding:16px;gap:16px}
}
/* Protect the cards' reading width before the tablet sidebar becomes a squeeze.
   This is still the full menu: categories sit above its immediately open panel. */
@media(min-width:601px) and (max-width:1000px){
  .site-header .mega-menu{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .site-header .mega-menu>.mega-rail{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;align-content:start;position:relative;align-self:start;height:auto;max-height:none;overflow:visible;padding:0;gap:0}
  .site-header .mega-menu>.mega-rail:before{display:none}
  .site-header .mega-menu>.mega-rail :is(button,.mobile-insights-link){flex:1 0 auto;width:auto;min-width:max-content;padding:12px 28px 12px 12px;white-space:nowrap}
  .site-header .mega-menu>.mega-rail :is(button,.mobile-insights-link):after{right:10px}
  .site-header .mega-menu>.mega-content{grid-column:1;grid-row:2}
}
/* Column count follows available card width, including the real menu scrollbar.
   Keep the logo and arrow at their approved sizes and let complete words wrap. */
@media(min-width:601px) and (max-width:1200px){
  .site-header .mega-menu .mega-links{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(16rem,calc(50% - 6px))),1fr))}
}
@media(prefers-reduced-motion:reduce){
  .site-header .mega-content:before,.site-header .mega-content:after{animation:none!important}
  .site-header .mega-rail :is(button,.mobile-insights-link),.site-header .mega-rail :is(button,.mobile-insights-link):before,.site-header .mega-rail :is(button,.mobile-insights-link):after{transition:none!important}
  .site-header .mobile-menu-button,.site-header .mobile-menu-button span{transition:none!important}
}

/* Even short panels need enough room to scroll past the entire mobile rail.
   Preserve natural content height and keep measurement clones independent. */
@media(max-width:600px){
  .site-header .mega-menu:not(.is-menu-measure) .mega-content{
    height:max-content;
    min-height:min(var(--mega-panel-height,calc(100svh - var(--site-header-height))),calc(100svh - var(--site-header-height)));
    align-content:start;
  }
}

/* Local concept: category glyphs reuse the existing technology font. */
@font-face{font-family:"Material Symbols Technology";src:url("/assets/material-symbols-outlined-subset.woff2?v=65795d8a790f") format("woff2");font-style:normal;font-weight:400;font-display:block}
.site-header .is-technology-solutions .menu-link-icon .ms-icon{font-family:"Material Symbols Technology","Material Symbols Home Industry","Material Symbols Outlined"}
/* The mobile CTA follows cards; the shared grid gap supplies its spacing. */
@media(max-width:1200px){.site-header .mega-menu-footer{position:relative;z-index:1;min-width:0;overflow:visible}.site-header .mega-menu-footer>.mega-feature{margin-top:0}}

/* Local-only comparison: open primary navigation reads as a continuous list. */
@media(max-width:1200px){
  .site-header .mega-rail{padding:0;gap:0}
  .site-header .mega-rail :is(button,.mobile-insights-link){width:100%;min-height:48px;margin:0;padding:12px 48px 12px 24px;border:0;background:transparent}
  .site-header .mega-rail :is(button,.mobile-insights-link):before{left:0;top:0;bottom:0}
  .site-header .mega-rail :is(button,.mobile-insights-link):after{right:24px}
  .site-header .mega-rail :is(button,.mobile-insights-link):focus-visible{outline-offset:-4px}
}

/* Explicit shared type prevents page-family heading scales from affecting menus. */
.site-header .mega-menu .mega-intro h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,2.3vw,2.5rem);line-height:1.22;letter-spacing:-.045em;margin:14px 0;color:var(--ink)}
.site-header .mega-menu .mega-intro p{font-family:var(--font-body);font-size:.97rem;font-weight:400;line-height:1.65;color:#536878;margin:0}
.site-header .mega-menu .eyebrow{font-family:var(--font-body);font-size:.8rem;line-height:1.5;font-weight:700;letter-spacing:.18em;color:#0b8aa7}
.site-header .mega-menu .mega-links .link-name{font-family:var(--font-body);font-size:.9rem;font-weight:700;line-height:1.4;color:#294759}
.site-header .mega-menu .mega-feature{font-family:var(--font-body);line-height:normal;color:var(--ink)}
.site-header .mega-menu .mega-links a:is(:hover,:focus-visible) .link-name{color:var(--link-hover)}
