/* ============================================================
   PLAYR1 SITE 5.0 — "JUST D1FFERENT" redesign layer
   Loaded AFTER style.css on every page. Adds the Vina Sans
   display face, the hero carousel, and the new components from
   NEW PLAYR1 SITE 7-02-26.pdf. Base tokens still come from
   style.css (--p1-*, container, nav, footer, reveal).
   ============================================================ */

@font-face {
  font-family: 'Vina Sans';
  src: url('../assets/fonts/VinaSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --jd-green:  #D8E020;
  --jd-orange: #F89018;
  --jd-red:    #F80000;
  --jd-blue:   #10C0F0;
  --jd-pink:   #F878A8;
  /* readable-on-light variants */
  --jd-green-ink:  #8FA82A;
  --jd-orange-ink: #F26A22;
  --jd-red-ink:    #E5392C;
  --jd-blue-ink:   #00AEEF;
  --jd-pink-ink:   #E5249A;
  --font-vina: 'Vina Sans', 'Inter', system-ui, sans-serif;
}

/* ---------- display type ---------- */
.h5-display {
  font-family: var(--font-vina);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}
.h5-sub-it { font-style: italic; font-weight: 300; }

/* section header pattern: big Vina line + italic Inter accent line */
.h5-head { max-width: 900px; }
.h5-head .eyebrow { margin-bottom: 0.7rem; }
.h5-head h2 { font-family: var(--font-vina); font-weight: 400; text-transform: uppercase; line-height: 0.98; font-size: clamp(2rem, 4.6vw, 3.4rem); color: var(--p1-ink); }
.h5-head h2 .it { font-family: var(--font-body); font-weight: 300; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--p1-orange); }
.h5-head h2 .it--block { display: block; font-size: 0.78em; margin-top: 0.08em; }
.h5-head .h5-intro { margin-top: 1.1rem; font-size: clamp(0.92rem, 1.1vw, 1.02rem); line-height: 1.6; color: rgba(20,20,26,0.82); }
.h5-head--light h2 { color: #fff; }
.h5-head--light .h5-intro { color: rgba(255,255,255,0.85); }
/* single-line section headline (fits on one line at all desktop widths) */
.h5-head h2.nowrap1 { white-space: nowrap; font-size: clamp(1.3rem, 3vw, 2.9rem); }
@media (max-width: 700px) { .h5-head h2.nowrap1 { white-space: normal; font-size: clamp(1.6rem, 6.4vw, 2rem); } }

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.h5-hero { position: relative; min-height: clamp(600px, 58vw, 880px); overflow: hidden; background: #0a0a0e; color: #fff; display: flex; align-items: center; }
.h5-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.h5-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.h5-slide__bg { position: absolute; inset: 0; top: clamp(96px, 7vw, 130px); background-size: cover; background-position: center top; }
.h5-slide__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,10,0.62) 0%, rgba(6,6,10,0.28) 42%, rgba(6,6,10,0.05) 70%); }
.h5-slide__inner { position: relative; z-index: 2; width: 100%; max-width: none; margin-inline: auto; padding: clamp(7rem, 11vw, 9.5rem) 6.4vw clamp(2rem, 3.6vw, 2.8rem); display: grid; grid-template-columns: minmax(0, 620px) 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); min-height: inherit; height: 100%; }
.h5-slide__product { align-self: center; margin-bottom: 0; }
/* runner + ropes: athlete faces sit mid-frame — keep product low so faces stay clear */
.h5-slide[data-flavor="puckr"] .h5-slide__product,
.h5-slide[data-flavor="berry"] .h5-slide__product { align-self: end; margin-bottom: clamp(0.6rem, 1.6vw, 1.4rem); }
/* lockup block: eyebrow, MAD SCIENCE and JUST D1FFERENT justified to one shared width */
.h5-slide__copy-col { --lockw: clamp(300px, 34vw, 520px); width: var(--lockw); }
.h5-slide__eyebrow { width: var(--lockw); font-size: clamp(0.58rem, 0.82vw, 0.7rem); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.9); font-weight: 600; white-space: nowrap; text-align: left; }
.h5-slide__mad { font-family: var(--font-vina); font-size: calc(var(--lockw) / 4.05); line-height: 0.92; margin-top: 0.3rem; text-transform: uppercase; color: #fff; font-weight: 400; text-shadow: 0 2px 18px rgba(0,0,0,0.35); white-space: nowrap; }
.h5-slide__mad sup { font-size: 0.22em; vertical-align: 2.6em; letter-spacing: 0; }
.h5-slide__jd { display: block; width: var(--lockw); height: auto; margin: 0.5rem 0 1rem; }
.h5-slide__copy { font-size: clamp(0.86rem, 1.05vw, 1.02rem); line-height: 1.6; color: rgba(255,255,255,0.94); max-width: 56ch; text-shadow: 0 1px 14px rgba(0,0,0,0.45); }
.h5-slide__copy strong { font-weight: 700; color: #fff; }
/* product in dotted ring */
.h5-slide__product { position: relative; justify-self: center; width: clamp(230px, 26vw, 360px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.h5-slide__product::before { content: ""; position: absolute; inset: -7%; border-radius: 50%; border: 2px dotted rgba(255,255,255,0.55); animation: h5ring 60s linear infinite; }
.h5-slide__product::after { content: ""; position: absolute; inset: -7%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle 5px at 50% 0%, var(--p1-orange) 97%, transparent 100%), radial-gradient(circle 4.5px at 50% 100%, #D6E84A 97%, transparent 100%);
  filter: drop-shadow(0 0 10px rgba(255,90,31,0.7));
  animation: h5ring 45s linear infinite; }
@keyframes h5ring { to { transform: rotate(360deg); } }
.h5-slide__product img { width: 88%; height: auto; filter: drop-shadow(0 26px 44px rgba(0,0,0,0.55)); animation: h5bob 7s ease-in-out infinite; }
@keyframes h5bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
/* dots */
.h5-hero__dots { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 1.1rem; display: flex; gap: 0.55rem; }
.h5-hero__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,0.38); cursor: pointer; transition: background .25s, transform .25s; }
.h5-hero__dots button.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 880px) {
  .h5-slide__inner { grid-template-columns: 1fr; padding-top: 5.4rem; }
  .h5-slide__product { order: -1; width: clamp(170px, 38vw, 230px); margin-inline: auto; }
  .h5-slide__bg::after { background: linear-gradient(180deg, rgba(6,6,10,0.55) 0%, rgba(6,6,10,0.72) 100%); }
}

/* ============================================================
   HOME — five reasons columns
   ============================================================ */
.h5-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.2rem, 2.4vw, 2.2rem); margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.h5-col { border-top: 0; }
.h5-col__t { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--c, var(--p1-orange)); }
.h5-col__t::before { content: "→ "; }
.h5-col p { margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.55; color: rgba(20,20,26,0.78); }
@media (max-width: 1020px) { .h5-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .h5-cols { grid-template-columns: 1fr; } }

