/* Header amoeba menu — motion driven by nav-menu.js (GSAP) */
:root{--persistent-nav-offset:6.25rem}
html{scroll-padding-top:var(--persistent-nav-offset)}
section[id]{scroll-margin-top:var(--persistent-nav-offset)}

/* Shared persistent-header contract. Individual pages still add their legacy
   scroll-hide classes, but the navigation now remains available throughout. */
header#header,
header.topbar,
header#header.hide,
header#header.services-hidden,
header.topbar.hidden,
header.topbar.video-in-view{
  position:fixed;
  inset:0 0 auto;
  width:100%;
  transform:none!important;
  pointer-events:auto!important;
}
.burger{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:auto;height:auto;padding:0;border:none;border-radius:0;
  background:transparent;cursor:pointer;
  font-family:"Aeonik",sans-serif;font-weight:300;
  font-size:clamp(22px,2.8vw,30px);line-height:1;
  transition:color .3s cubic-bezier(.23,1,.32,1);
  position:relative;z-index:3;
}
/* Hover/focus fill: a ::before square rather than padding on .burger itself,
   so the button's own box (and its right edge, aligned to the hero subtext
   and the page gutter) doesn't shift. Sized to match the open menu's black
   wipe bar height exactly: .nav-end is align-items:stretch (below), so
   .burger's own box already stretches to .menu's height (both children of
   the same flex row) — height:100% + aspect-ratio:1 turns that into a true
   square without a hardcoded px value that could drift if link padding
   changes. scale(.6)->scale(1) gives it somewhere to grow from instead of a
   flat fade. Same ink/paper pair the nav CTA hover already uses (header
   .menu .nav-cta:hover), so the two hover treatments read as one system. */
.burger::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  height:100%;
  aspect-ratio:1;
  transform:translateX(-50%) scale(.6);
  transform-origin:center;
  border-radius:0;
  /* --nav-menu-bg is CMS-driven (Brand & Nav > Universal menu style > Menu
     background) and set on :root by site-settings.js. Deliberately NOT
     var(--ink)-derived: 404 inverts --ink to #f8f4ef inside its header, which
     would flip this surface to near-white on that page alone. The burger
     square and the menu wipe are one surface and must match everywhere. */
  background:var(--nav-menu-bg,#cccccc);
  opacity:0;
  transition:opacity .3s cubic-bezier(.23,1,.32,1),transform .3s cubic-bezier(.23,1,.32,1);
  pointer-events:none;
}
.burger:hover::before,
.burger:focus-visible::before,
.burger.open::before{
  opacity:1;
  transform:translateX(-50%) scale(1);
}
/* site-settings.js injects `header .burger-icon{color:X!important;
   -webkit-text-fill-color:X!important}` at runtime (applySharedNavigationStyle,
   for the CMS nav-color setting). -webkit-text-fill-color wins over color for
   actual glyph paint in Chromium/WebKit, so overriding only `color` here left
   the "+" visually dark even though its computed color read white. Setting
   both directly on .burger-plus (not just inherited) beats that inherited
   value regardless of the ancestor rule's !important. */
.burger:hover .burger-plus,
.burger:focus-visible .burger-plus,
.burger.open .burger-plus{
  /* .open was missing: the grid vanished the moment the menu popped out,
     because only the hover/focus states recoloured the glyphs against the
     square. Dark, not white — the surface defaults light (#cccccc: 11.6:1 for
     this ink vs 1.6:1 for white, against WCAG 1.4.11's 3:1 floor for non-text
     UI). If the CMS surface is set very dark these want re-checking. Literal
     for the same reason as the surface above: 404 inverts --ink in-header. */
  color:#10121a;
  -webkit-text-fill-color:#10121a;
}
/* Compact solid amoeba trigger. The pseudo-element means the final icon paints
   immediately, before CMS content arrives, and no editable glyph is required. */
