.fluid-value {
  padding-block: 112px 80px;
}

.fv-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr);
  align-items: end;
  gap: 8%;
  margin-bottom: 46px;
}

.fv-heading h2 {
  max-width: 1000px;
  font-size: clamp(44px, 5.1vw, 80px);
  font-weight: 500;
  line-height: 1.01;
  letter-spacing: -.045em;
}

.fv-heading h2 span {
  color: #81847a;
}

.fv-intro {
  max-width: 405px;
  padding-bottom: 4px;
}

.fv-intro p {
  margin-bottom: 24px;
  color: #63685f;
  font-size: 17px;
  line-height: 1.48;
}

.fv-intro .button {
  font-size: 14px;
}

.fv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.fv-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 316px;
  padding: 30px 28px 27px;
  border-radius: 20px;
  background: #f8f7f5;
}

.fv-metric:nth-child(1) {
  background: radial-gradient(ellipse at 95% 5%, #f4dcd4, transparent 67%), #f8f7f5;
}

.fv-metric:nth-child(2) {
  background: radial-gradient(ellipse at 95% 5%, #f8ecb8, transparent 67%), #f8f7f5;
}

.fv-metric:nth-child(3) {
  background: radial-gradient(ellipse at 95% 5%, #dcead3, transparent 67%), #f8f7f5;
}

.fv-metric-label {
  color: #515a50;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.3;
  text-transform: uppercase;
}

.fv-metric-value {
  margin-top: 25px;
  font-family: var(--font-headline);
  font-size: clamp(44px, 4.7vw, 74px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: 1;
  white-space: nowrap;
}

.fv-metric p {
  max-width: 290px;
  margin-top: auto;
  padding-top: 30px;
  color: #62685e;
  font-size: 13px;
  line-height: 1.5;
}

.fv-metric-total {
  background: #124b31;
  color: #fff;
}

.fv-metric-total::before {
  position: absolute;
  top: -90px;
  right: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, #e7d96830, transparent 68%);
  content: '';
  pointer-events: none;
}

.fv-metric-total .fv-metric-label,
.fv-metric-total p {
  color: #dce7da;
}

.fv-source {
  max-width: 990px;
  margin-top: 22px;
  color: #737a70;
  font-size: 12px;
  line-height: 1.55;
}

.fv-source a {
  color: #193e2e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fluid-value a:focus-visible {
  outline: 2px solid #151611;
  outline-offset: 5px;
}

@media (min-width: 1700px) {
  .fv-metric { min-height: 344px; padding: 34px; }
  .fv-metric-value { font-size: 80px; }
  .fv-metric p { font-size: 14px; }
}

@media (max-width: 1150px) {
  .fv-heading { gap: 5%; }
  .fv-metric { min-height: 304px; padding: 25px 22px; }
  .fv-metric-value { font-size: clamp(40px, 5vw, 57px); }
  .fv-metric p { font-size: 12px; }
}

@media (max-width: 900px) {
  .fluid-value { padding-block: 86px 55px; }
  .fv-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; }
  .fv-heading h2 { font-size: clamp(45px, 7vw, 70px); }
  .fv-intro { max-width: 580px; }
  .fv-intro p { font-size: 15px; margin-bottom: 20px; }
  .fv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-metric { min-height: 280px; padding: 28px; }
  .fv-metric-value { font-size: clamp(54px, 8vw, 76px); }
  .fv-metric p { max-width: 340px; font-size: 13px; }
}

@media (max-width: 540px) {
  .fluid-value { padding-block: 72px 44px; }
  .fv-heading h2 { font-size: clamp(37px, 10vw, 52px); }
  .fv-heading h2 br { display: none; }
  .fv-heading h2 span { display: block; }
  .fv-intro p { font-size: 14px; }
  .fv-grid { grid-template-columns: 1fr; gap: 9px; }
  .fv-metric { min-height: 224px; padding: 24px; border-radius: 16px; }
  .fv-metric-value { margin-top: 20px; font-size: clamp(56px, 15vw, 72px); }
  .fv-metric p { max-width: 390px; padding-top: 23px; font-size: 13px; }
  .fv-source { margin-top: 19px; font-size: 11px; }
}