/* ============================================================
   Digiwrist — additions on top of Aymen's style.css
   (subpages, contact wiring, small homepage fixes)
   ============================================================ */

/* Hero: the split line is meant to flank the tablet edge-to-edge
   (see _reference/ref-desktop.png); the skin kept the 8.3% gutter
   so SPORTS/TEAMS overlapped the tablet at 1440. */
.hero-headline .line-split { margin-left: -7.5%; margin-right: -7.5%; font-size: 6.5cqw; line-height: 1.55; }

.dbn-stat small { font-size: 0.42em; font-weight: 800; letter-spacing: 0; margin-left: 0.1em; }

.sp-case-link { display: inline-block; margin-top: 14px; color: var(--blue-1); font-weight: 700; font-size: 0.95rem; }
.sp-case-link:hover { text-decoration: underline; }

.footer-phones a:hover { text-decoration: underline; }

/* testimonial slot holding a logo instead of a cut-out photo */
.testi-photo-img--logo { object-fit: contain; background: #1a2845; border-radius: 26px; padding: 22px; aspect-ratio: 4/5; filter: none; }

/* partner logo grids — the real roster is 8 + 11 logos, not 3 + 6 */
.partners-logos--programs { grid-template-columns: repeat(4, minmax(90px, 150px)); }
.partners-logos--programs img { height: 84px; max-width: 150px; }
@media (max-width: 900px) { .partners-logos--programs { grid-template-columns: repeat(3, minmax(80px, 120px)); } }
@media (max-width: 480px)  { .partners-logos--programs { grid-template-columns: repeat(2, minmax(80px, 130px)); } .partners-logos--programs img { height: 64px; } }

/* order CTA: two buttons */
.order-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.order-actions .btn { white-space: nowrap; }

/* contact form wiring */
.contact-phone { margin-top: 18px; font-weight: 600; color: #0a0a0a; }
.contact-phone a { color: var(--blue-1); }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-submit-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex-wrap: wrap; }
.contact-status { font-size: 0.9rem; color: #555; min-height: 1.2em; }
.contact-status.ok { color: #0a6b34; font-weight: 600; }
.contact-status.err { color: #b3261e; font-weight: 600; }
.contact-submit[disabled] { opacity: 0.6; cursor: wait; }

/* ------------------------------------------------------------
   Subpage hero — dark band under the navbar
   ------------------------------------------------------------ */
.page-hero {
  position: relative;
  background: #0b1220 url('/assets/images/footer-player-bg.png') center/cover no-repeat;
  color: #fff;
  padding: 96px 24px 72px;
  text-align: center;
  overflow: hidden;
}
.page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,10,24,.82), rgba(3,10,24,.92)); }
.page-hero > * { position: relative; }
.page-hero-eyebrow { color: #64b5ff; font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.page-hero h1 {
  font-family: 'Archivo Black', 'Arial Black', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 1000px; margin: 0 auto;
}
.page-hero h1 em { font-style: normal; color: #4fb3ff; }
.page-hero-lead { max-width: 760px; margin: 22px auto 0; color: #d6e2f5; font-size: 1.1rem; line-height: 1.6; }
.page-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.page-hero-actions .btn { padding: 12px 28px; font-size: 1rem; }

/* generic content band */
.band { background: #fff; padding: 72px 24px; }
.band--panel { background: var(--panel-bg); }
.band-inner { max-width: 1280px; margin: 0 auto; }
.band-eyebrow { color: var(--blue-1); font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.band-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; color: #0a0a0a;
}
.band-title em { font-style: normal; color: var(--blue-1); }
.band-lead { color: #444; font-size: 1.05rem; line-height: 1.65; margin-top: 16px; max-width: 720px; }
.band-center { text-align: center; }
.band-center .band-lead { margin-left: auto; margin-right: auto; }

/* two-column feature block: copy + photo */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.split--flip .split-copy { order: 2; }
.split-photo img { width: 100%; height: auto; max-height: 640px; border-radius: 20px; object-fit: cover; box-shadow: 0 24px 60px rgba(5,20,50,.18); }
.split-photo--contain img { object-fit: contain; box-shadow: none; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } .split--flip .split-copy { order: 0; } }

/* bullet list with bold lead-ins (Football/Softball/Baseball pages) */
.points { list-style: none; margin-top: 26px; display: grid; gap: 18px; }
.points li { position: relative; padding-left: 40px; color: #333; line-height: 1.55; }
.points li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat;
}
.points strong { color: #0a0a0a; }

/* stat/feature tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 36px; }
.tile { background: #fff; border: 1px solid #e6ecf7; border-radius: 18px; padding: 26px; }
.band--panel .tile { border-color: transparent; }
.tile h4 { font-size: 1.05rem; color: var(--blue-1); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .02em; }
.tile p { color: #444; line-height: 1.55; }

/* champions page */
.champ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.champ-grid img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 18px; }
@media (max-width: 900px) { .champ-grid { grid-template-columns: 1fr; } .champ-grid img { aspect-ratio: 4/3; } }
.quote-card { background: #fff; border-radius: 20px; padding: 34px 38px; box-shadow: 0 18px 50px rgba(5,20,50,.08); margin-top: 32px; }
.quote-card p { font-size: 1.15rem; line-height: 1.6; color: #222; }
.quote-card cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; color: var(--blue-1); }
.source-link { color: var(--blue-1); font-weight: 600; }
.source-link:hover { text-decoration: underline; }

/* CTA strip */
.cta-strip { background: var(--nav-bg); color: #fff; padding: 56px 24px; text-align: center; }
.cta-strip h2 { font-family: 'Archivo Black', 'Arial Black', sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
.cta-strip p { color: #c9d3e6; margin-top: 10px; }
.cta-strip .page-hero-actions { margin-top: 24px; }

/* legal / prose pages */
.prose { max-width: 860px; margin: 0 auto; color: #222; line-height: 1.7; }
.prose h2 { font-size: 1.35rem; margin: 40px 0 12px; color: #0a0a0a; }
.prose h3 { font-size: 1.05rem; margin: 26px 0 8px; color: var(--blue-1); text-transform: uppercase; letter-spacing: .03em; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px 22px; }
.prose li { margin-bottom: 6px; }
.prose .muted { color: #666; font-size: .95rem; }

/* PDF embed */
.pdf-frame { width: 100%; height: 80vh; min-height: 560px; border: 1px solid #e6ecf7; border-radius: 16px; background: #fff; }

/* ------------------------------------------------------------
   Our Teams — logo ticker (pure CSS marquee, two rows, opposite
   directions; pauses on hover; static wrap for reduced-motion)
   ------------------------------------------------------------ */
.teams { padding: 64px 0 56px; }
.teams .partners-container { padding: 0 24px; }
.teams .partners-title { margin-bottom: 0; }
/* ticker sits centered in the space between the title and the section's end */
.teams .ticker { margin: 0; padding: 40px 0 0; }   /* 56 above the logos = 56 below them */
.ticker { overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* Mo2 2026-09-18, Romano: the "7 teams / 26 teams / 3 teams" badges sat at top:-12px inside
   an overflow:hidden .ticker, so they were sheared off. Pad the row so the badge has room
   INSIDE the clipped box; the section's own top padding comes down to keep the spacing. */
.ticker-row { display: flex; width: max-content; margin: 0 0 22px; padding-top: 16px; }
.ticker-row:last-child { margin-bottom: 0; }
.ticker-track { display: flex; align-items: center; gap: 64px; padding-right: 64px;
  animation: ticker-scroll 70s linear infinite; }
.ticker-row:hover .ticker-track { animation-play-state: paused; }
.ticker-item { position: relative; margin: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.ticker-track img { height: 84px; width: auto; max-width: 180px; object-fit: contain; flex: 0 0 auto;
  filter: saturate(.95); transition: transform .25s; }
.ticker-item:hover img { transform: scale(1.08); }
.ticker-count { position: absolute; top: -12px; right: -14px; z-index: 1; background: var(--blue-1); color: #fff;
  font-weight: 800; font-size: .72rem; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(5,116,188,.35); white-space: nowrap; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (max-width: 900px) { .ticker-track { gap: 40px; padding-right: 40px; } .ticker-track img { height: 64px; max-width: 140px; } }
@media (max-width: 480px) { .ticker-track img { height: 52px; max-width: 110px; } .ticker-row { margin-bottom: 14px; padding-top: 14px; } .ticker-count { font-size: .62rem; padding: 3px 8px; top: -10px; right: -8px; } .teams { padding-bottom: 32px; } .teams .ticker { padding: 32px 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .ticker { mask-image: none; -webkit-mask-image: none; }
  .ticker-row { width: auto; flex-wrap: wrap; justify-content: center; }
  .ticker-track { animation: none; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .ticker-track[aria-hidden="true"] { display: none; }
}


/* Football hero: a real game photo instead of the stock helmet (DWT-CG/football, 2026-09-06) */
/* Mo2 2026-09-18, Romano: "the hero in the section sucks lets get a better one."
   trinity-run is a 1087x1447 PORTRAIT — a hero crops it to a thin washed-out slice.
   case-study-1 is 2340x1560: line of scrimmage, ball on the turf, both lines set. */
.page-hero--football { background-image: url('/assets/images/case-study-1.jpg'); background-position: center 58%; }
/* At 390px the hero crops horizontally, so 58% lands on the sideline crowd.
   Push down to the line of scrimmage and the ball. */
@media (max-width: 860px) { .page-hero--football { background-position: 62% 72%; } }
/* Mo5 2026-09-18 — softball and baseball had NO hero override, so both fell back
   to the base rule: a FOOTBALL player (footer-player-bg.png) under a .82->.92
   gradient. Wrong sport, and too dark to read. Same lighter overlay football uses. */
/* Mo2 2026-09-18, Romano: "zoom back a little on the softball hero to not cut off the
   pitcher's head" — sb26-03 is 944x716; a 2.5:1 hero cover-crop was taking her head off.
   Taller box + focal point higher in the frame. */
.page-hero--softball { background-image: url('/assets/images/softball/sb-champs-hero.jpg'); background-position: center 18%; padding-bottom: 140px; }
.page-hero--baseball { background-image: url('/assets/images/diamond/baseball-hero.jpg'); background-position: center 45%; }
.page-hero--flag {
  background-image: url('/assets/images/flag/flag-hero.jpg');
  background-position: center 46%;
  /* Romano 2026-09-18: "zoom it back a smidge to see her forearm" — the taller
     box means cover crops less of the 16:9 frame, so the wrist unit clears the CTAs. */
  padding-bottom: 150px;
}

/* Mo2 2026-09-18, Romano: "Champions hero sucks ass change it up" + "About hero make it
   our home page hero". Both pages were on the bare .page-hero fallback (a football player
   under a .82->.92 wall) — same defect Mo5 fixed for softball and baseball. */
.page-hero--champs { background-image: url('/assets/images/champs/yoakum-team.jpg'); background-position: center 32%; }
/* Romano's standing item: "Texas High School Football State Champions 2025" onto one line. */
/* Mo2 2026-09-18, Romano: "all heros make more visable. they are too dark" — the five sport
   heroes were all running a .55 -> .86 scrim over the whole photo. Lighter, weighted to the
   bottom where the buttons sit; the type carries its own shadow instead of the picture paying
   for legibility. */
.page-hero--football::before,
.page-hero--softball::before,
.page-hero--baseball::before,
.page-hero--flag::before,
.page-hero--champs::before {
  background: linear-gradient(180deg, rgba(3,10,24,.26) 0%, rgba(3,10,24,.40) 42%, rgba(3,10,24,.66) 100%);
}
.page-hero--football h1, .page-hero--softball h1, .page-hero--baseball h1,
.page-hero--flag h1, .page-hero--champs h1,
.page-hero--football .page-hero-lead, .page-hero--softball .page-hero-lead,
.page-hero--baseball .page-hero-lead, .page-hero--flag .page-hero-lead,
.page-hero--champs .page-hero-lead,
.page-hero--football .page-hero-eyebrow, .page-hero--softball .page-hero-eyebrow,
.page-hero--baseball .page-hero-eyebrow, .page-hero--flag .page-hero-eyebrow,
.page-hero--champs .page-hero-eyebrow {
  text-shadow: 0 2px 10px rgba(0,0,0,.72), 0 1px 3px rgba(0,0,0,.55);
}
/* the eyebrow is small blue type — on the now-brighter skies it needs its own lift */
.page-hero--football .page-hero-eyebrow, .page-hero--softball .page-hero-eyebrow,
.page-hero--baseball .page-hero-eyebrow, .page-hero--flag .page-hero-eyebrow,
.page-hero--champs .page-hero-eyebrow {
  color: #a8dcff;
  text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.6);
}
/* softball + baseball source photos are themselves dark (dusk shade / dark render), so the
   scrim has to come down further on those two or they stay murky no matter what. */
.page-hero--baseball::before {
  background: linear-gradient(180deg, rgba(3,10,24,.14) 0%, rgba(3,10,24,.26) 42%, rgba(3,10,24,.55) 100%);
}

.page-hero--champs h1 { font-size: clamp(1.3rem, 2.75vw, 2.25rem); max-width: 1340px; }

/* Mo2 2026-09-18 — stat variant of the house .tile: the number IS the heading.
   Reuses .tiles/.tile spacing so it matches the sport pages; only the numeral scales up. */
.tiles--stat { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tiles--stat .tile { text-align: center; padding: 22px 18px; }
.tiles--stat .tile h4 {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em; text-transform: none; margin-bottom: 6px; line-height: 1.05;
}
.tiles--stat .tile p { font-size: .93rem; line-height: 1.45; color: #555; }
.band-note { margin-top: 22px; color: #777; font-size: .82rem; line-height: 1.5; }
.band-center .band-note { margin-left: auto; margin-right: auto; max-width: 720px; }

/* In play — photo mosaic of real teams on DigiWrist */
.inplay { background: #0a1020; color: #fff; padding: 72px 24px 80px; }
.inplay-head { max-width: 1120px; margin: 0 auto 28px; }
.inplay-head .band-title { color: #fff; }
.inplay-head .band-title em { color: #4fb3ff; }
.inplay-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 12px; }
.inplay-item { margin: 0; overflow: hidden; border-radius: 12px; border: 1px solid rgba(96,165,250,.22); background: #05080f; }
.inplay-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.inplay-item:hover img { transform: scale(1.04); }
.inplay-item--tall { grid-row: span 2; }
.inplay--home { padding: 52px 24px 52px; }   /* equal to the loadout's 52px bottom so the break line sits mid-gap */
@media (max-width: 900px) { .inplay-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } }
@media (max-width: 520px) { .inplay-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 8px; } .inplay { padding: 48px 14px 56px; } }

/* home photo wall: Order Now sits on the header line, right of the title (Romano 2026-09-06) */
.inplay-head--cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.inplay-order { padding: 14px 34px; font-size: 17px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 26px rgba(18,169,15,.35); }
@media (max-width: 600px) { .inplay-head--cta { align-items: flex-start; } .inplay-order { padding: 12px 26px; font-size: 15px; } }

.inplay--diamond { padding: 52px 24px 52px; }

/* photo wall, light variant */
.inplay--light { background: #f4f6fa; color: #0a0a0a; }
.inplay--light .inplay-head .band-title { color: #0a0a0a; }
.inplay--light .inplay-head .band-title em { color: var(--blue-1); }
.inplay--light .inplay-item { border-color: rgba(5,116,188,.18); box-shadow: 0 10px 30px rgba(10,20,40,.08); background: #fff; }

/* section breaks — gradient hairline between the dark home sections (Romano 2026-09-06) */
.sec-break { height: 2px; background: #0a1020; position: relative; }
.sec-break::after { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 2px;
  background: linear-gradient(90deg, rgba(96,165,250,0) 0%, rgba(96,165,250,.85) 30%, #40c4ff 50%, rgba(96,165,250,.85) 70%, rgba(96,165,250,0) 100%);
  box-shadow: 0 0 14px rgba(64,196,255,.45); }

/* breaks sit exactly mid-gap: every dark home section pads 52px top and bottom */
.social-proof--dark { padding: 52px 24px 52px; }

/* Mo5 2026-09-18 — expandable In Play galleries. Romano: show a tight grid,
   let people expand for the rest rather than dumping 25 photos on load. */
.inplay-more { margin-top: 12px; }
.inplay-more[hidden] { display: none; }
.inplay-more-wrap { max-width: 1120px; margin: 18px auto 0; text-align: center; }
.inplay-more-btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  color: #cfe6ff; background: rgba(79,179,255,.10);
  border: 1px solid rgba(96,165,250,.45); border-radius: 999px;
  padding: 11px 26px; letter-spacing: .02em;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.inplay-more-btn:hover { background: rgba(79,179,255,.20); border-color: rgba(96,165,250,.8); color: #fff; }
.inplay-more-btn:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 3px; }