/* =========================================================================
   HOMEPAGE  (revamp-hero, proof-*, rv-*)
   assets/css/es-home.css

   The single home of the homepage's own rules. Loaded only by
   home-new-template.php (see inc/enqueue.php).

   This began as the <style id="new-home-styles"> block the template printed
   at the top of its body. On the owner's instruction (10 Sep 2026) it moved
   here as a lift: same selectors, same order, same rendered values. Only the
   way values are written changed:

     - raw colours became design tokens, or a translucent mix of one through
       color-mix(), which paints the identical rgba
     - spacing, type sizes, weights and radii that equal a token now read it
     - colours with no token yet got one in design-tokens.css (the
       dossier's live dot and its shadow)

   Later the same day the hero buttons moved onto the house `.es-btn` pair
   and the nine-card service wall replaced the six-card one.

   Sizes with no equal token (10px, 11px, 11.5px, 18px, 22px ...) are left as
   written rather than rounded to a neighbour, because rounding would move
   the layout.

   The `.reveal-up` entrance that sat at the top of the block is gone: it was
   a byte-for-byte restatement of the rule and its reduced-motion guard in
   utilities.css, which already loads on every page.

   Loads after utilities.css and after owl.theme.default.min.css, which is
   where the inline block used to sit in the cascade. The carousel nav rules
   below tie with owl's own on specificity and win only by coming later.

   Values come only from design-tokens.css. Edit here and nowhere else.
   ========================================================================= */

/* ============================================================
   SHARED EDITORIAL SYSTEM
   .rv-section / .rv-section-head / .rv-eyebrow / .rv-lede /
   .rv-hl / .rv-bg-* live globally in assets/css/utilities.css
   (token-driven, fluid). Only page-specific styles are here.
   ============================================================ */

/* ============================================================
   SECTION 1: HERO (Centered + Proof Strip)
   ============================================================ */
.revamp-hero {
  position: relative;
  padding: var(--hero-pad-top) 0 0;
  /* Plain white ground, per the owner's ruling on every hero. The warm
     overhead glow and the --brand-50 to white wash this replaced are the
     same pair section-hero.php's `canvas` and `tint` variants drew, so the
     homepage and the twelve partial-driven heroes now share one surface. */
  background: var(--bg-surface);
  overflow: hidden;
}

.revamp-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.revamp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) 20px;
  border-radius: var(--radius-full);
  /* Repainted with the hero. A #ffffff chip on the warm wash this hero
     used to carry read as a raised pill; on the plain white ground it is
     white on white with only its border left. These are the values
     `.es-eyebrow` uses in utilities.css, so the homepage eyebrow now
     matches the chip every other section renders. */
  background: var(--accent-subtle);
  border: 1px solid var(--brand-100);
  color: var(--brand-700);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

/* ── The leading dot is gone ────────────────────────────────
   It was an 8px brand-500 circle with a 2s box-shadow ripple, the
   same device as the hero eyebrow separator in section-hero.php and
   removed for the same reason: a pulsing dot beside a label is the
   default of every AI-built landing page and it reads as one.

   Removed outright rather than swapped for a rule, because this one
   sat BEFORE the text with nothing on its left. A separator that
   separates a label from the edge of its own pill is decoration
   pretending to be punctuation. utilities.css already made the same
   call on the shared `.es-eyebrow` chip: the label stands alone.

   The span went with it, so the `gap: 10px` above now has no second
   flex item to apply between and the label sits on the pill's own
   padding. Nothing else to unwind. */

.revamp-hero h1 {
  font-size: var(--fs-hero);
  font-weight: var(--font-extrabold);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin-bottom: var(--space-5);
}

.revamp-hero .hero-highlight {
  font-style: italic;
  color: var(--brand-500);
  position: relative;
  white-space: nowrap;
  /* Extra right room so the slanted last letter isn't clipped by background-clip: text */
  padding-right: 0.12em;
  margin-right: -0.06em;
}

