/**
 * MEGA MENU - Figma node 236:1088 (1440 x 541.5)
 * =========================================================================
 * A 1168-wide panel centred under the header: a 389 list on the left, a 779
 * content pane on the right. Every number below is off the node dump.
 *
 * Per-item colour arrives as --a3-mm-accent in an inline style, set from the
 * item's colour field. The soft chip behind the icon is mixed from it rather
 * than stored separately, so an editor picks one colour and both follow:
 * #155DFC at 7% on white is #EFF4FF, which is the design's #EFF6FF.
 * ========================================================================= */

.a3-mm {
  /* Anchored to .a3-site-header (sticky, so it is a positioned ancestor).
   * .a3-mm-parent is made static below precisely so this resolves there and
   * not against the 100px-wide <li>. An absolute box resolves against the
   * *padding* box, which for the header already spans the viewport - so 0/0 is
   * full-bleed, and 100vw (which overflows by the scrollbar) is not needed. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 120;

  padding: 17px 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #e4e4e7;
  /* Node 236:2640's root carries this; 236:1088's effects array is empty, but
   * both are named "...+Shadow" so the newer one is taken as the intent. */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Never taller than the space under the header. A panel with more items than
   * the design's six would otherwise run off the bottom of the window with no
   * way to reach the last of them. 81 is the header; 33 is this element's own
   * 17+16 padding; 24 leaves the panel clear of the viewport edge. */
  --a3-mm-max: calc(100vh - 81px - 33px - 24px);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.22, 0.85, 0.28, 1),
    visibility 0s linear 0.22s;
}

.a3-mm.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.22, 0.85, 0.28, 1),
    visibility 0s;
}

/* The <li> must not be the containing block, or the panel would be as wide as
 * the nav label. style.css:236 sets position:relative on every top-level item;
 * this undoes it for mega-menu parents only. */
.a3-site-header__menu > li.a3-mm-parent {
  position: static;
}

/* ---- the disclosure caret ----
 * style.css:256 hangs the caret off .menu-item-has-children, which WordPress
 * only adds when an item has real child menu items. Services happens to have
 * one, so it got a caret; Industries has none - its children are ours, off the
 * options page - so it looked like a plain link and read as "the mega menu is
 * missing". Same shape, same rotate-on-open, driven off .a3-mm-parent instead.
 *
 * It keys off aria-expanded rather than :hover so the caret is also right when
 * the panel was opened from the keyboard. */
.a3-site-header__menu > li.a3-mm-parent > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.15s ease;
}

.a3-site-header__menu > li.a3-mm-parent > a[aria-expanded="true"]::after {
  transform: rotate(225deg);
  margin-top: 2px;
}

/* The node centres 389.3 + 778.7 = 1168 in a 1440 frame, but the site's
 * container is 1280 with 24px padding - so a fixed 1168 sat 32px inside the
 * logo on one edge and the Contact Sales button on the other. This matches
 * .a3-site-header__inner instead, so the panel's edges line up with the header
 * content above it.
 *
 * The columns keep the design's exact ratio rather than its exact pixels:
 * 389.3fr / 778.7fr reproduces the node at 1168 and scales with the container
 * anywhere else. */
.a3-mm__inner {
  display: grid;
  grid-template-columns: minmax(0, 389.3fr) minmax(0, 778.7fr);
  /* `100% - 48px` is .a3-site-header's own side padding, which squeezes
   * .a3-site-header__inner once the viewport drops under 1328. Centring alone
   * cancels that padding above 1328 but not below it, which left the panel 24px
   * proud on each side at 1280 and narrower. */
  width: min(100% - 48px, var(--a3-container-max));
  margin-inline: auto;
  padding: 0 24px;

  /* One height for every panel, and for every item within a panel. Without
   * this the box grew and shrank as you moved down the list - HealthCare has
   * 12 links, Sports has none - and Services (508.5 in the node) and
   * Industries (588) disagreed with each other too. 588 is the taller of the
   * two design columns, so nothing has to scroll that did not already.
   * Both columns stretch to it, and each scrolls its own overflow. */
  height: min(588px, var(--a3-mm-max));
}

