/* JG Fitness homepage: energetic red and white, with motion. Loaded after jg-base.css. */
.hero{position:relative;padding:64px 0 96px;gap:40px;overflow:visible}
.hero:before{content:"";position:absolute;right:-4%;top:2%;width:min(580px,46vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,var(--red-hot),var(--red) 55%,var(--red-deep));z-index:0;translate:0 var(--py,0);animation:jgpulse 7s ease-in-out infinite}
@keyframes jgpulse{50%{scale:1.07}}
.hero>*{position:relative;z-index:1}
.hero h1,.hero .hero-slogan{font-size:clamp(60px,7.7vw,112px);letter-spacing:-.06em;line-height:.9;margin:24px 0 28px}
.hero h1 .tag,.hero .hero-slogan .tag{display:inline-block}
.hero h1 span.w:last-child,.hero h1 br+span,.hero .hero-slogan span.w:last-child,.hero .hero-slogan br+span{background:var(--red);color:#fff;padding:.02em .16em .08em;border-radius:.12em;rotate:-1.5deg;margin-top:.08em}
.hero p{color:#3b3b3b;font-size:19px}
.hero .eyebrow{display:inline-block;background:var(--ink);color:#fff;padding:9px 16px;border-radius:999px;letter-spacing:.14em}
.hero>div:first-child>*:not(h1):not(:where(.hero-slogan)){animation:jgrise .8s cubic-bezier(.2,.8,.2,1) both}
.hero>div:first-child>.eyebrow{animation-delay:.05s}
.hero>div:first-child>p:nth-of-type(1){animation-delay:.75s}
.hero>div:first-child>p:nth-of-type(2){animation-delay:.9s}
.hero>div:first-child>.actions{animation-delay:1.05s}
.hero>div:first-child>.micro{animation-delay:1.2s}
@keyframes jgrise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
.hero .actions .btn:not(.secondary){animation:jgrise .8s 1.05s cubic-bezier(.2,.8,.2,1) both,jgglow 2.6s 2.2s ease-in-out infinite}
@keyframes jgglow{0%,100%{box-shadow:0 12px 26px rgba(200,16,46,.32)}50%{box-shadow:0 12px 26px rgba(200,16,46,.32),0 0 0 14px rgba(200,16,46,.14)}}
.hero-art{display:none}
.hero-photo{margin:0;position:relative;rotate:2.5deg;max-width:470px;justify-self:center;translate:0 var(--py,0)}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border:9px solid #fff;border-radius:30px;box-shadow:0 34px 70px rgba(0,0,0,.32);animation:jgphoto 1.1s .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes jgphoto{from{opacity:0;scale:.78;rotate:-8deg}to{opacity:1;scale:1;rotate:0deg}}
.badge{position:absolute;font:800 13px/1 Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;padding:15px 20px;border-radius:999px;box-shadow:0 14px 28px rgba(0,0,0,.28)}
.badge.b1{left:-38px;bottom:84px;background:var(--ink);color:#fff;rotate:-5deg;animation:jgfloat 5s 1s ease-in-out infinite}
.badge.b2{right:-22px;top:46px;background:#fff;color:var(--red);rotate:4deg;animation:jgfloat 6s 1.6s ease-in-out infinite reverse}
@keyframes jgfloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
/* Start where you are / five circles / Fitness for real life */
.trio{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:26px 0;margin-top:10px}
.trio-line{margin:0;font:900 clamp(26px,3.4vw,46px)/1 'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;letter-spacing:-.04em;color:var(--ink)}
.trio-line.right{text-align:right;color:var(--red);justify-self:end}
.trio-discs{list-style:none;display:flex;gap:14px;margin:0;padding:0;justify-self:center}
.trio-discs li{width:clamp(76px,8.6vw,112px);aspect-ratio:1;animation:jgpop .7s cubic-bezier(.3,1.7,.5,1) both,jgbob 4.5s ease-in-out infinite;animation-delay:var(--pd,.2s),var(--bd,0s)}
.trio-discs li:nth-child(1){--pd:.2s;--bd:0s}.trio-discs li:nth-child(2){--pd:.32s;--bd:-1.1s}.trio-discs li:nth-child(3){--pd:.44s;--bd:-2.2s}.trio-discs li:nth-child(4){--pd:.56s;--bd:-3.3s}.trio-discs li:nth-child(5){--pd:.68s;--bd:-.7s}
@keyframes jgpop{from{scale:0;opacity:0}to{scale:1;opacity:1}}
@keyframes jgbob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.trio-discs a{width:100%;height:100%;border-radius:50%;background:var(--red);color:#fff;border:4px solid var(--red);display:grid;place-items:center;text-decoration:none;box-shadow:0 12px 24px rgba(200,16,46,.3);transition:transform .25s,box-shadow .25s}
.trio-discs li:nth-child(even) a{background:var(--ink);border-color:var(--ink);box-shadow:0 12px 24px rgba(0,0,0,.3)}
.trio-discs li:nth-child(3) a{background:#fff;color:var(--red);border-color:var(--red);box-shadow:none}
.trio-discs a:hover,.trio-discs a:focus-visible{transform:scale(1.14) rotate(-8deg);box-shadow:0 20px 34px rgba(0,0,0,.35)}
.trio-discs span{font:900 clamp(10px,.95vw,13px)/1 Arial,sans-serif;letter-spacing:.03em;text-transform:uppercase}
/* sections */
.section{padding:110px 0 90px}
h2{font-size:clamp(42px,5.4vw,80px);margin:14px 0 22px}
.section-heading p{font-size:18px;color:#444}
/* coaching cards */
.card{container-type:inline-size;border:0;border-radius:26px;padding:6px 32px 32px;box-shadow:0 20px 44px rgba(0,0,0,.14);transition:translate .25s,box-shadow .25s}
.card:hover{translate:0 -8px;box-shadow:0 30px 56px rgba(0,0,0,.22)}
.card .card-copy{transition:transform .15s ease-out;transform-style:preserve-3d}
.card:nth-child(1){background:var(--ink);color:#fff}.card:nth-child(1) .black-word{color:#fff}.card:nth-child(1) .red-word{color:#ff5470}
.card:nth-child(2){background:var(--red);color:#fff}.card:nth-child(2) .black-word{color:#fff}.card:nth-child(2) .red-word{color:var(--ink)}
.card:nth-child(3){background:#fff;border:3px solid var(--ink)}
.card:nth-child(1) p,.card:nth-child(2) p{color:rgba(255,255,255,.9)}
.card:nth-child(1) a,.card:nth-child(2) a{color:#fff}
.card-copy a{font-weight:800}
/* facts band */
.stats{background:var(--ink);color:#fff;padding:70px 0;position:relative;overflow:hidden}
.stats:before{content:"";position:absolute;left:-10%;top:-60%;width:620px;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.08);box-shadow:0 0 0 60px rgba(255,255,255,.03),0 0 0 120px rgba(255,255,255,.02);translate:0 var(--py,0)}
.stats-inner{position:relative;max-width:1260px;margin:auto;padding:0 48px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat{border-left:4px solid var(--red-hot);padding-left:22px}
.stat b{display:block;font:900 clamp(40px,5vw,72px)/1 'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ff8a9c}
/* January Kickstart */
.soft{background:linear-gradient(135deg,var(--red-hot),var(--red) 45%,var(--red-deep));background-size:200% 200%;animation:jgshift 12s ease-in-out infinite;color:#fff;position:relative;overflow:hidden}
@keyframes jgshift{50%{background-position:100% 100%}}
.soft:after{content:"";position:absolute;right:-8%;top:-30%;width:520px;aspect-ratio:1;border-radius:50%;border:44px dashed rgba(255,255,255,.14);pointer-events:none;rotate:var(--sr,0deg);animation:jgspin 50s linear infinite}
@keyframes jgspin{to{rotate:360deg}}
.soft .wrap{position:relative;z-index:1}
.bigword{position:absolute;left:0;bottom:-.12em;white-space:nowrap;font:900 clamp(120px,19vw,300px)/1 'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.2);translate:var(--hx,0%) 0;pointer-events:none;user-select:none;z-index:0}
.soft .eyebrow{color:#fff;opacity:.85}.soft h2{color:#fff}
.soft .number{color:#fff;border-color:rgba(255,255,255,.8)}
.soft .steps h3{color:#fff;font-size:26px}.soft .steps p{color:rgba(255,255,255,.9);font-size:17px}
.steps article{background:rgba(0,0,0,.14);border-radius:22px;padding:28px;transition:translate .25s,background .25s}
.steps article:hover{translate:0 -8px;background:rgba(0,0,0,.26)}
/* sign-up */
.signup h2{font-size:clamp(52px,6.4vw,96px)}
.signup-copy p{color:#444;font-size:18px}
.form-title{font-size:28px}
/* about / coach */
.about{background:var(--ink);color:#fff;border:0;border-radius:34px;padding:64px;gap:64px;margin:30px 0 90px;overflow:hidden;position:relative}
.about:before{content:"";position:absolute;right:-120px;top:-120px;width:380px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(228,22,58,.45),transparent 70%);translate:0 var(--py,0)}
.about>*{position:relative}
.about .eyebrow{color:#ff8a9c}.about h2{color:#fff;font-size:clamp(44px,5vw,76px)}
.about p{color:#e6e6e6;font-size:18px}.about .facts b{color:#ff5470}.about .facts span{color:#cfcfcf;letter-spacing:.12em;font-weight:700}
.about-photo{margin:34px 0 0;rotate:var(--sr,-2deg);transition:rotate .2s linear}
.about-photo img{display:block;width:100%;height:auto;border:8px solid #fff;border-radius:24px;box-shadow:0 26px 54px rgba(0,0,0,.5)}
/* faq + resources */
.faq h2{text-align:left}details{padding:22px 0}summary{font-size:19px}
.resources{background:var(--ink);color:#fff;border-radius:34px;padding:56px}
.resources-intro h2{color:#fff;font-size:clamp(40px,4.6vw,68px)}.resources-intro h2 span{color:#ff5470}
.resources-intro>p{color:#d8d8d8;font-size:18px}.resources .eyebrow{color:#ff8a9c}
.resource-card{border:0;border-radius:20px;color:var(--ink);transition:translate .25s,box-shadow .25s}
.resource-card:hover{translate:0 -8px;box-shadow:0 24px 40px rgba(0,0,0,.4)}
@media(max-width:1000px){.stats-inner{grid-template-columns:1fr 1fr}.about{padding:44px 32px}}
@media(max-width:700px){
.hero{padding:36px 0 60px;gap:44px}.hero:before{width:96vw;right:-30%;top:auto;bottom:-2%}
.hero h1,.hero .hero-slogan{font-size:clamp(58px,17vw,92px)}.hero p{font-size:17px}
.hero-photo{max-width:330px;rotate:2deg}
.badge{font-size:11px;padding:12px 15px}.badge.b1{left:-10px;bottom:60px}.badge.b2{right:-8px;top:30px}
.trio{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:18px;padding:22px 0}
.trio-line,.trio-line.right{text-align:center;flex:1 1 40%;font-size:24px;justify-self:auto}
.trio-discs{order:-1;flex-basis:100%;justify-content:center;flex-wrap:wrap;gap:10px}.trio-discs li{width:66px}.trio-discs span{font-size:8.5px;letter-spacing:.01em}
.section{padding:70px 0 50px}.stats{padding:44px 0}.stats-inner{padding:0 24px;gap:26px 18px}.stat{padding-left:14px}
.about{padding:34px 22px;border-radius:24px;gap:30px;margin-bottom:60px}.resources{padding:30px 22px;border-radius:24px}.steps article{padding:22px}
.actions .btn,.formbox .btn{width:100%}.bigword{font-size:110px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.trio-discs li{scale:1;opacity:1}.js-rv [data-rv]{opacity:1;transform:none}}
.hero h1 span.w,.hero .hero-slogan span.w{color:inherit}
.hero h1 br+span,.hero h1 br+span.w,.hero .hero-slogan br+span,.hero .hero-slogan br+span.w{background:var(--red);color:#fff;padding:.02em .16em .08em;border-radius:.12em;rotate:-1.5deg;margin-top:.08em;display:inline-block}
.trio-discs a{font:900 clamp(10px,.95vw,13px)/1 Arial,sans-serif;letter-spacing:.03em;text-transform:uppercase;text-align:center}@media(max-width:700px){.trio-discs a{font-size:8.5px;letter-spacing:.01em}}

/* caption in the old facts spot */
.about p.about-photo-caption{margin:30px 0 0;max-width:560px;font:900 clamp(34px,3.7vw,58px)/1.02 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;letter-spacing:-.05em;color:#fff}
.about p.about-photo-caption span{color:#ff5470}
/* push the caption down so it sits level with the middle of the photo (wide screens only) */
@media(min-width:1001px){.about p.about-photo-caption{margin-top:calc(40px + min(1300px,100vw)*.075)}}