@charset "UTF-8";
/* ==========================================================================
   NJP SITE CSS — single consolidated stylesheet
   ==========================================================================

   WHY THIS FILE EXISTS
   This replaces eight separate CSS blocks that were pasted in one at a time.
   Any single paste into Additional CSS could overwrite the others, which is
   exactly what happened. Keep everything here, in one place, so there is only
   one thing to lose.

   WHERE IT GOES
   Appearance → Customize → Additional CSS.
   Paste this ABOVE any Max Mega Menu CSS you already have — do not replace it.
   The mega-menu rules are deliberately NOT included here so the two blocks
   stay independent.

   WHAT IS *NOT* HERE
   Coach cards (.njp-coaches / .njp-ccard) live in the NJP Team Page plugin's
   own stylesheet and load site-wide from there. Duplicating them would fight
   the plugin, so they are excluded on purpose.

   IMPORTANT — THIS SITE HAS A 10px ROOT
   Beaver Builder's base.min.css sets html { font-size: 10px }, so 1rem = 10px,
   not 16px. Every rem value below is calculated for that. Do not "fix" the
   root font-size; the theme's own spacing depends on it.

   CONTENTS
     1  Type scale
     2  Editor chrome guard  (keeps the scale out of Beaver Builder's UI)
     3  Teams grid + cards
     4  Sponsors
     5  Program pillars — shell, sticky rail, panels
     6  Pillar body extras — schedule, checklist, CTA, notice
     7  Proof strip
     8  Call-to-action band
     9  Stories rail — global video testimonials
   ========================================================================== */


/* ==========================================================================
   1. TYPE SCALE
   Fluid 360px → 1440px. Clamps use rem + vw, never bare vw, so browser zoom
   still works (bare vw fails WCAG 1.4.4).
   Single spaces around every "+" — a minifier that eats the space before the
   operator makes the whole clamp invalid and the declaration is dropped.
   ========================================================================== */
:root{
  /* The brand heading stack. Every component in this file and in the NJP Team
     Page plugin routes through it, so this is the only place to change it.
     --njp-display is the plugin's own variable name; redeclaring it here
     overrides the plugin, because Additional CSS loads after plugin styles. */
  --njp-font-display: "counterpress", Verdana, Arial, sans-serif;
  --njp-display: "counterpress", Verdana, Arial, sans-serif;

  --njp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --njp-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* calculated for a 10px root */
  --njp-h1: clamp(3.4rem, 2rem + 3.89vw, 7.6rem);              /* 34 → 76px */
  --njp-h2: clamp(2.8rem, 1.93rem + 2.41vw, 5.4rem);           /* 28 → 54px */
  --njp-h3: clamp(2.3rem, 1.8rem + 1.39vw, 3.8rem);            /* 23 → 38px */
  --njp-h4: clamp(2rem, 1.73rem + 0.74vw, 2.8rem);             /* 20 → 28px */
  --njp-h5: clamp(1.7rem, 1.53rem + 0.46vw, 2.2rem);           /* 17 → 22px */
  --njp-h6: clamp(1.5rem, 1.4rem + 0.28vw, 1.8rem);            /* 15 → 18px */

  --njp-body-size: clamp(1.6rem, 1.52rem + 0.23vw, 1.85rem);   /* 16 → 18.5px */
  --njp-lead-size: clamp(1.8rem, 1.67rem + 0.37vw, 2.2rem);    /* 18 → 22px */
  --njp-small:     clamp(1.3rem, 1.27rem + 0.09vw, 1.4rem);    /* 13 → 14px */

  --njp-measure: 68ch;

  /* palette, shared by every component below */
  --njp-navy: #041e42;
  --njp-navy-2: #0a2d5c;
  --njp-navy-3: #02142c;
  --njp-gold: #ffb81c;
  --njp-gold-ink: #6b4a00;
  --njp-ink: #0b0f14;
  --njp-ink-2: #3a4451;
  --njp-ink-3: #5f6873;
  --njp-paper: #ffffff;
  --njp-paper-2: #f5f6f7;
  --njp-line: #e1e4e8;
  --njp-line-2: #cbd1d8;

  --njp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --njp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* default card art when a team has no featured image */
  --njp-card-fallback: url("/wp-content/uploads/2020/02/Card.png");
  /* Jr Predators logo, for avatar and tile fallbacks */
  --njp-logo: url("/wp-content/uploads/2020/02/NashvilleJrPreds-Logo.png");
}

