/* ==========================================================================
   AcmaCorp Section Components
   --------------------------------------------------------------------------
   Seven reusable section primitives built on the design-system tokens.
   Load order: after mobile-density.css.
   Spec: /docs/superpowers/specs/2026-09-06-homepage-redesign-design.md
   ========================================================================== */

:root {
  /* Aliases. The rhythm now lives in design-system.css as --ds-section-y so
     there is one source for it; these two names are kept because ~10 rules in
     this file reference them, and renaming those adds churn without changing
     a pixel. */
  --acma-section-y: var(--ds-section-y);
  --acma-section-y-tight: var(--ds-section-y-tight);
}

.acma-section {
  padding-block: var(--acma-section-y);
}
.acma-section--tight { padding-block: var(--acma-section-y-tight); }
.acma-section--surface { background: var(--ds-surface, #F1F4F9); }
.acma-section--ink {
  background: var(--ds-ink, #001427);
  color: var(--ds-text-inverse, #fff);
}
.acma-section--ink :is(h2, h3) { color: var(--ds-text-inverse, #fff); }

.acma-shell {
  width: 100%;
  max-width: var(--ds-container-max, 1616px);
  margin-inline: auto;
  padding-inline: var(--ds-container-pad, 24px);
}

.acma-eyebrow {
  display: block;
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-medium, 500);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  color: var(--ds-primary, #B65002);
  margin-bottom: var(--ds-space-3, 12px);
}
.acma-section--ink .acma-eyebrow { color: var(--ds-primary-vivid, #FF7F1F); }

.acma-section-title {
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-3);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
  margin: 0 0 var(--ds-space-3, 12px);
  text-wrap: balance;
}
.acma-section--ink .acma-section-title { color: var(--ds-text-inverse, #fff); }

.acma-section-lede {
  /* The fluid Lede ramp, not the fixed 20px step. `--ds-text-lg` pinned this
     to its desktop maximum at every width, so on a 390px screen the supporting
     line rendered larger than the 18px body under it -- and the site's other
     lede, .heading-supporter-text, was already on the ramp. One role, one
     value: 16px at 375, 20px at 1440. */
  font-size: var(--ds-lede-size, 1.25rem);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted, #5F5A54);
  max-width: calc(60 * var(--ds-ch));
  margin: 0;
}
.acma-section--ink .acma-section-lede { color: rgba(255, 255, 255, .78); }

.acma-section-head { margin-bottom: var(--ds-space-8, 48px); }

@media (prefers-reduced-motion: reduce) {
  .acma-section * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- 1. HERO */
.acma-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(30rem, 24rem + 18vw, 46rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--ds-ink, #001427);
}
.acma-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.acma-hero__media video,
.acma-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Contrast floor: >=0.72 alpha across the text column, clearing to the right
   so the imagery still reads. Measured technique, 12-14:1 on white text. */
.acma-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(0, 20, 39, .88) 0%,
    rgba(0, 20, 39, .80) 42%,
    rgba(0, 20, 39, .74) 62%,
    rgba(0, 20, 39, .30) 84%,
    rgba(0, 20, 39, 0) 100%
  );
}
.acma-hero__body {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  max-width: calc(62 * var(--ds-ch));
}
.acma-hero__title {
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-1);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-tight);
  letter-spacing: -.025em;
  color: var(--ds-text-inverse, #fff);
  margin: 0 0 var(--ds-space-5, 24px);
  text-wrap: balance;
}
.acma-hero__deck {
  font-size: var(--ds-text-lg, 1.25rem);
  line-height: var(--ds-leading-normal);
  color: rgba(255, 255, 255, .86);
  max-width: calc(54 * var(--ds-ch));
  margin: 0 0 var(--ds-space-7, 40px);
}
.acma-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-4, 16px);
}
.acma-hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--ds-space-5, 24px);
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  border-radius: var(--ds-radius-circle, 50%);
}
.acma-hero__cue:hover { color: #fff; }
.acma-hero__cue svg { width: 20px; height: 20px; }

@media (max-width: 767px) {
  .acma-hero { min-height: 32rem; }
  .acma-hero__actions > * { flex: 1 1 100%; }
}
@media (min-width: 1920px) { .acma-hero { max-height: 900px; } }

/* --------------------------------------------------------- 2. PROOF BAND */
/* The readout.

   Every other composed surface on this site is a bezelled plate. This band was
   the one that never got one: four numbers floating directly on the ink at
   --ds-display-2, which made them smaller than the section heading of the band
   underneath -- the page's only client-verified evidence, rendered as the
   quietest thing on the screen.

   It is a plate now. The bezel is the tray, the cells are the glass, and the
   dividers are the 1px grid gaps with the plate showing through. That last
   part matters: the rule between two cells is not a pseudo-element positioned
   into a gap, so it stays correct at two columns as well as four, and the 2x2
   phone layout gets its horizontal rule for free.

   Depth here is the bezel and the bezel-to-glass contrast, not a cast shadow.
   Every shadow in this system is navy-tinted, so --acma-lift on an ink ground
   would be invisible; reaching for a black one to compensate would break the
   rule that holds the elevation together everywhere else.

   The figures are --ds-display-stat, the ramp that finally reaches
   --ds-text-8xl -- see design-system.css. */
.acma-proof-band__plate {
  padding: 6px;
  background: var(--acma-tray-inverse, rgba(255, 255, 255, .06));
  border: 1px solid var(--acma-hairline-inverse, rgba(255, 255, 255, .14));
  border-radius: var(--acma-radius-shell, 26px);
}
.acma-proof-band__grid {
  display: grid;
  /* The component sets --acma-proof-cols from the number of figures it is
     actually drawing. content_5_listing is an ACF repeater, so a fifth row is
     one click away, and pinned at four columns that fifth cell sat alone in a
     second row with three empty tracks beside it. */
  grid-template-columns: repeat(var(--acma-proof-cols, 4), minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--acma-hairline-inverse, rgba(255, 255, 255, .14));
  border-radius: var(--acma-radius-core, 20px);
  overflow: hidden;
}
/* Figures anchor to the top of the cell and labels to the bottom, rather than
   the whole stack sitting at one end. A grid row is as tall as its tallest
   cell, and the labels are not all one line -- "Years of Expertise" wraps at
   two columns while "Deployments" does not, and the careers band carries a
   different set again. Packed to one end, the row's figures then sit at
   different heights, which is precisely the misalignment tabular numerals
   exist to prevent. Anchored at both ends they cannot drift, at any column
   count and any label length. */
.acma-proof-band__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ds-space-3, 12px);
  margin: 0;
  padding: var(--ds-space-7, 40px) var(--ds-space-4, 16px);
  text-align: center;
  background: var(--ds-ink, #001427);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.acma-proof-band__cell > .acma-proof-band__label { margin-top: auto; }
.acma-proof-band__cell::before { content: none; }
.acma-proof-band__figure {
  display: block;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-stat);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-none);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-primary-vivid, #FF7F1F);
  font-variant-numeric: tabular-nums;
}
.acma-proof-band__label {
  display: block;
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-medium, 500);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

/* The row survives to 768. A readout is read across -- the four figures are
   meant to be compared at a glance -- so the single row is worth keeping as
   long as the content fits, and measured at 768 it does: 168px cells, the
   widest figure 121px, labels wrapping to two lines without overflowing.
   Wrapped labels are safe here because the cell anchors its figure to the top
   and its label to the bottom.

   Below 768 it goes two up, and the grid gap draws the cross rule without a
   second set of selectors. That replaces the horizontal scroll-snap carousel
   the band used to become on phones, which put two of the four figures
   off-screen -- a strange thing to do to the page's evidence. */
@media (max-width: 1023px) {
  .acma-proof-band__cell { padding: var(--ds-space-6, 32px) var(--ds-space-3, 12px); }
}
@media (max-width: 767px) {
  .acma-proof-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd number of figures would leave the last one alone in a half-width
     cell. Let it take the whole row instead. */
  .acma-proof-band__cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  .acma-proof-band__plate { padding: 5px; }
  .acma-proof-band__cell {
    padding: var(--ds-space-5, 24px) var(--ds-space-3, 12px);
    gap: var(--ds-space-2, 8px);
  }
}

/* ---------------------------------------------------------- 4. CARD GRID */
.acma-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-5, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* One authoritative treatment for the offering card. Four patch layers had
   accumulated here -- a border/shadow reset, two competing mark-zone rules,
   and a "premium pass" that re-padded every child -- so the rendered card was
   the union of four different intentions. This is the whole design in one
   place; the layers below it are gone.

   Shape: an outer shell carrying the ground, hairline and elevation, and an
   inner core carrying the content at a concentric radius (26px shell minus
   the 6px inset = 20px core). Same construction as the capability cards, so
   the two rows on this page read as one system. */
.acma-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px;
  /* The shell's ground is relative to the section's. On white it is the same
     ink-tinted tray the capability cards use; on a pale --surface ground that
     tint disappears, so there it goes lighter than the section instead (see
     the override below). Either way the bezel reads and the card separates. */
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: box-shadow .5s var(--acma-ease, ease), transform .5s var(--acma-ease, ease);
}
.acma-card:hover,
.acma-card:focus-within {
  box-shadow: var(--acma-lift-hover);
  transform: translateY(-3px);
}

.acma-card__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core, 20px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6);
}

/* Mark zone. These are product wordmarks of four different proportions, not
   glyphs, so they are normalised on height -- the way a logo row always is --
   and left-aligned in a fixed band with a hairline under it, so all four
   titles start on the same line however wide the mark is. */
.acma-card__icon {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: 32px;
  max-width: 100%;
  padding: var(--ds-space-5, 24px) var(--ds-space-5, 24px) var(--ds-space-4, 16px);
  border-bottom: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
}
.acma-card__icon img {
  width: auto;
  height: 100%;
  max-width: 150px;
  object-fit: contain;
  object-position: left center;
}

.acma-card__title {
  margin: 0;
  padding: var(--ds-space-5, 24px) var(--ds-space-5, 24px) 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-6);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: -.01em;
  color: var(--ds-ink, #001427);
  text-wrap: balance;
  /* One title in the row wraps to two lines. Reserving both keeps every
     description starting on the same baseline across the row. */
  min-height: 2.6em;
}
.acma-card__title a {
  position: relative;
  color: inherit;
  text-decoration: none;
}
.acma-card__title a:hover,
.acma-card__title a:focus-visible { text-decoration: underline; }
/* Invisible hit-slop: the title link's line box is ~24px, under the 44px tap
   floor. A positioned pseudo-element grows the tappable area without adding
   padding that would shift the card's spacing. */
.acma-card__title a::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.acma-card__text {
  margin: 0;
  padding: var(--ds-space-3, 12px) var(--ds-space-5, 24px) var(--ds-space-5, 24px);
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-normal);
  text-wrap: pretty;
}

/* Footer: a control nested inside the card, with the arrow on its own round
   plate -- a button inside a button, so the action reads as a target rather
   than as text that happens to be orange. margin-top:auto keeps the footers
   on one line across the row whatever the copy length.

   The !importants are unavoidable: ui/button emits .ds-btn--ghost, whose pill
   radius and inline-flex would otherwise render this border-top as a short
   rounded segment floating behind the label. */
.acma-card__cta {
  position: relative;   /* containing block for the .ds-visually-hidden child */
  display: flex !important;
  width: 100%;
  box-sizing: border-box;
  margin-top: auto;
  padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px) var(--ds-space-3, 12px) var(--ds-space-5, 24px) !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3, 12px);
  border: 0;
  border-top: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08)) !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--ds-ink, #001427);
  font-size: var(--ds-text-xs, 0.875rem);
  font-weight: var(--ds-weight-semibold, 600);
  /* .ds-btn sets uppercase + wide tracking, which suits a pill button. This
     is a footer row inside a card, not a pill; caps here reads as shouting
     four times in one row. */
  text-transform: none;
  letter-spacing: 0;
  transition: background-color .3s var(--acma-ease, ease), color .3s var(--acma-ease, ease);
}
.acma-card__cta:hover,
.acma-card:hover .acma-card__cta { color: var(--ds-primary-hover, #974302); }

.ds-btn__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--ds-primary-soft, #FDF0E7);
  color: var(--ds-primary-hover, #974302);
  transition: background-color .3s var(--acma-ease, ease),
              color .3s var(--acma-ease, ease),
              transform .3s var(--acma-ease, ease);
}
.acma-card:hover .ds-btn__icon,
.ds-btn:hover .ds-btn__icon,
.ds-btn:focus-visible .ds-btn__icon {
  background: var(--ds-primary, #B65002);
  color: var(--ds-white, #fff);
  transform: translateX(3px);
}

@media (max-width: 1023px) { .acma-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .acma-card-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--ds-container-pad, 16px) * -1);
    padding-inline: var(--ds-container-pad, 16px);
    scroll-padding-inline: var(--ds-container-pad, 16px);
    scrollbar-width: none;
  }
  .acma-card-grid::-webkit-scrollbar { display: none; }
  .acma-card-grid > * { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; }
}
.acma-section--surface .acma-card { background: rgba(255, 255, 255, .55); }

@media (prefers-reduced-motion: reduce) {
  .acma-card,
  .ds-btn__icon { transition: none; }
  .acma-card:hover { transform: none; }
  .acma-card:hover .ds-btn__icon { transform: none; }
}

/* ---------------------------------------------------------- 5. LOGO WALL */
.acma-logo-wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--ds-space-4, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.acma-logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: var(--ds-space-4, 16px);
  background: var(--ds-white, #fff);
  border: 1px solid var(--ds-border, #DDE3EC);
  border-radius: var(--ds-radius-md, 8px);
}
.acma-logo-wall__item img {
  max-width: 116px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .68;
  transition: filter 180ms var(--ds-ease, ease), opacity 180ms var(--ds-ease, ease);
}
/* Raising the mark, not switching it on. A full grayscale-to-colour flip on
   nineteen logos turns the wall into a light show as the pointer crosses it. */
.acma-logo-wall__item:hover img { filter: grayscale(1); opacity: .95; }
@media (prefers-reduced-motion: reduce) { .acma-logo-wall__item img { transition: none; } }

/* Below 768px the auto-fill grid wraps 19 logos into ten rows — 1,024px of
   wall on a phone, larger than any other section but the feature rows. Same
   scroll-snap carousel the card grid uses, so there is one mobile pattern on
   this page rather than two. Sits in .acma-shell, so it bleeds by
   --ds-container-pad, not the legacy .wrapper's --ds-carousel-bleed. */
@media (max-width: 767px) {
  .acma-logo-wall__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--ds-container-pad, 16px) * -1);
    padding-inline: var(--ds-container-pad, 16px);
    scroll-padding-inline: var(--ds-container-pad, 16px);
    scrollbar-width: none;
  }
  .acma-logo-wall__grid::-webkit-scrollbar { display: none; }
  /* ~3.2 per screen, so the next logo peeks and reads as scrollable. */
  .acma-logo-wall__grid > * {
    flex: 0 0 30%;
    max-width: 30%;
    scroll-snap-align: start;
  }
}

/* ----------------------------------------------------------- 7. CTA BAND */
.acma-cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-6, 32px);
}
.acma-cta-band__copy { max-width: calc(52 * var(--ds-ch)); }
.acma-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-4, 16px); }
@media (max-width: 767px) {
  .acma-cta-band__inner { flex-direction: column; align-items: flex-start; }
  .acma-cta-band__actions > * { flex: 1 1 100%; }
}

/* --------------------------------------------------------- PRODUCT TABS */
.acma-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2, 8px);
  list-style: none;
  margin: 0 0 var(--ds-space-7, 40px);
  padding: var(--ds-space-1, 4px);
  background: var(--ds-surface, #F1F4F9);
  border-radius: var(--ds-radius-pill, 999px);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.acma-tabs__list::-webkit-scrollbar { display: none; }
.acma-tabs__tab {
  -webkit-appearance: none;   /* iOS Safari < 15.4 keeps the native button look */
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--ds-radius-pill, 999px);
  padding: var(--ds-space-3, 12px) var(--ds-space-5, 24px);
  min-height: 44px;
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-text-sm, 1rem);
  font-weight: var(--ds-weight-medium, 500);
  color: var(--ds-text-muted, #5F5A54);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 180ms var(--ds-ease, ease), color 180ms var(--ds-ease, ease);
}
.acma-tabs__tab[aria-selected="true"] {
  background: var(--ds-white, #fff);
  color: var(--ds-ink, #001427);
  box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(0, 20, 39, .08));
}
.acma-tabs__tab:focus-visible { outline: 2px solid var(--ds-secondary, #0450BD); outline-offset: 2px; }

/* The legacy chain (.tab-content-section .custom-tabs .tabs-header
   .tabs-header-inner li.tab-link) sets width:100% and its own
   padding/font-size at (0,5,1) specificity, so a bare .acma-tabs__tab loses
   the cascade and the pills stack full-width in a column. Repeat the
   verbatim declarations above at matching specificity so they actually
   apply; scoped to the .acma-tabs section only (see note below). */
.tab-content-section.acma-tabs .custom-tabs .tabs-header .tabs-header-inner li.acma-tabs__tab {
  width: auto;
  margin: 0;
  padding: var(--ds-space-3, 12px) var(--ds-space-5, 24px);
  font-size: var(--ds-text-sm, 1rem);
  line-height: normal;
}
/* The old underline + caret "active" indicator is redundant with the new
   selected-pill treatment (white fill + shadow); hide it so only one
   selection cue remains. */
.tab-content-section.acma-tabs .custom-tabs .tabs-header .tabs-header-inner li.tab-link.active::before,
.tab-content-section.acma-tabs .custom-tabs .tabs-header .tabs-header-inner li.tab-link.active::after {
  display: none;
}

/* The legacy .tab-content-section markup, JS (customTabs in scripts.min.js)
   and panel content are left untouched per the redesign brief — only the
   header nav is restyled above. These overrides just trim the inherited
   padding/gaps so the section's rhythm matches the rest of the redesigned
   page; they are scoped under the .acma-tabs class added to THIS section's
   <section> tag only, so page-solutions3/service1/service5/solutions1/
   global_location/front_page, which reuse the same .custom-tabs/
   .tab-drawer-heading/.tab-large-img selectors for their own tab widgets,
   are completely unaffected. */
/* On the rhythm like every other section. It used the tight band value and a
   32px phone override, which is why it was the one section on the homepage
   whose top edge did not line up with its neighbours' when scrolled past. */
.tab-content-section.acma-tabs { padding-block: var(--ds-section-y); }
@media (min-width: 1200px) {
  .tab-content-section.acma-tabs .tabs-items .tab-content {
    padding-block: var(--ds-space-6, 32px);
  }
  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-right .tab-large-img {
    min-height: 380px;
  }
}
@media (max-width: 1199px) {
  .tab-content-section.acma-tabs .tabs-items .tab-drawer-heading {
    padding: var(--ds-space-4, 16px) var(--ds-space-5, 24px);
    margin-bottom: var(--ds-space-1, 4px);
  }
}

/* Below 768px: compress each accordion panel. The photo half
   (.tab-content-right) is already display:none at this breakpoint via the
   legacy stylesheet (style.css ~L4205) - not something added here - so the
   remaining height is the accordion headers (one per product, all 5 stay
   visible so every tab is reachable) plus the open panel's logo, header,
   subheader, description and CTAs. None of that copy is touched below:
   every product keeps its title, header, subheader, description and both
   CTA links (content_4_link_text_1 / content_4_link_text_2) in full; only
   line-height, margins and the CTA layout change. Font sizes stay on
   design-system --ds-text-* tokens rather than arbitrary values.
   Selectors repeat the legacy chain's full specificity
   (.custom-tabs .tabs-items .tab-content .tab-content-container
   .tab-content-left ...) with the .tab-content-section.acma-tabs prefix
   added, exactly as the tab-pill override above already does, and stay
   scoped to THIS section's .acma-tabs class so page-solutions3/service1/
   service5/solutions1/global_location/front_page's own .custom-tabs
   widgets are unaffected (verified separately). */
@media (max-width: 767px) {

  .tab-content-section.acma-tabs .tabs-items .tab-drawer-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--ds-space-2, 8px) var(--ds-space-4, 16px);
    margin-bottom: var(--ds-space-1, 4px);
    font-size: var(--ds-display-6);
    line-height: var(--ds-leading-snug);
  }

  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .product-logo {
    margin-bottom: var(--ds-space-3, 12px);
  }
  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .product-logo img {
    max-width: 120px;
    max-height: 32px;
    width: auto;
    height: auto;
  }

  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left h4,
  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .tab-panel-title {
    font-size: var(--ds-text-lg, 1.25rem);
    line-height: var(--ds-leading-tight, 1.15);
    margin-bottom: var(--ds-space-1, 4px);
  }
  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left :is(h5, .tab-panel-lede) {
    font-size: var(--ds-text-xs, 0.875rem);
    line-height: var(--ds-leading-snug, 1.3);
    /* 4px put the supporting line inside the paragraph's own leading, so the
       two read as one block. Eight is still the compact value this section
       wants on a phone; it just separates them. */
    margin-bottom: var(--ds-space-2, 8px);
    font-weight: var(--ds-weight-medium, 500);
  }
  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .tab-content-descrption p {
    /* 14px/1.3 was set when this paragraph was the only copy in the panel and
       height was the scarce resource. The panel now has a heading and a
       subheading doing that work, so the body can be read at a body size. */
    font-size: var(--ds-text-sm, 1rem);
    line-height: var(--ds-leading-normal);
    margin-bottom: var(--ds-space-3, 12px);
  }

  /* Both CTAs side by side instead of stacked - the single biggest lever
     here, since it turns two ~42px stacked lines into one ~44px row. */
  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3, 12px);
  }
  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .cta-group .field_call_to_action {
    margin: 0;
    flex: 1 1 auto;
    display: block;
  }
  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .cta-group .field_call_to_action a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--ds-space-2, 8px) var(--ds-space-2, 8px);
    font-size: var(--ds-text-xs, 0.875rem);
    line-height: var(--ds-leading-tight);
    white-space: normal;
    text-align: center;
    border: 1px solid var(--ds-border-strong, #C3CCDA);
    border-radius: var(--ds-radius-md, 8px);
  }
  /* The decorative arrow/circle pseudo-elements were positioned for a
     left-aligned single-column stack; they'd overlap the centred text of
     a compact side-by-side button, so they're suppressed here only (the
     link text itself - the actual CTA copy - is unaffected). */
  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .cta-group .field_call_to_action a::before,
  .tab-content-section.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .cta-group .field_call_to_action a::after {
    display: none;
  }
}

/* ==========================================================================
   DESIGN PASS — composition fixes on top of the primitives
   The component layer was correct but nothing made compositional decisions
   with it: four cards sat in a three-column grid, rows repeated one identical
   rhythm at a cramped 12px gap, and bullet lines ran past 90 characters.
   ========================================================================== */

/* 4 cards in a 3-column grid left one orphaned beside two empty slots — a
   visible hole mid-page. Fill the row instead: 4-up on wide screens, 2x2 on
   tablet. Neither count strands a card. */
