.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-22849 .elementor-element.elementor-element-f04af61{--display:flex;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-22849 .elementor-element.elementor-element-1cd5a7a{--display:flex;}.elementor-22849 .elementor-element.elementor-element-4679525{--display:flex;}.elementor-22849 .elementor-element.elementor-element-a37ea92{--display:flex;}.elementor-22849 .elementor-element.elementor-element-a8420f8{--display:flex;}.elementor-22849 .elementor-element.elementor-element-8871c27{--display:flex;}.elementor-22849 .elementor-element.elementor-element-47718ea{--display:flex;}.elementor-22849 .elementor-element.elementor-element-f6be57f{--display:flex;}.elementor-22849 .elementor-element.elementor-element-46d7fa9{--display:flex;}.elementor-22849 .elementor-element.elementor-element-fe1d9d4{--display:flex;}.elementor-22849 .elementor-element.elementor-element-b92e160{--display:flex;}.elementor-22849 .elementor-element.elementor-element-e3d644d{--display:flex;}.elementor-22849 .elementor-element.elementor-element-79a90fc{--display:flex;}.elementor-22849 .elementor-element.elementor-element-7bcf12e{--display:flex;}.elementor-22849 .elementor-element.elementor-element-a1ff650{--display:flex;}.elementor-22849 .elementor-element.elementor-element-86cf404{--display:flex;}.elementor-22849 .elementor-element.elementor-element-bdbd6db{--display:flex;}.elementor-22849 .elementor-element.elementor-element-038703c{--display:flex;}.elementor-22849 .elementor-element.elementor-element-d2a57dc{--display:flex;}.elementor-22849 .elementor-element.elementor-element-ac4c3a4{--display:flex;}.elementor-22849 .elementor-element.elementor-element-83f82ca{--display:flex;}.elementor-22849 .elementor-element.elementor-element-378c2e6{--display:flex;}.elementor-22849 .elementor-element.elementor-element-130c009{--display:flex;}.elementor-22849 .elementor-element.elementor-element-83fb0c8{--display:flex;}.elementor-22849 .elementor-element.elementor-element-b4c642b{--display:flex;}.elementor-22849 .elementor-element.elementor-element-6a03b86{--display:flex;}.elementor-22849 .elementor-element.elementor-element-ac5c99d{--display:flex;}.elementor-22849 .elementor-element.elementor-element-1fe47e4{--display:flex;}.elementor-22849 .elementor-element.elementor-element-2150fd6{--display:flex;}.elementor-22849 .elementor-element.elementor-element-61e23fc{--display:flex;}.elementor-22849 .elementor-element.elementor-element-ff33f1b{--display:flex;}.elementor-22849 .elementor-element.elementor-element-74d502a{--display:flex;}.elementor-22849 .elementor-element.elementor-element-aa2d6e4{--display:flex;}.elementor-22849 .elementor-element.elementor-element-da75cd6{--display:flex;}.elementor-22849 .elementor-element.elementor-element-716f6b3{--display:flex;}.elementor-22849 .elementor-element.elementor-element-7aea255{--display:flex;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-widget-container .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-container .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-html .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-html .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}}@media(max-width:767px){.elementor-widget-container .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-container .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-html .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-html .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}}/* Start custom CSS *//* ══════════ elementor bridge ══════════
   Every section is a real Elementor container and each card in the four card
   sections is its own container, so the Animation panel and Motion Effects apply
   to them individually. These rules make Elementor's own wrappers get out of the
   way, without ever outranking the page styles that follow. :where() also scopes
   them to this page's own container tree, so the shared header and footer templates
   keep the flex layout, padding and gaps Elementor gives them. */

/* html widgets are pass through, so the markup inside sits exactly where the preview
   had it. single class specificity, and every layout rule below comes later, so the
   page styles always win over this reset. */
:where(.elementor-22849) .elementor-widget-html,
:where(.elementor-22849) .elementor-widget-html > .elementor-widget-container{display:contents}

/* containers arrive with their own width, padding and gap; the page styles supply all three */
:where(.elementor-22849) .e-con,:where(.elementor-22849) .e-con-inner{--gap:0px;--row-gap:0px;--column-gap:0px;
  --padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
  --padding-block-start:0px;--padding-block-end:0px;
  --padding-inline-start:0px;--padding-inline-end:0px;
  --margin-top:0px;--margin-right:0px;--margin-bottom:0px;--margin-left:0px;
  --width:100%;--content-width:100%;--min-height:0px;
  gap:0;padding:0;margin:0;display:block;max-width:none;min-height:0}

/* card delays, which used to be inline on each card */
.signals > :nth-child(1){--d:.05s}
.signals > :nth-child(2){--d:.11s}
.signals > :nth-child(3){--d:.17s}
.signals > :nth-child(4){--d:.23s}
.b-row > :nth-child(1){--d:.1s}
.b-row > :nth-child(2){--d:.16s}
.b-row > :nth-child(3){--d:.22s}
.chapters > :nth-child(1){--d:.06s}
.chapters > :nth-child(2){--d:.14s}
.chapters > :nth-child(3){--d:.22s}
.quotes > :nth-child(1){--d:.14s}
.quotes > :nth-child(2){--d:.2s}
.quotes > :nth-child(3){--d:.26s}

/* section artwork, which used to be inline on each section */
.means{--bg:url('https://ubunyemethod.com/wp-content/uploads/2026/09/higher-self-connection.webp')}
.band{--bg:url('https://ubunyemethod.com/wp-content/uploads/2026/09/doorway-of-light.webp')}
#start{--bg:url('https://ubunyemethod.com/wp-content/uploads/2026/09/heart-practice-lake.webp')}

/* the tail container only carries the sticky bar and the script */
.ub-home-tail{padding:0;margin:0}

/* the header floats over the artwork on this page, so the banner runs the full height
   of the screen and the menu sits on top of it. this stylesheet only loads here, so
   no other template is affected. */
