/* =========================================================
   PHOOLIFY HOMEPAGE HERO
   Live classes only — this file previously carried a large
   amount of CSS for elements that were never rendered
   (a floating top nav, a price/variant panel, a "next slide"
   thumbnail). That dead weight has been removed. Every rule
   below styles something actually in index.php's hero markup.
   ========================================================= */

.ph-ref-hero-wrap {
    position: relative;
    overflow: hidden;
}

/* Reference-inspired full-scene carousel (2026 refresh) */
.ph-ref-hero-wrap{padding:0;background:#fff8f8}
.ph-ref-hero{position:relative;width:100%;height:clamp(610px,calc(100svh - 82px),820px);min-height:610px;overflow:hidden;background:#f8e9ec;isolation:isolate}
.ph-ref-slide{position:absolute;inset:0;display:block;padding:0;color:var(--slide-fg);opacity:0;visibility:hidden;transform:scale(1.025);transition:opacity .75s ease,transform 1.4s cubic-bezier(.2,.7,.2,1),visibility .75s}
.ph-ref-slide.active{opacity:1;visibility:visible;transform:scale(1);z-index:2}
.ph-ref-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,248,249,.96) 0%,rgba(255,248,249,.78) 31%,rgba(255,248,249,.12) 58%,rgba(255,248,249,0) 78%);pointer-events:none;z-index:1}
.ph-ref-copy{position:absolute;z-index:4;left:max(5vw,calc((100vw - 1440px)/2 + 56px));top:50%;width:min(520px,41vw);padding:0;transform:translateY(-50%);text-align:left;color:var(--slide-fg)}
.ph-ref-kicker{margin:0 0 22px;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:inherit;opacity:.82}
.ph-ref-title{max-width:590px;margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(3.7rem,5.3vw,6.1rem);font-weight:500;line-height:.98;letter-spacing:-.055em;text-wrap:balance;color:inherit}
.ph-ref-subtitle{max-width:430px;margin:28px 0 0;font-size:clamp(1rem,1.28vw,1.28rem);line-height:1.62;color:inherit;opacity:.76}
.ph-ref-cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:30px}
.ph-ref-cta{display:inline-flex;align-items:center;justify-content:center;gap:17px;min-height:52px;padding:0 26px;border:1px solid #a42b56;border-radius:8px;background:#a42b56;color:#fff;font-size:.94rem;font-weight:750;text-decoration:none;box-shadow:0 12px 30px rgba(123,51,85,.18);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.ph-ref-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(123,51,85,.28)}
.ph-ref-cta-secondary{background:rgba(255,255,255,.34);color:inherit;border-color:rgba(123,51,85,.65);box-shadow:none;backdrop-filter:blur(8px)}
.ph-ref-caption{display:flex;align-items:center;gap:12px;margin:30px 0 0;font-size:.9rem;color:inherit;opacity:.78}
.ph-ref-caption i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.58);color:#a42b56;box-shadow:inset 0 0 0 1px rgba(123,51,85,.1)}
.ph-ref-product-stage{display:none;position:absolute;z-index:2;inset:0 4% 0 38%;place-items:center;pointer-events:none}
.ph-ref-product-stage.has-scene-background{display:none}
.ph-ref-product{width:min(650px,55vw);height:min(650px,75vh);object-fit:contain;filter:drop-shadow(0 35px 35px rgba(67,25,42,.18));transform:scale(var(--image-scale,1))}
.ph-ref-glass{position:absolute;z-index:5;display:grid;gap:6px;width:155px;padding:21px 20px;border:1px solid rgba(255,255,255,.68);border-radius:20px;background:rgba(255,255,255,.42);color:#3c2530;box-shadow:0 20px 45px rgba(83,41,57,.15),inset 0 0 0 1px rgba(255,255,255,.25);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%)}
.ph-ref-glass strong{font-family:Georgia,'Times New Roman',serif;font-size:1.18rem;line-height:1.08}
.ph-ref-glass>span:last-child{font-size:.82rem;line-height:1.38;opacity:.72}
.ph-ref-glass-icon{display:grid!important;place-items:center;width:34px;height:34px;margin-bottom:5px;border-radius:50%;background:rgba(203,73,114,.13);color:#a42b56}
.ph-ref-glass-one{right:5.2%;top:19%}.ph-ref-glass-two{right:10%;bottom:15%;width:180px;grid-template-columns:38px 1fr}.ph-ref-glass-two .ph-ref-glass-icon{grid-row:1/3}.ph-ref-glass-two strong{font-size:1.32rem}.ph-ref-glass-two>span:not(.ph-ref-glass-icon){align-self:end}
.ph-ref-dots{position:absolute;z-index:8;left:50%;right:auto;top:auto;bottom:23px;display:flex;flex-direction:row;gap:9px;transform:translateX(-50%)}
.ph-ref-dot{display:grid;place-items:center;width:31px;height:31px;padding:0;border:0;background:transparent;color:rgba(123,51,85,.38);cursor:pointer;transition:color .25s ease,transform .3s ease}.ph-ref-dot:hover{color:#c13f70;transform:scale(1.08)}.ph-ref-dot.active{color:#a42b56;transform:scale(1.14)}.ph-ref-dot-flower{display:block;width:26px;height:26px;overflow:visible;filter:drop-shadow(0 4px 8px rgba(123,51,85,.18))}.ph-ref-dot-petals{transform-origin:center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.ph-ref-dot.active .ph-ref-dot-petals{transform:rotate(45deg)}.ph-ref-dot-center{fill:#f6bf45;stroke:rgba(255,255,255,.9);stroke-width:1.2}
.ph-ref-arrow{position:absolute;z-index:8;top:50%;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.58);border-radius:50%;background:rgba(255,255,255,.34);color:#6e3148;font:300 2rem/1 Arial;backdrop-filter:blur(10px);cursor:pointer;opacity:0;transition:opacity .2s,transform .2s}.ph-ref-hero:hover .ph-ref-arrow{opacity:1}.ph-ref-arrow:hover{transform:scale(1.06)}.ph-ref-arrow-prev{left:18px}.ph-ref-arrow-next{right:18px}
.ph-ref-bottom-socials,.ph-ref-wave{display:none!important}

@media (max-width:900px){
 .ph-ref-hero{height:clamp(650px,88svh,760px);min-height:650px}
 .ph-ref-slide::before{background:linear-gradient(90deg,rgba(255,248,249,.94),rgba(255,248,249,.67) 49%,rgba(255,248,249,.14) 80%)}
 .ph-ref-copy{left:6vw;width:56vw}
 .ph-ref-title{font-size:clamp(3.1rem,7.3vw,4.7rem)}
 .ph-ref-glass-one{right:4%;top:14%}.ph-ref-glass-two{right:5%;bottom:13%}
}
@media (max-width:640px){
 .ph-ref-hero-wrap{padding:0}
 .ph-ref-hero{height:clamp(600px,calc(100svh - 116px),710px);min-height:600px;border-radius:0}
 .ph-ref-slide{padding:0;background-position:62% center!important}
 .ph-ref-slide::before{background:linear-gradient(180deg,rgba(255,248,249,.40) 0%,rgba(255,248,249,.34) 32%,rgba(255,248,249,.94) 62%,rgba(255,248,249,.99) 100%)}
 .ph-ref-copy{left:22px;right:22px;top:auto;bottom:68px;width:auto;padding:0;transform:none}
 .ph-ref-kicker{margin-bottom:10px;font-size:.64rem;letter-spacing:.14em}
 .ph-ref-title{max-width:100%;font-size:clamp(2.45rem,11.5vw,3.65rem);line-height:1.01;-webkit-line-clamp:3}
 .ph-ref-subtitle{display:-webkit-box;max-width:95%;margin-top:14px;font-size:.91rem;line-height:1.48;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 .ph-ref-cta-row{gap:9px;margin-top:18px}.ph-ref-cta{min-height:43px;padding:0 17px;border-radius:7px;font-size:.78rem}.ph-ref-cta-arrow{display:none}
 .ph-ref-caption{display:none}
 .ph-ref-product-stage{display:grid}
 .ph-ref-glass{width:126px;padding:13px 14px;border-radius:15px}.ph-ref-glass strong{font-size:.94rem}.ph-ref-glass>span:last-child{font-size:.69rem}
 .ph-ref-glass-icon{width:27px;height:27px;font-size:.72rem}
 .ph-ref-glass-one{top:20px;right:14px}.ph-ref-glass-two{top:180px;bottom:auto;right:14px;width:142px;grid-template-columns:30px 1fr}.ph-ref-glass-two strong{font-size:1rem}
 .ph-ref-dots{bottom:24px}.ph-ref-arrow{display:none}
}

.ph-ref-hero {
    --hero-bg: #251f20;
    --hero-fg: #ffffff;
    position: relative;
    min-height: clamp(480px, 62vw, 680px);
    overflow: hidden;
    isolation: isolate;
}

.ph-ref-wave {
    position: absolute;
    z-index: 15;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: auto;
    line-height: 0;
    pointer-events: none;
}

.ph-ref-wave svg {
    display: block;
    width: 100%;
    height: clamp(28px, 5vw, 64px);
}

.ph-ref-slide {
    --slide-bg: #251f20;
    --slide-fg: #ffffff;
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(56px, 8vw, 96px) clamp(28px, 4.5vw, 68px) clamp(48px, 6vw, 72px);
    color: var(--slide-fg);
    background:
        radial-gradient(circle at 60% 40%, rgba(255,255,255,.10), transparent 30%),
        linear-gradient(125deg, color-mix(in srgb, var(--slide-bg), #fff 4%), var(--slide-bg));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-slow, .6s) var(--ease-standard, ease),
                visibility var(--duration-slow, .6s);
}

.ph-ref-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(0,0,0,.22) 0%, transparent 45%);
}

.ph-ref-slide.active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ph-ref-slide.is-leaving {
    z-index: 3;
    pointer-events: none;
}

.ph-ref-slide.is-preparing {
    z-index: 4;
    opacity: 1;
    visibility: visible;
}

.ph-ref-copy,
.ph-ref-product-stage {
    position: relative;
    z-index: 5;
}

.ph-ref-copy {
    align-self: center;
    max-width: 480px;
    transition: opacity .5s ease, transform .6s var(--ease-standard, ease);
}

.ph-ref-kicker {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: inherit;
    font-family: var(--font-body);
    font-size: var(--text-footnote, 12px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    width: fit-content;
}

.ph-ref-title {
    margin: 0;
    max-width: 480px;
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 5.4vw, 4.875rem);
    line-height: .95;
    letter-spacing: -.03em;
    font-weight: 600;
    color: inherit;
    text-wrap: balance;
}

.ph-ref-subtitle {
    max-width: 40ch;
    margin: 16px 0 0;
    color: color-mix(in srgb, var(--slide-fg), transparent 22%);
    font-size: var(--text-body-sm, 15px);
    line-height: 1.55;
    /* keep admin-entered copy from ever dominating the hero, however long it runs */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ph-ref-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.ph-ref-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    color: #1f1f1f;
    background: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
    transition: transform var(--duration-fast, .2s) var(--ease-standard, ease),
                box-shadow var(--duration-fast, .2s) var(--ease-standard, ease);
}

.ph-ref-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,0,0,.2);
}

.ph-ref-cta-arrow {
    font-size: 15px;
    transition: transform var(--duration-fast, .2s) var(--ease-standard, ease);
}

.ph-ref-cta:hover .ph-ref-cta-arrow {
    transform: translateX(3px);
}

.ph-ref-product-stage {
    display: grid;
    place-items: center;
    pointer-events: none;
    height: min(52vw, 500px);
}

.ph-ref-product-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 56%;
    height: 8%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0,0,0,.24);
    filter: blur(18px);
    opacity: .4;
}

