/* Hand-built program pages (League, Young Stars). Loaded after the Webflow
   sheets from inside the page HTML; everything is scoped under .lp- to stay
   clear of the exported styles. Brand red #BF202F, heading face Cooperhewitt
   (weights 700/900 from the exported @font-face). */

.lp-hero {
  position: relative;
  background: #fff;
  color: #333;
  padding: 4rem 5% 3.5rem;
  text-align: left;
  overflow: hidden;
}
.lp-hero-grid {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 2.75rem;
  align-items: center;
}
.lp-hero-stars {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
}
/* RED, not gold. The Google review carousel further down every one of these
   pages draws its stars in #BF202F, so a gold star in the hero was two star
   colours on one page (found by npm run audit:design, 2026-08-01). Palette is
   black, white and red. */
.lp-hero-stars .lp-stars {
  color: #bf202f;
  letter-spacing: 0.1em;
  margin: 0;
}
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}
.lp-hero > * {
  position: relative;
}
.lp-eyebrow {
  font-size: 0.95rem;
  font-weight: 400;
  color: #727272;
  margin-bottom: 0.75rem;
}
.lp-hero h1 {
  font-family: Cooperhewitt, "Rubik Variablefont Wght", Rubik, sans-serif;
  font-size: clamp(2.4rem, 4.6vw, 3.5rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  color: #333;
}
.lp-hero-sub {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 1.4rem;
  color: #727272;
}
.lp-vsl {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.14);
  background: #f1f1f1;
}
/* THE HERO GRAPHIC STANDARD (Andrew, 2026-08-01: "have a standard size ... make
   it look perfect on mobile"). Every cut-out hero graphic on the site renders
   through this one rule, so a page built next month lands at the same size as
   the one built today. The size it targets is the Regina home page's graphic,
   which is the reference Andrew picked.

   A cut-out has no frame, so it takes none: no fill, no border, no shadow, and
   the artwork keeps its own proportions (contain, not cover). The extra size
   comes from WIDENING THE COLUMN, not from overflowing it: an earlier version
   grew the image to 116% and let .lp-hero clip the overhang, which looked
   right at 1440 but shaved the edge of the artwork on a 1280 laptop, where the
   centred grid has no gutter left to bleed into. The height cap stops a tall
   4:3 graphic from pushing the hero copy off screen.

   Source files: transparent PNG, 2000px wide or more, roughly 7% empty margin
   left and right (that margin is part of the look, do not trim it), and NO
   HoopLife logo in the artwork - the site header already carries one. */
/* Above the 899px collapse only. Without the query this beats the
   single-column mobile rule on specificity and leaves a phone showing two
   columns with a thumbnail in one of them. */
@media (min-width: 900px) {
  .lp-hero-grid:has(.lp-vsl.is-cutout) {
    grid-template-columns: 0.9fr 1.1fr;
  }
}
.lp-vsl.is-cutout {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.lp-vsl.is-cutout img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  max-height: 30rem;
}
@media (max-width: 56rem) {
  /* Phone: the graphic runs nearly edge to edge, which is what a cut-out wants
     and what the small screen has room for. */
  .lp-vsl.is-cutout {
    width: 108%;
    margin-left: -4%;
  }
}
.lp-vsl video,
.lp-vsl img,
.lp-vsl iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
}
.lp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1.2rem;
}
.lp-hero .lp-cta-alt {
  color: #bf202f;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.lp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lp-fact {
  border: 1px solid #e0e0e0;
  border-radius: 100px;
  padding: 0.38rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  color: #333;
  background: #fafafa;
}

/* Trust strip: tight dark band of proof directly under the hero. */
.lp-trust {
  background: #f7f7f7;
  color: #333;
  padding: 2rem 5%;
}
.lp-trust-row {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 2rem;
  text-align: center;
}
.lp-trust-item strong {
  display: block;
  font-family: Cooperhewitt, Rubik, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}
.lp-trust-item span {
  font-size: 0.9rem;
  color: #727272;
}
.lp-trust-item .lp-stars {
  color: #bf202f;
  letter-spacing: 0.12em;
}

/* A single line of plain truth about how a program's year runs, sitting right
   under the hero (added 2026-08-03 for Girls Only, which pauses while a league
   season is on). It is deliberately quiet: black, white and one red rule, no
   icon and no box shadow, so it reads as information rather than as an alert. */
.lp-note-band {
  padding: 1.5rem 5% 0;
}
.lp-note {
  max-width: 1100px;
  margin: 0 auto;
  border-left: 0.25rem solid #bf202f;
  background: #f7f7f7;
  padding: 1rem 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0;
}
.lp-note strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bf202f;
  margin-bottom: 0.25rem;
}
.lp-note span {
  display: block;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4a4a52;
}
.lp-note a {
  color: #bf202f;
  font-weight: 600;
}

.lp-section {
  padding: 4rem 5%;
}
.lp-section.is-tint {
  background: #f7f7f7;
}
/* Black band with the site's grid texture, the same treatment the Summer Camps
   page gives its "Fun, Competitive, and High-Energy" section. */
