/* ============================================================
   SLAB STRENGTH CLUB — neo-brutalist landing page
   Palette: acid chartreuse / black / off-white. Nothing else.
   Mobile-first. Breakpoints: 768px, 900px (schedule table), 1100px.
   ============================================================ */

:root {
  --acid: #D8F21D;
  --black: #0A0A0A;
  --paper: #F5F3EE;
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-mono: "Roboto Mono", "Courier New", monospace;
  --border: 3px solid var(--black);
  --border-thick: 4px solid var(--black);
  --shadow: 8px 8px 0 var(--black);
  --shadow-snap: 2px 2px 0 var(--black);
  --snap: 90ms linear;
  --grid-line: rgba(10, 10, 10, 0.07);
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.25rem;
}

html,
body {
  overflow-x: clip;
}

body {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--black);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--black);
  color: var(--acid);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 0.6rem 1rem;
  border: var(--border);
  text-decoration: none;
}

.skip-link:focus {
  top: 0.5rem;
}

/* ---------- Layout primitives ---------- */

.container {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.container--narrow {
  max-width: 56rem;
}

section {
  padding-block: 4rem;
}

/* Chartreuse full-bleed slabs */
.slab {
  background-color: var(--acid);
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  border-top: var(--border-thick);
  border-bottom: var(--border-thick);
}

.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  border: var(--border);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--black);
  padding: 0.35rem 0.75rem;
  margin-bottom: 1.5rem;
}

.slab .section-label {
  background: var(--black);
  color: var(--acid);
  box-shadow: 4px 4px 0 var(--paper);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 6.5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.section-sub {
  max-width: 42rem;
  margin-bottom: 2.5rem;
  font-size: 0.9375rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  color: var(--black);
  background: var(--acid);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 0.9rem 1.6rem;
  cursor: pointer;
  transition: translate var(--snap), box-shadow var(--snap);
}

.btn:hover,
.btn:focus-visible {
  translate: 6px 6px;
  box-shadow: var(--shadow-snap);
}

.btn:active {
  translate: 8px 8px;
  box-shadow: 0 0 0 var(--black);
}

.btn--ghost {
  background: var(--paper);
}

.btn--solid {
  background: var(--black);
  color: var(--acid);
}

.btn--invert {
  align-self: flex-start;
  background: var(--acid);
  color: var(--black);
  box-shadow: 8px 8px 0 var(--paper);
}

.btn--invert:hover,
.btn--invert:focus-visible {
  box-shadow: 2px 2px 0 var(--paper);
}

.btn--card {
  align-self: flex-start;
  box-shadow: 5px 5px 0 var(--black);
  padding: 0.7rem 1.2rem;
  font-size: 0.78rem;
}

.btn--card:hover,
.btn--card:focus-visible {
  translate: 4px 4px;
  box-shadow: 1px 1px 0 var(--black);
}

/* ---------- Cards / shared brutalist blocks ---------- */

.card {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--shadow);
}

/* ---------- Duotone image treatment ---------- */

.duotone {
  position: relative;
  overflow: hidden;
  border: var(--border-thick);
  background-color: var(--acid);
}

.duotone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* brightness() is applied BEFORE contrast() on purpose: contrast() clamps
     shadows to 0 first, and no later multiply can bring a crushed pixel back.
     Lifting first, then boosting contrast, is what lets the very dark sources
     normalize at all. */
  filter: grayscale(1) brightness(1.2) contrast(1.3);
}

/* Per-image exposure correction. The sources land between mean gray 11 and 177
   before treatment, so one blanket filter renders some tiles as solid black
   rectangles and others as blown-out chartreuse. These bring every tile into
   the same ~75-95 post-filter band so the rows read as one duotone set. */
.coaches__grid .coach:nth-child(1) .duotone img {
  /* Backlit window shot, mean gray 177 — pull it down. */
  filter: grayscale(1) brightness(0.62) contrast(1.3);
}

