/* Shared navigation/logo rules for every Rolodex Pharmaceuticals page. */
:root {
  --rolodex-nav-ink: #292267;
  --rolodex-nav-underline: #f3b7d8;
}

body .site-header {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  overflow: visible !important;
}

body .site-header .nav-wrap {
  box-sizing: border-box;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 16px !important;
  width: min(1600px, calc(100% - 64px)) !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

body .site-header .brand {
  display: flex !important;
  flex: 0 0 182px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 182px !important;
  min-width: 182px !important;
  max-width: 182px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  line-height: 0 !important;
}

body .site-header .logo {
  display: block !important;
  flex: 0 0 182px !important;
  width: 182px !important;
  min-width: 182px !important;
  max-width: 182px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  vertical-align: middle !important;
}

body .site-header .nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

body .site-header .nav a,
body .site-header .nav a:link,
body .site-header .nav a:visited,
body .site-header .nav a:hover,
body .site-header .nav a:focus,
body .site-header .nav a:active {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: var(--rolodex-nav-ink) !important;
  background: transparent !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  position: relative !important;
  transition: none !important;
}

body .site-header .nav a::after {
  content: none !important;
  display: block !important;
}

body .site-header .nav a.active::after {
  content: '' !important;
  position: absolute !important;
  left: 7px !important;
  right: 7px !important;
  bottom: 0 !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--rolodex-nav-underline) !important;
}

body .site-header .search-btn {
  display: grid !important;
  flex: 0 0 34px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

body .site-header .menu-btn {
  display: none !important;
}

/* Use the uncut full wordmark wherever the footer logo appears. */
body .site-footer .footer-brand-logo {
  display: block !important;
  width: 176px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  vertical-align: middle !important;
}

/* The compact menu uses the same ink and pink underline, never a pink fill. */
body .mobile-nav {
  top: 80px !important;
  max-height: calc(100dvh - 88px) !important;
}

body .mobile-nav a,
body .mobile-nav a:link,
body .mobile-nav a:visited,
body .mobile-nav a:hover,
body .mobile-nav a:focus,
body .mobile-nav a:active {
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--rolodex-nav-ink) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: none !important;
}

body .mobile-nav a::after {
  content: none !important;
}

body .mobile-nav a.active::after {
  content: '' !important;
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  bottom: 4px !important;
  width: 34px !important;
  height: 2px !important;
  background: var(--rolodex-nav-underline) !important;
}

@media (max-width: 1080px) {
  body .site-header {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
  }

  body .site-header .nav-wrap {
    width: calc(100% - 32px) !important;
    gap: 12px !important;
  }

  body .site-header .nav {
    display: none !important;
  }

  body .site-header .menu-btn {
    display: grid !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  body .site-header .brand {
    flex-basis: 178px !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
  }

  body .site-header .logo {
    flex-basis: 178px !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
  }
}

@media (max-width: 760px) {
  body .site-header {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
  }

  body .site-header .nav-wrap {
    width: calc(100% - 28px) !important;
    gap: 10px !important;
  }

  body .site-header .brand {
    flex-basis: clamp(150px, 45vw, 178px) !important;
    width: clamp(150px, 45vw, 178px) !important;
    min-width: 150px !important;
    max-width: 178px !important;
  }

  body .site-header .logo {
    flex-basis: clamp(150px, 45vw, 178px) !important;
    width: clamp(150px, 45vw, 178px) !important;
    min-width: 150px !important;
    max-width: 178px !important;
  }

  body .mobile-nav {
    top: 80px !important;
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100dvh - 90px) !important;
  }
}


/* Follow-up refinements: move active underline closer to the link text. */
body .site-header .nav a,
body .site-header .nav a:link,
body .site-header .nav a:visited,
body .site-header .nav a:hover,
body .site-header .nav a:focus,
body .site-header .nav a:active {
  height: auto !important;
  align-self: center !important;
  padding: 6px 7px 4px !important;
}
body .site-header .nav a.active::after {
  bottom: 0 !important;
  left: 7px !important;
  right: 7px !important;
}