/* never set a px root — it overrides the user's browser preference, and the
   theme's spacing is built on its own 10px baseline */
html{ -webkit-text-size-adjust: 100%; }

/* ==========================================================================
   SITE TYPOGRAPHY  —  scoped to .fl-page

   Everything below is deliberately prefixed with .fl-page, the Beaver Builder
   theme's page wrapper.

   WHY THIS SCOPE AND NOT THE DOCUMENT

   Beaver Builder renders its editor UI on the FRONT END, and WordPress renders
   the admin bar there too. Both are siblings of .fl-page, not descendants:

     body
       #wpadminbar          <- WordPress chrome
       .fl-page             <- the site. Everything here is ours.
       .fl-lightbox         <- BB module settings, appended to body
       .media-modal         <- WordPress media library

   An unscoped `h1{ font-size: ... !important }` therefore reaches straight
   into BB's panels and the media modal and restyles software that is not ours.
   That produced two real bugs: every admin-bar icon rendered as a grey box,
   and the caret in the HTML module's code editor drifted a couple of
   characters right of the text, so you could not see what you were deleting.

   Both were first "fixed" with a counter-rule that re-styled the chrome back.
   That was the wrong shape: it meant two plugins fighting over WordPress core
   UI, and every new widget would need another exception. Scoping to .fl-page
   means the question never arises — core and Beaver Builder keep their own
   styles because nothing of ours applies to them.

   Verified on the live site: 35 of 35 headings are inside .fl-page, and
   #wpadminbar is not.
   ========================================================================== */

.fl-page :is(h1, h2, h3, h4, h5, h6){
  font-family: var(--njp-font-display) !important;
  font-weight: 700;
  text-wrap: balance;
}

/* Beaver Builder wraps heading text in a span and sometimes sizes it.
   Let it inherit rather than sizing descendants directly. */
/* Written out rather than :is(> span, > a) — a leading combinator is not
   valid inside :is(), and because :is() is a forgiving list those two would
   be dropped silently instead of erroring. */
.fl-page :is(h1, h2, h3, h4, h5, h6) .fl-heading-text,
.fl-page :is(h1, h2, h3, h4, h5, h6) > span,
.fl-page :is(h1, h2, h3, h4, h5, h6) > a{
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
}
/* keep genuinely smaller inline elements smaller */
.fl-page :is(h1, h2, h3, h4, h5, h6) :is(small, sub, sup){
  font-size: 0.62em !important;
}

.fl-page h1{ font-size: var(--njp-h1) !important; line-height: 0.94; letter-spacing: -0.02em; }
.fl-page h2{ font-size: var(--njp-h2) !important; line-height: 1.0;  letter-spacing: -0.015em; }
.fl-page h3{ font-size: var(--njp-h3) !important; line-height: 1.08; letter-spacing: -0.01em; }
.fl-page h4{ font-size: var(--njp-h4) !important; line-height: 1.18; letter-spacing: -0.005em; }
.fl-page h5{ font-size: var(--njp-h5) !important; line-height: 1.3; }
.fl-page h6{ font-size: var(--njp-h6) !important; line-height: 1.38; letter-spacing: 0.01em; }

.fl-page{ font-size: var(--njp-body-size); line-height: 1.65; }

.fl-page :is(p, li, dd, blockquote, .fl-rich-text, .fl-rich-text p){
  font-size: var(--njp-body-size);
  line-height: 1.65;
}
.fl-page p{ margin-block: 0 1.15em; }
.fl-page p:last-child{ margin-bottom: 0; }

/* readable measure — size alone does not fix readability at 1400px wide */
.fl-page :is(.fl-rich-text, .entry-content) p{ max-width: var(--njp-measure); }
.fl-page :is(.fl-rich-text p.njp-full, .njp-full){ max-width: none; }