.coaches__grid .coach:nth-child(4) .duotone img {
  /* Low-key studio shot, mean gray 11 with 96% of pixels under gray 40.
     Needs a big lift and a softer curve to keep the lifter legible. */
  filter: grayscale(1) brightness(3.4) contrast(1.05);
}

.programs__grid .program:nth-child(1) .duotone img {
  filter: grayscale(1) brightness(2.6) contrast(1.3);
}

.programs__grid .program:nth-child(3) .duotone img {
  filter: grayscale(1) brightness(4.2) contrast(1.1);
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acid);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---------- Stickers & stamps ---------- */

.sticker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  background: var(--black);
  color: var(--acid);
  border: 3px solid var(--acid);
  outline: 3px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  padding: 0.7rem 1rem;
  rotate: var(--r, -4deg);
}

.sticker:hover {
  animation: wiggle 0.35s linear;
}

@keyframes wiggle {
  0%   { rotate: var(--r, -4deg); }
  25%  { rotate: calc(var(--r, -4deg) + 3deg); }
  50%  { rotate: calc(var(--r, -4deg) - 3deg); }
  75%  { rotate: calc(var(--r, -4deg) + 1.5deg); }
  100% { rotate: var(--r, -4deg); }
}

/* ---------- Stamp-in scroll reveals ---------- */

.js .stamp {
  opacity: 0;
  scale: 1.15;
  rotate: calc(var(--r, 0deg) + 2.5deg);
  transition:
    opacity 0.32s linear var(--d, 0s),
    scale 0.32s cubic-bezier(0.2, 1.6, 0.35, 1) var(--d, 0s),
    rotate 0.32s cubic-bezier(0.2, 1.6, 0.35, 1) var(--d, 0s);
}

.js .stamp.is-in {
  opacity: 1;
  scale: 1;
  rotate: var(--r, 0deg);
}

/* A block the scroll observer has not reached yet sits at opacity 0 — and
   opacity flattens the focus ring along with everything else, so tabbing ahead
   of the reveal parks focus on a link nobody can see for the length of the
   transition plus its --d delay. If focus is inside the block, stamp it in on
   the spot: no fade, no delay, because the choreography is for scrolling, not
   for somebody who is already there. This can only ever fire once focus has
   entered, so the scroll reveals and the pointer behaviour are untouched. */
.js .stamp:focus-within {
  opacity: 1;
  scale: 1;
  rotate: var(--r, 0deg);
  transition-duration: 0s;
  transition-delay: 0s;
}

/* Elements that carry a base rotation keep it without JS too */
.stamp {
  rotate: var(--r, 0deg);
}

/* ---------- Marquee ticker ---------- */

.ticker {
  background: var(--black);
  color: var(--acid);
  border-bottom: var(--border);
  overflow: hidden;
}

.ticker__track {
  display: flex;
  width: max-content;
  /* One group is now 4x longer, so the duration is 4x the original 22s to
     keep the original scroll speed (~50px/s). -50% = exactly one group. */
  animation: ticker-scroll 88s linear infinite;
}

/* The marquee runs for the life of the page, so it needs a stop that is not a
   system setting. .ticker__pause borrows .skip-link wholesale — off-screen
   until it is tabbed to, so the page looks exactly as it did. Its absolute
   position resolves against the viewport, not .ticker (which is unpositioned),
   so .ticker's overflow:hidden never clips it. */
.ticker.is-paused .ticker__track {
  animation-play-state: paused;
}

.ticker__pause {
  cursor: pointer;
}

.ticker__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1.25rem;
  padding-inline: 0.625rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-block: 0.45rem;
  white-space: nowrap;
}

.ticker__sep {
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 700;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.logo__mark {
  width: 1.6rem;
  height: 1.6rem;
  background: var(--acid);
  border: var(--border);
  box-shadow: 3px 3px 0 var(--black);
  transition: translate var(--snap), box-shadow var(--snap);
}

.logo:hover .logo__mark {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--black);
}

