/* ============ KNOCKOUT FITNESS GOODYEAR — brutalist high-energy ============ */
:root{
  --bg:#0a0a0a;
  --bg-2:#111111;
  --ink:#f4f4f0;
  --ink-dim:#b8b8b0;
  --accent:#ffd400;       /* knockout yellow */
  --accent-ink:#0a0a0a;   /* text on accent */
  --line:#262626;
  --maxw:1180px;
  --pad:20px;
  --radius:4px;
  --tap:48px;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ margin:0; line-height:0.92; letter-spacing:-0.01em }

/* condensed display face */
.hero-title,.sec-title,.brand-text,.stat-num,.price-amt,.marquee span{
  font-family:"Anton","Archivo Narrow",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-ink); padding:12px 18px; font-weight:900;
}
.skip-link:focus{ left:8px; top:8px }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px }

/* ---------------- HEADER ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:10px var(--pad);
  background:rgba(10,10,10,0.9);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:2px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; min-height:var(--tap) }
.brand-mark{ display:flex }
.brand-text{
  font-size:1.15rem; line-height:0.82; letter-spacing:0.01em;
  display:flex; flex-direction:column;
}
.brand-sub{
  font-family:"Archivo",sans-serif; font-weight:700;
  font-size:0.5rem; letter-spacing:0.22em; color:var(--accent); margin-top:3px;
}
.main-nav{ display:none; align-items:center; gap:6px }
.main-nav a{
  font-weight:700; font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:10px 12px; border-radius:var(--radius); color:var(--ink-dim);
}
.main-nav a:hover{ color:var(--ink) }
.nav-cta{
  background:var(--accent); color:var(--accent-ink)!important; font-weight:900!important;
}
.nav-cta:hover{ background:#fff }

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:13px 22px;
  font-weight:900; font-size:0.92rem; letter-spacing:0.03em; text-transform:uppercase;
  border:2px solid var(--accent); border-radius:var(--radius); cursor:pointer;
  transition:transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:5px 5px 0 #000 }
.btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 #000; background:#fff; border-color:#fff }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink) }
.btn-ghost:hover{ background:var(--ink); color:var(--bg); transform:translate(-2px,-2px) }
.btn-block{ width:100% }
.btn-sm{ min-height:44px; padding:10px 16px; font-size:0.82rem }
.btn-lg{ min-height:56px; font-size:1rem }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none } }

/* ---------------- HERO ---------------- */
.hero{
  position:relative; overflow:hidden;
  padding:48px var(--pad) 0;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(255,212,0,0.10), transparent 60%),
    var(--bg);
  border-bottom:2px solid var(--line);
}
.hero-noise{
  position:absolute; inset:0; pointer-events:none; opacity:0.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.hero-inner{ position:relative; max-width:var(--maxw); margin:0 auto }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.hero-eyebrow .dot{ width:9px; height:9px; background:var(--accent); border-radius:50%; box-shadow:0 0 0 4px rgba(255,212,0,.2) }

.hero-title{
  font-size:clamp(3.6rem, 19vw, 9.5rem);
  letter-spacing:-0.02em;
}
.hero-title .line{ display:block; overflow:hidden }
.hero-title .word{ display:inline-block; will-change:transform }
.hero-title .accent{
  color:var(--bg);
  -webkit-text-stroke:2px var(--accent);
  text-shadow:none;
}
@supports not (-webkit-text-stroke:1px #000){ .hero-title .accent{ color:var(--accent) } }

.hero-sub{
  max-width:46ch; margin:22px 0 26px; font-size:1.05rem; color:var(--ink-dim);
}
.hero-sub strong{ color:var(--accent) }
.hero-cta{ display:flex; flex-direction:column; gap:12px; padding-bottom:40px }

/* marquee */
.marquee{
  margin-top:8px; border-top:2px solid var(--accent); border-bottom:2px solid var(--accent);
  background:var(--accent); overflow:hidden; white-space:nowrap;
}
.marquee-track{
  display:inline-flex; align-items:center; gap:0;
  animation:scrollx 22s linear infinite;
}
.marquee span{
  font-size:clamp(1.4rem,5vw,2.4rem); color:var(--accent-ink); padding:8px 18px; letter-spacing:0.02em;
}
.marquee .sep{ color:var(--accent-ink); opacity:0.6; padding:8px 4px }
@keyframes scrollx{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none } }

/* ---------------- STAT BLOCK ---------------- */
.stat-block{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-bottom:2px solid var(--line);
  background:var(--bg-2);
}
.stat{
  padding:26px 18px; text-align:center;
  border-right:2px solid var(--line); border-bottom:2px solid var(--line);
}
.stat:nth-child(2n){ border-right:none }
.stat:nth-child(n+3){ border-bottom:none }
.stat-num{
  display:block; font-size:clamp(2.6rem,12vw,3.6rem); color:var(--accent); line-height:0.9;
}
.stat-label{
  display:block; margin-top:8px; font-weight:700; font-size:0.7rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-dim);
}