.lp-section.is-dark {
  background-color: #000;
  background-image: url("/marketing/images/Website-Grid.png");
  background-position: 50%;
  background-size: 100%;
  color: #fff;
}
.lp-section.is-dark h2,
.lp-section.is-dark h3 {
  color: #fff;
}
.lp-section.is-dark .lp-lead {
  color: rgba(255, 255, 255, 0.78);
}
.lp-inner {
  max-width: 74rem;
  margin: 0 auto;
}
/* Section headers follow /regina/camps/summer: a small tagline, a big centred
   heading, then a centred lead paragraph inside a narrow measure. */
.lp-kicker {
  color: #333;
  font-family: Cooperhewitt, "Rubik Variablefont Wght", Rubik, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  text-align: center;
  margin-bottom: 0.75rem;
}
.lp-section.is-dark .lp-kicker {
  color: rgba(255, 255, 255, 0.78);
}
.lp-section h2 {
  font-family: Cooperhewitt, "Rubik Variablefont Wght", Rubik, sans-serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  max-width: 22em;
  margin: 0 auto 1rem;
}
.lp-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #727272;
  text-align: center;
  text-wrap: balance;
  max-width: 42em;
  margin: 0 auto 2.5rem;
}
.lp-band-label {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Card grids never leave an orphan row (Andrew, 2026-07-31: "it looks shitty
   because you only have four on the front row and one on the second row...
   have that all filled up so that it looks perfect"). Flex instead of grid, so
   whatever is on a row GROWS to fill that row completely. The one-third cap
   stops a lone card on the last row from stretching the full width; with
   justify-content:center it sits centred instead. */
.lp-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.lp-grid > * {
  /* 12.5rem lets a five-card row sit on ONE line at desktop width, which is
     the common case (the "what changes" lists all have five). */
  flex: 1 1 12.5rem;
}
@media (min-width: 56.25rem) {
  .lp-grid > * {
    max-width: calc(33.333% - 0.7rem);
  }
}
/* Three across, for six-card grids. The default basis fits five on a wide
   screen, which left a single orphan card on the second row (Andrew's rule:
   "have that all filled up so that it looks perfect"). */
.lp-grid.is-three > * {
  flex: 1 1 18rem;
}

/* Single-column variant (the memberships "what you get" list). */
.lp-grid.is-stacked > * {
  flex: 1 1 100%;
  max-width: 100%;
}

/* Shared card treatment: soft lift + red edge on hover. */
.lp-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 0.0875rem solid #e6e6e6;
  border-radius: 1.1rem;
  box-shadow: 0 1rem 2rem -0.05rem rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.lp-card:hover {
  transform: translateY(-3px);
  border-color: #bf202f;
  box-shadow: 0 1.25rem 2.5rem -0.05rem rgba(0, 0, 0, 0.12);
}
.lp-card::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 1.1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(191, 32, 47, 0.06) 0%, transparent 55%);
}
.lp-card:hover::after {
  opacity: 1;
}
.lp-section.is-dark .lp-card {
  background: #fff;
  border-color: #e8e4de;
}
.lp-section.is-dark .lp-card:hover {
  border-color: rgba(191, 32, 47, 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
}

.lp-shift {
  padding: 1.25rem 1.4rem;
}
.lp-shift-from {
  font-size: 0.92rem;
  color: #8a8a8a;
  text-decoration: line-through;
  text-decoration-color: rgba(191, 32, 47, 0.55);
  margin-bottom: 0.45rem;
}
.lp-shift-to {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}
.lp-section.is-dark .lp-shift-from {
  color: #8a8a8a;
}
.lp-section.is-dark .lp-shift-to {
  color: #333;
}
/* Cards stay WHITE inside a dark section, but the section sets every heading
   to white, so a card heading vanished. .lp-shift-to was already re-darkened
   for exactly this reason; card headings needed the same (found 2026-07-31 on
   the rebuilt camps page — it hit every dark-section card). */
/* Cards stay white inside a dark section, so their BODY copy has to be dark
   too — it was inheriting the section's white and disappearing (found on the
   rental page's step cards, 2026-07-31). .lp-perk set its own colour, which is
   why only some cards were affected. */
.lp-section.is-dark .lp-card p,
.lp-section.is-dark .lp-card li {
  color: #555;
}
.lp-section.is-dark .lp-card h3 {
  color: #111;
}

/* Numbered steps with a connecting spine on desktop. */
.lp-steps {
  counter-reset: lp-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.lp-step {
  padding: 1.6rem 1.5rem;
}
.lp-step::before {
  counter-increment: lp-step;
  content: counter(lp-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #bf202f;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.9rem;
  box-shadow: 0 6px 16px rgba(191, 32, 47, 0.35);
}
.lp-step h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.lp-step p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* THE COACHING-METHOD CARDS (coaching-method.ts): the lp-step look with a red
   top rule instead of the step number, because the four training themes are
   not a sequence. */
.lp-method {
  padding: 1.6rem 1.5rem;
  border-top: 4px solid #bf202f;
}
.lp-method h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.lp-method p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Age-category cards: the deep per-age breakdown. */
.lp-ages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}
.lp-age-card {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.lp-age-head {
  background: linear-gradient(160deg, #6d0d16 0%, #bf202f 100%);
  color: #fff;
  padding: 1.2rem 1.5rem 1.05rem;
}
.lp-age-head h3 {
  font-family: Cooperhewitt, Rubik, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}
.lp-age-head .lp-age-format {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 0.2rem;
}
.lp-age-body {
  padding: 1.3rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex: 1;
}
.lp-age-nights {
  font-size: 0.92rem;
  line-height: 1.55;
  border-bottom: 1px solid #ece8e2;
  padding-bottom: 1rem;
}
.lp-age-nights strong {
  color: #bf202f;
}
.lp-age-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 0.45rem;
}
.lp-get {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-get li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.94rem;
  line-height: 1.5;
  margin-bottom: 0.45rem;
}
.lp-get li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #bf202f;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="black" d="M10 0a10 10 0 100 20 10 10 0 000-20zm5.2 7.3l-6 6a1 1 0 01-1.4 0l-3-3a1 1 0 011.4-1.4l2.3 2.3 5.3-5.3a1 1 0 011.4 1.4z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="black" d="M10 0a10 10 0 100 20 10 10 0 000-20zm5.2 7.3l-6 6a1 1 0 01-1.4 0l-3-3a1 1 0 011.4-1.4l2.3 2.3 5.3-5.3a1 1 0 011.4 1.4z"/></svg>') center / contain no-repeat;
}
.lp-transform {
  margin-top: auto;
  background: #f7f5f2;
  border-left: 3px solid #bf202f;
  border-radius: 0 8px 8px 0;
  padding: 0.95rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.lp-transform strong {
  display: block;
  /* 12px is the phone legibility floor; 11px wide-tracked caps were the only
     text on the site under it (mobile pass, 2026-07-30). */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #bf202f;
  margin-bottom: 0.35rem;
}

.lp-perk {
  padding: 1.4rem 1.5rem;
}
.lp-perk h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.lp-perk h3::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.55rem;
  vertical-align: -0.1em;
  background: #bf202f;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="black" d="M10 0a10 10 0 100 20 10 10 0 000-20zm5.2 7.3l-6 6a1 1 0 01-1.4 0l-3-3a1 1 0 011.4-1.4l2.3 2.3 5.3-5.3a1 1 0 011.4 1.4z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="black" d="M10 0a10 10 0 100 20 10 10 0 000-20zm5.2 7.3l-6 6a1 1 0 01-1.4 0l-3-3a1 1 0 011.4-1.4l2.3 2.3 5.3-5.3a1 1 0 011.4 1.4z"/></svg>') center / contain no-repeat;
}
.lp-perk p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  color: #555;
}

/* Division gallery: Citrus checkout covers + night + register deep link. */
/* Same no-orphan rule as .lp-grid: rows always fill. */
.lp-divs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.lp-divs > * {
  flex: 1 1 18rem;
}
@media (min-width: 56.25rem) {
  .lp-divs > * {
    max-width: calc(33.333% - 0.85rem);
  }
}
.lp-div-card {
  display: flex;
  flex-direction: column;
}
.lp-div-card > img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
}
.lp-div-body {
  padding: 1.1rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.lp-div-body h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0;
}
.lp-div-meta {
  font-size: 0.85rem;
  color: #6b6b6b;
}
.lp-div-night {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ece8e2;
  padding-top: 0.7rem;
}
.lp-div-night:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.lp-div-night span {
  font-weight: 600;
  color: #bf202f;
}
.lp-div-night small {
  display: block;
  font-weight: 400;
  color: #6b6b6b;
}

