/* ==========================================================================
   RISHFOTECH — MEGA MENU
   --------------------------------------------------------------------------
   Loads after style.css and inherits its design language throughout:

     brand blue      #0200EE  (--rf-blue)          — links, active states
     brand navy      #110162  (--rf-navy)          — headings, dark panels
     accent blue     #1C1AF2  (--rf-blue-2)        — gradient end stop
     nav active      #302FA6                       — matches .rf-nav__link.is-active
     body copy       #444444                       — matches .rf-scard__text
     lavender soft   #F3EDFF  (--rf-lav-soft)      — hover fills
     card white      #FDFCFF                       — matches .rf-scard
     icon frame      #F9F9FB / 1px #D4D4FF         — matches .rf-scard__icon
     heading grad    linear-gradient(90deg,#110162 0%,#1C1AF2 100%)
     border grad     linear-gradient(90deg,#1C1AF2 0%,#110162 100%)

   Fonts: Poppins (--rf-font-body) for everything, matching the header nav and
   service cards. Manjari is reserved for the page's display headings and is
   not used here, since the mega menu sits inside the nav, not the page body.

   1.  Tokens
   2.  Nav trigger state
   3.  Backdrop
   4.  Mega panel shell
   5.  Left rail (category tabs)
   6.  Right pane (links)
   7.  Promo card
   8.  Industries grid
   9.  Mobile drill-down
   10. Responsive
   11. Reduced motion
   ========================================================================== */

/* ==========================================================================
   1. TOKENS  (derived from style.css, not new colours)
   ========================================================================== */
:root {
  --rf-mm-rail-w: 300px;
  --rf-mm-promo-w: 272px;
  --rf-mm-ease: cubic-bezier(.22, .61, .36, 1);

  /* Reuses the page's own values so a token change in style.css flows here. */
  --rf-mm-nav-active: #302FA6;
  --rf-mm-text: #444444;
  --rf-mm-card: #FDFCFF;
  --rf-mm-icon-bg: #F9F9FB;
  --rf-mm-icon-border: #D4D4FF;
  --rf-mm-heading-grad: linear-gradient(90deg, #110162 0%, #1C1AF2 100%);
  --rf-mm-border-grad: linear-gradient(90deg, #1C1AF2 0%, #110162 100%);
  --rf-mm-shadow: var(--rf-shadow-lift);
}

/* Shared gradient-text treatment, same as .rf-services__title */
.rf-mega .rf-mm-grad {
  background: var(--rf-mm-heading-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   2. NAV TRIGGER STATE
   ========================================================================== */
.rf-header .rf-nav__item--mega {
  position: static;
}

.rf-header .rf-nav__item--mega>.rf-nav__link {
  position: relative;
  cursor: pointer;
}

.rf-header .rf-nav__item--mega>.rf-nav__link::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--rf-mm-border-grad);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--rf-mm-ease);
}

/* Matches the page's own .rf-nav__link.is-active treatment exactly. */
.rf-header .rf-nav__item--mega.is-open>.rf-nav__link {
  color: var(--rf-mm-nav-active);
  font-weight: 600;
}

.rf-header .rf-nav__item--mega.is-open>.rf-nav__link::after {
  transform: scaleX(1);
}

.rf-header .rf-nav__item--mega.is-open>.rf-nav__link i {
  transform: rotate(180deg);
}

/* ==========================================================================
   3. BACKDROP
   ========================================================================== */
.rf-mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 880;
  background: var(--rf-veil-deep);
  /* #03010EC9, the page's own veil */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--rf-mm-ease), visibility .3s var(--rf-mm-ease);
}

.rf-mega-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Keeps the utility bar lit with the header while a panel is open. */
body.rf-mega-open .rf-topbar {
  position: relative;
  z-index: 901;
}

/* ==========================================================================
   4. MEGA PANEL SHELL
   ========================================================================== */
