/* ==========================================================================
   Header + navigation (desktop bar + dropdowns, full-screen navy mobile menu,
   compact sticky state) + the shared sticky filter row.
   Behaviour: resources/js/nav.js · Tokens: --sb-header-h*, --sb-sticky-top (global.css)
   ========================================================================== */

/* The header is always fixed. On solid pages the slot keeps its full height in the
   flow so nothing jumps; on the front page the hero pads itself by --sb-header-h.
   No transform/filter on .sb-header — the mobile panel inside is position:fixed. */
.sb-header-slot--solid{height:var(--sb-header-h)}
.sb-header{position:fixed;top:var(--sb-admin-offset);left:0;right:0;z-index:40;width:100%;color:#fff;font-weight:var(--sb-w-btn);
  transition:background-color .3s ease,box-shadow .3s ease,top .3s ease}
.sb-header--solid{background:var(--sb-blue)}
.sb-header--transparent{background:transparent}
.sb-header__inner{display:flex;align-items:center;gap:clamp(16px,3vw,44px);min-height:var(--sb-header-h);padding-block:14px;
  transition:min-height .3s ease,padding .3s ease}
/* The artwork runs the header wider than the content column (~72px margins at 1920). */
.sb-header .sb-header__inner{max-width:none;padding-inline:clamp(20px,3.75vw,72px)}
.sb-header__logo{flex:0 0 auto;display:flex;align-items:center}
/* The header sits on the blue solid bar or the hero image, so the logo is white in both variants. */
.sb-header__logo-img{display:block;width:auto;height:clamp(38px,3.3vw,63px);filter:brightness(0) invert(1);transition:height .3s ease}
/* White focus ring on the blue bar / navy panel (the global ring is blue). */
.sb-body .sb-header :focus-visible{outline-color:rgba(255,255,255,.85)}
.sb-header__tagline{font-size:clamp(.85rem,1.02vw,1.22rem);font-weight:var(--sb-w-body);margin-left:auto;white-space:nowrap}
.sb-header__search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:9px 16px}
.sb-header__search button{background:none;border:0;color:#fff;cursor:pointer;padding:0;display:flex}
.sb-header__search svg{width:16px;height:16px}
.sb-header__search .sep{width:1px;height:16px;background:rgba(255,255,255,.5)}
.sb-header__search input{background:transparent;border:0;outline:0;color:#fff;font-family:inherit;font-size:clamp(.85rem,.8vw,.95rem);width:clamp(96px,6vw,115px)}
.sb-header__search input::placeholder{color:rgba(255,255,255,.75)}
/* Search fields show focus via their own pill/box border, not the global blue outline. */
.sb-header__search input:focus-visible,
.sb-header__msearch input:focus-visible{outline:none}
.sb-header__search:focus-within{border-color:rgba(255,255,255,.8)}
.sb-header__nav{display:flex;align-items:center;gap:clamp(10px,1.5vw,22px)}
.sb-header__navlink{display:inline-flex;align-items:center;font-size:clamp(.92rem,1vw,1.19rem);color:#fff;transition:opacity .18s ease}
.sb-header__navlink:hover{opacity:.65}
/* elements only used by the mobile overlay — hidden on desktop */
.sb-header__navicon,.sb-header__navchev,.sb-header__msearch,.sb-header__mcta,
.sb-header__paneltop,.sb-header__panelfoot,.sb-header__eyebrow,.sb-header__scrim,
.sb-header__subtoggle,.sb-header__submenu{display:none}
.sb-header__navgroup,.sb-header__navrow{display:contents}
.sb-header__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;color:#fff;cursor:pointer;padding:8px;margin-left:auto}
.sb-header__burger span{display:block;width:26px;height:2px;background:currentColor;transition:transform .25s ease,opacity .25s ease}

@media(max-width:1180px){.sb-header__tagline{display:none}.sb-header__search{margin-left:auto}}

/* ---- compact state (nav.js adds .is-compact past a scroll threshold) ---- */
.sb-header.is-compact{background:var(--sb-blue);box-shadow:0 2px 18px rgba(0,2,60,.18)}
.sb-header.is-compact .sb-header__inner{min-height:var(--sb-header-h-compact);padding-block:8px}
.sb-header.is-compact .sb-header__logo-img{height:32px}
.sb-header.is-compact .sb-header__tagline{display:none}
/* search pill collapses to a magnifier before "Home"; nav.js expands it on click */
.sb-header.is-compact .sb-header__search{margin-left:auto;padding:7px;background:transparent;border-color:transparent;
  transition:background-color .2s ease,border-color .2s ease}
.sb-header.is-compact .sb-header__search svg{width:19px;height:19px}
.sb-header.is-compact .sb-header__search:not(.is-open) .sep,
.sb-header.is-compact .sb-header__search:not(.is-open) input{display:none}
.sb-header.is-compact .sb-header__search.is-open{padding:7px 14px;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.sb-header.is-compact .sb-header__search.is-open input{width:150px}
/* ≤600px WP un-fixes the admin bar, so once scrolled the compact header goes flush to the top. */
@media(max-width:600px){body.admin-bar .sb-header.is-compact{top:0}}

/* anchor jumps land below the compact header */
html{scroll-padding-top:calc(var(--sb-sticky-top) + 16px)}

/* ---- desktop dropdown (hover / focus-within / toggle; Escape dismisses via nav.js) ---- */
@media(min-width:961px){
  .sb-header__navgroup{display:flex;align-items:center;position:relative}
  .sb-header__navrow{display:flex;align-items:center;gap:2px}
  .sb-header__subtoggle{display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;margin-right:-6px;
    background:none;border:0;border-radius:50%;color:#fff;cursor:pointer;transition:opacity .18s ease}
  .sb-header__subtoggle:hover{opacity:.65}
  .sb-header__subtoggle svg{width:15px;height:15px;transition:transform .22s ease}
  .sb-header__submenu{display:block;position:absolute;top:calc(100% + 14px);left:50%;z-index:45;min-width:230px;padding:8px;
    max-height:none!important; /* ignore the mobile accordion's inline max-height */
    background:#fff;border-radius:16px;box-shadow:0 18px 44px rgba(0,2,60,.2);
    opacity:0;visibility:hidden;transform:translate(-50%,6px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .sb-header__submenu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* hover bridge */
  .sb-header__navgroup:is(:hover,:focus-within,.is-dropdown):not(.is-dismissed) .sb-header__submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .sb-header__navgroup:is(:hover,:focus-within,.is-dropdown):not(.is-dismissed) .sb-header__subtoggle svg{transform:rotate(180deg)}
  .sb-header__sublink{display:block;padding:10px 14px;border-radius:10px;white-space:nowrap;
    color:var(--sb-ink);font-size:.9rem;font-weight:var(--sb-w-btn);transition:background .18s ease,color .18s ease}
  .sb-header__sublink:hover,.sb-header__sublink:focus-visible{background:rgba(0,4,255,.07);color:var(--sb-blue)}
  .sb-header__sublink.is-active{color:var(--sb-blue)}
  .sb-body .sb-header__submenu :focus-visible{outline-color:rgba(0,4,255,.5);outline-offset:-2px}
}

@media(prefers-reduced-motion:reduce){
  .sb-header,.sb-header__inner,.sb-header__logo-img,.sb-header__search,
  .sb-header__submenu,.sb-header__subtoggle svg{transition:none!important}
}

/* ---- shared sticky filter row (team, case-studies, news-listing pills) ----
   Sticks under the compact header; the page-coloured band lets cards scroll beneath.
   Margins are shared.css's minus the band's padding, so the resting layout is unchanged. */
.sb-section .sb-filters{position:sticky;top:var(--sb-sticky-top);z-index:30;background:var(--sb-filters-bg,var(--sb-white));
  padding-block:10px;margin:calc(clamp(22px,3vw,34px) - 10px) 0 calc(clamp(28px,4vw,44px) - 10px)}
/* On phones a wrapped multi-row bar would eat the screen — scroll it sideways instead. */
@media(max-width:760px){
  .sb-section .sb-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1 * var(--sb-gutter));padding-inline:var(--sb-gutter);scroll-padding-inline:var(--sb-gutter)}
  .sb-section .sb-filters::-webkit-scrollbar{display:none}
  .sb-section .sb-filters .sb-pill{flex:0 0 auto;white-space:nowrap}
}

@media(max-width:960px){
  .sb-header__search{display:none}
  .sb-header__burger{display:flex}
  .sb-header__scrim{display:none}

  /* Mobile menu — a full-height brand-blue sheet in the site's own language (flat blue, white
     uppercase type, hairline rules, white pill), not a floating app card. Its top row mirrors the
     header so the logo stays put and the burger simply becomes ✕. */
  .sb-header__nav{
    position:fixed;inset:var(--sb-admin-offset) 0 0;z-index:60;
    display:flex;flex-direction:column;align-items:stretch;
    padding:0 clamp(20px,3.75vw,72px) max(24px,env(safe-area-inset-bottom));
    background:var(--sb-blue);color:#fff;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility .25s}
  .sb-header.is-open .sb-header__nav{opacity:1;visibility:visible;transform:none}
  @media(max-width:600px){body.admin-bar .sb-header.is-compact .sb-header__nav{top:0}}

  .sb-header__paneltop{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;min-height:var(--sb-header-h);padding-block:14px}
  .sb-header.is-compact .sb-header__paneltop{min-height:var(--sb-header-h-compact);padding-block:8px}
  .sb-header__panellogo{display:inline-flex;align-items:center}
  .sb-header__panellogo img{display:block;width:auto;height:clamp(38px,3.3vw,63px);filter:brightness(0) invert(1)}
  .sb-header.is-compact .sb-header__panellogo img{height:32px}
  .sb-header__close{display:flex;align-items:center;justify-content:center;width:42px;height:42px; /* sits exactly on the burger */
    border:0;background:none;color:#fff;cursor:pointer;transition:opacity .18s ease}
  .sb-header__close:hover{opacity:.7}
  .sb-header__close svg{width:26px;height:26px}

  /* search: the same slim pill as the desktop header */
  .sb-header__msearch{display:flex;align-items:center;gap:10px;position:relative;z-index:10;margin:4px 0 18px;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:11px 18px}
  .sb-header__msearch svg{width:17px;height:17px;flex:0 0 auto}
  .sb-header__msearch input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-family:inherit;font-size:.95rem}
  .sb-header__msearch input::placeholder{color:rgba(255,255,255,.75)}
  .sb-header__msearch:focus-within{border-color:rgba(255,255,255,.85)}

  /* links: big uppercase titles on hairlines; the current page is underlined like the site's text links */
  .sb-header__navlink,.sb-header__navrow{border-bottom:1px solid rgba(255,255,255,.22)}
  .sb-header__navlink{display:flex;align-items:center;padding:15px 0;color:#fff;
    font-size:clamp(1.3rem,5.6vw,1.65rem);font-weight:var(--sb-w-head);text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
  .sb-header__navlink:hover,.sb-header__navlink:focus-visible{opacity:.75}
  .sb-header__navtext{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .2s ease}
  .sb-header__navlink.is-active .sb-header__navtext{text-decoration-color:currentColor}

  /* About: a quiet accordion — indented sentence-case links under the row */
  .sb-header__navgroup{display:block}
  .sb-header__navrow{display:flex;align-items:center}
  .sb-header__navrow .sb-header__navlink{flex:1;border-bottom:0}
  .sb-header__subtoggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;
    border:0;background:none;color:#fff;cursor:pointer}
  .sb-header__subtoggle svg{width:22px;height:22px;transition:transform .28s ease}
  .sb-header__navgroup.is-open .sb-header__subtoggle svg{transform:rotate(180deg)}
  .sb-header__submenu{display:block;overflow:hidden;max-height:0;transition:max-height .32s ease;border-bottom:1px solid rgba(255,255,255,.22)}
  .sb-header__navgroup:not(.is-open) .sb-header__submenu{border-bottom-color:transparent}
  .sb-header__sublink{display:block;padding:9px 0 9px 18px;color:rgba(255,255,255,.85);font-size:1rem;font-weight:var(--sb-w-btn)}
  .sb-header__sublink:first-child{padding-top:4px}
  .sb-header__sublink:last-child{padding-bottom:16px}
  .sb-header__sublink:hover,.sb-header__sublink:focus-visible{color:#fff}
  .sb-header__sublink.is-active{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

  /* foot: white pill + tagline / LinkedIn wordmark */
  .sb-header__mcta{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:auto;
    padding:14px 30px;border-radius:999px;background:#fff;color:var(--sb-blue);
    font-weight:var(--sb-w-btn);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
  .sb-header__nav > :has(+ .sb-header__mcta){margin-bottom:32px} /* at least this gap when the list is long */
  .sb-header__panelfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
  .sb-header__panelfoot span{font-size:.8rem;color:rgba(255,255,255,.8);text-wrap:balance}
  .sb-header__social{display:inline-flex;flex:0 0 auto;color:#fff;transition:opacity .18s ease}
  .sb-header__social:hover{opacity:.75}
  .sb-header__social-mark{display:block;width:84px;aspect-ratio:527/129;background:currentColor;
    -webkit-mask:url(../images/linkedin-wordmark-mask.png) center/contain no-repeat;mask:url(../images/linkedin-wordmark-mask.png) center/contain no-repeat}

  /* a gentle settle — the rows follow the sheet in by a few px */
  .sb-header__msearch,.sb-header__navlink,.sb-header__navgroup,.sb-header__mcta,.sb-header__panelfoot{
    opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
  .sb-header__navgroup .sb-header__navlink{opacity:1;transform:none}
  .sb-header.is-open .sb-header__msearch,.sb-header.is-open .sb-header__navlink,.sb-header.is-open .sb-header__navgroup,
  .sb-header.is-open .sb-header__mcta,.sb-header.is-open .sb-header__panelfoot{opacity:1;transform:none;transition-delay:.06s}

  .sb-header.is-open .sb-header__burger{visibility:hidden}
}
@media(max-width:960px) and (prefers-reduced-motion:reduce){
  .sb-header__nav,.sb-header__msearch,.sb-header__navlink,.sb-header__navgroup,.sb-header__mcta,.sb-header__panelfoot{transition:none!important;transform:none!important}
}