/* ==========================================================================
   Vitro Software marketing site - design system
   ========================================================================== */

/* Self-hosted so visitor IPs are never sent to Google on page load (GDPR). */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-variable.woff2") format("woff2");
}

:root {
  --vt-navy: #0b1f3a;
  --vt-navy-light: #132a4d;
  --vt-blue: #2159c9;
  --vt-blue-dark: #17439a;
  --vt-accent: #428bca;
  --vt-accent-deep: #235a8a;
  --vt-accent-darker: #1c4b73;
  --vt-accent-bright: #93badc;
  --vt-accent-mid: #6aa2d3;
  --vt-accent-light: #ecf3f8;
  --vt-ink: #101828;
  --vt-slate: #475467;
  --vt-slate-light: #667085;
  --vt-bg: #f7f9fc;
  --vt-bg-alt: #eef2fa;
  --vt-border: #e4e7ec;
  --vt-white: #ffffff;

  /* Logo lime, used at full strength two ways. As a fill it is safe anywhere:
     navy on #bebb31 is 8.1:1, which is what lets .vt-eyebrow carry the exact
     brand hex on both light and navy sections. As text it is not -- the stat
     figures run 2.0-2.6:1 against white, under AA's 3:1 for large text. That
     is a deliberate brand-over-contrast call, not an oversight. */
  --vt-lime: #bebb31;
  --vt-lime-mid: #a8a52c;

  --vt-grad-brand: linear-gradient(135deg, var(--vt-accent) 0%, var(--vt-accent-deep) 100%);
  --vt-grad-navy: linear-gradient(135deg, var(--vt-navy) 0%, var(--vt-blue-dark) 100%);
  --vt-grad-lime: linear-gradient(135deg, var(--vt-lime-mid) 0%, var(--vt-lime) 100%);

  --vt-radius-sm: 10px;
  --vt-radius: 18px;
  --vt-radius-lg: 26px;
  --vt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --vt-shadow: 0 4px 24px rgba(16, 24, 40, 0.08);
  --vt-shadow-lg: 0 20px 55px rgba(11, 31, 58, 0.16);
  --vt-shadow-accent: 0 8px 18px -4px rgba(35, 90, 138, 0.35);

  --vt-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --vt-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--vt-font);
  color: var(--vt-ink);
  background-color: var(--vt-white);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap's increased-gutter rows (.row.g-4/.g-5) carry a wider negative
   outer margin than the fixed 1.5rem .container gutter can absorb, which
   overflows the viewport on narrow screens. Clip it at the content/footer
   level (siblings of .vt-header) so the fixed/sticky header's own ancestor
   chain stays overflow:visible. */
main,
.vt-footer {
  overflow-x: hidden;
}

::selection {
  background-color: var(--vt-accent);
  color: var(--vt-navy);
}

:focus-visible {
  outline: 2px solid var(--vt-accent);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vt-font);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vt-navy);
}

a {
  color: var(--vt-blue);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--vt-blue-dark);
}

.vt-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--vt-lime);
  color: var(--vt-navy);
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.vt-lede {
  font-size: 1.15rem;
  color: var(--vt-slate);
  line-height: 1.7;
}

.vt-section {
  padding: 5.5rem 0;
}

.vt-section-sm {
  padding: 3rem 0;
}

.vt-bg-alt {
  background-color: var(--vt-bg-alt);
}

.vt-bg-navy {
  background-color: var(--vt-navy);
  color: rgba(255, 255, 255, 0.88);
}

.vt-bg-navy h1, .vt-bg-navy h2, .vt-bg-navy h3, .vt-bg-navy h4 {
  color: #fff;
}

/* Scroll reveal (progressively enhanced via site.js) ---------------------- */

.vt-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--vt-ease), transform 0.7s var(--vt-ease);
}

.vt-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .vt-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Buttons ---------------------------------------------------------------- */

.vt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.2s var(--vt-ease), box-shadow 0.2s var(--vt-ease), background-color 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.vt-btn svg {
  transition: transform 0.25s var(--vt-ease);
}

.vt-btn:hover svg {
  transform: translateX(3px);
}

.vt-btn:hover {
  transform: translateY(-2px);
}