/* Same technique the other pages with a banner use: the header stays in normal flow
   exactly as the template renders it, and the first section is pulled up underneath
   it. The old home page does this with margin-top:-115px against a 106px header.
   Keeping the header in flow means the admin bar, sticky behaviour and every other
   template keep working untouched. */
.elementor-22849 > .home-hero{margin-top:-115px}
@media(max-width:767px){.elementor-22849 > .home-hero{margin-top:-111px}}


/* ══════════ page styles, identical to the preview ══════════ */
:root{
  --indigo:#323057; --indigo-deep:#262544; --night:#1a1930;
  --card:#474574; --card-2:#5f557f;
  --lavender:#ada6c6; --ink:#2b274e; --btn-ink:#413469;
  --amber:#ffb335;
  --serif:"Inria Serif", Georgia, serif; --sans:"Inter", system-ui, sans-serif;
  --up:"https://ubunyemethod.com/wp-content/uploads/2026/09/";
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--indigo);color:#fff;font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--amber)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:780px;margin:0 auto}
.note{background:#fff3c4;color:#5b4a00;font-size:13px;text-align:center;padding:8px 16px}
.center{text-align:center}

/* type */
.eyebrow{font-size:16px;letter-spacing:1.5px;text-transform:uppercase}
.eyebrow.line::after{content:"";display:block;width:60px;height:1px;background:currentColor;margin:14px 0 0;opacity:.8}
.center .eyebrow.line::after,.eyebrow.line.c::after{margin-left:auto;margin-right:auto}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.15}
h1{font-size:clamp(42px,5.6vw,68px)}
h2{font-size:clamp(32px,4vw,48px)}
h3{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.3}
.hl{color:var(--amber)}
.lead{font-size:clamp(18px,1.6vw,20px)}
p+p{margin-top:14px}
.head{margin-bottom:44px}
.head h2{margin-top:16px}
/* an eyebrow sets up its heading wherever it appears, not only inside a .head */
.eyebrow + h2{margin-top:16px}
.head .lead{margin-top:18px}
.icon{display:block;width:84px;height:84px;margin-bottom:18px}
.center .icon{margin-left:auto;margin-right:auto}

/* buttons */
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.center .btns{justify-content:center}
.btn{display:inline-block;background:var(--amber);color:var(--btn-ink);font-weight:500;font-size:17px;padding:17px 34px;border-radius:50px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,179,53,.25)}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.stores{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.stores img{height:52px;width:auto}

/* sections */
.elementor-22849 section{position:relative}
.pad{padding:100px 0}
.lav{background:var(--lavender);color:var(--ink)}
.lav a{color:var(--ink);font-weight:600}
.deep{background:var(--indigo-deep)}
@media(max-width:767px){.pad{padding:80px 0}}

/* hero (image background, text on top, image fades to top on mobile) */
.hero{min-height:90vh;padding:150px 0 300px;text-align:center;background-color:var(--indigo)}
.hero .icon{width:96px;height:96px;margin:0 auto 20px}
.hero h1{margin:18px auto 24px;max-width:900px}
.hero .lead{max-width:700px;margin:0 auto;text-shadow:0 1px 12px rgba(20,18,40,.6)}
.hero .btns{justify-content:center}
.hero .btn.ghost{background:rgba(38,37,68,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* split with image */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev > :first-child{order:2}
.split h2{margin-top:16px}
.split .img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}.split.rev > :first-child{order:0}.split .img img{aspect-ratio:4/3}}

/* compare cards */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.compare .col{background:var(--indigo);color:#fff;border-radius:18px;padding:34px 32px}
.compare .col.feature{background:var(--card);box-shadow:0 0 0 2px var(--amber)}
.compare .tag{display:inline-block;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;background:var(--amber);color:var(--btn-ink);border-radius:50px;padding:5px 12px;margin-bottom:16px;font-weight:600}
.compare h3{margin-bottom:14px}
.compare ul{list-style:none}
.compare li{position:relative;padding-left:26px;margin-top:10px;font-size:16px}
.compare li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--amber)}
.compare.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.compare,.compare.three{grid-template-columns:1fr}}
.aside{margin-top:30px;font-size:17px;max-width:780px}