.lp-books {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.lp-book {
  margin: 0;
}
.lp-book img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #e8e4de;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-book:hover img {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18);
}
.lp-book figcaption {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.65rem;
  text-align: center;
}

/* Split layout: content beside a photo collage (the spring-page pattern). */
.lp-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.75rem;
  align-items: center;
}
.lp-steps-col {
  grid-template-columns: 1fr;
}
.lp-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
/* SAME TREATMENT AS EVERY OTHER PICTURE ON THE SITE (Andrew, 2026-08-03: "on
   other pages you have a black background around some of the pictures...
   make that consistent across the board"). White border, soft shadow, light
   fill - the Regina home page look - never a black card behind a photo. */
.lp-collage .lp-tile {
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  aspect-ratio: 4 / 4.6;
  background: #f1f1f1;
}
.lp-collage > :nth-child(even) {
  transform: translateY(1.4rem);
}
.lp-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.lp-tile:hover img {
  transform: scale(1.05);
}
@media (max-width: 899px) {
  .lp-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Photo / video carousels: CSS scroll-snap, no JS. */
.lp-media-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0.25rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.lp-media-row > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.lp-photo {
  width: min(340px, 78vw);
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  background: #000;
}
.lp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.lp-photo:hover img {
  transform: scale(1.04);
}
.lp-video-card {
  width: min(420px, 85vw);
  border-radius: 12px;
  overflow: hidden;
  background: #1d1d1d;
  border: 1px solid #2c2c2c;
}
.lp-video-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.lp-video-card figcaption {
  padding: 0.75rem 1rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
}
.lp-video-card figcaption span {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.15rem;
}
.lp-channel-card {
  width: min(300px, 70vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.lp-channel-card:hover {
  border-color: #ff8d98;
  background: rgba(255, 255, 255, 0.04);
}
.lp-channel-card .lp-play {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #bf202f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-channel-card .lp-play::after {
  content: "";
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.85rem;
  border-color: transparent transparent transparent #fff;
  margin-left: 0.15rem;
}
.lp-channel-card strong {
  color: #fff;
}
.lp-channel-card span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}

.lp-quote {
  padding: 1.75rem;
  max-width: 620px;
}
.lp-stars {
  color: #bf202f;
  letter-spacing: 0.15em;
  margin-bottom: 0.7rem;
}
.lp-quote p {
  font-size: 1.08rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.lp-quote cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.92rem;
}

/* Review wall: real Google testimonials with headshots. */
.lp-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.lp-review {
  padding: 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lp-review-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.lp-review-head img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f1ece6;
}
.lp-review-head strong {
  display: block;
  font-size: 0.95rem;
}
.lp-review-head .lp-stars {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  margin: 0;
}
.lp-review p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  color: #444;
}
.lp-cta-under {
  margin-top: 1.5rem;
  font-weight: 600;
}
.lp-cta-under a {
  color: #bf202f;
}

/* FAQ accordion (details/summary, no JS). */
.lp-faq {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 0.7rem;
}
.lp-faq details {
  background: #fff;
  border: 1px solid #e8e4de;
  border-left: 3px solid transparent;
  border-radius: 10px;
  transition: border-color 0.3s ease;
}
.lp-faq details[open] {
  border-left-color: #bf202f;
}
.lp-faq summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  padding: 1.05rem 3rem 1.05rem 1.25rem;
  position: relative;
}
.lp-faq summary::-webkit-details-marker {
  display: none;
}
.lp-faq summary::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid #bf202f;
  border-bottom: 2px solid #bf202f;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}
