/* ==========================================================================
   Mobile menu — shared by every page, the homepage included.

   Below 760px the navigation links and the Contact Us button leave the top
   bar and a menu button takes their place. The menu opens as a full-screen
   panel in the outro band's treatment (brand purple, one soft glow at the top), so
   it reads as part of the same site rather than a system drawer.

   Scoped under .menu-toggle and .site-menu so it is safe on the homepage,
   which has no global reset. The links come from window.BE.nav, which is the
   global NAV list in src/lib/site.ts.
   ========================================================================== */

/* ---- The button in the bar ---------------------------------------------- */
.menu-toggle{
  display:none;flex:none;box-sizing:border-box;
  width:44px;height:44px;padding:0;border-radius:999px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;color:inherit;pointer-events:auto;
  border:1px solid color-mix(in oklch, currentColor 30%, transparent);
  transition:border-color var(--hover-dur) var(--ease-soft),background var(--hover-dur) var(--ease-soft);
}
.menu-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
.menu-toggle:hover{background:color-mix(in oklch, currentColor 10%, transparent)}
.menu-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site-nav .menu-toggle{color:oklch(16% 0.01 285)}

/* Below 900px the bar hands over to the menu button, on every page (the
   homepage already did; six items no longer fit inner pages at 800px once
   Sectors joined the bar, Jack 7 Oct 2026). */
@media (max-width:900px){
  .menu-toggle{display:inline-flex}
  /* both navigation bars: the homepage's and every other page's */
  .nav-links,.site-nav__links,.nav-contact{display:none !important}
  html[data-style="minimal"] .site-nav .menu-toggle{margin-left:auto}
}

/* ---- The panel ---------------------------------------------------------
   Light, like the rest of the site (one colour scheme, Website Sync 7 Oct),
   one row per menu item with a full-width rule, and an accordion for items
   with pages underneath (Jack, 11 Oct 2026). Brand colours are written out
   because the homepage and the inner pages name their tokens differently. */
html.menu-open,html.menu-open body{overflow:hidden}
/* keep the scrollbar's space while the page is locked, so the panel's close button lands exactly on the menu button */
html.menu-open{scrollbar-gutter:stable}

.site-menu{
  --sm-ink:#2B1F4F;--sm-soft:#5C5670;--sm-line:#E4E1EC;--sm-accent:#5145A1;
  position:fixed;inset:0;z-index:100;box-sizing:border-box;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--gutter,20px) calc(24px + env(safe-area-inset-bottom));
  color:var(--sm-ink);background:#fff;font-family:var(--font-body,var(--body,"Lato",system-ui,sans-serif));
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.site-menu.is-open{opacity:1;visibility:visible;transition:opacity var(--hover-dur,.45s) var(--ease-soft,ease)}
.site-menu *{box-sizing:border-box}

/* html .site-menu prefixes: the site-wide link colour (html[data-style] a) must not win here */
/* same height, logo and button size as the page header it covers */
.site-menu__top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;min-height:84px;margin:0 calc(-1 * var(--gutter,20px));padding:0 var(--gutter,20px);background:#fff;border-bottom:1px solid var(--sm-line)}
/* the header's own sizes (minimal.css .site-nav, .be-logo): 84px bar, 36px logo;
   68px bar from 760px down, 30px logo from 560px down, so nothing moves when it opens */
.site-menu__logo img{display:block;width:auto;height:36px}
@media (max-width:760px){.site-menu__top{min-height:68px}}
@media (max-width:560px){.site-menu__logo img{height:30px}}
.site-menu__close{
  width:44px;height:44px;cursor:pointer;display:grid;place-items:center;padding:0;
  color:var(--sm-ink);background:transparent;border:1px solid var(--sm-line);
  transition:border-color var(--hover-dur,.45s) var(--ease-soft,ease)}
.site-menu__close:hover{border-color:var(--sm-ink)}

