/* 2EZ Coaching. Brand: navy, cream, 2EZ green, Barlow Condensed + Barlow.
   Mobile first: base styles are for phones, min-width queries add the desktop layout. */
:root{
  --navy:#0E1A2B;
  --navy-2:#16263C;
  --cream:#F3F0E8;
  --paper:#FBFAF6;
  --ink:#0E1A2B;
  --muted:#4F5867;
  --soft:#B8C2CF;
  --green:#2FD07A;
  --green-dk:#1F8F55;
  --black:#0A0A0A;
  --head:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --body:'Barlow','Helvetica Neue',sans-serif;
  --pad:20px;
  --ease:cubic-bezier(.2,.75,.2,1);
}
@media (min-width:768px){:root{--pad:40px}}
@media (min-width:1200px){:root{--pad:64px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
p,h1,h2,h3,figure,blockquote{margin:0}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.h{font-family:var(--head);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.005em}
.lbl{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.lbl::before{content:"*";color:var(--green-dk)}
.on-dark .lbl::before{color:var(--green)}
.on-dark{background:var(--navy);color:var(--cream)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--muted);max-width:52ch}
.on-dark .lead{color:var(--soft)}
.accent{color:var(--green)}
.accent-dk{color:var(--green-dk)}

/* ---------- buttons: square, with a sliding fill on hover ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;font-family:var(--head);font-weight:700;font-size:19px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border:2px solid currentColor;transition:color .35s var(--ease),transform .15s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn:active{transform:scale(.97)}
.btn .ar{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-green{background:var(--green);border-color:var(--green);color:var(--navy)}
.btn-green::before{background:var(--cream)}
.btn-green:hover{color:var(--navy)}
.btn-ghost{color:var(--cream)}
.btn-ghost:hover{color:var(--navy)}
.btn-ghost::before{background:var(--cream)}
.btn-ink{color:var(--navy)}
.btn-ink:hover{color:var(--cream)}
.btn-ink::before{background:var(--navy)}
.btn-wide{width:100%}
.link{font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;transition:background-size .35s var(--ease)}
.link:hover{background-size:0 2px;background-position:100% 100%}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--navy);color:var(--cream);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.nav-logo img{height:34px;width:auto}
.nav-links{display:none}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-cta .btn{min-height:42px;padding:0 14px;font-size:16px}
.nav-toggle{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--cream);cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:64px 0 0 0;background:var(--navy);padding:12px var(--pad) 32px;display:flex;flex-direction:column;gap:2px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.mobile-menu.open{opacity:1;transform:none;visibility:visible;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mobile-menu a:not(.btn){font-family:var(--head);font-weight:800;font-size:40px;line-height:1.15;text-transform:uppercase;text-decoration:none;color:var(--cream)}
.mobile-menu a:not(.btn):hover{color:var(--green)}
.mobile-menu .btn{margin-top:auto}
@media (min-width:1024px){
  .nav-links{display:flex;gap:28px}
  .nav-links a{font-family:var(--head);font-weight:700;font-size:17px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--soft);transition:color .2s}
  .nav-links a:hover{color:var(--cream)}
  .nav-toggle{display:none}
}

/* ---------- hero: photo first on phones, headline overlaps its bottom edge ---------- */
.hero{position:relative;background:var(--navy);color:var(--cream);overflow:hidden}
.hero-media{position:relative;height:58vh;min-height:360px;max-height:560px;overflow:hidden;margin:0 calc(-1 * var(--pad))}
.hero-media img{width:100%;height:118%;object-fit:cover;object-position:62% 40%;will-change:transform}
.hero-media::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to bottom,rgba(14,26,43,0),var(--navy))}
.hero-copy{position:relative;z-index:2;margin-top:-120px;padding-bottom:48px}
.hero-where{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--soft);margin-bottom:14px}
.hero-where i{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 0 rgba(47,208,122,.6);animation:ping 2.4s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(47,208,122,0)}100%{box-shadow:0 0 0 0 rgba(47,208,122,0)}}
.hero h1{font-size:clamp(48px,17vw,170px)}
.hero h1 .w{display:block;overflow:hidden;white-space:nowrap}
.hero h1 .w > span{display:block;transform:translateY(105%);animation:wordUp .9s var(--ease) forwards}
.hero h1 .w:nth-child(2) > span{animation-delay:.08s}
.hero h1 .w:nth-child(3) > span{animation-delay:.16s}
.hero h1 .w:nth-child(4) > span{animation-delay:.24s}
@keyframes wordUp{to{transform:none}}
.hero .lead{margin-top:22px;color:var(--soft)}
.hero-ctas{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.hero-price{margin-top:14px;font-size:14px;color:var(--soft)}
.fade-in{opacity:0;animation:fadeIn .8s var(--ease) .45s forwards}
@keyframes fadeIn{to{opacity:1}}
@media (min-width:768px){.hero-ctas{flex-direction:row}}
@media (min-width:1024px){
  .hero{min-height:calc(100vh - 64px)}
  .hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;align-items:end;min-height:calc(100vh - 64px)}
  .hero-copy{grid-column:1 / span 8;grid-row:1;margin:0;padding:96px 0 72px;align-self:end}
  .hero-media{grid-column:7 / span 6;grid-row:1;height:auto;max-height:none;align-self:stretch;margin:0 calc((100vw - min(100vw, 1280px)) / -2 - var(--pad)) 0 0}
  .hero-media img{position:absolute;inset:0;height:115%}
  .hero-media::after{inset:0 auto 0 0;width:55%;height:auto;background:linear-gradient(to right,var(--navy),rgba(14,26,43,0))}
  .hero h1{font-size:clamp(76px,7.4vw,120px)}
}