/* Progressive enhancement: gradient text + a single premium sheen sweep */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .revamp-hero .hero-highlight {
    background: linear-gradient(
      100deg,
      var(--brand-600) 0%,
      var(--brand-500) 38%,
      var(--brand-300) 50%,
      var(--brand-500) 62%,
      var(--brand-600) 100%
    );
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: heroHlSheen 2.2s ease-out 0.35s forwards;
  }
}

@keyframes heroHlSheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .revamp-hero .hero-highlight {
    animation: none;
    background-position: 0 0;
  }
}

.revamp-hero-sub {
  font-size: var(--fs-lede-lg);
  line-height: 1.65;
  color: var(--text-body);
  max-width: 680px;
  margin: 0 auto 36px;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .revamp-hero-sub {
    max-width: 340px;
    text-wrap: balance;
  }
}

.revamp-audience-paths {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* The two hero buttons are the house pair, `.es-btn--primary` and
   `.es-btn--secondary` from utilities.css, on the owner's instruction
   (10 Sep 2026). Their bespoke `.hero-cta` rules are gone; the only thing
   this page still adds is the phone-width stacking below. */

.revamp-proof-strip {
  margin-top: var(--gap-fluid-xl);
  padding: 28px 0 36px;
  border-top: 1px solid var(--border-subtle);
}

.proof-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.proof-item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.proof-item:hover {
  color: var(--text-body);
}

/* Heading ink, not brand orange. Owner's instruction, 9 Sep 2026: the "+"
   and "%" marks come off the accent site-wide, and this strip writes the
   figure and its mark as one element ("50+"), so the whole figure moves
   rather than the mark alone. Weight still carries the emphasis against
   the label beside it. */
.proof-item strong {
  font-family: var(--font-body);
  color: var(--text-heading);
  font-weight: var(--font-extrabold);
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* The star in "5 star" is one assets/svg/star.svg, not the text glyph. It
   sits on the baseline like the glyph did, at the glyph's width. */
.proof-item .es-stars {
  --stars-count: 1;
  --stars-size: 13px;
  vertical-align: baseline;
}

/* Dot dividers: a small, distinctive detail vs. plain rules */
.proof-divider {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-300);
}

@media (max-width: 767px) {
  .revamp-audience-paths {
    flex-direction: column;
  }
  .revamp-audience-paths .es-btn {
    width: 100%;
    max-width: 360px;
  }
  .proof-divider {
    display: none;
  }
}

/* ============================================================
   SECTION 2: MORE ABOUT US (narrative + live counters)
   ============================================================ */
.rv-about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.rv-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.rv-stat-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 30px var(--space-5) 26px;
  overflow: hidden;
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    border-color 0.3s;
}

.rv-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand-500);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s var(--ease-out);
}

.rv-stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand-200);
}

.rv-stat-card:hover::before {
  transform: scaleY(1);
}

.rv-stat-value {
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: var(--font-extrabold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-heading);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.rv-stat-label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.rv-stat-card--partner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  background: linear-gradient(135deg, var(--brand-50), var(--bg-surface) 70%);
}

.rv-stat-card--partner img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  align-self: flex-start;
  object-fit: contain;
}

/* Product Reviews card: faint 5-star watermark behind the value */
.rv-stat-card--reviews .rv-stat-value,
.rv-stat-card--reviews .rv-stat-label {
  position: relative;
  z-index: 1;
}

.rv-stat-card--reviews .rv-stars-bg {
  position: absolute;
  z-index: 0;
  right: -4px;
  bottom: 4px;
  font-size: 40px;
  line-height: 1;
  color: var(--brand-500);
  opacity: 0.1;
  pointer-events: none;
  white-space: nowrap;
}

/* The watermark's five stars are assets/svg/star.svg through .es-stars
   (utilities.css), sized to the 40px text glyphs they replaced. */
.rv-stat-card--reviews .rv-stars-bg .es-stars {
  --stars-size: 33px;
}