.vt-btn:active {
  transform: translateY(0);
}

.vt-btn-primary {
  background: var(--vt-grad-brand);
  color: #fff;
  box-shadow: var(--vt-shadow-accent);
}

.vt-btn-primary:hover {
  background: linear-gradient(135deg, var(--vt-accent-mid) 0%, var(--vt-accent) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -4px rgba(35, 90, 138, 0.4);
}

.vt-btn-outline {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.vt-btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.vt-btn-navy {
  background: var(--vt-grad-navy);
  color: #fff;
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.28);
}

.vt-btn-navy:hover {
  background: linear-gradient(135deg, var(--vt-navy-light) 0%, var(--vt-blue) 100%);
  color: #fff;
}

/* Lime fill with navy text, the same 8.1:1 pairing .vt-eyebrow and
   .vt-badge--lime use. Hover settles on flat --vt-lime so the whole face
   lifts to the brighter stop, matching how the other variants brighten. */
.vt-btn-lime {
  background: var(--vt-grad-lime);
  color: var(--vt-navy);
  box-shadow: 0 10px 24px rgba(190, 187, 49, 0.32);
}

.vt-btn-lime:hover {
  background-color: var(--vt-lime);
  background-image: none;
  color: var(--vt-navy);
}


.vt-btn-ghost {
  background-color: transparent;
  border-color: var(--vt-border);
  color: var(--vt-navy);
}

.vt-btn-ghost:hover {
  background-color: var(--vt-bg-alt);
  border-color: var(--vt-accent);
  color: var(--vt-navy);
}

/* Header / nav ------------------------------------------------------------ */

.vt-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #ffffff;
  border-bottom: 1px solid rgba(228, 231, 236, 0.7);
  box-shadow: 0 8px 30px rgba(16, 24, 40, 0.08);
}

/* Homepage: header is taken out of flow so the hero fills the viewport behind
   it. .vt-hero-inner's top padding keeps the slide content clear of it. */

body.vt-home .vt-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.vt-navbar {
  padding: 0.55rem 0;
}

.vt-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--vt-navy) !important;
}

.vt-brand-mark {
  color: var(--vt-accent);
}

.vt-navbar-logo {
  height: 52px;
  width: auto;
  display: block;
}

.vt-header .navbar-toggler {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  border-color: rgba(0, 0, 0, 0.15);
}

@media (max-width: 991.98px) {
  .vt-navbar-logo {
    height: 34px;
  }

  .navbar-toggler {
    flex-shrink: 0;
  }
}

.vt-nav .nav-link {
  position: relative;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--vt-ink) !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: 8px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* ::before, not ::after -- Bootstrap's .dropdown-toggle::after already owns
   that pseudo-element for the caret arrow, and its border-top (currentColor)
   would otherwise merge into this rule and render as a stray white bar. */
.vt-nav .nav-link::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.25rem;
  height: 3px;
  border-radius: 2px;
  background: var(--vt-grad-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--vt-ease);
}

.vt-nav .nav-link:hover,
.vt-nav .nav-item.show .nav-link {
  color: var(--vt-blue-dark) !important;
  background-color: var(--vt-bg-alt);
}

.vt-nav .nav-link.active {
  color: var(--vt-blue-dark) !important;
}

.vt-nav .nav-link:hover::before,
.vt-nav .nav-item.show .nav-link::before,
.vt-nav .nav-link.active::before {
  transform: scaleX(1);
}

.vt-nav .dropdown-item {
  position: relative;
}

.vt-nav .dropdown-item::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--vt-grad-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--vt-ease);
}

.vt-nav .dropdown-item.active::before {
  transform: scaleX(1);
}

.vt-nav .dropdown-item.active,
.vt-nav .dropdown-item:active {
  background-color: transparent;
  color: var(--vt-navy);
}

@media (min-width: 992px) {
  .vt-nav .dropdown-menu {
    display: block;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-sm);
    box-shadow: var(--vt-shadow-lg);
    padding: 0.5rem;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.18s var(--vt-ease), transform 0.18s var(--vt-ease);
  }

  .vt-nav .dropdown-menu.show,
  .vt-nav .nav-item.dropdown:hover > .dropdown-menu,
  .vt-nav .nav-item.dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Bridges the margin-top gap so moving the pointer from the nav-link
     down into the menu doesn't momentarily leave the hoverable area. */
  .vt-nav .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
  }
}

