.performance-intro {
  margin-bottom: 28px;
}
.performance-quote {
  border-left: 4px solid currentColor;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.55;
  margin: 30px 0 38px;
  max-width: 940px;
  padding: 12px 0 12px 24px;
}
.performance-pillars,
.performance-outcome-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.performance-card,
.performance-outcome-grid article,
.calendar-strategy article {
  border: 1px solid rgba(18,59,93,.16);
  border-radius: 18px;
  padding: 24px;
  background-color:var(--ivory);
}
.performance-card h3,
.performance-outcome-grid strong,
.calendar-strategy strong {
  display: block;
  margin-bottom: 10px;
}
.performance-step {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 14px;
  opacity: .7;
}
.performance-detail-grid,
.performance-visual-grid {
  align-items: center;
  display: grid;
  gap: clamp(28px, 5vw, 70px);
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
}
.performance-callout {
  border-radius: 18px;
  padding: 26px;
}
.performance-callout strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.performance-screenshot {
  margin: 0;
}
.performance-screenshot img {
  border: 1px solid rgba(18,59,93,.14);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(18,59,93,.12);
  display: block;
  height: auto;
  margin-inline: auto;
  max-width: 100%;
}
.performance-screenshot figcaption {
  font-size: .9rem;
  line-height: 1.5;
  margin-top: 12px;
  opacity: .76;
}
.performance-visual-grid-reverse {
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1fr);
}
.calendar-strategy {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
}
.calendar-strategy span {
  display: block;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.hosting-journey {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 34px;
}
.hosting-journey > div {
  border-top: 3px solid currentColor;
  padding-top: 18px;
}
.hosting-journey span {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-flex;
  font-size: .8rem;
  height: 30px;
  justify-content: center;
  margin-bottom: 14px;
  width: 30px;
}
.hosting-journey strong {
  display: block;
  margin-bottom: 8px;
}
.performance-quote-bottom {
  margin-top: 42px;
}
.performance-outcomes .performance-outcome-grid {
  margin-top: 30px;
}
@media (max-width: 1000px) {
  .performance-pillars,
  .performance-outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hosting-journey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .performance-detail-grid,
  .performance-visual-grid,
  .performance-visual-grid-reverse {
    grid-template-columns: 1fr;
  }
  .calendar-strategy {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .performance-pillars,
  .performance-outcome-grid,
  .hosting-journey {
    grid-template-columns: 1fr;
  }
}

/* Contextual guest reviews */
.service-review{background-color:white;border:1px solid rgba(18,59,93,.14);border-radius:20px;box-shadow:0 16px 42px rgba(18,59,93,.08);padding:clamp(24px,4vw,38px)}
.service-review-inline{margin:0 0 44px;max-width:900px}
.service-review-stars{color:var(--coral);font-size:1rem;letter-spacing:3px;margin-bottom:22px}
.service-review blockquote{font-size:clamp(1.12rem,2vw,1.45rem);line-height:1.55;margin:0}
.service-review-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px}.service-review-meta span{opacity:.72}
.service-review-lesson{border-top:1px solid rgba(18,59,93,.12);margin-top:24px;padding-top:22px}.service-review-lesson strong{display:block;margin-bottom:8px}
.service-review-band{padding-top:0}.service-review-featured{align-items:start;display:grid;gap:clamp(28px,5vw,70px);grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
.service-review-featured .service-review-lesson{border-left:1px solid rgba(18,59,93,.12);border-top:0;margin-top:0;padding-left:clamp(24px,4vw,44px);padding-top:0}
.service-review-featured-reverse{grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr)}
.service-review-featured-reverse .service-review-lesson{border-left:0;border-right:1px solid rgba(18,59,93,.12);padding-left:0;padding-right:clamp(24px,4vw,44px)}
.service-review-proof{padding-top:0}.service-review-metrics{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px}
.service-review-metrics>div{border:1px solid rgba(18,59,93,.14);border-radius:16px;padding:22px}.service-review-metrics strong,.service-review-metrics span{display:block}.service-review-metrics strong{font-size:clamp(1.2rem,2.5vw,1.7rem);margin-bottom:6px}
@media(max-width:820px){.service-review-featured,.service-review-featured-reverse{grid-template-columns:1fr}.service-review-featured .service-review-lesson,.service-review-featured-reverse .service-review-lesson{border-left:0;border-right:0;border-top:1px solid rgba(18,59,93,.12);padding-left:0;padding-right:0;padding-top:22px}.service-review-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.service-review-metrics{grid-template-columns:1fr}}


/* Revenue optimization hero */
.revenue-performance-hero {
  background:
    linear-gradient(
      90deg,
      rgba(11, 35, 56, .94) 0%,
      rgba(11, 35, 56, .84) 38%,
      rgba(11, 35, 56, .48) 66%,
      rgba(11, 35, 56, .18) 100%
    ),
    url("../assets/images/services/revenue-optimization-hero.webp")
      center center / cover no-repeat;
  color: #fff;
  min-height: clamp(580px, 70vh, 760px);
  position: relative;
}

.revenue-performance-hero .container {
  align-items: center;
  display: flex;
  min-height: inherit;
}

.revenue-performance-hero-copy {
  max-width: 720px;
  /* padding: clamp(90px, 12vw, 1px) 0 clamp(70px, 10vw, 120px); */
  position: relative;
  z-index: 1;
}

.revenue-performance-hero .breadcrumbs,
.revenue-performance-hero .breadcrumbs a,
.revenue-performance-hero .eyebrow,
.revenue-performance-hero h1,
.revenue-performance-hero .lead {
  color: #fff;
}

.revenue-performance-hero .breadcrumbs {
  opacity: .86;
}

.revenue-performance-hero .eyebrow {
  opacity: .9;
}

.revenue-performance-hero h1 {
  max-width: 680px;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .26);
}

.revenue-performance-hero .lead {
  max-width: 660px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .24);
}

.revenue-performance-hero .btn-light {
  background: rgba(255, 255, 255, .96);
  color: #123b5d;
}

@media (max-width: 900px) {
  .revenue-performance-hero {
    background:
      linear-gradient(
        90deg,
        rgba(11, 35, 56, .94) 0%,
        rgba(11, 35, 56, .79) 62%,
        rgba(11, 35, 56, .46) 100%
      ),
      url("../assets/images/services/revenue-optimization-hero.webp")
        62% center / cover no-repeat;
  }

  .revenue-performance-hero-copy {
    max-width: 650px;
  }
}

@media (max-width: 620px) {
  .revenue-performance-hero {
    background:
      linear-gradient(
        180deg,
        rgba(11, 35, 56, .9) 0%,
        rgba(11, 35, 56, .82) 58%,
        rgba(11, 35, 56, .68) 100%
      ),
      url("../assets/images/services/revenue-optimization-hero.webp")
        60% center / cover no-repeat;
    min-height: 650px;
  }

  .revenue-performance-hero-copy {
    padding-bottom: 72px;
    padding-top: 1px;
  }

  .revenue-performance-hero .hero-actions {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    max-width: 330px;
  }
}

.services-header.performance-intro {
  display: block;

  .lead {
    max-width: 1000px;
  }

  .prop-host {
    margin-top: 16px;
  }
}

h3 {
  margin-top: 16px;
}

.lead.bottom-margin {
  margin-bottom: 32px;
}