@media (max-width: 991px) {
  .rv-about-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media (max-width: 575px) {
  .rv-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .rv-stat-card {
    padding: 22px var(--space-4);
  }
}

/* ============================================================
   SECTION 3: OUR WORK (two-column case study carousel)
   ============================================================ */
.rv-work-slider-wrap {
  position: relative;
}

/* Equal-height slides + breathing room for card shadows */
.rv-work-slider .owl-stage {
  display: flex;
}
.rv-work-slider .owl-item {
  display: flex;
  float: none;
}
.rv-work-slider .owl-item .item {
  display: flex;
  width: 100%;
}
.rv-work-slider .owl-stage-outer {
  padding: 10px 4px 28px;
  margin: -10px -4px -28px;
}

.rv-work-card {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.rv-work-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-200);
}

.rv-work-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gray-100);
}

.rv-work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rv-work-card:hover .rv-work-media img {
  transform: scale(1.05);
}

.rv-work-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gray-900) 18%, transparent) 0%,
    transparent 32%
  );
  pointer-events: none;
}

/* A dark chip over a screenshot, so it is dark in both themes: fixed
   --gray-900 / --gray-0 rather than the surface tokens, which will flip. */
.rv-work-industry {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--gray-900) 72%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--gray-0) 18%, transparent);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}

.rv-work-body {
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.rv-work-logo {
  height: 30px;
  margin-bottom: 18px;
}
.rv-work-logo img {
  max-height: 30px;
  max-width: 140px;
  object-fit: contain;
}

.rv-work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.rv-work-tags li {
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-body);
  background: var(--gray-100);
  border-radius: var(--radius-full);
  padding: 5px 12px;
}

.rv-work-excerpt {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: 22px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rv-kpi-row {
  display: flex;
  gap: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-default);
  margin-bottom: 22px;
}

.rv-kpi-value {
  font-size: 26px;
  font-weight: var(--font-extrabold);
  letter-spacing: -0.02em;
  color: var(--brand-500);
  line-height: 1.1;
}

.rv-kpi-label {
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.rv-work-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--font-bold);
  color: var(--text-heading);
  text-decoration: none;
  transition: color 0.2s;
}

.rv-work-link svg {
  transition: transform var(--duration-normal) var(--ease-out);
}
.rv-work-link:hover {
  color: var(--brand-500);
}
.rv-work-link:hover svg {
  transform: translateX(4px);
}

/* Carousel nav: side arrows, vertically centered */
.rv-work-slider .owl-nav {
  margin: 0;
}

.rv-work-slider .owl-nav button.owl-prev,
.rv-work-slider .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 50px;
  height: 50px;
  border-radius: 50% !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  transition:
    background var(--duration-normal) ease,
    border-color var(--duration-normal) ease,
    transform 0.2s ease;
}

.rv-work-slider .owl-nav button.owl-prev {
  left: -25px;
}
.rv-work-slider .owl-nav button.owl-next {
  right: -25px;
}

.rv-work-slider .owl-nav button svg {
  width: 15px;
  height: 15px;
  fill: var(--text-heading);
  transition: fill 0.2s;
}

.rv-work-slider .owl-nav button.owl-prev:hover,
.rv-work-slider .owl-nav button.owl-next:hover {
  background: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
  transform: translateY(-50%) scale(1.06);
}

.rv-work-slider .owl-nav button:hover svg {
  fill: var(--text-inverse);
}

.rv-work-slider .owl-dots {
  text-align: center;
  margin-top: 28px;
}

.rv-work-slider .owl-dots .owl-dot span {
  width: var(--space-2);
  height: var(--space-2);
  margin: 0 5px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: all 0.3s var(--ease-out);
}

.rv-work-slider .owl-dots .owl-dot.active span {
  width: 26px;
  background: var(--brand-500);
}

/* Keep arrows inside the viewport once the container edge gets close */
@media (max-width: 1350px) {
  .rv-work-slider .owl-nav button.owl-prev {
    left: 10px;
  }
  .rv-work-slider .owl-nav button.owl-next {
    right: 10px;
  }
}

