/* ACXPA — Call Centre Rankings dashboards
   ---------------------------------------------------------------------------
   The shared component sheet behind /members-ccr-dashboard/ and
   /subscribers-ccr-dashboard/. It was living in the members page's WPBakery
   Custom CSS box, which is section 21c location 5 - fine for one page, wrong
   the moment a second page needs the same components. Moved here so both
   dashboards draw on one definition.

   Everything is scoped to #acxpanatmemr. Built against acxpa-tokens.css v1.2.0
   and ACXPA Brand & Digital Standards v1.9: no hex literals, no var()
   fallbacks. The !important declarations are all aimed at theme heading and
   link rules that are themselves !important (s21e.2).

   NOTE: the members dashboard still carries its own copy in the page's Custom
   CSS box. Page CSS is emitted in the body and therefore wins over this file
   whatever it says, so that box needs clearing (Page Settings -> Custom CSS)
   before edits here reach that page.
   --------------------------------------------------------------------------- */

#acxpanatmemr {
  font-family: var(--acxpa-ds-font);
  color: var(--acxpa-ds-ink);
  display: block;
}

#quarterly-reports,
#downloads,
#acxpanatmemr [id] {
  scroll-margin-top: var(--acxpa-anchor-offset, 160px);
}

#acxpanatmemr .acxpanatmemr-header {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 44px 40px;
  margin: 0 0 24px;
  border-radius: var(--acxpa-ds-radius-xl);
  background: linear-gradient(135deg, var(--acxpa-ds-teal-900) 0%, var(--acxpa-ds-teal-700) 100%);
  color: var(--acxpa-ds-white);
}
#acxpanatmemr .acxpanatmemr-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--acxpa-ds-gold);
}
#acxpanatmemr .acxpanatmemr-header__badge {
  flex: 0 0 auto;
  align-self: center;
  line-height: 0;
}
#acxpanatmemr .acxpanatmemr-header__badge img {
  width: 150px;
  height: auto;
  display: block;
}
#acxpanatmemr .acxpanatmemr-header__content {
  flex: 1 1 auto;
  min-width: 0;
}
#acxpanatmemr .acxpanatmemr-header__title {
  font-family: var(--acxpa-ds-font) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: var(--acxpa-ds-white) !important;
  margin: 0 0 16px !important;
  text-transform: none !important;
  text-wrap: balance;
}
#acxpanatmemr .acxpanatmemr-header__highlight {
  color: var(--acxpa-ds-gold);
}
#acxpanatmemr .acxpanatmemr-header__lead {
  font-size: 18px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-white);
  margin: 0 0 14px;
}
#acxpanatmemr .acxpanatmemr-header__lead strong {
  font-weight: 700;
  color: var(--acxpa-ds-white);
}
#acxpanatmemr .acxpanatmemr-header__desc {
  font-size: 16px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-teal-100);
  margin: 0 0 20px;
}
#acxpanatmemr .acxpanatmemr-header__cta {
  border: 1px solid var(--acxpa-ds-teal-400);
  border-left: 4px solid var(--acxpa-ds-gold);
  border-radius: var(--acxpa-ds-radius-md);
  background: var(--acxpa-ds-teal-800);
  padding: 16px 20px;
}
#acxpanatmemr .acxpanatmemr-header__cta p {
  margin: 0;
  font-size: 16px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-white);
}
#acxpanatmemr .acxpanatmemr-header__cta strong {
  color: var(--acxpa-ds-gold);
  font-weight: 700;
}
#acxpanatmemr .acxpanatmemr-header__cta a {
  color: var(--acxpa-ds-gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#acxpanatmemr .acxpanatmemr-header__cta a:hover,
#acxpanatmemr .acxpanatmemr-header__cta a:focus {
  color: var(--acxpa-ds-white);
}

#acxpanatmemr .acxpanatmemr-nav {
  position: sticky;
  top: var(--acxpa-header-height, 121px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  margin: 0 0 24px;
  background: var(--acxpa-ds-white);
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-lg);
  box-shadow: var(--acxpa-ds-shadow-sm);
}
#acxpanatmemr .acxpanatmemr-nav__label {
  align-self: center;
  margin-right: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--acxpa-ds-slate);
  line-height: 1.2;
}
#acxpanatmemr .acxpanatmemr-nav__link {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--acxpa-ds-radius-pill);
  border: 1px solid var(--acxpa-ds-teal-200);
  background: var(--acxpa-ds-cloud);
  color: var(--acxpa-ds-teal-700) !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  line-height: 1.2;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#acxpanatmemr .acxpanatmemr-nav__link:hover,
