/* Supporting diagrams from the copy deck (designed images placed in page sections). */
.abx-diagram { margin: 0; }
.abx-diagram__zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-card); }
.abx-diagram__zoom:focus-visible { outline: 3px solid var(--sky, #2e90c3); outline-offset: 4px; }
.abx-diagram img { display: block; width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--tint-12); background: var(--white); box-shadow: 0 2px 6px rgba(0, 32, 96, .06), 0 30px 60px -32px rgba(0, 32, 96, .35); }
.abx-diagram__hint { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(0, 32, 96, .86); color: var(--white); font-size: 13px; font-weight: 700; pointer-events: none; }
.abx-diagram__hint svg { width: 15px; height: 15px; }
.abx-diagram figcaption { margin-top: 14px; font-size: var(--fs-small); font-style: italic; color: var(--ink-soft); text-align: center; }

/* Full-screen viewer (assets/js/diagram-zoom.js) */
.dzoom { position: fixed; inset: 0; z-index: 9999; display: none; background: rgba(0, 16, 48, .92); }
.dzoom.is-open { display: block; }
.dzoom__scroll { position: absolute; inset: 0; overflow: auto; display: flex; align-items: center; padding: 64px 24px 24px; -webkit-overflow-scrolling: touch; }
.dzoom__img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 88px); margin: auto; border-radius: 12px; background: var(--white); }
.dzoom__close { position: fixed; top: 14px; right: 14px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: var(--white); color: var(--navy, #002060); cursor: pointer; }
.dzoom__close svg { width: 20px; height: 20px; }
.dzoom-lock, .dzoom-lock body { overflow: hidden; }
@media (max-width: 900px) {
  /* Phones / tablets: open wider than the screen so the small text is readable; pan to see the rest. */
  .dzoom__scroll { padding: 68px 16px 16px; }
  .dzoom__img { width: 1100px; max-width: none; max-height: none; flex: none; }
}

/* Certifications "How quality is governed": head + intro, the QMS diagram, then the three principles in a row. */
.abx-gov--diagram { display: block; }
.abx-gov--diagram .abx-gov__list { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 48px); }
.abx-gov--diagram .abx-gitem { grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (max-width: 960px) {
  .abx-gov--diagram .abx-gov__list { grid-template-columns: minmax(0, 1fr); }
  .abx-gov--diagram .abx-gitem { grid-template-columns: 60px minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 480px) {
  .abx-gov--diagram .abx-gitem { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* A diagram that leads its section, with the section's cards after it (Careers). */
.abx-diagram--lead { margin-bottom: clamp(36px, 4.5vw, 56px); }

/* Service "Our approach" with copy deck diagrams (template-parts/service/method.php): brand strip + diagrams side by side. */
.svp-method__strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-bottom: 20px; padding: 16px 24px; border-radius: var(--r-card); background: var(--navy); color: var(--white); text-align: center; }
.svp-method__strip img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.svp-method__strip-label { font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-on-deep, #4da1cc); }
.svp-method__strip strong { font-family: var(--ff-head); font-size: var(--fs-title-m); font-weight: 700; }
.abx-diagrams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-bottom: clamp(32px, 4vw, 48px); }
@media (max-width: 860px) { .abx-diagrams { grid-template-columns: minmax(0, 1fr); } }
/* The steps normally tuck up over the photo banner; after diagrams they start below them. */
.abx-diagrams + .svp-steps { margin-top: 0; }
.abx-diagrams:has(> .abx-diagram:only-child) { grid-template-columns: minmax(0, 1fr); }

/* Service intro with copy deck diagrams: text as a section head, the diagrams below. */
.svp-intro--diagrams .abx-diagrams { margin-bottom: 0; }
.svp-intro--diagrams .svp-intro__body { margin-top: 12px; }
.svp-intro--diagrams .svp-head { align-items: start; }