.fl-page :is(.njp-lead, .fl-rich-text p.njp-lead){ font-size: var(--njp-lead-size); line-height: 1.55; }
.fl-page :is(small, .njp-small, figcaption){ font-size: var(--njp-small); line-height: 1.5; }

.fl-page :is(ul, ol){ margin-block: 0 1.15em; padding-left: 1.4em; }
.fl-page li{ margin-bottom: 0.4em; }
.fl-page li:last-child{ margin-bottom: 0; }


/* ==========================================================================
   3. TEAMS GRID + CARDS
   Add "njp-teams" to the Advanced Posts module's CSS Class field for the grid.
   The cards carry their own variables, so they still render correctly even if
   that class is missing.
   ========================================================================== */
.njp-teams{
  display: grid !important;
  gap: clamp(10px, 1.4vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* strip the module's own post wrapper */
.njp-teams .fl-post-grid-post,
.njp-teams .pp-post-grid-item,
.njp-teams > li,
.njp-teams > div{
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important;
  width: auto !important; float: none !important;
}

.njp-tcard{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--njp-navy);
  text-decoration: none !important;
  transition: transform .3s var(--njp-ease), box-shadow .3s var(--njp-ease);
}
.njp-tcard:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(4, 30, 66, .35), 0 2px 6px rgba(11, 15, 20, .08);
}
.njp-tcard:focus-visible{ outline: 2px solid var(--njp-gold); outline-offset: 3px; }

/* featured image */
.njp-tcard__media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transition: transform .6s var(--njp-ease-out), filter .4s var(--njp-ease);
}
.njp-tcard:hover .njp-tcard__media{ transform: scale(1.05); filter: brightness(.82); }

/* no featured image — branded card graphic */
.njp-tcard__media--fb{
  background-image: var(--njp-card-fallback);
  background-color: var(--njp-navy);
  background-size: cover;
  background-position: center;
  /* if Card.png crops awkwardly, change the two lines above to:
     background-size: contain;  */
}

/* legibility scrim */
.njp-tcard::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 20, 44, .92) 0%, rgba(2, 20, 44, .55) 38%, rgba(2, 20, 44, .12) 68%, transparent 100%);
}

.njp-tcard__body{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: block;
  padding: clamp(16px, 2.2vw, 24px);
}

/* !important beats the global h3 rule in section 1 */
.njp-tcard__age{
  display: block;
  margin: 0 !important;
  font-family: var(--njp-font-display) !important;
  font-size: clamp(3rem, 1.6rem + 1.6vw, 4.2rem) !important;   /* 30 → 42px */
  font-weight: 700;
  line-height: .92 !important;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  /* stop long names breaking mid-word, e.g. CLARK VILLE */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.njp-tcard__yrs{
  display: block;
  margin-top: 7px;
  font-family: var(--njp-font-body);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--njp-gold);
}
.njp-tcard__yrs:empty{ display: none; }

.njp-tcard__go{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-family: var(--njp-font-body);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  transition: color .22s, gap .22s var(--njp-ease);
}
/* an SVG with no width fills its container — this is why the arrows were 325px */
.njp-tcard__go svg{
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform .26s var(--njp-ease);
}
.njp-tcard:hover .njp-tcard__go{ color: var(--njp-gold); gap: 11px; }
.njp-tcard:hover .njp-tcard__go svg{ transform: translateX(3px); }

