/* 03 — FORM / MOVE / reformer pilates
   Acid yellow, hard black, tight grotesk. */

body.fitness{
  --bg:#ddff3d; --ink:#111;
  --accent:#111; --accent-ink:#ddff3d;
  --line:rgba(17,17,17,.22);
  --soft:rgba(17,17,17,.66);
  --panel:#d2f22f;
  --inv-bg:#111; --inv-ink:#fff;
  --display:'Archivo Black',sans-serif;
  --nav-bg:#ddff3d;
  --gutter:3vw;
  background:#ddff3d;color:#111;font-family:'Space Grotesk',sans-serif;
}

.fitness .dh,.fitness .cta h2,.fitness .phero h1{text-transform:uppercase;letter-spacing:-.05em}
.fitness .sec-inv{--accent:#ddff3d;--accent-ink:#111}
.fitness .cta{--accent:#ddff3d;--accent-ink:#111}
.fitness .site-ft{--accent:#ddff3d;--accent-ink:#111}

/* header */
.fitness .nav{display:flex;justify-content:space-between;align-items:center;padding:20px 3vw;border-bottom:2px solid}
.fitness .logo{font-weight:600;font-size:26px;letter-spacing:-.03em}

/* hero: absolute media only on wide screens so display type never collides */
.fitness .hero{min-height:720px;padding:4vh 3vw;position:relative;overflow:hidden}
.fitness .hero h1{font:clamp(56px,12vw,205px)/.82 'Archivo Black';letter-spacing:-.07em;text-transform:uppercase;margin:55px 0 0;position:relative;z-index:2;max-width:100%;overflow-wrap:anywhere}
.fitness .circle-photo{position:absolute;width:min(42vw,560px);height:min(42vw,560px);border-radius:50%;right:4vw;top:110px;overflow:hidden}
.fitness .circle-photo img{filter:grayscale(1);mix-blend-mode:multiply}
.fitness .hero-note{position:absolute;left:3vw;bottom:50px;width:auto;max-width:min(290px,90vw);font-size:19px;line-height:1.5;z-index:2}
.fitness .hero-cta{position:absolute;right:3vw;bottom:50px;z-index:2}

/* black ticker */
.fitness .strip{background:#111;color:#ddff3d;padding:13px 0;font:18px 'Archivo Black';text-transform:uppercase}

/* schedule rows */
.fitness .class{display:grid;grid-template-columns:120px 1fr 1fr 130px auto;gap:16px;align-items:center;padding:22px 0;border-top:1px solid var(--line)}
.fitness .class strong{color:#ddff3d;font-family:'Archivo Black';font-size:15px;letter-spacing:.02em}
.fitness .sec:not(.sec-inv) .class strong{color:#111}
.fitness .class .spots{font-size:13px;opacity:.7}
.fitness .class a{border-bottom:1px solid;padding-bottom:2px;white-space:nowrap}

/* level pills */
.fitness .level{display:inline-block;border:1px solid;border-radius:40px;padding:5px 13px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}

/* pricing */
.fitness .plan{border:2px solid;padding:34px;display:flex;flex-direction:column;gap:18px}
.fitness .plan.featured{background:#111;color:#ddff3d;--line:rgba(221,255,61,.3);--soft:rgba(221,255,61,.7)}
.fitness .plan .amount{font:clamp(46px,5vw,68px)/1 'Archivo Black';letter-spacing:-.05em}
.fitness .plan ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;font-size:15px}
.fitness .plan li:before{content:'—  ';opacity:.5}

@media(max-width:1100px){
  .fitness .hero{min-height:auto;padding-bottom:48px;display:flex;flex-direction:column}
  .fitness .hero h1{font-size:clamp(48px,12vw,120px);margin-top:28px;max-width:100%}
  .fitness .circle-photo{position:relative;width:min(88vw,520px);height:auto;aspect-ratio:1;right:auto;top:auto;margin:36px 0 12px;align-self:center}
  .fitness .hero-note,.fitness .hero-cta{position:relative;left:auto;right:auto;bottom:auto;width:auto;max-width:none;margin-top:18px}
}
@media(max-width:820px){
  .fitness .class{grid-template-columns:minmax(0,90px) minmax(0,1fr);gap:6px 14px}
  .fitness .class .when,.fitness .class .spots{grid-column:2}
  .fitness .class a{white-space:normal}
}