.logo__text {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.logo__sub {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.32em;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 3rem;
  height: 3rem;
  padding: 0.65rem;
  background: var(--acid);
  border: var(--border);
  box-shadow: 4px 4px 0 var(--black);
  cursor: pointer;
  transition: translate var(--snap), box-shadow var(--snap);
}

.nav-toggle:hover {
  translate: 3px 3px;
  box-shadow: 1px 1px 0 var(--black);
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--black);
  transition: rotate 0.12s linear, translate 0.12s linear, opacity 0.12s linear;
}

.nav-open .nav-toggle__bar:nth-child(1) {
  translate: 0 8px;
  rotate: 45deg;
}

.nav-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle__bar:nth-child(3) {
  translate: 0 -8px;
  rotate: -45deg;
}

.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  background: var(--paper);
  border-bottom: var(--border-thick);
}

.nav-open .site-nav {
  display: block;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
}

.site-nav__list a {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  padding: 0.9rem 1.25rem;
  border-top: var(--border);
  transition: background-color var(--snap), color var(--snap);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  background: var(--black);
  color: var(--acid);
}

.btn--nav {
  margin: 1rem 1.25rem;
  box-shadow: 5px 5px 0 var(--black);
  padding: 0.75rem 1.3rem;
  font-size: 0.8rem;
}

.site-nav__list a.btn--nav:hover,
.site-nav__list a.btn--nav:focus-visible {
  background: var(--acid);
  color: var(--black);
  translate: 4px 4px;
  box-shadow: 1px 1px 0 var(--black);
}

/* ---------- Hero ---------- */

.hero {
  padding-block: 3rem 4.5rem;
  overflow-x: clip;
}

.hero__grid {
  display: grid;
  gap: 2.5rem;
}

.kicker {
  display: inline-block;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  background: var(--black);
  color: var(--acid);
  padding: 0.4rem 0.8rem;
  border: var(--border);
  box-shadow: 4px 4px 0 var(--acid), 4px 4px 0 3px var(--black);
  margin-bottom: 1.75rem;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* 27vw, not 16vw: at 375px the old 16vw fell under the 4rem floor and the
     three lines filled only ~45% of the column. 27vw takes the longest line to
     roughly 70% of a 335px column, which is the "enormous type" signature.
     The clamp ceiling still caps it at 10.5rem from 622px up. */
  font-size: clamp(3.5rem, 27vw, 10.5rem);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.hero__line {
  display: block;
}

/* The solid lines cross the duotone photo from 1100px up, where the black
   dumbbell shapes drop the glyph/background contrast to ~1.2:1. A chartreuse
   knockout painted behind the fill (paint-order) wraps every glyph in acid, so
   the caps never sit directly on a photo value — #D8F21D on #0A0A0A is
   15.7:1 — and the letterforms keep their weight. The 6px hard offset mirrors
   the black one on .hero__line--outline, so the two treatments read as a pair.
   .hero__line--outline is excluded from the stroke: it already carries its own
   3px black stroke and its acid fill needs that painted over, not behind. */
.hero__line:not(.hero__line--outline) {
  -webkit-text-stroke: 5px var(--acid);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--acid);
}

.hero__line--outline {
  color: var(--acid);
  -webkit-text-stroke: 3px var(--black);
  text-shadow: 6px 6px 0 var(--black);
}

.hero__sub {
  max-width: 34rem;
  font-size: 0.95rem;
  border-left: 6px solid var(--acid);
  padding-left: 1rem;
  margin-bottom: 2rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.hero__media {
  position: relative;
  padding-right: 12px;
  padding-bottom: 12px;
}

.hero__photo {
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 11;
}

.sticker--hero-a {
  position: absolute;
  top: -1.1rem;
  left: -0.4rem;
  z-index: 3;
}

.sticker--hero-b {
  position: absolute;
  bottom: -0.9rem;
  right: 0.4rem;
  z-index: 3;
}

/* ---------- Manifesto ---------- */

.manifesto__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5.25rem);
  line-height: 0.95;
  text-transform: uppercase;
  max-width: 18ch;
  margin-bottom: 2.5rem;
}