.vt-nav .dropdown-item {
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-weight: 500;
  font-size: 0.92rem;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.vt-nav .dropdown-item:hover,
.vt-nav .dropdown-item:focus {
  background-color: var(--vt-accent-light);
  color: var(--vt-navy);
  transform: translateX(2px);
}

/* Hero ---------------------------------------------------------------- */

.vt-hero {
  position: relative;
  background: radial-gradient(1100px 480px at 85% -10%, rgba(66, 139, 202, 0.35), transparent 60%),
    radial-gradient(700px 380px at 8% 105%, rgba(33, 89, 201, 0.28), transparent 60%),
    linear-gradient(160deg, var(--vt-navy) 0%, var(--vt-navy-light) 55%, #0d2547 100%);
  color: #fff;
  overflow: hidden;
}

.vt-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}

.vt-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -160px;
  background: radial-gradient(circle, rgba(147, 186, 220, 0.22), transparent 70%);
  border-radius: 50%;
  filter: blur(10px);
  animation: vt-float 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes vt-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-16px, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  .vt-hero::before {
    animation: none;
  }
}

.vt-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 5.5rem;
  padding-bottom: 4.5rem;
}

.vt-hero .vt-hero-title {
  color: #fff;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.15;
}

.vt-hero .vt-lede {
  color: rgba(255, 255, 255, 0.78);
}

.vt-hero-checklist {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.5rem;
}

.vt-hero-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.vt-hero-checklist svg {
  flex: none;
  color: var(--vt-accent-bright);
  background-color: rgba(66, 139, 202, 0.16);
  border-radius: 999px;
  padding: 4px;
  width: 15px;
  height: 15px;
  box-sizing: content-box;
}

.vt-hero-shot {
  position: relative;
  border-radius: var(--vt-radius-lg);
  overflow: hidden;
  box-shadow: var(--vt-shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  aspect-ratio: 4 / 3;
}

.vt-hero-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--vt-ease);
}

.vt-hero-shot:hover img {
  transform: scale(1.03);
}

.vt-hero-shot--banner {
  aspect-ratio: auto;
}

.vt-hero-shot--banner img {
  height: auto;
}

.vt-hero-shot-overlay {
  margin-top: 1.5rem;
}

@media (max-width: 991.98px) {
  .vt-hero-shot--banner {
    border: none;
    box-shadow: none;
  }

  .vt-hero-shot--banner img {
    border-radius: var(--vt-radius-lg);
    box-shadow: var(--vt-shadow-lg);
  }
}

@media (min-width: 992px) {
  .vt-hero-shot-overlay {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    max-width: 44%;
    padding: 0 2.5rem;
    margin-top: 0;
  }


  .vt-hero .vt-hero-shot-overlay .vt-hero-title {
    color: var(--vt-navy);
    font-size: clamp(1.4rem, 2.3vw, 2.15rem);
    line-height: 1.2;
  }

  .vt-hero .vt-hero-shot-overlay .vt-lede {
    color: var(--vt-slate);
    font-size: 1rem;
  }

  .vt-hero .vt-hero-shot-overlay .vt-btn-outline {
    border-color: var(--vt-border);
    color: var(--vt-navy);
  }

  .vt-hero .vt-hero-shot-overlay .vt-btn-outline:hover {
    background-color: var(--vt-bg-alt);
    border-color: var(--vt-accent);
    color: var(--vt-navy);
  }
}

/* Hero carousel ------------------------------------------------------------ */

.vt-hero-carousel .carousel-item {
  backface-visibility: hidden;
}

.vt-hero-slide-inner {
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 42vw, 34rem);
}

.vt-hero-slide-inner > .row {
  width: 100%;
}

.vt-hero .carousel-indicators {
  position: static;
  margin: 2rem 0 0;
  gap: 0.55rem;
}

.vt-hero .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.35);
  border: none;
  opacity: 1;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.vt-hero .carousel-indicators [data-bs-target].active {
  background-color: var(--vt-lime);
  transform: scale(1.2);
}

