/* Agistix header. Ported from the approved menu prototype (menu.css).
   All classes are prefixed .agx- and every design token is scoped to the header,
   so nothing leaks into Kadence or Elementor pages. */

.agx-site-header {
  --blue-prim: #3474a8;
  --text-blue: #3376a9;
  --text-blue-dark: #19517c;

  --hero-bg: #040b18;
  --blue-light-background: #ebf1f6;
  --tint-soft: #f4f8fb;
  --light-background: #f4f4f5;
  --white: #ffffff;
  --dark-background: #404553;

  --text-primary: #34363e;
  --text-secondary: #686b73;
  /* #949496 is in the brand palette but is 2.9:1 on white — it fails WCAG AA
     for text this size, so every label here uses --text-secondary (4.9:1). */
  --text-light-gray: #949496;

  --border-light: #ebf1f6;
  --gray-border: #dbdbdb;

  --page-max: 1440px;
  --gutter: 120px;

  /* Corners. The live site is square (2px below 1440, 6px buttons above);
     round 1 used 8px plates. Round 2 meets in the middle: 4px on everything
     you can point at, 8px on the sheet that holds them. */
  --radius-sm: 4px;
  --radius: 4px;
  --radius-lg: 8px;

  /* The highlight. #e2ecf3 is the live nav's own hover plate. */
  --plate: #e2ecf3;

  /* Weight. "Don't bold menu options": the top level is the live site's 400,
     item titles 500 — the lightest weight that still separates a title from
     its grey description. Only the small uppercase labels go to 600. */
  --weight-nav: 400;
  --weight-item: 500;
  --weight-label: 600;

  /* Menu geometry */
  --header-h: 56px;
  --panel-max: 1360px;   /* = 1440 canvas − the header's 40px side padding */
  --panel-pad: 32px;
  --col-gap: 28px;
  --group-gap: 30px;
  --tabrail-w: 308px;
  --cell-pad-y: 10px;
  --cell-pad-x: 12px;
  /* Option B's scale with Option C's drawings: 20px, and a stroke that renders
     at ~1.33px — B's 18px/1.75 renders at 1.31px, C's 24px/1.5 at 1.5px. */
  --icon-size: 20px;
  --icon-stroke: 1.6;
  --icon-gap: 12px;
  --shadow-panel: 0 14px 30px -12px rgba(25, 81, 124, 0.2),
    0 2px 6px -2px rgba(4, 11, 24, 0.07);
  /* Local reset, scoped */
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
:where(.agx-site-header) *, :where(.agx-site-header) *::before, :where(.agx-site-header) *::after { box-sizing: border-box; }
:where(.agx-site-header) img, :where(.agx-site-header) svg { display: block; max-width: 100%; }
:where(.agx-site-header) a { color: inherit; text-decoration: none; }
:where(.agx-site-header) ul, :where(.agx-site-header) li { margin: 0; padding: 0; list-style: none; }
:where(.agx-site-header) button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; }
:where(.agx-site-header) h2, :where(.agx-site-header) h3, :where(.agx-site-header) h4, :where(.agx-site-header) p { margin: 0; }
.agx-site-header :focus-visible { outline: 2px solid var(--blue-prim); outline-offset: 2px; border-radius: var(--radius-sm); }

.agx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The sprite itself is never painted */
.agx-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* One declaration drives all 75 icons. The stroke language lives here, not on
   the <symbol> bodies, so the whole family can be re-weighted in one line.
   A shape carrying its own fill="currentColor" (a deliberate solid dot) still
   wins, because a presentation attribute on the element beats an inherited
   value. */
.agx-cell__icon,
.agx-tab__icon,
.agx-ico {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Arrows and chevrons are drawn at their own small size and keep round 1's
   weight, so they do not thin out with the icon family. */
.agx-ico {
  stroke-width: 1.5;
}

/* ==========================================================================
   Header shell — 1440 × 56, white, 40px side padding (live site geometry)
   ========================================================================== */
.agx-site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
}

.agx-site-header__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  min-height: var(--header-h);
  padding: 8px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.agx-site-header__logo {
  flex: none;
  display: flex;
  align-items: center;
}