/* ============================================================
   HOME — three system cards
   ============================================================ */
.h5-sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: clamp(1.8rem, 3vw, 2.8rem); }
.h5-sys__card img { width: 100%; aspect-ratio: 1.38; object-fit: cover; border-radius: 10px; display: block; background: #000; }
.h5-sys__card .h5-sys__sym { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--c); margin-top: 0.9rem; line-height: 1; }
.h5-sys__sym svg { width: 1.9rem; height: 1.9rem; display: block; }
.h5-sys__t { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c); margin-top: 0.15rem; }
.h5-sys__card p { margin-top: 0.5rem; font-size: 0.83rem; line-height: 1.58; color: rgba(20,20,26,0.78); }
@media (max-width: 880px) { .h5-sys { grid-template-columns: 1fr; } }

/* ============================================================
   Certifications row (home) — lineup + five marks
   ============================================================ */
.h5-lineup { display: flex; justify-content: center; align-items: flex-end; gap: clamp(0.4rem, 1.6vw, 1.4rem); margin: clamp(1.8rem, 3.4vw, 3rem) auto; max-width: 1050px; }
.h5-lineup img { width: clamp(90px, 17%, 190px); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.18)); }
.h5-certs { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.2rem, 2.6vw, 2.4rem); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.h5-cert { text-align: left; }
.h5-cert__art { height: 74px; display: flex; align-items: center; }
.h5-cert__art img { max-height: 74px; max-width: 108px; object-fit: contain; }
.h5-cert h3 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 0.7rem; color: var(--c, var(--p1-ink)); line-height: 1.3; }
.h5-cert p { margin-top: 0.45rem; font-size: 0.78rem; line-height: 1.55; color: rgba(20,20,26,0.75); }
@media (max-width: 1020px) { .h5-certs { grid-template-columns: repeat(2, 1fr); } .h5-cert__art { height: 60px; } }
@media (max-width: 560px)  { .h5-certs { grid-template-columns: 1fr; } }

