/* ==========================================================================
   Mega-menu + heading effects.

   The panel drops from the header on click. Click rather than hover: a hover
   menu is unreachable by keyboard and unusable on touch.
   ========================================================================== */

/* ---------- trigger ---------- */
.mi-nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: 0;
  border: 0;
  background: none;
  font: 500 var(--mi-body) var(--mi-font);
  color: #1F2421;
  opacity: .82;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--mi-fast) var(--mi-ease);
}
.mi-nav__trigger:hover,
.mi-nav__trigger[aria-expanded="true"] { opacity: 1; }

.mi-nav__trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px;
  background: var(--mi-bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mi-slow) var(--mi-ease);
}
.mi-nav__trigger:hover::after,
.mi-nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); }

/* Chevron rotates to signal state. */
.mi-nav__chev {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--mi-med) var(--mi-ease);
}
.mi-nav__trigger[aria-expanded="true"] .mi-nav__chev {
  transform: rotate(225deg) translateY(-2px);
}

/* ---------- panel ---------- */
.mi-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #FFFFFF;
  border-top: 1px solid var(--mi-rule);
  border-bottom: 1px solid var(--mi-rule);
  overflow: hidden;
  z-index: 899;
}
.mi-mega[hidden] { display: none; }

.mi-mega__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 56px);
  padding-block: clamp(28px, 3.4vw, 52px);
}
@media (min-width: 900px) {
  .mi-mega__inner { grid-template-columns: 1.15fr repeat(3, 1fr); }
}

.mi-mega__lead { max-width: 34ch; }
.mi-mega__title {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0;
  color: var(--mi-heading, #111111);
}
.mi-mega__blurb {
  margin: 12px 0 0;
  font-size: var(--mi-body);
  line-height: 1.6;
  color: var(--mi-mute);
}
.mi-mega__cta { margin-top: 20px; }

.mi-mega__colhead {
  margin: 0 0 14px;
  font-size: var(--mi-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mi-mute);
}
.mi-mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mi-mega__col a {
  position: relative;
  display: inline-block;
  color: var(--mi-ink);
  text-decoration: none;
  font-size: var(--mi-body);
  line-height: 1.4;
  transition: color var(--mi-med) var(--mi-ease), transform var(--mi-med) var(--mi-ease);
}
.mi-mega__col a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--mi-bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mi-med) var(--mi-ease);
}
.mi-mega__col a:hover { color: var(--mi-bronze); transform: translateX(3px); }
.mi-mega__col a:hover::after { transform: scaleX(1); }

/* Backdrop dims the page while a panel is open. */
.mi-megaveil {
  position: fixed;
  inset: 0;
  z-index: 880;
  background: rgba(11, 11, 11, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mi-med) var(--mi-ease), visibility var(--mi-med);
}
.mi-megaveil.is-on { opacity: 1; visibility: visible; }

@media (max-width: 1119px) { .mi-mega, .mi-megaveil { display: none !important; } }

/* ==========================================================================
   Heading effects - replacing the background field as the moment of motion.
   ========================================================================== */

/* A rule draws itself out from under each section heading. */
.mi-h2, .mi-pagehead__title, .mi-cta__title { position: relative; }

.mi-js .mi-h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.34em;
  width: clamp(56px, 12%, 120px);
  height: 2px;
  background: var(--mi-bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--mi-ease) 0.25s;
}
.mi-js .mi-h2.is-lit::after { transform: scaleX(1); }

/* Word masks get a touch of horizontal travel as well as vertical, so the
   line assembles rather than simply sliding. */
.mi-js .mi-split > i {
  transform: translate3d(-0.18em, 105%, 0);
  transition: transform 0.95s var(--mi-ease);
}
.mi-js .mi-split.is-in > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mi-js .mi-h2::after { transform: scaleX(1); transition: none; }
  .mi-js .mi-split > i { transform: none !important; transition: none !important; }
  .mi-nav__chev, .mi-mega__col a { transition: none; }
}