/* ---------- proof: numbers sit half on navy, half on cream ---------- */
.proof{position:relative;background:linear-gradient(var(--navy) 0 50%,var(--cream) 50% 100%)}
.proof-row{display:grid;grid-template-columns:repeat(3,1fr);background:var(--green);color:var(--navy)}
.pf{padding:20px 12px 18px}
.pf + .pf{box-shadow:inset 1px 0 rgba(14,26,43,.18)}
.pf-num{font-family:var(--head);font-weight:800;font-size:clamp(34px,9.6vw,96px);line-height:.85;white-space:nowrap}
.pf-num small{font-size:.45em}
.pf-label{margin-top:6px;font-size:13px;font-weight:600;line-height:1.3}
@media (min-width:1024px){.proof-row{width:66%;margin-left:auto}.pf{padding:32px 32px 28px}.pf-label{font-size:15px}}

/* ---------- section rhythm: colour blocks and whitespace, no borders ---------- */
.sec{padding:88px 0}
@media (min-width:1024px){.sec{padding:150px 0}}
.paper{background:var(--paper)}

/* ---------- who it's for: sticky title, statements light up as you scroll ---------- */
.scrolly{display:grid;grid-template-columns:1fr;gap:28px}
.scrolly-title{position:relative}
.scrolly-title .h{font-size:clamp(44px,12vw,120px)}
.statements{display:flex;flex-direction:column;gap:56px;padding-bottom:20px}
.st{opacity:.18;transform:translateX(-10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.st.lit{opacity:1;transform:none}
.st .n{font-family:var(--head);font-weight:800;font-size:22px;color:var(--green-dk)}
.st h3{font-family:var(--head);font-weight:800;font-size:clamp(34px,8vw,64px);line-height:.95;text-transform:uppercase;margin:6px 0 10px}
.st p{color:var(--muted);max-width:40ch}
@media (min-width:1024px){
  .scrolly{grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .scrolly-title{position:sticky;top:120px}
  .statements{gap:22vh;padding:8vh 0 18vh}
}

/* ---------- custom: overlapping photo and text block ---------- */
.overlap{display:grid;grid-template-columns:1fr}
.overlap-photo{position:relative;margin:0 calc(-1 * var(--pad))}
.overlap-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.overlap-photo figcaption{position:absolute;left:var(--pad);top:16px;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.overlap-text{position:relative;z-index:2;margin:-90px 0 0 24px;background:var(--navy);color:var(--cream);padding:28px 22px 32px}
.overlap-text .h{font-size:clamp(40px,10vw,84px)}
.overlap-text .lead{margin-top:16px;color:var(--soft)}
.points{list-style:none;padding:0;margin:28px 0 0;counter-reset:p}
.points li{position:relative;padding:0 0 22px 52px;color:var(--soft)}
.points li strong{display:block;color:var(--cream);font-family:var(--head);font-size:24px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:4px}
.points li::before{counter-increment:p;content:"0" counter(p);position:absolute;left:0;top:-2px;font-family:var(--head);font-weight:800;font-size:32px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--green)}
@media (min-width:1024px){
  .overlap{grid-template-columns:repeat(12,1fr);align-items:center}
  .overlap-photo{grid-column:1 / span 6;grid-row:1;margin:0}
  .overlap-text{grid-column:6 / span 7;grid-row:1;margin:0;padding:56px 56px 48px}
}

/* ---------- honest: one big statement, hanging list ---------- */
.honest{display:grid;grid-template-columns:1fr;gap:36px}
.honest .h{font-size:clamp(52px,13vw,150px)}
.honest .h .out{color:transparent;-webkit-text-stroke:2px var(--navy)}
.hlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:28px}
.hlist li{display:grid;grid-template-columns:28px 1fr;gap:12px}
.hlist li::before{content:"";width:14px;height:14px;margin-top:6px;background:var(--green)}
.hlist strong{display:block;font-family:var(--head);font-size:24px;font-weight:700;text-transform:uppercase;line-height:1.05}
.hlist p{color:var(--muted);margin-top:4px}
@media (min-width:1024px){.honest{grid-template-columns:7fr 5fr;gap:80px;align-items:end}.honest-copy{padding-bottom:12px}}

/* ---------- coaches: staggered portraits, swipe on phones ---------- */
.coaches-head{display:grid;gap:18px;margin-bottom:40px}
.coaches-head .h{font-size:clamp(48px,12vw,120px)}
.coach-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 8px;scrollbar-width:none}
.coach-row::-webkit-scrollbar{display:none}
.coach{flex:none;width:72%;scroll-snap-align:start;position:relative}
.coach-img{overflow:hidden}
.coach img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.04);transition:filter .6s var(--ease),transform .8s var(--ease)}
.coach:hover img,.coach.lit img{filter:none;transform:none}
.coach h3{font-family:var(--head);font-weight:800;font-size:40px;text-transform:uppercase;line-height:1;margin-top:14px}
.coach .where{font-weight:600;font-size:14px;color:var(--green)}
.coach p{color:var(--soft);font-size:15px;margin-top:6px}
.places{margin-top:56px;font-family:var(--head);font-weight:800;font-size:clamp(28px,6vw,56px);line-height:1.05;text-transform:uppercase;color:var(--soft)}
.places b{color:var(--cream);font-weight:800}
.places small{display:block;margin-top:12px;font-family:var(--body);font-weight:400;font-size:16px;text-transform:none;color:var(--soft);max-width:52ch;line-height:1.5}
@media (min-width:1024px){
  .coaches-head{grid-template-columns:6fr 5fr;align-items:end;gap:64px}
  .coach-row{overflow:visible;margin:0;padding:0;gap:32px}
  .coach{width:auto;flex:1}
  .coach:nth-child(2){margin-top:96px}
  .coach:nth-child(3){margin-top:192px}
  .places{margin-top:-60px;max-width:60%}
}