/* path steps */
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.path::before{content:"";position:absolute;left:12%;right:12%;top:62px;height:1px;background:repeating-linear-gradient(90deg,rgba(255,179,53,.7) 0 8px,transparent 8px 16px)}
.stage{position:relative;text-align:center;padding:0 6px}
.stage .ring{width:124px;height:124px;margin:0 auto 22px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:0 0 0 8px var(--indigo-deep),0 0 0 9px rgba(255,179,53,.35)}
.stage .ring img{width:84px;height:84px}
.stage .n{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--amber)}
.stage h3{margin:6px 0 10px}
.stage p{font-size:16px;color:#dcd7ee}
@media(max-width:900px){.path{grid-template-columns:1fr 1fr;gap:44px 22px}.path::before{display:none}}
@media(max-width:520px){.path{grid-template-columns:1fr}}

/* technique cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cards,.cards.two{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:16px;padding:30px 28px}
.card.alt{background:var(--card-2)}
.card img{width:72px;height:72px;margin-bottom:14px}
.card h3{margin-bottom:10px}
.card p{font-size:16px;color:#e6e2f2}
.lav .card{background:var(--indigo)}

/* practice box */
.practice{background:var(--indigo);color:#fff;border-radius:22px;padding:48px 52px;box-shadow:0 24px 50px rgba(43,39,78,.3)}
.practice-head{display:flex;gap:22px;align-items:center;margin-bottom:28px}
.practice-head img{width:84px;height:84px;flex:none}
.practice-head .eyebrow{font-size:14px;color:var(--amber)}
.practice-head h2{font-size:clamp(28px,3.2vw,38px);margin-top:6px}
.practice ol{list-style:none;counter-reset:p}
.practice li{counter-increment:p;position:relative;padding:18px 0 18px 64px;border-top:1px solid rgba(255,255,255,.12);font-size:17px}
.practice li::before{content:counter(p);position:absolute;left:0;top:14px;width:40px;height:40px;border-radius:50%;background:var(--amber);color:var(--btn-ink);font-family:var(--serif);font-weight:700;font-size:19px;display:grid;place-items:center}
.practice li b{font-weight:600}
.practice .soft{margin-top:22px;padding:18px 22px;border-radius:14px;background:rgba(173,166,198,.14);font-size:16px}
.practice .soft a{color:var(--amber);font-weight:600}
@media(max-width:620px){.practice{padding:34px 22px}.practice-head{flex-direction:column;align-items:flex-start}.practice li{padding-left:56px}}

/* quote */
.quote{font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1.3;max-width:860px;margin:0 auto}

/* callout */
.callout{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;background:var(--indigo);border:1px solid rgba(255,179,53,.45);border-radius:18px;padding:32px 34px}
.callout img{width:72px;height:72px}
.callout h3{margin-bottom:8px}
@media(max-width:600px){.callout{grid-template-columns:1fr}}

/* notice list */
.notice{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.notice div{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:14px;padding:20px 22px;font-size:16px}
.notice span{flex:none;width:30px;height:30px;border-radius:50%;background:var(--amber);color:var(--btn-ink);display:grid;place-items:center;font-weight:700;font-size:14px}
@media(max-width:700px){.notice{grid-template-columns:1fr}}

/* circles diagram */
.circles{position:relative;width:min(460px,100%);aspect-ratio:1;margin:0 auto}
.circles div{position:absolute;border-radius:50%;display:flex;justify-content:center;font-family:var(--serif);font-size:18px}
.circles .c3{inset:0;background:radial-gradient(circle,rgba(173,166,198,.08),rgba(173,166,198,.18));border:1px solid rgba(173,166,198,.45);align-items:flex-start;padding-top:7%}
.circles .c2{inset:17%;background:rgba(95,85,127,.55);border:1px solid rgba(173,166,198,.5);align-items:flex-start;padding-top:8%}
.circles .c1{inset:36%;background:var(--amber);color:var(--btn-ink);align-items:center;font-weight:700;box-shadow:0 0 60px rgba(255,179,53,.45);text-align:center;line-height:1.15}
.circles .c1 small{display:block;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:1.2px;text-transform:uppercase}

/* compare table */
.ctable{width:100%;border-collapse:separate;border-spacing:0;border-radius:18px;overflow:hidden;background:var(--indigo);color:#fff}
.ctable th,.ctable td{text-align:left;padding:20px 24px;vertical-align:top;font-size:16px}
.ctable thead th{background:var(--card-2);font-family:var(--serif);font-size:19px;font-weight:700}
.ctable tbody tr+tr td{border-top:1px solid rgba(255,255,255,.12)}
.ctable td:first-child{font-weight:600;width:24%}
.ctable tr.us td{background:rgba(255,179,53,.12)}
.ctable tr.us td:first-child{color:var(--amber)}
.ctable,.ctable th,.ctable td,.ctable tr{border:0 !important}
.ctable tbody tr:nth-child(odd) td,.ctable tbody tr:nth-child(even) td{background:transparent}
.ctable tbody tr.us td{background:rgba(255,179,53,.12)}
.ctable tbody tr+tr td{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
@media(max-width:700px){
  .ctable,.ctable tbody,.ctable tr,.ctable td{display:block;width:auto !important}
  .ctable{background:transparent;border-radius:0;overflow:visible}
  .ctable thead{display:none}
  .ctable tbody tr{background:var(--indigo);border-radius:16px;padding:20px 22px;margin-bottom:12px}
  .ctable tbody tr.us{background:#4a3f5e;box-shadow:0 0 0 2px var(--amber)}
  .ctable tbody tr td,.ctable tbody tr.us td{background:transparent !important;padding:0;border:0 !important;box-shadow:none !important}
  .ctable td:first-child{font-family:var(--serif);font-size:21px;font-weight:700;margin-bottom:10px}
  .ctable td[data-label]{font-size:15px;margin-top:10px}
  .ctable td[data-label]::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--lavender);margin-bottom:2px}
  .ctable tr.us td[data-label]::before{color:var(--amber)}
}

/* FAQ */
.faq details{background:var(--card);border-radius:14px;margin-top:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 64px 22px 26px;font-family:var(--serif);font-size:20px;position:relative}
.faq summary::-webkit-details-marker{display:none}
/* the plus and minus are drawn as bars, not glyphs, so they sit dead centre */
.faq summary::after{content:"";position:absolute;right:24px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  background-color:var(--amber);
  background-image:linear-gradient(var(--btn-ink),var(--btn-ink));
  background-size:14px 2px;background-position:center;background-repeat:no-repeat}
.faq summary::before{content:"";position:absolute;right:38px;top:50%;width:2px;height:14px;border-radius:1px;z-index:1;
  background:var(--btn-ink);transform:translateY(-50%);transition:transform .35s,opacity .25s}
.faq details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq details p{padding:0 26px 24px;font-size:16px;color:#e6e2f2}
.faq details a{color:var(--amber)}

/* image scene sections */
.scene{padding:120px 0}
.scene .copy{max-width:540px}
.scene .lead,.scene p{text-shadow:0 1px 14px rgba(20,18,40,.55)}

/* closing */
.closing{text-align:center;padding:110px 0 520px}
.closing .lead{max-width:640px;margin:20px auto 0}
@media(max-width:767px){.closing{padding:90px 0 480px}}

/* related */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.related a{display:block;background:var(--card);border-radius:16px;overflow:hidden;color:#fff;text-decoration:none;transition:transform .3s}
.related a:hover{transform:translateY(-4px)}
.related img{width:100%;aspect-ratio:16/10;object-fit:cover}
.related span{display:block;padding:18px 20px 22px;font-family:var(--serif);font-size:20px;line-height:1.3}
.related small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
@media(max-width:800px){.related{grid-template-columns:1fr}}

.elementor-22849 footer{background:var(--night);padding:28px 0;font-size:13px;opacity:.9}
.disclaimer{font-size:14px;color:#cfc9e4;margin-top:40px}
.disclaimer a{color:var(--amber)}


/* ════════════ homepage: guided spiritual healing ════════════ */

/* --- scroll reveal, in and out --- */
.fx{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.22,.8,.3,1),transform .75s cubic-bezier(.22,.8,.3,1);transition-delay:var(--d,0s)}
.fx.in{opacity:1;transform:none}
.fx.out{opacity:0;transform:translateY(-18px);transition-delay:0s}
@supports (animation-timeline: view()){
  /* the range ends while the element is still entering, and the fill keeps it there, so
     nothing sits half faded while you are reading it */
  .fx{opacity:1;transform:none;transition:none;animation:secfade linear both;animation-timeline:view();animation-range:entry 6% entry 82%}
  .fx.out{opacity:1;transform:none}
}
@keyframes secfade{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .fx{opacity:1 !important;transform:none !important;transition:none;animation:none !important}
  .float,.home-hero::before,.up,.home-hero{animation:none !important;opacity:1 !important}
}

/* ─── 1. hero ─── */
.home-hero{animation:bannerIn 1.2s ease both}
@keyframes bannerIn{from{opacity:0}to{opacity:1}}
.up{animation:heroUp 1s cubic-bezier(.22,.8,.3,1) both;animation-delay:calc(.25s + var(--d,0s))}
@keyframes heroUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.home-hero{min-height:auto;margin-bottom:-1px;padding:220px 0 360px;text-align:left;overflow:hidden;
  background-image:
    linear-gradient(180deg,rgba(38,37,68,0) 90%,rgba(38,37,68,.55) 96%,#262544 99.2%,#262544 100%),
    linear-gradient(100deg,rgba(26,25,48,.92) 0%,rgba(26,25,48,.74) 34%,rgba(38,37,68,.34) 60%,rgba(50,48,87,.12) 100%),
    url('https://ubunyemethod.com/wp-content/uploads/2026/09/walking-the-lit-path.webp');
  background-size:cover,cover,cover;background-position:center,center,center bottom;background-repeat:no-repeat;
  background-color:var(--indigo-deep)}
.home-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.7),transparent),
             radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,.5),transparent),
             radial-gradient(1.5px 1.5px at 45% 65%,rgba(255,179,53,.5),transparent),
             radial-gradient(1px 1px at 85% 55%,rgba(255,255,255,.45),transparent);
  animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-18px,-12px,0)}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;position:relative;z-index:1}