.burger-icon{
  display:block;
  width:.78em;
  height:.78em;
  position:relative;
  transform-origin:50% 50%;will-change:transform;
}
.burger-icon::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:44% 56% 62% 38% / 58% 39% 61% 42%;
  background:#10121a;
  transform:rotate(-7deg) scale(.94);
  transition:transform .18s cubic-bezier(.22,1,.36,1),border-radius .18s cubic-bezier(.22,1,.36,1);
}
.burger-icon::after{
  content:"";
  position:absolute;
  top:50%;
  right:24%;
  left:24%;
  z-index:1;
  height:1px;
  border-radius:1px;
  background:#f7f7f5;
  box-shadow:0 -4px 0 #f7f7f5,0 4px 0 #f7f7f5;
  transform:translateY(-50%) rotate(180deg);
  transform-origin:center;
  pointer-events:none;
}
.burger:hover .burger-icon::before,
.burger:focus-visible .burger-icon::before,
.burger.open .burger-icon::before{
  border-radius:58% 42% 45% 55% / 43% 60% 40% 57%;
  transform:rotate(5deg) scale(1.08);
}
.burger-plus{display:none}
.menu{position:relative;z-index:2;min-width:0;pointer-events:none}
.menu.open,.menu.is-open{pointer-events:auto}
/* Menu reveal backdrop — desktop only. Mobile's .menu-links already has its own
   complete panel (rgba(249,249,249,.94) light glass + dark text below,
   max-width:780px): stacking a black layer behind that 94%-opacity background
   would tint it, and forcing white text (below) would go illegible against
   it. .menu has no explicit width, so as a flex item it shrink-wraps
   .menu-links — which nav-menu.js already GSAP-tweens (maxWidth 0 -> targetW)
   to open/close. inset:0 on this ::before tracks that same box every frame
   with no separate tween of its own, so the wipe reveals/closes in perfect
   lockstep with the existing motion. z-index:-1 paints it behind all of
   .menu's content regardless of .menu-links' own (static) position. */
