/* ========================================================================
   ACXPA Call Centre Quarterly Reports (ACCRQR) Stylesheet
   For use with all quarterly sector reports (Councils, Energy, Banks, etc.)

   v2.0 — migrated to the ACXPA Brand & Digital Standards.
   ------------------------------------------------------------------------
   THIS IS A COMPLETE REPLACEMENT for the previous
   call_centre_rankings_reports.css. Same filename, same enqueue, nothing
   else to load. It contains every rule the previous version had, migrated
   to the brand tokens, PLUS the new .accrqr-sec-* report sections.

   Verified against the file it replaces: all 260 original selectors are
   present. Nothing was dropped. Existing reports keep working and pick up
   the corrected palette automatically.

   Do NOT also load accrqr-sections.css — its contents are already in here.
   ------------------------------------------------------------------------
   WHAT CHANGED AND WHY — read before editing

   1. RETIRED PALETTE REMOVED
      #023d1f (--acxpa-green), #047607, #ffd24d and #0f1720 are named in the
      Standards as the retired palette / not-brand-Gold. All references now
      resolve to Teal, Gold and Ink. The old --acxpa-green custom property is
      kept as a deprecated alias so nothing outside this file breaks.

   2. TYPE SIZES ARE ROOT-SAFE
      acxpa.com.au sets a ~62.5% root font-size, so 1rem = ~10px, not the
      16px the Standards assume. Section 10 says never set a fixed px size on
      body text — but plain rem would shrink this sheet by 37.5%.
      The scale below uses max(<rem>, <px>): it honours a reader's enlarged
      browser text, and floors at the intended size on the current root.
      >>> Once the theme root is corrected to 16px, the max() guards can be
      >>> dropped and these become plain rem. No other change needed.

   3. FOCUS IS NOW GLOBAL
      The sheet previously had zero :focus styling. Section 12 calls the
      focus ring "the one global that must never be scoped away".

   4. MOTION RESPECTS prefers-reduced-motion
      Including the infinite CTA pulse.

   5. COLOUR NEVER CARRIES MEANING ALONE
      Trend counters now emit a ▲ / ▼ glyph as well as a colour (section 1).

   6. BODY TYPE IS 17px, NOT 16px
      These reports run long and sit in a ~825px column, which puts the
      quadrant and leaderboard sections at roughly 86 characters a line.
      16px at that measure reads small. 17px is the floor now.
      Per section 10 no max-width is set on any element to shorten the
      measure — line length stays a property of the column. If the lines
      still read long, narrow the WPBakery column, not the paragraph.

   7. QUADRANT AND LEADERBOARD PARAGRAPHS USE --accrqr-lh-body
      They were hard-coded to 1.6 while every other body block used the
      1.65 token, so the two sections looked tighter than the rest.

   8. LEADERBOARD + TREND PAIR IS CENTRED
      See the block at the end of this file.

  10. SECTOR WINNERS, AD ROWS AND FINAL CTA WIDTH
      See the block at the end of this file. The winners roll-call has its
      own grid instead of borrowing .accrqr-metric-defs; ad rows get a
      consistent 48px above and below via el_class="accrqr-ad-row"; and
      .accrqr-final-cta no longer caps itself narrower than the report.

  11. QUARTERLY TREND BOX HAS A BOTTOM MARGIN
      It sits alone in its column and had nothing beneath it.

  12. NATIONAL REPORT HEADER IS ONE PANEL
      The intro had no header band while every section below it did, and
      it sat in a separate card from the role-gated nav. Both fixed at the
      end of this file. Ad rows are 24px, not 48 — the ad component brings
      its own padding and the two were stacking.

   9. POINT HEADINGS ARE 21px, NOT 18px
      .accrqr-sec-point is the sub-heading inside Key Wins / Challenges
      ("The best final impression in the country"). It was 18px/600 while
      body was 16px — a 2px step that barely read as a heading, and once
      body went to 17px it read as body text in teal. It is now 21px/700,
      which sits clearly between the 40px section title and 17px body.
      NOTE: it uses its own --accrqr-fs-point token, not --accrqr-fs-h4.
      Do not point it back at h4 — h4 is 18px and tracks a different
      thing. If body type moves again, move this with it.

   OUTSTANDING — needs an HTML change, so not done here:
   - Un-namespaced classes still in use: .overlay-block, .overlay-content,
     .overlay-actions, .overlay-dismiss, .modal-cta, .coming-soon-overlay,
     .access-hover, .post-item, .inline-note. These sit in the global space
     and can collide with theme or plugin CSS. Rename to acxpa-ds- when the
     templates are next touched.
   - 140 !important declarations remain. Those inside .acxpa-qr are load-
     bearing (they override the Kleo/WPBakery grid). The rest should be
     retired by loading acxpa-tokens.css early, per section 20.
   ======================================================================== */

:root {
  /* Brand — mirrors acxpa-tokens.css. Literals are fallbacks so this file
     is correct even if the token file has not loaded yet. */
  --accrqr-teal-50:   var(--acxpa-ds-teal-50,   var(--acxpa-ds-teal-50));
  --accrqr-teal-100:  var(--acxpa-ds-teal-100,  var(--acxpa-ds-teal-100));
  --accrqr-teal-200:  var(--acxpa-ds-teal-200,  var(--acxpa-ds-teal-200));
  --accrqr-teal-400:  var(--acxpa-ds-teal-400,  var(--acxpa-ds-teal-400));
  --accrqr-teal-500:  var(--acxpa-ds-teal-500,  var(--acxpa-ds-teal-500));
  --accrqr-teal-600:  var(--acxpa-ds-teal-600,  var(--acxpa-ds-teal-600));
  --accrqr-teal-700:  var(--acxpa-ds-teal-700,  var(--acxpa-ds-teal-700));
  --accrqr-teal-800:  var(--acxpa-ds-teal-800,  var(--acxpa-ds-teal-800));
  --accrqr-teal-900:  var(--acxpa-ds-teal-900,  var(--acxpa-ds-teal-900));

  --accrqr-gold:      var(--acxpa-ds-gold,      var(--acxpa-ds-gold));
  --accrqr-gold-tint: var(--acxpa-ds-gold-tint, var(--acxpa-ds-gold-tint));
  --accrqr-gold-deep: var(--acxpa-ds-gold-deep, var(--acxpa-ds-gold-deep));

  --accrqr-clay:      var(--acxpa-ds-clay,      var(--acxpa-ds-clay));
  --accrqr-clay-deep: var(--acxpa-ds-clay-deep, var(--acxpa-ds-clay-deep));
  --accrqr-clay-tint: var(--acxpa-ds-clay-tint, var(--acxpa-ds-clay-tint));

  --accrqr-harbour:      var(--acxpa-ds-harbour,      var(--acxpa-ds-harbour));
  --accrqr-harbour-deep: var(--acxpa-ds-harbour-deep, var(--acxpa-ds-harbour-deep));
  --accrqr-harbour-tint: var(--acxpa-ds-harbour-tint, var(--acxpa-ds-harbour-tint));

  /* Neutrals — COOL set only. Never mix Sand/Stone in here (section 6). */
  --accrqr-ink:    var(--acxpa-ds-ink,    var(--acxpa-ds-ink));
  --accrqr-slate:  var(--acxpa-ds-slate,  var(--acxpa-ds-slate));
  --accrqr-cloud:  var(--acxpa-ds-cloud,  var(--acxpa-ds-cloud));
  --accrqr-white:  var(--acxpa-ds-white,  var(--acxpa-ds-white));

  /* Status — feedback only, never decorative (section 8). */
  --accrqr-success: var(--acxpa-ds-success, var(--acxpa-ds-success));
  --accrqr-error:   var(--accrqr-error-c,   var(--acxpa-ds-error));

  /* Type scale — see note 2 above. */
  --accrqr-font: var(--acxpa-ds-font, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --accrqr-fs-display: max(3.25rem, 52px);
  --accrqr-fs-h1:      max(2.5rem,   40px);
  --accrqr-fs-h2:      max(1.875rem, 30px);
  --accrqr-fs-h3:      max(1.375rem, 22px);
  --accrqr-fs-h4:      max(1.125rem, 18px);
  --accrqr-fs-point:   max(1.3125rem, 21px);
  --accrqr-fs-lead:    max(1.25rem,  20px);
  --accrqr-fs-body:    max(1.0625rem, 17px);
  --accrqr-fs-small:   max(0.875rem, 14px);
  --accrqr-fs-caption: max(0.75rem,  12px);
  --accrqr-fs-eyebrow: max(0.8125rem,13px);

  --accrqr-lh-tight: 1.12;
  --accrqr-lh-snug:  1.32;
  --accrqr-lh-body:  1.65;

  /* Space — 4px grid (section 11) */
  --accrqr-space-2xs: 4px;
  --accrqr-space-xs:  8px;
  --accrqr-space-sm:  12px;
  --accrqr-space-md:  16px;
  --accrqr-space-lg:  24px;
  --accrqr-space-xl:  32px;
  --accrqr-space-2xl: 48px;
  --accrqr-space-3xl: 64px;
  --accrqr-space-4xl: 96px;

  --accrqr-radius-sm: 4px;
  --accrqr-radius-md: 8px;
  --accrqr-radius-lg: 12px;
  --accrqr-radius-xl: 20px;
  --accrqr-radius-pill: 999px;

  /* Teal-tinted elevation — never neutral black (section 11) */
  --accrqr-shadow-sm: 0 1px 2px  rgba(15,79,92,.08);
  --accrqr-shadow-md: 0 2px 8px  rgba(15,79,92,.10);
  --accrqr-shadow-lg: 0 8px 24px rgba(15,79,92,.12);

  /* DEPRECATED — retained only so anything outside this file still resolves.
     Now points at Teal 700. Remove once the last reference is gone. */
  --acxpa-green: var(--accrqr-teal-700);
  --veil-peach:  rgba(247, 227, 220, .88);   /* was peach; now Clay Tint */
  --card-blue:   var(--accrqr-harbour-tint);
  --card-green:  var(--accrqr-teal-50);
  --card-maxw:   520px;
}

/* ===== THE ONE SANCTIONED GLOBAL: focus (section 12) =====
   Gold cannot be a focus ring — it fails on every light surface. */
.accrqr :focus-visible,
.acxpa-qr :focus-visible,
.accrqr-bottom-cta :focus-visible {
  outline: 3px solid var(--accrqr-teal-700);
  outline-offset: 2px;
  border-radius: 2px;
}
.accrqr-bottom-cta :focus-visible,
.accrqr-nav a:focus-visible,
.accrqr-nat-nav-links-section a:focus-visible {
  outline-color: var(--accrqr-gold);
}

/* ===== Motion (accessibility) ===== */
@media (prefers-reduced-motion: reduce) {
  .accrqr *, .acxpa-qr *, .accrqr-bottom-cta * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .accrqr-btn.accrqr-pulse { animation: none !important; box-shadow: none !important; }
  .accrqr-btn.accrqr-pulse::before,
  .accrqr-btn.accrqr-pulse::after { display: none; }
}


/* =======================================
   ACXPA Quarterly Reports — Intro Section
   Updated with .accrqr prefix
======================================= */
.accrqr {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 0px 36px;
  font-family: var(--accrqr-font);
  color: var(--accrqr-ink);
}

.accrqr-header-card {
  background: linear-gradient(135deg, rgba(15, 79, 92, .05), rgba(15, 79, 92, .02)), var(--accrqr-white);
  border: 1px solid rgba(15, 79, 92, .15);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(15, 79, 92, .08);
  padding: 32px 32px 38px;
  margin-left: -18px;
  margin-right: -18px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.accrqr-h1 {
  color: var(--accrqr-teal-700);
  margin: 0 0 16px;
  font-weight: 800;
  font-size: var(--accrqr-fs-h2);
  line-height: 1.25;
}

.accrqr-lead {
  margin: 0 0 12px;
  font-size: var(--accrqr-fs-lead);
  color: var(--accrqr-ink);
  line-height: var(--acxpa-ds-leading-body);
}

.accrqr-desc {
  margin: 0 0 14px;
  font-size: var(--accrqr-fs-body);
  color: var(--accrqr-slate);
  line-height: var(--acxpa-ds-leading-body);
}

.accrqr-member-panel {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--accrqr-gold);
  background: var(--accrqr-gold-tint);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(249, 176, 46, .08);
  color: var(--accrqr-ink);
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
}

.accrqr-member-panel a {
  color: var(--accrqr-teal-700);
  text-decoration: underline;
}

.accrqr-member-panel p {
  margin: 0 0 14px;
}

.accrqr-member-panel p:last-child {
  margin-bottom: 0;
}

.accrqr-role-cta {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid var(--accrqr-teal-600);
  background: var(--accrqr-teal-50);
  border-radius: 10px;
  color: var(--accrqr-ink);
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
}

.accrqr-role-cta a {
  color: var(--accrqr-teal-700);
  text-decoration: underline;
}

.accrqr-role-cta p {
  margin: 0 0 14px;
}

.accrqr-role-cta p:last-child {
  margin-bottom: 0;
}

.accrqr-divider {
  margin: 36px 0 26px;
  border: 0;
  height: 1px;
  background: rgba(15, 79, 92, .12);
}

.accrqr-jump {
  text-align: center;
}

.accrqr-jump-label {
  font-weight: 800;
  color: var(--accrqr-teal-700);
  margin-bottom: 18px;
  font-size: var(--accrqr-fs-body);
}

.accrqr-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.accrqr-nav a {
  display: inline-block;
  padding: 12px 20px;
  border: 2px solid var(--accrqr-teal-700);
  border-radius: 10px;
  background: var(--accrqr-teal-700);
  color: var(--accrqr-white) !important;
  text-decoration: none;
  font-size: var(--accrqr-fs-body);
  font-weight: 700;
  line-height: 1;
  transition: all .25s ease;
}

.accrqr-nav a:hover {
  background: var(--accrqr-gold);
  border-color: var(--accrqr-gold);
  color: var(--accrqr-ink) !important;
}

/* EXECUTIVE SUMMARY SECTION */
.accrqr-summary {
    background-color: var(--accrqr-white);
    border: 1px solid var(--accrqr-teal-200);
    border-radius: 6px;
    padding: 28px 28px 26px;
    margin-bottom: 40px;
}

.accrqr-heading {
    font-size: var(--accrqr-fs-h2);
    color: var(--accrqr-teal-700);
    font-weight: bold;
    margin: 0 0 18px;
    line-height: var(--acxpa-ds-leading-snug);
}

.accrqr-text {
    margin: 0 0 18px;
    font-size: var(--accrqr-fs-body);
    line-height: var(--acxpa-ds-leading-body);
    color: var(--accrqr-ink);
}

.accrqr-text:last-child {
    margin-bottom: 0;
}

/* TOP PERFORMERS SECTION */
.accrqr-performers {
    background-color: var(--accrqr-cloud);
    border-left: 4px solid var(--accrqr-teal-700);
    padding: 24px 24px 20px 24px;
    font-size: var(--accrqr-fs-body);
    line-height: var(--acxpa-ds-leading-body);
    color: var(--accrqr-ink);
    border-radius: 6px;
    margin-bottom: 40px;
}

.accrqr-subheading {
    font-size: var(--accrqr-fs-h3);
    font-weight: bold;
    color: var(--accrqr-teal-700);
    margin: 0 0 20px;
}

/* Individual Performance Card */
.accrqr-card {
    background: var(--accrqr-white);
    border: 1px solid var(--accrqr-teal-200);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.accrqr-card:last-child {
    margin-bottom: 0;
}

.accrqr-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.accrqr-card-title {
    color: var(--accrqr-teal-700);
    font-size: var(--accrqr-fs-body);
}

.accrqr-logo {
    height: 30px;
    width: auto;
}

.accrqr-card-text {
    margin: 0;
    color: var(--accrqr-slate);
    font-size: var(--accrqr-fs-body);
    line-height: var(--acxpa-ds-leading-body);
}

/* KEY WINS SECTION */
.accrqr-wins {
    background-color: var(--accrqr-cloud);
    border-left: 4px solid var(--accrqr-gold);
    padding: 24px 24px 20px;
    font-size: var(--accrqr-fs-body);
    line-height: var(--acxpa-ds-leading-body);
    color: var(--accrqr-ink);
    border-radius: 6px;
    margin-bottom: 40px;
}

/* CHALLENGES SECTION */
.accrqr-challenges {
    background-color: var(--accrqr-cloud);
    border-left: 4px solid var(--accrqr-clay);
    padding: 24px 24px 20px;
    font-size: var(--accrqr-fs-body);
    line-height: var(--acxpa-ds-leading-body);
    color: var(--accrqr-ink);
    border-radius: 6px;
}

/* LINKS */
.accrqr-link {
    color: var(--accrqr-teal-700);
    text-decoration: underline;
}

.accrqr-link:hover {
    color: var(--accrqr-teal-600);
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
    .accrqr-summary {
        padding: 20px;
    }
    
    .accrqr-heading {
        font-size: var(--accrqr-fs-h3);
    }
    
    .accrqr-performers,
    .accrqr-wins,
    .accrqr-challenges {
        padding: 20px;
    }
    
    .accrqr-card {
        padding: 16px;
    }
    
    .accrqr-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .accrqr-logo {
        height: 24px;
    }
}

/* =======================================
   ACXPA Quarterly Reports — Section Divider
   Replaces the inline-styled dividers that were pasted per report.
   Markup:  <div class="accrqr-section-divider"><span>🎓 Executive Summary – Q2 2026</span></div>
======================================= */
.accrqr-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--accrqr-space-md);
  margin: var(--accrqr-space-2xl) 0 var(--accrqr-space-xl);
  font-family: var(--accrqr-font);
}