.kicker{font-size:17px;color:var(--lavender);margin-bottom:14px}
.home-hero h1{font-size:clamp(40px,5vw,66px);line-height:1.05;margin:0 0 20px;max-width:none}
.home-hero .lead{max-width:530px;margin:0}
.home-hero .stores{justify-content:flex-start;margin-top:28px}
.stores a{display:block;transition:transform .25s}
.stores a:hover{transform:translateY(-3px)}
.microcopy{font-size:16px;color:#ded9ee;margin-top:14px}
.microcopy b{color:var(--amber);font-weight:600}
/* invisible landing point for the header's Start Your Journey link */
.ub-anchor{display:block;height:0;overflow:hidden}
#start,#SignUp,#how{scroll-margin-top:130px}
.trust{display:flex;gap:30px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.trust div{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.trust img{height:18px;width:auto}
.trust b{font-family:var(--serif);font-size:24px;line-height:1}
.trust span{font-size:13px;color:var(--lavender)}
.hero-phone{position:relative;min-height:540px}
.hero-phone img{position:absolute;width:60%;filter:drop-shadow(0 30px 60px rgba(14,12,30,.55))}
.hero-phone .front{right:8%;top:0;z-index:2}
.hero-phone .back{right:38%;top:12%;width:52%;opacity:.72;z-index:1}
.float{animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ─── 2. recognition ─── */
/* the four signals read as a scannable row of icons rather than a column of
   sentences, and the quote runs full width beneath them as the closing beat */
.recog{display:grid;gap:46px;margin-top:46px}
.signals{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.signal{display:block;text-align:center;background:var(--indigo);
  border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:34px 22px 30px;
  transition:transform .4s cubic-bezier(.22,.8,.3,1),border-color .4s,background .4s}
.signal:nth-child(even){background:var(--card)}
.signal:hover{transform:translateY(-7px);border-color:rgba(255,179,53,.5);background:var(--card)}
.signal img{display:block;width:78px;height:78px;margin:0 auto 18px}
.signal p{font-size:17px;line-height:1.45;color:#eae6f6}
.pull{position:relative;justify-self:center;width:100%;max-width:900px;padding:54px 20px 0;text-align:center;
  background:none;border-radius:0;box-shadow:none;overflow:visible}
.pull::before{content:"“";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-size:104px;line-height:1;color:var(--amber);opacity:.34;pointer-events:none}
.pull blockquote{font-family:var(--serif);font-size:clamp(24px,2.5vw,34px);line-height:1.34;position:relative}
.pull figcaption{margin-top:24px;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--amber)}

/* ─── 3. what it means: bento tiles over a full bleed image ─── */
.means{position:relative;color:#fff;background-color:var(--indigo-deep);
  background-image:
    linear-gradient(180deg,var(--indigo-deep) 0%,rgba(38,37,68,.42) 9%,rgba(38,37,68,.12) 24%,rgba(38,37,68,.08) 78%,rgba(26,25,48,.94) 100%),
    linear-gradient(100deg,rgba(20,19,40,.8) 0%,rgba(22,21,44,.62) 38%,rgba(26,25,48,.24) 66%,rgba(26,25,48,.05) 100%),
    var(--bg);
  background-size:cover,cover,cover;background-position:center,center,62% center;background-repeat:no-repeat}
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;gap:18px;
  position:relative;z-index:1;min-height:min(700px,72vh)}
/* the three tiles sit in their own row, pushed to the floor of the section, so the
   artwork above them is left clear */
.b-row{grid-column:1 / 13;grid-row:2;align-self:end;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.b{background:rgba(26,25,48,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,179,53,.26);border-radius:22px;padding:32px 34px;
  transition:transform .4s cubic-bezier(.22,.8,.3,1),border-color .4s}
.b:hover{transform:translateY(-4px);border-color:rgba(255,179,53,.55)}
.b-head{grid-column:1 / 8;grid-row:1;align-self:start;background:none;border:0;padding:0 24px 8px 0;-webkit-backdrop-filter:none;backdrop-filter:none}
.b-head:hover{transform:none}
.b-head h2{margin-top:16px}
.b-head .lead{margin-top:16px;max-width:560px;font-size:18px}
.b-one,.b-two,.b-three{grid-column:auto;grid-row:auto}
.b .num{display:block;font-family:var(--serif);font-weight:700;font-size:34px;line-height:1;
  color:var(--amber);margin-bottom:14px}
.b h3{font-size:19px;margin-bottom:10px}
.b .said{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;color:#fff;margin-bottom:10px}
.b .said::before{content:open-quote}
.b .said::after{content:close-quote}
.b p{font-size:15px;color:#ddd8ee}

/* ─── the film ─── */
.film{background:var(--night);position:relative;overflow:hidden}
.film::before{content:"";position:absolute;left:50%;top:38%;width:min(900px,90%);aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(255,179,53,.16),transparent 68%);pointer-events:none}
.film::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:92px;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,37,68,0),var(--indigo-deep) 94%)}
.film-frame{position:relative;z-index:1;aspect-ratio:16/9;width:100%;max-width:960px;margin:44px auto 0;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 34px 80px rgba(0,0,0,.55)}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:767px){.film-frame{border-radius:16px;margin-top:30px}}

/* ─── 4. the path: parallax background, cards travel over it ─── */
.works{position:relative;overflow:hidden;padding:100px 0;background:var(--indigo-deep)}
.works .wrap{position:relative;z-index:1;max-width:1320px}
.works::before{content:"";position:absolute;z-index:0;left:50%;top:50%;
  width:min(1125px,96%);height:min(1274px,92%);
  transform:translate(-50%,-50%) translateY(var(--py,0px));
  background:var(--art-works) center center/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%),
                     linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%),
             linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect;will-change:transform;pointer-events:none}