/* ============================================================
   Quote block
   ============================================================ */
.h5-quote { border-radius: 14px; overflow: hidden; position: relative; isolation: isolate; max-width: 900px; margin-inline: auto; padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.4rem); color: #fff; }
.h5-quote::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('../assets/science5/pixsplash.jpg') center / cover no-repeat; }
.h5-quote::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8,8,12,0.28); }
.h5-quote p { color: #fff; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.42; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 2px 20px rgba(0,0,0,0.6); }
.h5-quote cite { display: block; margin-top: 0.8rem; font-style: normal; font-size: 0.8rem; color: rgba(255,255,255,0.9); }

/* ============================================================
   Generic page hero (inner pages)
   ============================================================ */
.h5-phero { position: relative; overflow: hidden; background: #0a0a0e; color: #fff; }
.h5-phero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.h5-phero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,10,0.72) 0%, rgba(6,6,10,0.38) 48%, rgba(6,6,10,0.08) 75%); }
.h5-phero__inner { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: clamp(7rem, 11vw, 9.5rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 6vw, 4.6rem); }
.h5-phero .eyebrow5 { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.85); }
.h5-phero h1 { font-family: var(--font-vina); text-transform: uppercase; font-weight: 400; font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 0.96; margin-top: 0.6rem; max-width: 20ch; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.h5-phero .it { display: block; font-family: var(--font-body); font-weight: 300; font-style: italic; text-transform: none; color: var(--p1-orange); font-size: 0.62em; margin-top: 0.12em; }
.h5-phero .lead5 { margin-top: 1.2rem; max-width: 58ch; font-size: clamp(0.9rem, 1.1vw, 1.04rem); line-height: 1.62; color: rgba(255,255,255,0.92); }
.h5-phero--right .h5-phero__bg::after { background: linear-gradient(270deg, rgba(6,6,10,0.72) 0%, rgba(6,6,10,0.38) 48%, rgba(6,6,10,0.08) 75%); }
.h5-phero--right .h5-phero__inner { display: flex; justify-content: flex-end; }
.h5-phero--right .h5-phero__copy { max-width: 620px; }

/* ============================================================
   Press — story angles
   ============================================================ */
.h5-angles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3.4vw, 3rem) clamp(2rem, 4.5vw, 4.5rem); margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.h5-angle { border-left: 5px solid var(--c, var(--p1-orange)); padding-left: clamp(0.9rem, 1.8vw, 1.4rem); }
.h5-angle h3 { font-family: var(--font-vina); font-weight: 400; text-transform: uppercase; font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.02; color: var(--p1-ink); }
.h5-angle p { margin-top: 0.55rem; font-size: 0.86rem; line-height: 1.58; color: rgba(20,20,26,0.78); }
@media (max-width: 780px) { .h5-angles { grid-template-columns: 1fr; } }

/* ============================================================
   Shop — filter strip, flavor cards, FAQ, bottom band
   ============================================================ */