/* Rules fade out towards the page edges rather than stopping dead. */
.accrqr-section-divider::before,
.accrqr-section-divider::after {
  content: "";
  flex: 1 1 0;
  min-width: var(--accrqr-space-lg);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accrqr-teal-200));
}
.accrqr-section-divider::after {
  background: linear-gradient(to left, transparent, var(--accrqr-teal-200));
}

/* The label reads as a marker, not as body text that happens to be bold. */
.accrqr-section-divider span {
  flex: 0 1 auto;
  padding: var(--accrqr-space-xs) var(--accrqr-space-lg);
  border: 1px solid var(--accrqr-teal-200);
  border-radius: var(--accrqr-radius-pill);
  background: var(--accrqr-teal-50);
  color: var(--accrqr-teal-700);
  font-size: var(--accrqr-fs-h4);
  font-weight: 700;
  line-height: 1.40;
  text-align: center;
}

/* A divider that follows a report section leans on that section's own
   96px bottom margin instead of stacking another 48px on top of it. */
.accrqr-sec + .accrqr-section-divider { margin-top: 0; }

@media (max-width: 600px) {
  .accrqr-section-divider { gap: var(--accrqr-space-sm); }
  .accrqr-section-divider::before,
  .accrqr-section-divider::after { min-width: var(--accrqr-space-xs); }
  .accrqr-section-divider span {
    font-size: var(--accrqr-fs-body);
    padding: var(--accrqr-space-xs) var(--accrqr-space-md);
  }
}

/* =======================================
   ACXPA Quarterly Reports — Leaderboard Section
   Updated with .accrqr prefix
======================================= */
.accrqr-leaderboard-section {
  background: var(--accrqr-white);
  padding: 32px 28px;
  border-radius: 8px;
  margin-bottom: 40px;
}

.accrqr-leaderboard-intro {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.accrqr-leaderboard-text {
  flex: 1;
}

.accrqr-leaderboard-badge {
  flex-shrink: 0;
}

.accrqr-leaderboard-badge img {
  width: 180px;
  height: auto;
  display: block;
}

.accrqr-leaderboard-h3 {
  font-size: var(--accrqr-fs-h3);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  margin: 0 0 12px;
  line-height: var(--acxpa-ds-leading-snug);
}

.accrqr-leaderboard-p {
  font-size: var(--accrqr-fs-body);
  color: var(--accrqr-ink);
  line-height: var(--accrqr-lh-body);
  margin: 0 0 16px;
}

.accrqr-leaderboard-p:last-child {
  margin-bottom: 0;
}

.accrqr-leaderboard-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 24px 0;
}

.accrqr-rankingboard-wrapper {
  flex: 1;
}

/* Quarterly Trend Box - Portrait Style */
.accrqr-quarterly-trend-box {
  background: var(--accrqr-white);
  border: 2px solid var(--accrqr-teal-700);
  border-radius: 10px;
  padding: 24px;
  width: 280px;
  flex-shrink: 0;
}

.accrqr-quarterly-heading {
  font-size: var(--accrqr-fs-lead);
  font-weight: 700;
  color: var(--accrqr-ink);
  margin: 0 0 20px;
  line-height: 1.4;
  text-align: center;
}

.accrqr-quarterly-heading span {
  color: var(--accrqr-teal-700);
  font-size: var(--accrqr-fs-h4);
  display: block;
}

.accrqr-quarterly-counter {
  text-align: center;
  padding: 16px 20px;
  background: var(--accrqr-cloud);
  border-radius: 8px;
  margin-bottom: 12px;
}

.accrqr-quarterly-counter:last-of-type {
  margin-bottom: 0;
}

.accrqr-quarterly-counter .label {
  font-size: var(--accrqr-fs-small);
  font-weight: 600;
  color: var(--accrqr-slate);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.accrqr-quarterly-counter .value {
  font-size: var(--accrqr-fs-h2);
  font-weight: 800;
  color: var(--accrqr-teal-700);
  line-height: 1;
}

/* Direction colours: see the override further down (Status section).
   Kept in sync here so the base and the override never disagree. */
.accrqr-quarterly-counter.trend-positive .value {
  color: var(--accrqr-success);
}

.accrqr-quarterly-counter.trend-negative .value {
  color: var(--accrqr-error);
}

/* Responsive */
@media (max-width: 968px) {
  .accrqr-leaderboard-intro {
    flex-direction: column;
  }
 
 /* =======================================
   ACXPA Quarterly Reports — Leaderboards Centering with 
   accrgr-centered-boxes
======================================= */
 
  
  .accrqr-leaderboard-badge {
    align-self: center;
  }
  
  .accrqr-leaderboard-content {
    flex-direction: column;
  }
  
  .accrqr-quarterly-trend-box {
    width: 100%;
  }
}

/* Desktop - side by side and centered */
.accrgr-centered-boxes.vc_row {
    text-align: center;
}

.accrgr-centered-boxes .vc_col-sm-6 {
    display: inline-block !important;
    float: none !important;
    vertical-align: top;
    width: auto !important;
    max-width: 48% !important;
}

.accrgr-centered-boxes .wpb_column {
    display: inline-block !important;
    float: none !important;
}

.accrgr-centered-boxes .vc_column-inner {
    display: inline-block;
    text-align: left;
}

/* Mobile - stack them */
@media (max-width: 767px) {
    .accrgr-centered-boxes .vc_col-sm-6 {
        display: block !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
    
    .accrgr-centered-boxes .wpb_column {
        display: block !important;
    }
}

/* =======================================
   ACXPA Quarterly Reports — Key Metrics Trend Section
   Updated with .accrqr prefix
======================================= */
.accrqr-metrics-section {
  background: var(--accrqr-cloud);
  padding: 32px 28px;
  border-radius: 8px;
  margin-bottom: 40px;
}

.accrqr-metrics-h3 {
  font-size: var(--accrqr-fs-h3);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  margin: 0 0 12px;
  line-height: var(--acxpa-ds-leading-snug);
}

.accrqr-metrics-intro {
  font-size: var(--accrqr-fs-body);
  color: var(--accrqr-ink);
  line-height: var(--acxpa-ds-leading-body);
  margin: 0 0 12px;
}

.accrqr-metrics-list {
  font-size: var(--accrqr-fs-body);
  color: var(--accrqr-ink);
  margin: 0 0 20px 10px;
  line-height: var(--acxpa-ds-leading-body);
  padding-left: 20px;
}

.accrqr-metrics-list li {
  margin-bottom: 8px;
}

.accrqr-metrics-list li:last-child {
  margin-bottom: 0;
}

/* Header row for the Key Metrics section: heading and intro on the left,
   the chart icon on the right. Replaces a hard-coded inline flex that had
   no wrap and no shrink, so on a narrow screen the 80px icon squeezed the
   heading into a two-word column. The icon is decorative, so it is hidden
   below 600px rather than stacked. */
.accrqr-metrics-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--accrqr-space-lg);
}
.accrqr-metrics-head-copy { flex: 1 1 320px; min-width: 0; }
.accrqr-metrics-head-icon {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .accrqr-metrics-head-icon { display: none; }
}

.accrqr-chart-wrapper {
  margin: 24px 0;
}

.accrqr-chart-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* =======================================
   ACXPA Quarterly Reports — Accordian
   Updated with .accrqr prefix
======================================= */

/* Accordion toggle button */
.accrqr-accordion-toggle {
  background: var(--accrqr-teal-100);
  padding: 12px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--accrqr-fs-body);
  font-weight: 600;
  color: var(--accrqr-teal-700);
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background 0.2s ease;
}

.accrqr-accordion-toggle:hover {
  background: var(--accrqr-teal-200);
}

.accrqr-accordion-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accrqr-accordion-toggle-label::before {
  content: "ℹ️";
  font-size: var(--accrqr-fs-lead);
}

.accrqr-accordion-toggle::after {
  content: "▼";
  font-size: var(--accrqr-fs-caption);
  transition: transform 0.2s ease;
}

.accrqr-accordion-toggle.active::after {
  transform: rotate(180deg);
}

.accrqr-accordion-content {
  display: none;
  padding: 20px 16px;
  background: var(--accrqr-white);
  border: 1px solid var(--accrqr-teal-100);
  border-top: none;
  border-radius: 0 0 6px 6px;
  margin-top: -6px;
}

.accrqr-accordion-content.active {
  display: block;
}

.accrqr-accordion-content p {
  font-size: var(--accrqr-fs-body);
  color: var(--accrqr-ink);
  line-height: var(--acxpa-ds-leading-body);
  margin: 0 0 16px;
}

.accrqr-accordion-content p:last-child {
  margin-bottom: 0;
}

.accrqr-accordion-content a {
  color: var(--accrqr-teal-600);
  text-decoration: underline;
  font-weight: 600;
}

.accrqr-accordion-content a:hover {
  color: var(--accrqr-teal-700);
}


/* =======================================
   ACXPA Quarterly Reports — Quadrant Section
   Updated with .accrqr prefix
======================================= */
.accrqr-quadrant-section {
  background: var(--accrqr-cloud);
  padding: 32px 28px;
  border-radius: 8px;
  margin-bottom: 40px;
}

.accrqr-quadrant-h3 {
  font-size: var(--accrqr-fs-h3);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  margin: 0 0 16px;
  line-height: var(--acxpa-ds-leading-snug);
}

.accrqr-quadrant-p {
  font-size: var(--accrqr-fs-body);
  color: var(--accrqr-ink);
  line-height: var(--accrqr-lh-body);
  margin: 0 0 16px;
}

.accrqr-quadrant-p:last-of-type {
  margin-bottom: 24px;
}

.accrqr-quadrant-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}

/* =========================================
   ACXPA Quarterly Report – Bottom CTA Block
   Updated with .accrqr prefix
   ========================================= */
.accrqr-bottom-cta {
  background: var(--accrqr-teal-900);
  padding: 80px 24px;
  color: var(--accrqr-white);
  font-family: var(--accrqr-font);
  text-align: center;
  position: relative;
}

.accrqr-bottom-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accrqr-gold) 0%, var(--accrqr-teal-700) 100%);
}

.accrqr-big-cta {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.accrqr-cta-head {
  margin-bottom: 36px;
}

.accrqr-cta-eyebrow {
  display: inline-block;
  background: var(--accrqr-gold);
  color: var(--accrqr-teal-700);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--accrqr-fs-eyebrow);
  letter-spacing: 1.2px;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.accrqr-big-cta h2 {
  font-size: var(--accrqr-fs-h2);
  font-weight: 800;
  color: var(--accrqr-white) !important;
  margin-bottom: 18px;
  line-height: var(--acxpa-ds-leading-snug);
}

.accrqr-cta-sublead {
  font-size: var(--accrqr-fs-lead);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-teal-100);
  margin: 0 auto 0;
  max-width: 1000px;
}

.accrqr-cta-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 40px;
}

/* CTA POINTS — LIGHT TILES ON THE DARK PANEL.

   Third attempt, and this one stops fiddling with translucency. Two
   earlier versions used rgba(white, .08) then .10 over Teal 900. Both
   gave excellent TEXT contrast (11-12:1) and both still read as "hard to
   read", because the problem was never the type — it was that a
   near-transparent tile on a near-black panel does not look like a
   surface at all. You cannot fix perceived legibility by adding 2% of
   white.

   So the tile is now opaque Cloud with Ink text:
     Ink on Cloud        14.7:1
     tile against panel  14.4:1   (it reads as an object, unmistakably)

   The gold left edge stays as the accent. It is a decorative rule, not
   text, so its low ratio against Cloud is fine — the meaning is carried
   by the text, per section 1.

   TO REVERT to dark tiles: swap the two background values for
   rgba(255,255,255,.10) / .18 and set color back to var(--accrqr-white).
   Everything else can stay. */
