/*
 * BIOTEN Developer V2.4 / DBC V4.0.0 finishing layer
 * A compact engineering interface for the four BIOTEN Packaging domains.
 */

body.dv24-page {
  --dv24-blue: #0b5ba3;
  --dv24-green: #117e5d;
  --dv24-ink: #102535;
  --dv24-body: #455b6b;
  --dv24-line: rgb(16 65 96 / .14);
  --dv24-paper: #fbfcfc;
  --dv24-soft: #edf4f5;
  --dv24-shell: min(1240px, calc(100% - clamp(32px, 6vw, 96px)));
  background: #f2f6f7;
}

body.dv24-page .dv2-shell {
  width: var(--dv24-shell) !important;
  max-width: none !important;
}

body.dv24-page :is(.dv21-hero__media, .dv2-passport-showcase__media) figcaption,
body.dv24-page figcaption:empty {
  display: none !important;
}

/* Developer hero: serious technical entry, not an oversized campaign banner. */
body.dv24-page .dv21-hero {
  min-height: 0 !important;
  padding-block: clamp(3.6rem, 6vw, 5.6rem) !important;
}

body.dv24-page .dv21-hero__grid {
  grid-template-columns: minmax(0, .83fr) minmax(28rem, 1.17fr) !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  align-items: center;
  min-height: 0 !important;
}

body.dv24-page .dv21-hero__copy {
  padding-block: 0 !important;
}

body.dv24-page .dv21-hero__copy h1 {
  max-width: 13ch !important;
  margin-block: .7rem 1.05rem !important;
  color: #0b3658 !important;
  font-size: clamp(2.7rem, 4.5vw, 4.55rem) !important;
  font-weight: 620 !important;
  line-height: 1.01 !important;
  letter-spacing: -.055em !important;
}

body.dv24-page .dv21-hero__lead {
  max-width: 35rem !important;
  font-size: clamp(.94rem, 1.12vw, 1.05rem) !important;
  line-height: 1.72 !important;
}

body.dv24-page .dv21-hero__media {
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--dv24-line);
  border-radius: 14px !important;
  background: #dfe9e9;
  box-shadow: 0 24px 70px rgb(9 48 72 / .1) !important;
}

body.dv24-page .dv21-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) contrast(1.04) brightness(.97);
}

body.dv24-page :is(.dv2-action, .dv2-action--accent, .dv2-action--secondary) {
  min-height: 2.75rem;
  padding: .7rem 1rem;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: .82rem;
  font-weight: 680;
}

body.dv24-page .dv2-action--accent {
  background: var(--dv24-green) !important;
}

body.dv24-page .dv2-action--secondary {
  border-color: rgb(11 91 163 / .23) !important;
  color: #0b4f82 !important;
  background: rgb(255 255 255 / .72) !important;
}

/* Four equal domains. Images identify the application before the copy does. */
body.dv24-page .dv21-domain-explorer {
  padding-block: clamp(4.4rem, 7vw, 6.3rem) !important;
  background: #f8fafb !important;
}

body.dv24-page :is(.dv21-section-intro, .dv2-section__head) {
  margin-bottom: clamp(1.65rem, 3vw, 2.55rem) !important;
}

body.dv24-page :is(.dv21-section-intro, .dv2-section__head) h2 {
  max-width: 16ch;
  color: #0b3658 !important;
  font-size: clamp(2.15rem, 3.8vw, 3.65rem) !important;
  font-weight: 620 !important;
  line-height: 1.04 !important;
  letter-spacing: -.05em !important;
}

body.dv24-page :is(.dv21-section-intro, .dv2-section__head) > p {
  max-width: 46rem;
  color: var(--dv24-body) !important;
  font-size: .91rem !important;
  line-height: 1.72 !important;
}

body.dv24-page .dv21-domain-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .75rem !important;
}

body.dv24-page .dv21-domain-tab {
  grid-template-rows: 8.4rem auto auto auto;
  min-height: 17.8rem !important;
  padding: 0 1rem 1rem !important;
  overflow: hidden;
  border: 1px solid var(--dv24-line) !important;
  border-radius: 11px !important;
  color: var(--dv24-ink) !important;
  background: rgb(255 255 255 / .78) !important;
  box-shadow: none !important;
  text-align: left;
}

