.renova-vote {
  --vote-bg: #f2efe7;
  --vote-ink: #0a2633;
  --vote-muted: #52616a;
  --vote-accent: #f4c34d;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  color: var(--vote-ink);
  background: var(--vote-bg);
  font-family: "Manrope", "Avenir Next", "Helvetica Neue", sans-serif;
}

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

.renova-vote::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -260px;
  left: -250px;
  width: 590px;
  height: 590px;
  border: 1px solid color-mix(in srgb, var(--vote-ink) 10%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 84px color-mix(in srgb, var(--vote-ink) 2.2%, transparent);
}

.renova-vote__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 22px;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 120px 56px;
}

.renova-vote__header { align-self: end; padding: 18px 54px 46px 0; }
.renova-vote__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; color: #866a18; font-size: 12px; font-weight: 850; letter-spacing: .2em; }
.renova-vote__eyebrow span { width: 30px; height: 2px; background: var(--vote-accent); }
.renova-vote__heading { max-width: 850px; margin: 0; color: var(--vote-ink); font-family: "DM Sans", "Avenir Next", sans-serif; font-size: clamp(54px, 5.5vw, 98px); font-weight: 770; line-height: .93; letter-spacing: -.068em; text-wrap: balance; }
.renova-vote__description { max-width: 700px; margin: 36px 0 0; padding-top: 25px; border-top: 3px solid var(--vote-accent); color: var(--vote-muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.62; }

.renova-vote__highlight { position: relative; min-height: 480px; padding: 46px; overflow: hidden; border-radius: 28px; color: #fff; background: var(--vote-ink); box-shadow: 0 30px 80px rgba(10, 38, 51, .18); }
.renova-vote__highlight::before { content: ""; position: absolute; right: -120px; bottom: -120px; width: 320px; height: 320px; border: 1px solid rgba(244, 195, 77, .5); border-radius: 50%; box-shadow: 0 0 0 50px rgba(244, 195, 77, .06); }
.renova-vote__highlight::after { content: "21"; position: absolute; right: 28px; bottom: -30px; color: rgba(244, 195, 77, .1); font: 800 15rem/.8 "DM Sans", sans-serif; letter-spacing: -.1em; }
.renova-vote__highlight > * { position: relative; z-index: 1; }
.renova-vote__highlight span { display: block; color: var(--vote-accent); font-size: 11px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.renova-vote__highlight strong { display: block; max-width: 500px; margin-top: 90px; font-family: "DM Sans", "Avenir Next", sans-serif; font-size: clamp(48px, 4.6vw, 80px); font-weight: 760; line-height: .9; letter-spacing: -.065em; }
.renova-vote__highlight p { margin: 32px 0 0; color: rgba(255, 255, 255, .72); font-size: 17px; font-weight: 650; }

.renova-vote__steps { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(240px, .34fr) minmax(0, 1fr); gap: 42px 70px; margin-top: 38px; padding: 44px; border: 1px solid color-mix(in srgb, var(--vote-ink) 14%, transparent); border-radius: 28px; background: color-mix(in srgb, #fff 72%, transparent); }
.renova-vote__steps-header h3 { margin: 0; color: var(--vote-ink); font-family: "DM Sans", "Avenir Next", sans-serif; font-size: clamp(38px, 3.5vw, 64px); font-weight: 760; line-height: .95; letter-spacing: -.06em; }
.renova-vote__steps-header span { display: block; margin-top: 18px; color: var(--vote-muted); font-size: 12px; font-weight: 750; line-height: 1.45; letter-spacing: .1em; text-transform: uppercase; }
.renova-vote__steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.renova-vote__steps li { min-height: 168px; padding: 24px; border: 1px solid color-mix(in srgb, var(--vote-ink) 16%, transparent); border-radius: 18px; background: #fff; }
.renova-vote__steps li > span { color: #866a18; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.renova-vote__steps li p { margin: 46px 0 0; color: var(--vote-ink); font-size: 16px; font-weight: 650; line-height: 1.5; }

@media (max-width: 1024px) {
  .renova-vote__inner { grid-template-columns: minmax(0, 1fr) minmax(330px, .85fr); padding: 96px 36px; }
  .renova-vote__header { padding-right: 32px; }
  .renova-vote__highlight { min-height: 440px; padding: 38px; }
  .renova-vote__steps { gap: 34px; padding: 36px; }
  .renova-vote__steps ol { grid-template-columns: 1fr; }
  .renova-vote__steps li { min-height: 120px; }
  .renova-vote__steps li p { margin-top: 28px; }
}

@media (max-width: 767px) {
  .renova-vote__inner { grid-template-columns: 1fr; padding: 82px 22px 88px; }
  .renova-vote__header { padding: 0 0 34px; }
  .renova-vote__eyebrow { font-size: 10px; }
  .renova-vote__heading { font-size: clamp(45px, 12vw, 69px); }
  .renova-vote__description { font-size: 16px; }
  .renova-vote__highlight { min-height: 410px; padding: 32px 26px; border-radius: 22px; }
  .renova-vote__highlight strong { margin-top: 78px; font-size: clamp(48px, 14vw, 74px); }
  .renova-vote__highlight::after { right: 12px; font-size: 176px; }
  .renova-vote__steps { grid-column: auto; grid-template-columns: 1fr; margin-top: 20px; padding: 28px 20px; border-radius: 22px; }
  .renova-vote__steps ol { grid-template-columns: 1fr; }
}

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