.accrqr-cta-point {
  background: var(--accrqr-cloud);
  border: 1px solid var(--accrqr-teal-200);
  border-left: 5px solid var(--accrqr-gold);
  padding: 16px 20px;
  border-radius: 8px;
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-ink);
  text-align: left;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.accrqr-cta-point strong { color: var(--accrqr-teal-700); }

/* Hover lifts toward white and deepens the gold edge. No colour wash —
   gold at low alpha over a light tile just looks dirty, the same way it
   looked olive over the dark one. */
.accrqr-cta-point:hover {
  background: var(--accrqr-white);
  border-color: var(--accrqr-teal-400);
  border-left-color: var(--accrqr-gold-deep);
  transform: translateX(4px);
}

/* Sublead is now two paragraphs. The original rule had margin:0 auto 0,
   so a second <p> would have collided with the first. */
.accrqr-cta-sublead + .accrqr-cta-sublead { margin-top: 16px; }

.accrqr-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.accrqr-btn {
  display: inline-block;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  font-size: var(--accrqr-fs-body);
  transition: all 0.25s ease;
}

.accrqr-btn--primary {
  background-color: var(--accrqr-gold);
  color: var(--accrqr-teal-700) !important;
  border: 2px solid var(--accrqr-gold);
}

.accrqr-btn--primary:hover {
  background-color: var(--accrqr-gold-tint);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(249, 176, 46, 0.3);
}

.accrqr-btn--ghost {
  background: transparent;
  color: var(--accrqr-white) !important;
  border: 2px solid var(--accrqr-gold);
}

.accrqr-btn--ghost:hover {
  background-color: var(--accrqr-gold);
  color: var(--accrqr-teal-700) !important;
  transform: translateY(-2px);
}

.accrqr-btn.accrqr-pulse {
  position: relative;
}

/* PRIMARY CTA ATTENTION TREATMENT

   History, so this doesn't get re-broken: two earlier versions drew
   translucent GOLD over the near-black teal panel. Gold at low alpha over
   Teal 900 composites to a dull olive, so a filled halo was invisible
   (~0.24 effective alpha, gold-on-gold where it overlapped) and an expanding
   hard ring read as a muddy band. Same trap that made the CTA tiles
   unreadable. Nothing here puts translucent gold on dark.

   1. SHEEN — a white highlight sweeping the face of the button. White over
      #F9B02E is a clean highlight and can never go olive. On ::before,
      clipped by overflow:hidden so it stays inside the pill.
   2. GLOW — a BLURRED gold bloom on the button's own box-shadow. Blur spreads
      the colour instead of banding it. box-shadow on an element is not
      clipped by that element's own overflow, so the two coexist.
   3. BRIGHTNESS — a 9% lift on the flash frames, which is what makes it read
      as a flash rather than a fade.

   RHYTHM: a double flash then a rest, on a 2s cycle — sheen sweeps in the
   first 20%, glow thumps at 8% and 27%, everything rests from 42%. A
   heartbeat catches peripheral vision far better than a slow bloom, which is
   the point: this sits at the very bottom of a long page and has one chance
   to register when the reader arrives.

   Note for future edits: `filter` on the button creates a stacking context.
   Do not reintroduce a negative-z-index pseudo-element here — it would be
   trapped behind the button and invisible. That is how version one failed. */
.accrqr-btn.accrqr-pulse {
  overflow: hidden;
  animation: accrqrCtaGlow 2s linear infinite;
}

.accrqr-btn.accrqr-pulse::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%);
  animation: accrqrCtaSheen 2s linear infinite;
}

@keyframes accrqrCtaGlow {
  0%   { box-shadow: 0 0 0 0     rgba(249, 176, 46, 0);    filter: brightness(1); }
  8%   { box-shadow: 0 0 30px 8px  rgba(249, 176, 46, 0.85); filter: brightness(1.09); }
  17%  { box-shadow: 0 0 8px 2px   rgba(249, 176, 46, 0.20); filter: brightness(1); }
  27%  { box-shadow: 0 0 34px 10px rgba(249, 176, 46, 0.85); filter: brightness(1.09); }
  42%  { box-shadow: 0 0 0 0     rgba(249, 176, 46, 0);    filter: brightness(1); }
  100% { box-shadow: 0 0 0 0     rgba(249, 176, 46, 0);    filter: brightness(1); }
}

@keyframes accrqrCtaSheen {
  0%   { left: -60%; }
  20%  { left: 120%; }
  100% { left: 120%; }
}

/* OPTIONAL — sync the burst to the moment the CTA scrolls into view.
   Inert unless something adds .accrqr-cta-resync to an ancestor, so the
   default behaviour is unchanged and nothing breaks if no script runs.
   See the note delivered with this file for the eight lines that use it. */
.accrqr-cta-resync .accrqr-btn.accrqr-pulse,
.accrqr-cta-resync .accrqr-btn.accrqr-pulse::before {
  animation: none;
}

.accrqr-cta-meta {
  font-size: var(--accrqr-fs-small);
  color: var(--accrqr-teal-200);
  opacity: 0.9;
}

/* =======================
   Responsive adjustments
   ======================= */
@media (max-width: 768px) {
  .accrqr-bottom-cta {
    padding: 60px 20px;
  }
  
  .accrqr-big-cta h2 {
    font-size: var(--accrqr-fs-h3);
  }
  
  .accrqr-cta-sublead {
    font-size: var(--accrqr-fs-body);
  }
  
  .accrqr-cta-point {
    font-size: var(--accrqr-fs-small);
    padding: 12px 16px;
  }
  
  .accrqr-btn {
    font-size: var(--accrqr-fs-small);
    padding: 12px 24px;
  }
}

/* =========================================
   ACXPA QUARTERLY REPORTS — MEMBERS ONLY
   Modern card-based design with overlay logic
   Version: 1.1 (Syntax Corrected)
   Last Updated: May 2026
   ========================================= */

/* === PART 1: OVERLAY SYSTEM === */

/* Hosts */
#member-reports .post-item {
  position: relative;
}

/* Overlay veil container */
.overlay-block {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  padding: 8px;
  box-sizing: border-box;
}

#member-reports .post-item:hover > .overlay-block {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.overlay-block.mobile-injected,
.overlay-block.force-show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Veils */
.coming-soon-overlay.overlay-block,
.access-hover.overlay-block {
  background: var(--veil-peach);
  box-shadow: 0 8px 24px rgba(15, 79, 92, 0.1);
}

/* Card base */
.overlay-content {
  border: 1px solid rgba(15, 79, 92, 0.12);
  border-radius: 12px;
  padding: 18px 44px 18px 18px;
  width: 100%;
  max-width: var(--card-maxw);
  box-sizing: border-box;
  color: var(--accrqr-ink);
  line-height: 1.5;
  position: relative;
  background: var(--accrqr-cloud);
  box-shadow: 0 8px 24px rgba(15, 79, 92, 0.1);
}

.overlay-content p {
  margin: 0;
}

/* Tones */
.coming-soon-overlay .overlay-content {
  background: var(--card-blue);
  border-color: rgba(15, 79, 92, 0.1);
}

.access-hover .overlay-content {
  background: var(--card-green);
  border-color: rgba(15, 79, 92, 0.1);
}

/* Action row */
.overlay-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.overlay-actions .inline-note {
  font-size: var(--accrqr-fs-eyebrow);
  color: var(--accrqr-slate);
}

.overlay-actions .inline-note a {
  color: var(--accrqr-teal-600);
  text-decoration: none;
}

.overlay-actions .inline-note a:hover {
  text-decoration: underline;
}

/* Buttons */
.modal-cta {
  display: inline-block;
  padding: 8px 12px;
  font-weight: 700;
  font-size: var(--accrqr-fs-small);
  line-height: 1;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  color: var(--accrqr-white) !important;
  background: var(--accrqr-teal-700);
}

.modal-cta:hover {
  transform: translateY(-1px);
  background: var(--accrqr-gold);
  color: var(--accrqr-ink) !important;
}

/* Close button */
.overlay-dismiss {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-family: var(--acxpa-ds-font);
  color: var(--accrqr-clay-deep);
  background: var(--accrqr-white);
  border: 1px solid rgba(192, 90, 66, 0.4);
  cursor: pointer;
  line-height: 1;
  transition: transform 0.15s ease;
}

.overlay-dismiss:hover {
  transform: scale(1.05);
}

/* Current Report highlight */
.post-item.is-current {
  background-color: rgba(15, 79, 92, 0.08);
  border: 1px solid rgba(15, 79, 92, 0.28);
  transition: background-color 0.2s ease;
}

.post-item.is-current:hover {
  background-color: rgba(15, 79, 92, 0.18);
}

.post-item.is-current .overlay-block {
  background: rgba(15, 79, 92, 0.06);
}

@media (max-width: 640px) {
  .overlay-content {
    max-width: calc(var(--card-maxw) - 40px);
    padding: 16px 40px 16px 16px;
  }
  .overlay-actions {
    gap: 10px;
  }
}


/* === PART 2: MODERN CARD GRID SYSTEM === */

.acxpa-qr.kleo-isotope,
.acxpa-qr.masonry-listing,
.acxpa-qr .kleo-isotope,
.acxpa-qr .masonry-listing {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
  column-gap: 24px !important;
  row-gap: 24px !important;
  gap: 24px !important;
  height: auto !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  align-content: start !important;
}

.acxpa-qr .kleo-post-grid-item,
.acxpa-qr.kleo-isotope .kleo-post-grid-item,
.acxpa-qr.masonry-listing .kleo-post-grid-item,
.acxpa-qr .post-item,
.acxpa-qr.kleo-isotope .post-item,
.acxpa-qr.masonry-listing .post-item {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: none !important;
  float: none !important;
  clear: none !important;
}

.acxpa-qr .kleo-post-grid-item .post-content,
.acxpa-qr .post-item .post-content {
  background: var(--accrqr-white) !important;
  border: 2px solid var(--accrqr-teal-200) !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 10px rgba(15, 79, 92, 0.05) !important;
}

.acxpa-qr .post-content .post-media,
.acxpa-qr .post-content .featured-thumb {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px 14px 0 0 !important;
}

.acxpa-qr .post-content .post-media img,
.acxpa-qr .post-content .featured-thumb img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.acxpa-qr .format-standard .post-title,
.acxpa-qr .masonry-listing .post-title,
.acxpa-qr.masonry-listing .post-title {
  border-left: none !important;
  text-align: center !important;
  padding: 20px 16px 8px !important;
  margin: 0 !important;
}