.h5-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0; padding: 1.1rem 0 0.4rem; font-size: 0.9rem; }
.h5-filter b { font-family: var(--font-vina); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.9rem; font-size: 1.05rem; }
.h5-filter a { color: var(--p1-orange); text-decoration: underline; text-underline-offset: 3px; }
.h5-filter span.sep { margin: 0 0.7rem; color: rgba(20,20,26,0.35); }
.h5-flavors { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.8rem); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.h5-flavor { display: grid; grid-template-columns: 108px 1fr; gap: 1rem; align-items: start; }
.h5-flavor img { width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(0,0,0,0.16)); }
.h5-flavor__tags { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(20,20,26,0.55); font-weight: 600; }
.h5-flavor h3 { font-size: 1.15rem; font-weight: 800; color: var(--c, var(--p1-orange)); margin-top: 0.2rem; }
.h5-flavor .fl-lead { font-size: 0.78rem; font-weight: 700; margin-top: 0.35rem; color: var(--p1-ink); line-height: 1.4; }
.h5-flavor p.fl-body { font-size: 0.78rem; line-height: 1.55; color: rgba(20,20,26,0.75); margin-top: 0.4rem; }
.h5-flavor__links { margin-top: 0.55rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.h5-flavor__links a { color: var(--p1-orange); margin-right: 1.1rem; }
.h5-flavor__links a::after { content: " →"; }
@media (max-width: 1020px) { .h5-flavors { grid-template-columns: 1fr; } }
.h5-certline { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0; margin-top: clamp(1.8rem, 3vw, 2.6rem); padding-top: 1.2rem; border-top: 1px solid rgba(20,20,26,0.14); font-size: 0.82rem; color: rgba(20,20,26,0.8); }
.h5-certline span.sep { margin: 0 0.75rem; color: rgba(20,20,26,0.3); }
/* FAQ */
.h5-faq { margin-top: 1.4rem; }
.h5-faq details { border: 1px solid rgba(20,20,26,0.16); border-radius: 6px; margin-bottom: 0.7rem; background: #fff; }
.h5-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 1.2rem; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; }
.h5-faq summary::-webkit-details-marker { display: none; }
.h5-faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: rgba(20,20,26,0.45); transition: transform .25s; }
.h5-faq details[open] summary::after { transform: rotate(45deg); }
.h5-faq .faq-a { padding: 0 1.2rem 1.1rem; font-size: 0.88rem; line-height: 1.6; color: rgba(20,20,26,0.78); }
/* bottom band */
.h5-skus { background: #0d0d12; color: #fff; border-radius: 12px; padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.6rem); display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
.h5-skus p { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.9); max-width: 62ch; }
.h5-skus__btns { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.h5-btn { display: inline-block; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.76rem; font-weight: 600; padding: 0.95rem 1.6rem; border-radius: 4px; white-space: nowrap; }
.h5-btn--solid { background: var(--p1-orange); color: #fff; }
.h5-btn--solid:hover { background: var(--p1-orange-deep, #E64A0E); }
.h5-btn--ghost { border: 1px solid rgba(255,255,255,0.55); color: #fff; }
.h5-btn--ghost:hover { border-color: #fff; }

/* ============================================================
   Formula — element table 5.0
   ============================================================ */
.h5-eltable { color: #fff; }
.h5-elcats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 1.6rem; }
.h5-elcat { background: #fff; padding: 0; border-radius: 3px; overflow: hidden; }
.h5-elcat__bar { height: 8px; background: var(--c); }
.h5-elcat__body { padding: 0.55rem 0.7rem 0.7rem; text-align: center; }
.h5-elcat__body b { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); }
.h5-elcat__body span { display: block; font-size: 0.66rem; color: rgba(20,20,26,0.7); margin-top: 0.2rem; line-height: 1.35; }
.h5-eltiles { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; margin-top: 1.1rem; }
.h5-el { border: 2px solid var(--c); border-radius: 6px; aspect-ratio: 0.94; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; background: rgba(255,255,255,0.02); }
.h5-el small { font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); font-weight: 700; }
.h5-el b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 2vw, 1.7rem); color: var(--c); line-height: 1; }
@media (max-width: 900px) { .h5-eltiles { grid-template-columns: repeat(5, 1fr); } .h5-elcats { grid-template-columns: 1fr 1fr; } }
/* ingredient copy blocks */
.h5-ing { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.8rem); margin-top: clamp(2rem, 4vw, 3rem); }
.h5-ing__item { border-top: 4px solid var(--c, var(--p1-orange)); padding-top: 0.8rem; }
.h5-ing__item small { display: block; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 600; }
.h5-ing__item h3 { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c, var(--p1-orange)); margin-top: 0.3rem; }
.h5-ing__item p { font-size: 0.8rem; line-height: 1.58; color: rgba(255,255,255,0.82); margin-top: 0.5rem; }
@media (max-width: 900px) { .h5-ing { grid-template-columns: 1fr; } }

/* ============================================================
   Science — system rows / bands
   ============================================================ */
.h5-sysgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.6rem) clamp(2rem, 4.5vw, 4.5rem); margin-top: clamp(2rem, 3.6vw, 3rem); }
.h5-sysrow { display: grid; grid-template-columns: 190px 1fr; gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
.h5-sysrow img { width: 100%; aspect-ratio: 0.8; object-fit: cover; border-radius: 10px; background: #000; }
.h5-sysrow small { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p1-orange); font-weight: 700; }
.h5-sysrow h3 { font-size: 1rem; font-weight: 800; color: var(--p1-ink); line-height: 1.35; margin-top: 0.3rem; }
.h5-sysrow p { font-size: 0.82rem; line-height: 1.58; color: rgba(20,20,26,0.78); margin-top: 0.5rem; }
@media (max-width: 980px) { .h5-sysgrid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .h5-sysrow { grid-template-columns: 1fr; } .h5-sysrow img { aspect-ratio: 1.5; } }
/* clinical band */
.h5-clinband { border: 1.5px solid rgba(242,106,34,0.55); border-radius: 14px; background: #fff; padding: clamp(1.6rem, 3.4vw, 2.6rem); display: grid; grid-template-columns: 150px 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center; }
.h5-clinband img { width: 100%; height: auto; }
.h5-clinband h2 { font-family: var(--font-vina); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1; color: var(--p1-ink); }
.h5-clinband p { margin-top: 0.8rem; font-size: 0.92rem; line-height: 1.62; color: rgba(20,20,26,0.82); }
@media (max-width: 700px) { .h5-clinband { grid-template-columns: 1fr; } .h5-clinband img { max-width: 130px; } }
/* B12 dark band */
.h5-b12 { border-radius: 14px; overflow: hidden; position: relative; isolation: isolate; color: #fff; padding: clamp(1.8rem, 4vw, 3rem); display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.6rem, 3.4vw, 3rem); }
.h5-b12::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('../assets/science5/splash.jpg') center / cover no-repeat; }
.h5-b12::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8,8,12,0.78); }
.h5-b12__stat b { font-family: var(--font-vina); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 0.95; display: block; }
.h5-b12__stat span { display: block; margin-top: 0.6rem; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.85); line-height: 1.5; }
.h5-b12__body h2 { font-family: var(--font-vina); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 2.7vw, 2.1rem); line-height: 1; }
.h5-b12__body h2 .it { font-family: var(--font-body); font-style: italic; font-weight: 300; text-transform: none; color: var(--p1-orange); }
.h5-b12__body > p { margin-top: 0.9rem; font-size: 0.92rem; line-height: 1.62; color: rgba(255,255,255,0.9); max-width: 72ch; }
.h5-b12__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.6rem); margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.25); }
.h5-b12__cmp h4 { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; }
.h5-b12__cmp p { font-size: 0.78rem; line-height: 1.55; color: rgba(255,255,255,0.82); margin-top: 0.35rem; }
@media (max-width: 780px) { .h5-b12 { grid-template-columns: 1fr; } .h5-b12__cmp { grid-template-columns: 1fr; } }

