/* ==========================================================================
   CF26 mega menu promo cards (Services + Resources) - dark gradient skin
   Same navy -> teal gradient as .cf26-aipanel / .cf26-sidecta, with two slow
   counter-rotating rings behind the copy. Loaded site-wide from snippet 1351.
   Mobile drawer hides these cards (cf26-mnav-2026.css), so desktop only.
   ========================================================================== */
.cf26-nav .cf26-mega__promo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(127, 240, 238, .16);
  background:
    radial-gradient(320px 220px at 92% 0%, rgba(13, 179, 178, .40), rgba(13, 179, 178, 0) 70%),
    radial-gradient(260px 200px at 0% 100%, rgba(13, 179, 178, .22), rgba(13, 179, 178, 0) 70%),
    linear-gradient(150deg, #182738 0%, #1d3550 60%, #134552 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 30px 60px -34px rgba(24, 39, 56, .75);
  color: #fff;
}
.cf26-nav .cf26-mega__promo::before,
.cf26-nav .cf26-mega__promo::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.cf26-nav .cf26-mega__promo::before {
  width: 260px;
  height: 260px;
  right: -90px;
  top: -90px;
  border: 1.5px dashed rgba(127, 240, 238, .45);
  animation: cf26-mega-spin 36s linear infinite;
}
.cf26-nav .cf26-mega__promo::after {
  width: 230px;
  height: 230px;
  left: -80px;
  bottom: -80px;
  border: 2px dotted rgba(127, 240, 238, .55);
  animation: cf26-mega-spin 22s linear infinite reverse;
}
.cf26-nav .cf26-mega__promo h4 { color: #fff; }
.cf26-nav .cf26-mega__promo p { color: rgba(255, 255, 255, .78); }

@keyframes cf26-mega-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cf26-nav .cf26-mega__promo::before,
  .cf26-nav .cf26-mega__promo::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Our Work mega (desktop). Snippet 1351 JS adds .cf26-mega__inner--work, the
   head row (label + "See all"), richer captions and the dark promo card.
   -------------------------------------------------------------------------- */
.cf26-mega__cap small { display: block; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--teal-dark, #0a8f8e); }
.cf26-mega__cap b { display: block; margin-top: 6px; font-weight: 500; }
.cf26-mega__cap em { display: flex !important; align-items: center; gap: 6px; font-style: normal; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-muted, #5b6776) !important; margin-top: 6px; }
.cf26-mega__cap em svg { width: 11px; height: 13px; flex: 0 0 auto; color: var(--teal, #0db3b2); }
.cf26-mega__workhead .cf26-link { display: none; }
@media (min-width: 1181px) {
  .cf26-nav .cf26-mega__inner--work { grid-template-columns: minmax(0, 1fr) 272px; gap: 32px; align-items: stretch; }
  .cf26-nav .cf26-mega__inner--work > .cf26-mega__foot { display: none; }
  .cf26-nav .cf26-mega__inner--work > .cf26-mega__promo { grid-column: 2; grid-row: 1; }
  .cf26-mega__workhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
  .cf26-mega__workhead .cf26-mega__label { margin: 0; }
  .cf26-mega__workhead .cf26-link { display: inline-flex; font-size: 16px; }
  .cf26-nav .cf26-mega__inner--work .cf26-mega__cases { gap: 16px; }
  .cf26-nav .cf26-mega__inner--work .cf26-mega__case {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--border, #e3e8ec); border-radius: 18px;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 14px 30px -22px rgba(24, 39, 56, .35);
  }
  .cf26-nav .cf26-mega__inner--work .cf26-mega__case:hover { border-color: rgba(13, 179, 178, .45); box-shadow: 0 24px 44px -22px rgba(24, 39, 56, .38); }
  .cf26-nav .cf26-mega__inner--work .cf26-mega__case span.cf26-mega__shot {
    position: relative; height: 158px; padding: 14px 14px 0;
    background:
      radial-gradient(180px 120px at 100% 0%, rgba(13, 179, 178, .28), rgba(13, 179, 178, 0) 70%),
      linear-gradient(160deg, #e3f6f6, #f1f6f8);
  }
  .cf26-nav .cf26-mega__inner--work .cf26-mega__shot img { border-radius: 10px 10px 0 0; box-shadow: 0 -6px 22px rgba(24, 39, 56, .14); }
  .cf26-nav .cf26-mega__inner--work .cf26-mega__case span.cf26-mega__cap { padding: 14px 16px 16px; font-size: 16.5px; line-height: 1.28; }
}

/* Case studies page (/case-studies/) cards: location line under the name */
.cf26-case__loc { display: flex; align-items: center; gap: 7px; margin: -4px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--text-muted, #5b6776); }
.cf26-case__loc svg { width: 12px; height: 14px; flex: 0 0 auto; color: var(--teal, #0db3b2); }