/* ---------------- SECTION SCAFFOLD ---------------- */
section{ scroll-margin-top:70px }
.classes,.schedule,.pricing,.about,.reviews,.location,.contact{
  max-width:var(--maxw); margin:0 auto; padding:64px var(--pad);
}
.sec-head{ margin-bottom:36px }
.sec-kicker{
  font-weight:700; font-size:0.7rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px;
}
.sec-title{ font-size:clamp(2.8rem,13vw,5.5rem) }
.sec-title .accent{ color:var(--bg); -webkit-text-stroke:2px var(--accent) }
@supports not (-webkit-text-stroke:1px #000){ .sec-title .accent{ color:var(--accent) } }
.sec-note{ margin:18px 0 0; max-width:54ch; color:var(--ink-dim); font-size:0.95rem }

/* ---------------- CLASSES ---------------- */
.class-grid{ display:grid; grid-template-columns:1fr; gap:14px }
.class-card{
  border:2px solid var(--line); border-radius:var(--radius);
  padding:24px; background:var(--bg-2);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.class-card:hover,.class-card:focus-within{
  border-color:var(--accent); transform:translateY(-4px); box-shadow:6px 6px 0 var(--accent);
}
.class-art{ width:56px; height:56px; margin-bottom:14px }
.class-card h3{ font-size:1.5rem; text-transform:uppercase; letter-spacing:-0.01em; margin-bottom:8px }
.class-card p{ color:var(--ink-dim); font-size:0.95rem; margin:0 0 14px }
.class-tag{
  display:inline-block; font-weight:900; font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-ink); padding:5px 10px; border-radius:2px;
}
.class-card--cta{ background:var(--accent); border-color:var(--accent); display:flex; flex-direction:column; justify-content:center }
.class-card--cta h3,.class-card--cta p{ color:var(--accent-ink) }
.class-card--cta:hover{ box-shadow:6px 6px 0 #000 }

/* ---------------- SCHEDULE ---------------- */
.schedule-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:2px solid var(--line); border-radius:var(--radius) }
.schedule-table{ width:100%; min-width:560px; border-collapse:collapse; font-size:0.86rem }
.schedule-table th,.schedule-table td{
  padding:12px 10px; text-align:center; border-bottom:1px solid var(--line); border-right:1px solid var(--line); white-space:nowrap;
}
.schedule-table thead th{
  background:var(--accent); color:var(--accent-ink); font-weight:900; text-transform:uppercase; letter-spacing:0.05em;
  position:sticky; top:0;
}
.schedule-table tbody th{ background:var(--bg-2); font-weight:900; color:var(--accent) }
.schedule-table td{ color:var(--ink-dim); font-weight:600 }
.schedule-table td.c-box{ color:var(--accent) }
.schedule-table td.c-kick{ color:#fff }
.schedule-table td.c-hiit{ color:#ff5a3c }
.schedule-table td.c-tech{ color:#4ad6ff }
.schedule-table td.c-kids{ color:#9aff5a }
.schedule-legend{ display:flex; flex-wrap:wrap; gap:14px; list-style:none; padding:16px 0 0; margin:0; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em }
.schedule-legend li{ display:flex; align-items:center; gap:7px; color:var(--ink-dim) }
.lg{ width:14px; height:14px; border-radius:2px; display:inline-block }
.lg.c-box{ background:var(--accent) } .lg.c-kick{ background:#fff } .lg.c-hiit{ background:#ff5a3c } .lg.c-tech{ background:#4ad6ff } .lg.c-kids{ background:#9aff5a }

/* ---------------- PRICING ---------------- */
.price-grid{ display:grid; grid-template-columns:1fr; gap:16px }
.price-card{
  position:relative; border:2px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; background:var(--bg-2);
}
.price-card--feat{ border-color:var(--accent); box-shadow:7px 7px 0 var(--accent) }
.price-flag{
  position:absolute; top:-13px; left:24px;
  background:var(--accent); color:var(--accent-ink); font-weight:900; font-size:0.64rem;
  letter-spacing:0.14em; text-transform:uppercase; padding:5px 12px; border-radius:2px;
}
.price-card h3{ font-size:1.4rem; text-transform:uppercase; margin-bottom:6px }
.price{ display:flex; align-items:baseline; gap:8px; margin:0 0 12px }
.price-amt{ font-size:3rem; color:var(--accent); line-height:1 }
.price-per{ font-weight:700; font-size:0.8rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.08em }
.price-desc{ color:var(--ink-dim); font-size:0.92rem; margin:0 0 16px }
.price-feat{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:9px }
.price-feat li{ position:relative; padding-left:24px; font-size:0.9rem; color:var(--ink) }
.price-feat li::before{ content:"›"; position:absolute; left:6px; color:var(--accent); font-weight:900 }

/* ---------------- ABOUT / COACHES ---------------- */
.about{ background:linear-gradient(180deg,transparent, rgba(255,212,0,0.03)) }
.about-grid{ display:grid; grid-template-columns:1fr; gap:36px }
.about-copy p{ color:var(--ink-dim); margin:0 0 16px }
.about-title{ margin-bottom:22px }
.coach-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px }
.coach{
  display:flex; align-items:center; gap:16px;
  border:2px solid var(--line); border-radius:var(--radius); padding:16px; background:var(--bg-2);
  transition:border-color .15s ease;
}
.coach:hover{ border-color:var(--accent) }
.coach-art{ flex:0 0 56px; width:56px; height:56px; background:var(--bg); border-radius:var(--radius); padding:6px }
.coach h3{ font-size:1.15rem; text-transform:uppercase; margin-bottom:3px }
.coach p{ margin:0; color:var(--ink-dim); font-size:0.88rem }

/* ---------------- REVIEWS ---------------- */
.review-grid{ display:grid; grid-template-columns:1fr; gap:16px }
.review{
  margin:0; border:2px solid var(--line); border-left:6px solid var(--accent);
  border-radius:var(--radius); padding:24px; background:var(--bg-2);
}
.review .stars{ color:var(--accent); letter-spacing:3px; margin-bottom:12px; font-size:1.05rem }
.review p{ margin:0 0 14px; font-size:1rem }
.review cite{ font-style:normal; font-weight:700; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-dim) }

/* ---------------- LOCATION ---------------- */
.loc-grid{ display:grid; grid-template-columns:1fr; gap:28px }
.loc-address{ font-style:normal; font-size:1.2rem; font-weight:700; margin:6px 0 18px; line-height:1.4 }
.loc-meta{ list-style:none; padding:0; margin:0 0 14px; display:grid; gap:10px }
.loc-meta li{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:10px; font-size:0.95rem }
.loc-lbl{ font-weight:900; text-transform:uppercase; letter-spacing:0.1em; font-size:0.72rem; color:var(--accent) }
.loc-meta a{ font-weight:700 }
.loc-note{ color:var(--ink-dim); font-size:0.82rem; margin:0 0 18px }
.loc-map{ border:2px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative; aspect-ratio:1/1 }
.map-art{ position:relative; width:100%; height:100% }
.map-art svg{ width:100%; height:100% }
.map-pin-label{
  position:absolute; left:12px; bottom:12px;
  background:var(--accent); color:var(--accent-ink); font-weight:900; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.08em; padding:6px 12px; border-radius:2px;
}

/* ---------------- CONTACT FORM ---------------- */
.contact{ background:var(--bg-2); border-top:2px solid var(--line); max-width:none }
.contact-inner{ max-width:var(--maxw); margin:0 auto }
.free-form{ max-width:560px; display:grid; gap:16px }
.field{ display:grid; gap:7px }
.field label{ font-weight:900; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent) }
.field input,.field select{
  width:100%; min-height:var(--tap); padding:13px 14px;
  background:var(--bg); color:var(--ink); border:2px solid var(--line); border-radius:var(--radius);
  font-size:1rem; font-family:inherit;
}
.field input:focus,.field select:focus{ border-color:var(--accent); outline:none }
.form-status{ font-weight:700; font-size:0.9rem; min-height:1.2em; margin:0 }
.form-status.ok{ color:var(--accent) }
.form-status.err{ color:#ff5a3c }
.form-fine{ font-size:0.78rem; color:var(--ink-dim); margin:0 }

/* ---------------- FOOTER ---------------- */
.site-footer{ border-top:2px solid var(--accent); padding:40px var(--pad); background:var(--bg) }
.foot-top{ max-width:var(--maxw); margin:0 auto 24px; display:flex; flex-direction:column; gap:18px }
.brand--foot .brand-text{ font-size:1.6rem }
.foot-nav{ display:flex; flex-wrap:wrap; gap:8px 18px; font-weight:700; text-transform:uppercase; font-size:0.8rem; letter-spacing:0.06em }
.foot-nav a{ color:var(--ink-dim) } .foot-nav a:hover{ color:var(--accent) }
.foot-bottom{ max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); padding-top:20px; color:var(--ink-dim); font-size:0.85rem }
.foot-bottom a{ color:var(--accent); font-weight:700 }
.foot-fine{ font-size:0.78rem; margin:8px 0 0 }

/* ---------------- STICKY MOBILE CTA ---------------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:grid; grid-template-columns:1fr 2fr; gap:0;
  border-top:2px solid var(--accent);
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--bg);
  transform:translateY(120%); transition:transform .3s ease;
}
.sticky-cta.show{ transform:translateY(0) }
.scta{
  min-height:56px; display:flex; align-items:center; justify-content:center;
  font-weight:900; text-transform:uppercase; letter-spacing:0.06em; font-size:0.95rem;
}
.scta-call{ background:var(--bg); color:var(--ink); border-right:2px solid var(--accent) }
.scta-join{ background:var(--accent); color:var(--accent-ink) }
.scta:active{ filter:brightness(0.9) }

/* ---------------- REVEAL ANIM ---------------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease }
[data-reveal].in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1!important; transform:none!important; transition:none }
}

/* ---------------- DESKTOP ---------------- */
@media (min-width:720px){
  .stat-block{ grid-template-columns:repeat(4,1fr) }
  .stat{ border-bottom:none }
  .stat:nth-child(2n){ border-right:2px solid var(--line) }
  .stat:last-child{ border-right:none }
  .class-grid{ grid-template-columns:repeat(3,1fr) }
  .price-grid{ grid-template-columns:repeat(3,1fr); align-items:start }
  .review-grid{ grid-template-columns:repeat(3,1fr) }
  .about-grid{ grid-template-columns:1.2fr 1fr; align-items:start; gap:48px }
  .loc-grid{ grid-template-columns:1fr 1fr; align-items:center }
  .hero-cta{ flex-direction:row }
  .hero{ padding-top:72px }
}
@media (min-width:880px){
  .main-nav{ display:flex }
  .sticky-cta{ display:none }
  .foot-top{ flex-direction:row; justify-content:space-between; align-items:center }
}

/* scroll-snap on large screens only (avoid mobile jank) */
@media (min-width:880px) and (pointer:fine){
  main{ scroll-snap-type:y proximity }
  .hero,.classes,.schedule,.pricing,.about,.reviews,.location,.contact{ scroll-snap-align:start }
}