#acxpanatmemr .acxpanatmemr-nav__link:focus {
  background: var(--acxpa-ds-teal-700);
  border-color: var(--acxpa-ds-teal-700);
  color: var(--acxpa-ds-white) !important;
}
#acxpanatmemr .acxpanatmemr-nav__link:focus-visible {
  outline: 3px solid var(--acxpa-ds-teal-900);
  outline-offset: 2px;
}

#acxpanatmemr .acxpanatmemr-section {
  background: var(--acxpa-ds-white);
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-xl);
  padding: 40px;
  margin: 0 0 24px;
}
#acxpanatmemr .acxpanatmemr-section--alt {
  background: var(--acxpa-ds-cloud);
}
#acxpanatmemr .acxpanatmemr-section:last-of-type {
  margin-bottom: 0;
}
#acxpanatmemr .acxpanatmemr-section__head {
  margin: 0 0 28px;
}
#acxpanatmemr .acxpanatmemr-section__title {
  font-family: var(--acxpa-ds-font) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--acxpa-ds-teal-700) !important;
  margin: 0 0 12px !important;
  text-transform: none !important;
}
#acxpanatmemr .acxpanatmemr-section__desc {
  font-size: 17px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-slate);
  margin: 0;
}

#acxpanatmemr .acxpanatmemr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

#acxpanatmemr .acxpanatmemr-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--acxpa-ds-white);
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-lg);
  box-shadow: var(--acxpa-ds-shadow-sm);
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#acxpanatmemr .acxpanatmemr-card:hover,
#acxpanatmemr .acxpanatmemr-card:focus {
  transform: translateY(-4px);
  border-color: var(--acxpa-ds-teal-400);
  box-shadow: var(--acxpa-ds-shadow-lg);
  text-decoration: none !important;
}
#acxpanatmemr .acxpanatmemr-card:focus-visible {
  outline: 3px solid var(--acxpa-ds-teal-900);
  outline-offset: 3px;
}
#acxpanatmemr .acxpanatmemr-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--acxpa-ds-radius-md);
  background: var(--acxpa-ds-teal-700);
  margin: 0 0 18px;
  transition: background 0.25s ease;
}
#acxpanatmemr .acxpanatmemr-card:nth-child(3n+2) .acxpanatmemr-card__icon {
  background: var(--acxpa-ds-harbour);
}
#acxpanatmemr .acxpanatmemr-card:nth-child(3n+3) .acxpanatmemr-card__icon {
  background: var(--acxpa-ds-clay-deep);
}
#acxpanatmemr .acxpanatmemr-card__icon i {
  font-size: 24px;
  line-height: 1;
  color: var(--acxpa-ds-white);
  transition: color 0.25s ease;
}
#acxpanatmemr .acxpanatmemr-card:hover .acxpanatmemr-card__icon {
  background: var(--acxpa-ds-gold);
}
#acxpanatmemr .acxpanatmemr-card:hover .acxpanatmemr-card__icon i {
  color: var(--acxpa-ds-ink);
}
#acxpanatmemr .acxpanatmemr-card__title {
  font-family: var(--acxpa-ds-font) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--acxpa-ds-teal-700) !important;
  margin: 0 0 10px !important;
  text-transform: none !important;
}
#acxpanatmemr .acxpanatmemr-card__desc {
  font-size: 15px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-slate);
  margin: 0 0 20px;
  flex: 1 1 auto;
}
#acxpanatmemr .acxpanatmemr-card__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--acxpa-ds-teal-100);
}
#acxpanatmemr .acxpanatmemr-card__btn {
  font-size: 15px;
  font-weight: 700;
  color: var(--acxpa-ds-teal-700);
}
#acxpanatmemr .acxpanatmemr-card:hover .acxpanatmemr-card__btn {
  color: var(--acxpa-ds-gold-deep);
}
#acxpanatmemr .acxpanatmemr-card__meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acxpa-ds-slate);
}