.site-menu__nav{display:flex;flex-direction:column;padding:8px 0 24px}
.site-menu__row{display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--sm-line)}
html .site-menu .site-menu__link{display:block;padding:16px 0;font:700 20px/1.25 var(--font-display,var(--display,"Archivo",system-ui,sans-serif));letter-spacing:-.01em;color:var(--sm-ink);text-decoration:none}
html .site-menu .site-menu__link[aria-current]{color:var(--sm-accent)}
.site-menu__more{width:44px;height:44px;display:grid;place-items:center;padding:0;margin-right:-10px;cursor:pointer;color:var(--sm-ink);background:transparent;border:0}
.site-menu__more svg{transition:transform var(--hover-dur,.45s) var(--ease-soft,ease)}
.site-menu__row.is-open .site-menu__more svg{transform:rotate(180deg)}
.site-menu__sub{grid-column:1 / -1;display:flex;flex-direction:column;padding:0 0 16px}
.site-menu__sub[hidden]{display:none}
html .site-menu .site-menu__sub a{display:block;padding:9px 0 9px 14px;border-left:2px solid var(--sm-line);font-size:16px;line-height:1.4;color:var(--sm-soft);text-decoration:none}
html .site-menu .site-menu__sub a:hover{color:var(--sm-ink);border-left-color:var(--sm-accent)}
.site-menu__grp{display:block;margin:12px 0 2px;padding-left:16px;font:700 11px/1.3 var(--font-label,var(--label,"Archivo",system-ui,sans-serif));letter-spacing:.14em;text-transform:uppercase;color:var(--sm-accent)}
.site-menu__grp:first-child{margin-top:4px}
.site-menu a:focus-visible,.site-menu button:focus-visible{outline:2px solid var(--sm-accent);outline-offset:2px}

