/* Strategic Labs — V002-M2 global chrome: header, mega menu, mobile nav, footer.
   Interaction logic in PublicNavigationClient.tsx is untouched; [hidden] removal
   drives finite CSS transitions via @starting-style. */

/* ================= HEADER ================= */
.site-header {
  position: sticky; inset-block-start: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.site-header__inner { block-size: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s6); }
/* min 44px tap height so the brand link is a real touch target, not just the image box */
.brand { display: inline-flex; align-items: center; min-block-size: 44px; }
/* light-surface lockup (dark wordmark) — no filter, no recolour */
.brand img { inline-size: clamp(132px, 12vw, 172px); max-block-size: 40px; object-fit: contain; }

.nav { display: flex; justify-content: center; align-items: center; gap: var(--s2); }
.nav__item { position: relative; display: flex; align-items: center; gap: .15rem; }
.nav__item > a {
  position: relative; padding: .6rem .85rem; border-radius: var(--r-sm);
  font-weight: 500; font-size: var(--fs-sm); color: var(--ink-soft);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav__item > a::after {
  content: ""; position: absolute; inset-inline: .85rem; inset-block-end: .28rem; block-size: 2px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: center; transition: transform var(--t) var(--ease-out);
}
.nav__item > a:hover { color: var(--ink); }
.nav__item > a:hover::after,
.nav__item > a[aria-current="page"]::after,
.nav__item > a[data-active-parent="true"]::after { transform: scaleX(1); }
.nav__item > a[aria-current="page"], .nav__item > a[data-active-parent="true"] { color: var(--brand-deep); font-weight: 600; }

.mega-toggle, .nav-toggle { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.mega-toggle { inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; transition: background var(--t) var(--ease), transform var(--t) var(--ease), color var(--t) var(--ease); }
.mega-toggle:hover { background: var(--mint-wash); color: var(--brand-deep); }
.mega-toggle[aria-expanded="true"] { transform: rotate(180deg); background: var(--mint-wash); color: var(--brand-deep); }
.header-actions { display: flex; align-items: center; gap: var(--s3); }
.nav-toggle { display: none; inline-size: 46px; block-size: 46px; border-radius: var(--r-sm); place-items: center; }
.nav-toggle:hover { background: var(--mint-wash); }
.nav-toggle__bars { display: grid; gap: 5px; inline-size: 22px; }
.nav-toggle__bars i { display: block; block-size: 2px; border-radius: 2px; background: var(--brand-deep); transition: transform var(--t) var(--ease); }

/* ================= MEGA MENU ================= */
.mega {
  position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: var(--z-mega);
  background: var(--ink-800); color: var(--on-dark); overflow: clip; isolation: isolate;
  border-block-start: 1px solid var(--line-dark);
  box-shadow: var(--e4);
  opacity: 1; transform: translateY(0);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), display var(--t-slow) allow-discrete;
}
.mega[hidden] { display: none; }
@starting-style { .mega:not([hidden]) { opacity: 0; transform: translateY(-10px); } }
.mega::before {
  content: ""; position: absolute; inset: -30% -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(50% 60% at 82% 10%, rgba(68,188,167,.22), transparent 62%),
    radial-gradient(46% 52% at 12% 84%, rgba(21,112,94,.32), transparent 66%);
  animation: sl-drift var(--t-drift) ease-in-out infinite alternate;
}
.mega__inner { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s5); padding-block: var(--s7); }
.mega__col { min-width: 0; }
.mega__head { display: flex; align-items: baseline; gap: .6rem; padding-bottom: var(--s3); margin-bottom: var(--s4); border-bottom: 1px solid var(--line-dark); }
.mega__n { color: var(--brand); font-size: .75rem; font-family: Arial, sans-serif; }
.mega__title { font-weight: 700; font-size: 1rem; color: var(--on-dark); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__list a {
  display: block; padding: .5rem .6rem; margin-inline-start: -.6rem; border-radius: var(--r-xs);
  color: var(--on-dark-soft); font-size: var(--fs-sm); line-height: 1.55;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mega__list a:hover, .mega__list a:focus-visible { color: var(--on-dark); background: rgba(174,226,209,.08); transform: translateX(-3px); }
.mega__foot { position: relative; border-block-start: 1px solid var(--line-dark); background: rgba(7,22,20,.5); }
.mega__foot-inner { display: flex; gap: var(--s6); align-items: center; padding-block: var(--s4); flex-wrap: wrap; }
.mega__foot a { color: var(--on-dark-soft); font-size: var(--fs-sm); font-weight: 500; transition: color var(--t-fast) var(--ease); }
.mega__foot a:hover { color: var(--brand); }

/* ================= MOBILE NAV ================= */
.mnav {
  position: fixed; inset: 0; z-index: var(--z-mnav); background: var(--paper);
  overflow: auto; padding: var(--s5) 0 var(--s8); -webkit-overflow-scrolling: touch;
  opacity: 1; transform: translateY(0);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), display var(--t-slow) allow-discrete;
}
.mnav[hidden] { display: none; }
@starting-style { .mnav:not([hidden]) { opacity: 0; transform: translateY(-1.5%); } }
.mnav > * { width: var(--content); margin-inline: auto; }
.mnav__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.mnav__top p { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--brand-deep); }
.mnav__close { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--line-strong); background: var(--white); border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm); }
.mnav__close:hover { border-color: var(--brand-deep); }
.mnav__list { list-style: none; margin: 0; padding: var(--s4) 0; display: grid; }
.mnav__list > li { border-bottom: 1px solid var(--line); }
.mnav__list a, .mnav__level, .mnav__expand {
  inline-size: 100%; min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: .9rem 0; border: 0; background: transparent; color: var(--ink); text-align: start;
  font-weight: 600; font-size: 1.05rem;
}
.mnav__list a:hover, .mnav__level:hover, .mnav__expand:hover { color: var(--brand-mid); }
.mnav__group > ul { list-style: none; margin: 0; padding: 0; }
.mnav__family { border-block-start: 1px solid var(--line); }
.mnav__expand { font-size: 1rem; font-weight: 600; padding-inline-start: var(--s4); }
.mnav__n { color: var(--brand-mid); font-size: .8rem; margin-inline-end: .4rem; }
.mnav__sub { padding: 0 var(--s5) var(--s4); }
.mnav__sub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mnav__sub a { min-height: 48px; font-weight: 500; font-size: var(--fs-sm); color: var(--ink-soft); }
.mnav__utility { display: grid; gap: var(--s4); padding-top: var(--s6); }
.mnav__utility .btn { inline-size: 100%; }
.mnav__phone { text-align: center; color: var(--brand-mid); font-weight: 600; min-height: 44px; display: grid; place-items: center; }
.mnav a[aria-current="page"], .mnav a[data-active-parent="true"] { color: var(--brand-mid); }

