/* =====================================================================
   PLAYER TEMPLATES (Phase 3D Stage 2) - includes/player_templates.php
   Loaded ONLY by pages rendering a Stage 2 template (and roster pages
   when a team card style is published), so Classic pages are untouched.
   White-label: every color is a team variable (--red / --black /
   --red-rgb / --black-rgb from team_color_css()); the accent first-name
   face is the team's own chosen font (--tpl-accent-font). No imagery is
   bundled - atmosphere (smoke, beams, streaks, glow) is pure CSS.
   ===================================================================== */

/* Contrast-safe team colors (team_color_css(): --accent-*, --surface-dark).
   --tpl-accent = the team color used as TEXT/ICONS on this surface; fills
   keep var(--red) and put --accent-ink text on it; --black is swapped
   for a guaranteed-dark version so white text never lands on a light
   secondary color. */
.tpl-page, .tpl-card { --black: var(--surface-dark, #0A0A0A); --black-rgb: var(--surface-dark-rgb, 10, 10, 10); --tpl-accent: var(--accent-on-dark, var(--red)); --tpl-accent-text: var(--accent-on-dark-text, var(--red)); --tpl-ink: var(--accent-ink, #fff); --tpl-ink-rgb: var(--accent-ink-rgb, 255, 255, 255); --tpl-glow-rgb: var(--accent-on-dark-rgb, var(--red-rgb)); }
.tpl-page { background: var(--black); color: #f2f0ed; overflow-x: hidden; }
.tpl-page .wrap-wide { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.tpl-page main { position: relative; z-index: 1; }

/* ---------- shared pieces ---------- */
.tpl-photo { position: relative; overflow: hidden; }
.tpl-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-icon { width: 1em; height: 1em; flex-shrink: 0; }
.tpl-name { margin: 0; display: flex; flex-direction: column; line-height: 0.88; font-weight: 400; }
.tpl-first { font-family: var(--tpl-accent-font); display: block; }
.tpl-last { font-family: 'Anton', 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; display: block; overflow-wrap: anywhere; }
/* Accent first-name treatments, picked from the TEAM's chosen font. */
.tpl-accent-script .tpl-first { font-weight: 700; font-size: 0.5em; line-height: 1; transform: rotate(-5deg) translate(0.15em, 0.18em); transform-origin: left bottom; text-transform: none; position: relative; z-index: 1; }
.tpl-accent-serif .tpl-first { font-style: italic; font-size: 0.36em; line-height: 1.1; text-transform: none; }
.tpl-accent-display .tpl-first { font-size: 0.32em; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.12em; }
.tpl-accent-caps .tpl-first { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 0.22em; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.42em; }
.tpl-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 8px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--red); color: var(--tpl-ink); border: 1.5px solid var(--red); text-decoration: none;
}
.tpl-btn:hover { filter: brightness(1.1); color: var(--tpl-ink); }
.tpl-btn:focus-visible, .tpl-actionbar a:focus-visible, .tpl-actionbar button:focus-visible { outline: 3px solid var(--tpl-accent); outline-offset: 2px; }
.tpl-btn .tpl-icon { width: 18px; height: 18px; }
.tpl-btn-outline { background: transparent; color: inherit; border-color: var(--tpl-accent); }
.tpl-btn-ghost { background: transparent; border-color: rgba(255,255,255,0.18); color: inherit; }
.tpl-stat-value { font-family: 'Anton', sans-serif; line-height: 1; display: block; }
.tpl-stat-value small { font-family: 'Oswald', sans-serif; font-size: 0.42em; margin-left: 0.25em; letter-spacing: 0.04em; color: var(--tpl-accent); }
.tpl-stat-label { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; display: block; }
.tpl-teammark { display: flex; align-items: center; gap: 12px; }
.tpl-teammark-logo { width: 54px; height: 54px; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)); }
.tpl-teammark-name-img { max-height: 70px; max-width: 280px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6)); }
.tpl-teammark-text { display: flex; flex-direction: column; }
.tpl-teammark-name { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 22px; letter-spacing: 0.04em; line-height: 1; color: #fff; }
.tpl-teammark-tag { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 11px; letter-spacing: 0.42em; color: rgba(255,255,255,0.65); margin-top: 4px; }
.tpl-bgphoto { position: fixed; inset: -40px; z-index: 0; background: center / cover no-repeat; filter: blur(34px) brightness(0.28) saturate(1.2); pointer-events: none; }
.tpl-logobg { position: fixed; inset: 0; z-index: 0; background: center / 46vmin repeat; opacity: 0.035; filter: grayscale(1); pointer-events: none; }
.tpl-page .site-footer { position: relative; z-index: 1; }
/* Background treatments (apply to each template's atmosphere layer). */
.tpl-bg-solid { --tpl-atmos: var(--black); }
.tpl-bg-gradient { --tpl-atmos: linear-gradient(140deg, var(--red) 0%, var(--black) 62%); }

/* shared downstream blocks */
.tpl-gallery-item { position: relative; display: block; overflow: hidden; border-radius: 6px; background: #111; }
.tpl-gallery-item .tpl-photo { position: absolute; inset: 0; }
.tpl-gallery-item .tpl-photo img { transition: transform 0.4s ease; }
.tpl-gallery-item:hover .tpl-photo img { transform: scale(1.05); }
.tpl-gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(var(--black-rgb), 0.9));
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; color: #fff;
}
.tpl-video { margin: 0; }
.tpl-video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 8px; }
.tpl-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tpl-video figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; flex-wrap: wrap; }
.tpl-video-type { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; background: var(--red); color: var(--tpl-ink); padding: 2px 8px; border-radius: 3px; }
.tpl-video-title { font-weight: 600; }
.tpl-video-more { margin-top: 18px; }
.tpl-promo { display: block; border-radius: 8px; overflow: hidden; background: #000; }
.tpl-promo img { width: 100%; height: auto; display: block; }

/* =====================================================================
   SHOWCASE 1 - CINEMATIC HERO
   ===================================================================== */
.cin-hero { position: relative; height: clamp(560px, calc(100vh - 190px), 820px); overflow: hidden; isolation: isolate; background: var(--black); }
.cin-atmos {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 34% 52% at 68% 46%, rgba(var(--red-rgb), 0.38), transparent 72%),
    radial-gradient(ellipse 55% 65% at 80% 22%, rgba(var(--red-rgb), 0.22), transparent 70%),
    radial-gradient(ellipse 60% 55% at 8% 96%, rgba(var(--red-rgb), 0.42), transparent 70%),
    linear-gradient(165deg, #232326 0%, var(--black) 58%);
}
.tpl-v-team .cin-atmos {
  background:
    radial-gradient(ellipse 70% 80% at 85% 15%, rgba(var(--red-rgb), 0.55), transparent 70%),
    radial-gradient(ellipse 70% 70% at 0% 100%, rgba(var(--red-rgb), 0.7), transparent 70%),
    linear-gradient(165deg, rgba(var(--red-rgb), 0.35) 0%, var(--black) 70%);
}
.tpl-bg-solid .cin-atmos, .tpl-bg-gradient .cin-atmos { background: var(--tpl-atmos); }
.tpl-bg-photo .cin-atmos { background: rgba(var(--black-rgb), 0.55); }
.cin-smoke {
  position: absolute; inset: -10%; filter: blur(30px); opacity: 0.9;
  background:
    radial-gradient(circle at 16% 78%, rgba(255,255,255,0.09), transparent 26%),
    radial-gradient(circle at 34% 92%, rgba(255,255,255,0.07), transparent 22%),
    radial-gradient(circle at 70% 88%, rgba(var(--red-rgb), 0.18), transparent 30%),
    radial-gradient(circle at 92% 60%, rgba(255,255,255,0.05), transparent 24%);
}
.cin-streaks {
  position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.55;
  background: repeating-linear-gradient(118deg, transparent 0 70px, rgba(var(--red-rgb), 0.22) 70px 74px, transparent 74px 190px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 55%); mask-image: linear-gradient(to top, #000 0%, transparent 55%);
}
.cin-flare { position: absolute; right: 18%; top: 8%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%); filter: blur(6px); }
.cin-watermark { position: absolute; left: 4%; top: 12%; width: 40%; height: 70%; z-index: 1; background: center / contain no-repeat; opacity: 0.08; filter: grayscale(1) brightness(1.6); }
.cin-ghost {
  position: absolute; left: -2%; top: 0; width: 50%; height: 100%; z-index: 1; opacity: 0.3;
  -webkit-mask-image: linear-gradient(to right, #000 25%, transparent 92%); mask-image: linear-gradient(to right, #000 25%, transparent 92%);
}
.cin-ghost img { filter: grayscale(1) contrast(1.25); transform: scale(1.4); transform-origin: 50% 25%; }
.cin-number {
  /* Sits in the photo's fade zone: clearly visible, and the athlete's
     side of the photo overlaps its right edge - "behind the player". */
  position: absolute; right: 40%; top: 1%; z-index: 2; font-family: 'Anton', sans-serif; line-height: 0.8;
  font-size: min(52vw, 700px); letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #c9c9cd 30%, #6a6a70 58%, #e3e3e6 82%, #8d8d92 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.65));
}
.tpl-v-team .cin-number { background: linear-gradient(180deg, #fff 0%, var(--red) 45%, rgba(var(--black-rgb), 1) 100%); -webkit-background-clip: text; background-clip: text; }
.cin-photo {
  position: absolute; right: 0; top: 0; width: 64%; height: 100%; z-index: 3;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%); mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}
.cin-vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(var(--black-rgb), 0.35) 0%, transparent 22%, transparent 48%, rgba(var(--black-rgb), 0.96) 100%), linear-gradient(90deg, rgba(var(--black-rgb), 0.75) 0%, transparent 45%); }
.cin-mark { position: absolute; top: 28px; right: 4%; z-index: 5; }
.cin-side { position: absolute; right: 4%; top: 44%; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
.cin-side-k { letter-spacing: 0.32em; font-size: 14px; color: rgba(255,255,255,0.8); }
.cin-side-year { font-family: 'Anton', sans-serif; font-size: 64px; line-height: 1; color: var(--tpl-accent); text-shadow: 0 0 22px rgba(var(--red-rgb), 0.5); }
.cin-side-team { letter-spacing: 0.24em; font-size: 13px; color: rgba(255,255,255,0.75); max-width: 220px; margin-top: 6px; }
.cin-copy { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 6; }
.cin-numtag { font-family: 'Anton', sans-serif; font-size: 30px; color: var(--tpl-accent); letter-spacing: 0.02em; margin-bottom: 4px; display: none; }
.cin-name { font-size: clamp(72px, 11.5vw, 176px); color: #fff; }
.cin-name.tpl-len-l { font-size: clamp(60px, 9vw, 136px); }
.cin-name.tpl-len-xl { font-size: clamp(52px, 7.6vw, 116px); }
.cin-name .tpl-last { background: linear-gradient(180deg, #ffffff 0%, #e2e2e5 45%, #a3a3a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 22px rgba(0,0,0,0.8)); }
.tpl-v-team .cin-name .tpl-last { background: linear-gradient(180deg, #fff 0%, var(--tpl-accent) 62%, var(--tpl-accent) 100%); -webkit-background-clip: text; background-clip: text; }
.cin-rule { margin-top: 18px; width: min(620px, 62%); height: 2px; background: linear-gradient(90deg, var(--red), transparent); box-shadow: 0 0 14px rgba(var(--red-rgb), 0.9); }
/* no-photo: number + team badge carry the poster */
.tpl-no-photo .cin-number { right: 6%; top: 4%; font-size: min(58vw, 760px); }
.cin-nophoto { position: absolute; right: 8%; top: 16%; width: 40%; height: 64%; z-index: 3; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(var(--red-rgb), 0.35), transparent 62%); }
.cin-nophoto img { max-width: 54%; max-height: 54%; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8)); }
/* stat bar */
.cin-statbar { position: relative; z-index: 6; background: linear-gradient(180deg, #121214, var(--black)); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 2px solid var(--red); box-shadow: 0 2px 22px rgba(var(--red-rgb), 0.35); }
.cin-statbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.cin-statbar.tpl-stats-3 .cin-statbar-inner { grid-template-columns: repeat(3, 1fr); }
.cin-statbar.tpl-stats-2 .cin-statbar-inner { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
.cin-statbar.tpl-stats-1 .cin-statbar-inner { grid-template-columns: minmax(0, 380px); justify-content: center; }
.cin-stat { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 24px 26px; border-left: 1px solid rgba(255,255,255,0.08); }
.cin-stat:first-child { border-left: 0; }
.cin-stat .tpl-icon { grid-row: span 2; width: 44px; height: 44px; color: #d1d1d5; }
.cin-stat .tpl-stat-value { font-size: 44px; color: #fff; }
.cin-stat .tpl-stat-label { color: #a9a6a1; margin-top: 4px; }
/* body */
.cin-body { background: var(--black); padding: 30px 0 70px; }
.tpl-bg-photo .cin-body, .tpl-logo-background .cin-body { background: rgba(var(--black-rgb), 0.82); }
.cin-section { padding-top: 44px; padding-bottom: 20px; }
.cin-h { display: flex; align-items: center; gap: 18px; margin: 0 0 24px; font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: 0.02em; color: #fff; }
.cin-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--red-rgb), 0.9), transparent); }
.cin-about { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.cin-about p { font-size: 17px; line-height: 1.7; color: #d7d4d0; margin: 0; }
.cin-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); align-self: start; }
.cin-facts:only-child { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-column: 1 / -1; }
.cin-facts div { background: #111113; padding: 14px 18px; }
.cin-facts dt { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: #8f8c88; }
.cin-facts dd { margin: 4px 0 0; font-family: 'Oswald', sans-serif; font-size: 20px; color: #fff; }
.cin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.cin-metric { background: linear-gradient(180deg, #17171a, #0f0f11); border: 1px solid rgba(255,255,255,0.07); border-bottom: 3px solid var(--red); border-radius: 10px; padding: 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.cin-metric .tpl-icon { grid-row: span 2; width: 34px; height: 34px; color: #bdbdc2; }
.cin-metric .tpl-stat-value { font-size: 36px; color: #fff; }
.cin-metric .tpl-stat-label { color: #9c9995; }
.cin-gallery-wrap { background: linear-gradient(180deg, transparent, rgba(var(--red-rgb), 0.08), transparent); }
.cin-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cin-gallery .tpl-gallery-item { aspect-ratio: 4 / 5; box-shadow: 0 16px 34px rgba(0,0,0,0.5); }
.cin-gallery.tpl-count-1 { grid-template-columns: minmax(0, 520px); }
.cin-gallery:not(.tpl-count-1):not(.tpl-count-2) .tpl-gallery-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.cin-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cin-videos .tpl-video.is-lead { grid-column: 1 / -1; }
.cin-videos .tpl-video-frame { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 40px rgba(0,0,0,0.5); }
.cin-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.cin-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: start; }
.cin-contact-links { display: grid; gap: 10px; max-width: 560px; }
.cin-contact-link { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 10px; background: #131315; border: 1px solid rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.cin-contact-link:hover { border-color: var(--tpl-accent); color: #fff; }
.cin-contact-link .tpl-icon { width: 26px; height: 26px; color: var(--tpl-accent); }
.cin-contact-link span { display: flex; flex-direction: column; font-size: 17px; }
.cin-contact-link small { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: #8f8c88; }
.cin-muted, .im-muted, .el-muted { color: #9c9995; }
.cin-qr, .im-qr, .el-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-family: 'Oswald', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: #9c9995; }
.cin-qr img, .im-qr img, .el-qr img { background: #fff; padding: 8px; border-radius: 8px; }
.cin-qr a, .im-qr a, .el-qr a { display: inline-flex; gap: 6px; align-items: center; color: inherit; text-decoration: none; margin-top: 4px; }
.cin-qr a:hover, .im-qr a:hover, .el-qr a:hover { color: var(--tpl-accent); }

@media (max-width: 760px) {
  .cin-hero { height: auto; aspect-ratio: 3 / 4.3; min-height: 0; max-height: 92vh; }
  .cin-photo { width: 100%; height: 82%; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 34%); mask-image: linear-gradient(to top, transparent 0%, #000 34%); }
  .cin-ghost { display: none; }
  /* Phone: a big outlined poster number layered over the photo's upper
     right, the athlete stays fully visible through it. */
  .cin-number { right: -4%; left: auto; top: 1%; z-index: 4; font-size: 72vw; background: none; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.55); filter: drop-shadow(0 0 18px rgba(var(--red-rgb), 0.55)); }
  .tpl-v-team .cin-number { background: none; -webkit-text-stroke-color: rgba(var(--red-rgb), 0.9); }
  .cin-vignette { z-index: 5; }
  .tpl-no-photo .cin-number { left: 50%; transform: translateX(-50%); top: 6%; font-size: 92vw; }
  .cin-nophoto { right: 50%; transform: translateX(50%); top: 26%; width: 70%; height: 46%; }
  .cin-mark { display: none; } /* the top bar already carries the logo on phones */
  .cin-side { display: none; }
  .cin-copy { bottom: 4%; padding-left: 18px; padding-right: 18px; }
  .cin-numtag { display: block; font-size: 22px; }
  .cin-name { font-size: 17vw; }
  .cin-name.tpl-len-m { font-size: 14.5vw; }
  .cin-name.tpl-len-l { font-size: 12vw; }
  .cin-name.tpl-len-xl { font-size: 10vw; }
  .cin-rule { width: 70%; }
  .cin-statbar-inner, .cin-statbar.tpl-stats-3 .cin-statbar-inner { grid-template-columns: 1fr 1fr; }
  .cin-statbar.tpl-stats-1 .cin-statbar-inner { grid-template-columns: 1fr; }
  .cin-stat { padding: 16px 14px; column-gap: 10px; border-left: 0; border-top: 1px solid rgba(255,255,255,0.06); }
  .cin-stat .tpl-icon { width: 30px; height: 30px; }
  .cin-stat .tpl-stat-value { font-size: 30px; }
  .cin-stat .tpl-stat-label { font-size: 10px; }
  .cin-about, .cin-contact { grid-template-columns: 1fr; }
  .cin-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cin-gallery:not(.tpl-count-1):not(.tpl-count-2) .tpl-gallery-item:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
  .cin-videos { grid-template-columns: 1fr; }
}

/* =====================================================================
   SHOWCASE 2 - ELITE RECRUITING
   ===================================================================== */
.tpl-elite { --el-bg: #0e0f11; --el-card: #17181b; --el-line: rgba(255,255,255,0.08); --el-text: #f2f0ed; --el-muted: #9c9995; background: var(--el-bg); color: var(--el-text); }
.tpl-elite.tpl-v-light { --el-bg: #f3f1ee; --el-card: #ffffff; --el-line: rgba(0,0,0,0.08); --el-text: #141414; --el-muted: #6b6864; }
.tpl-elite.tpl-bg-solid { --el-bg: var(--black); }
.tpl-elite.tpl-v-light.tpl-bg-solid { --el-bg: #ffffff; }
.el-hero { position: relative; z-index: 1; padding: 52px 0 40px; background: radial-gradient(ellipse 60% 90% at 12% 0%, rgba(var(--red-rgb), 0.2), transparent 60%), var(--el-bg); }
.tpl-elite.tpl-bg-gradient .el-hero { background: linear-gradient(140deg, rgba(var(--red-rgb), 0.55), var(--el-bg) 60%); }
.tpl-elite.tpl-bg-photo .el-hero { background: rgba(var(--black-rgb), 0.35); }
.el-hero-inner { display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: 52px; align-items: center; }
.el-id { position: relative; min-width: 0; }
.el-id > * { position: relative; z-index: 1; }
.el-id > .el-bgnum { position: absolute; z-index: 0; right: 0; top: -40px; font-family: 'Anton', sans-serif; font-size: 300px; line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px rgba(var(--red-rgb), 0.22); pointer-events: none; }
.el-photo-card { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 30px 60px rgba(0,0,0,0.35), 0 0 0 1px var(--el-line); }
.el-photo-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--red); z-index: 3; }
.el-photo { position: absolute; inset: 0; }
.el-logobadge { position: absolute; top: 14px; right: 14px; z-index: 3; width: 58px; height: 58px; object-fit: contain; background: #fff; border-radius: 50%; padding: 6px; box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.el-nophoto { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.18), transparent 50%), linear-gradient(155deg, var(--red) 0%, var(--black) 85%); }
.el-nophoto img { position: absolute; width: 78%; height: 78%; object-fit: contain; opacity: 0.12; filter: grayscale(1) brightness(2); }
.el-nophoto span { position: relative; font-family: 'Anton', sans-serif; font-size: clamp(120px, 16vw, 210px); line-height: 1; color: #fff; text-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.el-kicker { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.22em; font-size: 13px; font-weight: 600; color: var(--tpl-accent-text); }
.el-name { margin-top: 10px; font-size: clamp(48px, 6.2vw, 88px); color: var(--el-text); }
.el-name.tpl-len-l, .el-name.tpl-len-xl { font-size: clamp(40px, 5vw, 70px); }
.el-name .tpl-first { color: var(--el-text); }
.el-quick { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; }
.el-quick li { background: var(--el-card); border: 1px solid var(--el-line); border-radius: 10px; padding: 9px 14px; display: flex; flex-direction: column; }
.el-quick small { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; color: var(--el-muted); }
.el-quick b { font-size: 16px; font-weight: 600; }
.el-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tpl-v-light .tpl-btn-ghost { border-color: rgba(0,0,0,0.15); }
.el-keystats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.el-keystats.tpl-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.el-keystats.tpl-stats-2 { grid-template-columns: repeat(2, minmax(0, 220px)); }
.el-keystats.tpl-stats-1 { grid-template-columns: minmax(0, 240px); }
.el-keystat { background: var(--el-card); border: 1px solid var(--el-line); border-top: 3px solid var(--red); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.el-keystat .tpl-icon { width: 22px; height: 22px; color: var(--tpl-accent); }
.el-keystat .tpl-stat-value { font-size: 34px; }
.el-keystat .tpl-stat-label { color: var(--el-muted); font-size: 11px; }
.el-nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--el-bg) 90%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--el-line); border-bottom: 1px solid var(--el-line); }
.el-nav .wrap-wide { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.el-nav a { padding: 14px 16px; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: var(--el-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.el-nav a:hover { color: var(--el-text); border-bottom-color: var(--tpl-accent); }
.el-body { position: relative; z-index: 1; padding-top: 28px; padding-bottom: 80px; }
.el-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.el-span-2 { grid-column: 1 / -1; }
.el-card { background: var(--el-card); border: 1px solid var(--el-line); border-radius: 14px; padding: 22px 24px; }
.el-card p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--el-text); opacity: 0.9; }
.el-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 16px; color: var(--el-text); }
.el-h .tpl-icon { width: 20px; height: 20px; color: var(--tpl-accent); }
.el-dl { margin: 0; }
.el-dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--el-line); }
.el-dl div:last-child { border-bottom: 0; }
.el-dl dt { color: var(--el-muted); font-size: 14px; }
.el-dl dd { margin: 0; font-weight: 600; text-align: right; }
.el-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.el-metric { border: 1px solid var(--el-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.el-metric .tpl-icon { width: 22px; height: 22px; color: var(--tpl-accent); }
.el-metric .tpl-stat-value { font-size: 32px; }
.el-metric .tpl-stat-label { color: var(--el-muted); font-size: 11px; }
.el-section { margin-top: 36px; }
.el-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.el-videos .tpl-video.is-lead { grid-column: 1 / -1; }
.el-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.el-gallery .tpl-gallery-item { aspect-ratio: 4 / 5; border-radius: 10px; }
.el-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.el-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; }
.el-contact-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.el-contact-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--el-line); color: var(--el-text); text-decoration: none; }
.el-contact-link:hover { border-color: var(--tpl-accent); color: var(--el-text); }
.el-contact-link .tpl-icon { width: 24px; height: 24px; color: var(--tpl-accent); }
.el-contact-link span { display: flex; flex-direction: column; font-weight: 600; overflow-wrap: anywhere; }
.el-contact-link small { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; color: var(--el-muted); font-weight: 400; }
.tpl-v-light .el-quick li, .tpl-v-light .el-keystat, .tpl-v-light .el-card { box-shadow: 0 6px 18px rgba(0,0,0,0.05); }
.tpl-v-light .site-footer { margin-top: 0; }

@media (max-width: 860px) {
  .el-hero { padding-top: 0; }
  .el-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 0; padding-right: 0; }
  .el-id > .el-bgnum { font-size: 200px; top: -10px; right: 10px; }
  .el-metrics { grid-template-columns: 1fr 1fr; }
  .el-photo-card { border-radius: 0; aspect-ratio: 4 / 4.6; max-height: 74vh; box-shadow: none; }
  .el-id { padding: 0 18px; }
  .el-name { font-size: 13vw; }
  .el-name.tpl-len-l, .el-name.tpl-len-xl { font-size: 10vw; }
  .el-quick { flex-wrap: nowrap; overflow-x: auto; margin-left: -18px; margin-right: -18px; padding: 0 18px 4px; scrollbar-width: none; }
  .el-quick li { flex: 0 0 auto; }
  .el-keystats, .el-keystats.tpl-stats-3 { grid-template-columns: 1fr 1fr; }
  .el-keystats.tpl-stats-1 { grid-template-columns: 1fr; }
  .el-grid, .el-videos, .el-contact { grid-template-columns: 1fr; }
  .el-gallery { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   SHOWCASE 3 - IMPACT GRAPHIC
   ===================================================================== */
.tpl-impact { background: #050506; }
.im-hero { position: relative; overflow: hidden; isolation: isolate; padding: 34px 0 34px; background: #050506; }
.im-atmos { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 50% 60% at 50% 42%, rgba(var(--red-rgb), 0.32), transparent 70%), linear-gradient(180deg, #0c0c0e 0%, #050506 100%); }
.tpl-bg-solid .im-atmos, .tpl-bg-gradient .im-atmos { background: var(--tpl-atmos); }
.tpl-bg-photo .im-atmos { background: rgba(5,5,6,0.6); }
.im-lights { position: absolute; inset: 0; background:
    radial-gradient(circle at 6% 6%, rgba(255,255,255,0.9) 0 2px, transparent 3px), radial-gradient(circle at 9% 4%, rgba(255,255,255,0.8) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 7%, rgba(255,255,255,0.7) 0 2px, transparent 3px), radial-gradient(circle at 88% 5%, rgba(255,255,255,0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 8%, rgba(255,255,255,0.8) 0 2px, transparent 3px), radial-gradient(circle at 94% 4%, rgba(255,255,255,0.7) 0 2px, transparent 3px),
    radial-gradient(ellipse 22% 18% at 9% 6%, rgba(255,255,255,0.18), transparent 70%), radial-gradient(ellipse 22% 18% at 91% 6%, rgba(255,255,255,0.18), transparent 70%); }
.im-beams { position: absolute; left: 50%; top: -10%; width: 120%; height: 90%; transform: translateX(-50%); opacity: 0.5; mix-blend-mode: screen;
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg 158deg, rgba(var(--red-rgb), 0.35) 168deg, transparent 174deg, transparent 186deg, rgba(var(--red-rgb), 0.35) 192deg, transparent 202deg 360deg); filter: blur(4px); }
.im-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, transparent, rgba(var(--red-rgb), 0.12) 40%, rgba(255,255,255,0.05) 60%, transparent), repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 9px); }
.im-watermark { position: absolute; left: 50%; top: 45%; width: 70%; height: 80%; transform: translate(-50%, -50%); z-index: 0; background: center / contain no-repeat; opacity: 0.06; filter: grayscale(1) brightness(1.8); }
.im-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr) minmax(0, 1fr); gap: 28px; max-width: 1440px; margin: 0 auto; padding: 0 30px; min-height: clamp(560px, calc(100vh - 250px), 720px); align-items: end; }
.im-frame { max-height: calc(100vh - 290px); min-height: 460px; }
.im-left { align-self: center; position: relative; z-index: 3; }
.im-mark { margin-bottom: 18px; }
.im-mark .tpl-teammark-name { font-size: 30px; background: linear-gradient(180deg, #fff, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.im-name { font-size: clamp(60px, 7vw, 124px); color: #fff; }
.im-name.tpl-len-l { font-size: clamp(50px, 5.4vw, 96px); }
.im-name.tpl-len-xl { font-size: clamp(42px, 4.6vw, 80px); }
.im-name .tpl-last { background: linear-gradient(180deg, #fff 0%, #dcdce0 50%, #8c8c92 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.8)); }
.im-plate { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.im-plate-num { font-family: 'Anton', sans-serif; font-size: 70px; line-height: 0.9; color: var(--tpl-accent); -webkit-text-stroke: 2px #fff; paint-order: stroke fill; text-shadow: 0 0 24px rgba(var(--red-rgb), 0.7); }
.im-plate-pos { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-size: 22px; line-height: 1.15; padding-left: 18px; border-left: 2px solid rgba(255,255,255,0.45); max-width: 240px; }
.im-statlist { margin-top: 20px; padding: 6px 0 6px 20px; border-left: 2px solid var(--red); box-shadow: -10px 0 18px -14px rgba(var(--red-rgb), 0.9); display: grid; gap: 16px; }
.im-stat { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: center; }
.im-stat .tpl-icon { grid-row: span 2; width: 40px; height: 40px; color: #e4e4e8; }
.im-stat .tpl-stat-value { font-size: 34px; color: #fff; }
.im-stat .tpl-stat-label { color: rgba(255,255,255,0.7); font-size: 12px; }
.im-center { position: relative; z-index: 2; align-self: end; display: flex; flex-direction: column; align-items: center; }
.im-frame { position: relative; width: 100%; max-width: 440px; aspect-ratio: 3 / 4.3; border-radius: 230px 230px 12px 12px / 210px 210px 12px 12px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(var(--red-rgb), 0.6), #0b0b0c 75%);
  box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.95), 0 0 46px rgba(var(--red-rgb), 0.75), inset 0 0 60px rgba(var(--red-rgb), 0.45); }
.tpl-v-angled .im-frame { border-radius: 6px; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); box-shadow: none; }
.tpl-v-angled .im-frame::before { content: ''; position: absolute; inset: 0; z-index: 4; border: 3px solid var(--red); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); pointer-events: none; }
.im-photo { position: absolute; inset: 0; z-index: 1; }
.im-frame-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(var(--red-rgb), 0.35)), radial-gradient(ellipse 60% 20% at 50% 100%, rgba(255,255,255,0.18), transparent 70%); }
.im-nophoto { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.im-nophoto.has-logo img { top: auto; width: 74%; }
.im-nophoto img { position: absolute; width: 62%; top: 12%; object-fit: contain; opacity: 0.9; filter: drop-shadow(0 18px 36px rgba(0,0,0,0.8)); border-radius: 50%; }
.im-nophoto span { position: absolute; bottom: auto; font-family: 'Anton', sans-serif; font-size: 150px; line-height: 1; background: linear-gradient(180deg, #fff, #9a9aa0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.im-reflect { display: block; width: 110%; height: 50px; margin-top: -6px; background: radial-gradient(ellipse 50% 50% at 50% 0%, rgba(var(--red-rgb), 0.55), transparent 70%); filter: blur(8px); }
.im-right { position: relative; align-self: stretch; min-height: 640px; }
.im-number { position: absolute; right: -2%; top: 4%; z-index: 1; font-family: 'Anton', sans-serif; font-size: min(32vw, 500px); line-height: 0.8;
  background: linear-gradient(180deg, #ffffff 0%, #bdbdc2 34%, #55555b 62%, #d8d8dc 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(var(--red-rgb), 0.45)); }
.im-ghost { position: absolute; top: 0; right: 0; width: 90%; height: 58%; z-index: 0; opacity: 0.38;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 55% 40%, #000 40%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 55% 40%, #000 40%, transparent 75%); }
.im-ghost img { filter: grayscale(1) contrast(1.3) brightness(0.85); transform: scale(1.3); transform-origin: 50% 25%; }
.im-motto { position: absolute; right: 4%; top: 30%; z-index: 2; max-width: 70%; text-align: right; color: rgba(255,255,255,0.8); font-family: var(--tpl-accent-font); font-size: 36px; line-height: 1.1; transform: rotate(-4deg); text-shadow: 0 4px 16px rgba(0,0,0,0.8); }
.tpl-accent-caps .im-motto, .tpl-accent-display .im-motto { font-family: 'Oswald', sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: 0.3em; transform: none; }
/* No strip photos assigned: the number takes the column, motto below. */
.im-no-strip .im-number { top: 10%; right: 4%; font-size: min(36vw, 560px); }
.im-no-strip .im-motto { top: auto; bottom: 10%; right: 6%; }
.im-no-strip .im-ghost { height: 72%; }
.im-strip { position: absolute; left: -10%; right: 2%; bottom: 3%; z-index: 3; height: 44%; display: flex; gap: 10px; transform: skewX(-9deg); }
.im-strip-photo { flex: 1; border: 2px solid rgba(255,255,255,0.3); box-shadow: 0 0 22px rgba(var(--red-rgb), 0.6), inset 0 0 0 1px rgba(var(--red-rgb), 0.5); }
.im-strip-photo img { transform: skewX(9deg) scale(1.25); }
.im-strip-1 { left: 20%; }
.im-buttons { position: relative; z-index: 4; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 26px auto 0; padding: 0 20px; max-width: 900px; }
.im-buttons a { min-width: 140px; padding: 14px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1.5px solid var(--red); border-radius: 12px; background: rgba(8,8,9,0.75); box-shadow: 0 0 18px rgba(var(--red-rgb), 0.35), inset 0 0 14px rgba(var(--red-rgb), 0.15); color: #fff; text-decoration: none; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; }
.im-buttons a:hover { background: rgba(var(--red-rgb), 0.25); color: #fff; }
.im-buttons .tpl-icon { width: 28px; height: 28px; color: var(--tpl-accent); }
/* downstream */
.im-body { background: #050506; padding-bottom: 60px; }
.tpl-bg-photo .im-body, .tpl-logo-background .im-body { background: rgba(5,5,6,0.82); }
.im-section { position: relative; padding: 90px 0 40px; overflow: hidden; }
.im-section::before { content: ''; position: absolute; left: -5%; right: -5%; top: 30px; height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); transform: rotate(-1.2deg); box-shadow: 0 0 14px rgba(var(--red-rgb), 0.8); }
.im-section-title { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 0; font-family: 'Anton', sans-serif; font-size: clamp(90px, 15vw, 230px); line-height: 1; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.09); pointer-events: none; }
.im-section > .wrap-wide { position: relative; z-index: 1; }
.im-h { margin: 0 0 16px; font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 44px); color: #fff; }
.im-profile { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.im-bio p { font-size: 17px; line-height: 1.75; color: #d6d3cf; margin: 0; }
.im-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.im-profile .im-facts:only-child { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.im-fact { padding: 14px 16px; background: linear-gradient(135deg, #141416, #0b0b0c); border-left: 3px solid var(--red); clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); }
.im-fact small { display: block; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: #8f8c88; }
.im-fact b { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 500; color: #fff; }
.im-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.im-metric { padding: 26px 22px; background: linear-gradient(135deg, rgba(var(--red-rgb), 0.22), #0c0c0d 60%); border: 1px solid rgba(var(--red-rgb), 0.5); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.im-metric .tpl-icon { width: 30px; height: 30px; color: var(--tpl-accent); }
.im-metric .tpl-stat-value { font-size: 54px; background: linear-gradient(180deg, #fff, #9a9aa0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.im-metric .tpl-stat-value small { -webkit-text-fill-color: var(--tpl-accent); }
.im-metric .tpl-stat-label { color: rgba(255,255,255,0.75); }
.im-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.im-videos .tpl-video.is-lead { grid-column: 1 / -1; }
.im-videos .tpl-video-frame { border-radius: 4px; box-shadow: 0 0 0 2px rgba(var(--red-rgb), 0.9), 0 0 34px rgba(var(--red-rgb), 0.5); }
.im-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.im-gallery .tpl-gallery-item { aspect-ratio: 3 / 4.2; border-radius: 0; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.im-gallery .tpl-gallery-item:nth-child(even) { margin-top: 40px; }
.im-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.im-promos .tpl-promo { box-shadow: 0 0 0 1px rgba(var(--red-rgb), 0.6), 0 0 26px rgba(var(--red-rgb), 0.3); }
.im-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: start; }
.im-contact-links { display: flex; flex-wrap: wrap; gap: 12px; }
.im-contact-link { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border: 1.5px solid var(--red); border-radius: 12px; background: rgba(8,8,9,0.8); box-shadow: 0 0 20px rgba(var(--red-rgb), 0.3); color: #fff; text-decoration: none; }
.im-contact-link:hover { background: rgba(var(--red-rgb), 0.2); color: #fff; }
.im-contact-link .tpl-icon { width: 26px; height: 26px; color: var(--tpl-accent); }
.im-contact-link span { display: flex; flex-direction: column; font-size: 16px; }
.im-contact-link small { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; color: #a9a6a1; }

@media (max-width: 960px) {
  .im-hero { padding-top: 20px; }
  .im-grid { grid-template-columns: 1fr; min-height: 0; padding: 0 18px; gap: 18px; }
  .im-center { order: 1; }
  .im-left { order: 2; text-align: left; }
  .im-right { display: contents; }
  .im-mark { display: none; } /* the top bar already carries the logo on phones */
  .im-frame { max-width: 78vw; }
  /* number sits between the arch (in front) and the name (over it) */
  .im-number, .im-no-strip .im-number { order: 2; position: relative; right: auto; top: auto; justify-self: end; z-index: 1; font-size: 66vw; margin: -30vw -4vw -30vw 0; }
  .im-center { z-index: 2; }
  .im-left { order: 3; z-index: 3; }
  .im-motto, .im-no-strip .im-motto { order: 4; position: static; transform: none; text-align: center; max-width: none; font-size: 26px; margin: 4px 0 10px; }
  .im-ghost { display: none; }
  .im-name { font-size: 16vw; }
  .im-name.tpl-len-m { font-size: 13.5vw; }
  .im-name.tpl-len-l { font-size: 11vw; }
  .im-name.tpl-len-xl { font-size: 9.5vw; }
  .im-plate-num { font-size: 52px; }
  .im-plate-pos { font-size: 17px; }
  .im-statlist { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .im-stat { grid-template-columns: 32px 1fr; column-gap: 10px; }
  .im-stat .tpl-icon { width: 28px; height: 28px; }
  .im-stat .tpl-stat-value { font-size: 28px; }
  .im-strip { position: relative; left: auto; right: auto; bottom: auto; transform: none; height: 220px; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -18px; padding: 0 18px; }
  .im-strip-photo { flex: 0 0 64%; scroll-snap-align: center; transform: skewX(-6deg); }
  .im-strip-photo img { transform: skewX(6deg) scale(1.2); }
  .im-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px; }
  .im-buttons a { min-width: 0; }
  .im-section { padding-top: 104px; }
  .im-section-title { font-size: 23vw; top: 14px; }
  .im-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .im-metric { padding: 18px 12px; }
  .im-metric .tpl-stat-value { font-size: 38px; }
  .im-profile, .im-contact { grid-template-columns: 1fr; }
  .im-videos { grid-template-columns: 1fr; }
  .im-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  .im-gallery .tpl-gallery-item:nth-child(even) { margin-top: 24px; }
}

/* =====================================================================
   CARDS - homepage / roster player cards (Milestone 2 refinement,
   reference: design-reference/41ac89f0...png). Four genuinely different
   designs from ONE renderer (render_player_card_template):
     classic   - dark sports card, team-color number tab (the default)
     cinematic - monochrome + silver: close-up layer, giant number, smoke
     profile   - light two-column recruiting card, brush-edge photo, facts
     poster    - team-color poster: wash, spatter, giant number, glow frame
   White-label: every color is a team variable (contrast-safe --accent-*
   / --surface-dark from team_color_css()), first names use the team's
   name font, textures are neutral grayscale files tinted in CSS. Sized
   with container-query units so a card reads the same at any width;
   small text has pixel minimums for two-per-row phone grids.
   ===================================================================== */
.tpl-card { position: relative; display: block; overflow: hidden; container-type: inline-size; isolation: isolate; text-decoration: none; color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tpl-card:hover, .tpl-card:focus-visible { transform: translateY(-4px); color: #fff; }
.tpl-card:focus-visible { outline: 3px solid var(--tpl-accent, var(--red)); outline-offset: 3px; }
.tpl-card .tpl-photo { position: absolute; }
.tc-name { display: flex; flex-direction: column; line-height: 0.9; position: relative; z-index: 6; }
.tc-last { font-family: 'Anton', sans-serif; text-transform: uppercase; overflow-wrap: break-word; }
.tc-first { font-family: var(--tpl-accent-font, 'Oswald'), 'Oswald', sans-serif; position: relative; z-index: 2; }
.tc-meta { display: block; position: relative; z-index: 6; }
.tc-sep { font-style: normal; margin: 0 0.5em; opacity: 0.7; }
.tc-pos-short, .tc-class-short { display: none; }
@container (max-width: 230px) {
  .tc-pos-full, .tc-class-full { display: none; }
  .tc-pos-short, .tc-class-short { display: inline; }
}
.tc-logo-wm { position: absolute; inset: 16% 14% 36%; z-index: 1; background: center / contain no-repeat; opacity: 0.14; filter: grayscale(1) brightness(1.6); }
/* plain alpha compositing only (no blend modes): cheap to paint with many cards on a page */
.tc-grain { position: absolute; inset: 0; background: url('textures/grain.png'); background-size: 128px; pointer-events: none; }

/* ---------- 1. CLASSIC - traditional dark sports card ----------
   Photo, team-color number tab, and a defined information panel with a
   team-color top edge; the team badge (full-color logo) sits on that edge. */
.tc-classic { aspect-ratio: 3 / 4.25; border-radius: 8px; background: var(--surface-dark, var(--black)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 14px 30px rgba(0,0,0,0.4); }
.tc-classic:hover { box-shadow: 0 0 0 2px var(--accent-on-dark, var(--red)), 0 18px 36px rgba(0,0,0,0.5); }
.tc-classic .tc-media { position: absolute; left: 0; right: 0; top: 0; height: 69%; overflow: hidden; background: #1b1c1f; }
.tc-classic .tc-photo { inset: 0; }
.tc-classic .tc-media::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 72%, rgba(var(--surface-dark-rgb, 10, 10, 10), 0.7) 100%); }
.tc-classic .tc-ph { position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 12px),
    radial-gradient(circle at 50% 42%, rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.85), transparent 68%), linear-gradient(180deg, #17181b, var(--surface-dark, var(--black))); }
.tc-classic .tc-ph-num { font-family: 'Anton', sans-serif; font-size: 46cqw; line-height: 1; color: transparent; -webkit-text-stroke: 0.5cqw rgba(255,255,255,0.4); }
.tc-classic .tc-tab { position: absolute; top: 0; left: 6%; z-index: 7; padding: 3cqw 3.4cqw 2.2cqw; border-radius: 0 0 4px 4px; background: var(--red); color: var(--accent-ink, #fff);
  font-family: 'Anton', sans-serif; font-size: max(15px, 12cqw); line-height: 1; box-shadow: 0 6px 14px rgba(0,0,0,0.45); }
.tc-classic .tc-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 31%; z-index: 5; border-top: 2px solid var(--accent-on-dark, var(--red));
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 55%), var(--surface-dark, var(--black)); }
.tc-classic .tc-bottom { position: absolute; left: 7%; right: 18%; bottom: 7.5%; z-index: 6; }
.tc-classic .tc-first { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: max(10px, 5cqw); line-height: 1.1; margin-bottom: 1.8cqw; color: var(--accent-on-dark-text, var(--red)); }
.tc-classic .tc-last { font-size: 14cqw; line-height: 0.92; color: #fff; letter-spacing: 0.012em; }
.tc-classic .tpl-len-m .tc-last { font-size: 11.8cqw; }
.tc-classic .tpl-len-l .tc-last { font-size: 10cqw; }
.tc-classic .tpl-len-xl .tc-last { font-size: 7cqw; }
.tc-classic .tc-meta { margin-top: 2.6cqw; font-family: 'Inter', sans-serif; font-weight: 500; font-size: max(10px, 4cqw); line-height: 1.35; color: rgba(255,255,255,0.74); }
.tc-classic .tc-meta .tc-sep { color: var(--accent-on-dark, var(--red)); opacity: 1; }
.tc-classic .tc-badge { position: absolute; right: 6%; top: calc(69% - 6.25cqw); z-index: 7; width: 12.5cqw; height: 12.5cqw; border-radius: 50%; padding: 1.1cqw; background: #fff;
  box-shadow: 0 0 0 1.5px var(--accent-on-dark, var(--red)), 0 4px 10px rgba(0,0,0,0.4); display: grid; place-items: center; }
.tc-classic .tc-badge img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
/* phone-size cards: minimum text sizes make the name block relatively taller, so the panel grows a little */
@container (max-width: 200px) {
  .tc-classic .tc-media { height: 64%; }
  .tc-classic .tc-panel { height: 36%; }
  .tc-classic .tc-badge { top: calc(64% - 6.25cqw); }
  .tc-classic .tc-bottom { bottom: 6.5%; }
  .tc-classic .tc-first { margin-bottom: 1.2cqw; }
  .tc-classic .tc-meta { margin-top: 2cqw; }
  .tc-classic .tpl-len-xl .tc-last { font-size: 6.4cqw; }
}

/* ---------- 2. CINEMATIC FULL-BLEED - dark, layered photography ---------- */
.tc-cinematic { aspect-ratio: 3 / 4.25; border-radius: 6px; background: #060607; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 18px 36px rgba(0,0,0,0.55); }
.tc-cinematic:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 22px 44px rgba(0,0,0,0.6); }
.tc-cinematic::after { content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 1px 0 rgba(255,255,255,0.12); }
.tc-cinematic .tc-smoke { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 46% 38% at 60% 34%, rgba(255,255,255,0.15), transparent 72%), /* soft neutral backlight: lifts the player off the background where the photo fades */
    radial-gradient(ellipse 70% 40% at 20% 85%, rgba(255,255,255,0.1), transparent 70%), radial-gradient(ellipse 60% 50% at 50% 12%, rgba(255,255,255,0.08), transparent 70%), linear-gradient(180deg, #121214, #050506); }
/* the close-up layer: the same photo, desaturated, magnified on its focus point */
.tc-cinematic .tc-ghost { position: absolute; left: -6%; top: 0; width: 70%; height: 78%; z-index: 1; opacity: 0.45; background-repeat: no-repeat; background-size: auto 260%;
  filter: grayscale(1) contrast(1.35) brightness(0.8);
  -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 92%), linear-gradient(to top, transparent 0%, #000 35%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 30%, transparent 92%), linear-gradient(to top, transparent 0%, #000 35%); mask-composite: intersect; }
/* the number sits BEHIND the main photo (upper left), so it never covers a face */
.tc-cinematic .tc-number { position: absolute; left: 3%; top: 3%; z-index: 1; font-family: 'Anton', sans-serif; font-size: 44cqw; line-height: 0.82; pointer-events: none;
  color: transparent; background: linear-gradient(180deg, #f2f2f4 0%, #9a9aa0 55%, #3a3a3f 100%); -webkit-background-clip: text; background-clip: text; opacity: 0.5; }
.tc-cinematic .tc-photo { left: 16%; right: 0; top: 0; bottom: 20%; z-index: 2;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%), linear-gradient(to top, transparent 0%, #000 30%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 28%), linear-gradient(to top, transparent 0%, #000 30%); mask-composite: intersect; }
.tc-cinematic .tc-photo img { filter: saturate(0.9) contrast(1.06); }
.tc-cinematic .tc-shade { position: absolute; inset: 0; z-index: 4; background: linear-gradient(180deg, transparent 46%, rgba(0,0,0,0.72) 70%, rgba(0,0,0,0.92) 86%, #050506 100%), radial-gradient(ellipse 95% 80% at 58% 34%, transparent 62%, rgba(0,0,0,0.32) 100%); }
.tc-cinematic .tc-grain { z-index: 5; opacity: 0.2; }
.tc-cinematic .tc-bottom { position: absolute; left: 7%; right: 7%; bottom: 6%; z-index: 6; }
.tc-cinematic .tc-first { font-size: max(13px, 10.5cqw); line-height: 1; color: var(--accent-on-dark-text, var(--red)); text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
.tc-cinematic.tpl-accent-script .tc-first, .tc-cinematic.tpl-accent-serif .tc-first { transform: rotate(-5deg); transform-origin: left bottom; margin: 0 0 -2.2cqw 1.6cqw; }
.tc-cinematic.tpl-accent-caps .tc-first, .tc-cinematic.tpl-accent-display .tc-first { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: max(10px, 5.2cqw); margin-bottom: 1.2cqw; }
.tc-cinematic .tc-last { font-size: 16.5cqw; color: transparent; background: linear-gradient(180deg, #ffffff 0%, #ececef 40%, #a2a2a8 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.9)); }
.tc-cinematic .tpl-len-m .tc-last { font-size: 14cqw; }
.tc-cinematic .tpl-len-l .tc-last { font-size: 11.6cqw; }
.tc-cinematic .tpl-len-xl .tc-last { font-size: 9.6cqw; }
/* accent rule that continues as a fading hairline - a finished edge under the name */
.tc-cinematic .tc-rule { display: block; position: relative; z-index: 6; height: 2px; width: 100%; margin: 2.8cqw 0 2.2cqw;
  background: linear-gradient(90deg, var(--accent-on-dark, var(--red)) 0 30%, transparent 30%); }
.tc-cinematic .tc-rule::after { content: ''; position: absolute; left: calc(30% + 4px); right: 6%; top: 0.5px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.28), transparent); }
.tc-cinematic .tc-meta { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.16em; font-size: max(9.5px, 3.5cqw); line-height: 1.45; color: rgba(255,255,255,0.9); }
.tc-cinematic.tc-no-photo .tc-smoke { background: radial-gradient(ellipse 55% 45% at 50% 30%, rgba(255,255,255,0.16), transparent 70%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.35), transparent 70%), linear-gradient(180deg, #141416, #050506); }
.tc-cinematic.tc-no-photo .tc-number { left: 50%; transform: translateX(-50%); top: 9%; font-size: 64cqw; opacity: 0.6; }

/* ---------- 3. MODERN COLLEGE RECRUITING (key: profile) - light editorial ----------
   A college media-guide card: large natural photo, then a light information
   panel. Team colour is used sparingly - a slanted jersey-number tag riding
   the photo seam, a short lead-in rule before the first name and the seam
   line itself. Recruiting stats sit in a tinted tray from the player's real
   data. Narrow cards (two per row on phones) drop the tray so everything
   stays readable. */
.tc-profile { display: flex; flex-direction: column; aspect-ratio: 3 / 4.25; border-radius: 10px; background: #fff; color: #141414; border: 1px solid #e2ded8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 10px 26px rgba(0,0,0,0.13); }
.tc-profile:hover, .tc-profile:focus-visible { color: #141414; box-shadow: 0 0 0 2px var(--accent-on-light, var(--red)), 0 16px 34px rgba(0,0,0,0.18); }
/* photos line up across a row (59%); only an unusually tall panel (long name + stats) shrinks the photo a little.
   Players with few details get their name block centred in the panel rather than a gap below it. */
.tc-profile .tc-pmedia { position: relative; flex: 0 1 59%; min-height: 50%; overflow: hidden; background: #ebe8e3; }
.tc-profile .tc-pmedia .tc-photo { inset: 0; }
/* depth without covering the player: a faint shadow only along the bottom edge of the photo, then the team seam */
.tc-profile .tc-pmedia::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.16)); }
.tc-profile .tc-pmedia::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--accent-on-light, var(--red)) 0 58%, var(--accent-deep, var(--black)) 58% 100%); }
.tc-profile .tc-pnp { position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.06) 0 1.5px, transparent 1.5px 10px),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.9), transparent 70%), linear-gradient(160deg, rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.16), rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.05)); }
.tc-profile .tc-pnp-num { font-family: 'Anton', sans-serif; font-size: 44cqw; line-height: 1; color: transparent; -webkit-text-stroke: 0.6cqw rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.55); }
.tc-profile .tc-pnp-initials { font-size: 34cqw; }
.tc-profile .tc-pnp img { position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%); width: 13cqw; height: 13cqw; object-fit: contain; border-radius: 6px; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,0.18); }
/* no photo: the large outlined number already identifies the player, so the tag is not repeated */
.tc-profile.tc-no-photo .tc-pnum { display: none; }
.tc-profile.tc-no-photo .tc-kicker { padding-right: 0; }
.tc-profile .tc-pinfo { position: relative; flex: 1 0 auto; z-index: 4; display: flex; flex-direction: column; justify-content: center; padding: 4.4cqw 6.5cqw 5cqw;
  background: linear-gradient(180deg, #fff 0%, #fbfaf8 100%); }
/* jersey-number tag: solid deep team colour (white text always >= 9:1), slanted, riding the photo seam at the right -
   below where faces are framed, so the photo stays unobstructed */
.tc-profile .tc-pnum { position: absolute; right: 5.5cqw; top: 0; transform: translateY(-58%); padding: 1.3cqw 3.6cqw 1.1cqw 4.2cqw; font-family: 'Anton', sans-serif; font-size: 8.4cqw; line-height: 1; color: #fff;
  background: var(--accent-deep, var(--black)); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); box-shadow: inset 0 -0.7cqw 0 var(--accent-on-dark, var(--red)); }
.tc-profile .tc-kicker { display: block; padding-right: 22cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: max(9px, 3.1cqw); color: #7a756f; }
.tc-profile .tc-kicker .tc-class-full, .tc-profile .tc-kicker .tc-class-short { color: var(--accent-on-light, var(--red)); }
.tc-profile .tc-kicker .tc-sep { color: #c4bfb8; margin: 0 0.35em; }
.tc-profile .tc-name { margin-top: 2cqw; }
/* first name: team-colour lead-in rule + spaced small caps; surname: big condensed display type */
.tc-profile .tc-first { display: flex; align-items: center; gap: 2cqw; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: max(10px, 4.4cqw); color: #3d3935; line-height: 1.1; transform: none; margin: 0 0 1.4cqw; }
.tc-profile .tc-first::before { content: ''; flex: 0 0 auto; width: 5cqw; height: 0.7cqw; min-height: 2px; background: var(--accent-on-light, var(--red)); }
.tc-profile .tc-last { font-size: 13.6cqw; line-height: 0.9; color: #0f0f0f; letter-spacing: 0.012em; }
.tc-profile .tpl-len-m .tc-last { font-size: 11.6cqw; }
.tc-profile .tpl-len-l .tc-last { font-size: 9.4cqw; }
.tc-profile .tpl-len-xl .tc-last { font-size: 7.6cqw; }
.tc-profile .tc-meta { margin-top: 1.8cqw; font-family: 'Inter', sans-serif; font-weight: 600; font-size: max(10px, 3.6cqw); line-height: 1.3; color: #5b5650; }
/* recruiting stats: a lightly team-tinted tray, centred columns, label over a clear value */
.tc-profile .tc-stats { margin-top: 3.4cqw; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 2.2cqw 0 2cqw; border-radius: 6px;
  background: rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.05); box-shadow: inset 0 0 0 1px rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.12); }
.tc-profile .tc-stat { min-width: 0; padding: 0 1.6cqw; text-align: center; border-left: 1px solid rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.14); }
.tc-profile .tc-stat:first-child { border-left: 0; }
.tc-profile .tc-stat small { display: block; font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: max(8.5px, 2.8cqw); color: #6f6a64; }
.tc-profile .tc-stat b { display: block; margin-top: 0.4cqw; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: max(12px, 5.6cqw); line-height: 1.1; color: #121212; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 190px) {
  .tc-profile .tc-stats { display: none; }
  .tc-profile .tc-pinfo { padding: 4.6cqw 6cqw 5cqw; }
  .tc-profile .tc-kicker { padding-right: 24cqw; }
  .tc-profile .tc-pnum { font-size: 10cqw; }
  /* narrow cards show just the class year when there is one (team name is shown when it is the only detail) */
  .tc-profile .tc-kicker .tc-sep, .tc-profile .tc-kicker .tc-sep ~ .tc-kteam { display: none; }
}

/* ---------- 4. BOLD NUMBER POSTER - premium team-color poster ----------
   Team color as DEEP, rich tones (--accent-deep: e.g. crimson for a bright
   red, navy panels for a gold team) in solid panels, a thin accent edge
   and the number's 3D edge - never a translucent wash over the photo, so
   faces and uniforms stay natural and red never turns pink. Shadows are
   black, not colored glows. */
.tc-poster { aspect-ratio: 3 / 4; border-radius: 6px; background: var(--surface-dark, var(--black));
  box-shadow: 0 0 0 1px rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.95), 0 0 0 2px rgba(0,0,0,0.6), 0 16px 32px rgba(0,0,0,0.5); }
.tc-poster:hover { box-shadow: 0 0 0 2px var(--accent-on-dark, var(--red)), 0 20px 38px rgba(0,0,0,0.55); }
.tc-poster::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.tc-poster .tc-photo { inset: 0 0 18% 0; z-index: 1; }
.tc-poster .tc-photo img { filter: contrast(1.05); }
.tc-poster .tc-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 88% 10%, rgba(0,0,0,0.45), transparent 70%), radial-gradient(ellipse 120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,0.45) 100%); }
/* the number: solid, bright, with a deep team-color 3D edge */
.tc-poster .tc-number { position: absolute; right: 5%; top: 2%; z-index: 3; font-family: 'Anton', sans-serif; font-size: 44cqw; line-height: 0.82; pointer-events: none;
  color: #f4f4f5; -webkit-text-stroke: 0.25cqw rgba(0,0,0,0.35);
  text-shadow: 0.35cqw 0.35cqw 0 var(--accent-deep, var(--red-dark)), 0.7cqw 0.7cqw 0 var(--accent-deep, var(--red-dark)), 1.05cqw 1.05cqw 0 var(--accent-deep, var(--red-dark)), 1.4cqw 1.4cqw 0 var(--accent-deep, var(--red-dark)), 1.75cqw 1.75cqw 0 rgba(0,0,0,0.55), 2.5cqw 3.5cqw 5cqw rgba(0,0,0,0.6);
  opacity: 0.94; }
.tc-poster .tc-shade { position: absolute; inset: 0; z-index: 4; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.35) 58%, rgba(0,0,0,0.75) 78%); }
/* angled deep team-color name panel + thin bright edge */
.tc-poster .tc-band { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 5;
  background: linear-gradient(180deg, rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.96) 0%, var(--accent-deep, var(--red-dark)) 45%, var(--surface-dark, var(--black)) 100%);
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); }
.tc-poster .tc-band-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 5; background: var(--accent-on-dark, var(--red));
  clip-path: polygon(0 20%, 100% 0, 100% 2.4%, 0 22.4%); }
.tc-poster .tc-grain { z-index: 5; opacity: 0.12; }
.tc-poster .tc-bottom { position: absolute; left: 6%; right: 6%; bottom: 5%; z-index: 6; }
.tc-poster .tc-first { font-size: max(13px, 11cqw); line-height: 1; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.75); }
.tc-poster.tpl-accent-script .tc-first, .tc-poster.tpl-accent-serif .tc-first { transform: rotate(-5deg); transform-origin: left bottom; margin: 0 0 -2.4cqw 1.6cqw; }
.tc-poster.tpl-accent-caps .tc-first, .tc-poster.tpl-accent-display .tc-first { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: max(10px, 5.4cqw); margin-bottom: 1cqw; }
/* surname: solid white with a deep team-color edge - readable on any photo or palette */
/* long first names (e.g. hyphenated) step down so they stay on one line */
.tc-poster .tc-first-long .tc-first, .tc-cinematic .tc-first-long .tc-first { font-size: max(11px, 7.2cqw); white-space: nowrap; }
.tc-poster .tc-last { font-size: 17cqw; color: #fff; text-shadow: 0.45cqw 0.45cqw 0 var(--accent-deep, var(--red-dark)), 0 0.8cqw 2.4cqw rgba(0,0,0,0.75); }
.tc-poster .tpl-len-m .tc-last { font-size: 14.5cqw; }
.tc-poster .tpl-len-l .tc-last { font-size: 12cqw; }
.tc-poster .tpl-len-xl .tc-last { font-size: 9.6cqw; }
.tc-poster .tc-meta { margin-top: 2.4cqw; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: max(9.5px, 3.7cqw); line-height: 1.45; color: rgba(255,255,255,0.92); }
.tc-poster .tc-meta .tc-sep { color: var(--accent-on-dark, var(--red)); opacity: 1; }
/* no photo: an intentional deep team-color poster, not an empty card */
.tc-poster .tc-np { position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(120deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 15px),
    radial-gradient(ellipse 80% 60% at 75% 18%, rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.95), transparent 70%),
    linear-gradient(165deg, var(--accent-deep, var(--red-dark)) 0%, var(--surface-dark, var(--black)) 78%); }
.tc-poster .tc-np .tc-spatter { position: absolute; inset: 0; background: rgba(255,255,255,0.07);
  -webkit-mask: url('textures/spatter.png') left top / cover no-repeat; mask: url('textures/spatter.png') left top / cover no-repeat; }
.tc-poster.tc-no-photo .tc-logo-wm { inset: 12% 18% 44%; opacity: 0.1; }
.tc-poster.tc-no-photo .tc-number { right: 50%; transform: translateX(50%); top: 9%; font-size: 64cqw; opacity: 0.97; }

/* ---------- Cinematic: multi-photo composition (supporting panels) ---------- */
.cin-hero:not(.cin-sup-0) .cin-photo {
  right: 22%; width: 54%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 80%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 80%, transparent 100%);
}
.cin-hero:not(.cin-sup-0) .cin-number { right: 50%; }
.cin-panel { position: absolute; right: 3%; top: 8%; bottom: 13%; width: 21%; z-index: 6; display: flex; flex-direction: column; gap: 14px; filter: drop-shadow(0 16px 28px rgba(0,0,0,0.6)); }
.cin-plate {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)); border-top: 2px solid var(--red);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); backdrop-filter: blur(6px);
}
.cin-plate-num { font-family: 'Anton', sans-serif; font-size: 56px; line-height: 0.9; color: var(--tpl-accent); text-shadow: 0 0 22px rgba(var(--red-rgb), 0.65); }
.cin-plate-text b { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; line-height: 1.15; color: #fff; }
.cin-plate-text small { display: block; margin-top: 5px; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; color: rgba(255,255,255,0.75); }
.cin-support { position: relative; flex: 1 1 0; min-height: 0; padding: 2px; background: linear-gradient(160deg, var(--red), rgba(255,255,255,0.35) 50%, rgba(var(--red-rgb), 0.6)); clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); }
.cin-support .tpl-photo { position: absolute; inset: 2px; clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); }
.cin-support::after { content: ''; position: absolute; inset: 2px; z-index: 2; clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); background: linear-gradient(180deg, transparent 45%, rgba(var(--red-rgb), 0.45)); mix-blend-mode: multiply; pointer-events: none; }
.cin-sup-1 .cin-support { flex: 0 1 55%; }
@media (max-width: 760px) {
  .cin-hero:not(.cin-sup-0) { aspect-ratio: 3 / 5.3; }
  .cin-hero:not(.cin-sup-0) .cin-photo { right: 0; width: 100%; height: 66%; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 34%); mask-image: linear-gradient(to top, transparent 0%, #000 34%); }
  .cin-hero:not(.cin-sup-0) .cin-number { right: -4%; }
  .cin-hero:not(.cin-sup-0) .cin-copy { bottom: 25%; }
  .cin-panel { left: 4%; right: 4%; top: auto; bottom: 3%; width: auto; height: 19%; flex-direction: row; gap: 8px; }
  .cin-plate { display: none; }
  .cin-sup-1 .cin-support { flex: 0 1 60%; }
}

/* ---------- Elite: multi-photo mosaic on a team-color panel ---------- */
.el-hero { overflow: hidden; }
.el-hero-panel {
  position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 44%;
  background: linear-gradient(150deg, var(--red) 0%, rgba(var(--red-rgb), 0.55) 55%, rgba(var(--red-rgb), 0.15) 100%);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); opacity: 0.9;
}
.el-hero-panel::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,0.05) 22px 24px); }
.el-hero-watermark { position: absolute; z-index: 0; right: -4%; top: 50%; width: 38%; aspect-ratio: 1; transform: translateY(-50%); background: center / contain no-repeat; opacity: 0.06; filter: grayscale(1); }
.tpl-v-light .el-hero-watermark { opacity: 0.08; }
.el-hero-inner { position: relative; z-index: 1; }
.el-media { position: relative; min-width: 0; }
.el-hero:not(.el-sup-0) .el-hero-inner { grid-template-columns: minmax(380px, 600px) minmax(0, 1fr); }
.el-hero:not(.el-sup-0) .el-media { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 12px; }
.el-hero:not(.el-sup-0) .el-photo-card { grid-row: 1 / -1; }
.el-sup-1 .el-support-1 { grid-row: 1 / -1; align-self: end; height: 72%; }
.el-support { position: relative; overflow: hidden; border-radius: 14px; background: #111; box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 0 1px var(--el-line); }
.el-support::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); z-index: 2; }
.el-support .tpl-photo { position: absolute; inset: 0; }
@media (max-width: 860px) {
  .el-hero-panel { width: 100%; height: 62%; bottom: auto; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
  .el-hero-watermark { display: none; }
  .el-hero:not(.el-sup-0) .el-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .el-hero:not(.el-sup-0) .el-media { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 8px; padding: 0 0 4px; }
  .el-hero:not(.el-sup-0) .el-photo-card { grid-column: 1 / -1; grid-row: auto; }
  .el-support, .el-sup-1 .el-support-1 { grid-row: auto; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; margin: 0 8px; }
  .el-sup-1 .el-support-1 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
.cin-hero:not(.cin-sup-0) .cin-mark { right: auto; left: 4%; }
.cin-hero:not(.cin-sup-0) .cin-number { right: 57%; top: 0; }
.im-strip { left: 4%; }
@media (max-width: 760px) {
  .cin-hero:not(.cin-sup-0) .cin-number { right: -4%; top: 1%; }
}
@media (max-width: 960px) { .im-strip { left: auto; } }

/* =====================================================================
   Downstream design language (whole page, not just the hero)
   ===================================================================== */
/* ---- Cinematic ---- */
.cin-kicker { display: block; margin-bottom: 6px; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.32em; font-size: 12px; color: var(--tpl-accent-text); }
.cin-about-wrap { position: relative; overflow: hidden; padding-top: 60px; padding-bottom: 60px; }
.cin-bignum { position: absolute; right: -2%; top: -6%; z-index: 0; font-family: 'Anton', sans-serif; font-size: 460px; line-height: 0.8; color: transparent; -webkit-text-stroke: 2px rgba(var(--red-rgb), 0.16); pointer-events: none; }
.cin-about-logo { position: absolute; left: -6%; bottom: -12%; width: 360px; height: 360px; background: center / contain no-repeat; opacity: 0.05; filter: grayscale(1); pointer-events: none; }
.cin-about { position: relative; z-index: 1; }
.cin-about-text { padding-left: 22px; border-left: 3px solid var(--red); }
.cin-facts { box-shadow: 0 24px 50px rgba(0,0,0,0.45); }
.cin-facts div { background: linear-gradient(160deg, #18181b, #0e0e10); }
.cin-band { position: relative; overflow: hidden; margin: 30px 0; padding: 70px 0 64px; isolation: isolate;
  background: linear-gradient(118deg, var(--red) 0%, rgba(var(--red-rgb), 0.78) 38%, var(--black) 82%);
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }
.cin-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(118deg, transparent 0 46px, rgba(255,255,255,0.05) 46px 48px), radial-gradient(ellipse 60% 80% at 85% 50%, rgba(0,0,0,0.45), transparent 70%); }
.cin-band-num { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); z-index: -1; font-family: 'Anton', sans-serif; font-size: 380px; line-height: 0.8; color: rgba(0,0,0,0.22); pointer-events: none; }
.cin-band-head { margin-bottom: 18px; }
.cin-band { color: var(--tpl-ink); }
.cin-band .cin-kicker, .cin-band .cin-h { color: var(--tpl-ink); }
.cin-band .cin-metric { color: #fff; }
.cin-h-band::after { background: linear-gradient(90deg, rgba(var(--tpl-ink-rgb), 0.8), transparent); }
.cin-band .cin-metric { background: rgba(10,10,10,0.55); border: 1px solid rgba(255,255,255,0.18); border-bottom: 3px solid #fff; backdrop-filter: blur(4px); }
.cin-band .cin-metric .tpl-icon, .cin-band .cin-metric .tpl-stat-label { color: rgba(255,255,255,0.85); }
.cin-band .tpl-stat-value small { color: #fff; }
.cin-video-stage { position: relative; background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(var(--red-rgb), 0.28), transparent 70%); }
.cin-video-stage .tpl-video.is-lead .tpl-video-frame { box-shadow: 0 0 0 2px var(--red), 0 0 50px rgba(var(--red-rgb), 0.55), 0 30px 60px rgba(0,0,0,0.6); }
.cin-gallery-wrap { position: relative; background: linear-gradient(180deg, transparent, rgba(var(--red-rgb), 0.1) 40%, transparent); clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 100%); padding-top: 70px; }
.cin-gallery .tpl-gallery-item { border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 18px 36px rgba(0,0,0,0.55); }
.cin-contact-band { position: relative; overflow: hidden; margin-top: 40px; background: linear-gradient(120deg, rgba(var(--red-rgb), 0.92), var(--black) 70%); clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); padding: 40px 0 20px; }
.cin-contact-logo { position: absolute; right: 4%; top: 50%; width: 340px; height: 340px; transform: translateY(-50%); background: center / contain no-repeat; opacity: 0.12; filter: grayscale(1) brightness(2); pointer-events: none; }
.cin-contact-band .cin-kicker, .cin-contact-band .cin-h { color: var(--tpl-ink); }
.cin-contact-band .cin-contact-link { background: rgba(10,10,10,0.72); border-color: rgba(255,255,255,0.2); }
.cin-contact-band .cin-contact-link .tpl-icon { color: #fff; }
.cin-contact-band .cin-qr { color: rgba(255,255,255,0.85); }
.cin-contact-band .cin-muted { color: rgba(255,255,255,0.85); }
@media (max-width: 760px) {
  .cin-bignum { font-size: 260px; top: 0; }
  .cin-band { padding: 54px 0 48px; clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%); }
  .cin-band-num { font-size: 240px; }
  .cin-band .cin-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cin-band .cin-metric { padding: 14px; grid-template-columns: 1fr; }
  .cin-band .cin-metric .tpl-icon { grid-row: auto; width: 24px; height: 24px; margin-bottom: 6px; }
  .cin-band .cin-metric .tpl-stat-value { font-size: 30px; }
  .cin-contact-logo { width: 220px; height: 220px; right: -10%; }
}

/* ---- Elite ---- */
.el-h { position: relative; padding-left: 14px; }
.el-h::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--red); }
.el-card { position: relative; overflow: hidden; border-top: 3px solid var(--red); }
.el-band {
  position: relative; overflow: hidden; border-radius: 16px; padding: 26px 28px 28px; isolation: isolate; color: #fff;
  background: linear-gradient(120deg, var(--red) 0%, rgba(var(--red-rgb), 0.82) 45%, var(--black) 100%);
  box-shadow: 0 24px 50px rgba(var(--red-rgb), 0.18);
}
.el-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(120deg, transparent 0 30px, rgba(255,255,255,0.05) 30px 32px); }
.el-band-num { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: -1; font-family: 'Anton', sans-serif; font-size: 260px; line-height: 0.8; color: rgba(0,0,0,0.2); pointer-events: none; }
.el-band .el-h { color: var(--tpl-ink); }
.el-band .el-h::before { background: var(--tpl-ink); }
.el-band .el-h .tpl-icon { color: var(--tpl-ink); }
.el-band .el-metric { color: #fff; background: rgba(0,0,0,0.38); border-color: rgba(255,255,255,0.22); backdrop-filter: blur(4px); }
.el-band .el-metric .tpl-icon, .el-band .el-metric .tpl-stat-label { color: rgba(255,255,255,0.9); }
.el-band .tpl-stat-value small { color: #fff; }
.el-video-panel { padding: 24px; border-radius: 16px; background: radial-gradient(ellipse 60% 80% at 20% 0%, rgba(var(--red-rgb), 0.22), transparent 60%), var(--el-card); border: 1px solid var(--el-line); }
.el-video-panel .tpl-video.is-lead .tpl-video-frame { box-shadow: 0 0 0 2px var(--red), 0 24px 50px rgba(0,0,0,0.35); }
.el-gallery { grid-auto-flow: dense; }
.el-gallery:not(.tpl-count-1):not(.tpl-count-2) .tpl-gallery-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.el-gallery .tpl-gallery-item { box-shadow: 0 12px 28px rgba(0,0,0,0.25); }
.el-contact-card { background: linear-gradient(130deg, rgba(var(--red-rgb), 0.95), var(--black) 85%); color: #fff; border-top-color: #fff; }
.el-contact-card .el-h { color: var(--tpl-ink); }
.el-contact-card .el-h::before { background: var(--tpl-ink); }
.el-contact-card .el-h .tpl-icon { color: var(--tpl-ink); }
.el-contact-card .el-contact-link { color: #fff; background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); }
.el-contact-card .el-contact-link small, .el-contact-card .el-muted { color: rgba(255,255,255,0.8); }
.el-contact-card .el-contact-link .tpl-icon { color: #fff; }
.el-contact-logo { position: absolute; right: -40px; bottom: -60px; width: 260px; height: 260px; background: center / contain no-repeat; opacity: 0.12; filter: grayscale(1) brightness(2); pointer-events: none; }
.el-contact-card > *:not(.el-contact-logo) { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .el-band { padding: 20px 16px; }
  .el-band-num { font-size: 180px; }
  .el-gallery:not(.tpl-count-1):not(.tpl-count-2) .tpl-gallery-item:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
  .el-video-panel { padding: 16px; }
}

/* ---- Impact ---- */
.im-contact-wrap { background: linear-gradient(120deg, rgba(var(--red-rgb), 0.35), #050506 65%); }

/* =====================================================================
   STAGE 2 REFINEMENT (2026-10-08) - recruiting-first heroes, phone
   layouts, shared recruiting snapshot + phone quick-contact bar,
   contrast safety for any team palette. Each template keeps its own
   identity: Cinematic = layered photography, Elite = efficient scout
   sheet, Impact = poster composition.
   ===================================================================== */
.tpl-elite.tpl-v-light { --tpl-accent: var(--accent-on-light, var(--red)); --tpl-accent-text: var(--accent-on-light, var(--red)); }
.tc-profile { --tpl-accent: var(--accent-on-light, var(--red)); }
.cin-contact-band .cin-muted, .el-contact-card .el-muted { color: rgba(var(--tpl-ink-rgb), 0.9); }

/* ---- shared: recruiting snapshot (tpl_snapshot) ---- */
.tpl-snap { margin: 0; display: flex; flex-wrap: wrap; }
.tpl-snap-item { min-width: 0; }
.tpl-snap dt { font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; }
.tpl-snap dd { margin: 3px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; }

/* ---- shared: phone quick-contact bar (tpl_action_bar) ---- */
.tpl-actionbar { display: none; }
@media (max-width: 860px) {
  .tpl-has-actionbar .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .tpl-actionbar {
    display: block; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 60; pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0s;
  }
  .tpl-actionbar > * { pointer-events: auto; }
  .tpl-actionbar-bar {
    display: flex; align-items: stretch; gap: 6px; padding: 6px; border-radius: 16px;
    background: rgba(14,14,16,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .tpl-actionbar-bar a {
    flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 8px; border-radius: 11px;
    background: rgba(255,255,255,0.08); color: #fff; text-decoration: none;
    font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px;
  }
  .tpl-actionbar-bar a:first-child { background: var(--red); color: var(--tpl-ink); }
  .tpl-actionbar-bar .tpl-icon { width: 20px; height: 20px; }
  .tpl-actionbar-min { flex: 0 0 40px; border: 0; padding: 0; border-radius: 11px; background: transparent; color: rgba(255,255,255,0.75); display: grid; place-items: center; cursor: pointer; }
  .tpl-actionbar-min .tpl-icon { width: 22px; height: 22px; }
  .tpl-actionbar-tab {
    display: none; position: absolute; right: 0; bottom: 0; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.18); background: var(--red); color: var(--tpl-ink); box-shadow: 0 8px 22px rgba(0,0,0,0.5);
    font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; cursor: pointer;
  }
  .tpl-actionbar-tab .tpl-icon { width: 18px; height: 18px; }
  .tpl-actionbar-collapsed .tpl-actionbar-bar { display: none; }
  .tpl-actionbar-collapsed .tpl-actionbar-tab { display: inline-flex; }
  /* steps aside while the full contact section / footer is on screen */
  .tpl-actionbar-away .tpl-actionbar { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s; }
  /* the bar carries contact on phones - the hero keeps the space for photography */
  .tpl-has-actionbar .cin-ctas, .tpl-has-actionbar .el-ctas { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tpl-actionbar { transition: none; } }

/* ---- Cinematic Hero ---- */
.cin-hero { height: clamp(600px, calc(100vh - 150px), 860px); }
.cin-name { font-size: clamp(64px, 9.4vw, 150px); }
.cin-name.tpl-len-l { font-size: clamp(54px, 7.6vw, 122px); }
.cin-name.tpl-len-xl { font-size: clamp(46px, 6.2vw, 100px); }
.cin-copy { isolation: isolate; }
.cin-copy-scrim { position: absolute; z-index: -1; left: -12%; right: 22%; top: -24%; bottom: -40%; pointer-events: none; background: radial-gradient(ellipse 58% 62% at 30% 62%, rgba(var(--black-rgb), 0.62), transparent 72%); }
.cin-rule { margin-top: 14px; }
.cin-snap { margin-top: 16px; }
.cin-snap .tpl-snap-item { padding: 2px 22px; border-left: 1px solid rgba(255,255,255,0.24); }
.cin-snap .tpl-snap-item:first-child { padding-left: 0; border-left: 0; }
.cin-snap dt { color: var(--tpl-accent-text); text-shadow: 0 1px 8px rgba(0,0,0,0.9); }
.cin-snap dd { color: #fff; font-size: clamp(16px, 1.35vw, 21px); text-shadow: 0 2px 10px rgba(0,0,0,0.85); }
.cin-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cin-ctas .tpl-btn-outline, .cin-ctas .tpl-btn-ghost { background: rgba(10,10,10,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; }
.cin-statbar { border-bottom-color: var(--tpl-accent); box-shadow: 0 2px 22px rgba(var(--tpl-glow-rgb), 0.35); }
.cin-rule { background: linear-gradient(90deg, var(--tpl-accent), transparent); box-shadow: 0 0 14px rgba(var(--tpl-glow-rgb), 0.9); }
@media (min-width: 761px) and (max-width: 1100px) {
  .cin-plate { gap: 8px; padding: 10px 14px 10px 16px; }
  .cin-plate-num { font-size: 40px; }
  .cin-plate-text b { font-size: 13px; }
  .cin-plate-text small { display: none; } /* class is in the snapshot below the name */
}
@media (max-width: 760px) {
  /* Phone: photo zone, then supporting photos riding the photo's fade,
     then name + snapshot - stats start inside the first screen. */
  .cin-hero, .cin-hero:not(.cin-sup-0) { --cin-ph: min(98vw, 48vh); height: auto; aspect-ratio: auto; min-height: 0; max-height: none; padding-bottom: 18px; }
  .cin-photo, .cin-hero:not(.cin-sup-0) .cin-photo { top: 0; right: 0; width: 100%; height: var(--cin-ph); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 32%); mask-image: linear-gradient(to top, transparent 0%, #000 32%); }
  .cin-number, .cin-hero:not(.cin-sup-0) .cin-number { font-size: min(72vw, calc(var(--cin-ph) * 0.92)); top: 4px; right: -4%; }
  .tpl-no-photo .cin-number { top: 8px; font-size: min(90vw, var(--cin-ph)); }
  .cin-nophoto { top: calc(var(--cin-ph) * 0.16); height: calc(var(--cin-ph) * 0.6); }
  .cin-panel { top: calc(var(--cin-ph) - 62px); bottom: auto; left: 16px; right: 16px; width: auto; height: 84px; justify-content: flex-end; }
  .cin-sup-1 .cin-support { flex: 0 1 56%; }
  .cin-copy, .cin-hero:not(.cin-sup-0) .cin-copy { position: relative; left: auto; right: auto; bottom: auto; padding-top: calc(var(--cin-ph) - 84px); }
  .cin-hero:not(.cin-sup-0) .cin-copy { padding-top: calc(var(--cin-ph) + 30px); }
  .cin-copy-scrim { display: none; }
  .cin-numtag { display: none; } /* the poster number already owns the photo */
  .cin-rule { width: 64%; margin-top: 10px; }
  .cin-snap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
  .cin-snap .tpl-snap-item, .cin-snap .tpl-snap-item:first-child { padding: 7px 10px; border: 1px solid rgba(255,255,255,0.12); border-left: 2px solid var(--tpl-accent); border-radius: 6px; background: rgba(12,12,14,0.62); }
  .cin-snap .tpl-snap-item.is-wide { grid-column: span 2; }
  .cin-snap .tpl-snap-height, .cin-snap .tpl-snap-bats_throws { display: none; } /* in About, below */
  .cin-snap dt { font-size: 10px; letter-spacing: 0.14em; }
  .cin-snap dd { font-size: 15px; }
  .cin-stat { padding: 12px 14px; }
  .cin-stat .tpl-icon { width: 24px; height: 24px; }
  .cin-stat .tpl-stat-value { font-size: 27px; }
}

/* ---- Elite Recruiting ---- */
.el-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.el-kicker > span:last-child { color: var(--el-text); opacity: 0.85; }
.el-kicker-tag { padding: 5px 18px 5px 10px; background: var(--red); color: var(--tpl-ink); font-size: 11px; letter-spacing: 0.16em; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); }
.el-namerow { display: flex; align-items: flex-end; gap: 16px; margin-top: 12px; min-width: 0; }
.el-name { margin-top: 0; min-width: 0; }
.el-numslab {
  flex: 0 0 auto; margin-bottom: 0.12em; padding: 6px 22px 4px 18px; font-family: 'Anton', sans-serif; font-size: clamp(30px, 3.2vw, 46px); line-height: 1;
  background: var(--red); color: var(--tpl-ink); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.el-headline { display: grid; grid-auto-flow: column; width: fit-content; max-width: 100%; margin: 22px 0 0; border: 1px solid var(--el-line); border-top: 3px solid var(--red); border-radius: 12px; background: var(--el-card); overflow: hidden; }
.el-headline-3 { grid-template-columns: auto minmax(0, 320px) auto; }
.el-hl { min-width: 0; padding: 12px 22px; border-left: 1px solid var(--el-line); }
.el-hl:first-child { border-left: 0; }
.el-hl dt { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: var(--el-muted); }
.el-hl dd { margin: 4px 0 0; font-family: 'Anton', sans-serif; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.05; color: var(--el-text); }
.el-hl-pos dd { padding-top: 3px; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.2; overflow-wrap: anywhere; }
.el-keystats { margin-top: 14px; }
.el-quick { margin-top: 14px; gap: 8px; }
.el-quick li { padding: 7px 12px; }
.el-ctas { margin-top: 20px; }
.el-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--red), transparent 75%); }
.el-nav a:hover, .el-nav a:focus-visible { border-bottom-color: var(--tpl-accent); }
@media (max-width: 860px) {
  /* Phone: full-bleed photo with the name riding its bottom edge, then
     Class / Position / GPA and the key metrics - supporting photos follow. */
  .el-hero { padding-bottom: 26px; }
  .el-hero-panel, .el-id > .el-bgnum { display: none; }
  .el-hero-inner, .el-hero:not(.el-sup-0) .el-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; row-gap: 0; }
  .el-media, .el-hero:not(.el-sup-0) .el-media { display: contents; }
  .el-photo-card, .el-hero:not(.el-sup-0) .el-photo-card { grid-column: 1 / -1; grid-row: auto; order: 1; aspect-ratio: 4 / 3.75; max-height: 60vh; width: 100%; }
  .el-photo-card::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, var(--el-bg) 92%); }
  .el-photo-card::after { display: none; }
  .el-logobadge { width: 46px; height: 46px; }
  .el-id { grid-column: 1 / -1; order: 2; margin-top: -92px; z-index: 3; }
  .el-name { font-size: 12.5vw; }
  .el-name.tpl-len-m { font-size: 11vw; }
  .el-name.tpl-len-l { font-size: 9vw; }
  .el-name.tpl-len-xl { font-size: 8vw; }
  .el-namerow { flex-wrap: wrap; gap: 6px 14px; }
  .el-name .tpl-last { overflow-wrap: break-word; }
  .el-numslab { font-size: 28px; padding: 5px 16px 3px 13px; }
  .el-headline, .el-headline-3 { width: 100%; margin-top: 16px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .el-headline-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .el-hl { padding: 10px 12px; }
  .el-hl dd { font-size: 26px; }
  .el-hl-pos dd { font-size: 15px; }
  .el-keystats { gap: 8px; margin-top: 10px; }
  .el-keystat { padding: 11px 13px; gap: 4px; }
  .el-keystat .tpl-stat-value { font-size: 27px; }
  .el-keystats.tpl-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el-keystats.tpl-stats-3 .el-keystat { padding: 10px; }
  .el-keystats.tpl-stats-3 .tpl-stat-value { font-size: 24px; }
  .el-keystats.tpl-stats-3 .tpl-stat-label { font-size: 10px; letter-spacing: 0.06em; }
  .el-quick { flex-wrap: wrap; overflow: visible; margin: 10px 0 0; padding: 0; }
  .el-support, .el-sup-1 .el-support-1 { order: 3; grid-row: auto; height: auto; aspect-ratio: 4 / 3; margin: 18px 0 0; border-radius: 10px; }
  .el-support-1 { margin-left: 18px; }
  .el-support-2 { margin-right: 18px; }
  .el-sup-1 .el-support-1 { grid-column: 1 / -1; aspect-ratio: 16 / 9; margin: 18px 18px 0; }
}

/* ---- Impact Graphic ---- */
.im-frame { z-index: 1; box-shadow: 0 0 0 3px rgba(var(--tpl-glow-rgb), 0.95), 0 0 46px rgba(var(--tpl-glow-rgb), 0.7), inset 0 0 60px rgba(var(--red-rgb), 0.45); }
.tpl-v-angled .im-frame::before { border-color: var(--tpl-accent); }
.im-buttons a { border-color: var(--tpl-accent); box-shadow: 0 0 18px rgba(var(--tpl-glow-rgb), 0.35), inset 0 0 14px rgba(var(--tpl-glow-rgb), 0.15); }
.im-snap { margin-top: 18px; padding-top: 12px; gap: 8px 24px; border-top: 1px solid rgba(255,255,255,0.25); }
.im-snap dt { color: rgba(255,255,255,0.62); }
.im-snap dd { color: #fff; font-size: 19px; }
/* Strip photos live in the arch's own stage: they fan out from behind the
   frame toward the number, stepping down in size, in the same glow ring. */
.im-strip, .im-strip-1 { position: absolute; z-index: 0; left: 84%; right: auto; bottom: 6%; width: 96%; height: 46%; display: flex; align-items: flex-end; gap: 12px; transform: skewX(-9deg); }
.im-strip-photo { flex: 1; height: 100%; border: 0; box-shadow: 0 0 0 2px rgba(var(--tpl-glow-rgb), 0.85), 0 0 26px rgba(var(--tpl-glow-rgb), 0.5), 0 18px 34px rgba(0,0,0,0.6); }
.im-strip-p2 { height: 84%; }
.im-strip-p3 { height: 68%; }
.im-strip-photo::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(var(--red-rgb), 0.35)); }
.im-strip-1 .im-strip-photo { flex: 0 0 46%; }
.im-strip-2 .im-strip-photo { flex: 0 0 42%; }

@media (max-width: 960px) {
  /* Phone: the arch is flanked by the strip photos - one poster, not a
     separate scrolling row. */
  .im-frame { max-width: min(56vw, 400px); min-height: 0; }
  .im-reflect { height: 26px; }
  .im-number, .im-no-strip .im-number { margin-bottom: -40vw; }
  .im-strip, .im-strip-1 { left: -18px; right: -18px; top: 0; bottom: 0; width: auto; height: auto; display: block; transform: none; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
  .im-strip-photo, .im-strip-1 .im-strip-photo, .im-strip-2 .im-strip-photo { position: absolute; flex: none; width: min(25vw, 190px); transform: skewX(-7deg); scroll-snap-align: none; }
  .im-strip-photo img { transform: skewX(7deg) scale(1.22); }
  .im-strip-p1 { left: 10px; top: 36%; height: 44%; }
  .im-strip-p2 { right: 10px; left: auto; top: 46%; height: 42%; }
  .im-strip-p3 { right: 14px; left: auto; top: 6%; height: 32%; width: 21vw; }
  .im-snap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; padding-top: 0; border-top: 0; }
  .im-snap .tpl-snap-item { padding: 7px 10px; background: linear-gradient(135deg, #141416, #0b0b0c); border-left: 2px solid var(--tpl-accent); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); }
  .im-snap dt { font-size: 10px; letter-spacing: 0.14em; }
  .im-snap dd { font-size: 15px; }
  .im-plate { margin-top: 10px; }
  .im-number, .im-no-strip .im-number { opacity: 0.72; }
  .im-left { text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.9); }
  .im-left .tpl-name { text-shadow: none; } /* gradient-clipped text: a text-shadow would show through */
  .im-name .tpl-last { background: linear-gradient(180deg, #fff 0%, #f1f1f3 60%, #cfcfd4 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.95)); }
}

/* ---- Cinematic Hero: desktop proportions (2026-10-09) ----
   Desktop only (phones keep the layout above). The layered photography
   is composed inside a centered stage (max 1480px) instead of spanning a
   wide monitor edge to edge, the hero is shorter, the surname ~28%
   smaller, and the stat band lighter - so name > snapshot > buttons >
   stats read in order and the stats sit on the first screen. */
@media (min-width: 761px) {
  .cin-hero {
    --cin-s: min(100vw, 1480px);                 /* stage width */
    --cin-side: calc((100vw - var(--cin-s)) / 2); /* gutter beside the stage */
    height: clamp(500px, calc(100vh - 250px), 680px);
  }
  /* main photo: full photo height in a wider box = composed, not cropped in tight */
  .cin-photo { right: var(--cin-side); width: calc(var(--cin-s) * 0.62); }
  .cin-hero:not(.cin-sup-0) .cin-photo { right: calc(var(--cin-side) + var(--cin-s) * 0.2); width: calc(var(--cin-s) * 0.56); }
  /* ghost close-up: still a layer, less magnified */
  .cin-ghost { left: var(--cin-side); width: calc(var(--cin-s) * 0.42); opacity: 0.24; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 38%, transparent 92%); mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 38%, transparent 92%); }
  .cin-ghost img { transform: scale(1.12); }
  .cin-number { font-size: min(44vw, 600px); right: calc(var(--cin-side) + var(--cin-s) * 0.4); top: 2%; }
  .cin-hero:not(.cin-sup-0) .cin-number { right: calc(var(--cin-side) + var(--cin-s) * 0.55); top: 2%; }
  .tpl-no-photo .cin-number { right: calc(var(--cin-side) + var(--cin-s) * 0.05); top: 6%; font-size: min(36vw, 500px); }
  .cin-nophoto { right: calc(var(--cin-side) + var(--cin-s) * 0.08); width: calc(var(--cin-s) * 0.38); }
  .cin-mark, .cin-hero:not(.cin-sup-0) .cin-mark { top: 24px; right: auto; left: calc(var(--cin-side) + var(--cin-s) * 0.035); }
  .cin-side { right: calc(var(--cin-side) + var(--cin-s) * 0.04); }
  /* supporting photos: a framed column, sized to their own shape */
  .cin-panel { right: calc(var(--cin-side) + var(--cin-s) * 0.035); width: calc(var(--cin-s) * 0.17); top: 11%; bottom: auto; height: 74%; gap: 12px; justify-content: center; }
  .cin-sup-1 .cin-support { flex: 0 0 auto; aspect-ratio: 4 / 5; }
  .cin-plate { padding: 10px 14px 10px 18px; gap: 10px; }
  .cin-plate-num { font-size: 42px; }
  .cin-plate-text b { font-size: 13px; }
  .cin-plate-text small { font-size: 10px; }
  /* name -> snapshot -> buttons: clear steps down in size */
  .cin-copy { bottom: 9%; }
  .cin-name { font-size: clamp(52px, 6.6vw, 108px); }
  .cin-name.tpl-len-m { font-size: clamp(48px, 6vw, 98px); }
  .cin-name.tpl-len-l { font-size: clamp(44px, 5.2vw, 86px); }
  .cin-name.tpl-len-xl { font-size: clamp(38px, 4.4vw, 72px); }
  .cin-rule { margin-top: 12px; width: min(460px, 50%); }
  .cin-snap { margin-top: 14px; }
  .cin-snap .tpl-snap-item { padding: 0 18px; }
  .cin-snap dt { font-size: 10px; }
  .cin-snap dd { font-size: clamp(15px, 1.15vw, 18px); }
  .cin-ctas { margin-top: 18px; gap: 8px; }
  .cin-ctas .tpl-btn { padding: 10px 16px; font-size: 13px; }
  /* stat band: lighter, still the team-color underline */
  .cin-stat { padding: 14px 22px; column-gap: 12px; }
  .cin-stat .tpl-icon { width: 30px; height: 30px; }
  .cin-stat .tpl-stat-value { font-size: 32px; }
  .cin-stat .tpl-stat-label { font-size: 11px; margin-top: 3px; }
}

/* =====================================================================
   Cinematic Hero - Photo Phase 2 step 3: jersey number, photo, colors
   ===================================================================== */
/* A dark NEUTRAL foundation for every team (the team's own secondary when
   it is already very dark - black, navy - otherwise near-black with a hint
   of the primary): team colors stay the accents, a light secondary such as
   gold never turns the hero brown. */
.cin-hero, .cin-statbar, .cin-body { --black: var(--stage-dark, #0e0f12); --black-rgb: var(--stage-dark-rgb, 14, 15, 18); }

/* the photo's fades are placed per photo by player-templates.js so they
   never cross the athlete (defaults = the original design) */
.cin-hero[data-cin-layout] .cin-photo {
  -webkit-mask-image: linear-gradient(to right, transparent var(--fl-a, 0%), #000 var(--fl-b, 34%), #000 var(--fr-a, 100%), transparent var(--fr-b, 100%));
          mask-image: linear-gradient(to right, transparent var(--fl-a, 0%), #000 var(--fl-b, 34%), #000 var(--fr-a, 100%), transparent var(--fr-b, 100%));
}
.cin-hero[data-cin-layout]:not(.cin-sup-0) .cin-photo { --fl-b: 30%; --fr-a: 80%; }
.cin-support .tpl-photo, .cin-photo { background: transparent; }
.cin-support .tpl-photo { background: #0f0f12; }
.cin-ghost.is-stepped-aside, .cin-side.is-stepped-aside { display: none; }

/* jersey number: one of two layouts, never both */
.cin-numtag { display: none !important; }
.cin-num-identity .cin-number { display: none; }
.cin-num-behind .cin-lock-num, .cin-num-behind .cin-lock-bar,
.cin-num-solo .cin-lock-num, .cin-num-solo .cin-lock-bar { display: none; }
/* BEHIND: the numeral sits under the photo (photo z 3) and shows only where
   the photo fades out - the athlete always in front, no cut-out edges */
.cin-num-behind .cin-number {
  right: auto; z-index: 2; opacity: 1; line-height: 0.8; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #ededf0 32%, var(--accent-on-dark, var(--red)) 80%, rgba(var(--accent-on-dark-rgb, var(--red-rgb)), 0.75) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0;
  filter: drop-shadow(0 22px 38px rgba(0,0,0,0.55));
}
.cin-num-measuring .cin-number { visibility: hidden; left: 0; top: 0; }
/* IDENTITY: a broadcast-style lockup - huge numeral, slanted team bar, name */
.cin-lock { display: flex; align-items: stretch; gap: clamp(14px, 1.6vw, 26px); }
.cin-lock-id { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; flex: 1 1 auto; }
.cin-hero .cin-name .tpl-last { overflow-wrap: normal; word-break: normal; }
.cin-hero .cin-name { max-width: 100%; }
.cin-lock-num {
  position: relative; align-self: flex-end; font-family: 'Anton', sans-serif; line-height: 0.78; letter-spacing: -0.02em;
  font-size: clamp(110px, 13vw, 206px);
  background: linear-gradient(180deg, #ffffff 0%, #ececef 40%, var(--accent-on-dark, var(--red)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.7));
}
.cin-lock-num::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -0.06em; height: 0.035em; min-height: 4px; background: var(--accent-on-dark, var(--red)); }
.cin-lock-hash { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cin-lock-bar { flex: 0 0 12px; width: 12px; margin: 6px 0 4px; transform: skewX(-14deg); background: linear-gradient(180deg, var(--accent-on-dark, var(--red)), rgba(var(--accent-on-dark-rgb, var(--red-rgb)), 0.35)); box-shadow: 0 0 22px rgba(var(--accent-on-dark-rgb, var(--red-rgb)), 0.5); }
.cin-num-identity .cin-lock-id .cin-name { font-size: clamp(60px, 8.4vw, 130px); }
.cin-num-identity .cin-lock-id .cin-name.tpl-len-l { font-size: clamp(52px, 6.8vw, 104px); }
.cin-num-identity .cin-lock-id .cin-name.tpl-len-xl { font-size: clamp(44px, 5.6vw, 86px); }
@media (max-width: 760px) {
  .cin-hero[data-cin-layout] .cin-photo {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 34%), linear-gradient(to right, transparent var(--fl-a, 0%), #000 var(--fl-b, 0%), #000 var(--fr-a, 100%), transparent var(--fr-b, 100%));
            mask-image: linear-gradient(to top, transparent 0%, #000 34%), linear-gradient(to right, transparent var(--fl-a, 0%), #000 var(--fl-b, 0%), #000 var(--fr-a, 100%), transparent var(--fr-b, 100%));
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .cin-num-behind .cin-number { right: auto; z-index: 2; background: linear-gradient(180deg, #ffffff 0%, #ededf0 32%, var(--accent-on-dark, var(--red)) 80%, rgba(var(--accent-on-dark-rgb, var(--red-rgb)), 0.75) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.55)); }
  .tpl-v-team .cin-num-behind .cin-number { background: linear-gradient(180deg, #ffffff 0%, #ededf0 32%, var(--accent-on-dark, var(--red)) 80%, rgba(var(--accent-on-dark-rgb, var(--red-rgb)), 0.75) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
  .cin-lock { gap: 10px; }
  .cin-lock-num { font-size: 27vw; }
  .cin-lock-bar { flex-basis: 7px; width: 7px; }
  .cin-num-identity .cin-lock-id .cin-name { font-size: 12.5vw; }
  .cin-num-identity .cin-lock-id .cin-name.tpl-len-m { font-size: 11vw; }
  .cin-num-identity .cin-lock-id .cin-name.tpl-len-l { font-size: 9.5vw; }
  .cin-num-identity .cin-lock-id .cin-name.tpl-len-xl { font-size: 8.2vw; }
}

/* ---- Cinematic refinements (owner, 2026-10-12) ---- */
/* featured stats in the hero, beside the button: a glass chip with a team edge */
.cin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; }
.cin-actions .cin-ctas { margin-top: 0; }
.cin-quickstats { display: flex; flex-wrap: wrap; gap: 10px; }
.cin-qstat {
  display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 7px 16px 7px 12px; border-left: 3px solid var(--accent-on-dark, var(--red));
  background: linear-gradient(100deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.cin-qstat .tpl-icon { grid-row: span 2; width: 26px; height: 26px; color: #e4e4e8; }
.cin-qstat .tpl-stat-value { font-family: 'Anton', sans-serif; font-size: 26px; line-height: 1; color: #fff; }
.cin-qstat .tpl-stat-value small { font-size: 0.5em; margin-left: 3px; color: #d4d4d8; }
.cin-qstat .tpl-stat-label { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; line-height: 1.2; color: #c9c6c1; }
/* three or four stats: their own row, but one piece with the hero (same dark
   base, a slim divider in the content column - no isolated strip) */
.cin-statbar { background: var(--black); border-top: 0; border-bottom: 0; box-shadow: none; }
.cin-statbar-inner { position: relative; border-top: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.06); }
.cin-statbar-inner::before { content: ''; position: absolute; left: 0; top: -1px; width: 64px; height: 2px; background: var(--accent-on-dark, var(--red)); }
/* a shorter, lighter fade under the photo: dark only where the name sits */
.cin-hero[data-cin-layout] .cin-vignette {
  background:
    linear-gradient(180deg, rgba(var(--black-rgb), 0.3) 0%, transparent 18%),
    linear-gradient(0deg, rgba(var(--black-rgb), 0.82) 0%, rgba(var(--black-rgb), 0.38) 13%, transparent 34%),
    radial-gradient(ellipse 58% 72% at 16% 100%, rgba(var(--black-rgb), 0.78), transparent 70%),
    linear-gradient(90deg, rgba(var(--black-rgb), 0.72) 0%, transparent 44%);
}
@media (max-width: 760px) {
  .cin-actions { margin-top: 16px; gap: 10px; }
  .cin-qstat { padding: 6px 12px 6px 10px; }
  .cin-qstat .tpl-stat-value { font-size: 22px; }
  .cin-qstat .tpl-icon { width: 22px; height: 22px; }
  /* phones: the photo fades out over a shorter run; the name keeps a soft backing */
  .cin-hero[data-cin-layout] .cin-photo {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 20%), linear-gradient(to right, transparent var(--fl-a, 0%), #000 var(--fl-b, 0%), #000 var(--fr-a, 100%), transparent var(--fr-b, 100%));
            mask-image: linear-gradient(to top, transparent 0%, #000 20%), linear-gradient(to right, transparent var(--fl-a, 0%), #000 var(--fl-b, 0%), #000 var(--fr-a, 100%), transparent var(--fr-b, 100%));
  }
  .cin-hero[data-cin-layout] .cin-vignette {
    background:
      linear-gradient(180deg, rgba(var(--black-rgb), 0.3) 0%, transparent 16%),
      linear-gradient(0deg, rgba(var(--black-rgb), 0.92) 0%, rgba(var(--black-rgb), 0.55) 26%, transparent 46%);
  }
}

/* ===== Cinematic supporting photos: frames shaped to each photo (2026-10-14) =====
   Show Full Photo (default): the frame takes the photo's own shape, so the
   whole photo shows - no crop, no postage stamp in a wide dark box.
   Fill the Frame: the standard 4:5 frame, cropped around the face spot,
   never cutting the Keep in View area. The photo sits fully INSIDE the
   slanted frame (dark wedges at the slants), so the slant never clips it.
   player-templates.js sizes every frame; these are the no-script sizes. */
.cin-support { --sup-slant: 14px; flex: 0 0 auto; align-self: center; width: 100%; aspect-ratio: var(--sup-ar, 0.8); padding: 0;
  clip-path: polygon(var(--sup-slant) 0, 100% 0, calc(100% - var(--sup-slant)) 100%, 0 100%); }
.cin-support[data-fit="fill"] { --sup-ar: 0.8; }
.cin-support::before { content: ''; position: absolute; inset: 2px; background: #0f0f12;
  clip-path: polygon(calc(var(--sup-slant) - 1px) 0, 100% 0, calc(100% - var(--sup-slant) + 1px) 100%, 0 100%); }
.cin-support .tpl-photo { inset: 2px calc(var(--sup-slant) + 1px); clip-path: none; overflow: hidden; background: #0f0f12; }
.cin-support::after { inset: 2px calc(var(--sup-slant) + 1px); clip-path: none; }
.cin-support img[data-sup-whole] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.cin-sup-1 .cin-support { flex: 0 0 auto; }
@media (min-width: 761px) {
  .cin-panel { align-items: center; }
  .cin-plate { align-self: stretch; }
  .cin-support { max-height: 46%; width: auto; height: 46%; }
  .cin-sup-1 .cin-support { height: 70%; max-height: 70%; }
}
@media (max-width: 760px) {
  /* Phone: the main photo, then name + snapshot (first screen unchanged),
     then the supporting photos in a row - each in its own shape, large. */
  .cin-hero:not(.cin-sup-0) { display: flex; flex-direction: column; }
  .cin-hero:not(.cin-sup-0) .cin-copy { order: 1; padding-top: calc(var(--cin-ph) - 84px); }
  .cin-hero:not(.cin-sup-0) .cin-panel { order: 2; position: relative; top: auto; bottom: auto; left: auto; right: auto; width: auto; height: auto;
    margin: 18px 16px 0; flex-direction: row; justify-content: center; align-items: flex-end; gap: 12px; }
  .cin-support { --sup-slant: 10px; width: auto; height: min(62vw, 260px); }
  .cin-sup-2 .cin-support { height: min(46vw, 200px); }
}

.cin-support .tpl-slot-marker { top: 6px; }

/* ===== Cinematic Portrait Card (desktop/tablet; vertical main photo) =====
   Owner-approved direction (2026-10-14). player-templates.js places the
   card, its backing slab and the numeral; phones keep the regular layout. */
@media (min-width: 761px) {
  .cin-hero.cin-portrait .cin-ghost { display: none !important; }
  .cin-hero.cin-portrait .cin-photo { -webkit-mask-image: none !important; mask-image: none !important; overflow: hidden; z-index: 4;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.14); border-radius: 3px; }
  .cin-hero.cin-portrait .cin-photo img { position: absolute !important; max-width: none !important; object-fit: cover !important; transform: none !important; clip-path: none !important; }
  .cin-hero.cin-portrait .pt-slab { position: absolute; z-index: 3; border-radius: 3px;
    background: linear-gradient(160deg, var(--tpl-accent, var(--red)) 0%, rgba(var(--accent-deep-rgb, var(--red-rgb)), 0.85) 100%); }
  .cin-hero.cin-portrait .cin-number { z-index: 2 !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 2px rgba(var(--accent-on-dark-rgb, var(--red-rgb)), 0.7) !important;
    background: linear-gradient(180deg, rgba(var(--accent-on-dark-rgb, var(--red-rgb)), 0.22), rgba(var(--accent-on-dark-rgb, var(--red-rgb)), 0.04)) !important;
    -webkit-background-clip: text !important; background-clip: text !important; opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; filter: none !important; }
  .cin-hero.cin-portrait .cin-vignette { opacity: 0.6; }
}
/* the position label in the #number plate wraps instead of running out of
   the plate (tablet widths; seen on live with "Shortstop/Utility") */
.cin-plate-text { min-width: 0; }
@media (min-width: 761px) and (max-width: 1100px) { .cin-plate { flex-wrap: wrap; row-gap: 2px; } .cin-plate-text b { font-size: 12px; letter-spacing: 0.04em; } }
/* Portrait Card + decorative numeral: the readable jersey number stays in
   the page for screen readers (visually hidden; the big numeral is aria-hidden) */
.cin-hero.cin-portrait.cin-num-behind .cin-lock-num { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }