/* ActiveBioBoost brand page (core/abb.html). Green and white slides alternate;
   cards keep dark text on light surfaces. */

.br { --br-line: rgb(255 255 255 / .16); --br-soft: rgb(255 255 255 / .08); overflow-x: clip; }
.br .jn-slide--white .jn-section-heading h2 { color: var(--jn-green); }
.br .jn-section-heading { margin-bottom: 2.25rem; }
.br .jn-section-heading h2 { max-width: 46rem; letter-spacing: -.02em; }
.br h3 { font-size: 1.125rem; line-height: 1.35; }
.br-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.br-button--ghost { color: #fff; border-color: rgb(255 255 255 / .35); background: transparent; }
.br-button--ghost:hover { border-color: var(--jn-orange); color: #fff; }
.br-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1.5rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.br-badge { padding: .4rem .85rem; border-radius: .4rem; background: var(--jn-orange); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; }
.br-label { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.br-text { max-width: 34rem; margin-bottom: 1.75rem; font-size: 1rem; line-height: 1.75; color: #444; }
.br-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: var(--jn-green); color: #fff; }
.br-icon--soft { background: rgb(255 111 63 / .12); color: var(--jn-orange-dark); }
.br-icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Hero */
.br-hero { display: flex; align-items: center; }
.br-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem); gap: 4rem; align-items: center; }
.br-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.br-hero h1 span { color: var(--jn-orange); }
.br-hero__lead { max-width: 36rem; margin: 1.25rem 0 2rem; font-size: clamp(.9375rem, 1.6vw, 1.125rem); line-height: 1.75; color: rgb(255 255 255 / .78); }
.br-visual { position: relative; margin: 0 0 2.5rem; }
.br-visual__photo { display: block; width: 100%; height: auto; border-radius: var(--jn-radius); box-shadow: 0 30px 70px rgb(0 0 0 / .3); }
.br-visual__logo { position: absolute; left: -2rem; bottom: -2.5rem; width: 7.5rem; height: auto; border: 3px solid var(--jn-orange); border-radius: 1.25rem; box-shadow: 0 18px 40px rgb(0 0 0 / .35); }

/* Product lines */
.br-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.br-line { display: flex; flex-direction: column; gap: .7rem; padding: 2rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: var(--jn-cream); transition: translate .3s ease, box-shadow .3s ease, border-color .2s ease; }
.br-line:hover { translate: 0 -4px; border-color: var(--jn-orange); box-shadow: 0 18px 40px rgb(1 60 53 / .12); }
.br-line .br-icon { margin-bottom: .4rem; }
.br-line h3 { font-size: 1.375rem; color: var(--jn-green); }
.br-line > p { font-size: .9375rem; line-height: 1.65; color: #444; }
.br-products { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.br-products li { padding: .45rem .85rem; border: 1px solid var(--jn-border); border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 600; color: var(--jn-green); }

/* Practice */
.br-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.br-card { --jn-text: #111; display: flex; flex-direction: column; gap: .6rem; padding: 1.75rem; border-radius: var(--jn-radius); background: #fff; color: #111; transition: translate .3s ease, box-shadow .3s ease; }
.br-card:hover { translate: 0 -4px; box-shadow: 0 20px 44px rgb(0 0 0 / .22); }
.br-card .br-icon { margin-bottom: .4rem; }
.br-card h3 { color: var(--jn-green); }
.br-card p { font-size: .9375rem; line-height: 1.65; color: #444; }

/* Protocols: ABB library snapshot, two groups */
.br-protocols__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1rem 4rem; align-items: end; margin-bottom: 2.25rem; }
.br-protocols__head .jn-section-heading { margin-bottom: 0; }
.br-protocols__head .br-text { margin-bottom: 1.25rem; }
.br-link { align-self: center; color: var(--jn-orange-dark); font-size: .9375rem; font-weight: 700; text-decoration: none; }
.br-link:hover { text-decoration: underline; }
.br-protocols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.br-protocol-group { padding: 1.5rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: var(--jn-cream); }
.br-protocol-group__title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.br-protocol-group__title strong { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding-inline: .5rem; border-radius: 999px; background: var(--jn-green); color: #fff; font-size: .8125rem; letter-spacing: 0; }
/* Each list is a fixed-height window that scrolls on its own; a fade marks more content. */
.br-protocol-list { display: grid; gap: .4rem; max-height: 21rem; margin: 0; padding: 0 .4rem 1.75rem 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; scrollbar-color: rgb(1 60 53 / .35) transparent; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.br-protocol-list:focus-visible { outline: 2px solid var(--jn-orange); outline-offset: 4px; border-radius: .5rem; }
.br-protocol-list li { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: .7rem; align-items: center; padding: .5rem .7rem; border-radius: .6rem; background: #fff; transition: background-color .2s ease; }
.br-protocol-list li:hover { background: rgb(255 111 63 / .06); }
.br-protocol-list li > span:last-child { display: grid; gap: .05rem; }
.br-protocol-list strong { font-size: .875rem; line-height: 1.3; color: var(--jn-green); }
.br-protocol-list small { font-size: .75rem; line-height: 1.35; color: var(--jn-muted); }
.br-protocol-list--compact strong { font-weight: 600; }
.br-protocol-group__hint { margin-top: .5rem; font-size: .75rem; color: var(--jn-muted); }
.br-code { display: grid; place-items: center; height: 1.6rem; border-radius: .45rem; background: rgb(255 111 63 / .12); color: var(--jn-orange-dark); font-size: .75rem; font-weight: 800; letter-spacing: .02em; }

/* Video player: one stage plus a playlist; YouTube loads only after a click */
.br-player { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: 1.25rem; align-items: start; }
.br-player__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--jn-radius); background: #000; box-shadow: 0 30px 70px rgb(0 0 0 / .35); }
.br-player__poster { position: absolute; inset: 0; display: block; color: #fff; }
.br-player__poster img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2, .7, .2, 1), filter .3s ease; }
.br-player__poster:hover img { scale: 1.03; filter: brightness(.92); }
.br-player__play { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--jn-orange); box-shadow: 0 0 0 10px rgb(255 111 63 / .25), 0 18px 40px rgb(0 0 0 / .35); translate: -50% -50%; transition: scale .25s ease, box-shadow .25s ease; }
.br-player__play svg { width: 2rem; height: 2rem; margin-left: .25rem; fill: #fff; }
.br-player__poster:hover .br-player__play, .br-player__poster:focus-visible .br-player__play { scale: 1.08; box-shadow: 0 0 0 14px rgb(255 111 63 / .22), 0 18px 40px rgb(0 0 0 / .35); }
.br-player__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.br-playlist { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.br-playlist__item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .85rem; align-items: center; padding: .45rem; border: 1px solid transparent; border-radius: var(--jn-radius-sm); color: #fff; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.br-playlist__item:hover { background: var(--br-soft); }
.br-playlist__item[aria-current] { border-color: var(--jn-orange); background: rgb(255 255 255 / .1); }
.br-playlist__item img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .5rem; }
.br-playlist__item span { display: grid; gap: .15rem; }
.br-playlist__item small { font-size: .625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange); }
.br-playlist__item strong { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.br-player__note { margin-top: 1rem; font-size: .75rem; color: rgb(255 255 255 / .55); }

/* Closing call */
.br-cta { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.br-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: 2rem 2.25rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: var(--jn-cream); }
.br-cta h2 { margin: .5rem 0; font-size: clamp(1.375rem, 2.6vw, 1.875rem); color: var(--jn-green); }
.br-cta p { color: #444; }

/* Motion: hero entrance; reveals only where scroll timelines exist. system.css turns
   it off for reduced motion and on weak devices (.jn-lite). */
@keyframes br-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.br-hero__copy > * { animation: br-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.br-hero__copy > :nth-child(2) { animation-delay: .08s; }
.br-hero__copy > :nth-child(3) { animation-delay: .16s; }
.br-hero__copy > :nth-child(4) { animation-delay: .24s; }
.br-visual { animation: br-in 1s cubic-bezier(.2, .7, .2, 1) .25s both; }
@supports (animation-timeline: view()) {
  .br :is(.br-line, .br-card, .br-protocol-group, .br-player, .br-cta__inner) { animation: br-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  .br :is(.br-card, .br-protocol-group):nth-child(2n) { animation-range: entry 8% entry 63%; }
}

/* Responsive */
@media (min-width: 901px) {
  .br > .br-hero { min-height: calc(100svh - var(--jn-header-height)); }
}
@media (max-width: 900px) {
  .br-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .br-protocols, .br-protocols__head, .br-player { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .br-visual { justify-self: center; width: min(100% - 2rem, 32rem); }
  .br-lines, .br-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .br-visual__logo { left: -1rem; width: 5.5rem; }
  .br-line, .br-card, .br-cta__inner { padding: 1.5rem 1.25rem; }
  .br-actions .jn-button { flex: 1 1 100%; text-align: center; }
  .br-player__play { width: 3.75rem; height: 3.75rem; }
  .br-protocol-group { padding: 1rem; }
  .br-protocol-list { max-height: 18rem; }
}