.vt-hero-carousel-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(0.5rem, 3vw, 2.5rem);
  pointer-events: none;
}

.vt-hero-carousel-control {
  position: static;
  pointer-events: auto;
  height: 2.75rem;
  width: 2.75rem;
  flex: none;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.vt-hero:hover .vt-hero-carousel-control,
.vt-hero-carousel-control:focus-visible {
  opacity: 1;
}

.vt-hero-carousel-control:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.vt-hero-carousel-control.carousel-control-prev:hover {
  transform: translateX(-2px);
}

.vt-hero-carousel-control.carousel-control-next:hover {
  transform: translateX(2px);
}

.vt-hero-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  color: #fff;
}

.vt-hero-carousel-arrow svg {
  width: 100%;
  height: 100%;
}

/* Below the lg breakpoint the hero row stacks (text above image). Phones and
   tablets in this range navigate the carousel by swiping, so hide the arrow
   controls entirely instead of repositioning them into normal flow. */
@media (max-width: 991.98px) {
  .vt-hero-inner {
    padding-top: 5em;
  }

  .vt-hero-carousel-nav {
    display: none;
  }
}

/* Page hero (interior pages) --------------------------------------------- */

.vt-page-hero {
  position: relative;
  background-image: linear-gradient(160deg, rgba(11, 31, 58, 0.94) 0%, rgba(23, 67, 154, 0.92) 100%),
    url("/static/images/hero/hero-multi-sector-records.webp");
  background-size: cover;
  background-position: right center;
  color: #fff;
  padding: 3.75rem 0;
  overflow: hidden;
}

.vt-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.5;
  pointer-events: none;
}

.vt-page-hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.vt-breadcrumb {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 1rem;
}

.vt-breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
}

.vt-page-hero .row {
  position: relative;
  z-index: 1;
}

/* Cards ---------------------------------------------------------------- */

.vt-card {
  position: relative;
  display: block;
  background-color: #fff;
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius);
  padding: 1.75rem;
  overflow: hidden;
  transition: box-shadow 0.25s var(--vt-ease), transform 0.25s var(--vt-ease), border-color 0.25s var(--vt-ease);
}

.vt-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--vt-grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--vt-ease);
}

.vt-card:hover {
  box-shadow: var(--vt-shadow);
  border-color: rgba(66, 139, 202, 0.35);
  transform: translateY(-4px);
}

.vt-card:hover::before {
  transform: scaleX(1);
}

.vt-card-img {
  display: block;
  width: calc(100% + 3.5rem);
  height: 160px;
  object-fit: cover;
  margin: -1.75rem -1.75rem 1.25rem;
  border-radius: 0;
  transition: transform 0.4s var(--vt-ease);
}

.vt-card:hover .vt-card-img {
  transform: scale(1.04);
}

.vt-card-img--contain {
  height: 420px;
  object-fit: contain;
  background-color: #fff;
  padding: 1.25rem;
}

.vt-card:hover .vt-card-img--contain {
  transform: none;
}

.vt-card-img--logo {
  height: 140px;
  object-fit: contain;
  background-color: #fff;
  padding: 1.5rem;
}

.vt-card:hover .vt-card-img--logo {
  transform: none;
}

.vt-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--vt-accent-light) 0%, #dbe9f5 100%);
  color: var(--vt-accent-deep);
  margin-bottom: 1rem;
  transition: transform 0.3s var(--vt-ease), background 0.3s ease, color 0.3s ease;
}

.vt-card:hover .vt-card-icon {
  background: var(--vt-grad-brand);
  color: #fff;
  transform: scale(1.06) rotate(-4deg);
}

/* Where a card leads with a badge and then an icon (How Vitro Works step 2),
   the badge is block-level and carries no bottom margin of its own, so the
   icon needs the gap under the pill. */
.vt-badge + .vt-card-icon {
  margin-top: 0.75rem;
}

.vt-card h3, .vt-card h4 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.vt-card p {
  color: var(--vt-slate);
  font-size: 0.93rem;
  margin-bottom: 0;
}

/* Step-by-step process flow (How Vitro Works) -------------------------- */

.vt-flow {
  display: flex;
  flex-direction: column;
}