@media (max-width: 700px){
  .njp-teams{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .njp-tcard{ aspect-ratio: 1; }
}
@media (max-width: 420px){
  .njp-teams{ grid-template-columns: 1fr; }
  .njp-tcard{ aspect-ratio: 16 / 9; }
}


/* ==========================================================================
   4. SPONSORS
   Add "njp-sponsors" to the module's CSS Class field.
   ========================================================================== */
.njp-sponsors{
  display: grid !important;
  gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: var(--njp-line);
  border: 1px solid var(--njp-line);
  border-radius: 8px;
  overflow: hidden;
}
.njp-sponsors .fl-post-grid-post,
.njp-sponsors .pp-post-grid-item,
.njp-sponsors > li,
.njp-sponsors > div{
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; box-shadow: none !important;
  background: none !important;
  width: auto !important; float: none !important;
}

.njp-sponsor{ position: relative; background: var(--njp-paper); }

.njp-sponsor__link{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 118px;
  height: 100%;
  padding: clamp(20px, 2.6vw, 30px);
  text-decoration: none !important;
  transition: background-color .28s var(--njp-ease);
}
a.njp-sponsor__link:hover{ background: var(--njp-paper-2); }
a.njp-sponsor__link:focus-visible{ outline: 2px solid var(--njp-gold); outline-offset: -3px; }

/* brand-colour accent on hover — uses primary_color without letting several
   brand colours fight each other at rest */
.njp-sponsor::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--njp-brand, var(--njp-navy));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s var(--njp-ease);
  pointer-events: none;
}
.njp-sponsor:has(a:hover)::after,
.njp-sponsor:has(a:focus-visible)::after,
.njp-sponsor.is-hover::after{ transform: scaleX(1); }

/* logos vary wildly in ratio and built-in padding — contain, never distort */
.njp-sponsor__logo{
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 54px;
  object-fit: contain;
  transition: transform .3s var(--njp-ease);
}
a.njp-sponsor__link:hover .njp-sponsor__logo{ transform: scale(1.05); }

@media (max-width: 700px){
  .njp-sponsors{ grid-template-columns: repeat(2, 1fr); }
  .njp-sponsor__link{ min-height: 96px; padding: 18px; }
  .njp-sponsor__logo{ max-height: 42px; }
}


/* ==========================================================================
   5. PROGRAM PILLARS
   Typography inherits from section 1; this only controls layout and colour.
   Set --njp-offset to your sticky header height.
   ========================================================================== */
.njp-pillars{
  --njp-display: var(--njp-font-display, inherit);
  --njp-offset: 84px;
  color: #fff;
}

.njp-pillars__hd{ margin: 0 0 clamp(30px, 4.5vw, 52px); }
.njp-pillars__kick{
  margin: 0 0 10px !important;
  font-size: clamp(1rem, .9vw, 1.15rem) !important;
  font-weight: 500;
  line-height: 1 !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--njp-gold);
  max-width: none !important;
}
.njp-pillars__h2{ margin: 0 !important; max-width: 20ch; color: #fff; }
.njp-pillars__h2 em{ font-style: normal; color: var(--njp-gold); }

.njp-pillars__grid{
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

/* sticky rail */
.njp-pnav{ position: sticky; top: var(--njp-offset); }
.njp-pnav ol{
  margin: 0 !important; padding: 0 !important;
  list-style: none;
  display: flex; flex-direction: column;
}
.njp-pnav li{ margin: 0 !important; padding: 0 !important; list-style: none; }
.njp-pnav button{
  display: flex; gap: 14px; align-items: baseline;
  width: 100%;
  padding: 15px 0 15px 20px;
  text-align: left;
  border: 0;
  border-left: 2px solid rgba(255, 255, 255, .16);
  background: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .5);
  transition: color .28s var(--njp-ease), border-color .28s var(--njp-ease);
}
.njp-pnav button:hover{ color: rgba(255, 255, 255, .85); }
.njp-pnav button:focus-visible{ outline: 2px solid var(--njp-gold); outline-offset: 2px; }
.njp-pnav__n{
  flex: none;
  font-size: 1.05rem; font-weight: 500; line-height: 1;
  letter-spacing: .14em; opacity: .6;
  transition: opacity .28s, color .28s;
}
.njp-pnav__t{
  font-family: var(--njp-display);
  font-size: clamp(1.7rem, 1.5vw, 2.1rem);
  font-weight: 600; line-height: 1.12;
  letter-spacing: .03em; text-transform: uppercase;
}
.njp-pnav li.is-active button{ color: #fff; border-left-color: var(--njp-gold); }
.njp-pnav li.is-active .njp-pnav__n{ color: var(--njp-gold); opacity: 1; }
.njp-pnav__count{
  margin: 22px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 1.05rem !important; font-weight: 500;
  line-height: 1 !important;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  max-width: none !important;
}

/* panels */
.njp-pillars__panels{ display: flex; flex-direction: column; gap: clamp(40px, 7vw, 96px); }
.njp-pillar{ scroll-margin-top: calc(var(--njp-offset) + 16px); }

.njp-pillar__n{
  display: block;
  margin: 0 0 14px;
  font-family: var(--njp-display);
  font-size: clamp(4.6rem, 7vw, 8.8rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .1);
}
.njp-pillar__h{ margin: 0 0 18px !important; max-width: 22ch; color: #fff; }
.njp-pillar__body p{ max-width: 60ch; color: rgba(255, 255, 255, .8); }
.njp-pillar__body p:last-child{ margin-bottom: 0 !important; }
.njp-pillar__body a{ color: var(--njp-gold); }
.njp-pillar__body strong{ color: #fff; }

/* logo strip — white so marks drawn for light backgrounds still read on navy */
.njp-pillar__logos{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(18px, 3vw, 38px);
  margin: 0 0 clamp(20px, 2.6vw, 28px);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
  border-radius: 8px;
  background: #fff;
}
.njp-pillar__logo{
  display: block;
  width: auto;
  max-width: min(180px, 42%);
  max-height: clamp(38px, 4vw, 56px);
  height: auto;
  object-fit: contain;
  margin: 0 !important;
}
/* divider under the strip, whatever element follows it */
.njp-pillar__logos + *{ position: relative; padding-top: clamp(18px, 2.4vw, 26px); }
.njp-pillar__logos + *::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .22);
}

/* optional photo */
.njp-pillar__media{
  position: relative;
  margin: 0 0 clamp(20px, 2.6vw, 30px) !important;
  padding: 0 !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
}
.njp-pillar__media img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  margin: 0 !important;
}
.njp-pillar__media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2, 20, 44, .6) 0, rgba(2, 20, 44, .12) 34%, transparent 62%);
  pointer-events: none;
}
.njp-pillar--has-media .njp-pillar__n{
  position: absolute;
  left: clamp(12px, 2vw, 22px);
  bottom: clamp(-6px, -0.6vw, -2px);
  z-index: 2;
  margin: 0;
  line-height: .82;
  color: #fff;
  opacity: .92;
  text-shadow: 0 2px 24px rgba(2, 20, 44, .55);
  pointer-events: none;
}

/* stat callouts */
.njp-pillar__stats{
  display: flex; flex-wrap: wrap;
  gap: clamp(20px, 4vw, 54px);
  margin-top: clamp(22px, 3vw, 30px);
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.njp-pillar__stats div{ min-width: 100px; }
.njp-pillar__stats b{
  display: block;
  font-family: var(--njp-display);
  font-size: clamp(3rem, 4vw, 4.6rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -.01em;
  color: var(--njp-gold);
}
.njp-pillar__stats span{
  display: block;
  margin-top: 6px;
  max-width: 18ch;
  font-size: 1.05rem; font-weight: 500; line-height: 1.4;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* mobile: rail becomes a scrolling pill row */
@media (max-width: 900px){
  .njp-pillars{ --njp-bleed: clamp(16px, 4vw, 40px); }
  .njp-pillars__grid{ grid-template-columns: 1fr; gap: 26px; }
  .njp-pnav{
    position: sticky; top: var(--njp-offset);
    z-index: 5;
    overflow-x: auto; scrollbar-width: none;
    background: var(--njp-navy);
    margin-inline: calc(-1 * var(--njp-bleed, 0px));
    padding-inline: var(--njp-bleed, 0px);
  }
  .njp-pnav::-webkit-scrollbar{ display: none; }
  .njp-pnav ol{ flex-direction: row; gap: 2px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .njp-pnav button{
    padding: 13px 16px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .njp-pnav li.is-active button{ border-left: 0; border-bottom-color: var(--njp-gold); }
  .njp-pnav__n, .njp-pnav__count{ display: none; }
  .njp-pillar__media{ aspect-ratio: 3 / 2; }
}


/* ==========================================================================
   6. PILLAR BODY EXTRAS
   Editors paste plain markup into the WYSIWYG. Ticks and the notice icon are
   drawn in CSS because WordPress strips inline SVG from those fields.
   ========================================================================== */
.njp-pillar__body ul.njp-sched{
  margin: 0 !important; padding: 0 !important;
  list-style: none;
  display: grid; gap: 10px;
  max-width: 640px;
}
.njp-pillar__body ul.njp-sched li{
  margin: 0 !important;
  padding: 16px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-size: 1.45rem;
  color: rgba(255, 255, 255, .86);
}
.njp-pillar__body ul.njp-sched strong{
  display: block;
  margin-bottom: 4px;
  font-family: var(--njp-font-display);
  font-size: clamp(1.6rem, 1.6vw, 1.9rem);
  font-weight: 600; line-height: 1.1;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--njp-gold);
}
.njp-pillar__body ul.njp-sched em{
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, .62);
}

.njp-pillar__body ul.njp-incl{
  margin: 0 !important; padding: 0 !important;
  list-style: none;
  display: grid; gap: 0;
  max-width: 620px;
}
.njp-pillar__body ul.njp-incl li{
  display: flex; gap: 14px; align-items: center;
  margin: 0 !important;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--njp-font-display);
  font-size: clamp(1.6rem, 1.7vw, 2rem);
  font-weight: 600; line-height: 1.2;
  letter-spacing: .03em; text-transform: uppercase;
}
.njp-pillar__body ul.njp-incl li:last-child{ border-bottom: 0; }
.njp-pillar__body ul.njp-incl li::before{
  content: "";
  flex: none;
  width: 17px; height: 10px;
  border-left: 2.5px solid var(--njp-gold);
  border-bottom: 2.5px solid var(--njp-gold);
  transform: rotate(-45deg) translateY(-3px);
}

.njp-pillar__body a.njp-cta{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  padding: 15px 22px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4);
  color: #fff !important;
  font-family: var(--njp-font-body);
  font-size: 1.3rem; font-weight: 500; line-height: 1;
  letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none !important;
  transition: box-shadow .2s, background-color .2s, transform .2s var(--njp-ease);
}
.njp-pillar__body a.njp-cta::after{
  content: "→";
  font-size: 1.5rem;
  transition: transform .26s var(--njp-ease);
}
.njp-pillar__body a.njp-cta:hover{
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1.5px #fff;
}
.njp-pillar__body a.njp-cta:hover::after{ transform: translateX(3px); }

.njp-pillar__body p.njp-note{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 17px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .8);
}
.njp-pillar__body p.njp-note::before{
  content: "i";
  flex: none;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--njp-gold);
  color: var(--njp-navy);
  font-family: var(--njp-font-body);
  font-size: 1.2rem; font-weight: 600; font-style: normal;
}


