/* Method · September 2026. Preserve the established palette and media. */
.method-breathwork { --mut: rgba(241, 233, 220, .72); --mut-2: rgba(241, 233, 220, .64); }
.method-breathwork :focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 6px; }
.method-breathwork section[id] { scroll-margin-top: 100px; }
.bw-skip { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 12px 20px; background: var(--text); color: var(--void) !important; border-radius: 8px; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.bw-skip:focus { clip-path: none; width: auto; height: auto; overflow: visible; }
.bw-header { background: rgba(26, 19, 35, .82); }
.bw-header.scrolled { background: rgba(26, 19, 35, .94); }
.bw-nav { height: 84px; }
.bw-nav-cta .bw-btn { color: var(--gold-soft); background: transparent; border: 1px solid rgba(233, 193, 160, .35); box-shadow: none; }
.method-breathwork .bw-hero { padding: 150px 0 72px; text-align: left; }
.bw-hero-video::after { background: linear-gradient(90deg, rgba(26, 19, 35, .96) 5%, rgba(26, 19, 35, .84) 42%, rgba(26, 19, 35, .22) 78%), linear-gradient(0deg, var(--void), transparent 50%); }
.bw-hero .bw-aurora { opacity: .13; }
.bw-opening { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: center; }
.bw-opening-copy { padding: 36px 0; }
.bw-opening .bw-eyebrow { padding: 0; background: none; border: 0; border-radius: 0; color: var(--gold-soft); font-size: 11px; font-weight: 500; letter-spacing: .26em; margin-bottom: 28px; }
.method-breathwork .bw-opening h1 { font-size: clamp(66px, 6.5vw, 94px); font-weight: 500; letter-spacing: -.045em; line-height: 1.03; margin: 0 0 26px; }
.bw-opening h1 .bw-serif { display: block; color: var(--gold-soft); font-weight: 400; letter-spacing: -.04em; }
.method-breathwork .bw-opening .bw-hero-sub { font-size: 17px; line-height: 1.85; max-width: 470px; margin: 0 0 30px; }
.bw-opening .bw-hero-actions { justify-content: flex-start; gap: 26px; margin: 0; }
.bw-opening .bw-btn-glow { background: var(--gold-soft); color: #281e2e; padding: 19px 26px; font-size: 14px; box-shadow: 0 8px 34px -18px rgba(233, 193, 160, .4); }
.bw-opening .bw-btn-glow:hover { background: #f2d1b6; transform: translateY(-2px); }
.bw-opening .bw-btn-glow > span { font-size: 10px; margin-right: 2px; }
.bw-opening-link { display: inline-flex; gap: 12px; align-items: center; font-size: 13px; padding: 14px 0; border-bottom: 1px solid rgba(233, 193, 160, .25); }
.bw-opening-link:hover { color: var(--gold-soft); }
.method-breathwork .bw-opening .bw-hero-note { font-size: 11px; letter-spacing: .015em; color: var(--mut); margin: 22px 0 0; }
.bw-hero-note > span { margin: 0 9px; }
.bw-opening-art { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 510px; text-align: center; }
.bw-opening-orbit { width: 276px; height: 276px; border: 1px solid rgba(233, 193, 160, .22); border-radius: 50%; position: relative; display: grid; place-items: center; box-shadow: 0 0 90px rgba(233, 193, 160, .05), inset 0 0 75px rgba(233, 193, 160, .04); animation: method-orbit 10s ease-in-out infinite; }
.bw-opening-orbit::before, .bw-opening-orbit::after { content: ''; position: absolute; border: 1px solid rgba(233, 193, 160, .10); border-radius: 50%; inset: -24px; }
.bw-opening-orbit::after { inset: 25px; border-color: rgba(233, 193, 160, .13); }
.bw-opening-orbit > span { color: var(--gold-soft); }
.bw-opening-orbit .bw-vessel { width: 82px; height: 138px; }
.method-breathwork .bw-opening-caption { font-family: var(--font-display); font-size: 28px; line-height: 1.25; margin-top: 46px; color: var(--text); }
.bw-opening-caption em { font-weight: 400; color: var(--gold-soft); }
.bw-opening-signature { margin-top: 26px; font-size: 9px; color: var(--mut); letter-spacing: .32em; text-transform: uppercase; }
@keyframes method-orbit { 50% { transform: scale(1.045); border-color: rgba(233, 193, 160, .4); } }

/* The real sessions are the first section, before the immersive phone. */
.method-breathwork .bw-sessions { padding: 70px 0 84px; }
.bw-sessions .bw-sec-head { text-align: left; max-width: none; margin: 0 0 36px; }
.bw-sessions .bw-kicker { font-size: 10px; font-weight: 600; letter-spacing: .22em; margin-bottom: 14px; }
.method-breathwork .bw-sessions h2 { font-size: clamp(38px, 4vw, 56px); font-weight: 500; line-height: 1.12; }
.bw-sessions .bw-sec-head .bw-sub { margin: 16px 0 0; font-size: 15px; max-width: none; }
.bw-audio-grid { gap: 24px; }
.bw-ap { border-radius: 20px; background: rgba(241, 233, 220, .035); border-color: rgba(233, 193, 160, .18); }
.bw-ap-featured { box-shadow: none; }
.bw-ap-art { touch-action: manipulation; }
.bw-ap-body { padding: 20px 22px; }
.bw-ap-body p { font-size: 13px; line-height: 1.7; }
.bw-ap-meta { font-size: 11px; }
.bw-ap-badge { font-size: 9px; letter-spacing: .1em; padding: 5px 10px; box-shadow: none; }
.bw-sessions-cta { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 32px; justify-content: space-between; text-align: left; gap: 16px; }
.bw-sessions-cta > span { font-family: inherit; font-style: normal; font-size: 13px; line-height: 1.65; color: var(--mut); max-width: 650px; }
.bw-sessions-cta .bw-btn { font-size: 13px; padding: 14px 22px; }

/* Keep the phone interaction, with a shorter scroll and calmer decoration. */
.method-breathwork .bw-imm { padding: 0; }
.bw-imm-track { height: 180vh; }
.bw-imm-tip .ic { background: transparent; }
.bw-imm-tip { background: rgba(26, 19, 35, .6); box-shadow: none; }
.method-breathwork :is(.bw-how, .bw-practices, .bw-screens, .bw-why, .bw-faq) { padding-top: 90px; padding-bottom: 90px; }
.bw-sec-head h2 { text-wrap: balance; }
.bw-waitlist .bw-wl-card { border-color: rgba(233, 193, 160, .2); }

@media (max-width: 1050px) {
    .bw-opening { grid-template-columns: 1.4fr 1fr; gap: 14px; }
    .method-breathwork .bw-opening h1 { font-size: 70px; }
    .bw-opening-orbit { width: 210px; height: 210px; }
    .bw-opening-orbit .bw-vessel { height: 112px; }
    .bw-opening .bw-hero-actions { gap: 18px; }
}
@media (min-width: 761px) {
    .bw-audio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .bw-nav { height: 70px; }
    .bw-nav-cta .bw-btn { padding: 11px 18px; }
    .method-breathwork .bw-hero { padding: 118px 0 48px; }
    .bw-opening { display: block; }
    .bw-opening-copy { padding: 18px 0 30px; }
    .bw-opening-art { display: none; }
    .bw-hero-video::after { background: linear-gradient(180deg, rgba(26, 19, 35, .4), rgba(26, 19, 35, .68) 38%, var(--void) 100%); }
    .bw-opening .bw-eyebrow { margin-bottom: 28px; }
    .method-breathwork .bw-opening h1 { font-size: clamp(51px, 8.5vw, 70px); line-height: 1.06; margin-bottom: 25px; }
    .method-breathwork .bw-opening .bw-hero-sub { font-size: 15px; line-height: 1.85; max-width: 440px; }
    .bw-opening .bw-hero-actions { justify-content: flex-start; gap: 20px; }
    .bw-opening .bw-btn-glow { padding: 19px 24px; }
    .method-breathwork .bw-opening .bw-hero-note { max-width: 330px; font-size: 10px; }
    .method-breathwork .bw-sessions { padding: 36px 0 56px; }
    .bw-sessions .bw-sec-head { margin-bottom: 28px; }
    .method-breathwork .bw-sessions h2 { font-size: 42px; }
    .bw-sessions .bw-sub { font-size: 14px; }
    .bw-audio-grid { grid-template-columns: 1fr; gap: 22px; }
    .bw-ap { max-width: 500px; width: 100%; margin: auto; }
    .bw-ap-body p { font-size: 14px; }
    .bw-ap-meta { font-size: 12px; }
    .bw-sessions-cta { align-items: flex-start; }
    .bw-imm-track { height: 140vh; }
    .method-breathwork :is(.bw-how, .bw-practices, .bw-screens, .bw-why, .bw-faq) { padding-top: 62px; padding-bottom: 62px; }
}
@media (max-width: 400px) {
    .bw-opening .bw-hero-actions { gap: 16px; }
    .bw-opening .bw-opening-link { font-size: 12px; }
    .bw-opening .bw-btn-glow { font-size: 13px; padding: 18px 19px; }
    .bw-opening .bw-hero-note > span { margin: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .bw-imm-track { height: auto; }
    .bw-imm-sticky { min-height: 720px; padding: 60px 0; }
}

/* Real application captures, composed in precise device frames. */
.method-breathwork .bw-app-showcase { padding:110px 0 65px; background:radial-gradient(ellipse at 50% 58%,rgba(163,121,137,.13),transparent 58%),#19121f; overflow:hidden; }
.bw-showcase-heading { text-align:center; margin-bottom:75px; }.bw-showcase-heading .bw-kicker { font-size:10px; letter-spacing:.22em; }.method-breathwork .bw-showcase-heading h2 { font-size:clamp(52px,5.7vw,80px); font-weight:500; line-height:1; letter-spacing:-.04em; margin-bottom:24px; }.bw-showcase-heading h2 .bw-serif { color:#e3bfa5; }.bw-showcase-heading p { font-size:15px; color:#b6a7bb; line-height:1.85; }
.bw-device-gallery { display:flex; align-items:flex-start; justify-content:center; gap:42px; padding:22px 8px 38px; }
.bw-device-figure { width:286px; flex:0 0 286px; margin:0; }.bw-device-figure.featured { transform:translateY(-22px); }
.bw-device { display:block; position:relative; background:linear-gradient(125deg,#a6a0a4,#39313b 17%,#0a080d 50%,#524852 83%,#a8a0a4); border:1px solid #877b8380; border-radius:43px; padding:6px; box-shadow:0 0 0 1px #08060b,0 3px 2px #ffffff12,0 36px 55px -20px #0009; transition:transform .35s ease; }
.bw-device:hover { transform:translateY(-5px); }.bw-device::before { content:''; position:absolute; left:-3px; top:92px; width:2px; height:24px; border-radius:2px; background:#756b75; box-shadow:0 36px #756b75,0 66px #756b75; }.bw-device::after { content:''; position:absolute; right:-3px; top:140px; width:2px; height:47px; border-radius:2px; background:#706570; }
.bw-device-screen { border-radius:36px; overflow:hidden; position:relative; border:2px solid #08070b; background:#18121e; }.bw-device-screen > img { display:block; width:100%; height:auto; aspect-ratio:393/852; }
.bw-device-status { position:absolute; inset:11px 20px auto 24px; display:flex; justify-content:space-between; align-items:center; pointer-events:none; color:#f1e9dc; font:600 10px/1 'Inter',sans-serif; }.bw-device-status svg { width:29px; height:10px; }.bw-device-island { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:76px; height:20px; border-radius:99px; background:#070609; box-shadow:inset 0 -1px #ffffff08; pointer-events:none; }.bw-device-island i { position:absolute; top:7px; right:9px; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#1b2538,#060810); }.bw-device-home { position:absolute; bottom:6px; left:34%; right:34%; height:3px; border-radius:99px; background:#e6dce7; pointer-events:none; }
.bw-device-figure figcaption { text-align:center; margin:27px -8px 0; }.bw-device-figure figcaption > span { font:500 25px/1.2 var(--font-display); letter-spacing:-.015em; }.bw-device-figure figcaption p { margin:9px auto 0; font-size:11px; line-height:1.7; color:#b5a4bc; max-width:240px; }
.bw-showcase-bottom { border-top:1px solid #e9c1a025; padding-top:30px; display:flex; align-items:center; justify-content:space-between; gap:20px; }.bw-showcase-bottom > span { font:italic 24px var(--font-display); color:#bfa6b8; }.bw-showcase-bottom > a { font-size:12px; border-bottom:1px solid #e9c1a040; padding:8px 0; }.bw-showcase-bottom > a span { margin-left:14px; color:#e9c1a0; }

/* A direct invitation into the existing video session. */
.method-breathwork .bw-film { padding:30px 0 85px; background:#221a2e; }.bw-film-frame { min-height:570px; position:relative; border-radius:24px; overflow:hidden; border:1px solid #e9c1a027; display:flex; align-items:center; }.bw-film-water { position:absolute; inset:0; background:linear-gradient(90deg,#160e20e6,#160e20a0 45%,#160e2022),url('/sportly_website/static/src/img/hero-poster.jpg') center/cover; }.bw-film-copy { position:relative; padding:64px; z-index:1; }.bw-film-copy .bw-kicker { color:#dec1a9; font-size:10px; letter-spacing:.19em; }.method-breathwork .bw-film-copy h2 { font-size:clamp(48px,5.6vw,80px); font-weight:500; letter-spacing:-.035em; line-height:1.02; margin:22px 0; }.bw-film-copy .bw-serif { color:#e4bfa5; }.bw-film-copy p { color:#bbacbf; font-size:15px; line-height:1.8; }.bw-film-play { display:flex; align-items:center; gap:15px; margin-top:32px; border:0; background:none; padding:0; color:#eee2dd; font:500 12px 'Inter',sans-serif; cursor:pointer; }.bw-film-play > span:last-child { color:#e9c1a0; margin-left:8px; }.bw-film-play-icon { width:45px; height:45px; display:grid; place-items:center; border:1px solid #e9c1a07a; border-radius:50%; background:#e9c1a015; font-size:12px; }.bw-film-play:hover .bw-film-play-icon { background:#e9c1a0; color:#251b2c; }.bw-film-signature { position:absolute; right:12%; top:50%; transform:translateY(-50%); color:#e9c1a0; text-align:center; }.bw-film-signature svg { height:180px; width:105px; margin:auto; }.bw-film-signature span { display:block; font-size:8px; letter-spacing:.25em; text-transform:uppercase; margin-top:30px; color:#d0b5b1; }

/* Intentions have a distinct atmosphere, not dashboard statistics. */
.method-breathwork .bw-intentions { padding:95px 0 100px; background:#211929; }.bw-intentions-head { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; margin-bottom:48px; }.bw-intentions-head .bw-kicker { font-size:10px; letter-spacing:.2em; }.method-breathwork .bw-intentions-head h2 { margin:0; font-size:62px; line-height:1.02; font-weight:500; }.bw-intentions-head > p { max-width:350px; font-size:15px; color:#b8a8bf; line-height:1.85; margin-bottom:7px; }.bw-intention-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.bw-intention-card { min-height:365px; position:relative; display:flex; flex-direction:column; padding:30px; border:1px solid #e9c1a022; border-radius:17px; overflow:hidden; background:radial-gradient(ellipse at 95% 0%,#a28cac22,transparent 65%),#251d2f; transition:transform .3s,border-color .3s; }.bw-intention-card.energy { background:radial-gradient(ellipse at 95% 0%,#c59a622a,transparent 65%),#2b2029; }.bw-intention-card.sleep { background:radial-gradient(ellipse at 95% 0%,#7483bd22,transparent 65%),#211b2e; }.bw-intention-card:hover { transform:translateY(-4px); border-color:#e9c1a060; }.bw-intention-number { font-size:9px; color:#bba3b9; letter-spacing:.1em; }.bw-intention-card.energy .bw-intention-number { color:#ceb097; }.bw-intention-card.sleep .bw-intention-number { color:#aba9d0; }.method-breathwork .bw-intention-card h3 { font:500 39px/1.04 var(--font-display); letter-spacing:-.025em; margin:40px 0 20px; }.bw-intention-card h3 em { font-weight:400; color:#d5b7ad; }.bw-intention-card > p { font-size:12px; line-height:1.8; color:#b4a0bd; max-width:250px; }.bw-intention-action { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #e9c1a020; padding-top:18px; margin-top:auto; font-size:10px; color:#ddc8d6; }.bw-intention-action i { font-style:normal; color:#e9c1a0; font-size:18px; }

/* Brand substance without fabricated competitive scorecards. */
.method-breathwork .bw-craft { padding:90px 0; background:#1d1525; }.bw-craft-heading { text-align:center; margin-bottom:65px; }.bw-craft-heading .bw-kicker { font-size:10px; letter-spacing:.2em; }.method-breathwork .bw-craft-heading h2 { font-size:64px; font-weight:500; letter-spacing:-.035em; }.bw-craft-heading p { color:#b3a1bb; font-size:15px; line-height:1.8; }.bw-craft-grid { display:grid; grid-template-columns:repeat(3,1fr); }.bw-craft-grid article { padding:10px 35px 10px 0; }.bw-craft-grid article + article { padding-left:35px; border-left:1px solid #e9c1a024; }.bw-craft-symbol { font:italic 27px var(--font-display); color:#c29f8e; display:block; margin-bottom:25px; }.method-breathwork .bw-craft-grid h3 { font:500 27px/1.2 var(--font-display); margin-bottom:16px; letter-spacing:-.02em; }.bw-craft-grid p { font-size:13px; color:#b7a7bf; line-height:1.85; }.method-breathwork .bw-cats { padding:85px 0; }.bw-cats .bw-sec-head { margin-bottom:0; }.bw-footer { padding-top:55px; }
.bw-how .bw-step { background:transparent; box-shadow:none; border-color:#e9c1a026; border-radius:15px; }.bw-how .bw-step p { font-size:13px; line-height:1.8; }.bw-how-grid { gap:24px; }.bw-wl-card { background:radial-gradient(ellipse at 50% 0%,#b57e7e12,transparent 65%),#251b2e; box-shadow:none; }.bw-faq-item { border-radius:0; border:0; border-bottom:1px solid #e9c1a02b; background:transparent; padding:0; }.bw-faq-grid { gap:0; }.bw-faq-item summary { font-size:15px; padding:24px 36px 24px 0; }.bw-faq-item p { font-size:13px; line-height:1.8; }
@media(max-width:1080px) { .bw-device-gallery { gap:26px; }.bw-device-figure { width:250px; flex-basis:250px; }.bw-device { border-radius:38px; }.bw-device-screen { border-radius:31px; }.bw-device-status { font-size:9px; left:21px; right:18px; top:10px; }.bw-device-island { width:68px; height:18px; top:7px; }.bw-device-island i { top:6px; }.bw-film-signature { right:8%; }.bw-intention-card { padding:24px; }.method-breathwork .bw-intention-card h3 { font-size:34px; } }
@media(max-width:850px) { .bw-device-gallery { justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#806772 transparent; margin:0 -24px; padding:22px 35px 35px; gap:28px; }.bw-device-figure { scroll-snap-align:center; width:270px; flex-basis:270px; }.bw-device-figure.featured { transform:none; }.bw-device { border-radius:41px; }.bw-device-screen { border-radius:34px; }.bw-device-status { font-size:10px; }.bw-device-island { width:73px; height:19px; }.bw-intention-grid { gap:14px; }.bw-intention-card { padding:22px; }.method-breathwork .bw-intention-card h3 { font-size:31px; }.bw-film-signature { display:none; }.bw-film-frame { min-height:470px; }.bw-film-copy { padding:48px; } }
@media(max-width:600px) { .method-breathwork .bw-app-showcase { padding:65px 0 45px; }.bw-showcase-heading { margin-bottom:30px; }.method-breathwork .bw-showcase-heading h2 { font-size:51px; }.bw-showcase-heading p { font-size:13px; line-height:1.8; padding:0 8px; }.bw-showcase-heading p br { display:none; }.bw-showcase-bottom { margin-top:14px; align-items:flex-start; flex-direction:column; gap:14px; }.bw-showcase-bottom > span { font-size:22px; }.method-breathwork .bw-film { padding:15px 0 50px; }.bw-film-frame { min-height:460px; border-radius:18px; }.bw-film-copy { padding:35px 26px; }.method-breathwork .bw-film-copy h2 { font-size:53px; }.bw-film-copy .bw-kicker { font-size:8px; }.bw-film-copy p { font-size:13px; }.bw-film-play { font-size:10px; gap:11px; }.bw-film-play-icon { width:38px; height:38px; }.method-breathwork .bw-intentions { padding:60px 0; }.bw-intentions-head { flex-direction:column; align-items:flex-start; gap:22px; margin-bottom:30px; }.method-breathwork .bw-intentions-head h2 { font-size:48px; }.bw-intentions-head > p { font-size:13px; max-width:310px; }.bw-intention-grid { grid-template-columns:1fr; gap:16px; }.bw-intention-card { min-height:295px; padding:26px; }.method-breathwork .bw-intention-card h3 { margin-top:26px; font-size:39px; }.bw-intention-card > p { max-width:270px; margin-bottom:24px; }.method-breathwork .bw-craft { padding:60px 0; }.bw-craft-heading { text-align:left; margin-bottom:35px; }.method-breathwork .bw-craft-heading h2 { font-size:50px; }.bw-craft-heading p { font-size:13px; }.bw-craft-heading p br { display:none; }.bw-craft-grid { grid-template-columns:1fr; }.bw-craft-grid article,.bw-craft-grid article + article { border-left:0; border-top:1px solid #e9c1a025; padding:25px 0; }.bw-craft-symbol { font-size:23px; margin-bottom:15px; }.method-breathwork .bw-craft-grid h3 { font-size:28px; }.bw-craft-grid p { font-size:13px; }.method-breathwork .bw-cats { padding:60px 0; } }