/* JUST PROTEIN: bolder layer (2026-10-31). Navy medical look kept. Loaded after jp-v4.css.
   To go back: delete this file, jp-lift.js, and their two lines in layout/jp.liquid. */

/* full width on big screens */
@media (min-width:1500px){
  .jp-wrap,.jp-hero__in,.jp-pil>*{max-width:none}
  .jp-wrap{padding-left:36px;padding-right:36px}
  .jp-hero__in{padding-left:56px;padding-right:56px}
  .jp-card__img{height:240px}
}
@media (min-width:2000px){.jp-card__img{height:280px}}

/* floating translucent header */
.jp-hd{position:sticky;top:12px;z-index:60;margin:12px 20px 0;border:1px solid var(--line2);border-radius:16px;background:rgba(251,250,244,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.jp-hd .jp-wrap{padding-left:20px;padding-right:20px}

/* bigger, heavier type */
.jp-hero__in h1{font-size:clamp(44px,6.4vw,104px);font-weight:800;letter-spacing:-.03em;line-height:.98;text-wrap:balance}
.jp-h2{font-size:clamp(30px,3.8vw,56px);font-weight:800;line-height:1.04;text-wrap:balance}
.jp-h2--lg{font-size:clamp(34px,4.4vw,64px)}
.jp-kick{font-size:12px;letter-spacing:.2em}
.jp-cat__lab{height:68px;font-size:15px}
.jp-card__t{font-size:16px}
.jp-card__pr b{font-size:20px;color:var(--navy)}
.jp-pil [class*="stat"] b,.jp-pil__stat b{font-size:clamp(48px,6vw,96px)}

/* buttons and cards: clear hover, press and focus states */
.jp-btn,.jp-card,.jp-cat{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),background-color .3s,border-color .3s}
.jp-btn:hover{transform:translateY(-2px)}
.jp-btn:active{transform:scale(.98)}
.jp-card{border-radius:20px}
.jp-card:hover,.jp-cat:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(16,37,64,.16);border-color:var(--navy)}
.jp-card:active{transform:translateY(-2px)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:8px}

/* scrolling facts strip */
.jp-tick{background:var(--deep);color:var(--paper);overflow:hidden;margin:20px 20px 0;border-radius:16px}
.jp-tick__tr{display:flex;width:max-content;animation:jpTick 48s linear infinite}
.jp-tick:hover .jp-tick__tr{animation-play-state:paused}
.jp-tick__ul{display:flex;gap:0;margin:0;padding:0;list-style:none}
.jp-tick__ul li{white-space:nowrap;padding:18px 28px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.jp-tick__ul li::after{content:"";display:inline-block;width:8px;height:8px;margin-left:56px;border-radius:50%;background:var(--sky)}
@keyframes jpTick{to{transform:translateX(-50%)}}

/* tagline: words light up one by one */
.jp-tg{padding-top:96px;padding-bottom:96px}
.jp-tg__k{margin-bottom:24px}
.jp-tg__t{margin:0;max-width:1100px;font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:clamp(34px,5vw,72px);line-height:1.08;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.jp-js .jp-tg__w{opacity:.28;transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.jp-js .jp-tg__w.is-on{opacity:1}
.jp-tg__s{max-width:620px;margin:32px 0 0;font-size:18px;color:var(--soft)}

/* sections rise and fade in once */
.jp-js .jp-rv{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.jp-js .jp-rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .jp-tick__tr{animation:none}
  .jp-js .jp-rv{opacity:1;transform:none;transition:none}
  .jp-js .jp-tg__w{opacity:1;transition:none}
}
@media (max-width:700px){.jp-hd{margin:8px 12px 0}.jp-tick{margin:12px 12px 0}.jp-tg{padding-top:56px;padding-bottom:56px}}