/* ==========================================================================
   7. PROOF STRIP
   Breaks out to full viewport width, so put it in a normal contained row.
   ========================================================================== */
.njp-proof{
  background: var(--njp-navy);
  color: #fff;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
.njp-proof dl{
  display: grid;
  grid-template-columns: repeat(var(--njp-proof-cols, 4), 1fr);
  margin: 0 !important;
  padding: 0;
}
.njp-proof[data-njp-cols="2"] dl{ --njp-proof-cols: 2; }
.njp-proof[data-njp-cols="3"] dl{ --njp-proof-cols: 3; }
.njp-proof[data-njp-cols="4"] dl{ --njp-proof-cols: 4; }

.njp-proof dl > div{
  padding: clamp(18px, 2.6vw, 28px) clamp(14px, 2vw, 24px);
  border-right: 1px solid rgba(255, 255, 255, .16);
}
.njp-proof dl > div:last-child{ border-right: 0; }
.njp-proof dt{
  margin: 0 0 7px !important;
  font-size: 1.05rem !important; font-weight: 500; line-height: 1.3;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.njp-proof dd{
  margin: 0 !important;
  font-family: var(--njp-font-display);
  font-size: clamp(2.2rem, 2.8vw, 3.4rem) !important;
  font-weight: 700; line-height: 1;
  letter-spacing: -.01em;
  color: var(--njp-gold);
}
@media (max-width: 700px){
  .njp-proof dl,
  .njp-proof[data-njp-cols="3"] dl,
  .njp-proof[data-njp-cols="4"] dl{ --njp-proof-cols: 2; }
  .njp-proof dl > div:nth-child(2n){ border-right: 0; }
  .njp-proof dl > div:nth-child(-n+2){ border-bottom: 1px solid rgba(255, 255, 255, .16); }
}


/* ==========================================================================
   8. CALL-TO-ACTION BAND
   ========================================================================== */
.njp-eval{
  background: var(--njp-gold);
  color: var(--njp-gold-ink);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
.njp-eval__in{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  padding: clamp(22px, 3vw, 32px) 0;
}
/* first grid column — min-width:0 stops a long heading forcing the track wider
   than its share and squeezing the meta and button */
.njp-eval__hd{
  display: block;
  min-width: 0;
}

.njp-eval__lab{
  margin: 0 !important;
  font-size: 1.05rem !important; font-weight: 500; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  opacity: .75;
}
.njp-eval__h{
  margin: 6px 0 0 !important;
  font-family: var(--njp-font-display);
  font-size: clamp(2.6rem, 3.4vw, 4.2rem) !important;
  font-weight: 700; line-height: 1;
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--njp-gold-ink);
}
.njp-eval__meta{
  display: flex; flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 !important;
}
.njp-eval__meta span{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(1.4rem, 1.4vw, 1.6rem) !important;
  font-weight: 500;
}
.njp-eval__meta svg{ width: 15px; height: 15px; flex: none; opacity: .7; }

.njp-eval__cta{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 24px;
  border-radius: 4px;
  background: var(--njp-navy);
  color: #fff;
  font-family: var(--njp-font-body);
  font-size: 1.3rem; font-weight: 500; line-height: 1;
  letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .2s var(--njp-ease), background-color .2s, box-shadow .2s;
}
.njp-eval__cta svg{ width: 15px; height: 15px; flex: none; }
.njp-eval__cta:hover{
  transform: translateY(-2px);
  background: var(--njp-navy-3);
  color: #fff;
  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .28);
}
.njp-eval__cta:focus-visible{ outline: 2px solid var(--njp-navy); outline-offset: 3px; }

@media (max-width: 900px){
  .njp-eval__in{ grid-template-columns: 1fr; gap: 16px; }
  .njp-eval__cta{ justify-content: center; }
}


/* ==========================================================================
   9. STORIES RAIL
   Global video testimonials, edited once at Admin → NJP Stories and rendered
   anywhere with [njp_stories]. Self-hosted MP4s, so the tiles are click-to-load
   facades — no <video> element exists until someone presses play.
   ========================================================================== */
.njp-stories{ position: relative; }

.njp-stories__hd{
  margin: 0 0 clamp(18px, 2.4vw, 26px) !important;
  font-family: var(--njp-font-display);
  font-size: clamp(3rem, 4.2vw, 5.2rem) !important;
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* arrows, top-right */
.njp-stories__nav{
  position: absolute;
  top: 0; right: 0;
  display: flex; gap: 8px;
}
.njp-stories__arrow{
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: inset 0 0 0 1px var(--njp-line);
  color: var(--njp-ink);
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s, color .2s, opacity .25s;
}
.njp-stories__arrow svg{ width: 18px; height: 18px; }
.njp-stories__arrow:hover{ background: var(--njp-navy); color: #fff; box-shadow: none; }
.njp-stories__arrow:focus-visible{ outline: 2px solid var(--njp-gold); outline-offset: 3px; }
.njp-stories__arrow[disabled]{ opacity: .28; pointer-events: none; }
@media (max-width: 700px){ .njp-stories__nav{ display: none; } }

/* rail */
.njp-stories__rail{
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  margin: 0 !important;
  padding: 0 0 6px !important;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* bleed to the viewport edge on phones */
  margin-inline: calc(-1 * var(--njp-bleed, 0px)) !important;
  padding-inline: var(--njp-bleed, 0px) !important;
}
.njp-stories__rail::-webkit-scrollbar{ display: none; }

.njp-story{
  flex: 0 0 clamp(258px, 32vw, 400px);
  scroll-snap-align: start;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.njp-story__btn{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--njp-navy-3);
  cursor: pointer;
  transition: transform .3s var(--njp-ease), box-shadow .3s var(--njp-ease);
}
.njp-story__btn:hover{ transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(2, 20, 44, .4); }
.njp-story__btn:focus-visible{ outline: 2px solid var(--njp-gold); outline-offset: 3px; }

.njp-story__poster{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--njp-ease-out), filter .4s;
}
.njp-story__btn:hover .njp-story__poster{ transform: scale(1.045); filter: brightness(.84); }

/* no poster uploaded — branded tile rather than a black box */
.njp-story__poster--fb{
  background: var(--njp-navy) var(--njp-logo) no-repeat center;
  background-size: 44% auto;
}

.njp-story__btn::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2, 20, 44, .9) 0, rgba(2, 20, 44, .28) 46%, transparent 76%);
}