.acxpa-qr .post-title a {
  color: var(--accrqr-teal-700) !important;
  font-weight: 900 !important;
  font-size: var(--accrqr-fs-lead) !important;
  line-height: var(--acxpa-ds-leading-snug) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.acxpa-qr .post-title a:hover {
  color: var(--accrqr-teal-600) !important;
}

.acxpa-qr .post-content-description,
.acxpa-qr .post-info {
  text-align: center !important;
  padding: 0 16px 16px !important;
  color: var(--accrqr-slate) !important;
  font-size: var(--accrqr-fs-small) !important;
  line-height: var(--acxpa-ds-leading-body) !important;
  flex-grow: 1 !important;
}

.acxpa-qr .post-footer {
  margin-top: auto !important;
  padding: 0 16px 20px 16px !important;
  text-align: center !important;
  border: none !important;
}

.acxpa-qr .post-footer a span.muted.pull-right {
  display: inline-block !important;
  float: none !important;
  background-color: var(--accrqr-gold) !important;
  color: var(--accrqr-teal-700) !important;
  padding: 12px 28px !important;
  border-radius: 8px !important;
  font-weight: 900 !important;
  font-size: var(--accrqr-fs-small) !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(15, 79, 92, 0.1) !important;
}

.acxpa-qr .post-footer a:hover span.muted.pull-right {
  background-color: var(--accrqr-teal-700) !important;
  color: var(--accrqr-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(15, 79, 92, 0.15) !important;
}

.acxpa-qr .kleo-post-grid-item:hover .post-content,
.acxpa-qr .post-item:hover .post-content {
  border-color: var(--accrqr-gold) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 24px rgba(15, 79, 92, 0.1) !important;
}

.acxpa-qr .post-item:hover .post-media img,
.acxpa-qr .post-item:hover .featured-thumb img {
  transform: scale(1.05) !important;
}

.acxpa-qr .post-item.is-current .post-content {
  background-color: rgba(15, 79, 92, 0.04) !important;
  border: 2px solid rgba(15, 79, 92, 0.3) !important;
}

.acxpa-qr .post-item.is-current:hover .post-content {
  background-color: rgba(15, 79, 92, 0.08) !important;
  border-color: var(--accrqr-teal-600) !important;
}

.acxpa-qr .overlay-block {
  border-radius: 16px;
}

.acxpa-qr.masonry-listing .post-item {
  position: relative !important;
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
  .acxpa-qr.kleo-isotope,
  .acxpa-qr.masonry-listing,
  .acxpa-qr .kleo-isotope,
  .acxpa-qr .masonry-listing {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

@media (max-width: 991px) {
  .acxpa-qr.kleo-isotope,
  .acxpa-qr.masonry-listing,
  .acxpa-qr .kleo-isotope,
  .acxpa-qr .masonry-listing {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .acxpa-qr.kleo-isotope,
  .acxpa-qr.masonry-listing,
  .acxpa-qr .kleo-isotope,
  .acxpa-qr .masonry-listing {
    grid-template-columns: 1fr;
    gap: 16px !important;
  }
  
  .acxpa-qr .post-title a {
    font-size: var(--accrqr-fs-body) !important;
  }
}

/* Anchor scrolling.
   `scroll-behavior: smooth` was on <html>. Chrome eases native smooth
   scrolling in-out and scales the duration with distance, so on a report
   this long a jump-nav click crawls at the start then races to the target.
   A jump nav is meant to be instant, so it is now `auto`.
   scroll-margin-top keeps the heading off the top edge on arrival and
   clears the 32px admin bar for logged-in users.
   `:target` covers any anchor added later without editing this list. */
html {
  scroll-behavior: auto;
}
:target,
#executive-summary,
#overall-cx-rankings,
#key-metric-trends,
#cx-quadrant,
.accrqr-sec {
  scroll-margin-top: 48px;
}

/* Final Thought Section */
.accrqr-finalthought {
  background-color: var(--accrqr-teal-50);
  border-left: 4px solid var(--accrqr-teal-600);
  padding: 24px;
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-ink);
  border-radius: 6px;
  margin-top: 30px;
}

/* Inline CTA */
.accrqr-inline-cta {
  background-color: var(--accrqr-gold-tint);
  border: 1px solid var(--accrqr-gold);
  border-radius: 6px;
  padding: 20px;
  margin-top: 40px;
}

.accrqr-inline-cta p {
  margin: 0;
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-ink);
}

/* Final CTA Section */
.accrqr-final-cta {
  background: var(--accrqr-gold-tint);
  border: 1px solid var(--accrqr-gold);
  border-radius: 12px;
  padding: 32px;
  margin-top: 40px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.accrqr-final-cta-title {
  font-size: var(--accrqr-fs-h3);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  text-align: center;
  margin: 0 0 12px;
}

.accrqr-final-cta-intro {
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-slate);
  text-align: center;
  margin: 0 0 24px;
}

/* Sector Links Grid */
.accrqr-final-cta-sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.accrqr-final-cta .accrqr-final-cta-sectors a {
  display: block;
  background: var(--accrqr-white) !important;
  border: 2px solid var(--accrqr-teal-700) !important;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: var(--accrqr-fs-small);
  font-weight: 700;
  color: var(--accrqr-teal-700) !important;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.accrqr-final-cta .accrqr-final-cta-sectors a:hover {
  background: var(--accrqr-teal-700) !important;
  color: var(--accrqr-white) !important;
  border-color: var(--accrqr-teal-700) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 79, 92, 0.15);
}

.accrqr-final-cta .accrqr-final-cta-buttons a {
  display: block;
  background: var(--accrqr-teal-700) !important;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: var(--accrqr-fs-small);
  font-weight: 700;
  color: var(--accrqr-white) !important;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.accrqr-final-cta .accrqr-final-cta-buttons a:hover {
  background: var(--accrqr-teal-600) !important;
  color: var(--accrqr-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 79, 92, 0.2);
}


/* Divider */
.accrqr-final-cta-divider {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accrqr-teal-200), transparent);
  margin: 32px 0;
}

.accrqr-final-cta-subtitle {
  font-size: var(--accrqr-fs-h4);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  text-align: center;
  margin: 0 0 20px;
}

/* Dashboard Buttons Grid */
.accrqr-final-cta-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.accrqr-final-cta-buttons a {
  display: block;
  background: var(--accrqr-teal-700);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: var(--accrqr-fs-small);
  font-weight: 700;
  color: var(--accrqr-white);
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.accrqr-final-cta-buttons a:hover {
  background: var(--accrqr-teal-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 79, 92, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .accrqr-final-cta {
    padding: 24px 20px;
  }
  
  .accrqr-final-cta-sectors {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .accrqr-final-cta-buttons {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   ACXPA National Call Centre Rankings Header
   ============================================ */

.accrqr-nat-head {
  margin-bottom: 40px;
}

/* Member Alert Boxes (Business/Vendor) */
.accrqr-nat-alert {
  background: linear-gradient(135deg, var(--accrqr-gold-tint) 0%, var(--accrqr-gold-tint) 100%);
  border-left: 4px solid var(--accrqr-gold-deep);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(15, 79, 92, 0.06);
}

.accrqr-nat-alert h3 {
  font-size: var(--accrqr-fs-h3);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  margin: 0 0 12px;
  text-align: center;
}

.accrqr-nat-alert p {
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-ink);
  margin: 0 0 12px;
  text-align: center;
}

.accrqr-nat-alert p:last-child {
  margin: 0;
}

.accrqr-nat-alert a {
  color: var(--accrqr-teal-700);
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.accrqr-nat-alert a:hover {
  color: var(--accrqr-teal-600);
}

/* Intro Section Container */
.accrqr-nat-intro-container {
  background: var(--accrqr-white);
  border: 1px solid var(--accrqr-teal-200);
  border-radius: 10px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 4px 12px rgba(15, 79, 92, 0.08);
}

/* Main Title */
.accrqr-nat-title {
  font-size: var(--accrqr-fs-h2);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  margin: 0 0 24px;
  line-height: 1.2;
}

/* Intro Paragraphs */
.accrqr-nat-intro {
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-ink);
  margin: 0 0 16px;
}

.accrqr-nat-intro:last-of-type {
  margin-bottom: 0;
}

.accrqr-nat-intro strong {
  font-weight: 600;
  color: var(--accrqr-ink);
}

.accrqr-nat-intro a {
  color: var(--accrqr-teal-700);
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.accrqr-nat-intro a:hover {
  color: var(--accrqr-teal-600);
}

/* CTA Lock Paragraph */
.accrqr-nat-cta-lock {
  background: var(--accrqr-cloud);
  border: 2px solid var(--accrqr-teal-200);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0 0;
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-ink);
}

.accrqr-nat-cta-lock a {
  color: var(--accrqr-teal-600);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.accrqr-nat-cta-lock a:hover {
  color: var(--accrqr-teal-700);
  text-decoration: underline;
}

/* Navigation Container */
.accrqr-nat-nav-container {
  background: var(--accrqr-white);
  border: 1px solid var(--accrqr-teal-200);
  border-radius: 10px;
  padding: 28px;
  margin-bottom: 40px;
  box-shadow: 0 4px 12px rgba(15, 79, 92, 0.08);
}

/* Header with Badge */
.accrqr-nat-nav-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 24px;
}

.accrqr-nat-nav-header-content {
  flex: 1;
}

.accrqr-nat-nav-header h2 {
  font-size: var(--accrqr-fs-h3);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  margin: 0 0 12px;
  line-height: var(--acxpa-ds-leading-snug);
}

.accrqr-nat-nav-header p {
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-slate);
  margin: 0 0 10px;
}

.accrqr-nat-nav-header p:last-child {
  margin: 0;
}

.accrqr-nat-nav-header strong {
  font-weight: 600;
  color: var(--accrqr-ink);
}

.accrqr-nat-nav-badge {
  flex-shrink: 0;
}

.accrqr-nat-nav-badge img {
  width: 80px;
  height: auto;
  display: block;
}

/* Navigation Labels */
.accrqr-nat-nav-label {
  font-size: var(--accrqr-fs-small);
  font-weight: 700;
  color: var(--accrqr-slate);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}

/* Navigation Links - Section Jumps (DARK BACKGROUND) */
.accrqr-nat-nav-links-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.accrqr-nat-nav-links-section a {
  display: flex;
  align-items: center;
  background: var(--accrqr-teal-700);
  border: 1px solid var(--accrqr-teal-700);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: var(--accrqr-fs-small);
  font-weight: 600;
  color: var(--accrqr-white) !important;
  text-decoration: none;
  transition: all 0.2s ease;
}

.accrqr-nat-nav-links-section a:hover {
  background: var(--accrqr-teal-600);
  border-color: var(--accrqr-teal-600);
  color: var(--accrqr-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 79, 92, 0.15);
}

/* Navigation Links - External Links */
.accrqr-nat-nav-links-external {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.accrqr-nat-nav-links-external a {
  display: flex;
  align-items: center;
  background: var(--accrqr-cloud);
  border: 1px solid var(--accrqr-teal-200);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: var(--accrqr-fs-small);
  font-weight: 600;
  color: var(--accrqr-slate);
  opacity: 0.85;
  text-decoration: none;
  transition: all 0.2s ease;
}

.accrqr-nat-nav-links-external a:hover {
  background: var(--accrqr-cloud);
  border-color: var(--accrqr-teal-200);
  color: var(--accrqr-slate);
  opacity: 1;
  transform: translateY(-1px);
}

.accrqr-nat-nav-links-external a i {
  margin-left: auto;
  font-size: var(--accrqr-fs-eyebrow);
  opacity: 0.7;
}


/* Deeper CTA Box (Members) */
.accrqr-nat-deeper-cta {
  background: linear-gradient(135deg, var(--accrqr-gold-tint) 0%, var(--accrqr-gold-tint) 100%);
  border: 2px solid var(--accrqr-gold);
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 24px;
}

.accrqr-nat-deeper-cta p {
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-gold-deep);
  margin: 0;
}

.accrqr-nat-deeper-cta strong {
  font-weight: 700;
  color: var(--accrqr-gold-deep);
}

.accrqr-nat-deeper-cta a {
  display: inline-block;
  background: var(--accrqr-teal-700);
  color: var(--accrqr-white) !important;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 12px;
  transition: all 0.2s ease;
}

.accrqr-nat-deeper-cta a:hover {
  background: var(--accrqr-teal-600);
  color: var(--accrqr-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(15, 79, 92, 0.15);
}

/* Disclaimer (Visitor) */
.accrqr-nat-disclaimer {
  background: var(--accrqr-cloud);
  border-top: 2px solid var(--accrqr-teal-200);
  padding: 16px 20px;
  margin-top: 24px;
  border-radius: 0 0 8px 8px;
  font-size: var(--accrqr-fs-small);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-slate);
  text-align: center;
}

.accrqr-nat-disclaimer strong {
  font-weight: 700;
  color: var(--accrqr-ink);
}

.accrqr-nat-disclaimer a {
  color: var(--accrqr-teal-600);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.accrqr-nat-disclaimer a:hover {
  color: var(--accrqr-teal-700);
  text-decoration: underline;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .accrqr-nat-intro-container {
    padding: 24px;
  }

  .accrqr-nat-title {
    font-size: var(--accrqr-fs-h3);
  }

  .accrqr-nat-nav-header {
    flex-direction: column;
  }

  .accrqr-nat-nav-badge {
    align-self: center;
  }

  .accrqr-nat-nav-badge img {
    width: 60px;
  }

  .accrqr-nat-nav-links {
    grid-template-columns: 1fr;
  }

  .accrqr-nat-nav-container {
    padding: 20px;
  }

  .accrqr-nat-alert {
    padding: 20px;
  }
}

/* Competency Leaders Section */
.accrqr-competency-leaders {
  background: var(--accrqr-cloud);
  border: 1px solid var(--accrqr-teal-200);
  border-radius: 8px;
  padding: 24px;
  margin-top: 20px;
}

.accrqr-competency-title {
  font-size: var(--accrqr-fs-h4);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  margin: 0 0 16px;
}

.accrqr-competency-grid {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accrqr-competency-item {
  background: var(--accrqr-white);
  border: 1px solid var(--accrqr-teal-200);
  border-radius: 6px;
  padding: 16px;
}

.accrqr-competency-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.accrqr-competency-header > div:first-child {
  flex: 1;
}

.accrqr-competency-name {
  font-size: var(--accrqr-fs-body);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  margin-bottom: 4px;
}

.accrqr-competency-desc {
  font-size: var(--accrqr-fs-small);
  line-height: 1.5;
  color: var(--accrqr-slate);
  margin-bottom: 6px;
}

.accrqr-competency-winner {
  font-size: var(--accrqr-fs-body);
  font-weight: 700;
  color: var(--accrqr-ink);
}

.accrqr-competency-logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .accrqr-competency-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .accrqr-competency-logo {
    height: 30px;
  }
}

/* Subscriber CTA - WIFM List */
.accrqr-final-cta-wifm {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.accrqr-final-cta-wifm li {
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-ink);
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}

.accrqr-final-cta-wifm li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accrqr-teal-600);
  font-weight: 700;
  font-size: var(--accrqr-fs-lead);
}

.accrqr-final-cta-wifm li strong {
  color: var(--accrqr-teal-700);
  font-weight: 700;
}

/* Primary Action Buttons */
.accrqr-final-cta-primary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.accrqr-final-cta-primary-btn {
  display: block;
  background: var(--accrqr-teal-600) !important;
  border: 2px solid var(--accrqr-teal-600) !important;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: var(--accrqr-fs-body);
  font-weight: 700;
  color: var(--accrqr-white) !important;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.accrqr-final-cta-primary-btn:hover {
  background: var(--accrqr-teal-700) !important;
  border-color: var(--accrqr-teal-700) !important;
  color: var(--accrqr-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 79, 92, 0.2);
}

.accrqr-final-cta-secondary-btn {
  display: block;
  background: var(--accrqr-white) !important;
  border: 2px solid var(--accrqr-teal-600) !important;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: var(--accrqr-fs-body);
  font-weight: 700;
  color: var(--accrqr-teal-600) !important;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.accrqr-final-cta-secondary-btn:hover {
  background: var(--accrqr-teal-600) !important;
  border-color: var(--accrqr-teal-600) !important;
  color: var(--accrqr-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 79, 92, 0.15);
}

/* Explore Section Title */
.accrqr-final-cta-explore-title {
  font-size: var(--accrqr-fs-h4);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  text-align: center;
  margin: 0 0 12px;
}

.accrqr-final-cta-explore-intro {
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-slate);
  text-align: center;
  margin: 0 0 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .accrqr-final-cta-primary-actions {
    grid-template-columns: 1fr;
  }
}

/* Subheadings */
.accrqr-subheading {
  font-size: var(--accrqr-fs-h4);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  margin: 32px 0 16px;
  line-height: var(--acxpa-ds-leading-snug);
}

.accrqr-subheading:first-of-type {
  margin-top: 24px;
}

/* Callout Box */
.accrqr-callout {
  background: linear-gradient(135deg, var(--accrqr-gold-tint) 0%, var(--accrqr-gold-tint) 100%);
  border-left: 4px solid var(--accrqr-gold);
  border-radius: 8px;
  padding: 24px 28px;
  margin: 24px 0;
  text-align: center;
}

.accrqr-callout-stat {
  font-size: var(--accrqr-fs-display);
  font-weight: 700;
  color: var(--accrqr-gold-deep);
  line-height: 1;
  margin-bottom: 8px;
}

/* CONTRAST: Gold Deep (#9A6412) on Gold Tint (#FDEBCB) is only 4.26:1 —
   under the 4.5:1 AA floor for text at this size. Gold Deep is retained on
   .accrqr-callout-stat only, where the type is large enough for the 3:1
   large-text threshold. Label and body text use Ink (13.5:1). Do not
   "tidy" these back to a single gold. */
.accrqr-callout-label {
  font-size: var(--accrqr-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accrqr-ink);
  margin-bottom: 12px;
}

.accrqr-callout-text {
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-ink);
  margin: 0;
}

/* Increase paragraph spacing */
.accrqr-text {
  margin-bottom: 20px;
}

/* National Report Inline CTAs */
.natreport-inline-cta {
  background: var(--accrqr-gold-tint);
  border: 1px solid var(--accrqr-gold);
  border-radius: 6px;
  padding: 20px;
  margin-top: 40px;
}

.natreport-inline-cta p {
  margin: 0;
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-ink);
}

.natreport-inline-cta a {
  color: var(--accrqr-teal-700);
  font-weight: 700;
  text-decoration: none;
}

.natreport-inline-cta a:hover {
  text-decoration: underline;
}
/* Sector Report Inline CTA */
.accrqr-cta-box {
  background: var(--accrqr-gold-tint);
  border: 1px solid var(--accrqr-gold);
  border-radius: 6px;
  padding: 20px;
  margin-top: 40px;
}

.accrqr-cta-box p {
  margin: 0;
  font-size: var(--accrqr-fs-body);
  line-height: var(--acxpa-ds-leading-body);
  color: var(--accrqr-ink);
}

.accrqr-cta-box a {
  color: var(--accrqr-teal-700);
  font-weight: 600;
  text-decoration: underline;
}

.accrqr-cta-box a:hover {
  color: var(--accrqr-teal-600);
}


/* ========================================================================
   v2.0 CORRECTIONS — appended so they win the cascade over the rules above.
   Each one maps to a specific clause in the Brand & Digital Standards.
   ======================================================================== */

/* --- Typography: Poppins carries every role (section 9) ----------------- */
/* FONT OWNERSHIP
   These components get pasted into WPBakery Raw HTML blocks that are often
   NOT inside a .accrqr wrapper, so none of them can rely on inheriting the
   family. Every block-level component that can stand alone sets it itself.
   If you add a new component class, add it here too — otherwise it will
   silently fall back to the theme font (or a serif) on some pages. */
.accrqr,
.accrqr-bottom-cta,
.accrqr-header-card,
.accrqr-jump,
.accrqr-summary,
.accrqr-performers,
.accrqr-wins,
.accrqr-challenges,
.accrqr-finalthought,
.accrqr-section-divider,
.accrqr-sec,
.accrqr-leaderboard-section,
.accrqr-leaderboard-h3,
.accrqr-leaderboard-p,
.accrqr-quarterly-trend-box,
.accrqr-metrics-section,
.accrqr-metrics-h3,
.accrqr-metrics-intro,
.accrqr-metrics-list,
.accrqr-quadrant-section,
.accrqr-quadrant-h3,
.accrqr-quadrant-p,
.accrqr-competency-leaders,
.accrqr-callout,
.accrqr-inline-cta,
.accrqr-cta-box,
.accrqr-final-cta,
.accrqr-nat-head,
.accrqr-nat-alert,
.accrqr-nat-intro-container,
.accrqr-nat-nav-container,
.accrqr-metric-defs, .accrqr-metric-about, .accrqr-metric-weight,
.acxpa-drop-custom { font-family: var(--accrqr-font); }

.accrqr { color: var(--accrqr-ink); font-size: var(--accrqr-fs-body); line-height: var(--accrqr-lh-body); }

.accrqr-h1,
.accrqr-heading,
.accrqr-nat-title,
.accrqr-big-cta h2 { line-height: var(--accrqr-lh-tight); letter-spacing: -0.01em; }

.accrqr-subheading,
.accrqr-leaderboard-h3,
.accrqr-metrics-h3,
.accrqr-quadrant-h3,
.accrqr-competency-title { line-height: var(--accrqr-lh-snug); }

/* Eyebrows use +0.12em tracking, not a fixed px value (section 10) */
.accrqr-cta-eyebrow,
.accrqr-nat-nav-label,
.accrqr-quarterly-counter .label { letter-spacing: 0.12em; }

/* --- Gold is never small text (section 5) ------------------------------ */
/* Gold measures 1.86:1 on white. Where gold needed to be READ, it is now
   Gold Deep (4.99:1). Gold itself survives only as fills, rules and badges. */
.accrqr-cta-eyebrow {
  background: var(--accrqr-gold);
  color: var(--accrqr-ink);            /* 8.49:1 — the CTA pairing */
  letter-spacing: 0.12em;
}

/* --- Buttons: one primary per view, 44px minimum target (13 + 12) ------ */
.accrqr-btn,
.modal-cta,
.accrqr-nav a,
.accrqr-final-cta-primary-btn,
.accrqr-final-cta-secondary-btn,
.accrqr-nat-nav-links-section a,
.accrqr-nat-nav-links-external a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.accrqr-nat-nav-links-section a,
.accrqr-nat-nav-links-external a { justify-content: flex-start; }

/* .modal-cta was 8px/12px padding on 14px text — roughly 30px tall. */
.modal-cta { padding: var(--accrqr-space-sm) var(--accrqr-space-md); }

/* Jump-nav and modal CTA hover.
   These sit at Teal 700 by default. An earlier version moved hover to
   Teal 800 (#0A3A44) on the "gold is the call to action" principle — but
   Teal 700 -> Teal 800 is imperceptible on a dark chip, so it read as
   having no hover at all. Restored to the Gold / Ink pairing, which the
   Standards list under Call to action and which measures 8.49:1.
   These are transient states on a teal chip, not gold default buttons,
   so the "not every button is gold" rule still holds.

   The !important on colour is REQUIRED: the base rule carries
   `color: var(--accrqr-white) !important`, inherited from the original
   stylesheet. Without it you get white on gold at 1.86:1. */
.accrqr-nav a,
.modal-cta {
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.accrqr-nav a:hover,
.accrqr-nav a:focus-visible,
.modal-cta:hover,
.modal-cta:focus-visible {
  background: var(--accrqr-gold) !important;
  border-color: var(--acxpa-ds-focus) !important;
  color: var(--accrqr-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 79, 92, .22);
}
.accrqr-nav a:active,
.modal-cta:active {
  background: var(--accrqr-teal-900) !important;
  border-color: var(--accrqr-teal-900) !important;
  color: var(--accrqr-white) !important;
  transform: translateY(0);
  box-shadow: none;
}

/* --- Status colour never carries meaning alone (section 1 + 8) --------- */
/* Trend counters previously signalled direction with colour only. */
.accrqr-quarterly-counter .value { display: inline-flex; align-items: baseline; gap: 6px; }
/* GREEN UP / RED DOWN — deliberate, and compliant.
   I had swapped these to Teal 600 / Clay Deep during the brand migration.
   That was wrong: section 8 restricts status colour from DECORATIVE use, and a
   trend direction is feedback, not decoration. This is exactly what the
   sanctioned status tokens are for.
     Success #1E7A5A on Cloud = 4.89:1
     Error   #B3182C on Cloud = 6.32:1   both pass AA.
   The rule that DOES apply is section 1 — colour never carries meaning alone —
   which is why the arrow below is not optional. */
.accrqr-quarterly-counter.trend-positive .value { color: var(--accrqr-success); }
.accrqr-quarterly-counter.trend-negative .value { color: var(--accrqr-error); }
.accrqr-quarterly-counter.trend-positive .value::before { content: "▲"; font-size: .6em; }
.accrqr-quarterly-counter.trend-negative .value::before { content: "▼"; font-size: .6em; }
/* The ▲ / ▼ is the visible non-colour cue. The word is kept for screen
   readers only — visible text made the tile look cluttered. */
.accrqr-quarterly-counter.trend-positive .value::after,
.accrqr-quarterly-counter.trend-negative .value::after {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.accrqr-quarterly-counter.trend-positive .value::after { content: "up"; }
.accrqr-quarterly-counter.trend-negative .value::after { content: "down"; }

/* --- Links: underlines stay in body copy (section 12) ------------------ */
.accrqr-link,
.accrqr-text a,
.accrqr-card-text a,
.accrqr-nat-intro a,
.accrqr-nat-alert a,
.accrqr-member-panel a,
.accrqr-role-cta a,
.accordion-content a,
.accrqr-accordion-content a {
  color: var(--accrqr-teal-600);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.accrqr-link:hover,
.accrqr-text a:hover,
.accrqr-card-text a:hover,
.accrqr-nat-intro a:hover,
.accrqr-nat-alert a:hover,
.accrqr-member-panel a:hover,
.accrqr-role-cta a:hover,
.accrqr-accordion-content a:hover {
  color: var(--accrqr-teal-700);
  text-decoration-thickness: 2px;
}

/* --- Composition: vary the STEP of teal, don't default everything to 700
       (section 3, and the closing line of section 18) ------------------- */
.accrqr-performers   { border-left-color: var(--accrqr-teal-500); }
.accrqr-wins         { border-left-color: var(--accrqr-gold); }
.accrqr-challenges   { border-left-color: var(--accrqr-clay); background: var(--accrqr-clay-tint); }
.accrqr-finalthought { border-left-color: var(--accrqr-teal-600); background: var(--accrqr-teal-50); }
.accrqr-nat-alert    { border-left-color: var(--accrqr-gold); background: var(--accrqr-gold-tint); }

/* Section gap is 4xl / 96px — generous gaps read as considered (section 11) */
.accrqr-summary,
.accrqr-performers,
.accrqr-wins,
.accrqr-leaderboard-section,
.accrqr-metrics-section,
.accrqr-quadrant-section { margin-bottom: var(--accrqr-space-4xl); }

/* Cards use radius LG, hero panels XL (section 11) */
.accrqr-summary,
.accrqr-performers,
.accrqr-wins,
.accrqr-challenges,
.accrqr-finalthought { border-radius: var(--accrqr-radius-lg); }
.accrqr-header-card,
.accrqr-final-cta { border-radius: var(--accrqr-radius-xl); }

/* Elevation is teal-tinted, never neutral black (section 11) */
.accrqr-header-card         { box-shadow: var(--accrqr-shadow-lg); }
.accrqr-card,
.accrqr-nat-alert,
.accrqr-nat-intro-container,
.accrqr-nat-nav-container   { box-shadow: var(--accrqr-shadow-md); }

/* --- Width is the container's job ------------------------------------- */
/* These blocks live inside WPBakery raw-HTML columns, which already set the
   content width. Do NOT add max-width here or on the HTML — it makes the
   report narrower than every other section on the page. Section 10: "Line
   length is a property of the layout — set it once with the container or
   column width. Never with a rule on the element." */

/* --- Disabled state needs a second signal (section 13) ----------------- */
.accrqr-btn[aria-disabled="true"],
.modal-cta[aria-disabled="true"] {
  background: var(--accrqr-teal-100);
  color: var(--accrqr-slate) !important;
  border-color: var(--accrqr-teal-100);
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Accordion: it is a button, so it needs a visible focus + state ---- */
.accrqr-accordion-toggle {
  background: var(--accrqr-teal-50);
  color: var(--accrqr-teal-700);
  border: 1px solid var(--accrqr-teal-200);
  min-height: 44px;
}
.accrqr-accordion-toggle:hover { background: var(--accrqr-teal-100); }
.accrqr-accordion-content      { border-color: var(--accrqr-teal-200); }

/* --- Responsive: Display and H1 scale with the viewport (section 10) --- */
@media (max-width: 768px) {
  .accrqr-h1,
  .accrqr-nat-title { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); }
  .accrqr-heading   { font-size: var(--accrqr-fs-h3); }
}

/* ========================================================================
   REPORT SECTIONS — banded header + body
   Introduced Q2 2026. Replaces the inline styles previously pasted into the
   WPBakery raw-HTML blocks, so every section in every sector report is
   consistent and colour changes happen here, once.

   Markup:
     <section class="accrqr-sec">
       <div class="accrqr-sec-head accrqr-sec-head--primary">
         <p class="accrqr-sec-eyebrow">Australian Energy Retailers · Q2 2026</p>
         <h2 class="accrqr-sec-title">Executive Summary</h2>
       </div>
       <div class="accrqr-sec-body accrqr-sec-body--primary"> … </div>
     </section>

   Variants (head and body must match):
     --primary     Teal 700   Executive Summary / lead section
     --secondary   Teal 500   sub-sections beneath a primary
     --wins        Teal 700 head, Gold edge
     --challenges  Clay Tint head, Clay edge
   NO max-width anywhere: the column sets the width.
   ======================================================================== */

.accrqr-sec { margin: 0 0 var(--accrqr-space-4xl); }
.accrqr-sec:last-child { margin-bottom: 0; }

.accrqr-sec-head {
  padding: var(--accrqr-space-xl) var(--accrqr-space-xl) var(--accrqr-space-lg);
  border-radius: var(--accrqr-radius-xl) var(--accrqr-radius-xl) 0 0;
}
.accrqr-sec-head--primary,
.accrqr-sec-head--wins       { background: var(--accrqr-teal-700); }
.accrqr-sec-head--secondary  { background: var(--accrqr-teal-500); }
.accrqr-sec-head--challenges { background: var(--accrqr-clay-tint); }

.accrqr-sec-eyebrow {
  margin: 0 0 var(--accrqr-space-xs);
  font-size: var(--accrqr-fs-eyebrow);
  line-height: 1.30;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Gold on Teal 700 is 4.92:1 — passes AA. Gold on Teal 500 is not verified,
   so the secondary band uses White (5.41:1). */
.accrqr-sec-head--primary  .accrqr-sec-eyebrow,
.accrqr-sec-head--wins     .accrqr-sec-eyebrow { color: var(--accrqr-gold); }
.accrqr-sec-head--secondary .accrqr-sec-eyebrow { color: var(--accrqr-white); }
.accrqr-sec-head--challenges .accrqr-sec-eyebrow { color: var(--accrqr-clay-deep); }

/* Scoped to the parent class on purpose. The Customizer output in
   acxpa-dynamic.css carries `.main-color h2 {color:#023d1f}` and
   `.main-color h3 {...}` — specificity (0,1,1) — which beats a single
   class (0,1,0) and turns these titles green. Section 20 of the Standards:
   "Where a plugin genuinely cannot be overridden, scope with one wrapper
   class rather than an id." Two classes (0,2,0) wins cleanly, no
   !important, no id. Do not flatten these back to one class. */
.accrqr-sec-head .accrqr-sec-title {
  margin: 0;
  font-size: var(--accrqr-fs-h2);
  line-height: var(--accrqr-lh-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accrqr-white);
}
.accrqr-sec-head--challenges .accrqr-sec-title { color: var(--accrqr-clay-deep); }

/* Accent rule under the title — a fill, which is what Gold is for */
.accrqr-sec-head .accrqr-sec-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: var(--accrqr-space-md);
  border-radius: var(--accrqr-radius-pill);
  background: var(--accrqr-gold);
}
.accrqr-sec-head--challenges .accrqr-sec-head .accrqr-sec-title::after { background: var(--accrqr-clay); }

.accrqr-sec-body {
  background: var(--accrqr-white);
  border: 1px solid var(--accrqr-teal-200);
  border-top: none;
  border-left: 4px solid var(--accrqr-teal-700);
  border-radius: 0 0 var(--accrqr-radius-xl) var(--accrqr-radius-xl);
  padding: var(--accrqr-space-xl);
  color: var(--accrqr-ink);
  font-size: var(--accrqr-fs-body);
  line-height: var(--accrqr-lh-body);
}
.accrqr-sec-body--secondary  { background: var(--accrqr-cloud); border-left-color: var(--accrqr-teal-500); }
.accrqr-sec-body--wins       { border-left-color: var(--accrqr-gold); }
.accrqr-sec-body--challenges { border-left-color: var(--accrqr-clay); }

/* Body copy inside a section.
   PARAGRAPH RHYTHM: 20px between paragraphs, not 16px. These sections run
   long and the copy is deliberately broken into 2-3 sentence paragraphs;
   16px was not enough gap to read as a break at 1.65 line-height, so the
   text ran together into a wall. Do not reduce this without also
   lengthening the paragraphs. */
.accrqr-sec-body > p { margin: 0 0 20px; }
.accrqr-sec-body > p:last-child { margin-bottom: 0; }
.accrqr-sec-lead {
  font-size: var(--accrqr-fs-lead);
  line-height: 1.60;
  font-weight: 400;
}

/* Sub-headed points (Key Wins / Challenges) */
.accrqr-sec-point {
  margin: 0 0 var(--accrqr-space-xs);
  font-size: var(--accrqr-fs-point);
  line-height: 1.35;
  font-weight: 700;
  color: var(--accrqr-teal-700);
}
.accrqr-sec-body--challenges .accrqr-sec-point { color: var(--accrqr-clay-deep); }
/* Bigger gap BEFORE a new point than between paragraphs within one, so the
   eye can find where each point starts. 32px above vs 20px within. */
.accrqr-sec-body > p + .accrqr-sec-point { margin-top: var(--accrqr-space-xl); }

/* Performer cards inside a section */
.accrqr-sec-card {
  background: var(--accrqr-white);
  border: 1px solid var(--accrqr-teal-200);
  border-radius: var(--accrqr-radius-lg);
  padding: var(--accrqr-space-xl);
  margin-bottom: var(--accrqr-space-lg);
  box-shadow: var(--accrqr-shadow-md);
}
.accrqr-sec-card:last-child { margin-bottom: 0; }
.accrqr-sec-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--accrqr-space-md);
  margin-bottom: var(--accrqr-space-md);
}
/* Same reason as above — beats `.main-color h3`. */
.accrqr-sec-card .accrqr-sec-card-title {
  margin: 0;
  font-size: var(--accrqr-fs-h3);
  line-height: var(--accrqr-lh-snug);
  font-weight: 700;
  color: var(--accrqr-teal-700);
}
.accrqr-sec-card-logo { height: 32px; width: auto; }
/* Card text can now be more than one paragraph. The base margin stays 0 so a
   single-paragraph card is unchanged; the sibling rule spaces the rest. */
.accrqr-sec-card-text { margin: 0; color: var(--accrqr-slate); }
.accrqr-sec-card-text + .accrqr-sec-card-text { margin-top: 20px; }
.accrqr-sec-card-text strong { color: var(--accrqr-ink); }

@media (max-width: 768px) {
  .accrqr-sec       { margin-bottom: var(--accrqr-space-2xl); }
  .accrqr-sec-head,
  .accrqr-sec-body,
  .accrqr-sec-card  { padding: var(--accrqr-space-lg); }
  .accrqr-sec-title { font-size: var(--accrqr-fs-h3); }
  .accrqr-sec-card-head { flex-direction: column; align-items: flex-start; }
  .accrqr-sec-card-logo { height: 24px; }
}

/* ---- Intro / hero card ------------------------------------------------
   The report intro previously used its own mrd-* / ccr-* classes styled by
   an inline <style> block in the page. Those are duplicates of components
   already in this file. The intro now uses .accrqr-sec so it matches the
   four report sections exactly, with the two additions below. ---------- */

/* The intro carries the page H1, so it steps up one size from a section H2 */
.accrqr-sec-head .accrqr-sec-title--h1 { font-size: var(--accrqr-fs-h1); }

/* Optional CX Standards badge in the band. Off unless the markup includes
   it — the hero image above the report usually carries the badge already. */
.accrqr-sec-head--badge {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--accrqr-space-lg);
  flex-wrap: wrap;
}
.accrqr-sec-head--badge > div { flex: 1 1 320px; }
.accrqr-sec-badge { width: 88px; height: auto; flex-shrink: 0; }

/* Member panels and role CTAs sitting inside a section body */
.accrqr-sec-body .accrqr-member-panel,
.accrqr-sec-body .accrqr-role-cta { margin-top: var(--accrqr-space-lg); }
.accrqr-sec-body .accrqr-divider  { margin: var(--accrqr-space-xl) 0 var(--accrqr-space-lg); }
.accrqr-sec-body .accrqr-jump     { margin-bottom: 0; }

@media (max-width: 768px) {
  .accrqr-sec-head .accrqr-sec-title--h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); }
  .accrqr-sec-badge { width: 64px; }
}


/* =======================================
   Quarterly trend box — layout hardening
======================================= */

/* It has a fixed 280px width. In a flex row that is fine, but dropped into
   a plain WPBakery column it hugged the left edge. Auto inline margins
   centre it there and are absorbed harmlessly inside the flex row. */
.accrqr-quarterly-trend-box { margin-inline: auto; }

/* The trend box sits in its own WPBakery column with nothing beneath it, so
   it butted straight into the accordion below. Matches the 40px the
   leaderboard section already carries. */
.accrqr-quarterly-trend-box { margin-bottom: var(--accrqr-space-2xl); }

/* `.label` and `.value` are generic names that collide with theme and
   framework CSS — Bootstrap ships a bare `.label` as an INLINE badge, and
   Kleo loads Bootstrap. Neither rule below set `display`, so the label was
   inheriting `inline` and sitting on the same line as the figure.
   Set it explicitly so no framework can move it. */
.accrqr-quarterly-counter .label {
  display: block;
  width: auto;
  background: none;
  padding: 0;
}
.accrqr-quarterly-counter .value {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
}

/* =======================================
   ACXPA Drop-down / "Why we selected…" template
   The template itself is INLINE-STYLED so it stays self-contained on pages
   where this stylesheet is not enqueued (the enqueue only fires on report
   slugs). Inline styles always beat these rules, so nothing here restyles
   it — this block only adds the three things an inline style attribute
   cannot express: hover, keyboard focus, and the chevron rotation.
   Those apply on report pages and degrade silently everywhere else.
======================================= */
.acxpa-drop-header:hover { background: var(--acxpa-ds-teal-100) !important; }   /* Teal 100 */
.acxpa-drop-header:focus-visible {
  outline: 3px solid var(--accrqr-teal-700, var(--acxpa-ds-teal-700));
  outline-offset: 2px;
}
.acxpa-drop-header .rotate-icon { transition: transform .3s ease; }
.acxpa-drop-header.active .rotate-icon,
.acxpa-drop-custom.open .rotate-icon { transform: rotate(180deg); }


/* =======================================
   Metric definitions ("About These Metrics")
   A definition list, not paragraphs with <br>. Screen readers announce the
   term/description relationship, and the hairline ties each description to
   its term visually. Used inside the WPBakery accordion — the accordion
   itself is not touched.

   Markup:
     <dl class="accrqr-metric-defs">
       <dt>Overall CX</dt>
       <dd>…</dd>
     </dl>
     <p class="accrqr-metric-defs-note">Learn more about the …</p>
======================================= */
.accrqr-metric-defs {
  margin: 0;
  font-size: var(--accrqr-fs-body);
  line-height: var(--accrqr-lh-body);
  color: var(--accrqr-ink);
}
.accrqr-metric-defs dt {
  margin: 0 0 var(--accrqr-space-2xs);
  font-size: var(--accrqr-fs-h4);
  font-weight: 600;
  line-height: 1.40;
  color: var(--accrqr-teal-700);
}
.accrqr-metric-defs dd {
  margin: 0 0 var(--accrqr-space-lg);
  padding-left: var(--accrqr-space-md);
  border-left: 2px solid var(--accrqr-teal-200);
  color: var(--accrqr-ink);
}
.accrqr-metric-defs dd:last-of-type { margin-bottom: 0; }

.accrqr-metric-defs-note {
  margin: var(--accrqr-space-lg) 0 0;
  padding-top: var(--accrqr-space-md);
  border-top: 1px solid var(--accrqr-teal-200);
  font-size: var(--accrqr-fs-small);
  line-height: var(--accrqr-lh-body);
  color: var(--accrqr-slate);
  font-family: var(--accrqr-font);
}
.accrqr-metric-defs-note a {
  color: var(--accrqr-teal-600);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.accrqr-metric-defs-note a:hover {
  color: var(--accrqr-teal-700);
  text-decoration-thickness: 2px;
}

/* --- "About This Metric" prose panel ----------------------------------
   Sibling to .accrqr-metric-defs. That one is for term/definition lists;
   this one is for the single-metric explainers that are plain prose.
   Both are designed to sit inside the existing grey WPBakery accordion. */
.accrqr-metric-about {
  margin: 0;
  font-size: var(--accrqr-fs-body);
  line-height: var(--accrqr-lh-body);
  color: var(--accrqr-ink);
  font-family: var(--accrqr-font);
}
.accrqr-metric-about > p { margin: 0 0 20px; }
.accrqr-metric-about > p:last-child { margin-bottom: 0; }

.accrqr-metric-about-lead {
  font-size: var(--accrqr-fs-lead);
  line-height: 1.55;
  color: var(--accrqr-teal-800);
}

/* Weighting tiles. The 30/70 split is the most useful fact in the panel and
   it was buried mid-sentence; this pulls it out to be scannable. */
.accrqr-metric-weights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--accrqr-space-sm);
  margin: 0 0 20px;
}
.accrqr-metric-weight {
  flex: 1 1 160px;
  padding: var(--accrqr-space-sm) var(--accrqr-space-md);
  background: var(--accrqr-teal-50);
  border: 1px solid var(--accrqr-teal-200);
  border-radius: var(--accrqr-radius-md);
  text-align: center;
}
/* display:block on both — Bootstrap (loaded by Kleo) styles bare inline
   elements in places, and these must stack regardless. */
