@charset "UTF-8";
/* ---------- COLORS ---------- */
/* ---------- FONT FAMILIES ---------- */
/* ---------- TYPOGRAPHY ---------- */
/* ---------- CSS CUSTOM PROPERTIES (для runtime-доступа из JS/замеров) ---------- */
:root {
  --c-white: #FFFFFF;
  --c-black: #000000;
  --c-ivory: #F7F1DF;
  --c-light-gray: #FAFAF9;
  --c-gold: #B29261;
  --c-orange: #E60000;
  --ff-display: "Chiswick-stand", "Playfair Display", "Times New Roman", serif;
  --ff-sans: "CaslonDoric-stand", "Figtree", system-ui, -apple-system, sans-serif;
  --ff-script: "Shelley-stand", "Imperial Script", "Great Vibes", cursive;
}

.numbers {
  width: 1440px;
  height: 779px;
  background: #FFFFFF;
  position: relative;
  box-sizing: border-box;
}
.numbers__intro {
  /* Figma text at (392, 160), 656 × 87. */
  position: absolute;
  top: 160px;
  left: 392px;
  width: 656px;
  font-family: "Chiswick-stand", "Playfair Display", "Times New Roman", serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
  letter-spacing: -0.01em;
  color: #000000;
  text-align: center;
  margin: 0;
}
.numbers__row {
  /* Content container 1313 × 476 at (63.5, 303). */
  position: absolute;
  top: 303px;
  left: 63.5px;
  width: 1313px;
  height: 476px;
  display: flex;
  gap: 0;
}
.numbers__box {
  position: absolute;
  top: 40px;
  height: 436px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma 512:20493 / 512:20503 — raw image fills через REST API (imageRef 868976ac / be093e39).
     Overlay-card с «40+»/«1M» рендерится HTML-ом поверх. */
}
.numbers__box--first {
  left: 0;
  width: 327px;
  background: url("../../assets/img/sections/numbers-box-1.png") center/cover no-repeat, linear-gradient(135deg, #2a2018 0%, #4a3828 60%, #2c2018 100%);
}
.numbers__box--second {
  left: 438px;
  width: 436px;
  background: #F7F1DF;
  border-radius: 50%;
}
.numbers__box--third {
  left: 985px;
  width: 328px;
  background: url("../../assets/img/sections/numbers-box-3.png") center/cover no-repeat, linear-gradient(135deg, #6a8a60 0%, #4a6440 60%, #3a5230 100%);
}
.numbers__card {
  /* White card with text, shown on "1st" and "3rd" boxes. Figma: centered text block. */
  padding: 48px 28px;
  background: #FFFFFF;
  text-align: center;
  color: #000000;
}
.numbers__box--third .numbers__card {
  background: transparent;
  color: #FFFFFF;
}
.numbers__big {
  /* Display/H2 — 64/1.0/-2. */
  font-family: "Chiswick-stand", "Playfair Display", "Times New Roman", serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -2px;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 400;
}
.numbers__label {
  /* Sans/Description 2 — 12/1.4/10pt. */
  font-family: "CaslonDoric-stand", "Figtree", system-ui, -apple-system, sans-serif;
  font-weight: 450;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.83em;
  margin: 16px 0 0;
  text-transform: uppercase;
  line-height: 1.6;
}
.numbers__center-text {
  font-family: "Chiswick-stand", "Playfair Display", "Times New Roman", serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -2px;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-align: center;
  color: #000000;
  margin: 0;
}
.numbers__center-text small {
  display: block;
  font-family: "CaslonDoric-stand", "Figtree", system-ui, -apple-system, sans-serif;
  font-weight: 450;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.83em;
  line-height: 1.6;
  font-weight: 450;
  margin-top: 24px;
}
.numbers {
  /* ───── Responsive overrides ───── */
}
@media (max-width: 1023px) {
  .numbers {
    width: 100%;
    height: auto;
    padding: 80px 32px 80px;
  }
  .numbers__intro {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  .numbers__row {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }
  .numbers__box {
    position: relative;
    top: 0;
    height: 360px;
  }
  .numbers__box--first, .numbers__box--second, .numbers__box--third {
    left: 0;
    width: 100%;
  }
  .numbers__box--second {
    border-radius: 0;
  }
  .numbers__big {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
  .numbers {
    padding: 60px 20px 60px;
  }
  .numbers__intro {
    font-size: 18px;
  }
  .numbers__row {
    margin-top: 40px;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .numbers__box {
    height: 260px;
  }
  .numbers__card {
    padding: 36px 20px;
  }
  .numbers__big {
    font-size: 40px;
  }
  .numbers__label {
    margin-top: 12px;
    font-size: 11px;
  }
  .numbers__center-text {
    font-size: 40px;
  }
}