.ph-ref-product-stage::before {
    content: "";
    position: absolute;
    width: min(88%, 360px);
    aspect-ratio: 3 / 4;
    border-radius: 160px 40px 160px 0px;
    background: rgba(255,255,255,.14);
}

.ph-ref-product {
    position: relative;
    z-index: 2;
    width: min(88%, 360px);
    aspect-ratio: 3 / 4;
    max-height: none;
    border-radius: 160px 40px 160px 0px;
    object-fit: cover;
    filter: drop-shadow(0 24px 22px rgba(0,0,0,.2));
    transform: scale(var(--image-scale, 1));
    will-change: transform, opacity;
    transition: transform .7s var(--ease-standard, ease),
                opacity .4s ease;
}

.ph-ref-slide.is-preparing .ph-ref-copy {
    opacity: 0;
    transform: translateY(16px);
}

.ph-ref-slide.is-leaving .ph-ref-copy {
    opacity: 0;
    transform: translateY(-10px);
}

.ph-ref-slide.is-preparing .ph-ref-product {
    opacity: 0;
    transform: scale(calc(var(--image-scale, 1) * .9));
}

.ph-ref-slide.is-leaving .ph-ref-product {
    opacity: 0;
    transform: scale(calc(var(--image-scale, 1) * .94));
}