#acxpanatmemr .acxpanatmemr-grid--sectors {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#acxpanatmemr .acxpanatmemr-sector {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: var(--acxpa-ds-white);
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-lg);
  box-shadow: var(--acxpa-ds-shadow-sm);
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#acxpanatmemr .acxpanatmemr-sector:hover,
#acxpanatmemr .acxpanatmemr-sector:focus {
  transform: translateY(-4px);
  border-color: var(--acxpa-ds-teal-400);
  box-shadow: var(--acxpa-ds-shadow-lg);
  text-decoration: none !important;
}
#acxpanatmemr .acxpanatmemr-sector:focus-visible {
  outline: 3px solid var(--acxpa-ds-teal-900);
  outline-offset: 3px;
}
#acxpanatmemr .acxpanatmemr-sector__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
#acxpanatmemr .acxpanatmemr-sector__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--acxpa-ds-radius-md);
  background: var(--acxpa-ds-gold-tint);
  border: 1px solid var(--acxpa-ds-gold);
  transition: background 0.25s ease, border-color 0.25s ease;
}
#acxpanatmemr .acxpanatmemr-sector__icon i {
  font-size: 20px;
  line-height: 1;
  color: var(--acxpa-ds-teal-700);
  transition: color 0.25s ease;
}
#acxpanatmemr .acxpanatmemr-sector:hover .acxpanatmemr-sector__icon {
  background: var(--acxpa-ds-teal-700);
  border-color: var(--acxpa-ds-teal-700);
}
#acxpanatmemr .acxpanatmemr-sector:hover .acxpanatmemr-sector__icon i {
  color: var(--acxpa-ds-white);
}
#acxpanatmemr .acxpanatmemr-sector__badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--acxpa-ds-radius-pill);
  border: 1px solid var(--acxpa-ds-teal-200);
  background: var(--acxpa-ds-cloud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--acxpa-ds-teal-700);
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
#acxpanatmemr .acxpanatmemr-sector:hover .acxpanatmemr-sector__badge {
  background: var(--acxpa-ds-gold);
  border-color: var(--acxpa-ds-gold);
  color: var(--acxpa-ds-ink);
}
#acxpanatmemr .acxpanatmemr-sector__title {
  font-family: var(--acxpa-ds-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--acxpa-ds-teal-700) !important;
  margin: 0 0 10px !important;
  text-transform: none !important;
}
#acxpanatmemr .acxpanatmemr-sector__desc {
  font-size: 14px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-slate);
  margin: 0 0 18px;
  flex: 1 1 auto;
}
#acxpanatmemr .acxpanatmemr-sector__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--acxpa-ds-teal-100);
  font-size: 14px;
  font-weight: 700;
  color: var(--acxpa-ds-teal-700);
}
#acxpanatmemr .acxpanatmemr-sector__cta i {
  font-size: 12px;
  transition: transform 0.2s ease;
}
#acxpanatmemr .acxpanatmemr-sector:hover .acxpanatmemr-sector__cta {
  color: var(--acxpa-ds-gold-deep);
}
#acxpanatmemr .acxpanatmemr-sector:hover .acxpanatmemr-sector__cta i {
  transform: translateX(4px);
}
#acxpanatmemr .acxpanatmemr-sector--alt {
  background: var(--acxpa-ds-gold-tint);
  border-color: var(--acxpa-ds-gold);
}
#acxpanatmemr .acxpanatmemr-sector--alt .acxpanatmemr-sector__icon {
  background: var(--acxpa-ds-gold);
  border-color: var(--acxpa-ds-gold-deep);
}
#acxpanatmemr .acxpanatmemr-sector--alt .acxpanatmemr-sector__icon i {
  color: var(--acxpa-ds-ink);
}
#acxpanatmemr .acxpanatmemr-sector--alt .acxpanatmemr-sector__desc {
  color: var(--acxpa-ds-ink);
}
#acxpanatmemr .acxpanatmemr-sector__badge--alt {
  background: var(--acxpa-ds-white);
  border-color: var(--acxpa-ds-gold-deep);
  color: var(--acxpa-ds-gold-deep);
}
#acxpanatmemr .acxpanatmemr-sector--alt .acxpanatmemr-sector__cta {
  border-top-color: var(--acxpa-ds-gold);
}

#quarterly-reports.vc_row,
#downloads.vc_row {
  margin: 0 0 28px;
  padding: 40px 25px;
  background: var(--acxpa-ds-white);
  border: 1px solid var(--acxpa-ds-teal-200);
  border-top: 5px solid var(--acxpa-ds-gold);
  border-radius: var(--acxpa-ds-radius-xl);
  box-shadow: var(--acxpa-ds-shadow-sm);
}
#downloads .vc_empty_space {
  display: none;
}

