/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 5.8.0.1781964448
Updated: 2026-06-20 14:07:28

/* ============================================================
   WILLPOWER STORY
   ============================================================ */
.willpower { position: relative; }


.willpower-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.willpower-stage__inner {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.willpower-bg {
    position: absolute;
    inset: 0;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 700ms ease;
}

.willpower-bg.is-active { opacity: 1; }

.willpower-content-holder {
    position: relative;
    z-index: 1;
}

/* Steps only hide once JS has taken over. No-JS keeps them visible. */
.willpower[data-willpower-ready="true"] .willpower-step {
    min-height: 100vh;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateY(0px);
    transition:
        opacity 500ms ease,
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.willpower[data-willpower-ready="true"] .willpower-step.is-active {
    opacity: 1;
    transform: translateY(0);
}
.willpower-bg[data-willpower-image="0"], .willpower-bg[data-willpower-image="2"] {
    transform: scaleX(-1);
}
.willpower-stage__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 700ms ease;
    pointer-events: none;
}

.willpower[data-willpower-scrim] .willpower-stage__inner::after {
    opacity: 1;
}

/* Top */
.willpower[data-willpower-scrim="top"] .willpower-stage__inner::after {
    background:linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.85) 0,
        rgba(255, 255, 255, 0.58) 17vh,
        rgba(255, 255, 255, 0) 38vh
    );
}

/* Bottom */
.willpower[data-willpower-scrim="bottom"] .willpower-stage__inner::after {
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.95) 0,
        rgba(255, 255, 255, 0.68) 17vh,
        rgba(255, 255, 255, 0) 38vh
    );
}

/* Right */
.willpower[data-willpower-scrim="right"] .willpower-stage__inner::after {
    background: linear-gradient( to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.62) 42%, rgba(255, 255, 255, 0) 58% );
}

/* Left */
.willpower[data-willpower-scrim="left"] .willpower-stage__inner::after {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.62) 22%,
        rgba(255, 255, 255, 0) 48%
    );
}
.willpower[data-willpower-ready="true"] .willpower-step--top {
    align-items: flex-start;
    padding-top: 80px;
}
.willpower[data-willpower-ready="true"] .willpower-step--bottom {
    align-items: flex-end;
	padding-bottom: 40px;
}