.manifesto__grid {
  display: grid;
  gap: 2.5rem;
}

.manifesto__copy p {
  margin-bottom: 1.25rem;
  max-width: 46rem;
}

.manifesto__copy p:last-child {
  margin-bottom: 0;
}

.rules {
  background: var(--black);
  color: var(--paper);
  border: var(--border-thick);
  box-shadow: 8px 8px 0 var(--paper), 8px 8px 0 12px var(--black);
  padding: 1.75rem 1.5rem;
  align-self: start;
}

.rules__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0.05em;
  color: var(--acid);
  margin-bottom: 1.25rem;
}

.rules__list li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding-block: 0.7rem;
  border-top: 2px solid var(--acid);
}

.rules__num {
  font-family: var(--font-display);
  /* Anton ships at 400 only; the parent li sets 700, which would synthesize
     a smeared faux bold. */
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--acid);
  flex-shrink: 0;
}

/* ---------- Programs ---------- */

.programs__grid {
  display: grid;
  gap: 2.25rem;
}

.program {
  display: flex;
  flex-direction: column;
  transition: translate var(--snap), box-shadow var(--snap);
}

.program:hover {
  translate: 6px 6px;
  box-shadow: var(--shadow-snap);
}

.program__media {
  border: 0;
  border-bottom: var(--border-thick);
  aspect-ratio: 4 / 3;
}

.program__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.9rem;
  padding: 1.5rem 1.4rem 1.75rem;
}

.program__tag {
  align-self: flex-start;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  background: var(--black);
  color: var(--acid);
  padding: 0.3rem 0.6rem;
}

.program__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  text-transform: uppercase;
}

.program__desc {
  font-size: 0.85rem;
}

.program__list {
  margin-bottom: 0.5rem;
}

.program__list li {
  position: relative;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.45rem 0 0.45rem 1.4rem;
  border-top: 2px dashed var(--black);
}

.program__list li::before {
  content: "■";
  position: absolute;
  left: 0;
  color: var(--black);
  font-size: 0.7rem;
}

.program .btn--card {
  margin-top: auto;
}

/* ---------- Schedule table ---------- */

.table-wrap {
  border: var(--border-thick);
  box-shadow: var(--shadow);
  background: var(--paper);
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
}

.schedule-table caption {
  text-align: left;
}

/* Mobile-first: stacked day cards per time block */
.schedule-table,
.schedule-table tbody,
.schedule-table tr,
.schedule-table td {
  display: block;
  width: 100%;
}

.schedule-table thead {
  display: none;
}

.schedule-table tbody tr {
  border-bottom: var(--border-thick);
}

.schedule-table tbody tr:last-child {
  border-bottom: 0;
}

.schedule-table__time {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  background: var(--black);
  color: var(--acid);
  padding: 0.55rem 1rem;
}

.schedule-table td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1rem;
  border-top: 2px solid var(--black);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.schedule-table td:first-of-type {
  border-top: 0;
}

.schedule-table td::before {
  content: attr(data-day);
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
}

.cell-class {
  background: var(--acid);
  border: 2px solid var(--black);
  box-shadow: 3px 3px 0 var(--black);
  padding: 0.2rem 0.5rem;
  text-align: center;
  /* Fixed-layout day columns are narrow just above 768px — let a long
     single word ("CONDITIONING") break rather than spill out of its cell. */
  overflow-wrap: anywhere;
}

.cell-empty {
  opacity: 0.45;
}

/* ---------- Coaches ---------- */

.coaches__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}

.coach {
  position: relative;
  transition: translate var(--snap);
}

.coach__media {
  aspect-ratio: 10 / 13;
  box-shadow: var(--shadow);
  transition: box-shadow var(--snap);
}

.coach:hover {
  translate: 6px 6px;
}

.coach:hover .coach__media {
  box-shadow: var(--shadow-snap);
}

