/* Homepage hero. Product image sources and column animations are preserved. */
.wp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 32px; }
.wp-hero-primary-action, .wp-hero-secondary-action { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 15px; border-radius: 9px; padding: 0 17px; font-size: 12px; font-weight: 750; text-decoration: none; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.wp-hero-primary-action { min-width: 202px; background: #151a25; color: #fff; box-shadow: 0 12px 28px rgba(21, 26, 37, .16); }
.wp-hero-primary-action:hover { background: var(--wp-hero-brand); color: #fff; transform: translateY(-2px); }
.wp-hero-secondary-action { border: 1px solid var(--wp-hero-line); background: rgba(255,255,255,.58); color: var(--wp-hero-ink); }
.wp-hero-secondary-action:hover { border-color: var(--wp-hero-brand); color: var(--wp-hero-brand); transform: translateY(-2px); }
.wp-hero-actions i { font-size: 16px; }
/* Hero direction three: restrained, editorial, and centered on one decision.
   The animated preview wall is intentionally left as the only decorative
   motion; labels, cards, and extra framing stay out of its way. */
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 {
    --wp-v3-ink: #121722;
    --wp-v3-muted: #697589;
    --wp-v3-line: #dfe4eb;
    --wp-v3-brand: var(--color-brand-600, #bc4b97);
    height: calc(100svh - 126px) !important;
    min-height: calc(100svh - 126px) !important;
    background: #ffffff !important;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3::before { display: none; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3::after { right: auto; bottom: -35%; left: -18%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(188,75,151,.09), transparent 68%); }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-shell {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 clamp(28px, 8vw, 128px) !important;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-copy {
    position: relative;
    z-index: 5;
    display: flex;
    width: min(550px, 45vw) !important;
    height: 100%;
    max-width: none;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--wp-v3-ink);
    text-align: left !important;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-title {
    max-width: 540px;
    margin: 0 !important;
    color: var(--wp-v3-ink) !important;
    font-size: clamp(52px, 5.35vw, 78px) !important;
    font-weight: 720 !important;
    letter-spacing: -.065em !important;
    line-height: 1 !important;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .guest-hero-title-accent { color: var(--wp-v3-brand) !important; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-copy-text { max-width: 440px; margin: 26px 0 0 !important; color: var(--wp-v3-muted) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.65 !important; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-actions { justify-content: flex-start !important; gap: 20px; margin-top: 29px; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-primary-action { min-height: 48px; border-radius: 7px; padding-inline: 17px; background: var(--wp-v3-ink); box-shadow: 0 10px 22px rgba(18,23,34,.14); }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-primary-action:hover { background: var(--wp-v3-brand); }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-secondary-action { min-height: 48px; border: 0; border-bottom: 1px solid var(--wp-v3-ink); border-radius: 0; background: transparent; padding: 0 0 4px; color: var(--wp-v3-ink); }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-secondary-action:hover { border-color: var(--wp-v3-brand); color: var(--wp-v3-brand); background: transparent; transform: none; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-signature { display: flex; align-items: center; gap: 11px; margin-top: 36px; color: var(--wp-v3-muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-signature i { width: 3px; height: 3px; border-radius: 50%; background: var(--wp-v3-brand); }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage { position: absolute; z-index: 1; top: 0; right: 0; width: 57%; height: 100%; min-height: 0; margin: 0; pointer-events: none; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::before { position: absolute; inset: 0 auto 0 0; z-index: 4; width: 38%; background: linear-gradient(90deg, #f8f9fb 0%, rgba(248,249,251,.9) 32%, transparent 100%); content: ''; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::after { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(248,249,251,.18), transparent 25%, transparent 75%, rgba(248,249,251,.24)); content: ''; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-frame { position: absolute; inset: 0; height: auto; margin: 0; overflow: hidden; border: 0; border-left: 1px solid rgba(170,180,194,.24); border-radius: 0; background: transparent; box-shadow: none; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-frame::before, body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-frame::after, body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-frame-glow { display: none; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .guest-hero-product-wall { position: absolute; inset: 0; z-index: 2; height: 100%; min-height: 0; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .guest-hero-product-track { top: 50%; right: -13%; width: min(var(--guest-hero-track-width, 680px), 108%); height: 820px; transform: translateY(-50%) rotate(6deg); opacity: .62; }
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 { --wp-v3-ink: #f6f7fb; --wp-v3-muted: #a3adbd; --wp-v3-line: #303949; --wp-v3-brand: var(--color-brand-400, #d66bb3); background: #090b0f !important; }
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3::after { background: radial-gradient(circle, rgba(210,91,170,.13), transparent 68%); }
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::before { background: linear-gradient(90deg, #090b0f 0%, rgba(9,11,15,.9) 32%, transparent 100%); }
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::after { background: linear-gradient(180deg, rgba(9,11,15,.22), transparent 25%, transparent 75%, rgba(9,11,15,.3)); }
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-frame { border-left-color: rgba(160,174,192,.16); }
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-primary-action { background: #f6f7fb; color: #0d1118; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-secondary-action { border-color: #f6f7fb; color: #f6f7fb; }
@media (max-width: 959px) {
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 { height: calc(100svh - 65px) !important; min-height: calc(100svh - 65px) !important; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-shell { padding: 0 22px !important; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-copy { width: 100% !important; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage { width: 100%; opacity: .3; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::before { width: 100%; background: linear-gradient(90deg, rgba(248,249,251,.96), rgba(248,249,251,.72) 52%, rgba(248,249,251,.24)); }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::after { background: linear-gradient(180deg, rgba(248,249,251,.3), transparent 30%, rgba(248,249,251,.25)); }
    .dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::before { background: linear-gradient(90deg, rgba(9,11,15,.97), rgba(9,11,15,.72) 52%, rgba(9,11,15,.22)); }
    .dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::after { background: linear-gradient(180deg, rgba(9,11,15,.32), transparent 30%, rgba(9,11,15,.3)); }
}
@media (max-width: 620px) {
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-shell { padding: 0 22px !important; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-copy { align-items: center !important; justify-content: center; text-align: center !important; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-title { max-width: 350px; font-size: clamp(42px, 11.9vw, 62px) !important; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-copy-text { max-width: 340px; margin-top: 21px !important; font-size: 14px !important; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-actions { align-items: center; flex-direction: column; gap: 13px; width: 100%; margin-top: 24px; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-primary-action { width: min(100%, 310px); }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-secondary-action { min-height: 31px; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-signature { gap: 8px; margin-top: 28px; font-size: 8px; }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage { opacity: .22; }
}

body.guest-portfolio section.wp-landing-hero.wp-hero-v3 { position: relative; isolation: isolate; overflow: hidden !important; }
body.guest-portfolio section.wp-hero-v3 .wp-hero-v3-shell { position: relative; max-width: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
body.guest-portfolio section.wp-hero-v3 .wp-hero-title { width: 100%; max-width: none !important; text-align: left !important; text-wrap: balance; }
body.guest-portfolio section.wp-hero-v3 .wp-hero-copy-text { width: 100%; max-width: 440px !important; text-align: left !important; }
body.guest-portfolio section.wp-hero-v3 .wp-hero-actions { align-items: center !important; }
body.guest-portfolio section.wp-hero-v3 .wp-hero-secondary-action { border-bottom: 0; width: auto; }
@media(max-width:620px) {
 body.guest-portfolio section.wp-hero-v3 .wp-hero-title { text-align: center !important; }
 body.guest-portfolio section.wp-hero-v3 .wp-hero-copy-text { text-align: center !important; max-width: 335px !important; text-wrap: pretty; }
 body.guest-portfolio section.wp-hero-v3 .wp-hero-actions { align-items: center !important; gap: 8px; }
 body.guest-portfolio section.wp-hero-v3 .wp-hero-signature { font-size: 8px; letter-spacing: .035em; }
}
@media(max-height:560px) and (max-width:959px) {
 body.guest-portfolio section.wp-hero-v3 { height: auto !important; }
 body.guest-portfolio section.wp-hero-v3 .wp-hero-v3-copy { min-height: calc(100svh - 65px); height: auto; padding: 28px 0 !important; }
}
@media(prefers-reduced-motion:reduce) { .wp-hero-primary-action, .wp-hero-secondary-action { transition: none; } }

/* Keep the light theme bright; the dark theme below switches the same canvas
   to exact black while preserving the moving wall on the right. */
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 {
    --wp-v3-ink: #121722;
    --wp-v3-muted: #697589;
    --wp-v3-line: #dfe4eb;
    --wp-v3-brand: var(--color-brand-600, #bc4b97);
    background: #ffffff !important;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3::after {
    background: radial-gradient(circle, rgba(188,75,151,.09), transparent 68%);
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::before {
    background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.9) 32%, transparent 100%);
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::after {
    background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 25%, transparent 75%, rgba(255,255,255,.24));
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-frame {
    border-left-color: rgba(170,180,194,.24);
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .guest-hero-product-track {
    opacity: .62;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-primary-action {
    background: #121722;
    color: #fff;
    box-shadow: 0 10px 22px rgba(18,23,34,.14);
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-primary-action:hover {
    background: var(--wp-v3-brand);
    color: #fff;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-secondary-action {
    border-bottom-color: #121722;
    color: #121722;
}
/* Dark mode owns the exact black canvas requested for the alternate theme. */
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 {
    --wp-v3-ink: #f7f7fa;
    --wp-v3-muted: #a9b0bf;
    --wp-v3-line: #3a3e49;
    --wp-v3-brand: var(--color-brand-400, #d66bb3);
    background: #000000 !important;
}
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3::after {
    background: radial-gradient(circle, rgba(210,91,170,.16), transparent 68%);
}
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::before {
    background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.9) 24%, rgba(0,0,0,.24) 65%, transparent 100%);
}
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::after {
    background: linear-gradient(180deg, rgba(0,0,0,.2), transparent 22%, transparent 78%, rgba(0,0,0,.34));
}
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-frame { border-left-color: rgba(170,180,194,.16); }
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .guest-hero-product-track { opacity: .7; }
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-primary-action {
    background: #f7f7fa;
    color: #080a0f;
    box-shadow: 0 14px 30px rgba(0,0,0,.3);
}
.dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-secondary-action { border-bottom-color: #f7f7fa; color: #f7f7fa; }
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-secondary-action:hover {
    border-bottom-color: var(--wp-v3-brand);
    color: var(--wp-v3-brand);
}
body.guest-portfolio:has(.wp-hero-v3) .wp-header-bottom {
    border-bottom: 0 !important;
}
@media (max-width: 959px) {
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::before {
        background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.72) 52%, rgba(255,255,255,.24));
    }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::after {
        background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 30%, rgba(255,255,255,.25));
    }
    .dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::before { background: linear-gradient(90deg, rgba(0,0,0,.97), rgba(0,0,0,.72) 52%, rgba(0,0,0,.2)); }
    .dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::after { background: linear-gradient(180deg, rgba(0,0,0,.3), transparent 30%, rgba(0,0,0,.32)); }
}

/* Use the same guest/admin appearance controls for the hero's interactive
   surfaces and preview frame. */
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 :is(.wp-hero-primary-action, .wp-hero-secondary-action) {
    border-radius: var(--radius-button, .5rem) !important;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent) !important;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-secondary-action {
    border-bottom-color: color-mix(in srgb, currentColor 18%, transparent) !important;
    padding: 0 16px !important;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-frame {
    inset: clamp(16px, 2.8vw, 38px) clamp(14px, 2.4vw, 34px) !important;
    border: 1px solid color-mix(in srgb, var(--wp-v3-ink) 14%, transparent) !important;
    border-radius: var(--radius-card, 1rem) !important;
}
@media (max-width: 959px) {
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-frame {
        inset: 12px !important;
        border-radius: var(--radius-card, 1rem) !important;
    }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage {
        z-index: 2;
        opacity: .75 !important;
    }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::before {
        background: linear-gradient(90deg, rgba(255,255,255,.66), rgba(255,255,255,.28) 52%, rgba(255,255,255,.05)) !important;
    }
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::after {
        background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%, rgba(255,255,255,.1)) !important;
    }
    .dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage { opacity: .75 !important; }
    .dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::before {
        background: linear-gradient(90deg, rgba(0,0,0,.66), rgba(0,0,0,.28) 52%, rgba(0,0,0,.05)) !important;
    }
    .dark body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-v3-stage::after {
        background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 30%, rgba(0,0,0,.1)) !important;
    }
}

body.guest-portfolio section.wp-hero-v3 .wp-hero-gumroad {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 24px;
    text-decoration: none;
}
body.guest-portfolio section.wp-hero-v3 .wp-hero-gumroad .guest-hero-proof {
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid var(--wp-v3-line) !important;
    border-radius: var(--radius-button, .5rem) !important;
    background: transparent !important;
    color: var(--wp-v3-muted) !important;
    font-size: 12px;
}
body.guest-portfolio section.wp-hero-v3 .wp-hero-gumroad .guest-hero-proof strong { color: var(--wp-v3-ink) !important; }
body.guest-portfolio section.wp-hero-v3 .wp-hero-gumroad:hover .guest-hero-proof { border-color: var(--wp-v3-brand) !important; }
body.guest-portfolio section.wp-hero-v3 :is(.wp-hero-gumroad, .wp-hero-primary-action, .wp-hero-secondary-action):focus-visible { outline: 2px solid var(--wp-v3-brand); outline-offset: 4px; }
@media (max-width: 959px) {
    body.guest-portfolio section.wp-hero-v3 .guest-hero-product-wall { display: block !important; opacity: 1 !important; }
    body.guest-portfolio section.wp-hero-v3 .guest-hero-product-wall::after { display: none !important; }
    body.guest-portfolio section.wp-hero-v3 .guest-hero-product-track { opacity: .85 !important; }
    body.guest-portfolio section.wp-hero-v3 .wp-hero-v3-stage::after {
        background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.85) 27%, rgba(255,255,255,.85) 74%, rgba(255,255,255,.1)) !important;
    }
    .dark body.guest-portfolio section.wp-hero-v3 .wp-hero-v3-stage::after {
        background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.85) 27%, rgba(0,0,0,.85) 74%, rgba(0,0,0,.1)) !important;
    }
}
@media (max-height: 740px) and (max-width: 620px) {
    body.guest-portfolio section.wp-hero-v3 .wp-hero-gumroad { margin-bottom: 16px; }
    body.guest-portfolio section.wp-hero-v3 .wp-hero-title { font-size: clamp(36px, 10.6vw, 44px) !important; }
    body.guest-portfolio section.wp-hero-v3 .wp-hero-copy-text { margin-top: 16px !important; }
    body.guest-portfolio section.wp-hero-v3 .wp-hero-signature { margin-top: 20px; }
}

/* The fixed header already owns the top offset for the landing page. Remove
   the residual flex-shell strip so the hero begins directly under navigation.
   The preview wall reaches the hero edges; its decorative frame does not add
   a second inset or a hairline at the top and bottom. */
body.guest-portfolio .guest-page-main:has(.wp-hero-v3) {
    margin-top: -21px !important;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 {
    height: calc(100svh - var(--wp-header-height, 126px)) !important;
    min-height: calc(100svh - var(--wp-header-height, 126px)) !important;
}
body.guest-portfolio section.wp-landing-hero.wp-hero-v3 .wp-hero-frame {
    inset: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
@media (max-width: 959px) {
    body.guest-portfolio section.wp-landing-hero.wp-hero-v3 {
        height: calc(100svh - var(--wp-header-height, 65px)) !important;
        min-height: calc(100svh - var(--wp-header-height, 65px)) !important;
    }
}