.lp-faq details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
.lp-faq details p {
  padding: 0 1.25rem 1.15rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}
.lp-faq details p + p {
  padding-top: 0;
  margin-top: 0.6rem;
}
.lp-faq details a {
  color: #bf202f;
  text-decoration: underline;
}

/* Grouped FAQ (the Contact & FAQ page runs four themed groups down one column,
   so a parent can find their question by section instead of scrolling 30
   accordions). Black, white and red only, same as everything else here. */
.lp-faq-group {
  max-width: 800px;
  margin: 0 auto;
}
.lp-faq-group + .lp-faq-group {
  margin-top: 2.75rem;
}
.lp-faq-group-title {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 0.35rem;
  padding-left: 0.85rem;
  border-left: 4px solid #bf202f;
}
.lp-faq-group-intro {
  margin: 0 0 1.1rem;
  padding-left: 1.05rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}

/* The contact form sits in the hero's right column, where the photo usually
   goes. 16px is the floor on every field: below that iOS zooms the page the
   moment a parent taps into it and wrecks a half-filled form. */
.lp-contact-form-card {
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}
.lp-contact-form-card .form_field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #111;
}
.lp-contact-form-card .form_input {
  width: 100%;
  font-size: 16px;
  padding: 0.7rem 0.85rem;
  border: 1px solid #ddd8d1;
  border-radius: 8px;
  background: #fff;
  color: #111;
}
.lp-contact-form-card .form_input.is-text-area {
  min-height: 8rem;
  resize: vertical;
}
.lp-contact-form-card .form_field-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.lp-contact-form-card .form_field-wrapper {
  margin-bottom: 0.75rem;
}
.lp-contact-form-card .w-button {
  width: 100%;
  min-height: 44px;
  margin-top: 0.35rem;
}
@media (max-width: 767px) {
  .lp-contact-form-card {
    padding: 1.15rem;
  }
  .lp-contact-form-card .form_field-2col {
    grid-template-columns: 1fr;
  }
}

/* The closing red band is the shared cta-band component (_components/cta-band.tsx),
   the same one every exported page carries, so the bottom of every page on the
   site is identical. The page-local .lp-cta-band that used to live here was
   deleted 2026-07-31 for that reason. */

/* Sticky mobile CTA: hidden until the hero scrolls away (tiny inline script
   toggles .is-on), mobile only. */
.lp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #bf202f;
  color: #fff;
  padding: 0.65rem 1rem;
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
  box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.18);
  transform: translateY(110%);
  transition: transform 0.35s ease;
}
.lp-sticky.is-on {
  transform: translateY(0);
}
/* The bar is FIXED, so while it is showing it sits on top of whatever happens
   to be at the bottom of the screen. On the rent page that was a row of
   checkboxes a visitor could not tick (caught by verify:forms, 2026-08-02), and
   on any page it clips the last line of the footer. Reserving its height at the
   end of the document means it can never cover content.

   Keyed off the BAR rather than the body class: hand-built pages toggle the bar
   from their own inline script and never set that class. */
body:has(.lp-sticky.is-on) {
  padding-bottom: 5.5rem;
}
/* Padding at the end of the document does not help a control halfway down the
   page: focusing it scrolls it into view, and "into view" includes the strip
   the bar is sitting on. This keeps every form control clear of it. Measured,
   not guessed: a rent-page checkbox landed at y=858 in an 844px viewport with
   the bar on top of it, so the tick did nothing. */