.njp-story__play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--njp-gold);
  color: var(--njp-navy);
  box-shadow: 0 0 0 0 rgba(255, 184, 28, .5);
  transition: transform .3s var(--njp-ease-out), box-shadow .4s var(--njp-ease);
}
.njp-story__play svg{ width: 20px; height: 20px; margin-left: 3px; }
.njp-story__btn:hover .njp-story__play{
  transform: translate(-50%, -50%) scale(1.11);
  box-shadow: 0 0 0 14px rgba(255, 184, 28, .16);
}

.njp-story__cap{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 15px 17px;
  text-align: left;
}
.njp-story__name{
  display: block;
  font-family: var(--njp-font-display);
  font-size: clamp(1.7rem, 1.7vw, 2.3rem);
  font-weight: 600;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #fff;
}
.njp-story__kick{
  display: block;
  margin-top: 5px;
  font-family: var(--njp-font-body);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--njp-gold);
}

/* injected player */
.njp-story__btn video{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 5;
  background: #000;
  object-fit: contain;
}
.njp-story__btn.is-live{ cursor: default; transform: none; }
.njp-story__btn.is-live::after,
.njp-story__btn.is-live .njp-story__play,
.njp-story__btn.is-live .njp-story__cap,
.njp-story__btn.is-live .njp-story__poster{ display: none; }

