/* TCI mega-menu — hover/focus/click on desktop, click accordion on mobile.
   Applies on top of existing .nav.  Requires markup:
   <li class="nav__item nav__item--mega">
     <button class="nav__link nav__link--mega" aria-haspopup="true" aria-expanded="false">Label</button>
     <div class="mega" role="menu">…</div>
   </li>
*/
.nav__item--mega{position:relative}
.nav__link--mega{background:transparent;border:0;font:inherit;color:inherit;cursor:pointer;padding:.6rem .9rem;display:inline-flex;align-items:center;gap:.35rem}
.nav__link--mega::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:.2rem;margin-top:-3px;opacity:.6;transition:transform .18s ease}
.nav__item--open .nav__link--mega::after{transform:rotate(-135deg);margin-top:2px}

.mega{
  position:absolute; top:100%; left:0;
  min-width:640px; max-width:min(920px, 92vw);
  background:#fff; color:#0f1113;
  border:1px solid rgba(0,0,0,.08); border-radius:14px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.22), 0 8px 20px -8px rgba(0,0,0,.14);
  padding:1.4rem 1.5rem 1.3rem; z-index:60;
  display:none;
}
.nav__item--open > .mega, .nav__item--mega:focus-within > .mega{ display:grid }
.mega{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.1rem 1.5rem }
.mega--2 { grid-template-columns:repeat(2, minmax(0,1fr)) }
.mega--4 { grid-template-columns:repeat(4, minmax(0,1fr)) }

.mega__col > h4{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:#6b7075; margin:0 0 .55rem; font-weight:600 }
.mega__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem }
.mega__col a{ display:flex; gap:.55rem; align-items:flex-start; padding:.45rem .55rem; border-radius:8px; color:inherit; text-decoration:none; transition:background .12s ease }
.mega__col a:hover, .mega__col a:focus-visible{ background:rgba(0,0,0,.05); outline:none }
.mega__col a .ico{ width:18px;height:18px;flex-shrink:0;color:var(--brand,#0f1113);margin-top:2px }
.mega__col a .ico svg{ width:100%;height:100%;display:block }
.mega__col a .mega__link{ display:flex;flex-direction:column;gap:.05rem;min-width:0 }
.mega__col a b{ font-weight:600;font-size:.92rem;line-height:1.25 }
.mega__col a small{ font-size:.78rem; color:#5c6166; line-height:1.35 }

.mega__foot{ grid-column:1/-1; margin-top:.55rem; padding-top:.9rem; border-top:1px solid rgba(0,0,0,.08); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap }
.mega__foot a{ color:var(--brand,#0f1113); font-weight:600; text-decoration:none; font-size:.9rem }
.mega__foot a::after{ content:" →" }

/* Backdrop dimmer only on desktop, only when a mega is open */
body.mega-open::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.18); z-index:40; pointer-events:none; transition:opacity .18s ease }

/* Mobile — collapse into stacked accordion within existing nav drawer */
@media (max-width:1200px){
  .mega{ position:static; min-width:0; max-width:none; box-shadow:none; border:0; padding:.25rem 0 .75rem 1rem; grid-template-columns:1fr; gap:.6rem }
  .nav__link--mega::after{ margin-left:auto }
  .nav__link--mega{ width:100%; justify-content:space-between; padding:.8rem 1rem }
}

/* mobile accordion: only the tapped section opens; tap again to close */
@media (max-width:1200px){
  .nav__item--mega > .mega, .nav__item--mega:focus-within:not(.nav__item--open) > .mega{ display:none }
  .nav__item--mega.nav__item--open > .mega{ display:grid }
  .nav__link--mega::after{ transition:transform .18s ease }
}