@media (max-width: 767px) {
  .rv-work-body {
    padding: var(--space-5) 22px;
  }

  /* Trim the built-in stage padding so the carousel sits closer to the CTA */
  .rv-work-slider .owl-stage-outer {
    padding-bottom: var(--space-2);
    margin-bottom: -8px;
  }

  /* Move nav arrows to the bottom, centered, as tappable controls */
  .rv-work-slider .owl-nav {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
  }
  .rv-work-slider .owl-nav button.owl-prev,
  .rv-work-slider .owl-nav button.owl-next {
    position: static;
    transform: none;
    width: 46px;
    height: 46px;
    left: auto;
    right: auto;
  }
  .rv-work-slider .owl-nav button.owl-prev:hover,
  .rv-work-slider .owl-nav button.owl-next:hover {
    transform: scale(1.06);
  }

  .rv-work-slider .owl-dots {
    margin-top: 14px;
  }

  /* Pull the "Check All Case Studies" button up closer to the carousel */
  #our-work .u-mt-fluid-lg {
    margin-top: var(--space-5) !important;
  }
}

/* ============================================================
   SECTION 4: WHAT WE OFFER (numbered bento grid)
   ============================================================ */
.rv-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.rv-offer-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px 30px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.35s ease,
    border-color 0.3s ease;
}

.rv-offer-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-300);
}

.rv-offer-num {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rv-offer-num .rv-offer-arrow {
  color: var(--brand-500);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition:
    opacity var(--duration-normal),
    transform 0.3s var(--ease-out);
}

.rv-offer-card:hover .rv-offer-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.rv-offer-card h3 {
  font-size: var(--fs-card-title);
  font-weight: var(--font-extrabold);
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.rv-offer-card p {
  font-size: var(--fs-caption);
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
  flex-grow: 1;
}

/* Featured card: flagship service. A brand-orange panel in both themes, so
   its ink is --text-inverse rather than a surface token. */
.rv-offer-card--featured {
  background: linear-gradient(
    150deg,
    var(--brand-500) 0%,
    var(--brand-700) 100%
  );
  border-color: var(--brand-600);
}

.rv-offer-card--featured .rv-offer-num,
.rv-offer-card--featured p {
  color: color-mix(in srgb, var(--text-inverse) 85%, transparent);
}
.rv-offer-card--featured h3 {
  color: var(--text-inverse);
}
.rv-offer-card--featured .rv-offer-arrow {
  color: var(--text-inverse);
}

.rv-offer-card--featured::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--gray-0) 14%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.rv-offer-foot {
  margin-top: var(--gap-fluid-lg);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-body);
}

.rv-offer-foot a {
  color: var(--brand-500);
  font-weight: var(--font-bold);
  text-decoration: none;
  border-bottom: 2px solid var(--brand-200);
  transition:
    border-color 0.2s,
    color 0.2s;
}

.rv-offer-foot a:hover {
  color: var(--brand-600);
  border-color: var(--brand-500);
}

@media (max-width: 991px) {
  .rv-offer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 575px) {
  .rv-offer-grid {
    grid-template-columns: 1fr;
  }
  .rv-offer-card {
    min-height: 0;
  }
}

/* ============================================================
   SECTION 6: WHY US (editorial numbered rows)
   ============================================================ */
.rv-why-list {
  border-top: 1px solid var(--border-subtle);
}

.rv-why-row {
  display: grid;
  grid-template-columns: 90px 1fr 1.3fr;
  gap: var(--space-6);
  align-items: start;
  padding: 34px 10px;
  border-bottom: 1px solid var(--border-subtle);
  transition:
    background 0.3s ease,
    padding-left 0.3s var(--ease-out);
}

.rv-why-row:hover {
  background: var(--brand-50);
  padding-left: var(--space-5);
}

.rv-why-num {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  padding-top: 6px;
  transition: color 0.3s;
}

