/* Layout utilities */
:root {
  --vp-shadow-card: 0 2px 8px rgba(11, 29, 58, 0.06);
  --vp-shadow-card-hover: 0 8px 24px rgba(11, 29, 58, 0.12);
  --vp-gap: 1rem;
}

.vp-section {
  padding-block: clamp(3rem, 8vw, 5rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.vp-container {
  width: min(1100px, 100% - clamp(1rem, 5vw, 3rem));
  margin-inline: auto;
}

.vp-eyebrow {
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--wp--preset--font-family--dm-sans, Arial, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wp--preset--color--coral-500, #e06a4f);
}

.vp-stat--mono {
  font-family: var(--wp--preset--font-family--dm-mono, "DM Mono", monospace);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Dark process section */
.vp-process {
  background: var(--wp--preset--color--navy-800, #0b1d3a);
  color: var(--wp--preset--color--ivory-300, #ede3d6);
}

.vp-process h2,
.vp-process h3 {
  color: var(--wp--preset--color--ivory-100, #faf7f2);
}

.vp-process a,
.vp-process-step__num,
.vp-process-step__takeaway {
  color: var(--wp--preset--color--coral-400, #e87a63);
}

.vp-process-step {
  border: 1px solid rgba(250, 247, 242, 0.14);
  border-radius: 0.75rem;
  margin-block: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.vp-process-step__image img {
  border-radius: 0.75rem;
}

/* Guide card */
.vp-guide {
  background: var(--wp--preset--color--stone-100, #ede8e0);
}

.vp-guide-card {
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--stone-200, #e5ded4);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: var(--vp-shadow-card);
}

.vp-guide-cover-shell {
  min-height: 100%;
  background: var(--wp--preset--color--navy-800, #0b1d3a);
  color: var(--wp--preset--color--ivory-400, #e5ded4);
  text-align: center;
}

.vp-guide-cover img {
  border-radius: 0.5rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.26);
}

/* Marquee utility */
.vp-partners {
  overflow: hidden;
}

.vp-marquee-track {
  display: flex;
  width: max-content;
  animation: vpg-marquee 22s linear infinite;
  align-items: center;
  gap: 2.5rem;
}

.vp-marquee-track:hover {
  animation-play-state: paused;
}

.vp-marquee-wrap {
  position: relative;
  overflow: hidden;
}

.vp-marquee-wrap::before,
.vp-marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 2.5rem;
  pointer-events: none;
}

.vp-marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, white 0%, transparent 100%);
}

.vp-marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, white 0%, transparent 100%);
}

.vp-logo-item {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  height: 5rem;
  padding-inline: 2.25rem;
  cursor: default;
}

.vp-logo-item img {
  max-width: 180px;
  width: auto;
  height: 3.75rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.4;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.vp-logo-item:hover img,
.vp-logo-item:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}

@keyframes vpg-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.333%);
  }
}

/* Roles filter */
.vp-roles {
  isolation: isolate;
}

.vp-role-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}

.vp-role-filter {
  border: 1px solid var(--wp--preset--color--navy-800, #0b1d3a);
  background: transparent;
  color: var(--wp--preset--color--navy-800, #0b1d3a);
  font: inherit;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.vp-role-filter[aria-pressed="true"] {
  background: var(--wp--preset--color--navy-800, #0b1d3a);
  color: var(--wp--preset--color--ivory-100, #faf7f2);
}

.vp-role-list {
  border-top: 1px solid var(--wp--preset--color--stone-200, #e5ded4);
}

.vp-role-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.1fr) minmax(14rem, 2fr) minmax(18rem, auto);
  gap: 0.75rem;
  align-items: center;
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--wp--preset--color--stone-200, #e5ded4);
  background: transparent;
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.vp-role-row:hover {
  background: var(--wp--preset--color--stone-50, #f7f5f2);
  box-shadow: var(--vp-shadow-card-hover);
}

.vp-role-row.is-hidden {
  display: none;
}

.vp-role-title,
.vp-role-description,
.vp-role-tags {
  margin: 0;
}

.vp-role-title {
  font-size: 1.1rem;
}

.vp-role-title a {
  color: var(--wp--preset--color--navy-800, #0b1d3a);
  text-decoration: none;
}

.vp-role-title a:hover {
  color: var(--wp--preset--color--coral-500, #e06a4f);
}

.vp-role-description {
  color: var(--wp--preset--color--charcoal-500, #636363);
  font-size: 0.95rem;
  line-height: 1.55;
}

.vp-role-tags {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.vp-role-cat,
.vp-role-type,
.vp-role-cost {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wp--preset--color--stone-200, #e5ded4);
  border-radius: 999px;
  background: var(--wp--preset--color--stone-100, #ede8e0);
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--wp--preset--color--charcoal-500, #636363);
}

.vp-role-cost {
  border-color: rgba(224, 106, 79, 0.22);
  background: rgba(224, 106, 79, 0.1);
  color: var(--wp--preset--color--coral-600, #c85540);
  font-family: var(--wp--preset--font-family--dm-mono, monospace);
  font-weight: 600;
}

/* Testimonials */
.vp-testimonial-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.vp-testimonial-btn,
.vp-testimonial-dots button {
  border: 1px solid var(--wp--preset--color--stone-300, #d6ccbe);
  background: transparent;
  color: var(--wp--preset--color--navy-800, #0b1d3a);
  cursor: pointer;
}

.vp-testimonial-btn {
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  font: inherit;
}

.vp-testimonial-dots {
  display: inline-flex;
  gap: 0.4rem;
}

.vp-testimonial-dots button {
  width: 0.7rem;
  height: 0.7rem;
  overflow: hidden;
  border-radius: 999px;
  padding: 0;
  color: transparent;
}

.vp-testimonial-dots button.is-active {
  width: 1.4rem;
  border-color: var(--wp--preset--color--coral-500, #e06a4f);
  background: var(--wp--preset--color--coral-500, #e06a4f);
}

.vp-testimonial-carousel {
  position: relative;
}

.vp-testimonial-slide {
  border: 1px solid var(--wp--preset--color--stone-200, #e5ded4);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: var(--vp-shadow-card);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.vp-testimonial-carousel.is-carousel-ready .vp-testimonial-slide:not(.is-active) {
  display: none;
}

.vp-testimonial-mark {
  margin: 0 0 1rem;
  color: var(--wp--preset--color--coral-500, #e06a4f);
  font-family: var(--wp--preset--font-family--playfair-display, Georgia, serif);
  font-size: 3rem;
  line-height: 1;
}

.vp-testimonial-quote {
  color: var(--wp--preset--color--navy-800, #0b1d3a);
  font-family: var(--wp--preset--font-family--playfair-display, Georgia, serif);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  line-height: 1.35;
}

.vp-testimonial-person span {
  color: var(--wp--preset--color--charcoal-400, #898989);
  font-size: 0.85rem;
}

/* Final CTA with muted media treatment */
.vp-video-cta {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 6.5rem);
  background: var(--wp--preset--color--navy-800, #0b1d3a);
  overflow: hidden;
}

.vp-video-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.85;
}

.vp-video-cta__iframe {
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  border: 0;
  pointer-events: none;
}

.vp-video-cta__fallback {
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--navy-800, #0b1d3a);
}

.vp-video-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(11, 29, 58, 0.8);
}

.vp-video-cta > .vp-container,
.vp-video-cta > * {
  position: relative;
  z-index: 2;
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .vp-marquee-track {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* Small-screen role row fallback */
@media (max-width: 820px) {
  .vp-role-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .vp-role-tags {
    justify-content: flex-start;
  }
}

/* Devapp parity overrides — apply on the home page and every harness-managed
   page (About/Services/How It Works/Contact/Blog), tagged body.vp-managed. */
body.home,
body.vp-managed {
  background: var(--wp--preset--color--ivory-100, #faf7f2);
}

body.home .site-header,
body.home .site-footer,
body.home .entry-hero,
body.home .entry-header,
body.home .entry-title,
body.home .post-thumbnail,
body.home .comments-area,
body.vp-managed .site-header,
body.vp-managed .site-footer,
body.vp-managed .entry-hero,
body.vp-managed .entry-header,
body.vp-managed .entry-title,
body.vp-managed .post-thumbnail,
body.vp-managed .comments-area {
  display: none !important;
}

body.home #primary,
body.home #main,
body.home .content-area,
body.home .site-main,
body.home .entry,
body.home .entry-content,
body.home .entry-content-wrap,
body.home .content-wrap,
body.home .content-container,
body.vp-managed #primary,
body.vp-managed #main,
body.vp-managed .content-area,
body.vp-managed .site-main,
body.vp-managed .entry,
body.vp-managed .entry-content,
body.vp-managed .entry-content-wrap,
body.vp-managed .content-wrap,
body.vp-managed .content-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home .entry-content > *,
body.vp-managed .entry-content > * {
  margin-block: 0;
}

/* Sub-pages (everything except the front page) have no dark hero behind the
   fixed header, so the header must be solid from the top and the first section
   needs room to clear it. */
body.vp-managed:not(.home) .vp-header {
  background: var(--wp--preset--color--navy-800, #0b1d3a);
  border-bottom: 1px solid rgba(122, 155, 189, 0.22);
}

body.vp-managed:not(.home) .entry-content {
  padding-top: 6.75rem !important;
}

.vp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0.7rem clamp(1.5rem, 5vw, 4rem) !important;
  background: transparent;
  transition: background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}

body.admin-bar .vp-header {
  top: 32px;
}

.vp-header.is-scrolled {
  border-bottom: 1px solid rgba(122, 155, 189, 0.22);
  background: rgba(11, 29, 58, 0.92);
  backdrop-filter: blur(18px);
}

.vp-header > .wp-block-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(75rem, 100%);
  margin-inline: auto;
}

.vp-header-logo {
  margin: 0;
}

.vp-header-logo img,
.vp-footer-logo img {
  width: auto;
  height: 6rem;
  filter: brightness(0) invert(1);
}

.vp-header-menu-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
}

.vp-header .wp-block-navigation__container {
  gap: 2rem;
}

.vp-header a,
.vp-header .wp-block-navigation a {
  color: var(--wp--preset--color--ivory-200, #f3ede4);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.vp-header a:hover,
.vp-header .wp-block-navigation a:hover {
  color: var(--wp--preset--color--coral-400, #e87a63);
}

.vp-header-cta .wp-block-button__link {
  border-radius: 0.5rem;
  padding: 0.7rem 1.2rem;
  background: var(--wp--preset--color--coral-500, #e06a4f) !important;
  color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
}

.vp-hero {
  position: relative;
  min-height: 100vh !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--wp--preset--color--navy-800, #0b1d3a);
}

.vp-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: min(100%, 72rem);
  padding: 6rem 1.5rem 8rem;
  color: var(--wp--preset--color--ivory-100, #faf7f2);
}

.vp-hero-title {
  max-width: 62rem;
  margin: 0 auto 2rem !important;
  color: var(--wp--preset--color--ivory-100, #faf7f2);
  font-size: clamp(3.5rem, 7vw, 8rem) !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

.vp-hero-subhead {
  max-width: 42rem;
  margin-inline: auto !important;
  color: var(--wp--preset--color--ivory-300, #ede3d6) !important;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important;
  line-height: 1.65;
}

.vp-hero .wp-block-buttons {
  justify-content: center;
  gap: 1rem;
}

.vp-hero .wp-block-button__link {
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 500;
}

.vp-hero-secondary .wp-block-button__link {
  border: 1px solid rgba(237, 227, 214, 0.32);
  background: transparent !important;
}

.vp-scroll-cue {
  position: absolute !important;
  left: 50%;
  bottom: 2rem;
  z-index: 3;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  color: rgba(229, 222, 212, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}

.vp-scroll-cue p {
  margin: 0;
}

.vp-scroll-cue__mouse {
  display: flex;
  justify-content: center;
  width: 1.5rem;
  height: 2.5rem;
  padding-top: 0.45rem;
  border: 2px solid rgba(229, 222, 212, 0.32);
  border-radius: 999px;
}

.vp-scroll-cue__mouse span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--wp--preset--color--coral-500, #e06a4f);
}

.vp-section {
  padding-block: clamp(5rem, 8vw, 7rem);
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.vp-section > .alignwide,
.vp-partners > .alignwide,
.vp-pain > .alignwide,
.vp-founders > .alignwide,
.vp-process > .alignwide,
.vp-roles > .alignwide,
.vp-testimonials > .alignwide,
.vp-guide > .alignwide,
.vp-footer > .alignwide,
.vp-footer > .wp-block-columns {
  max-width: 72rem;
  margin-inline: auto;
}

.vp-stats-bar {
  padding-block: 2.5rem !important;
}

.vp-stats-grid {
  width: min(72rem, 100%);
  margin-inline: auto;
}

.vp-stats-grid .wp-block-column:not(:first-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.vp-partners {
  padding-block: 3.5rem;
  background: #fff;
}

.vp-pain {
  background: #fff;
  border-width: 1px 0 0 !important;
}

.vp-pain-grid {
  align-items: center !important;
  gap: clamp(3rem, 8vw, 6rem);
}

.vp-pain h2,
.vp-founders h2,
.vp-roles h2,
.vp-testimonials h2,
.vp-guide h2 {
  color: var(--wp--preset--color--navy-800, #0b1d3a);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 1.06;
}

.vp-pain-card {
  border-radius: 0.75rem;
  background: #fff;
}

.vp-cost {
  padding-block: clamp(6rem, 10vw, 8rem) !important;
  background: var(--wp--preset--color--navy-800, #0b1d3a);
}

.vp-cost-comparison {
  align-items: center !important;
  max-width: 58rem;
  margin-inline: auto;
}

.vp-cost-comparison .wp-block-column:nth-child(2) {
  flex-basis: 4rem !important;
}

.vp-founders {
  background: var(--wp--preset--color--ivory-100, #faf7f2);
}

.vp-founders-grid {
  align-items: flex-start !important;
  gap: clamp(3rem, 8vw, 6rem);
}

.vp-founder-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.vp-founder-card:nth-child(2) {
  margin-top: 2.5rem !important;
}

.vp-founder-photo img {
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.vp-founder-caption {
  position: relative;
  width: max-content;
  margin-top: -4rem !important;
  margin-left: 1rem !important;
  padding: 0.6rem 0.8rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.92);
}

.vp-process {
  padding-block: clamp(6rem, 10vw, 8rem);
}

.vp-process > .alignwide:first-child {
  margin-bottom: 4rem;
}

.vp-process-steps {
  max-width: 72rem;
  margin-inline: auto;
}

.vp-process-step {
  background: rgba(16, 43, 82, 0.45);
}

.vp-roles,
.vp-testimonials {
  background: var(--wp--preset--color--ivory-100, #faf7f2);
}

.vp-guide {
  padding-block: clamp(5rem, 8vw, 7rem);
}

.vp-guide-card .wp-block-columns {
  margin-bottom: 0;
}

.vp-final-cta {
  min-height: 34rem;
  display: grid;
  place-items: center;
  text-align: center;
}

.vp-final-cta h2 {
  color: var(--wp--preset--color--ivory-100, #faf7f2);
  font-size: clamp(4rem, 7vw, 8rem);
  line-height: 0.92;
}

.vp-final-cta em {
  color: var(--wp--preset--color--coral-500, #e06a4f);
}

.vp-final-cta p {
  color: var(--wp--preset--color--ivory-400, #e5ded4);
}

.vp-footer {
  padding: 4rem clamp(1.5rem, 4vw, 2rem) 0;
  background: var(--wp--preset--color--navy-800, #0b1d3a);
  color: var(--wp--preset--color--ivory-300, #ede3d6);
}

.vp-footer h4 {
  color: var(--wp--preset--color--ivory-500, #d4c8b8);
  font-family: var(--wp--preset--font-family--dm-sans, Arial, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vp-footer a {
  color: var(--wp--preset--color--ivory-400, #e5ded4);
  text-decoration: none;
}

.vp-footer a:hover {
  color: var(--wp--preset--color--coral-500, #e06a4f);
}

.vp-footer ul {
  list-style: none;
  padding-left: 0;
}

.vp-footer-meta {
  max-width: none;
  margin-top: 3rem;
  border-top: 1px solid var(--wp--preset--color--navy-700, #102b52);
  padding-block: 1.5rem;
  color: var(--wp--preset--color--ivory-600, #bca89a);
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .vp-header {
    padding-inline: 1.25rem !important;
  }

  .vp-header-logo img {
    height: 4.5rem;
  }

  .vp-header-menu-wrap {
    gap: 1rem;
  }

  .vp-header .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--ivory-100, #faf7f2);
  }

  .vp-stats-grid .wp-block-column:not(:first-child) {
    border-left: 0;
  }

  .vp-founder-stack {
    grid-template-columns: 1fr 1fr;
  }
}

/* Devapp parity refinements */
.vp-header > .vp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(75rem, 100%);
  margin-inline: auto;
}

.vp-header > .wp-block-group:not(.vp-header-inner) {
  display: contents;
}

.vp-header-logo img {
  height: 4.75rem;
}

.vp-footer-logo img {
  height: 5.5rem;
}

.vp-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
  display: block;
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  color: inherit;
}

.vp-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: none;
}

.vp-header .wp-block-navigation__responsive-container-content {
  display: flex;
  align-items: center;
}

.vp-process {
  padding-block: clamp(5rem, 8vw, 7rem);
}

.vp-process > .alignwide:first-child {
  margin-bottom: 3rem;
}

.vp-process-layout {
  max-width: 72rem;
  margin-inline: auto;
  gap: clamp(2rem, 5vw, 4rem);
}

.vp-process-step {
  cursor: pointer;
  min-height: 7rem;
  margin-block: 0 1rem;
  padding: 1.25rem 1.5rem;
  border-color: rgba(250, 247, 242, 0.12);
  background: rgba(16, 43, 82, 0.28);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.vp-process-step:focus-visible {
  outline: 2px solid var(--wp--preset--color--coral-500, #e06a4f);
  outline-offset: 3px;
}

.vp-process-step.is-active {
  border-color: rgba(224, 106, 79, 0.5);
  background: rgba(16, 43, 82, 0.7);
}

.vp-process-step h3 {
  margin-block: 0 0.45rem;
}

.vp-process-step__body,
.vp-process-step__takeaway {
  display: none;
  margin-bottom: 0;
}

.vp-process-step.is-active .vp-process-step__body,
.vp-process-step.is-active .vp-process-step__takeaway {
  display: block;
}

.vp-process-step__takeaway::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: middle;
  background: currentColor;
}

.vp-process-media {
  position: relative;
  min-height: 31.25rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--wp--preset--color--navy-700, #102b52);
  background-position: center;
  background-size: cover;
}

.vp-process-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(11, 29, 58, 0.5), rgba(11, 29, 58, 0));
  pointer-events: none;
}

.vp-process-step__image {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(0.75rem);
  z-index: 1;
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.vp-process-step__image.is-active {
  opacity: 1;
  transform: translateY(0);
  z-index: 1;
}

.vp-process-step__image img {
  width: 100%;
  height: 100%;
  min-height: 31.25rem;
  object-fit: cover;
  border-radius: 0;
  filter: none;
}

.vp-process-media-label {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 3;
  margin: 0;
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(11, 29, 58, 0.8);
  color: var(--wp--preset--color--ivory-100, #faf7f2);
  font-size: 0.9rem;
  font-weight: 700;
}

.vp-process-media-label__step {
  color: var(--wp--preset--color--coral-400, #e87a63);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vp-process-media-label__title {
  color: var(--wp--preset--color--ivory-100, #faf7f2);
}

.vp-guide {
  padding-block: clamp(4rem, 7vw, 6rem);
}

.vp-guide-card {
  border-radius: 1rem;
}

.vp-guide-card .wp-block-columns {
  align-items: stretch !important;
}

.vp-guide-cover-shell {
  min-height: 28rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #102b52, #0b1d3a);
}

.vp-guide-cover {
  margin: 0 auto;
}

.vp-guide-cover img {
  width: min(18rem, 78%);
  height: auto;
}

.vp-guide-copy {
  display: grid;
  align-content: center;
  min-height: 28rem;
}

.vp-guide-cta .wp-block-button__link {
  border-color: var(--wp--preset--color--navy-800, #0b1d3a) !important;
  background-color: var(--wp--preset--color--navy-800, #0b1d3a) !important;
  color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
}

@media (max-width: 960px) {
  .vp-header-logo img {
    height: 4rem;
  }

  .vp-header-menu-wrap {
    gap: 1rem;
  }

  .vp-header .wp-block-navigation__container {
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .vp-header-logo img {
    height: 3.75rem;
  }

  .vp-process-layout {
    display: block;
  }

  .vp-process-media {
    min-height: 24rem;
  }

  .vp-process-step__image img {
    min-height: 24rem;
  }

  .vp-guide-cover-shell,
  .vp-guide-copy {
    min-height: auto;
  }
}

/* Local parity view should not inherit the logged-in WordPress admin chrome. */
html {
  margin-top: 0 !important;
}

body.home #wpadminbar {
  display: none !important;
}

body.home.admin-bar .vp-header {
  top: 0;
}

.vp-header a,
.vp-header .wp-block-navigation a,
.vp-header .wp-block-navigation-item__content {
  color: var(--wp--preset--color--ivory-200, #f3ede4) !important;
}

.vp-hero .wp-block-cover__inner-container {
  position: static;
}

.vp-hero-inner {
  position: relative;
  z-index: 2;
}

.vp-hero-primary .wp-block-button__link,
.vp-header-cta .wp-block-button__link {
  border-color: var(--wp--preset--color--coral-500, #e06a4f) !important;
  background-color: var(--wp--preset--color--coral-500, #e06a4f) !important;
  color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
}

.vp-hero-secondary .wp-block-button__link {
  border: 1px solid rgba(237, 227, 214, 0.42) !important;
  background: transparent !important;
  color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
}

.vp-hero-primary .wp-block-button__link:hover,
.vp-header-cta .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--coral-600, #cc5f47) !important;
}

@media (max-width: 768px) {
  .vp-hero-title {
    max-width: 21rem;
    font-size: clamp(2.7rem, 11.5vw, 3.45rem) !important;
    line-height: 1.02 !important;
  }

  .vp-hero-subhead {
    max-width: 23rem;
    font-size: 1.05rem !important;
  }

  .vp-hero .wp-block-buttons {
    width: 100%;
    padding-inline: 0.125rem;
  }

  .vp-hero .wp-block-button__link {
    padding: 0.95rem 1.35rem;
  }
}

@media (max-width: 768px) {
  .vp-header .vp-header-nav {
    display: flex;
  }

  .vp-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  .vp-header .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
  }

  .vp-header .wp-block-navigation__responsive-container.is-menu-open {
    display: flex;
    background: rgba(11, 29, 58, 0.98) !important;
    background-color: rgba(11, 29, 58, 0.98) !important;
    color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
  }

  .vp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
  .vp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    background: transparent !important;
    color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
  }

  .vp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: flex-start;
    padding-top: 4rem;
  }

  .vp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: flex-start;
    gap: 1.25rem;
  }

  .vp-header .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
  }

  .vp-header .wp-block-navigation__responsive-container.is-menu-open a,
  .vp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
    font-size: 1.2rem;
  }
}

/* ============================================================
   Pixel-parity pass — match https://valor-pro-global.devapp.symph.co
   Kadence's own typography/color CSS overrides theme.json (which uses
   zero-specificity :where() selectors) and some has-{slug} preset
   classes do not paint, so the display font and several section colors
   are forced explicitly here.
   ============================================================ */

/* 1. Display headings render in Playfair Display (source uses font-serif) —
   on the home page AND every harness-managed subpage. */
body.home :is(h1, h2, h3),
body.vp-managed :is(h1, h2, h3),
.vp-hero-title,
.vp-final-cta-title,
.vp-role-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Footer column labels stay in DM Sans */
body.home .vp-footer h4,
body.vp-managed .vp-footer h4 {
  font-family: var(--wp--preset--font-family--dm-sans, "DM Sans", sans-serif) !important;
  letter-spacing: 0.1em;
}

/* Section vertical padding on every managed page — WordPress crushes
   background groups to 1.25em; restore real padding generically (stats bar
   keeps its own tighter value). */
body.vp-managed .vp-section.has-background:not(.vp-stats-bar) {
  padding-block: clamp(4rem, 7vw, 6rem) !important;
}

/* 2. Hero title sizing — scaled down for the longer headline copy */
.vp-hero-title {
  max-width: 54rem;
  font-size: clamp(2.25rem, 4.6vw, 4rem) !important;
  line-height: 1.08 !important;
}

/* 3. Stats bar — coral band with visible white mono numerals */
.vp-stats-bar {
  background: var(--wp--preset--color--coral-500, #e06a4f) !important;
}

.vp-stats-bar .vp-stat--mono {
  color: #fff !important;
}

.vp-stats-bar p:not(.vp-stat--mono) {
  color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
  opacity: 0.85;
}

/* 4. Cost comparison — serif numerals, correct contrast on navy */
.vp-cost-now,
.vp-cost-old {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 7rem) !important;
  line-height: 0.95 !important;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.vp-cost-now {
  color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
}

.vp-cost-old {
  color: var(--wp--preset--color--ivory-300, #ede3d6) !important;
  text-decoration: line-through;
  text-decoration-color: rgba(237, 227, 214, 0.6);
  opacity: 0.4 !important;
}

.vp-cost-vs {
  color: var(--wp--preset--color--ivory-400, #e5ded4) !important;
  font-style: italic;
  opacity: 0.7;
}

.vp-cost-label {
  color: var(--wp--preset--color--ivory-400, #e5ded4) !important;
}

.vp-cost-note {
  color: var(--wp--preset--color--ivory-400, #e5ded4) !important;
}

/* 5. Pain section — top-aligned columns, bordered stat cards, coral numerals */
.vp-pain-grid {
  align-items: flex-start !important;
}

.vp-pain-stats {
  gap: 0.75rem;
}

.vp-pain-card {
  border: 1px solid var(--wp--preset--color--stone-300, #d6ccbe) !important;
  border-radius: 0.75rem;
  padding: 1rem 0.75rem;
  background: #fff;
}

.vp-pain-card .vp-stat--mono {
  color: var(--wp--preset--color--coral-500, #e06a4f) !important;
  font-weight: 700;
}

/* 6. Founder "Read the full founder story" is a coral text link, not a button */
.vp-founders .wp-block-buttons .wp-block-button__link {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--wp--preset--color--coral-500, #e06a4f) !important;
  font-weight: 600;
}

.vp-founders .wp-block-buttons .wp-block-button__link::after {
  content: " \2192";
}

/* Founder credential badges read as outline pills */
.vp-founder-badges {
  gap: 0.6rem;
}

.vp-founder-badge .wp-block-button__link {
  padding: 0.4rem 0.95rem !important;
  border: 1px solid var(--wp--preset--color--stone-300, #d6ccbe) !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--wp--preset--color--navy-800, #0b1d3a) !important;
  font-size: 0.8rem !important;
  font-weight: 500;
}

/* 7. Section "see more" links get a trailing arrow in coral */
.vp-section-link a,
.vp-process > .alignwide .vp-section-link a {
  color: var(--wp--preset--color--coral-500, #e06a4f);
  font-weight: 600;
  text-decoration: none;
}

.vp-section-link a::after {
  content: " \2192";
}

.vp-process .vp-section-link a {
  color: var(--wp--preset--color--coral-400, #e87a63);
}

/* 8. Process header — eyebrow + heading stacked left, link right */
.vp-process-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.vp-process-head .vp-process-head__title {
  max-width: 40rem;
}

.vp-process-head h2 {
  margin: 0;
}

/* 9. Roles rows end with a directional arrow like the source */
.vp-role-tags::after {
  content: "\2192";
  align-self: center;
  margin-left: 0.35rem;
  color: var(--wp--preset--color--charcoal-400, #898989);
}

/* 10. Header logo — sized to the source design (≈ h-24) so the VALORPRO
   wordmark is legible, not the shrunken lockup. */
.vp-header-logo {
  margin: 0 !important;
  line-height: 0;
}

.vp-header-logo img {
  width: auto !important;
  height: 4.75rem !important;
}

.vp-header-logo a {
  display: inline-block;
  line-height: 0;
}

@media (max-width: 768px) {
  .vp-header-logo img {
    height: 3.25rem !important;
  }
}

/* 11. Hero cover dim — the navy-800 overlay preset does not paint, force it
   so the photo reads through a controlled 70% navy tint like the source */
.vp-hero .wp-block-cover__background {
  background-color: var(--wp--preset--color--navy-800, #0b1d3a) !important;
}

.vp-hero {
  background-color: var(--wp--preset--color--navy-900, #061126) !important;
}

/* 12. Logged-in admin bar leaves a 32px gap above the fixed header in this
   local parity view; the production (logged-out) site has no admin bar */
@media screen {
  html {
    margin-top: 0 !important;
  }
}

body.home.admin-bar .vp-header,
body.admin-bar .vp-header {
  top: 0;
}

/* 13. Final CTA button is coral with an arrow (Kadence default paints it blue) */
.vp-final-cta-cta .wp-block-button__link,
.vp-final-cta .wp-block-buttons .wp-block-button__link {
  border-color: var(--wp--preset--color--coral-500, #e06a4f) !important;
  background: var(--wp--preset--color--coral-500, #e06a4f) !important;
  background-color: var(--wp--preset--color--coral-500, #e06a4f) !important;
  color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
}

.vp-final-cta-cta .wp-block-button__link:hover,
.vp-final-cta .wp-block-buttons .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--coral-600, #c85540) !important;
}

.vp-final-cta-cta .wp-block-button__link::after {
  content: " \2192";
}

/* 14. AI training section (new) — centered statement between Process and Roles */
.vp-ai {
  background: var(--wp--preset--color--stone-100, #ede8e0);
}

.vp-ai-inner {
  max-width: 52rem;
  margin-inline: auto;
}

.vp-ai-title {
  color: var(--wp--preset--color--navy-800, #0b1d3a);
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1.1;
  margin: 0.5rem 0 1.25rem;
}

.vp-ai-body {
  max-width: 44rem;
  margin-inline: auto;
  color: var(--wp--preset--color--charcoal-600, #4a4a4a);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
}

/* 15. Consistent content column across every section.
   Kadence applies negative side margins to .alignwide (full-bleed breakout),
   which left most sections flush to the screen edges while others stayed
   centered. Force one shared content width, centered, everywhere. */
:root {
  --vp-content-width: 75rem;
}

.vp-stats-grid,
.vp-partners > .alignwide,
.vp-pain > .alignwide,
.vp-founders > .alignwide,
.vp-process > .alignwide,
.vp-process-layout,
.vp-process-steps,
.vp-roles > .alignwide,
.vp-testimonials > .alignwide,
.vp-guide > .alignwide,
.vp-final-cta > .alignwide,
.vp-footer > .wp-block-columns,
.vp-footer-meta {
  max-width: var(--vp-content-width) !important;
  margin-inline: auto !important;
  width: auto !important;
}

/* The AI statement stays intentionally narrower, but still centered */
.vp-ai > .alignwide {
  max-width: 52rem !important;
  margin-inline: auto !important;
  width: auto !important;
}

/* Generic content-column constraint for every managed page (home + subpages).
   Covers the new About/Services/How-It-Works/Contact/Blog sections, whose
   alignwide wrappers aren't in the homepage-specific list above. */
body.vp-managed .vp-section > .alignwide {
  max-width: var(--vp-content-width, 75rem) !important;
  margin-inline: auto !important;
  width: auto !important;
}

.vp-ai.vp-section > .alignwide {
  max-width: 52rem !important;
}

/* Contact page form (markup in patterns/page-contact.php; styling lives here so
   it survives WordPress content sanitizing, which strips inline <style>). */
.vp-contact-form {
  border: 1px solid var(--wp--preset--color--stone-200, #e5ded4);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(11, 29, 58, 0.06);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.vp-contact-form .vp-field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.vp-contact-form label {
  color: var(--wp--preset--color--navy-800, #0b1d3a);
  font-family: var(--wp--preset--font-family--dm-sans, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vp-contact-form input,
.vp-contact-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--wp--preset--color--stone-300, #d6ccbe);
  border-radius: 0.6rem;
  background: var(--wp--preset--color--stone-50, #f7f5f2);
  color: var(--wp--preset--color--navy-800, #0b1d3a);
  font-family: var(--wp--preset--font-family--dm-sans, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  box-sizing: border-box;
}

.vp-contact-form input::placeholder,
.vp-contact-form textarea::placeholder {
  color: var(--wp--preset--color--charcoal-400, #898989);
}

.vp-contact-form input:focus,
.vp-contact-form textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--coral-500, #e06a4f);
  box-shadow: 0 0 0 3px rgba(224, 106, 79, 0.18);
}

.vp-contact-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.vp-contact-form .vp-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.95rem 1.5rem;
  border: 0;
  border-radius: 0.6rem;
  background: var(--wp--preset--color--coral-500, #e06a4f);
  color: var(--wp--preset--color--ivory-100, #faf7f2);
  font-family: var(--wp--preset--font-family--dm-sans, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.vp-contact-form .vp-contact-submit:hover {
  background: var(--wp--preset--color--coral-600, #c85540);
}

.vp-contact-form .vp-contact-submit::after {
  content: "\2192";
}

/* Blog index cards */
.vp-blog-grid {
  gap: 1.5rem;
}

.vp-blog-card {
  height: 100%;
  padding: 1.75rem;
  border: 1px solid var(--wp--preset--color--stone-200, #e5ded4);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: var(--vp-shadow-card);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.vp-blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vp-shadow-card-hover);
}

.vp-blog-card-title {
  margin: 1rem 0 0.6rem;
  font-size: 1.35rem;
  line-height: 1.2;
}

.vp-blog-card-title a {
  color: var(--wp--preset--color--navy-800, #0b1d3a);
  text-decoration: none;
}

.vp-blog-card-excerpt {
  color: var(--wp--preset--color--charcoal-500, #636363);
  line-height: 1.6;
}

.vp-blog-card-more,
.vp-blog-card-more a {
  margin-top: 1rem;
  color: var(--wp--preset--color--coral-500, #e06a4f) !important;
  font-weight: 600;
  text-decoration: none;
}

.vp-blog-card-more::after {
  content: " \2192";
}

/* ============================================================
   20. Sub-page section backgrounds + contrast
   The new pages (About/Services/etc.) declare section colors via WordPress's
   has-{color}-background-color preset classes, which don't paint in this
   Kadence setup (the homepage uses explicit per-section CSS instead). Map the
   preset background classes so the section bands render, and put light text on
   the navy bands so headings/body stay readable.
   ============================================================ */
body.vp-managed .vp-section.has-navy-800-background-color {
  background-color: var(--wp--preset--color--navy-800, #0b1d3a) !important;
}

body.vp-managed .vp-section.has-ivory-100-background-color {
  background-color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
}

body.vp-managed .vp-section.has-stone-100-background-color {
  background-color: var(--wp--preset--color--stone-100, #ede8e0) !important;
}

body.vp-managed .vp-section.has-navy-800-background-color :is(h1, h2, h3) {
  color: var(--wp--preset--color--ivory-100, #faf7f2) !important;
}

body.vp-managed .vp-section.has-navy-800-background-color p:not(.vp-eyebrow) {
  color: var(--wp--preset--color--ivory-300, #ede3d6) !important;
}

body.vp-managed .vp-section.has-navy-800-background-color a:not(.wp-element-button):not(.wp-block-button__link) {
  color: var(--wp--preset--color--coral-400, #e87a63) !important;
}

/* About founder-story rows: text is short, photo is tall — center the text
   against the photo so the column doesn't trail a large empty gap, and cap the
   photo height so the section isn't overlong. */
.vp-about-story-grid {
  align-items: center !important;
  gap: clamp(2rem, 5vw, 4rem);
}

.vp-about-story-grid > .wp-block-column {
  align-self: center !important;
}

.vp-about-story .vp-founder-photo img {
  max-height: 32rem;
  aspect-ratio: 4 / 5;
}

.vp-about-story .vp-founder-caption {
  margin-top: -3.5rem !important;
}

/* How It Works steps: vertically center the text against the (tall) image,
   instead of top-aligning it. */
.vp-howstep {
  align-items: center !important;
  gap: clamp(2rem, 5vw, 4rem);
}

.vp-howstep > .wp-block-column {
  align-self: center !important;
}

.vp-howstep__image img {
  border-radius: 1rem;
}

/* ============================================================
   21. Footer tidy-up — align the three columns, consistent spacing
   ============================================================ */
.vp-footer > .wp-block-columns {
  align-items: flex-start;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: 3rem;
}

.vp-footer .wp-block-column {
  align-self: flex-start !important;
}

.vp-footer-logo {
  margin: 0 0 1.25rem !important;
}

.vp-footer-logo img {
  height: 2.75rem !important;
}

.vp-footer h4 {
  margin-top: 0 !important;
  margin-bottom: 1.1rem !important;
}

.vp-footer ul li {
  margin-bottom: 0.55rem;
  line-height: 1.4;
}

.vp-footer .wp-block-column p {
  margin: 0 0 0.7rem !important;
  line-height: 1.55;
}

.vp-footer-referral {
  margin-top: 1.5rem !important;
  padding-top: 1.25rem;
}

.vp-footer .vp-whatsapp {
  margin-top: 0.75rem;
}

/* 16. Guide card heading — Kadence's 1.5em top margin doesn't collapse inside
   the centered grid column, leaving the eyebrow orphaned above a big gap, and
   the 64px heading is oversized for the card column. Tighten and cap it. */
.vp-guide h2 {
  margin-top: 0 !important;
  font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important;
  line-height: 1.12 !important;
}

.vp-guide-card .wp-block-column {
  min-width: 0;
}

/* ============================================================
   17. Whole-page polish pass — consistent rhythm, spacing, detail
   ============================================================ */

/* Eyebrow → heading: Kadence's 1.5em heading top-margin opened uneven gaps
   under every eyebrow (and didn't collapse inside grid columns). Zero it so
   each eyebrow sits tightly above its heading, uniformly across sections. */
.vp-section :is(h1, h2, h3),
.vp-ai :is(h2, h3),
.vp-guide :is(h2, h3),
.vp-final-cta :is(h2, h3) {
  margin-top: 0 !important;
}

.vp-eyebrow {
  margin-bottom: 0.9rem !important;
}

/* Comfortable, consistent body leading */
.vp-pain-body,
.vp-founders p,
.vp-ai-body,
.vp-testimonials > .alignwide p {
  line-height: 1.65;
}

/* Founder name-tag captions — compact and crisp */
.vp-founder-caption {
  padding: 0.55rem 0.85rem !important;
  box-shadow: 0 6px 18px rgba(11, 29, 58, 0.14);
}

/* Caption is a tight name tag — the pattern's inline margin:0 never reached the
   <p>, so name fell back to the default 2rem bottom margin and bloated the card. */
.vp-founder-caption p {
  margin: 0 !important;
}

.vp-founder-name {
  margin-bottom: 0.15rem !important;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
}

.vp-founder-title {
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--wp--preset--color--charcoal-500, #636363);
}

/* Collapsed process steps shouldn't carry a tall empty box — only the active
   step needs the room for its body + takeaway. */
.vp-process-step:not(.is-active) {
  min-height: 0;
}

/* ============================================================
   19. Review-pass fixes
   ============================================================ */

/* (a) Founder credential badges sat on one row but the third dropped ~16px.
   Force a clean top-aligned row, kill any stray per-item offset. */
.vp-founder-badges {
  align-items: flex-start !important;
  align-content: flex-start;
}

.vp-founder-badges .wp-block-button {
  margin: 0 !important;
  align-self: flex-start !important;
}

/* (b) "How we place your first hire." header centered (was left + right link). */
.vp-process-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.vp-process-head__title {
  max-width: 42rem;
}

/* (c) Restore real vertical padding on background sections — WordPress forces a
   tiny 1.25em default on .wp-block-group.has-background, which crushed the AI
   and Roles sections (and shrank Founders/Testimonials). Stats bar keeps its
   own tighter padding via its existing !important rule. */
.vp-founders.vp-section,
.vp-ai.vp-section,
.vp-roles.vp-section,
.vp-testimonials.vp-section {
  padding-block: clamp(4rem, 7vw, 6rem) !important;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

/* (d) Final CTA button centered with the rest of the section. */
.vp-final-cta .wp-block-buttons {
  justify-content: center;
}

/* (e) Free Book cover centered in its navy panel (was left-aligned/overflowing). */
.vp-guide-cover {
  display: flex !important;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
}

/* Testimonial controls → circular icon buttons */
.vp-testimonial-btn {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.vp-testimonial-btn::before {
  font-size: 1.05rem;
  line-height: 1;
}

.vp-testimonial-btn[data-testimonial-control="prev"]::before {
  content: "\2190";
}

.vp-testimonial-btn[data-testimonial-control="next"]::before {
  content: "\2192";
}

.vp-testimonial-btn:hover {
  border-color: var(--wp--preset--color--coral-500, #e06a4f);
  background-color: var(--wp--preset--color--coral-500, #e06a4f);
  color: #fff;
}

/* Footer rhythm */
.vp-footer h4 {
  margin-bottom: 1.1rem;
}

.vp-footer ul li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.vp-footer-contact-spacing,
.vp-footer .wp-block-column p {
  margin-bottom: 0.8rem;
  line-height: 1.5;
}

.vp-whatsapp .wp-block-button__link {
  margin-top: 0.6rem;
  border-radius: 0.5rem;
  padding: 0.65rem 1.1rem;
  font-weight: 600;
}

/* Smooth, consistent interaction transitions */
.vp-section a,
.vp-footer a,
.wp-block-button__link,
.vp-role-row,
.vp-pain-card,
.vp-founder-badge .wp-block-button__link {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
    transform 180ms ease, box-shadow 180ms ease;
}

/* 18. Pain acknowledgment — single, restrained statement (brief: buyer's own
   words, before we sell anything). */
.vp-pain-inner {
  max-width: 56rem;
  margin-inline: auto !important;
}

.vp-pain-title {
  color: var(--wp--preset--color--navy-800, #0b1d3a);
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem !important;
}

.vp-pain-title {
  max-width: 100%;
  margin-inline: 0 !important;
}

.vp-pain-body {
  max-width: 46rem;
  margin-inline: 0 auto !important;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
}

/* Footer referral ask */
.vp-footer-referral {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wp--preset--color--navy-700, #102b52);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--wp--preset--color--ivory-400, #e5ded4);
}

.vp-footer-referral strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--wp--preset--color--coral-400, #e87a63);
  font-weight: 600;
}

/* 19. Sticky header reveal behavior
   Keep the fixed Valor Pro header out of the initial page view so it does not
   overlap the normal WordPress/Kadence top navigation. The JS adds
   .is-scrolled only after the visitor has moved down the page. */
.vp-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-1rem);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease,
    background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}

.vp-header.is-scrolled {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 20. Process audit link affordance */
.vp-process-step h3 a,
.vp-process-media-label__title a {
  color: inherit !important;
  text-decoration: none;
}

.vp-process-step h3 a:hover,
.vp-process-media-label__title a:hover {
  color: var(--wp--preset--color--coral-400, #e87a63) !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* 21. Functional contact form states */
.vp-contact-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.vp-contact-notice {
  margin-bottom: 1.25rem;
  padding: 0.95rem 1rem;
  border-radius: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.vp-contact-notice--sent {
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
}

.vp-contact-notice--missing,
.vp-contact-notice--error {
  border: 1px solid rgba(224, 106, 79, 0.35);
  background: rgba(224, 106, 79, 0.12);
  color: var(--wp--preset--color--coral-600, #cc5f47);
}

/* 22. Contact form process clarity */
.vp-contact-form-note {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(122, 155, 189, 0.25);
  border-radius: 0.75rem;
  background: rgba(122, 155, 189, 0.08);
  color: var(--wp--preset--color--charcoal-600, #2f3747);
  font-size: 0.95rem;
  line-height: 1.45;
}


/* ============================================================
   2026-07-27  Header visibility fix (Claude, for Tina)
   Kadence's default header was removed, but .vp-header was built
   to stay hidden until scroll (>96px) so it would not overlap
   that Kadence header. With Kadence gone, the site had NO header
   at the top of any page and the mobile hamburger (inside
   .vp-header) was hidden. Make the custom header always visible;
   transparent over the home hero, solid navy everywhere else.
   ============================================================ */
.vp-header {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
body:not(.home) .vp-header,
.vp-header.is-scrolled {
  background: rgba(11, 29, 58, 0.92) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(122, 155, 189, 0.22);
}

/* 2026-07-27 clear the fixed header on inner pages so the page title is not hidden behind it (home hero sits under it by design) */
body:not(.home) .wp-site-blocks { padding-top: 7rem; }
@media (max-width: 900px) { body:not(.home) .wp-site-blocks { padding-top: 5rem; } }

/* 2026-07-28 launch: hide Blog from nav until the blog has real content (re-enable by deleting this block) */
.vp-custom-nav a[href*="/blog"], .vp-mobile-panel a[href*="/blog"] { display: none !important; }

/* 2026-07-28 launch: hide WhatsApp button everywhere (class-based) and any remaining Blog nav links (footer). Reversible: delete this block. */
.vp-whatsapp { display: none !important; }
a[href="/blog"], a[href="/blog/"] { display: none !important; }