.acxpa-natmemr-dl.downloads-card {
  position: static;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin: 0 0 34px;
  padding: 0 0 30px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--acxpa-ds-teal-100);
  border-radius: 0;
  box-shadow: none;
}
.acxpa-natmemr-dl .downloads-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  line-height: 1;
  border-radius: var(--acxpa-ds-radius-lg);
  background: var(--acxpa-ds-teal-700);
}
.acxpa-natmemr-dl .downloads-icon i {
  font-size: 27px;
  line-height: 1;
  color: var(--acxpa-ds-white);
}
.acxpa-natmemr-dl .downloads-content {
  flex: 1 1 auto;
  min-width: 0;
}
.acxpa-natmemr-dl .downloads-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  margin: 0 0 14px;
  border-radius: var(--acxpa-ds-radius-pill);
  border: 1px solid var(--acxpa-ds-gold);
  background: var(--acxpa-ds-gold-tint);
  color: var(--acxpa-ds-teal-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.acxpa-natmemr-dl .downloads-title {
  font-family: var(--acxpa-ds-font) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--acxpa-ds-teal-700) !important;
  margin: 0 0 16px !important;
  text-transform: none !important;
}
.acxpa-natmemr-dl .downloads-content p {
  font-size: 16px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-slate);
  margin: 0 0 14px;
}
.acxpa-natmemr-dl .downloads-content p strong {
  color: var(--acxpa-ds-ink);
  font-weight: 700;
}
.acxpa-natmemr-dl .downloads-content p:last-child {
  margin-bottom: 0;
}
.acxpa-natmemr-dl .downloads-content p em {
  color: var(--acxpa-ds-teal-700);
  font-weight: 600;
  font-style: normal;
}
.acxpa-natmemr-dl .downloads-content a {
  color: var(--acxpa-ds-teal-600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.acxpa-natmemr-dl .downloads-content a:hover,
.acxpa-natmemr-dl .downloads-content a:focus {
  color: var(--acxpa-ds-teal-800);
}

#quarterly-reports .acxpa-qr .post-content {
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-lg);
}
#quarterly-reports .acxpa-qr .post-title,
#quarterly-reports .acxpa-qr .post-title a {
  font-family: var(--acxpa-ds-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--acxpa-ds-teal-700) !important;
  text-transform: none !important;
}

#downloads .vc_inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#downloads .vc_inner > .wpb_column {
  display: flex;
  flex: 1 1 320px;
  min-width: 0;
}
#downloads .vc_inner > .wpb_column > .vc_column-inner {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}
#downloads .vc_inner > .wpb_column > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}
#downloads .vc_inner .kleo_text_column {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 30px 28px;
  background: var(--acxpa-ds-cloud);
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-lg);
  box-shadow: var(--acxpa-ds-shadow-sm);
}
#downloads .vc_inner .kleo_text_column > .wpb_wrapper {
  flex: 1 1 auto;
  width: 100%;
}
#downloads .vc_inner h3 {
  font-family: var(--acxpa-ds-font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--acxpa-ds-teal-700) !important;
  margin: 0 !important;
  text-transform: none !important;
}
#downloads .vc_inner h3::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: 12px 0 0;
  border-radius: var(--acxpa-ds-radius-pill);
  background: var(--acxpa-ds-gold);
}
#downloads .vc_inner p {
  font-size: 15px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-slate);
  font-style: normal;
  margin: 14px 0 22px;
}
#downloads .vc_inner p em,
#downloads .vc_inner p span {
  font-style: normal;
}
#downloads .vc_inner p:empty {
  display: none;
}
#downloads .vc_inner ul.dlm-downloads {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#downloads .vc_inner ul.dlm-downloads li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#downloads .vc_inner ul.dlm-downloads li::marker {
  content: none;
}
#downloads .vc_inner a.download-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-md);
  background: var(--acxpa-ds-white);
  color: var(--acxpa-ds-teal-700) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
#downloads .vc_inner a.download-link::before {
  content: "\f019";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--acxpa-ds-radius-sm);
  background: var(--acxpa-ds-teal-700);
  color: var(--acxpa-ds-white);
  transition: background 0.2s ease, color 0.2s ease;
}
#downloads .vc_inner a.download-link:hover,
#downloads .vc_inner a.download-link:focus {
  background: var(--acxpa-ds-teal-50);
  border-color: var(--acxpa-ds-teal-400);
  color: var(--acxpa-ds-teal-800) !important;
  transform: translateX(3px);
  text-decoration: none !important;
}
#downloads .vc_inner a.download-link:hover::before,
#downloads .vc_inner a.download-link:focus::before {
  background: var(--acxpa-ds-gold);
  color: var(--acxpa-ds-ink);
}
#downloads .vc_inner a.download-link:focus-visible {
  outline: 3px solid var(--acxpa-ds-teal-900);
  outline-offset: 2px;
}