.rv-why-row:hover .rv-why-num {
  color: var(--brand-500);
}

.rv-why-row h3 {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: var(--font-extrabold);
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin: 0;
  line-height: 1.3;
}

.rv-why-row p {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0;
  padding-top: var(--space-1);
}

@media (max-width: 767px) {
  .rv-why-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 26px 6px;
  }
  .rv-why-num {
    padding-top: 0;
  }
}

/* ============================================================
   SECTION 8: PEOPLE FIRST
   ============================================================ */
/* Separate the People First section from the white-ending testimonials above */
#people-first {
  border-top: 1px solid var(--border-subtle);
}

.rv-people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.rv-people-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.rv-people-media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rv-people-media:hover img {
  transform: scale(1.03);
}

.rv-people-chip {
  position: absolute;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--bg-surface) 60%, transparent);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--font-bold);
  color: var(--text-heading);
  box-shadow: var(--shadow-md);
}

.rv-people-chip strong {
  color: var(--brand-500);
  margin-right: var(--space-1);
}
.rv-people-chip--1 {
  top: 20px;
  left: 20px;
}
.rv-people-chip--2 {
  bottom: 20px;
  right: 20px;
}

.rv-people-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 36px;
  padding: 0;
  list-style: none;
}

.rv-people-values li {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
}

@media (max-width: 991px) {
  .rv-people-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ============================================================
   SECTION 9: SCHEDULE A CALL
   ============================================================
   The section is template-parts/sections/section-scheduler.php from
   2 Sep 2026 and brings its own CSS, so the bespoke `.rv-call-wrap` block
   that used to live here is gone: the gradient card, its corner glow, its
   eyebrow repaint, the `.rv-call-points` list, `.rv-calendly-panel`,
   `.rv-calendly-loading`, `.rv-spinner`, the rvSpin keyframes and
   `.rv-calendly-fallback`. Each was checked across the theme first and used
   nowhere but the markup that went with them.

   The one rule that stayed behind, `.rv-sched-fallback`, went on 11 Sep
   2026: the no-JS and failed-script fallback now lives in the partial as
   `.es-sched__fallback`, since the partial is the site-wide scheduler. */

/* ============================================================
   SECTION 10: FAQ (split layout, restyled accordion)
   ============================================================ */
.rv-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-8);
  align-items: start;
}

.rv-faq-aside {
  position: sticky;
  top: 120px;
}

.rv-faq-aside .rv-lede {
  margin-bottom: 28px;
}

.rv-faq-ask {
  background: var(--gray-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 26px;
}

.rv-faq-ask p {
  font-size: var(--fs-caption);
  color: var(--text-body);
  margin: 0 0 var(--space-4);
}

.rv-faq-ask a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--font-bold);
  color: var(--brand-500);
  text-decoration: none;
}

.rv-faq-ask a:hover {
  color: var(--brand-600);
}

#accordionHomeFAQ .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  border-radius: 0;
}

#accordionHomeFAQ .accordion-item:first-of-type {
  border-top: 1px solid var(--border-subtle);
}

#accordionHomeFAQ .accordion-button {
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-body-sm);
  font-weight: var(--font-bold);
  color: var(--text-heading);
  padding: var(--space-5) var(--space-2);
  letter-spacing: -0.01em;
}

#accordionHomeFAQ .accordion-button::after {
  background-image: none;
  content: "+";
  font-family: var(--font-label);
  font-size: 22px;
  font-weight: var(--font-regular);
  line-height: 1;
  color: var(--brand-500);
  width: auto;
  height: auto;
  transition: transform 0.3s var(--ease-out);
}

#accordionHomeFAQ .accordion-button:not(.collapsed) {
  color: var(--brand-600);
}
#accordionHomeFAQ .accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
}

#accordionHomeFAQ .accordion-body {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-body);
  padding: 0 var(--space-2) 26px;
}

@media (max-width: 991px) {
  .rv-faq-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .rv-faq-aside {
    position: static;
  }
}