/* Shared 11/16.5 uppercase eyebrow - both columns use it. */
.a3-mm__eyebrow {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #71717a;
}

/* =========================================================================
 * LEFT COLUMN - node 236:1166 (389.3 x 508.5)
 * ========================================================================= */
/* ---- the scroll window ----
 * Node 236:2640 (Industries) holds 14 items in a container exactly 440 tall -
 * 6 rows of 70 with 4 between - and draws its own 4px scrollbar down the right
 * edge. Node 236:1088 (Services) has exactly 6 items and a column 508.5 tall,
 * which is that same 440 plus the padding and eyebrow. So the design's rule is
 * "six rows, then scroll", and the two nodes agree on it.
 *
 * The cap sits on the rows rather than the whole column so the eyebrow stays
 * put while they move, and so a six-item panel is not given a scrollbar for
 * the half-pixel of rounding.
 *
 * The panes scroll too, independently: a long link grid should not drag the
 * service list with it, and vice versa. */
.a3-mm__items {
  max-height: min(440px, var(--a3-mm-max));
  /* Room for the active row's notch. It sits at right:-12 and, once rotated
   * 45deg, reaches 15.7px past the row - which counted as horizontal overflow
   * and gave the list a horizontal scrollbar. Inside the padding box it is not
   * overflow at all, so the bar goes away without clipping the notch.
   * The node agrees: its rows are 350.3 in a 368.3 container, an 18px gutter.
   * overflow-x is a belt-and-braces guard that should now never fire. */
  padding-right: 18px;
  overflow-x: hidden;
}

.a3-mm__panes {
  max-height: var(--a3-mm-max);
}

.a3-mm__list,
.a3-mm__panes {
  min-height: 0; /* a grid item defaults to min-content; without this it refuses
                  * to shrink and the fixed row height leaks out the bottom */
}

.a3-mm__items,
.a3-mm__panes {
  overflow-y: auto;
  overscroll-behavior: contain; /* stop the page scrolling once a column ends */
  scrollbar-width: thin;
  scrollbar-color: #d8d8d8 transparent;
}

.a3-mm__items::-webkit-scrollbar,
.a3-mm__panes::-webkit-scrollbar {
  width: 4px; /* the node's Vector 14 is a 4px stroke */
}

.a3-mm__items::-webkit-scrollbar-thumb,
.a3-mm__panes::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d8d8d8;
}

.a3-mm__items::-webkit-scrollbar-track,
.a3-mm__panes::-webkit-scrollbar-track {
  background: transparent;
}

.a3-mm__list {
  display: flex;
  flex-direction: column;
  padding: 16px;
  /* #FAFAFA at 50% - the node's fill opacity, not a separate colour. */
  background: rgba(250, 250, 250, 0.5);
  border-right: 1px solid #f4f4f5;
  border-radius: 12px 0 0 12px;
}

.a3-mm__list .a3-mm__eyebrow {
  padding: 0 16px;
  margin-bottom: 20px; /* 52.5 - 16 - 16.5 */
}