@media (max-width: 1080px) {
  #acxpanatmemr .acxpanatmemr-grid--sectors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  #acxpanatmemr .acxpanatmemr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  #acxpanatmemr .acxpanatmemr-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px;
    gap: 22px;
  }
  #acxpanatmemr .acxpanatmemr-header__badge {
    order: -1;
  }
  #acxpanatmemr .acxpanatmemr-header__badge img {
    width: 120px;
  }
  #acxpanatmemr .acxpanatmemr-header__title {
    font-size: 30px !important;
  }
  #acxpanatmemr .acxpanatmemr-header__cta {
    text-align: left;
  }
  #acxpanatmemr .acxpanatmemr-section {
    padding: 30px 22px;
  }
  #acxpanatmemr .acxpanatmemr-section__title {
    font-size: 26px !important;
  }
  #acxpanatmemr .acxpanatmemr-nav {
    position: static;
  }
  .acxpa-natmemr-dl.downloads-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0 24px;
    margin-bottom: 28px;
    gap: 18px;
  }
  .acxpa-natmemr-dl .downloads-title {
    font-size: 22px !important;
  }
  #quarterly-reports.vc_row,
  #downloads.vc_row {
    padding: 30px 10px;
  }
  .acxpa-natmemr-dl .downloads-icon {
    width: 58px;
    height: 58px;
  }
  .acxpa-natmemr-dl .downloads-icon i {
    font-size: 23px;
  }
}
@media (max-width: 640px) {
  #acxpanatmemr .acxpanatmemr-grid,
  #acxpanatmemr .acxpanatmemr-grid--sectors {
    grid-template-columns: minmax(0, 1fr);
  }
  #acxpanatmemr .acxpanatmemr-header__title {
    font-size: 26px !important;
  }
  #acxpanatmemr .acxpanatmemr-header__lead {
    font-size: 16px;
  }
  #acxpanatmemr .acxpanatmemr-nav {
    gap: 8px;
    padding: 10px;
  }
  #acxpanatmemr .acxpanatmemr-nav__label {
    flex: 1 0 100%;
    margin: 0 0 2px;
    text-align: center;
  }
  #acxpanatmemr .acxpanatmemr-nav__link {
    padding: 8px 14px;
    font-size: 14px;
  }
  #acxpanatmemr .acxpanatmemr-card,
  #acxpanatmemr .acxpanatmemr-sector {
    padding: 22px 18px;
  }
  #downloads .vc_inner .kleo_text_column {
    padding: 22px 18px;
  }
  #quarterly-reports.vc_row,
  #downloads.vc_row {
    padding: 26px 10px;
  }
  #downloads .vc_inner h3 {
    font-size: 20px !important;
  }
}
/* ===========================================================================
   Subscriber variant
   The subscriber dashboard runs the same components; what differs is that
   every section ends in a reason to upgrade, and the header badge is round
   rather than a wide lozenge.
   =========================================================================== */

#acxpanatmemr .acxpanatmemr-header__badge img.acxpanatmemr-header__badge--round {
  width: 118px;
  border-radius: 50%;
}

/* The upgrade prompt. Gold rail, not a gold fill: s13b keeps the accent off
   the block itself, and s8d keeps a band colour off anything carrying a
   value - this carries an argument, but the rail reads the same either way. */
#acxpanatmemr .acxpanatmemr-upsell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 30px;
  margin: 24px 0 0;
  background: var(--acxpa-ds-sand);
  border: 1px solid var(--acxpa-ds-stone);
  border-left: 5px solid var(--acxpa-ds-gold);
  border-radius: var(--acxpa-ds-radius-lg);
}

#acxpanatmemr .acxpanatmemr-upsell__content {
  flex: 1 1 420px;
  min-width: 0;
}

#acxpanatmemr .acxpanatmemr-upsell__title {
  font-family: var(--acxpa-ds-font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--acxpa-ds-ink) !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
}

#acxpanatmemr .acxpanatmemr-upsell__desc {
  margin: 0;
  font-size: 16px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-slate);
}

/* s13 Call to action: Gold on Ink, 8.49:1. */
#acxpanatmemr a.acxpanatmemr-upsell__btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--acxpa-ds-radius-md);
  background: var(--acxpa-ds-gold);
  color: var(--acxpa-ds-ink) !important;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}

