/* ===== site header: floating top pill (default) or left side rail =====
   html[data-header] is set before first paint (pill or rail); phones and touch screens always get the pill.
   .header-inner keeps the "nav" class, so each design's bar look (glass, neo, dark) applies to the pill.
   Behaviour: js/header.js (menu, hide on scroll, layout switch, search). */
:root{--admin-h:0px;--hdr-top:calc(14px + var(--admin-h));--hdr-h:56px;--hdr-space:84px;--rail-w:64px;--hdr-ink:var(--t-ink,#111318);--hdr-line:rgba(17,19,24,.1)}
body.admin-bar{--admin-h:32px;--hdr-top:calc(14px + var(--admin-h))}
@media(max-width:782px){body.admin-bar{--admin-h:46px}}

/* the header itself only reserves space; the bar floats */
.site-header{position:relative;z-index:20;height:var(--hdr-space)}
.site-header .header-inner.nav{position:fixed;top:var(--hdr-top);left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:1000px;
  height:var(--hdr-h);min-height:0;margin:0;padding:0 8px 0 18px;border-radius:999px;border-bottom:0;display:flex;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 10px 30px rgba(20,22,60,.12)}
.has-scroll-transition .header-inner.nav{transition:transform .25s ease}
.site-header.is-layout-switching .header-inner.nav{transition:none}
.site-header.is-scroll-hidden .header-inner.nav{transform:translate(-50%,calc(-100% - var(--hdr-top) - 24px))}

/* contents: uppercase, small, spaced; every control at least 44px to tap */
.site-branding{display:flex;align-items:center;flex:none}
.site-branding .brand{display:flex;align-items:center;min-height:44px}
.site-branding .brand .ba-logo{height:32px}
.brand-dot{display:none;align-items:center;justify-content:center;width:44px;height:44px}
.brand-dot .ba-dot{width:34px;height:34px}
.site-header .primary-navigation{display:flex;align-items:center;gap:14px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.site-header .nav nav a,.site-header .nav-dd-link{display:inline-flex;align-items:center;min-height:44px;padding:0}
.site-header .primary-navigation>a{min-width:44px;justify-content:center}
.site-header .nav .primary-navigation>a,.site-header .nav .nav-dd-link{font-weight:400}
.site-header .nav nav a[aria-current="page"]::after{bottom:8px}
.header-tools{display:flex;align-items:center;gap:6px;flex:none}
.tool-search,.menu-toggle,.header-switch{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.tool-search:hover,.menu-toggle:hover{background:rgba(17,19,24,.06)}
.header-tools .tool-cta{padding:0 18px;min-height:44px;display:inline-flex;align-items:center;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.menu-toggle{display:none;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.menu-toggle svg+svg,.menu-toggle[aria-expanded="true"] svg:first-of-type{display:none}
.menu-toggle[aria-expanded="true"] svg+svg{display:block}
.site-header :focus-visible,.header-switch:focus-visible,.search-dialog :focus-visible{outline:2px solid var(--brand-a,#3040c8);outline-offset:3px}
.site-header .nav-dd-btn{width:44px;height:44px;flex:none}
.site-header .nav-dd-menu{top:calc(100% + 8px);max-height:calc(100dvh - var(--admin-h) - 24px);overflow:auto;text-transform:none;letter-spacing:normal;font-size:15px;font-weight:normal}
.site-header .nav nav .nav-dd-item{display:flex;align-items:flex-start;padding:12px;gap:12px}
.site-header .nav nav .nav-dd-foot a{gap:5px}

/* desktop pill: logo left, nav balanced in the remaining space, tools right */
@media(min-width:1024px){
  .site-branding .brand .ba-logo{height:38px}
  .site-header .primary-navigation{flex:1;min-width:0;justify-content:center}
  .site-header .nav-dd::after{content:"";position:absolute;top:100%;left:0;width:100%;height:10px}
  .site-header .nav-dd-menu{left:0;transform:translate(0,8px)}
  /* the chevron belongs to "Services": tight to the label, no hover or flip of its own */
  .site-header .nav-dd{gap:0}
  .site-header .nav-dd-btn{width:auto;height:44px;padding:0 0 0 3px;margin:0;border-radius:0;transform:none!important;transition:none}
  .site-header .nav-dd-btn:hover{background:none!important}
  .site-header .nav-dd:hover .nav-dd-menu,.site-header .nav-dd:focus-within .nav-dd-menu,.site-header .nav-dd.open .nav-dd-menu{transform:none}
}
@media(min-width:1024px) and (max-width:1279px){.site-branding .brand .ba-logo{height:40px}}

/* phones and small tablets: logo, tools, menu button; the nav opens as a panel below the bar */
@media(max-width:1023px){
  .site-header .header-inner.nav{padding:0 6px 0 16px;height:52px}
  :root{--hdr-space:78px;--hdr-h:52px}
  .has-menu-js .menu-toggle{display:inline-flex}
  .has-menu-js .site-header .primary-navigation{display:none}
  .site-header .primary-navigation.is-open{display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 12px;
    border-radius:22px;background:var(--glass,var(--hdr-panel,rgba(255,255,255,.97)));box-shadow:0 20px 50px rgba(20,22,60,.2);max-height:calc(100dvh - var(--hdr-top) - var(--hdr-h) - 16px);overflow:auto}
  .primary-navigation.is-open>a,.primary-navigation.is-open .nav-dd-link{border-bottom:1px solid var(--hdr-line)}
  .primary-navigation.is-open .nav-dd{flex-wrap:wrap}
  .site-header .primary-navigation.is-open{align-items:stretch}
  .primary-navigation.is-open .nav-dd-link{flex:1}
  .primary-navigation.is-open .nav-dd-menu{position:static;width:auto;transform:none;opacity:1;visibility:visible;display:none;margin:6px 0 10px;padding:6px;box-shadow:none}
  .primary-navigation.is-open .nav-dd.open .nav-dd-menu{display:block}
  .primary-navigation.is-open .nav-dd-grid{grid-template-columns:1fr}
  .primary-navigation.is-open .nav-dd-foot{flex-wrap:wrap}
  .primary-navigation.is-open a[aria-current="page"]::after{display:none}
  /* panel: solid background, links aligned left like the Services row */
  .site-header .primary-navigation.is-open{background:var(--glass,var(--hdr-panel,#fff))!important}
  .site-header .primary-navigation.is-open>a,.site-header .primary-navigation.is-open .nav-dd-link{justify-content:flex-start;text-align:left}
  .header-tools .tool-cta{display:none}
  /* without JavaScript the nav simply wraps under the logo */
  body:not(.has-menu-js) .site-header .header-inner.nav{position:relative;top:0;left:0;transform:none;width:100%;height:auto;border-radius:24px;flex-wrap:wrap;padding:8px 16px}
  body:not(.has-menu-js) .site-header .primary-navigation{display:flex;flex-wrap:wrap;gap:4px 18px;width:100%}
  body:not(.has-menu-js) .site-header{height:auto;padding:14px 12px}
  body:not(.has-menu-js) .site-header .nav-dd{flex-wrap:wrap;width:100%}
  body:not(.has-menu-js) .site-header .nav-dd-menu{position:static;display:block;width:100%;opacity:1;visibility:visible;transform:none;max-height:none}
  body:not(.has-menu-js) .nav-dd-grid{grid-template-columns:1fr}
  body:not(.has-menu-js) .nav-dd-foot{flex-wrap:wrap}
}
@media(min-width:600px) and (max-width:1023px){.header-tools .tool-cta{display:inline-flex}}

/* side rail (desktop with a mouse only) */
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
  html[data-header="rail"] body{padding-left:var(--rail-w)}
  html[data-header="rail"] .site-header{height:0}
  html[data-header="rail"] .site-header .header-inner.nav{top:0;left:0;transform:none;width:var(--rail-w);max-width:none;height:100dvh;padding:8px 0;border-radius:0;
    display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:8px;border-right:1px solid var(--hdr-line);box-shadow:1px 0 0 var(--hdr-line)}
  html[data-header="rail"] body.admin-bar .site-header .header-inner.nav{top:32px;height:calc(100dvh - 32px)}
  html[data-header="rail"] .site-branding .brand{display:none}
  html[data-header="rail"] .brand-dot{display:flex}
  html[data-header="rail"] .primary-navigation{flex:none;flex-direction:column;gap:4px;padding:0}
  html[data-header="rail"] .primary-navigation>a,html[data-header="rail"] .nav-dd-link{writing-mode:vertical-rl;transform:rotate(180deg);min-height:44px;min-width:44px;justify-content:center;padding:6px 0}
  html[data-header="rail"] .site-header .nav nav a[aria-current="page"]::after{left:auto;right:8px;top:0;bottom:0;width:2px;height:auto}
  html[data-header="rail"] .nav-dd{flex-direction:column}
  html[data-header="rail"] .site-header .nav-dd::after{top:0;left:100%;width:12px;height:100%}
  html[data-header="rail"] .nav-dd-btn{transform:rotate(-90deg)}
  html[data-header="rail"] .nav-dd:hover .nav-dd-btn,html[data-header="rail"] .nav-dd.open .nav-dd-btn{transform:rotate(90deg)}
  html[data-header="rail"] .site-header .nav-dd-menu{top:0;left:calc(100% + 10px);max-height:calc(100dvh - var(--admin-h) - 24px);transform:translate(8px,0)}
  html[data-header="rail"] .nav-dd:hover .nav-dd-menu,html[data-header="rail"] .nav-dd:focus-within .nav-dd-menu,html[data-header="rail"] .nav-dd.open .nav-dd-menu{transform:none}
  html[data-header="rail"] .nav-dd-menu::before{left:-20px;top:0;bottom:0;right:auto;width:20px;height:auto}
  html[data-header="rail"] .header-tools{flex-direction:column;gap:4px}
  html[data-header="rail"] .header-tools .tool-cta{writing-mode:vertical-rl;transform:rotate(180deg);padding:10px 0;min-height:44px;min-width:44px;justify-content:center}
  html[data-header="rail"] .header-corner{left:var(--rail-w)}

  /* rail items are icons; the name shows in a pill beside the icon on hover and keyboard focus */
  html[data-header="rail"] .site-header .nav-ic{display:flex}
  html[data-header="rail"] .site-header .primary-navigation>a,html[data-header="rail"] .site-header .nav-dd-link{writing-mode:horizontal-tb;transform:none;position:relative;
    width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:12px;justify-content:center;transition:background .2s}
  html[data-header="rail"] .site-header .primary-navigation>a:hover,html[data-header="rail"] .site-header .nav-dd:hover .nav-dd-link,
  html[data-header="rail"] .site-header .primary-navigation>a:focus-visible,html[data-header="rail"] .site-header .nav-dd-link:focus-visible,
  html[data-header="rail"] .site-header .nav nav a[aria-current="page"]{background:var(--hdr-hover,rgba(17,19,24,.06))}
  html[data-header="rail"] .site-header .nav nav a[aria-current="page"]::after{left:-10px;right:auto;top:10px;bottom:10px;width:3px;height:auto;border-radius:0 3px 3px 0}
  html[data-header="rail"] .site-header .nav-dd-btn{display:none}
  html[data-header="rail"] .site-header .nav-t{position:absolute;left:calc(100% + 18px);top:50%;z-index:40;padding:6px 12px;border-radius:999px;white-space:nowrap;
    font-size:11px;letter-spacing:.08em;line-height:1.4;background:var(--hdr-tip,#111318);color:var(--hdr-tip-ink,#fff);box-shadow:0 8px 22px rgba(17,19,24,.18);
    opacity:0;visibility:hidden;pointer-events:none;transform:translate(-6px,-50%);transition:opacity .15s,transform .2s cubic-bezier(.34,1.56,.64,1),visibility .15s}
  html[data-header="rail"] .site-header .nav-t::before{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;background:inherit;transform:rotate(45deg);border-radius:1.5px}
  html[data-header="rail"] .site-header .primary-navigation>a:hover .nav-t,html[data-header="rail"] .site-header .primary-navigation>a:focus-visible .nav-t,
  html[data-header="rail"] .site-header .nav-dd-link:focus-visible .nav-t{opacity:1;visibility:visible;transform:translate(0,-50%)}
  html[data-header="rail"] body[data-theme="dark"]{--hdr-hover:rgba(255,255,255,.08);--hdr-tip:var(--t-ink-d,#eef1f7);--hdr-tip-ink:#0b0d12}
  html[data-header="rail"] body[data-theme="neo"] .site-header .nav-t{background:#fff;color:#000;border:2px solid #000;box-shadow:3px 3px 0 #000}
  html[data-header="rail"] body[data-theme="neo"] .site-header .nav-t::before{display:none}
}
/* the icons only show in the side rail */
.site-header .nav-ic{display:none;align-items:center;justify-content:center}
@media (prefers-reduced-motion: reduce){.site-header .nav-t{transition:none!important}}

/* layout switch: hidden in the top-left corner, revealed when the pointer comes near (js) */
.header-corner{position:fixed;top:0;left:0;z-index:30;width:90px;height:90px;pointer-events:none}
body.admin-bar .header-corner{top:var(--admin-h)}
.header-corner[hidden],.header-switch-entry[hidden]{display:none!important}
body:not(.has-menu-js) .tool-search,body:not(.has-menu-js) .header-switch-entry,body:not(.has-menu-js) .nav-dd-btn{display:none}
.header-switch{position:absolute;top:10px;left:10px;width:44px;height:44px;padding:0;pointer-events:auto;color:var(--t-ink,#111318);
  background:var(--glass,rgba(255,255,255,.96));border:1px solid rgba(17,19,24,.1);box-shadow:0 10px 24px rgba(20,22,60,.18);transform-origin:0 0;visibility:hidden;opacity:0}
.header-switch.is-shown{visibility:visible;opacity:1}
.header-switch svg+svg,.header-switch[aria-pressed="true"] svg:first-child{display:none}
.header-switch[aria-pressed="true"] svg+svg{display:block}
@media(max-width:1023px),(hover:none),(pointer:coarse){.header-corner,.header-switch-entry{display:none!important}}

/* search dialog */
.search-dialog{width:min(560px,calc(100% - 32px));margin:12vh auto auto;padding:0;border:0;border-radius:22px;background:var(--glass,#fff);color:var(--t-ink,#111318);box-shadow:0 30px 80px rgba(20,22,60,.3)}
.search-dialog::backdrop{background:rgba(17,19,24,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.search-dialog form{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 20px}
.search-dialog input{flex:1;min-width:0;min-height:48px;border:0;background:none;font:inherit;font-size:18px;color:inherit;outline:none}
.search-close{width:44px;height:44px;border:0;border-radius:50%;background:rgba(17,19,24,.06);font-size:22px;cursor:pointer;color:inherit}

/* designs */
body[data-theme="neo"] .site-header .header-inner.nav{border:3px solid #000!important;box-shadow:4px 4px 0 #000!important}
body[data-theme="neo"] .site-header .header-inner.nav::after{display:none}
body[data-theme="neo"] .site-header .tool-cta{font-weight:400!important}
/* neo buttons are 44px with a 5px offset shadow; inside the bordered pill that overruns its rounded end, so the header one is a smaller pill */
body[data-theme="neo"] .site-header .header-inner.nav{padding-right:12px}
body[data-theme="neo"] .site-header .header-tools .tool-cta{min-height:36px;border-radius:999px!important;box-shadow:3px 3px 0 #000!important}
body[data-theme="neo"] .site-header .header-tools .tool-cta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 #000!important}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){html[data-header="rail"] body[data-theme="neo"] .site-header .header-tools .tool-cta{min-height:44px;border-radius:12px!important}}
body[data-theme="neo"] .header-switch,body[data-theme="neo"] .search-dialog{border:3px solid #000;box-shadow:4px 4px 0 #000;background:#fff;color:#000}
body[data-theme="neo"] .primary-navigation.is-open{--hdr-panel:#fff;border:3px solid #000;box-shadow:4px 4px 0 #000}
body[data-theme="neo"]{--hdr-line:#000}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){html[data-header="rail"] body[data-theme="neo"] .site-header .header-inner.nav{border-width:0 3px 0 0!important;box-shadow:none!important}}
body[data-theme="dark"]{--hdr-line:rgba(255,255,255,.1)}
body[data-theme="dark"] .header-switch,body[data-theme="dark"] .search-dialog{background:#1b1f2b;color:var(--t-ink-d,#eef1f7);border-color:var(--glass-line-d,rgba(255,255,255,.14))}
body[data-theme="dark"] .primary-navigation.is-open{--hdr-panel:rgba(20,23,31,.98)}
body[data-theme="dark"] .tool-search:hover,body[data-theme="dark"] .menu-toggle:hover{background:var(--glass-d,rgba(255,255,255,.08))}
body[data-theme="dark"] .menu-toggle,body[data-theme="dark"] .tool-search{color:var(--t-ink-d,#eef1f7)}
body[data-theme="dark"] .search-close{background:var(--glass-d,rgba(255,255,255,.08))}

/* when the pill hides, sticky bars move up to the top */
.site-header~main .svp-jump{top:calc(var(--hdr-top) + var(--hdr-h) + 8px);transition:top .25s ease}
.header-hidden .site-header~main .svp-jump{top:calc(var(--admin-h) + 10px)}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){html[data-header="rail"] .site-header~main .svp-jump{top:var(--admin-h)}}

@media (prefers-reduced-motion: reduce){.site-header *,.header-switch,.skip-link,.svp-jump{transition:none!important;animation:none!important}}

@media(min-width:1024px) and (hover:hover) and (pointer:fine){html[data-header="rail"] .site-header .nav-dd-btn{transform:rotate(-90deg)!important;height:auto;padding:3px 0 0}}