/* ---------- how it works: a line fills as you scroll ---------- */
.how{display:grid;grid-template-columns:1fr;gap:40px}
.how .h{font-size:clamp(48px,12vw,120px)}
.track{position:relative;list-style:none;margin:0;padding:0 0 0 44px}
.track-wrap{position:relative}
.track::before,.track-wrap .fill{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:3px;background:rgba(14,26,43,.12)}
.track::before{left:11px}
.track-wrap .fill{z-index:1;background:var(--green);bottom:auto;height:0;transition:height .15s linear}
.track li::before{z-index:2}
.track li{position:relative;padding-bottom:44px}
.track li:last-child{padding-bottom:0}
.track li::before{content:"";position:absolute;left:-44px;top:2px;width:25px;height:25px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 3px rgba(14,26,43,.18);transition:box-shadow .4s var(--ease),background .4s}
.track li.lit::before{background:var(--green);box-shadow:inset 0 0 0 3px var(--green)}
.track h3{font-family:var(--head);font-weight:800;font-size:30px;text-transform:uppercase;line-height:1}
.track p{color:var(--muted);margin-top:6px;max-width:44ch}
@media (min-width:1024px){.how{grid-template-columns:5fr 7fr;gap:64px}.how-title{position:sticky;top:120px;align-self:start}.track li{padding-bottom:72px}}