/* 356.3 x 70, radius 12, 4px apart (74 pitch in the node). */
.a3-mm-item {
  /* Always positioned, not only when .is-active: the notch is absolute, and on
   * an unpositioned row it escaped all the way out to .a3-site-header and sat
   * at the right edge of the viewport, overflowing the page by 2px. */
  position: relative;
  display: flex;
  align-items: center;
  /* global.css centres the contents of every button; without this the chip and
   * label sit in the middle of the 356 row instead of against its left edge.
   * Same rule that pushed the article share icons to x=52. */
  justify-content: flex-start;
  gap: 16px; /* chip ends at 53, label starts at 69 */
  width: 100%;
  min-height: 0; /* global.css floors every button at 56 */
  height: 70px;
  /* 16 + the 1px transparent border = the node's 17 chip inset. The border is
   * always there so the row does not shift by a pixel when it goes active. */
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px !important; /* global.css forces 0 with !important */
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.a3-mm-item + .a3-mm-item {
  margin-top: 4px;
}

.a3-mm-item__chip {
  display: flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f4f4f5;
  color: #52525b;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.a3-mm-item__chip img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.a3-mm-item__label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #3f3f46;
  transition: color 0.18s ease;
}

/* The open row: white card, hairline, and the wide soft lift from the node's
 * effects (0 8 30 at 6% black). */
.a3-mm-item.is-active {
  background: #ffffff;
  border-color: #f4f4f5;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.a3-mm-item.is-active .a3-mm-item__chip {
  background: color-mix(in srgb, var(--a3-mm-accent) 7%, #ffffff);
  color: var(--a3-mm-accent);
}

.a3-mm-item.is-active .a3-mm-item__label {
  color: #18181b;
}

/* The 22.6 square rotated 45 that points at the open pane. Only two of its
 * borders are drawn in the node, which after rotation are the two facing out. */
.a3-mm-item__notch {
  position: absolute;
  top: 50%;
  right: -12px;
  width: 22.6px;
  height: 22.6px;
  background: #ffffff;
  border-top: 1px solid #f4f4f5;
  border-right: 1px solid #f4f4f5;
  border-radius: 0 4px 0 0;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.a3-mm-item.is-active .a3-mm-item__notch {
  opacity: 1;
}

/* Hover on a row that is not the open one - a hint, not the full card. */
.a3-mm-item:not(.is-active):hover,
.a3-mm-item:not(.is-active):focus-visible {
  background: rgba(255, 255, 255, 0.75);
}

.a3-mm-item:focus-visible {
  outline: 2px solid var(--a3-mm-accent);
  outline-offset: -2px;
}

/* =========================================================================
 * RIGHT PANE - node 236:1089 (778.7 x 508.5)
 * ========================================================================= */
.a3-mm__panes {
  position: relative;
  background: #ffffff;
  border-radius: 0 12px 12px 0;
}

/* The node lays the pane out as fixed gaps around flexible link columns:
 *   40 pad | col | 16 | col | 40 | rail 280 | 40
 * which sums to its 778.7. Our pane is wider, because the panel aligns to the
 * 1280 site container rather than the node's 1168 - so every gap here stays at
 * its design value and the *columns* absorb the difference. Sizing the columns
 * 181.3 instead dumped the whole 42.7 into the one gap before the rail, which
 * then measured 83 against the design's 40. */
.a3-mm-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  column-gap: 40px;
  padding: 40px 40px 0 0;
}

.a3-mm-pane[hidden] {
  display: none;
}

.a3-mm-pane__main {
  padding-left: 40px;
}

/* Two columns of 181.3 links, 16 apart, 24 between rows (56 pitch, 32 tall). */
.a3-mm-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  /* Each cell is a flex container so the anchor fills it. As a plain block the
   * whitespace either side of the <a> formed an anonymous line box and added a
   * line-height to every row - 20px, which made the 75 cards measure 95. */
  margin: 32px 0 0; /* 88.5 - 40 - 16.5 */
  padding: 0;
  list-style: none;
}

.a3-mm-links > li {
  display: flex;
}

.a3-mm-links__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  height: 32px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #3f3f46;
  text-decoration: none;
}

.a3-mm-links__chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.a3-mm-links__chip {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--a3-mm-accent) 7%, #ffffff);
  color: var(--a3-mm-accent);
  transition: background 0.18s ease;
}

.a3-mm-links__link:hover,
.a3-mm-links__link:focus-visible {
  color: var(--a3-mm-accent);
}

.a3-mm-links__link:hover .a3-mm-links__chip {
  background: color-mix(in srgb, var(--a3-mm-accent) 14%, #ffffff);
}

/* ---- footer band - node 236:1140 (378.7 x 81) ---- */
/* The node's 378.7 is exactly col + 16 + col, so the footer tracks the link
 * grid rather than carrying a width of its own. */
.a3-mm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #f4f4f5;
}

.a3-mm-foot__heading {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #18181b;
}

.a3-mm-foot__text {
  margin: 4px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #52525b;
}

/* 124.8 x 38 pill. global.css sets border-radius 0 !important on buttons; this
 * is an <a>, but service.css reaches links too, so it is restated anyway. */