.accrqr-metric-weight-pct {
  display: block;
  font-size: var(--accrqr-fs-h3);
  font-weight: 800;
  line-height: 1;
  color: var(--accrqr-teal-700);
}
.accrqr-metric-weight-name {
  display: block;
  margin-top: var(--accrqr-space-2xs);
  font-size: var(--accrqr-fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accrqr-slate);
}

@media (max-width: 600px) {
  .accrqr-metric-defs dd { padding-left: var(--accrqr-space-sm); }
}

/* ============================================================
   "ABOUT THIS METRIC" — TIGHTEN THE WRAPPER

   The About-this-metric accordion sits inside a
   .accrqr-leaderboard-section whose only child is the accordion.
   That wrapper carries the major-block rhythm: 32px padding plus
   a 96px bottom margin (--accrqr-space-4xl). After a collapsed
   46px accordion header that reads as a hole — measured at 162px
   of dead space between it and the "How We Select" drop-down
   below it on the Car Insurance page.

   Scoped with :has() so it only affects the accordion-only
   wrapper. The leaderboard intro block uses the same class but
   contains .accrqr-leaderboard-intro, so it keeps full rhythm.
   Browsers without :has() simply keep the old spacing.

   Leaves roughly 24 + 12 + WPBakery's own 35px + the drop-down's
   24px top margin ≈ 95px, down from 162px.
============================================================ */
.accrqr-leaderboard-section:has(> .accrqr-accordion:only-child) {
  padding: var(--accrqr-space-lg);
  margin-bottom: var(--accrqr-space-sm);
}