#acxpanatmemr a.acxpanatmemr-upsell__btn:hover,
#acxpanatmemr a.acxpanatmemr-upsell__btn:focus {
  background: var(--acxpa-ds-gold-deep);
  color: var(--acxpa-ds-text-on-dark) !important;
}

#acxpanatmemr a.acxpanatmemr-upsell__btn:focus-visible {
  outline: 3px solid var(--acxpa-ds-teal-900);
  outline-offset: 3px;
}

/* An inline upgrade line under a section heading. */
#acxpanatmemr .acxpanatmemr-section__note {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-ink);
}

#acxpanatmemr .acxpanatmemr-section__note a {
  color: var(--acxpa-ds-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#acxpanatmemr .acxpanatmemr-section__note a:hover,
#acxpanatmemr .acxpanatmemr-section__note a:focus {
  color: var(--acxpa-ds-link-hover);
}

@media (max-width: 900px) {
  #acxpanatmemr .acxpanatmemr-upsell {
    padding: 22px;
    text-align: center;
    justify-content: center;
  }
  #acxpanatmemr .acxpanatmemr-header__badge img.acxpanatmemr-header__badge--round {
    width: 96px;
  }
}

/* ===========================================================================
   The quarterly reports grid
   vc_posts_grid hands back the theme's masonry listing: absolutely positioned
   items of ragged height, an author/category/comment meta line, a "was this
   useful" counter and a Read more in the theme's orange. What the section
   needs is four equal cards, so the listing is re-laid as a grid.
   position:static is what defeats the masonry script - it writes its offsets
   as inline styles, which nothing but !important can reach (s21e.2).
   =========================================================================== */

#quarterly-reports .acxpa-qr,
#quarterly-reports .acxpa-qr.masonry-listing {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  height: auto !important;
}

#quarterly-reports .acxpa-qr .post-item {
  position: static !important;
  float: none !important;
  width: auto !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#quarterly-reports .acxpa-qr .post-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--acxpa-ds-white);
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-lg);
  box-shadow: var(--acxpa-ds-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#quarterly-reports .acxpa-qr .post-item:hover .post-content {
  transform: translateY(-4px);
  border-color: var(--acxpa-ds-teal-400);
  box-shadow: var(--acxpa-ds-shadow-lg);
}

/* The thumbnail box carries the ratio, not the image. Two of the four
   quarters were uploaded without dimensions and the theme sizes grid
   thumbnails with its own rule, so an image left to size itself stretched its
   card to 1500px. A fixed box with overflow hidden cannot be blown out
   whatever the image does. */
#quarterly-reports .acxpa-qr .post-image {
  display: block;
  margin: 0;
  aspect-ratio: 480 / 252;
  overflow: hidden;
}

#quarterly-reports .acxpa-qr .post-image a {
  display: block;
  height: 100%;
  margin: 0;
}

/* A fixed ratio on the thumbnail, so the four cards keep the same shape
   whatever size the featured image was uploaded at - the older quarters have
   no width/height attributes at all and stretched their card to 1500px. */
#quarterly-reports .acxpa-qr .post-image img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

#quarterly-reports .acxpa-qr .post-header {
  padding: 18px 18px 0;
}

/* The theme rails every post title in a purple that appears nowhere in the
   brand. Gold is the accent this page already uses. */
#quarterly-reports .acxpa-qr .post-title {
  margin: 0 !important;
  padding-left: 12px;
  border-left: 3px solid var(--acxpa-ds-gold) !important;
}

/* The meta line reads "ACXPA | Australian Call Centre Industry | 0 comments"
   on every card - the same three facts four times over. */
#quarterly-reports .acxpa-qr .post-meta,
#quarterly-reports .acxpa-qr .item-likes {
  display: none !important;
}

#quarterly-reports .acxpa-qr .post-info {
  flex: 1 1 auto;
  padding: 10px 18px 0;
}

#quarterly-reports .acxpa-qr .entry-summary p {
  margin: 0;
  font-size: 14px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-slate);
}

#quarterly-reports .acxpa-qr .post-footer {
  padding: 16px 18px 18px;
  border: 0;
}

#quarterly-reports .acxpa-qr .post-footer small {
  display: block;
  font-size: 100%;
}

/* s13 filled variant, Teal 700 on White at 9.16:1, replacing the theme's
   orange. s8d allows a band value on a control carrying a LABEL as long as it
   does not also read as a score chip - hence 8px, not a pill. */
#quarterly-reports .acxpa-qr .post-footer a {
  text-decoration: none !important;
}

