/* ============================================================
   Faithful Fitness — "FIGHT CARD EDITORIAL"
   Registry-distinct identity: Bebas Neue fight-poster caps +
   Instrument Sans body. Ink navy / chalk / champagne gold from
   their real logo (navy F, gold cross). Sharp corners, gold
   hairlines, corner ticks, rope rules, round-number sections.
   Signature components: mantra marquee, round headers, taped
   results cards, fight-card pricing, corner-tick media frames.
   ============================================================ */
:root{
  --font-head:'Bebas Neue',Impact,sans-serif;
  --font-body:'Instrument Sans',-apple-system,sans-serif;
  --cap-font:var(--font-body);
  --h1-min:56px;--h1-vw:8.5vw;--h1-max:118px;--h1-lh:.92;--h1-ls:1px;--h1-w:400;
  --h2-min:38px;--h2-vw:5vw;--h2-max:64px;--h2-lh:.95;--h2-ls:.5px;--h2-w:400;--h3-w:400;
  --maxw:1180px;--section-y:clamp(68px,9vw,128px);

  --ink:#0b1226;--body:#232c42;--mut:#5a6379;
  --bg:#f5f2ea;--bg-soft:#ece8dc;--line:#d9d3c2;
  --brand:#0b1226;--accent:#b08c1e;--accent-2:#e3bc4a;
  --pit:#070c1c;

  --nav-fg:rgba(255,255,255,.94);--nav-fg-scrolled:var(--ink);--nav-bg-scrolled:rgba(245,242,234,.97);
  --menu-bg:var(--pit);--menu-fg:#f5f2ea;
  --foot-bg:var(--pit);--foot-fg:#8d94a8;--foot-rule:var(--accent);
  --foot-cols:2fr 1fr 1.1fr 1.3fr;
  --head-overlay-a:rgba(7,12,28,.66);--head-overlay-b:rgba(7,12,28,.9);
  --check-glyph:"▸";
  --hero-vh:92vh;--hero-cap:940px;

  --hero-scrim:linear-gradient(180deg,rgba(7,12,28,.5) 0%,rgba(7,12,28,.42) 45%,rgba(7,12,28,.86) 100%);
  --img-grade:contrast(1.05) saturate(.96);
  --shadow:0 26px 60px rgba(11,18,38,.22);--shadow-sm:0 10px 26px rgba(11,18,38,.12);
  --radius:2px;--btn-radius:2px;
  --nav-h:88px;--nav-h-scrolled:64px;--ul-h:2px;
  --reveal-ease:cubic-bezier(.19,1,.22,1);
}
h1,h2,h3{font-family:var(--font-head);text-transform:uppercase}
h1 em,h2 em{font-style:normal;color:var(--accent-2)}
body{background:var(--bg);color:var(--body)}
.section h2 em{color:var(--accent)}
.btn{font-family:var(--font-head);font-size:19px;letter-spacing:2.5px;text-transform:uppercase;padding:15px 30px 13px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 14px 30px rgba(176,140,30,.35)}
.btn-primary:hover{background:#9a7a18}
.btn-line{border:1px solid rgba(227,188,74,.55);color:#f5f2ea}
.section .btn-line{border-color:var(--accent);color:var(--ink)}
.eyebrow{font-family:var(--font-body);font-weight:700;letter-spacing:4.5px;font-size:12px;color:var(--accent)}

/* logo / wordmark */
.logo{display:flex;align-items:center;gap:13px}
.logo .mark{height:48px;width:auto}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wm-name{font-family:var(--font-head);font-size:25px;letter-spacing:2px;color:#fff}
.wm-sub{font-size:10px;font-weight:700;letter-spacing:3.6px;text-transform:uppercase;color:var(--accent-2);margin-top:3px}
.nav.scrolled .wm-name{color:var(--ink)}
.nav.scrolled .wm-sub{color:var(--accent)}
.nav .mark-dark{display:none}
.nav.scrolled .mark-light{display:none}
.nav.scrolled .mark-dark{display:block}
.nav .cta{font-family:var(--font-head);font-size:17px;letter-spacing:2px;background:var(--accent);color:#fff;border-radius:2px}
.nav .links a{font-weight:600;letter-spacing:.3px;font-size:15px}
@media(min-width:1100px){.nav .links{gap:clamp(18px,2vw,30px)}}
@media(max-width:1280px){.wm-sub{display:none}.wm-name{font-size:22px}}

/* hero */
.hero{background:var(--pit)}
.hero video.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.hero .scrim{background:var(--hero-scrim)}
.hero .wrap{padding-bottom:clamp(54px,7vw,96px)}
.hero h1{color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.hero .lead{color:#dfe3ee;max-width:56ch;margin:18px 0 30px;font-size:clamp(16px,1.9vw,19px)}
.heroline{display:inline-flex;align-items:center;gap:14px;font-family:var(--font-head);font-size:17px;letter-spacing:3px;color:var(--accent-2);text-transform:uppercase}
.heroline::before{content:"";width:52px;height:2px;background:var(--accent-2)}

/* SIGNATURE 1 — hero stage: fight-poster copy + Coach Bernie video side by side */
.herogrid{display:grid;grid-template-columns:1.15fr minmax(280px,375px);grid-template-areas:"copy vid" "act vid";gap:0 clamp(30px,4.5vw,72px);align-items:center;width:100%}
.herocopy{grid-area:copy;align-self:end}
.herovid{grid-area:vid}
.heroact{grid-area:act;align-self:start;margin-top:30px}
.hero--stage .wrap{padding-top:clamp(120px,14vh,170px)}
.herovid{position:relative}
.herovid .vidtag{font-family:var(--font-head);letter-spacing:3px;font-size:15px;color:var(--accent-2);text-transform:uppercase;margin:0 0 12px;text-align:center}
.hero--stage .phoneframe{margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(227,188,74,.25)}
.herometa{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px}
.herometa span{font-family:var(--font-head);letter-spacing:2px;font-size:14px;color:#cfd4e2;border-left:2px solid var(--accent-2);padding-left:10px}
.herometa b{color:var(--accent-2);font-weight:400}
@media(max-width:980px){
  .herogrid{grid-template-columns:1fr;grid-template-areas:"copy" "vid" "act";gap:34px 0}
  .heroact{margin-top:0}
  .hero--stage{--hero-vh:100vh;--hero-cap:1400px;--hero-vh-m:200vh;--hero-cap-m:1400px;padding-bottom:56px}
  .hero--stage .phoneframe{max-width:320px}
  .herovid .vidtag{text-align:center}
}

/* SIGNATURE 2 — mantra marquee ribbon */
.marquee{background:var(--pit);border-top:1px solid rgba(227,188,74,.35);border-bottom:1px solid rgba(227,188,74,.35);overflow:hidden;padding:16px 0;position:relative}
.marquee .mq{display:flex;width:max-content;animation:mq 30s linear infinite}
.marquee span{font-family:var(--font-head);font-size:clamp(20px,2.6vw,28px);letter-spacing:4px;color:#f5f2ea;white-space:nowrap;padding:0 28px;position:relative}
.marquee span::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;transform:translateY(-50%) rotate(45deg);background:var(--accent)}
.marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(227,188,74,.8)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee .mq{animation:none}}

/* SIGNATURE 3 — round-number section headers + rope rule */
.round{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(26px,4vw,44px)}
.round .rnum{font-family:var(--font-head);font-size:clamp(15px,1.6vw,18px);letter-spacing:3px;color:var(--accent);border:1px solid var(--accent);padding:6px 12px 4px;white-space:nowrap}
.round h2{margin:0}
.roperule{height:1px;background:repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 22px);opacity:.55;margin:clamp(40px,6vw,72px) auto;max-width:var(--maxw)}

/* dark band */
.darkband{background:var(--pit);color:#e8e4d8;position:relative;overflow:hidden}
.darkband h2,.darkband h3{color:#fff}
.darkband .eyebrow{color:var(--accent-2)}
.darkband p{color:#c4c9d6}
.darkband video.bandvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
.darkband .wrap{position:relative;z-index:2}

/* SIGNATURE 4 — taped transformation cards */
.tapewall{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2.4vw,28px);align-items:start}
.tapecard{background:#fff;padding:12px 12px 18px;box-shadow:var(--shadow-sm);transform:rotate(var(--tilt,-1.1deg));transition:transform .45s var(--reveal-ease),box-shadow .45s;position:relative}
.tapecard:nth-child(2n){--tilt:1.2deg}
.tapecard:nth-child(3n){--tilt:-.6deg}
.tapecard:hover{transform:rotate(0) translateY(-6px);box-shadow:var(--shadow)}
.tapecard::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);width:96px;height:26px;background:rgba(227,188,74,.75);box-shadow:0 2px 6px rgba(11,18,38,.18)}
.tapecard img{width:100%;height:auto;max-height:400px;object-fit:contain;background:#fff}
.tapecard figcaption{font-family:var(--font-head);letter-spacing:2px;font-size:16px;color:var(--ink);margin-top:12px;text-align:center}

/* SIGNATURE 5 — fight-card pricing */
.bouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.6vw,30px);align-items:stretch}
.bout{background:#fff;border:1px solid var(--line);border-top:4px solid var(--ink);padding:34px 30px 30px;display:flex;flex-direction:column;position:relative;transition:transform .4s var(--reveal-ease),box-shadow .4s}
.bout:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.bout.main{border-top-color:var(--accent);background:var(--pit);color:#e8e4d8}
.bout.main h3,.bout.main .price{color:#fff}
.bout.main li{color:#c4c9d6;border-color:rgba(227,188,74,.18)}
.bout .tag{position:absolute;top:-15px;left:26px;font-family:var(--font-head);letter-spacing:2.5px;font-size:14px;background:var(--accent);color:#fff;padding:6px 14px 4px}
.bout h3{font-size:clamp(24px,2.6vw,30px);letter-spacing:1.5px;margin:0 0 4px}
.bout .price{font-family:var(--font-head);font-size:clamp(40px,4.5vw,54px);color:var(--ink);line-height:1;margin:10px 0 2px}
.bout .price small{font-size:19px;letter-spacing:1.5px;color:var(--mut)}
.bout.main .price small{color:#8d94a8}
.bout .per{font-size:12.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.bout ul{list-style:none;margin:0 0 24px;padding:0;flex:1}
.bout li{padding:9px 0 9px 24px;border-bottom:1px solid var(--line);position:relative;font-size:15px}
.bout li::before{content:"▸";position:absolute;left:2px;color:var(--accent)}
.bout .btn{width:100%;text-align:center}

/* corner-tick media frame */
.tickframe{position:relative;padding:14px}
.tickframe::before,.tickframe::after{content:"";position:absolute;width:34px;height:34px;border:2px solid var(--accent)}
.tickframe::before{top:0;left:0;border-right:0;border-bottom:0}
.tickframe::after{bottom:0;right:0;border-left:0;border-top:0}
.tickframe img,.tickframe video{display:block;width:100%}

/* class strip cards */
.classgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(16px,2.2vw,26px)}
.classcard{background:var(--pit);color:#fff;padding:0;position:relative;overflow:hidden;min-height:330px;display:flex;align-items:flex-end}
.classcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .8s var(--reveal-ease),opacity .5s}
.classcard:hover img{transform:scale(1.06);opacity:.42}
.classcard .cc{position:relative;z-index:2;padding:56px 24px 24px;background:linear-gradient(180deg,rgba(7,12,28,0) 0%,rgba(7,12,28,.72) 22%,rgba(7,12,28,.97) 62%);width:100%}
.classcard h3,.classcard .pr{text-shadow:0 2px 12px rgba(7,12,28,.9)}
.classcard h3{font-size:27px;letter-spacing:1.5px;margin:0 0 4px}
.classcard p{font-size:14px;color:#c4c9d6;margin:0 0 6px}
.classcard .pr{font-family:var(--font-head);color:var(--accent-2);letter-spacing:2px;font-size:17px}

/* quote cards */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,2.4vw,28px)}
.quote{background:#fff;border-left:3px solid var(--accent);padding:26px 26px 22px;box-shadow:var(--shadow-sm)}
.quote p{font-size:15.5px;margin:0 0 14px}
.quote cite{font-family:var(--font-head);font-style:normal;letter-spacing:2px;font-size:15px;color:var(--ink)}
.quote .stars{color:var(--accent);letter-spacing:3px;margin-bottom:10px;font-size:14px}
.darkband .quote{background:rgba(255,255,255,.05);border-left-color:var(--accent-2)}
.darkband .quote p{color:#dfe3ee}
.darkband .quote cite{color:var(--accent-2)}

/* results big pull-quote figures */
.pull{font-family:var(--font-head);font-size:clamp(28px,4vw,44px);letter-spacing:1px;line-height:1.05;color:var(--ink)}
.pull b{color:var(--accent);font-weight:400}

/* phone-frame reel */
.reelwrap{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.phoneframe{background:var(--pit);border:1px solid rgba(227,188,74,.4);padding:14px;border-radius:34px;box-shadow:var(--shadow);max-width:380px;margin:0 auto}
.phoneframe{position:relative}
.phoneframe video{width:100%;border-radius:22px;display:block}
.soundchip{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-family:var(--font-head);letter-spacing:2px;font-size:16px;background:rgba(7,12,28,.78);color:var(--accent-2);border:1px solid rgba(227,188,74,.6);padding:12px 22px 10px;min-height:46px;display:inline-flex;align-items:center;border-radius:999px;cursor:pointer;z-index:3;transition:background .3s}
.soundchip:hover{background:var(--accent);color:#fff}
@media(max-width:860px){.reelwrap{grid-template-columns:1fr}}

/* stats band — kill the light .stats band from components.css (class kept for the count-up hook) */
.statrow.stats,.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;text-align:center;background:transparent;border-block:0}
.statrow .st b{font-family:var(--font-head);font-size:clamp(44px,5.5vw,66px);color:var(--accent-2);display:block;line-height:1}
.statrow .st span{font-size:12.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#8d94a8}

/* shop grid */
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:clamp(16px,2.2vw,26px)}
.prod{background:#fff;border:1px solid var(--line);padding:0 0 18px;text-align:center;transition:transform .35s var(--reveal-ease),box-shadow .35s}
.prod:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.prod img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.prod h3{font-size:17px;letter-spacing:1.5px;margin:0 8px 4px}
.prod .pr{font-weight:700;color:var(--accent)}

/* schedule table */
.hoursbox{background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent);padding:30px}
.hoursbox table{width:100%;border-collapse:collapse}
.hoursbox td{padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.hoursbox td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.hoursbox .fob{margin-top:14px;font-size:13.5px;color:var(--mut)}

/* splits */
.split2 figure.fig img{filter:var(--img-grade)}
.leadform button{font-family:var(--font-head);letter-spacing:2px;font-size:18px}

/* footer */
.footer .footlogo img{height:74px;width:auto}
.footer h4{font-family:var(--font-head);letter-spacing:2.5px;font-size:17px;color:#f5f2ea}
.footer a:hover{color:var(--accent-2)}
.callbar a.primary{background:var(--accent)}
.callbar{font-family:var(--font-head);letter-spacing:2px}