/* Dot navigation — the JS already fully supports this via data-ph-dot;
   it just wasn't rendered in the markup before this pass. */
.ph-ref-dots {
    position: absolute;
    z-index: 20;
    right: clamp(16px, 3vw, 32px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ph-ref-dot {
    position: relative;
    width: 32px;
    height: 32px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.ph-ref-dot::before {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: var(--dot-color, #fff);
    box-shadow: 0 0 0 2px rgba(255,255,255,.55);
    transition: transform var(--duration-fast, .2s) var(--ease-standard, ease),
                box-shadow var(--duration-fast, .2s) var(--ease-standard, ease);
}

.ph-ref-dot:hover::before {
    box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}

.ph-ref-dot.active::before {
    box-shadow: 0 0 0 2.5px #fff;
    transform: scale(1.25);
}

.ph-ref-bottom-socials {
    position: absolute;
    z-index: 20;
    right: clamp(20px, 3.5vw, 48px);
    bottom: clamp(32px, 5vw, 48px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ph-ref-bottom-socials a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.85);
    font-size: 16px;
    text-decoration: none;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    transition: transform var(--duration-fast, .2s) var(--ease-standard, ease),
                background var(--duration-fast, .2s) var(--ease-standard, ease),
                color var(--duration-fast, .2s) var(--ease-standard, ease);
}

.ph-ref-bottom-socials .is-instagram {
    background: var(--instagram-button-color, #e1306c);
}

.ph-ref-bottom-socials .is-facebook {
    background: var(--facebook-button-color, #1877f2);
}

.ph-ref-bottom-socials a:hover {
    color: #fff;
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.ph-ref-dot-ring {
    position: absolute;
    inset: 0;
    width: 32px;
    height: 32px;
    transform: rotate(-90deg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast, .2s) ease;
}

.ph-ref-dot.active .ph-ref-dot-ring {
    opacity: 1;
}

.ph-ref-dot-ring circle {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 81.68;
    stroke-dashoffset: 81.68;
}

.ph-ref-hero.is-running .ph-ref-dot.active .ph-ref-dot-ring circle {
    animation: phDotProgress var(--hero-duration, 3200ms) linear forwards;
}

@keyframes phDotProgress {
    from { stroke-dashoffset: 81.68; }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-ref-dot-ring circle {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ph-ref-slide,
    .ph-ref-product,
    .ph-ref-copy {
        transition: none !important;
    }
}

/* =========================================================
   MOBILE — redesigned, not just shrunk. Product image moves
   above the copy as a wide banner, text gets full-width room
   to breathe, dots + socials sit on one row beneath the card
   instead of floating over the image.
   ========================================================= */
@media (max-width: 720px) {
    .ph-ref-hero-wrap { padding: 0; }

    .ph-ref-hero {
        min-height: clamp(600px, 175vw, 720px);
    }

    .ph-ref-slide {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding: 0 0 64px;
        gap: 0;
    }

    .ph-ref-product-stage {
        order: -1;
        height: 260px;
        /* padding-top: 28px; */
        margin: 5% 0;
    }

    .ph-ref-product-stage::before {
        width: min(85%, 320px);
        aspect-ratio: 4 / 3;
    }

    .ph-ref-product {
        width: min(85%, 320px);
        aspect-ratio: 4 / 3;
    }

    .ph-ref-copy {
        max-width: 100%;
        padding: 15% 24px 0;
        text-align: left;
    }

    .ph-ref-dots {
        top: 310px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
    }

    .ph-ref-title {
        max-width: 100%;
        font-size: clamp(2.25rem, 9vw, 3rem);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ph-ref-subtitle {
        max-width: 100%;
    }

    .ph-ref-cta-row {
        margin-top: 20px;
    }

    .ph-ref-bottom-socials {
        right: 20px;
        /* bottom: 18px; */
    }
}

/* Final cascade: keep the scene-based design above legacy declarations. */
body .ph-ref-hero-wrap{padding:0;background:#fff8f8}
body .ph-ref-hero{position:relative;width:100%;height:clamp(610px,calc(100svh - 82px),820px);min-height:610px;overflow:hidden;border-radius:0;background:#f8e9ec;isolation:isolate}
body .ph-ref-slide{position:absolute;inset:0;display:block;padding:0;color:var(--slide-fg);opacity:0;visibility:hidden;transform:scale(1.025);transition:opacity .75s ease,transform 1.4s cubic-bezier(.2,.7,.2,1),visibility .75s}
body .ph-ref-slide.active{opacity:1;visibility:visible;transform:scale(1);z-index:2}
body .ph-ref-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,248,249,.96) 0%,rgba(255,248,249,.78) 31%,rgba(255,248,249,.12) 58%,rgba(255,248,249,0) 78%);pointer-events:none;z-index:1}
body .ph-ref-copy{position:absolute;z-index:4;left:max(5vw,calc((100vw - 1440px)/2 + 56px));top:50%;width:min(520px,41vw);max-width:none;padding:0;transform:translateY(-50%);text-align:left;color:var(--slide-fg)}
body .ph-ref-kicker{margin:0 0 22px;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:inherit;opacity:.82}
body .ph-ref-title{max-width:590px;margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(3.7rem,5.3vw,6.1rem);font-weight:500;line-height:.98;letter-spacing:-.055em;text-wrap:balance;color:inherit}
body .ph-ref-subtitle{max-width:430px;margin:28px 0 0;font-size:clamp(1rem,1.28vw,1.28rem);line-height:1.62;color:inherit;opacity:.76}
body .ph-ref-cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:30px}
body .ph-ref-cta{display:inline-flex;align-items:center;justify-content:center;gap:17px;min-height:52px;padding:0 26px;border:1px solid #a42b56;border-radius:8px;background:#a42b56;color:#fff;font-size:.94rem;font-weight:750;text-decoration:none;box-shadow:0 12px 30px rgba(123,51,85,.18)}
body .ph-ref-cta-secondary{background:rgba(255,255,255,.34);color:inherit;border-color:rgba(123,51,85,.65);box-shadow:none;backdrop-filter:blur(8px)}
body .ph-ref-caption{display:flex;align-items:center;gap:12px;margin:30px 0 0;font-size:.9rem;color:inherit;opacity:.78}
body .ph-ref-caption i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.58);color:#a42b56}
body .ph-ref-product-stage{position:absolute;z-index:2;inset:0 4% 0 38%;display:grid;place-items:center;height:auto;margin:0;padding:0;pointer-events:none}
body .ph-ref-product-stage.has-scene-background{display:none}
body .ph-ref-product{width:min(650px,55vw);height:min(650px,75vh);object-fit:contain;filter:drop-shadow(0 35px 35px rgba(67,25,42,.18));transform:scale(var(--image-scale,1))}
body .ph-ref-glass{position:absolute;z-index:5;display:grid;gap:6px;width:155px;padding:21px 20px;border:1px solid rgba(255,255,255,.68);border-radius:20px;background:rgba(255,255,255,.42);color:#3c2530;box-shadow:0 20px 45px rgba(83,41,57,.15),inset 0 0 0 1px rgba(255,255,255,.25);backdrop-filter:blur(16px) saturate(120%)}
body .ph-ref-glass strong{font-family:Georgia,'Times New Roman',serif;font-size:1.18rem;line-height:1.08} body .ph-ref-glass>span:last-child{font-size:.82rem;line-height:1.38;opacity:.72}
body .ph-ref-glass-icon{display:grid!important;place-items:center;width:34px;height:34px;margin-bottom:5px;border-radius:50%;background:rgba(203,73,114,.13);color:#a42b56}
body .ph-ref-glass-one{right:5.2%;top:19%} body .ph-ref-glass-two{right:10%;bottom:15%;width:180px;grid-template-columns:38px 1fr} body .ph-ref-glass-two .ph-ref-glass-icon{grid-row:1/3} body .ph-ref-glass-two strong{font-size:1.32rem}
body .ph-ref-dots{position:absolute;z-index:8;left:50%;right:auto;top:auto;bottom:23px;display:flex;flex-direction:row;gap:9px;transform:translateX(-50%)}
body .ph-ref-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(123,51,85,.28)} body .ph-ref-dot.active{width:30px;border-radius:10px;background:#a42b56} body .ph-ref-dot-ring{display:none}
body .ph-ref-arrow{position:absolute;z-index:8;top:50%;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.58);border-radius:50%;background:rgba(255,255,255,.34);color:#6e3148;font:300 2rem/1 Arial;backdrop-filter:blur(10px);cursor:pointer;opacity:0} body .ph-ref-hero:hover .ph-ref-arrow{opacity:1} body .ph-ref-arrow-prev{left:18px} body .ph-ref-arrow-next{right:18px}
body .ph-ref-bottom-socials,body .ph-ref-wave{display:none!important}
@media(max-width:640px){body .ph-ref-hero{height:clamp(650px,calc(100svh - 64px),740px);min-height:650px}body .ph-ref-slide{padding:0;background-position:62% center!important}body .ph-ref-slide::before{background:linear-gradient(180deg,rgba(255,248,249,.4),rgba(255,248,249,.34) 32%,rgba(255,248,249,.94) 62%,rgba(255,248,249,.99))}body .ph-ref-copy{left:22px;right:22px;top:auto;bottom:108px;width:auto;max-width:none;padding:0;transform:none}body .ph-ref-kicker{margin-bottom:10px;font-size:.64rem}body .ph-ref-title{max-width:100%;font-size:clamp(2.35rem,10.8vw,3.45rem);line-height:1.01}body .ph-ref-subtitle{display:-webkit-box;max-width:95%;margin-top:12px;font-size:.88rem;line-height:1.44;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}body .ph-ref-cta-row{gap:8px;margin-top:15px}body .ph-ref-cta{min-height:41px;padding:0 15px;font-size:.75rem}body .ph-ref-caption{display:none}body .ph-ref-glass{width:126px;padding:13px 14px;border-radius:15px}body .ph-ref-glass strong{font-size:.94rem}body .ph-ref-glass>span:last-child{font-size:.69rem}body .ph-ref-glass-icon{width:27px;height:27px;font-size:.72rem}body .ph-ref-glass-one{top:20px;right:14px}body .ph-ref-glass-two{top:180px;bottom:auto;right:14px;width:142px;grid-template-columns:30px 1fr}body .ph-ref-dots{top:auto;bottom:77px}body .ph-ref-arrow{display:none}}

/* Alignment and motion polish */
body .ph-ref-slide[data-scene="1"]{background:var(--slide-bg-1)!important;transform:none}
body .ph-ref-slide[data-scene="1"]::after{content:"";position:absolute;z-index:0;inset:-2.5%;background-image:var(--scene-overlay),var(--scene-image);background-position:center,var(--scene-position);background-repeat:no-repeat;background-size:cover;transform:scale(1);transform-origin:center;will-change:transform}
body .ph-ref-slide[data-scene="1"].active::after{animation:phSceneZoom var(--hero-duration,5200ms) linear forwards}
@keyframes phSceneZoom{from{transform:scale(1)}to{transform:scale(1.04)}}
body .ph-ref-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
body .ph-ref-glass{align-content:start}
body .ph-ref-bottom-socials{position:absolute;z-index:9;left:max(5vw,calc((100vw - 1440px)/2 + 56px));right:auto;/* bottom:25px; */display:flex!important;align-items:center;gap:9px}
body .ph-ref-bottom-socials a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(123,51,85,.16);border-radius:50%;background:rgba(255,255,255,.55);color:#7b3355;box-shadow:0 8px 22px rgba(72,29,46,.1);backdrop-filter:blur(12px);transition:transform .2s ease,background .2s ease,color .2s ease}
body .ph-ref-bottom-socials a:hover{transform:translateY(-3px);background:#9f2d58;color:#fff}
body .ph-ref-bottom-socials .is-instagram,body .ph-ref-bottom-socials .is-facebook,body .ph-ref-bottom-socials .is-email{background:rgba(255,255,255,.55);color:#7b3355}
@media(min-width:901px){body .ph-ref-copy{top:48%;width:min(535px,42vw)}body .ph-ref-glass-one{right:5.5%;top:20%}body .ph-ref-glass-two{right:9%;bottom:16%}}
@media(max-width:640px){body .ph-ref-slide[data-scene="1"]::after{background-position:center,62% center}body .ph-ref-bottom-socials{left:20px;bottom:22px;gap:7px}body .ph-ref-bottom-socials a{width:34px;height:34px;font-size:.84rem}body .ph-ref-dots{left:auto;right:19px;bottom:33px;transform:none}body .ph-ref-copy{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){body .ph-ref-slide[data-scene="1"].active::after{animation:none}}

/* Per-slide entrance choreography and card overflow protection */
body .ph-ref-slide .ph-ref-copy>*{opacity:0;transform:translate3d(-42px,0,0)}
body .ph-ref-slide.active .ph-ref-copy>*{animation:phCopyIn .72s cubic-bezier(.2,.75,.2,1) both}
body .ph-ref-slide.active .ph-ref-copy>*:nth-child(2){animation-delay:.08s}
body .ph-ref-slide.active .ph-ref-copy>*:nth-child(3){animation-delay:.16s}
body .ph-ref-slide.active .ph-ref-copy>*:nth-child(4){animation-delay:.24s}
body .ph-ref-slide.active .ph-ref-copy>*:nth-child(5){animation-delay:.32s}
body .ph-ref-slide .ph-ref-glass{box-sizing:border-box;max-width:calc(100% - 28px);opacity:0;transform:translate3d(42px,0,0);overflow:hidden}
body .ph-ref-slide.active .ph-ref-glass-one{animation:phCardIn .72s .2s cubic-bezier(.2,.75,.2,1) both}
body .ph-ref-slide.active .ph-ref-glass-two{animation:phCardIn .72s .34s cubic-bezier(.2,.75,.2,1) both}
body .ph-ref-glass strong,body .ph-ref-glass span{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal}
body .ph-ref-glass-two{grid-template-columns:38px minmax(0,1fr)}
@keyframes phCopyIn{from{opacity:0;transform:translate3d(-42px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes phCardIn{from{opacity:0;transform:translate3d(42px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(max-width:640px){body .ph-ref-title{overflow-wrap:normal;word-break:normal}body .ph-ref-glass-one{width:136px}body .ph-ref-glass-two{width:168px;padding:13px 12px;grid-template-columns:28px minmax(0,1fr);column-gap:8px}body .ph-ref-glass-two strong{font-size:.94rem;line-height:1.15}body .ph-ref-glass-two>span:not(.ph-ref-glass-icon){font-size:.68rem;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){body .ph-ref-slide .ph-ref-copy>*,body .ph-ref-slide .ph-ref-glass{opacity:1;transform:none;animation:none!important}}

/* Soft SVG cut between the hero and the page content */
body .ph-ref-wave{position:absolute;z-index:7;left:-1px;right:-1px;bottom:-1px;display:block!important;width:calc(100% + 2px);height: 78px;overflow:hidden;pointer-events:none}
body .ph-ref-wave svg{display:block;width:100%;height:100%}
@media(max-width:640px){body .ph-ref-wave{height:34px}body .ph-ref-bottom-socials{bottom:38px}body .ph-ref-dots{bottom:48px}}

/* Phone-specific composition: image first, clean copy, no floating cards */
@media (max-width: 640px) {
    body .ph-ref-hero {
        height: clamp(590px, calc(100svh - 130px), 640px);
        min-height: 590px;
        max-height: 640px;
    }

    body .ph-ref-slide .ph-ref-glass,
    body .ph-ref-slide.active .ph-ref-glass-one,
    body .ph-ref-slide.active .ph-ref-glass-two {
        display: none !important;
        animation: none !important;
    }

    body .ph-ref-slide[data-scene="1"]::after {
        background-position: center, 60% center;
    }

    body .ph-ref-slide::before {
        background: linear-gradient(
            180deg,
            rgba(255,248,249,.12) 0%,
            rgba(255,248,249,.18) 35%,
            rgba(255,248,249,.88) 61%,
            rgba(255,248,249,.99) 100%
        );
    }

    body .ph-ref-copy {
        left: 24px;
        right: 24px;
        top: 43%;
        bottom: auto;
        width: auto;
        max-width: 520px;
        gap: 0;
        transform: translateY(-4%);
    }

    body .ph-ref-kicker {
        margin: 0 0 9px;
        font-size: .62rem;
        line-height: 1.25;
        letter-spacing: .17em;
    }

    body .ph-ref-title {
        margin: 0;
        font-size: clamp(2.25rem, 10.6vw, 3.15rem);
        line-height: .98;
        letter-spacing: -.045em;
    }

    body .ph-ref-subtitle {
        max-width: 94%;
        margin-top: 12px;
        font-size: .86rem;
        line-height: 1.45;
    }

    body .ph-ref-cta-row {
        margin-top: 15px;
        gap: 8px;
    }

    body .ph-ref-cta {
        min-height: 40px;
        padding: 0 15px;
        font-size: .74rem;
        line-height: 1;
    }

    body .ph-ref-bottom-socials {
        left: 22px;
        bottom: 39px;
    }

    body .ph-ref-dots {
        right: 21px;
        bottom: 50px;
    }

    body .ph-ref-wave {
        height: 31px;
    }
}

@media (max-width: 380px) {
    body .ph-ref-hero {
        height: 590px;
        min-height: 590px;
    }

    body .ph-ref-copy {
        left: 19px;
        right: 19px;
        top: 42%;
        bottom: auto;
        transform: translateY(-3%);
    }

    body .ph-ref-title {
        font-size: 2.18rem;
    }

    body .ph-ref-subtitle {
        font-size: .81rem;
    }
}

@media (max-width: 640px) {
    .hero-adjacent-section {
        position: relative;
        z-index: 1;
        padding-top: 42px;
    }

    body .ph-ref-wave {
        z-index: 10;
    }
}

@media (max-width: 640px) {
    body .ph-ref-product-stage.has-cutout-image,
    body .ph-ref-product-stage.needs-cutout-image {
        position: absolute;
        z-index: 3;
        inset: 18px 0 auto;
        display: grid;
        place-items: center;
        width: 100%;
        height: 250px;
        margin: 0;
        padding: 0 48px;
        overflow: hidden;
        pointer-events: none;
    }


    body .ph-ref-product-stage::before {
        content: "";
        position: absolute;
        z-index: 0;
        display: block;
        width: min(66vw, 250px);
        aspect-ratio: 1;
        height: auto;
        border: 1px solid rgba(255,255,255,.72);
        border-radius: 0;
        background:
            radial-gradient(circle at 78% 18%, rgba(255,255,255,.74), transparent 34%),
            linear-gradient(145deg, rgba(255,255,255,.47), rgba(255,238,244,.22));
        box-shadow:
            0 22px 45px rgba(90,40,58,.13),
            inset 0 0 0 1px rgba(255,255,255,.28);
        backdrop-filter: blur(12px) saturate(118%);
        -webkit-backdrop-filter: blur(12px) saturate(118%);
        transform: none;
        -webkit-mask:url('../images/leaf-mask.png') center/contain no-repeat;
        mask:url('../images/leaf-mask.png') center/contain no-repeat;
    }

    body .ph-ref-product {
        position: relative;
        z-index: 1;
        width: min(66vw, 250px);
        aspect-ratio: 1;
        height: auto;
        padding: 0;
        object-fit: cover;
        object-position: center;
        mix-blend-mode: normal;
        border-radius: 0;
        -webkit-mask:url('../images/leaf-mask.png') center/contain no-repeat;
        mask:url('../images/leaf-mask.png') center/contain no-repeat;
        filter: drop-shadow(0 16px 22px rgba(78,31,49,.18));
        transform: scale(var(--image-scale, 1));
        transition: transform .45s cubic-bezier(.2,.75,.2,1), filter .45s ease;
    }

    body .ph-ref-slide.active .ph-ref-product {
        animation: phProductFloat 4.8s ease-in-out infinite alternate;
    }

    body .ph-ref-copy {
        top: 47%;
    }
}

@keyframes phProductFloat {
    from { transform: translateY(0) scale(var(--image-scale, 1)); }
    to { transform: translateY(-6px) scale(var(--image-scale, 1)); }
}

@media (max-width: 380px) {
    body .ph-ref-product-stage.has-scene-background,
    body .ph-ref-product-stage {
        height: 220px;
        padding-inline: 38px;
    }

    body .ph-ref-product {
        width: min(65vw, 220px);
    }

    body .ph-ref-product-stage::before {
        width: min(65vw, 220px);
    }

    body .ph-ref-copy {
        top: 46%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .ph-ref-slide.active .ph-ref-product { animation: none; }
}

/* Final responsive contract: the product artwork is phone-only. */
@media (min-width: 641px) {
    body .ph-ref-product-stage,
    body .ph-ref-product-stage.has-scene-background { display: none !important; }
}
body .ph-ref-dot{display:grid;width:31px;height:31px;padding:0;border:0;border-radius:0;background:transparent;color:rgba(123,51,85,.38);place-items:center}
body .ph-ref-dot.active{width:31px;border-radius:0;background:transparent;color:#a42b56;transform:scale(1.14)}
body .ph-ref-dot-flower{display:block;width:26px;height:26px;overflow:visible;filter:drop-shadow(0 4px 8px rgba(123,51,85,.18))}
body .ph-ref-dot-petals{transform-origin:center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
body .ph-ref-dot.active .ph-ref-dot-petals{transform:rotate(45deg)}
body .ph-ref-dot-center{fill:#f6bf45;stroke:rgba(255,255,255,.9);stroke-width:1.2}
@media (max-width: 640px) {
    body .ph-ref-product-stage,
    body .ph-ref-product-stage.has-scene-background { display:grid !important; }
}