body:has(.lp-sticky) input,
body:has(.lp-sticky) select,
body:has(.lp-sticky) textarea,
body:has(.lp-sticky) .lp-choice,
body:has(.lp-sticky) label {
  scroll-margin-bottom: 7rem;
}
.lp-sticky-copy {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  /* On a phone the second line is too long for the space beside the button;
     balancing it gives two even lines instead of one long one and an orphan. */
  text-wrap: balance;
}
.lp-sticky-copy strong {
  display: block;
  font-size: 0.95rem;
  color: #fff;
}
/* THE BUTTON CANNOT BE RED (2026-08-01). It inherits the site's red fill, and
   the bar it sits on is the same red, so the only always-visible call to action
   on every selling page rendered as plain white text — it read as a second
   headline, not as the thing to tap. White fill, red label, 44px tall. */
.lp-sticky .button,
.lp-sticky .w-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.2rem;
  background: #fff;
  color: #bf202f;
  font-weight: 700;
  white-space: nowrap;
  border: 0;
}
.lp-sticky .button:hover,
.lp-sticky .w-button:hover {
  background: #101014;
  color: #fff;
}
@media (min-width: 768px) {
  .lp-sticky {
    justify-content: center;
    gap: 1.5rem;
  }
  /* Centred means the copy and the button travel together. Letting the copy
     grow pushed them to opposite ends of a 1440px bar. */
  .lp-sticky-copy {
    flex: 0 1 auto;
    text-wrap: initial;
  }
}

@media (max-width: 899px) {
  .lp-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (max-width: 479px) {
  .lp-hero {
    padding: 2.25rem 5% 2.25rem;
  }
  .lp-section {
    padding: 3.5rem 5%;
  }
  .lp-trust-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-card,
  .lp-card::after,
  .lp-book img,
  .lp-faq summary::after,
  .lp-sticky {
    transition: none;
  }
  .lp-card:hover,
  .lp-book:hover img {
    transform: none;
  }
}

/* Webflow's "is-alternate" button is white-on-dark. The hero and the sections
   are light now (2026-07-30 restyle), so it has to render as the standard red
   button there or it disappears into the page. Inside the red cta-band the
   white treatment stays, and that band is scoped to .section_cta. */
.lp-hero .button.is-alternate,
.lp-trust .button.is-alternate,
.lp-section .button.is-alternate {
  border-color: #bf202f;
  background-color: #bf202f;
  color: #fff;
}
.lp-hero .button.is-secondary.is-alternate,
.lp-trust .button.is-secondary.is-alternate,
.lp-section .button.is-secondary.is-alternate {
  border-color: #bf202f;
  background-color: transparent;
  color: #bf202f;
}
/* On a black section the outline button goes back to white, or red-on-black
   reads as a smudge. */
.lp-section.is-dark .button.is-secondary.is-alternate {
  border-color: #fff;
  background-color: transparent;
  color: #fff;
}
.lp-section.is-dark .button.is-secondary.is-alternate:hover {
  background-color: #fff;
  color: #0b0b0b;
}

/* A button row under centred section copy has to be centred too, on every
   screen size (Andrew, 2026-07-31, again 2026-08-01: "these buttons need to be
   centered ... it's like a button in no man's land"). The rule below catches
   any row that sits directly in a section's inner column; rows inside a card
   are nested deeper and keep their left alignment with the card's own text. */
.lp-hero-ctas.is-centered,
.lp-section .lp-inner > .lp-hero-ctas,
.lp-section .lp-inner > .lp-steps + .lp-hero-ctas {
  justify-content: center;
}
/* The reviews call to action is its own section, so it was carrying a full
   section's padding and floating on its own. It belongs to the carousel. */
.lp-reviews-cta {
  padding-top: 0;
  padding-bottom: 3rem;
}

/* "Notify me when registration opens" panel — shown wherever Citrus has no
   live events for a camp, league season or program. Black / white / red only. */
.lp-notify {
  max-width: 44rem;
  margin: 0 auto;
  background: #fff;
  border: 0.0875rem solid #e6e6e6;
  border-radius: 0.9rem;
  box-shadow: 0 1rem 2rem -0.05rem rgba(0, 0, 0, 0.06);
  padding: 2rem 1.75rem;
  text-align: center;
}
.lp-notify-copy h3 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.2;
}
.lp-notify-copy p {
  margin: 0 0 1.25rem;
  color: #4a4a4a;
}
.lp-notify-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.lp-notify-fields .form_input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.75rem;
  font-size: 1rem;
  border: 0.0875rem solid #d8d8d8;
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  margin: 0;
}
.lp-notify-fields .w-button {
  flex: 0 0 auto;
  min-height: 2.75rem;
}
.lp-notify-fine {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: #6a6a6a;
}
.lp-section.is-dark .lp-notify {
  background: #fff;
}
@media (max-width: 34rem) {
  .lp-notify {
    padding: 1.5rem 1.1rem;
  }
  .lp-notify-fields .form_input,
  .lp-notify-fields .w-button {
    flex: 1 1 100%;
  }
}

/* Fine print / notify capture under the shared closing CTA card. */
.lp-cta-extra {
  max-width: 48rem;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: #5a5a5a;
}
.lp-cta-extra a {
  color: inherit;
  text-decoration: underline;
}
.lp-cta-extra .lp-notify a {
  text-decoration: none;
}

/* Camp page: the daily schedule panel (the site's own daily_organizer, kept
   from the Summer Camps page) and the what-to-bring list. */