.rf-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 950;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  /* visibility is stepped, not eased: a transitioned visibility flips at the
     halfway mark, leaving the panel unfocusable for ~130ms and breaking
     keyboard entry. Instant on open, delayed on close. */
  transition: opacity .26s var(--rf-mm-ease),
    transform .26s var(--rf-mm-ease),
    visibility 0s linear .26s;
}

.rf-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .26s var(--rf-mm-ease),
    transform .26s var(--rf-mm-ease),
    visibility 0s linear 0s;
}

/* 2px gradient border via the same padding-box/border-box technique the page
   uses on .how-contact:hover and .founder-start-btn:hover. */
.rf-mega .rf-mega__inner {
  display: grid;
  grid-template-columns: var(--rf-mm-rail-w) minmax(0, 1fr) var(--rf-mm-promo-w);
  border: 2px solid transparent;
  border-radius: var(--rf-radius);
  /* 16px, page token */
  background: linear-gradient(#fff, #fff) padding-box,
    var(--rf-mm-border-grad) border-box;
  box-shadow: var(--rf-mm-shadow);
  overflow: hidden;
  max-height: calc(100vh - var(--rf-mm-top, 130px) - 24px);
}

/* The wrapper and its container span the full viewport so the card can be
   centred, but only the card itself should be clickable — otherwise the empty
   gutter beside it swallows clicks meant for the page underneath. */
.rf-mega.is-open {
  pointer-events: none;
}

.rf-mega>.container {
  padding-top: 10px;
  padding-bottom: 24px;
  pointer-events: none;
}

.rf-mega .rf-mega__inner {
  pointer-events: auto;
}

/* ==========================================================================
   5. LEFT RAIL — CATEGORY TABS
   ========================================================================== */
.rf-mega .rf-mega__rail {
  background: var(--rf-lav-soft);
  border-right: 1px solid var(--rf-mm-icon-border);
  padding: 16px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rf-mega .rf-mega__rail-title {
  font-family: var(--rf-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rf-muted);
  padding: 6px 14px 10px;
  margin: 0;
}

.rf-mega .rf-mega__cat {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--rf-radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background .22s var(--rf-mm-ease), box-shadow .22s var(--rf-mm-ease);
}

.rf-mega .rf-mega__cat:focus-visible {
  outline: 3px solid var(--rf-blue);
  outline-offset: -3px;
}

/* Icon frame mirrors .rf-services__scard-icon: #F9F9FB on a 1px #D4D4FF border */
.rf-mega .rf-mega__cat-ico {
  flex: 0 0 42px;
  width: 42px;
  height: 38px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rf-mm-icon-bg);
  border: 1px solid var(--rf-mm-icon-border);
  color: var(--rf-blue);
  font-size: 15px;
  transition: background .22s var(--rf-mm-ease), color .22s var(--rf-mm-ease),
    border-color .22s var(--rf-mm-ease);
}

.rf-mega .rf-mega__cat-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.rf-mega .rf-mega__cat-name {
  font-family: var(--rf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--rf-navy);
}

.rf-mega .rf-mega__cat-meta {
  font-family: var(--rf-font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--rf-muted);
  line-height: 1;
}

.rf-mega .rf-mega__cat-arrow {
  font-size: 11px;
  color: var(--rf-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .22s var(--rf-mm-ease), transform .22s var(--rf-mm-ease);
}

.rf-mega .rf-mega__cat:hover {
  background: #fff;
}

.rf-mega .rf-mega__cat.is-active {
  background: #fff;
  box-shadow: var(--rf-shadow-card);
}

.rf-mega .rf-mega__cat.is-active .rf-mega__cat-ico {
  background: var(--rf-blue);
  border-color: var(--rf-blue);
  color: #fff;
}

/* Active label picks up the page's gradient heading treatment. */
.rf-mega .rf-mega__cat.is-active .rf-mega__cat-name {
  font-weight: 600;
  background: var(--rf-mm-heading-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.rf-mega .rf-mega__cat.is-active .rf-mega__cat-arrow,
.rf-mega .rf-mega__cat.is-armed .rf-mega__cat-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--rf-blue);
}

/* ==========================================================================
   6. RIGHT PANE — LINKS
   ========================================================================== */
.rf-mega .rf-mega__panes {
  position: relative;
  padding: 24px 26px;
  overflow-y: auto;
}

.rf-mega .rf-mega__pane {
  display: none;
}

.rf-mega .rf-mega__pane.is-active {
  display: block;
  animation: rfMmFade .32s var(--rf-mm-ease) both;
}

@keyframes rfMmFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rf-mega .rf-mega__pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rf-line);
}

