/*
 * ISO 15189 · 2026-08-13 visual refit
 *
 * The solution-detail page uses one strong hero image followed by quiet,
 * editorial content panels. This refit brings the ISO page into that same
 * rhythm: the hero keeps its image, while the main content loses the large
 * saturated color fields and uses white / mist / pale-mint surfaces instead.
 */

.iso-signature .iso-page {
  max-width: none;
  padding: 0;
  background: #fff;
}

/* The consulting diagram keeps its pale-green identity; the section around
 * it becomes a quiet reading surface. */
.iso-signature .iso-stage-consulting-web {
  --consulting-green: #f7faf8;
  --consulting-ink: #143b2e;
  --consulting-copy: #65766e;
  --consulting-muted: #84918c;
  --consulting-soft: rgba(20, 89, 65, .045);
  --consulting-line: rgba(20, 89, 65, .11);
  --diagram-accent: #238b67;
  --diagram-ink: #143b2e;
  --diagram-copy: #65766e;
  padding: clamp(94px, 9vw, 146px) 0 clamp(110px, 10vw, 160px);
  color: var(--consulting-ink);
}

.iso-signature .iso-stage-consulting-web::before {
  background:
    radial-gradient(700px 520px at 82% 46%, rgba(181, 229, 208, .2), transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
}

.iso-signature .iso-consulting-web {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(64px, 8vw, 126px);
}

.iso-signature .iso-consulting-head p {
  color: #238b67;
}

.iso-signature .iso-consulting-head p::before {
  background: rgba(35, 139, 103, .4);
}

.iso-signature .iso-consulting-head h2 {
  color: #143b2e;
}

.iso-signature .iso-consulting-head > span {
  color: #65766e;
}

.iso-signature .iso-consulting-steps li b {
  border-color: rgba(35, 139, 103, .15);
  background: rgba(35, 139, 103, .045);
  color: #3b8368;
}

.iso-signature .iso-consulting-steps strong {
  color: #1c4637;
}

.iso-signature .iso-consulting-steps small {
  color: #82918a;
}

.iso-signature .iso-consulting-steps li.is-active {
  background: rgba(35, 139, 103, .055);
}

.iso-signature .iso-consulting-steps li.is-active b {
  border-color: rgba(35, 139, 103, .3);
  background: #e5f4ed;
  color: #176247;
  box-shadow: 0 0 0 6px rgba(35, 139, 103, .05);
}

.iso-signature .iso-consulting-steps li::before {
  background: #4bb68c;
}

/* Make the requested number-in-circle relationship explicit. The badge is
 * the em itself, centered independently from the label and above the SVG. */
.iso-signature .iso-consulting-node {
  z-index: 5;
  gap: 11px;
}

.iso-signature .iso-consulting-node em {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  border: 1px solid rgba(37, 125, 91, .24);
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff 0%, #e7f4ed 100%);
  color: #1a6149;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 10px 22px -16px rgba(1, 53, 35, .38);
}

.iso-signature .iso-consulting-node.is-active em {
  border-color: rgba(37, 125, 91, .42);
  background: linear-gradient(145deg, #f8fffb 0%, #d3efdf 100%);
  color: #0d553d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 0 0 7px rgba(112, 198, 157, .16),
    0 10px 22px -16px rgba(1, 53, 35, .38);
}

.iso-signature .iso-consulting-node i {
  color: #1c5944;
  font-size: 13px;
  font-weight: 600;
}

/* Remove the colored field from the quality-assessment chapter while keeping
 * the cycle itself as a pale editorial diagram. */
.iso-signature .iso-stage-quality-web {
  padding: clamp(96px, 9vw, 146px) 0;
  background: #f7faf8;
}

.iso-signature .iso-stage-quality-web::before {
  inset: 0 calc(50% - 50vw);
  background:
    radial-gradient(760px 520px at 82% 8%, rgba(185, 231, 211, .22), transparent 66%),
    linear-gradient(180deg, #f7faf8 0%, #f3f7f5 100%);
}

.iso-signature .iso-quality-cycle-card {
  border-color: rgba(27, 94, 69, .08);
  background:
    radial-gradient(circle at 88% 9%, rgba(151, 224, 194, .24), transparent 28%),
    linear-gradient(145deg, #f0f8f4 0%, #e5f3ec 100%);
  color: #163d30;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    0 32px 74px -54px rgba(17, 81, 57, .28);
}

.iso-signature .iso-quality-cycle-card::before {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .62), transparent 27%),
    radial-gradient(circle at 48% 62%, rgba(76, 172, 128, .06), transparent 42%);
}

.iso-signature .iso-quality-cycle-card-head span,
.iso-signature .iso-quality-cycle-card-head strong,
.iso-signature .iso-quality-cycle-stage strong {
  color: #1b4d3b;
}

.iso-signature .iso-quality-cycle-card-head em {
  border-color: rgba(35, 139, 103, .15);
  background: rgba(255, 255, 255, .55);
  color: #36795e;
}

.iso-signature .iso-quality-cycle {
  background:
    radial-gradient(circle at 31% 10%, rgba(255, 255, 255, .88), transparent 28%),
    conic-gradient(
      from 18deg,
      #9fdcc0 0deg 112deg,
      rgba(31, 111, 78, .1) 112deg 120deg,
      #76c9a5 120deg 232deg,
      rgba(31, 111, 78, .1) 232deg 240deg,
      #52af88 240deg 352deg,
      rgba(31, 111, 78, .1) 352deg 360deg
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .7),
    0 30px 72px -42px rgba(29, 123, 85, .32);
}

.iso-signature .iso-quality-cycle::before {
  border-color: rgba(33, 119, 83, .12);
  background:
    radial-gradient(circle at 38% 23%, rgba(255, 255, 255, .9), transparent 34%),
    linear-gradient(155deg, #ffffff 0%, #e9f6ef 62%, #d9eee3 100%);
  box-shadow:
    0 0 0 8px rgba(94, 176, 137, .1),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 26px 52px rgba(19, 80, 56, .12);
}

.iso-signature .iso-quality-cycle-core small {
  color: #659985;
}

.iso-signature .iso-quality-cycle-core b,
.iso-signature .iso-quality-cycle-core span,
.iso-signature .iso-quality-cycle-stage em {
  color: #176047;
}

.iso-signature .iso-quality-cycle-stage small,
.iso-signature .iso-quality-cycle-note {
  color: #6e897c;
}

.iso-signature .iso-quality-cycle-note {
  border-top-color: rgba(23, 96, 71, .12);
}

/* Neutralize the large blue-green performance field and keep its information
 * cards on the same white sheet as the reference solution-detail layout. */
.iso-signature .iso-stage-performance-web {
  --performance-blue: #2b8e6d;
  --performance-blue-deep: #1b664e;
  --performance-ink: #173f31;
  --performance-copy: #6b7b74;
  --performance-muted: #8a9891;
  padding: clamp(96px, 9vw, 146px) 0;
  color: #173f31;
}

.iso-signature .iso-stage-performance-web::before {
  inset: 0 calc(50% - 50vw);
  background:
    radial-gradient(760px 540px at 86% 78%, rgba(185, 231, 211, .2), transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #f5f9f7 100%);
}

.iso-signature .iso-performance-web {
  border-color: rgba(22, 82, 59, .08);
  background: linear-gradient(138deg, #ffffff 0%, #fbfdfc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 44px 100px -64px rgba(19, 76, 53, .28);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.iso-signature .iso-performance-web::before {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .18) 40%, transparent 60%),
    radial-gradient(circle at 91% 92%, rgba(169, 218, 196, .14), transparent 30%);
}

.iso-signature .iso-performance-core::before {
  border-color: rgba(35, 139, 103, .18);
  background:
    radial-gradient(circle at 32% 19%, rgba(255, 255, 255, .92), transparent 20%),
    radial-gradient(circle at 70% 76%, rgba(32, 116, 82, .12), transparent 38%),
    linear-gradient(145deg, #f2faf5 0%, #d8efe1 52%, #b6dfc8 100%);
  box-shadow:
    inset 8px 12px 22px rgba(255, 255, 255, .72),
    inset -12px -16px 26px rgba(11, 86, 57, .1),
    0 0 0 15px rgba(82, 174, 132, .1),
    0 32px 58px -30px rgba(27, 104, 70, .34);
}

.iso-signature .iso-performance-core::after {
  border-color: rgba(45, 145, 105, .18);
  border-right-color: rgba(67, 171, 129, .36);
  border-bottom-color: rgba(67, 171, 129, .08);
  box-shadow: 0 0 42px rgba(70, 165, 124, .08);
}

.iso-signature .iso-performance-core > div {
  color: #18533d;
  text-shadow: none;
}

.iso-signature .iso-performance-core em,
.iso-signature .iso-performance-core strong,
.iso-signature .iso-performance-core span {
  color: #18533d;
}

/* The document-system orb is a focal point, not a saturated color block. */
.iso-signature .iso-reference-system .iso-system-core {
  filter: drop-shadow(0 26px 34px rgba(14, 103, 70, .1));
}

.iso-signature .iso-reference-system .iso-system-core::before {
  border-color: rgba(35, 126, 91, .16);
  background:
    radial-gradient(circle at 31% 22%, rgba(255, 255, 255, .94) 0 7%, rgba(226, 247, 235, .48) 16%, transparent 27%),
    radial-gradient(circle at 70% 78%, rgba(21, 99, 68, .14), transparent 44%),
    linear-gradient(145deg, #f3fbf6 0%, #d9f1e3 52%, #b9dfca 100%);
  box-shadow:
    inset 12px 16px 28px rgba(255, 255, 255, .76),
    inset -18px -22px 36px rgba(1, 66, 42, .08),
    0 0 0 18px rgba(86, 196, 150, .07),
    0 40px 70px -36px rgba(3, 70, 46, .26);
}

.iso-signature .iso-reference-system .iso-system-core::after {
  background: conic-gradient(
    from 28deg,
    transparent 0 10%,
    rgba(101, 190, 151, .34) 10% 24%,
    rgba(37, 157, 113, .09) 24% 55%,
    transparent 55% 72%,
    rgba(55, 190, 139, .22) 72% 94%,
    transparent 94% 100%
  );
  filter: drop-shadow(0 0 12px rgba(35, 172, 118, .08));
}

/* Documents: keep the six original card titles and descriptions, but remove
 * only the small status capsules requested in the annotations. */
.iso-signature .iso-system-card-meta {
  display: none;
}

.iso-signature .iso-reference-system::before {
  background:
    radial-gradient(820px 560px at 13% 84%, rgba(184, 231, 211, .16), transparent 70%),
    linear-gradient(180deg, #f6faf8 0%, #eef6f2 100%);
}

.iso-signature .iso-reference-system .iso-system-head {
  margin-bottom: clamp(46px, 5vw, 68px);
}

.iso-signature .iso-reference-system .iso-system-readiness {
  display: none;
}

@media (max-width: 760px) {
  .iso-signature .iso-stage-consulting-web,
  .iso-signature .iso-stage-quality-web,
  .iso-signature .iso-stage-performance-web {
    padding-top: 76px;
    padding-bottom: 92px;
  }

  .iso-signature .iso-consulting-node em {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    font-size: 12px;
  }
}

/* Restore the intended mobile reading order after the desktop two-column
 * composition above: copy first, diagram second. */
@media (max-width: 900px) {
  .iso-signature .iso-consulting-web {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
    box-sizing: border-box;
    padding-right: 24px;
    padding-left: 24px;
  }

  .iso-signature .iso-consulting-copy,
  .iso-signature .iso-consulting-figure {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .iso-signature .iso-consulting-web {
    gap: 44px;
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 400px) {
  .iso-signature .iso-consulting-node em {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }
}