/* ==========================================================================
   West Analytical Services — Shared Stylesheet
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --was-navy: #002f6d;
  --was-cyan: #00a0c8;
  --was-blue: #005596;
  --was-green: #017a35;
  --was-black: #000;
  --was-white: #fff;
  --was-card-bg: #ecfafc;
  --was-card-border: #59e3ed;
  --was-divider: #d8eef8;
  --was-shadow: 0 0 12px rgba(0, 85, 150, 0.12);
  --was-radius-card: 32px;
  --was-radius-btn: 4px;
  --was-font-serif: "Noto Serif", Georgia, serif;
  --was-font-sans: "Open Sans", Arial, sans-serif;
}


/* ==========================================================================
   1. HERO — Desktop  (Figma 1398:2832 — 1440 × 443)
   ========================================================================== */

.was-hero {
  width: 100%;
  height: 443px;
  padding: 20px max(100px, calc((100% - 1240px) / 2));
  display: flex;
  align-items: center;
  gap: 83px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(89.8deg, rgba(255,255,255,0) 25.265%, rgba(0,160,200,0.12) 83.743%),
    linear-gradient(90deg, #fff 0%, #fff 100%);
}

.was-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(0,85,150,0.03) 0%, rgba(0,85,150,0.03) 14%,
      transparent 14%, transparent 30%,
      rgba(0,85,150,0.03) 30%, rgba(0,85,150,0.03) 44%,
      transparent 44%, transparent 60%,
      rgba(0,85,150,0.03) 60%, rgba(0,85,150,0.03) 74%,
      transparent 74%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.was-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--was-hero-bg, none) center/cover no-repeat;
  opacity: 0.56;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.was-hero > * {
  position: relative;
  z-index: 2;
}

