/* ============================================================
   Bravo Foxtrot Global Media — dark grunge corporate theme.

   Palette is SAMPLED from the Forward Ops badge (the only real BFGM-family
   logo that exists), not invented: flag red rgb(158,29,10), shield navy
   rgb(13,21,35), weathered cream rgb(247,238,222), tan rgb(170,147,119).

   Structure/feel deliberately mirrors onthemarctv.com: fixed burger + slide-in
   menu, Bebas Neue display type, gradient-brand headings, near-black 2-stop
   gradient ground, gradient hairline band edges.
   ============================================================ */

:root{
  --ink:#08090b;         /* page ground */
  --ink2:#101216;        /* raised panel */
  --ink3:#161a20;        /* card */
  --navy:#0d1523;        /* shield navy (logo) */
  --navy2:#16233a;
  --red:#9e1d0a;         /* flag red (logo) */
  --red-hi:#c4351c;      /* lifted red for interactive */
  --cream:#f7eede;       /* logo lettering */
  --tan:#aa9377;         /* weathered tan (logo) */
  --text:#e9e6e0;
  --muted:#9a958d;
  --muted2:#6e6a64;
  --line:rgba(247,238,222,.11);
  --line2:rgba(247,238,222,.06);
  --maxw:1180px;
  --rad:4px;             /* hard, squared-off — grunge/military, not soft SaaS */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#12141a 0%,#08090b 62%,#050506 100%);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.05em}
h1,h2,h3,h4{margin:0 0 .5em}

/* Bebas Neue display face — same display font as onthemarctv.com */
.disp{
  font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  font-weight:400;letter-spacing:.02em;line-height:1.02;
  text-transform:none;
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:300;background:var(--red-hi);color:#fff;padding:10px 16px;border-radius:var(--rad)}

/* ---- film-grain / grunge tooth over the whole page.
       Inline SVG feTurbulence, so nothing is fetched from a CDN.
       Sits ON TOP as a non-interactive texture (pointer-events:none).
       Do NOT "fix" this by forcing position/z-index on body's children —
       a blanket `body > * {position:relative}` clobbers position:fixed on the
       burger + slide-in menu and dumps a 100vh panel into the document flow. ---- */
.grain{
  position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.kicker{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--tan);margin:0 0 14px;
}

/* ===================== BFGM placeholder wordmark ===================== */
/* The real BFGM logo (gold winged BF shield + VETERAN OWNED arc + wordmark).
   Sized by the .bfmark--* class, NEVER inline — an inline value outranks these
   media queries and the mark then overflows narrow screens. Height-driven in the
   bar/footer, width-driven in the hero, so the aspect ratio is never forced. */
.bfmark{display:block;width:auto;height:auto;max-width:100%}
/* The lockup is a DETAILED badge (arc text + shield + wordmark). Squeezed into a
   46px bar it turns to mush, so the bar carries it at a size where the shield
   and wordmark still read, and the bar's own padding is trimmed to compensate. */
.bfmark--bar{height:64px}
.bfmark--foot{height:74px}
.bfmark--hero{width:min(380px,74vw);filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
/* Transactional page headers (checkout) — bigger and real, not the tiny "BF"
   placeholder badge (Anthony 2026-08-17: "I'd like BFGM logo here please"). */
.bfmark--pagehead{width:min(180px,58vw);margin:0 auto}
@media (max-width:820px){.bfmark--bar{height:56px}}
@media (max-width:560px){.bfmark--bar{height:46px}.bfmark--hero{width:min(300px,78vw)}}
@media (max-width:380px){.bfmark--bar{height:40px}}

/* ===================== Burger + slide-in menu (OTMTV pattern) ===================== */
.burger{
  position:fixed;top:14px;right:16px;z-index:201;width:46px;height:46px;
  background:rgba(158,29,10,.16);border:1px solid rgba(196,53,28,.5);border-radius:var(--rad);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;padding:0;transition:background .2s,border-color .2s,transform .15s;
}
.burger:hover{background:rgba(196,53,28,.34);border-color:var(--red-hi);transform:scale(1.05)}
.burger span{width:24px;height:2px;background:var(--cream);border-radius:1px;transition:transform .25s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.sitemenu{
  position:fixed;top:0;right:0;width:250px;height:100vh;z-index:200;
  background:rgba(11,13,17,.98);
  border-left:2px solid;
  border-image:linear-gradient(180deg,rgba(158,29,10,0) 0%,var(--red) 32%,var(--red-hi) 50%,var(--red) 68%,rgba(158,29,10,0) 100%) 1;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  padding:78px 0 20px;box-shadow:-14px 0 44px rgba(0,0,0,.62);overflow-y:auto;
}
.sitemenu.open{transform:translateX(0)}
.sitemenu a{
  display:block;padding:13px 24px;font-size:.92rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  border-bottom:1px solid var(--line2);
  transition:color .2s,padding-left .2s,background .2s;
}
.sitemenu a:hover{color:var(--cream);padding-left:30px;background:rgba(158,29,10,.12)}
.sitemenu a.active{color:var(--cream);border-left:3px solid var(--red-hi);padding-left:21px}
@media (max-width:680px){
  .burger{top:10px;right:10px;width:38px;height:38px;gap:5px}
  .burger span{width:19px}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .sitemenu{width:225px;padding-top:64px}
}

/* ===================== Top bar ===================== */
.topbar{
  position:sticky;top:0;z-index:120;
  padding:8px 78px 8px 24px;
  background:rgba(8,9,11,.9);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
.topbar__brand{display:inline-block}

/* ===================== Hero ===================== */
.hero{
  position:relative;padding:clamp(34px,4.5vw,58px) 24px clamp(30px,3.8vw,46px);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(158,29,10,.17), transparent 66%),
    radial-gradient(48% 44% at 88% 12%, rgba(22,35,58,.55), transparent 70%);
}
.hero__in{max-width:840px;margin:0 auto;text-align:center}
/* The logo IS the headline — it's an <h1>, and the first thing the viewer sees
   (Anthony 2026-08-12: no display tagline above the mission statement). */
.hero__mark{display:flex;justify-content:center;margin:0 0 clamp(20px,2.8vw,30px)}
.mission{
  font-size:clamp(.94rem,1.25vw,1.05rem);color:var(--muted);
  max-width:600px;margin:0 auto 26px;
}
/* The hero <h1> is the LOGO LOCKUP, not text — so no gradient-text treatment
   here. A `background-clip:text` + `-webkit-text-fill-color:transparent` rule on
   .hero h1 inherits into the lockup and blanks the "BF" glyphs entirely
   (shipped and caught 2026-08-12). The .bfmark guard below is the belt-and-braces.
   Gradient headline type lives on .head h2 / .cta h2 instead. */
.lede{font-size:clamp(1rem,1.55vw,1.16rem);color:var(--muted);max-width:640px;margin:0 auto 32px}

.btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
/* CTAs after the Forward Ops feature rather than inside the hero */
.btns--afterstage{padding:clamp(22px,3vw,34px) 24px 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 30px;border-radius:var(--rad);border:1px solid transparent;
  font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;font-family:inherit;
  transition:background .16s,border-color .16s,transform .14s,box-shadow .16s;
}
.btn--red{
  background:linear-gradient(180deg,var(--red-hi),var(--red));color:#fff;
  box-shadow:0 5px 20px -6px rgba(158,29,10,.85);
}
.btn--red:hover{transform:translateY(-2px);box-shadow:0 9px 26px -6px rgba(196,53,28,.95)}
.btn--ghost{border-color:rgba(247,238,222,.28);color:var(--cream)}
.btn--ghost:hover{border-color:var(--cream);background:rgba(247,238,222,.06)}

/* ===================== Forward Ops centre stage ===================== */
.stage{
  position:relative;padding:clamp(32px,4.2vw,52px) 24px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(58% 78% at 26% 50%, rgba(158,29,10,.2), transparent 68%),
    linear-gradient(180deg,rgba(13,21,35,.62),rgba(8,9,11,.3));
}
.stage__in{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.6vw,46px);align-items:center;
}
.stage__art{display:flex;justify-content:center}
.stage__art img{
  width:100%;max-width:440px;height:auto;
  filter:drop-shadow(0 16px 44px rgba(0,0,0,.72)) drop-shadow(0 0 30px rgba(158,29,10,.3));
}
.stage__txt h2{font-size:clamp(2.4rem,5.4vw,4rem);color:var(--cream)}
.stage__txt p{color:var(--muted);font-size:1.03rem}
.stage__note{
  display:inline-block;margin:6px 0 0;padding:6px 14px;
  font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tan);border:1px dashed rgba(170,147,119,.42);border-radius:var(--rad);
}
@media (max-width:860px){
  .stage__in{grid-template-columns:1fr;text-align:center}
  .stage__txt .kicker{margin-bottom:10px}
  .stage__art img{max-width:340px}
}

/* ===================== Bands ===================== */
.band{padding:clamp(32px,4.2vw,52px) 24px}
.band--alt{
  background:linear-gradient(180deg,rgba(13,21,35,.5),rgba(8,9,11,.2));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.head{max-width:700px;margin:0 auto clamp(22px,2.6vw,32px);text-align:center}
.head h2{font-size:clamp(1.9rem,4vw,3rem);color:var(--cream)}
.head p{color:var(--muted);margin:0}

/* ===================== Network tiles — big logos ===================== */
.tiles{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;max-width:960px;margin:0 auto;
}
@media (max-width:820px){.tiles{grid-template-columns:1fr}}
.tile{
  background:var(--ink3);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.tile:hover{transform:translateY(-4px);border-color:rgba(196,53,28,.6);box-shadow:0 16px 40px -14px rgba(0,0,0,.85)}
.tile__logo{
  /* generous logo stage — these read as brand marks, not favicons */
  min-height:250px;padding:30px 26px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(70% 80% at 50% 45%, rgba(22,35,58,.85), rgba(8,9,11,.92));
  border-bottom:1px solid var(--line2);
}
.tile__logo img{max-height:186px;width:auto;max-width:100%;object-fit:contain}
.tile__body{padding:26px;display:flex;flex-direction:column;gap:9px;flex:1}
.tile__body h3{font-size:1.4rem;margin:0;color:var(--cream);font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;letter-spacing:.03em}
.tile__body p{color:var(--muted);font-size:.95rem;margin:0;flex:1}
.tag{
  font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-hi);
}
.arrow{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.arrow::after{content:" \2192";transition:margin .15s}
.arrow:hover{color:var(--red-hi)}
.arrow:hover::after{margin-left:4px}

/* ===================== Partner (NPTV) ===================== */
.partner{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(24px,4vw,46px);align-items:center;
  max-width:880px;margin:0 auto;padding:clamp(26px,3.5vw,40px);
  background:var(--ink3);border:1px solid var(--line);border-radius:var(--rad);
}
.partner__logo{display:flex;align-items:center;justify-content:center}
.partner__logo img{max-height:152px;width:auto;max-width:100%;object-fit:contain}
.partner__txt p{color:var(--muted);margin:0 0 12px}
@media (max-width:760px){
  .partner{grid-template-columns:1fr;text-align:center}
  .partner__logo img{max-height:96px}
}

/* ===================== Values ===================== */
.vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:960px){.vals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vals{grid-template-columns:1fr}}
.val{padding:24px;background:var(--ink3);border:1px solid var(--line);border-radius:var(--rad)}
.val h4{font-size:1rem;margin:0 0 7px;color:var(--cream);letter-spacing:.02em}
.val p{font-size:.9rem;color:var(--muted);margin:0}
.val a{color:var(--tan);font-weight:700}
.val a:hover{color:var(--cream)}

/* ===================== Prose ===================== */
.prose{max-width:720px}
.prose p{color:var(--muted);font-size:1.04rem}
.prose h2{font-size:clamp(1.6rem,3.2vw,2.3rem);color:var(--cream);margin-top:1.7em}

/* ===================== Page hero ===================== */
.phero{
  padding:clamp(24px,3vw,38px) 24px clamp(18px,2.2vw,26px);
  text-align:center;border-bottom:1px solid var(--line);
  background:radial-gradient(60% 100% at 50% 0%, rgba(158,29,10,.14), transparent 70%);
}
.phero h1{font-size:clamp(2.2rem,5.4vw,3.7rem);color:var(--cream)}
.phero p{color:var(--muted);max-width:640px;margin:0 auto}
/* Anthony 2026-08-17: "$1 from every ticket donated to veterans... bolder,
   all caps, military font" — the site's own display face, not a copy tweak
   on the regular muted tagline. */
.phero__tag{
  font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  font-size:clamp(1.05rem,2.6vw,1.4rem);letter-spacing:.04em;
  color:var(--cream);max-width:640px;margin:0 auto;
}
/* Logo-only page header (channels): the mark IS the header — no kicker, no
   display headline, no lead paragraph (Anthony 2026-08-12). */
.phero--mark{padding:clamp(18px,2.4vw,30px) 24px clamp(14px,1.8vw,22px)}
.phero--mark .hero__mark{margin:0}
.band--tight{padding-top:clamp(18px,2.4vw,28px)}

/* ===================== Contact ===================== */
.cgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,58px);align-items:start;max-width:980px}
@media (max-width:820px){.cgrid{grid-template-columns:1fr}}
.form{display:flex;flex-direction:column;gap:16px}
.hp{position:absolute;left:-9999px}
.row{display:flex;flex-direction:column;gap:7px}
.row label{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tan)}
.form input,.form select,.form textarea{
  width:100%;padding:13px 15px;border-radius:var(--rad);
  border:1px solid var(--line);background:rgba(8,9,11,.72);color:var(--text);
  font-size:.95rem;font-family:inherit;transition:border-color .15s,background .15s;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--red-hi);background:rgba(13,21,35,.6);
}
/* Square Web Payments SDK card container — deliberately LIGHT and distinct
   from the dark form around it, matching the proven pattern already live on
   NPMS (nonprofitmediasolutions.org/WORKING/NPMS_MIGRATION _build_mirror.py,
   .co-paybox + .co-secure) rather than inventing a new look. Anthony
   2026-08-17: "rework the credit card box to be a lighter color and stand
   out from the page as if it's NOT built in... it just looks better without
   this clunky shit" — a payment box that visibly belongs to a named,
   recognized processor reads as MORE trustworthy, not less; themeing it to
   match the page (a prior pass, since reverted) is what actually broke
   card.attach() outright. Never re-add a payments.card({style}) override —
   see the entry above this file's project memory. */