.works::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:200px;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,37,68,0) 0%,var(--indigo-deep) 58%,var(--indigo) 100%)}
@media(prefers-reduced-motion:reduce){.works::before{transform:translate(-50%,0) !important}}

.stage{position:relative;margin-top:26px}
.stage-cards{position:relative;z-index:1;display:grid;gap:10vh;padding:4vh 0 2vh}
.wcard{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;text-align:left;width:min(420px,44%);
  background:rgba(38,37,68,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:28px 30px;
  box-shadow:0 20px 44px rgba(10,9,24,.42)}
.wcard.left{justify-self:start}
.wcard.right{justify-self:end}
.wcard img{width:56px;height:56px;flex:none}
.wcard h3{font-size:21px;line-height:1.3;margin-bottom:10px}
.wcard p{font-size:16px;color:#e9e5f4}

/* ─── 5. inside the app: a trio of screens with the copy beneath them ─── */
.carousel{margin-top:48px;position:relative}
.viewport{overflow:hidden;pointer-events:none;padding:56px 0 112px;margin:-56px 0 -112px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%),
                     linear-gradient(180deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%),
                     linear-gradient(180deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.track{display:flex;pointer-events:auto;transition:transform .62s cubic-bezier(.22,.8,.3,1);will-change:transform}
.slide{flex:0 0 100%;min-width:0;padding:8px 46px;text-align:center}
/* the three sit on a shared baseline, the middle one taller and in front */
.trio{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,2.6vw,38px)}
.trio::before{content:"";position:absolute;z-index:0;left:50%;bottom:4%;transform:translateX(-50%);
  width:min(780px,88%);height:72%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,179,53,.15),transparent 68%)}