/* ============================================================
   "ABOUT THESE METRICS" — BREATHING ROOM ON THE LAST DEFINITION

   .accrqr-metric-defs dd:last-of-type zeroes the bottom margin, so
   the final definition's text lands 24px above the note's separator
   rule while every other definition gets 24px of clear space plus
   the next term's own spacing on top. The last one reads cramped
   against the rule — most visibly on Car Insurance, where the Agent
   Mastery definition is long.

   Gives the last definition 12px back and lifts the note to 32px:
   44px between the final line and the rule, up from 24px.
============================================================ */
.accrqr-metric-defs dd:last-of-type { margin-bottom: var(--accrqr-space-sm); }

/* Specificity note: .accrqr-accordion-content p (0,1,1) zeroes the margin on
   .accrqr-metric-defs-note (0,1,0), so the note's intended 24px top margin has
   never actually applied inside an accordion on any sector. Qualifying it with
   the container takes it to (0,2,0) and lets it win. */
.accrqr-accordion-content .accrqr-metric-defs-note { margin-top: var(--accrqr-space-xl); }


/* ========================================================================
   LEADERBOARD + QUARTERLY TREND — CENTRED PAIR
   ------------------------------------------------------------------------
   The ranking board and the quarterly trend box sit in two equal WPBakery
   halves, but their content is nowhere near equal: the board runs to about
   590px and the trend box is a fixed 280px. Each is centred inside its own
   half, so the pair reads as a wide block, a 200px gap, then a narrow box
   adrift with dead space to its right.

   This collapses both columns to their content width and centres them as
   one unit with a real gap between them.

   WHY IT KEYS OFF CONTENT, NOT A CLASS
   It selects the row that CONTAINS a ranking board and a trend box, so it
   applies to every sector page with no WPBakery class to add and no chance
   of one page being missed. `:not(:has(.vc_row))` restricts it to the
   innermost such row — without it the outer wrapper row matches too and
   the whole section gets flexed.

   There is an older .accrgr-centered-boxes class further up this file that
   solved the same problem with inline-block. It is left in place for any
   page still using it, but it needs the class applied by hand, which is
   why nothing outside one page ever got it.

   GRACEFUL FALLBACK: where :has() is unsupported the rule simply does not
   match and the layout stays exactly as it is today. Nothing breaks.
   ======================================================================== */