.a3-mm-foot__btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 20px;
  border: 1px solid #e4e4e7;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #3f3f46;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 0.18s ease,
    color 0.18s ease;
}

/* The brand orange, not --a3-mm-accent. This is a site CTA, not part of the
 * item's colour scheme - on Solutions the accent is the blue of whichever link
 * owns the pane, which made "Contact Us" hover blue. */
.a3-mm-foot__btn:hover,
.a3-mm-foot__btn:focus-visible {
  border-color: var(--primary, #ff6900);
  color: var(--primary, #ff6900);
}

/* ---- promo rail - node 236:1145 (280 x 428.5) ---- */
/* 33 + the 1px border = the node's 34 from the rail frame's edge to its text.
 * The 40 on top is the node's inset before the illustration - the rail starts
 * level with the panel heading, but its image does not. */
.a3-mm-rail {
  padding-top: 40px;
  padding-left: 33px;
  border-left: 1px solid #f4f4f5;
}

.a3-mm-rail__media {
  width: 239px;
  height: 187px; /* the node's image rect, not the 179 container behind it */
  margin-left: 7px; /* the node insets the media 7 past the text edge */
  overflow: hidden;
  border-radius: 12px;
  /* No backing colour. With object-fit: contain the artwork does not fill the
   * box, so a #fafafa panel showed around it and read as a shadow or a card
   * edge. Transparent puts the illustration straight on the pane's white. */
  background: transparent;
}

/* contain, not cover: the design's artwork is a diagram, and cover cropped
 * 23px off it. A photo dropped in here shows whole rather than cropped, which
 * is the right default for a 239x179 promo tile. */
.a3-mm-rail__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.a3-mm-rail__heading {
  margin: 19px 0 0; /* 246 - 40 - 187 */
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #18181b;
}

.a3-mm-rail__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.a3-mm-rail__list li {
  display: flex;
  align-items: center;
  gap: 8px; /* tick 16 at x=34, text at x=58 */
  min-height: 19.5px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 19.5px;
  color: #3f3f46;
}

.a3-mm-rail__list li + li {
  margin-top: 12px; /* 31.5 pitch */
}

.a3-mm-rail__list svg {
  flex: 0 0 16px;
}

/* =========================================================================
 * BELOW THE MEGA-MENU BREAKPOINT
 *
 * The panel is desktop-only. The mobile drawer renders the same menu without
 * the walker, so there is nothing to hide there - but if a panel ever ends up
 * in the DOM below 992 it must not cover the page.
 * ========================================================================= */
@media (max-width: 991.98px) {
  .a3-mm {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a3-mm,
  .a3-mm-item,
  .a3-mm-item__chip,
  .a3-mm-item__label,
  .a3-mm-item__notch {
    transition: none;
  }
}

/* =========================================================================
 * MOBILE DRAWER
 *
 * The panel's content also appears in the drawer as a nested accordion, built
 * from the same fields. mobile-nav.css already collapses .sub-menu and styles
 * its links; these rules only give the inner <ul> the list reset it would have
 * had if it were the .sub-menu itself.
 * ========================================================================= */
@media (max-width: 991.98px) {
  .a3-site-header__mobile-menu .a3-mm-sub__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* No inner scroller. Capping the first level at 70vh put a second scrollbar
   * inside a drawer that already scrolls, so opening Services left you dragging
   * a small pane rather than the menu. The drawer scrolls; this just opens. */

  /* A little indent per level so the three tiers read as a hierarchy rather
   * than one flat list. */
  .a3-site-header__mobile-menu .a3-mm-sub__item > a {
    padding-left: 4px;
  }

  .a3-site-header__mobile-menu .a3-mm-sub__link > a {
    padding-left: 16px;
  }

  /* The open branch gets a rule down its left edge, so a long list of links
   * stays visibly attached to the service it belongs to. */
  .a3-site-header__mobile-menu .a3-mm-sub__item.is-expanded > .sub-menu {
    margin-left: 15px;
    border-left: 2px solid color-mix(in srgb, var(--a3-mm-accent) 22%, #ffffff);
  }

  /* The drawer's own rule leaves these as plain text links, so the icon and the
   * item's colour have to be put back here - they are the whole point of the
   * left column and were missing on phones. */
  .a3-site-header__mobile-menu .a3-mm-sub__item > a,
  .a3-site-header__mobile-menu .a3-mm-sub__link > a {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .a3-site-header__mobile-menu .a3-mm-sub__chip {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--a3-mm-accent) 8%, #ffffff);
    color: var(--a3-mm-accent);
  }

  .a3-site-header__mobile-menu .a3-mm-sub__chip img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  /* The nested links are one level in, so their chip is smaller and round -
   * the same relationship the desktop panel has between its 36 square chip and
   * its 32 round one. */
  .a3-site-header__mobile-menu .a3-mm-sub__chip--sm {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
  }

  /* The accent is set on the item, so the nested links inherit it and every
   * link under "AI Services" is purple, under "Data" pink, and so on. */
  .a3-site-header__mobile-menu .a3-mm-sub__item.is-expanded > a {
    color: var(--a3-mm-accent);
  }
}

/* =========================================================================
 * SINGLE-CARD PANEL - node 236:6710 (1440 x 480)
 *
 * Solutions has no service list: one 1168 x 447 card, a heading, a three-up
 * grid of 12 links, then the same footer and rail the split panels use. The
 * card's own border and radius are visible here because there is no left
 * column bleeding to its edge.
 *
 * Card maths, straight off the node:
 *   41 pad | main 766 | 40 | rail 280 | 41 pad  = 1168
 *   main   = 3 x 244.66 + 2 x 16                =  766
 * Same approach as the split panes: the gaps are the design's, the columns
 * absorb whatever width the site container adds.
 * ========================================================================= */
.a3-mm--single .a3-mm__inner {
  display: block;
  height: auto;
  min-height: 0;
}

/* The card carries both, and they do different jobs.
 *
 * Its "Overlay+Shadow" layer (236:6712) has two drop shadows, but both are
 * y:+1 with 2-3 of blur - they define the bottom edge and render essentially
 * nothing above the card. The top edge in the design comes from the parent
 * frame's 1px #F4F4F5 stroke, which at 96% grey reads as a hairline rather
 * than a border. Drop it and the card has no top edge at all. */
.a3-mm--single .a3-mm__panes {
  max-height: none;
  overflow: visible;
  border: 1px solid #f4f4f5;
  border-radius: 12px;
  box-shadow:
    0 1px 2px -1px rgba(0, 0, 0, 0.1),
    0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* 40 + the 1px hairline = the node's 41 from the card edge to its content. */
.a3-mm--single .a3-mm-pane {
  padding: 40px;
  column-gap: 40px;
}

.a3-mm--single .a3-mm-pane__main {
  padding-left: 0;
}

/* Column count comes from the panel's own setting, not from the content - an
 * earlier version read it off the data and one stray value reflowed a whole
 * grid. Solutions is three up (244 x 32, chip 32); About Us four up (180 x 28,
 * chip 28), both on a 16 gap. */
.a3-mm--single .a3-mm-links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px; /* 90 - 41 - 16.5 heading */
}

.a3-mm--cols-2 .a3-mm-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.a3-mm--cols-4 .a3-mm-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* The four-up row is tighter: 28 tall with a 28 chip, against the three-up's
 * 32/32. Label sits 40 from the row's left edge either way. */
.a3-mm--cols-4 .a3-mm-links__link {
  height: 28px;
  gap: 12px;
}

.a3-mm--cols-4 .a3-mm-links__chip {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}

/* The footer sits under the grid, not against the rail. */
.a3-mm--single .a3-mm-foot {
  margin-top: 34px; /* 338 - (258 + 32) + 6 */
  padding-top: 25px;
}

.a3-mm--single .a3-mm-rail {
  padding-left: 40px;
}

.a3-mm--single .a3-mm-rail__media {
  margin-left: 0;
}

@media (max-width: 1199.98px) {
  .a3-mm--single .a3-mm-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}