.agx-site-header__logo img {
  width: 151px;
  height: 32px;
}

.agx-site-header__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.agx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.agx-btn svg {
  flex: none;
  transition: transform 0.18s ease;
}

.agx-btn:hover svg {
  transform: translateX(3px);
}

.agx-btn--primary {
  background: var(--blue-prim);
  color: var(--white);
}

.agx-btn--primary:hover {
  background: var(--text-blue-dark);
}

.agx-btn--quiet {
  background: var(--light-background);
  color: var(--text-primary);
}

.agx-btn--quiet:hover {
  background: #e6e6e8;
}

/* ==========================================================================
   Nav bar
   ========================================================================== */
.agx-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.agx-nav__item {
  position: static; /* mega panels are positioned against the header */
}

/* The two compact sections anchor their dropdown to themselves instead. */
.agx-nav__item--sm {
  position: relative;
}

.agx-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: var(--weight-nav);
  color: var(--text-primary);
  white-space: nowrap;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.agx-nav__trigger .agx-chev {
  flex: none;
  transition: transform 0.2s ease;
  color: var(--text-secondary);
}

.agx-nav__trigger:hover {
  color: var(--text-blue);
}

.agx-nav__item[data-open] .agx-nav__trigger {
  color: var(--text-blue-dark);
  background: var(--plate);
}

.agx-nav__item[data-open] .agx-nav__trigger .agx-chev {
  transform: rotate(180deg);
  color: var(--text-blue-dark);
}

/* Only the drawer shows these. */
.agx-nav__drawer-actions {
  display: none;
}

/* ==========================================================================
   Mega panel

   .agx-nav__panel is a transparent full-width positioning layer; .agx-panel__card is
   the white sheet, capped at the header's own content width so its edges line
   up with the logo on the left and the demo button on the right.

   The panel is in the DOM at all times and hidden with `visibility`, which
   removes it from the accessibility tree AND the tab order — so it is not a
   focus trap — while leaving every link in the server-rendered HTML for
   crawlers. Nothing here is injected by script.
   ========================================================================== */
.agx-nav__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1;
  padding-inline: 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  /* The layer is wider than the card it holds (40px gutters, and everything
     past 1360px on a wide screen). Letting the pointer fall through it means
     only the visible card keeps the panel open: move off either side of the
     card and it closes, exactly as it does below the card. */
  pointer-events: none;
}

/* 1360px = the header's own content width (1440 canvas − 2 × 40px padding).
   With 40px padding on the positioning layer and `auto` margins here, the
   card's edges land on the logo and the demo button at 1440 and stay aligned
   with them at any wider viewport, because the header box is centred too. */
.agx-panel__card {
  pointer-events: auto;
  max-width: var(--panel-max);
  margin-inline: auto;
  background: var(--white);
  /* A full border and four rounded corners, like the compact panels: over a
     dark hero the header's own 1px border does not show, so a card without a
     top edge reads as unfinished. */
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  /* A guard, not a layout: every panel is designed to fit without scrolling.
     This only engages on a short window, where clipping the last row would
     be worse. */
  max-height: calc(100vh - var(--header-h) - 16px);
  overflow: hidden auto;
}

.agx-nav__item[data-open] .agx-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Set for one frame while swapping between two open panels. */
.agx-site-header[data-instant] .agx-nav__panel {
  transition: none;
}

/* ---------- No-JS fallbacks ----------
   Scoped to :not([data-js]) so that once the script runs, `data-open` is the
   single source of truth and the visual state always agrees with
   aria-expanded. Without the script, hover opens a panel and focusing a
   trigger opens it too — the trigger is inside .agx-nav__item, so :focus-within
   fires, the panel becomes visible, and its links become focusable, which
   keeps every link keyboard-reachable with JavaScript off. */
.agx-site-header:not([data-js]) .agx-nav__item:hover .agx-nav__panel,
.agx-site-header:not([data-js]) .agx-nav__item:focus-within .agx-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.agx-panel__body {
  padding: var(--panel-pad);
  display: grid;
  gap: var(--col-gap);
}