@media (min-width: 1200px) {
  .acma-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Two tracks, not three, through 768-1199. Three was tried and measured
   worse: this grid carries four cards, so three tracks leave an orphan on a
   second row and the homepage grew 76px. Four divides by two and by four --
   which is the whole reason the column count is pinned here rather than
   auto-filled. */
@media (min-width: 768px) and (max-width: 1199px) {
  .acma-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Rhythm. The 12px row gap and ~1rem section padding were squeezed to chase a
   height target; on desktop that put one row's CTA almost against the next
   row's eyebrow. Mobile is a carousel now, so the desktop stack can breathe. */
/* Measure. Bullets were running ~90 characters in the wide body column, well
   past a comfortable line. */
.acma-feature-list { max-width: calc(62 * var(--ds-ch)); }
.acma-section-lede { max-width: calc(60 * var(--ds-ch)); }

/* Vertical rhythm between sections.
   Padding was inconsistent (67 / 75 / 104px) and stacked at boundaries: the
   card section's 104px bottom met the tabs' 67px top for 171px of void — and
   because both sit on the same pale ground there is no visible edge there, so
   it read as a hole rather than a separation.
   One scale for every section, and where two neighbours share a background
   the boundary padding halves, since a change of ground is what a full gap is
   paying for. */
.acma-section--feature { padding-block: var(--acma-section-y); }
/* Re-assert after the line above: both are single-class selectors, so source
   order decides, and the tight proof band must keep its smaller rhythm. */
.acma-section--tight { padding-block: var(--acma-section-y-tight); }

@media (min-width: 768px) {
  .acma-section--surface + .acma-section--surface,
  .acma-section--surface + .tab-content-section,
  .tab-content-section + .acma-section--surface {
    padding-top: calc(var(--acma-section-y) * .5);
  }
  /* A <script> sits between the tabs section and the logo wall in the template,
     so the adjacent-sibling combinator never matches across that boundary.
     General-sibling does, and only the logo wall follows the tabs. */
  .tab-content-section:has(~ .acma-section--surface) {
    padding-bottom: calc(var(--acma-section-y) * .5);
  }
  .tab-content-section ~ .acma-section--surface {
    padding-top: calc(var(--acma-section-y) * .5);
  }
  .acma-section--surface:has(+ .acma-section--surface),
  .acma-section--surface:has(+ .tab-content-section),
  .tab-content-section:has(+ .acma-section--surface) {
    padding-bottom: calc(var(--acma-section-y) * .5);
  }
}

/* Stop single words dropping to their own line under section ledes. */
.acma-section-lede, .acma-card__text { text-wrap: pretty; }

/* The mobile accordion toggle is a real <button> inside its heading rather
   than a div carrying role="button" + tabindex. Native activation, no shim,
   nothing to keep in sync. Reset the UA button chrome so it renders exactly
   as the heading did. */
.tab-drawer-heading .tab-drawer-toggle {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
.tab-drawer-heading .tab-drawer-toggle:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}

/* Toggle button for a parent nav item that has a real destination: the link
   keeps navigating, this opens the submenu. Drawn as the same chevron the
   dead-link parents already show via their own ::after. */
@media (max-width: 1023px) {
  .menu-main-nav-container .acma-submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  /* The toggle button no longer draws its own ::after chevron: the injected
   .acma-chevron element covers every parent, and keeping both rendered two
   overlapping arrows on the one parent that has a real destination. */

  .menu-main-nav-container li.menu-item-has-children { position: relative; }
  .menu-main-nav-container li.active > .acma-submenu-toggle::after,
  .menu-main-nav-container li.active > a::after { transform: rotate(-135deg); }
  .menu-main-nav-container .acma-submenu-toggle:focus-visible,
  .menu-main-nav-container [role="button"]:focus-visible {
    outline: 2px solid var(--ds-primary-vivid, #FF7F1F);
    outline-offset: 2px;
  }
}

/* Nested (depth-2) groups inside an open mobile submenu were all expanded at
   once, making one tap produce an 1,845px wall of links. Collapse them by the
   same .active convention the top level already uses — the toggle script
   binds every menu-item-has-children, so they become individually openable.
   Specificity here has to clear the theme's mega-menu grid rule. */
@media (max-width: 1023px) {
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu li.menu-item-has-children > ul.sub-menu {
    display: none;
  }
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu li.menu-item-has-children.active > ul.sub-menu {
    display: block;
  }
}

/* The toggle only exists for the mobile drawer; the desktop mega-menu opens
   on hover and must not show a stray control. */
@media (min-width: 1024px) {
  .menu-main-nav-container .acma-submenu-toggle { display: none; }
}

/* --- Tablet and tap-target corrections ------------------------------------ */

/* `all: unset` on the accordion toggle stripped the padding it inherited as a
   heading, leaving a 313x21px control - under the 24px AA floor and well under
   44px for touch. The button, not its heading, must carry the row's padding so
   the whole row is the target. */
.tab-drawer-heading { padding: 0 !important; }
.tab-drawer-heading .tab-drawer-toggle {
  /* `all: unset` above also resets box-sizing to content-box, so width:100%
     plus this padding overflowed the row by 48px. */
  box-sizing: border-box;
  padding: var(--ds-space-4, 16px) var(--ds-space-5, 24px);
  min-height: 56px;
  display: flex;
  align-items: center;
}

/* --- the accordion rows read as rows ---------------------------------------
   Below 1200 the tab strip becomes this accordion, and only the open panel's
   heading carried any state: a 5px brick bar across its foot with an amber
   triangle hanging off it, borrowed from the desktop tab strip. The three
   closed headings had no rule, no divider and no chevron, so they rendered as
   three stray bold sentences with 60px of white between them -- nothing on the
   row said it could be opened. Measured on /cloud-migration/ at 390.

   They are rows now: a hairline each, the label left and a chevron right, and
   the chevron turns over when the row opens. That is the disclosure language
   the rest of the site already uses -- the person card, the footer columns,
   the FAQ -- so the accordion stops being the one that invented its own. */
@media (max-width: 1199px) {
  .custom-tabs .tabs-items .tab-drawer-heading {
    border-top: 1px solid var(--ds-border, #DDE3EC);
    margin-bottom: 0;
    text-align: left;
  }
  .acma-section--surface .custom-tabs .tabs-items .tab-drawer-heading,
  .tab-content-section.bg-active .custom-tabs .tabs-items .tab-drawer-heading {
    background-color: transparent;
  }
  /* The bar and the triangle are the tab strip's marker, not a disclosure's. */
  .custom-tabs .tabs-items .tab-drawer-heading.d-active::before,
  .custom-tabs .tabs-items .tab-drawer-heading.d-active::after { content: none; }
  .custom-tabs .tabs-items .tab-drawer-heading.d-active {
    color: var(--ds-ink, #001427);
  }

  .tab-drawer-heading .tab-drawer-toggle {
    justify-content: space-between;
    gap: var(--ds-space-4, 16px);
    text-align: left;
  }
  .tab-drawer-heading .tab-drawer-toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s var(--acma-ease, cubic-bezier(.32,.72,0,1));
    opacity: .55;
  }
  .tab-drawer-heading.d-active .tab-drawer-toggle::after {
    transform: translateY(2px) rotate(-135deg);
    opacity: 1;
    color: var(--ds-primary, #B65002);
  }
  /* The open panel is the row's body; a divider under the heading would cut
     the two apart. */
  .custom-tabs .tabs-items .tab-drawer-heading.d-active + .tab-content {
    padding-bottom: var(--ds-space-5, 24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tab-drawer-heading .tab-drawer-toggle::after { transition: none; }
}

/* ==========================================================================
   PREMIUM LAYER
   The primitives placed content correctly but nothing gave the page presence:
   flat grounds, sections half-empty, no depth, no rhythm between a section's
   frame and what it holds. This layer is the visual craft, not more plumbing.
   ========================================================================== */

/* --- 1. Grounds with depth ------------------------------------------------
   Flat navy reads as an empty div. A wide, very low-contrast radial lift from
   the upper-left gives the ink sections a light source and keeps them from
   looking like a colour swatch. Two stops only — banding is worse than flat. */
.acma-section--ink {
  position: relative;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255, 127, 31, .16) 0%, rgba(255, 127, 31, 0) 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(4, 80, 189, .18) 0%, rgba(4, 80, 189, 0) 60%),
    var(--ds-ink, #001427);
  isolation: isolate;
}

/* The pale surface sections get the faintest possible tint so the page reads
   as layered rather than as white / grey / white stripes. */
.acma-section--surface {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 40%),
    var(--ds-surface, #F1F4F9);
}

/* --- 2. Section heads with a real anchor ---------------------------------
   An eyebrow floating above a heading is the generic pattern. A short accent
   rule ties the two together and gives every section the same entry point.

   "Every section" was not true. There are two section-head implementations on
   this site: .acma-section-head, which layout/section and the tile rows use,
   and the older .section-heading, which content-cards, icon-cards,
   insights-row, listing-grid, story-slider and tab-panels still emit. Only the
   first carried the rule.

   Measured on a service page: eleven sections, and the entry point appeared on
   three of them. The other eight opened with a bare 40px heading -- the same
   size, the same weight, no anchor -- so a page that alternates its grounds
   the whole way down still read as one undifferentiated ladder. The device
   already existed; eight sections were simply mute.

   All three shapes are covered below: tab-panels and insights-row put the
   heading directly in .section-heading, content-cards nests it in a .wrapper.

   There is a third shape: layout/intro's .internal-banner-title, the heading
   of the two-column media band that opens the service, solution, industry,
   about, career and job-openings templates -- about 52 pages. It matched
   neither selector above, so the first real section of each of those pages
   opened without the anchor while every section under it had one.

   And a fourth: the form column on the four lead-form pages (contact, request
   a demo, career, media room) heads itself with a bare .acma-section-title
   that is not wrapped in .acma-section-head. Two of those four are the site's
   conversion endpoints, and on the contact page the office grid below the form
   carried the anchor while the form itself did not.

   And a fifth: layout/event-card's .heading-supporter, the band that closes
   the service, product, about, job-openings and our-work templates -- 75
   pages. Where the CMS fills the eyebrow the pill was the only thing marking
   the head; where it does not, as on /about-us/, the section opened on a bare
   40px heading while every other section on the page carried the anchor. The
   rule goes on the title and the eyebrow sits above it, which is the order
   layout/section already renders.

   Deliberately NOT extended to every bare .acma-section-title: the CTA band
   uses one too, and it is a band with an action in it rather than a section
   that opens. It stays without. */
.acma-section-head,
.internal-banner-content > .internal-banner-title,
.acma-formpage__form > .acma-section-title,
.event-card-section .heading-supporter > :is(h2, h3, h4):first-child { position: relative; }
.acma-section-head .acma-section-title::before,
.internal-banner-content > .internal-banner-title::before,
.acma-formpage__form > .acma-section-title::before,
.event-card-section .heading-supporter > :is(h2, h3, h4):first-child::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: var(--ds-space-4, 16px);
  border-radius: 2px;
  background: var(--ds-primary, #B65002);
}
/* The legacy heads sit on light grounds on every template that renders them;
   the ink variant below is scoped to .acma-section-head because that is the
   only one an ink band ever contains. */
.acma-section--ink .acma-section-head .acma-section-title::before {
  background: linear-gradient(90deg, var(--ds-primary-vivid, #FF7F1F), rgba(255, 127, 31, .25));
}
/* The rule belongs to section heads only, never to a card or row title. */
/* ---- section heads, tightened for the phone -------------------------------
   The accent rule, heading and supporting line measured 127-144px with 25-48px
   beneath, and a detail template carries eight to eleven of them: 1,150-1,580px
   of the page, 14-18%, spent arriving somewhere rather than reading it. The
   proportions are right on desktop and are untouched there. */
@media (max-width: 767px) {
  .acma-section-head { margin-bottom: var(--ds-space-6, 32px); }
  .acma-section-head .acma-section-title { margin-bottom: var(--ds-space-2, 8px); }
  .acma-section-head .acma-section-title::before,
  .internal-banner-content > .internal-banner-title::before,
  .acma-formpage__form > .acma-section-title::before,
  .event-card-section .heading-supporter > :is(h2, h3, h4):first-child::before {
    margin-bottom: var(--ds-space-3, 12px);
  }
}

/* The event card's title carried no bottom margin, so an 18px supporting line
   sat flush under a 40px heading -- the one head on the site where the space
   below the title was smaller than the leading inside it. Twelve, the same as
   .acma-section-title. */
.event-card-section .heading-supporter > :is(h2, h3, h4) {
  margin-bottom: var(--ds-space-3, 12px);
}

/* --- 3. Proof band: the ground ---------------------------------------------
   The ink band, with the amber wash falling from the top edge so the plate
   below sits in a light rather than on a flat field. The figures now carry
   that same amber, so the wash reads as the source of it.

   The figure and label colours, and the dividers between cells, are in the
   plate block above -- one place, for both the homepage's headed version and
   the 53 pages that render the plate on its own. */
.acma-proof-band {
  background:
    radial-gradient(100% 160% at 50% 0%, rgba(255, 127, 31, .12) 0%, rgba(255, 127, 31, 0) 60%),
    var(--ds-ink, #001427);
  color: var(--ds-text-inverse, #fff);
  padding-block: var(--ds-section-y-tight);
}
.acma-proof-band .acma-section-title { color: var(--ds-text-inverse, #fff); }
.acma-proof-band .acma-section-lede { color: rgba(255, 255, 255, .78); }

/* --- 4. CTA band: fill the frame ------------------------------------------
   326px of section holding ~120px of content, bottom-anchored, with the
   heading clipped by the sticky header on scroll. Centre it and let the
   padding be the breathing room rather than dead space. */
.acma-cta-band .acma-shell {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .acma-cta-band .acma-shell { grid-template-columns: minmax(0, 1.35fr) auto; }
}
.acma-cta-band .acma-section-title { margin-bottom: var(--ds-space-3, 12px); }
.acma-cta-band .acma-section-lede { margin-bottom: 0; }

/* ==========================================================================
   LEAD FORMS: THE LABEL GOES ABOVE THE FIELD, NOT ON ITS BORDER
   --------------------------------------------------------------------------
   Measured at 1440 on /contact-us/ and /request-a-demo/: 6 of 7 labels had a
   NEGATIVE gap to their input -- the 16px label sat directly on the 0.667px
   top border, and the focus ring at 3px offset drew straight through the
   word. DESIGN.md specifies "label above the field, always -- 4px gap".

   Two implementations were fighting:
     conversion.css  .form-control-wrap { display:flex; flex-direction:column }
                     .form-control-wrap > label { order:-1; margin-bottom:4px }
     style.css       form .form-control-wrap { display:block; position:relative }
                     + label { position:absolute; top:-20px }   <- floating-label leftover

   The legacy pair wins on specificity, not source order: `form .form-control-wrap`
   is (0,1,1) against conversion.css's (0,1,0), so the flex column never applied
   and `order: -1` was inert. The absolute label then hung 20px above a wrapper
   whose top edge IS the input's top edge, landing its baseline on the border.

   This restores the intended implementation at (0,2,1) rather than adding a
   third one. Scoped to the four lead-form pages so no other form shifts. */
.acma-formpage__form form .form-control-wrap {
  display: flex;
  flex-direction: column;
}
.acma-formpage__form form .form-control-wrap > label {
  position: static;
  top: auto;
  order: -1;
  margin-bottom: var(--ds-space-1, 4px);
}

/* ==========================================================================
   HEADER LOGO: THE LINK SHOULD BE AS WIDE AS THE MARK
   --------------------------------------------------------------------------
   `header .site-branding a img` is set to `width: 300px` inside an anchor that
   computes to 263px, so the mark hangs 38px past its own link on every page.
   It does not collide with anything -- the nav starts 199px further right --
   so nothing looks broken. What breaks is the hit area: the last 38px of the
   logo, the "orp" of acmacorp, does not go home when you click it.

   The cause is the same twelve-column calc() behind the 4K listing bug:
   `header .site-branding` is sized to "3 of 12 columns" (262.5px at 1440)
   while the mark inside it is 300px. The logo was never going to fit its own
   column, because the column was computed from grid arithmetic rather than
   from the thing it holds.

   A logo is not a grid cell. Sizing the brand column to its content fixes the
   hit area at full logo size; capping the image instead would have cost 37px
   of width and 9px of height to solve a problem nobody can see. There is
   236px of slack before the nav, so widening the column moves nothing. */
header .site-branding {
  width: max-content;
  max-width: 100%;
}
header .site-branding a { display: inline-block; }

/* ==========================================================================
   LISTINGS ABOVE 1200 — A GRID, NOT TWELVE-COLUMN ARITHMETIC
   --------------------------------------------------------------------------
   The insights index and every "related insights" row sized each item with a
   nested calc() spanning 4 of 12 columns:

     width: calc(4 * calc(calc(min(1616px, 100vw) - 64px) - 11 * 25px) / 12
                 + 3 * 25px)

   The `- 64px` is the container inset it assumes. The real container insets
   80px per side above 1600 (--ds-container-pad), so 160px. At a 3840 viewport
   the calc sized items for a 1552px container that is actually 1456px: three
   501px items plus two 25px gaps came to 1553px, overflowed, and the row broke
   to two -- with ~400px of the container left empty.

   It is wrong at every width over 1600, not just 4K, and 260 of these calcs
   exist in style.css. Repairing the arithmetic in each is not worth it when a
   grid needs none: three equal tracks, whatever the container turns out to be.

   Below 1200 the legacy rules already switch to grid themselves, so this only
   takes the range they got wrong.
   ========================================================================== */
/* Measured across twelve widths: the swipe carousels end at 1023px and this
   grid began at 1200px, so 1024-1199 -- iPad Pro landscape and the majority of
   laptops -- fell between them and got the narrow two-column fallback. On
   /insights/ that band ran 4,981px against 4,528px at 1280.

   1024 is where this site already declares itself desktop: it is the width the
   navigation switches from the drawer to the bar. The content grid now agrees
   with the navigation instead of trailing it by 176px. At 1024 the shell is
   960px wide, so three tracks are 304px each -- wider than the 300px minimum
   the card components are built to. */
@media (min-width: 1024px) {
  .articles-list-section .articles-listing-wrapper > ul,
  .related-insights-section .insights-listing-wrapper > ul,
  .related-insights-section .articles-listing-wrapper > ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
  /* The calc is on the li; neutralise it so the track decides the width. */
  .articles-list-section .articles-listing-wrapper > ul > li,
  .related-insights-section .insights-listing-wrapper > ul > li,
  .related-insights-section .articles-listing-wrapper > ul > li {
    width: auto;
    max-width: none;
  }
}

/* ==========================================================================
   THANK YOU
   The page after a conversion. A plate, centred, on the surface ground -- the
   same material as everything else, rather than a square white box on a
   full-bleed brick field. Narrow on purpose: it holds one sentence.
   ========================================================================== */
.thankyou-card {
  max-width: 34rem;
  margin-inline: auto;
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
}
.thankyou-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-space-4, 16px);
  padding: var(--ds-space-9, 64px) var(--ds-space-6, 32px);
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core, 20px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6);
}
.thankyou-card__mark { width: 76px; height: auto; }
.thankyou-card__title {
  margin: 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-2);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
}
.thankyou-card__body {
  margin: 0;
  max-width: var(--ds-measure, calc(45 * var(--ds-ch, 0.732em)));
  font-size: var(--ds-text-lg, 1.25rem);
  line-height: var(--ds-leading-normal, 1.6);
  color: var(--ds-text-muted, #5F5A54);
}
.thankyou-card .ds-btn { margin-top: var(--ds-space-3, 12px); }

@media (max-width: 479px) {
  .thankyou-card { padding: 5px; }
  .thankyou-card__inner { padding: var(--ds-space-8, 48px) var(--ds-space-5, 24px); }
}

/* ==========================================================================
   FOOTER POLISH
   The footer sat on near-black (#0b0b0b) while the CTA band directly above it
   is navy, so the page ended on a palette break. Its link columns used default
   disc bullets, the "More Links" control was mis-set, and on mobile the sticky
   CTA bar covered the copyright and legal links outright.
   ========================================================================== */

/* --- The nav columns, on the plate ----------------------------------------
   The footer was the last major surface with none of the system's material in
   it: no plate anywhere, and its three link columns separated by two ::before
   / ::after pseudo-element rules drawn straight onto the container -- an
   ad-hoc divider invented here and used nowhere else.

   The plate is the site's own answer to "these things belong together", so
   the columns get it: the 6px bezel, the concentric core (26 - 6 = 20), and
   the 1px gaps doing the dividing. The two pseudo-elements are retired.

   Desktop only. Below 1200 the columns become an accordion -- the headings
   are toggles and the lists collapse -- and a bezel drawn around a control
   that changes height is the wrong object. There the existing bottom border
   already does the separating. */
@media (min-width: 1200px) {
  .site-footer .footer-top .footer-links .footer-menu-1 {
    /* A grid rather than a flex row, so the columns can share a heading row.
       `grid-auto-flow: column` keeps the column count following the menu the
       client edits rather than a number written here. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 1px;
    padding: 6px;
    background: var(--acma-tray-inverse, rgba(255, 255, 255, .06));
    border: 1px solid var(--acma-hairline-inverse, rgba(255, 255, 255, .14));
    border-radius: var(--acma-radius-shell, 26px);
  }
  /* Each column takes the parent's two rows, so every heading sits in the same
     row track and every list starts on the same line -- without anybody having
     to reserve a second line for a label that may or may not wrap. */
  .site-footer .footer-top .footer-links .footer-menu-1 > .ft-links-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  .site-footer .footer-top .footer-links .footer-menu-1::before,
  .site-footer .footer-top .footer-links .footer-menu-1::after { content: none; }

  /* The column the plate sits in carries the other half of that retired
     divider: `border-left/right: 1px solid #40444b` (style.css ~L19798), the
     separator used before there was a plate. It is already switched off below
     1200, and above it the plate's own bezel has replaced it -- so what was
     left was two hairlines a pixel apart in two different colours (an opaque
     #40444b outside, the plate's rgba(255,255,255,.14) inside), the outer one
     running 35px past the plate's bottom edge because the column is taller
     than the plate inside it. */
  .site-footer .footer-top .footer-links.site-addresses {
    border-left: 0;
    border-right: 0;
  }

  .site-footer .footer-top .footer-links .footer-menu-1 > .ft-links-col {
    flex: 1 1 0;
    padding: var(--ds-space-6, 32px) var(--ds-space-4, 16px);
    background: var(--ds-ink, #001427);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  /* The cells are narrower than the open row was, so "USEFUL LINKS" wraps to
     two lines where the other two do not -- and the lists under them then
     started 34px apart. This reserved the second line, which is right between
     1200 and 1365 where the wrap actually happens and 34px of dead space per
     column from 1366 up, where measured none of the three wraps. The subgrid
     above equalises the row from the content, so the reservation is only the
     fallback for engines without it. */
  .site-footer .footer-top .footer-links .footer-menu-1 > .ft-links-col h2 {
    min-height: 68px;
    min-height: 2lh;
  }
  @supports (grid-template-rows: subgrid) {
    .site-footer .footer-top .footer-links .footer-menu-1 > .ft-links-col h2 {
      min-height: 0;
    }
  }
  /* Concentric by construction, and the only two corners that need it. */
  .site-footer .footer-top .footer-links .footer-menu-1 > .ft-links-col:first-child {
    border-radius: var(--acma-radius-core, 20px) 0 0 var(--acma-radius-core, 20px);
  }
  .site-footer .footer-top .footer-links .footer-menu-1 > .ft-links-col:last-child {
    border-radius: 0 var(--acma-radius-core, 20px) var(--acma-radius-core, 20px) 0;
  }
}

/* At the bottom of the plate's range the cells are 152px, and 16px of padding
   each side leaves 120px -- three pixels short of the widest link
   ("Job Openings"), which is why it and "Privacy Policy" broke onto a second
   line while every other link sat on one. The gutter is not the place to find
   those pixels; it is the margin the plate needs to stand clear of the column
   beside it. The cell padding is, so it tightens one step over this range
   only, and the vertical padding comes down with it to match the density. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .site-footer .footer-top .footer-links .footer-menu-1 > .ft-links-col {
    padding: var(--ds-space-5, 24px) var(--ds-space-3, 12px);
  }
}

/* --- The row the plate sits in --------------------------------------------
   The three footer columns were spaced by three different mechanisms: a
   `padding-right: 25px` on .join-team, nothing at all on the links column,
   and a `margin-left: 50px` on .social-media. Under `space-between` that
   resolved to a 0px gutter on the plate's left edge and a 50px one on its
   right -- the plate's hairline touching the column beside it on one side
   and standing 50px clear on the other. The asymmetry is what reads as the
   plate being shoved against the left of the row.

   One `gap` on the row replaces all three, so both gutters are the same
   number and that number is a token. The row's items are already wider than
   the row and shrink to fit, so `space-between` has no free space to
   distribute and the gutters resolve to exactly the gap.

   The ad-hoc padding and margin are neutralised here rather than deleted
   from style.css: below 1200 the row is `display: block` and both still do
   work there. */
@media (min-width: 1200px) {
  .site-footer .footer-top { gap: var(--ds-space-5, 24px); }
  .site-footer .footer-top .join-team { padding-right: 0; }
  .site-footer .footer-top .social-media { margin-left: 0; }
}
/* The gutter is a ramp, not one number, because the plate is the column that
   pays for it. Measured against the widest string in each cell: a link needs
   119px of content ("Job Openings") and a heading 142px ("USEFUL LINKS").
   At 1200 the cells hold 116px, so every gutter wider than 24px breaks a
   link onto two lines -- 24px buys back 122px and every link sits on one
   line, with the heading still wrapping to the two-line row the subgrid
   above already equalises. By 1440 the cells hold 164px and the headings
   come back onto one line, so the gutter can open up. */
@media (min-width: 1440px) {
  .site-footer .footer-top { gap: var(--ds-space-6, 32px); }
}
/* The row stops growing at 1456px, so past 1600 the extra gutter comes out of
   columns that have width to spare. */
@media (min-width: 1600px) {
  .site-footer .footer-top { gap: var(--ds-space-8, 48px); }
}

/* --- "More links", the disclosure beside the plate ------------------------
   This control was an <a> and is now a <button>, so every rule written
   against `.viewmore_list a ...` (style.css ~L19692-19794) stopped matching.
   What was left on desktop was not a style preference but a broken control:

     - the svg sizing rule is `.viewmore_list a .plusbtninner svg`, so the
       plus rendered at its own 37 x 42px rather than 12 x 12 -- taller than
       the 37px disc containing it;
     - with no fill rule matching either, it fell back to the SVG default of
       solid black;
     - the hover fill is `.viewmore_list a:hover .plusbtninner:after`, so the
       ::after stayed at scale(0) and the button had no hover feedback at all;
     - and a focusable button had no visible focus ring.

   The result was the loudest object in the footer -- a solid white disc at
   maximum contrast on a near-black ground -- outshouting the Signal Brick
   "Explore careers" CTA, which is the one thing here that should be loudest.

   Below 1200 this was already settled (mobile-density.css ~L915): the disc
   goes and a thin #FF7F1F plus carries it, measured at 7.36:1 on this
   ground. Desktop keeps the disc, because here it pairs with a label and
   needs a target, but it is made of the same tray and hairline as the plate
   beside it so the two read as one system rather than two materials. */
@media (min-width: 1200px) {
  .site-footer .viewmore_list .viewmore-toggle {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .site-footer .viewmore_list .viewmore-toggle .plusbtninner {
    display: grid;
    place-items: center;
    line-height: 0;
    background: var(--acma-tray-inverse, rgba(255, 255, 255, .06));
    border: 1px solid var(--acma-hairline-inverse, rgba(255, 255, 255, .14));
    transition: background-color .2s ease, border-color .2s ease;
  }
  .site-footer .viewmore_list .viewmore-toggle .plusbtninner .svg-tag svg {
    width: 13px;
    height: 13px;
    fill: #FF7F1F;
    transition: fill .2s ease;
  }
  /* The ::after was the old hover fill and can no longer be triggered; the
     disc itself takes the state instead. */
  .site-footer .viewmore_list .viewmore-toggle .plusbtninner::after { content: none; }
  .site-footer .viewmore_list .viewmore-toggle:hover .plusbtninner {
    background: var(--ds-primary, #B65002);
    border-color: var(--ds-primary-hover, #974302);
  }
  .site-footer .viewmore_list .viewmore-toggle:hover .plusbtninner .svg-tag svg {
    fill: var(--ds-white, #FFFFFF);
  }
  .site-footer .viewmore_list .viewmore-toggle:focus-visible {
    outline: 2px solid #FF7F1F;
    outline-offset: 3px;
    border-radius: var(--ds-radius-pill, 999px);
  }
}

/* Ground: same ink family as the CTA band, with a faint lift so the two dark
   bands read as one composition rather than two different blacks. */
footer,
footer.site-footer {
  /* .site-footer (0,1,0) sets #0b0b0b and outranks a bare `footer` (0,0,1),
     so the element selector alone never applied. */
  background:
    radial-gradient(120% 100% at 15% 0%, rgba(255, 127, 31, .07) 0%, rgba(255, 127, 31, 0) 55%),
    #04101d;
}

/* Default disc bullets on navigation lists. Links are the content here; the
   marker adds nothing and breaks the left alignment of every column. */
footer :is(ul, ol):is(.sub-menu, .menu, .footer-menu-1, [class*="ft-links"]),
footer .footer-links ul,
footer .footer-nav ul {
  list-style: none;
  padding-left: 0;
}
footer li { list-style: none; }

/* No footer bottom padding for the sticky CTA bar: measured across scroll
   positions, the bar carries .is-visible at 10% and 50% and drops it by 95%,
   so it hides itself before the footer and never overlaps. An element
   screenshot composites fixed elements over the capture, which is what made
   it look like an overlap. */

/* "More Links": a circle-plus flanked by two rules with the label centred
   underneath, which left the control mis-aligned on mobile and orphaned on
   desktop. Make it one inline control that reads as a single affordance. */
footer .viewmore_list { margin-top: var(--ds-space-6, 32px); }
footer .viewmore_list > a {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3, 12px);
  min-height: 44px;
  text-decoration: none;
}
footer .viewmore_list h3 {
  margin: 0;
  font-family: var(--ds-font-primary);
  font-size: var(--ds-subhead-size);
  font-weight: var(--ds-subhead-weight);
  line-height: var(--ds-subhead-leading);
  letter-spacing: var(--ds-subhead-tracking);
  text-transform: uppercase;
}

/* Footer accordion headings on mobile. The toggle is a <span class="info-toggle">
   sitting immediately after the label text inside an <h2> inside a bare <a>,
   so the "+" was jammed against the last character and the row was only as
   wide as its text. Make the row full width with the toggle pushed to the
   right edge, and give it a real 48px target. */
@media (max-width: 1023px) {
  footer li.menu-item-has-children > a {
    width: 100%;
  }
  /* The anchor keeps its inline-flex from the theme, so the h2 is a flex item
     and sizes to its text unless told to fill the track. */
  footer li.menu-item-has-children > a > h2 {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4, 16px);
    min-height: 48px;
    margin: 0;
  }
  footer li.menu-item-has-children > a > h2 > .info-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
  }
}

/* The "+" control and its label are siblings inside .viewmore_list, not nested,
   so flexing the anchor could never bring them onto one line. Flex the parent. */
footer .viewmore_list {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3, 12px);
}
footer .viewmore_list > a { flex: 0 0 auto; }
footer .viewmore_list h3 { order: 2; }
/* The flanking rule is .viewmore_list::before - a 345x1px white bar - broken
   around the plus by an a::before block painted in the old #0b0b0b footer
   colour. Changing the footer ground left that mask mismatched, so the rule
   struck straight through the label. The rule adds nothing now that the
   control reads horizontally, so both go. */
footer .viewmore_list::before,
footer .viewmore_list > a::before { content: none; }

/* Column rhythm: the three link columns were crowded together with a wide gap
   before "Stay connected". Even tracks across the row. */
@media (min-width: 1024px) {
  footer .footer-right-middle-parent {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  }
}

/* ==========================================================================
   MOBILE MENU — restore stacking above the backdrop
   `body.acma-nav-open header { z-index: 10001 }` in responsive.css and
   `body.acma-sticky-ready header { z-index: 999 }` in conversion.css have
   identical (0,1,2) specificity, so source order decided it — and
   conversion.css loads later. The header was pinned to 999, below the
   backdrop's 9998, so the scrim painted straight over the open menu and
   washed the whole panel out. sections.css loads last; settle it here.
   ========================================================================== */
@media (max-width: 1023px) {
  body.acma-nav-open header,
  body.acma-nav-open.acma-sticky-ready header,
  body.acma-nav-open.acma-sticky-ready header.home-header { z-index: 10001; }
}

/* ==========================================================================
   MODERN HAMBURGER
   The toggle was a 30x19 SVG of five heavy bars — dated, and it needed a
   white/orange asset swap to stay visible against the pinned header. Drawn in
   CSS as three bars using currentColor, it inherits whatever the header text
   colour already is, so the swap becomes unnecessary and it stays crisp at any
   density.
   ========================================================================== */
@media (max-width: 1023px) {
  header .menu-toggle-open {
    background-image: none !important;
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    color: var(--ds-text-inverse, #fff);
  }
  header .menu-toggle-open::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 2px;
    margin: -1px 0 0 -12px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
    transition: background-color 180ms var(--ds-ease, ease);
  }
  /* Once the header is pinned to its white ground the bars must invert with
     the rest of the nav; currentColor does it without a second asset. */
  body.acma-header-stuck header.home-header .menu-toggle-open,
  header.inner-header .menu-toggle-open { color: var(--ds-ink, #001427); }

  @media (prefers-reduced-motion: reduce) {
    header .menu-toggle-open::before { transition: none; }
  }
}

/* ==========================================================================
   MOBILE DRAWER — nested (depth-2) groups
   The theme only draws a chevron on top-level items, so "Services",
   "Solutions" and "Products" became tappable with no affordance at all. They
   also kept the desktop mega-menu's spacing — 20px bottom padding plus a 15px
   margin — which put 35px of dead space under every row and stretched a 48px
   link into a 77px box.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Kill the mega-menu spacing inside the drawer; it exists for a wide
     multi-column panel, not a vertical list. */
  /* Match the theme's own deep selector; a short one loses to its
     header .header-right-main .header-right .menu-main-nav-container > … chain. */
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu > li,
  header .header-right-main .header-right .menu-main-nav-container .sub-menu > li {
    margin: 0;
    padding: 0;
  }
  .menu-main-nav-container .sub-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3, 12px);
    min-height: 48px;
    padding-right: var(--ds-space-2, 8px);
  }

  /* Chevron for nested parents, matching the top-level treatment: a rotated
     border square, so it inherits colour and needs no asset. */
  .menu-main-nav-container .sub-menu > li.menu-item-has-children > a::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms var(--ds-ease, ease);
  }
  .menu-main-nav-container .sub-menu > li.menu-item-has-children.active > a::after {
    transform: rotate(-135deg);
  }

  /* Depth-3 lists sit inside an open depth-2 group; indent them so the
     hierarchy is readable rather than a flat run of links. */
  .menu-main-nav-container .sub-menu .sub-menu > li > a {
    padding-left: var(--ds-space-4, 16px);
    font-weight: var(--ds-weight-regular, 400);
    opacity: .88;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-main-nav-container .sub-menu > li.menu-item-has-children > a::after { transition: none; }
  }
}

/* Sub-menu links were inline-width while carrying a border-bottom, so each
   underline stopped at the end of its text — a ragged staircase down the
   drawer — and `justify-content: space-between` had no spare width to push the
   chevron to. Full-width rows fix the rules, the chevron position and the tap
   target together. Depth-3 is then indented so the hierarchy is legible. */
@media (max-width: 1023px) {
  header .header-right-main .header-right .menu-main-nav-container .sub-menu > li > a {
    width: 100%;
    box-sizing: border-box;
  }
  header .header-right-main .header-right .menu-main-nav-container .sub-menu .sub-menu > li > a {
    padding-left: var(--ds-space-4, 16px);
    font-weight: var(--ds-weight-regular, 400);
    opacity: .88;
  }
}

/* ==========================================================================
   FOOTER "MORE LINKS" PANEL
   The lists inside #footermorelinks are display:grid with content-sized
   columns (measured 94 / 98 / 108 / 113px), so any label longer than its track
   overflowed into the next one — "InfrastructureStaff",
   "AugmentationEngineering". They also still carried disc bullets, which the
   earlier navigation-list rule did not reach.
   ========================================================================== */
#footermorelinks ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--ds-space-2, 8px) var(--ds-space-6, 32px);
  list-style: none;
  margin: 0 0 var(--ds-space-6, 32px);
  padding: 0;
}
#footermorelinks ul > li {
  list-style: none;
  min-width: 0;
}
#footermorelinks ul > li > a {
  display: block;
  padding-block: var(--ds-space-2, 8px);
  min-height: 40px;
  line-height: var(--ds-leading-ui);
}
/* Group headings ("Services", "Solutions") need to sit clear of the list. */
#footermorelinks :is(h2, h3, h4, h5) {
  margin: var(--ds-space-6, 32px) 0 var(--ds-space-3, 12px);
  font-size: var(--ds-text-sm, 1rem);
  letter-spacing: var(--ds-tracking-caps, .06em);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  #footermorelinks ul { grid-template-columns: minmax(0, 1fr); }
}

/* The groups sit in a flex parent that capped each at ~350px, so auto-fill
   could only ever place one column. Stack the groups full width and let each
   list use the whole footer measure. */
#footermorelinks .footer_pages_parent_2,
#footermorelinks .footer-right-middle-parent {
  display: block;
}
#footermorelinks .footer_pages_parent_2 > * { width: 100%; }

/* The burger was pinned with `position: relative; top: 38.9px` — a nudge on an
   element whose static position computes to about -44px, so it ended up
   hanging 5px off the top of the header with its centre 26px above the logo's.
   The header row is already `display: flex; align-items: center`, so let it do
   the centring instead of correcting a bad offset with another offset. */
@media (max-width: 1023px) {
  header .menu-toggle-open {
    position: relative;
    top: auto;
    bottom: auto;
    align-self: center;
    margin-block: 0;
    /* The base rule is `position: absolute; top: 50%` paired with a
       translateY(-50%). Clearing the offset without the transform still left
       it 22px high — exactly the -5px vs 17px gap measured. */
    transform: none;
  }
}

/* The header overlays the hero, so hero content centred on the full hero box
   sat right up against the nav — measured -2px of clearance between the header
   and the h1 at 1440. Reserve the header's height at the top so the text
   centres in the area a visitor can actually see. */
.acma-hero .acma-shell {
  /* Enough to clear the nav without ballooning the hero: a larger value pushed
     total height 646 -> 752px and left the content bottom-heavy with only 24px
     beneath it. Paired with a matching bottom pad so the block stays optically
     centred in the visible area rather than pinned low. */
  padding-top: clamp(2.5rem, 1.25rem + 3vw, 4.5rem);
  padding-bottom: clamp(1rem, .5rem + 1vw, 2rem);
}

/* ==========================================================================
   SUBMENU CHEVRONS — the earlier rules were losing to the theme
   Measured on the rendered drawer: the ::after computed to display:none, the
   link stayed inline-block so justify-content had nothing to act on, and the
   rotate never applied. All three came from the theme's deep
   header .header-right-main .header-right … chain outranking a short selector.
   Matched at that depth, and the toggle button's colour is inherited rather
   than left as the UA default black on a navy panel.
   ========================================================================== */
@media (max-width: 1023px) {
  header .header-right-main .header-right .menu-main-nav-container .sub-menu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  /* The homepage variant hides these with `header.home-header … { display:
     none !important }`, which outranks the same chain without the class. */
  header .header-right-main .header-right .menu-main-nav-container .sub-menu > li.menu-item-has-children > a::after,
  header.home-header .header-right-main .header-right .menu-main-nav-container .sub-menu > li.menu-item-has-children > a::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    border-top: 0;
    border-left: 0;
    background: none !important;
    transform: rotate(45deg) !important;
    transition: transform 180ms var(--ds-ease, ease);
  }
  header .header-right-main .header-right .menu-main-nav-container .sub-menu > li.menu-item-has-children.active > a::after,
  header.home-header .header-right-main .header-right .menu-main-nav-container .sub-menu > li.menu-item-has-children.active > a::after {
    transform: rotate(-135deg) !important;
  }

  /* The injected toggle is a <button>, so it took the UA's black text colour -
     invisible on the navy drawer. */
  .menu-main-nav-container .acma-submenu-toggle { color: inherit; }
  .menu-main-nav-container .sub-menu .acma-submenu-toggle { color: var(--ds-text-inverse, #fff); }
}

/* Owned chevron element for drawer parents — see ui-enhancements.js. Replaces
   the ::after approach, which the theme hides with a !important rule at a
   selector depth not worth escalating against. */
@media (max-width: 1023px) {
  .menu-main-nav-container .acma-chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: auto;
    margin-right: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 180ms var(--ds-ease, ease);
  }
  .menu-main-nav-container li.active > a > .acma-chevron,
  .menu-main-nav-container li.active > .acma-submenu-toggle > .acma-chevron {
    transform: rotate(-135deg) translateY(-2px);
  }
  @media (prefers-reduced-motion: reduce) {
    .menu-main-nav-container .acma-chevron { transition: none; }
  }
}

/* The toggle button is absolutely positioned at 44x44; the chevron inside it
   must centre rather than inherit the row's margin-left:auto, which collapsed
   it into a vertical bar. */
@media (max-width: 1023px) {
  .menu-main-nav-container .acma-submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .menu-main-nav-container .acma-submenu-toggle > .acma-chevron {
    margin: 0;
  }
}

/* ==========================================================================
   REGION & LANGUAGE MODAL
   88 links across 3 regions rendered as bare text in ragged columns, with the
   current choice marked by a hard black rectangle and no hover, focus or
   filter. Rebuilt as a proper dialog: elevated panel, scrollable body,
   tile-based options, branded selection, and a live filter — at this list
   length, finding your language matters more than any amount of styling.
   ========================================================================== */

/* custom.js binds BOTH toggleClass('active') and slideToggle() to the same
   opener, plus a document mouseup that calls .hide() — three mechanisms
   writing inline styles over each other, which is why the panel could carry
   .active and still compute display:none. !important here makes the class the
   single source of truth and renders the inline writes inert. */
.modal.languagepopup {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  padding: clamp(1rem, .5rem + 2vw, 3rem);
  overflow-y: auto;
  background: rgba(0, 12, 24, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal.languagepopup.active { display: block !important; }

.languagepopup .modal-dialog {
  max-width: 1120px;
  margin: 0 auto;
}
.languagepopup .modal-content {
  background: var(--ds-white, #fff);
  border: 0;
  border-radius: var(--ds-radius-lg, 16px);
  box-shadow: 0 2px 6px rgba(0, 20, 39, .08), 0 40px 80px -24px rgba(0, 20, 39, .45);
  overflow: hidden;
}

/* --- header: stays put while 88 options scroll under it ------------------ */
.languagepopup .modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4, 16px);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  background: var(--ds-white, #fff);
  border-bottom: 1px solid var(--ds-border, #DDE3EC);
}
.languagepopup .modal-title {
  margin: 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-5);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
}
.languagepopup .lang-close .close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ds-border, #DDE3EC);
  border-radius: 50%;
  background: var(--ds-white, #fff);
  color: var(--ds-ink, #001427);
  cursor: pointer;
  transition: background-color 180ms var(--ds-ease, ease), border-color 180ms var(--ds-ease, ease);
}
.languagepopup .lang-close .close::before,
.languagepopup .lang-close .close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.languagepopup .lang-close .close::before { transform: rotate(45deg); }
.languagepopup .lang-close .close::after  { transform: rotate(-45deg); }
.languagepopup .lang-close .close { position: relative; }
.languagepopup .lang-close .close:hover {
  background: var(--ds-surface, #F1F4F9);
  border-color: var(--ds-ink, #001427);
}
.languagepopup .lang-close .close:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}

/* --- body ---------------------------------------------------------------- */
.languagepopup .modal-body {
  max-height: min(70vh, 720px);
  overflow-y: auto;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

/* --- regions -------------------------------------------------------------- */
.languagepopup .desk-lang-opt > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.languagepopup li.region {
  list-style: none;
  padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-top: 1px solid var(--ds-border, #DDE3EC);
}
.languagepopup li.region:first-child { border-top: 0; padding-top: 0; }
.languagepopup li.region > h4 {
  margin: 0 0 var(--ds-space-4, 16px);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  color: var(--ds-text-muted, #5F5A54);
}
/* On wide screens the region label sits beside its options rather than above,
   so the eye scans one column of regions and one field of choices. */
@media (min-width: 1024px) {
  .languagepopup li.region {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--ds-space-6, 32px);
    align-items: start;
  }
  .languagepopup li.region > h4 { margin-bottom: 0; padding-top: 10px; }
}

/* --- options -------------------------------------------------------------- */
.languagepopup li.region > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ds-space-2, 8px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.languagepopup li.lang-link { list-style: none; }
.languagepopup li.lang-link > a {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-2, 8px);
  min-height: 44px;
  padding: var(--ds-space-2, 8px) var(--ds-space-3, 12px);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md, 8px);
  color: var(--ds-text, #28282B);
  text-decoration: none;
  transition: background-color 160ms var(--ds-ease, ease),
              border-color 160ms var(--ds-ease, ease),
              transform 160ms var(--ds-ease, ease);
}
.languagepopup li.lang-link > a > span {
  font-weight: var(--ds-weight-medium, 500);
  color: var(--ds-ink, #001427);
}
.languagepopup li.lang-link > a:hover {
  background: var(--ds-surface, #F1F4F9);
  border-color: var(--ds-border, #DDE3EC);
  transform: translateY(-1px);
}
.languagepopup li.lang-link > a:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}

/* Selected: the previous treatment was a hard black rectangle, which read as
   a rendering fault rather than a choice. Branded, with a tick so the state
   does not rely on colour alone. */
.languagepopup li.lang-link.active > a {
  position: relative;
  background: var(--ds-ink, #001427);
  border-color: var(--ds-ink, #001427);
  padding-right: 34px;
}
.languagepopup li.lang-link.active > a,
.languagepopup li.lang-link.active > a > span { color: var(--ds-text-inverse, #fff); }
.languagepopup li.lang-link.active > a::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 5px;
  height: 10px;
  margin-top: -6px;
  border-right: 2px solid var(--ds-primary-vivid, #FF7F1F);
  border-bottom: 2px solid var(--ds-primary-vivid, #FF7F1F);
  transform: rotate(45deg);
}

/* --- filter --------------------------------------------------------------- */
.acma-lang-filter { margin-bottom: var(--ds-space-5, 24px); }
.acma-lang-filter input {
  width: 100%;
  min-height: 48px;
  padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
  font: inherit;
  color: var(--ds-text, #28282B);
  background: var(--ds-surface, #F1F4F9);
  border: 1px solid var(--ds-border, #DDE3EC);
  border-radius: var(--ds-radius-pill, 999px);
}
.acma-lang-filter input:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}
.acma-lang-empty {
  padding: var(--ds-space-5, 24px);
  color: var(--ds-text-muted, #5F5A54);
  text-align: center;
}
.languagepopup [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .languagepopup li.lang-link > a { transition: none; }
  .languagepopup li.lang-link > a:hover { transform: none; }
}

/* Row rhythm in the language grid. The legacy li carried its own 5px/10px
   padding on top of the link's, and the grid stretched every row to match the
   tallest cell — one wrapping option made all of them 84px. Rows now size to
   their own content and the link owns the padding. */
.languagepopup li.region > ul { align-items: start; }
.languagepopup li.lang-link { padding: 0; margin: 0; }
.languagepopup li.lang-link > a { height: 100%; align-items: center; }

/* ==========================================================================
   COMPACT PINNED HEADER
   Once the header pins, the utility row (Search / EN / Global Locations /
   Contact Us) is dropped so the bar collapses to logo + primary nav. Scoped to
   >= 1024px on purpose: the same .header-right-supernav markup is what renders
   the search field and those links inside the mobile drawer, and hiding it
   globally would strip them from the drawer too.
   ========================================================================== */
@media (min-width: 1024px) {
  /* The theme's own rule is (0,3,1); a two-class selector loses to it, so
     match its chain and add the state class. */
  body.acma-header-stuck header .header-right-main .header-right .header-right-supernav {
    display: none;
  }
  /* With one row gone the bar should actually get shorter, not keep the old
     height with a gap where the row used to be. */
  body.acma-header-stuck header .wrapper {
    padding-block: var(--ds-space-2, 8px);
  }
  body.acma-header-stuck header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > a {
    padding-block: var(--ds-space-3, 12px);
  }
  body.acma-header-stuck header .site-branding img {
    /* 46px was 66% of the old 70px lockup; 41 keeps that proportion against the
       62px the logo now renders at. */
    max-height: 41px;
    width: auto;
    transition: max-height 200ms var(--ds-ease, ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.acma-header-stuck header .site-branding img { transition: none; }
}

/* ==========================================================================
   SEARCH OVERLAY
   Was a pale dropdown pinned under the nav: square corners, no elevation, an
   off-palette black submit, and it covered the primary navigation while open.
   Rebuilt as a centred overlay on the same scrim as the language dialog. The
   existing toggle only flips display, so the container becomes the scrim and
   the form inside it becomes the panel — no markup change required.
   ========================================================================== */
/* The theme styles this at (0,5,1) via
   `header .header-right-main .header-right .header-right-supernav .supernav-search
    .searchfrom-container`, so a two-part selector never stood a chance —
   z-index, centring and offsets were all silently discarded. Matched. */
header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container,
header .searchfrom-container {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050;
  width: auto !important;
  height: auto !important;
  padding: clamp(1rem, .5rem + 3vw, 4rem);
  /* The theme lays this out as a column, so align-items is the horizontal
     axis here and justify-content the vertical one — set the other way round
     the panel centred vertically and sat hard left. */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: rgba(0, 12, 24, .62) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container > .search-form,
header .searchfrom-container > .search-form {
  width: min(680px, 100%);
  margin-top: clamp(2rem, 6vh, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-space-2, 8px);
  padding: var(--ds-space-3, 12px);
  background: var(--ds-white, #fff);
  border-radius: var(--ds-radius-lg, 16px);
  box-shadow: 0 2px 6px rgba(0, 20, 39, .08), 0 40px 80px -24px rgba(0, 20, 39, .45);
}

/* The label is meaningful to assistive tech but was rendering as visible
   chrome above the field; keep it announced, take it out of the layout. */
header .searchfrom-container label[for="search-form-1"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container .search-field,
header .searchfrom-container .search-field {
  width: 100%;
  min-height: 56px;
  padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
  font-size: var(--ds-text-base, 1.125rem);
  color: var(--ds-text, #28282B);
  background: transparent;
  border: 0;
  border-radius: var(--ds-radius-md, 8px);
}
header .searchfrom-container .search-field:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: -2px;
}

/* Black submit was the only black control on the site; bring it onto the one
   accent everything else uses. */
header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container .search-submit,
header .searchfrom-container .search-submit {
  min-height: 56px;
  padding-inline: var(--ds-space-6, 32px);
  font-weight: var(--ds-weight-medium, 500);
  letter-spacing: var(--ds-tracking-caps, .06em);
  text-transform: uppercase;
  color: var(--ds-text-inverse, #fff);
  background: var(--ds-primary, #B65002) !important;
  border: 0;
  border-radius: var(--ds-radius-pill, 999px);
  cursor: pointer;
  transition: background-color 180ms var(--ds-ease, ease);
}
header .searchfrom-container .search-submit:hover { background: var(--ds-ink, #001427) !important; }
header .searchfrom-container .search-submit:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}

header .searchfrom-container .search_error_message {
  width: min(680px, 100%);
  margin-top: var(--ds-space-3, 12px);
  color: var(--ds-text-inverse, #fff);
}

@media (max-width: 599px) {
  header .searchfrom-container > .search-form { grid-template-columns: minmax(0, 1fr); }
}

/* Below 1024px the same .searchfrom-container markup is the inline search
   field inside the mobile drawer, not a header dropdown — the overlay
   treatment above must not follow it there. Restore it to flow. */
@media (max-width: 1023px) {
  header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container,
  header .searchfrom-container {
    position: static !important;
    inset: auto !important;
    z-index: auto;
    padding: 0 !important;
    background: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container > .search-form,
  header .searchfrom-container > .search-form {
    width: 100%;
    margin-top: 0;
    box-shadow: none;
  }
}

/* Mobile drawer: the desktop overlay's panel treatment (white card, grid,
   pill submit) leaked onto the inline search field. Reset it to the drawer's
   own look. */
@media (max-width: 1023px) {
  header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container > .search-form,
  header .searchfrom-container > .search-form {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2, 8px);
    padding: 0;
    background: none;
    border-radius: 0;
  }
  /* Restore the drawer's own field: a pill outline on the navy panel, with a
     compact action beside it rather than the desktop panel's full-width one. */
  /* These must carry the same depth as the desktop rules above; a media
     query does not change specificity, so the shorter selector lost. */
  header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container .search-field,
  header .searchfrom-container .search-field {
    flex: 1 1 auto;
    min-height: 48px;
    padding-inline: var(--ds-space-4, 16px);
    color: var(--ds-text-inverse, #fff);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: var(--ds-radius-pill, 999px);
  }
  header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container .search-field::placeholder,
  header .searchfrom-container .search-field::placeholder { color: rgba(255, 255, 255, .6); }
  header .searchfrom-container .search-field:focus-visible {
    outline: 2px solid var(--ds-primary-vivid, #FF7F1F);
    outline-offset: 2px;
  }
  header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container .search-submit,
  header .searchfrom-container .search-submit {
    flex: 0 0 auto;
    width: 48px;
    min-height: 48px;
    padding: 0;
  }
}

/* Top-level drawer parents were showing two arrows: the theme's own ::after
   plus the .acma-chevron this code injects. The injected one is the element we
   control, so the theme's is the one to drop. */
@media (max-width: 1023px) {
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.menu-item-has-children > a::after,
  header.home-header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.menu-item-has-children > a::after {
    display: none !important;
  }
}

/* ==========================================================================
   FOOTER ACCORDION — give the "+" a state
   The toggle does work below 1200px (the handler is bound to the h2 in
   custom.js), but the icon never changed, so an open section still showed a
   "+" and the control read as decoration. Drawn here as two bars: the vertical
   one retracts when the section is open, so + becomes −.
   ========================================================================== */
@media (max-width: 1199px) {
  footer .info-toggle {
    position: relative;
    width: 28px;
    height: 28px;
    font-size: 0;
  }
  footer .info-toggle::after { content: none !important; }
  footer .info-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(var(--ds-primary-vivid, #FF7F1F), var(--ds-primary-vivid, #FF7F1F)) center/100% 2px no-repeat,
      linear-gradient(var(--ds-primary-vivid, #FF7F1F), var(--ds-primary-vivid, #FF7F1F)) center/2px 100% no-repeat;
    transition: background-size 200ms var(--ds-ease, ease);
  }
  /* custom.js toggles .show on the heading as the open flag. */
  footer h2.show .info-toggle::before {
    background:
      linear-gradient(var(--ds-primary-vivid, #FF7F1F), var(--ds-primary-vivid, #FF7F1F)) center/100% 2px no-repeat,
      linear-gradient(var(--ds-primary-vivid, #FF7F1F), var(--ds-primary-vivid, #FF7F1F)) center/2px 0 no-repeat;
  }
  @media (prefers-reduced-motion: reduce) {
    footer .info-toggle::before { transition: none; }
  }
}
/* Above the breakpoint the columns are always expanded, so no control at all. */
@media (min-width: 1200px) {
  footer .info-toggle { display: none; }
}

/* ==========================================================================
   LANGUAGE MODAL — hover colour
   The theme turns option text white on hover (it was written for a dark
   panel). On the rebuilt light panel that put white text on the pale hover
   ground: measured 1.10:1, effectively invisible while the pointer is over
   the row you are trying to read. Keep the ink tone on hover, and let the
   selected row keep its inverse treatment.
   ========================================================================== */
.languagepopup li.lang-link > a:hover,
.languagepopup li.lang-link > a:focus,
.languagepopup li.lang-link:hover > a,
.languagepopup li.lang-link > a:hover > span,
.languagepopup li.lang-link:hover > a > span {
  color: var(--ds-text, #28282B) !important;
}
.languagepopup li.lang-link > a:hover > span,
.languagepopup li.lang-link:hover > a > span {
  color: var(--ds-ink, #001427) !important;
}
/* The selected row is navy; its text must stay inverse on hover. */
.languagepopup li.lang-link.active > a:hover,
.languagepopup li.lang-link.active:hover > a,
.languagepopup li.lang-link.active > a:hover > span,
.languagepopup li.lang-link.active:hover > a > span {
  color: var(--ds-text-inverse, #fff) !important;
}

/* ==========================================================================
   MOBILE DRAWER SEARCH — one pill, icon inside
   The submit rendered as a bare orange disc overlapping the field's outline:
   the theme draws its magnifier as a background-image, which the overlay work
   overrode, and <input type="submit"> cannot carry a ::before, so nothing
   replaced it. Field and button are now a single pill with the icon set as a
   background on the input itself.
   ========================================================================== */
@media (max-width: 1023px) {
  header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container > .search-form,
  header .searchfrom-container > .search-form {
    position: relative;
    display: block;
    padding: 0;
  }
  header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container .search-field,
  header .searchfrom-container .search-field {
    width: 100%;
    padding-right: 56px;
  }
  header .header-right-main .header-right .header-right-supernav .supernav-search .searchfrom-container .search-submit,
  header .searchfrom-container .search-submit {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 0;
    border-radius: 50%;
    /* The desktop rule above sets `background: ... !important` — a shorthand,
       which resets background-image. These must be !important too or the icon
       is wiped by our own earlier declaration. */
    background-color: var(--ds-primary, #B65002) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
  }
  header .searchfrom-container .search-submit:hover { background-color: var(--ds-ink, #001427); }

  /* The rule under the last nav item rendered heavier than the rest, so the
     list looked like it ended twice. */
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li:last-child > a {
    border-bottom-color: rgba(255, 255, 255, .12);
    border-bottom-width: 1px;
  }
}

/* ==========================================================================
   PRODUCT TABS — premium pass
   The selected tab differed from the rest only by text colour, the panel image
   was the one unframed image left on the page, two bold headings competed for
   the same role, and the actions were bare text links outside the button
   system. Rebuilt as a segmented control with a panel that matches the rest of
   the page.
   ========================================================================== */

/* --- segmented control --------------------------------------------------- */
.tab-content-section .tabs-header-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2, 8px);
  padding: 0;
}
.tab-content-section .tab-link {
  min-height: 44px;
  padding: var(--ds-space-2, 8px) var(--ds-space-5, 24px) !important;
  border: 1px solid var(--ds-border, #DDE3EC) !important;
  border-radius: var(--ds-radius-pill, 999px) !important;
  background: transparent !important;
  color: var(--ds-text, #28282B) !important;
  font-weight: var(--ds-weight-medium, 500);
  transition: background-color 180ms var(--ds-ease, ease),
              border-color 180ms var(--ds-ease, ease),
              color 180ms var(--ds-ease, ease);
}
.tab-content-section .tab-link:hover {
  border-color: var(--ds-ink, #001427) !important;
  background: var(--ds-white, #fff) !important;
}
/* Selected reads as selected: filled, not merely tinted. */
.tab-content-section .tab-link.active {
  background: var(--ds-ink, #001427) !important;
  border-color: var(--ds-ink, #001427) !important;
  color: var(--ds-text-inverse, #fff) !important;
}
.tab-content-section .tab-link:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}

/* --- panel media: frame it like every other image on the page ------------ */
.tab-content-section .tab-content-container img:not(.product-logo img) {
  border-radius: var(--ds-radius-lg, 16px);
  box-shadow: 0 1px 2px rgba(0, 20, 39, .06), 0 24px 48px -20px rgba(0, 20, 39, .34);
}

/* --- heading hierarchy: one title, one supporting line -------------------- */
.tab-content-section .tab-content h4,
.tab-content-section .tab-content .tab-panel-title {
  font-family: var(--ds-font-display, "Geist", sans-serif);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  line-height: var(--ds-leading-tight);
  text-wrap: balance;
}
.tab-content-section .tab-content :is(h5, .tab-panel-lede) {
  font-size: var(--ds-text-lg, 1.25rem) !important;
  font-weight: var(--ds-weight-regular, 400) !important;
  line-height: var(--ds-leading-ui);
  color: var(--ds-text-muted, #5F5A54) !important;
}

/* The supporting line sat flush on the paragraph under it -- margin 0 top and
   bottom -- so a 20px muted sentence read as the body copy's first line rather
   than as the line introducing it. And the body's own paragraphs were 15px
   apart at a 28px line height, which is a gap smaller than the leading inside
   them: two paragraphs, one block. Both go on the grid. */
.tab-content-section .tab-content .tab-panel-lede {
  margin: 0 0 var(--ds-space-4, 16px);
}
.tab-content-section .tab-content .tab-content-descrption > p {
  margin-bottom: var(--ds-space-5, 24px);
}
.tab-content-section .tab-content .tab-content-descrption > p:last-child {
  margin-bottom: 0;
}

/* --- actions join the button system -------------------------------------- */
.tab-content-section .tab-content-left a {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  min-height: 48px;
  padding: var(--ds-space-3, 12px) var(--ds-space-6, 32px) !important;
  border-radius: var(--ds-radius-pill, 999px) !important;
  font-weight: var(--ds-weight-medium, 500);
  text-decoration: none;
  transition: background-color 180ms var(--ds-ease, ease), color 180ms var(--ds-ease, ease);
}
.tab-content-section .tab-content-left a:first-of-type {
  background: var(--ds-primary, #B65002) !important;
  color: var(--ds-text-inverse, #fff) !important;
}
.tab-content-section .tab-content-left a:first-of-type:hover {
  background: var(--ds-ink, #001427) !important;
}
/* Each action sits in its own wrapper, so :first-of-type matched both and
   produced two identical filled buttons. Target the demo action by its
   destination, which is stable across products. */
.tab-content-section .tab-content-left a[href*="request-a-demo"],
.tab-content-section .tab-content-left a[href*="contact"] {
  background: transparent !important;
  border: 1px solid var(--ds-border, #DDE3EC) !important;
  color: var(--ds-ink, #001427) !important;
}
.tab-content-section .tab-content-left a[href*="request-a-demo"]:hover,
.tab-content-section .tab-content-left a[href*="contact"]:hover {
  background: var(--ds-surface, #F1F4F9) !important;
  border-color: var(--ds-ink, #001427) !important;
  color: var(--ds-ink, #001427) !important;
}
/* The circle-arrow glyphs were a third button language; the pills carry the
   affordance now. */
.tab-content-section .tab-content-left a::after,
.tab-content-section .tab-content-left a::before { content: none !important; }

@media (prefers-reduced-motion: reduce) {
  .tab-content-section .tab-link,
  .tab-content-section .tab-content-left a { transition: none; }
}

/* ==========================================================================
   PRIMARY NAV & MEGA MENU — premium pass
   Nav links were 700-weight uppercase with asymmetric 19/62/32/0 padding, so
   the row sat off its optical centre and the gaps were uneven. There was no
   current-page indicator at all, and the mega panel was a flat white rectangle
   with no elevation or radius — the only unelevated surface left on the page.
   ========================================================================== */
@media (min-width: 1024px) {
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, .5rem + 2vw, 2.75rem);
  }
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > a {
    position: relative;
    padding: var(--ds-space-4, 16px) 0 !important;
    font-size: var(--ds-nav-size);
    font-weight: var(--ds-nav-weight) !important;
    letter-spacing: var(--ds-nav-tracking);
    transition: color 180ms var(--ds-ease, ease);
  }

  /* Six top-level items, not five. "How We Work" joined the bar and "About Us"
     dropped onto a second row everywhere from 1024 to 1366.

     Measured: the six labels are 719px of 16px text, and the nav column is
     757px at 1024, 802 at 1200 and 882 at 1280 -- not monotonic, because the
     logo column and the shell padding both step at breakpoints. Against the
     gap above, the row wanted 861px at 1024. The gap alone could not close
     that; fitting 1024 would have taken it to 8px, which is not a gap.

     So the type takes a step too, 16px to 14, and the gap holds at 16-22
     rather than 24-44. That puts the six labels at 636px and the whole row at
     716-732, inside the column at every width down to the 1024 drawer
     breakpoint, with the least room to spare at 1024 where the column is
     tightest. Nothing changes at 1440 and above, where the five-item
     composition already fitted and still does. */
  @media (max-width: 1439px) {
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul { gap: clamp(16px, 1.4vw, 22px); }
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > a { font-size: var(--ds-text-xs, .875rem); }
  }

  /* ---- the mega panel spans the container, at every width -----------------
     The panel was sized `width: 208%` (155% below 1200) against `right: 0`,
     and the percentage resolved on `ul.main-menu` -- a box whose width is
     whatever is left after the logo, so it changes at every breakpoint and is
     not even monotonic. Measured, the panel's left edge landed at -117px at
     1024, -102 at 1440, -392 at 1600 and -418px outside the shell at 1920. It
     only fitted at 1280, by coincidence.

     A panel that belongs to the whole header should be measured against the
     whole header. `ul.main-menu` gives up `position: relative` so the shell --
     `header .wrapper`, already relative -- becomes the containing block, and
     the panel is pinned to both its edges instead of being given a width.
     `top: 100%` then puts it under the header without a hardcoded offset, so
     the three header heights (home 68px, inner 63, and the compact scrolled
     state) all resolve themselves.

     Nothing inside the list needs the old containing block: the hover
     indicator and the dropdown caret are positioned against the link, which
     has its own `position: relative`, and the second-level menus are
     positioned against the panel. */
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul { position: static; }
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu,
  header.inner-header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu,
  header.home-header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu {
    /* The three header variants each hardcoded their own offset -- 68px, 63,
       and 61 below 1440 -- because the panel hung off the nav list. Measured
       against the shell instead, all three are simply its bottom edge, and the
       compact scrolled state resolves itself too. The `.inner-header` and
       `.home-header` selectors are repeated here only to outweigh the variant
       rules in style.css, which carry one class more than the base. */
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
  }

  /* Hover and current state share one indicator: a rule that grows from the
     centre. Current page is the thing this nav never had. */
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > a::before {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 8px;
    /* The theme already styles this pseudo-element with a fixed width, which
       pinned the indicator to ~16px however far left/right were animated. */
    width: auto !important;
    height: 2px !important;
    /* The theme also gives this pseudo-element a 10px bottom border. With
       box-sizing: border-box the 2px height is entirely consumed by it, so the
       indicator painted as a 10px slab under the nav item instead of a rule --
       the heavy bar under "Service & Solutions". */
    border: 0 !important;
    border-radius: 2px;
    background: var(--ds-primary-vivid, #FF7F1F) !important;
    transition: left 200ms var(--ds-ease, ease), right 200ms var(--ds-ease, ease);
  }
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li:hover > a::before,
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > a:focus-visible::before,
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.current-menu-item > a::before,
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.current-menu-ancestor > a::before,
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.current-menu-parent > a::before {
    left: 0 !important;
    right: 0 !important;
  }

  /* Mega panel: a real surface. */
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu {
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow:
      0 1px 2px rgba(0, 20, 39, .06),
      0 32px 64px -24px rgba(0, 20, 39, .38);
    border: 1px solid var(--ds-border, #DDE3EC);
    overflow: hidden;

    /* The panel was 790px tall with `overflow: hidden` and no max-height, and
       it opens at y=122-124 on every template. On a 1366x768 laptop that put
       its bottom edge at 912 -- 144px past the viewport, with `hidden`
       swallowing the remainder. The three links that fell off were Acma PBX,
       AcmaIVR and AcmaTel CCS: the products PRODUCT.md calls the company's
       whole argument, unreachable from primary navigation on one of the most
       common enterprise resolutions, with the panel's rounded bottom corners
       visibly sliced.

       148px is the panel's own offset (124) plus a 24px breath. If a sticky
       header ever opens it higher the cap only leaves more room, never less,
       so this is safe in the direction it can drift. `contain` stops the page
       scrolling once the panel's own scroll reaches its end. */
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

@media (prefers-reduced-motion: reduce) {
  header .menu-main-nav-container > .main-menu > ul > li > a::before { transition: none; }
}

/* Dropdown chevrons on the desktop nav.
   Zeroing the link padding took away the space the theme reserved for the
   chevron, so it landed on top of the label. Parents get their gutter back and
   the mark is pinned to the right edge, vertically centred on the text. */
@media (min-width: 1024px) {
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.menu-item-has-children > a {
    padding-right: 18px !important;
  }
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.menu-item-has-children > a::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    left: auto !important;
    bottom: auto !important;
    width: 6px !important;
    height: 6px !important;
    margin: -5px 0 0 !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    background: none !important;
    transform: rotate(45deg) !important;
    transition: transform 180ms var(--ds-ease, ease);
  }
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.menu-item-has-children:hover > a::after {
    transform: rotate(-135deg) !important;
    margin-top: -2px !important;
  }
}

/* ==========================================================================
   SECTION TITLE — make the primitive authoritative
   `main :is(section, .section) h2` in ui-polish.css is (0,1,2) and was beating
   the .acma-section-title primitive at (0,1,0), so section titles resolved to
   36.96px from a rule the component never knew about, while the one legacy
   heading resolved to something else again. One declaration now owns it, and
   both ends land on the design system's scale: 28px floor, 40px (H2) cap.
   ========================================================================== */
main :is(section, .section) .acma-section-title,
.acma-section-title {
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-3);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
}
/* Row titles stay a step down from section titles. The card heading renders as
   an <h3>, and `main :is(section, .section) h3` in ui-polish.css is (0,2,1) --
   a lone class loses to it and the title comes out at 2rem. Matching that
   selector's shape and adding the class makes this (0,2,2), which wins without
   reaching for !important. */
main :is(section, .section) .acma-feature-row__title {
  font-size: var(--ds-display-6);
  line-height: var(--ds-leading-snug);
}
/* Must match the unified rule's (0,2,2), or the ink grounds inherit its dark
   colour and the title goes dark-on-dark. */
main :is(section, .section).acma-section--ink .acma-section-title,
main :is(section, .section).acma-proof-band .acma-section-title,
main :is(section, .section) .acma-section--ink .acma-section-title,
.acma-section--ink .acma-section-title,
.acma-proof-band .acma-section-title { color: var(--ds-text-inverse, #fff); }

/* ==========================================================================
   FEATURE ROWS — restore the mobile carousel after the component refactor
   The rows used to sit in their own wrapper; as direct children of
   .acma-shell the old track selector stopped matching and the section went
   back to stacking — 845px to 2,178px at 375px. They now have an explicit
   .acma-feature-track, which also keeps the section head out of the scroller.

   The swipe row now runs to 1023px, not 767px. A 2-up grid at 768 stacked the
   three cards into two rows and put the section at 1,574px -- taller than the
   same section on desktop. Every other card row on this page already carries
   its carousel to 1023px; this makes the feature row agree with them.
   ========================================================================== */
@media (max-width: 1023px) {
  .acma-feature-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: var(--ds-space-4, 16px);
    margin-inline: calc(var(--ds-container-pad, 16px) * -1);
    padding-inline: var(--ds-container-pad, 16px);
    scroll-padding-inline: var(--ds-container-pad, 16px);
    padding-bottom: var(--ds-space-2, 8px);
    scrollbar-width: none;
  }
  .acma-feature-track::-webkit-scrollbar { display: none; }
  .acma-feature-track > .acma-feature-row {
    flex: 0 0 88%;
    max-width: 88%;
    scroll-snap-align: start;
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   TABLET DENSITY — extend the carousels to 1023px
   At 768px the page measured 6,834px, taller than both mobile (5,843) and
   desktop (5,921): the card grid fell back to a 2-up static grid (993px) and
   the logo wall to a wrapping grid (758px) because both carousels stopped at
   767. Tablet has ample width to swipe, so they carry the same pattern up to
   the desktop breakpoint. Feature rows keep their side-by-side layout here —
   they read well at this width and a carousel of them would be cramped.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .acma-card-grid,
  .acma-logo-wall__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: var(--ds-space-4, 16px);
    margin-inline: calc(var(--ds-container-pad, 24px) * -1);
    padding-inline: var(--ds-container-pad, 24px);
    scroll-padding-inline: var(--ds-container-pad, 24px);
    padding-bottom: var(--ds-space-2, 8px);
    scrollbar-width: none;
  }
  .acma-card-grid::-webkit-scrollbar,
  .acma-logo-wall__grid::-webkit-scrollbar { display: none; }

  .acma-card-grid > * {
    flex: 0 0 46%;
    max-width: 46%;
    scroll-snap-align: start;
  }
  .acma-logo-wall__grid > * {
    flex: 0 0 22%;
    max-width: 22%;
    scroll-snap-align: start;
  }
}

/* 19 partner marks never divide evenly into a fixed column count, so the last
   row left two empty slots hard against the left edge — a ragged tail that
   reads as a layout fault rather than a set. Wrapping flex with a centred last
   row keeps the grid rhythm and lets the remainder sit balanced. */
@media (min-width: 1024px) {
  .acma-logo-wall__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-space-4, 16px);
  }
  .acma-logo-wall__grid > * {
    flex: 0 1 calc((100% - (var(--ds-space-4, 16px) * 6)) / 7);
    min-width: 150px;
  }
}

/* ==========================================================================
   LANGUAGE MODAL — orange corners on hover
   The theme paints the <li> orange on hover with a 4px radius. The rebuilt
   <a> sits on top with an 8px radius and a pale ground, so the orange showed
   through as four arcs where the two radii disagreed — it read as a broken
   border. The link owns the hover treatment now, so the row underneath must
   stay neutral.
   ========================================================================== */
.languagepopup li.lang-link,
.languagepopup li.lang-link:hover,
.languagepopup li.lang-link:focus-within {
  background: transparent !important;
  border-radius: var(--ds-radius-md, 8px);
}

/* ==========================================================================
   NAV CHEVRON ALIGNMENT
   The mark was absolutely positioned with a hand-tuned negative margin, so it
   never sat on the label's optical centre and drifted whenever the type
   changed. Laid out as a flex item instead, which centres it by construction.
   ========================================================================== */
@media (min-width: 1024px) {
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.menu-item-has-children > a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding-right: 0 !important;
  }
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.menu-item-has-children > a::after,
  header.home-header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.menu-item-has-children > a::after {
    position: static !important;
    flex: 0 0 auto;
    width: 7px !important;
    height: 7px !important;
    /* Optical, not mathematical: a chevron drawn from two borders sits low in
       its box, so it needs lifting to look centred against the cap height. */
    margin: -3px 0 0 !important;
    transform: rotate(45deg) !important;
  }
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li.menu-item-has-children:hover > a::after {
    margin-top: 2px !important;
    transform: rotate(-135deg) !important;
  }
}

/* ==========================================================================
   LANGUAGE MODAL CLOSE — modern control
   The theme's orange glyph rendered inside the new circular button at 30x30,
   below the 44px touch floor, and the replacement bars drew transparent
   because `background: currentColor` was being overridden. Rebuilt at the
   theme's own selector depth: a neutral 44px circle with an ink X that turns
   on hover, matching the close affordance used elsewhere.
   ========================================================================== */
.languagepopup .modal-header .lang-close .close,
.languagepopup .lang-close .close {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  padding: 0 !important;
  border: 1px solid var(--ds-border, #DDE3EC) !important;
  border-radius: 50% !important;
  background: var(--ds-white, #fff) !important;
  background-image: none !important;
  color: var(--ds-ink, #001427) !important;
  font-size: 0 !important;
  cursor: pointer;
  transition: background-color 180ms var(--ds-ease, ease),
              border-color 180ms var(--ds-ease, ease),
              color 180ms var(--ds-ease, ease);
}
.languagepopup .modal-header .lang-close .close::before,
.languagepopup .modal-header .lang-close .close::after,
.languagepopup .lang-close .close::before,
.languagepopup .lang-close .close::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 16px !important;
  height: 2px !important;
  margin: -1px 0 0 -8px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  background-image: none !important;
}
.languagepopup .modal-header .lang-close .close::before,
.languagepopup .lang-close .close::before { transform: rotate(45deg) !important; }
.languagepopup .modal-header .lang-close .close::after,
.languagepopup .lang-close .close::after { transform: rotate(-45deg) !important; }

.languagepopup .lang-close .close:hover {
  background: var(--ds-ink, #001427) !important;
  border-color: var(--ds-ink, #001427) !important;
  color: var(--ds-text-inverse, #fff) !important;
}
.languagepopup .lang-close .close:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}

/* The close control sat ~330px short of the panel edge: the header's
   space-between had another child after .lang-close to distribute against, and
   the button itself was absolutely offset 20px left of its own wrapper. Pin
   the wrapper to the end and return the button to flow. */
/* Auto-margin still landed 16px short of the content edge (the header's flex
   gap interacting with space-between), so the control is placed against the
   header's own padding box instead of negotiated through flex. Deterministic,
   and it stays put whatever the title wraps to. */
.languagepopup .modal-header { position: relative; }
.languagepopup .modal-header .lang-close {
  position: absolute !important;
  top: 50% !important;
  right: clamp(1.25rem, 1rem + 1.5vw, 2.5rem) !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
/* Keep the title clear of the control at every width. */
.languagepopup .modal-header .title { padding-right: 60px; }
.languagepopup .modal-header .lang-close .close,
.languagepopup .lang-close .close {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* One gutter token drives both the modal header's padding and the close
   control's offset. Previously each had its own value and they drifted apart
   at every breakpoint — 38px against a 25px padding at 1440, 22 against 25 at
   390, with the title running under the button on mobile. */
.languagepopup .modal-content { --acma-modal-pad: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.languagepopup .modal-header {
  padding-left: var(--acma-modal-pad) !important;
  padding-right: var(--acma-modal-pad) !important;
}
.languagepopup .modal-body {
  padding-left: var(--acma-modal-pad) !important;
  padding-right: var(--acma-modal-pad) !important;
}
.languagepopup .modal-header .lang-close {
  right: var(--acma-modal-pad) !important;
}
.languagepopup .modal-header .title {
  /* The control is offset from the header's border box, so the header's own
     padding already covers that gutter. The title only has to clear the 44px
     control plus a gap -- adding the gutter again cost ~22px of title width
     and wrapped the heading onto a fourth line at 320px. */
  padding-right: calc(44px + var(--ds-space-2, 8px)) !important;
}

/* ==========================================================================
   SERVICE / SOLUTION TEMPLATE — TYPE SYSTEM
   --------------------------------------------------------------------------
   page-service1.php runs 53 published pages and page-solutions3.php another
   18, so the heading treatment here is the treatment most of the site wears.

   Measured at 1440px before this block, one page used:

     h2   32px Roboto  .internal-banner-title
          40px Archivo .section-heading h2
          24px Roboto  .footer-cta-block h2
     h3   32px Archivo .tab-drawer-heading
          24px Roboto  .event-card-section h3
          24px Archivo .article-teaser-title
     h4   32px Roboto  .tab-content-left h4      <- larger than the h2 above it
          28px Roboto  .content-card h4
     ink  #001427 on some, #28282B on others

   Two families and an inverted hierarchy. design-system.css already declares
   the intent -- --ds-font-primary: Roboto for text, --ds-font-display:
   Archivo for headings, and Archivo is loaded in the document head -- but
   style.css sets `font:` shorthands that hardcode Roboto, and a shorthand
   sets the family too. So the intent never reached the legacy templates.

   The scale below is one step per level with no inversions:

     h1   clamp 32 -> 52   hero, once per page
     h2   clamp 28 -> 40   section titles
     h3   clamp 22 -> 28   sub-sections and card group titles
     h4   clamp 18 -> 22   card titles
     h5   16 uppercase     eyebrows
     lead 20/1.55          the line under a section title
     body 18/1.75

   Selectors match the specificity of the rules they replace; sections.css
   loads last, so a tie is enough and nothing here needs !important.
   ========================================================================== */

/* ---- the display family, everywhere a heading appears -------------------- */
/* The event card's title was named as h3 here and layout/event-card renders it
   at whatever level its caller asks for -- level 2 on all six templates that
   use it. So on 45 pages the card's heading matched no rule and inherited
   --ds-text (#28282B) from the body while every other h2 on the same page was
   --ds-ink (#001427): two heading colours, one page. Matched by role rather
   than by tag name. */
.event-card-section .event-card .event-card-section-content .heading-supporter :is(h2, h3, h4),
.internal-banner .internal-banner-content .internal-banner-title,
.custom-tabs .tabs-items .tab-content .tab-content-container .tab-content-left h4,
.custom-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .tab-panel-title,
.event-card-section .event-card .event-card-section-content .heading-supporter h3,
.content-card h4{
  font-family: var(--ds-font-display, "Geist", sans-serif);
  color: var(--ds-ink, #001427);
}

/* ---- h2: section titles ------------------------------------------------- */
.internal-banner .internal-banner-content .internal-banner-title {
  font-size: var(--ds-display-3);
  line-height: var(--ds-leading-snug, 1.3);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: -0.015em;
}

/* ---- h3: sub-section and event titles ----------------------------------- */
.event-card-section .event-card .event-card-section-content .heading-supporter h3 {
  font-size: var(--ds-display-4);
  line-height: var(--ds-leading-snug, 1.3);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: -0.01em;
}

/* The tab drawer heading is a control, not a section title -- it sat at 32px,
   the same size as the panel h4 it opens. */
main :is(section, .section) .tab-drawer-heading {
  font-size: var(--ds-display-5);
  line-height: var(--ds-leading-snug, 1.3);
  color: var(--ds-ink, #001427);
}

/* ---- h4: panel and card titles ------------------------------------------ */
.custom-tabs .tabs-items .tab-content .tab-content-container .tab-content-left h4,
.custom-tabs .tabs-items .tab-content .tab-content-container .tab-content-left .tab-panel-title {
  font-size: var(--ds-display-4);
  line-height: var(--ds-leading-snug, 1.3);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: -0.01em;
}

main :is(section, .section) .content-card h4 {
  font-size: var(--ds-display-5);
  line-height: var(--ds-leading-snug, 1.3);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: -0.005em;
}

/* ---- supporting copy ----------------------------------------------------
   Two elements do the same job -- the line under a section title -- and both
   used to be headings. .internal-banner-subtitle rendered 24px bold ink,
   which competed with the h2 above it; .heading-supporter-text inherited
   18px #28282B from the universal selector. They are one role now. */
.internal-banner .internal-banner-content .internal-banner-subtitle{
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-lede-size);
  line-height: var(--ds-leading-normal);
  font-weight: var(--ds-weight-regular, 400);
  color: var(--ds-text-muted, #5F5A54);
  letter-spacing: 0;
}

/* The intro paragraph sits inside that wrapper and had its own bold ink. */
.internal-banner .internal-banner-content .internal-banner-subtitle :is(p, span, div) {
  font-weight: inherit;
  color: inherit;
}

/* ---- body copy ---------------------------------------------------------- */
main :is(section, .section) .content-card p {
  font-size: var(--ds-text-base, 1.125rem);
  line-height: var(--ds-leading-relaxed, 1.75);
  color: var(--ds-text-muted, #5F5A54);
}

/* ==========================================================================
   SERVICE / SOLUTION TEMPLATE — CARD GRID AND SECTION RHYTHM
   --------------------------------------------------------------------------
   Measured across the range before this block, on the template behind 53
   pages:

     width   container   cards           gap    insights
      768      768       3 cols @ 218px   0px   2 cols x 2 rows
      900      900       3 cols @ 262px   0px   2 cols x 2 rows
     1024     1024       3 cols @ 299px   0px   3 cols x 1 row
     1200     1200       4 cols @ 228px  30px   3 cols x 1 row
     1440     1440       4 cols @ 263px  30px   3 cols x 1 row

   Three faults:

   1. The gap is 0px from 768 to 1199, so cards touch. The widths use
      calc(33.3% - 24.5px) which subtracts a gutter that is not there, and the
      width breakpoints (1599/1199/992) do not line up with the gap
      breakpoints (1599/1199/767/479).
   2. Cards get *narrower* as the viewport grows -- 299px at 1024 becomes
      228px at 1200 -- because the column count jumps from 3 to 4 before there
      is room for it. At 218px "Cloud Performance Optimization" wraps to three
      lines, which is what made the 768-900 band the tallest of any width:
      6,931px against 5,894px at 1440.
   3. The related-insights row holds three cards in a two-column grid from 768
      to 1023, so the third sits alone on a second row and the section runs
      1,717px -- against 960px at 1024.

   Below: one gutter token, a column progression that only ever widens, and
   the carousel treatment extended to cover the tablet band for the
   three-card row, where two columns can never be anything but ragged.
   ========================================================================== */

@media (min-width: 768px) {
  .help-section .content-cards-block .content-cards-list {
    --acma-card-gap: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px var(--acma-card-gap);
    justify-content: stretch;
  }
  /* The legacy per-card percentage widths fight the grid: a grid item still
     honours `width`, so calc(25% - 22.5px) resolved against each card's own
     track and collapsed it to about 77px, with the content wrapping into a
     574px-tall column. The variant selectors carry .cards-four / .cards-three,
     which puts them at (0,5,0) -- the reset has to match that or it silently
     applies to some cards and not others. */
  .help-section .content-cards-block .content-cards-list .content-card,
  .help-section .content-cards-block.cards-four .content-cards-list .content-card,
  .help-section .content-cards-block.cards-three .content-cards-list .content-card,
  .help-section .content-cards-block.cards-two .content-cards-list .content-card {
    width: auto;
    max-width: none;
    flex: initial;
  }
}

@media (min-width: 1024px) {
  .help-section .content-cards-block .content-cards-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Four columns from 1280. Tried 1200 to buy a row back, but the container
   there only yields 226px tracks -- narrower than the 305px the three-column
   layout gives at 1024, which is the exact "cards shrink as the viewport
   grows" fault this block exists to remove. 1280 is the first width where
   four tracks clear 280px. */
@media (min-width: 1280px) {
  .help-section .content-cards-block .content-cards-list {
    --acma-card-gap: 32px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- the three-card article row ------------------------------------------
   Three items in two columns is always one short. Below 1024 it keeps the
   swipe treatment the phone already uses, which holds it to a single row. */
@media (min-width: 768px) and (max-width: 1023px) {
  .related-insights-section .insights-listing-wrapper > ul,
  .related-insights-section .articles-listing-wrapper > ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: var(--ds-space-5, 24px);
    padding-bottom: var(--ds-space-2, 8px);
    scrollbar-width: none;
  }
  .related-insights-section .insights-listing-wrapper > ul::-webkit-scrollbar,
  .related-insights-section .articles-listing-wrapper > ul::-webkit-scrollbar { display: none; }

  .related-insights-section .insights-listing-wrapper > ul > li,
  .related-insights-section .articles-listing-wrapper > ul > li {
    flex: 0 0 58%;
    max-width: 58%;
    width: auto;
    scroll-snap-align: start;
    margin: 0;
  }
}

/* ==========================================================================
   SERVICE TEMPLATE — CAPABILITY CARDS  (layout/content-cards)
   --------------------------------------------------------------------------
   These are the eight things the page is selling, on 24 pages, and they were
   the last card row on the site outside the enclosure system: a flat white
   rectangle with a hairline top rule. Two things were also wrong on their own
   terms -- the title rendered at 32px in a 208px column, so "Troubleshooting"
   ran outside its own card, and there was no gap between the title and the
   copy beneath it.

   Same shell and concentric core as the homepage cards. The title takes
   --ds-display-6 in the four-up grid and --ds-display-5 where there are fewer
   cards and the column is wider.
   ========================================================================== */
.help-section .content-cards-block .content-cards-list .content-card {
  position: relative;
  display: flex;
  height: 100%;
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: box-shadow .5s var(--acma-ease, ease), transform .5s var(--acma-ease, ease);
}
.acma-section--surface .help-section .content-cards-block .content-cards-list .content-card,
.help-section.acma-section--surface .content-cards-block .content-cards-list .content-card {
  background: rgba(255, 255, 255, .55);
}
.help-section .content-cards-block .content-cards-list .content-card:hover,
.help-section .content-cards-block .content-cards-list .content-card:focus-within {
  box-shadow: var(--acma-lift-hover);
  transform: translateY(-3px);
}

/* The accent rule the old design hung under the card is gone; the shell is
   the card's edge now. */
.help-section .content-cards-block .content-cards-list .content-card::before { content: none; }

.help-section .content-cards-block .content-cards-list .content-card .content-card-in {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3, 12px);
  width: 100%;
  padding: var(--ds-space-6, 32px) var(--ds-space-5, 24px);
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core, 20px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6);
}

.help-section .content-cards-block .content-cards-list .content-card .icon-svg {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
/* SVGs here carry no intrinsic size, so both axes have to be given or the
   icon collapses to the 16px replaced-element default. */
.help-section .content-cards-block .content-cards-list .content-card .icon-svg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.help-section .content-cards-block .content-cards-list .content-card :is(h3, h4) {
  margin: 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-6);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: -.01em;
  color: var(--ds-ink, #001427);
  text-wrap: balance;
  /* One title on one page is a single 15-character word in a 208px column. */
  overflow-wrap: anywhere;
}
.help-section .content-cards-block.cards-three .content-cards-list .content-card :is(h3, h4),
.help-section .content-cards-block.cards-two .content-cards-list .content-card :is(h3, h4) {
  font-size: var(--ds-display-5);
}

.help-section .content-cards-block .content-cards-list .content-card :is(p, ul) {
  margin: 0;
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-normal);
}

@media (prefers-reduced-motion: reduce) {
  .help-section .content-cards-block .content-cards-list .content-card { transition: none; }
  .help-section .content-cards-block .content-cards-list .content-card:hover { transform: none; }
}

/* ==========================================================================
   THE HERO CALL TO ACTION
   --------------------------------------------------------------------------
   The banner's only control was a white outline button on unmodified
   photography, which is the least reliable contrast on the page and reads as
   secondary. It is the primary action on 53 pages.
   ========================================================================== */
.banner .wrapper .banner-left .banner-cta {
  background: var(--ds-primary, #B65002);
  border-color: var(--ds-primary, #B65002);
  color: var(--ds-white, #FFFFFF);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.banner .wrapper .banner-left .banner-cta:hover,
.banner .wrapper .banner-left .banner-cta:focus-visible {
  background: var(--ds-primary-hover, #974302);
  border-color: var(--ds-primary-hover, #974302);
  color: var(--ds-white, #FFFFFF);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .banner .wrapper .banner-left .banner-cta { transition: none; }
  .banner .wrapper .banner-left .banner-cta:hover { transform: none; }
}

/* ==========================================================================
   SERVICE TEMPLATE — PROOF BAND
   --------------------------------------------------------------------------
   Sits directly under the hero, where a visitor who has just landed from
   search is deciding whether this vendor is credible. The figures come from
   the front page so all 53 service pages carry the same numbers.

   Ink ground: #FF7F1F measures 7.36:1 there, so the figures can carry the
   brand's brightest orange, which they cannot do anywhere on a light surface
   (2.53:1).
   ========================================================================== */
/* The service pages' proof strip was a second implementation of the homepage's
   band: same four figures, same source, different markup and different CSS --
   so the same client-verified numbers rendered amber here and white there, at
   two different sizes. layout/proof-band now emits one shape for all 54 pages
   and the rules live in section 2 above. The amber won; it was already what
   53 of the 54 did, and it is text-legal on the ink ground. */

/* ==========================================================================
   SERVICE TEMPLATE — FAQ
   --------------------------------------------------------------------------
   Objection handling at the decision point, and the only content on this
   template eligible for an FAQ rich result. Built on <details>, so it works
   with no JavaScript at all and is keyboard-operable for free.
   ========================================================================== */
.acma-svc-faq {
  padding-block: var(--ds-section-y);
  background: var(--ds-surface, #F1F4F9);
}
.acma-svc-faq .acma-section-head { margin-bottom: var(--ds-space-6, 32px); }

/* The FAQ list itself is content/faq now -- one component rendering for the
   homepage and both the service and solution templates. Its .acma-faq__*
   rules live in the homepage block below. Only the section wrapper's own
   ground and padding stay here. */

/* ==========================================================================
   SERVICE / SOLUTION TEMPLATE — TABLET DENSITY
   --------------------------------------------------------------------------
   The eight-card grid is the tallest thing on the page in the tablet band.
   Measured at 768px it runs 1,500px as two columns of four rows -- taller
   than at any other width, and taller than the 1,002px it takes at 1440.
   Three columns there would put cards at 218px, which is what made this band
   the worst case to begin with.

   So the tablet band gets the same swipe treatment the phone already uses:
   one row, eight cards, 400px instead of 1,500px. The related-insights row
   above already switched to this at the same breakpoint, so the two card
   sections behave the same way at the same widths.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .help-section .content-cards-block .content-cards-list {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: var(--ds-space-5, 24px);
    padding-bottom: var(--ds-space-3, 12px);
    scrollbar-width: none;
  }
  .help-section .content-cards-block .content-cards-list::-webkit-scrollbar { display: none; }

  .help-section .content-cards-block .content-cards-list .content-card,
  .help-section .content-cards-block.cards-four .content-cards-list .content-card,
  .help-section .content-cards-block.cards-three .content-cards-list .content-card {
    flex: 0 0 46%;
    max-width: 46%;
    width: auto;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   SERVICE / SOLUTION TEMPLATE — PHONE DENSITY
   --------------------------------------------------------------------------
   The intro section is the tallest on a phone at 1,085px: a stacked image,
   a four-line heading and a description that runs to two full screens on
   some of the 53 pages. The copy is the page's argument, so it is folded
   behind the clamp primitive rather than cut -- the same control already used
   on the tab panels and the industry story slides.
   ========================================================================== */
@media (max-width: 767px) {
  .internal-banner .internal-banner-content .internal-banner-subtitle.acma-clamp {
    --acma-clamp-fade: #FFFFFF;
  }

  /* The stacked intro image was taking a third of the section. */
  .featured-content1 .internal-banner .internal-banner-image .featured-event-section-img img {
    height: 210px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--ds-radius-md, 8px);
  }
}

/* ==========================================================================
   HOMEPAGE — INDUSTRIES
   --------------------------------------------------------------------------
   Sixteen destinations. A card treatment would take a screen and a half for
   what is a label and a link, so these are tiles: one line, a hairline, and a
   hit area that reaches 48px. The grid auto-fits so the row count follows the
   viewport instead of a breakpoint table.
   ========================================================================== */
/* Fixed column counts rather than auto-fill: there are sixteen industries, and
   16 divides evenly by 4 and by 2, so pinning the count avoids the orphan tile
   auto-fill leaves on a five-column row.

   It is a wrapping flex row rather than a grid because the same component also
   carries "the rest of what we do" -- 25 tiles on the services index, 17 on
   solutions -- and a pinned four-column grid put one tile alone on the last
   row with three empty tracks beside it, which is the shape a reader reads as
   a broken layout. A tile that grows takes the row it is on: a full row still
   lands on the four-column rhythm because the basis is exactly one column, and
   a trailing one or two fill the width instead of leaving a hole. `flex-grow`
   with no shrink is what keeps a five-up row from ever forming. */
.acma-tile-grid {
  --acma-tile-cols: 4;
  --acma-tile-gap: var(--ds-space-3, 12px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--acma-tile-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.acma-tile-grid > .acma-tile {
  flex: 1 0 calc((100% - (var(--acma-tile-cols) - 1) * var(--acma-tile-gap)) / var(--acma-tile-cols));
  max-width: 100%;
}
.acma-tile { margin: 0; padding: 0; }
.acma-tile::before { content: none; }

.acma-tile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3, 12px);
  min-height: 52px;
  padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
  border: 1px solid var(--ds-border, #DDE3EC);
  border-radius: var(--ds-radius-md, 8px);
  background: var(--ds-white, #FFFFFF);
  color: var(--ds-ink, #001427);
  font-weight: var(--ds-weight-medium, 500);
  line-height: var(--ds-leading-snug);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.acma-tile__link:hover,
.acma-tile__link:focus-visible {
  border-color: var(--ds-primary, #B65002);
  background: var(--ds-primary-soft, #FDF0E7);
  color: var(--ds-primary-hover, #974302);
  transform: translateY(-1px);
}
.acma-tile__link:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}

/* Chevron from a border so it takes the link's colour in both states. */
.acma-tile__arrow {
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}
.acma-tile__link:hover .acma-tile__arrow {
  opacity: 1;
  transform: rotate(45deg) translate(2px, -2px);
}

/* ==========================================================================
   HOMEPAGE — LATEST INSIGHTS
   ========================================================================== */
.acma-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-6, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.acma-post-grid > li { margin: 0; padding: 0; }
.acma-post-grid > li::before { content: none; }

.acma-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ds-white, #FFFFFF);
  border: 1px solid var(--ds-border, #DDE3EC);
  border-radius: var(--ds-radius-lg, 16px);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.acma-post-card:hover,
.acma-post-card:focus-within {
  border-color: var(--ds-primary, #B65002);
  box-shadow: 0 12px 28px -18px rgba(0, 20, 39, .35);
  transform: translateY(-2px);
}

.acma-post-card__media { display: block; }
/* A fixed 180px height meant the box ratio followed the column: 1.59 in a
   four-up grid, 2.14 in a three-up one, so the same picture was cropped two
   different ways on two pages. A ratio holds it steady, and 16:10 is the shape
   the sources actually are -- content_1_image is 1.57 across all 49 pages that
   have one. */
.acma-post-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.acma-post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2, 8px);
  padding: var(--ds-space-5, 24px);
  flex: 1 1 auto;
}
.acma-post-card__eyebrow {
  font-size: var(--ds-text-2xs, .75rem);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  color: var(--ds-primary, #B65002);
}
.acma-post-card__title {
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-6);
  line-height: var(--ds-leading-snug);
  font-weight: var(--ds-weight-bold, 700);
  color: var(--ds-ink, #001427);
  margin: 0;
}
.acma-post-card__title a { color: inherit; text-decoration: none; }
.acma-post-card__title a:hover { color: var(--ds-primary, #B65002); }
/* The whole card is the target; the title link carries the accessible name. */
.acma-post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.acma-post-card { position: relative; }

.acma-post-card__text {
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted, #5F5A54);
  margin: 0;

  /* The clamp content/post-card always said it had.
     ---------------------------------------------------------------------
     The component documents its excerpt as "Plain text. Clamped in CSS, not
     truncated here". No clamp existed. Three adapters cut the text with
     wp_trim_words() instead -- at 22, 22 and 26 words -- and a word count is
     the wrong unit for a fixed-width box: 26 words is four lines in a
     three-across grid and seven on a phone. So the ellipsis landed
     mid-sentence at one width and left dead space at another, and two cards
     side by side had text blocks of different depths.

     Four lines, measured at every width instead of guessed once. Cards in a
     row now end level, and the ellipsis sits where the line ends.

     -webkit-box is the only cross-browser way to do this; the prefixed
     properties are implemented by Chrome, Edge, Safari and Firefox alike, and
     are the standard spelling rather than a vendor experiment. A browser that
     ignores them shows the full excerpt, which is a longer card and not a
     broken one. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.acma-post-card__meta {
  margin: auto 0 0;
  padding-top: var(--ds-space-3, 12px);
  font-size: var(--ds-text-2xs, .75rem);
  color: var(--ds-faint, #8A837A);
  display: flex;
  gap: 6px;
  align-items: center;
}

/* The "Read all insights" action under the homepage card row. The button is
   an inline-flex anchor, so auto margins do nothing to it until it is
   block-level: `display: flex` keeps its internal icon/label layout exactly as
   it is and only changes how the box itself sits, and `width: fit-content`
   stops it stretching the full row. Centred because it belongs to the three
   cards above it rather than to the section head on the left -- left-aligned
   it read as a fourth item in the row, starting under the first card. */
.acma-section-action {
  display: flex;
  width: fit-content;
  margin: var(--ds-space-6, 32px) auto 0;
}

/* ==========================================================================
   HOMEPAGE — FAQ
   Same shape as the service templates' FAQ so the two read as one component.
   ========================================================================== */
.acma-faq {
  max-width: 60rem;
  border-top: 1px solid var(--ds-border, #DDE3EC);
}
.acma-faq__item { border-bottom: 1px solid var(--ds-border, #DDE3EC); }
.acma-faq__q {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4, 16px);
  min-height: 64px;
  padding: var(--ds-space-4, 16px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-6);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-ui);
  color: var(--ds-ink, #001427);
  transition: color .18s ease;
}
.acma-faq__q::-webkit-details-marker { display: none; }
.acma-faq__q > span { flex: 1 1 auto; }
.acma-faq__q:hover { color: var(--ds-primary, #B65002); }
.acma-faq__q:focus-visible { outline: 2px solid var(--ds-primary, #B65002); outline-offset: 3px; }
.acma-faq__q::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .18s ease;
}
.acma-faq__item[open] > .acma-faq__q::after { transform: translateY(2px) rotate(-135deg); }
/* Was 68ch, which resolves to ~896px in Plus Jakarta Sans and so never bound
   against the 728px answer column: FAQ answers rendered at 89 characters a
   line on the service, industry, product and home templates. */
.acma-faq__a { padding: 0 0 var(--ds-space-5, 24px); max-width: var(--ds-measure, calc(45 * var(--ds-ch, 0.732em))); }
.acma-faq__a p {
  font-size: var(--ds-text-base, 1.125rem);
  line-height: var(--ds-leading-relaxed, 1.75);
  color: var(--ds-text-muted, #5F5A54);
  margin: 0;
}
.acma-faq__a p + p { margin-top: var(--ds-space-3, 12px); }

/* ---- narrower viewports -------------------------------------------------- */
@media (max-width: 1023px) {
  .acma-tile-grid { --acma-tile-cols: 3; }
}

/* The 2-up grid at 768 put three posts on two rows and took the insights
   section to 1,401px -- taller than the same section at 375 (978) and at 1440
   (907). Every other card row on this page carries its swipe treatment to
   1023px; this one stopped at 767. */
@media (max-width: 767px) {
  /* Sixteen tiles two-up rather than one long column. */
  .acma-tile-grid { --acma-tile-cols: 2; --acma-tile-gap: var(--ds-space-2, 8px); }
  .acma-tile__label { overflow-wrap: anywhere; }
  .acma-tile__link { min-height: 48px; padding: 10px var(--ds-space-3, 12px); font-size: var(--ds-text-sm, 1rem); }
}

@media (max-width: 1023px) {
  /* Three posts as a swipe row, matching every other card row on the site. */
  .acma-post-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: var(--ds-space-4, 16px);
    margin-inline: calc(var(--ds-carousel-bleed, 15px) * -1);
    padding-inline: var(--ds-carousel-bleed, 15px);
    scroll-padding-inline: var(--ds-carousel-bleed, 15px);
    padding-bottom: var(--ds-space-2, 8px);
    scrollbar-width: none;
  }
  .acma-post-grid::-webkit-scrollbar { display: none; }
  .acma-post-grid > li { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; }
}

/* Two and a bit cards in view on tablet, one and a bit on a phone. */
@media (min-width: 768px) and (max-width: 1023px) {
  .acma-post-grid > li { flex-basis: 54%; max-width: 54%; }
}

@media (max-width: 767px) {
  /* The ratio carries the height now; the card is narrower here, so it follows. */
  .acma-post-card__media img { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .acma-tile__link,
  .acma-tile__arrow,
  .acma-post-card,
  .acma-faq__q,
  .acma-faq__q::after { transition: none; }
  .acma-tile__link:hover,
  .acma-post-card:hover { transform: none; }
}

/* ==========================================================================
   BREADCRUMB
   --------------------------------------------------------------------------
   Sits between the sticky header and the page's own banner. Kept quiet: it is
   orientation and a way back up, not a feature of the page.
   ========================================================================== */
.acma-breadcrumb {
  background: var(--ds-surface, #F1F4F9);
  border-bottom: 1px solid var(--ds-border, #DDE3EC);
}
.acma-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--ds-space-2, 8px);
  margin: 0;
  padding: var(--ds-space-2, 8px) 0;
  list-style: none;
  font-size: var(--ds-text-xs, .875rem);
  line-height: var(--ds-leading-ui);
}
.acma-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  margin: 0;
  padding: 0;
  color: var(--ds-text-muted, #5F5A54);
}
.acma-breadcrumb__item::before { content: none; }

/* Separator drawn between items rather than appended to each, so the last one
   does not trail a chevron into nothing. */
.acma-breadcrumb__item + .acma-breadcrumb__item::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
  flex: none;
}
.acma-breadcrumb__item a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ds-text-muted, #5F5A54);
  text-decoration: none;
  /* style.css sets a bare `a { font-size: 18px }` (once a `font:` shorthand,
     now longhand tokens), which beats the 14px this list inherits down to its
     links but not to the current-page <span>. So every trail read "Home" at
     18px and the page's own name at 14 -- the first crumb a third larger than
     the last, on every inner page. The size belongs to the trail, not to the
     element type. */
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.acma-breadcrumb__item a:hover,
.acma-breadcrumb__item a:focus-visible {
  color: var(--ds-primary, #B65002);
  text-decoration: underline;
}
.acma-breadcrumb__item [aria-current="page"] {
  color: var(--ds-ink, #001427);
  font-weight: var(--ds-weight-medium, 500);
}

@media (max-width: 767px) {
  /* On a phone the trail can exceed the width; scroll it rather than wrap it
     into two lines above the hero.

     It scrolls to the viewport edge rather than stopping at the container
     inset, and a fade sits over the last few pixels. Cut flush inside the
     gutter, a long title read as text that had simply been truncated -- there
     was nothing saying the row moved. The bleed and the fade are the same two
     devices the card swipe rows and the clamped blocks already use. */
  .acma-breadcrumb { position: relative; }
  .acma-breadcrumb__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    margin-inline: calc(var(--ds-container-pad, 16px) * -1);
    padding-inline: var(--ds-container-pad, 16px);
    scroll-padding-inline: var(--ds-container-pad, 16px);
  }
  .acma-breadcrumb__list::-webkit-scrollbar { display: none; }
  .acma-breadcrumb__item { flex: none; }
  .acma-breadcrumb::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px;
    width: var(--ds-space-8, 48px);
    pointer-events: none;
    background: linear-gradient(to right, rgba(241, 244, 249, 0), var(--ds-surface, #F1F4F9) 78%);
  }
}

/* ==========================================================================
   REDESIGN — SHARED PRIMITIVES
   --------------------------------------------------------------------------
   Three tokens the redesigned sections share, so the treatment is one
   decision rather than three copies of a decision.

   Motion: a single custom easing. The default ease-in-out reads mechanical
   because it decelerates symmetrically; real objects settle. This curve is
   fast out of the gate and long into rest.

   Elevation: diffused ambient shadow rather than a hard drop shadow. A
   spread-out, low-opacity shadow in the brand's own ink reads as light in a
   room; rgba(0,0,0,.3) reads as a sticker on a page.
   ========================================================================== */
:root {
  --acma-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --acma-lift: 0 1px 1px rgba(0, 20, 39, .04),
               0 8px 24px -12px rgba(0, 20, 39, .10),
               0 24px 48px -24px rgba(0, 20, 39, .12);
  /* Close to rest on purpose. The plate is already an object; hover confirms
     that the pointer is on it, it does not announce it. This used to open a
     40px/72px pool against a 24px/48px one at rest, which read as the card
     jumping off the page. */
  --acma-lift-hover: 0 1px 1px rgba(0, 20, 39, .05),
                     0 10px 26px -12px rgba(0, 20, 39, .12),
                     0 26px 52px -26px rgba(0, 20, 39, .14);
  --acma-hairline: rgba(0, 20, 39, .08);
  --acma-tray: rgba(0, 20, 39, .035);
  /* The same bezel, for dark grounds. The two above are navy at 3.5%/8%: they
     tint a light surface and vanish entirely on --ds-ink, which is why the
     plate motif had never reached an ink band. White at the same low alphas
     inverts the relationship without inventing a second material. */
  --acma-hairline-inverse: rgba(255, 255, 255, .14);
  --acma-tray-inverse: rgba(255, 255, 255, .06);
  --acma-radius-shell: 26px;
  --acma-radius-core: 20px;   /* shell radius minus the 6px shell padding */
}

/* The eyebrow becomes a pill: a microscopic badge rather than loose caps text
   floating above a heading with nothing anchoring it. */
.acma-eyebrow--pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--ds-primary-soft, #FDF0E7);
  color: var(--ds-primary-hover, #974302);
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-text-2xs, 0.75rem);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
}

/* ==========================================================================
   REDESIGN — CAPABILITY CARDS (was the alternating feature rows)
   --------------------------------------------------------------------------
   The zigzag is gone. Three peer offerings now sit in one row as equal cards,
   each built as a nested enclosure: an outer shell carrying the ground and
   hairline, an inner plate holding the photograph at a concentric radius.

   Measured before: three alternating rows, 1,443px at 1440px.
   ========================================================================== */

.acma-feature-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, .8rem + 1.6vw, 2rem);
  align-items: stretch;
}

.acma-feature-row {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 6px;
  background: var(--acma-tray);
  border: 1px solid var(--acma-hairline);
  border-radius: var(--acma-radius-shell);
  box-shadow: var(--acma-lift);
  transition: box-shadow .5s var(--acma-ease), transform .5s var(--acma-ease);
}
.acma-feature-row:hover,
.acma-feature-row:focus-within {
  box-shadow: var(--acma-lift-hover);
  transform: translateY(-3px);
}

/* Inner core: its own ground, its own inner highlight, concentric radius. */
.acma-feature-row__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--acma-radius-core);
  background: var(--ds-white, #fff);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6);
  margin: 0 0 6px;
}
.acma-feature-row__plate {
  overflow: hidden;
  border-radius: var(--acma-radius-core);
}
/* A fixed 188px height made the box 2.02:1 against sources that are 1.61:1, so
   `cover` cut a fifth off every one of them. The ratio the pictures already are
   costs nothing to honour. */
.acma-feature-row__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform: scale(1.001);            /* avoids a hairline gap on some GPUs */
  transition: transform .7s var(--acma-ease);
}
/* Removed: the plate already lifts. A 4% zoom over half a second on the
   photograph inside it was a second motion for one hover. */

.acma-feature-row__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3, 12px);
  flex: 1 1 auto;
  padding: var(--ds-space-6, 32px) var(--ds-space-5, 24px) var(--ds-space-5, 24px);
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6);
}

/* The numeral is set large and very light: structure the eye can use to count
   the offerings, without competing with the title. */
.acma-feature-row__index {
  position: absolute;
  top: var(--ds-space-4, 16px);
  right: var(--ds-space-5, 24px);
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-3);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-none);
  letter-spacing: var(--ds-tracking-tighter);
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink, #001427);
  opacity: .07;
  pointer-events: none;
}

.acma-feature-row__title {
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-6);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-snug);
  letter-spacing: -.015em;
  color: var(--ds-ink, #001427);
  margin: 0;
  /* The CMS holds two of these three titles in caps. Normalising here keeps
     the page consistent without editing content the client owns; the source
     string is unchanged for anything else reading it. */
  text-transform: none;
}

/* The tick-in-a-circle bullets were three fussy marks per card competing with
   the icon language everywhere else. A hairline rule per item does the same
   separating job and disappears into the card. */
.acma-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.acma-feature-list li {
  position: relative;
  padding: 10px 0;
  border-top: 1px solid var(--acma-hairline);
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-ui);
}
.acma-feature-list li::before { content: none; }
.acma-feature-list li:last-child { padding-bottom: 0; }

.acma-feature-row__cta { margin-top: auto; align-self: flex-start; }

/* The carousel block earlier in this file sets the track's scroll behaviour,
   but the 3-up grid below it is later in source order and wins the tie on
   `display`. This restates the swipe row after that rule so the track is a
   flex scroller under 1024px, where the carousel block intends it to be. */
@media (max-width: 1023px) {
  .acma-feature-track {
    display: flex;
    grid-template-columns: none;
    gap: var(--ds-space-4, 16px);
  }
}

/* ---- tablet: the same swipe row, two and a bit cards wide --------------- */
@media (max-width: 1023px) and (min-width: 768px) {
  /* Two and a bit cards in view: enough width to read a card, enough overhang
     to show there is a third. */
  .acma-feature-track > .acma-feature-row { flex-basis: 54%; max-width: 54%; }
  .acma-feature-row__media img { height: 200px; }
}

/* ---- phone: the swipe row this section already used --------------------- */
@media (max-width: 767px) {
  /* The track's flex/scroll treatment is set once in the carousel block above;
     only the card's own density changes here. */
  .acma-feature-row { padding: 5px; }
  .acma-feature-row__media img { height: 170px; }
  .acma-feature-row__body { padding: var(--ds-space-5, 24px) var(--ds-space-4, 16px) var(--ds-space-4, 16px); }
  /* Lift and zoom are pointer affordances; on touch they only cost frames. */
  .acma-feature-row:hover { transform: none; box-shadow: var(--acma-lift); }
  .acma-feature-row:hover .acma-feature-row__media img { transform: scale(1.001); }
}

@media (prefers-reduced-motion: reduce) {
  .acma-feature-row,
  .acma-feature-row__media img { transition: none; }
  .acma-feature-row:hover { transform: none; }
  .acma-feature-row:hover .acma-feature-row__media img { transform: scale(1.001); }
}

/* Trademark notice under the partner wall. Set small and quiet -- it is a
   legal note, not a claim -- but on its own line with a hairline above it so
   it reads as belonging to the marks rather than trailing the last row. */
.acma-logo-wall__note {
  margin: var(--ds-space-6, 32px) 0 0;
  padding-top: var(--ds-space-4, 16px);
  border-top: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  /* --ds-faint clears AA on white at 4.68:1, but this note sits on Panel Grey
     where it measured 4.24:1. Muted holds on both grounds. */
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-xs, 0.875rem);
  line-height: var(--ds-leading-ui);
  text-align: center;
}
@media (max-width: 767px) {
  .acma-logo-wall__note { margin-top: var(--ds-space-5, 24px); text-align: left; }
}

/* ==========================================================================
   PRODUCT TABS — enclosure pass
   Three things were still loose after the earlier premium layer. The five
   pills sat directly under the lede as five separate objects rather than one
   control. The panel media was the last unframed image on the page — a
   shadow, but no plate. And the media column was 655px wide holding a 500px
   image, so 155px of the panel was empty while the copy column ran 112px
   taller than the picture beside it.
   ========================================================================== */

/* --- the five pills become one segmented control ------------------------- */
.acma-tabs__tray {
  display: flex;
  margin-top: var(--ds-space-6, 32px);
}
.acma-tabs .acma-tabs__tray .tabs-header-inner {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: clamp(2rem, 1.4rem + 1.6vw, 3.25rem);
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--ds-radius-pill, 999px);
}
/* Inside a tray, each tab's own border is a second frame saying the same
   thing. The tray holds the edge; the tab holds only its state. The :not()
   matters: the earlier layer fills the active tab with ink through an
   !important, and an unqualified reset here is later in the file, so it would
   win and leave the selected tab looking unselected. */
.acma-tabs .acma-tabs__tray .tab-link:not(.active) {
  border-color: transparent !important;
  background: transparent !important;
}
.acma-tabs .acma-tabs__tray .tab-link.active { border-color: var(--ds-ink, #001427) !important; }
/* Hover belongs to the tabs that are not selected. The selected tab is filled
   with ink and its label is white, so painting it white on hover put white
   text on a white ground -- measured rgb(255,255,255) on rgba(255,255,255,.8),
   which is the label disappearing under the pointer. A selected tab has
   nothing left to invite; its shadow already answers the pointer. */
.acma-tabs .acma-tabs__tray .tab-link:not(.active):hover {
  background: rgba(255, 255, 255, .8) !important;
  border-color: transparent !important;
}
.acma-tabs .acma-tabs__tray .tab-link.active {
  box-shadow: 0 1px 2px rgba(0, 20, 39, .12), 0 6px 16px -8px rgba(0, 20, 39, .28);
}

/* --- panel: two columns that end together -------------------------------- */
/* The media column was 655px wide holding a 500px image and the copy column
   460px, so the panel had 155px of nothing in it while the copy ran narrow.
   Fixed shares, media the wider of the two, and both vertically centred. */
/* From 768 up, not 1024. At 768 the two columns stacked -- copy above a
   full-width photo -- and the section ran 1,385px against 904px on desktop,
   the tallest thing on the page at that width. */
@media (min-width: 768px) {
  .acma-tabs .tabs-items .tab-content .tab-content-container {
    align-items: center;
    gap: clamp(1.5rem, .5rem + 3vw, 4rem);
  }
  .acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left {
    flex: 0 1 46%;
    max-width: 46%;
    padding-right: 0;
  }
  .acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-right {
    flex: 0 1 54%;
    max-width: 54%;
  }
}
.acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-right,
.acma-tabs .tabs-items .tab-content .tab-content-container .tab-large-img {
  width: 100%;
  display: block;
}

/* --- panel media: the same nested plate as the cards --------------------- */
.acma-tabs .tabs-items .tab-content .tab-content-container .tab-large-img {
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
}
.acma-tabs .tabs-items .tab-content .tab-content-container .tab-large-img .image-scaling {
  display: block;
  overflow: hidden;
  border-radius: var(--acma-radius-core, 20px);
  background: var(--ds-white, #fff);
}
.acma-tabs .tab-content-container .image-scaling img {
  display: block;
  width: 100%;
  height: auto;
  /* The shell now carries the elevation; a second shadow inside it reads as
     two stacked frames. */
  border-radius: var(--acma-radius-core, 20px) !important;
  box-shadow: none !important;
}

/* The panel was built around an inset screenshot (.tab-small-img, absolutely
   positioned over the photo) and reserved space for it with max-width:500px
   plus min-height:450px on the plate. All five content_4_image_screenshort
   fields are empty, so that inset never renders and the reservation is pure
   slack -- the plate ran ~70px taller than the picture inside it. Released
   here only, scoped to .acma-tabs, since the same selectors serve the tab
   widgets on page-service1 and page-solutions3. */
.acma-tabs .custom-tabs .tabs-items .tab-content .tab-content-container .tab-content-right .tab-large-img {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
}
/* The reveal scaled the photo to 1.5x and relied on AOS adding .aos-animate to
   bring it back. Inside a framed plate that is a 1.5x crop of the composition
   for as long as the class is missing -- and it is missing on every panel the
   visitor has not scrolled to. The tab switch is the transition here. */
.acma-tabs .custom-tabs .tabs-items .tab-content .tab-content-container .tab-content-right .tab-large-img .image-scaling img {
  transform: none;
}

/* An 8px #FF7F1F rule ran across the bottom of every tab panel
   (style.css:3755). Against the redesigned panel it reads as a stray
   underline with nothing above or below it -- the panel already ends where
   the section's padding ends. Removed here only; page-service1 and
   page-solutions3 share that selector and keep it. */
.acma-tabs .custom-tabs .tabs-items .tab-content { border-bottom: 0; }

/* Mobile panel type. With the h4 visible again (see mobile-density.css) the
   panel has three text levels in a 343px column, and the subheader was
   rendering at the same 20px as the heading above it. */
@media (max-width: 767px) {
  .acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-left :is(h5, .tab-panel-lede) {
    /* --ds-text-md was never a token, so this had been falling through to
       its 17px fallback -- the one off-scale heading size left on the site. */
    font-size: var(--ds-display-6) !important;
    line-height: var(--ds-leading-ui);
    margin-bottom: var(--ds-space-3, 12px);
  }
}

/* ==========================================================================
   GHOST BUTTONS ON AN INK GROUND
   .ds-btn--ghost carries --ds-secondary (#0450BD). On white that is fine; on
   the ink ground it is 2.4:1 against #001427 -- and it is the hero's secondary
   action, the most prominent link on the site. On ink the ghost takes white
   text and a hairline, which is what "secondary" means there.
   ========================================================================== */
.acma-hero .ds-btn--ghost,
.acma-section--ink .ds-btn--ghost,
.acma-proof-band .ds-btn--ghost {
  color: var(--ds-text-inverse, #fff);
  border: 1px solid rgba(255, 255, 255, .28);
}
.acma-hero .ds-btn--ghost:hover,
.acma-hero .ds-btn--ghost:focus-visible,
.acma-section--ink .ds-btn--ghost:hover,
.acma-section--ink .ds-btn--ghost:focus-visible,
.acma-proof-band .ds-btn--ghost:hover,
.acma-proof-band .ds-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .55);
  color: var(--ds-text-inverse, #fff);
}

/* ==========================================================================
   HOMEPAGE FAQ — two columns
   The accordion is capped at 60rem for measure, which left 380px of the
   1,140px shell empty down the whole section. The head moves into that column
   and stays with the reader while they scan the questions.
   ========================================================================== */
@media (min-width: 1024px) {
  .acma-faq-section .acma-shell {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
    align-items: start;
  }
  .acma-faq-section .acma-section-head {
    margin-bottom: 0;
    position: sticky;
    /* Clears the fixed header, which is what --ds-scroll-offset (96px) is set
       against elsewhere in this file. */
    top: 120px;
  }
  .acma-faq-section .acma-faq { max-width: none; }
}

/* ==========================================================================
   POST CARDS — the same enclosure as every other card on the page
   These were still the earlier treatment: a 1px border and a 16px radius on a
   flat white ground, next to two rows of bezel-framed cards. Same shell, same
   concentric core, same easing. Shared with page-service1, page-solutions3,
   page-industry_served and the four listing templates, so they all move
   together.
   ========================================================================== */
.acma-post-card {
  padding: 6px;
  overflow: visible;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: box-shadow .5s var(--acma-ease, ease), transform .5s var(--acma-ease, ease);
}
.acma-section--surface .acma-post-card { background: rgba(255, 255, 255, .55); }
.acma-post-card:hover,
.acma-post-card:focus-within {
  border-color: var(--acma-hairline, rgba(0, 20, 39, .08));
  box-shadow: var(--acma-lift-hover);
  transform: translateY(-3px);
}
/* The core: media and body share one rounded white plate inside the shell. */
.acma-post-card__media,
.acma-post-card__body {
  background: var(--ds-white, #fff);
}
.acma-post-card__media {
  overflow: hidden;
  border-radius: var(--acma-radius-core, 20px) var(--acma-radius-core, 20px) 0 0;
}
.acma-post-card__media img { transition: transform .7s var(--acma-ease, ease); }
/* Removed: the plate already lifts. A 4% zoom over half a second on the
   photograph inside it was a second motion for one hover. */
.acma-post-card__body {
  border-radius: 0 0 var(--acma-radius-core, 20px) var(--acma-radius-core, 20px);
}
/* A card with no featured image still needs a rounded top on its only plate. */
.acma-post-card > .acma-post-card__body:first-child {
  border-radius: var(--acma-radius-core, 20px);
}

@media (prefers-reduced-motion: reduce) {
  .acma-post-card,
  .acma-post-card__media img { transition: none; }
  .acma-post-card:hover { transform: none; }
  .acma-post-card:hover .acma-post-card__media img { transform: none; }
}

/* ==========================================================================
   SECTION RHYTHM  (upgrade.md, D7)
   --------------------------------------------------------------------------
   Measured across 21 pages at 375 / 768 / 1440 before this block: 36 distinct
   top/bottom padding pairs. The homepage ran 104/104, inner pages 96/104,
   listings 32/128, the partner wall 96/192, the leadership rows 96/0, the
   service FAQ 81.28/81.28 -- values that came from whichever template was
   being worked on that day rather than from a decision.

   Every full-width content section on the site now takes its padding from
   --ds-section-y. This is the whole list, in one place, which is what D7 asks
   for: the rhythm is a token applied once, not a value repeated per template.

   Deliberately excluded, because 0 is correct for them: .banner and
   .acma-hero (their own internal padding sets their height), .crumbs (a rule
   under the header), and .contactus-section (a form that carries its own).

   Selectors are prefixed with `main` to clear the (0,2,0) legacy rules in
   style.css without reaching for !important.
   ========================================================================== */
main :is(
  .accordion-section,
  .all-in-one-solutions-section,
  .articles-list-section,
  .content-slider-section,
  .event-card-section,
  .featured-content1,
  .help-section,
  .home-partner-section,
  .inside-section,
  .insights-details-content-wrapper,
  .job-list,
  .leadership-section,
  .related-insights-section,
  .request-demo-section,
  .tab-content-section,
  .three_columns,
  .faqs-section,
  .acma-svc-faq
) {
  padding-block: var(--ds-section-y);
}

/* Bands rather than sections: a strip of figures, a single block of legal
   copy. Shorter on purpose, and still from the token. */
main :is(.acma-proof-band, .general-cms-block) {
  padding-block: var(--ds-section-y-tight);
}

/* Two sections that share a ground have no visible edge between them, so the
   full gap on both sides reads as a hole rather than a separation. Halve the
   boundary. Written with :has(), which every browser in the support matrix
   has shipped since 2023; where it is missing the sections simply keep the
   full gap, which is the pre-existing behaviour. */
@supports selector(:has(*)) {
  main .bg-active + .bg-active,
  main .acma-section--surface + .acma-section--surface {
    padding-top: calc(var(--ds-section-y) * .5);
  }
  main :is(.bg-active, .acma-section--surface):has(+ .bg-active),
  main .acma-section--surface:has(+ .acma-section--surface) {
    padding-bottom: calc(var(--ds-section-y) * .5);
  }
}

/* Three sections still declared their own padding at a specificity the list
   above cannot reach without !important. Matched here at their own weight. */
main .insights-details .insights-details-content-wrapper { padding-top: var(--ds-section-y); }
main .articles-list-section.related-insights-section     { padding-block: var(--ds-section-y); }

main .related-insights-section                           { padding-bottom: var(--ds-section-y); }

/* Mobile section padding had three sources: `main > section` at 40/32 in
   mobile-density.css, a per-section 32px step in style.css, and a
   `.related-insights-section:not(.articles-list-section)` bottom of 40px.
   The token's ramp is solved to land on 40px at 375, so all three said
   roughly the same thing in three places. These two match the specificity
   that was still winning, so the token is what actually applies. */
@media (max-width: 991px) {
  main .related-insights-section:not(.articles-list-section) {
    padding-bottom: var(--ds-section-y);
  }
}

/* ==========================================================================
   PAGE BANNER
   style.css:3310 sets `background-size: 100% 100% !important`, which stretches
   the photograph to the band's box instead of filling it. On a 1440x395 band
   a 1920x1080 source is squashed to 73% of its height -- faces and horizons
   visibly compressed. `cover` fills the same box, keeps the aspect ratio, and
   crops the overflow, which is what the design intended.
   ========================================================================== */
main .banner {
  background-size: cover !important;
  background-position: center center;
}

/* The photograph is an <img> now (see layout/page-banner) rather than an
   inline background, so that the preload scanner can find the LCP element and
   a phone can be given a phone-sized file. It has to paint where the
   background used to: behind the ::before gradient, and filling the band the
   same way `background-size: cover; background-position: center center` did.

   The z-index pair is load-bearing. Both the image and ::before are absolutely
   positioned children of the same box, so with `z-index: auto` on each they
   would paint in tree order -- the image last, over the gradient. Naming the
   two layers puts them back in the order the design has always had. */
.banner .banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
.banner::before { z-index: 1; }
/* And the copy above both. It used to sit in the default layer and still won,
   because nothing else in the band was positioned; with a photograph and a
   gradient now stacked underneath it, its place has to be stated. */
.banner > .wrapper {
  position: relative;
  z-index: 2;
}
/* Three legacy banner variants in style.css frame their picture `left bottom`
   rather than the `center center` this band otherwise uses. That was a
   background-position; on an <img> the equivalent is object-position, and
   without it /legal-notice/ re-cropped. */
.banner.legal_notice_banner .banner__bg,
.banner.banner-articles-list .banner__bg,
.banner.banner-search .banner__bg {
  object-position: left bottom;
}

/* The card's width is a hand-written twelve-column calc in style.css that
   hardcodes the container's gutter -- `min(1616px, 100vw) - 64px`, where 64 is
   two 32px gutters. Since .wrapper took --ds-container-pad in Phase X the
   gutter is 80px at 1600 and up, so the three cards computed 501px each inside
   a 1,456px track and **overlapped their neighbours by 5px**: the gap the grid
   declares disappeared entirely on a wide monitor. Measured at 1600, 1920 and
   2560; correct below that only by coincidence. The grid already states the
   track, so the card does not need to state a width at all. */
.icon-text-cards-section .icon-text-cards-block .icon-text-card{
  width: auto;
  max-width: none;
}

/* ==========================================================================
   ICON CARDS  (layout/icon-cards)
   The band now renders through one component on 25 pages. Two things had to
   follow it: the card heading is an <h3> rather than an <h4>, because the
   section's own title is the h2 and skipping a level put a hole in the
   document outline -- so it needs the h4's size back, from the token; and the
   cards were flat --ds-surface rectangles with a 450px min-height, which left
   a third of each card empty on the shorter ones.
   ========================================================================== */
.icon-text-cards-section .icon-text-cards-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, .8rem + 1.6vw, 2rem);
  align-items: stretch;
}

.icon-text-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4, 16px);
  /* Content sets the height now; equal-height comes from the grid. */
  min-height: 0;
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: box-shadow .5s var(--acma-ease, ease), transform .5s var(--acma-ease, ease);
}
.icon-text-card:hover,
.icon-text-card:focus-within {
  box-shadow: var(--acma-lift-hover);
  transform: translateY(-3px);
}

/* Inner core, concentric with the shell. */
.icon-text-card > :is(.icon-svg, h3, h4, p, ul) { position: relative; z-index: 1; }
.icon-text-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  /* style.css already draws a ::before on this card: a 6px gradient bar at the
     bottom, `height: 6px; width: 100%; left: 0; bottom: 0`. This rule loads
     later and won the background and the insets, but not the width and height
     -- so the inner plate rendered as a 361x6px white bar pinned to the top of
     the card and hanging 10px past its right edge. That is the white line, on
     every industry, product and solution page that carries these cards. The
     four legacy declarations have to be unset by name for `inset` to govern. */
  width: auto;
  height: auto;
  right: 6px;
  bottom: 6px;
  border-radius: var(--acma-radius-core, 20px);
  background: var(--ds-white, #fff);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6);
}
.icon-text-card { position: relative; }

/* ui-polish.css sizes this box 80x80. Padding it with the default
   border-box left a 16px content box, and `img { max-width: 100% }` then
   crushed the 52px icon into it. content-box keeps the padding outside the
   declared size. */
.icon-text-card .icon-svg {
  box-sizing: content-box;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: var(--ds-space-6, 32px) var(--ds-space-6, 32px) 0;
}
/* These marks are SVGs with no intrinsic width or height, so `width: auto`
   resolves to the CSS default of 16px for a replaced element and the icon
   collapses to a sliver. Both axes have to be given. */
.icon-text-card .icon-svg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.icon-text-card :is(h3, h4) {
  margin: 0;
  padding: 0 var(--ds-space-6, 32px);
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-5);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  color: var(--ds-ink, #001427);
  text-wrap: balance;
}
.icon-text-card :is(p, ul) {
  margin: 0;
  padding: 0 var(--ds-space-6, 32px) var(--ds-space-6, 32px);
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-normal);
}
.icon-text-card ul { padding-left: calc(var(--ds-space-6, 32px) + 1.1em); }

/* Below 1024 the cards are a swipe row, the same treatment every other card
   row on the site uses. A 2-up grid at 768 wrapped the third card onto its own
   line and took this section to 1,137px -- taller than the same section at 375
   (563) and at 1440 (663), which is always a breakpoint nobody looked at. */
@media (max-width: 1023px) {
  .icon-text-cards-section .icon-text-cards-block {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: var(--ds-space-4, 16px);
    /* No edge bleed here. This block sits inside .wrapper, whose horizontal
       padding is not --ds-container-pad, and pulling the row out by the wrong
       variable is what produced page-level overflow twice before on this
       project. The row scrolls inside the wrapper instead. */
    padding-bottom: var(--ds-space-2, 8px);
    scrollbar-width: none;
  }
  .icon-text-cards-section .icon-text-cards-block::-webkit-scrollbar { display: none; }
  .icon-text-card { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .icon-text-card { flex-basis: 54%; max-width: 54%; }
}
@media (max-width: 767px) {
  .icon-text-card { padding: 5px; }
  .icon-text-card .icon-svg { width: 44px; height: 44px; padding: var(--ds-space-5, 24px) var(--ds-space-5, 24px) 0; }
  .icon-text-card :is(h3, h4) { padding-inline: var(--ds-space-5, 24px); }
  .icon-text-card :is(p, ul) { padding: 0 var(--ds-space-5, 24px) var(--ds-space-5, 24px); }
  .icon-text-card:hover { transform: none; box-shadow: var(--acma-lift); }
}
@media (prefers-reduced-motion: reduce) {
  .icon-text-card { transition: none; }
  .icon-text-card:hover { transform: none; }
}

/* ==========================================================================
   INTRO BAND  (layout/intro)
   The copy column was 459px against a 651px picture at 1440, so the block
   that carries the page's argument ran 727px tall next to an image 416px
   tall. The text is the substance here; give it the wider share.
   ========================================================================== */
@media (min-width: 1024px) {
  .featured-content1 .internal-banner {
    gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    align-items: center;
  }
  .featured-content1 .internal-banner .internal-banner-content {
    flex: 1 1 55%;
    max-width: 55%;
  }
  .featured-content1 .internal-banner .internal-banner-image {
    flex: 1 1 45%;
    max-width: 45%;
  }
}
/* The photograph joins the enclosure system: a shell with the ground and
   hairline, the picture on a concentric plate inside it. */
.featured-content1 .internal-banner-image .featured-event-section-img {
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
}
/* The plate holds the shape; the file does not get to decide it.
   `height: auto` let each source dictate the slot, which is fine while every
   source agrees -- and 49 of the 52 pages carrying content_1_image use the
   same 873x557 (1.57:1) crop. Three do not: About Us, ConsultPro and AcmaCare
   point the field at a 3.18:1 page-banner strip, and on a content plate that
   rendered as a letterbox sliver with the subject shoved to one side and dead
   ground beside it.
   Pinning the plate to the ratio the other 49 already use crops those three to
   fit and leaves the rest untouched -- 1.57 into 1.57 crops nothing. It also
   means an editor dropping any shape in the field gets a sane result rather
   than a broken section, which is the part worth having. */
.featured-content1 .internal-banner-image .featured-event-section-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 873 / 557;
  object-fit: cover;
  border-radius: var(--acma-radius-core, 20px);
}

/* The thank-you card carries two actions now: home, and the offices, for
   someone who has just converted and would rather not wait. */
.thankyou-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3, 12px);
}

/* ==========================================================================
   INTRO BAND — THE DIAGRAM VARIANT  (.internal-banner--diagram)
   --------------------------------------------------------------------------
   The diagram sits beside the copy, in the media column, like every other
   picture in this band. It differs from a photograph in one way only: it is
   never cropped. `object-fit: contain` at the drawing's own 873:557, on the
   Console Navy the illustrations are drawn on, so the plate reads as one panel
   whatever height the row settles at.

   The drawings are typeset for this width. A label renders at
   labelPx x (slot / 873), and the slot is 520px at 1440 -- so the artwork
   carries 17px labels to land at 10px on screen, not the 10px that would
   render at 6px. See docs/image-ratios.md.
   ========================================================================== */
.featured-content1 .internal-banner--diagram .featured-event-section-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 873 / 557;
  object-fit: contain;
  background: var(--ds-ink, #001427);
}

/* A 4px #B65002 rule ran under the intro on all 49 pages that use it. It was
   the separator between two white sections back when they sat 32px apart;
   with the tokenised rhythm the space is the separator, and the rule reads as
   an underline with nothing above it -- the same leftover removed from the
   product tab panel. */
main .featured-content1 .internal-banner::after { content: none; }

/* Tiles in a row stretch with the row: the <li> did, but the <a> inside it
   kept its own height, so a tile whose label wraps to two lines left the ones
   beside it visibly short. */
.acma-tile { display: flex; }
.acma-tile__link { flex: 1 1 auto; }

/* ==========================================================================
   CASE-STUDY CARD  (layout/event-card)
   The one image left on the service page sitting flat on the ground while
   every other picture -- the intro, the tab panel, the post cards -- is on a
   plate. Same shell and concentric core.
   ========================================================================== */
.event-card-section .event-card .event-card-wrapper .event-card-section-img {
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  overflow: hidden;
}
.acma-section--surface .event-card .event-card-section-img,
.event-card-section.acma-section--surface .event-card .event-card-section-img {
  background: rgba(255, 255, 255, .55);
}
.event-card-section .event-card .event-card-wrapper .event-card-section-img img {
  display: block;
  width: 100%;
  height: auto;
  /* The legacy rule pads the image 38px on the right, which inside a plate
     reads as the picture failing to fill its own frame. */
  padding: 0;
  border-radius: var(--acma-radius-core, 20px);
}

/* The action is a real button now that it has somewhere to go. The legacy
   chain is (0,5,0) with a `padding: 10px 14px 10px 0` and an arrow drawn as a
   ::after background image, so a shorter selector left the label flush
   against the pill's left edge with the old glyph sitting on top of it. This
   matches that weight and retires the glyph -- the button is the affordance. */
.event-card-section .event-card .event-card-section-content .heading-supporter .btn-connect::after,
.event-card-section .event-card .event-card-section-content .heading-supporter .btn-connect::before {
  content: none;
}
.event-card-section .event-card .event-card-section-content .heading-supporter .btn-connect {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  min-height: 48px;
  margin-top: var(--ds-space-5, 24px);
  padding: var(--ds-space-3, 12px) var(--ds-space-6, 32px);
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-primary, #B65002);
  color: var(--ds-text-inverse, #fff);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-semibold, 600);
  letter-spacing: var(--ds-tracking-wide, .03em);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s var(--acma-ease, ease), transform .3s var(--acma-ease, ease);
}
.event-card-section .event-card .event-card-section-content .heading-supporter .btn-connect:hover,
.event-card-section .event-card .event-card-section-content .heading-supporter .btn-connect:focus-visible {
  background: var(--ds-primary-hover, #974302);
  color: var(--ds-text-inverse, #fff);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .event-card-section .event-card .event-card-section-content .heading-supporter .btn-connect { transition: none; }
  .event-card-section .event-card .event-card-section-content .heading-supporter .btn-connect:hover { transform: none; }
}

/* ==========================================================================
   DESKTOP NAV — the rule above the menu row
   style.css puts `border-top: 1px solid #001427` on the nav's <ul>, so a dark
   line ran the width of the menu between the utility row and the links. In
   the sticky header, where the utility row is gone, it reads as a stray rule
   floating above the navigation with nothing on the other side of it.
   ========================================================================== */
/* Two rules, one per header: style.css:8998 gives the home header's nav a
   #F1F4F9 top border (near-invisible on white) and the inner header's a
   #001427 one. Both go, so the two headers agree. */
header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul,
header.home-header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul {
  border-top: 0;
}

/* ==========================================================================
   WHO IS IT FOR  (layout/accordion)
   --------------------------------------------------------------------------
   Replaces the black-to-orange gradient band on the nine product pages. The
   old section painted linear-gradient(90deg, #000, #FF7F1F) and set its closed
   items in grey, so headings like "Logistics Companies" sat at roughly 1.5:1
   on #FF7F1F. #FF7F1F cannot carry text anywhere (2.53:1 on white), which is
   why the mobile audit had already replaced this ground below 768px; it is
   replaced at every width now.

   Two columns that end together, so a nine-item list no longer leaves 400px
   of empty ground under a fixed-height picture.
   ========================================================================== */
.acma-audience__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: start;
}
/* Nine collapsed items make the copy column much taller than the picture, so
   a centred image leaves dead ground under it and scrolls out of view while
   the reader is still opening rows. Sticky keeps it beside them. */
@media (min-width: 1024px) {
  .acma-audience__media {
    position: sticky;
    top: 120px;
  }
}

.acma-audience .acma-section-head { margin-bottom: var(--ds-space-6, 32px); }

.acma-audience__list { border-top: 1px solid rgba(255, 255, 255, .14); }

.acma-audience__item { border-bottom: 1px solid rgba(255, 255, 255, .14); }

.acma-audience__q {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4, 16px);
  min-height: 56px;
  padding: var(--ds-space-3, 12px) 0;
  cursor: pointer;
  list-style: none;
}
.acma-audience__q::-webkit-details-marker { display: none; }
.acma-audience__q:focus-visible {
  outline: 2px solid var(--ds-primary-vivid, #FF7F1F);
  outline-offset: 3px;
}

.acma-audience__label {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-5);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: -.01em;
  /* On ink, closed and open differ by opacity rather than by hue, so nothing
     ever drops below the contrast floor the way grey-on-orange did. */
  color: rgba(255, 255, 255, .72);
  transition: color .3s var(--acma-ease, ease);
}
.acma-audience__q:hover .acma-audience__label,
.acma-audience__item[open] > .acma-audience__q .acma-audience__label {
  color: var(--ds-text-inverse, #fff);
}

/* Chevron drawn from borders so it takes the label's colour in every state. */
.acma-audience__q::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: rgba(255, 255, 255, .55);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .3s var(--acma-ease, ease), color .3s var(--acma-ease, ease);
}
.acma-audience__item[open] > .acma-audience__q::after {
  transform: translateY(2px) rotate(-135deg);
  color: var(--ds-primary-vivid, #FF7F1F);
}

.acma-audience__a {
  padding: 0 0 var(--ds-space-5, 24px);
  max-width: calc(60 * var(--ds-ch));
}
.acma-audience__a p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-normal);
}
.acma-audience__a p + p { margin-top: var(--ds-space-3, 12px); }

/* The image joins the enclosure system, on a shell tuned for a dark ground. */
.acma-audience__plate {
  padding: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 32px 64px -28px rgba(0, 0, 0, .6);
}
.acma-audience__plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--acma-radius-core, 20px);
}

@media (max-width: 1023px) {
  .acma-audience__grid { grid-template-columns: minmax(0, 1fr); }
  /* Picture first on a phone: it says what the section is about before nine
     collapsed labels do. Capped, because at 768 a full-width plate is 700px
     of picture before the reader reaches a single label -- which is what made
     this section taller at 768 (1,459px) than at 1440 (1,006px). */
  .acma-audience__media { order: -1; max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .acma-audience__label,
  .acma-audience__q::after { transition: none; }
}

/* .acma-svc-faq paints --ds-surface unconditionally. On page-solutions3.php
   the section above it is already surface, so the FAQ needs the white side of
   the alternation; this is the opt-out. */
.acma-svc-faq.acma-svc-faq--plain { background: transparent; }

/* ==========================================================================
   MEDIA COLUMNS THAT END BEFORE THEIR COPY
   The intro band and the tab panel both put a picture beside a copy column
   that is routinely twice its height -- 903px of copy against 320px of image
   on /professional-solutions/mailing-and-collaboration/. Centred, the picture
   leaves dead ground above and below it and scrolls out of view while the
   reader is still in the paragraph it illustrates. Sticky uses that space and
   keeps the image beside the text it belongs to, the same treatment the
   audience list uses.
   ========================================================================== */
/* Measured across fourteen pages carrying this band at 1440: the plate was a
   fixed 534x346 whatever the copy did, and the copy ran 283 to 610. On ten of
   the fourteen the picture stopped 150-240px short of the column beside it and
   left a hole in the corner of the section -- the shape a reader reads as an
   image that failed to load. Sticky did not cover it either: a 180px delta on
   a 900px viewport gives the plate no travel to stick through, so the picture
   simply sat at the top of a column it did not fill.

   The plate takes the height of the row instead, between a 346px floor -- the
   height it used to be, so the four short-copy pages do not shrink it -- and a
   620px cap, so a long page does not turn a supporting photograph into a wall.
   Past the cap it sticks, which is the case the sticky rule was written for
   and the only one where it does anything. */
@media (min-width: 1024px) {
  /* Centred, not stretched, and the picture keeps its own ratio.
     Stretching it filled the column but cropped with `object-fit: cover`, and
     measured that cost 36-44% of the picture on every page whose copy runs
     long -- which is most of them. On /disaster-recovery/ it cut the words
     baked into the image in half ("Disaste" / "Recover"), and on the rest it
     cut the subject. A hole is a blemish; a photograph with its subject
     removed is worse. Centring splits the leftover height above and below the
     plate -- 75 to 120px each on the pages that have any -- which reads as
     deliberate rather than as an image that failed to load. */
  .featured-content1 .internal-banner { align-items: center; }
  /* The column carries the floor and takes the row's height from the stretch;
     the plate fills it and the picture fills the plate. Deliberately block
     rather than flex the whole way down: as a flex row holding a `width: 100%`
     replaced element with `flex: 1 1 auto`, the plate's hypothetical height
     came from the image's pre-shrink intrinsic width, which on the one image
     here that is lazy -- and therefore carries WordPress's `sizes="auto"` --
     resolved to 1,514px and took the section with it. A definite height chain
     has nothing to guess at. */
  .featured-content1 .internal-banner:not(.internal-banner--diagram) .internal-banner-image {
    display: block;
  }
  .featured-content1 .internal-banner:not(.internal-banner--diagram) .internal-banner-image .featured-event-section-img {
    position: static;
    display: block;
    box-sizing: border-box;
    height: auto;
  }
  /* The ratio is what set the fixed height; the plate sets it now, and the
     crop keeps the subject centred at whatever height the row asks for. */
  /* 873:557 is the crop 49 of the 52 pages carrying this band already use, so
     on those `cover` discards nothing. The three that point the field at a
     3.18:1 banner strip still crop, and are listed in docs/image-ratios.md. */
  .featured-content1 .internal-banner:not(.internal-banner--diagram) .internal-banner-image .featured-event-section-img img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 873 / 557;
    object-fit: cover;
  }

  .acma-tabs .tabs-items .tab-content .tab-content-container { align-items: start; }
  .acma-tabs .tabs-items .tab-content .tab-content-container .tab-content-right {
    position: sticky;
    top: 120px;
  }
}

/* ==========================================================================
   COOKIE NOTICE CONTROLS
   The three controls were anchors: the close X carried href="javascript:" and
   no text, so it had no accessible name and was not a link; the accept and
   reject choices had no href at all, so neither could be reached from the
   keyboard. They are <button>s now, which needs the UA chrome reset and a
   real hit area -- the close collapsed to 12x2px on the anchor's styling.

   The two choice buttons are the system button now and are styled in
   style.css beside the rest of the notice, so only the close needs anything
   here.
   ========================================================================== */
.cookie-sec :is(.close-btn, .cookie-btn) {
  font-family: inherit;
  cursor: pointer;
}
.cookie-sec .close-btn {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  border-radius: var(--ds-radius-md, 8px);
  transition: background-color .2s var(--acma-ease, ease);
}
.cookie-sec .close-btn:hover { background: rgba(0, 20, 39, .06); }
.cookie-sec :is(.close-btn, .cookie-btn):focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}

/* ==========================================================================
   STORY SLIDER  (layout/story-slider)
   --------------------------------------------------------------------------
   The media column was the wider of the two -- 550px of photograph against
   700px of the argument the section exists to make -- and the picture was the
   only unframed image left on the page, so a portrait crop ran 950px tall and
   set the height of the section (1,392px at 1440). The copy takes the wider
   share now, and the photograph is on a plate with a capped height.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Two columns for the opening, full width for the cards.
     ------------------------------------------------------------------------
     Measured at 1440 before this: the track sat at 1,444px -- the tallest of
     eleven stories -- while the shortest was 881, so one slide carried 563px
     of nothing. Inside a slide the picture was 378px in a 1,444px column,
     which is the dead gap you could see.

     The card list was the whole variable: 213px on the shortest story, 781 on
     the tallest, two-up inside a 60% column. Everything around it is fixed --
     an 83px title, a 29px label, a 115px paragraph. So the list comes out of
     the column and takes the full width, where it is four-up and about half as
     tall, and the picture is left beside an opening paragraph it can actually
     match.

     The old rule made .slider-image `position: sticky`, which the rebuild
     makes pointless -- there is no tall column left for the picture to travel
     down. It is worse than pointless: `.slick-list` is `overflow: hidden`,
     which IS a scroll container, so sticky engages and offsets the image
     inside its own grid row. A second copy of that rule lived further down
     this file and did exactly that; both are gone. */
  .content-slider-section .case-study-slider .slider {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: start;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
    row-gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  }
  /* A grid item defaults to `min-width: auto`, which means it will not shrink
     below its content's intrinsic width -- and the content here is a
     photograph. At 1920 and above `sizes` picks a 768px or 1024px source, so
     the media column refused to go under about 764px inside a 627px track and
     spilled 137px straight across the opening paragraph. Measured on
     /industry_served/e-commerce-and-retail/, whose illustration is the widest
     asset in the set, but the mechanism was in every story.

     It did not show below 1920 only because the smaller source happened to fit
     the column. `min-width: 0` is the usual half of this fix and is kept, but
     on its own it changed nothing here -- measured, the column stayed 764px in
     a 582px track. `max-width: 100%` is what actually binds a grid item to its
     track, and with it the column measures 582 and the overlap is gone. */
  .content-slider-section .case-study-slider .slider > * {
    min-width: 0;
    max-width: 100%;
  }
  .content-slider-section .case-study-slider .slider .slider-image { grid-column: 1; }
  .content-slider-section .case-study-slider .slider .slider-content { grid-column: 2; }
  /* The cards span both tracks on their own row. */
  .content-slider-section .case-study-slider .slider .slider-detail {
    grid-column: 1 / -1;
  }
  /* Across the full width instead of two across 60%. Counted over four
     industry pages the lists hold four, five or six cards, and five is much
     the most common -- 22 of 36 -- which is the one count a four-column grid
     handles worst: four across and one alone with three empty tracks beside
     it. Three columns takes 5 to 3+2 and 6 to 3+3, and only an exact four
     wants a fourth track. */
  .content-slider-section .case-study-slider .slider .slider-detail .acma-deflist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Exactly four items: the fourth child is also the last. A browser without
   :has() keeps the three-column default, which is the safe side of the
   choice. */
@media (min-width: 1280px) {
  .content-slider-section .case-study-slider .slider .slider-detail .acma-deflist:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Between 1024 and 1280 there is not room for a fourth track -- it would put
   the cards at about 244px each -- but three columns leaves a four-item list
   as 3+1, one card alone with two empty tracks beside it. Measured on
   /education-and-e-learning/, which is the page that carries four-item lists.
   Two columns is the divisor that comes out even at this width, and 488px a
   card is comfortable rather than cramped. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .content-slider-section .case-study-slider .slider .slider-detail .acma-deflist:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.content-slider-section .slider-image__plate {
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  /* The plate does the clipping. Relying on a radius on the <img> alone left
     the plate's own rounded inner corner visible around the picture's tighter
     one -- measured, the image resolved to 8px inside a 26px plate, because
     `.content-slider-section .slider .slider-image img` sets
     var(--ds-radius-md), and that token is 8px at every width. Clipping here
     makes the curve concentric by construction and the image's own radius a
     belt-and-braces rather than the thing holding it together. */
  overflow: hidden;
}
/* Matching `.content-slider-section .slider .slider-image img` at (0,3,1), or
   the 8px token wins and the corners come apart again. */
.content-slider-section .slider .slider-image__plate img,
.content-slider-section .slider-image__plate img {
  display: block;
  width: 100%;
  /* Was an uncropped portrait at 950px. A 4:3 window is the same picture at a
     height that does not decide the section's. */
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: var(--acma-radius-core, 20px);
}

/* The dots and arrows sat alone under the copy column, disconnected from the
   thing they page through. Centre them under the whole slide with room above.

   `position: static` is the part that makes the centring true. style.css pins
   this row `position: absolute; bottom: 0; left: 50%; margin-left: 40px`, which
   survived the first attempt at this rule: measured at 1440 the control ran
   735-1151 against a slide centred on 720, so it sat 223px right of the thing
   it pages, and the `margin-top` had no effect on an absolutely positioned
   box. */
.content-slider-section .case-study-slider-main .news_arrows {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-4, 16px);
  margin: var(--ds-space-7, 40px) auto 0;
}

/* The paging dots were the whole control: a 15x15 button with a 5px margin,
   which is a 15px target on a page that can carry ten of them. WCAG 2.2 AA
   asks for 24, and this site's own floor is that every target clears it.
   The button is the target now and the dot is drawn inside it -- 24px wide so
   ten still fit across a 390px phone, and the full 44px tall, because vertical
   room in this row is free. */
.content-slider-section .case-study-slider-main .news_arrows .news_dots ul {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1, 4px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.content-slider-section .case-study-slider-main .news_arrows .news_dots ul li {
  line-height: 0;
}
.content-slider-section .case-study-slider-main .news_arrows .news_dots ul li button {
  position: relative;
  display: block;
  width: 24px;
  height: 44px;
  min-width: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-sm, 4px);
  background: transparent;
  font-size: 0;
  cursor: pointer;
}
.content-slider-section .case-study-slider-main .news_arrows .news_dots ul li button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ds-border-strong, #C3CCDA);
  transform: translate(-50%, -50%);
  transition: background-color var(--ds-transition, 180ms ease),
              width var(--ds-transition, 180ms ease);
}
.content-slider-section .case-study-slider-main .news_arrows .news_dots ul li button:hover::after {
  background: var(--ds-text-muted, #5F5A54);
}
/* The current slide reads as a bar rather than a brighter dot: at 10px the
   difference between two circle fills is the kind of state you have to look
   for, and the dots are the only thing saying where in ten stories you are. */
.content-slider-section .case-study-slider-main .news_arrows .news_dots ul li.slick-active button::after {
  width: 18px;
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-primary, #B65002);
}
.content-slider-section .case-study-slider-main .news_arrows .news_dots ul li button:focus-visible {
  outline: 2px solid var(--ds-secondary, #0450BD);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .content-slider-section .case-study-slider-main .news_arrows .news_dots ul li button::after { transition: none; }
}

@media (max-width: 1023px) {
  .content-slider-section .slider-image__plate { padding: 5px; }
  .content-slider-section .slider-image__plate img { aspect-ratio: 16 / 10; }
  .content-slider-section .case-study-slider .slider .slider-content { padding-top: var(--ds-space-5, 24px); }
}

/* ==========================================================================
   FOOTER "MORE LINKS" TOGGLE
   Was an <a data-bs-toggle="collapse" href="#footermorelinks">: a Bootstrap 5
   attribute against a Bootstrap 4 bundle that ignored it, on an anchor that
   would have jumped the page if custom.js had not been the thing actually
   driving it. It is a <button> now and needs the UA chrome reset.
   ========================================================================== */
footer .viewmore_list > button {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
footer .viewmore_list > button:focus-visible {
  outline: 2px solid var(--ds-primary-vivid, #FF7F1F);
  outline-offset: 3px;
}

/* "CHALLENGE:" and "SOLUTIONS:" inside a story body were <h5>s, which made
   every one of them an h3 -> h5 jump in the outline -- eleven per page on the
   industry template, because the carousel clones slides. They are labelled
   paragraphs now; this carries the styling the h5 selector used to provide. */
/* "CHALLENGE:" and "SOLUTIONS:" were orange capitals with a colon, at body
   size, run in above their paragraphs -- the only orange run-in labels on the
   site, and they read as shouting rather than as structure. They are the
   section-label treatment used everywhere else: muted small caps on a hairline,
   with the colon suppressed. */
.challenge-solution-results :is(h5, .story-label) {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3, 12px);
  margin: var(--ds-space-6, 32px) 0 var(--ds-space-3, 12px);
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-semibold, 600);
  line-height: var(--ds-leading-ui);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  /* --ds-text-subtle was never declared, so this rendered on its literal
     fallback #8A857E: 3.66:1 on white, an AA failure on 568 runs of label
     text across the sixteen industry pages. The system has three text tiers
     and this is the second of them. */
  color: var(--ds-text-muted, #5F5A54);
}
.challenge-solution-results :is(h5, .story-label)::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--acma-hairline, rgba(0, 20, 39, .08));
}
.challenge-solution-results :is(h5, .story-label):first-child { margin-top: 0; }

/* ==========================================================================
   INSIGHTS INDEX — CATEGORY CHIPS
   The old row was 21 chips in a fixed-width strip that clipped at five, so
   sixteen categories were in the DOM and unreachable. It scrolls now, the
   way every other overflowing row on this site does, and the chips are links
   to the category archive rather than a client-side display:none filter.
   ========================================================================== */
.acma-chips { margin-top: var(--ds-space-6, 32px); }

.acma-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.acma-chips__item { margin: 0; padding: 0; }
.acma-chips__item::before { content: none; }

.acma-chips__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px var(--ds-space-4, 16px);
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  color: var(--ds-text, #28282B);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-semibold, 600);
  line-height: var(--ds-leading-tight);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s var(--acma-ease, ease),
              border-color .3s var(--acma-ease, ease),
              color .3s var(--acma-ease, ease);
}
.acma-chips__link:hover,
.acma-chips__link:focus-visible {
  background: var(--ds-white, #fff);
  border-color: var(--ds-ink, #001427);
  color: var(--ds-ink, #001427);
}
.acma-chips__link:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}
.acma-chips__link.is-current {
  background: var(--ds-ink, #001427);
  border-color: var(--ds-ink, #001427);
  color: var(--ds-text-inverse, #fff);
}

/* The chips and the cards are one block: a filter belongs to the list it
   filters, so the boundary between them is a space, not a section rhythm.
   `.acma-insights-list { padding-top: 40px }` was written for this and never
   applied -- at (0,1,0) it lost to the SECTION RHYTHM list's (0,1,1), so both
   bands were paying the full 104px and the strip of chips floated 136px below
   the banner with another 104 under it. Matched at the weight that wins.

   The banner carries the title and the lede now, and the section heading that
   used to repeat the title between them has gone, so the first band after a
   banner starts on the tight token rather than the full one. */
.acma-insights-index { padding-bottom: 0; }
main .acma-insights-index                                        { padding-top: var(--ds-section-y-tight); }
main .acma-insights-index .acma-chips                            { margin-top: 0; }
main .acma-insights-index + .acma-insights-list                  { padding-top: var(--ds-space-7, 40px); }
main .banner + .acma-insights-list                               { padding-top: var(--ds-section-y-tight); }
/* The head and the cards are one block, so they share a ground. The listing
   grid inherits .articles-list-section, which style.css paints --ds-surface,
   and that split the block in two down the middle of the page. */
.acma-insights-list.articles-list-section { background: transparent; }

@media (max-width: 767px) {
  /* Seventeen chips wrap to five rows on a phone. One swipe row instead,
     bleeding to the shell edge like every other scroller here. */
  .acma-chips__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--ds-container-pad, 16px) * -1);
    padding-inline: var(--ds-container-pad, 16px);
    scroll-padding-inline: var(--ds-container-pad, 16px);
    padding-bottom: var(--ds-space-2, 8px);
    scrollbar-width: none;
  }
  .acma-chips__list::-webkit-scrollbar { display: none; }
  .acma-chips__item { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .acma-chips__link { transition: none; }
}

/* ==========================================================================
   ARCHIVES, SEARCH AND THE 404
   --------------------------------------------------------------------------
   author.php, archive.php, search.php and 404.php were the last templates
   writing their own listing markup. They share the insights index's five
   sections now, and these are the three loose ends that left.
   ========================================================================== */

/* The pill is display: inline-flex and shrink-wraps everywhere except inside
   .page-not-found-content-left, where `... p { width: 100% }` at (0,3,1)
   stretched it to 558px -- the full column. fit-content says what inline-flex
   was already meant to say; the second rule reaches the weight that wins. */
.acma-eyebrow--pill { width: fit-content; }
main .page-not-found-wrapper .wrapper .page-not-found-content-left p.acma-eyebrow--pill {
  width: fit-content;
  margin-bottom: var(--ds-space-5, 24px);
  font: inherit;
  font-size: var(--ds-text-2xs, 0.75rem);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-caps);
}

/* The 404's headline stepped 65 -> 48 -> 32px across three hardcoded
   breakpoints, the same three the post's headline used before Phase L, and its
   paragraph was set at 25px with the `font` shorthand declaring 700 and the
   next line overriding it to 400. Both on the scale. */
main .page-not-found-wrapper .wrapper .page-not-found-content-left h1 {
  font-family: "Geist", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--ds-display-1);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-tight, 1.15);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  margin-bottom: var(--ds-space-4, 16px);
}
main .page-not-found-wrapper .wrapper .page-not-found-content-left > p:not(.acma-eyebrow--pill) {
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-lede-size);
  font-weight: var(--ds-weight-regular, 400);
  line-height: var(--ds-leading-normal, 1.6);
  margin-bottom: 0;
  max-width: calc(52 * var(--ds-ch));
}

/* The search banner styles its own form; the 404 had none, so its field and
   button rendered at the browser's defaults -- a 152x23px input beside a 60px
   button. One rule for both, on the shell the rest of the site uses. */
.page-not-found-wrapper .search-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 460px;
  margin: var(--ds-space-6, 32px) 0 var(--ds-space-5, 24px);
  background: var(--ds-white, #fff);
  border-radius: var(--ds-radius-pill, 999px);
  overflow: hidden;
  box-shadow: var(--acma-lift);
}
.page-not-found-wrapper .search-field {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding: 0 var(--ds-space-5, 24px);
  border: 0;
  background: transparent;
  color: var(--ds-ink, #001427);
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-text-sm, 1rem);
}
.page-not-found-wrapper .search-field:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: -2px;
}
.page-not-found-wrapper .search-submit {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 var(--ds-space-6, 32px);
  border: 0;
  background: var(--ds-primary, #B65002);
  color: var(--ds-white, #fff);
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.page-not-found-wrapper .search-submit:hover { background: var(--ds-primary-hover, #974302); }
.page-not-found-wrapper .search-submit:focus-visible {
  outline: 2px solid var(--ds-white, #fff);
  outline-offset: 2px;
}

/* "41 results for cloud" was set at 32px/700 -- two thirds of the <h1> above
   it and heavier, so the count read as the page's title and "Search" as a
   label on it. It is a lede. */
.banner-search .search-term-text,
.banner-search .search-term-text span {
  font-size: var(--ds-lede-size);
  font-weight: var(--ds-weight-regular, 400);
  line-height: var(--ds-leading-normal, 1.6);
}
.banner-search .search-term-text .search-term { font-weight: var(--ds-weight-bold, 700); }

/* The no-results branch was a .article-teaser-card -- a card component used as
   a message -- wrapping a bare <ul>. */
.acma-search-tips {
  margin: var(--ds-space-5, 24px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--ds-space-3, 12px);
  max-width: calc(62 * var(--ds-ch));
}
.acma-search-tips li {
  position: relative;
  margin: 0;
  padding-left: var(--ds-space-6, 32px);
  color: var(--ds-text, #28282B);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-relaxed, 1.75);
}
.acma-search-tips li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-primary, #B65002);
}
/* style.css gives links inside a listing block `display: block`, which broke
   the last tip across three lines and left its full stop alone on the third. */
.acma-search-tips a { display: inline; color: var(--ds-secondary, #0450BD); text-underline-offset: 2px; }
.acma-search-tips a:hover { color: var(--ds-secondary-hover, #033C90); }

/* The 404's "Go back home" keeps the arrow treatment style.css gives links in
   this block; it just needed to stop sitting flush against the form. */
.acma-404-home { display: inline-block; }

/* `.general-cms-block h2` steps 60 -> 40 -> 32px across three hardcoded
   breakpoints at (0,1,1). It was hidden while the section-heading default sat
   at the same weight and happened to agree at 1440; once that default moved to
   :where() the legal notice's eight headings went to 32px at 375, where every
   other section heading is 28. One token instead of three steps. */
main .general-cms-block h2 { font-size: var(--ds-display-3); }

/* ==========================================================================
   LINK INDEX  (layout/link-index - the sitemap)
   --------------------------------------------------------------------------
   The sitemap was five `ul.ul_parent` columns whose group names lived in an
   <a href="#"> and four bare <a>s. It carried one heading, the banner's h1,
   for 68 links; it listed no posts, no case studies, no categories and no
   locations; and its "Pages" column was get_pages() minus 44 titles removed
   by hand.

   Each group is a nested enclosure now, the shape the rest of the site uses:
   the <details> is the outer shell carrying the ground, the hairline and the
   6px bezel; the summary sits on that ground as a labelled rail; the list is
   the inner core, a white plate at the concentric radius. Below 1024 the
   shell collapses, so the sitemap opens as nine section names rather than one
   column of 109 links.
   ========================================================================== */

/* Column flow, not a grid. A grid row is as tall as its tallest member, so
   Articles (18 links) beside Case studies (1) produced a row 834px deep with
   630px of it empty, three times over. Columns balance by height instead:
   the same ten groups that measured 3,617px across two grid sections come to
   about a third of that. break-inside keeps a group whole. */
.acma-link-index {
  columns: 268px 4;
  column-gap: var(--ds-space-4, 16px);
}

.acma-linkgroup {
  break-inside: avoid;
  margin-bottom: var(--ds-space-4, 16px);
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: border-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              box-shadow .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              transform .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-linkgroup:hover {
  border-color: rgba(0, 20, 39, .18);
  box-shadow: var(--acma-lift-hover, var(--acma-lift));
  transform: translateY(-2px);
}
.acma-linkgroup:focus-within {
  border-color: rgba(0, 20, 39, .18);
  box-shadow: var(--acma-lift-hover, var(--acma-lift));
}
.acma-section--surface .acma-linkgroup { background: rgba(0, 20, 39, .05); }

/* The rail: the group's name on the shell's own ground, above the plate. */
.acma-linkgroup__summary {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3, 12px);
  padding: 5px var(--ds-space-4, 16px) 7px;
  /* The three groups with no hub page have a plain-text heading rather than a
     padded link, which made their rail 3px shallower than the six that do. */
  min-height: 52px;
  list-style: none;
  cursor: default;
}
.acma-linkgroup__summary::-webkit-details-marker { display: none; }

.acma-linkgroup__title {
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-6);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
  margin: 0;
  min-width: 0;
}
/* The heading link takes the row's padding rather than sitting inside it, so
   the target is the 40px the row already occupies instead of the 28px of its
   line box. The padding is on the heading and the link reclaims it with a
   negative margin -- put it on the link alone and the six groups that have a
   hub page sit 6px lower than the three that do not. */
.acma-linkgroup__title { padding-block: 6px; min-height: 40px; }
.acma-linkgroup__title a {
  display: block;
  margin-block: -6px;
  padding-block: 6px;
  color: inherit;
  text-decoration: none;
  transition: color .18s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
/* A legacy rule for links inside a list was setting these anchors to 400/16px
   Plus Jakarta Sans, so the six groups with a hub page rendered their heading
   in body type while the three without kept 700/18px Geist. A heading is a
   heading whether or not it happens to be a link. */
main .acma-link-index .acma-linkgroup__title a,
main .acma-routes .acma-route__title a{
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: none;
}
.acma-linkgroup__title a:hover { color: var(--ds-primary, #B65002); }
.acma-linkgroup__title a:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 3px;
  border-radius: 3px;
}

/* How many links sit behind the name - the one number that tells a reader
   whether a closed group is worth opening. */
.acma-linkgroup__count {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 26px;
  padding: 3px 9px;
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-white, #fff);
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
  line-height: var(--ds-leading-ui);
  text-align: center;
  transition: background-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              border-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-linkgroup:hover .acma-linkgroup__count {
  background: var(--ds-ink, #001427);
  border-color: var(--ds-ink, #001427);
  color: var(--ds-text-inverse, #fff);
}

/* The core plate. */
.acma-linkgroup__list {
  margin: 0;
  padding: var(--ds-space-2, 8px) var(--ds-space-4, 16px);
  list-style: none;
  display: grid;
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core, 20px);
}
.acma-linkgroup__item { margin: 0; padding: 0; list-style: none; }
.acma-linkgroup__item::before { content: none; }

.acma-linkgroup__item a {
  position: relative;
  display: block;
  padding: 8px 0 8px 14px;
  border-top: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  color: var(--ds-text, #28282B);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-ui);
  text-decoration: none;
  transition: color .18s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-linkgroup__item:first-child a { border-top: 0; }

/* A rule that grows from nothing rather than the whole row shifting: the text
   stays where it is, which is what keeps a 17-row list from feeling like it
   is moving under the pointer. */
.acma-linkgroup__item a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ds-primary, #B65002);
  transform: translateY(-50%);
  transition: width .22s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-linkgroup__item a:hover { color: var(--ds-ink, #001427); }
.acma-linkgroup__item a:hover::before { width: 8px; }
.acma-linkgroup__item a:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .acma-linkgroup,
  .acma-linkgroup__count,
  .acma-linkgroup__item a,
  .acma-linkgroup__item a::before { transition: none; }
  .acma-linkgroup:hover { transform: none; }
}

/* Above 1024 every group is open and its summary is a heading, not a control:
   the chevron goes and the click does nothing. */
@media (min-width: 1024px) {
  .acma-linkgroup__summary { pointer-events: none; }
  .acma-linkgroup__summary a { pointer-events: auto; }
}

@media (max-width: 1023px) {
  .acma-link-index { columns: 1; }
  .acma-linkgroup { margin-bottom: var(--ds-space-3, 12px); }
  .acma-linkgroup__summary {
    min-height: 60px;
    padding-block: 4px;
    cursor: pointer;
  }
  /* The summary toggles and the title inside it navigates. Both are real
     actions on the same row, so the link needs its own tap target rather
     than the 30px its line box gives it. */
  .acma-linkgroup__title   { padding-block: 11px; min-height: 52px; }
  .acma-linkgroup__title a { margin-block: -11px; padding-block: 11px; }
  .acma-linkgroup__summary:focus-visible {
    outline: 2px solid var(--ds-primary, #B65002);
    outline-offset: 2px;
    border-radius: var(--acma-radius-core, 20px);
  }
  /* Drawn from a border so it tracks the summary's own colour, like the TOC. */
  .acma-linkgroup__summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--ds-text-muted, #5F5A54);
    border-bottom: 2px solid var(--ds-text-muted, #5F5A54);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
  }
  .acma-linkgroup[open] > .acma-linkgroup__summary::after { transform: translateY(2px) rotate(-135deg); }
  .acma-linkgroup:hover { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .acma-linkgroup__summary::after { transition: none; }
  }
}

/* ==========================================================================
   ROUTE CARDS  (layout/route-cards)
   --------------------------------------------------------------------------
   Replaces the "What we can do for you" tile row on the sitemap, which
   repeated 24 links the index above it already carried - the third copy of
   the same destinations on one page. Three routes instead, each saying what
   happens if you take it.
   ========================================================================== */

.acma-routes {
  display: grid;
  gap: var(--ds-space-5, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.acma-routes--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.acma-routes--two   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.acma-route {
  position: relative;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: border-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              box-shadow .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              transform .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-route::before { content: none; }
.acma-route:hover,
.acma-route:focus-within {
  border-color: rgba(0, 20, 39, .18);
  box-shadow: var(--acma-lift-hover, var(--acma-lift));
  transform: translateY(-3px);
}
.acma-route:focus-within { outline: 2px solid var(--ds-primary, #B65002); outline-offset: 3px; }

.acma-route__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-3, 12px);
  height: 100%;
  padding: var(--ds-space-6, 32px) var(--ds-space-6, 32px) var(--ds-space-5, 24px);
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core, 20px);
}

.acma-route__title {
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-5);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
  margin: 0;
  text-wrap: balance;
}
.acma-route__title a { color: inherit; text-decoration: none; }
/* The whole card is the target; the title link carries the accessible name. */
.acma-route__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--acma-radius-shell, 26px);
}
.acma-route__title a:focus-visible { outline: none; }

.acma-route__text {
  margin: 0;
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-relaxed, 1.75);
}

.acma-route__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  margin-top: auto;
  padding-top: var(--ds-space-3, 12px);
  color: var(--ds-primary, #B65002);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
}
.acma-route__chevron {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .22s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-route:hover .acma-route__chevron { transform: rotate(45deg) translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .acma-route,
  .acma-route__chevron { transition: none; }
  .acma-route:hover { transform: none; }
  .acma-route:hover .acma-route__chevron { transform: rotate(45deg); }
}

/* Three route cards stacked is 1,162px at 375 and 945px at 768 -- the tallest
   section on the careers page, for three sentences. The same swipe row the
   value cards use, so the two card rows on a page behave identically. */
@media (max-width: 1023px) {
  .acma-routes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none;
    gap: var(--ds-space-3, 12px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ds-space-4, 16px);
    padding-bottom: var(--ds-space-3, 12px);
    margin-inline: calc(var(--ds-space-4, 16px) * -1);
    padding-inline: var(--ds-space-4, 16px);
    -webkit-overflow-scrolling: touch;
  }
  .acma-route { scroll-snap-align: start; }
  .acma-route__inner { padding: var(--ds-space-5, 24px); }
  .acma-routes::-webkit-scrollbar { height: 4px; }
  .acma-routes::-webkit-scrollbar-thumb {
    background: var(--acma-hairline, rgba(0, 20, 39, .08));
    border-radius: 999px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .acma-routes { grid-auto-columns: 46%; }
}

/* ==========================================================================
   JOB LIST  (layout/job-list)
   --------------------------------------------------------------------------
   Nineteen roles behind nineteen <h3>s that a jQuery handler in
   scripts.min.js turned into click targets, with the first one open by
   default. Its description is 4,847 characters, so the section opened with a
   1,401px wall of one job above the other eighteen titles, and measured
   2,611px at 1440.

   Every row is a closed <details> on the enclosure system now: the shell
   carries the ground and the hairline, the summary is the rail, and the copy
   opens onto an inner plate. Closed, the list is nineteen scannable rows.
   ========================================================================== */

.acma-jobs__list {
  display: grid;
  gap: var(--ds-space-3, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.acma-job { margin: 0; padding: 0; list-style: none; }
.acma-job::before { content: none; }

.acma-job__item {
  padding: 6px;
  background: var(--ds-white, #fff);
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: border-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              box-shadow .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-job__item:hover,
.acma-job__item[open] {
  border-color: rgba(0, 20, 39, .18);
  box-shadow: var(--acma-lift-hover, var(--acma-lift));
}

.acma-job__summary {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4, 16px);
  min-height: 56px;
  padding: 8px var(--ds-space-5, 24px);
  list-style: none;
  cursor: pointer;
  border-radius: var(--acma-radius-core, 20px);
}
.acma-job__summary::-webkit-details-marker { display: none; }
.acma-job__summary:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}

.acma-job__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-5);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
  transition: color .18s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-job__item:hover .acma-job__title { color: var(--ds-primary, #B65002); }

.acma-job__hint {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-semibold, 600);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
}
.acma-job__chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-job__item[open] > .acma-job__summary .acma-job__chevron {
  transform: translateY(2px) rotate(-135deg);
}

.acma-job__body {
  margin-top: 6px;
  padding: var(--ds-space-6, 32px) var(--ds-space-6, 32px) var(--ds-space-5, 24px);
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border-radius: var(--acma-radius-core, 20px);
}

/* The descriptions run 3,000 to 8,000 characters of CMS markup. Give them the
   reading measure the article body gets rather than the full 1,140px column,
   and the list treatment the rest of the site uses. */
.acma-job__copy {
  max-width: calc(74 * var(--ds-ch));
  color: var(--ds-text, #28282B);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-relaxed, 1.75);
}
.acma-job__copy > :first-child { margin-top: 0; }
.acma-job__copy > :last-child { margin-bottom: 0; }
.acma-job__copy p { margin: 0 0 var(--ds-space-4, 16px); }
.acma-job__copy :is(h2, h3, h4, h5, h6) {
  margin: var(--ds-space-5, 24px) 0 var(--ds-space-2, 8px);
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-6);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  color: var(--ds-ink, #001427);
}
.acma-job__copy :is(ul, ol) { margin: 0 0 var(--ds-space-4, 16px); padding-left: var(--ds-space-5, 24px); }
.acma-job__copy li { margin: 0 0 var(--ds-space-2, 8px); line-height: var(--ds-leading-relaxed, 1.75); }
.acma-job__copy ul > li { list-style: disc; }
.acma-job__copy ol > li { list-style: decimal; }
.acma-job__copy li::before { content: none; }
.acma-job__copy strong { font-weight: var(--ds-weight-bold, 700); color: var(--ds-ink, #001427); }
.acma-job__copy a { color: var(--ds-secondary, #0450BD); text-underline-offset: 2px; }
.acma-job__copy a:hover { color: var(--ds-secondary-hover, #033C90); }
.acma-job__copy img { max-width: 100%; height: auto; border-radius: var(--ds-radius-md, 8px); }
.acma-job__copy table { display: block; max-width: 100%; overflow-x: auto; }

.acma-job__apply {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3, 12px);
  min-height: 48px;
  margin-top: var(--ds-space-5, 24px);
  padding: 0 var(--ds-space-6, 32px);
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-primary, #B65002);
  color: var(--ds-white, #fff);
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-job__apply:hover { background: var(--ds-primary-hover, #974302); color: var(--ds-white, #fff); }
.acma-job__apply:focus-visible {
  outline: 2px solid var(--ds-ink, #001427);
  outline-offset: 3px;
}
.acma-job__apply-arrow {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-job__apply:hover .acma-job__apply-arrow { transform: rotate(45deg) translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .acma-job__item,
  .acma-job__title,
  .acma-job__chevron,
  .acma-job__apply,
  .acma-job__apply-arrow { transition: none; }
  .acma-job__apply:hover .acma-job__apply-arrow { transform: rotate(45deg); }
}

@media (max-width: 767px) {
  .acma-jobs__list { gap: var(--ds-space-2, 8px); }
  .acma-job__summary {
    gap: var(--ds-space-3, 12px);
    padding: 10px var(--ds-space-4, 16px);
  }
  /* "DETAILS" beside a wrapping role title costs a line on a 375px screen;
     the chevron alone says the same thing. */
  .acma-job__hint { font-size: 0; gap: 0; }
  .acma-job__body { padding: var(--ds-space-5, 24px) var(--ds-space-4, 16px); }
  .acma-job__apply { width: 100%; justify-content: center; }
}

/* ==========================================================================
   PEOPLE GRID  (layout/people-grid)
   --------------------------------------------------------------------------
   Seven person cards over three sections, each opened by an empty
   `<a href="#">` with no text and closed by another -- fourteen unnamed links
   on one page, and the only route to a bio. Each card is a <details> now.

   Two treatments, because three identical rows of centred cards gave the page
   no hierarchy: the two-person founders row stretched each card to 620px with
   a 112px portrait adrift in the middle of it. `feature` puts the portrait
   beside the name and the whole bio; `grid` is a compact horizontal card that
   fills its track at any column count and keeps the same shape at every
   width.

   The portrait sits on a plate concentric with the card. Where the data has
   no photograph of its own, a monogram takes its place: four of the seven
   shared one stock image named after its pixel dimensions, which WordPress's
   alt lookup was announcing as "243 x 243".
   ========================================================================== */

.acma-people__grid {
  display: grid;
  gap: var(--ds-space-4, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
  /* `align-items: start` is deliberate and must stay. The card is a <details>
     that ships open, and its <summary> is a centred flex row. Stretching the
     track makes the summary absorb the extra height -- measured, it grew from
     188px to 806px and pushed the 595px bio out of the card, so the row
     overflowed to 1,402px against an 820px cell. Two cards in a row can differ  by
     ~50px here; that is the honest height of their bios and is preferable to
     a card whose content leaves the box. */
  align-items: start;
}
.acma-person { margin: 0; padding: 0; list-style: none; }
.acma-person::before { content: none; }

.acma-person__card {
  display: block;
  height: 100%;
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: border-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              box-shadow .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              transform .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-person__card:hover,
.acma-person__card[open] {
  border-color: rgba(0, 20, 39, .18);
  box-shadow: var(--acma-lift-hover, var(--acma-lift));
}
.acma-section--surface .acma-person__card { background: var(--ds-white, #fff); }

.acma-person__head {
  height: 100%;
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core, 20px);
  list-style: none;
  text-align: left;
}
.acma-person__head::-webkit-details-marker { display: none; }
.acma-person__head:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}
.acma-section--surface .acma-person__head { background: var(--acma-tray, rgba(0, 20, 39, .035)); }

.acma-person__portrait {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
}
.acma-section--surface .acma-person__portrait { background: var(--ds-white, #fff); }
.acma-person__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.acma-person__monogram {
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-none);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-primary, #B65002);
}

.acma-person__ident { min-width: 0; }
.acma-person__name {
  margin: 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
  transition: color .18s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-person__role {
  display: block;
  margin: 4px 0 0;
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-semibold, 600);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  line-height: var(--ds-leading-ui);
}
/* The bio is a sibling of the summary inside the shell, so it needs the core's
   ground too -- otherwise the open card reads as two stacked plates with the
   shell's tray showing between them. One plate: the head loses its bottom
   corners when the card is open and the bio takes them. */
.acma-person__bio {
  background: var(--ds-white, #fff);
  border-radius: 0 0 var(--acma-radius-core, 20px) var(--acma-radius-core, 20px);
  color: var(--ds-text, #28282B);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-relaxed, 1.75);
}
.acma-section--surface .acma-person__bio { background: var(--acma-tray, rgba(0, 20, 39, .035)); }
.acma-person__card[open] > .acma-person__head {
  border-radius: var(--acma-radius-core, 20px) var(--acma-radius-core, 20px) 0 0;
}
.acma-person__bio > :first-child { margin-top: 0; }
.acma-person__bio > :last-child { margin-bottom: 0; }
.acma-person__bio p { margin: 0 0 var(--ds-space-4, 16px); }

/* ------------------------------------------------------------- FEATURE --- */

/* Deliberately not stretched to a common row height. These cards are
   <details>, and giving one a definite height hands the extra space to the
   <summary> rather than to the bio: measured, the head grew from 160px to
   806px and centred the portrait in the middle of an empty plate while the bio
   fell off the bottom. Two plates whose bios differ by a paragraph differ by a
   paragraph; that is what a card sized by its content does. */
.acma-people--feature .acma-people__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: var(--ds-space-5, 24px);
}
.acma-people--feature .acma-person__head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5, 24px);
  padding: var(--ds-space-6, 32px) var(--ds-space-6, 32px) var(--ds-space-4, 16px);
}
.acma-people--feature .acma-person__portrait { width: 112px; height: 112px; }
.acma-people--feature .acma-person__monogram { font-size: var(--ds-display-5); }
.acma-people--feature .acma-person__name { font-size: var(--ds-display-5); }
/* The bio is a sibling of the summary, so it is indented to sit under the
   name rather than under the portrait. */
.acma-people--feature .acma-person__bio {
  padding: 0 var(--ds-space-6, 32px) var(--ds-space-6, 32px)
           calc(112px + var(--ds-space-5, 24px) + var(--ds-space-6, 32px));
}
/* At this width the feature grid is two columns and the card is open, so its
   summary is a label rather than a control. Below it the card is one column
   the full width of the shell, where an open 1,100-character bio measured
   700px -- so it collapses, like every other disclosure on the site. */
@media (min-width: 1024px) {
  .acma-people--feature .acma-person__head { cursor: default; }
  .acma-people--feature .acma-person__more { display: none; }
  .acma-people--feature .acma-person__card:hover { transform: none; }
}

/* ---------------------------------------------------------------- GRID --- */

.acma-people--grid .acma-people__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.acma-people--grid .acma-person__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ds-space-4, 16px);
  padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
  min-height: 96px;
  cursor: pointer;
}
.acma-people--grid .acma-person__card--static .acma-person__head { cursor: default; }
.acma-people--grid .acma-person__portrait { width: 72px; height: 72px; }
.acma-people--grid .acma-person__monogram { font-size: var(--ds-display-6); }
.acma-people--grid .acma-person__ident { flex: 1 1 auto; }
.acma-people--grid .acma-person__name { font-size: var(--ds-display-6); }
.acma-people--grid .acma-person__card:hover { transform: translateY(-2px); }
.acma-people--grid .acma-person__card[open] { transform: none; }
.acma-people--grid .acma-person__card:hover .acma-person__name { color: var(--ds-primary, #B65002); }
.acma-people--grid .acma-person__card--static:hover .acma-person__name { color: var(--ds-ink, #001427); }
.acma-people--grid .acma-person__bio {
  padding: var(--ds-space-4, 16px) var(--ds-space-5, 24px) var(--ds-space-4, 16px);
}

.acma-person__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  color: var(--ds-text-muted, #5F5A54);
  transition: background-color .2s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              border-color .2s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              color .2s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-person__card:hover .acma-person__more {
  background: var(--ds-ink, #001427);
  border-color: var(--ds-ink, #001427);
  color: var(--ds-text-inverse, #fff);
}
.acma-person__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-person__card[open] .acma-person__chevron { transform: translateY(2px) rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
  .acma-person__card,
  .acma-person__name,
  .acma-person__more,
  .acma-person__chevron { transition: none; }
  .acma-person__card:hover { transform: none; }
}

/* Three groups of two or three people, each in its own full-rhythm section,
   spent 208px of the page on the two boundaries between them. They are one
   block of content, so the boundary is halved -- the same treatment two
   sections sharing a ground already get in the SECTION RHYTHM block, applied
   here across the alternating ground. */
@supports selector(:has(*)) {
  main .acma-people + .acma-people { padding-top: calc(var(--ds-section-y) * .5); }
  main .acma-people:has(+ .acma-people) { padding-bottom: calc(var(--ds-section-y) * .5); }
}

/* Below 1024 the feature card takes the compact head, so a 112px portrait
   stops taking a third of the row and the bio sits under the whole card. */
@media (max-width: 1023px) {
  .acma-people--feature .acma-people__grid { gap: var(--ds-space-3, 12px); }
  .acma-people--feature .acma-person__head {
    gap: var(--ds-space-4, 16px);
    padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
    min-height: 96px;
    cursor: pointer;
  }
  .acma-people--feature .acma-person__portrait { width: 72px; height: 72px; }
  .acma-people--feature .acma-person__monogram { font-size: var(--ds-display-6); }
  .acma-people--feature .acma-person__name { font-size: var(--ds-display-6); }
  .acma-people--feature .acma-person__bio {
    padding: var(--ds-space-4, 16px) var(--ds-space-5, 24px) var(--ds-space-4, 16px);
  }
}

@media (max-width: 767px) {
  .acma-people__grid { grid-template-columns: 1fr; gap: var(--ds-space-2, 8px); }
  .acma-people--grid .acma-person__head { min-height: 88px; }
  .acma-people--grid .acma-person__bio,
  .acma-people--feature .acma-person__bio { padding: var(--ds-space-4, 16px); }
  .acma-person__card:hover { transform: none; }
}

/* ==========================================================================
   OFFICES  (layout/office-grid) and the world map
   --------------------------------------------------------------------------
   The offices were behind a tab strip of eight tabs holding six of them, two
   of the tabs empty, so a visitor saw one address at a time and clicked seven
   more to read the rest. All six are on the page now.
   ========================================================================== */

/* The map and the office list are one block, so the boundary between them is
   a space rather than a full section rhythm. */
.acma-locations-map { padding-bottom: 0; }
main .acma-locations-map + .acma-offices { padding-top: var(--ds-space-7, 40px); }

.acma-locations-map__plate {
  /* The shell is wider than the old .wrapper, which took the map from 1,140px
     to 1,234 and 620px tall -- a fifth of the document for a decorative
     graphic. Capped, and centred in the shell. */
  max-width: 1000px;
  margin-inline: auto;
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
}
.acma-locations-map__plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1164 / 585;
  border-radius: var(--acma-radius-core, 20px);
}

.acma-offices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--ds-space-4, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}
.acma-office { margin: 0; padding: 0; list-style: none; display: flex; }
.acma-office::before { content: none; }

.acma-office__card {
  display: flex;
  width: 100%;
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: border-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              box-shadow .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              transform .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-office__card:hover,
.acma-office__card:focus-within {
  border-color: rgba(0, 20, 39, .18);
  box-shadow: var(--acma-lift-hover, var(--acma-lift));
  transform: translateY(-2px);
}
.acma-section--surface .acma-office__card { background: var(--ds-white, #fff); }

.acma-office__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-3, 12px);
  width: 100%;
  padding: var(--ds-space-5, 24px);
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core, 20px);
}
.acma-section--surface .acma-office__inner { background: var(--acma-tray, rgba(0, 20, 39, .035)); }

.acma-office__city {
  margin: 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-6);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
}

.acma-office__line {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--ds-space-3, 12px);
  align-items: start;
  margin: 0;
  color: var(--ds-text, #28282B);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-normal, 1.6);
}
.acma-office__icon {
  margin-top: 3px;
  color: var(--ds-primary, #B65002);
  flex: 0 0 auto;
}
.acma-office__line a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  transition: color .18s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              border-color .18s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-office__line a:hover {
  color: var(--ds-primary, #B65002);
  border-color: currentColor;
}
.acma-office__line a:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 3px;
  border-radius: 3px;
}

.acma-office__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  margin-top: auto;
  /* Measured at 154x22: the one office card that carries a real directions
     link had a tap target half the 44px minimum. The ink stays where it is --
     the padding opens downward into the card's own bottom padding, so the row
     does not move. */
  min-height: 44px;
  padding-top: var(--ds-space-3, 12px);
  color: var(--ds-primary, #B65002);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-button-leading);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  text-decoration: none;
}
.acma-office__cta:hover { color: var(--ds-primary-hover, #974302); }
.acma-office__cta:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 3px;
  border-radius: 4px;
}
.acma-office__arrow {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-office__cta:hover .acma-office__arrow { transform: rotate(45deg) translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .acma-office__card,
  .acma-office__line a,
  .acma-office__arrow { transition: none; }
  .acma-office__card:hover { transform: none; }
  .acma-office__cta:hover .acma-office__arrow { transform: rotate(45deg); }
}

@media (max-width: 767px) {
  /* Six stacked cards measured 1,440px on a phone. One swipe row instead,
     bleeding to the shell edge like every other scroller here, so the section
     costs one card's height and the other five are a thumb away. */
  /* Flex, not a grid with percentage auto-columns: those report their
     max-content width to the parent, so `.acma-shell` grew to 898px and the
     document scrolled sideways even though the scroller itself clipped. This
     is the same shape as the chips row and the tile rows. */
  .acma-offices__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ds-space-3, 12px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--ds-container-pad, 16px) * -1);
    padding-inline: var(--ds-container-pad, 16px);
    scroll-padding-inline: var(--ds-container-pad, 16px);
    padding-bottom: var(--ds-space-2, 8px);
    scrollbar-width: none;
  }
  .acma-offices__grid::-webkit-scrollbar { display: none; }
  .acma-office { flex: 0 0 80%; scroll-snap-align: start; }
  /* The scroller clips its own content, but its scrollable overflow still
     reached the document's scroll area -- measured 898px against a 375px
     viewport. `clip` bounds it without making the section a scroll container
     of its own, so nothing inside it can be scrolled into view sideways. */
  .acma-offices { overflow-x: clip; }
  .acma-office__inner { padding: var(--ds-space-4, 16px); }
  .acma-office__card:hover { transform: none; }
  /* A 1,164px world map rendered into 343px puts every pin at about 4px
     across. Cropped to a band rather than given a third of the first screen;
     the continents span the full width, so cropping vertically loses nothing.
     This was P-13 in the mobile pass and the intent carries over. */
  .acma-locations-map__plate img {
    aspect-ratio: auto;
    height: 118px;
    object-fit: cover;
  }
}

/* ==========================================================================
   COMPACT LISTING  (.acma-listing--compact)
   --------------------------------------------------------------------------
   The sector index paginated sixteen industries six at a time over three
   pages, each card carrying a 210-character excerpt. Sixteen near-identical
   marketing paragraphs are not what a reader is on that page for; they are on
   it to pick one of sixteen names. All sixteen fit on one page once the card
   is the photograph and the sector.

   The shared listing grid sizes its <li> with the legacy twelve-column
   calc(), which is a three-up. This variant is a real grid, so the column
   count follows the width instead of three breakpoints.
   ========================================================================== */

/* Only from 1024 up. Below that the listing keeps the swipe row the rest of
   the site already gives it -- layout/listing-grid renders
   .related-insights-section, and sixteen cards in one scroller is about 306px
   against eight stacked rows. auto-fill against a 236px floor gave six columns
   at 1440; four is four rows at every width that has the grid. */
@media (min-width: 1024px) {
  .acma-listing--compact .articles-listing-wrapper > ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ds-space-4, 16px);
  }
  /* The swipe row's li carries flex: 0 0 58% and max-width: 58%, which inside
     a 234px grid track resolves to a 136px card. */
  .acma-listing--compact .articles-listing-wrapper > ul > li {
    width: auto;
    max-width: none;
    flex: none;
    margin: 0;
  }
}

/* Card: the photograph, then the name. Nothing else to show, so nothing else
   takes height. */
.acma-listing--compact .acma-post-card__media img { aspect-ratio: 16 / 10; }
.acma-listing--compact .acma-post-card__body {
  padding: var(--ds-space-4, 16px) var(--ds-space-4, 16px) var(--ds-space-5, 24px);
}
/* The card title stays on --ds-display-6, which is what content/post-card
   already asks for; naming it here only documented the intent. A --ds-text-sm
   override at mobile put a 16px heading on the page and 16 into the heading
   census, which had been 18/20/24/28/32/40 at 375 with nothing off the
   scale. */

@media (max-width: 767px) {
  /* Left to the swipe row .related-insights-section already gives every
     listing below 768 -- layout/listing-grid renders that class, and sixteen
     cards in one scroller is 306px against eight stacked rows. */
  .acma-listing--compact .acma-post-card__body { padding: var(--ds-space-3, 12px); }
}

/* ==========================================================================
   LEGAL PAGES  (.acma-legal)
   --------------------------------------------------------------------------
   Terms of use, Privacy and Cookie Policy and Legal Notice set their clauses
   across the full 1,140px shell: about 180 characters a line, against the
   measure the article body is held to. The contents list already existed as a
   <details> at the top of the copy; from 1200px up it becomes a sticky rail
   and the clauses take a column, which is what stops the line length without
   leaving the width empty.
   ========================================================================== */

.acma-legal__grid { display: block; }

/* The cap goes on the paragraphs, not the column: `ch` resolves against the
   element's own font-size, and on the wrapper that is the 18px it inherits
   from .general-cms-block, so 72ch there measured 924px -- about 108
   characters of 16px copy. On the paragraphs, anything wider than text still
   gets the whole column.

   The value used to be 68ch, matching what the article body used at the time.
   Both were wrong for the same reason: `ch` is the width of the zero glyph and
   Plus Jakarta Sans has a wide one, so 68ch resolved to ~896px and never bound
   against this 796px column -- these pages rendered at 102 characters a line,
   the longest measure on the site. --ds-measure carries the calibrated value;
   see design-system.css for the arithmetic. */
main .acma-legal__body :is(p, ul, ol, h2, h3, blockquote) { max-width: var(--ds-measure, calc(45 * var(--ds-ch, 0.732em))); }
.acma-legal__body > :first-child { margin-top: 0; }
.acma-legal__body > :last-child { margin-bottom: 0; }

/* Measured before this: 18px copy on a 30px line -- a 1.67 ratio at desktop
   and 1.88 at mobile, where the size drops to 16 and the line does not -- with
   8px under a paragraph and *nothing* above a clause heading. Fifteen clauses
   with 8px between the end of one and the title of the next is why the
   document read as a single block. Tighter leading, real space above each
   clause: the page is no taller and the clauses are separable. */
main .acma-legal__body p {
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-normal);
  margin: 0 0 var(--ds-space-4, 16px);
  color: var(--ds-text, #28282B);
}
main .acma-legal__body :is(ul, ol) {
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-normal);
  margin: 0 0 var(--ds-space-4, 16px);
}
main .acma-legal__body li { margin-bottom: var(--ds-space-2, 8px); }

/* scroll-margin keeps a contents jump clear of the fixed header. */
main .acma-legal__body :is(h2, h3) { scroll-margin-top: 104px; }
/* A clause is not a section of the site: --ds-display-3 (40px) is the size a
   band like "Our other policies" gets, and thirteen of them down one document
   read as thirteen sections rather than one contract. One step down, which is
   also what the article body's h2 takes. */
main .acma-legal__body h2 {
  font-size: var(--ds-display-4);
  line-height: var(--ds-leading-snug);
  margin: var(--ds-space-7, 40px) 0 var(--ds-space-3, 12px);
}
main .acma-legal__body > h2:first-child { margin-top: 0; }
main .acma-legal__body h3 {
  font-size: var(--ds-display-5);
  line-height: var(--ds-leading-snug);
  color: var(--ds-ink, #001427);
  margin: var(--ds-space-6, 32px) 0 var(--ds-space-2, 8px);
}

@media (max-width: 767px) {
  main .acma-legal__body h2 { margin-top: var(--ds-space-6, 32px); }
}

/* From 1024, not 1200: between the two the contents sat open and full width
   above the copy, and /terms-of-use/ measured 5,462px at 1199 against 4,497
   at 1200. Moving the rail in at 1024 is a 965px difference in that band. */
@media (min-width: 1024px) {
  /* The reading column is capped at --ds-measure, so a `1fr` body track was a
     936px column holding 593px of text: the clauses stopped two thirds of the
     way across a 1248px shell and the last 343px of the column, plus the whole
     right third of the band, was empty. Measured at 1440.

     The measure sizes the track instead, and the pair is centred: the contents
     sit in the left margin and the document runs down the middle of the page,
     which is where a reader looks for it. The rail keeps its own fixed width so
     the two never fight over the leftover. */
  .acma-legal__grid {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      264px
      minmax(0, calc(var(--ds-measure, calc(45 * var(--ds-ch, 0.732em))) + 4ch))
      minmax(0, 1fr);
    column-gap: var(--ds-space-8, 48px);
    row-gap: var(--ds-space-8, 48px);
    align-items: start;
  }
  .acma-legal__rail { grid-column: 2; }
  .acma-legal__body { grid-column: 3; }
  .acma-legal__rail {
    position: sticky;
    top: 104px;          /* clears the fixed header */
    align-self: start;
  }
  .acma-legal__rail .acma-toc {
    margin: 0;
    padding: var(--ds-space-4, 16px) var(--ds-space-5, 24px);
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .acma-legal__rail .acma-toc__item a { font-size: var(--ds-text-sm, 1rem); }
}

/* The clause titles are numbered in the copy -- "1. Acceptance of Terms" --
   and acma_render_toc() adds its own counter, so every row of the contents
   read "1. 1. Acceptance of Terms". The copy's numbers are the ones that
   match the headings a reader lands on. */
.acma-legal .acma-toc__item--l2 a::before { content: none; }
.acma-legal .acma-toc__item--l2 a { counter-increment: none; }

/* ==========================================================================
   FORM PAGES  (.acma-formpage) and the field messages
   --------------------------------------------------------------------------
   The four lead forms rendered every validation message into an element none
   of the templates contained -- #firstname-error and friends -- so nothing was
   ever shown. assets/js/forms.js creates them next to their field; this is
   what they look like.
   ========================================================================== */

.acma-formpage__grid {
  display: grid;
  gap: var(--ds-space-7, 40px);
  align-items: start;
}
@media (min-width: 1024px) {
  .acma-formpage__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--ds-space-8, 48px);
  }
}
.acma-formpage__form .acma-section-title { margin-bottom: var(--ds-space-2, 8px); }
.acma-formpage__form .acma-section-lede { margin-bottom: var(--ds-space-6, 32px); }

/* Field pairs. Every field on the four lead forms was its own full-width row,
   so seven short answers made a seven-screen-inch column and a first and last
   name -- one question, asked twice -- sat one above the other at 690px wide.
   Related short fields share a row from 768 up and stack below it, which is
   where the label and the 48px control stop fitting side by side. */
.acma-form-row {
  display: grid;
  gap: 0 var(--ds-space-4, 16px);
}
@media (min-width: 768px) {
  .acma-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The row is the layout; the items inside it keep their own bottom margin. */
.acma-form-row > .form-item { min-width: 0; }

/* The submit sat hard right while every label, field and message on the form
   is set from the left edge, so the one control that ends the sequence was the
   one thing not on it. */
form .submit-btn-wrapper { justify-content: flex-start; }
@media (max-width: 767px) {
  form .submit-btn-wrapper > .submit-btn { width: 100%; }
}

.acma-formpage__aside {
  display: grid;
  gap: var(--ds-space-4, 16px);
}
@media (min-width: 1024px) {
  .acma-formpage__aside { position: sticky; top: 104px; }
}

/* The press contact and the headquarters, on the enclosure the rest of the
   site uses. */
.acma-contact-card {
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: border-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              box-shadow .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-contact-card:hover,
.acma-contact-card:focus-within {
  border-color: rgba(0, 20, 39, .18);
  box-shadow: var(--acma-lift-hover, var(--acma-lift));
}
.acma-contact-card__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-2, 8px);
  padding: var(--ds-space-5, 24px);
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core, 20px);
}
.acma-contact-card__name {
  margin: var(--ds-space-2, 8px) 0 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-5);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
}
.acma-contact-card__role {
  margin: 0;
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-normal, 1.6);
}
.acma-contact-card__list {
  margin: var(--ds-space-3, 12px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  width: 100%;
}
.acma-contact-card__list li { margin: 0; padding: 0; list-style: none; }
.acma-contact-card__list li::before { content: none; }
.acma-contact-card__list a {
  display: block;
  min-height: 44px;
  padding: 10px 0;
  color: var(--ds-ink, #001427);
  font-size: var(--ds-text-sm, 1rem);
  text-decoration: none;
  border-bottom: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  transition: color .18s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-contact-card__list li:last-child a { border-bottom: 0; }
.acma-contact-card__list a:hover { color: var(--ds-primary, #B65002); }
.acma-contact-card__list a:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
  border-radius: 4px;
}
.acma-contact-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  min-height: 44px;
  margin-top: var(--ds-space-2, 8px);
  color: var(--ds-primary, #B65002);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  text-decoration: none;
}
.acma-contact-card__link:hover { color: var(--ds-primary-hover, #974302); }
.acma-contact-card__arrow {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-contact-card__link:hover .acma-contact-card__arrow { transform: rotate(45deg) translate(2px, -2px); }

/* ------------------------------------------------- FIELD MESSAGES -------- */

/* Measured before this: the message and the *next* field's floating label were
   both drawn at y=824. `form .form-item label` is position: absolute with
   top: -20px, so every label is painted 20px up into the previous field's
   gap -- and `.form-control-wrap` has exactly 20px of bottom margin, which is
   the space the message was landing in. The label carries a background and
   z-index: 999, so it won.

   .has-error, set by forms.js, closes the wrap's margin and opens a real gap
   under the message instead, so the next label has its 20px back. */
.form-item.has-error > .form-control-wrap { margin-bottom: 0; }

.acma-field-error {
  margin: 8px 0 26px;
  padding-left: 24px;          /* the input's own text inset */
  color: var(--ds-danger, #B3261E);
  font-size: var(--ds-text-xs, .875rem);
  line-height: var(--ds-leading-ui);
}
.acma-field-error[hidden] { display: none; }

.form-control[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--ds-danger, #B3261E) !important;
}

/* ---- the floating label, on every form ----------------------------------
   It was `left: 0` with `padding: 5px 15px 0 5px` -- asymmetric, so the text
   sat off-centre in its own chip, and 24px to the left of the text inside the
   field it labels. And the chip was painted --ds-surface, a grey card on a
   white field. Aligned to the input's text inset, padded evenly, and given the
   ground it actually sits on. */
form .form-item > label,
form .form-control-wrap > label {
  /* `form .form-control-wrap label` carries margin-left: 10px, which is why
     the chip sat 10px to the right of the text inside the field it names.
     18 + 6 of padding = the input's own 24px inset. */
  left: 18px;
  margin-left: 0;
  padding: 3px 6px 2px;
  background: var(--ds-white, #fff);
  border-radius: 4px;
}
.acma-section--surface form .form-item > label,
.acma-section--surface form .form-control-wrap > label {
  background: var(--ds-surface, #F1F4F9);
}

/* Below 768 the same legacy selector switches the label to position: static,
   so it is an ordinary block above the field rather than a chip on its border.
   That is the better shape on a phone; it just has to line up with the text
   inside the control, which at padding-left: 0 it did not. */
@media (max-width: 767px) {
  form .form-item > label,
  form .form-control-wrap > label {
    left: auto;
    padding: 0 0 6px 24px;
    background: none;
  }
}

/* The legacy `form .form-control-wrap label { position: static }` below 768
   beat .ds-visually-hidden's own `position: absolute`, so its clip() did
   nothing and the dial-code label rendered at 111x24 beside the +91 select.
   A label meant to be heard and not seen has to keep its position. */
form label.ds-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.form-item.has-error > .form-control-wrap > label,
.form-item.has-error > label { color: var(--ds-danger, #B3261E); }

/* The dial-code select and the number are one composite control, so one label
   names both and sits above the pair -- an ordinary .form-control-wrap label,
   which is what puts it on the same left edge as every other label on the
   form. It used to live in here as an absolutely positioned chip, the only
   label on the four forms that was not a static block above its field.
   The span keeps its positioning context: forms.js appends the field's error
   message into it. */
.acma-phone-field {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- the select marker belongs to the select ------------------------------
   style.css draws it as `form .form-item.form-select::after { top: 26px }`,
   positioned against the .form-item -- which on the four lead forms holds the
   label above the field. Twenty-six pixels down from the top of that box is
   the label's baseline, so the chevron sat above the control it belongs to,
   outside its border, on every select on every form. Two later rules patched
   it to `top: 50%` for two of the four pages, which centres it on the label +
   field pair rather than on the field.

   It is a background on the select now, centred in the select's own box, so
   nothing above or below the field can move it -- including the error message
   forms.js appends when the field is invalid. Amber is legal here: it is a
   mark, not text. */
form .form-item.form-select::after { content: none; }
form .form-item.form-select select,
form select.floatlabel,
form select.country-code {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23FF7F1F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  padding-right: 48px !important;
}

/* One text inset on every control, so one label offset is right for all of
   them. The textarea was padded 29px and the inputs 24px, which put the
   labels 5px apart from each other down a single form. */
/* `main` to clear the mobile rule that drops the textarea to 12px on
   /request-a-demo/, which put its label 12px off from every other one. */
main form .form-control-wrap :is(input, select, textarea) { padding-left: 24px; }

.acma-form-status {
  margin: var(--ds-space-4, 16px) 0 0;
  color: var(--ds-text, #28282B);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-normal, 1.6);
}
.acma-form-status:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .acma-contact-card,
  .acma-contact-card__list a,
  .acma-contact-card__arrow { transition: none; }
  .acma-contact-card__link:hover .acma-contact-card__arrow { transform: rotate(45deg); }
}

/* ==========================================================================
   VALUE CARDS  (layout/value-cards)
   --------------------------------------------------------------------------
   The CMS holds "why join us" as a <ul> of `<strong>Label</strong>: sentence`
   bullets, and the careers template rendered it as body copy in a 65% column
   with a 35% photograph beside it: 1,442px at 1440 for two rows, and five
   reasons that read as one paragraph.

   Each reason is a card on the site's enclosure -- outer shell carrying the
   tray, hairline and elevation, inner plate at the concentric radius. The
   counter is drawn by CSS from the list, so it cannot disagree with the
   number of cards, and it is decorative: the title carries the meaning.
   ========================================================================== */

.acma-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--ds-space-5, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: acma-value;
}
.acma-values--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.acma-values--two   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* Five cards on a three-track grid leaves the second row two-thirds full,
   with a card-sized hole beside it. The tracks are sixths instead: three
   cards of two, then two of three, so both rows end at the same edge and no
   card is stretched over dead space. */
@media (min-width: 1024px) {
  .acma-values--flow {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .acma-values--flow > .acma-value { grid-column: span 2; }
  .acma-values--flow > .acma-value:nth-last-child(2),
  .acma-values--flow > .acma-value:last-child { grid-column: span 3; }
  /* Four cards: two rows of two rather than 3 + 1. */
  .acma-values--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.acma-value {
  counter-increment: acma-value;
  position: relative;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: border-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              box-shadow .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              transform .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-value::before { content: none; }
.acma-value:hover {
  border-color: rgba(0, 20, 39, .18);
  box-shadow: var(--acma-lift-hover, var(--acma-lift));
  transform: translateY(-3px);
}

.acma-value__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-3, 12px);
  height: 100%;
  padding: var(--ds-space-6, 32px);
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core, 20px);
}

/* The number is the card's only ornament, and it is a real ordinal rather
   than a decorative glyph: five reasons, counted. */
.acma-value__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--ds-primary-soft, #FDF0E7);
  color: var(--ds-primary-hover, #974302);
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-text-xs, 0.875rem);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-none);
  font-variant-numeric: tabular-nums;
  transition: background-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-value__num::before { content: counter(acma-value, decimal-leading-zero); }
.acma-value:hover .acma-value__num { background: #F7DFCF; }

.acma-value__title {
  margin: 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-5);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
  text-wrap: balance;
}
.acma-value__text {
  margin: 0;
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-relaxed, 1.75);
}

@media (prefers-reduced-motion: reduce) {
  .acma-value,
  .acma-value__num { transition: none; }
  .acma-value:hover { transform: none; }
}

/* Tablet and phone: a swipe row. Five cards stacked two-up is 1,477px at 768
   and 1,400px at 375, for content a reader wants to compare side by side --
   which is what a row of them does instead. Runs to 1023 like the other card
   carousels on this site, whose tablet density pass ends at the same width. */
@media (max-width: 1023px) {
  .acma-values {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none;
    gap: var(--ds-space-3, 12px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ds-space-4, 16px);
    padding-bottom: var(--ds-space-3, 12px);
    margin-inline: calc(var(--ds-space-4, 16px) * -1);
    padding-inline: var(--ds-space-4, 16px);
    -webkit-overflow-scrolling: touch;
  }
  .acma-value {
    scroll-snap-align: start;
    padding: 5px;
  }
  .acma-value__inner { padding: var(--ds-space-5, 24px); }
  .acma-values::-webkit-scrollbar { height: 4px; }
  .acma-values::-webkit-scrollbar-thumb {
    background: var(--acma-hairline, rgba(0, 20, 39, .08));
    border-radius: 999px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .acma-values { grid-auto-columns: 46%; }
}

/* ==========================================================================
   THE ROLES ROW  (layout/tile-row with a trailing action)
   --------------------------------------------------------------------------
   A row that names nine of nineteen roles has to say where the other ten are.
   The action is centred under the grid rather than beside the heading, so it
   reads as the end of the list instead of a second heading-level control.
   ========================================================================== */

.acma-tile-row__action {
  display: flex;
  justify-content: center;
  margin-top: var(--ds-space-6, 32px);
}

/* The role tiles carry job titles, which are longer than the industry labels
   this grid was built for. Four across at 1440 keeps them on one line. */
@media (min-width: 1200px) {
  .acma-roles-row .acma-tile-grid,
  /* Nine products in a four-up grid left one tile alone on a row of its own,
     with three empty tracks beside it. Three columns is the divisor that comes
     out even, and the labels are long enough to want the width. */
  .acma-products-row .acma-tile-grid { --acma-tile-cols: 3; }
}

/* ==========================================================================
   INTRO BAND — REVERSED  (layout/intro, .acma-intro--reverse)
   --------------------------------------------------------------------------
   Two intro bands on one page in the same direction read as one long column
   with a picture stuck to the right of it twice. The second one puts its
   picture on the left. Only the visual order changes: the DOM keeps heading
   before image, so the reading and tab order are unaffected.
   ========================================================================== */

/* The intro band is two columns from 768 up, so the alternation has to start
   there too: at 1024 the two bands on the careers page read as one long
   left-hand column with a picture stuck to its right twice. */
@media (min-width: 768px) {
  .acma-intro--reverse .internal-banner { flex-direction: row-reverse; }
}

/* The accent rule that anchors every .acma-section-head was scoped to
   .acma-section-title, so the intro band -- the one section shape that is not
   built on layout/section -- was the only section on a page whose heading
   started without one. Two heading treatments on one page is the uniformity
   problem, not the rule. Same 44x3 gradient, same 16px gap. */
.featured-content1 .internal-banner .internal-banner-content .internal-banner-title::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: var(--ds-space-4, 16px);
  border-radius: 2px;
  background: var(--ds-primary, #B65002);
}

/* ==========================================================================
   EVENT CARD — COLUMNS THAT FOLLOW THEIR CONTAINER  (layout/event-card)
   --------------------------------------------------------------------------
   style.css sizes this card's two columns with a hand-written twelve-column
   calc that hardcodes the container's gutter:

     width: calc(5 * calc(calc(min(1852px, 100vw) - 300px) - 11 * 25px) / 12
                 + 4 * 25px)

   -- where 300px is two 150px gutters and 64px, in the wider branch, is two
   32px ones. Those were the legacy .wrapper paddings. Now that .wrapper takes
   --ds-container-pad like every other container, the sum of the two columns
   no longer matches the box they sit in: at 1440 they add up to 1,140px inside
   a 1,248px wrapper, so the card stopped 108px short of the right edge while
   the section heading below it ran the full width.

   Eight media-query blocks of that arithmetic are replaced by two flex
   ratios, which is what the calc was approximating. The media column is the
   larger share here because on /our-work/ the picture is the evidence.
   ========================================================================== */

.event-card-section .event-card {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, .5rem + 3vw, 4rem);
  justify-content: flex-start;
}
.event-card-section .event-card .event-card-wrapper {
  width: auto;
  flex: 1 1 46%;
  max-width: 46%;
  padding-left: 0;
}
.event-card-section .event-card .event-card-section-content {
  width: auto;
  flex: 1 1 54%;
  max-width: 54%;
  margin: 0;
  padding-left: 0;
}

@media (max-width: 767px) {
  .event-card-section .event-card {
    flex-wrap: wrap;
    gap: var(--ds-space-5, 24px);
  }
  .event-card-section .event-card .event-card-wrapper,
  .event-card-section .event-card .event-card-section-content {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* The card carries --ds-surface as its own ground, which was written for the
   sections that are themselves surface -- there it is invisible, which is the
   intent. On a white section it reads as a grey rectangle floating in the
   middle of the page. The ground belongs to the section, not the card. */
.event-card-section:not(.acma-section--surface):not(.bg-active) .event-card {
  background: transparent;
}

/* ==========================================================================
   SCROLLERS THAT BECAME CONTROLS
   --------------------------------------------------------------------------
   ui-enhancements.js gives the five card rows that hold no links a tabindex
   while they overflow, so a keyboard can reach what is off screen. Anything
   focusable has to show focus.
   ========================================================================== */
.acma-scroller:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ==========================================================================
   FILE FIELDS  (.acma-file-item, the job application)
   --------------------------------------------------------------------------
   The float-label pattern the other controls use has nowhere to float over a
   file input -- the browser draws its own button and filename inside the box
   -- so these labels sit above their control as ordinary blocks, aligned to
   the same 24px text inset as every other field on the form.

   The three fields previously carried `placeholder="Upload Resume"`, which no
   browser renders on type="file", and no `accept`, so the picker offered every
   file on the machine for a CV.
   ========================================================================== */

.acma-file-item { display: flex; flex-direction: column; margin-bottom: 20px; }
.acma-file-item + .acma-file-item { margin-top: -8px; }

/* The float-label rule that governs every other control is
   `form .form-control-wrap label { position: absolute; top: -20px }`, and it
   reaches these too -- measured, the label was drawn 22px INSIDE the file
   input, over the "No file chosen" text the browser draws there. A file input
   has no empty interior to float a label over, so this one is an ordinary
   block above its control. Matching that rule's (0,1,2) weight, or it loses. */
/* The three upload labels were the only labels on the career form set at 14px
   muted while the seven above them are 16px warm graphite, so one form carried
   two kinds of label and the uploads read as a footnote to the fields rather
   than as more of them. Matched to the field labels, gap included. */
form .form-item.acma-file-item > label.acma-file-item__label {
  position: static;
  order: -1;
  margin: 0 0 var(--ds-space-1, 4px);
  padding: 3px 6px 2px;
  background: none;
  color: var(--ds-text, #28282B);
  font-size: var(--ds-text-sm, 1rem);
  font-weight: var(--ds-weight-medium, 500);
  line-height: var(--ds-leading-snug);
}
.acma-file-item__opt {
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-regular, 400);
}

.acma-file-item__input.form-control {
  display: block;
  width: 100%;
  /* The same box every other control on the form has. It was 52/13px, which
     made a file row 106px against a text row's 76 and put the three of them
     out of rhythm with the eight above. */
  min-height: 48px;
  padding: 11px 24px;
  background: var(--ds-white, #fff);
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .18));
  border-radius: var(--ds-radius-md, 10px);
  color: var(--ds-text, #28282B);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-ui);
  cursor: pointer;
}
.acma-file-item__input.form-control::file-selector-button {
  margin: 0 var(--ds-space-4, 16px) 0 0;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-primary-soft, #FDF0E7);
  color: var(--ds-primary-hover, #974302);
  font-family: inherit;
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-semibold, 600);
  cursor: pointer;
  transition: background-color .2s var(--acma-ease, ease);
}
.acma-file-item__input.form-control:hover::file-selector-button { background: #F7DFCF; }

/* Safari only understood ::file-selector-button from 16.4, and before that the
   upload control on the career form kept its native grey button in the middle
   of a styled field. The prefixed rules are duplicated rather than added to the
   selector lists above on purpose: a browser that does not recognise one
   selector in a group throws the whole rule away, so combining them would cost
   the styling everywhere instead of gaining it on old Safari. */
.acma-file-item__input.form-control::-webkit-file-upload-button {
  margin: 0 var(--ds-space-4, 16px) 0 0;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-primary-soft, #FDF0E7);
  color: var(--ds-primary-hover, #974302);
  font-family: inherit;
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-semibold, 600);
  cursor: pointer;
  transition: background-color .2s var(--acma-ease, ease);
}
.acma-file-item__input.form-control:hover::-webkit-file-upload-button { background: #F7DFCF; }
.acma-file-item__input.form-control:focus-visible {
  outline: 2px solid var(--ds-primary, #B65002);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .acma-file-item__input.form-control::file-selector-button { transition: none; }
}

/* No mobile override of the inset. `form .form-item > label` is (0,1,2) and
   sets padding-left: 24px below 767; a lower-specificity rule here would lose
   to it and leave the label 8px right of the filename inside the control. The
   file input keeps the same 24px every other control on the form has. */

/* ==========================================================================
   BANNERS WITH NO PHOTOGRAPH
   --------------------------------------------------------------------------
   `.banner::before` is an overlay: `linear-gradient(14deg, rgba(6,6,6,.71),
   rgba(255,105,0,.64))`, designed to sit over a picture and hold white text
   on it. Eleven of the fifty-five published pages have an empty banner_image
   -- /request-a-demo/, /career-form/, /media-room/, /insights/,
   /global-location/, /services-listing/ and the legal pages -- so on those the
   overlay was drawn over the page's white ground and rendered as a muddy grey
   fading to a washed orange, which reads as an image that failed to load.

   layout/page-banner emits the inline `style` attribute only when there is an
   image, so the imageless case is addressable. It gets the ink the CTA band
   and the proof band use, and the same overlay on top of it then reads as a
   deliberate band rather than a film over nothing.
   ========================================================================== */
.banner:not([style]) { background-color: var(--ds-ink, #001427); }

/* ==========================================================================
   THE FORM ASIDE, BELOW 1024
   --------------------------------------------------------------------------
   The two cards beside a lead form are guidance -- on /career-form/ the first
   one says the position field fills itself in when you open a role first.
   Measured at 375: the form starts at y=501 and the aside at y=1,789, so on a
   phone that guidance sat below the submit button, where nobody who needed it
   would ever read it.

   The grid is one column there, so ordering it is enough. The DOM keeps form
   before aside, which is the right reading and tab order on a desktop where
   they sit side by side.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Only where the aside is guidance. Measured, that is one of the four:
     /career-form/ opens "Before you apply -- read the brief", which is an
     instruction about the form below it and has to arrive first. The other
     three carry alternatives to the form -- "Rather talk?", "See it first",
     the press contact -- and putting those first pushed the first field
     1,033-1,410px down, so someone who tapped "Request a demo" scrolled 1.7
     screens past a banner, a proof band and two cards to reach it. Those
     three read: form, then the alternatives. */
  #acma-application .acma-formpage__grid > .acma-formpage__aside { order: -1; }
  #acma-application .acma-formpage__grid > .acma-formpage__form  { order: 0; }

  /* Two stacked cards is 609px of guidance before the form on a phone, which
     is a long way to scroll to reach what you came to do. The same swipe row
     the value and route cards use: both cards stay reachable, the second one
     is visibly half-on-screen so it reads as a row, and the form starts 300px
     sooner. All four lead-form pages get it. */
  .acma-formpage__aside {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--ds-space-3, 12px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ds-space-4, 16px);
    padding-bottom: var(--ds-space-3, 12px);
    margin-inline: calc(var(--ds-space-4, 16px) * -1);
    padding-inline: var(--ds-space-4, 16px);
    -webkit-overflow-scrolling: touch;
  }
  .acma-formpage__aside > * { scroll-snap-align: start; }
  .acma-formpage__aside::-webkit-scrollbar { height: 4px; }
  .acma-formpage__aside::-webkit-scrollbar-thumb {
    background: var(--acma-hairline, rgba(0, 20, 39, .08));
    border-radius: 999px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .acma-formpage__aside { grid-auto-columns: 48%; }
}

/* ==========================================================================
   LABELLED LISTS IN AN ARTICLE  (.acma-deflist)
   --------------------------------------------------------------------------
   Twenty-five of the thirty-five lists in the published posts and case studies
   are "Label: what it means", three or more at a time -- reference sets, not
   narrative. As bullets they were the largest single thing on an article page:
   on the CRID case study the five of them measured 3,290px of a 6,787px
   article at 1440, and 6,180px of 10,671px at 375. One ran 1,664px on a phone.

   They are cards here: two across in the reading column, a swipe row on a
   phone. Same enclosure as every other card on the site, so an article reads
   as part of the same design rather than as a document someone pasted in.

   acma_mark_labelled_lists() adds the class and wraps the two halves; a list
   that is not this shape never gets it and renders as it always did.
   ========================================================================== */

.acma-deflist,
.insights-details .acma-deflist{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--ds-space-3, 12px);
  margin: var(--ds-space-5, 24px) 0 var(--ds-space-6, 32px);
  padding: 0;
  list-style: none;
}

.acma-deflist > li,
.insights-details .acma-deflist > li{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 20px 22px;
  list-style: none;
  background: var(--ds-white, #fff);
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--ds-radius-lg, 16px);
  /* Flat, on the hairline. These carried the signature plate lift -- three
     stacked shadows, deepening and rising on hover -- and there are 55 of them
     visible at once on an industry page, which measured 447 shadow stops
     against 27 to 64 on every other template. The system's own rule says so
     too: small repeated units are entries, not objects. */
  transition: border-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
/* The theme draws its own bullet on every article <li>. */
.acma-deflist > li::before,
.acma-deflist > li::marker,
.insights-details .acma-deflist > li::before,
.insights-details .acma-deflist > li::marker{ content: none; }

.acma-deflist > li:hover,
.insights-details .acma-deflist > li:hover{
  border-color: var(--acma-hairline-strong, rgba(0, 20, 39, .16));
}

.acma-deflist__term {
  display: block;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-6);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
  text-wrap: balance;
}
.acma-deflist__desc {
  display: block;
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-relaxed, 1.75);
}

@media (prefers-reduced-motion: reduce) {
  .acma-deflist > li,
  .insights-details .acma-deflist > li{ transition: none; }
  .acma-deflist > li:hover,
  .insights-details .acma-deflist > li:hover{ transform: none; }
}

/* The reading column is 624px at 1200 -- one card wide -- so two across only
   from where the column can actually hold two. */
@media (max-width: 1279px) and (min-width: 1024px) {
  .acma-deflist,
  .insights-details .acma-deflist{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone and tablet: the swipe row the value and route cards use. Five stacked
   lists is 6,180px of scrolling on a phone for content a reader compares. */
@media (max-width: 1023px) {
  .acma-deflist,
  .insights-details .acma-deflist{
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    gap: var(--ds-space-3, 12px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ds-space-4, 16px);
    padding-bottom: var(--ds-space-3, 12px);
    margin-inline: calc(var(--ds-space-4, 16px) * -1);
    padding-inline: var(--ds-space-4, 16px);
    -webkit-overflow-scrolling: touch;
  }
  .acma-deflist > li,
  .insights-details .acma-deflist > li{ scroll-snap-align: start; }
  .acma-deflist::-webkit-scrollbar,
  .insights-details .acma-deflist::-webkit-scrollbar{ height: 4px; }
  .acma-deflist::-webkit-scrollbar-thumb,
  .insights-details .acma-deflist::-webkit-scrollbar-thumb{
    background: var(--acma-hairline, rgba(0, 20, 39, .08));
    border-radius: 999px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .acma-deflist,
  .insights-details .acma-deflist{ grid-auto-columns: 46%; }
}

/* The chevron beside each region heading in the mobile language panel. It was
   <i class="fa fa-angle-right">, drawn by a Font Awesome kit that answered 403
   on every request, so all three rendered as nothing. */
.acma-region__chevron {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--ds-space-2, 8px);
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .6;
}

/* The author box's link is a standalone control at the foot of every article
   and measured 297x30 -- under the 44px target on a phone. The table of
   contents rows measured 39. Both are the only standalone controls on an
   article page that were short; the breadcrumb's 32px rows and the inline
   links inside a sentence are exempt. */
.acma-author-box__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.acma-toc__item > a { min-height: 40px; }
/* And the category chip above a post title, 179x30. */
.acma-post-eyebrow > a { display: inline-flex; align-items: center; min-height: 40px; }

/* ==========================================================================
   MEDIA CARDS  (layout/media-cards)
   --------------------------------------------------------------------------
   The three `.two-column-block` rows on /about-us/ stacked with no gap between
   them, their columns alternating but never aligning, and their pictures
   square-cornered and flat on the ground -- the only content images left on
   the site not sitting on a plate. 1,206px at 1440 and 1,367 at 375 for three
   sentences and three photographs.

   One row of three cards, on the enclosure every other card here uses: outer
   shell with the tray, hairline and elevation, inner plate at the concentric
   radius, and the picture rounded to the plate inside that.
   ========================================================================== */

.acma-mediacards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--ds-space-5, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.acma-mediacards--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.acma-mediacards--two   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.acma-mediacard {
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
  transition: border-color .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              box-shadow .24s var(--acma-ease, cubic-bezier(.32,.72,0,1)),
              transform .24s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
.acma-mediacard::before { content: none; }
.acma-mediacard:hover {
  border-color: rgba(0, 20, 39, .18);
  box-shadow: var(--acma-lift-hover, var(--acma-lift));
  transform: translateY(-3px);
}

.acma-mediacard__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--ds-white, #fff);
  border-radius: var(--acma-radius-core, 20px);
}

/* The picture fills the top of the plate, so its top corners are the plate's
   and its bottom edge is square against the copy. `overflow: hidden` on the
   plate is what rounds it -- a radius on the <img> alone leaves the corners of
   its own box showing through on a subpixel seam. */
.acma-mediacard__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--acma-radius-core, 20px) var(--acma-radius-core, 20px) 0 0;
  background: var(--ds-surface, #F1F4F9);
}
.acma-mediacard__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s var(--acma-ease, cubic-bezier(.32,.72,0,1));
}
/* Removed: the plate already lifts. A 4% zoom over half a second on the
   photograph inside it was a second motion for one hover. */

.acma-mediacard__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3, 12px);
  flex: 1 1 auto;
  padding: var(--ds-space-6, 32px);
}
.acma-mediacard__title {
  margin: 0;
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-display-5);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
  text-wrap: balance;
}
.acma-mediacard__text {
  margin: 0;
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-sm, 1rem);
  line-height: var(--ds-leading-relaxed, 1.75);
}

@media (prefers-reduced-motion: reduce) {
  .acma-mediacard,
  .acma-mediacard__media img { transition: none; }
  .acma-mediacard:hover { transform: none; }
  .acma-mediacard:hover .acma-mediacard__media img { transform: none; }
}

/* Phone and tablet: the swipe row the value, route and deflist cards use. */
@media (max-width: 1023px) {
  .acma-mediacards {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: var(--ds-space-3, 12px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ds-space-4, 16px);
    padding-bottom: var(--ds-space-3, 12px);
    margin-inline: calc(var(--ds-space-4, 16px) * -1);
    padding-inline: var(--ds-space-4, 16px);
    -webkit-overflow-scrolling: touch;
  }
  .acma-mediacard { scroll-snap-align: start; padding: 5px; }
  .acma-mediacard__body { padding: var(--ds-space-5, 24px); }
  .acma-mediacards::-webkit-scrollbar { height: 4px; }
  .acma-mediacards::-webkit-scrollbar-thumb {
    background: var(--acma-hairline, rgba(0, 20, 39, .08));
    border-radius: 999px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .acma-mediacards { grid-auto-columns: 46%; }
}

/* ==========================================================================
   STORY SLIDER — the media column sits in its row
   --------------------------------------------------------------------------
   This block used to make .slider-image `position: sticky; top: 128px`, to
   stop a 364px picture leaving ~590px of empty ground beside a 950px copy
   column. The rebuild removed the reason: the picture now sits beside the
   opening paragraph only, and the cards run the full width underneath, so
   there is no tall column left for it to travel down.

   Leaving it in was actively harmful. Sticky does engage here -- .slick-list
   is `overflow: hidden`, which is a scroll container -- and it offset the
   image 128px down inside its own grid row, pushing the bottom of the picture
   through the row gap and 88px into the card grid below it. Measured on
   banking-and-finance, manufacturing and education at 1600, 1920 and 2560.
   `align-items` is set with the grid a few thousand lines up.
   ========================================================================== */

/* The deflist inside a slide's copy column: two across where the column can
   hold two, and the swipe row below 1024 that the article bodies use. */
.challenge-solution-results .acma-deflist {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--ds-space-3, 12px);
  margin: var(--ds-space-3, 12px) 0 var(--ds-space-5, 24px);
}
/* Flat here too, and at this specificity because the rule above it is not
   enough. There are up to eleven stories on an industry page and five of these
   cards in each, all in the flow at once: measured, 115 of them carrying the
   three-stop plate lift, which is why that template came out at 447 shadow
   stops against 27 to 64 everywhere else. */
.challenge-solution-results .acma-deflist > li {
  padding: 18px 20px;
  background: var(--ds-white, #fff);
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--ds-radius-lg, 16px);
  box-shadow: none;
}
/* style.css draws the bullet at (0,4,2) --
   `.case-study-slider-main .slider-content .challenge-solution-results ul
   li::before` -- so a card kept an orange dot floating over its top-left
   corner. Matched at that weight. */
.case-study-slider-main .slider-content .challenge-solution-results .acma-deflist > li::before,
.case-study-slider-main .slider-content .challenge-solution-results .acma-deflist > li::marker,
.challenge-solution-results .acma-deflist > li::before,
.challenge-solution-results .acma-deflist > li::marker { content: none; }
.case-study-slider-main .slider-content .challenge-solution-results .acma-deflist > li {
  padding: 18px 20px;
}

/* ==========================================================================
   PEOPLE GRID - the compact card, upgraded
   --------------------------------------------------------------------------
   The grid variant was a 96px horizontal strip: a 72px monogram, the name and
   role on one line, and a chevron at the right margin. At 1440 the two lower
   groups measured 327px and 379px for five people, and each card read as a
   select control rather than as a person.

   It is a vertical card now -- avatar, name, role, then a named control to
   open the bio -- so the three groups on the page share one card language with
   the rest of the site. Nothing about the markup or the <details> changed.
   ========================================================================== */

@media (min-width: 480px) {
  .acma-people--grid .acma-person__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-4, 16px);
    padding: var(--ds-space-6, 32px) var(--ds-space-6, 32px) var(--ds-space-5, 24px);
    min-height: 0;
  }
  .acma-people--grid .acma-person__portrait { width: 64px; height: 64px; }
  .acma-people--grid .acma-person__ident { flex: 0 0 auto; }

  /* The chevron becomes a labelled control at the foot of the card. It is
     decorative to assistive technology -- the <summary> already carries the
     person's name -- so the label is drawn from CSS. */
  .acma-people--grid .acma-person__more {
    width: auto;
    height: auto;
    margin: var(--ds-space-2, 8px) 0 0;
    padding: 0;
    gap: var(--ds-space-2, 8px);
    border: 0;
    background: none;
    color: var(--ds-primary, #B65002);
    font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
    font-size: var(--ds-text-xs, .875rem);
    font-weight: var(--ds-weight-bold, 700);
    letter-spacing: var(--ds-tracking-caps, .08em);
    text-transform: uppercase;
  }
  .acma-people--grid .acma-person__more::before { content: "Read bio"; }
  .acma-people--grid .acma-person__card[open] .acma-person__more::before { content: "Close"; }
}

/* The monogram is the portrait on this page -- every leader_image field is 0 --
   so it should look designed rather than like a missing image. Brand ground,
   brand ink, and the same hairline every plate here carries. */
.acma-person__portrait {
  background: var(--ds-primary-soft, #FDF0E7);
  border-color: rgba(182, 80, 2, .18);
}
.acma-section--surface .acma-person__portrait { background: var(--ds-primary-soft, #FDF0E7); }
.acma-person__monogram { color: var(--ds-primary-hover, #974302); }

/* auto-fit collapses the empty track, so the advisory group's two people were
   613px wide against the leadership group's 394 directly above them -- two
   card sizes for the same card, one section apart. auto-fill keeps the track,
   so every person card on the page is the same width. */
.acma-people--grid .acma-people__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  justify-content: start;
}

/* The article's lead image ran 96px past the right edge of the very column it
   sits in -- flush left with the headline, ragged right against it. It is the
   12-column calc() again: seven breakpoints of
   `min(1616px, 100vw) - 64px` and friends, each computing a width from an
   assumed page inset rather than from the column the block actually lives in.
   At 3840 that reads 1552px inside a 1456px parent. The parent is already the
   measure, so the block simply fills it, at every width. */
.insights-details .insights-details-content-wrapper .insights-details-head .post-image-block {
  width: 100%;
}

/* ==========================================================================
   THE CROSS-LINK TAIL — the merged pair, below 768 only
   --------------------------------------------------------------------------
   Built by ui-enhancements.js from the two adjacent .acma-tile-row sections.
   The control is a segmented switch, not a row of buttons: one tray, a
   sliding indicator, and the two halves reading as a single object. It takes
   the accent rule the two section heads gave up, so the tail still announces
   itself the way every other head on the page does.
   ========================================================================== */
.acma-tilepair__tabs {
  position: relative;
  /* The site's segmented control, two-up: a tray on the Plate ground, pills
     that carry only their state. Grid rather than the .acma-tabs__list flex
     row because these two labels are sentences, not words -- "Other industries
     we serve" wraps at 390px, and equal halves keep the tray symmetrical when
     one of them does. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--ds-space-1, 4px);
  padding: var(--ds-space-1, 4px);
  margin-bottom: var(--ds-space-5, 24px);
  background: var(--ds-surface, #F1F4F9);
  border-radius: var(--ds-radius-pill, 999px);
}
/* The tail keeps the accent rule the two section heads gave up, so it still
   announces itself the way every other head on the page does. */
.acma-tilepair__tabs::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ds-space-4, 16px) - 3px) auto auto 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--ds-primary, #B65002);
}
.acma-tilepair__tab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--ds-radius-pill, 999px);
  padding: var(--ds-space-2, 8px) var(--ds-space-3, 12px);
  min-height: 44px;
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-text-sm, 1rem);
  font-weight: var(--ds-weight-medium, 500);
  line-height: var(--ds-button-leading);
  color: var(--ds-text-muted, #5F5A54);
  text-align: center;
  cursor: pointer;
  transition: background-color 180ms var(--ds-ease, ease), color 180ms var(--ds-ease, ease);
}
.acma-tilepair__tab[aria-selected="true"] {
  background: var(--ds-white, #fff);
  color: var(--ds-ink, #001427);
  box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(0, 20, 39, .08));
}
.acma-tilepair__tab:focus-visible { outline: 2px solid var(--ds-secondary, #0450BD); outline-offset: 2px; }

.acma-tilepair__panel > .acma-section-lede { margin-bottom: var(--ds-space-4, 16px); }

/* The pair lives on one ground, and the second row's section is hidden, so
   the merged section carries the padding for both. It should not read as two
   sections' worth of air. */
@media (max-width: 767px) {
  .acma-tile-row:has(.acma-tilepair) .acma-section-head { display: none; }
}

/* ==========================================================================
   PHASE 4 — M7: THE EVENT CARD'S PHOTOGRAPH ON A PHONE
   Kept here rather than in mobile-density.css because both rules answer a
   rule in this file at equal specificity, and this file loads last.
   ========================================================================== */
@media (max-width: 767px) {
  /* 225px of a 532px card on /job-openings/ and four other templates -- the
     picture was the larger half of a card whose point is the button under it.
     A 16:9 crop at 344px wide is 194; 160 keeps it a header rather than a
     subject, and the copy and the CTA come up a screen-fifth. */
  .event-card-section .event-card .event-card-wrapper .event-card-section-img img {
    height: 160px;
    object-fit: cover;
  }

  /* 24px under the sentence and 24px over the button read as one 48px gap,
     which is wider than the gap above the sentence. */
  .event-card-section .event-card .event-card-section-content .heading-supporter .btn-connect {
    margin-top: 0;
  }

}

/* ==========================================================================
   QA-LIST — questions answered in the open
   --------------------------------------------------------------------------
   layout/qa-list. The site's other two question surfaces are disclosures, and
   correctly so; this one is the page's substance, so it renders open. See the
   component's own docblock.

   Deliberately not a card grid. Six answers of two to four sentences each are
   a document, and same-size cards would set them as six equal objects when
   the reader wants to read down them. A hairline between entries is the whole
   structure it needs.
   ========================================================================== */
.acma-qalist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ds-space-6, 32px);
  max-width: 74ch;
}
.acma-qalist__item {
  padding-top: var(--ds-space-6, 32px);
  border-top: 1px solid var(--ds-border, #DDE3EC);
}
/* The first entry sits directly under the section head, which already has a
   rule of its own above it. A second line there reads as a mistake. */
.acma-qalist__item:first-child {
  padding-top: 0;
  border-top: 0;
}
.acma-qalist__q {
  margin: 0 0 var(--ds-space-3, 12px);
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-display-6, 1.375rem);
  font-weight: var(--ds-weight-bold, 700);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ds-ink, #001427);
  text-wrap: balance;
}
.acma-qalist__a { color: var(--ds-text, #28282B); }
.acma-qalist__a > * {
  margin: 0;
  font-size: var(--ds-text-base, 1.125rem);
  line-height: 1.65;
}
.acma-qalist__a > * + * { margin-top: var(--ds-space-3, 12px); }
/* On an ink ground the answer cannot stay Warm Graphite. */
.acma-section--ink .acma-qalist__q { color: var(--ds-white, #fff); }
.acma-section--ink .acma-qalist__a { color: rgba(255, 255, 255, .78); }
.acma-section--ink .acma-qalist__item { border-top-color: rgba(255, 255, 255, .16); }

@media (max-width: 767px) {
  .acma-qalist { gap: var(--ds-space-5, 24px); }
  .acma-qalist__item { padding-top: var(--ds-space-5, 24px); }
  .acma-qalist__q { margin-bottom: var(--ds-space-2, 8px); }
}

/* From 1024 the question and its answer sit side by side. Stacked, six
   entries read as one long column and the eye has to find each question
   again; split, the questions form a scannable left edge and the answers a
   single measure beside them -- which is how a reference document is set, and
   what this page is. The measure stays inside 74ch either way.

   The list is not a table: the question column is narrower than the answer,
   so a long question wraps into its own space rather than forcing a row
   height on the answer. */
@media (min-width: 1024px) {
  .acma-qalist { max-width: none; }
  .acma-qalist__item {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--ds-space-8, 48px);
    align-items: start;
  }
  .acma-qalist__q { margin-bottom: 0; }
  .acma-qalist__a { max-width: 66ch; }
}

/* ==========================================================================
   GOOGLE TRANSLATE CHROME
   --------------------------------------------------------------------------
   The footer language switcher drives Google's translate widget, and Google
   answers by injecting a fixed toolbar across the top of the window and
   pushing the document down with an inline `top: 40px` on <body>. It covers
   the site's own header, it is not ours to style, and nothing on the page
   asks for it -- the switcher already says which language is active.

   The inline `top` needs !important to beat an element style attribute; the
   rest is Google's own markup, which only ever appears after a translation.
   ========================================================================== */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.skiptranslate,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}
/* Only the offset is neutralised. The theme sets `body { position: relative }`
   and elements are absolutely positioned against it, so forcing `static` here
   would drop those out of their containing block -- and it is not needed:
   with `top: 0` the offset is gone whether body is positioned or not. */
body { top: 0 !important; }
/* Google marks every translated run with a highlight; it reads as a selection
   the visitor did not make. */
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   STEP PATH — an ordered sequence with a rail through it
   --------------------------------------------------------------------------
   layout/step-path. Numbered because the order is the information; see the
   component's docblock for why that is not the banned eyebrow-and-numeral
   habit.

   Two layouts, one structure. Below 900 the path runs down the left margin
   and the rail joins the markers vertically. Above it the steps sit two-up
   and the rail is drawn along the top of each row, so four steps read as a
   sequence rather than a tall column of mostly nothing.
   ========================================================================== */
.acma-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: acma-step;
}
.acma-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: var(--ds-space-5, 24px);
  padding-bottom: var(--ds-space-8, 48px);
}
.acma-steps__item:last-child { padding-bottom: 0; }

/* The rail sits between markers, not behind them: it starts below one and
   stops above the next, so nothing is drawn through a numeral. */
.acma-steps__item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 52px;
  bottom: 8px;
  width: 2px;
  background: var(--ds-border, #DDE3EC);
}
.acma-steps__item:last-child::before { content: none; }

.acma-steps__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-circle, 50%);
  background: var(--ds-ink, #001427);
  color: var(--ds-white, #fff);
  font-family: var(--ds-font-primary, "Plus Jakarta Sans", sans-serif);
  font-size: var(--ds-text-sm, 1rem);
  font-weight: var(--ds-weight-bold, 700);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.acma-steps__label {
  display: block;
  margin-bottom: var(--ds-space-2, 8px);
  color: var(--ds-primary, #B65002);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-semibold, 600);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
}
.acma-steps__title {
  margin: 0 0 var(--ds-space-3, 12px);
  font-size: var(--ds-display-5, 1.5rem);
  font-weight: var(--ds-weight-bold, 700);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ds-ink, #001427);
  text-wrap: balance;
}
.acma-steps__text {
  margin: 0;
  max-width: 62ch;
  font-size: var(--ds-text-base, 1.125rem);
  line-height: 1.65;
  color: var(--ds-text, #28282B);
}
/* A caption, deliberately quieter than the body: it carries a number the
   reader may want to quote, not another sentence of argument. */
.acma-steps__meta {
  margin: var(--ds-space-3, 12px) 0 0;
  font-size: var(--ds-text-xs, .875rem);
  line-height: 1.5;
  color: var(--ds-text-muted, #5F5A54);
}

/* Marker and body share a baseline: the 44px marker centres on the label row
   above the title, not on the title itself. */
.acma-steps__body { padding-top: var(--ds-space-2, 8px); }

@media (min-width: 900px) {
  .acma-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ds-space-8, 48px);
    row-gap: var(--ds-space-8, 48px);
  }
  .acma-steps__item {
    grid-template-columns: 1fr;
    row-gap: var(--ds-space-4, 16px);
    padding-bottom: 0;
    padding-top: var(--ds-space-6, 32px);
    border-top: 2px solid var(--ds-border, #DDE3EC);
  }
  /* The vertical rail is the row's top border up here. */
  .acma-steps__item::before { content: none; }
  .acma-steps__item:last-child { border-top: 2px solid var(--ds-border, #DDE3EC); }
  .acma-steps__body { padding-top: 0; }
  /* The first step's rule carries the accent, so the sequence has a start. */
  .acma-steps__item:first-child { border-top-color: var(--ds-primary, #B65002); }
}

/* On ink the rail and the marker invert. */
.acma-section--ink .acma-steps__item,
.acma-section--ink .acma-steps__item::before { border-top-color: rgba(255, 255, 255, .18); background-color: transparent; }
.acma-section--ink .acma-steps__item::before { background: rgba(255, 255, 255, .18); }
.acma-section--ink .acma-steps__marker { background: var(--ds-primary-vivid, #FF7F1F); color: var(--ds-ink, #001427); }
.acma-section--ink .acma-steps__title { color: var(--ds-white, #fff); }
.acma-section--ink .acma-steps__text { color: rgba(255, 255, 255, .78); }
.acma-section--ink .acma-steps__meta { color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   THE STORY SLIDER'S SLIDES STOP BEING EQUAL HEIGHT
   --------------------------------------------------------------------------
   style.css sets `.slick-slider .slick-list .slick-track { display: flex }`
   with `height: inherit` on the slides, both `!important`. That is right for
   the card carousels, where three cards in a row should share an edge -- and
   wrong here, where each slide is a whole story and only one is on screen.

   The cost was measurable: with a flex track every slide is stretched to the
   tallest, so slick's own `adaptiveHeight` had nothing to shrink and the list
   stayed at the height of the longest of the eleven stories. A short story
   left several hundred pixels of empty page above the arrows, and the arrows
   sat at the tallest story's baseline on every story.

   Scoped to this one slider so the card carousels keep the behaviour the rule
   exists for. `!important` only because the rule it answers carries one.
   ========================================================================== */
.content-slider-section .case-study-slider.slick-slider .slick-list .slick-track {
  align-items: flex-start;
}
.content-slider-section .case-study-slider.slick-slider .slick-list .slick-track .slick-slide {
  height: auto !important;
}

/* ==========================================================================
   THE STORY SLIDER'S PLAIN LISTS GET REAL BULLETS
   --------------------------------------------------------------------------
   Not every story's list qualifies as a card set: acma_mark_labelled_lists()
   only converts one where three or more items open with a bold label. Where
   the author wrote plain sentences instead -- healthcare's voice-broadcasting
   story, several of manufacturing's -- the list fell through to the theme's
   global `list-style: none` with no marker, no indent and no space between
   items, so five separate solutions read as one paragraph that happened to
   break oddly. Measured: markers `none`, `padding-left: 0`, `margin-bottom: 0`.

   The marker is drawn as a pseudo-element rather than a list-style, because
   these lists run in two columns above 1024 and a real marker set `outside`
   is clipped at the column edge. Signal Brick, at the size the accent is used
   everywhere else -- the list is content, not decoration, so the mark is small
   and the text carries it.
   ========================================================================== */
.content-slider-section .case-study-slider .slider .challenge-solution-results > ul:not(.acma-deflist) {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.content-slider-section .case-study-slider .slider .challenge-solution-results > ul:not(.acma-deflist) > li {
  position: relative;
  padding-left: var(--ds-space-5, 24px);
  margin-bottom: var(--ds-space-3, 12px);
  line-height: 1.65;
  break-inside: avoid;
}
.content-slider-section .case-study-slider .slider .challenge-solution-results > ul:not(.acma-deflist) > li:last-child {
  margin-bottom: 0;
}
.content-slider-section .case-study-slider .slider .challenge-solution-results > ul:not(.acma-deflist) > li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Aligned to the first line's optical centre, not its box: 1.65 leading on
     18px text puts the x-height band around .62em. */
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-primary, #B65002);
}

/* Two columns where the row is wide enough to hold them. Six short items ran
   173px in a single column across the full 1,248px row, which reads as an
   unfinished block rather than a list. */
@media (min-width: 1024px) {
  .content-slider-section .case-study-slider .slider .slider-detail > ul:not(.acma-deflist) {
    columns: 2;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
  }
}

/* ==========================================================================
   FOOTER: "MORE LINKS", AND THE GAP UNDER "STAY CONNECTED"
   --------------------------------------------------------------------------
   Two things the site owner asked for on 2026-09-11.

   1. "More Links" goes back to the comp: a filled disc carrying the plus,
      centred, with a rule running out to each side, and the label underneath.
      The same control at every width.

      It was built that way once. style.css draws the rule as an absolutely
      positioned .viewmore_list:before bar and breaks it around the plus with a
      second bar painted in the old #0b0b0b footer colour. Two things then
      happened: the footer ground changed, so that mask no longer matched what
      it was covering and the rule struck through the label; and the control
      became a <button>, which left every `.viewmore_list a ...` rule -- twelve
      of them, including the svg sizing, the hover, and the plus/minus swap --
      matching nothing at all. The response at the time was to drop the rule
      (`content: none`) and lay the control out horizontally instead.

      Rebuilt here rather than repaired: the rules are flex children, so they
      size themselves and need no mask to break them, and nothing depends on
      the ground colour. That removes the failure mode that started this.

      Specificity is pitched at .site-footer .viewmore_list .viewmore-toggle
      deliberately -- it has to win against the 1200px tray block earlier in
      this file and the mobile block in mobile-density.css, both of which
      styled the symptom.

   2. The gap between the "Stay connected" heading and the icons was carried by
      padding on the h2 -- 33px of padding-right side by side, 10px of
      padding-bottom once it wrapped. Ten pixels under a heading is not a gap.
      It is one `gap` on the flex container now, which works in both
      directions, so the wrapped and unwrapped cases cannot drift apart again.
   ========================================================================== */

/* ---- 1. More Links ------------------------------------------------------ */

/* .join-team is a flex row between roughly 1020 and 1279 and does NOT wrap
   there, so the full-width basis below placed the control beside "Explore
   careers" and ran it 276px past the viewport -- the only horizontal overflow
   in a 320-to-3840 sweep. Wrapping is already how it behaves at 834; this
   makes the flex band agree. Above 1280 and below 600 the container is block,
   where the property is inert. */
.site-footer .join-team {
  flex-wrap: wrap;
}

.site-footer .viewmore_list {
  display: flex;
  /* .join-team is a wrapping flex row, so without a full basis this sat in the
     right-hand slot beside "Explore careers" on tablet and the flanking rules
     came out as two stubs. It takes its own row at every width now. */
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--ds-space-4, 16px);
  row-gap: 0;
  margin-top: var(--ds-space-6, 32px);
  text-align: center;
  position: static;
}

/* The two rules. Flex children, so they take the space the disc leaves. */
.site-footer .viewmore_list::before,
.site-footer .viewmore_list::after {
  content: "";
  flex: 1 1 0;
  min-width: var(--ds-space-6, 32px);
  height: 1px;
  background: var(--acma-hairline-inverse, rgba(255, 255, 255, .24));
  /* style.css positions ::before absolutely; unset that so it can flex. */
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
}
.site-footer .viewmore_list::before { order: 0; }
.site-footer .viewmore_list::after { order: 2; }

.site-footer .viewmore_list .viewmore-toggle {
  order: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  /* The disc is 44px, so the control already meets the touch target. */
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.site-footer .viewmore_list .viewmore-toggle .plusbtninner {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  line-height: 0;
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-white, #FFFFFF);
  border: 0;
  box-shadow: none;
  transition: background-color .2s ease;
}

.site-footer .viewmore_list .viewmore-toggle .plusbtninner .svg-tag {
  display: grid;
  place-items: center;
  /* Explicit, because a stale mobile rule used to set flex-start here and the
     grid track went with it -- the disc stayed centred while the plus inside
     it did not. */
  justify-content: center;
  align-content: center;
  line-height: 0;
}

.site-footer .viewmore_list .viewmore-toggle .plusbtninner .svg-tag svg {
  width: 15px;
  height: 15px;
  fill: var(--ds-text, #28282B);
  transition: fill .2s ease;
}

/* The old hover fill was .viewmore_list a:hover .plusbtninner:after, which can
   no longer be triggered. The disc takes the state itself. */
.site-footer .viewmore_list .viewmore-toggle .plusbtninner::after { content: none; }

.site-footer .viewmore_list .viewmore-toggle:hover .plusbtninner {
  background: var(--ds-primary-vivid, #FF7F1F);
}
.site-footer .viewmore_list .viewmore-toggle:hover .plusbtninner .svg-tag svg {
  fill: var(--ds-white, #FFFFFF);
}
.site-footer .viewmore_list .viewmore-toggle:focus-visible {
  outline: 2px solid var(--ds-primary-vivid, #FF7F1F);
  outline-offset: 3px;
  border-radius: var(--ds-radius-pill, 999px);
}

/* Open/closed. custom.js toggles .viewSvg on the control, and every rule that
   swapped these keyed on an <a>. */
.site-footer .viewmore_list .viewmore-toggle .plus_inner { display: block; }
.site-footer .viewmore_list .viewmore-toggle .minus_inner { display: none; }
.site-footer .viewmore_list .viewmore-toggle.viewSvg .plus_inner { display: none; }
.site-footer .viewmore_list .viewmore-toggle.viewSvg .minus_inner { display: block; }

/* The label sits under the disc on its own row, centred. */
.site-footer .viewmore_list h3 {
  order: 3;
  flex: 1 0 100%;
  margin: var(--ds-space-3, 12px) 0 0;
  text-align: center;
  font-family: var(--ds-font-primary);
  font-size: var(--ds-subhead-size);
  font-weight: var(--ds-subhead-weight);
  line-height: var(--ds-subhead-leading);
  letter-spacing: var(--ds-subhead-tracking);
  text-transform: uppercase;
}

/* ---- 2. Stay connected -------------------------------------------------- */

.site-footer .footer-top .social-media .social-media-top {
  column-gap: var(--ds-space-8, 40px);
  row-gap: var(--ds-space-4, 16px);
}
/* The padding was the old spacing mechanism; the gap is the only one now. */
.site-footer .footer-top .social-media .social-media-top h2 {
  padding-right: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   MOBILE DRAWER: ONE CHEVRON POSITION
   --------------------------------------------------------------------------
   The chevrons sat at four different insets from the row's right edge --
   measured at 390px: 64.8, 61.9, 6.9 and 14.9 pixels -- because three
   mechanisms were placing them.

   A top-level parent's row carries padding-right:55px, and the chevron's
   margin-right:10px is measured from the content box, so it landed 65px in. A
   nested parent's row has no such padding, so the same margin landed it at
   7px. And the one parent with a real destination gets an injected 44px
   button, absolutely positioned at the row's right edge, with the chevron
   centred inside it -- 15px.

   ui-enhancements.js now hangs every chevron off the row link itself, so there
   is one coordinate space. This positions it against that row, once. The
   injected button keeps its 44px hit area and simply draws nothing.
   ========================================================================== */
@media (max-width: 1023px) {
  .menu-main-nav-container li.menu-item-has-children > a {
    position: relative;
    /* Room for the chevron, so a long label cannot run underneath it. */
    padding-right: 44px;
  }

  .menu-main-nav-container li.menu-item-has-children > a > .acma-chevron {
    position: absolute;
    right: 18px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%) rotate(45deg);
  }

  .menu-main-nav-container li.menu-item-has-children.active > a > .acma-chevron {
    transform: translateY(-50%) rotate(-135deg);
  }

  /* Nothing to draw here any more; the button is the target, not the mark. */
  .menu-main-nav-container .acma-submenu-toggle > .acma-chevron { display: none; }
}

/* Scroll lock for the language dialog. A class on <html> rather than inline
   styles on <body>: the inline lock was applied correctly on click and then
   wiped ~800ms later, while the dialog was still open, by something else on
   the page writing to body. !important keeps this from losing that argument.
   overscroll-behavior stops the panel's own scroll from chaining into the page
   behind it, which is the part a visitor actually feels. */
html.acma-modal-open,
html.acma-modal-open body {
  overflow: hidden !important;
  touch-action: none;
}
.modal.languagepopup,
.modal.languagepopup .modal-body {
  overscroll-behavior: contain;
}

/* The relocated "More links" panel is a child of .join-team on mobile, which
   is a wrapping flex row -- it needs its own full row there, like the toggle
   it now follows. */
@media (max-width: 1023px) {
  .site-footer .join-team > #footermorelinks {
    flex: 1 0 100%;
    margin-top: var(--ds-space-4, 16px);
  }
}

/* ==========================================================================
   THE MACHINE-READABLE ENDPOINTS  (sitemap page)
   --------------------------------------------------------------------------
   A <dl> because that is what it is: two terms, each with a set of addresses
   under it. Quiet by construction -- this is a footnote on a page of links,
   not a third call to action -- so the label is the only thing set in the
   accent, and the paths are set in the mono face because they are literal
   strings a reader may need to type.
   ========================================================================== */
.acma-endpoints {
  margin: 0;
  display: grid;
  gap: var(--ds-space-3, 12px);
}
.acma-endpoints__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-2, 8px) var(--ds-space-4, 16px);
}
.acma-endpoints__label {
  margin: 0;
  min-width: 9.5rem;
  color: var(--ds-text-muted, #5F5A54);
  font-size: var(--ds-text-sm, 1rem);
  font-weight: var(--ds-weight-medium, 500);
}
.acma-endpoints__links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-2, 8px) var(--ds-space-4, 16px);
}
.acma-endpoints__link {
  /* 44px of target without 44px of ink: the padding opens into the row's own
     gap rather than pushing the rows apart. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ds-primary, #B65002);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms var(--ds-ease, ease);
}
.acma-endpoints__link code {
  font-family: var(--ds-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: var(--ds-text-xs, .875rem);
}
.acma-endpoints__link:hover { color: var(--ds-primary-hover, #974302); }
.acma-endpoints__link:focus-visible {
  outline: 2px solid var(--ds-secondary, #0450BD);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (max-width: 600px) {
  .acma-endpoints__row { display: grid; gap: 0; }
  .acma-endpoints__label { min-width: 0; }
}

/* ==========================================================================
   MOBILE DRAWER — third-level items: clipping, weight, and tap feedback

   Three faults, all on the same rows (the product and service lists that
   open under a second-level parent), all visible together on a 390px screen:

   1. CLIPPED LABELS. The theme sets `white-space: nowrap` on
      `li.menu-depth-2 > a`, which is right for the desktop dropdown, where
      the panel sizes itself to its content. In the drawer the row is a fixed
      295px and the longest label measures 450px, so "AcmaCare – SuperSpeciality
      Hospital Management System" lost its last 155px off the right edge with
      no ellipsis to admit it. Eight of the nine product names were cut.

   2. WASHED-OUT TEXT. These rows compute to #fff on #001427 (18.59:1), so
      every contrast check passed, and they still read as grey next to their
      white parents. The cause is not the colour: it is weight 400-500 at 16px
      rendered with the global `-webkit-font-smoothing: antialiased`, which
      thins light-on-dark strokes. Measuring the colour could never find this;
      it only shows in a screenshot. Fixed where it actually lives -- give the
      rows the weight their parents have and let them render with normal
      smoothing.

   3. NO TAP FEEDBACK. Hover and active produced no change at all in the
      drawer, so a tap gave nothing back before the page navigated. The
      hover tone here is the vivid orange, which measures 7.36:1 on the
      drawer's navy -- feedback without trading away legibility. It is the
      same tone the top-level rows already use.

   The selectors below repeat the theme's own, so they win on source order
   rather than on an !important that the next person has to unpick.
   ========================================================================== */
@media (max-width: 1023px) {
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu > li > ul li.menu-depth-2 > a,
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu > li > ul li.menu-depth-2 > div {
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: var(--ds-weight-semibold, 600);
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    color: var(--ds-white, #FFFFFF);
    line-height: 1.35;
  }

  /* The second-level rows ("Services", "Solutions", "Products") keep their
     heavier weight; they only need the smoothing correction so the whole
     drawer renders on one footing. */
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu > li > a {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    white-space: normal;
  }

  /* Tap and keyboard feedback. :active covers the touch press; :hover is what
     a touch device leaves behind after it, and both land on the same tone. */
  header .header-right-main .header-right .menu-main-nav-container .sub-menu a:hover,
  header .header-right-main .header-right .menu-main-nav-container .sub-menu a:active,
  header .header-right-main .header-right .menu-main-nav-container .sub-menu a:focus-visible,
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu > li > ul li.menu-depth-2 > a:hover,
  header .header-right-main .header-right .menu-main-nav-container > .main-menu > ul > li > ul.sub-menu > li > ul li.menu-depth-2 > a:active {
    color: var(--ds-primary-vivid, #FF7F1F);
  }
}

/* ==========================================================================
   VISUALLY HIDDEN

   The theme never defined .screen-reader-text. WordPress core emits it on its
   own markup -- skip links, form labels, table captions -- so every one of
   those was rendering as ordinary visible text, which is how a duplicated
   caption first appeared under a chart. Defined once here, in the standard
   clip-rect form rather than display:none, because display:none removes the
   text from the accessibility tree, which is the opposite of the intent.
   ========================================================================== */
.screen-reader-text,
.acma-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus,
.acma-visually-hidden:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* ==========================================================================
   DATA FIGURE — charts whose numbers survive with CSS off

   Bars are boxes with a percentage width rather than SVG, so a 52-character
   label wraps instead of overflowing a viewBox, and the whole row restacks
   under 560px without a second set of rules for the drawing.

   The data table is present in every figure. For bar charts it is visually
   hidden, because each bar already prints its own label, value and note and
   showing both put every number on the page twice. For line charts it is
   visible, because a curve cannot state its own values.
   ========================================================================== */
.acma-figure {
  margin: 2rem 0;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--ds-surface, #F5F7FA);
  border: 1px solid var(--ds-border, #E2E8F0);
  border-radius: 10px;
}

.acma-figure__caption {
  order: -1;
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: var(--ds-weight-semibold, 600);
  line-height: 1.35;
  color: var(--ds-text, #28282B);
}

/* The caption is written last in the markup so the table it labels follows a
   heading rather than preceding one; flex order puts it back on top visually
   without moving it in the document. */
.acma-figure {
  display: flex;
  flex-direction: column;
}

.acma-figure__bars {
  display: grid;
  gap: 0.55rem;
}

.acma-figure__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11rem) 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.acma-figure__label {
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--ds-text, #28282B);
}

.acma-figure__rownote {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ds-text-muted, #5A6472);
}

.acma-figure__track {
  position: relative;
  display: block;
  height: 0.85rem;
  background: var(--ds-border, #E2E8F0);
  border-radius: 999px;
  overflow: hidden;
}

.acma-figure__bar {
  display: block;
  height: 100%;
  background: var(--ds-primary, #B65002);
  border-radius: 999px;
}

.acma-figure__value {
  font-size: 0.875rem;
  font-weight: var(--ds-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ds-text, #28282B);
}

/* Line charts. The SVG stretches; the stroke does not, because every line
   carries vector-effect="non-scaling-stroke". */
.acma-figure__plot svg {
  display: block;
  width: 100%;
  height: 190px;
}

.acma-figure__grid {
  stroke: var(--ds-border, #E2E8F0);
  stroke-width: 1;
}

.acma-figure__line {
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.acma-figure__line--0 { stroke: var(--ds-primary, #B65002); }
.acma-figure__line--1 { stroke: var(--ds-ink, #001427); }
.acma-figure__line--2 { stroke: var(--ds-primary-vivid, #FF7F1F); }
.acma-figure__line--3 { stroke: var(--ds-text-muted, #5A6472); }

.acma-figure__xaxis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--ds-text-muted, #5A6472);
}

.acma-figure__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.acma-figure__key-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ds-text-muted, #5A6472);
}

.acma-figure__key-item::before {
  content: "";
  width: 0.9rem;
  height: 0.2rem;
  border-radius: 999px;
  background: currentColor;
}

.acma-figure__key-item--0::before { background: var(--ds-primary, #B65002); }
.acma-figure__key-item--1::before { background: var(--ds-ink, #001427); }
.acma-figure__key-item--2::before { background: var(--ds-primary-vivid, #FF7F1F); }
.acma-figure__key-item--3::before { background: var(--ds-text-muted, #5A6472); }

/* The visible data table, for line figures. */
.acma-figure__data {
  width: 100%;
  margin: 1rem 0 0;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.acma-figure__data th,
.acma-figure__data td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--ds-border, #E2E8F0);
}

.acma-figure__data td {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.acma-figure__data thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted, #5A6472);
}

/* Present for assistive technology and crawlers, not drawn. Same technique as
   .screen-reader-text; repeated rather than composed so that removing the
   modifier in the editor cannot leave a half-hidden table. */
.acma-figure__data--quiet {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.acma-figure__note {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ds-text-muted, #5A6472);
}

.acma-figure__note sup { font-size: 0.7em; }

@media (max-width: 559px) {
  .acma-figure {
    padding: 1rem 0.9rem 0.9rem;
  }
  /* Below this width a label column wide enough to read leaves no bar. Stack
     instead: label on its own line, bar and value beneath it. */
  .acma-figure__row {
    grid-template-columns: 1fr auto;
    gap: 0.3rem 0.6rem;
  }
  .acma-figure__label {
    grid-column: 1 / -1;
  }
  .acma-figure__plot svg {
    height: 150px;
  }
}

/* --------------------------------------------------------------------------
   Figure typography, re-asserted inside the article column.

   The article body styles its own descendants -- `.post-large-content p`,
   `ul`, `li`, `table` -- at (0,1,1), which outranks a single class. A figure
   dropped into that column therefore inherited 18px body text for its note and
   list-marker styling for its key. Scoping each rule under .acma-figure takes
   these to (0,2,0) and settles it without !important.
   -------------------------------------------------------------------------- */
.acma-figure .acma-figure__note {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ds-text-muted, #5A6472);
}

.acma-figure .acma-figure__caption {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--ds-text, #28282B);
}

.acma-figure .acma-figure__label {
  font-size: 0.875rem;
  line-height: 1.3;
}

.acma-figure .acma-figure__rownote {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ds-text-muted, #5A6472);
}

.acma-figure .acma-figure__value {
  font-size: 0.875rem;
}

.acma-figure .acma-figure__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  font-size: 0.8rem;
  list-style: none;
}

.acma-figure .acma-figure__key-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  list-style: none;
}

.acma-figure .acma-figure__key-item::marker { content: ""; }

/* The swatch. Scoped, because the article body styles li::before as a bullet
   and that rule outranks a single class -- which collapsed each swatch into a
   sliver and stacked the key into a column. */
.acma-figure .acma-figure__key-item::before {
  content: "";
  flex: none;
  width: 0.9rem;
  height: 0.2rem;
  margin: 0;
  border-radius: 999px;
  background: currentColor;
  position: static;
}

.acma-figure .acma-figure__key-item--0::before { background: var(--ds-primary, #B65002); }
.acma-figure .acma-figure__key-item--1::before { background: var(--ds-ink, #001427); }
.acma-figure .acma-figure__key-item--2::before { background: var(--ds-primary-vivid, #FF7F1F); }
.acma-figure .acma-figure__key-item--3::before { background: var(--ds-text-muted, #5A6472); }

.acma-figure .acma-figure__data th,
.acma-figure .acma-figure__data td {
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Contain the swipe-row bleed on small screens.

   .acma-deflist bleeds `margin-inline: -16px` below 1024px so its cards can
   scroll to the screen edge. That assumes the article column is inset by 16px
   on both sides. It is not: the column measures a 16px left inset and a 14px
   right one, so the bleed overshoots the right edge by 2px and the document
   picks up a 2px horizontal scroll. The asymmetry is upstream of this rule and
   older than it; what is new is content whose labelled lists turn into
   scrollers, which is what made it visible.

   `clip` rather than `hidden` deliberately. `overflow: hidden` makes the
   element a scroll container, which silently breaks `position: sticky` for
   every descendant -- and this theme pins its header that way. `clip` trims
   the overflow without creating one, so the bleed still reaches the left edge,
   the row still scrolls on its own axis, and the header still pins.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  html,
  body {
    overflow-x: clip;
  }
}

/* ==========================================================================
   USE-CASE BANNER — one aspect at every width

   The reading template gives a featured image `aspect-ratio: 1200/630` and
   `max-height: min(52vh, 560px)` with `object-fit: cover`. Those two disagree
   about the shape of the slot depending on the width: below about 1100px the
   ratio wins and the box is 1.905, above it the cap wins and the box is 2.61.
   A photograph does not mind — it is cropped either way and nobody can tell.
   A drawing does. Measured on a 1600x616 banner: 99.8% visible at 1440, and
   73% of the width at 390, which cut the left-hand stack and the right-hand
   card off the composition entirely.

   Pinning the ratio to the artwork's own makes the slot one shape everywhere,
   so the whole drawing shows at every width and the cap never binds. Scoped to
   single-use_case: the article banners are 16:9 photographs and schematics
   authored against the existing behaviour, and changing the slot under them
   would crop a third off each one on a phone.
   ========================================================================== */
body.single-use_case .insights-details .post-image-block img,
body.single-use_case .insights-details .post-image-plate img {
  aspect-ratio: 1600 / 616;
  max-height: none;
}