.vc_row:not(:has(.vc_row)):has(.acxpa-leaderboard):has(.accrqr-quarterly-trend-box) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--accrqr-space-xl);
}

.vc_row:not(:has(.vc_row)):has(.acxpa-leaderboard):has(.accrqr-quarterly-trend-box) > .wpb_column {
  width: auto !important;
  float: none !important;
}

/* The board may shrink on a narrow viewport; the trend box is a fixed
   280px and must not be squeezed. */
.vc_row:not(:has(.vc_row)):has(.acxpa-leaderboard):has(.accrqr-quarterly-trend-box) > .wpb_column:has(.acxpa-leaderboard) {
  flex: 0 1 620px;
}
.vc_row:not(:has(.vc_row)):has(.acxpa-leaderboard):has(.accrqr-quarterly-trend-box) > .wpb_column:has(.accrqr-quarterly-trend-box) {
  flex: 0 0 auto;
}

/* Below the WPBakery stacking point they are already one above the other;
   just keep them centred. */
@media (max-width: 767px) {
  .vc_row:not(:has(.vc_row)):has(.acxpa-leaderboard):has(.accrqr-quarterly-trend-box) > .wpb_column:has(.acxpa-leaderboard) {
    flex: 1 1 100%;
  }
}


/* ========================================================================
   SECTOR WINNERS ROLL-CALL  +  AD ROW RHYTHM  +  FINAL CTA WIDTH
   Added for the national report, but all three are generic.
   ======================================================================== */

/* --- Sector winners -----------------------------------------------------
   Was marked up as a <dl class="accrqr-metric-defs">, which is styled for
   term/definition lists inside the metric accordion — it gave every winner
   a stray left rule and a definition-list indent. This is a roll-call of
   seven equal results, so it is a grid of equal cards. */
.accrqr-winners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--accrqr-space-sm);
  margin: var(--accrqr-space-lg) 0 0;
}

/* Seven winners never divide evenly, so the row is FIXED at four up and the
   trailing three centre themselves under it — a deliberate-looking break
   rather than one card stranded on its own line. Four up (rather than the
   seven that technically fitted) is what gives "City of Onkaparinga" and
   "Holmesglen Institute" room to sit on one line instead of wrapping.
   Basis is a percentage minus its share of the gap, so the count is the
   same at every width above the mobile breakpoint. */
.accrqr-winner {
  flex: 0 1 calc(25% - 9px);
  box-sizing: border-box;   /* the basis is a percentage — padding must not add to it */
  background: var(--accrqr-white);
  border: 1px solid var(--accrqr-teal-200);
  border-left: 4px solid var(--accrqr-gold);
  border-radius: var(--accrqr-radius-md);
  padding: var(--accrqr-space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

@media (max-width: 780px) {
  .accrqr-winner { flex: 0 1 calc(50% - 6px); }
}
@media (max-width: 420px) {
  .accrqr-winner { flex: 1 1 100%; }
}

.accrqr-winner-sector {
  font-size: var(--accrqr-fs-caption);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accrqr-slate);
}

.accrqr-winner-name {
  font-size: var(--accrqr-fs-body);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  line-height: var(--acxpa-ds-leading-snug);
}

.accrqr-winner-score {
  font-size: var(--accrqr-fs-h3);
  font-weight: 800;
  color: var(--accrqr-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* --- Ad rows ------------------------------------------------------------
   The advertising rows carry el_class="accrqr-ad-row". Without this the
   space above and below each ad was whatever the neighbouring row happened
   to leave, which differed at every one of the three placements. */
.accrqr-ad-row {
  margin-top: var(--accrqr-space-lg) !important;
  margin-bottom: var(--accrqr-space-lg) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Final CTA ----------------------------------------------------------
   max-width:1100px made this panel visibly narrower than the report
   sections above it once the content column widened. The column already
   sets the width — per section 10, that is the container's job. */
.accrqr-final-cta { max-width: none; }


/* ========================================================================
   NATIONAL REPORT HEADER
   ------------------------------------------------------------------------
   This is the landing page for the quarter, so the header has to do three
   jobs at once: say what the report is, say what THIS reader gets, and get
   them into a section. It previously did all three as separate white cards
   with two near-identical <h2>s 400px apart, which read as three unrelated
   blocks rather than one header.

   It is now a single card:
     .accrqr-nat-band       teal band — eyebrow, title, standfirst, badge
     .accrqr-sec-body       the standing intro copy
     .accrqr-nat-nav-*      one of three role variants, continuing the card

   The role variants no longer carry their own heading — they open with a
   one-line .accrqr-nat-greeting instead, so there is exactly one heading in
   the header. Only one variant is ever visible.
   ======================================================================== */

.accrqr-nat-intro-container.accrqr-sec {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: var(--accrqr-space-2xl);
}

/* --- the band --- */
.accrqr-nat-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--accrqr-space-xl);
  flex-wrap: wrap;
}

.accrqr-nat-band-copy { flex: 1 1 22rem; min-width: 0; }

.accrqr-nat-intro-container.accrqr-sec .accrqr-nat-title {
  color: var(--accrqr-white);
  margin: 0;
}

/* NO max-width. Section 10 / the standing rule: line length is the container's
   job. The band's flex layout and the WPBakery column set the width. */
.accrqr-nat-standfirst {
  margin: var(--accrqr-space-md) 0 0;
  font-size: var(--accrqr-fs-body);
  line-height: var(--accrqr-lh-body);
  color: var(--accrqr-teal-100);
}

.accrqr-nat-band-badge {
  flex: 0 0 auto;
  width: 132px;
  height: auto;
  display: block;
}

/* --- body --- */
.accrqr-nat-intro-container.accrqr-sec > .accrqr-sec-body--primary {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: var(--accrqr-space-lg);
}

/* Logged out with no nav variant showing, the body closes the card. */
.accrqr-nat-intro-container.accrqr-sec > .accrqr-sec-body--primary:last-child {
  border-bottom: 1px solid var(--accrqr-teal-200);
  border-bottom-left-radius: var(--accrqr-radius-xl);
  border-bottom-right-radius: var(--accrqr-radius-xl);
  padding-bottom: var(--accrqr-space-xl);
}

/* --- the role-gated nav, continuing the same card --- */
.accrqr-nat-intro-container.accrqr-sec > .accrqr-nat-nav-container {
  margin: 0;
  padding: 0 var(--accrqr-space-xl) var(--accrqr-space-xl);
  background: var(--accrqr-white);
  border: 1px solid var(--accrqr-teal-200);
  border-top: 0;
  border-left: 4px solid var(--accrqr-teal-700);
  border-radius: 0 0 var(--accrqr-radius-xl) var(--accrqr-radius-xl);
  box-shadow: none;
}

/* Hairline seam where the intro copy ends and the navigation begins. */
.accrqr-nat-intro-container.accrqr-sec > .accrqr-nat-nav-container::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--accrqr-teal-200);
  margin: 0 0 var(--accrqr-space-lg);
}

/* One line, not a second headline. */
.accrqr-nat-greeting {
  margin: 0 0 var(--accrqr-space-lg);
  font-size: var(--accrqr-fs-body);
  line-height: var(--accrqr-lh-body);
  color: var(--accrqr-ink);
}
.accrqr-nat-greeting strong { color: var(--accrqr-teal-700); }

/* The jump row is the primary action; the external row is plainly secondary,
   so the two label+row pairs do not compete. */
.accrqr-nat-intro-container.accrqr-sec .accrqr-nat-nav-links-section { margin-bottom: var(--accrqr-space-lg); }
.accrqr-nat-intro-container.accrqr-sec .accrqr-nat-nav-links-external { margin-bottom: 0; }
.accrqr-nat-intro-container.accrqr-sec .accrqr-nat-nav-label { margin-bottom: var(--accrqr-space-sm); }

@media (max-width: 700px) {
  .accrqr-nat-band { gap: var(--accrqr-space-lg); }
  .accrqr-nat-band-badge { width: 92px; }
  .accrqr-nat-intro-container.accrqr-sec > .accrqr-nat-nav-container {
    padding: 0 var(--accrqr-space-lg) var(--accrqr-space-lg);
  }
}


/* =======================================================================
   BLOCK-TAIL MARGIN — stop double spacing between a raw HTML block and the
   next WPBakery row.

   The 96px section gap exists for sections STACKED INSIDE one raw HTML
   block. When a section is the last thing in its block, the row below
   already supplies the gap, so the two stack and open a visible hole —
   most obviously above an ad row after the Key Metrics Trend chart.
   Spacing between rows is the row's job, not the last element's.
======================================================================= */
.wpb_raw_html .wpb_wrapper > .accrqr-summary:last-child,
.wpb_raw_html .wpb_wrapper > .accrqr-performers:last-child,
.wpb_raw_html .wpb_wrapper > .accrqr-wins:last-child,
.wpb_raw_html .wpb_wrapper > .accrqr-leaderboard-section:last-child,
.wpb_raw_html .wpb_wrapper > .accrqr-metrics-section:last-child,
.wpb_raw_html .wpb_wrapper > .accrqr-quadrant-section:last-child,
.wpb_raw_html .wpb_wrapper > .accrqr-sec:last-child,
.wpb_raw_html .wpb_wrapper > .accrqr-nat-head:last-child {
  margin-bottom: 0;
}


/* =======================================================================
   SECTOR WINNER LOGOS
   Every winning organisation is shown with its ranking logo. Logos are all
   120x40 so the box is fixed and the artwork is contained inside it —
   nothing is stretched, and a row of cards keeps a single baseline.
======================================================================= */
.accrqr-winner-logo {
  display: block;
  width: 120px;
  height: 40px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  margin: var(--accrqr-space-xs) auto var(--accrqr-space-2xs);
  overflow: hidden;   /* a missing logo must not push alt text out of the card */
}


/* =======================================================================
   CALL STAGES — replaces the old .accrqr-competency-* block.

   The five competencies are not a list of categories, they are the shape
   of a phone call: four in sequence, plus Impact running through all of
   them. Each stage carries the national score as a bar so the shape of
   the call is visible at a glance, and the best and weakest sector so the
   reader can see the spread rather than only the winner.

   The bar width is DATA, passed in as --accrqr-v on the element. No width
   is set on any text here — the container owns line length (section 10).
======================================================================= */
/* NO panel chrome here. This block sits inside .accrqr-sec-body--secondary,
   which already supplies the Cloud fill, the border and the 4px accent rule
   on the left. Repeating them drew a second left rule a few pixels inside
   the first, on an identical background — it read as a rendering fault
   rather than a nested panel. The stage cards are white, so they separate
   from the Cloud body on their own. */
.accrqr-stages {
  margin-top: var(--accrqr-space-lg);
}

/* Self-chained on purpose — see the CUSTOMIZER GREEN block near the end of
   this file. H3 size, not H4: at 18px it sat a single point above 17px body
   copy and stopped reading as a heading at all. */
.accrqr-stages-title.accrqr-stages-title {
  font-size: var(--accrqr-fs-h3);
  font-weight: 700;
  color: var(--accrqr-teal-700);
  margin: 0 0 var(--accrqr-space-sm);
}

.accrqr-stages-lead {
  margin: 0 0 var(--accrqr-space-lg);
  font-size: var(--accrqr-fs-body);
  line-height: var(--accrqr-lh-body);
  color: var(--accrqr-ink);
}

.accrqr-stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--accrqr-space-sm);
}

.accrqr-stage {
  background: var(--accrqr-white);
  border: 1px solid var(--accrqr-teal-200);
  border-radius: var(--accrqr-radius-md);
  padding: var(--accrqr-space-md);
}

.accrqr-stage-head {
  display: flex;
  align-items: center;
  gap: var(--accrqr-space-sm);
}

/* The national average is the number the whole card is about. At 21px, level
   with the stage name, it read as a footnote in the corner. It is now the
   largest thing on the card, and it says what it is — nothing previously
   told the reader that this figure was the national average. */
.accrqr-stage-figure {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.accrqr-stage-figure-label {
  font-size: var(--accrqr-fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accrqr-slate);
}

.accrqr-stage-step {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accrqr-teal-700);
  color: var(--accrqr-white);
  font-size: var(--accrqr-fs-small);
  font-weight: 700;
  line-height: 1;
}

.accrqr-stage-name {
  flex: 1 1 auto;
  font-size: var(--accrqr-fs-point);
  font-weight: 700;
  color: var(--accrqr-teal-800);
}

.accrqr-stage-value {
  font-size: var(--accrqr-fs-h2);
  font-weight: 800;
  color: var(--accrqr-teal-800);
  font-variant-numeric: tabular-nums;
}

.accrqr-stage-what {
  margin: var(--accrqr-space-xs) 0 var(--accrqr-space-sm);
  font-size: var(--accrqr-fs-body);
  line-height: var(--accrqr-lh-body);
  color: var(--accrqr-slate);
}

/* THE SCALE — a fill bar showed one number; this shows the spread.

   The track is the full 0-100 range. The shaded band spans the weakest
   sector to the strongest, so the reader can see instantly whether a
   competency is a national problem (a tight band, low down) or a sector
   problem (a band 30 points wide). The diamond is the national average,
   sitting inside that band.

   Positions are DATA, passed in as --accrqr-lo / --accrqr-hi / --accrqr-v.
   Nothing here sets a width on text. What each mark means is stated in
   words above the list, so no meaning rests on colour alone (section 1). */
.accrqr-stage-track {
  position: relative;
  height: 14px;
  border-radius: var(--accrqr-radius-pill);
  background: var(--accrqr-teal-50);
  border: 1px solid var(--accrqr-teal-200);
}

.accrqr-stage-span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--accrqr-lo, 0%);
  right: calc(100% - var(--accrqr-hi, 100%));
  background: linear-gradient(90deg, var(--accrqr-teal-200), var(--accrqr-teal-400));
  border-radius: var(--accrqr-radius-pill);
}

.accrqr-stage-tick {
  position: absolute;
  left: var(--accrqr-v, 0%);
  top: -3px;
  bottom: -3px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
}

.accrqr-stage-tick--low  { background: var(--accrqr-clay-deep); }
.accrqr-stage-tick--high { background: var(--accrqr-teal-700); }

/* The average is a different SHAPE, not just a different colour, so it is
   still distinguishable printed or in greyscale. Ink, because it has to
   stay visible on the gold Impact card as well as on white. */
.accrqr-stage-tick--avg {
  top: 50%;
  bottom: auto;
  width: 15px;
  height: 15px;
  margin-left: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--accrqr-ink);
  border: 2px solid var(--accrqr-white);
  border-radius: 3px;
}

