/* Reaction-water test results: an evidence ledger, not a pair of cards. */
.quality {
  color: #102b39;
  background: #f0f7f7;
  padding: clamp(88px, 8vw, 136px) 5.5% clamp(82px, 7vw, 122px);
}
.quality-inner { max-width: 1540px; }
.quality-head {
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  align-items: start;
  gap: clamp(38px, 5vw, 86px);
  margin-bottom: clamp(52px, 6vw, 88px);
}
.quality h2 {
  max-width: 980px;
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 650;
  line-height: 1.16;
}
.quality-intro {
  max-width: 540px;
  margin: 6px 0 0;
  padding: 2px 0 2px 23px;
  border-left: 3px solid #d5a447;
  color: #385663;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.65;
}
.quality-data {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  min-height: 0;
  border-top: 2px solid #123c50;
  border-bottom: 1px solid #a4bcc2;
}
.quality-count {
  min-height: 0;
  justify-content: flex-start;
  padding: clamp(25px, 3vw, 42px) 6% clamp(28px, 3vw, 44px) 0;
  overflow: visible;
  border-right: 1px solid #a4bcc2;
}
.quality-count::after { display: none; }
.quality-count-label,
.quality-result-label {
  color: #3e606c;
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 600;
  line-height: 1.5;
}
.quality-count strong {
  display: flex;
  align-items: baseline;
  gap: .06em;
  width: fit-content;
  margin-top: clamp(33px, 4vw, 62px);
  padding-bottom: 7px;
  border-bottom: 6px solid #d5a447;
  color: #102b39;
  font-size: clamp(124px, 14vw, 208px);
  font-weight: 700;
  letter-spacing: -.095em;
  line-height: .92;
}
.quality-count strong span {
  margin: 0;
  color: #102b39;
  font-size: .23em;
  font-weight: 650;
  letter-spacing: -.04em;
}
html[lang="en"] .quality-count strong span { margin-left: .08em; }
.quality-result {
  justify-content: flex-start;
  padding: clamp(25px, 3vw, 42px) 0 clamp(28px, 3vw, 44px) clamp(35px, 5.5vw, 90px);
  background: transparent;
  color: #102b39;
}
.quality-result-label { margin: 0; }
.quality-result h3 {
  margin: clamp(22px, 3vw, 48px) 0 clamp(29px, 3vw, 48px);
  color: #0d5e70;
  font-size: clamp(51px, 5.4vw, 84px);
  font-weight: 700;
  line-height: 1.1;
}
.quality-breakdown {
  gap: clamp(16px, 3vw, 45px);
  padding-top: 24px;
  border-color: #a4bcc2;
}
.quality-breakdown div + div {
  padding-left: clamp(18px, 3vw, 44px);
  border-left: 1px solid #a4bcc2;
}
.quality-breakdown strong {
  margin-bottom: 8px;
  color: #102b39;
  font-size: clamp(37px, 3.4vw, 55px);
  font-weight: 700;
}
.quality-breakdown div + div strong { color: #0d5e70; }
.quality-breakdown span {
  color: #4a6570;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.5;
}
.quality-source {
  margin-top: 21px;
  color: #5c7179;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .quality-head { grid-template-columns: 1fr; gap: 24px; }
  .quality-intro { max-width: 740px; }
  .quality-data { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .quality-count strong { font-size: clamp(94px, 12vw, 150px); }
}

@media (max-width: 600px) {
  .quality { padding: 84px 7% 82px; }
  .quality-head { margin: 0 0 42px; gap: 24px; }
  .quality h2 { font-size: clamp(37px, 9.7vw, 52px); }
  .quality-intro {
    margin: 0;
    padding: 17px 0 0;
    border-left: 0;
    border-top: 3px solid #d5a447;
    font-size: clamp(16px, 4.2vw, 18px);
  }
  .quality-data { grid-template-columns: 1fr; }
  .quality-count {
    min-height: 0;
    margin: 0;
    padding: 25px 0 31px;
    border-right: 0;
    border-bottom: 1px solid #a4bcc2;
  }
  .quality-count strong {
    margin-top: 23px;
    padding-bottom: 5px;
    border-bottom-width: 5px;
    font-size: clamp(112px, 32vw, 154px);
  }
  .quality-result { padding: 27px 0 34px; }
  .quality-result h3 {
    margin: 20px 0 30px;
    font-size: clamp(48px, 12vw, 66px);
  }
  .quality-breakdown { gap: 12px; padding-top: 22px; }
  .quality-breakdown div + div { padding-left: 16px; }
  .quality-breakdown strong { font-size: clamp(27px, 7.9vw, 39px); }
  .quality-breakdown span { font-size: clamp(13px, 3.7vw, 16px); }
  .quality-source { margin: 20px 0 0; font-size: 12px; }
}