.lp-daily {
  max-width: 46rem;
  /* Centred under the centred section header (Andrew, 2026-07-31). */
  margin-left: auto;
  margin-right: auto;
}
.lp-daily .daily_organizer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem 0.9rem;
  align-items: center;
}
.lp-daily .daily_time {
  background: #bf202f;
  color: #fff;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  white-space: nowrap;
  text-align: center;
}
.lp-daily .daily_wrapper {
  background: #111;
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
}
.lp-bring {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.lp-bring li {
  background: #fff;
  border: 0.0875rem solid #e6e6e6;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font-size: 0.95rem;
}
.lp-section.is-dark .lp-bring li {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
@media (max-width: 34rem) {
  .lp-daily .daily_organizer {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .lp-daily .daily_time {
    justify-self: start;
  }
  .lp-daily .daily_wrapper {
    margin-bottom: 0.5rem;
  }
}

/* League divisions on a season that has not opened yet. No cover photo and no
   Register button exist, so these take the site's schedule treatment — black
   panel, red pill for the night — rather than an empty version of the Fall
   page's photo card (Andrew, 2026-07-31). */
/* Exactly four across on desktop and two on tablet: the league runs twelve
   divisions, so those both divide evenly and no row is left ragged. */
.lp-divisions > * {
  flex: 0 1 calc(25% - 0.75rem);
  max-width: calc(25% - 0.75rem);
}
@media (max-width: 61.9375rem) {
  .lp-divisions > * {
    flex-basis: calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
}
@media (max-width: 34rem) {
  .lp-divisions > * {
    flex-basis: 100%;
    max-width: 100%;
  }
}
.lp-divisions > .lp-division {
  background: #111;
  color: #fff;
  border-radius: 0.7rem;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.lp-division-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}
.lp-division-night {
  background: #bf202f;
  color: #fff;
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.lp-division-dates,
.lp-division-coach {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}
.lp-section.is-dark .lp-divisions > .lp-division {
  background: rgba(255, 255, 255, 0.06);
  border: 0.0875rem solid rgba(255, 255, 255, 0.14);
}

/* Divisions split Boys / Girls, girls in pink (Andrew, 2026-07-31). Pink is
   the Girls Only accent the brand book already allows alongside black, white
   and red — it is not a new colour on the site. */
.lp-division-groups {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.lp-division-heading {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  color: #bf202f;
}
.lp-division-heading.is-girls {
  color: #e0507a;
}
.lp-divisions > .lp-division.is-girls .lp-division-night {
  background: #e0507a;
}
.lp-section.is-dark .lp-division-heading {
  color: #ff8e99;
}
.lp-section.is-dark .lp-division-heading.is-girls {
  color: #ff9dbb;
}

/* Memberships: the Family Pack is a PURCHASE, not a footnote (Andrew,
   2026-07-31: "it's not clear that that's something you can purchase"), and
   Get Started sits under it as a skinny strip rather than competing with the
   two memberships as an equal card. */
.lp-family {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
  padding: 1.75rem 1.9rem;
  border: 2px solid #bf202f;
  border-radius: 0.9rem;
  background: #fff;
}
.lp-family-copy {
  flex: 1 1 22rem;
  min-width: 0;
}
.lp-family-tag {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bf202f;
  margin-bottom: 0.4rem;
}
.lp-family-copy h3 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.2;
  color: #111;
}
.lp-family-copy p {
  margin: 0 0 0.9rem;
  color: #555;
  font-size: 0.98rem;
}
.lp-family-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lp-family-facts span {
  background: rgba(191, 32, 47, 0.07);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.88rem;
  color: #333;
}
.lp-family-btn {
  flex: 0 0 auto;
  min-height: 2.75rem;
}
.lp-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.95rem 1.4rem;
  border: 0.0875rem solid #e0dcd6;
  border-radius: 0.7rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}
.lp-strip:hover {
  border-color: #bf202f;
}
.lp-strip-copy {
  flex: 1 1 20rem;
  font-size: 0.95rem;
  color: #555;
  min-width: 0;
}
.lp-strip-copy strong {
  color: #111;
}
.lp-strip-btn {
  flex: 0 0 auto;
  font-weight: 700;
  color: #bf202f;
  white-space: nowrap;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
@media (max-width: 34rem) {
  .lp-family,
  .lp-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .lp-family-btn,
  .lp-strip-btn {
    justify-content: center;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   PHOTO GALLERY (the facility and rental pages, 2026-07-31). The collage above
   is a 2-up block that sits beside copy; this is a full-width grid for pages
   that have a lot of real photographs of the building to show.
   -------------------------------------------------------------------------- */
.lp-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 2rem;
}
.lp-shot {
  margin: 0;
  border-radius: 1.1rem;
  overflow: hidden;
  background: #f2f2f2;
}
.lp-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 56rem) {
  .lp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
}

/* A card that is itself a link. Same card, no checkmark, an arrow instead. */
a.lp-linkcard {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.lp-linkcard h3::before {
  display: none;
}
a.lp-linkcard h3::after {
  content: " \2192";
  color: #bf202f;
}

/* ---------------------------------------------------------------------------
   THE LONG FORM (gym rental, 2026-07-31). The notify panel above is two fields
   in a row; this is a real form with labelled groups. Webflow-shaped on the
   outside (.w-form + the done/fail siblings) so _components/forms.tsx picks it
   up sitewide with no new plumbing. 16px inputs, 44px controls: under 16px iOS
   zooms the page the moment a field is focused.
   -------------------------------------------------------------------------- */
.lp-form {
  max-width: 46rem;
  margin: 0 auto;
  background: #fff;
  border: 0.0875rem solid #e6e6e6;
  border-radius: 1.1rem;
  box-shadow: 0 1rem 2rem -0.05rem rgba(0, 0, 0, 0.06);
  padding: 2rem 1.75rem;
}
.lp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.lp-field.is-wide {
  grid-column: 1 / -1;
}
.lp-field label,
.lp-fieldset legend {
  /* Same treatment as the exported forms' .form_field-label, so a label looks
     the same whatever page the visitor is on (font audit, 2026-07-31). */
  font-family: Cooperhewitt, "Rubik Variablefont Wght", Rubik, sans-serif;
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.lp-field input,
.lp-field textarea {
  width: 100%;
  min-height: 2.9rem;
  font-size: 1rem;
  font-family: inherit;
  color: #111;
  background: #fff;
  border: 0.0875rem solid #d8d8d8;
  border-radius: 0.6rem;
  padding: 0.7rem 0.9rem;
}
.lp-field textarea {
  min-height: 6.5rem;
  resize: vertical;
}
.lp-field input:focus,
.lp-field textarea:focus {
  outline: none;
  border-color: #bf202f;
}
.lp-field-note {
  font-size: 0.82rem;
  color: #666;
  margin: 0.35rem 0 0;
}
.lp-fieldset {
  grid-column: 1 / -1;
  border: 0;
  margin: 0;
  padding: 0;
}
.lp-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lp-choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 0.0875rem solid #d8d8d8;
  border-radius: 100px;
  font-size: 0.95rem;
  cursor: pointer;
}
.lp-choice input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #bf202f;
}
.lp-choice:has(input:checked) {
  border-color: #bf202f;
  color: #bf202f;
}
.lp-form-grid > .button,
.lp-form .button {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.6rem;
}
.lp-form-fine {
  font-size: 0.82rem;
  color: #666;
  text-align: center;
  margin: 0.9rem 0 0;
}
@media (max-width: 40rem) {
  .lp-form {
    padding: 1.5rem 1.15rem;
  }
  .lp-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------
   PARTNERS + BOOST KIDS (hand-built, 2026-07-31)

   Layout only. Type, colour and elevation come from the components
   above so these two pages read as the same site as the camp pages:
   white card, red accent, black band. Nothing here introduces a
   colour that is not black, white or #BF202F.
   ------------------------------------------------------------------ */

/* The three packages. */
.hlp-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem;
}
.hlp-package {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem;
}
.hlp-package-name {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #bf202f;
}
.hlp-package-line {
  margin: 0.35rem 0 0.9rem;
  font-size: 0.95rem;
  color: #444;
}
.hlp-package-inherits {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #111;
  border-top: 0.0875rem solid #e6e6e6;
  padding-top: 0.8rem;
  margin-bottom: 0.6rem;
}
.hlp-list {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  flex: 1 1 auto;
}
.hlp-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}
.hlp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 0.14rem solid #bf202f;
  border-bottom: 0.14rem solid #bf202f;
  transform: rotate(-45deg);
}
.hlp-package .button {
  align-self: flex-start;
}
.hlp-guarantee {
  margin: 1.6rem auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: 0.95rem;
  color: #fff;
  border: 0.0875rem solid rgba(255, 255, 255, 0.25);
  border-radius: 0.9rem;
  padding: 0.9rem 1.1rem;
}

/* A partnership placement: the mockup image on top, our own words under it.
   Three across on a desktop so twelve cards fill four complete rows -- no row
   left with a single orphan card. */
.hlp-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 61rem) {
  .hlp-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 40rem) {
  .hlp-benefits {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hlp-benefit {
  display: flex;
  flex-direction: column;
}
/* CONTAIN, not cover: these are mockups, and cropping one chops the YOUR
   COMPANY off the thing the card is selling. */
.hlp-benefit-photo {
  background: #fff;
  border-bottom: 0.0875rem solid #f0f0f0;
  /* A FIXED height, not an aspect ratio: the mockups are a mix of squares,
     portraits and wide laptops, and a ratio let each card size itself, which
     is what made the rows sit at different heights. */
  height: 13.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
}
.hlp-benefit-photo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.hlp-benefit-body {
  padding: 1.15rem 1.3rem 1.4rem;
}
.hlp-benefit-body h3 {
  font-size: 1.08rem;
  margin: 0 0 0.45rem;
  text-wrap: balance;
}
.hlp-benefit-body p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #444;
}

/* A partner's own logo as the avatar under a stacked quote. Deliberately NOT
   the export's round testimonial_image-wrapper, which crops a wordmark into a
   3rem circle. */
.hlp-voice-logo {
  display: flex;
  align-items: center;
  width: 5.5rem;
}
.hlp-voice-logo img {
  max-width: 5.5rem;
  max-height: 3.2rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* BOOST Kids: the kids' profile cards. */
.hlp-kids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem;
}
.hlp-kid {
  display: flex;
  flex-direction: column;
}
.hlp-kid-photo {
  background: #111;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
/* The kids' portraits are cut-outs with a transparent background, so they sit
   ON the black rather than filling it: contain, not cover, or the crop cuts
   their head off. */
.hlp-kid-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}
.hlp-kid-body {
  padding: 1.15rem 1.3rem 1.4rem;
}
.hlp-kid-name {
  font-size: 1.35rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}
.hlp-kid-body p {
  margin: 0 0 0.7rem;
  font-size: 0.93rem;
  line-height: 1.55;
  color: #444;
}
.hlp-kid-body p:last-child {
  margin-bottom: 0;
}

/* The steps a family goes through. */
.hlp-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  counter-reset: hlp-step;
}
.hlp-number {
  padding: 1.3rem 1.4rem;
}
.hlp-number h3 {
  font-size: 1.02rem;
  margin: 0.5rem 0 0.4rem;
}
.hlp-number p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: #444;
}
.hlp-number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 100px;
  background: #bf202f;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
}