#quarterly-reports .acxpa-qr .post-footer .muted {
  display: inline-block;
  float: none !important;
  padding: 9px 18px;
  border-radius: var(--acxpa-ds-radius-sm);
  background: var(--acxpa-ds-teal-700);
  color: var(--acxpa-ds-white) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 1;
  transition: background 0.2s ease, color 0.2s ease;
}

#quarterly-reports .acxpa-qr .post-footer a:hover .muted,
#quarterly-reports .acxpa-qr .post-footer a:focus .muted {
  background: var(--acxpa-ds-gold-deep);
  color: var(--acxpa-ds-white) !important;
}

@media (max-width: 1080px) {
  #quarterly-reports .acxpa-qr,
  #quarterly-reports .acxpa-qr.masonry-listing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #quarterly-reports .acxpa-qr,
  #quarterly-reports .acxpa-qr.masonry-listing {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===========================================================================
   Download Monitor emits two different links depending on whether the viewer
   has access: a.download-link when they do, and a.dlm-download-link carrying
   the block-button classes when they do not. Only the first was styled, so
   the locked state fell through to the block-button default - a near-black
   pill with Teal 600 text on it at 1.7:1. Both take the same treatment.
   =========================================================================== */

#downloads .vc_inner ul.dlm-downloads li {
  font-size: 13px;
  line-height: var(--acxpa-ds-leading-snug);
  color: var(--acxpa-ds-slate);
}

#downloads .vc_inner a.dlm-download-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 6px;
  padding: 14px 16px;
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-md);
  background: var(--acxpa-ds-white);
  color: var(--acxpa-ds-teal-700) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

#downloads .vc_inner a.dlm-download-link::before {
  content: "\f019";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--acxpa-ds-radius-sm);
  background: var(--acxpa-ds-teal-700);
  color: var(--acxpa-ds-white);
  transition: background 0.2s ease, color 0.2s ease;
}

#downloads .vc_inner a.dlm-download-link:hover,
#downloads .vc_inner a.dlm-download-link:focus {
  background: var(--acxpa-ds-teal-50);
  border-color: var(--acxpa-ds-teal-400);
  color: var(--acxpa-ds-teal-800) !important;
  transform: translateX(3px);
}

#downloads .vc_inner a.dlm-download-link:hover::before,
#downloads .vc_inner a.dlm-download-link:focus::before {
  background: var(--acxpa-ds-gold);
  color: var(--acxpa-ds-ink);
}

#downloads .vc_inner a.dlm-download-link:focus-visible {
  outline: 3px solid var(--acxpa-ds-teal-900);
  outline-offset: 2px;
}

/* ===========================================================================
   Insight list
   The subscriber dashboard used to run two tile grids back to back - five
   cards, then eight - which reads as one long undifferentiated wall. The
   sector hubs are a gallery and keep their tiles; this section is navigation,
   so it is a list. Rows, not cards: quicker to scan and visibly a different
   kind of thing from the grid beneath it.
   =========================================================================== */

#acxpanatmemr .acxpanatmemr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-lg);
  background: var(--acxpa-ds-white);
  overflow: hidden;
}

#acxpanatmemr .acxpanatmemr-list__item {
  list-style: none;
  margin: 0;
  padding: 0;
}

#acxpanatmemr .acxpanatmemr-list__item + .acxpanatmemr-list__item {
  border-top: 1px solid var(--acxpa-ds-teal-100);
}

#acxpanatmemr a.acxpanatmemr-list__link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

#acxpanatmemr a.acxpanatmemr-list__link:hover,
#acxpanatmemr a.acxpanatmemr-list__link:focus {
  background: var(--acxpa-ds-teal-50);
}

#acxpanatmemr a.acxpanatmemr-list__link:focus-visible {
  outline: 3px solid var(--acxpa-ds-teal-900);
  outline-offset: -3px;
}

#acxpanatmemr .acxpanatmemr-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--acxpa-ds-radius-md);
  background: var(--acxpa-ds-teal-700);
  color: var(--acxpa-ds-white);
  font-size: 18px;
}

#acxpanatmemr .acxpanatmemr-list__text {
  min-width: 0;
}

#acxpanatmemr .acxpanatmemr-list__title {
  display: block;
  font-family: var(--acxpa-ds-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--acxpa-ds-teal-700);
}

#acxpanatmemr .acxpanatmemr-list__desc {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: var(--acxpa-ds-leading-snug);
  color: var(--acxpa-ds-slate);
}

#acxpanatmemr .acxpanatmemr-list__meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--acxpa-ds-slate);
}