.coach__plate {
  position: relative;
  z-index: 2;
  background: var(--black);
  color: var(--paper);
  border: 3px solid var(--acid);
  outline: 3px solid var(--black);
  box-shadow: 5px 5px 0 var(--black);
  padding: 0.75rem 0.9rem;
  margin: -1.6rem 0.6rem 0;
  rotate: -2deg;
  transition: rotate var(--snap);
}

.coach:hover .coach__plate {
  rotate: 1deg;
}

.coach__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--acid);
}

.coach__role {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* ---------- Stats ---------- */

.stats {
  padding-block: 4.5rem;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}

.stat {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
  transition: translate var(--snap), box-shadow var(--snap);
}

.stat:hover {
  translate: 6px 6px;
  box-shadow: var(--shadow-snap);
}

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat__suffix {
  font-size: 0.5em;
  margin-left: 0.15em;
}

.stat__label {
  display: inline-block;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  background: var(--black);
  color: var(--acid);
  padding: 0.3rem 0.6rem;
}

/* ---------- Pricing ---------- */

.pricing__grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2rem 1.6rem;
  transition: translate var(--snap), box-shadow var(--snap);
}

.plan:hover {
  translate: 6px 6px;
  box-shadow: var(--shadow-snap);
}

.plan--featured {
  background: var(--black);
  color: var(--paper);
  box-shadow: 8px 8px 0 var(--acid), 8px 8px 0 12px var(--black);
}

.plan--featured:hover {
  box-shadow: 2px 2px 0 var(--acid), 2px 2px 0 6px var(--black);
}

.plan__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan--featured .plan__name {
  color: var(--acid);
}

.plan__price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.25rem, 8vw, 4.75rem);
  line-height: 1;
  border-bottom: var(--border);
  padding-bottom: 1rem;
}

.plan--featured .plan__price {
  border-bottom-color: var(--acid);
}

.plan__currency {
  font-size: 0.45em;
  vertical-align: super;
}

.plan__per {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  margin-left: 0.4rem;
}

.plan__list {
  flex-grow: 1;
}

.plan__list li {
  position: relative;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-top: 2px dashed currentColor;
}

.plan__list li:first-child {
  border-top: 0;
}

.plan__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  font-weight: 700;
}

.plan--featured .plan__list li::before {
  color: var(--acid);
}

.stamp-badge {
  position: absolute;
  top: -1.4rem;
  right: -0.75rem;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  background: var(--acid);
  color: var(--black);
  border: var(--border);
  box-shadow: 5px 5px 0 var(--black);
  padding: 0.7rem 0.9rem;
  rotate: -6deg;
}

.plan--featured:hover .stamp-badge {
  animation: wiggle 0.35s linear;
  --r: -6deg;
}

/* ---------- Quotes ---------- */

.quotes__grid {
  display: grid;
  gap: 2rem;
}

.quote {
  position: relative;
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 2.25rem 1.5rem 1.5rem;
  transition: translate var(--snap), box-shadow var(--snap);
}

.quote:hover {
  translate: 6px 6px;
  box-shadow: var(--shadow-snap);
}

.quote::before {
  content: "APPROVED";
  position: absolute;
  top: -0.9rem;
  left: 1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  background: var(--acid);
  border: var(--border);
  padding: 0.25rem 0.6rem;
  rotate: -3deg;
}

.quote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}

.quote__by {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  border-top: 2px solid var(--black);
  padding-top: 0.75rem;
}

/* ---------- FAQ ---------- */

.faq__list {
  display: grid;
  gap: 1.25rem;
}

.faq__item {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: 6px 6px 0 var(--black);
  transition: translate var(--snap), box-shadow var(--snap);
}

.faq__item:hover {
  translate: 4px 4px;
  box-shadow: var(--shadow-snap);
}

.faq__item[open] {
  background: var(--acid);
}

