/* Higher Wave — shared styles, built on the Higher Wave brand guidelines (Fruition Branding)
   White background first, black type, the wellness gradient (#AA2CFF → #FF2C61) as the accent,
   jiu-jitsu red (#D22026) only in jiu-jitsu contexts. Futura PT is set with Jost, its closest free web match. */
:root{
  --black:#000000;
  --white:#FFFFFF;
  --purple:#AA2CFF;
  --pink:#FF2C61;
  --red:#D22026;
  --grad:linear-gradient(90deg,#AA2CFF 0%,#FF2C61 100%);
  --mist:#F6F3F9;                 /* very light lavender wash for alternate sections */
  --grey:#4D4D55;                 /* secondary text */
  --line:rgba(0,0,0,.14);
  --accent:var(--pink);           /* rules, ticks, underlines */
  --font:"Jost","Futura PT",Futura,"Century Gothic",system-ui,sans-serif;
  --max:1120px;
}
body.jj{--accent:var(--red)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--white);color:var(--black);font-family:var(--font);font-size:1.15rem;line-height:1.6;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.measure{max-width:36em}
p+p{margin-top:1em}

h1{font-weight:600;font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;letter-spacing:-.015em;text-wrap:balance}
h2{font-weight:600;font-size:clamp(1.9rem,3.8vw,2.8rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
h3{font-weight:600;font-size:1.4rem;line-height:1.2}
h2+p,h3+p{margin-top:16px}
.kicker{font-weight:500;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:var(--purple)}
body.jj .kicker{color:var(--red)}

/* Header */
.site-head{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:2}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:1.35rem;letter-spacing:.01em}
.wordmark img{height:30px;width:auto}
.nav{display:flex;gap:6px 24px;flex-wrap:wrap;font-size:1rem;font-weight:500}
.nav a{text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px;text-decoration-color:var(--accent)}

/* Hero (white by default; .hero-dark is for jiu-jitsu) */
.hero{background:var(--white);color:var(--black);padding-top:72px;padding-bottom:24px;overflow:hidden}
.lede{font-size:clamp(1.2rem,2vw,1.4rem);margin-top:26px;max-width:32em;color:var(--grey)}
.hero .actions{margin-top:36px}
.hero-split{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.hero-mark{width:100%;max-width:400px;justify-self:end}
@media (max-width:860px){.hero-split{grid-template-columns:1fr;gap:32px}.hero-mark{max-width:220px;justify-self:start;order:-1}}
.wave{display:block;width:100%;height:auto;margin-top:56px}
.wave path{fill:none;stroke:url(#wavegrad);stroke-width:3;stroke-linecap:round;stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 2.6s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.wave path{animation:none;stroke-dashoffset:0}html{scroll-behavior:auto}}

.hero-dark{background:var(--black);color:var(--white)}
.hero-dark .lede,.hero-dark .fine{color:#C9C9CF}
.hero-dark .kicker{color:#FF5A5F}
.hero-logo{width:180px;height:auto;margin-bottom:36px}

/* Buttons: black is primary (brand: black type), the gradient appears on hover */
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--font);font-weight:500;font-size:1.02rem;letter-spacing:.02em;padding:14px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.2;transition:background .2s,color .2s,border-color .2s}
.btn-sun,.btn-ink{background:var(--black);color:var(--white)}
.btn-sun:hover,.btn-ink:hover{background:var(--grad)}
body.jj .btn-sun:hover,body.jj .btn-ink:hover{background:var(--red)}
.btn-line{border-color:currentColor;background:transparent;color:inherit}
.btn-line:hover{background:rgba(127,127,127,.12)}
/* on black backgrounds the primary button flips to white */
.on-dark .btn-sun,.hero-dark .btn-sun,.bg-ink .btn-sun{background:var(--white);color:var(--black)}
.on-dark .btn-sun:hover,.hero-dark .btn-sun:hover,.bg-ink .btn-sun:hover{background:var(--grad);color:var(--white)}
body.jj .hero-dark .btn-sun:hover,.door-bjj .btn-sun:hover{background:var(--red);color:var(--white)}

/* Sections */
.section{padding:96px 0}
.section-tight{padding:64px 0}
.bg-birch{background:var(--mist)}
.bg-ink{background:var(--black);color:var(--white)}
.bg-ink .fine{color:#C9C9CF}
.rule-grad{height:4px;background:var(--grad);border:0}

/* Two doors */
.doors{display:grid;grid-template-columns:1fr 1fr}
.door{padding:76px clamp(20px,6vw,80px)}
.door-logo{height:72px;width:auto;margin-bottom:24px}
.door-bjj{background:var(--black);color:var(--white)}
.door-bjj .kicker{color:#FF5A5F}
.door-bjj .ticks li::before{background:var(--red)}
.door-bjj .btn-sun{background:var(--white);color:var(--black)}
.door-body{background:var(--mist)}
.door p{max-width:30em}
.door .actions{margin-top:30px}
@media (max-width:860px){.doors{grid-template-columns:1fr}.door{padding:60px 20px}.door-logo{height:64px}}

.ticks{list-style:none;margin-top:22px;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:.75em;width:18px;height:3px;border-radius:2px;background:var(--grad)}
body.jj .ticks li::before{background:var(--red)}

/* Book */
.book-grid{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
@media (max-width:760px){.book-grid{grid-template-columns:1fr;gap:36px}}
.cover{width:220px;aspect-ratio:2/3;background:var(--black);color:var(--white);border-radius:3px 8px 8px 3px;padding:26px 22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 6px 0 0 rgba(255,255,255,.08),14px 18px 0 -2px var(--pink)}
.cover-title{font-weight:600;font-size:2.05rem;line-height:1;letter-spacing:-.01em}
.cover-author{font-weight:500;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.cover svg{width:100%;height:auto}
.cover path{fill:none;stroke:url(#covergrad);stroke-width:4;stroke-linecap:round}
.cover-lg{width:min(280px,70vw)}
.cover-lg .cover-title{font-size:2.6rem}
@media (max-width:860px){.cover-lg{width:200px}.cover-lg .cover-title{font-size:2.1rem}}

/* Links row */
.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px;border-top:2px solid var(--black)}
.channel{padding:24px 24px 24px 0;text-decoration:none;display:block}
.channel+.channel{padding-left:24px;border-left:1px solid var(--line)}
.channel h3{font-size:1.2rem}
.channel p{font-size:1rem;color:var(--grey);margin-top:6px}
.channel:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent);text-decoration-thickness:2px}
@media (max-width:1000px) and (min-width:761px){.channels{grid-template-columns:repeat(2,1fr)}.channel:nth-child(3){padding-left:0;border-left:0}.channel:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:760px){.channels{grid-template-columns:1fr}.channel,.channel+.channel{padding:20px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* About */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
@media (max-width:760px){.about{grid-template-columns:1fr;gap:32px}}
.portrait{background:var(--mist);aspect-ratio:4/5;border-radius:6px;overflow:hidden;max-width:420px}
.portrait img{width:100%;height:100%;object-fit:cover}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.principles h3{font-size:1.2rem;padding-top:14px;border-top:3px solid;border-image:var(--grad) 1}
.principles p{font-size:1.02rem;color:var(--grey);margin-top:8px}
@media (max-width:760px){.principles{grid-template-columns:1fr;gap:24px}}

/* Signup forms (Kit): light by default, light-on-dark inside black sections */
.form{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;max-width:600px}
.form input{flex:1 1 200px;font-family:var(--font);font-size:1.05rem;padding:14px 20px;border-radius:999px;border:2px solid rgba(0,0,0,.28);background:var(--white);color:var(--black);min-width:0}
.form input::placeholder{color:#7A7A82}
.form input:focus{border-color:var(--purple);outline:none}
.form button{flex:0 0 auto}
.hero-dark .form input,.bg-ink .form input{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.hero-dark .form input::placeholder,.bg-ink .form input::placeholder{color:#A9A9B0}
.hero-dark .form input:focus{border-color:var(--red)}
.bg-ink .form input:focus{border-color:var(--pink)}
.fine{font-size:.95rem;color:var(--grey);margin-top:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Steps (real sequences only) */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:40px}
.steps li{counter-increment:s;border-top:2px solid var(--black);padding-top:18px}
.steps li::before{content:counter(s);font-weight:600;font-size:2.4rem;line-height:1;color:var(--accent);display:block;margin-bottom:10px}
.steps p{font-size:1.04rem;margin-top:8px}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:28px}}

/* Footer */
.site-foot{background:var(--black);color:#C9C9CF;padding:44px 0;font-size:.98rem;border-top:4px solid;border-image:var(--grad) 1}
body.jj .site-foot{border-image:none;border-top-color:var(--red)}
.site-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand img{height:26px;width:auto}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--white)}
.site-foot nav{display:flex;gap:18px;flex-wrap:wrap}

/* Press feature */
.press{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:8px 32px;padding:28px 0;border-top:2px solid var(--black);border-bottom:1px solid var(--line);text-decoration:none}
.press-label{font-weight:500;font-size:.88rem;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
.press-title{font-weight:600;font-size:clamp(1.4rem,3vw,2rem);line-height:1.1}
.press-cta{font-weight:500;font-size:1rem;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--pink);text-decoration-thickness:2px}
.press:hover .press-title{color:var(--purple)}
.press-quote{grid-column:1/-1;font-style:italic;font-size:clamp(1.15rem,2vw,1.35rem);margin-top:10px;max-width:40em}
@media (max-width:760px){.press{grid-template-columns:1fr}.press-quote{order:3;margin-top:4px}.press-cta{order:4;margin-top:6px}}

/* Offer tiles: two per row in alternating widths, each photo is the link; the detail lives on the offer's own page */
.offers{padding:24px 0 88px}
.offers-head{margin-bottom:32px}
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.t-5{grid-column:span 5}.t-7{grid-column:span 7}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:380px;padding:34px 34px 30px;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--white);background:var(--black);isolation:isolate;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);z-index:-2}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.12) 62%,rgba(0,0,0,.6) 100%);z-index:-1}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.tile.jj::after{background:var(--red)}
.tile-top{display:flex;flex-direction:column;gap:8px;max-width:20em}
.tile-label{font-weight:600;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase}
.tile-title{font-weight:600;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.12;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.tile-cta{font-weight:500;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.tile-cta::before{content:"";width:14px;height:2px;background:currentColor;transition:width .3s}
.tile:hover img,.tile:focus-visible img{transform:scale(1.05)}
.tile:hover::after,.tile:focus-visible::after{transform:scaleX(1)}
.tile:hover .tile-cta::before{width:30px}
@media (max-width:860px){.tiles{gap:14px}.t-5,.t-7{grid-column:span 12}.tile{height:280px;padding:24px 24px 22px}}
@media (prefers-reduced-motion:reduce){.tile img,.tile::after,.tile-cta::before{transition:none}}

/* Credibility stats: large display numerals with short captions, between thin rules */
.stats-band{padding:72px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 56px;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-num{display:inline-block;font-weight:400;font-style:italic;font-size:clamp(3rem,5.6vw,4.6rem);line-height:1.05;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.1em}
.stat-cap{margin-top:16px;font-size:1.1rem;line-height:1.6;color:var(--black);max-width:19em}
@media (max-width:760px){.stats-band{padding:48px 0}.stats{grid-template-columns:1fr;padding:40px 0;gap:36px}}

/* Testimonials */
.testimonials{background:var(--mist);text-align:center}
.testimonials h2{max-width:20em;margin:0 auto}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;text-align:left}
.quote{background:var(--white);border-radius:18px;padding:36px 40px;display:flex;flex-direction:column;gap:18px;box-shadow:0 6px 24px rgba(0,0,0,.05)}
.stars{color:var(--pink);letter-spacing:.18em;font-size:1rem}
.quote blockquote{font-size:1.1rem;line-height:1.65;flex:1}
.quote figcaption{display:flex;align-items:center;gap:16px}
.avatar{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--grad);color:var(--white);display:grid;place-items:center;font-weight:600;font-size:1.3rem}
.quote strong{display:block;font-weight:600;font-size:1.15rem}
.quote small{display:block;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
@media (max-width:760px){.quotes{grid-template-columns:1fr}.quote{padding:28px 24px}}

/* Press feature beside the "Have a question" box */
.press-ask{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:center}
.press-ask .press{grid-template-columns:1fr auto}
.press-ask .press-label{grid-column:1/-1}
@media (max-width:900px){.press-ask{grid-template-columns:1fr;gap:40px}}
.ask{background:var(--black);color:var(--white);border-radius:18px;padding:30px;border-top:5px solid var(--pink);border-image:none;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.ask-title{font-size:1.5rem;line-height:1.15}
.ask-sub{font-size:.98rem;color:#C9C9CF;margin:0}
.ask textarea,.ask input[type=text],.ask input[type=email]{width:100%;font-family:var(--font);font-size:1rem;padding:12px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:var(--white)}
.ask textarea{min-height:96px;resize:vertical;line-height:1.5}
.ask ::placeholder{color:#A9A9B0}
.ask textarea:focus,.ask input:focus{outline:none;border-color:var(--pink)}
.ask-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ask .btn-sun{background:var(--white);color:var(--black);align-self:flex-start}
.ask .btn-sun:hover{background:var(--grad);color:var(--white)}
.ask-done{color:#FF8FAB;font-weight:500;margin:0}
.hp{position:absolute;left:-9999px}