@media (prefers-reduced-motion: reduce) {
    .willpower[data-willpower-ready="true"] .willpower-step {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .willpower-bg { transition: none; }
}


/* ============================================================
   GUIDE STORY (Tiffany)
   ============================================================ */
.guide-story .guide-media {
    position: sticky;
    top:15vh;
    align-self: flex-start;
    height: 85vh;
    display: flex;
    align-items: center;
}

.guide-story .guide-media__frame {
    position: relative;
    width: 100%;
    max-width: 510px;
    aspect-ratio: 510 / 640;
    margin: 0 auto;
}

.guide-story .guide-image {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(0.94);
    transition:
        opacity 520ms ease,
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-story .guide-image.is-active {
    opacity: 1;
    transform: scale(1);
}

/* Pre-init and no-JS: keep the first image visible */
.guide-story:not([data-guide-story-ready="true"]) .guide-image[data-guide-image="0"] {
    opacity: 1;
    transform: none;
}

.guide-story .guide-image .et_pb_image_wrap {
    display: block;
    width: 100%;
    height: 100%;
}

.guide-story .guide-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Steps ---- */
.guide-story[data-guide-story-ready="true"] .guide-step {
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 500ms ease,
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-story[data-guide-story-ready="true"] .guide-step.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .guide-story .guide-image,
    .guide-story[data-guide-story-ready="true"] .guide-step {
        transition: none;
    }
    .guide-story[data-guide-story-ready="true"] .guide-step {
        opacity: 1;
        transform: none;
    }
}


/* ============================================================
   WHOLENESS EXPLORER
   ============================================================ */
.wholeness-section {
    min-height: 400vh;
   scroll-snap-type: y mandatory;
}
.wholeness-section .wholeness-stage {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- Tabs ---- */
.wholeness-section .wholeness-tabs {
    position: relative;
    align-self: center;
}

/* Sliding pill. Sits behind the tabs. */
.wholeness-section .wholeness-tabs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--wholeness-indicator-top, 0px);
    height: var(--wholeness-indicator-height, 0px);
    background: #ffffff;
    border-radius: 10px;
    opacity: 0;
    z-index: 0;
    transition:
        top 480ms cubic-bezier(0.22, 1, 0.36, 1),
        height 480ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 300ms ease;
}

.wholeness-section[data-wholeness-ready="true"] .wholeness-tabs::after {
    opacity: 1;
}

.wholeness-section .wholeness-tab {
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: color 300ms ease, background-color 300ms ease;
}

/* The pill shows through the active tab, so clear its own background */
.wholeness-section .wholeness-tabs .wholeness-tab.is-active {
    background-color: transparent;
    border-color: transparent;
}
.wholeness-section .wholeness-tabs .wholeness-tab.is-active p {
		color:#388b79;
}

/* ---- Detail card ---- */
.wholeness-section .wholeness-detail__media {
    display: grid;
    overflow: hidden;
}

.wholeness-section .wholeness-detail__image {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    transition: opacity 520ms ease;
}

.wholeness-section .wholeness-detail__image.is-active {
    opacity: 1;
}

.wholeness-section .wholeness-detail__image .et_pb_image_wrap,
.wholeness-section .wholeness-detail__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Pre-init and no-JS: show the first of each */
.wholeness-section:not([data-wholeness-ready="true"]) .wholeness-detail__image[data-wholeness-image="0"],
.wholeness-section:not([data-wholeness-ready="true"]) .wholeness-panel[data-wholeness-panel="0"] {
    opacity: 1;
}

/* ---- Panels ---- */
.wholeness-section .wholeness-detail__panels {
    display: grid;
}

.wholeness-section .wholeness-panel {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
        opacity 420ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wholeness-section .wholeness-panel.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .wholeness-section .wholeness-tabs::after,
    .wholeness-section .wholeness-detail__image,
    .wholeness-section .wholeness-panel {
        transition: none;
    }
    .wholeness-section .wholeness-panel {
        transform: none;
    }
}
/* ============================================================
   MOBILE + TABLET  (<= 980px)

   Replaces the three existing @media (max-width: 980px) blocks
   in the child theme style.css. Tablet is deliberately treated
   the same as phone: no pinning, no layering, no hijack.

   Specificity note: media queries add nothing. Every override
   below is written to match or beat the desktop rule it is
   fighting. That is what the old .wholeness-stage rule got
   wrong, and why the section stayed sticky on every phone.
   ============================================================ */

@media (max-width: 980px) {

/* ------------------------------------------------------------
   WILLPOWER STORY
   ------------------------------------------------------------ */

/* The stage and its scrim are empty once JS moves the layers
   out. Only hide it when JS confirms the reflow ran, so a
   no-JS load still gets the pinned fallback rather than a
   section with no artwork at all. */
.willpower[data-willpower-mode="stacked"] .willpower-stage {
    display: none;
}

.willpower[data-willpower-mode="stacked"] .willpower-bg {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 3 / 4;          /* tune to taste */
    background-position: center;
    opacity: 1;
    transition: none;
    margin-bottom: 24px;
	  border-radius: 15px;
  max-width: 640px;
  margin: auto !important;
  box-shadow: 0 10px 15px #2b2b2b4f;
}

/* The horizontal mirror only reads correctly against the
   full-bleed stage. In a stacked card it looks like a mistake. */
.willpower[data-willpower-mode="stacked"] .willpower-bg[data-willpower-image="0"],
.willpower[data-willpower-mode="stacked"] .willpower-bg[data-willpower-image="2"] {
    transform: none;
}

.willpower[data-willpower-ready="true"] .willpower-step {
    min-height: auto;
    display: block;
    opacity: 1;
    transform: none;
    transition: none;
    padding: 0 0 12vh;
}

/* Neutralise the desktop placement modifiers */
.willpower[data-willpower-ready="true"] .willpower-step--top,
.willpower[data-willpower-ready="true"] .willpower-step--bottom,
.willpower[data-willpower-ready="true"] .willpower-step--right {
    padding-top: 0;
    padding-bottom: 12vh;
}


/* ------------------------------------------------------------
   GUIDE STORY (Tiffany)
   ------------------------------------------------------------ */

/* Emptied by the reflow. Each image now sits above its step. */
.guide-story[data-guide-mode="stacked"] .guide-media {
    display: none;
}

.guide-story[data-guide-mode="stacked"] .guide-image {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    transition: none;
    margin: 0 0 24px;
}
.guide-story .guide-image img {
  border-radius: 15px;
  max-width: 640px;
  margin: auto !important;
  box-shadow: 0 10px 15px #2b2b2b4f;
}
.guide-story .guide-image .et_pb_image_wrap,
.guide-story .guide-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.guide-story[data-guide-story-ready="true"] .guide-step {
    min-height: 0;
    opacity: 1;
    transform: none;
    transition: none;
    padding-bottom: 8vh;
}


/* ------------------------------------------------------------
   WHOLENESS EXPLORER
   ------------------------------------------------------------ */

.wholeness-section {
    min-height: 0;
    scroll-snap-type: none;
}

/* Two class selectors, to actually beat the desktop rule.
   The old bare .wholeness-stage never applied. */
.wholeness-section .wholeness-stage {
    position: static;
    height: auto;
    display: block;
    justify-content: normal;
}

/* Both containers are empty after the reflow */
.wholeness-section[data-wholeness-mode="stacked"] .wholeness-tabs,
.wholeness-section[data-wholeness-mode="stacked"] .wholeness-detail__media {
    display: none;
}

.wholeness-section[data-wholeness-mode="stacked"] .wholeness-detail__panels {
    display: block;
}

/* The tab is now a section heading, not a control */
.wholeness-section[data-wholeness-mode="stacked"] .wholeness-tab {
    display: none;
}

.wholeness-section[data-wholeness-mode="stacked"] .wholeness-detail__image,
.wholeness-section[data-wholeness-mode="stacked"] .wholeness-panel {
    grid-area: auto;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
}
.wholeness-section[data-wholeness-mode="stacked"] .wholeness-detail__image img {
  border-radius: 15px;
  margin: 40px 0 10px;
}
.wholeness-section[data-wholeness-mode="stacked"] .wholeness-detail__image {
    margin-bottom: 20px;
}

.wholeness-section[data-wholeness-mode="stacked"] .wholeness-panel {
    margin-bottom: 64px;
}

/* No-JS fallback: without the reflow, unstack the layers in
   place so all five panels are at least readable. */
.wholeness-section:not([data-wholeness-mode]) .wholeness-detail__media,
.wholeness-section:not([data-wholeness-mode]) .wholeness-detail__panels {
    display: block;
}

.wholeness-section:not([data-wholeness-mode]) .wholeness-detail__image,
.wholeness-section:not([data-wholeness-mode]) .wholeness-panel {
    grid-area: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

}