@media (max-width: 700px){
  .njp-stories{ --njp-bleed: clamp(16px, 4vw, 40px); }
  .njp-story{ flex-basis: 82vw; }
}


/* ==========================================================================
   10. COACH AVATAR PATCH
   Coach cards live in the NJP Team Page plugin, but its base .njp-ccard__av
   rule uses the `background` SHORTHAND — which resets background-size,
   -position and -repeat to their defaults. The plugin only sets a size on
   :hover, so a module-rendered avatar renders its photo at natural size,
   anchored top-left, tiled: a 1829x2180 headshot inside a 148px circle shows
   only the blank top-left corner.
   This block supplies the missing base declarations. It sits here rather than
   in the plugin so there is one file to maintain; Additional CSS loads after
   plugin styles, so these win.
   Scoped away from the two fallback variants, which set their own sizing.
   ========================================================================== */
.njp-ccard__av:not(.njp-ccard__av--fb):not(.njp-ccard__av--empty){
  background-size: cover;
  /* top, not centre — headshots crop better from the crown down */
  background-position: center top;
  background-repeat: no-repeat;
}

/* The plugin's hover rule lifts this to 112% for a subtle zoom, which only
   reads as intentional once a base size exists. */
.njp-ccard:hover .njp-ccard__av:not(.njp-ccard__av--fb):not(.njp-ccard__av--empty){
  background-size: 112%;
}

/* Same shorthand trap on the logo fallback when it has no <img> child. */
.njp-ccard__av--fb:empty{
  background-color: var(--njp-navy);
  background-image: var(--njp-logo);
  background-size: 58% auto;
  background-position: center;
  background-repeat: no-repeat;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .njp-tcard, .njp-tcard *,
  .njp-sponsor__logo, .njp-sponsor::after, .njp-sponsor__link,
  .njp-pnav button, .njp-eval__cta,
  .njp-pillar__body a.njp-cta,
  .njp-story__btn, .njp-story__btn *{
    transition-duration: .001s !important;
  }
  .njp-stories__rail{ scroll-behavior: auto; }
}