/* ---------- testimonials: offset quotes, no boxes ---------- */
.quotes-head{display:grid;gap:16px;margin-bottom:48px}
.quotes-head .h{font-size:clamp(48px,12vw,120px)}
.quotes{display:grid;grid-template-columns:1fr;gap:56px}
.q .res{font-family:var(--head);font-weight:800;font-size:clamp(44px,11vw,72px);line-height:.9;text-transform:uppercase;color:var(--green-dk)}
.q blockquote{margin-top:14px;font-size:19px;line-height:1.5;max-width:40ch}
.q figcaption{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:14px;color:var(--muted)}
.q figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.q figcaption strong{color:var(--ink)}
.q-feature{background:var(--navy);color:var(--cream);margin:0 calc(-1 * var(--pad));padding:40px var(--pad)}
.q-feature .res{color:var(--green);font-size:clamp(72px,20vw,180px)}
.q-feature blockquote{font-size:22px}
.q-feature figcaption{color:var(--soft)}
.q-feature figcaption strong{color:var(--cream)}
.more-quotes{margin-top:56px;display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding:0 var(--pad) 8px;scrollbar-width:none}
.more-quotes::-webkit-scrollbar{display:none}
.mq{flex:none;width:78%;max-width:360px;scroll-snap-align:start}
.mq .res{font-family:var(--head);font-weight:800;font-size:28px;line-height:1;text-transform:uppercase}
.mq p{margin-top:8px;color:var(--muted)}
.mq span{display:block;margin-top:8px;font-size:14px;font-weight:600}
.swipe{margin-top:16px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.swipe svg{animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(6px)}}
@media (min-width:1024px){
  .quotes-head{grid-template-columns:6fr 5fr;align-items:end;gap:64px}
  .quotes{grid-template-columns:repeat(12,1fr);gap:72px 32px}
  .q-feature{grid-column:1 / span 7;margin:0;padding:56px}
  .q:nth-child(2){grid-column:9 / span 4;align-self:end}
  .q:nth-child(3){grid-column:2 / span 5}
  .q:nth-child(4){grid-column:8 / span 5;margin-top:120px}
  .q:nth-child(5){grid-column:3 / span 5}
  .q:nth-child(6){grid-column:9 / span 4;margin-top:80px}
  .more-quotes{margin-left:0;margin-right:0;padding:0 0 8px}
  .swipe{display:none}
  .mq{width:300px}
}

/* ---------- pricing: price as the hero, comparison as bars ---------- */
.price-grid{display:grid;grid-template-columns:1fr;gap:48px}
.price-big{font-family:var(--head);font-weight:800;font-size:clamp(110px,32vw,280px);line-height:.8;letter-spacing:-.02em}
.price-big sup{font-size:.32em;vertical-align:top;position:relative;top:.25em}
.price-sub{margin-top:14px;font-weight:600}
.price-sub span{display:block;font-weight:400;color:var(--muted);font-size:15px;margin-top:4px}
.bars{margin-top:36px;display:flex;flex-direction:column;gap:18px}
.bar-label{display:flex;justify-content:space-between;font-weight:600;font-size:15px}
.bar-label span{color:var(--muted);font-weight:400}
.bar{height:14px;background:rgba(14,26,43,.08);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--muted);transition:width 1.2s var(--ease)}
.bar.us i{background:var(--green)}
.bars.shown .bar i{width:var(--w)}
.incl{list-style:none;padding:0;margin:0}
.incl li{padding:16px 0 16px 34px;position:relative}
.incl li + li{background:linear-gradient(rgba(14,26,43,.1),rgba(14,26,43,.1)) top/100% 1px no-repeat}
.incl li::before{content:"";position:absolute;left:2px;top:23px;width:13px;height:7px;border-left:3px solid var(--green-dk);border-bottom:3px solid var(--green-dk);transform:rotate(-45deg)}
.incl strong{font-family:var(--head);font-weight:700;font-size:21px;text-transform:uppercase}
.price-ctas{display:flex;flex-direction:column;gap:10px;margin-top:28px}
@media (min-width:1024px){.price-grid{grid-template-columns:7fr 5fr;gap:96px;align-items:end}}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:1fr;gap:32px}
.faq-grid .h{font-size:clamp(48px,12vw,120px)}
.faq details{padding:0}
.faq details + details{background:linear-gradient(rgba(14,26,43,.12),rgba(14,26,43,.12)) top/100% 1px no-repeat}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:76px;font-family:var(--head);font-weight:700;font-size:24px;text-transform:uppercase;line-height:1.05}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;position:relative;width:18px;height:18px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;background:var(--green-dk);transition:transform .35s var(--ease)}
.faq summary i::before{left:0;right:0;top:8px;height:3px}
.faq summary i::after{top:0;bottom:0;left:8px;width:3px}
.faq details[open] summary i::after{transform:rotate(90deg)}
.faq .ans{overflow:hidden;height:0;transition:height .4s var(--ease)}
.faq .ans p{padding:0 0 24px;color:var(--muted);max-width:60ch}
.no-js .faq .ans{height:auto}
@media (min-width:1024px){.faq-grid{grid-template-columns:5fr 7fr;gap:64px}}