/* ============================================================
   Our Story helpers
   ============================================================ */
.h5-quoteline { font-style: italic; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; color: #fff; max-width: 46ch; margin-top: 1.3rem; }
.h5-teamquote { font-style: italic; font-size: 0.82rem; line-height: 1.55; color: var(--p1-orange); margin-top: 0.7rem; }
.h5-difference { border: 1.5px solid rgba(242,106,34,0.65); border-radius: 10px; padding: 1.2rem 1.4rem; margin-top: 1.6rem; }
.h5-difference h4 { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p1-orange); font-weight: 800; }
.h5-difference p { margin-top: 0.5rem; font-size: 0.82rem; line-height: 1.6; color: rgba(255,255,255,0.88); }

/* Schools CTA band 5.0 */
.h5-schcta { border-radius: 14px; position: relative; isolation: isolate; overflow: visible; color: #fff; padding: clamp(1.8rem, 4vw, 2.8rem); display: grid; grid-template-columns: 1fr auto; gap: 1.6rem; align-items: center; }
.h5-schcta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; background: url('../assets/science5/splash.jpg') center / cover no-repeat; }
.h5-schcta::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; background: rgba(8,8,12,0.55); }
.h5-schcta h2 { font-size: clamp(1.25rem, 2.4vw, 1.8rem); font-weight: 800; line-height: 1.2; max-width: 24ch; }
.h5-schcta p { margin-top: 0.7rem; font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.92); max-width: 68ch; }
@media (max-width: 820px) { .h5-schcta { grid-template-columns: 1fr; } }

/* the "1" in D1fferent headlines — brand accent per master copy doc */
.d1 { color: #B8D400; }