html .site-menu .site-menu__contact{margin-top:auto;display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 22px;
  background:var(--sm-accent);color:#fff;text-decoration:none;font:700 16px/1 var(--font-label,var(--label,"Archivo",system-ui,sans-serif))}
html .site-menu .site-menu__contact:hover{background:var(--sm-ink);color:#fff}

@media (prefers-reduced-motion: reduce){
  .site-menu,.site-menu.is-open{transition:none}
}


/* ---- Who we serve bar ---------------------------------------------------
   A thin bar above the main menu linking the audience sites (Jack, 5 Oct
   2026), built by utilBarHtml() in src/lib/chrome.ts. On ordinary pages it
   scrolls away and the main bar sticks; on the homepage both are pinned, so
   the homepage's main bar sits --util-h below the top. Below 761px it is
   hidden and the same links are in the mobile menu. */
:root{--util-h:34px}
.util-bar{position:relative;z-index:21;box-sizing:border-box;height:var(--util-h);
  background:#2B1F4F;color:oklch(92% 0.02 290 / 0.72);font:500 12.5px/1 var(--font-body)}
.util-bar--fixed{position:fixed;top:0;left:0;right:0;z-index:7}
.util-bar__in{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:clamp(14px,1.8vw,26px);
  padding:0 var(--gutter,clamp(24px,4vw,64px));white-space:nowrap;overflow:hidden}
.util-bar__label{font:700 10.5px var(--font-label);letter-spacing:2.5px;text-transform:uppercase;
  color:oklch(80% 0.08 290 / 0.75)}
.util-bar a{color:inherit;text-decoration:none;transition:color var(--hover-dur) var(--ease-soft)}
.util-bar a:hover{color:#fff}
.util-bar a[aria-current]{color:#fff;font-weight:700}
.util-bar a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
@media (max-width:760px){
  :root{--util-h:0px}
  .util-bar{display:none}
}

/* ---- Desktop dropdowns --------------------------------------------------
   Both bars (the homepage's and every other page's) render the same markup
   from navLinksHtml() in src/lib/chrome.ts. The panel opens on hover and on
   keyboard focus inside it, and always uses its own light colours, whatever
   colour the bar's links have over the homepage video. */
.nav-links,.site-nav__links{overflow:visible !important}
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd__caret{display:inline-block;margin-left:5px;vertical-align:middle;opacity:.7;
  transition:transform var(--hover-move) var(--ease-soft)}
.nav-dd:hover .nav-dd__caret,.nav-dd:focus-within .nav-dd__caret,.nav-dd.is-open .nav-dd__caret{transform:rotate(180deg)}
.nav-dd__menu{position:absolute;top:100%;left:50%;z-index:30;min-width:250px;
  box-sizing:border-box;display:grid;gap:2px;padding:8px;margin-top:10px;
  background:#fff;border:1px solid oklch(0% 0 0 / 0.07);border-radius:16px;
  box-shadow:0 24px 50px -28px oklch(20% 0.05 285 / 0.55);
  font:500 15px/1.35 var(--font-body);white-space:normal;text-align:left;
  opacity:0;visibility:hidden;transform:translate(-50%,6px);
  /* closing waits a moment (.15s), so a pointer that drifts off the path on
     its way down does not lose the panel */
  transition:opacity .2s ease .15s, transform .2s ease .15s, visibility 0s linear .35s}
/* a bridge over the gap, so the pointer can travel from the link to the panel.
   Measured from the link's text to the panel the gap is 16px (classic) and
   20px (minimal), so it reaches 22px up: the whole gap, and no more than a
   sliver of the bar, so the neighbouring links stay easy to reach. */
.nav-dd__menu::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
/* .is-open: opened by a tap on touch screens (nav-touch.js) */
.nav-dd:hover .nav-dd__menu,.nav-dd:focus-within .nav-dd__menu,.nav-dd.is-open .nav-dd__menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--hover-dur) var(--ease-soft),transform var(--hover-move) var(--ease-soft)}
.nav-dd__menu a,.site-nav__links .nav-dd__menu a{display:block;padding:10px 14px;border-radius:10px;
  color:#2B1F4F !important;background:transparent;font-weight:500;text-decoration:none}
.nav-dd__menu a:hover,.nav-dd__menu a:focus-visible,
.site-nav__links .nav-dd__menu a:hover{background:#F1EFF8;color:#2B1F4F !important}
.nav-dd__menu a:focus-visible{outline:2px solid #2B1F4F;outline-offset:-2px}
/* ---- Offering mega panel ------------------------------------------------
   Full width under the sticky bar (the bar is the positioned ancestor once
   .nav-dd--mega is static), content on the 1240px page grid: an intro
   column and one column per category, all four the same width (Jack,
   7 Oct 2026; NAV_GROUPS in site.ts). Rows line
   up across columns through subgrid, so labels, purposes and links share
   baselines whatever the text length. Colours come from --m-* variables:
   the classic values below, re-pointed at the theme tokens by minimal.css
   and by the homepage, so light and dark both follow. */
.mega{--m-bg:#fff;--m-ink:#2B1F4F;--m-soft:#4B4268;--m-accent:#5145A1;--m-line:oklch(0% 0 0 / 0.08);
  --m-line-strong:oklch(0% 0 0 / 0.16);--m-tint:#F1EFF8;--m-btn:#2B1F4F;--m-btn-ink:#fff;--m-btn-hover:#5145A1;--m-btn-hover-ink:#fff}
.nav-dd--mega{position:static}
/* bridge from the Offering link down to the panel, under that link only */
.nav-dd--mega>a{position:relative}
.nav-dd--mega:hover>a::before{content:"";position:absolute;left:-24px;right:-24px;top:60%;height:48px}
.nav-dd__menu.mega{left:0;right:0;top:100%;width:auto;min-width:0;margin:0;padding:0;display:block;background:var(--m-bg);
  border:0;border-radius:0;border-top:1px solid var(--m-line);border-bottom:1px solid var(--m-line);
  box-shadow:0 48px 70px -46px oklch(20% 0.05 285 / 0.5);transform:translateY(-8px)}
.nav-dd__menu.mega::before{display:none}
.nav-dd:hover .nav-dd__menu.mega,.nav-dd:focus-within .nav-dd__menu.mega,.nav-dd.is-open .nav-dd__menu.mega{transform:none}
.mega__in{width:min(1240px,calc(100% - 2 * clamp(20px,4vw,48px)));margin:0 auto;padding:clamp(32px,3.4vw,48px) 0 clamp(28px,3vw,40px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:clamp(24px,2.6vw,40px)}
.mega__intro{grid-row:span 3;display:flex;flex-direction:column;align-items:flex-start;padding-right:clamp(8px,2vw,32px);border-right:1px solid var(--m-line)}
.mega .mega__eyebrow{margin:0 0 14px;font:700 13px/1.3 var(--m-label,var(--font-label));letter-spacing:2px;text-transform:uppercase;color:var(--m-accent)}
.mega .mega__title{margin:0 0 24px;font:800 clamp(22px,1.9vw,27px)/1.15 var(--m-display,var(--font-display));letter-spacing:-.02em;color:var(--m-ink)}
.nav-dd__menu.mega a.mega__all{margin-top:auto;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border:0;
  border-radius:0;background:var(--m-btn);color:var(--m-btn-ink) !important;font-weight:700;font-size:16px;transition:background-color var(--hover-dur) var(--ease-soft),color var(--hover-dur) var(--ease-soft)}
.nav-dd__menu.mega a.mega__all:hover{background:var(--m-btn-hover);color:var(--m-btn-hover-ink) !important}
.nav-dd__menu.mega a.mega__all::after,.nav-dd__menu.mega a.mega__link::after{display:none}
.mega__col{grid-row:span 3;display:grid;grid-template-rows:subgrid;align-content:start}
/* About and Careers: no categories, so the links run across the three
   category columns, on the same grid and lines as Offering's links */
.mega__col--plain{display:block;grid-column:2 / -1;align-self:start}
.mega__col--plain .mega__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,2.6vw,40px);border-top:0}
.mega__col--plain .mega__link{border-top:1px solid var(--m-line-strong)}
.mega .mega__group{margin:0 0 10px;display:flex;align-items:baseline;gap:10px;font:700 14px/1.3 var(--m-label,var(--font-label));letter-spacing:1.6px;text-transform:uppercase;color:var(--m-ink)}
.mega .mega__group span{color:var(--m-accent);letter-spacing:1px}
.mega .mega__purpose{margin:0 0 20px;font-size:16px;line-height:1.55;color:var(--m-soft)}
.mega__links{display:flex;flex-direction:column;border-top:1px solid var(--m-line-strong)}
.nav-dd__menu.mega a.mega__link{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:15px 0;margin:0;font-size:inherit;
  border-radius:0;border-bottom:1px solid var(--m-line);background:transparent;color:var(--m-ink) !important;
  transition:color var(--hover-dur) var(--ease-soft)}
/* hover tint sits behind the row and reaches 12px past the column on each
   side, so the text never moves or re-wraps (padding on hover made
   "Legacy System Assessment" drop to two lines) */
.nav-dd__menu.mega a.mega__link::before{content:"";position:absolute;inset:0 -12px;z-index:-1;background:var(--m-tint);
  opacity:0;transition:opacity var(--hover-dur) var(--ease-soft)}
.nav-dd__menu.mega a.mega__link:hover::before,.nav-dd__menu.mega a.mega__link:focus-visible::before{opacity:1}
.mega__link b{display:flex;align-items:center;justify-content:space-between;gap:12px;font:700 16px/1.3 var(--m-display,var(--font-display))}
.mega__arrow{flex:none;opacity:.55;transform:translateX(-4px);transition:opacity var(--hover-dur) var(--ease-soft),transform var(--hover-move) var(--ease-soft)}
.nav-dd__menu.mega a.mega__link:hover,.nav-dd__menu.mega a.mega__link:focus-visible{background:transparent;color:var(--m-ink) !important}
.mega__link:hover .mega__arrow,.mega__link:focus-visible .mega__arrow,.mega__all .mega__arrow{opacity:1;transform:none}
/* By sector: the three microsites as a strip under the category columns
   (Website Sync, 7 Oct 2026). :root lifts it above the generic dropdown
   link rules of both looks. */
.mega__sectors{grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--m-line)}
.mega__sectors .mega__group{margin:0 8px 0 0}
:root .nav-dd__menu.mega a.mega__sector{display:inline-flex;align-items:center;gap:10px;margin:0;padding:10px 16px;border-radius:0;
  border:1px solid var(--m-line-strong);background:transparent;color:var(--m-ink) !important;font:700 16px/1.2 var(--m-display,var(--font-display));
  transition:background-color var(--hover-dur) var(--ease-soft),color var(--hover-dur) var(--ease-soft)}
:root .nav-dd__menu.mega a.mega__sector:hover,:root .nav-dd__menu.mega a.mega__sector:focus-visible{background:var(--m-btn);color:var(--m-btn-ink) !important}
.mega__sector .mega__arrow{opacity:1;transform:none}
@media (max-width:1240px){
  .mega__in{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto 1fr}
  .mega__col--plain,.mega__sectors{grid-column:1 / -1}
  .mega__intro{grid-column:1 / -1;grid-row:auto;border-right:0;padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--m-line);
    flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:24px}
  .mega .mega__title{flex:1 1 auto;margin:0}
  .nav-dd__menu.mega a.mega__all{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.nav-dd__menu,.nav-dd__caret{transition:none}}

/* ---- Header logo: {be} opens to {BeyondEdge} ------------------------------
   Markup from beLogoHtml() in src/lib/chrome.ts (inner pages and homepage).
   At rest only {be} shows. On hover or keyboard focus the middle is a
   two-column grid that hands its width from "be" to the word: the "be"
   column closes to 0 while the word's column opens from 0fr to 1fr (its own
   measured width, whatever font loads), so the right brace rides out with
   it. "be" fades and shrinks away; the word fades in as it is uncovered.
   --h is the logo height; brace widths are ratios of the 308-unit drawing.
   !important only where the older .min-brand / .brand rules would win. */
.be-logo{--h:36px;--be-w:calc(var(--h) * 1.3484);display:inline-flex !important;align-items:center;gap:0 !important;height:var(--h);text-decoration:none;flex:none}
.be-logo svg{display:block;flex:none;height:var(--h) !important}
.be-logo .br{fill:var(--mark-brace)}
.be-logo .lt{fill:var(--mark-be)}
.be-logo .be-logo__l{width:calc(var(--h) * .3523) !important}
.be-logo .be-logo__r{width:calc(var(--h) * .3156) !important}
.be-logo__mid{display:grid;grid-template-columns:var(--be-w) 0fr;height:var(--h);align-items:center;
  transition:grid-template-columns var(--hover-move) var(--ease-soft)}
.be-logo__cell{min-width:0;overflow:hidden;display:flex;align-items:center;height:100%}
.be-logo .be-logo__be{width:var(--be-w) !important;transform-origin:20% 60%;
  transition:opacity .3s var(--ease-soft) .18s,transform var(--hover-move) var(--ease-soft)}
.be-logo .be-logo__word{display:block;padding:0 .16em 0 .12em;transform:translateY(-.04em);
  font-family:var(--font-body,var(--body)) !important;font-weight:900 !important;font-size:calc(var(--h) * .7) !important;line-height:1 !important;
  letter-spacing:.01em;white-space:nowrap;color:var(--mark-be);opacity:0;transition:opacity .3s var(--ease-soft)}
/* open: on hover / focus, and on a first visit (html.logo-intro, set before
   paint by styleHeadScript and removed ~1.4s after the page is ready, so the
   visitor sees {BeyondEdge} fold into {be} once) */
.be-logo:is(:hover,:focus-visible) .be-logo__mid,html.logo-intro .be-logo .be-logo__mid{grid-template-columns:0px 1fr}
.be-logo:is(:hover,:focus-visible) .be-logo__be,html.logo-intro .be-logo .be-logo__be{opacity:0;transform:scale(.7);transition-delay:0s}
.be-logo:is(:hover,:focus-visible) .be-logo__word,html.logo-intro .be-logo .be-logo__word{opacity:1;transition:opacity .45s var(--ease-soft) .12s}
/* the fold after the intro is a touch slower than a hover, so it reads */
html:not(.logo-intro) .be-logo:not(:hover):not(:focus-visible) .be-logo__mid{transition-duration:.9s}
@media (max-width:560px){.be-logo{--h:30px}}