.agx-panel__cols {
  display: grid;
  gap: var(--group-gap) var(--col-gap);
  align-items: start;
}

.agx-panel__cols[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agx-panel__cols[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.agx-group {
  min-width: 0;
}

/* Quiet, uppercase, not a link — the one thing all four reference navs agree
   on. Navigation to a hub page is a separate explicit link. No hairline:
   the uppercase label is enough to start a group. */
.agx-group__heading {
  margin: 0 0 10px;
  padding: 0 var(--cell-pad-x);
  font-size: 12px;
  font-weight: var(--weight-label);
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ==========================================================================
   Item cell — 20px icon, title, one short grey line.

   No tile, anywhere. A tinted square behind every icon is the "coloured icon"
   the team ruled out, and at 60 links it is ~1,900px² of furniture per panel.
   ========================================================================== */
.agx-cell {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr);
  gap: var(--icon-gap);
  align-items: start;
  padding: var(--cell-pad-y) var(--cell-pad-x);
  border-radius: var(--radius-sm);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.agx-cell:hover,
.agx-cell:focus-visible {
  background: var(--plate);
}

.agx-cell__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  margin-top: 1px; /* centred on the title's 22px first line */
  color: var(--text-blue);
  transition: color 0.12s ease;
}

.agx-cell:hover .agx-cell__icon,
.agx-cell:focus-visible .agx-cell__icon {
  color: var(--text-blue-dark);
}

.agx-cell__body {
  min-width: 0;
}

.agx-cell__title {
  display: block;
  font-size: 15px;
  font-weight: var(--weight-item);
  line-height: 22px;
  color: var(--text-primary);
}

.agx-cell:hover .agx-cell__title,
.agx-cell:focus-visible .agx-cell__title {
  color: var(--text-blue-dark);
}

.agx-cell__desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--text-secondary);
}

/* On the tinted hover ground the description needs a touch more contrast. */
.agx-cell:hover .agx-cell__desc,
.agx-cell:focus-visible .agx-cell__desc {
  color: #575a62;
}

/* The page you are on: a standing tint, a 3px blue bar on its leading edge
   and the hover blue on title and icon. The bar is what separates "you are
   here" from hover, which is a plate alone; no weight change, per the
   no-bold rule. */
.agx-cell[aria-current="page"] {
  background: var(--blue-light-background);
  box-shadow: inset 3px 0 0 var(--text-blue);
}

.agx-cell[aria-current="page"]:hover,
.agx-cell[aria-current="page"]:focus-visible {
  background: var(--plate);
}

.agx-cell[aria-current="page"] .agx-cell__title,
.agx-cell[aria-current="page"] .agx-cell__icon {
  color: var(--text-blue-dark);
}

.agx-cell[aria-current="page"] .agx-cell__desc {
  color: #575a62;
}

/* A flat list of cells laid out as a grid (the tab panes, Resources,
   Company), as opposed to .agx-panel__cols, which lays out headed groups. */
.agx-cellgrid {
  display: grid;
  gap: 2px var(--col-gap);
  align-content: start;
}

.agx-cellgrid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agx-cellgrid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ==========================================================================
   Tabs — the left-hand rail of Solutions and Platform (Option A's Products
   layout). Industries has no rail: it lists every industry at once, laid
   out like Resources.

   Solutions has one tab per group, and each pane lists its group in three
   columns, like Platform's, so the pane keeps its shape as the pointer moves
   down the rail. Platform has four: the platform pages
   first, then a rule and the three product lines under a "Products" label.

   The first tab is the default. Every pane's links are in the HTML at all
   times — the Atlassian pattern — and the panes share one grid cell, so the
   sheet is always as tall as its tallest pane and never changes height as
   the pointer moves down the rail.
   ========================================================================== */
.agx-panel__body--tabs {
  padding: 0;
  gap: 0;
  grid-template-columns: var(--tabrail-w) minmax(0, 1fr);
  align-items: stretch;
}

/* Solutions: 40px more rail, so its longest group names ("Compliance &
   Documentation", "Visibility & Collaboration") hold one line. The panes
   list their group in two columns, and a featured case study, Industries'
   card, sits to their right in a third grid column. */