/* Same weight/family as .rf-scard__title, scaled for the panel. */
.rf-mega .rf-mega__pane-title {
  font-family: var(--rf-font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  margin: 0 0 6px;
  background: var(--rf-mm-heading-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.rf-mega .rf-mega__pane-desc {
  font-family: var(--rf-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--rf-mm-text);
  margin: 0;
  max-width: 52ch;
}

/* "View all" mirrors .rf-btn--navy: grad-4 fill, white text, pill radius. */
.rf-mega .rf-mega__all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: var(--rf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: var(--rf-grad-4);
  padding: 11px 22px;
  border-radius: 999px;
  transition: background .28s ease, gap .28s ease;
}

.rf-mega .rf-mega__all i {
  font-size: .85em;
  transition: transform .28s ease;
}

.rf-mega .rf-mega__all:hover {
  background: var(--rf-blue);
  color: #fff;
}

.rf-mega .rf-mega__all:hover i {
  transform: translateX(4px);
}

.rf-mega .rf-mega__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rf-mega .rf-mega__links--single {
  grid-template-columns: minmax(0, 1fr);
}

.rf-mega .rf-mega__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--rf-radius-sm);
  font-family: var(--rf-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--rf-mm-text);
  transition: background .2s var(--rf-mm-ease), color .2s var(--rf-mm-ease);
}

.rf-mega .rf-mega__links a i {
  font-size: 11px;
  color: var(--rf-blue);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s var(--rf-mm-ease), transform .2s var(--rf-mm-ease);
}

.rf-mega .rf-mega__links a:hover {
  background: var(--rf-lav-soft);
  color: var(--rf-blue);
}

.rf-mega .rf-mega__links a:hover i {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   7. PROMO CARD
   ========================================================================== */
.rf-mega .rf-mega__promo {
  background: var(--rf-grad-5);
  /* 180deg #110162 -> #1C1AF2, page token */
  color: #fff;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.rf-mega .rf-mega__promo::after {
  content: "";
  position: absolute;
  left: -30%;
  bottom: -58%;
  width: 160%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}

.rf-mega .rf-mega__promo>* {
  position: relative;
  z-index: 2;
}

.rf-mega .rf-mega__promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-family: var(--rf-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.rf-mega .rf-mega__promo-title {
  font-family: var(--rf-font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: #fff;
  margin: 0 0 10px;
}

.rf-mega .rf-mega__promo-text {
  font-family: var(--rf-font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 20px;
}

/* Mirrors .rf-btn--white: white fill, navy text, inverts to navy on hover. */
.rf-mega .rf-mega__promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: var(--rf-navy);
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--rf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: background .28s ease, color .28s ease, gap .28s ease;
}

.rf-mega .rf-mega__promo-btn i {
  font-size: .85em;
}

.rf-mega .rf-mega__promo-btn:hover {
  background: var(--rf-navy);
  color: #fff;
  /* gap: 14px; */
}

.rf-mega .rf-mega__promo-stats {
  display: flex;
  gap: 24px;
  margin: auto 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  list-style: none;
}

.rf-mega .rf-mega__promo-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rf-mega .rf-mega__promo-stats strong {
  font-family: var(--rf-font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: #fff;
}

.rf-mega .rf-mega__promo-stats span {
  font-family: var(--rf-font-body);
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   8. INDUSTRIES GRID
   ========================================================================== */
.rf-mega--grid .rf-mega__inner {
  grid-template-columns: minmax(0, 1fr) var(--rf-mm-promo-w);
}

.rf-mega .rf-mega__grid-wrap {
  padding: 24px 26px;
  overflow-y: auto;
}

.rf-mega .rf-mega__grid-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rf-line);
}

.rf-mega .rf-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Card mirrors .rf-scard: #FDFCFF fill, 10px radius, lift on hover. */
.rf-mega .rf-mega__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 14px;
  border-radius: var(--rf-radius-sm);
  background: var(--rf-mm-card);
  border: 1px solid transparent;
  transition: border-color .22s var(--rf-mm-ease), transform .22s var(--rf-mm-ease),
    box-shadow .22s var(--rf-mm-ease);
}

.rf-mega .rf-mega__card-ico {
  flex: 0 0 42px;
  width: 42px;
  height: 38px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rf-mm-icon-bg);
  border: 1px solid var(--rf-mm-icon-border);
  color: var(--rf-blue);
  font-size: 15px;
  transition: background .22s var(--rf-mm-ease), color .22s var(--rf-mm-ease),
    border-color .22s var(--rf-mm-ease);
}

.rf-mega .rf-mega__card-name {
  display: block;
  font-family: var(--rf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--rf-navy);
  margin-bottom: 2px;
}

.rf-mega .rf-mega__card-desc {
  display: block;
  font-family: var(--rf-font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--rf-mm-text);
}

.rf-mega .rf-mega__card:hover {
  border-color: var(--rf-mm-icon-border);
  transform: translateY(-3px);
  box-shadow: var(--rf-shadow-card);
}

.rf-mega .rf-mega__card:hover .rf-mega__card-ico {
  background: var(--rf-blue);
  border-color: var(--rf-blue);
  color: #fff;
}

.rf-mega .rf-mega__card:hover .rf-mega__card-name {
  background: var(--rf-mm-heading-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   9. MOBILE DRILL-DOWN
   ========================================================================== */
.rf-mobilemenu .rf-mm-drill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 15px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--rf-font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--rf-navy);
}

.rf-mobilemenu .rf-mm-drill i {
  font-size: 12px;
  color: var(--rf-blue);
}

.rf-mobilemenu .rf-mm-drill:hover {
  color: var(--rf-mm-nav-active);
  font-weight: 600;
}

/* Services and Industries are pages in their own right, so the drawer row is
   split: the label navigates, the chevron opens the sub-panel. Same pattern as
   the category rows one level down. */
.rf-mobilemenu .rf-mm-drill--split {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--rf-radius-sm);
}

.rf-mobilemenu .rf-mm-drill--split:hover {
  color: inherit;
  font-weight: 400;
}

.rf-mobilemenu .rf-mm-drill__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 15px 12px;
  border-radius: var(--rf-radius-sm) 0 0 var(--rf-radius-sm);
  font-family: var(--rf-font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--rf-navy);
  transition: background .2s var(--rf-mm-ease), color .2s var(--rf-mm-ease);
}