.faq__q {
  position: relative;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  padding: 1.1rem 3.25rem 1.1rem 1.25rem;
  user-select: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  font-family: var(--font-display);
  /* Inherits 700 from .faq__q — reset so Anton is not faux-bolded. */
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  background: var(--black);
  color: var(--acid);
  border: 2px solid var(--black);
  transition: rotate 0.12s linear;
}

.faq__item[open] .faq__q::after {
  content: "–";
  rotate: 180deg;
}

.faq__a {
  padding: 0 1.25rem 1.25rem;
  border-top: 2px dashed var(--black);
}

.faq__a p {
  padding-top: 1rem;
  font-size: 0.85rem;
  max-width: 60ch;
}

/* ---------- Join form ---------- */

.join-form {
  padding: 1.75rem 1.5rem 2rem;
  display: grid;
  gap: 1.4rem;
}

.join-form__row {
  display: grid;
  gap: 1.4rem;
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field__label {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
}

.field__input {
  width: 100%;
  background: var(--paper);
  border: var(--border);
  box-shadow: 4px 4px 0 var(--black);
  padding: 0.8rem 0.9rem;
  font-size: 0.9rem;
  border-radius: 0;
  appearance: none;
  transition: translate var(--snap), box-shadow var(--snap), background-color var(--snap);
}

.field__input:focus {
  outline: none;
  translate: 3px 3px;
  box-shadow: 1px 1px 0 var(--black);
  /* background-color only — the `background` shorthand would wipe out the
     select's arrow, which is drawn with background-image. */
  background-color: var(--acid);
}

.field__input::placeholder {
  /* 5.4:1 on --paper — still visibly lighter than an entered value. */
  color: rgba(10, 10, 10, 0.62);
}

.field__input--select {
  background-image:
    linear-gradient(45deg, transparent 49%, var(--black) 50%),
    linear-gradient(135deg, var(--black) 50%, transparent 51%);
  background-position: calc(100% - 1.35rem) 50%, calc(100% - 0.9rem) 50%;
  background-size: 0.45rem 0.45rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field__input--area {
  resize: vertical;
  min-height: 5.5rem;
}

.join-form__error {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  background: var(--black);
  color: var(--acid);
  border: var(--border);
  padding: 0.7rem 0.9rem;
}

.btn--submit {
  justify-self: start;
  font-size: 1rem;
  padding: 1rem 2.25rem;
}

.join-form__note {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.join-success {
  position: relative;
  padding: 2.75rem 1.75rem 2rem;
  text-align: left;
}

.js .join-success {
  scale: 1.15;
  rotate: 2deg;
  opacity: 0;
  transition: opacity 0.32s linear, scale 0.32s cubic-bezier(0.2, 1.6, 0.35, 1), rotate 0.32s cubic-bezier(0.2, 1.6, 0.35, 1);
}

.js .join-success.is-in {
  opacity: 1;
  scale: 1;
  rotate: -0.6deg;
}

.join-success__stamp {
  position: absolute;
  top: -1.2rem;
  left: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  background: var(--black);
  color: var(--acid);
  border: 3px solid var(--acid);
  outline: 3px solid var(--black);
  padding: 0.4rem 1rem;
  rotate: -4deg;
}

.join-success__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.join-success__text {
  max-width: 46rem;
  font-size: 0.9rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--black);
  color: var(--paper);
  border-top: var(--border-thick);
  padding-block: 3.5rem 0;
}

.site-footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.site-footer__logo {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 6.5rem);
  line-height: 0.9;
  color: var(--acid);
  letter-spacing: 0.02em;
}

.site-footer__tag {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  margin-top: 0.9rem;
}

.site-footer__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--acid);
  border-bottom: 2px solid var(--acid);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.site-footer__address {
  font-style: normal;
  font-size: 0.82rem;
  line-height: 2;
}

.site-footer__list {
  font-size: 0.82rem;
  line-height: 2.1;
  font-weight: 500;
}

.site-footer a {
  text-decoration: none;
  border-bottom: 2px solid var(--acid);
  transition: background-color var(--snap), color var(--snap);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  background: var(--acid);
  color: var(--black);
}