body.dv24-page .dv21-domain-tab__media {
  width: calc(100% + 2rem);
  height: 8.4rem !important;
  margin: 0 -1rem .85rem;
  overflow: hidden;
  border-radius: 0 !important;
}

body.dv24-page .dv21-domain-tab__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.04) brightness(.9);
  transition: transform .85s cubic-bezier(.16, 1, .3, 1), filter .35s ease;
}

body.dv24-page .dv21-domain-tab:is(:hover, :focus-visible, [aria-selected="true"]) {
  border-color: rgb(17 126 93 / .4) !important;
  background: #fff !important;
  box-shadow: 0 15px 38px rgb(10 48 75 / .075) !important;
}

body.dv24-page .dv21-domain-tab:is(:hover, [aria-selected="true"]) .dv21-domain-tab__media img {
  filter: saturate(.86) contrast(1.04) brightness(.96);
  transform: scale(1.025);
}

body.dv24-page .dv21-domain-tab__number {
  margin-bottom: .45rem;
  color: var(--dv24-green) !important;
  font-size: .56rem !important;
  font-weight: 760;
  letter-spacing: .1em;
}

body.dv24-page .dv21-domain-tab strong {
  color: var(--dv24-ink) !important;
  font-size: 1.02rem !important;
  line-height: 1.3 !important;
}

body.dv24-page .dv21-domain-tab__copy {
  margin-top: .45rem;
  color: #61727e !important;
  font-size: .69rem !important;
  line-height: 1.5 !important;
}

body.dv24-page .dv21-domain-panels {
  margin-top: .85rem;
}

body.dv24-page .dv21-domain-panel {
  padding: clamp(1.25rem, 2.6vw, 2rem) !important;
  border: 1px solid var(--dv24-line) !important;
  border-radius: 12px !important;
  background: rgb(255 255 255 / .78) !important;
  box-shadow: none !important;
}

body.dv24-page .dv21-domain-status {
  color: var(--dv24-green) !important;
  background: transparent !important;
}

