/* header.css — announcement bar, fixed header, 4 hover menus, mobile overlay.
   Every number here is measured: TOKENS.md §1, JS-RECON §4 + §8, frames
   menus-1440 / header-scroll-1440 / sweep-1300|1024|768 / mobile-390.
   Scoped to .announce / .hd* / .menu* / .mnav*. */

/* --header-top-gap (1.25rem) now lives in tokens.css. Header-local vars: */
.hd-root,:root{--nav-desktop:1100px;--scrim:oklch(0 0 0 / .72);--scrim-hover:oklch(0 0 0 / .78)}
/* ══ announcement bar ══ JS-RECON §4.4 ═════════════════════════════════════ */
.announce{
  position:fixed;top:0;left:0;right:0;height:var(--announcement-h);z-index:55;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  color:#fff;
  transition:opacity .3s cubic-bezier(0,0,.2,1),transform .3s cubic-bezier(0,0,.2,1),background-color .3s cubic-bezier(0,0,.2,1),color .3s cubic-bezier(0,0,.2,1);
}
.announce[hidden]{display:none}
.announce[data-state="collapsed"]{opacity:0;transform:translateY(-100%);pointer-events:none}
.announce-row{display:flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:12px;line-height:16px;padding:0 44px}
.announce-msg{color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announce-cta{position:relative;color:#fff;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;transition:opacity .2s cubic-bezier(0,0,.2,1)}
.announce-cta:hover{opacity:.8}
.announce-cta::after{content:"";position:absolute;top:-8px;bottom:-8px;left:0;right:0} /* giga's after:inset-y-0 hit pad */
.announce-x{position:absolute;top:50%;right:0;transform:translateY(-50%);width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:color .3s cubic-bezier(0,0,.2,1)}
.announce-x:hover{color:#fff}
.announce-long{display:none}
@media (min-width:810px){
  .announce-x{right:4px}
  .announce-long{display:inline}
  .announce-short{display:none}
}

/* Anchor landing offset for the three targets the header links to that no other
   stylesheet covers. The fixed chrome is 106px open / 74px collapsed, so without
   this an in-page jump buries the section top (measured 74px of occlusion).
   Uses --chrome-offset, the same pattern industries.css already established, so
   the value tracks the banner. #industriesBento is deliberately NOT listed here:
   industries.css owns it correctly. 🔴 Cross-section selector - move to base.css
   if you would rather it were centralised. */
#howItWorks,#spotlight,#cta{scroll-margin-top:calc(var(--chrome-offset) + 16px)}

/* ══ header bar ══ JS-RECON §4.1 ═══════════════════════════════════════════ */
.hd{
  position:fixed;left:0;right:0;z-index:var(--z-header);height:var(--header-h);
  top:calc(var(--header-top-gap) + var(--announcement-banner-shift));
  transition:color .3s cubic-bezier(0,0,.2,1),background-color .3s cubic-bezier(0,0,.2,1),top .3s cubic-bezier(0,0,.2,1);
}
/* desktop scrim behind the bar — §4.2, bottom-feathered 56px mask, blur 20 */
.hd-scrim{
  position:fixed;left:0;right:0;top:0;z-index:-1;display:none;pointer-events:none;opacity:0;
  height:calc(var(--header-top-gap) + var(--announcement-banner-shift) + 3.375rem + 56px);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent);
  transition:opacity .3s cubic-bezier(0,0,.2,1);
}
.hd-scrim-dark{position:absolute;inset:0;background-image:linear-gradient(to bottom,rgba(0,0,0,.46),rgba(0,0,0,.34) 57%,rgba(0,0,0,0))}
@media (min-width:1100px){ .hd-scrim{display:block} }
.hd.is-scrolled .hd-scrim{opacity:1}

/* the logo / CTA row — giga: w-[calc(100%-1rem)] mx-2 px-2, ≥810 w-full mx-auto px-11, ≥1680 px-5 */
.hd-bar{
  position:relative;isolation:isolate;height:100%;display:flex;align-items:center;justify-content:space-between;
  width:calc(100% - 1rem);margin:0 8px;max-width:var(--container-nav);padding:0 8px;
  pointer-events:none;   /* giga: the row is inert, only the two side groups take the pointer,
                            otherwise it covers the centred nav and eats every trigger hover */
}
.hd-bar-skin{position:absolute;inset:0;z-index:-1;border-radius:8px;background:#000;opacity:0;transition:opacity .2s cubic-bezier(0,0,.2,1)}
@media (min-width:810px){ .hd-bar{width:100%;margin:0 auto;padding:0 44px} }
@media (min-width:1680px){ .hd-bar{padding:0 20px} }
@media (max-width:1099.98px){ .hd.is-scrolled .hd-bar-skin{opacity:1} }
.hd-side{pointer-events:auto;display:flex;align-items:center;height:100%;padding:0 8px}
.hd-side-r{gap:10px}
@media (min-width:810px){ .hd-side{padding:0 12px} }

/* wordmark — §4.3 */
.hd-logo{display:flex;align-items:center;height:36px;transition:color .3s cubic-bezier(0,0,.2,1)}
@media (min-width:1100px){ .hd-logo{height:auto} }
.hd-logo-in{display:inline-flex;align-items:center;gap:8px;color:var(--fg)}
.hd-mark{display:inline-flex}
.hd-mark img{height:24px;width:auto;flex-shrink:0}
.hd-letters{display:inline-flex;overflow:visible;font-family:var(--font-sans);font-size:24px;font-weight:500;line-height:1;letter-spacing:0}
.hd-letters>span{display:inline-block}
@keyframes header-fade-in{0%{opacity:0}to{opacity:1}}
@keyframes header-letter-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
[data-header-mark]{animation:.28s cubic-bezier(0,0,.2,1) both header-fade-in}
[data-header-letters]>[data-header-letter]{animation:.28s var(--ease-letter) both header-letter-in}
[data-header-letters]>[data-header-letter]:nth-child(2){animation-delay:35ms}
[data-header-letters]>[data-header-letter]:nth-child(3){animation-delay:70ms}
[data-header-letters]>[data-header-letter]:nth-child(4){animation-delay:105ms}

/* centred desktop nav */
.hd-navwrap{position:absolute;left:0;right:0;top:0;height:100%;display:none;align-items:center;justify-content:center;pointer-events:none}
@media (min-width:1100px){ .hd-navwrap{display:flex} }
.hd-nav{position:relative;height:100%;pointer-events:auto}
.hd-nav-list{position:relative;display:flex;height:100%;align-items:stretch}
.hd-nav-list>li{position:relative;height:100%}
.hd-trigger{
  display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 16px;
  font-family:var(--font-sans);font-size:14px;font-weight:400;line-height:24px;color:var(--fg);
  opacity:1;transition:color 300ms cubic-bezier(0,0,.2,1),opacity 200ms cubic-bezier(0,0,.2,1) 0ms;
  animation:.32s cubic-bezier(0,0,.2,1) backwards header-fade-in;
}
.hd-nav-list>li:nth-child(1) .hd-trigger{animation-delay:385ms}
.hd-nav-list>li:nth-child(2) .hd-trigger{animation-delay:445ms}
.hd-nav-list>li:nth-child(3) .hd-trigger{animation-delay:505ms}
.hd-nav-list>li:nth-child(4) .hd-trigger{animation-delay:565ms}
.hd-chev{width:14px;height:14px;flex-shrink:0;opacity:.45;transition:transform 200ms cubic-bezier(0,0,.2,1),opacity 200ms cubic-bezier(0,0,.2,1)}
.hd-trigger:hover .hd-chev{opacity:.8}
.hd-trigger[aria-expanded="true"] .hd-chev{transform:rotate(180deg);opacity:1}

/* right-hand pills — measured 42px tall, r9999, 14px/400, pad 0 20 */
.hd-cta{display:none;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;
  border:1px solid transparent;border-radius:var(--radius-full);white-space:nowrap;
  font-family:var(--font-sans);font-size:14px;font-weight:400;line-height:20px;
  transition:background-color .3s cubic-bezier(0,0,.2,1),color .3s cubic-bezier(0,0,.2,1),border-color .3s cubic-bezier(0,0,.2,1),backdrop-filter .3s cubic-bezier(0,0,.2,1)}
@media (min-width:1100px){ .hd-cta{display:inline-flex} }
.hd-cta-ghost{background:transparent;color:var(--fg)}
.hd-cta-ghost:hover{background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.hd-cta-solid{background:var(--primary);color:var(--primary-fg)}
/* giga hovers to accent-orange with WHITE ink (3.27:1). DIALECT bans that: ink = --accent-ink. */
.hd-cta-solid:hover{background:var(--accent);color:var(--accent-ink);border-color:transparent}

/* burger — §4.5: two 20x2 bars, translate ±6, no third bar */
.hd-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--fg);transition:color .3s cubic-bezier(0,0,.2,1)}
@media (min-width:1100px){ .hd-burger{display:none} }
.hd-burger-ic{position:relative;display:block;width:20px;height:20px}
.hd-burger-ic>span{position:absolute;left:0;top:50%;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(0,0,.2,1)}
.hd-bar1{transform:translate(0,calc(-50% - 6px))}
.hd-bar2{transform:translate(0,calc(-50% + 6px))}
.hd-burger[aria-expanded="true"] .hd-bar1{transform:translateY(-50%) rotate(45deg)}
.hd-burger[aria-expanded="true"] .hd-bar2{transform:translateY(-50%) rotate(-45deg)}

.ic14{width:14px;height:14px}
.ic20{width:20px;height:20px}
.gn-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ══ menu viewport ══ JS-RECON §8.1/§8.2 ═══════════════════════════════════ */
.menu-vp{
  position:fixed;left:0;right:0;top:var(--announcement-banner-shift);z-index:var(--z-menu);
  height:var(--menu-h,0px);width:100%;transform-origin:top;overflow:hidden;
  background:var(--scrim);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;pointer-events:none;
  transition:height 200ms cubic-bezier(0,0,.2,1),background-color 200ms cubic-bezier(0,0,.2,1),top 200ms cubic-bezier(0,0,.2,1),opacity 150ms cubic-bezier(0,0,.2,1);
}
.menu-vp[data-state="open"]{opacity:1;pointer-events:auto;transition:height 200ms cubic-bezier(0,0,.2,1),background-color 200ms cubic-bezier(0,0,.2,1),top 200ms cubic-bezier(0,0,.2,1),opacity 200ms cubic-bezier(0,0,.2,1)}
@media (max-width:1099.98px){ .menu-vp{display:none} }
.menu-panel{position:absolute;left:0;right:0;top:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms cubic-bezier(0,0,.2,1)}
.menu-panel.is-active{opacity:1;visibility:visible;pointer-events:auto}
.menu-spacer{height:calc(var(--header-top-gap) + var(--header-h) + 24px)}
.menu-tail{height:68px}
.menu-box{width:100%;max-width:900px;margin:0 auto;padding:0 24px}
@media (min-width:1680px){ .menu-box{padding:0} }
.menu-grid{display:grid;column-gap:32px;row-gap:20px}
.menu-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.menu-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* compact (Industries) rows are 38px on a 4px gutter — measured 80px of content
   inside a 246px panel, vs 20px row-gap for the icon+title+desc panels */
.menu-grid:has(.is-compact){row-gap:4px}

.m-item{display:block;padding:12px;border-radius:8px;opacity:1;transition:opacity 200ms cubic-bezier(0,0,.2,1)}
.group-menu:has(.m-item:hover) .m-item{opacity:.4}
.group-menu:has(.m-item:hover) .m-item:hover{opacity:1}  /* must outrank the :has() dim above (0,4,0): measured on giga — hovered item 1, siblings .4 */
.mi-icon{display:block;width:18px;height:18px;color:rgba(255,255,255,.55);transition:color 200ms cubic-bezier(0,0,.2,1)}
.m-item:hover .mi-icon{color:rgba(255,255,255,.9)}
.mi-title{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--font-sans);font-size:16px;font-weight:500;line-height:20px;color:#fff}
/* 13px/17px measured. Geist stands in for gigaSansText and runs ~4% wide on this
   line, so DIALECT's -0.01em tightening is applied (its maximum); the remaining
   ~2% width delta is the font substitution, not the spec. */
.mi-desc{display:block;margin-top:5px;font-family:var(--font-sans);font-size:13px;font-weight:400;line-height:17px;letter-spacing:-.01em;color:rgba(255,255,255,.72)}
.mi-badge{font-family:var(--font-mono);font-style:normal;font-size:10px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.m-item.is-compact{display:flex;align-items:center;gap:12px;padding:10px 12px}
.is-compact .mi-title{margin:0;font-size:14px;line-height:18px}
.is-plain .mi-title{margin-top:0;line-height:16px}

/* ══ mobile overlay ══ JS-RECON §8.3 ═══════════════════════════════════════ */
.mnav{
  position:fixed;left:0;right:0;top:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  background:#000;z-index:var(--z-modal);opacity:0;transform:translateY(-20px);
  transition:opacity .32s var(--ease-letter),transform .32s var(--ease-letter);
}
.mnav[hidden]{display:none}
.mnav.is-open{opacity:1;transform:translateY(0)}
.mnav.is-closing{opacity:0;transform:translateY(-12px);transition:opacity .22s var(--ease-std),transform .22s var(--ease-std)}
@media (min-width:1100px){ .mnav{display:none} }
.mnav-top{position:absolute;left:0;right:0;height:var(--header-h);
  top:calc(var(--header-top-gap) + var(--announcement-banner-shift));
  display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.mnav-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--fg)}
.mnav-nav{padding:108px 20px 40px}
.mnav-label{font-family:var(--font-mono);font-size:11px;line-height:24px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.6)}
.mnav-group+.mnav-group{margin-top:40px}
.mnav-group li a{display:flex;align-items:center;height:40px;font-family:var(--font-sans);font-size:16px;font-weight:400;line-height:16px;color:var(--fg)}
.mnav-ctas{display:flex;gap:10px;flex-wrap:wrap}
.mnav-ctas .hd-cta{display:inline-flex}
/* stagger: opacity + x, 0.2s [.22,1,.36,1], 25ms apart after a 50ms delayChildren */
.mnav [data-mi]{opacity:0;transform:translateX(-16px)}
.mnav.is-open [data-mi]{opacity:1;transform:translateX(0);
  transition:opacity .2s var(--ease-letter) var(--mi-d,0ms),transform .2s var(--ease-letter) var(--mi-d,0ms)}

/* ══ reduced motion — JS-RECON §7.6 ════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  [data-header-mark],[data-header-letters]>[data-header-letter],.hd-trigger{animation:none}
  .hd,.hd-scrim,.hd-bar-skin,.announce,.menu-vp,.menu-panel,.m-item,.mi-icon,.hd-chev,.hd-cta,.hd-burger-ic>span,.mnav{transition-duration:0s !important}
  .mnav [data-mi]{opacity:1;transform:none;transition:none}
  .mnav{transform:none}
}

/* JS-off, measured not assumed (qa/_nojs-header.mjs):
   the bar, announcement, wordmark, 4 triggers and both CTAs all render at 1440 and
   390. The menus stay closed, as the reference does with React off - and the clone
   is strictly better there, because giga ships NO panel markup at all until Radix
   opens one, while all 20 of ours are in the DOM for assistive tech.
   Honest limit: 15 of those 20 labels also appear in the footer, so with JS off the
   5 Services items (Adopt, Build, Modernize, Web Apps, AI Readiness) have no second
   route. Not worth a :focus-within fallback that would fight the JS-driven
   --menu-h when JS is on. The overlay's stagger hook (`data-mi`) is only attached
   by JS, so with JS off those links render at full opacity rather than vanishing. */

/* giga leaves these at the Tailwind v4 button default cursor (hover census, 1440): triggers ×4, announcement dismiss */
.hd-trigger,.announce-x{cursor:default}