.rf-mobilemenu .rf-mm-drill__main:hover,
.rf-mobilemenu .rf-mm-drill__main:active {
  background: var(--rf-lav-soft);
  color: var(--rf-mm-nav-active);
}

.rf-mobilemenu .rf-mm-drill__more {
  flex: 0 0 52px;
  width: 52px;
  border: 0;
  cursor: pointer;
  background: var(--rf-lav);
  border-left: 1px solid var(--rf-mm-icon-border);
  border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
  color: var(--rf-blue);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--rf-mm-ease), color .2s var(--rf-mm-ease);
}

.rf-mobilemenu .rf-mm-drill__more:hover,
.rf-mobilemenu .rf-mm-drill__more:active {
  background: var(--rf-blue);
  color: #fff;
}

.rf-mobilemenu .rf-mm-drill__more:focus-visible {
  outline: 3px solid var(--rf-blue);
  outline-offset: -3px;
}

.rf-mm-stack {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.rf-mm-panel {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .36s var(--rf-mm-ease);
  pointer-events: auto;
  visibility: hidden;
}

.rf-mm-panel.is-open {
  transform: translateX(0);
  visibility: visible;
}

.rf-mm-stack.is-active {
  pointer-events: auto;
}

.rf-mm-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rf-mm-icon-border);
  background: var(--rf-lav-soft);
}