/* ---------- black call to action band ---------- */
.cta{background:var(--black);color:var(--cream);padding:96px 0;position:relative;overflow:hidden}
.cta .h{font-size:clamp(64px,19vw,220px);line-height:.85}
.cta .h span{display:block}
.cta .h span:last-child{color:var(--green);padding-left:12vw}
.cta .lead{color:var(--soft);margin-top:26px}
.cta-row{display:flex;flex-direction:column;gap:12px;margin-top:32px}
@media (min-width:768px){.cta-row{flex-direction:row}}
@media (min-width:1024px){.cta{padding:150px 0}}

/* ---------- footer ---------- */
.footer{background:var(--navy);color:var(--soft);padding:56px 0 28px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.footer-grid > div{display:flex;flex-direction:column;gap:8px}
.footer-brand{grid-column:1/-1}
.footer-brand img{height:44px;width:auto;align-self:flex-start}
.footer-brand p{margin-top:10px;max-width:34ch;font-size:15px}
.footer .lbl{color:var(--cream);margin-bottom:4px}
.footer a{text-decoration:none;font-size:16px;transition:color .2s}
.footer a:hover{color:var(--green)}
.footer-base{margin-top:44px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:13px;color:#7F8A99}
@media (min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}.footer-brand{grid-column:auto}}

/* ---------- whatsapp ---------- */
.wa{position:fixed;right:16px;bottom:16px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.28);transform:scale(0);animation:waIn .5s var(--ease) 1.2s forwards;transition:transform .2s}
.wa:hover{transform:scale(1.08)!important}
.wa svg{width:28px;height:28px}
@keyframes waIn{to{transform:scale(1)}}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.shown{opacity:1;transform:none}
/* the wipe runs on the image so the observer can still see the figure */
.rv-clip img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.rv-clip.shown img{clip-path:inset(0 0 0 0)}
.no-js .rv,.no-js .st{opacity:1;transform:none}
.no-js .rv-clip img{clip-path:none}
.no-js .bar i{width:var(--w)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.st{opacity:1!important;transform:none!important}
  .rv-clip img{clip-path:none!important}
  .hero h1 .w > span{transform:none}
  .wa{transform:none}
}

