.agency-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 650px;
  padding: 82px 24px 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(191, 150, 72, 0.12), transparent 32%),
    linear-gradient(180deg, #030304 0%, #09090a 100%);
  text-align: center;
}

.agency-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-bottom: 18px;
  padding: 0 22px;
  border: 1px solid rgba(207, 178, 126, 0.32);
  border-radius: 999px;
  color: rgba(255, 250, 240, 0.78);
  font-size: 14px;
}

.agency-title {
  max-width: 780px;
  color: #fffaf0;
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.04;
}

.agency-title strong {
  font-weight: 800;
}

.agency-title span {
  display: inline-block;
  margin-top: 6px;
  padding: 0 12px 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #9c865a, #cfb27e);
  color: #fffaf0;
  font-weight: 800;
}

.agency-title::after {
  color: var(--gold-2);
  content: ".";
}

.agency-subtitle {
  max-width: 880px;
  margin: 30px auto 58px;
  color: rgba(255, 250, 240, 0.86);
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.35;
}

.agency-subtitle strong {
  font-weight: 800;
}

.agency-steps {
  display: grid;
  grid-template-columns: 1fr 70px 1fr 70px 1fr;
  align-items: center;
  width: min(100%, 980px);
  margin: 0 auto;
}

.agency-steps article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.agency-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(207, 178, 126, 0.42);
  border-radius: 50%;
  background:
    linear-gradient(#030304, #030304) padding-box,
    conic-gradient(from 45deg, transparent 0 22%, #cfb27e 22% 42%, transparent 42% 72%, #9c865a 72% 100%) border-box;
  color: #fffaf0;
  font-size: 34px;
  font-weight: 800;
}

.agency-steps p {
  max-width: 230px;
  color: rgba(255, 250, 240, 0.9);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.12;
}

.agency-arrow {
  color: rgba(255, 255, 255, 0.26);
  font-size: 58px;
  font-weight: 200;
}

.agency-chevron {
  display: grid;
  gap: 5px;
  margin-top: 72px;
}

.agency-chevron span {
  display: block;
  width: 54px;
  height: 18px;
  border-right: 2px solid rgba(255, 255, 255, 0.18);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  transform: rotate(45deg);
}

html[data-theme="light"] .agency-section {
  background:
    radial-gradient(circle at 50% 42%, rgba(191, 150, 72, 0.12), transparent 32%),
    linear-gradient(180deg, #fbf7ef 0%, #f4ecde 100%);
}

html[data-theme="light"] .agency-title,
html[data-theme="light"] .agency-step-number,
html[data-theme="light"] .agency-steps p {
  color: #1b1b1d;
}

html[data-theme="light"] .agency-kicker,
html[data-theme="light"] .agency-subtitle {
  color: rgba(27, 27, 29, 0.74);
}

html[data-theme="light"] .agency-step-number {
  background:
    linear-gradient(#fbf7ef, #fbf7ef) padding-box,
    conic-gradient(from 45deg, transparent 0 22%, #cfb27e 22% 42%, transparent 42% 72%, #9c865a 72% 100%) border-box;
}

@media (max-width: 900px) {
  .agency-section {
    min-height: 860px;
    padding: 72px 18px;
  }

  .agency-title {
    font-size: clamp(34px, 11vw, 48px);
  }

  .agency-subtitle {
    margin-bottom: 44px;
    font-size: 17px;
  }

  .agency-steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .agency-arrow {
    display: none;
  }

  .agency-chevron {
    margin-top: 44px;
  }
}