#acxpanatmemr .acxpanatmemr-list__arrow {
  font-size: 13px;
  color: var(--acxpa-ds-teal-700);
  transition: transform 0.2s ease, color 0.2s ease;
}

#acxpanatmemr a.acxpanatmemr-list__link:hover .acxpanatmemr-list__arrow,
#acxpanatmemr a.acxpanatmemr-list__link:focus .acxpanatmemr-list__arrow {
  transform: translateX(4px);
  color: var(--acxpa-ds-gold-deep);
}

/* Two closing calls to action side by side: one for members, one for anyone
   who wants their own centre measured. */
#acxpanatmemr .acxpanatmemr-close {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 24px 0 0;
}

#acxpanatmemr .acxpanatmemr-close .acxpanatmemr-upsell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
}

#acxpanatmemr .acxpanatmemr-close .acxpanatmemr-upsell__content {
  flex: 0 1 auto;
  margin-bottom: 18px;
}

/* The second card is the commercial one, so it takes the teal ground and the
   button flips to the s13 Teal 700 / White variant against it. */
#acxpanatmemr .acxpanatmemr-upsell--brand {
  background: var(--acxpa-ds-teal-50);
  border-color: var(--acxpa-ds-teal-200);
  border-left-color: var(--acxpa-ds-teal-700);
}

#acxpanatmemr .acxpanatmemr-upsell__links {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: var(--acxpa-ds-leading-body);
  color: var(--acxpa-ds-slate);
}

#acxpanatmemr .acxpanatmemr-upsell__links a {
  color: var(--acxpa-ds-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#acxpanatmemr .acxpanatmemr-upsell__links a:hover,
#acxpanatmemr .acxpanatmemr-upsell__links a:focus {
  color: var(--acxpa-ds-link-hover);
}

/* The header badge is a square lockup, not the old round chip. */
#acxpanatmemr .acxpanatmemr-header__badge img {
  width: 150px;
  height: auto;
  border-radius: 0;
}

@media (max-width: 820px) {
  #acxpanatmemr .acxpanatmemr-close {
    grid-template-columns: minmax(0, 1fr);
  }
  #acxpanatmemr a.acxpanatmemr-list__link {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    gap: 14px;
    padding: 16px 18px;
  }
  #acxpanatmemr .acxpanatmemr-list__meta {
    display: none;
  }
  #acxpanatmemr .acxpanatmemr-list__icon {
    width: 40px;
    height: 40px;
  }
}

/* ===========================================================================
   The jump nav, and why it was not sticking

   The theme sets `body { overflow: hidden }` while html carries
   `overflow-x: hidden; overflow-y: auto`. Because html's overflow is not
   visible, body's value does not propagate to the viewport: body becomes a
   scroll container of its own that never scrolls, and a sticky element
   resolves against its nearest scrollport - body - so it can never stick.
   Releasing body's overflow (html already does the horizontal clipping) is
   what makes it work; the body class comes from the theme's functions.php.

   The second half of the problem is structural. A sticky element sticks only
   within its own parent, and the nav's parent - the #acxpanatmemr block - ends
   before the Quarterly Reports and Downloads rows, because those two carry
   WPBakery shortcodes and cannot live inside the same raw HTML block. So the
   nav holds through the first two sections and then leaves. Every section
   therefore ends with a link back to it, which is what actually guarantees the
   reader is never stranded.
   =========================================================================== */

body.acxpa-ccr-dash {
  overflow: visible;
}

body.acxpa-ccr-dash {
  /* The fixed header measures 121px for a signed-in member and the sticky nav
     sits on top of it at 64px, so a section has to start below 185px to be
     visible at all. 205 leaves a gap rather than butting up against it. */
  --acxpa-anchor-offset: 205px;
}

#acxpanatmemr .acxpanatmemr-back {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--acxpa-ds-teal-100);
  text-align: center;
}

.acxpanatmemr-back {
  margin: 26px 0 0;
  text-align: center;
}

.acxpanatmemr-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1px solid var(--acxpa-ds-teal-200);
  border-radius: var(--acxpa-ds-radius-pill);
  background: var(--acxpa-ds-white);
  color: var(--acxpa-ds-teal-700) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.acxpanatmemr-back a:hover,
.acxpanatmemr-back a:focus {
  background: var(--acxpa-ds-teal-700);
  border-color: var(--acxpa-ds-teal-700);
  color: var(--acxpa-ds-white) !important;
}

.acxpanatmemr-back a:focus-visible {
  outline: 3px solid var(--acxpa-ds-teal-900);
  outline-offset: 2px;
}