/* ---------- 1-1 page pieces ---------- */
.hero-11 h1{font-size:clamp(32px,9.2vw,120px)}
.hero-eyebrow{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
@media (min-width:1024px){.hero-11 h1{font-size:clamp(64px,6vw,100px)}}

/* versus: two columns, no table borders. Phones: each row stacks "them" above "us". */
.vs-head{display:grid;gap:16px;margin-bottom:44px}
.vs-head .h{font-size:clamp(48px,12vw,120px)}
.vs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px}
.vs li{display:grid;grid-template-columns:1fr;gap:6px}
.vs .them{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(14,26,43,.35);font-size:16px}
.vs .us{font-family:var(--head);font-weight:800;font-size:clamp(28px,7vw,44px);line-height:1;text-transform:uppercase;display:flex;gap:12px;align-items:baseline}
.vs .us::before{content:"";flex:none;width:14px;height:14px;background:var(--green);transform:translateY(-2px)}
.vs-cols{display:none}
@media (min-width:1024px){
  .vs-wrap{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .vs-head{position:sticky;top:120px;margin:0}
  .vs-cols{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
  .vs-cols span:last-child{color:var(--green-dk)}
  .vs li{grid-template-columns:1fr 1.4fr;gap:32px;align-items:baseline}
  .vs{gap:40px}
}

/* intro offer: an offset navy slab that overlaps the price block on desktop */
.intro{background:var(--navy);color:var(--cream);padding:28px 24px;margin-top:40px;position:relative}
.intro h3{font-family:var(--head);font-weight:800;font-size:34px;text-transform:uppercase;line-height:1}
.intro p{color:var(--soft);margin:10px 0 20px;max-width:40ch}
@media (min-width:1024px){.intro{margin:48px 0 0 -48px;padding:36px 40px}}

/* athlete stories: alternating rows, text slab overlaps the photo edge */
.story{display:grid;grid-template-columns:1fr;margin-top:56px}
.story:first-of-type{margin-top:0}
.story-img{margin:0 calc(-1 * var(--pad));overflow:hidden}
.story-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.story-text{position:relative;z-index:2;background:var(--cream);margin:-48px 0 0 20px;padding:24px 0 0 22px}
.story-text .res{font-family:var(--head);font-weight:800;font-size:clamp(48px,12vw,88px);line-height:.85;color:var(--green-dk);text-transform:uppercase}
.story-text h3{font-family:var(--head);font-weight:800;font-size:26px;text-transform:uppercase;line-height:1;margin-top:10px}
.story-text p{color:var(--muted);margin-top:10px;max-width:46ch}
@media (min-width:1024px){
  .story{grid-template-columns:repeat(12,1fr);align-items:center;margin-top:120px}
  .story-img{grid-column:1 / span 7;grid-row:1;margin:0}
  .story-text{grid-column:7 / span 6;grid-row:1;margin:0;padding:44px 0 44px 48px}
  .story.flip .story-img{grid-column:6 / span 7}
  .story.flip .story-text{grid-column:1 / span 6;padding:44px 48px 44px 0}
}

/* ---------- 1-1 page v2 ---------- */
.hero-offer{margin-top:22px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.hero-offer .p{font-family:var(--head);font-weight:800;font-size:44px;line-height:1;color:var(--cream)}
.hero-offer .p small{font-size:18px;font-weight:600;color:var(--soft);margin-left:4px}
.hero-offer .t{font-size:14px;color:var(--soft)}
.hero-proof{margin-top:16px;font-size:14px;color:var(--soft);display:flex;flex-wrap:wrap;gap:6px 16px}
.hero-proof b{color:var(--green);font-weight:700}

/* what your £99.99 buys: big numbered list, price block sticks beside it on desktop */
.buys{display:grid;grid-template-columns:1fr;gap:40px}
.buys-side .h{font-size:clamp(48px,12vw,112px)}
.buys-list{list-style:none;margin:0;padding:0;counter-reset:b}
.buys-list li{position:relative;padding:22px 0 22px 58px}
.buys-list li + li{background:linear-gradient(rgba(14,26,43,.1),rgba(14,26,43,.1)) top/100% 1px no-repeat}
.buys-list li::before{counter-increment:b;content:"0" counter(b);position:absolute;left:0;top:20px;font-family:var(--head);font-weight:800;font-size:34px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--green-dk)}
.buys-list h3{font-family:var(--head);font-weight:800;font-size:28px;line-height:1;text-transform:uppercase}
.buys-list p{color:var(--muted);margin-top:6px;max-width:52ch}
.buys-list .not{display:block;margin-top:6px;font-size:14px;color:var(--green-dk);font-weight:600}
.mini-compare{margin-top:24px;font-size:15px;color:var(--muted)}
.mini-compare .bar{height:10px}
.notfor{margin-top:28px;padding:20px 22px;background:var(--navy);color:var(--soft);font-size:16px}
.notfor strong{display:block;font-family:var(--head);font-weight:800;font-size:22px;text-transform:uppercase;color:var(--cream);margin-bottom:4px}
@media (min-width:1024px){.buys{grid-template-columns:5fr 7fr;gap:72px}.buys-side{position:sticky;top:110px;align-self:start}}

/* PB Destroyer offer inline with the steps */
.offer{margin-top:44px;display:grid;gap:14px;padding:28px 24px;background:var(--navy);color:var(--cream)}
.offer h3{font-family:var(--head);font-weight:800;font-size:34px;line-height:1;text-transform:uppercase}
.offer p{color:var(--soft);max-width:46ch}
@media (min-width:1024px){.offer{grid-template-columns:1fr auto;align-items:center;padding:36px 40px}}

/* compact proof */
.proof3{display:grid;grid-template-columns:1fr;gap:36px}
.p3 img{width:100%;aspect-ratio:3/2;object-fit:cover}
.p3 .res{margin-top:14px;font-family:var(--head);font-weight:800;font-size:clamp(44px,10vw,64px);line-height:.85;color:var(--green-dk);text-transform:uppercase}
.p3 h3{font-family:var(--head);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1;margin-top:8px}
.p3 p{color:var(--muted);margin-top:8px;font-size:15px}
.quotes3{display:grid;grid-template-columns:1fr;gap:32px;margin-top:56px}
.quotes3 blockquote{font-size:18px;line-height:1.5}
.quotes3 .res{font-family:var(--head);font-weight:800;font-size:30px;text-transform:uppercase;line-height:1;margin-bottom:8px}
.quotes3 figcaption{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px;color:var(--muted)}
.quotes3 figcaption img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.quotes3 strong{color:var(--ink)}
@media (min-width:1024px){
  .proof3{grid-template-columns:repeat(3,1fr);gap:32px}
  .proof3 .p3:nth-child(2){margin-top:72px}
  .proof3 .p3:nth-child(3){margin-top:144px}
  .quotes3{grid-template-columns:repeat(3,1fr);gap:40px}
}

/* slim coaches strip */
.slim{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.slim .h{font-size:clamp(40px,9vw,80px)}
.faces{display:flex;gap:18px}
.face{flex:1;text-align:left}
.face img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1);transition:filter .5s var(--ease)}
.face:hover img,.face.lit img{filter:none}
.face strong{display:block;font-family:var(--head);font-weight:800;font-size:24px;text-transform:uppercase;margin-top:8px;line-height:1}
.face span{font-size:13px;color:var(--soft)}
@media (min-width:1024px){.slim{grid-template-columns:5fr 7fr;gap:64px}}

/* sticky start bar on phones */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 88px 10px 16px;background:var(--navy);color:var(--cream);box-shadow:0 -8px 24px rgba(0,0,0,.2);transform:translateY(110%);transition:transform .45s var(--ease)}
.stickybar.show{transform:none}
.stickybar .sp{font-family:var(--head);font-weight:800;font-size:24px;line-height:1}
.stickybar .sp small{display:block;font-family:var(--body);font-weight:500;font-size:12px;color:var(--soft)}
.stickybar .btn{min-height:46px;padding:0 16px;font-size:16px;white-space:nowrap;flex:none}
.has-sticky .wa{bottom:14px}
@media (min-width:1024px){.stickybar{display:none}}