/* Make the email, website, and phone glyphs sit fully inside their circles. */
body .contact-form-section .contact-card .icon-circle {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
body .contact-form-section .contact-card .icon-circle svg {
  display: block !important;
  width: 56% !important;
  height: 56% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* The five Distribution steps need readable, medium-size text. */
.distribution-steps .step strong {
  font-size: clamp(13.5px, 1.35vw, 16px) !important;
  line-height: 1.12 !important;
  min-height: 34px !important;
}
.distribution-steps .step p {
  font-size: clamp(11px, 1.15vw, 13px) !important;
  line-height: 1.34 !important;
}
@media (max-width: 760px) {
  .distribution-steps .step strong { font-size: 14px !important; min-height: 0 !important; }
  .distribution-steps .step p { font-size: 12px !important; }
}

/* Seamless join between the Distribution worker photo and the packaging artwork. */
@media (min-width: 761px) {
  .distribution-commitment-banner {
    margin-top: -11px !important;
    transform: translateY(-1px);
    z-index: 4 !important;
  }
  .distribution-commitment-banner .banner-art {
    transform: scaleY(1.015);
    transform-origin: top center;
  }
}
.distribution-channels,
.distribution-partner-panel,
.distribution-partner-panel > img,
.distribution-commitment-banner,
.distribution-commitment-banner .banner-art {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Contact partnership CTA: allow all copy and the full pills photo to be seen. */
.contact-partner-section {
  height: auto !important;
  min-height: 148px !important;
  grid-template-columns: clamp(112px, 12vw, 165px) minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: stretch !important;
  overflow: visible !important;
  padding: 0 3vw 0 0 !important;
}
.contact-partner-section > .partner-pills-img {
  align-self: stretch !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 148px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff3fb !important;
}
.contact-partner-copy {
  align-self: center !important;
  min-width: 0 !important;
  padding: 12px 0 !important;
}
.contact-partner-copy h2 {
  white-space: normal !important;
  font-size: clamp(21px, 2.05vw, 27px) !important;
  line-height: 1.06 !important;
}
.contact-partner-copy p {
  font-size: clamp(11px, 1.05vw, 13px) !important;
  line-height: 1.35 !important;
}
.contact-partner-section > .btn {
  align-self: center !important;
  justify-self: end !important;
  margin: 0 0 0 8px !important;
  white-space: normal !important;
  height: auto !important;
  min-height: 40px !important;
  line-height: 1.25 !important;
}

/* Slightly richer pink for all five Contact headquarters cards. */
.contact-location-copy .location {
  background: #f8dff0 !important;
  border-color: #e8b7d8 !important;
}

/* Live, crisp text over the existing career collage artwork; the artwork is untouched. */
.career-collage-live {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 577 / 365 !important;
  height: auto !important;
  background-image: url('../assets/images/careers-paths-reference.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  overflow: visible !important;
}
.career-collage-live .career-live-card {
  position: absolute !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  left: 30.1% !important;
  width: 18.1% !important;
  height: 20.5% !important;
  padding: 0 2px !important;
  overflow: visible !important;
  background: rgba(255, 252, 255, .985) !important;
}
.career-collage-live .career-live-card h3 {
  margin: 0 !important;
  color: #10134f !important;
  font: 600 clamp(12.5px, 1.2vw, 16px)/1.04 'Cormorant Garamond', Georgia, serif !important;
  letter-spacing: -.01em !important;
}
.career-collage-live .career-live-card p {
  margin: 4px 0 0 !important;
  color: #53607a !important;
  font: 400 clamp(10.5px, .95vw, 13px)/1.25 'DM Sans', Arial, sans-serif !important;
}
.career-collage-live .career-live-research { left: 14.8% !important; top: 26.2% !important; width: 32.8% !important; height: 22.4% !important; }
.career-collage-live .career-live-manufacturing { left: 64.5% !important; top: 26.2% !important; width: 32.8% !important; height: 22.4% !important; }
.career-collage-live .career-live-distribution { left: 14.8% !important; top: 53.2% !important; width: 32.8% !important; height: 44.6% !important; justify-content: flex-start !important; padding-top: 5px !important; }
.career-collage-live .career-live-paths { left: 64.5% !important; top: 53.2% !important; width: 32.8% !important; height: 44.6% !important; justify-content: flex-start !important; padding-top: 5px !important; }

/* Footer/header wordmark image includes a few extra pixels below the restored R circle. */
body .site-footer .footer-brand-logo,
body .site-header .logo {
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  overflow: visible !important;
}

@media (max-width: 760px) {
  .contact-partner-section {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 0 12px 18px !important;
    min-height: 0 !important;
  }
  .contact-partner-section > .partner-pills-img {
    width: 92px !important;
    height: 128px !important;
    min-height: 128px !important;
    object-fit: contain !important;
  }
  .contact-partner-copy { padding: 12px 0 0 !important; }
  .contact-partner-copy h2 { font-size: 22px !important; }
  .contact-partner-copy p { font-size: 11.5px !important; }
  .contact-partner-section > .btn {
    grid-column: 2 !important;
    justify-self: start !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .career-collage-live { display: none !important; }
}


/* V15: final visual corrections requested after V14. */
/* Keep the bottom-row photo panels visible; place live text only over their caption area. */
.career-collage-live .career-live-distribution {
  top: 75.6% !important;
  height: 23% !important;
  justify-content: flex-start !important;
  padding-top: 4px !important;
}
.career-collage-live .career-live-paths {
  top: 75.6% !important;
  height: 23% !important;
  justify-content: flex-start !important;
  padding-top: 4px !important;
}
/* Enlarge the clean medicine photo and ensure no baked-in logo appears in the CTA. */
.contact-partner-section > .partner-pills-img {
  object-fit: cover !important;
  object-position: center center !important;
  background: #fff3fb !important;
}
@media (max-width: 760px) {
  .contact-partner-section > .partner-pills-img {
    object-fit: cover !important;
    object-position: center center !important;
    height: 128px !important;
    min-height: 128px !important;
  }
}


/* V18 mobile fixes: reveal the four Distribution feature summaries completely. */
@media (max-width: 760px) {
  .ref-distribution .distribution-features {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .ref-distribution .distribution-features .feature-grid {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 16px !important;
    gap: 0 !important;
    align-items: stretch !important;
    overflow: visible !important;
  }
  .ref-distribution .distribution-features .feature {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 12px 9px !important;
    border-right: 1px solid #eee3f5 !important;
    border-bottom: 1px solid #eee3f5 !important;
    overflow: visible !important;
  }
  .ref-distribution .distribution-features .feature:nth-child(2n) {
    border-right: 0 !important;
  }
  .ref-distribution .distribution-features .feature:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }
  .ref-distribution .distribution-features .feature > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .ref-distribution .distribution-features .feature h3 {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 5px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }
  .ref-distribution .distribution-features .feature p {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }
  .ref-distribution .distribution-features .icon-circle {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
  }
}

@media (max-width: 430px) {
  .ref-distribution .distribution-features .feature-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 8px 16px !important;
  }
  .ref-distribution .distribution-features .feature,
  .ref-distribution .distribution-features .feature:nth-child(2n) {
    min-height: 82px !important;
    padding: 12px 5px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #eee3f5 !important;
  }
  .ref-distribution .distribution-features .feature:last-child {
    border-bottom: 0 !important;
  }
}

/* V18: make the circular mobile hamburger visible, with crisp purple strokes. */
@media (max-width: 1080px) {
  body .site-header .menu-btn {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 1px solid #eec5df !important;
    border-radius: 50% !important;
    background: #fff7fc !important;
    color: #292267 !important;
    box-shadow: 0 2px 8px rgba(41, 34, 103, .08) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1002 !important;
    cursor: pointer !important;
  }
  body .site-header .menu-btn svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body .site-header .menu-btn svg path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}
/* V19: keep the circular three-line menu visible in web/desktop mode too. */
@media (min-width: 1081px) {
  body .site-header .menu-btn {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #eec5df !important;
    border-radius: 50% !important;
    background: #fff7fc !important;
    color: #292267 !important;
    box-shadow: 0 2px 8px rgba(41, 34, 103, .08) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1002 !important;
    cursor: pointer !important;
  }
  body .site-header .menu-btn svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: #292267 !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body .site-header .menu-btn svg path {
    fill: none !important;
    stroke: #292267 !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* V20: keep the search panel's top-right pink circle, with visible three-line strokes. */
body .search-box .search-close {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border: 1px solid #eec5df !important;
  border-radius: 50% !important;
  background: #fff4fa !important;
  color: #292267 !important;
}
body .search-box .search-close svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body .search-box .search-close svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove V19's extra hamburger outside the desktop search control; keep mobile navigation. */
@media (min-width: 1081px) {
  body .site-header .menu-btn {
    display: none !important;
  }
}


/* Shared footer branding: use the same complete wordmark asset and prevent page-specific sizing differences. */
.site-footer .footer-brand-logo,
.reference-contact-footer .footer-brand-logo{display:block;width:176px;max-width:100%;height:auto;object-fit:contain;object-position:left center;}

/* V23: let the shared circular R mark meet the header divider cleanly, without a separate added stroke. */
body .site-header .brand {
  flex: 0 0 216px !important;
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
}
body .site-header .logo {
  flex: 0 0 216px !important;
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
  position: relative !important;
  top: 2px !important;
}
@media (max-width: 1080px) {
  body .site-header .brand {
    flex-basis: 205px !important;
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
  }
  body .site-header .logo {
    flex-basis: 205px !important;
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
    top: 4px !important;
  }
}
@media (max-width: 760px) {
  body .site-header .brand {
    flex-basis: 192px !important;
    width: 192px !important;
    min-width: 192px !important;
    max-width: 192px !important;
  }
  body .site-header .logo {
    flex-basis: 192px !important;
    width: 192px !important;
    min-width: 192px !important;
    max-width: 192px !important;
    top: 5px !important;
  }
}

/* V24 — shared page-background refinement based on the approved Products reference.
   These overrides adjust CSS backgrounds only. Image assets, content, layout, and
   interactions remain untouched. Keep the base pale blush and reserve lavender
   for very subtle transitions rather than strong blue-purple casts. */
:root {
  --rolodex-bg-blush: #fff9fc;
  --rolodex-bg-blush-soft: #fff7fb;
  --rolodex-bg-lavender-soft: #fcf7fc;
}
body,
.page,
.home-page,
.about-page,
.reference-page {
  background-color: var(--rolodex-bg-blush);
}
.site-header,
.home-page .site-header,
.about-page .site-header,
.reference-page .site-header {
  background-color: rgba(255, 250, 253, .985);
}
.site-footer,
.reference-contact-footer {
  background-color: #fffafd;
}

/* Home and About: preserve white areas, soften the broad section transitions. */
.home-page .hero-full,
.about-page .hero-full {
  background-color: #fff8fc;
}
.home-page .feature-strip,
.about-page .feature-strip {
  background: linear-gradient(105deg, #fff9fc 0%, #fff6fb 58%, #fcf7fc 100%);
}
.home-page .section.soft,
.about-page .section.soft,
.section.soft {
  background: linear-gradient(100deg, #fff8fc 0%, #fff6fb 70%, #fcf7fc 100%);
}
.section.tint {
  background: linear-gradient(180deg, #fff7fb 0%, #fcf7fc 100%);
}

/* Products: align the pale blush base with the supplied hero screenshot. */
.products-quality-section {
  background: linear-gradient(110deg, #fff7fc 0%, #fff6fb 52%, #fbf5fc 100%);
}
.products-quality-photo {
  background-color: #fbf5fc;
}
.products-otc-reference {
  background-color: #fffafd;
}
.products-tabs-section {
  background: linear-gradient(180deg, #fff9fc 0%, #fff7fb 100%);
}

/* Distribution, Sustainability, Careers and Contact: harmonize large section
   backgrounds while keeping all photo/map assets and white cards unchanged. */
.reference-page .reference-hero {
  background-color: #fff8fc;
}
.reference-page .reference-hero .hero-copy {
  background: linear-gradient(90deg, #fff8fc 0%, rgba(255, 248, 252, .98) 75%, rgba(255, 248, 252, .84) 100%);
}
.reference-page .reference-features {
  background: linear-gradient(90deg, #fffafd 0%, #fff7fb 65%, #fcf7fc 100%);
}
.distribution-network,
.distribution-channels,
.sustainability-features,
.sustain-practices-section,
.career-features,
.career-culture-section,
.career-openings-section,
.contact-locations-section {
  background-color: #fffafd;
}
.distribution-solutions,
.sustain-impact-section,
.career-benefits-section {
  background: linear-gradient(90deg, #fff8fc 0%, #fff7fb 68%, #fcf7fc 100%);
}
.contact-form-section {
  background: linear-gradient(90deg, #fff7fc 0%, #fff9fc 100%);
}
.contact-partner-section {
  background: linear-gradient(100deg, #fff6fb 0%, #fff9fc 56%, #fcf7fc 100%);
}


/* V26: restore the reference screenshot's deeper logo contrast without changing footer branding or any other page artwork. */
body .site-header .logo {
  filter: contrast(1.16) saturate(1.28) !important;
}


/* V27 — Home reference background and shared wordmark cleanup.
   Only CSS background colors and shared logo presentation are adjusted here.
   Photographs, illustrations, page content, and interactions are preserved. */
body .site-header {
  background: #fdfcfd !important;
}

/* Home screenshot: the left side of the hero is a quiet blush-lavender,
   while the feature strip stays softly pink-white. */
.home-page {
  background-color: #fdfdfd !important;
}
.home-page .hero-full {
  background-color: #f9f4fa !important;
  background-image: none !important;
}
.home-page .feature-strip {
  background: linear-gradient(105deg, #fbf7fc 0%, #fcf8fc 58%, #f8f3f7 100%) !important;
}
.home-page .purpose-section {
  background-color: #fdfdfd !important;
}
.home-page .section.compact.soft {
  background: #fdfdfd !important;
}

/* Match the larger reference wordmark on desktop and let its transparent canvas
   blend into the header. Keep the established compact sizes at tablet/mobile widths. */
@media (min-width: 1081px) {
  body .site-header .brand {
    flex: 0 0 256px !important;
    width: 256px !important;
    min-width: 256px !important;
    max-width: 256px !important;
  }
  body .site-header .logo {
    flex: 0 0 245px !important;
    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;
    margin-left: 6px !important;
    transform: translateY(6px) !important;
  }
}
@media (max-width: 1080px) {
  body .site-header .logo {
    margin-left: 0 !important;
    transform: none !important;
  }
}

/* V28 — Home feature-strip match to the supplied reference screenshot.
   Keep the circles pale pink, make the four SVG symbols dark blue and larger,
   and align headings/descriptions with the screenshot's blue palette. */
.home-page .feature-strip {
  background: linear-gradient(105deg, #fcf6fa 0%, #fbf9fc 58%, #f9f4f7 100%) !important;
  border-top-color: #f2e7f1 !important;
  border-bottom-color: #f2e7f1 !important;
}
.home-page .feature .icon-circle {
  color: #17158b !important;
  background: #fbe1f5 !important;
}
.home-page .feature .icon-circle svg {
  width: 36px !important;
  height: 36px !important;
  stroke: currentColor !important;
  stroke-width: 1.35 !important;
  fill: none !important;
}
.home-page .feature h3 {
  color: #17158b !important;
  font-weight: 600 !important;
}
.home-page .feature p {
  color: #596d94 !important;
}

/* Lift the complete shared logo slightly so the R circle sits closer to the
   header divider, without adding a separate circle or changing the artwork. */
@media (min-width: 1081px) {
  body .site-header .logo {
    transform: translateY(3px) !important;
  }
}
@media (max-width: 1080px) {
  body .site-header .logo {
    top: 1px !important;
    transform: none !important;
  }
}


/* V29 — Home reference details: pink product link, light-purple eyebrows,
   reference-matched feature pictograms, and a slightly higher, sharper logo.
   All adjustments are limited to the named Home elements and shared logo. */
.home-page .eyebrow {
  color: #b994f5 !important;
}
.home-page .home-commitment-eyebrow {
  color: #b994f5 !important;
}
.home-page .section.compact.soft a.btn.text,
.home-page .section.compact.soft a.btn.text:hover,
.home-page .section.compact.soft a.btn.text:focus-visible {
  color: #f451b5 !important;
}
.home-page .feature .icon-circle {
  color: #11158b !important;
  background: #fbe1f5 !important;
}
.home-page .feature .icon-circle svg {
  width: 40px !important;
  height: 40px !important;
  stroke: currentColor !important;
  stroke-width: 1.55 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.home-page .feature h3 {
  color: #11158b !important;
}
.home-page .feature p {
  color: #62769d !important;
}
/* The image is shared across all seven headers; move it up slightly without
   changing its width, canvas, ring geometry, or footer placement. */
@media (min-width: 1081px) {
  body .site-header .logo {
    top: 1px !important;
    transform: translateY(0) !important;
    filter: contrast(1.2) saturate(1.28) !important;
  }
}
@media (max-width: 1080px) {
  body .site-header .logo {
    top: 0 !important;
    transform: none !important;
    filter: contrast(1.2) saturate(1.28) !important;
  }
}


/* V30 — Home feature-icon accuracy: filled factory windows and clean truck trail lines. */
.home-page .feature:nth-child(2) .icon-circle svg rect.factory-window {
  fill: #11158b !important;
  stroke: #11158b !important;
  stroke-width: 0 !important;
}
.home-page .feature:nth-child(3) .icon-circle svg .truck-trails {
  fill: none !important;
  stroke: currentColor !important;
}


/* V33 — final Home screenshot refinements. Keep changes scoped to Home where possible. */
.home-page .feature-strip {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.home-page .eyebrow::after {
  content: none !important;
  display: none !important;
}
.home-page .feature {
  border-bottom: 0 !important;
}
.home-page .feature .icon-circle svg {
  width: 43px !important;
  height: 43px !important;
  stroke: currentColor !important;
  stroke-width: 1.55 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
@media (max-width: 1080px) {
  .home-page .feature .icon-circle svg {
    width: 38px !important;
    height: 38px !important;
  }
  body .site-header .logo {
    transform: translateY(3px) !important;
  }
}
@media (max-width: 480px) {
  .home-page .feature .icon-circle svg {
    width: 32px !important;
    height: 32px !important;
  }
}


/* V37 — use the compact screenshot-matched people pictogram with a fine, clear stroke.
   Keep its existing footprint; only the SVG paths above define the revised silhouette. */
.home-page .feature:nth-child(4) .icon-circle svg {
  width: 43px !important;
  height: 43px !important;
  stroke-width: 1.15 !important;
}
@media (max-width: 1080px) {
  .home-page .feature:nth-child(4) .icon-circle svg {
    width: 38px !important;
    height: 38px !important;
  }
}
@media (max-width: 480px) {
  .home-page .feature:nth-child(4) .icon-circle svg {
    width: 32px !important;
    height: 32px !important;
  }
}


/* About Us page: reference screenshot matching at the supplied 1024 x 1536 viewport.
   All rules are scoped to About Us so the completed Home page and other pages remain untouched. */
body.about-page {
  background-color: #fefdfd !important;
}
body.about-page .page {
  background-color: #fffeff !important;
}
body.about-page .site-header {
  background: linear-gradient(105deg, #fefefe 0%, #fefdfE 56%, #fdfcfd 100%) !important;
  border-bottom: 1px solid rgba(236, 226, 239, .72) !important;
  box-shadow: 0 1px 8px rgba(54, 32, 83, .018) !important;
}
body.about-page .hero-full {
  background: #fbf3fb !important;
}
body.about-page .hero-media {
  inset: 0 0 0 43.1% !important;
  width: auto !important;
  background: #fbf3fb !important;
}
body.about-page .hero-media::after {
  background: linear-gradient(90deg,
    rgba(246, 225, 249, .62) 0%,
    rgba(246, 225, 249, .39) 18%,
    rgba(246, 225, 249, .12) 40%,
    rgba(252, 244, 253, 0) 57%) !important;
}
body.about-page .eyebrow {
  color: #c783e5 !important;
}
body.about-page .eyebrow::after {
  width: 36px !important;
  background: #efa4dc !important;
}
body.about-page .about-commitment-eyebrow {
  color: #c783e5 !important;
}
body.about-page .section.compact:not(.soft):not(.impact-section) {
  padding-top: 11px !important;
  padding-bottom: 13px !important;
  background: #fdfdfd !important;
}
body.about-page .container.value-grid {
  width: calc(100% - 45px) !important;
  margin-left: 27px !important;
  margin-right: 18px !important;
  gap: 12px !important;
}
body.about-page .value-card {
  min-height: 247px !important;
  border-color: #fcf4fa !important;
  background: linear-gradient(145deg, #fdf9fc 0%, #fdf7fc 100%) !important;
}
body.about-page .value-card .icon-circle {
  color: #a91db5 !important;
  background: #fbe1f5 !important;
  margin-bottom: 5px !important;
}
body.about-page .value-card .icon-circle svg {
  width: 46px !important;
  height: 46px !important;
  stroke-width: 1.25 !important;
}
body.about-page .value-card p strong {
  font-weight: 500 !important;
}
body.about-page #story {
  padding-top: 15px !important;
  padding-bottom: 9px !important;
  background: linear-gradient(100deg, #fcf5fc 0%, #fdf8fd 100%) !important;
}
body.about-page #story .container.split {
  grid-template-columns: minmax(0, .89fr) minmax(0, 1.11fr) !important;
  gap: 20px !important;
}
body.about-page #story .story-collage {
  margin-top: 0 !important;
}
body.about-page #story .story-main.exact img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
body.about-page .caption-row span::before {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 5px 2px 0 !important;
  background: #e64fac !important;
  color: transparent !important;
  vertical-align: middle !important;
}
body.about-page .impact-section {
  padding-top: 16px !important;
  padding-bottom: 11px !important;
  background: linear-gradient(105deg, #fffefe 0%, #fefcfe 50%, #fffefe 100%) !important;
}
body.about-page .impact-section > .container {
  width: calc(100% - 51px) !important;
  max-width: none !important;
  margin-left: 51px !important;
  margin-right: 0 !important;
}
body.about-page .stat-grid {
  grid-template-columns: 211fr 250fr 260fr 252fr !important;
}
body.about-page .impact-section .stat {
  position: relative !important;
  border-right: 0 !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 1px 8px !important;
  padding-top: 4px !important;
  padding-bottom: 11px !important;
  padding-left: 0 !important;
  padding-right: 8px !important;
  align-content: start !important;
}
body.about-page .impact-section .stat:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  bottom: 11px !important;
  right: 0 !important;
  width: 1px !important;
  background: #f0e1ef !important;
  pointer-events: none !important;
}
body.about-page .stat:nth-child(n+2) {
  padding-left: 26px !important;
  column-gap: 12px !important;
}
body.about-page .stat:nth-child(4) {
  padding-left: 28px !important;
}
body.about-page .stat-icon {
  width: 52px !important;
  height: 52px !important;
}
body.about-page .stat-icon svg {
  width: 34px !important;
  height: 34px !important;
  stroke-width: 1.45 !important;
}
body.about-page .stat strong {
  font-size: clamp(1.7rem, 2.85vw, 2rem) !important;
  line-height: 1 !important;
}
body.about-page .stat:first-child strong {
  font-size: clamp(1.75rem, 3vw, 2.05rem) !important;
}
body.about-page .stat:nth-child(3) strong {
  font-size: clamp(1.3rem, 2.3vw, 1.55rem) !important;
  letter-spacing: -.035em !important;
}
body.about-page .stat-description {
  font-size: .8rem !important;
  line-height: 1.4 !important;
  padding-top: 8px !important;
}
body.about-page .about-commitment-banner {
  background-color: #fcf0fd !important;
}
body.about-page .about-commitment-inner {
  width: 57.2% !important;
  margin-left: 34.3% !important;
  padding-top: 26px !important;
  padding-bottom: 0 !important;
  align-self: flex-start !important;
}
body.about-page .about-commitment-copy h2 {
  margin-top: 0 !important;
}
body.about-page .about-commitment-eyebrow {
  margin-bottom: 15px !important;
}
body.about-page .about-commitment-copy > p:last-child {
  margin-top: 18px !important;
  font-size: .78rem !important;
  line-height: 1.42 !important;
}
body.about-page .about-commitment-button {
  min-width: 162px !important;
  transform: translate(-2px, 5px) !important;
}

/* The About header follows the reference's full desktop navbar at 1024px. */
@media (min-width: 1000px) {
  body.about-page .about-commitment-banner { height: 241px !important; aspect-ratio: auto !important; }
  body.about-page .container.value-grid { grid-template-columns: 1.074fr 1.057fr 1fr .996fr !important; }
  body.about-page .site-header {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
  }
  body.about-page .site-header .nav-wrap {
    width: min(1600px, calc(100% - 64px)) !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0 0 12px !important;
    gap: 16.5px !important;
  }
  body.about-page .site-header .brand {
    flex: 0 0 243px !important;
    width: 243px !important;
    min-width: 243px !important;
    max-width: 243px !important;
  }
  body.about-page .site-header .logo {
    flex: 0 0 231px !important;
    width: 231px !important;
    min-width: 231px !important;
    max-width: 231px !important;
    transform: translate(-7px, 6px) !important;
    filter: contrast(1.1) saturate(1.08) !important;
  }
  body.about-page .site-header .nav {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  body.about-page .site-header .nav a,
  body.about-page .site-header .nav a:link,
  body.about-page .site-header .nav a:visited,
  body.about-page .site-header .nav a:hover,
  body.about-page .site-header .nav a:focus,
  body.about-page .site-header .nav a:active {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    padding: 6px 8.5px 4px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    transform: translateY(3px) !important;
  }
  body.about-page .site-header .nav a.active::after {
    bottom: -5px !important;
    left: 8.5px !important;
    right: 8.5px !important;
    height: 2px !important;
    background: #e94fae !important;
  }
  body.about-page .site-header .nav .search-btn {
    margin-left: auto !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    transform: translateY(3px) !important;
  }
  body.about-page .site-header .menu-btn {
    display: none !important;
  }
  body.about-page .hero-shell {
    height: clamp(425px, 41.5vw, 620px) !important;
  }
  body.about-page .hero-copy {
    align-self: stretch !important;
    height: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    padding: 40px 0 13px clamp(42px, 5vw, 92px) !important;
  }
  body.about-page .hero-copy > .lead {
    margin-top: 5px !important;
    line-height: 1.45 !important;
  }
  body.about-page .hero-copy > .lead strong { font-weight: 500 !important; }
  body.about-page .hero-copy > .hero-note {
    margin: 10px 0 6px !important;
    line-height: 1.35 !important;
  }
  body.about-page .hero-copy > .actions {
    margin-top: 15px !important;
  }
  body.about-page .hero-copy > .actions .btn.primary {
    display: inline-flex !important;
    width: 161px !important;
    min-width: 161px !important;
    max-width: 161px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.about-page #story .container.split {
    margin-left: 51px !important;
    width: calc(100% - 76px) !important;
    grid-template-columns: minmax(0, .89fr) minmax(0, 1.11fr) !important;
    gap: 20px !important;
  }
  body.about-page #story .split-copy .actions .btn.primary {
    display: inline-flex !important;
    width: 161px !important;
    min-width: 161px !important;
    max-width: 161px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (min-width: 761px) and (max-width: 999px) {
  body.about-page .value-grid {
    width: calc(100% - 45px) !important;
    margin-left: 27px !important;
    margin-right: 18px !important;
  }
  body.about-page #story .container.split {
    grid-template-columns: minmax(0, .89fr) minmax(0, 1.11fr) !important;
  }
}

@media (max-width: 760px) {
  body.about-page .hero-full,
  body.about-page .section.compact:not(.soft):not(.impact-section) {
    background-color: #fdfdfd !important;
  }
  body.about-page .hero-full { background-color: #fbf3fb !important; }
  body.about-page .hero-media { inset: auto !important; width: 100% !important; }
  body.about-page .hero-media::after { display: none !important; }
  body.about-page .value-card .icon-circle svg { width: 40px !important; height: 40px !important; stroke-width: 1.1 !important; }
  body.about-page .impact-section > .container {
    width: calc(100% - 28px) !important;
    margin-inline: auto !important;
  }
  body.about-page .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.about-page .stat:nth-child(n+2) { padding-left: 12px !important; }
  body.about-page .stat:nth-child(4) { padding-left: 12px !important; }
  body.about-page .about-commitment-inner {
    width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding: 24px 0 !important;
    align-self: center !important;
  }
  body.about-page .about-commitment-copy > p:last-child { font-size: .88rem !important; }
  body.about-page .about-commitment-button { transform: none !important; }
  body.about-page .about-commitment-banner { height: auto !important; aspect-ratio: auto !important; }
}

/* About Us mobile stack: keep story copy and collage full-width instead of squeezing them side by side. */
@media (max-width: 760px) {
  body.about-page #story .container.split {
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    gap: 16px !important;
  }
  body.about-page #story .story-collage,
  body.about-page #story .story-main.exact {
    width: 100% !important;
    min-width: 0 !important;
  }
  body.about-page #story .story-main.exact img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* About-page icon artwork refined to match the attached screenshot; keep all icon circles and card geometry intact. */
body.about-page .value-card .icon-circle svg.about-value-icon {
  width: 46px !important;
  height: 46px !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible;
}
body.about-page .stat-icon svg.about-stat-icon {
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible;
}
/* Match the reference's visual glyph size individually inside the same 52px pink discs. */
body.about-page .stat-icon svg.icon-stat-globe { width: 46px !important; height: 46px !important; }
body.about-page .stat-icon svg.icon-stat-people { width: 37px !important; height: 37px !important; }
body.about-page .stat-icon svg.icon-stat-factory { width: 40px !important; height: 40px !important; }
body.about-page .stat-icon svg.icon-stat-shield { width: 44px !important; height: 44px !important; }
body.about-page .stat-icon svg .factory-window {
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: .9 !important;
}
body.about-page .stat strong {
  font-weight: 500 !important;
}
body.about-page .stat-label {
  font-weight: 500 !important;
}
body.about-page .stat:first-child strong {
  font-weight: 500 !important;
}
body.about-page .stat:nth-child(3) strong {
  font-weight: 500 !important;
  font-size: clamp(1.3rem, 2.3vw, 1.55rem) !important;
}
@media (max-width: 760px) {
  body.about-page .value-card .icon-circle svg.about-value-icon {
    width: 42px !important;
    height: 42px !important;
    stroke-width: 1.8 !important;
  }
  body.about-page .stat-icon svg.about-stat-icon { stroke-width: 1.65 !important; }
  body.about-page .stat-icon svg.icon-stat-globe { width: 42px !important; height: 42px !important; }
  body.about-page .stat-icon svg.icon-stat-people { width: 34px !important; height: 34px !important; }
  body.about-page .stat-icon svg.icon-stat-factory { width: 36px !important; height: 36px !important; }
  body.about-page .stat-icon svg.icon-stat-shield { width: 40px !important; height: 40px !important; }
}


/* About Us: use the exact icon artwork cropped from the approved reference screenshot.
   The previous inline SVGs were replaced in about.html, so no expanded duplicates remain. */
body.about-page .value-card .icon-circle.about-reference-icon-wrap,
body.about-page .stat-icon.about-reference-icon-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
body.about-page .value-card .icon-circle.about-reference-icon-wrap {
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  margin-bottom: 9px !important;
  border-radius: 0 !important;
}
body.about-page .stat-icon.about-reference-icon-wrap {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 0 !important;
}
body.about-page .about-reference-icon-wrap > img.about-reference-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}
/* The reference uses a conventional upright 1 in 100+ and larger, light serif metrics. */
body.about-page .stat:first-child > strong {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant-numeric: lining-nums !important;
  font-feature-settings: 'lnum' 1, 'onum' 0 !important;
  letter-spacing: -0.35px !important;
  line-height: 1 !important;
}
body.about-page .stat:nth-child(3) > strong {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  body.about-page .stat:first-child > strong { font-size: 27px !important; }
  body.about-page .stat:nth-child(3) > strong { font-size: clamp(17px, 4.4vw, 21px) !important; white-space: normal !important; }
}


/* About reference matching: exact story composite, arrow markers, and undistorted commitment-art proportions. */
body.about-page .caption-row span::before {
  content: '›' !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 5px 0 0 !important;
  background: transparent !important;
  color: #e64fac !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  vertical-align: -1px !important;
}

/* Keep the 1024:242 reference banner ratio; a fixed 241px height stretched the art on wider desktops. */
@media (min-width: 1000px) {
  body.about-page .about-commitment-banner {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1024 / 242 !important;
    background-size: 100% 100% !important;
  }
}

/* Final About mobile fix: reserve a separate artwork band above commitment copy.
   Keep the full globe/pills visible; place heading, paragraph, and CTA below it. */
@media (max-width: 760px) {
  body.about-page .about-commitment-banner {
    --about-mobile-art-height: clamp(165px, 47vw, 190px);
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding-top: var(--about-mobile-art-height) !important;
    background-size: auto var(--about-mobile-art-height) !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
  }
  body.about-page .about-commitment-inner {
    position: relative !important;
    width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding: 12px 0 22px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-self: auto !important;
  }
  body.about-page .about-commitment-copy {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: rgba(255, 250, 255, .94) !important;
    border-radius: 15px !important;
    padding: 15px 16px 16px !important;
    box-shadow: 0 4px 18px rgba(75, 36, 113, .05) !important;
  }
  body.about-page .about-commitment-button {
    justify-self: start !important;
    margin-left: 16px !important;
    transform: none !important;
  }
}

/* Distribution screenshot matching: keep this page scoped so the approved
   Home/About pages and the other reference pages remain unchanged. */
.ref-distribution {
  background-color: #fefdfd !important;
}
.ref-distribution .site-header {
  background: linear-gradient(90deg, #fefbfe 0%, #fbf8fe 52%, #fdf9fe 100%) !important;
  border-bottom: 1px solid #f4edf8 !important;
}
.ref-distribution .reference-hero,
.ref-distribution .distribution-hero {
  background-color: #fdf7fe !important;
}
.ref-distribution .reference-hero .hero-copy {
  background: linear-gradient(90deg, #fdf7fe 0%, rgba(253,247,254,.98) 75%, rgba(253,247,254,.84) 100%) !important;
}
.ref-distribution .distribution-features {
  background: linear-gradient(180deg, #fefafe 0%, #fdf9fe 70%, #fdf6fd 100%) !important;
  border-top: 0 !important;
  border-bottom: 1px solid #f3e9f5 !important;
}
.ref-distribution .distribution-network,
.ref-distribution .distribution-network .network-map,
.ref-distribution .distribution-channels {
  background-color: #fefdfd !important;
}
.ref-distribution .distribution-solutions {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.24) 100%), linear-gradient(100deg, #fdf3fe 0%, #fcf6ff 100%) !important;
}
.ref-distribution .distribution-channels .channel-card {
  border: 1px solid #f0e7f7 !important;
  border-radius: 10px !important;
  background: #fffdfd !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.ref-distribution .distribution-channels .channel-card > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* The 1024px reference uses the full desktop navigation rather than the
   tablet hamburger layout; size and align the wordmark to the screenshot. */
@media (min-width: 1000px) {
  .ref-distribution .site-header {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
  }
  .ref-distribution .site-header .nav-wrap {
    width: min(1600px, calc(100% - 64px)) !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0 0 12px !important;
    gap: 8.5px !important;
  }
  .ref-distribution .site-header .brand {
    flex: 0 0 243px !important;
    width: 243px !important;
    min-width: 243px !important;
    max-width: 243px !important;
  }
  .ref-distribution .site-header .logo {
    flex: 0 0 231px !important;
    width: 231px !important;
    min-width: 231px !important;
    max-width: 231px !important;
    transform: translate(-7px, 6px) !important;
    top: 0 !important;
    filter: contrast(1.1) saturate(1.08) !important;
  }
  .ref-distribution .site-header .nav {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  .ref-distribution .site-header .nav a,
  .ref-distribution .site-header .nav a:link,
  .ref-distribution .site-header .nav a:visited,
  .ref-distribution .site-header .nav a:hover,
  .ref-distribution .site-header .nav a:focus,
  .ref-distribution .site-header .nav a:active {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    padding: 6px 8.5px 4px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    transform: translateY(3px) !important;
    white-space: nowrap !important;
    background: transparent !important;
    color: #14145f !important;
  }
  .ref-distribution .site-header .nav a.active {
    color: #111879 !important;
  }
  .ref-distribution .site-header .nav a.active::after {
    bottom: -5px !important;
    left: 8.5px !important;
    right: 8.5px !important;
    height: 2px !important;
    background: #e94fae !important;
  }
  .ref-distribution .site-header .nav .search-btn {
    margin-left: auto !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    transform: translateY(3px) !important;
  }
  .ref-distribution .site-header .menu-btn {
    display: none !important;
  }
}

@media (min-width: 761px) {
  .ref-distribution .distribution-hero .hero-shell {
    height: calc(100vw * 382 / 1024) !important;
  }
  .ref-distribution .distribution-features {
    height: calc(100vw * 113 / 1024) !important;
  }
  .ref-distribution .distribution-network {
    height: calc(100vw * 295 / 1024) !important;
  }
  .ref-distribution .distribution-solutions {
    height: calc(100vw * 204 / 1024) !important;
  }
}

/* Fine-grained Distribution screenshot fit at the reference's 1024 x 1536 size. */
@media (min-width: 1000px) {
  .ref-distribution .channel-content {
    padding-top: 1.25vw !important;
  }
  .ref-distribution .channel-content > .eyebrow {
    margin-bottom: 8px !important;
  }
  .ref-distribution .distribution-channels .channel-card {
    min-height: calc(100vw * 192 / 1024) !important;
  }
  .ref-distribution .distribution-channels .channel-card > img {
    width: calc(100% + 2px) !important;
    max-width: none !important;
    margin: 0 -1px 0 !important;
  }
  /* The closing artwork overlaps the upper image by seven pixels to hide the
     seam; the taller art box compensates so the artwork still reaches the
     bottom edge of the supplied full-page reference. */
  .ref-distribution .distribution-commitment-banner {
    height: calc(100vw * 225 / 1024) !important;
    aspect-ratio: auto !important;
  }
  .ref-distribution .distribution-commitment-banner .banner-art {
    transform: none !important;
  }
}