.co-paybox{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:10px;border:1px solid #d8e2ef;background:#fff}
/* Name + email now live INSIDE the white box too (Anthony 2026-08-17: "put
   the name and email in the square box to make it look more cohesive") --
   one payment card, not a dark form with a light box bolted underneath. */
.co-paybox .row label{color:#6b7a90}
.co-paybox .form input{
  background:#f7f9fc;border-color:#d8e2ef;color:#1c2733;
}
.co-paybox .form input:focus{background:#fff;border-color:#3e7bfa}
.co-paybox .form input::placeholder{color:#9aa7b8}
/* Square's card iframe measured with a real minimum width (~248px live on a
   375px mobile viewport) that CSS max-width can't shrink below -- recover
   width from the ancestor paddings instead of fighting the iframe directly,
   and keep a scroll fallback so it can never spill past its own box. */
#pay-methods{overflow-x:auto;display:flex;flex-direction:column;gap:10px}
.co-or{display:flex;align-items:center;gap:10px;margin:0;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9aa7b8}
.co-or::before,.co-or::after{content:"";flex:1;height:1px;background:#e3e9f1}
#cash-app-pay{min-height:40px}
@media (max-width:520px){
  .pvbox{padding:24px 14px 22px}
  .co-paybox{margin:0 -6px;padding:12px 8px}
}
/* Square's iframe sets width:100% but has been observed rendering wider
   than its own container at narrow viewports (measured live on a 375px
   mobile viewport: iframe 248px inside a 195px #card-container — a real,
   confirmed bug, not a guess). Force it to respect its box on every size. */
#card-container iframe{max-width:100% !important}
.co-secure{
  display:flex;align-items:center;justify-content:center;gap:7px;margin:0;
  padding:9px 0 10px;border-top:1px solid #eef2f8;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.72rem;color:#6b7a90;
}
.co-secure img{height:14px;width:auto;display:block}
.form textarea{resize:vertical;min-height:130px}
.form .btn{align-self:flex-start;margin-top:4px}
.cside{display:flex;flex-direction:column;gap:14px}
.status{font-size:.9rem;min-height:1.4em;margin:0}
.status.ok{color:#86c88f}
.status.err{color:#e08a7d}
.note{font-size:.78rem;color:var(--muted2);margin:0}

/* ===================== CTA ===================== */
.cta{
  text-align:center;padding:clamp(34px,4.2vw,54px) 24px;
  border-top:1px solid var(--line);
  background:radial-gradient(60% 100% at 50% 100%, rgba(158,29,10,.16), transparent 70%);
}
.cta h2{font-size:clamp(1.8rem,3.8vw,2.8rem);color:var(--cream)}
.cta p{color:var(--muted);max-width:540px;margin:0 auto 28px}

/* ===================== Footer ===================== */
.foot{border-top:1px solid var(--line);padding:32px 24px 22px;background:rgba(5,5,6,.6)}
.foot__in{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:36px;
}
@media (max-width:760px){.foot__in{grid-template-columns:1fr;gap:28px}}
.foot__brand p{color:var(--muted);font-size:.87rem;margin:14px 0 0;max-width:300px}
.foot__col b{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tan);margin-bottom:13px;
}
.foot__col a,.foot__flat{display:block;font-size:.9rem;color:var(--muted);margin-bottom:9px}
.foot__col a:hover{color:var(--cream)}
.tiny{font-size:.74rem;color:var(--muted2)}
.foot__bar{
  max-width:var(--maxw);margin:34px auto 0;padding-top:22px;border-top:1px solid var(--line2);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.78rem;color:var(--muted2);
}

/* ===================== Channel flags + player + guide =====================
   Flag geometry mirrors onthemarctv.com's .ch-tile: 2:3 portrait, hairline
   border, per-channel background, logo contained, bottom gradient label band
   carrying the channel name + live NOW line. Gold there, BFGM red here. */
.chwrap{max-width:1180px;margin:0 auto}
/* Channel flags: geometry copied EXACTLY from onthemarctv.com's .ch-tile /
   .ch-scroller — 150px wide, aspect-ratio 2/3, 10px radius, 10px gap, 2px image
   padding, same label-band metrics. Only the accent colour changes (BFGM red for
   OTM gold). Do NOT re-stretch these to fill the container width: tiles that
   flex to fill end up ~215px and no longer match OTM, and the logos float in
   dead space. Fixed width + `safe center` is the whole point. */
/* Tile SIZE is OTM-exact and fixed (150x225) — never scale it to fill. The rail
   instead spreads those fixed tiles across the same 900px column the player and
   guide use, so the row spans the content width and everything lines up. Going
   OTM-exact without this leaves five small tiles clustered in a wide empty band. */
.flags{
  /* Cap must suit the channel COUNT, or Forward Ops stops being visually centred.
     4 tiles x 150 + 1 signature tile x 176 + 4 x 10px gaps = 816px of content;
     920px spreads them evenly (~26px apart). align-items:center keeps the
     larger signature tile balanced against the rest instead of top-aligned.
     Recompute this whenever a channel is added or removed. */
  display:flex;gap:10px;justify-content:space-between;align-items:center;
  max-width:920px;margin:0 auto 18px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  padding:2px 4px 6px;scrollbar-width:none;
}
@media (max-width:1120px){.flags{justify-content:safe center}}
.flags::-webkit-scrollbar{display:none}
.flag{
  position:relative;flex:0 0 150px;width:150px;aspect-ratio:2/3;
  border:1px solid rgba(196,53,28,.34);border-radius:10px;overflow:hidden;
  background:var(--ink3);padding:0;cursor:pointer;scroll-snap-align:start;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
@media (max-width:640px){
  .flag{flex:0 0 calc((100vw - 86px)/3);width:calc((100vw - 86px)/3)}
}
/* per-tile background is set inline from the channel config, like OTM */
.flag:hover{transform:translateY(-3px);border-color:rgba(196,53,28,.85)}
/* Forward Ops is the signature network: ALWAYS centre, and deliberately larger
   than the rest so it stands out (Anthony 2026-08-12). Grown from the shared
   150x225 to 176x264 — same 2:3 shape, ~17% bigger — and vertically centred
   against the others via the rail's align-items. */
.flag--signature{
  flex:0 0 176px;width:176px;
  border-color:rgba(196,53,28,.9);
  box-shadow:0 0 0 2px rgba(196,53,28,.45),0 14px 32px -10px rgba(196,53,28,.65);
}
@media (max-width:640px){
  .flag--signature{
    flex:0 0 calc((100vw - 86px)/3 * 1.17);
    width:calc((100vw - 86px)/3 * 1.17);
  }
}
.lineup__cta{display:flex;justify-content:center;margin-top:6px}
.flag.active{
  border-color:var(--red-hi);
  box-shadow:0 0 0 2px rgba(196,53,28,.55),0 12px 26px -8px rgba(196,53,28,.5);
}
.flag img{width:100%;height:100%;object-fit:contain;padding:2px;transition:transform .35s;display:block}
.flag:hover img{transform:scale(1.04)}
.flag__live{
  position:absolute;top:6px;left:6px;z-index:3;
  font-size:.46rem;font-weight:800;letter-spacing:.12em;
  padding:2px 5px;border-radius:3px;background:var(--red);color:#fff;
}
.flag__band{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:6px 8px 7px;
  background:linear-gradient(180deg,transparent 0%,rgba(8,8,10,.96) 55%);
  display:block;text-align:left;
}
.flag__name{
  display:block;font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  font-size:.9rem;line-height:1;color:#fff;letter-spacing:.04em;
}
.flag__now{
  display:block;font-family:'Inter',sans-serif;font-size:.56rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--red-hi);
  margin-top:3px;min-height:.7rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Guide sits BELOW the player, not beside it (Anthony 2026-08-12). */
.stagegrid{display:block;max-width:900px;margin:0 auto}
.stagegrid > * + *{margin-top:18px}
.pbox{background:#000;border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative}
.pbox video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.pmsg{
  position:absolute;inset:auto 0 0 0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:.9rem;color:var(--cream);padding:0 18px;
  text-shadow:0 2px 8px #000;pointer-events:none;
}
.phead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:14px 2px 0}
.phead h3{
  font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;font-size:1.5rem;
  margin:0;color:var(--cream);letter-spacing:.03em;
}
.phead .nowline{font-size:.84rem;color:var(--muted);margin:0}
.phead .nowline b{color:var(--red-hi);font-weight:800;letter-spacing:.08em;font-size:.7rem;text-transform:uppercase;margin-right:6px}
.phead a{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tan);margin-left:auto}
.phead a:hover{color:var(--cream)}

.guide{background:var(--ink3);border:1px solid var(--line);border-radius:8px;padding:16px 6px 10px 16px}
.guide h4{
  font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tan);margin:0 0 12px;
}
.rail{list-style:none;margin:0;padding:0 10px 0 0;max-height:300px;overflow-y:auto}
@media (max-width:640px){.rail{max-height:250px}}
.rail__i{display:flex;align-items:baseline;gap:9px;padding:6px 0;border-bottom:1px solid var(--line2);font-size:.86rem}
.rail__t{flex:0 0 66px;font-size:.72rem;color:var(--muted2);font-variant-numeric:tabular-nums}
.rail__n{color:var(--text);overflow:hidden;text-overflow:ellipsis}
.rail__i.past{opacity:.4}
.rail__i.live .rail__n{color:var(--cream);font-weight:700}
.rail__i.live .rail__t{color:var(--red-hi);font-weight:800}
.rail__i.kind-ad,.rail__i.kind-psa{font-size:.76rem}
.chip{
  flex:none;font-size:.5rem;font-weight:800;letter-spacing:.12em;
  padding:1px 5px;border-radius:3px;
}
.chip--ad{background:rgba(196,53,28,.18);color:#e08a7d}
.chip--psa{background:rgba(120,200,140,.2);color:#86d99b}
.rail__empty{color:var(--muted2);font-size:.86rem;margin:0;padding:6px 0}

/* ===================== PPV Checkout (Forward Ops) =====================
   One box, not a video-placeholder/ask split — the placeholder read as dead
   space (Anthony 2026-08-17: "remove vod box, it's horrible"). Text sized up
   and padding cut across this page only per the same note ("text slightly
   larger and less padding everywhere, too much dead space") —
   .phero--checkout/.band--checkout scope the tightened spacing to this page
   family without touching the shared .phero/.band used sitewide. */
.phero--checkout{padding:clamp(16px,2vw,22px) 24px clamp(10px,1.4vw,14px)}
.band--checkout{padding:clamp(16px,2.2vw,26px) 24px}
/* Event video + pay box side by side, equal size (Anthony 2026-08-17: real
   veteran video replaces the mock poster — "use this as the video next to
   the payment and put a title over it in large text 'EVENT' ... video
   playing below it"). Title is its own flex row above the video, not an
   overlay on top of it — "below it" is literal. Self-hosted, transcoded to
   the fleet encode standard (720p/24fps/2.0Mbps, audio stripped since
   muted-autoplay is required by every browser and the source audio could
   never be heard anyway — see feedback_encoding_rules). Grid stretch still
   makes both columns match height; the video fills whatever height remains
   under the title via flex:1 + object-fit:cover, same technique the poster
   used. */
.ppvgrid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,36px);max-width:1080px;margin:0 auto;
}
@media (max-width:760px){.ppvgrid{grid-template-columns:1fr}}
.ppvevent{
  display:flex;flex-direction:column;
  border-radius:var(--rad);overflow:hidden;
  border:1px solid var(--line);box-shadow:0 24px 54px -26px rgba(0,0,0,.7);
  background:var(--ink3);min-height:280px;
}
.ppvevent__title{
  flex:none;padding:16px 20px 10px;text-align:center;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(158,29,10,.18),transparent);
  font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:.08em;color:var(--cream);
}
.ppvevent__videowrap{position:relative;flex:1;min-height:0}
.ppvevent__video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
/* Real audio track is kept in the file (Anthony: "keep audio i hope"), but
   autoplay must stay muted -- every browser blocks unmuted autoplay outright,
   no exceptions. This button is the only way a visitor ever hears it. */
.ppvevent__mute{
  position:absolute;right:12px;bottom:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,9,11,.72);border:1px solid rgba(247,238,222,.25);color:var(--cream);
  transition:background .15s,border-color .15s;
}
.ppvevent__mute svg{width:18px;height:18px}
.ppvevent__mute:hover{background:rgba(158,29,10,.6);border-color:var(--red-hi)}
.ppvevent__mute.is-unmuted{background:rgba(158,29,10,.75);border-color:var(--red-hi)}
@media (max-width:760px){.ppvevent{min-height:220px}}
/* Top hairline reuses the same gradient-border technique as .sitemenu, so the
   box reads as designed rather than a plain bordered div (Anthony 2026-08-17:
   "dress up the graphics around the purchase boxes... make it pretty"). */
.pvbox{
  background:var(--ink3);border:1px solid var(--line);border-top:2px solid;
  border-image:linear-gradient(90deg,rgba(196,53,28,0),var(--red-hi) 30%,var(--red-hi) 70%,rgba(196,53,28,0)) 1;
  border-radius:var(--rad);padding:24px 26px 22px;
  box-shadow:0 24px 54px -26px rgba(0,0,0,.7);
}

/* Real ticket graphic (Anthony 2026-08-17: "use the ticket graphic for the
   one below... use this image instead, it has the logos burned in"). The
   actual file he supplied (\\NPTVSERVER\backup\CONTENT UPDATES NAS\FINAL
   COPIES\Blank Ticket with Logos.png, 1672x941, BFGM + Forward Ops logos
   already in the art) — cropped tight to its real content bbox (measured by
   scanning for non-background pixels: left=18 top=120 right=1659 bottom=792
   in the original) and re-encoded as WebP (274KB vs 1.9MB PNG, same visual
   quality at q90 — this loads on a payment page, size matters). Source
   copied to bravofoxtrotglobalmedia.com/SOURCE_ASSETS/ (local only, not
   deployed — the cropped/compressed derivative is the only copy served
   publicly). Field percentages below are exact: scanned the cropped image
   for cream (230,216,187) pixel runs row-by-row to find each field's real
   pixel rect, then divided by the crop's own 1642x673 size — NOT eyeballed
   off the reference picture. They only stay correct if .pvticket keeps
   aspect-ratio:1642/673 and the image is never re-cropped without redoing
   this measurement. */
/* container-type makes .pvticket a query container -- text sizes below use
   cqw (% of THIS element's own rendered width) instead of viewport-width
   media queries. Necessary because the ticket's rendered width no longer
   tracks the page viewport 1:1 once it started sharing a row with the
   poster (.ppvgrid) — a media query keyed on page width let the code field
   text overflow its box at ordinary desktop widths where the ticket itself
   is actually narrow (measured live: ticket only ~444px wide at a 1280px
   viewport). cqw scales with the field percentages automatically since
   both are fractions of the same box, so this class of mismatch can't
   recur regardless of what else shares the row with the ticket. */
.pvticket{
  container-type:inline-size;
  position:relative;aspect-ratio:1642/673;margin-bottom:16px;
  background:url("/assets/img/ppv-ticket.webp") center/100% 100% no-repeat;
}
.pvticket__field{position:absolute;display:flex;flex-direction:column;justify-content:center;padding:0 3%;overflow:hidden}
.pvticket__label{font-size:clamp(.32rem,1.5cqw,.56rem);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a7a52;line-height:1;margin-bottom:1px}
.pvticket__val{font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;font-size:clamp(.48rem,2.6cqw,.9rem);line-height:1.05;color:#241f14;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvticket__field--name{left:14.98%;top:28.08%;width:64.98%;height:12.93%}
.pvticket__field--price{left:14.98%;top:45.02%;width:31.43%;height:11.29%}
.pvticket__field--issued{left:48.11%;top:45.02%;width:31.85%;height:11.29%}
.pvticket__field--event{left:14.98%;top:59.88%;width:31.43%;height:11.44%}
/* Email addresses run long and Bebas Neue's condensed caps make @ and .
   hard to tell apart at a glance — a compact body font at a smaller size
   fits real addresses instead of just truncating them (Anthony 2026-08-17:
   "email addresses that are long need to fit"). */
.pvticket__field--email{left:48.11%;top:59.88%;width:31.85%;height:11.44%}
.pvticket__field--email .pvticket__val{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(.36rem,2cqw,.68rem);letter-spacing:0}
.pvticket__field--code{left:14.98%;top:74.89%;width:64.98%;height:15.16%;justify-content:flex-start;padding-top:1.5%}
.pvticket__code{font-size:clamp(.6rem,3.1cqw,1.15rem);font-weight:800;letter-spacing:.02em;color:#8a2210}
/* Same "larger text, less padding" note, scoped to .pvbox so the shared
   .form/.btn used by /contact/ is untouched. */
.pvbox .form{gap:12px}
.pvbox .row{gap:5px}
.pvbox .row label{font-size:.76rem}
.pvbox .form input{font-size:1.02rem;padding:12px 14px}
.pvbox .btn{font-size:.9rem;padding:14px 26px}
/* Anthony 2026-08-17: "the payment box should look symetrical as much as
   possible" — the buy button was pinned left (.btn--buy's sitewide
   align-self:flex-start, correct for the old checkout-only page) under
   full-width fields above it. Stretching it to match reads as one
   consistent column instead of a left-hung button under a centered card.
   Kicker centered for the same reason — everything below it is centered. */
.pvbox .btn--buy{align-self:stretch;width:100%}
.pvbox > .kicker{text-align:center}

/* Green "Buy" action, distinct from the brand-red .btn--red — a commerce
   action reads as a different color family than navigation/marketing CTAs.
   Click gives a tactile pop before the page navigates (real navigation, not
   a same-page swap — Anthony: "sends to next page of transaction"). */
.btn--buy{
  background:linear-gradient(180deg,#2fbf5f,#1f9c48);color:#fff;
  box-shadow:0 5px 20px -6px rgba(31,156,72,.85);align-self:flex-start;margin-top:4px;
}
.btn--buy:hover{transform:translateY(-2px);box-shadow:0 9px 26px -6px rgba(47,191,95,.95)}
.btn--buy:disabled{opacity:.85;cursor:default;transform:none}
@keyframes buyPop{0%{transform:scale(1)}40%{transform:scale(.92)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
.btn--buy-clicked{animation:buyPop .32s ease}

/* Confirmation stage (/checkout/confirmed/) */
.pvstep--next{text-align:center;padding:22px 10px}
.pvstep--next h3{font-size:1.6rem;color:var(--cream);margin:0 0 10px;font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif}
.pvstep--next p{color:var(--muted);font-size:.92rem;max-width:420px;margin:0 auto 10px}
.pvstep--next b{color:var(--cream)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}