.agx-panel__body--tabs-wide {
  --tabrail-w: 348px;
  grid-template-columns: var(--tabrail-w) minmax(0, 1fr) 330px;
}

.agx-panel__body--tabs-wide > .agx-feature {
  align-self: start;
  margin: 22px 28px 28px 0;
}

/* "Multimode Shipment Execution" needs a 276px cell, which two columns beside
   the rail and the card only give from 1400px. Below that the panes list
   their group in one column rather than wrap the names. */
@media (min-width: 1080px) and (max-width: 1399px) {
  .agx-panel__body--tabs-wide .agx-cellgrid[data-cols="2"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .agx-panel__body--tabs-wide .agx-cellgrid[data-cols="2"] > .agx-cellgrid__lead > .agx-cell {
    width: auto;
  }
}

.agx-tabrail {
  padding: 22px 14px;
  background: var(--tint-soft);
  border-right: 1px solid var(--border-light);
}

/* The label sits inside the list, after the platform tab, so the list's 4px
   gap is part of its spacing: 30px above, 8px below. With no rule between
   them, that space alone parts the platform from the product lines. */
.agx-tabrail__label {
  margin: 26px 0 4px;
  padding: 0 var(--cell-pad-x);
  font-size: 12px;
  font-weight: var(--weight-label);
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.agx-tabrail__list {
  display: grid;
  gap: 4px;
}

.agx-tab {
  position: relative;
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr) 12px;
  gap: var(--icon-gap);
  align-items: start;
  width: 100%;
  padding: 11px var(--cell-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* Hover previews the selected state — the same white card — rather than the
   #e2ecf3 plate the cells use. A tab selects itself after a 110ms rest, so a
   plate on hover would flash one colour and then snap to another; this way
   selection only adds the blue title and the chevron. */
.agx-tab:hover {
  background: var(--white);
  border-color: var(--gray-border);
}

/* Selected: the white of the pane it opens, so the tab reads as the front
   edge of that sheet. */
.agx-tab[aria-selected="true"] {
  background: var(--white);
  border-color: var(--gray-border);
}

.agx-tab__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  margin-top: 1px;
  color: var(--text-blue);
}

.agx-tab__body {
  min-width: 0;
}

.agx-tab__title {
  display: block;
  font-size: 15px;
  font-weight: var(--weight-item);
  line-height: 22px;
  color: var(--text-primary);
  transition: color 0.12s ease;
}

.agx-tab[aria-selected="true"] .agx-tab__title {
  color: var(--text-blue-dark);
}

.agx-tab__desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

.agx-tab__chev {
  align-self: center;
  color: var(--text-blue-dark);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.agx-tab[aria-selected="true"] .agx-tab__chev {
  opacity: 1;
  transform: none;
}

/* Slightly tighter gutters than the other panels, so three columns of
   40-character descriptions still hold one line beside the rail at 1440 with
   a classic (17px) scrollbar. */
.agx-tabpanes {
  --col-gap: 24px;
  min-width: 0;
  padding: 22px 28px 28px;
}

/* With the script running, every pane sits in the same cell and only the
   selected one is visible. `visibility` hides the others from the
   accessibility tree and the tab order, exactly like a closed panel. Without
   the script the panes simply stack, so nothing is unreachable. */
.agx-site-header[data-js] .agx-tabpanes {
  display: grid;
  align-content: start;
}

.agx-site-header[data-js] .agx-tabpane {
  grid-area: 1 / 1;
}

/* Solutions' overview takes a row of its own above the panes, so the panes
   share the row under it. */
.agx-site-header[data-js] .agx-tabpanes__lead ~ .agx-tabpane {
  grid-area: 2 / 1;
}

.agx-site-header[data-js] .agx-tabpane:not([data-active]) {
  visibility: hidden;
}

.agx-site-header:not([data-js]) .agx-tabrail {
  display: none;
}

.agx-site-header:not([data-js]) .agx-panel__body--tabs {
  grid-template-columns: minmax(0, 1fr);
}

.agx-site-header:not([data-js]) .agx-tabpane + .agx-tabpane {
  margin-top: 24px;
}

.agx-site-header:not([data-js]) .agx-panel__body--tabs-wide > .agx-feature {
  margin-left: 28px;
}

/* The pane's own heading, with the hairline every heading in the menu
   carries. Beside the rail it only repeated the selected tab's name, so there
   it is hidden and the pane starts with its first item; the tabpanel is
   still named by its tab. It shows wherever the rail does not — the phone
   drawer and the no-script stack — because there it is the only label a
   pane has. */
.agx-site-header[data-js] .agx-tabpane__head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.agx-tabpane__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 0 var(--cell-pad-x);
  font-size: 15px;
  font-weight: var(--weight-item);
  line-height: 22px;
}

.agx-tabpane__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-border);
}

/* The family's overview page, as the pane's first item. As a heading link it
   went unnoticed; as a cell it sits where the eye starts, with the family's
   own icon from the rail. It takes the first row alone, at least one column
   wide, so the nine pages under it still fill whole rows. The blue title and arrow
   mark it as the hub; no standing tint, which is reserved for the current
   page. A hairline under the row separates the family from its pages. */
.agx-cellgrid__lead {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

/* At least one column wide, and wider when a longer description needs it:
   the rest of the row is empty, so the line stays on one line. */
.agx-cellgrid[data-cols="3"] > .agx-cellgrid__lead > .agx-cell {
  width: max-content;
  min-width: calc((100% - 2 * var(--col-gap)) / 3);
  max-width: 100%;
}

.agx-cellgrid[data-cols="2"] > .agx-cellgrid__lead > .agx-cell {
  width: max-content;
  min-width: calc((100% - var(--col-gap)) / 2);
  max-width: 100%;
}

/* Solutions' overview is a list of its own, so the row gap a pane's first
   row would have had below the hairline is made up here. */
.agx-tabpanes__lead {
  margin-bottom: 2px;
}

.agx-cell--overview .agx-cell__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-blue-dark);
}

.agx-cell--overview .agx-cell__title svg {
  flex: none;
  transition: transform 0.14s ease;
}

.agx-cell--overview:hover .agx-cell__title svg,
.agx-cell--overview:focus-visible .agx-cell__title svg {
  transform: translateX(3px);
}

/* The platform pane keeps round 1's three groups under its overview. The
   overview sits in a list of its own there, so the separator's space below
   comes from this margin instead. */
.agx-tabpane .agx-panel__cols {
  margin-top: 16px;
}

.agx-tabpane .agx-cellgrid:has(+ .agx-panel__cols) .agx-cellgrid__lead {
  margin-bottom: 0;
}

/* ==========================================================================
   Text links — one treatment for every "go to the hub / talk to us" link
   ========================================================================== */
.agx-strip__link,
.agx-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: var(--weight-item);
  color: var(--text-blue);
  white-space: nowrap;
}

.agx-strip__link:hover {
  color: var(--text-blue-dark);
}

.agx-strip__link svg,
.agx-feature__link svg {
  flex: none;
  transition: transform 0.14s ease;
}

.agx-strip__link:hover svg,
.agx-feature:hover .agx-feature__link svg {
  transform: translateX(3px);
}

/* ==========================================================================
   Featured card — Resources, Company and Industries. Option B put a case
   study in every panel; here three panels get one featured piece each,
   beside their list of links: a case study in Resources and Industries, the
   President's line in Company.
   ========================================================================== */
.agx-feature {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--tint-soft);
  border: 1px solid var(--border-light);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.agx-feature:hover {
  background: var(--plate);
  border-color: var(--plate);
}

/* The cover is a page-1 render, so it gets a page's edge and a whisper of
   lift rather than a rounded photo treatment. */
.agx-feature__img {
  width: 96px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(4, 11, 24, 0.08), 0 4px 10px -4px rgba(4, 11, 24, 0.3);
}

/* Company's sketch portrait is a drawing, not a page: a white mount with a
   hairline, and no lift. */
.agx-feature__img--portrait {
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--gray-border);
}

