@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Manrope:wght@400;500;600;700&display=swap'); html,body{margin:0;padding:0;background:#FAFAF6;color:#0E0F0C;font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth} *{box-sizing:border-box} img{max-width:100%;display:block} a{color:#0E0F0C;text-decoration:none} a:hover{color:#5A6B00} button,input,select,textarea{font-family:inherit} button{cursor:pointer} .wrap{max-width:1280px;margin:0 auto;padding:0 24px} @keyframes spin{to{transform:rotate(360deg)}} @keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}} @keyframes riseIn{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}} @keyframes marquee{to{transform:translateX(-50%)}} @keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18px) rotate(4deg)}} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(216,255,58,.7)}100%{box-shadow:0 0 0 22px rgba(216,255,58,0)}} @keyframes swing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}} @keyframes wordIn{from{opacity:0;transform:translateY(60%) skewY(6deg)}to{opacity:1;transform:none}} @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}} @keyframes ballV{0%{top:0;transform:rotate(0)}50%{top:calc(100% - 56px);transform:rotate(300deg)}100%{top:0;transform:rotate(0)}} @keyframes ballH{0%{transform:translateX(0) rotate(0)}50%{transform:translateX(var(--lane)) rotate(300deg)}100%{transform:translateX(0) rotate(0)}} @keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(3deg)}} @keyframes popIn{0%{transform:scale(0) rotate(-30deg);opacity:0}70%{transform:scale(1.2) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}} /* Scroll-reveal: elements only start hidden once we know JS is running and will reveal them (html.js, set by an inline script in before first paint) — replacing the design prototype's animation-timeline:view() with real cross-browser support. If JS is disabled, .reveal elements stay visible by default, so the page never depends on JS to not look blank. */ html.js .reveal{opacity:0;transform:translateY(40px)} .reveal.in{animation:rise .7s cubic-bezier(.2,.8,.2,1) both} @media (prefers-reduced-motion: reduce){ html.js .reveal{opacity:1;transform:none;animation:none} } /* Header / nav */ .bk-header{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px} .bk-logo{display:flex;align-items:center;gap:10px;font-family:'Unbounded';font-weight:900;font-size:22px;letter-spacing:-.02em} .bk-logo-dot{width:26px;height:26px;border-radius:50%;background:#D8FF3A;border:3px solid #0E0F0C;display:inline-block;animation:spin 6s linear infinite;background-image:radial-gradient(circle at 30% 50%,transparent 58%,#0E0F0C 60%,#0E0F0C 66%,transparent 68%)} .bk-nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto} .bk-nav a{border:0;cursor:pointer;padding:10px 16px;border-radius:999px;font-weight:600;font-size:15px;background:transparent;color:#0E0F0C;transition:background .25s,color .25s} .bk-nav a:hover{background:#ECEEE3} .bk-nav a.active{background:#0E0F0C;color:#D8FF3A} .bk-nav a.active:hover{color:#D8FF3A} .bk-phone{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;white-space:nowrap;padding:10px 14px 10px 10px;border-radius:999px;border:2px solid #0E0F0C;background:#fff;transition:background .25s,transform .25s;height:42px} .bk-phone:hover{background:#D8FF3A;transform:translateY(-2px);color:#0E0F0C} .bk-phone-icon{width:26px;height:26px;border-radius:50%;background:#0E0F0C;display:grid;place-items:center;flex-shrink:0} .bk-cta{background:#0E0F0C;color:#D8FF3A;padding:12px 20px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .25s cubic-bezier(.2,.8,.2,1);white-space:nowrap} .bk-cta:hover{transform:translateY(-2px) scale(1.03);color:#D8FF3A} .bk-phone-m{display:none;margin-left:auto;align-items:center;gap:8px;height:44px;padding:0 14px 0 6px;border-radius:999px;border:2px solid #0E0F0C;background:#D8FF3A;font-weight:700;font-size:14px;white-space:nowrap;color:#0E0F0C} .bk-burger{display:none;flex-shrink:0;width:44px;height:44px;border-radius:50%;border:2px solid #0E0F0C;background:#fff;cursor:pointer;place-items:center;padding:0} .bk-burger-bars{display:block;width:18px;height:2px;background:#0E0F0C;box-shadow:0 -6px 0 #0E0F0C,0 6px 0 #0E0F0C} .bk-mobile-menu{border-top:1px solid #E6E7DE;padding:12px 16px 20px;display:none;flex-direction:column;gap:6px;background:#FAFAF6;animation:fadeUp .3s both} .bk-mobile-menu.open{display:flex} .bk-mobile-menu a.link{border:0;cursor:pointer;padding:14px 16px;border-radius:14px;font-weight:700;font-size:17px;text-align:left;background:transparent;color:#0E0F0C} .bk-mobile-menu a.link.active{background:#0E0F0C;color:#D8FF3A} .bk-mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .bk-mobile-actions a{text-align:center;padding:14px;border-radius:999px;border:2px solid #0E0F0C;font-weight:700;font-size:14px} .bk-mobile-actions a.cta{background:#0E0F0C;color:#D8FF3A;border-color:#0E0F0C} @media (max-width:1100px){.bk-nav,.bk-phone,.bk-cta{display:none!important}.bk-burger{display:grid!important}.bk-phone-m{display:inline-flex!important}} @media (max-width:420px){.bk-phone-m-text{display:none}.bk-phone-m{padding:0 6px!important}} @media (max-width:640px){.bk-collage{min-height:420px!important;margin-top:24px}.bk-header{padding:12px 16px!important}.coaches-grid{grid-template-columns:1fr!important;gap:30px!important}} @media (min-width:641px) and (max-width:900px){.coaches-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} /* Marquee */ .bk-marquee{background:#0E0F0C;color:#D8FF3A;overflow:hidden;padding:16px 0;transform:rotate(-1.2deg);margin:24px -20px;font-family:'Unbounded';font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.04em} .bk-marquee-track{display:flex;width:max-content;animation:marquee 22s linear infinite} .bk-marquee-track span{white-space:pre} @media (prefers-reduced-motion: reduce){.bk-marquee-track{animation:none}} /* Hero word rotator */ .bk-rotator{display:inline-grid;padding:0 .12em;background:#D8FF3A;overflow:hidden;vertical-align:top} .bk-rotator span{grid-area:1/1;display:block;opacity:0} .bk-rotator span.active{animation:wordIn .7s cubic-bezier(.2,.8,.2,1) both} /* Booking modal */ .bk-modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(14,15,12,.55);backdrop-filter:blur(6px);display:none;place-items:center;padding:16px;overflow-y:auto;animation:fadeUp .25s both} .bk-modal-overlay.open{display:grid} .bk-modal{position:relative;width:100%;max-width:560px;background:#D8FF3A;border:3px solid #0E0F0C;border-radius:32px;padding:clamp(24px,4vw,40px);box-shadow:14px 14px 0 #0E0F0C;animation:riseIn .45s cubic-bezier(.2,.8,.2,1) both;max-height:calc(100vh - 32px);overflow-y:auto} .bk-modal-close{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;border:2px solid #0E0F0C;background:#fff;cursor:pointer;font-size:20px;font-weight:700;display:grid;place-items:center;padding:0;line-height:1;transition:transform .25s} .bk-modal-close:hover{transform:rotate(90deg)} .bk-field{border:2px solid #0E0F0C;border-radius:14px;padding:16px 18px;font-size:16px;background:#fff;outline:none;transition:box-shadow .2s;width:100%} .bk-field:focus{box-shadow:4px 4px 0 #0E0F0C} .bk-field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px} .bk-select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#0E0F0C 50%),linear-gradient(135deg,#0E0F0C 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;color:#757575} .bk-select.filled{color:#0E0F0C} .sr-only-check{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .bk-consent{display:flex;gap:12px;align-items:start;cursor:pointer;font-size:14px;line-height:1.5;color:#3A3D33;margin-top:4px} .bk-consent-box{width:24px;height:24px;border-radius:7px;border:2px solid #0E0F0C;background:#fff;flex-shrink:0;cursor:pointer;display:grid;place-items:center;font-size:14px;font-weight:900;color:#0E0F0C;padding:0;transition:background .2s;margin-top:1px} .bk-consent-box.checked{background:#0E0F0C;color:#D8FF3A} .bk-error{background:#0E0F0C;color:#D8FF3A;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;display:none} .bk-error.show{display:block} .bk-submit{background:#0E0F0C;color:#D8FF3A;border:0;padding:18px;border-radius:999px;font-weight:700;font-size:16px;cursor:pointer;margin-top:6px;transition:transform .3s cubic-bezier(.2,.8,.2,1);width:100%} .bk-submit:hover{transform:translateY(-3px) scale(1.01)} .bk-submit:disabled{opacity:.6;cursor:default;transform:none} .bk-success{background:#0E0F0C;color:#fff;border-radius:20px;padding:28px;animation:riseIn .5s both;display:none} .bk-success.show{display:block} .bk-success .t{font-family:'Unbounded';font-weight:700;font-size:22px} .bk-success .d{color:#C8CBB9;margin-top:8px;line-height:1.5} .bk-form{display:grid;gap:12px} .bk-form.hide{display:none} /* Cookie banner */ .bk-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;display:flex;justify-content:center;pointer-events:none} .bk-cookie.hidden{display:none} .bk-cookie-box{pointer-events:auto;max-width:720px;width:100%;background:#0E0F0C;color:#fff;border-radius:24px;padding:20px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;box-shadow:0 24px 60px -20px rgba(14,15,12,.6);animation:slideUp .6s cubic-bezier(.2,.8,.2,1) both} .bk-cookie-dot{width:40px;height:40px;border-radius:50%;background:#D8FF3A;border:3px solid #fff;flex-shrink:0;background-image:radial-gradient(circle at 30% 50%,transparent 58%,#0E0F0C 60%,#0E0F0C 66%,transparent 68%);animation:spin 8s linear infinite} .bk-cookie-text{flex:1 1 260px;font-size:14px;line-height:1.5;color:#C8CBB9} .bk-cookie-text button{background:none;border:0;padding:0;color:#fff;font-weight:700;text-decoration:underline;cursor:pointer;font-size:14px} .bk-cookie-actions{display:flex;gap:8px;flex-wrap:wrap} .bk-cookie-accept{background:#D8FF3A;color:#0E0F0C;border:0;padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;transition:transform .25s} .bk-cookie-accept:hover{transform:translateY(-2px)} .bk-cookie-decline{background:transparent;color:#fff;border:2px solid #3A3D33;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer} .bk-cookie-decline:hover{border-color:#fff} /* FAQ accordion */ .bk-faq-item{background:#fff;border:2px solid #0E0F0C;border-radius:20px;overflow:hidden;transition:box-shadow .3s} .bk-faq-item:hover{box-shadow:6px 6px 0 #D8FF3A} .bk-faq-q{width:100%;text-align:left;background:transparent;border:0;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font-weight:700;font-size:17px;color:#0E0F0C} .bk-faq-icon{width:32px;height:32px;border-radius:50%;background:#D8FF3A;border:2px solid #0E0F0C;display:grid;place-items:center;flex-shrink:0;font-size:18px;transition:transform .35s cubic-bezier(.2,.8,.2,1)} .bk-faq-item.open .bk-faq-icon{transform:rotate(45deg)} .bk-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)} .bk-faq-item.open .bk-faq-a{grid-template-rows:1fr} .bk-faq-a-inner{overflow:hidden} .bk-faq-a p{margin:0;padding:0 24px 22px;color:#3A3D33;line-height:1.55} /* Generic hover utilities — ported from the design's per-element style-hover attributes, which only the Claude Design canvas engine understood; plain inline styles can't carry a :hover state, so these give every card/button its hover interaction back via real CSS. Every element these are used on also carries an inline style="..." for layout/colour (for fidelity with the original design), and a plain author-stylesheet rule can never beat an inline declaration of the same property — so every value below needs !important purely to win that one battle against the element's own inline style, not because it needs to beat anything else. */ .hv-fill{transition:background .25s,color .25s} .hv-fill:hover{background:#0E0F0C !important;color:#D8FF3A !important} .hv-lift2{transition:transform .25s} .hv-lift2:hover{transform:translateY(-2px) !important} .hv-lift2-dark{transition:transform .25s} .hv-lift2-dark:hover{transform:translateY(-2px) !important;color:#0E0F0C !important} .hv-lift3{transition:transform .3s} .hv-lift3:hover{transform:translateY(-3px) !important} .hv-lift3-lime{transition:transform .3s} .hv-lift3-lime:hover{transform:translateY(-3px) !important;color:#D8FF3A !important} .hv-lift3-fill{transition:transform .25s,background .25s} .hv-lift3-fill:hover{transform:translateY(-3px) !important;background:#D8FF3A !important;color:#0E0F0C !important} .hv-lift3-shadow{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} .hv-lift3-shadow:hover{transform:translateY(-3px) !important;box-shadow:0 18px 40px -16px rgba(14,15,12,.6) !important;color:#fff !important} .hv-lift4{transition:transform .3s} .hv-lift4:hover{transform:translateY(-4px) !important} .hv-scale103{transition:transform .25s} .hv-scale103:hover{transform:scale(1.03) !important} .hv-card-black{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s} .hv-card-black:hover{transform:translateY(-8px) rotate(-1deg) !important;box-shadow:10px 10px 0 #0E0F0C !important} .hv-plan{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s} .hv-plan:hover{transform:translateY(-8px) !important;box-shadow:10px 10px 0 #D8FF3A !important} .hv-campblock{transition:transform .35s,box-shadow .35s} .hv-campblock:hover{transform:translateY(-6px) !important;box-shadow:8px 8px 0 #0E0F0C !important} .hv-why{transition:transform .3s,border-color .3s} .hv-why:hover{transform:translateX(6px) !important;border-color:#0E0F0C !important} .hv-coach{transition:transform .4s cubic-bezier(.2,.8,.2,1)} .hv-coach:hover{transform:rotate(-2deg) scale(1.02) !important} .hv-row{transition:background .2s} .hv-row:hover{background:#F1F3E6 !important} .hv-phone-color{transition:color .2s} .hv-phone-color:hover{color:#D8FF3A !important} .hv-photo1{transition:transform .5s cubic-bezier(.2,.8,.2,1)} .hv-photo1:hover{transform:rotate(-1deg) scale(1.03) !important;z-index:5} .hv-photo2{transition:transform .5s cubic-bezier(.2,.8,.2,1)} .hv-photo2:hover{transform:rotate(2deg) scale(1.04) !important;z-index:5} .hv-photo3{transition:transform .5s cubic-bezier(.2,.8,.2,1)} .hv-photo3:hover{transform:scale(1.05) !important;z-index:5} .hv-gal{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s} .hv-gal:hover{transform:rotate(0deg) scale(1.02) !important;box-shadow:10px 10px 0 #D8FF3A !important} .hv-ig{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s} .hv-ig:hover{transform:translateY(-6px) !important;box-shadow:12px 12px 0 #D8FF3A !important;color:#fff !important} .hv-ig-btn{transition:transform .3s} .hv-ig-btn:hover{transform:scale(1.04) !important} /* Reviews / Instagram block */ .bk-ig-lane{position:absolute;left:50%;top:24px;bottom:24px;width:0;border-left:2px dashed rgba(216,255,58,.35);pointer-events:none} .bk-ig-ball{position:absolute;left:0;top:0;width:56px;height:56px;margin-left:-28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#EEFF8A,#D8FF3A 45%,#9FBF12);border:3px solid #0E0F0C;overflow:hidden;animation:ballV 5s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none;box-shadow:inset -6px -6px 12px rgba(0,0,0,.15);z-index:2} .bk-ig-right{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:22px;justify-self:end;min-height:180px} .bk-ig-rating{display:flex;align-items:center;gap:12px;background:#1C1E18;border-radius:999px;padding:8px 16px 8px 12px;flex-wrap:wrap} @media (max-width:700px){ .bk-ig{gap:0 !important;padding:28px 20px !important} .bk-ig-lane{left:20px !important;right:20px !important;width:auto !important;height:0 !important;top:auto !important;bottom:auto !important;position:relative !important;order:2;border-left:0 !important;border-top:2px dashed rgba(216,255,58,.35);margin:40px 0} .bk-ig-ball{--lane:calc(100vw - 40px - 56px - 46px);position:absolute !important;left:0 !important;top:-29px !important;margin:0 !important;animation:ballH 5s cubic-bezier(.45,0,.55,1) infinite !important} .bk-ig-right{justify-self:stretch !important;width:100%;min-height:0 !important;align-items:stretch !important;gap:16px !important;order:3} .bk-ig-right>div:first-child>div{max-width:none !important} .bk-ig-rating{justify-content:center;padding:12px 16px !important} .bk-ig-btn{width:100%;justify-content:center;box-sizing:border-box} .bk-ig h2,.bk-ig p{padding-right:0 !important} } /* Gallery slider */ .gal-track{scrollbar-width:none;-webkit-overflow-scrolling:touch} .gal-track::-webkit-scrollbar{display:none} .gal-prev,.gal-next{flex-shrink:0} /* Price tabs */ .bk-price-tab{border:2px solid #0E0F0C;cursor:pointer;padding:12px 20px;border-radius:999px;font-weight:700;font-size:15px;background:#fff;color:#0E0F0C;transition:background .25s,color .25s,transform .25s} .bk-price-tab:hover{transform:translateY(-2px)} .bk-price-tab.active{background:#0E0F0C;color:#D8FF3A} .bk-price-panel{display:none} .bk-price-panel.active{display:block;animation:riseIn .5s both} /* Footer */ .bk-footer{border-top:2px solid #0E0F0C;background:#fff} .bk-footer-cols{max-width:1280px;margin:0 auto;padding:48px 24px 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px} .bk-footer-legal{max-width:1280px;margin:0 auto;padding:20px 24px 32px;border-top:1px solid #E6E7DE;font-size:12px;color:#6B6E62;line-height:1.6}