/* One local index only; the journey bar becomes a non-sticky page outline. */
body.dv24-page .dv2-local-nav {
  top: 4.5rem !important;
  border-block: 1px solid var(--dv24-line) !important;
  background: rgb(248 251 252 / .93) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.dv24-page .dv2-local-nav__inner {
  gap: 1.25rem !important;
  padding-block: .75rem !important;
}

body.dv24-page .dv2-local-nav a {
  border-radius: 0 !important;
  font-size: .72rem !important;
}

body.dv24-page .dv23-journey-nav {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  justify-content: center;
  gap: 0;
  width: var(--dv24-shell);
  margin: 1rem auto 0;
  padding: .4rem;
  border: 1px solid var(--dv24-line);
  border-radius: 10px;
  background: rgb(255 255 255 / .64);
  box-shadow: none !important;
}

body.dv24-page .dv23-journey-nav a {
  min-height: 2.2rem;
  border-radius: 7px !important;
  font-size: .68rem;
}

/* Technical sections share an editorial rhythm instead of stacked promo cards. */
body.dv24-page :is(.dv21-progressive, .dv2-section, .dv22-section, .dv23-section) {
  padding-block: clamp(4rem, 6.5vw, 6rem) !important;
}

body.dv24-page :is(.dv2-section--soft, .dv22-section--soft) {
  background: #edf4f5 !important;
}

body.dv24-page :is(.dv2-section--surface, .dv22-section--surface) {
  background: #f8fafb !important;
}

body.dv24-page :is(
  .dv21-progressive-steps li,
  .dv2-asset,
  .dv2-tool-row,
  .dv2-gate,
  .dv22-card,
  .dv22-resource-card,
  .dv23-boundary-definitions article
) {
  border: 1px solid var(--dv24-line) !important;
  border-radius: 10px !important;
  background: rgb(255 255 255 / .73) !important;
  box-shadow: none !important;
}

body.dv24-page :is(
  .dv21-progressive-steps li,
  .dv2-asset,
  .dv2-tool-row,
  .dv2-gate,
  .dv22-card,
  .dv22-resource-card
):is(:hover, :focus-within) {
  border-color: rgb(11 91 163 / .28) !important;
  background: #fff !important;
}

body.dv24-page .dv2-evidence-contract {
  border: 1px solid var(--dv24-line) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 94% 4%, rgb(17 126 93 / .09), transparent 22rem),
    linear-gradient(145deg, #f8fbfb, #eaf2f3) !important;
  box-shadow: none !important;
}

body.dv24-page .dv21-boundary-note,
body.dv24-page .dv2-note,
body.dv24-page .dv22-boundary-note {
  border-left: 2px solid rgb(17 126 93 / .48) !important;
  border-radius: 0 !important;
  color: #526674 !important;
  background: rgb(235 244 241 / .62) !important;
  font-size: .75rem !important;
  line-height: 1.65 !important;
}

/* Form becomes a clear project brief. */
body.dv24-page .request-form,
body.dv24-page .sample-form {
  border: 1px solid var(--dv24-line) !important;
  border-radius: 14px !important;
  background: rgb(255 255 255 / .8) !important;
  box-shadow: 0 18px 55px rgb(10 48 75 / .065) !important;
}

body.dv24-page :is(input, select, textarea) {
  border-color: rgb(16 65 96 / .2) !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body.dv24-page :is(input, select, textarea):focus {
  border-color: rgb(11 91 163 / .62) !important;
  box-shadow: 0 0 0 3px rgb(11 91 163 / .1) !important;
}

@media (max-width: 980px) {
  body.dv24-page .dv21-hero__grid {
    grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr) !important;
    gap: 2rem !important;
  }

  body.dv24-page .dv21-domain-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.dv24-page {
    --dv24-shell: calc(100% - 32px);
  }

  body.dv24-page .dv21-hero {
    padding-block: 3.25rem 2.5rem !important;
  }

  body.dv24-page .dv21-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  body.dv24-page .dv21-hero__copy h1 {
    max-width: 100% !important;
    font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
  }

  body.dv24-page .dv21-hero__media {
    aspect-ratio: 4 / 3;
  }

  body.dv24-page .dv21-domain-explorer {
    padding-block: 4rem !important;
  }

  body.dv24-page :is(.dv21-section-intro, .dv2-section__head) h2 {
    max-width: 100%;
    font-size: clamp(2rem, 9.6vw, 2.85rem) !important;
  }

  body.dv24-page .dv21-domain-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .62rem !important;
  }

  body.dv24-page .dv21-domain-tab {
    grid-template-rows: 6.2rem auto auto;
    min-height: 13.2rem !important;
    padding: 0 .75rem .75rem !important;
  }

  body.dv24-page .dv21-domain-tab__media {
    width: calc(100% + 1.5rem);
    height: 6.2rem !important;
    margin-inline: -.75rem;
  }

  body.dv24-page .dv21-domain-tab__copy {
    display: none;
  }

  body.dv24-page .dv21-domain-tab strong {
    font-size: .88rem !important;
  }

  body.dv24-page .dv2-local-nav__inner,
  body.dv24-page .dv23-journey-nav {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.dv24-page .dv2-local-nav__inner::-webkit-scrollbar,
  body.dv24-page .dv23-journey-nav::-webkit-scrollbar {
    display: none;
  }

  body.dv24-page :is(.dv2-local-nav a, .dv23-journey-nav a) {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  body.dv24-page :is(.dv21-progressive, .dv2-section, .dv22-section, .dv23-section) {
    padding-block: 3.7rem !important;
  }
}

@media (max-width: 390px) {
  body.dv24-page {
    --dv24-shell: calc(100% - 28px);
  }

  body.dv24-page .dv21-domain-tabs {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .72rem !important;
  }

  body.dv24-page .dv21-domain-tab {
    grid-template-rows: 7.4rem auto auto auto;
    min-height: 0 !important;
    padding: 0 .9rem .95rem !important;
  }

  body.dv24-page .dv21-domain-tab__media {
    width: calc(100% + 1.8rem);
    height: 7.4rem !important;
    margin-inline: -.9rem;
  }

  body.dv24-page .dv21-domain-tab__copy {
    display: block;
    font-size: .72rem !important;
    line-height: 1.48 !important;
  }

  body.dv24-page .dv21-domain-tab__number {
    font-size: .5rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dv24-page .dv21-domain-tab__media img {
    transition: none !important;
  }
}