/* formatting fixes for the 1-1 page */
.hero-offer .why{flex-basis:100%;font-size:14px;color:var(--cream);opacity:.85}
.hero-proof{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:4px 22px;font-size:13px;color:var(--soft);line-height:1.3}
.hero-proof li{display:flex;flex-direction:column}
.hero-proof b{font-family:var(--head);font-weight:800;font-size:24px;color:var(--green);line-height:1}
.why-3{margin-top:16px;font-size:15px;color:var(--muted)}
.why-3 strong{color:var(--ink)}
.buys-side .h{font-size:clamp(44px,11vw,96px)}
.buys-list h3{font-size:26px}
.face span{display:block;font-size:13px;line-height:1.35}
.face span + span{color:var(--green)}
.stickybar .sp small{font-size:12px}
@media (max-width:1023px){.side-cta{display:none}.sec{padding:72px 0}.offer{margin-top:36px}}
@media (max-width:1023px){
  .hero-11 .hero-media{height:42vh;min-height:280px}
  .hero-11 .hero-copy{margin-top:-90px}
  .hero-offer .why{display:none}
  .footer{padding-bottom:96px}
}
@media (min-width:1024px){.buys-side .h{font-size:clamp(56px,5.6vw,84px)}}

/* keep the scroll story going on the 1-1 page */
.buys-list li{transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media (min-width:1024px){
  .buys-list li{opacity:.28;transform:translateX(-8px)}
  .buys-list li.lit{opacity:1;transform:none}
  .quotes3 figure:nth-child(2){margin-top:56px}
  .quotes3 figure:nth-child(3){margin-top:112px}
}
.no-js .buys-list li{opacity:1;transform:none}
.hero-proof.rv{opacity:1;transform:none}

/* ---------- sub page hero (coaches, faq): headline only, no photo on the right ---------- */
.subhero{background:var(--navy);color:var(--cream);padding:72px 0 64px;position:relative;overflow:hidden}
.subhero h1{font-size:clamp(56px,16vw,180px)}
.subhero h1 .w{display:block;overflow:hidden}
.subhero h1 .w > span{display:block;transform:translateY(105%);animation:wordUp .9s var(--ease) forwards}
.subhero h1 .w:nth-child(2) > span{animation-delay:.1s}
.subhero .lead{margin-top:24px}
.subhero .jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.subhero .jump a{font-family:var(--head);font-weight:700;font-size:17px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--cream);padding:10px 16px;box-shadow:inset 0 0 0 2px rgba(243,240,232,.25);transition:box-shadow .3s var(--ease),color .3s}
.subhero .jump a:hover{box-shadow:inset 0 0 0 2px var(--green);color:var(--green)}
@media (min-width:1024px){.subhero{padding:120px 0 104px}.subhero h1{font-size:clamp(110px,11vw,170px)}}

