.renova-commitments {
  --commitments-bg: #071e2a;
  --commitments-ink: #fff;
  --commitments-muted: #b8c3c8;
  --commitments-accent: #f4c34d;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  color: var(--commitments-ink);
  background: var(--commitments-bg);
  font-family: "Manrope", "Avenir Next", "Helvetica Neue", sans-serif;
}

.renova-commitments *, .renova-commitments *::before, .renova-commitments *::after { box-sizing: border-box; }

.renova-commitments::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .16;
  background-image: radial-gradient(circle, var(--commitments-accent) 0 1px, transparent 1.25px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(120deg, transparent 10%, #000 76%, transparent 100%);
  mask-image: linear-gradient(120deg, transparent 10%, #000 76%, transparent 100%);
}

.renova-commitments::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -220px;
  bottom: -300px;
  width: 640px;
  height: 640px;
  border: 1px solid rgba(244, 195, 77, .24);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(244, 195, 77, .035);
}

.renova-commitments__inner { width: min(100%, 1440px); margin: 0 auto; padding: 120px 56px; }
.renova-commitments__header { display: grid; grid-template-columns: minmax(220px, .35fr) minmax(0, 1fr); gap: 50px 80px; align-items: start; margin-bottom: 68px; }

.renova-commitments__eyebrow { display: flex; align-items: center; gap: 12px; padding-top: 12px; color: var(--commitments-accent); font-size: 12px; font-weight: 850; letter-spacing: .2em; }
.renova-commitments__eyebrow span { width: 30px; height: 2px; background: currentColor; }
.renova-commitments__heading { max-width: 920px; margin: 0; color: var(--commitments-ink); font-family: "DM Sans", "Avenir Next", sans-serif; font-size: clamp(53px, 5.4vw, 96px); font-weight: 760; line-height: .94; letter-spacing: -.065em; text-wrap: balance; }

.renova-commitments__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.renova-commitments__pillar { position: relative; min-height: 300px; padding: 34px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 24px; background: rgba(255, 255, 255, .045); transition: border-color .3s ease, background-color .3s ease, transform .3s ease; }
.renova-commitments__pillar::after { content: ""; position: absolute; right: -74px; bottom: -86px; width: 190px; height: 190px; border: 1px solid rgba(244, 195, 77, .2); border-radius: 50%; transition: transform .4s ease; }
.renova-commitments__pillar:hover { border-color: rgba(244, 195, 77, .62); background: rgba(255, 255, 255, .075); transform: translateY(-4px); }
.renova-commitments__pillar:hover::after { transform: scale(1.18); }
.renova-commitments__number { display: block; color: var(--commitments-accent); font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.renova-commitments__pillar h3 { max-width: 520px; margin: 62px 0 0; color: var(--commitments-ink); font-family: "DM Sans", "Avenir Next", sans-serif; font-size: clamp(32px, 3vw, 51px); font-weight: 720; line-height: .98; letter-spacing: -.055em; }
.renova-commitments__pillar p { position: relative; z-index: 1; max-width: 540px; margin: 22px 0 0; color: var(--commitments-muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }

@media (max-width: 1024px) {
  .renova-commitments__inner { padding: 96px 36px; }
  .renova-commitments__header { grid-template-columns: 1fr; gap: 28px; }
  .renova-commitments__eyebrow { padding-top: 0; }
  .renova-commitments__pillar { min-height: 280px; padding: 28px; }
}

@media (max-width: 767px) {
  .renova-commitments__inner { padding: 82px 22px 88px; }
  .renova-commitments__header { margin-bottom: 44px; }
  .renova-commitments__eyebrow { font-size: 10px; }
  .renova-commitments__heading { font-size: clamp(45px, 12vw, 68px); }
  .renova-commitments__grid { grid-template-columns: 1fr; }
  .renova-commitments__pillar { min-height: 250px; padding: 26px; border-radius: 20px; }
  .renova-commitments__pillar h3 { margin-top: 44px; font-size: clamp(32px, 9vw, 48px); }
  .renova-commitments__pillar p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .renova-commitments *, .renova-commitments *::before, .renova-commitments *::after { transition-duration: .01ms !important; }
}