.vt-flow-step {
  display: flex;
  gap: 1.5rem;
}

.vt-flow-step:not(:last-child) {
  padding-bottom: 2rem;
}

.vt-flow-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}

/* The step 1-3 screenshots are lower resolution than the step 4 banner, so
   they're capped at their natural width and centered rather than stretched
   full-bleed like .vt-hero-shot--banner, which would blur them. */
.vt-flow-shot {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.vt-flow-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vt-grad-brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: var(--vt-shadow-accent);
}

.vt-flow-line {
  flex: 1;
  width: 2px;
  min-height: 1.5rem;
  margin-top: 0.5rem;
  background: var(--vt-border);
}

.vt-flow-content {
  flex: 1;
}

@media (max-width: 767.98px) {
  .vt-flow-step {
    gap: 1rem;
  }

  .vt-flow-num {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* Client tiles on the Clients page keep a consistent height even when a row
   only has one or two cards, matching the taller rows elsewhere on the page.
   Content is centered vertically so shorter tiles (no case study button)
   don't leave a slab of empty space under the text. */
.vt-clients-page .vt-card {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Only client tiles that actually link to a client profile page should look
   interactive. Tiles with no destination (no .vt-card--linked) opt out of
   the site-wide .vt-card hover lift so they don't falsely invite a click. */
.vt-clients-page .vt-card:not(.vt-card--linked):hover {
  box-shadow: none;
  border-color: var(--vt-border);
  transform: none;
}

.vt-clients-page .vt-card:not(.vt-card--linked):hover::before {
  transform: scaleX(0);
}

/* Visible cue on linked client tiles so it's obvious without hovering that
   there's a client profile to read, not just a logo. */
.vt-card-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--vt-accent-deep);
}

.vt-card-hint svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--vt-ease);
}

.vt-card--linked:hover .vt-card-hint svg {
  transform: translateX(3px);
}

/* Byline under an eHealth Insight: publication date and, where the archive
   recorded one, the author. Smaller and quieter than body copy so it reads as
   metadata rather than the opening line of the article. */
.vt-insight-meta {
  font-size: 0.85rem;
  color: var(--vt-slate);
  margin-bottom: 0.75rem;
}

.vt-card .vt-insight-meta {
  margin-bottom: 0.5rem;
}

/* Benefit tiles (e.g. How Vitro Works "Why Hospitals Choose This Approach")
   fill the full height of their row so uneven copy lengths don't leave some
   tiles taller than others, with content centered vertically inside. */
.vt-benefit-grid .vt-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The "Read Case Study" button sits at the bottom of taller tiles (see
   .mt-auto in the markup) and should stay compact rather than stretching
   to the tile's full width. */
.vt-card-btn {
  align-self: flex-start;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

/* Tiles with both a "View Client" hint and a separate "Read Case Study"
   button (see .vt-card--linked markup) need more breathing room between the
   two calls to action, or the button reads as glued to the hint above it. */
.d-block.text-decoration-none + .vt-card-btn {
  margin-top: 1.75rem;
}

/* Stat band -------------------------------------------------------------- */

.vt-stat {
  text-align: center;
}

.vt-stat .num {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  background: var(--vt-grad-lime);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vt-stat .label {
  color: var(--vt-slate);
  font-size: 0.88rem;
  margin-top: 0.5rem;
}

/* Quote / testimonial ------------------------------------------------------ */

.vt-quote {
  position: relative;
  background-color: #fff;
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius);
  padding: 1.75rem;
  overflow: hidden;
}

.vt-quote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--vt-grad-brand);
}

.vt-quote blockquote {
  font-size: 1.02rem;
  color: var(--vt-ink);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.vt-quote blockquote::before {
  content: "\201C";
  background: var(--vt-grad-brand);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.2rem;
  font-weight: 800;
  display: block;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.vt-quote-source {
  font-size: 0.85rem;
  color: var(--vt-slate);
  font-weight: 600;
}

.vt-tagline-band {
  position: relative;
  background: linear-gradient(135deg, var(--vt-accent) 0%, var(--vt-accent-deep) 100%);
  color: var(--vt-navy);
  text-align: center;
  padding: 3.25rem 0;
  overflow: hidden;
}

.vt-tagline-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 200px at 50% 0%, rgba(255, 255, 255, 0.25), transparent 65%);
  pointer-events: none;
}