/* ---------- coach profiles: big photo, overlapping navy slab, alternating ---------- */
.profile{display:grid;grid-template-columns:1fr;margin-top:72px}
.profile:first-child{margin-top:0}
.profile-img{margin:0 calc(-1 * var(--pad));overflow:hidden;position:relative}
.profile-img img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .8s var(--ease)}
.profile.lit .profile-img img,.profile:hover .profile-img img{filter:none}
.profile-name{position:absolute;left:var(--pad);bottom:12px;font-family:var(--head);font-weight:800;font-size:clamp(72px,22vw,160px);line-height:.8;text-transform:uppercase;color:var(--cream);text-shadow:0 4px 30px rgba(0,0,0,.35)}
.profile-text{position:relative;z-index:2;background:var(--navy);color:var(--cream);margin:-36px 0 0 18px;padding:26px 22px 30px}
.profile-text .where{font-weight:600;font-size:14px;color:var(--green)}
.profile-text h2{font-family:var(--head);font-weight:800;font-size:clamp(30px,7vw,48px);line-height:.95;text-transform:uppercase;margin-top:8px}
.profile-text .facts{list-style:none;padding:0;margin:18px 0 0}
.profile-text .facts li{padding:10px 0 10px 24px;position:relative;color:var(--soft)}
.profile-text .facts li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:10px;background:var(--green)}
.coached{margin-top:22px}
.coached .lbl{color:var(--cream)}
.coached ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:12px}
.coached li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.coached b{font-family:var(--head);font-weight:800;font-size:24px;color:var(--green);line-height:1;text-transform:uppercase}
.coached span{color:var(--soft);font-size:15px}
@media (min-width:1024px){
  .profile{grid-template-columns:repeat(12,1fr);align-items:center;margin-top:140px}
  .profile-img{grid-column:1 / span 7;grid-row:1;margin:0}
  .profile-img img{aspect-ratio:5/4}
  .profile-text{grid-column:7 / span 6;grid-row:1;margin:0;padding:48px 48px 44px}
  .profile.flip .profile-img{grid-column:6 / span 7}
  .profile.flip .profile-text{grid-column:1 / span 6}
  .profile.flip .profile-name{left:auto;right:24px}
}
.values{display:grid;grid-template-columns:1fr;gap:36px}
.values .h{font-size:clamp(48px,12vw,112px)}
@media (min-width:1024px){.values{grid-template-columns:5fr 7fr;gap:72px}}

/* ---------- full faq: grouped, group title sticks on desktop ---------- */
.faq-group{display:grid;grid-template-columns:1fr;gap:20px}
.faq-group + .faq-group{margin-top:80px}
.faq-group .gt .n{font-family:var(--head);font-weight:800;font-size:22px;color:var(--green-dk)}
.faq-group .gt h2{font-family:var(--head);font-weight:800;font-size:clamp(40px,10vw,80px);line-height:.92;text-transform:uppercase;margin-top:6px}
@media (min-width:1024px){.faq-group{grid-template-columns:5fr 7fr;gap:64px}.faq-group .gt{position:sticky;top:110px;align-self:start}.faq-group + .faq-group{margin-top:120px}}
.ask{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.ask .h{font-size:clamp(44px,11vw,96px)}
.ask-ctas{display:flex;flex-direction:column;gap:10px}
@media (min-width:768px){.ask-ctas{flex-direction:row}}
@media (min-width:1024px){.ask{grid-template-columns:7fr 5fr}}
.subhero .lead{color:var(--soft)}
@media (max-width:1023px){.profile-name{bottom:46px}}