/* ================= FOOTER ================= */
.site-footer {
  position: relative; background: var(--ink-900); color: var(--on-dark);
  padding-block-start: var(--sec); overflow: clip; isolation: isolate;
}
.site-footer::before {
  content: ""; position: absolute; inset: -20% -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(55% 50% at 80% 0%, rgba(68,188,167,.16), transparent 62%),
    radial-gradient(45% 55% at 10% 100%, rgba(21,112,94,.26), transparent 66%);
  animation: sl-drift var(--t-drift) ease-in-out infinite alternate;
}
.site-footer .grid-lines {
  position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(320px, 32%); z-index: -1;
  opacity: .10; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, var(--mint) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000 30%, transparent 72%);
          mask-image: radial-gradient(70% 90% at 100% 0%, #000 30%, transparent 72%);
}
.site-footer__top { position: relative; display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); padding-block-end: var(--s8); }
/* dark-surface lockup (light wordmark) — correct variant, no filter */
.site-footer__brand img { inline-size: 186px; max-block-size: 44px; object-fit: contain; }
.site-footer__brand > p { max-width: 42ch; color: var(--on-dark-soft); margin-block: var(--s5) 0; font-size: var(--fs-sm); line-height: 1.85; }
.site-footer__contact { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3); }
.site-footer__contact li { display: flex; align-items: center; gap: .6rem; color: var(--on-dark-soft); font-size: var(--fs-sm); min-height: 32px; }
.site-footer__contact a { color: var(--on-dark); transition: color var(--t-fast) var(--ease); }
.site-footer__contact a:hover { color: var(--brand); }
.site-footer__social { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; gap: var(--s4); flex-wrap: wrap; }
.site-footer__social a { color: var(--on-dark-soft); font-size: var(--fs-sm); }
.site-footer__social a:hover { color: var(--brand); }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s6); }
.site-footer__cols h3 { margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-dark); color: var(--on-dark); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
/* the company column carries ~12 links — let long lists flow into two balanced
   sub-columns at desktop instead of running far past its neighbours */
@media (min-width: 1024px) { .foot-list { columns: auto; } .site-footer__cols > div:has(.foot-list > li:nth-child(9)) .foot-list { columns: 2; column-gap: var(--s5); } }
.foot-list a { display: block; padding: .38rem 0; color: var(--on-dark-muted); font-size: var(--fs-sm); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.foot-list a:hover { color: var(--brand); transform: translateX(-3px); }
.foot-bottom {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding-block: var(--s5); border-block-start: 1px solid var(--line-dark); color: var(--on-dark-muted); font-size: .84rem;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1199px) {
  .mega__inner { gap: var(--s4); }
  .mega__list a { font-size: .9rem; }
}
@media (max-width: 1023px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: grid; }
  .mega { display: none; }
  .site-footer__top { grid-template-columns: 1fr; gap: var(--s7); }
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s5); }
}
@media (max-width: 833px) {
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s6); }
}
/* mobile: no tiny multi-column footer — stacked, readable groups */
@media (max-width: 599px) {
  .site-footer__cols { grid-template-columns: 1fr; gap: 0; }
  .site-footer__cols > div { border-block-start: 1px solid var(--line-dark); padding-block: var(--s4); }
  .site-footer__cols > div:first-child { border-block-start: 0; }
  .site-footer__cols h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s3); color: var(--brand); }
  .foot-list { grid-template-columns: 1fr; }
  .foot-list a { padding: .5rem 0; min-height: 40px; display: flex; align-items: center; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .site-footer__brand img { inline-size: 160px; }
}