.rf-mm-panel__back,
.rf-mm-panel__close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--rf-navy);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--rf-shadow-card);
}

.rf-mm-panel__close {
  margin-left: auto;
  font-size: 15px;
}

.rf-mm-panel__back:hover,
.rf-mm-panel__close:hover {
  background: var(--rf-navy);
  color: #fff;
}

.rf-mm-panel__title {
  font-family: var(--rf-font-body);
  font-weight: 600;
  font-size: 19px;
  line-height: 26px;
  margin: 0;
  background: var(--rf-mm-heading-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.rf-mm-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 12px 18px;
  -webkit-overflow-scrolling: touch;
}

/* Matches .rf-btn--navy */
.rf-mm-panel__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 12px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--rf-grad-4);
  color: #fff;
  font-family: var(--rf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: background .28s ease;
}

.rf-mm-panel__all i {
  font-size: .85em;
}

.rf-mm-panel__all:hover {
  background: var(--rf-blue);
  color: #fff;
}

.rf-mm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--rf-radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--rf-mm-ease);
}

.rf-mm-row:hover,
.rf-mm-row:active {
  background: var(--rf-lav-soft);
}

.rf-mm-row__ico {
  flex: 0 0 42px;
  width: 42px;
  height: 38px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rf-mm-icon-bg);
  border: 1px solid var(--rf-mm-icon-border);
  color: var(--rf-blue);
  font-size: 14px;
}

.rf-mm-row__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.rf-mm-row__name {
  font-family: var(--rf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--rf-navy);
}

.rf-mm-row__meta {
  font-family: var(--rf-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--rf-muted);
}

.rf-mm-row__arrow {
  font-size: 12px;
  color: var(--rf-muted);
  flex: 0 0 auto;
}

.rf-mm-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--rf-radius-sm);
  font-family: var(--rf-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--rf-mm-text);
}

.rf-mm-link i {
  font-size: 11px;
  color: var(--rf-blue);
  opacity: .5;
}

.rf-mm-link:hover,
.rf-mm-link:active {
  background: var(--rf-lav-soft);
  color: var(--rf-blue);
}

.rf-mm-panel__promo {
  flex: 0 0 auto;
  margin: 6px 12px 14px;
  padding: 18px;
  border-radius: var(--rf-radius);
  background: var(--rf-grad-5);
  color: #fff;
}

.rf-mm-panel__promo p {
  font-family: var(--rf-font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  color: rgba(255, 255, 255, .84);
  margin: 0 0 14px;
}

.rf-mm-panel__promo a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: var(--rf-navy);
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--rf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: background .28s ease, color .28s ease;
}

.rf-mm-panel__promo a i {
  font-size: .85em;
}

.rf-mm-panel__promo a:hover {
  background: var(--rf-navy);
  color: #fff;
}

/* --- Split row: label navigates, chevron drills in --- */
.rf-mobilemenu .rf-mm-row--split {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  margin-bottom: 6px;
  border-radius: var(--rf-radius-sm);
}

.rf-mobilemenu .rf-mm-row--split:last-child {
  margin-bottom: 0;
}

.rf-mobilemenu .rf-mm-row--split:hover {
  background: transparent;
}

.rf-mobilemenu .rf-mm-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 8px 12px 14px;
  border-radius: var(--rf-radius-sm) 0 0 var(--rf-radius-sm);
  transition: background .2s var(--rf-mm-ease);
}

.rf-mobilemenu .rf-mm-row__main:hover,
.rf-mobilemenu .rf-mm-row__main:active {
  background: var(--rf-lav-soft);
}