.trio img{position:relative;display:block;width:auto;filter:drop-shadow(0 30px 56px rgba(14,12,30,.6))}
.trio .side{max-height:clamp(225px,27vw,350px);opacity:.88;margin-bottom:clamp(4px,1.4vw,22px)}
.trio .main{z-index:1;max-height:clamp(295px,36vw,478px)}
.slide-copy{max-width:660px;margin:46px auto 0}
.slide-copy .tag-icon{display:block;width:60px;height:60px;margin:0 auto 16px}
.slide-copy h3{font-size:clamp(25px,2.7vw,34px);font-weight:400;margin-bottom:14px}
.slide-copy p{font-size:18px;color:#e6e2f2;margin:0 auto}

.car-ui{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:34px;position:relative;z-index:2}
.car-arrow{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid rgba(173,166,198,.4);color:#fff;padding:0;
  transition:background .3s,border-color .3s,transform .3s}
.car-arrow svg{width:20px;height:20px}
.car-arrow:hover,.car-arrow:focus-visible{background:rgba(255,179,53,.16);border-color:var(--amber);transform:translateY(-2px)}
.dots{display:flex;gap:10px;align-items:center}
.dots button{width:10px;height:10px;padding:0;border:0;border-radius:50px;cursor:pointer;
  background:rgba(173,166,198,.45);transition:width .4s,background .4s}
.dots button[aria-selected="true"]{width:30px;background:var(--amber)}
@media(max-width:1000px){
  .slide{padding:8px 30px}
  .slide-copy{margin-top:34px}
  .viewport{padding:44px 0 92px;margin:-44px 0 -92px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%),
                       linear-gradient(180deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%),
                       linear-gradient(180deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
}
@media(max-width:767px){
  .carousel{margin-top:32px}
  .slide{padding:6px 22px}
  /* three phones across 390px would be unreadable, so the centre one carries it alone */
  .trio .side{display:none}
  .trio .main{max-height:min(66vh,560px);max-width:76%}
  .slide-copy{margin-top:28px}
  .slide-copy p{font-size:17px}
  .viewport{padding:34px 0 76px;margin:-34px 0 -76px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%),
                       linear-gradient(180deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%),
                       linear-gradient(180deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%)}
  .car-ui{gap:16px;margin-top:26px}
}
@media(prefers-reduced-motion:reduce){.track{transition:none}}

/* ─── 6. start free ─── */
.scene-bg{background-size:cover;background-position:center;background-repeat:no-repeat}
.scene-bg.soft{background-image:linear-gradient(180deg,rgba(38,37,68,.99) 0%,rgba(44,43,78,.84) 6%,rgba(50,48,87,.52) 26%,rgba(50,48,87,.48) 62%,rgba(50,48,87,.93) 100%),var(--bg)}
/* the copy column crosses the figure's shoulder, which is the brightest thing in the
   scene. a soft shadow holds the text there without dulling the artwork behind it. */
.free-grid .lead,.free-grid .ticks li{text-shadow:0 1px 16px rgba(26,25,48,.9),0 0 3px rgba(26,25,48,.6)}
.free-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.free-grid .shot img{width:100%;max-width:320px;margin:0 auto;filter:drop-shadow(0 26px 50px rgba(14,12,30,.5))}
.ticks{list-style:none;margin:24px 0 32px}
.ticks li{position:relative;padding-left:34px;margin-top:12px;font-size:17px}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--amber)}
.ticks li::after{content:"";position:absolute;left:6px;top:10px;width:8px;height:4px;border-left:2px solid var(--btn-ink);border-bottom:2px solid var(--btn-ink);transform:rotate(-45deg)}