/* --- Hero media (Figma desktop: 565.92 × 318.6) --- */
.was-hero__media {
  width: 565.92px;
  max-width: 45%;
  height: 318.6px;
  border-radius: var(--was-radius-card);
  background: var(--was-white);
  box-shadow: var(--was-shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

.was-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.was-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Hero content (Figma desktop: w518) --- */
.was-hero__content {
  width: 518px;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.was-hero__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.was-hero__logo {
  width: 143px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.was-hero__title {
  margin: 0;
  font-family: var(--was-font-serif);
  font-size: 32px;
  line-height: 1.24;
  color: var(--was-navy);
  font-weight: 500;
}

.was-hero__text {
  margin: 8px 0 0;
  width: 509px;
  max-width: 100%;
  font-size: 18px;
  line-height: 1.32;
  color: var(--was-black);
  font-family: var(--was-font-sans);
}

.was-hero__cta {
  margin-top: 28px;
  border: 0;
  border-radius: var(--was-radius-btn);
  background: var(--was-green);
  color: var(--was-white);
  font-family: var(--was-font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  height: 40px;
  padding: 0 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.was-hero__cta:hover {
  opacity: 1;
  color: var(--was-white);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(1, 122, 53, 0.3);
}

.was-hero__cta:active {
  transform: translateY(0);
}

.was-hero__cta:focus-visible {
  outline: 2px solid var(--was-blue);
  outline-offset: 2px;
}


/* ==========================================================================
   1b. HERO — Tablet  (768px–1280px)
   Graceful scale-down; stays horizontal but tighter.
   ========================================================================== */

@media (max-width: 1280px) {
  .was-hero {
    height: auto;
    min-height: 380px;
    padding: 20px 48px;
    gap: 40px;
  }
  .was-hero__media {
    width: 480px;
    max-width: 42%;
    height: 270px;
    border-radius: 28px;
  }
  .was-hero__content {
    width: auto;
    max-width: 55%;
  }
  .was-hero__title { font-size: 30px; }
  .was-hero__text  { font-size: 17px; width: auto; }
}

@media (max-width: 1024px) {
  .was-hero {
    padding: 20px 32px;
    gap: 32px;
  }
  .was-hero__media {
    width: 400px;
    max-width: 40%;
    height: 225px;
    border-radius: 24px;
  }
  .was-hero__title { font-size: 28px; }
  .was-hero__text  { font-size: 16px; }
  .was-hero__cta   { font-size: 15px; }
}

@media (max-width: 900px) and (min-width: 768px) {
  .was-hero {
    padding: 16px 24px;
    gap: 24px;
    min-height: 340px;
  }
  .was-hero__media {
    width: 340px;
    max-width: 40%;
    height: 192px;
    border-radius: 20px;
  }
  .was-hero__content { max-width: 56%; }
  .was-hero__logo    { width: 125px; height: 28px; }
  .was-hero__title   { font-size: 24px; }
  .was-hero__text    { font-size: 15px; margin-top: 6px; }
  .was-hero__cta     { font-size: 14px; margin-top: 20px; }
}


/* ==========================================================================
   1c. HERO — Mobile  (360px – 430px)
   Column layout per Figma 1404:3682 (432 × 500).
   Order: logo+title → image → text → CTA
   Single breakpoint for ALL phones. Uses percentage-based spacing so it
   scales uniformly from 360px to 430px.
   Figma reference padding: ~8.6% left, ~8% right on a 432px frame.
   ========================================================================== */

@media (max-width: 767px) {
  .was-hero {
    width: 100%;
    height: auto;
    min-height: 450px;
    padding: 24px 0 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .was-hero__content {
    display: contents;
    width: auto;
    max-width: none;
  }

  .was-hero__header {
    order: 1;
    width: auto;
    max-width: calc(100% - 16%);
    gap: 6px;
    padding: 0 8% 0 8.5%;
  }

  .was-hero__logo {
    width: 125px;
    height: 28px;
  }

  .was-hero__title {
    font-size: 28px;
    white-space: nowrap;
  }

  .was-hero__media {
    order: 2;
    width: 84%;
    max-width: 84%;
    height: auto;
    aspect-ratio: 363 / 204;
    border-radius: 20px;
    margin: 19px auto 0;
    margin-left: 7.6%;
    margin-right: 8.4%;
    flex-shrink: 0;
  }

  .was-hero__text {
    order: 3;
    width: auto;
    max-width: none;
    font-size: 16px;
    line-height: 1.32;
    margin: 15px 8% 0 8.8%;
  }

  .was-hero__cta {
    order: 4;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    margin: 18px 0 0 8.8%;
    white-space: nowrap;
  }
}


/* ==========================================================================
   2. SERVICES SECTION  (Figma: tabbed E&L / CCI / Performance / etc.)
   Left sticky nav + right content pane; mobile dropdown replaces nav.
   ========================================================================== */

/* --- Component root --- */
.wvs-component {
  position: relative;
  width: 100%;
  padding: 0;
  background-color: #F6FBFD;
}
.wvs-component[data-panel-even] { background-color: #F6FBFD; }
.wvs-component[data-panel-odd]  { background-color: #F6FBFD; }

.wvs-component::before,
.wvs-component::after {
  display: none;
}

/* --- Two-column layout --- */
.wvs-component .layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: 48px;
  padding: 0 max(100px, calc((100% - 1240px) / 2));
  align-items: flex-start;
}

/* Laptop and above: add top padding above the two-column layout */
@media (min-width: 1025px) {
  .wvs-component .layout {
    padding-top: 24px;
  }
}

/* --- Left sticky nav --- */
.wvs-component .left {
  width: 317px;
  max-width: 100%;
  position: sticky;
  top: var(--wvs-sticky-top, 0);
  align-self: flex-start;
  padding: 56px 0;
  flex-shrink: 0;
  z-index: 2;
}

.wvs-component .tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 21.252px;
  max-width: 100%;
}

.wvs-component .tab-row {
  max-width: 100%;
  width: 500.48px;
  height: 51.004px;
  display: flex;
  align-items: center;
  gap: 8.501px;
  text-decoration: none;
}

.wvs-component .icon-active {
  width: 34.003px;
  height: 34.003px;
  flex-shrink: 0;
  display: block;
}

.wvs-component .icon-inactive-wrap {
  width: 34.003px;
  height: 34.003px;
  border-radius: 28.69px;
  flex-shrink: 0;
  position: relative;
}

.wvs-component .icon-inactive-inner {
  position: absolute;
  inset: 8.03% 8.03% 9.59% 9.59%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wvs-component .icon-inactive-rot {
  width: 72%;
  height: 72%;
  transform: rotate(317.5deg);
  position: relative;
}

.wvs-component .icon-inactive-rot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.wvs-component .tab-label {
  min-width: 0;
  max-width: 100%;
  width: 440.975px;
  height: 51.004px;
  padding: 0 66.943px 0 4.25px;
  display: flex;
  align-items: center;
  font-size: 18px;
  white-space: normal;
  line-height: normal;
  font-family: var(--was-font-sans);
  text-decoration: none;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.wvs-component .tab-label.active {
  color: var(--was-blue);
  font-weight: 500;
  letter-spacing: -0.36px;
}

.wvs-component .tab-label.inactive {
  color: var(--was-cyan);
  font-weight: 500;
  letter-spacing: -0.72px;
}

.wvs-component .connector {
  position: absolute;
  left: 17px;
  width: 1px;
  height: 21.252px;
}

.wvs-component .connector img {
  width: 1px;
  height: 21.252px;
  display: block;
}

.wvs-component .connector.c1 { top: 51px; }
.wvs-component .connector.c2 { top: 123.26px; }
.wvs-component .connector.c3 { top: 195.52px; }
.wvs-component .connector.c4 { top: 267.77px; }

/* --- Right content pane --- */
.wvs-component .right {
  flex: 1;
  min-width: 0;
  max-width: 868px;
  overflow-x: visible;
  overflow-y: visible;
  padding: 56px 0;
  transition: opacity 0.3s ease;
}

@keyframes wvs-fadeSlideIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wvs-component .right.is-entering {
  animation: wvs-fadeSlideIn 0.4s ease-out both;
}

/* --- Panel hero (grid: text left, image right) --- */
.wvs-component .hero {
  display: grid;
  grid-template-columns: minmax(0, 459px) 354px;
  grid-template-rows: auto auto auto;
  column-gap: 48px;
  row-gap: 0;
  align-items: start;
}

.wvs-component .hero-title {
  margin: 0;
  grid-column: 1;
  grid-row: 1;
  font-family: var(--was-font-serif);
  color: var(--was-navy);
  font-size: 32px;
  line-height: 1.24;
  font-weight: 500;
}

.wvs-component .hero .desc {
  grid-column: 1;
  grid-row: 2;
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.32;
  color: var(--was-black);
}

.wvs-component .hero .cta {
  grid-column: 1;
  grid-row: 3;
  margin-top: 28px;
  justify-self: start;
  display: inline-flex;
  width: fit-content;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: var(--was-green);
  border: 2px solid var(--was-green);
  border-radius: var(--was-radius-btn);
  color: var(--was-white);
  font-family: var(--was-font-sans);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.wvs-component .hero-image {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 354px;
  max-width: 100%;
  height: 238px;
  border-radius: 20px;
  overflow: hidden;
  justify-self: end;
}

.wvs-component .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Divider lines --- */
.wvs-component .line {
  width: 100%;
  height: 2px;
  margin: 37px 0;
  background: var(--was-divider);
  border: 0;
}

/* --- Content blocks (headings + text/lists) --- */
.wvs-component .block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.wvs-component .block h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.24;
  font-weight: 600;
  color: var(--was-black);
  font-family: var(--was-font-sans);
}

.wvs-component .block p {
  margin: 0;
  font-size: 16px;
  line-height: 1.32;
  word-wrap: break-word;
}


.wvs-component .block ul {
  margin: 0;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.55;
}

.wvs-component .block ul li {
  margin-bottom: 4px;
}

.wvs-component .block ul li:last-child {
  margin-bottom: 0;
}

/* --- Related content carousel --- */
.wvs-component .related-content-block { min-width: 0; }

.wvs-component .related-wrap {
  position: relative;
  min-width: 0;
}

.wvs-component .related-viewport {
  width: 100%;
  min-width: 0;
}

.wvs-component .related-wrap .owl-prev,
.wvs-component .related-wrap .owl-next {
  width: 57.408px;
  height: 57.408px;
  padding: 8.832px;
  border: none;
  border-radius: 56.304px;
  background: #fff;
  color: var(--was-green);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s, opacity 0.2s, transform 0.15s;
  z-index: 3;
  position: absolute;
  top: calc(50% - 28.704px);
}

.wvs-component .related-wrap .owl-prev  { left: -28.704px; }
.wvs-component .related-wrap .owl-next  { right: -28.704px; }

.wvs-component .related-wrap .owl-nav-icon {
  display: block;
  pointer-events: none;
}

.wvs-component .related-wrap .owl-prev:hover:not(:disabled),
.wvs-component .related-wrap .owl-next:hover:not(:disabled) {
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.18);
}

.wvs-component .related-wrap .owl-prev:active:not(:disabled),
.wvs-component .related-wrap .owl-next:active:not(:disabled) {
  transform: scale(0.97);
}

.wvs-component .related-wrap .owl-prev:disabled,
.wvs-component .related-wrap .owl-next:disabled {
  opacity: 0.38;
  cursor: default;
  box-shadow: 0 1px 4px rgba(0, 47, 109, 0.06);
}

/* --- Cards --- */
.wvs-component .cards {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 32px;
  overflow: hidden;
}

.wvs-component .card {
  width: 268px;
  flex: 0 0 268px;
  height: 360px;
  border: 1px solid var(--was-card-border);
  border-radius: 16px;
  background: var(--was-card-bg);
  padding: 20px 12px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: left;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.wvs-component .card.card--hidden    { display: none; }
.wvs-component .card.card--fading-out { opacity: 0; transform: translateX(30px); }
.wvs-component .card.card--fading-in  { opacity: 0; transform: translateX(-30px); }

.wvs-component .card .card-title {
  margin: 0;
  padding: 0;
  font-family: var(--was-font-serif);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--was-navy);
  width: 220px;
  align-self: center;
}

.wvs-component .card-rule {
  display: block;
  flex-shrink: 0;
  align-self: center;
  width: 220px;
  height: 3px;
  margin: 0;
  border: 0;
  background-color: var(--was-cyan);
}

.wvs-component .card .card-text {
  margin: 0;
  padding: 0;
  font-family: var(--was-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
  word-wrap: break-word;
  width: 220px;
  height: calc(14px * 1.4 * 4);
  flex: 0 0 calc(14px * 1.4 * 4);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

.wvs-component .card-img {
  margin: 0;
  align-self: center;
  width: 190px;
  max-width: 100%;
  height: 142px;
  flex-shrink: 0;
}

.wvs-component .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wvs-component .card-cta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 33px;
  margin: auto 0 0;
  padding: 0 12px 20px;
  border: none;
  background: none;
  font-family: var(--was-font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  color: var(--was-green);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.wvs-component .card-cta:hover { color: var(--was-blue); }

.wvs-component .card-cta-icon {
  display: block;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* --- Mobile service dropdown (hidden on desktop) --- */
.wvs-component .mobile-service-nav {
  display: none;
  position: relative;
  z-index: 11;
}

.wvs-component .mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 47px;
  width: 100%;
  margin: 0;
  padding: 13px 23px;
  border: none;
  border-radius: 32px;
  cursor: pointer;
  background: linear-gradient(90deg, var(--was-cyan) 0%, var(--was-blue) 100%);
  color: var(--was-white);
  font-family: var(--was-font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.24;
  text-align: left;
}

.wvs-component .mobile-dropdown-toggle img {
  flex-shrink: 0;
  width: 15px;
  height: 9px;
  display: block;
}

.wvs-component .mobile-dropdown-toggle[aria-expanded="true"] img {
  transform: rotate(180deg);
}

.wvs-component .mobile-dropdown-menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0;
  border-radius: 16px;
  background: var(--was-white);
  box-shadow: 0 8px 24px rgba(0, 47, 109, 0.12);
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

.wvs-component .mobile-dropdown-menu li { margin: 0; }

.wvs-component .mobile-dropdown-menu button {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: none;
  background: transparent;
  font-family: var(--was-font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--was-cyan);
  text-align: left;
  cursor: pointer;
}

.wvs-component .mobile-dropdown-menu button:hover,
.wvs-component .mobile-dropdown-menu button:focus-visible {
  background: rgba(0, 160, 200, 0.08);
  outline: none;
}

.wvs-component .mobile-dropdown-menu button.is-current {
  color: var(--was-blue);
  font-weight: 700;
}


/* ==========================================================================
   2a. SERVICES SECTION — Small laptop  (1281px–1439px)
   At 1366 the right column is ~801px; 3 fixed 268px cards + 2×32 gap = 868px
   and the 3rd card gets cut off. Covers 1366 laptops, 1400 Surface, and
   anything below the 1440 base desktop width. Shrinks layout padding and
   lets cards flex so all 3 fit cleanly.
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1281px) {
  .wvs-component .layout {
    gap: 40px;
    padding: 0 clamp(40px, 4vw, 72px);
  }
  .wvs-component .card {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 268px;
  }
  .wvs-component .cards { gap: 24px; }
  .wvs-component .card .card-title,
  .wvs-component .card .card-rule,
  .wvs-component .card .card-text { width: 100%; }
  .wvs-component .card-img { width: 180px; max-width: 100%; height: 135px; }
}


/* ==========================================================================
   2b. SERVICES SECTION — Tablet  (768px–1280px)
   Mirrors hero breakpoints: graceful scale-down, stays two-column.
   ========================================================================== */

@media (max-width: 1280px) {
  .wvs-component .layout {
    gap: 32px;
    padding: 0 clamp(16px, 3vw, 48px);
  }
  .wvs-component .left {
    width: 260px;
    padding: 40px 0;
  }
  .wvs-component .right {
    padding: 40px 0;
  }
  .wvs-component .tab-label {
    font-size: 16px;
    padding-right: 24px;
  }
  .wvs-component .hero {
    grid-template-columns: minmax(0, 1fr) 280px;
    column-gap: 32px;
  }
  .wvs-component .hero-title { font-size: 30px; }
  .wvs-component .hero .desc { font-size: 17px; }
  .wvs-component .hero-image {
    width: 280px;
    height: 190px;
  }
  .wvs-component .card {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 268px;
    height: 380px;
  }
  .wvs-component .cards { gap: 24px; }
  .wvs-component .card .card-title,
  .wvs-component .card .card-rule,
  .wvs-component .card .card-text { width: 100%; }
  .wvs-component .card-img { width: 170px; max-width: 100%; height: 128px; }
}

@media (max-width: 1024px) {
  .wvs-component .layout {
    gap: 24px;
    padding: 0 clamp(16px, 3vw, 32px);
  }
  .wvs-component .left {
    width: 220px;
    padding: 32px 0;
  }
  .wvs-component .right {
    padding: 32px 0;
  }
  .wvs-component .tab-label {
    font-size: 15px;
    height: 44px;
  }
  .wvs-component .tab-row {
    height: 44px;
  }
  .wvs-component .tabs {
    gap: 16px;
  }
  .wvs-component .connector,
  .wvs-component .connector img {
    height: 16px;
  }
  .wvs-component .connector.c1 { top: 44px; }
  .wvs-component .connector.c2 { top: 104px; }
  .wvs-component .connector.c3 { top: 164px; }
  .wvs-component .connector.c4 { top: 224px; }
  .wvs-component .hero {
    grid-template-columns: minmax(0, 1fr) 240px;
    column-gap: 24px;
  }
  .wvs-component .hero-title { font-size: 28px; }
  .wvs-component .hero .desc { font-size: 16px; }
  .wvs-component .hero .cta  { font-size: 15px; margin-top: 20px; }
  .wvs-component .hero-image {
    width: 240px;
    height: 162px;
    border-radius: 16px;
  }
  .wvs-component .block h2 { font-size: 22px; }
  .wvs-component .line { margin: 28px 0; }
  .wvs-component .card {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 240px;
    height: 360px;
    padding: 16px 10px 24px;
  }
  .wvs-component .cards { gap: 16px; }
  .wvs-component .card .card-title { font-size: 18px; width: 100%; }
  .wvs-component .card .card-rule   { width: 100%; }
  .wvs-component .card .card-text {
    width: 100%;
    font-size: 13px;
    height: calc(13px * 1.4 * 4);
    flex-basis: calc(13px * 1.4 * 4);
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
  .wvs-component .card-img    { width: 150px; max-width: 100%; height: 112px; }
  .wvs-component .card-cta    { font-size: 12px; }
  .wvs-component .related-wrap .owl-prev,
  .wvs-component .related-wrap .owl-next {
    width: 57.408px;
    height: 57.408px;
  }
  .wvs-component .related-wrap .owl-prev { left: -28.704px; }
  .wvs-component .related-wrap .owl-next { right: -28.704px; }
}

@media (max-width: 900px) and (min-width: 768px) {
  .wvs-component .layout {
    gap: 20px;
    padding: 0 20px;
  }
  .wvs-component .left {
    width: 190px;
    padding: 28px 0;
  }
  .wvs-component .right {
    padding: 28px 0;
  }
  .wvs-component .tab-label {
    font-size: 14px;
    height: 40px;
    padding-right: 12px;
  }
  .wvs-component .tab-row { height: 40px; }
  .wvs-component .tabs { gap: 12px; }
  .wvs-component .icon-active,
  .wvs-component .icon-inactive-wrap {
    width: 28px;
    height: 28px;
  }
  .wvs-component .connector {
    left: 14px;
  }
  .wvs-component .connector,
  .wvs-component .connector img {
    height: 12px;
  }
  .wvs-component .connector.c1 { top: 40px; }
  .wvs-component .connector.c2 { top: 92px; }
  .wvs-component .connector.c3 { top: 144px; }
  .wvs-component .connector.c4 { top: 196px; }
  .wvs-component .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .wvs-component .hero-title {
    grid-column: 1;
    font-size: 24px;
  }
  .wvs-component .hero-image {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 320px;
    height: 180px;
    margin-top: 16px;
    border-radius: 16px;
    justify-self: start;
  }
  .wvs-component .hero .desc {
    grid-column: 1;
    font-size: 15px;
  }
  .wvs-component .hero .cta {
    grid-column: 1;
    font-size: 14px;
    margin-top: 16px;
  }
  .wvs-component .block h2 { font-size: 20px; }
  .wvs-component .block ul { font-size: 15px; }
  .wvs-component .line { margin: 24px 0; }
  .wvs-component .card {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 220px;
    height: 340px;
    padding: 14px 8px 22px;
  }
  .wvs-component .cards { gap: 12px; }
  .wvs-component .card .card-title { font-size: 16px; width: 100%; }
  .wvs-component .card .card-rule   { width: 100%; }
  .wvs-component .card .card-text {
    width: 100%;
    font-size: 12px;
    height: calc(12px * 1.4 * 4);
    flex-basis: calc(12px * 1.4 * 4);
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
  .wvs-component .card-img    { width: 130px; max-width: 100%; height: 98px; }
  .wvs-component .card-cta    { font-size: 11px; }
  .wvs-component .related-wrap .owl-prev,
  .wvs-component .related-wrap .owl-next {
    width: 57.408px;
    height: 57.408px;
  }
  .wvs-component .related-wrap .owl-prev { left: -28.704px; }
  .wvs-component .related-wrap .owl-next { right: -28.704px; }
}


/* ==========================================================================
   2c. SERVICES SECTION — Mobile  (<=767px)
   Dropdown nav replaces left sticky nav; single-column layout.
   ========================================================================== */

@media (max-width: 767px) {
  .wvs-component::after {
    background-size: 478.8px 292px;
    opacity: 0.12;
  }

  .wvs-component .mobile-service-nav {
    display: block;
    position: sticky;
    top: 0;
    padding: 32px clamp(16px, 5vw, 38px) 0;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 85%, rgba(255,255,255,0) 100%);
  }

  /* --- Mobile dropdown toggle / COLLAPSED state  (Figma 1410:4508) -----
     White pill with 3px cyan border and cyan→blue gradient text. */
  .wvs-component .mobile-dropdown-toggle {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 13px 23px;
    gap: 12px;
    background: var(--was-white);
    border: 3px solid var(--was-cyan);
    border-radius: 32px;
    box-shadow: 0 0 12px rgba(0, 160, 200, 0.12);
  }

  .wvs-component .mobile-dropdown-toggle > span {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--was-font-sans);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.24;
    text-align: left;
    background: linear-gradient(90deg, var(--was-cyan) 0%, var(--was-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .wvs-component .mobile-dropdown-toggle img {
    width: 15px;
    height: 9px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }

  /* --- Mobile dropdown menu / EXPANDED state  (Figma 1649:1851) -------
     Rounded 32px white card sitting below the header pill. */
  .wvs-component .mobile-dropdown-menu {
    width: 100%;
    max-width: 360px;
    margin: 12px auto 0;
    padding: 16px 23px;
    border-radius: 32px;
    background: var(--was-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    list-style: none;
    max-height: min(60vh, 420px);
    overflow-y: auto;
  }

  .wvs-component .mobile-dropdown-menu li {
    margin: 0;
  }

  /* Non-current panels: bold cyan */
  .wvs-component .mobile-dropdown-menu button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: transparent;
    font-family: var(--was-font-sans);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.24;
    color: var(--was-cyan);
    text-align: left;
    cursor: pointer;
  }

  /* Current/active panel: regular weight, dark blue */
  .wvs-component .mobile-dropdown-menu button.is-current {
    font-weight: 400;
    color: var(--was-blue);
  }

  .wvs-component .mobile-dropdown-menu button:hover,
  .wvs-component .mobile-dropdown-menu button:focus-visible {
    background: rgba(0, 160, 200, 0.08);
    outline: none;
    border-radius: 12px;
  }

  .wvs-component .layout {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 clamp(16px, 5vw, 38px) 56px;
  }

  .wvs-component .left { display: none; }

  .wvs-component .right {
    max-width: none;
    width: 100%;
    padding: 24px 0 0;
  }

  .wvs-component .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .wvs-component .hero-title {
    order: 1;
    max-width: 325px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.24;
  }

  .wvs-component .hero-image {
    grid-column: auto;
    grid-row: auto;
    order: 2;
    width: 100%;
    max-width: 358px;
    height: 204px;
    margin: 24px auto 0;
    align-self: center;
    border-radius: 20px;
    box-shadow: var(--was-shadow);
    background: var(--was-white);
  }

  .wvs-component .hero-image img { border-radius: 20px; }

  .wvs-component .hero .desc {
    order: 3;
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.32;
    max-width: 358px;
  }

  .wvs-component .hero .cta {
    order: 4;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 700;
  }

  .wvs-component .line {
    height: 1px;
    margin: 32px 0;
    border: 0;
  }

  .wvs-component .block h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.24;
  }

  .wvs-component .block p {
    font-size: 16px;
    line-height: 1.4;
  }

  .wvs-component .block ul {
    font-size: 16px;
    line-height: 1.55;
    padding-left: 21px;
  }

  .wvs-component .related-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .wvs-component .related-wrap .owl-prev,
  .wvs-component .related-wrap .owl-next {
    width: 57.408px;
    height: 57.408px;
  }

  .wvs-component .related-wrap .owl-prev {
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
  }

  .wvs-component .related-wrap .owl-next {
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
  }

  .wvs-component .related-wrap .related-viewport {
    order: 2;
    width: 100%;
  }

  .wvs-component .cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .wvs-component .card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 356px;
    height: auto;
    min-height: 0;
    padding: 20px 24px 36px;
    box-sizing: border-box;
  }

  .wvs-component .card .card-title {
    font-size: 22px;
    width: 100%;
    align-self: stretch;
  }

  .wvs-component .card .card-rule {
    width: 100%;
    align-self: stretch;
  }

  .wvs-component .card .card-text {
    font-size: 14px;
    width: 100%;
    align-self: stretch;
    min-height: calc(14px * 1.4 * 4);
    height: calc(14px * 1.4 * 4);
    flex-basis: calc(14px * 1.4 * 4);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  .wvs-component .card-cta {
    font-size: 14px;
    align-self: center;
    justify-content: center;
  }

  .wvs-component .card-img {
    width: 233px;
    max-width: 100%;
    height: 175px;
  }

  .wvs-component .card-rule {
    height: 2px;
  }
}


/* ==========================================================================
   3. MIDNAV — "Explore more West Vantage Services"
   Desktop Figma 1665:531 — 1440 × 327
   Mobile  Figma 1649:281 — 432 × 655
   ========================================================================== */

/* --- Section root --- */
.wvs-midnav {
  position: relative;
  width: 100%;
  padding: 45px max(100px, calc((100% - 1240px) / 2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  border-radius: 8px;
  background:
    linear-gradient(141.25deg, rgba(0, 160, 200, 0.022) 0%, rgba(0, 160, 200, 0.045) 100%),
    linear-gradient(90deg, #fff 0%, #fff 100%);
}

/* --- Title (Figma: Noto Serif SemiBold 28px #002f6d centered) --- */
.wvs-midnav__title {
  margin: 0;
  font-family: var(--was-font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.24;
  color: var(--was-navy);
  text-align: center;
}

.wvs-midnav__title sup {
  font-size: 0.645em;
  vertical-align: super;
  line-height: 0;
}

/* --- Tabs wrapper (Figma Frame 117: 1240 × 172) --- */
.wvs-midnav__tabs-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 172px;
  overflow: visible;
}

/* --- Tabs strip (Figma Tabs: 1167 × 221, positioned at y -24.5 inside 172px)
      No CSS padding — tile internal positioning handles spacing.
      Vertical centering within the 172px wrapper naturally places it. --- */
.wvs-midnav__tabs {
  width: 1167px;
  max-width: 100%;
  height: 172px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 43.447px;
  overflow: visible;
}

/* --- Individual tile: sized to visible card area only.
      Figma card: left 30, top 24, 160 × 162 inside 221.852 container.
      We use the card as the tile itself: 160 × 162. --- */
.wvs-midnav__tile {
  position: relative;
  width: 160px;
  height: 162px;
  flex-shrink: 0;
  display: block;
  text-decoration: none;
  border-radius: 32px;
  overflow: hidden;
}

.wvs-midnav__tile:hover {
  text-decoration: none;
}

/* --- Card background (fills tile) --- */
.wvs-midnav__tile-card {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: linear-gradient(44.57deg, rgba(0, 160, 200, 0.56) 46.4%, rgba(0, 160, 200, 0.12) 99.8%);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.wvs-midnav__tile.is-active .wvs-midnav__tile-card {
  background: linear-gradient(44.57deg, rgb(0, 85, 150) 0.6%, rgba(0, 85, 150, 0.56) 99.2%);
}

/* Figma hover 1643:133 — layered backgrounds (diagonal over solid 90deg cyan).
   Rest: single diagonal on .tile-card. Hover: card goes transparent, ::after
   fades in with both layers + inner highlight (matches Figma stack order). */
.wvs-midnav__tile:not(.is-active) .wvs-midnav__tile-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(44.57097207926578deg, rgba(0, 160, 200, 0.56) 46.403%, rgba(0, 160, 200, 0.12) 99.817%),
    linear-gradient(90deg, rgba(0, 160, 200, 0.56) 0%, rgba(0, 160, 200, 0.56) 100%);
  box-shadow: inset 0 0 56px rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 2;
}

.wvs-midnav__tile:not(.is-active):hover .wvs-midnav__tile-card,
.wvs-midnav__tile:not(.is-active):focus-visible .wvs-midnav__tile-card {
  background: transparent;
}

.wvs-midnav__tile:not(.is-active):hover .wvs-midnav__tile-card::after,
.wvs-midnav__tile:not(.is-active):focus-visible .wvs-midnav__tile-card::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .wvs-midnav__tile:not(.is-active) .wvs-midnav__tile-card::after {
    transition-duration: 0.01ms;
  }
}

/* --- Hover overlay span (kept in markup for parity; visual hover uses ::after) --- */
.wvs-midnav__tile-hover {
  display: none;
}

/* --- Icon (Figma: centered horizontally in 160px card, upper area)
      Original: left 86.5 in 221.852 container = 86.5 - 30 (card offset) = 56.5 in card
      Center of 49px icon: 56.5 + 24.5 = 81 ≈ center of 160 (80). So icon is centered.
      top: 47 in 221.852 = 47 - 24 = 23 in card --- */
.wvs-midnav__tile-icon {
  position: absolute;
  left: 50%;
  top: 23px;
  transform: translateX(-50%);
  width: 49px;
  height: 49px;
  object-fit: contain;
  display: block;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}

.wvs-midnav__tile:not(.is-active):hover .wvs-midnav__tile-icon {
  opacity: 0;
}

/* --- Diamond chevron: small diamond at rest, grows to fill card on hover
      Figma: left 121.9px in 160px card, top 25.39px → right ~21px --- */
.wvs-midnav__tile-chevron {
  position: absolute;
  right: 21px;
  top: 25px;
  width: 16.971px;
  height: 16.971px;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  transform: translate(0, 0) scale(1);
  /* Symmetric, no delay — responds immediately in both directions. */
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.45s ease-in-out;
}

.wvs-midnav__tile-chevron img {
  width: 12px;
  height: 12px;
  /* Match mobile pill chevron orientation */
  transform: rotate(-135deg) scaleY(-1);
  display: block;
  transition: opacity 0.45s ease-in-out;
}

.wvs-midnav__tile:not(.is-active):hover .wvs-midnav__tile-chevron img {
  opacity: 0;
}

.wvs-midnav__tile:not(.is-active):hover .wvs-midnav__tile-chevron {
  transform: translate(-50.5px, 47.5px) scale(18);
  opacity: 0;
}

.wvs-midnav__tile.is-active .wvs-midnav__tile-chevron {
  display: none;
}

/* --- Default label (Figma: centered in 160 card, lower area)
      Original: left calc(50%) in 221.852, top calc(50% - 5.93px) in 221.852.
      In card coords: horizontally centered, top = (221.852/2 - 5.93) - 24 = 81px --- */
.wvs-midnav__tile-label {
  position: absolute;
  left: 50%;
  top: 81px;
  transform: translateX(-50%);
  width: 121.126px;
  font-family: var(--was-font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 17.072px;
  text-align: center;
  color: #fff;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}

/* Active label: top = (221.852/2 - 25.93) - 24 ≈ 61px */
.wvs-midnav__tile.is-active .wvs-midnav__tile-label {
  font-weight: 400;
  font-size: 16px;
  line-height: 20.072px;
  top: 61px;
}

.wvs-midnav__tile:not(.is-active):hover .wvs-midnav__tile-label {
  opacity: 0;
}

/* --- Hover label: appears after diamond expands --- */
.wvs-midnav__tile-hover-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  font-family: var(--was-font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  /* Hover-out: fade out immediately, no delay. */
  transition: opacity 0.25s ease-in-out;
}

.wvs-midnav__tile:not(.is-active):hover .wvs-midnav__tile-hover-label {
  opacity: 1;
  /* Hover-in: wait for the diamond reveal before appearing. */
  transition: opacity 0.35s ease-in-out 0.25s;
}

.wvs-midnav__tile.is-active .wvs-midnav__tile-hover-label {
  display: none;
}

/* --- Mobile pills (hidden on desktop) --- */
.wvs-midnav__pills {
  display: none;
}


/* ==========================================================================
   3b. MIDNAV — Tablet (768px–1280px)
   ========================================================================== */

@media (max-width: 1280px) {
  .wvs-midnav {
    padding: 40px 48px;
    gap: 28px;
  }

  .wvs-midnav__tabs-wrap {
    height: 150px;
  }

  .wvs-midnav__tabs {
    width: 100%;
    height: 150px;
    padding: 0 10px;
    border-radius: 36px;
  }

  .wvs-midnav__tile {
    width: 140px;
    height: 148px;
    border-radius: 28px;
  }

  .wvs-midnav__tile-card,
  .wvs-midnav__tile-hover {
    border-radius: 28px;
  }

  .wvs-midnav__tile-icon {
    top: 20px;
    width: 42px;
    height: 42px;
  }

  .wvs-midnav__tile-chevron {
    left: auto;
    right: 18px;
    top: 20px;
    width: 14px;
    height: 14px;
  }

  .wvs-midnav__tile-chevron img {
    width: 10px;
    height: 10px;
  }

  .wvs-midnav__tile-label {
    width: 110px;
    font-size: 13px;
    line-height: 16px;
    top: 68px;
  }

  .wvs-midnav__tile.is-active .wvs-midnav__tile-label {
    font-size: 14px;
    line-height: 18px;
    top: 52px;
  }

  .wvs-midnav__tile-hover-label {
    width: 120px;
    font-size: 14px;
    line-height: 18px;
  }
}

@media (max-width: 1024px) {
  .wvs-midnav {
    padding: 36px 32px;
    gap: 24px;
  }

  .wvs-midnav__title {
    font-size: 24px;
  }

  .wvs-midnav__tabs {
    height: 130px;
    padding: 0 8px;
    border-radius: 32px;
  }

  .wvs-midnav__tabs-wrap {
    height: 130px;
  }

  .wvs-midnav__tile {
    width: 118px;
    height: 126px;
    border-radius: 24px;
  }

  .wvs-midnav__tile-card,
  .wvs-midnav__tile-hover {
    border-radius: 24px;
  }

  .wvs-midnav__tile-icon {
    top: 16px;
    width: 36px;
    height: 36px;
  }

  .wvs-midnav__tile-chevron {
    right: 15px;
    top: 16px;
    width: 12px;
    height: 12px;
  }

  .wvs-midnav__tile-chevron img {
    width: 9px;
    height: 9px;
  }

  .wvs-midnav__tile-label {
    width: 96px;
    font-size: 11px;
    line-height: 14px;
    top: 56px;
  }

  .wvs-midnav__tile.is-active .wvs-midnav__tile-label {
    font-size: 12px;
    line-height: 16px;
    top: 42px;
  }

  .wvs-midnav__tile-hover-label {
    width: 100px;
    font-size: 12px;
    line-height: 16px;
  }
}

@media (max-width: 900px) and (min-width: 768px) {
  .wvs-midnav {
    padding: 32px 24px;
    gap: 20px;
  }

  .wvs-midnav__title {
    font-size: 22px;
  }

  .wvs-midnav__tabs {
    height: 110px;
    padding: 0 6px;
    border-radius: 28px;
  }

  .wvs-midnav__tabs-wrap {
    height: 110px;
  }

  .wvs-midnav__tile {
    width: 96px;
    height: 110px;
    border-radius: 20px;
  }

  .wvs-midnav__tile-card,
  .wvs-midnav__tile-hover {
    border-radius: 20px;
  }

  .wvs-midnav__tile-icon {
    top: 12px;
    width: 28px;
    height: 28px;
  }

  .wvs-midnav__tile-chevron {
    right: 13px;
    top: 12px;
    width: 10px;
    height: 10px;
  }

  .wvs-midnav__tile-chevron img {
    width: 8px;
    height: 8px;
  }

  .wvs-midnav__tile-label {
    width: 80px;
    font-size: 10px;
    line-height: 13px;
    top: 44px;
  }

  .wvs-midnav__tile.is-active .wvs-midnav__tile-label {
    font-size: 11px;
    line-height: 14px;
    top: 36px;
  }

  .wvs-midnav__tile-hover-label {
    width: 80px;
    font-size: 10px;
    line-height: 14px;
  }
}


/* ==========================================================================
   3c. MIDNAV — Mobile (<=767px)
   Stacked pill buttons — Figma 1649:281 (432 × 655)
   ========================================================================== */

@media (max-width: 767px) {
  .wvs-midnav {
    padding: 35px clamp(16px, 10.2%, 44px) 45px;
    gap: 8px;
    align-items: center;
    background:
      linear-gradient(100.57deg, rgba(0, 160, 200, 0.022) 0%, rgba(0, 160, 200, 0.045) 100%),
      linear-gradient(90deg, #fff 0%, #fff 100%);
  }

  .wvs-midnav__title {
    font-size: 20px;
    line-height: 1.24;
    max-width: 359px;
    margin-bottom: 10px;
  }

  .wvs-midnav__tabs-wrap {
    display: none;
  }

  .wvs-midnav__pills {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 19px;
    width: 100%;
    max-width: 345px;
  }

  /* --- Individual pill (345 × 61): solid darker blues, no transitions / hover motion. --- */
  .wvs-midnav__pill {
    width: 100%;
    max-width: 345px;
    height: 61px;
    padding: 12px 24px;
    border-radius: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    background: linear-gradient(44deg, rgba(0, 160, 200, 0.56) 46.4%, rgba(0, 160, 200, 0.12) 99.82%), rgba(0, 160, 200, 0.56);
  }

  .wvs-midnav__pill:hover {
    text-decoration: none;
  }

  .wvs-midnav__pill.is-active {
    background: linear-gradient(44deg, #005596 0.64%, rgba(0, 85, 150, 0.56) 99.17%);
  }

  .wvs-midnav__pill-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
  }

  .wvs-midnav__pill.is-active .wvs-midnav__pill-icon {
    width: 32px;
    height: 32px;
  }

  .wvs-midnav__pill-label {
    flex: 1;
    font-family: var(--was-font-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
  }

  .wvs-midnav__pill.is-active .wvs-midnav__pill-label {
    font-weight: 400;
  }

  .wvs-midnav__pill-chevron {
    width: 16.971px;
    height: 16.971px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wvs-midnav__pill-chevron img {
    width: 12px;
    height: 12px;
    transform: rotate(-135deg) scaleY(-1);
    display: block;
  }
}


.challenges-in-drug-development {
  padding: 3rem max(100px, calc((100% - 1240px) / 2));
  margin-bottom: 40px;
}

  .challenges-in-drug-development .challenges-boxes {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-column-gap: 75px;
      margin-top: 115px;
  }

      .challenges-in-drug-development .challenges-boxes .box {
          border-radius: 22px;
          padding: 30px 35px;
      }

          .challenges-in-drug-development .challenges-boxes .box:nth-of-type(1) {
              background: #f2f7f1;
          }

          .challenges-in-drug-development .challenges-boxes .box:nth-of-type(2) {
              background: #e8efef;
          }

          .challenges-in-drug-development .challenges-boxes .box:nth-of-type(3) {
              background: #e3f2fb;
          }

          .challenges-in-drug-development .challenges-boxes .box h4 {
              text-align: center;
              font-weight: 600;
              font-size: 24px;
              line-height: 30px;
              color: #002f6d;
              max-width: 285px;
              margin: 0 auto 15px auto;
          }

          .challenges-in-drug-development .challenges-boxes .box p {
              font-size: 16px;
              color: #444;
              line-height: 30px;
              margin-bottom: 0;
          }

          .challenges-in-drug-development .challenges-boxes .box .icon {
              margin: -100px auto 15px auto;
              box-shadow: 0px 3px 6px #00000029;
              border-radius: 50%;
              width: 120px;
              height: 120px;
              background-color: #fff;
              padding: 15px;
              display: flex;
              align-items: center;
              justify-content: center;
          }

              .challenges-in-drug-development .challenges-boxes .box .icon img {
                  max-height: 60px;
                  object-fit: contain;
              }

@media (max-width: 1600px) {
  .challenges-in-drug-development {
      padding: 60px 75px 0;
      margin-bottom: 60px;
  }

      .challenges-in-drug-development .challenges-boxes .box .icon {
          width: 100px;
          height: 100px;
      }

          .challenges-in-drug-development .challenges-boxes .box .icon img {
              max-height: 55px;
          }

      .challenges-in-drug-development .challenges-boxes .box p {
          font-size: 17px;
          line-height: 30px;
      }

      .challenges-in-drug-development .challenges-boxes .box h4 {
          font-size: 23px;
      }
}

@media (max-width: 1366px) {
  .challenges-in-drug-development .challenges-boxes .box h4 {
      font-size: 18px;
      line-height: 25px;
  }

  .challenges-in-drug-development .challenges-boxes .box p {
      font-size: 16px;
      line-height: 26px;
  }
}

@media (max-width: 1200px) {
  .challenges-in-drug-development .challenges-boxes {
      grid-column-gap: 35px;
      margin-top: 95px;
  }

      .challenges-in-drug-development .challenges-boxes .box .icon {
          width: 80px;
          height: 80px;
      }

          .challenges-in-drug-development .challenges-boxes .box .icon img {
              max-height: 45px;
          }

      .challenges-in-drug-development .challenges-boxes .box .icon {
          margin: -80px auto 15px auto;
      }
}

@media (max-width: 1024px) {
  .challenges-in-drug-development {
      padding: 50px 50px 0;
  }

      .challenges-in-drug-development .challenges-boxes .box .icon img {
          max-height: 35px;
      }

      .challenges-in-drug-development .challenges-boxes .box .icon {
          margin: -60px auto 15px auto;
          width: 60px;
          height: 60px;
      }

      .challenges-in-drug-development .challenges-boxes {
          margin-top: 60px;
      }
}

@media (max-width: 490px) {
  .challenges-in-drug-development {
      padding: 40px 15px 0;
      margin-bottom: 60px;
  }

      .challenges-in-drug-development .challenges-boxes {
          grid-template-columns: 1fr;
          grid-row-gap: 40px;
      }

  .meet-your-milestone-challenge-block .case-studies-title.field-section-title::after {
      max-width: 100%;
      min-width: 100%;
  }
}

.component.title-text .partner-submit-request {
  position: relative;
  padding: 30px 35px;
  background: #002f6d;
  display: flex;
  justify-content: center;
  align-items: center;
}

  .component.title-text .partner-submit-request h5 {
      margin-bottom: 0;
      font-family: var(--font-noto);
      font-size: 20px;
      color: #fff;
      margin-right: 35px;
  }

  .component.title-text .partner-submit-request:before {
      background-image: url("../images/banner-bg.png");
      background-repeat: no-repeat;
      background-size: cover;
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      z-index: 1;
      mix-blend-mode: multiply;
  }

  .component.title-text .partner-submit-request .field-links a {
      font-size: 16px;
      font-weight: 700;
      border: 3px solid var(--primary-green);
      background: #fff;
      color: var(--primary-green);
      padding: 8px 30px;
      position: relative;
      z-index: 2;
  }

      .component.title-text .partner-submit-request .field-links a:hover {
          color: var(--primary-green);
      }

@media (max-width: 1440px) {
  .component.title-text .partner-submit-request h5 {
      font-size: 20px;
  }

  .component.title-text .partner-submit-request {
      padding: 20px 35px;
  }
}

@media (max-width: 1366px) {
  .component.title-text .partner-submit-request {
      padding: 35px 35px;
  }

      .component.title-text .partner-submit-request h5 {
          font-size: 28px;
      }
}

@media (max-width: 1200px) {
  .component.title-text .partner-submit-request .field-links a {
      white-space: pre;
      font-size: 14px;
  }

  .component.title-text .partner-submit-request h5 {
      font-size: 22px;
  }
}

@media (max-width: 490px) {
  .component.title-text .partner-submit-request {
      padding: 35px 15px;
      flex-direction: column;
  }

      .component.title-text .partner-submit-request h5 {
          font-size: 20px;
          margin-bottom: 12px;
          margin-right: 0;
          text-align: center;
      }

      .component.title-text .partner-submit-request .field-links a {
          font-size: 14px;
          padding: 8px 20px;
          display: block;
      }
}