@media(min-width:781px){
  /* Persistent inset navigation band inspired by the supplied reference. It
     spans the complete header system (logo, links and trigger), while the
     existing menu wipe continues to control only the link reveal. */
  header#header .nav,
  header.topbar .nav{
    position:relative;
    isolation:isolate;
  }
  header#header .nav::before,
  header.topbar .nav::before{
    content:"";
    position:absolute;
    inset:12px var(--site-gutter,clamp(22px,4.1vw,72px));
    z-index:0;
    background:color-mix(in srgb,var(--nav-menu-bg,#c8c9cc) var(--nav-menu-opacity,78%),transparent);
    -webkit-backdrop-filter:blur(14px) saturate(112%);
    backdrop-filter:blur(14px) saturate(112%);
    box-shadow:none;
    pointer-events:none;
  }
  header#header .nav>*,
  header.topbar .nav>*{
    position:relative;
    z-index:1;
  }
  html body header#header .brand-mark,
  html body header.topbar .brand-mark{
    background-image:var(--brand-logo)!important;
  }
  html body header#header .brand,
  html body header.topbar .brand{
    margin-left:8px;
    transform:scale(1.04);
    transform-origin:left center;
  }
  html body header#header .burger,
  html body header.topbar .burger{
    color:var(--nav-fg,#10121a)!important;
    -webkit-text-fill-color:var(--nav-fg,#10121a)!important;
  }
  html body header#header .burger-icon,
  html body header.topbar .burger-icon{
    color:var(--nav-fg,#10121a)!important;
    -webkit-text-fill-color:var(--nav-fg,#10121a)!important;
  }
  header#header .nav-end,
  header.topbar .nav-end{
    margin-right:clamp(18px,1.7vw,28px);
  }
  /* The band itself is the trigger surface on desktop. Keep the icon clean
     and reveal the links immediately on hover instead of drawing a tile. */
  .burger::before{display:none}
  .burger:hover .burger-plus,
  .burger:focus-visible .burger-plus,
  .burger.open .burger-plus{
    color:var(--nav-fg,#10121a)!important;
    -webkit-text-fill-color:var(--nav-fg,#10121a)!important;
  }
  body.nav-menu-trigger-hover .organism-cursor-trail,
  body.oj-pointer-mouse.nav-menu-organism-front .organism-cursor-trail{
    opacity:0!important;
    visibility:hidden!important;
  }
  /* The band is portalled to <body> so it can sit below the cursor amoeba
     without pulling the fixed header (and its click targets) below the page. The
     .topbar selector is not redundant: knowledge-pages.css sets
     `.knowledge-page .topbar{z-index:800}` at (0,2,0), which outranks a plain
     `body.<class> header` at (0,1,2) — the header then tied with the band at
     800 and lost on DOM order, so FAQ/blog opened the band over their own menu
     text and the links read as invisible. Matching the class column here wins
     on specificity rather than on which stylesheet loads last. */
  body.nav-menu-organism-front header,
  body.nav-menu-organism-front header#header,
  body.nav-menu-organism-front header.topbar{z-index:802}
  .nav-menu-band{
    position:fixed;
    z-index:800;
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
    pointer-events:none;
    will-change:left,width;
  }
  .menu::before{display:none}
}
.menu-links{
  position:relative;z-index:1;
  display:flex;flex-direction:row;align-items:center;justify-content:flex-end;
  gap:clamp(8px,1vw,14px);
  max-width:0;overflow:hidden;
  clip-path:inset(0 100% 0 0);
  visibility:hidden;
  will-change:max-width,clip-path;
}
/* Desktop only, matching the wipe above — mobile's a.m-link/.nav-cta stay the
   CMS-driven dark color from site-settings.js, correct against its own light
   panel. Links/CTA were dark text (CMS nav-color, injected !important by
   site-settings.js) meant for the transparent/light header — illegible on
   the new black wipe. #menu's ID specificity is required to beat that
   injected rule regardless of load order (a class-only override at equal
   specificity would lose to whichever rule loads last). Safe unconditionally
   within this breakpoint: while closed the links are clipped/hidden anyway. */
@media(min-width:781px){
  /* CMS-controlled navigation colour over the translucent navigation band. */
  #menu .m-link,#menu .m-link span,#menu .nav-cta,#menu .nav-cta span{
    color:var(--nav-fg,#10121a)!important;
    -webkit-text-fill-color:var(--nav-fg,#10121a)!important;
  }
  /* Hover highlight removed per request — the sliding underline below is the
     only hover treatment now. Five pages set this background at varying
     specificity (index/about via header .menu a.m-link:hover, portfolio and
     projects bare, 404 twice including body.not-found-page header.topbar ...
     at (0,5,3)); #menu's ID column outranks all of them at once, so this is
     one rule rather than six page edits. */
  #menu .m-link:hover{
    background:transparent;
  }
  /* Outline removed per request. Each page sets its own .nav-cta border
     (index/about via var(--cta-border), 404 via --line, knowledge-pages via
     --kp-line), so this has to zero the colour rather than rely on any one
     of them; border-width stays so the pill's box, and the row's layout,
     don't shift. The CTA now reads as a link like its neighbours — the
     shared bold + underline below is its only hover treatment. */
  #menu .nav-cta,
  #menu .nav-cta:hover{
    border-color:transparent!important;
    background:transparent!important;
  }
}
.menu .menu-cta,.menu a.m-link{
  flex:0 0 auto;white-space:nowrap;
  pointer-events:none;
  will-change:transform,opacity;
}
.menu.open .menu-cta,.menu.open a.m-link,
.menu.is-open .menu-cta,.menu.is-open a.m-link{pointer-events:auto}
.menu a.m-link,.menu a.m-link span,.menu .nav-cta,.menu .nav-cta span{
  font-family:"Aeonik",sans-serif;font-weight:400;font-style:normal;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;
}
.menu a.m-link{
  display:inline-flex;align-items:center;padding:8px 12px;border-radius:8px;
  transition:color .25s,background .25s;
}
.menu .menu-cta{margin:0}
.menu .nav-cta:hover{
  background:var(--cta-hover-bg,var(--ink,#10121a));
  color:var(--cta-hover-fg,var(--paper,#fff));
  border-color:var(--cta-hover-bg,var(--ink,#10121a));
}
.menu .nav-cta:hover span,
.menu .nav-cta:hover [data-cms="nav.cta"]{
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
}
/* Bold is the one hover signal every nav link shares — top-level .nav-link,
   dropdown .m-link, and the CTA alike. Only sets font-weight, so it applies
   regardless of which page's own header/.menu .nav-cta:hover background rule
   (ink-fill, transparent, whatever) is also in play for that property; no
   !important or elevated specificity needed since nothing else sets weight
   on these hover states. Previously the CTA also inverted to a white fill on
   desktop to compensate for its ink-fill blending into the black wipe
   backdrop — removed per request; bold is the only feedback now. */
/* #menu + !important is required, not stylistic: site-settings.js injects
   `header .menu-links a.m-link,...{font-weight:<cms value>!important}` at
   runtime (applySharedNavigationStyle). The previous class-only rule computed
   to 500 on hover, never 700 — the injected !important simply won. An ID
   raises specificity above `header .menu-links a.m-link` so this wins among
   !important declarations. Spans are listed because that injected rule
   targets them too, and they'd otherwise keep the 500. */
#menu .m-link:hover,#menu .m-link:hover span,
#menu .nav-cta:hover,#menu .nav-cta:hover span{
  font-weight:700!important;
}
@media(min-width:781px){
  .menu a.m-link,
  .menu .nav-cta{
    position:relative;
  }
  .menu a.m-link::after,
  .menu .nav-cta::after{
    content:"";
    position:absolute;
    right:12px;
    bottom:4px;
    left:12px;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .22s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
  }
  .menu a.m-link:hover::after,
  .menu a.m-link:focus-visible::after,
  .menu .nav-cta:hover::after,
  .menu .nav-cta:focus-visible::after{
    transform:scaleX(1);
  }
}
@media(prefers-reduced-motion:reduce){
  .burger-icon::before,
  .menu a.m-link::after,
  .menu .nav-cta::after{transition:none}
}
@media(max-width:780px){
  .nav-end{position:relative}
  .menu{
    position:absolute;top:calc(100% + 12px);right:0;
    width:min(236px,calc(100vw - 40px));
  }
  .menu-links{
    --nav-fg:#10121a;--nav-muted:rgba(16,18,26,.72);--nav-hover-bg:rgba(16,18,26,.06);
    --cta-border:rgba(16,18,26,.24);--cta-hover-bg:#10121a;--cta-hover-fg:#fff;
    box-sizing:border-box;
    width:100%;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:2px;padding:10px;
    border:1px solid rgba(255,255,255,.28);border-radius:20px;
    /* Same surface as the desktop wipe band: --nav-menu-bg is the CMS-driven
       menu colour, so the two read as one system. Denser than the desktop's
       64% because this panel is small and sits over live page content rather
       than over a full-bleed bar. */
    background:color-mix(in srgb,var(--nav-menu-bg,#cccccc) 92%,transparent);
    box-shadow:
      0 20px 50px rgba(16,18,26,.18),
      inset 0 1px 0 rgba(255,255,255,.28);
    backdrop-filter:blur(16px) saturate(128%);-webkit-backdrop-filter:blur(16px) saturate(128%);
    /* The panel drops from the burger, so it opens downward. The closed clip
       is the top edge, not the left one — nav-menu.js tweens the same axis. */
    clip-path:inset(0 0 100% 0);
  }
  .menu.open .menu-links,.menu.is-open .menu-links{
    max-width:min(236px,calc(100vw - 40px));
    overflow:visible;
  }
  /* No hover on a touch screen — the state only ever arrived as a sticky
     leftover from the tap and then sat there, solid, after the menu closed.
     The square belongs to the open state. */
  @media(hover:none){
    .burger:hover::before{opacity:0;transform:translateX(-50%) scale(.6)}
    .burger.open::before{opacity:1;transform:translateX(-50%) scale(1)}
    .burger:hover .burger-plus{color:inherit}
  }
  .menu a.m-link{justify-content:flex-start;padding:9px 10px}
  .menu .menu-cta{width:auto;align-self:flex-start}
  .menu .nav-cta{box-sizing:border-box;width:auto;min-width:116px;justify-content:center;padding:8px 12px}
  .burger{z-index:5}
}