.vt-tagline-band h2 {
  position: relative;
  color: var(--vt-navy);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0;
}

/* CTA banner --------------------------------------------------------------- */

.vt-cta {
  background: var(--vt-grad-navy);
  border-radius: var(--vt-radius-lg);
  padding: 3rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.vt-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 240px at 90% 0%, rgba(66, 139, 202, 0.35), transparent 60%);
  pointer-events: none;
}

.vt-cta::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  right: -60px;
  bottom: -120px;
  pointer-events: none;
}

.vt-cta h2 {
  color: #fff;
  margin-bottom: 0.5rem;
}

.vt-cta p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
}

/* Pills / sub-nav ----------------------------------------------------------- */

.vt-pill-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.vt-pill-nav a {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--vt-border);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--vt-slate);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.vt-pill-nav a:hover {
  border-color: var(--vt-accent);
  color: var(--vt-navy);
  transform: translateY(-1px);
}

.vt-pill-nav a.active {
  background: var(--vt-grad-navy);
  border-color: var(--vt-navy);
  color: #fff;
}

/* Badges ------------------------------------------------------------------- */

.vt-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background-color: var(--vt-accent-light);
  color: var(--vt-accent-darker);
}

/* Lime fill at full brand strength, the same pairing .vt-eyebrow uses -- navy
   on #bebb31 is 8.1:1, so the pill stays readable on light and navy alike. */
.vt-badge--lime {
  background-color: var(--vt-lime);
  color: var(--vt-navy);
}

/* Takes the badge out of the text flow it would otherwise share with a
   following image, so it stacks above that image instead of sitting beside
   it. fit-content keeps the pill sized to its label rather than stretching
   the full column width the way a plain block would. */
.vt-badge--block {
  display: block;
  width: fit-content;
}

.vt-timeline-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex: none;
  min-width: 4.5rem;
  height: 2rem;
  text-align: center;
}

/* Footer --------------------------------------------------------------------- */

.vt-footer {
  position: relative;
  background-color: var(--vt-navy);
  color: rgba(255, 255, 255, 0.65);
  padding: 4rem 0 2rem;
}

.vt-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--vt-accent) 0%, var(--vt-blue) 50%, var(--vt-accent) 100%);
}

.vt-footer h6 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.vt-footer a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92rem;
  padding: 0.25rem 0;
}

.vt-footer a::after {
  content: "\2192";
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.vt-footer a:hover {
  color: #fff;
}

.vt-footer a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.vt-footer-brand {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
}

.vt-footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.vt-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vt-footer-social a::after {
  content: none;
}

.vt-footer-social a:hover {
  background-color: var(--vt-accent);
  color: var(--vt-navy);
  transform: translateY(-2px);
}

.vt-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 3rem;
  padding-top: 1.5rem;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
}

.vt-footer-bottom a {
  display: inline;
  padding: 0;
}

.vt-footer-bottom a::after {
  content: none;
}

/* Cookie consent banner --------------------------------------------------- */

.vt-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1055;
  background-color: var(--vt-navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 -12px 30px rgba(11, 31, 58, 0.25);
  transform: translateY(100%);
  transition: transform 0.3s var(--vt-ease);
}

.vt-cookie-banner.is-visible {
  transform: translateY(0);
}

.vt-cookie-banner-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.vt-cookie-banner-text {
  margin: 0;
  font-size: 0.9rem;
  max-width: 640px;
}

.vt-cookie-banner-text a {
  color: var(--vt-accent);
}

.vt-cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Team ------------------------------------------------------------------------ */

.vt-team-card {
  text-align: center;
}

.vt-team-avatar {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
  background: linear-gradient(135deg, var(--vt-accent) 0%, var(--vt-blue) 100%);
  color: #fff;
  box-shadow: var(--vt-shadow-accent);
}

/* Responsive ------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .vt-section {
    padding: 3.25rem 0;
  }

  .vt-hero-checklist {
    grid-template-columns: 1fr;
  }

  .vt-cta {
    padding: 2rem;
    text-align: center;
  }
}