@font-face{font-family:Cond;src:url(assets/cond.woff2)}
@font-face{font-family:Cond7;src:url(assets/cond7.woff2)}
@font-face{font-family:Mono;src:url(assets/mono.woff2)}
:root{--sky:#6aa3d9;--sky2:#4d86c2;--red:#d9282f;--k:#141414;--w:#fffdf7;--y:#ffd84a}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--sky);color:var(--k);font-family:Mono,monospace;overflow-x:clip}
body.lock{overflow:hidden}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
section{scroll-margin-top:76px}
.eye{display:inline-block;font-size:12px;letter-spacing:.2em;background:var(--k);color:var(--w);padding:6px 12px}
h2{font:clamp(56px,8.5vw,140px)/.86 Cond;text-transform:uppercase;margin:14px 0 0;letter-spacing:-.01em}
h2 em{font-style:normal;color:var(--red)}

/* houndstooth pattern */
.hound{background-color:#1c1c1c;background-image:
 linear-gradient(45deg,#e9e4d8 25%,#0000 25%),linear-gradient(-45deg,#e9e4d8 25%,#0000 25%),
 linear-gradient(45deg,#0000 75%,#e9e4d8 75%),linear-gradient(-45deg,#0000 75%,#e9e4d8 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}

/* loader */
.load{position:fixed;inset:0;z-index:300;background:var(--k);color:var(--w);display:grid;place-content:center;justify-items:center;gap:26px;transition:transform .8s cubic-bezier(.8,0,.2,1)}
.load.up{transform:translateY(-100%)}
.load.gone{display:none}
.bar-wrap{display:flex;align-items:center;gap:6px}
.bar{width:min(420px,50vw);height:16px;background:linear-gradient(#ddd,#888);border-radius:8px}
.pl{border-radius:8px;background:var(--red);opacity:0;transform:scaleY(.2)}
.l1,.r1{width:22px;height:150px}.l2,.r2{width:18px;height:120px;background:#2f6bb0}.l3,.r3{width:14px;height:90px;background:var(--y)}
.pl.in{opacity:1;transform:none;transition:.25s cubic-bezier(.2,1.6,.4,1)}
.lw{font:72px Cond;letter-spacing:.04em}.lw b{font-weight:400;color:var(--y)}
.lt{font-size:12px;letter-spacing:.4em;opacity:.6}

/* header */
.hd{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;padding:0 3.5%;background:#6aa3d9ee;backdrop-filter:blur(8px);border-bottom:3px solid var(--k)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand b{font:28px Cond;letter-spacing:.02em;white-space:nowrap}
.bowl{width:36px;height:24px;border-radius:20px 20px 4px 4px;background:var(--k);position:relative}
.bowl:after{content:'';position:absolute;left:8px;right:8px;bottom:-6px;height:6px;background:#f2c9a0}
.hd nav{display:flex;gap:28px}
.hd nav a{font-size:12px;letter-spacing:.14em;text-decoration:none;position:relative}
.hd nav a:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--red);transform:scaleX(0);transition:.25s}
.hd nav a:hover:after{transform:scaleX(1)}
.hd-r{display:flex;gap:8px;align-items:center}
.ic{width:44px;height:44px;display:grid;place-items:center;border:2.5px solid var(--k);background:var(--w);transition:.2s}
.ic svg{width:18px}
.ic:hover{background:var(--y);transform:translateY(-2px)}
.hb{height:44px;display:grid;place-items:center;padding:0 22px;background:var(--red);color:var(--w);font:22px Cond;text-decoration:none;border:2.5px solid var(--k);box-shadow:4px 4px 0 var(--k);transition:.2s}
.hb:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--k)}

/* hero */
.hero{position:relative;min-height:calc(100svh - 72px);display:grid;grid-template-columns:1.05fr .95fr;gap:5%;align-items:center;padding:40px 4% 60px;overflow:hidden}
.hl{position:relative;z-index:3;display:grid;gap:16px;justify-items:start}
.name{display:flex;flex-direction:column;line-height:.8;margin:6px 0 4px}
.name span{font:clamp(100px,13vw,220px)/.8 Cond;letter-spacing:-.02em;color:var(--w);text-shadow:8px 8px 0 var(--k)}
.name .w2{color:var(--red)}
.on .name .w1{animation:slamL .7s cubic-bezier(.2,1.3,.3,1) both}
.on .name .w2{animation:slamL .7s cubic-bezier(.2,1.3,.3,1) .12s both}
@keyframes slamL{from{transform:translateX(-70vw)}to{transform:none}}
.photo-wrap{position:relative;z-index:2;width:100%;max-width:560px;justify-self:center}
.sun{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(#ffffff2e 0 8deg,#0000 8deg 18deg);animation:spin 40s linear infinite;z-index:-1}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.portrait{width:100%;aspect-ratio:1;object-fit:cover;border:5px solid var(--k);box-shadow:14px 14px 0 var(--k);background:var(--sky)}
.on .portrait{animation:rise 1s cubic-bezier(.2,1.2,.3,1) .35s both}
@keyframes rise{from{transform:translateY(60px) rotate(6deg);opacity:0}to{transform:none;opacity:1}}
.portrait.flex{animation:flex .5s ease}
@keyframes flex{30%{transform:scale(1.05) rotate(-2deg)}60%{transform:scale(.98) rotate(1deg)}}
.tag{position:absolute;background:var(--w);border:3px solid var(--k);padding:8px 14px;font-size:11px;letter-spacing:.14em;box-shadow:5px 5px 0 var(--k);opacity:0;transform:rotate(var(--r))}
.tag b{font:30px Cond;letter-spacing:0;font-weight:400}
.on .tag{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both,bob 3s ease-in-out infinite}
.t1{left:-9%;top:58%;--r:-6deg;animation-delay:1.1s,1.6s!important}
.t2{right:-7%;top:10%;--r:5deg;animation-delay:1.25s,1.8s!important}
.t3{right:-5%;bottom:6%;--r:-3deg;animation-delay:1.4s,2s!important}
@keyframes pop{from{opacity:0;transform:scale(.3) rotate(var(--r))}to{opacity:1;transform:rotate(var(--r))}}
@keyframes bob{50%{translate:0 -8px}}
.on .hl>*:not(.name){animation:fade .7s ease both}
.on .hl .claim{animation-delay:.5s}.on .hl .ca{animation-delay:.7s}.on .hl .ctas{animation-delay:.85s}
@keyframes fade{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.pill{display:flex;align-items:center;gap:10px;background:var(--k);color:var(--w);font-size:11px;letter-spacing:.14em;padding:8px 14px;border-radius:30px}
.pill i{width:9px;height:9px;border-radius:50%;background:#5dff9a;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.claim{font:clamp(30px,2.8vw,46px)/.95 Cond;text-transform:uppercase;margin:0}
.claim em{font-style:normal;color:var(--red)}
.hl .ca,.hl .ctas{width:100%;max-width:620px}
/* CA */
.ca{position:relative;display:block;width:100%;text-align:left;background:var(--w);border:4px solid var(--k);box-shadow:8px 8px 0 var(--k);padding:16px 18px;transition:.2s;overflow:hidden}
.ca:before{content:'';position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--red)}
.ca-h{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;padding-left:8px}
.ca-h em{font-style:normal;background:var(--y);padding:0 6px}
.ca-v,.ca-v2{display:block;padding-left:8px;margin:10px 0;font-size:clamp(14px,1.15vw,18px);font-weight:700;word-break:break-all;min-height:24px}
.ca-f{display:flex;align-items:center;gap:10px;padding-left:8px;font-size:11px;letter-spacing:.12em;opacity:.8}
.ca-f .cp{margin-left:auto;background:var(--k);color:var(--w);padding:4px 10px}
.plate-mini{width:18px;height:18px;border-radius:50%;background:var(--red);box-shadow:inset 0 0 0 5px #b51d23,inset 0 0 0 7px var(--red)}
.ca:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--k)}
.ca.ok{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-6px) rotate(-1deg)}40%{transform:translateX(6px) rotate(1deg)}60%{transform:translateX(-3px)}}
.ctas{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:64px;border:4px solid var(--k);font:24px Cond;text-transform:uppercase;text-decoration:none;box-shadow:6px 6px 0 var(--k);transition:.2s;overflow:hidden}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--k)}
.buy{background:var(--red);color:var(--w)}
.buy:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#0000 35%,#fff7 50%,#0000 65%);transform:translateX(-120%);animation:shine 2.8s ease-in-out 2s infinite}
@keyframes shine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.ghost{background:var(--w)}
.ghost svg{width:20px}
.db{width:34px;height:14px;position:relative;background:var(--w);border-radius:3px;animation:lift 1.2s ease-in-out infinite}
.db:before,.db:after{content:'';position:absolute;top:-7px;width:9px;height:28px;background:var(--k);border-radius:3px}
.db:before{left:-4px}.db:after{right:-4px}
@keyframes lift{50%{transform:translateY(-6px) rotate(-8deg)}}

/* tape */
.tape{background:var(--k);color:var(--w);overflow:hidden;transform:rotate(-1.6deg);margin:20px -2% 0;border-block:4px solid var(--y)}
.tape div{display:flex;gap:30px;width:max-content;padding:14px 0;font:28px Cond;white-space:nowrap;animation:tk 24s linear infinite}
.tape b{color:var(--red);font-weight:400}
@keyframes tk{to{transform:translateX(-50%)}}

/* rep */
.rep{display:grid;grid-template-columns:1.1fr .9fr;gap:6%;align-items:center;padding:130px 6%}
.rep p{font-size:15px;line-height:1.6;max-width:460px}
.meter{position:relative;height:56px;border:4px solid var(--k);background:var(--w);margin:24px 0 14px;max-width:520px;box-shadow:6px 6px 0 var(--k)}
.mf{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(-45deg,var(--red) 0 14px,#b51d23 14px 28px);transition:width .25s}
.meter span{position:absolute;inset:0;display:grid;place-items:center;font:22px Cond;letter-spacing:.06em;mix-blend-mode:difference;color:#fff}
.coach{font:28px/1.1 Cond!important;text-transform:uppercase;min-height:32px}
.rep-r{display:grid;justify-items:center;gap:24px}
.curl{width:min(340px,70vw);aspect-ratio:1;border-radius:50%;border:5px solid var(--k);background:var(--y);box-shadow:10px 10px 0 var(--k);display:grid;place-items:center;transition:transform .1s}
.curl:active{transform:translate(4px,4px);box-shadow:6px 6px 0 var(--k)}
.dumb{display:flex;align-items:center;transform-origin:50% 50%}
.dumb i{width:46px;height:140px;background:var(--k);border-radius:10px}
.dumb b{width:110px;height:28px;background:linear-gradient(#ddd,#888)}
.curl.up .dumb{animation:curl .35s ease}
@keyframes curl{50%{transform:translateY(-50px) rotate(-25deg) scale(1.08)}}
.cnt{text-align:center}
.cnt b{display:block;font:110px/1 Cond;color:var(--w);text-shadow:6px 6px 0 var(--k)}
.cnt span{font-size:12px;letter-spacing:.2em}

/* gym shot */
.gymshot{display:grid;grid-template-columns:.9fr 1.1fr;gap:6%;align-items:center;padding:110px 6%}
.hound-bg{position:absolute}
.gs-img{position:relative;border:5px solid var(--k);box-shadow:14px 14px 0 var(--k);transform:rotate(-2deg);max-width:440px;justify-self:center}
.gs-img img{width:100%}
.gs-lbl{position:absolute;left:-20px;bottom:24px;background:var(--red);color:var(--w);font:30px Cond;padding:8px 16px;transform:rotate(-4deg);border:3px solid var(--k)}
.log{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:8px;max-width:520px}
.log li{display:flex;gap:18px;background:var(--w);border:3px solid var(--k);padding:12px 16px;font-size:15px;transition:.25s}
.log li:hover{transform:translateX(8px);background:var(--y)}
.log li span{font-weight:700;color:var(--red)}

/* athlete card */
.card-sec{padding:110px 6%;text-align:center}
.acard{display:grid;grid-template-columns:.9fr 1.1fr;max-width:980px;margin:50px auto 0;text-align:left;background:var(--w);border:5px solid var(--k);box-shadow:16px 16px 0 var(--k);transition:transform .3s}
.acard:hover{transform:rotate(-1deg) scale(1.01)}
.ac-photo{position:relative;border-right:5px solid var(--k);overflow:hidden}
.ac-photo img{width:100%;height:100%;object-fit:cover}
.ac-no{position:absolute;left:16px;top:12px;font:70px Cond;color:var(--w);text-shadow:4px 4px 0 var(--k)}
.ac-info{padding:30px;display:grid;gap:16px;align-content:center}
.ac-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:4px solid var(--k);padding-bottom:12px}
.ac-top b{font:46px Cond;font-weight:400}
.ac-top span{font-size:11px;letter-spacing:.16em;color:var(--red)}
.stat{display:grid;grid-template-columns:120px 1fr 54px;gap:14px;align-items:center;font-size:12px;letter-spacing:.12em}
.stat b{font:28px Cond;font-weight:400;text-align:right}
.sb{height:18px;border:3px solid var(--k);background:#eee}
.sb i{display:block;height:100%;width:0;background:var(--red);transition:width 1.4s cubic-bezier(.2,.9,.2,1)}
.acard.in .sb i{width:var(--v)}
.ac-bot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;background:var(--k);color:var(--w);padding:12px 16px;font-size:12px;letter-spacing:.16em}
.ac-bot b{font:28px Cond;font-weight:400;color:var(--y);letter-spacing:.02em}

/* plan */
.plan{padding:110px 6%;background:var(--k);color:var(--w)}
.plan .eye{background:var(--red)}
.plan h2 em{color:var(--y)}
.days{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.day{position:relative;background:var(--w);color:var(--k);border:4px solid var(--w);padding:28px;display:flex;flex-direction:column;gap:6px;box-shadow:8px 8px 0 var(--red);transition:.25s}
.day:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--red)}
.dn{font-size:12px;letter-spacing:.2em;color:var(--red)}
.day b{font:44px/1 Cond;font-weight:400;text-transform:uppercase}
.day small{font-size:13px;opacity:.7}
.mini{align-self:flex-start;margin-top:14px;background:var(--k);color:var(--w);border:0;padding:10px 16px;font-size:12px;letter-spacing:.14em;text-decoration:none}
.mini:hover{background:var(--red)}

/* final */
.final{padding:120px 6%;display:grid;place-items:center}
.fin{width:100%;max-width:820px;display:grid;justify-items:center;gap:22px;text-align:center}
.fin-img{width:200px;height:200px;border-radius:50%;overflow:hidden;border:5px solid var(--k);box-shadow:8px 8px 0 var(--k);animation:bob 3s ease-in-out infinite}
.fin-img img{width:100%;height:100%;object-fit:cover}
.ca.big{max-width:820px;text-align:center}
.ca.big .ca-v2{font-size:clamp(14px,2vw,24px)}
.btn.wide{width:100%;min-height:80px;font-size:32px}

.ft{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:26px 3.5% 110px;border-top:4px solid var(--k);background:var(--w);font-size:12px}
.ft strong{font:30px Cond;font-weight:400}

.dock{position:fixed;left:50%;bottom:14px;z-index:60;display:flex;gap:8px;padding:8px;background:var(--w);border:4px solid var(--k);box-shadow:6px 6px 0 var(--k);transform:translate(-50%,170%);transition:transform .5s cubic-bezier(.2,1.2,.4,1);max-width:calc(100% - 24px)}
.dock.show{transform:translate(-50%,0)}
.dock button{display:flex;gap:10px;align-items:center;background:#eee;border:0;padding:10px 14px;font-size:12px;min-width:0}
.dock button small{color:var(--red);font-weight:700}
.dock button span{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock a{background:var(--red);color:var(--w);padding:10px 18px;font:20px Cond;text-decoration:none;display:grid;place-items:center;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:96px;z-index:90;background:var(--k);color:var(--y);border:3px solid var(--y);padding:12px 18px;font-size:13px;font-weight:700;transform:translate(-50%,20px);opacity:0;transition:.3s;pointer-events:none}
.toast.v{transform:translate(-50%,0);opacity:1}
.fly{position:fixed;z-index:95;pointer-events:none;font-size:26px;animation:fly .9s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes fly{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r));opacity:0}}
.rv{opacity:0;transform:translateY(50px);transition:opacity .9s,transform .9s cubic-bezier(.2,.9,.2,1)}
.rv.in{opacity:1;transform:none}
.gs-img.rv.in{transform:rotate(-2deg)}

@media(max-width:1000px){
 .hd nav{display:none}
 .hero{grid-template-columns:1fr;padding-top:20px;gap:30px}
 .photo-wrap{order:-1;width:min(70vw,380px)}
 .name{flex-direction:row;gap:.18em}.name span{font-size:21vw}
 .t1{left:-6%}.t2{right:-6%}.t3{right:-3%}
 .rep,.gymshot{grid-template-columns:1fr;gap:40px}
 .acard{grid-template-columns:1fr}.ac-photo{border-right:0;border-bottom:5px solid var(--k);max-height:420px}
 .days{grid-template-columns:1fr}
}
@media(max-width:480px){
 .hd .ic{display:none}.brand b{font-size:24px}
 .ctas{grid-template-columns:1fr}
 .stat{grid-template-columns:96px 1fr 44px}
 .dock button span{max-width:130px}
 .tag b{font-size:22px}.tag{padding:6px 10px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.tag{opacity:1}.acard .sb i{width:var(--v)}}