/* The BOOST terms, folded inside the permission fieldset. */
.hlp-terms summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: #bf202f;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
.hlp-terms p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #555;
  margin: 0.2rem 0 0;
}

/* Attribution under a stacked quote. The export's nation_quote-wrapper is a
   two-column grid built around a round avatar; with no avatar the text lands
   in the min-content column and wraps one word per line. */
.nation_quote-wrapper.hlp-attrib {
  grid-template-columns: min-content minmax(0, 1fr);
}
.nation_quote-wrapper.hlp-attrib:not(:has(img)) {
  grid-template-columns: minmax(0, 1fr);
}
.hlp-quote-stars {
  color: #bf202f;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

/* Our Team: the coaching and leadership cards. Three across, same photo shape
   for all three so the row reads as one shoot (2026-08-01). */
.hlp-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem;
}
.hlp-person {
  display: flex;
  flex-direction: column;
}
.hlp-person-photo {
  background: #e9e9e9;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.hlp-person-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.hlp-person-body {
  padding: 1.2rem 1.3rem 1.45rem;
}
.hlp-person-body h3 {
  font-size: 1.2rem;
  margin: 0 0 0.2rem;
}
.hlp-person-role {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bf202f;
  margin-bottom: 0.7rem;
}
.hlp-person-body p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #444;
}