.site-footer__bar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 3px solid var(--acid);
  padding-block: 1.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* ============================================================
   VERY SMALL PHONES (< 375px)
   The two-up stat and coach grids leave ~60px of text width at 320px,
   which is narrower than words like PREMISES and CONDITIONING. Stack
   them so nothing spills out of its slab.
   ============================================================ */

@media (max-width: 374px) {
  .stats__grid,
  .coaches__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   BREAKPOINT: 768px
   ============================================================ */

@media (min-width: 768px) {
  section {
    padding-block: 5.5rem;
  }

  .ticker__group {
    font-size: 1.2rem;
  }

  /* Nav becomes inline */
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    display: block;
    border-bottom: 0;
    background: transparent;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }

  .site-nav__list a {
    border-top: 0;
    font-size: 0.72rem;
    padding: 0.55rem 0.7rem;
  }

  .btn--nav {
    margin: 0 0 0 0.6rem;
    padding: 0.55rem 1rem;
    font-size: 0.72rem;
  }

  .manifesto__grid {
    grid-template-columns: 1.25fr 1fr;
    gap: 3rem;
  }

  .programs__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .program__body {
    padding: 1.4rem 1.2rem 1.6rem;
  }

  .coaches__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .pricing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .quotes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .join-form {
    padding: 2.25rem 2rem 2.5rem;
  }

  .join-form__row {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2.5rem;
  }

  .site-footer__bar {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ============================================================
   BREAKPOINT: 768px — schedule becomes a real 8-column table

   The reflow used to sit at 900px, which handed the whole 768-899px tablet
   band the mobile stacked layout: 28 full-width rows about 1900px tall with
   ~550px of empty gutter each. It now reflows with the rest of the layout at
   768px. The tight spot is "CONDITIONING" (12 characters, no break
   opportunity) in a fixed-layout day column: at 768px the time column is
   trimmed to 9% and the horizontal padding to 0.25rem/0.3rem, which leaves
   ~72px of text box against ~71px of glyphs at 0.62rem. .cell-class keeps
   overflow-wrap: anywhere as the backstop. The 900px block below restores
   the roomier padding and steps the type up.
   ============================================================ */

@media (min-width: 768px) {
  .schedule-table {
    display: table;
    table-layout: fixed;
  }

  .schedule-table thead {
    display: table-header-group;
  }

  .schedule-table tbody {
    display: table-row-group;
  }

  .schedule-table tr {
    display: table-row;
    width: auto;
  }

  .schedule-table td,
  .schedule-table__time {
    display: table-cell;
    width: auto;
  }

  .schedule-table thead th {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.12em;
    background: var(--black);
    color: var(--acid);
    padding: 0.7rem 0.4rem;
    border-right: 2px solid var(--acid);
  }

  /* table-layout: fixed takes its column widths from the FIRST row only, so
     the narrow time column has to be declared here — the width on the tbody
     row header is ignored. Trimming it to 8% hands ~5px back to each of the
     seven day columns, which is what keeps "CONDITIONING" on one line. */
  .schedule-table thead th:first-child {
    width: 8%;
  }

  .schedule-table thead th:last-child {
    border-right: 0;
  }

  .schedule-table tbody tr {
    border-bottom: 0;
  }

  .schedule-table td {
    border: 2px solid var(--black);
    padding: 0.55rem 0.1rem;
    text-align: center;
    vertical-align: middle;
    font-size: 0.62rem;
    letter-spacing: 0;
  }

  .schedule-table td::before {
    content: none;
  }

  .schedule-table__time {
    text-align: center;
    font-size: 1rem;
    padding: 0.6rem 0.1rem;
    border: 2px solid var(--black);
    background: var(--black);
    color: var(--acid);
  }

  .cell-class {
    display: inline-block;
    box-shadow: 2px 2px 0 var(--black);
    padding: 0.25rem 0.2rem;
    line-height: 1.35;
  }
}

/* ============================================================
   BREAKPOINT: 900px — the table has room to breathe
   ============================================================ */

@media (min-width: 900px) {
  .schedule-table td {
    padding: 0.6rem 0.3rem;
    font-size: 0.66rem;
    letter-spacing: 0.02em;
  }

  .schedule-table__time {
    font-size: 1.05rem;
    padding: 0.6rem 0.3rem;
  }

  .cell-class {
    padding: 0.25rem 0.25rem;
  }
}

/* ============================================================
   BREAKPOINT: 1100px
   ============================================================ */

@media (min-width: 1100px) {
  .hero {
    padding-block: 4.5rem 6rem;
  }

  /* Oversized type overlaps the photo: copy and media share one grid cell,
     the photo is right-aligned at 65% and the caps run across its left edge.
     Widest line ("HEAVY") is 2.36em incl. letter-spacing = ~453px at 12rem,
     while the photo's left edge sits at ~400px on a maxed-out container. */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
  }

  .hero__copy,
  .hero__media {
    grid-area: 1 / 1;
  }

  .hero__copy {
    position: relative;
    z-index: 2;
  }

  .hero__title {
    font-size: clamp(4rem, 16vw, 12rem);
  }

  .hero__media {
    width: 65%;
    justify-self: end;
    padding-top: 1.5rem;
  }

  .hero__sub {
    font-size: 1rem;
  }

  /* From 1100px up the H1 and the photo share one grid cell, so the sticker has
     two live neighbours to dodge: the kicker above it and "HEAVY" behind it.
     top: 3rem clears the kicker's shadow (it used to sit across "...CONCRETE &
     IRON"). left: 5.5rem pushes it past the tail of the headline — it used to
     land on the "Y" of HEAVY. The longest line is 2.34em wide plus ~9px of
     stroke and hard shadow, and the photo's left edge sits at 35% of the
     container, so the headline overhangs that edge by 56-64px across the whole
     range; 88px leaves ~30px of daylight at the worst width (1200px) and never
     less. The sticker still lands on the photo's top-left quadrant, so the
     deliberate clash survives — it just stops eating a letter. */
  .sticker--hero-a {
    top: 3rem;
    left: 5.5rem;
  }

  .sticker--hero-b {
    bottom: -1.1rem;
    right: -0.5rem;
  }

  .manifesto__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
  }

  .programs__grid,
  .pricing__grid {
    gap: 2.25rem;
  }

  .plan--featured {
    translate: 0 -1.25rem;
  }

  .plan--featured:hover {
    translate: 6px calc(-1.25rem + 6px);
  }

  .schedule-table td {
    font-size: 0.76rem;
    letter-spacing: 0.05em;
  }

  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 0.8fr;
  }
}

/* ============================================================
   REDUCED MOTION — kill every animation and transition
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  .ticker__track {
    animation: none !important;
  }

  /* Static single row — the groups are nowrap and far wider than the
     viewport, so a second one would wrap onto a clipped second line. */
  .ticker__group:nth-child(2) {
    display: none;
  }

  .js .stamp,
  .js .stamp.is-in {
    opacity: 1;
    scale: 1;
    rotate: var(--r, 0deg);
    transition: none;
  }

  .js .join-success {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    transition: none;
  }

  .sticker:hover,
  .plan--featured:hover .stamp-badge {
    animation: none !important;
  }

  .btn:hover,
  .btn:focus-visible,
  .program:hover,
  .coach:hover,
  .stat:hover,
  .plan:hover,
  .quote:hover,
  .faq__item:hover {
    translate: 0 0;
  }
}

/* The blanket `.plan:hover { translate: 0 0 }` above outranks
   `.plan--featured` (0,2,0 vs 0,1,0) and would drop the featured card 20px
   on hover. Restore the lift for both states, after it in source order. */
@media (prefers-reduced-motion: reduce) and (min-width: 1100px) {
  .plan--featured,
  .plan--featured:hover {
    translate: 0 -1.25rem;
  }
}