.agx-feature__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.agx-feature__eyebrow {
  font-size: 11px;
  font-weight: var(--weight-label);
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.agx-feature__title {
  font-size: 15px;
  font-weight: var(--weight-item);
  line-height: 21px;
  color: var(--text-primary);
}

.agx-feature:hover .agx-feature__title {
  color: var(--text-blue-dark);
}

.agx-feature__desc {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

.agx-feature__link {
  margin-top: 4px;
  font-size: 13.5px;
}

/* ==========================================================================
   Footer strip — one piece of proof or news on the left (or nothing), and
   "Talk to an expert" on the right of every mega panel.
   ========================================================================== */
.agx-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 14px var(--panel-pad);
  background: var(--tint-soft);
  border-top: 1px solid var(--gray-border);
}

.agx-strip__end {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

/* A case study or a news item: a small uppercase tag, the headline, and the
   arrow every text link in the menu carries. */
.agx-strip__story {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.agx-strip__tag {
  flex: none;
  font-size: 11px;
  font-weight: var(--weight-label);
  line-height: 16px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.agx-strip__title {
  font-weight: var(--weight-item);
  transition: color 0.12s ease;
}

.agx-strip__story svg {
  flex: none;
  margin-left: -4px;
  color: var(--text-blue);
  transition: transform 0.14s ease;
}

.agx-strip__story:hover .agx-strip__title {
  color: var(--text-blue-dark);
}

.agx-strip__story:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   Compact panels (Resources, Company) — width follows the content, centred
   under their own trigger. Centring is the one anchoring that stays on
   screen at every desktop width: a 600px sheet hung from either edge of a
   trigger in the middle of the bar runs off one side or the other at 1080.
   ========================================================================== */
.agx-nav__panel--sm {
  left: 50%;
  right: auto;
  top: calc(100% + 8px);
  width: 660px;
  padding-inline: 0;
  transform: translate(-50%, -6px);
}

.agx-nav__item[data-open] .agx-nav__panel--sm,
.agx-site-header:not([data-js]) .agx-nav__item:hover .agx-nav__panel--sm,
.agx-site-header:not([data-js]) .agx-nav__item:focus-within .agx-nav__panel--sm {
  transform: translate(-50%, 0);
}

.agx-nav__panel--sm .agx-panel__card {
  max-width: none;
}

.agx-nav__panel--sm .agx-panel__body {
  padding: 12px;
}

.agx-panel__body--feature {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 12px;
  align-items: start;
}

/* Industries: the same list and featured card at the mega panels' width, with
   the panes' padding and gutters. Three columns hold "Semiconductor
   Manufacturing" on one line from 1380px; below that the list drops to two,
   as Solutions' panes do. */
.agx-panel__body--feature-wide {
  --col-gap: 24px;
  gap: var(--col-gap);
  padding: 22px 28px 28px;
}

@media (min-width: 1080px) and (max-width: 1379px) {
  .agx-panel__body--feature-wide .agx-cellgrid[data-cols="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Narrow desktop — 1080px to 1279px

   Descriptions are dropped in the panes, in Industries' list and on the
   tab rails here: the columns are too narrow for them to hold one line, and a
   wrapped one stops being scannable. The icon and the name still carry it.
   The compact panels keep theirs — they have room to spare at this width.
   ========================================================================== */
@media (min-width: 1080px) and (max-width: 1279px) {
  .agx-nav {
    gap: 0;
  }

  .agx-nav__trigger {
    padding-inline: 10px;
  }

  .agx-nav__panel .agx-panel__cols .agx-cell__desc,
  .agx-nav__panel .agx-tabpane .agx-cell__desc,
  .agx-nav__panel .agx-tabpanes__lead .agx-cell__desc,
  .agx-nav__panel .agx-panel__body--feature-wide .agx-cell__desc {
    display: none;
  }

  .agx-panel__cols .agx-cell,
  .agx-tabpane .agx-cell,
  .agx-tabpanes__lead .agx-cell,
  .agx-panel__body--feature-wide .agx-cell {
    align-items: center;
  }

  /* Platform's rail narrows. Solutions keeps 348px: with the descriptions
     gone, its panes (two columns at this width) still have room, and a
     narrower rail would wrap the group names. */
  :root {
    --tabrail-w: 240px;
  }

  .agx-tab__desc {
    display: none;
  }

  .agx-tab {
    align-items: center;
  }

  .agx-tabpanes {
    padding-inline: 24px;
  }
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */
.agx-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0; /* Kadence pads every <button> (.4em 1em), which squeezed the icon to ~9px */
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--light-background);
  color: var(--text-primary);
}

.agx-nav-toggle svg {
  flex: none;
}

.agx-nav-toggle .agx-close-ico {
  display: none;
}

.agx-site-header[data-drawer] .agx-nav-toggle .agx-close-ico {
  display: block;
}

.agx-site-header[data-drawer] .agx-nav-toggle .agx-open-ico {
  display: none;
}

@media (max-width: 1079px) {
  .agx-site-header__inner {
    padding: 8px 20px;
  }

  .agx-nav-toggle {
    display: inline-flex;
  }

  .agx-site-header__actions .agx-btn--quiet {
    display: none;
  }

  .agx-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 55;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 48px;
    background: var(--white);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .agx-site-header[data-drawer] .agx-nav {
    display: flex;
  }

  .agx-nav__item,
  .agx-nav__item--sm {
    position: static;
    border-bottom: 1px solid var(--border-light);
  }

  .agx-nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 16px 4px;
    font-size: 16px;
    border-radius: 0;
  }

  .agx-nav__item[data-open] .agx-nav__trigger {
    background: transparent;
  }

  /* Accordion. display:none keeps closed sections out of the tab order while
     the drawer is being scrolled past. */
  .agx-nav__panel,
  .agx-nav__panel--sm {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    padding-inline: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
  }

  .agx-nav__item[data-open] .agx-nav__panel,
  .agx-nav__item[data-open] .agx-nav__panel--sm {
    display: block;
    transform: none;
  }

  .agx-site-header:not([data-js]) .agx-nav__item:hover .agx-nav__panel {
    display: none;
  }

  .agx-site-header:not([data-js]) .agx-nav__item:focus-within .agx-nav__panel {
    display: block;
    transform: none;
  }

  .agx-panel__card,
  .agx-nav__panel--sm .agx-panel__card {
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .agx-panel__body,
  .agx-nav__panel--sm .agx-panel__body {
    padding: 0 0 16px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .agx-panel__cols[data-cols],
  .agx-cellgrid[data-cols] {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .agx-cellgrid[data-cols] {
    gap: 0;
  }

  .agx-cellgrid[data-cols] > .agx-cellgrid__lead > .agx-cell {
    width: auto;
  }

  .agx-cell {
    padding: 10px 4px;
  }

  /* Descriptions go first on a phone: once the list is one column and a thumb
     is doing the work, the icon plus the name is enough. */
  .agx-cell__desc {
    display: none;
  }

  /* The drawer has no room for a rail beside the panes, so the tabs step
     aside and every pane is shown in turn under its own heading — the same
     group-then-items reading as round 1's drawer. */
  .agx-tabrail {
    display: none;
  }

  .agx-site-header[data-js] .agx-tabpanes,
  .agx-tabpanes {
    display: block;
    padding: 0;
  }

  .agx-site-header[data-js] .agx-tabpane:not([data-active]) {
    visibility: visible;
  }

  .agx-tabpane + .agx-tabpane {
    margin-top: 20px;
  }

  .agx-site-header[data-js] .agx-tabpane__head,
  .agx-tabpane__head {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 10px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    padding-inline: 4px;
  }

  /* The heading's hairline sits just above the overview, so a second one
     under it would only stack rules in a list this compact. */
  .agx-cellgrid__lead {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* Solutions' overview comes before the first group's heading instead, so
     it needs room above that heading's hairline. */
  .agx-tabpanes__lead {
    margin-bottom: 12px;
  }

  .agx-tabpane .agx-panel__cols {
    margin-top: 12px;
  }

  .agx-feature {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    margin-top: 6px;
  }

  .agx-feature__img {
    width: 64px;
  }

  .agx-panel__body--tabs-wide > .agx-feature,
  .agx-site-header:not([data-js]) .agx-panel__body--tabs-wide > .agx-feature {
    margin: 6px 0 0;
  }

  .agx-strip {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 0 14px;
    background: transparent;
  }

  .agx-strip__end {
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* The tag goes above the headline, which wraps, and the arrow rides on
     the headline's last line. */
  .agx-strip__story {
    display: block;
  }

  .agx-strip__tag {
    display: block;
    margin-bottom: 4px;
  }

  .agx-strip__story svg {
    display: inline-block;
    margin-left: 6px;
    vertical-align: -1px;
  }

  /* Login is hidden from the bar below 1080, so it moves into the drawer. */
  .agx-nav__drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 24px;
  }

  .agx-nav__drawer-actions .agx-btn {
    justify-content: center;
  }
}

/* A phone: logo, demo button and menu button need ~400px at their desktop
   sizes, which overflows a 375px screen. */
@media (max-width: 479px) {
  .agx-site-header__inner {
    padding-inline: 16px;
    gap: 12px;
  }

  .agx-site-header__logo img {
    width: 130px;
    height: auto;
  }

  .agx-site-header__actions {
    gap: 8px;
  }

  .agx-site-header__actions .agx-btn--primary {
    padding-inline: 14px;
  }

  .agx-site-header__actions .agx-btn--primary svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .agx-nav__panel {
    transform: none;
  }

  .agx-nav__panel--sm {
    transform: translate(-50%, 0);
  }
}

/* ==========================================================================
   Site footer — the live footer's chrome (Platform Pages, Figma 5757:5189),
   regrouped to follow the menu: Platform · Solutions · Industries ·
   Resources + Company.

/* Logged-in admin bar: keep the sticky header and the mobile drawer below it. */
body.admin-bar .agx-site-header { top: 32px; }
@media (max-width: 1079px) {
  body.admin-bar .agx-nav { top: 88px; }
}
@media (max-width: 782px) {
  body.admin-bar .agx-site-header { top: 46px; }
  body.admin-bar .agx-nav { top: 102px; }
}

/* Plain top-level link (no panel): same look as a trigger. */
.agx-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: var(--weight-nav);
  color: var(--text-primary);
  white-space: nowrap;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.agx-nav__link:hover,
.agx-nav__link:focus-visible {
  color: var(--text-blue);
}
@media (max-width: 1079px) {
  .agx-nav__link {
    display: flex;
    width: 100%;
    padding: 16px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
  }
}

/* Host-theme hardening: Kadence colours a:hover / :focus / :visited. Keep ours. */
.agx-site-header a:is(:hover, :focus, :active, :visited):not(.agx-btn):not(.agx-nav__link):not(.agx-strip__link) {
  color: inherit;
}
.agx-site-header .agx-btn--primary:is(:hover, :focus, :active, :visited) {
  color: var(--white);
}
.agx-site-header .agx-btn--quiet:is(:hover, :focus, :active, :visited) {
  color: var(--text-primary);
}
.agx-site-header .agx-strip__link:is(:focus, :active, :visited) {
  color: var(--text-blue);
}
.agx-site-header .agx-strip__link:hover {
  color: var(--text-blue-dark);
}

/* Kadence styles every <button> on :hover / :focus / :active (drop shadow, hover background and
   colour). Neutralise that inside the header: point its variables at no-ops and drop the shadow. */
.agx-site-header {
  --global-palette-btn-bg-hover: transparent;
  --global-palette-btn-hover: currentColor;
}
.agx-site-header button:is(:hover, :focus, :active) {
  box-shadow: none;
}
.agx-site-header .agx-nav-toggle:is(:hover, :focus, :active) {
  background-color: var(--light-background);
}

/* Pointer users get no focus ring on the accordion / menu buttons (the script sets data-pointer on
   mouse, touch or pen input and clears it on the next key press); keyboard users keep it. */
.agx-site-header[data-pointer] :focus-visible {
  outline: none;
}