/* The pro-clinic athlete cards reuse the team-card shape, but their portraits
   are cut-outs on black rather than studio photos on grey. */
.hlp-person-photo.is-cutout {
  background: #111;
}
.hlp-person-photo.is-cutout img {
  object-fit: contain;
  object-position: bottom center;
}
.hlp-person-when {
  margin-top: 0.7rem !important;
  font-size: 0.82rem !important;
  font-weight: 600;
  color: #bf202f !important;
}

/* Four quotes in the export's masonry left three on one row and a lone fourth
   underneath (Andrew, 2026-08-01: "you have three in a row and then a fourth at
   the bottom, which looks terrible"). Two columns means 2 + 2, always even. */
.quote_list.hlp-quotes {
  column-count: 2;
  column-gap: 1.25rem;
}
@media (max-width: 47rem) {
  .quote_list.hlp-quotes {
    column-count: 1;
  }
}
.quote_list.hlp-quotes > .quote_block {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

/* NO ORPHANED WORDS IN A HEADING (Andrew, 2026-08-01: "you have the title in
   two different lines... you can't be doing design areas like that").
   text-wrap: balance evens out every wrapped heading instead of leaving one
   word stranded on its own line. Applied to every heading the hand-built pages
   render, plus the card and section headings inside them. */
.lp-hero h1,
.lp-section h2,
.lp-section h3,
.lp-card h3,
.lp-perk h3,
.lp-faq summary,
.lp-shift-from,
.lp-shift-to,
.lp-trust-item strong,
.hlp-group-title,
.hlp-person-body h3,
.hlp-package-name {
  text-wrap: balance;
}
.lp-hero-sub,
.lp-lead,
.lp-card p {
  text-wrap: pretty;
}

/* THE FOUR-UP LEAGUE HERO (2026-08-03). Sits in the same grid column the single
   hero photo used, so the headline beside it is untouched. Square-ish cells
   keep four faces readable at this size; the white gap is the border treatment
   Andrew likes on the Regina home page. */
.lp-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.lp-quad-cell {
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  background: #f1f1f1;
}
.lp-quad-cell img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0;
}

/* THE TWELVE-TILE PHOTO GRID (2026-08-03). Small 4:3 tiles, four across on a
   desktop, two across on a phone, each with the thin white border and soft
   shadow from the Regina home page treatment. */
.lp-photogrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  max-width: 74rem;
  margin: 0 auto;
}
.lp-photogrid-cell {
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  background: #f1f1f1;
}
.lp-photogrid-cell img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0;
}
@media (max-width: 56rem) {
  .lp-photogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 40rem) {
  .lp-photogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* A 12-grid belongs in a FULL-WIDTH section. If one ever lands inside a split
   column again (the spring-league thumbnail incident, 2026-08-03), it drops to
   two-up so the tiles stay big instead of shrinking to postage stamps. */
.lp-split .lp-photogrid {
  grid-template-columns: repeat(2, 1fr);
}