/* ─── 7. proof ─── */
.proof-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center}
.rating{font-size:15px;color:var(--lavender);margin-top:10px}
.rating b{font-family:var(--serif);font-size:26px;color:#fff;margin-right:6px}
.proof-copy h2{margin:16px 0 30px}
.quotes{display:grid;gap:16px}
.quotes blockquote{background:var(--card);border-left:3px solid var(--amber);border-radius:0 16px 16px 0;padding:22px 26px}
.quotes p{font-size:17px}
.quotes .q-head{font-family:var(--serif);font-size:18px;color:#fff;margin-bottom:8px}
.quotes cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:var(--amber)}
.proof-grid .shot img{width:100%;max-width:280px;margin:0 auto;filter:drop-shadow(0 26px 50px rgba(14,12,30,.5))}
/* the testimonial column is much taller than the phone, so on desktop the phone holds
   its place while they scroll past. the sticky element needs a containing block taller
   than itself, so the column stretches to the full row and the image sticks inside it. */
@media(min-width:1001px){
  .proof-grid .shot{align-self:stretch}
  .proof-grid .shot img{position:sticky;top:130px}
}

/* ─── 8. the deeper work ─── */
.band{padding:100px 0;position:relative;isolation:isolate;
  background-image:linear-gradient(180deg,var(--indigo) 0%,#2c2b4f 30%,#2a294a 70%,var(--indigo-deep) 100%)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(180deg,rgba(26,25,48,.74) 0%,rgba(26,25,48,.42) 45%,rgba(26,25,48,.48) 70%,rgba(26,25,48,.92) 100%),var(--bg);
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 4%,#000 10%,#000 90%,rgba(0,0,0,.6) 96%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 4%,#000 10%,#000 90%,rgba(0,0,0,.6) 96%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}
.chapter{background:rgba(26,25,48,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,179,53,.28);border-radius:18px;padding:30px 28px}
.band .head .lead,.band .head h2{text-shadow:0 1px 16px rgba(26,25,48,.85),0 0 3px rgba(26,25,48,.55)}
.chapter .n{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.chapter h3{font-size:22px;margin-bottom:12px}
.chapter p{font-size:16px;color:#ded9ee}
/* the trauma and emotional instability claim sits in this section, so the caveat belongs
   here with it rather than only on the disclaimer page */
.safety-note{max-width:760px;margin:26px auto 0;padding:16px 22px;border-radius:14px;
  background:rgba(26,25,48,.5);border:1px solid rgba(255,255,255,.12);
  font-size:15px;line-height:1.6;color:#ded9ee;text-align:center}
.safety-note a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
@media(max-width:767px){.safety-note{font-size:14px;padding:14px 18px;margin-top:22px}}

/* ─── 10. close ─── */
/* the artwork sits on the floor of a taller section and fades in at its own top edge,
   so her face and the spirit above her are clear of the scrim */
.home-closing{position:relative;overflow:hidden;padding:210px 0 380px;text-align:center;
  background-color:var(--indigo);min-height:calc(56.25vw + 120px)}
.home-closing .wrap{position:relative;z-index:1}
/* 56.25vw is the artwork's own height at full width. holding the layer at least that
   tall means cover can only ever crop sideways, so the top of the frame, and with it
   the spirit's head, is never cut */
.home-closing::before{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:max(56.25vw,82%);
  pointer-events:none;background:var(--art-close) center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 18%)}
.home-closing .icon{width:100px;height:100px;margin:0 auto 16px}
.home-closing h2{margin-top:16px}
.home-closing .lead{max-width:540px;margin:18px auto 0}
.home-closing .stores{justify-content:center}

/* ════════ motion ════════ */

/* headings reveal word by word. the .words class goes on the heading itself, so it
   must not touch display: making it inline drops every vertical margin the heading has */
.words .w{display:inline-block;opacity:0;transform:translateY(22px) rotate(1.5deg);
  transition:opacity .62s cubic-bezier(.22,.8,.3,1),transform .62s cubic-bezier(.22,.8,.3,1);
  transition-delay:calc(var(--i) * 42ms)}
.words.in .w{opacity:1;transform:none}

/* the little rule under an eyebrow draws itself */
.eyebrow.line::after{width:0;transition:width .7s cubic-bezier(.22,.8,.3,1) .12s}
.fx.in.eyebrow.line::after,.up.eyebrow.line::after,.b-head .eyebrow.line::after{width:60px}

/* counters */
.trust b,.trust .count{font-variant-numeric:tabular-nums}

/* idle float on the step icons, offset per card */
.signal img{animation:idle 6.5s ease-in-out infinite}
.signal:nth-child(2) img{animation-delay:-1.6s}
.signal:nth-child(3) img{animation-delay:-3.2s}
.signal:nth-child(4) img{animation-delay:-4.8s}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* the four path cards float like the hero phone. this rides the independent
   translate property so it composes with the .fx reveal instead of replacing it */
.wcard{animation:cardBob 6.5s ease-in-out infinite}
.wcard:nth-child(2){animation-delay:-1.6s}
.wcard:nth-child(3){animation-delay:-3.3s}
.wcard:nth-child(4){animation-delay:-4.9s}
/* a 34px rise and fall with a little sway, so the drift is unmistakable */
@keyframes cardBob{
  0%  {translate:-5px 17px;rotate:-.5deg}
  50% {translate:5px -17px;rotate:.5deg}
  100%{translate:-5px 17px;rotate:-.5deg}}

/* shine sweep across the store badges on hover */
.stores a{position:relative;overflow:hidden;border-radius:10px}
.stores a::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .65s cubic-bezier(.22,.8,.3,1)}
.stores a:hover::after{left:120%}

/* the faq opens smoothly instead of snapping */
.faq details p{display:block}
.faq details{transition:background .3s}
.faq details[open]{background:var(--card-2)}


@media(prefers-reduced-motion:reduce){
  .words .w{opacity:1 !important;transform:none !important;transition:none}
  .eyebrow.line::after{width:60px !important;transition:none}
  .wcard,.signal img{animation:none;translate:none;rotate:none}
  .stores a::after{display:none}
}

/* ─── sticky mobile cta ─── */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(26,25,48,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12);padding:12px 16px;transform:translateY(110%);transition:transform .35s}
.sticky-cta.on{transform:none}
.sticky-cta b{display:block;font-size:15px}
.sticky-cta span{display:block;font-size:12px;color:var(--lavender)}
.sticky-cta .btn{padding:13px 22px;font-size:15px}

/* ─── responsive ─── */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}
  .home-hero .lead{margin:0 auto}
  .home-hero .stores,.trust{justify-content:center}
  .trust{gap:26px}.trust div{align-items:center}
  .hero-phone{width:100%;max-width:430px;margin:0 auto;min-height:470px}
  .recog{gap:34px}
  .signals{grid-template-columns:repeat(2,1fr)}
  .pull{padding:48px 20px 0}
  .works{padding:100px 0}
  .stage-cards{gap:11vh;padding:5vh 0 3vh}
  .wcard{width:min(400px,58%)}
  .means{background-position:center,center,58% center}
  .bento{grid-template-columns:repeat(6,1fr);gap:14px;min-height:min(600px,68vh)}
  .b-head{grid-column:1 / 7;grid-row:1;padding:0 0 4px}
  .b-row{grid-column:1 / 7;gap:14px}
  .free-grid,.proof-grid{grid-template-columns:1fr;gap:34px}
  /* stacked, the screenshot arrived before the copy had made its case */
  .free-grid .shot{order:2}
  .free-grid .stores{justify-content:center !important}
  .free-grid > div:last-child,.proof-copy{text-align:center}
  /* the rating stars are a block level image, so the centred text alignment above
     cannot reach them. inline-block hands them back to text-align rather than
     relying on auto margins, which a global reset zeroes out. */
  .proof-copy img{display:inline-block}
  .free-grid .eyebrow.line::after,.proof-copy .eyebrow.line::after{margin-left:auto;margin-right:auto}
  .ticks{display:inline-block;text-align:left}
  .quotes blockquote{text-align:left}
  .chapters{grid-template-columns:1fr}
}
@media(max-width:767px){
  /* the walking figures end up behind the app screens at this width, so phones get
     the open path version of the same scene */
  .home-hero{padding:186px 0 250px;
    background-image:
      linear-gradient(180deg,rgba(26,25,48,.9) 0%,rgba(26,25,48,.6) 30%,rgba(38,37,68,.42) 62%,
        rgba(38,37,68,.72) 90%,#262544 99.2%,#262544 100%),
      url('https://ubunyemethod.com/wp-content/uploads/2026/09/lit-path-open.webp');
    background-size:cover,cover;background-position:center,center bottom}
  .home-hero h1{font-size:32px;line-height:1.15}
  .kicker{font-size:15px}
  h2{font-size:26px !important;line-height:1.28}
  .quote{font-size:21px;line-height:1.38}
  .band{padding:80px 0}
  .stores img{height:44px}
  .sticky-cta{display:flex}
  /* the cards sat straight over the figure and hid her completely. on phones the
     artwork moves below them, at its own portrait aspect, and the cards stop drifting
     since the movement only made the overlap harder to read. */
  .works{--band:min(136vw,560px);padding:80px 0 calc(var(--band) + 26px)}
  .works::before{left:0;right:0;top:auto;bottom:0;width:auto;height:var(--band);
    transform:none !important;
    background-position:center top;background-size:cover;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 94%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 94%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
  .works::after{height:120px}
  .stage-cards{gap:5vh;padding:3vh 0 0}
  .wcard{width:100%;padding:24px 22px;animation:none;translate:none;rotate:none}
  .bento{grid-template-columns:1fr;gap:12px;min-height:0}
  .b{padding:26px 24px}
  .b-head{grid-column:1;grid-row:auto}
  .b-row{grid-column:1;grid-row:auto;grid-template-columns:1fr;gap:12px}
  /* four tall icon cards stacked would run the whole screen, so on phones they go
     back to icon beside text and stay compact */
  .signals{grid-template-columns:1fr;gap:12px}
  .signal{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
    text-align:left;padding:18px 20px}
  .signal:hover{transform:none}
  .signal img{width:52px;height:52px;margin:0}
  .signal p{font-size:16px}
  .hero-phone{min-height:410px}
  .hero-phone .front{left:26%;right:auto;top:0;width:56%}
  .hero-phone .back{left:1%;right:auto;top:9%;width:48%}
  .home-closing{padding:80px 0 300px;min-height:0}
  .home-closing::before{height:94%}

  /* A 16:9 illustration cannot survive a 390 by 1500 crop. Covering a column that tall
     scales the artwork by height and throws away three quarters of its width, so the
     faces end up cropped out or sitting behind the cards. On phones each of these
     sections shows the artwork whole, as a band across the top, with the copy below it.
     --band is its height and --focus picks the part of the frame worth keeping. */
  .means,.band,.scene-bg.soft{--band:min(80vw,330px);--focus:center;position:relative}
  .means,.scene-bg.soft{padding-top:calc(var(--band) + 66px)}
  .band{padding:calc(var(--band) + 66px) 0 80px}
  .means::before,.scene-bg.soft::before,.band::before{
    content:"";position:absolute;top:0;left:0;right:0;bottom:auto;height:var(--band);
    z-index:0;pointer-events:none;
    background:var(--bg) var(--focus)/cover no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 64%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 64%,transparent 100%)}
  .means{--focus:68% center;background-color:var(--indigo-deep);
    background-image:linear-gradient(180deg,rgba(38,37,68,.9) 0%,rgba(38,37,68,.78) 46%,rgba(26,25,48,.96) 100%),var(--bg2);
    background-size:cover,240% auto;background-position:center,81% 24%;background-repeat:no-repeat,no-repeat}
  .band{background-image:linear-gradient(180deg,rgba(50,48,87,.92) 0%,rgba(42,41,74,.78) 46%,rgba(38,37,68,.95) 100%),var(--bg2);
    background-size:cover,240% auto;background-position:center,26% 24%;background-repeat:no-repeat,no-repeat}
  .band{--focus:56% center}
  .scene-bg.soft{--focus:70% center;
    background-image:linear-gradient(180deg,rgba(38,37,68,.94) 0%,rgba(46,45,80,.78) 46%,rgba(50,48,87,.94) 100%),var(--bg2);
    background-size:cover,240% auto;background-position:center,29% 24%;background-repeat:no-repeat,no-repeat}
  .means .wrap,.band .wrap,.scene-bg.soft .wrap{position:relative;z-index:1}
}

/* ══════════ kit overrides ══════════
   The site kit styles every link as .elementor-kit-21652 a, two classes, which
   outranks the single class rules above and was painting the button label amber on
   amber. Restating them one level higher hands the page back its own link styling. */
.elementor-22849 a{color:var(--amber);font-size:inherit;line-height:inherit}
.elementor-22849 .btn{color:var(--btn-ink);font-size:17px;line-height:1.2}
.elementor-22849 .stores a{font-size:0;line-height:0}
.elementor-22849 .faq details a,.elementor-22849 .quotes cite{color:var(--amber);font-size:inherit}
.elementor-22849 .car-arrow{color:#fff}
.sticky-cta .btn{color:var(--btn-ink)}

/* The page stylesheet sets body line-height to 1.65, which the shared header and
   footer templates inherit. Every other page gets the kit's 1.5, so the footer sat
   slightly looser here than everywhere else. */
.elementor-location-header,.elementor-location-footer{line-height:1.5}

/* home: artwork sized to the box it is painted into, never smaller */
.means{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/higher-self-connection.webp)}
.band{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/doorway-of-light.webp)}
#start{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/heart-practice-lake.webp)}
.means{--bg2:url(https://ubunyemethod.com/wp-content/uploads/2026/09/moonlit-lotus-lake.webp)}
.band{--bg2:url(https://ubunyemethod.com/wp-content/uploads/2026/09/rope-bridge-sunrise.webp)}
#start{--bg2:url(https://ubunyemethod.com/wp-content/uploads/2026/09/river-canoe-journey.webp)}
.works{--art-works:url(https://ubunyemethod.com/wp-content/uploads/2026/09/rising-through-clouds-v3.webp)}
.home-closing{--art-close:url(https://ubunyemethod.com/wp-content/uploads/2026/09/higher-self-stars.webp)}
@media (max-width:767px) and (max-resolution:1dppx){
  .means{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/higher-self-connection-768x432.webp)}
  .band{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/doorway-of-light-768x432.webp)}
  #start{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/heart-practice-lake-768x432.webp)}
  .works{--art-works:url(https://ubunyemethod.com/wp-content/uploads/2026/09/rising-through-clouds-v3-768x870.webp)}
  .home-closing{--art-close:url(https://ubunyemethod.com/wp-content/uploads/2026/09/higher-self-stars-1536x864.webp)}
}
@media (max-width:767px) and (min-resolution:1.01dppx) and (max-resolution:1.5dppx){
  .means{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/higher-self-connection-1536x864.webp)}
  .band{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/doorway-of-light-1536x864.webp)}
  #start{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/heart-practice-lake-1536x864.webp)}
}
@media (max-width:767px) and (min-resolution:1.51dppx) and (max-resolution:2dppx){
  .means{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/higher-self-connection-1536x864.webp)}
  .band{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/doorway-of-light-1536x864.webp)}
  #start{--bg:url(https://ubunyemethod.com/wp-content/uploads/2026/09/heart-practice-lake-1536x864.webp)}
}
@media (min-width:768px) and (max-width:1439px) and (max-resolution:1dppx){
  .home-closing{--art-close:url(https://ubunyemethod.com/wp-content/uploads/2026/09/higher-self-stars-1536x864.webp)}
}/* End custom CSS */