/* Legend swatches — same colours as the ticks they explain. */
.accrqr-stage-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: baseline;
}
.accrqr-stage-key--low  { background: var(--accrqr-clay-deep); }
.accrqr-stage-key--high { background: var(--accrqr-teal-700); }

/* Body size, not small. Who leads and who trails is the most quotable line
   in the block; at 14px it was reading as a caption and being skipped. */
.accrqr-stage-range {
  display: flex;
  flex-wrap: wrap;
  gap: var(--accrqr-space-2xs) var(--accrqr-space-lg);
  margin: var(--accrqr-space-sm) 0 0;
  font-size: var(--accrqr-fs-body);
  line-height: var(--accrqr-lh-body);
}

.accrqr-stage-best  { color: var(--accrqr-teal-700); font-weight: 700; }
.accrqr-stage-worst { color: var(--accrqr-clay-deep); font-weight: 700; }

/* Impact is not a stage in the sequence, so it is marked out in gold —
   solid gold on white, never gold over dark teal. */
.accrqr-stage--woven {
  border-left: 4px solid var(--accrqr-gold);
  background: var(--accrqr-gold-tint);
}
.accrqr-stage--woven .accrqr-stage-step {
  background: var(--accrqr-gold-deep);
  color: var(--accrqr-white);
}
.accrqr-stage--woven .accrqr-stage-track {
  background: var(--accrqr-white);
  border-color: var(--accrqr-gold);
}
.accrqr-stage--woven .accrqr-stage-span {
  background: linear-gradient(90deg, var(--accrqr-gold), var(--accrqr-gold-deep));
}
.accrqr-stage--woven .accrqr-stage-tick--avg { border-color: var(--accrqr-gold-tint); }
.accrqr-stage--woven .accrqr-stage-what { color: var(--accrqr-ink); }
.accrqr-stage--woven .accrqr-stage-value { color: var(--accrqr-gold-deep); }
/* Ink, not Gold Deep: at 12px bold this caption is NORMAL text for AA, and
   Gold Deep on Gold Tint is only 4.26:1. Ink is 13.5:1. The figure itself
   stays Gold Deep — at 30px/800 it is large text and 4.26:1 clears 3:1. */
.accrqr-stage--woven .accrqr-stage-figure-label { color: var(--accrqr-ink); }

.accrqr-stages-note {
  margin: var(--accrqr-space-lg) 0 0;
  font-size: var(--accrqr-fs-body);
  line-height: var(--accrqr-lh-body);
  color: var(--accrqr-ink);
}
.accrqr-stages-note + .accrqr-stages-note { margin-top: var(--accrqr-space-sm); }

@media (max-width: 560px) {
  .accrqr-stage-head { flex-wrap: wrap; }
  .accrqr-stage-figure { align-items: flex-start; }
}

/* One line explaining the marks, so nothing depends on reading colour. */
.accrqr-stages-key {
  margin: 0 0 var(--accrqr-space-lg);
  font-size: var(--accrqr-fs-small);
  line-height: var(--accrqr-lh-body);
  color: var(--accrqr-slate);
}


/* =======================================================================
   REQUEST A NEW SECTOR — not an eighth sector.

   Seven sectors fill the grid exactly; an eighth button dropped to a row
   of its own and read as a stranded orphan. It is also a different kind
   of action, so it now sits below the grid as one full-width secondary
   bar. Dashed border marks it as a request rather than a destination.
======================================================================= */
.accrqr-final-cta-sectors:has(+ .accrqr-final-cta-newsector) {
  margin-bottom: var(--accrqr-space-sm);
}

.accrqr-final-cta-newsector {
  margin: 0 0 var(--accrqr-space-xl);
}

.accrqr-final-cta .accrqr-final-cta-newsector a {
  display: block;
  background: transparent !important;
  border: 2px dashed var(--accrqr-teal-400) !important;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: var(--accrqr-fs-small);
  font-weight: 700;
  color: var(--accrqr-teal-700) !important;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.accrqr-final-cta .accrqr-final-cta-newsector a:hover {
  background: var(--accrqr-white) !important;
  border-style: solid !important;
  border-color: var(--accrqr-teal-700) !important;
  color: var(--accrqr-teal-700) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 79, 92, 0.15);
}


/* =======================================================================
   CUSTOMIZER GREEN — the panel headings were still rendering #023D1F.

   acxpa-dynamic.css (Customizer output) carries `.main-color h3 {…}` and
   `.main-color h4 {…}` at specificity (0,1,1). Every heading below is
   styled by a single class (0,1,0), so the Customizer won every time and
   the headings came out in the retired green. The `.accrqr-sec-title` rule
   further up already solves this by scoping to its wrapper, but these
   headings do not all have an ancestor class to scope to —
   `.accrqr-quadrant-h3` sits bare in the WPBakery wrapper.

   Chaining the class to itself gives (0,2,0), which wins everywhere with
   no !important, no id, and no dependence on ancestry. Do not flatten
   these back to one class.
======================================================================= */
.accrqr-leaderboard-h3.accrqr-leaderboard-h3,
.accrqr-metrics-h3.accrqr-metrics-h3,
.accrqr-quadrant-h3.accrqr-quadrant-h3,
.accrqr-competency-title.accrqr-competency-title,
.accrqr-final-cta-title.accrqr-final-cta-title,
.accrqr-final-cta-explore-title.accrqr-final-cta-explore-title,
.accrqr-final-cta-subtitle.accrqr-final-cta-subtitle {
  color: var(--accrqr-teal-700);
}

/* Same problem, different colour: this one is meant to be Ink, not Teal. */
.accrqr-quarterly-heading.accrqr-quarterly-heading {
  color: var(--accrqr-ink);
}

/* These two are styled by a descendant selector (0,1,1), which TIES with
   `.main-color h3` / `.main-color h5` — so the winner came down to source
   order and the Customizer took it. One more class breaks the tie. */
.accrqr-nat-head .accrqr-nat-alert h3 {
  color: var(--accrqr-teal-700);
}
.accrqr-final-cta .accrqr-final-cta-hub-content h5 {
  color: var(--accrqr-teal-700);
}


/* =======================================================================
   QUARTERLY TREND — the trend reading needs to look like a conclusion.

   All three counters sat on the same Cloud tile, so the quarter-on-quarter
   movement read as a third data point rather than the answer the box
   exists to give. It now sits on Gold Tint — the ACXPA highlight fill —
   with a Gold rule across the top and a wider gap above it. Gold is used
   here as a FILL on a light card, never as translucent gold over dark
   teal, which composites to olive.

   Contrast on Gold Tint (#FDEBCB): Success #1E7A5A 4.50:1 and Error
   #B3182C 5.81:1 — both clear AA for normal text, let alone the 30px/800
   figure. The label is Teal 700 at 7.82:1.
   Direction is still carried by the arrow and the up/down text, never by
   colour alone (section 1).
======================================================================= */
.accrqr-quarterly-counter.trend-positive,
.accrqr-quarterly-counter.trend-negative {
  background: var(--accrqr-gold-tint);
  border: 1px solid var(--accrqr-gold);
  border-top: 3px solid var(--accrqr-gold);
  margin-top: var(--accrqr-space-md);
}

.accrqr-quarterly-counter.trend-positive .label,
.accrqr-quarterly-counter.trend-negative .label {
  color: var(--accrqr-teal-700);
}


/* =======================================================================
   RECOGNITION BAND — the winners badge moved here.

   The ranking board section it used to sit in has gone: the top three were
   already named in this section, so the board was showing the same three
   organisations a second time. The badge and the surviving copy came here
   with it, and the section now carries id="leaderboard" so every existing
   #leaderboard link still lands somewhere sensible.

   No width on the copy — the WPBakery column owns line length (section 10).
======================================================================= */
.accrqr-rec-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--accrqr-space-xl);
  flex-wrap: wrap;
}

/* px, not rem: the site root is 62.5%, so 22rem would be a 220px wrap
   threshold rather than the 352px intended. */
.accrqr-rec-band-copy { flex: 1 1 352px; min-width: 0; }

.accrqr-rec-band-badge {
  flex: 0 0 auto;
  width: 112px;
  height: auto;
  display: block;
}

@media (max-width: 700px) {
  .accrqr-rec-band-badge { width: 84px; }
}


/* =======================================================================
   QUARTERLY TREND, WIDE — same component, re-homed under Key Metric Trends.

   In its old spot it was a 280px column standing beside the ranking board.
   On a full-width row that shape would leave most of the line empty, so
   the wide variant lays the heading and the three readings out along the
   row instead. Same markup, one extra class.
======================================================================= */
.accrqr-quarterly-trend-box--wide {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--accrqr-space-md);
}

.accrqr-quarterly-trend-box--wide .accrqr-quarterly-heading {
  flex: 1 1 240px;   /* px — the 62.5% root makes rem thresholds misleading */
  margin: 0;
  text-align: left;
}

/* The narrow box stacks its title with <br>, which in a wide row left three
   ragged lines of equal weight sitting in a lot of empty space. The wide
   variant gives the three parts a hierarchy instead: what it is, which
   metric, and what it covers. */
.accrqr-quarterly-heading--wide {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.accrqr-quarterly-heading--wide .accrqr-quarterly-eyebrow {
  font-size: var(--accrqr-fs-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accrqr-slate);
}

.accrqr-quarterly-heading--wide .accrqr-quarterly-metric {
  font-size: var(--accrqr-fs-h3);
  font-weight: 700;
  color: var(--accrqr-teal-700);
}

.accrqr-quarterly-heading--wide .accrqr-quarterly-scope {
  font-size: var(--accrqr-fs-small);
  font-weight: 600;
  color: var(--accrqr-slate);
}

/* The Overall CX explainer belongs with the Overall CX figures, so the two
   travel together as one panel. The box carries a 48px bottom margin for
   when it stands alone beside a ranking board — inside the panel that gap
   would separate it from its own explainer, so it is dropped here. */
.accrqr-trend-panel > .accrqr-quarterly-trend-box { margin-bottom: 0; }
.accrqr-trend-panel > .accrqr-accordion { margin-top: var(--accrqr-space-md); }

.accrqr-quarterly-trend-box--wide .accrqr-quarterly-counter,
.accrqr-quarterly-trend-box--wide .accrqr-quarterly-counter.trend-positive,
.accrqr-quarterly-trend-box--wide .accrqr-quarterly-counter.trend-negative {
  flex: 1 1 160px;
  margin: 0;
}

@media (max-width: 620px) {
  .accrqr-quarterly-trend-box--wide { display: block; }
  .accrqr-quarterly-trend-box--wide .accrqr-quarterly-heading {
    text-align: center;
    margin-bottom: var(--accrqr-space-md);
  }
  .accrqr-quarterly-trend-box--wide .accrqr-quarterly-counter { margin-bottom: var(--accrqr-space-sm); }
  .accrqr-quarterly-trend-box--wide .accrqr-quarterly-counter.trend-positive,
  .accrqr-quarterly-trend-box--wide .accrqr-quarterly-counter.trend-negative {
    margin-top: var(--accrqr-space-md);
  }
}


/* =======================================================================
   SECTOR WINNER HOVER — these cards are recognition, so they should
   respond when someone points at one. A short lift, a teal-tinted shadow
   and a slight zoom on the logo. Nothing moves for anyone who has asked
   the OS for reduced motion (section 1).
======================================================================= */
.accrqr-winner {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.accrqr-winner:hover,
.accrqr-winner:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(15, 79, 92, 0.16);
  border-color: var(--accrqr-teal-400);
  border-left-color: var(--accrqr-gold);
}

.accrqr-winner-logo { transition: transform 0.2s ease; }
.accrqr-winner:hover .accrqr-winner-logo { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .accrqr-winner,
  .accrqr-winner-logo { transition: none; }
  .accrqr-winner:hover,
  .accrqr-winner:focus-within { transform: none; }
  .accrqr-winner:hover .accrqr-winner-logo { transform: none; }
}


/* =======================================================================
   QUARTERLY TREND, DARK — the national report only.

   On a page this long the trend reading was disappearing into a wall of
   white cards. Dark Teal 800 makes it an object rather than another
   panel, and the three readings sit on it as OPAQUE light tiles.

   Opaque, not translucent — this is the same lesson the CTA points block
   records further up: rgba(white, .08) over dark teal gives fine text
   contrast and still fails to read as a surface. Solid Cloud tiles read
   as objects immediately (Cloud against Teal 800 is 11.46:1).

   Contrast on this panel:
     White heading on Teal 800      12.34:1
     Teal 200 sub-text on Teal 800   7.45:1
     Teal 700 value on Cloud         8.50:1
     Success on Gold Tint            4.50:1
   Gold appears only as a SOLID tint tile and a solid rule — never as
   translucent gold over dark teal, which composites to olive.
======================================================================= */
.accrqr-quarterly-trend-box--dark {
  background: var(--accrqr-teal-800);
  border: 1px solid var(--accrqr-teal-700);
}

.accrqr-quarterly-trend-box--dark .accrqr-quarterly-heading.accrqr-quarterly-heading {
  color: var(--accrqr-white);
}
.accrqr-quarterly-trend-box--dark .accrqr-quarterly-eyebrow { color: var(--accrqr-teal-200); }
.accrqr-quarterly-trend-box--dark .accrqr-quarterly-metric  { color: var(--accrqr-white); }
.accrqr-quarterly-trend-box--dark .accrqr-quarterly-scope   { color: var(--accrqr-teal-200); }

.accrqr-quarterly-trend-box--dark .accrqr-quarterly-counter {
  background: var(--accrqr-cloud);
  border: 1px solid var(--accrqr-teal-200);
}
.accrqr-quarterly-trend-box--dark .accrqr-quarterly-counter .label {
  color: var(--accrqr-slate);
}
.accrqr-quarterly-trend-box--dark .accrqr-quarterly-counter .value {
  color: var(--accrqr-teal-700);
}

/* The result keeps the sand tile, which now has a dark panel to sit on. */
.accrqr-quarterly-trend-box--dark .accrqr-quarterly-counter.trend-positive,
.accrqr-quarterly-trend-box--dark .accrqr-quarterly-counter.trend-negative {
  background: var(--accrqr-gold-tint);
  border: 1px solid var(--accrqr-gold);
  border-top: 3px solid var(--accrqr-gold);
}
.accrqr-quarterly-trend-box--dark .accrqr-quarterly-counter.trend-positive .label,
.accrqr-quarterly-trend-box--dark .accrqr-quarterly-counter.trend-negative .label {
  color: var(--accrqr-gold-deep);
}