.rf-mobilemenu .rf-mm-row__more {
  flex: 0 0 52px;
  width: 52px;
  border: 0;
  cursor: pointer;
  background: var(--rf-lav);
  border-left: 1px solid var(--rf-mm-icon-border);
  border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
  color: var(--rf-blue);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--rf-mm-ease), color .2s var(--rf-mm-ease);
}

.rf-mobilemenu .rf-mm-row__more:hover,
.rf-mobilemenu .rf-mm-row__more:active {
  background: var(--rf-blue);
  color: #fff;
}

.rf-mobilemenu .rf-mm-row__more:focus-visible {
  outline: 3px solid var(--rf-blue);
  outline-offset: -3px;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width:1399.98px) {
  :root {
    --rf-mm-rail-w: 272px;
    --rf-mm-promo-w: 244px;
  }

  .rf-mega .rf-mega__panes {
    padding: 20px;
  }

  .rf-mega .rf-mega__links a {
    font-size: 15px;
    padding: 9px 10px;
  }

  .rf-mega .rf-mega__pane-title {
    font-size: 22px;
    line-height: 28px;
  }
}

@media (max-width:1199.98px) {
  :root {
    --rf-mm-rail-w: 242px;
    --rf-mm-promo-w: 0px;
  }

  /* Promo is the first thing to go when width gets tight. */
  .rf-mega .rf-mega__inner {
    grid-template-columns: var(--rf-mm-rail-w) minmax(0, 1fr);
  }

  .rf-mega--grid .rf-mega__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf-mega .rf-mega__promo {
    display: none;
  }

  .rf-mega .rf-mega__cat-meta {
    display: none;
  }

  .rf-mega .rf-mega__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rf-mega .rf-mega__all {
    font-size: 15px;
    padding: 10px 18px;
  }

  /* Seven nav items plus the call pill outgrow the row just above the mobile
     breakpoint, so the links tighten and the pill drops its number rather than
     the whole nav wrapping onto a second line. */
  .rf-header .rf-header__inner {
    gap: 10px;
  }

  .rf-header .rf-header__logo img {
    width: 132px;
  }

  .rf-header .rf-nav__list {
    gap: 0;
    flex-wrap: nowrap;
  }

  .rf-header .rf-nav__item {
    white-space: nowrap;
  }

  .rf-header .rf-nav__link {
    padding: 12px 8px;
    font-size: 15px;
    gap: 6px;
  }

  .rf-header .rf-nav__item--mega>.rf-nav__link::after {
    left: 8px;
    right: 8px;
  }

  .rf-header .rf-callpill {
    padding: 0;
    gap: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .rf-header .rf-callpill__num {
    display: none;
  }

  .rf-header .rf-callpill__icon {
    margin: 0;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: var(--rf-navy);
    border-color: var(--rf-navy);
  }

  .rf-header .rf-callpill__icon img {
    filter: brightness(0) invert(1);
  }
}

/* The desktop mega menu is replaced wholesale by the drawer drill-down. */
@media (max-width:991.98px) {

  .rf-mega,
  .rf-mega-backdrop {
    display: none !important;
  }
}

@media (min-width:992px) {
  .rf-mm-stack {
    display: none !important;
  }
}

@media (max-width:400px) {
  .rf-mm-panel__head {
    padding: 14px;
  }

  .rf-mm-panel__title {
    font-size: 17px;
    line-height: 24px;
  }

  .rf-mm-row {
    padding: 11px 12px;
    gap: 10px;
  }

  .rf-mm-row__name {
    font-size: 15px;
  }
}

/* ==========================================================================
   11. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce) {

  .rf-mega,
  .rf-mega-backdrop,
  .rf-mm-panel,
  .rf-mega .rf-mega__cat,
  .rf-mega .rf-mega__card,
  .rf-mega .rf-mega__links a,
  .rf-mega .rf-mega__links a i {
    transition-duration: .01ms !important;
  }

  .rf-mega .rf-mega__pane.is-active {
    animation: none !important;
  }
}