/* ============================================================
   W OUTDOOR LIVING — COMPONENT STYLES

   1. Markets Showcase           (.wol-mk)
   2. Brands Slideshow           (.wol-bs)
   3. Collections Carousel       (.wol-cc, .wol-cc-nav)
   4. Collection Features list   (.wol-cf-list)
   5. Featured Feed              (.wol-ff)
   6. Collection Feed            (.wol-cf)
   7. Project Sidebar            (.wol-psb)
   8. Heading Marks              (.wol-mark-*)
   9. Coming Soon template       (.wol-cs)
   ============================================================ */


/* ============================================================
   1. MARKETS SHOWCASE — [wol_markets]
   ============================================================ */
body .wol-mk.wol-mk {
    position: relative;
    width: 100%;
}
body .wol-mk.wol-mk .wol-mk__inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-xl);
    align-items: start;
}
body .wol-mk.wol-mk .wol-mk__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
body .wol-mk.wol-mk .wol-mk__item {
    border-top: 1px solid var(--color-sage);
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--dur-normal) var(--ease-out),
        transform var(--dur-normal) var(--ease-out);
}
body .wol-mk.wol-mk .wol-mk__item:last-child {
    border-bottom: 1px solid var(--color-sage);
}
body .wol-mk.wol-mk.is-revealed .wol-mk__item {
    opacity: 1;
    transform: translateY(0);
}
body .wol-mk.wol-mk.is-revealed .wol-mk__item:nth-child(1) { transition-delay: 0ms; }
body .wol-mk.wol-mk.is-revealed .wol-mk__item:nth-child(2) { transition-delay: 80ms; }
body .wol-mk.wol-mk.is-revealed .wol-mk__item:nth-child(3) { transition-delay: 160ms; }
body .wol-mk.wol-mk.is-revealed .wol-mk__item:nth-child(4) { transition-delay: 240ms; }
body .wol-mk.wol-mk.is-revealed .wol-mk__item:nth-child(5) { transition-delay: 320ms; }
body .wol-mk.wol-mk.is-revealed .wol-mk__item:nth-child(6) { transition-delay: 400ms; }
body .wol-mk.wol-mk.is-revealed .wol-mk__item:nth-child(7) { transition-delay: 480ms; }
body .wol-mk.wol-mk.is-revealed .wol-mk__item:nth-child(8) { transition-delay: 560ms; }

body .wol-mk.wol-mk .wol-mk__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    width: 100%;
    padding: var(--space-s) 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--color-carbon-black);
}
body .wol-mk.wol-mk .wol-mk__name {
    font-family: var(--font-display);
    font-size: var(--font-display-s);
    font-weight: 400;
    letter-spacing: var(--ls-tight);
    line-height: 1;
    transition: color var(--dur-fast) var(--ease-snap);
}
body .wol-mk.wol-mk .wol-mk__mark {
    display: inline-block;
    width: 0;
    height: 1px;
    background-color: var(--color-granite);
    transition: width var(--dur-normal) var(--ease-out);
    flex-shrink: 0;
}
body .wol-mk.wol-mk .wol-mk__item.is-active .wol-mk__mark {
    width: var(--space-s);
}
body .wol-mk.wol-mk .wol-mk__item.is-active .wol-mk__name,
body .wol-mk.wol-mk .wol-mk__trigger:hover .wol-mk__name {
    color: var(--color-granite);
}

body .wol-mk.wol-mk .wol-mk__preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
body .wol-mk.wol-mk .wol-mk__media-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-mint);
}
body .wol-mk.wol-mk .wol-mk__media {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--dur-normal) var(--ease-out);
}
body .wol-mk.wol-mk .wol-mk__media.is-active {
    opacity: 1;
}
body .wol-mk.wol-mk .wol-mk__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body .wol-mk.wol-mk .wol-mk__content-stack {
    position: relative;
    min-height: 200px;
    width: 100%;          /* ADD */
    max-width: 540px;     /* ADD */
}
body .wol-mk.wol-mk .wol-mk__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
}
body .wol-mk.wol-mk .wol-mk__content.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
body .wol-mk.wol-mk .wol-mk__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-granite);
}
body .wol-mk.wol-mk .wol-mk__desc {
    font-family: var(--font-sans);
    font-size: var(--font-pm);
    font-weight: 400;
    letter-spacing: var(--ls-tight);
    color: var(--color-grey);
    margin: 0;
    line-height: var(--lh-pm);
}
body .wol-mk.wol-mk a.wol-mk__cta.btn,
body .wol-mk.wol-mk .wol-mk__cta {
    align-self: flex-start !important;
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    background-color: var(--color-granite) !important;
    color: var(--color-white) !important;
}
body .wol-mk.wol-mk a.wol-mk__cta.btn:hover,
body .wol-mk.wol-mk .wol-mk__cta:hover {
    background-color: var(--color-carbon-black) !important;
    color: var(--color-white) !important;
}

@media (max-width: 1024px) {
    body .wol-mk.wol-mk .wol-mk__inner {
        grid-template-columns: 1fr;
        gap: 0;
    }
    body .wol-mk.wol-mk .wol-mk__preview {
        position: relative;
        top: auto;
    }
    body .wol-mk.wol-mk .wol-mk__list {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-top: 1px solid var(--color-sage);
        border-bottom: 1px solid var(--color-sage);
        margin-inline: 0;
    }
    body .wol-mk.wol-mk .wol-mk__list::-webkit-scrollbar { display: none; }
    body .wol-mk.wol-mk .wol-mk__item {
        flex: 0 0 auto;
        border-top: 0;
        border-bottom: 0;
        border-right: 1px solid var(--color-sage);
        scroll-snap-align: start;
        transition: background-color var(--dur-fast) var(--ease-snap);
    }
    body .wol-mk.wol-mk .wol-mk__item:last-child { border-right: 0; }
    body .wol-mk.wol-mk .wol-mk__item.is-active { background-color: var(--color-granite); }
    body .wol-mk.wol-mk .wol-mk__trigger { padding: var(--space-s); gap: 0; }
    body .wol-mk.wol-mk .wol-mk__mark { display: none; }
    body .wol-mk.wol-mk .wol-mk__name {
        font-family: var(--font-sans);
        font-size: var(--font-pr);
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        color: var(--color-carbon-black);
    }
    body .wol-mk.wol-mk .wol-mk__item.is-active .wol-mk__name { color: var(--color-white); }
    body .wol-mk.wol-mk .wol-mk__content-stack { min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
    body .wol-mk.wol-mk .wol-mk__media,
    body .wol-mk.wol-mk .wol-mk__content,
    body .wol-mk.wol-mk .wol-mk__name,
    body .wol-mk.wol-mk .wol-mk__mark,
    body .wol-mk.wol-mk .wol-mk__item {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

@media (max-width: 767px) {
    body .wol-mk.wol-mk .wol-mk__content {
        padding: var(--space-s) var(--space-l) var(--space-l) var(--space-l);
    }
}


/* ============================================================
   2. BRANDS SLIDESHOW — [wol_brands_slideshow] / [wol_collection_brands]
   ============================================================ */
body .wol-bs.wol-bs {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-carbon-black);
    --wol-bs-duration: 6s;
    --wol-bs-progress-color: var(--color-accent);
}
body .wol-bs.wol-bs .wol-bs__stage { position: absolute; inset: 0; }
body .wol-bs.wol-bs .wol-bs__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s var(--ease-out);
    pointer-events: none;
}
body .wol-bs.wol-bs .wol-bs__slide.is-active { opacity: 1; pointer-events: auto; }
body .wol-bs.wol-bs .wol-bs__media { position: absolute; inset: 0; overflow: hidden; }
body .wol-bs.wol-bs .wol-bs__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 1s var(--ease-out);
}
body .wol-bs.wol-bs .wol-bs__slide.is-active .wol-bs__media img {
    animation: wol-bs-kenburns var(--wol-bs-duration) linear forwards;
}
@keyframes wol-bs-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}
body .wol-bs.wol-bs .wol-bs__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    z-index: 1;
}
body .wol-bs.wol-bs .wol-bs__content {
    position: absolute;
    top: var(--space-l);
    left: var(--space-l);
    right: var(--space-l);
    max-width: 600px;
    color: var(--color-white);
    z-index: 2;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
body .wol-bs.wol-bs .wol-bs__slide.is-active .wol-bs__content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--dur-fast);
}
body .wol-bs.wol-bs .wol-bs__title {
    font-family: var(--font-display);
    font-size: var(--font-display-l);
    font-weight: 400;
    letter-spacing: var(--ls-tight);
    color: var(--color-white);
    margin: 0 0 var(--space-3xs) 0;
    line-height: var(--lh-display-l);
}
body .wol-bs.wol-bs .wol-bs__desc {
    font-family: var(--font-sans);
    font-size: var(--font-pl);
    color: rgba(247, 247, 247, 0.9);
    margin: 0;
    line-height: var(--lh-pl);
}
body .wol-bs.wol-bs .wol-bs__controls {
    position: absolute;
    left: var(--space-l);
    right: var(--space-l);
    bottom: var(--space-l);
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
}
body .wol-bs.wol-bs .wol-bs__progress {
    flex: 1;
    position: relative;
    height: 1px;
    background-color: rgba(247, 247, 247, 0.3);
    overflow: hidden;
}
body .wol-bs.wol-bs .wol-bs__progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--wol-bs-progress-color);
}
body .wol-bs.wol-bs .wol-bs__progress-fill.is-animating {
    animation: wol-bs-progress var(--wol-bs-duration) linear forwards;
}
body .wol-bs.wol-bs .wol-bs__progress-fill.is-paused { animation-play-state: paused; }
@keyframes wol-bs-progress { from { width: 0; } to { width: 100%; } }

body .wol-bs.wol-bs .wol-bs__dots {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3xs);
}
body .wol-bs.wol-bs .wol-bs__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background-color: rgba(247, 247, 247, 0.4);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
body .wol-bs.wol-bs .wol-bs__dot:hover { background-color: rgba(247, 247, 247, 0.7); }
body .wol-bs.wol-bs .wol-bs__dot.is-active {
    background-color: var(--wol-bs-progress-color);
    transform: scale(1.2);
}

@media (max-width: 1024px) {
    body .wol-bs.wol-bs {
        aspect-ratio: auto;
        height: 300px;
        min-height: 300px;
    }
    body .wol-bs.wol-bs .wol-bs__content {
        top: var(--space-s);
        left: var(--space-s);
        right: var(--space-s);
    }
    body .wol-bs.wol-bs .wol-bs__title { font-size: var(--font-display-m); }
    body .wol-bs.wol-bs .wol-bs__desc { font-size: var(--font-pm); }
    body .wol-bs.wol-bs .wol-bs__controls {
        left: var(--space-s);
        right: var(--space-s);
        bottom: var(--space-s);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .wol-bs.wol-bs .wol-bs__media img {
        animation: none !important;
        transform: scale(1) !important;
    }
    body .wol-bs.wol-bs .wol-bs__slide,
    body .wol-bs.wol-bs .wol-bs__content,
    body .wol-bs.wol-bs .wol-bs__progress-fill,
    body .wol-bs.wol-bs .wol-bs__dot {
        transition: none !important;
    }
}


/* ============================================================
   3. COLLECTIONS CAROUSEL — [wol_collections_carousel] + nav
   ============================================================ */
body .wol-cc.wol-cc {
    position: relative;
    width: 100%;
}
body .wol-cc.wol-cc .wol-cc__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: 4px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
body .wol-cc.wol-cc .wol-cc__track::-webkit-scrollbar { display: none; }
body .wol-cc.wol-cc .wol-cc__track.is-dragging,
body .wol-cc.wol-cc .wol-cc__track.is-inertia {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}
body .wol-cc.wol-cc .wol-cc__edge {
    flex: 0 0 var(--space-l);
    display: block;
    min-width: var(--space-l);
    height: 1px;
    align-self: stretch;
}
body .wol-cc.wol-cc .wol-cc__card {
    flex: 0 0 auto !important;
    width: clamp(320px, 29vw, 560px) !important;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: block;
    position: relative;
    -webkit-user-drag: none;
    user-drag: none;
}
body .wol-cc.wol-cc .wol-cc__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--color-mint);
}
body .wol-cc.wol-cc .wol-cc__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
    will-change: transform;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}
body .wol-cc.wol-cc .wol-cc__card:hover .wol-cc__media img { transform: scale(1.04); }
body .wol-cc.wol-cc .wol-cc__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30,36,32,0.85) 0%, rgba(30,36,32,0.45) 30%, rgba(30,36,32,0) 55%);
    pointer-events: none;
    z-index: 1;
}
body .wol-cc.wol-cc .wol-cc__arrow {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-granite);
    color: var(--color-white);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-snap);
    z-index: 2;
    pointer-events: none;
}
body .wol-cc.wol-cc .wol-cc__arrow svg { width: 18px; height: 18px; display: block; }
body .wol-cc.wol-cc .wol-cc__card:hover .wol-cc__arrow { opacity: 1; }
@media (hover: none) { body .wol-cc.wol-cc .wol-cc__arrow { opacity: 1; } }

body .wol-cc.wol-cc .wol-cc__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-s);
    z-index: 2;
    color: var(--color-white);
    pointer-events: none;
}
body .wol-cc.wol-cc .wol-cc__title {
    font-family: var(--font-sans);
    font-size: var(--font-l);
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 var(--space-3xs) 0;
    line-height: var(--lh-l);
}
body .wol-cc.wol-cc .wol-cc__desc {
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    color: rgba(247, 247, 247, 0.85);
    margin: 0;
    line-height: var(--lh-pr);
}

body .wol-cc-nav.wol-cc-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
}
body .wol-cc-nav.wol-cc-nav .wol-cc-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #3a4d3e1a;
    border: 0 !important;
    border-radius: 50%;
    color: var(--color-carbon-black);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap), opacity var(--dur-fast) var(--ease-snap);
}
body .wol-cc-nav.wol-cc-nav .wol-cc-nav__btn:hover {
    background-color: var(--color-granite);
    color: var(--color-white);
}
body .wol-cc-nav.wol-cc-nav .wol-cc-nav__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background-color: transparent;
}
body .wol-cc-nav.wol-cc-nav .wol-cc-nav__btn svg { width: 18px; height: 18px; display: block; }
body .wol-cc-nav.wol-cc-nav.is-on-dark .wol-cc-nav__btn { color: var(--color-white); }
body .wol-cc-nav.wol-cc-nav.is-on-dark .wol-cc-nav__btn:hover {
    background-color: var(--color-white);
    color: var(--color-carbon-black);
}

@media (max-width: 1024px) {
    body .wol-cc.wol-cc .wol-cc__edge { flex: 0 0 var(--space-s); min-width: var(--space-s); }
    body .wol-cc.wol-cc .wol-cc__card { width: clamp(260px, 55vw, 380px) !important; }
    body .wol-cc.wol-cc .wol-cc__title { font-size: var(--font-m); }
}
@media (max-width: 600px) {
    body .wol-cc.wol-cc .wol-cc__card { width: 78vw !important; }
}
@media (prefers-reduced-motion: reduce) {
    body .wol-cc.wol-cc .wol-cc__media img,
    body .wol-cc.wol-cc .wol-cc__arrow,
    body .wol-cc-nav.wol-cc-nav .wol-cc-nav__btn { transition: none !important; }
    body .wol-cc.wol-cc .wol-cc__track { scroll-behavior: auto; }
}


/* ============================================================
   4. COLLECTION FEATURES LIST — [wol_collection_features]
   ============================================================ */
body .wol-cf-list.wol-cf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
body .wol-cf-list.wol-cf-list .wol-cf-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xs);
    align-items: start;
    padding-block: var(--space-s);
    position: relative;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
body .wol-cf-list.wol-cf-list .wol-cf-list__item:first-child { padding-top: 0; }
body .wol-cf-list.wol-cf-list .wol-cf-list__item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-sage);
    transition: width 1.2s var(--ease-out);
}
body .wol-cf-list.wol-cf-list .wol-cf-list__item:last-child::after { display: none; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item { opacity: 1; transform: translateY(0); }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item::after { width: 100%; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(1) { transition-delay: 0ms; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(2) { transition-delay: 120ms; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(3) { transition-delay: 240ms; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(4) { transition-delay: 360ms; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(5) { transition-delay: 480ms; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(6) { transition-delay: 600ms; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(1)::after { transition-delay: 200ms; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(2)::after { transition-delay: 320ms; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(3)::after { transition-delay: 440ms; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(4)::after { transition-delay: 560ms; }
body .wol-cf-list.wol-cf-list.is-revealed .wol-cf-list__item:nth-child(5)::after { transition-delay: 680ms; }

body .wol-cf-list.wol-cf-list .wol-cf-list__icon {
    display: block;
    width: clamp(40px, 2.5vw, 56px);
    height: clamp(40px, 2.5vw, 56px);
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
body .wol-cf-list.wol-cf-list .wol-cf-list__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4xs);
}
body .wol-cf-list.wol-cf-list .wol-cf-list__title {
    font-family: var(--font-sans);
    font-size: var(--font-pl);
    font-weight: 600;
    color: var(--color-carbon-black);
    margin: 0;
    line-height: var(--lh-pl);
}
body .wol-cf-list.wol-cf-list .wol-cf-list__desc {
    font-family: var(--font-sans);
    font-size: var(--font-pm);
    color: var(--color-grey);
    margin: 0;
    line-height: var(--lh-pm);
}
@media (max-width: 767px) {
    body .wol-cf-list.wol-cf-list .wol-cf-list__item {
        gap: var(--space-2xs);
        padding-block: var(--space-2xs);
    }
    body .wol-cf-list.wol-cf-list .wol-cf-list__icon {
        width: 32px;
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .wol-cf-list.wol-cf-list .wol-cf-list__item,
    body .wol-cf-list.wol-cf-list .wol-cf-list__item::after {
        opacity: 1 !important;
        transform: none !important;
        width: 100% !important;
        transition: none !important;
    }
}


/* ============================================================
   5. FEATURED FEED — [wol_featured_feed]
   ============================================================ */
body .wol-ff.wol-ff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    width: 100%;
}
body .wol-ff.wol-ff .wol-ff__featured {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    height: 100%;
    min-height: 400px;
    align-self: stretch;
}
body .wol-ff.wol-ff .wol-ff__featured-media { position: absolute; inset: 0; overflow: hidden; }
body .wol-ff.wol-ff .wol-ff__featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
body .wol-ff.wol-ff .wol-ff__featured:hover .wol-ff__featured-media img { transform: scale(1.04); }
body .wol-ff.wol-ff .wol-ff__featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30,36,32,0.85) 0%, rgba(30,36,32,0.4) 35%, rgba(30,36,32,0) 60%);
    pointer-events: none;
    z-index: 1;
}
body .wol-ff.wol-ff .wol-ff__featured-eyebrow {
    position: absolute;
    top: var(--space-s);
    left: var(--space-s);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: var(--space-3xs) var(--space-2xs);
    border: 1px solid rgba(247, 247, 247, 0.4);
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    color: var(--color-white);
    text-transform: uppercase;
}
body .wol-ff.wol-ff .wol-ff__featured-content {
    position: absolute;
    left: var(--space-s);
    right: calc(var(--space-s) + 60px);
    bottom: var(--space-s);
    z-index: 2;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}
body .wol-ff.wol-ff .wol-ff__featured-title {
    font-family: var(--font-display);
    font-size: var(--font-display-s);
    color: var(--color-white);
    margin: 0;
    line-height: var(--lh-display-s);
}
body .wol-ff.wol-ff .wol-ff__featured-desc {
    font-family: var(--font-sans);
    font-size: var(--font-pm);
    color: rgba(247, 247, 247, 0.85);
    margin: 0;
    line-height: var(--lh-pm);
    text-wrap: balance;
}
body .wol-ff.wol-ff .wol-ff__featured-arrow {
    position: absolute;
    right: var(--space-s);
    bottom: var(--space-s);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--color-clay);
    color: var(--color-white);
    transition: background-color var(--dur-fast) var(--ease-snap);
}
body .wol-ff.wol-ff .wol-ff__featured-arrow svg { width: 18px; height: 18px; display: block; }
body .wol-ff.wol-ff .wol-ff__featured:hover .wol-ff__featured-arrow {
    background-color: var(--color-accent);
    color: var(--color-carbon-black);
}

/* per-category eyebrows */
body .wol-ff.wol-ff .wol-ff__featured--news .wol-ff__featured-eyebrow,
body .wol-ff.wol-ff .wol-ff__featured--project .wol-ff__featured-eyebrow,
body .wol-ff.wol-ff .wol-ff__featured--insights .wol-ff__featured-eyebrow {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
body .wol-ff.wol-ff .wol-ff__featured--article .wol-ff__featured-eyebrow {
    color: var(--color-sage);
    border-color: var(--color-sage);
}
body .wol-ff.wol-ff .wol-ff__featured--guide .wol-ff__featured-eyebrow {
    color: var(--color-clay);
    border-color: var(--color-clay);
}

body .wol-ff.wol-ff .wol-ff__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}
body .wol-ff.wol-ff .wol-ff__card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-s);
    text-decoration: none;
    color: inherit;
    align-items: stretch;
}
body .wol-ff.wol-ff .wol-ff__card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-mint);
}
body .wol-ff.wol-ff .wol-ff__card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-normal) var(--ease-out);
}
body .wol-ff.wol-ff .wol-ff__card:hover .wol-ff__card-media img { transform: scale(1.04); }
body .wol-ff.wol-ff .wol-ff__card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2xs);
}
body .wol-ff.wol-ff .wol-ff__card-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-accent);
}
body .wol-ff.wol-ff .wol-ff__card--news .wol-ff__card-eyebrow,
body .wol-ff.wol-ff .wol-ff__card--project .wol-ff__card-eyebrow,
body .wol-ff.wol-ff .wol-ff__card--insights .wol-ff__card-eyebrow { color: var(--color-accent); }
body .wol-ff.wol-ff .wol-ff__card--article .wol-ff__card-eyebrow { color: var(--color-sage); }
body .wol-ff.wol-ff .wol-ff__card--guide .wol-ff__card-eyebrow { color: var(--color-clay); }

body .wol-ff.wol-ff .wol-ff__card-title {
    font-family: var(--font-sans);
    font-size: var(--font-m);
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
    line-height: var(--lh-m);
    transition: color var(--dur-fast) var(--ease-snap);
}
body .wol-ff.wol-ff .wol-ff__card:hover .wol-ff__card-title { color: var(--color-accent); }
body .wol-ff.wol-ff .wol-ff__card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    margin-top: var(--space-2xs);
}
body .wol-ff.wol-ff .wol-ff__card-date {
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    color: rgba(247, 247, 247, 0.7);
}
body .wol-ff.wol-ff .wol-ff__card-more {
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    font-weight: 600;
    color: var(--color-white);
    transition: color var(--dur-fast) var(--ease-snap);
}
body .wol-ff.wol-ff .wol-ff__card:hover .wol-ff__card-more { color: var(--color-accent); }

@media (max-width: 1024px) {
    body .wol-ff.wol-ff {
        grid-template-columns: 1fr;
        gap: var(--space-m);
    }
    /* iOS/WebKit collapses an element to ZERO height when it sizes only from
       aspect-ratio and all of its children are absolutely positioned — which
       is exactly this card (every part is an overlay). The padding-ratio
       technique forces a real height box on every engine. Desktop keeps the
       min-height:400px path above, so this only affects the stacked layout. */
    body .wol-ff.wol-ff .wol-ff__featured {
        aspect-ratio: auto;
        height: 0;
        min-height: 0;
        padding-top: 125%;   /* 4 : 5 portrait */
    }
    body .wol-ff.wol-ff .wol-ff__card {
        grid-template-columns: 160px 1fr;
        gap: var(--space-s);
    }
}
@media (max-width: 600px) {
    body .wol-ff.wol-ff .wol-ff__card { grid-template-columns: 1fr; }
    /* Same WebKit aspect-ratio collapse as the featured card above — the
       media's only child is an absolute <img>, so give it a padding-ratio
       height instead of aspect-ratio. */
    body .wol-ff.wol-ff .wol-ff__card-media {
        aspect-ratio: auto;
        height: 0;
        padding-top: 62.5%;  /* 16 : 10 */
    }
    body .wol-ff.wol-ff .wol-ff__featured-title { font-size: var(--font-display-xs); }
}


/* ============================================================
   6. COLLECTION FEED — [wol_collection_feed]
   Dark-background version: stacked full-width cards
   ============================================================ */
body .wol-cf.wol-cf {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}
body .wol-cf.wol-cf .wol-cf__card {
    display: grid;
    grid-template-columns: 2fr 3fr;
    text-decoration: none;
    color: inherit;
    background-color: var(--color-granite);
    overflow: hidden;
}
body .wol-cf.wol-cf .wol-cf__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-carbon-black);
}
body .wol-cf.wol-cf .wol-cf__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-normal) var(--ease-out);
}
body .wol-cf.wol-cf .wol-cf__card:hover .wol-cf__media img { transform: scale(1.04); }
body .wol-cf.wol-cf .wol-cf__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-l);
}
body .wol-cf.wol-cf .wol-cf__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-accent);
}
body .wol-cf.wol-cf .wol-cf__title {
    font-family: var(--font-display);
    font-size: var(--font-display-s);
    font-weight: 400;
    color: var(--color-white);
    margin: 0;
    line-height: var(--lh-display-s);
}
body .wol-cf.wol-cf .wol-cf__desc {
    font-family: var(--font-sans);
    font-size: var(--font-pm);
    color: var(--color-sage);
    margin: 0;
    line-height: var(--lh-pm);
}
body .wol-cf.wol-cf .wol-cf__more {
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    font-weight: 600;
    color: var(--color-white);
    margin-top: var(--space-3xs);
    transition: color var(--dur-fast) var(--ease-snap);
}
body .wol-cf.wol-cf .wol-cf__card:hover .wol-cf__more { color: var(--color-accent); }

@media (max-width: 1024px) {
    body .wol-cf.wol-cf .wol-cf__card {
        grid-template-columns: 1fr 1.4fr;
    }
    body .wol-cf.wol-cf .wol-cf__content { padding: var(--space-m); }
}
@media (max-width: 600px) {
    body .wol-cf.wol-cf .wol-cf__card { grid-template-columns: 1fr; }
    body .wol-cf.wol-cf .wol-cf__media { aspect-ratio: 16 / 9; }
    body .wol-cf.wol-cf .wol-cf__content { padding: var(--space-s); }
}


/* Project Nav + Collection Feed — 2-column layout */
body .wol-cf.wol-cf[data-wol-pn],
body .wol-cf.wol-cf[data-wol-cf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: unset;
}
body .wol-cf.wol-cf[data-wol-pn] .wol-cf__media,
body .wol-cf.wol-cf[data-wol-cf] .wol-cf__media {
    aspect-ratio: unset;
    align-self: stretch;
}
body .wol-cf.wol-cf[data-wol-pn] .wol-cf__content,
body .wol-cf.wol-cf[data-wol-cf] .wol-cf__content {
    padding: var(--space-s);
}
@media (max-width: 767px) {
    body .wol-cf.wol-cf[data-wol-pn],
    body .wol-cf.wol-cf[data-wol-cf] {
        grid-template-columns: 1fr;
    }
    body .wol-cf.wol-cf[data-wol-pn] .wol-cf__card:nth-child(2) {
        display: none;
    }
}


/* ============================================================
   7. PROJECT SIDEBAR — [wol_project_sidebar]
   ============================================================ */
body .wol-psb.wol-psb {
    background-color: #3A4D3E;
    color: var(--color-white);
    padding: var(--space-l) var(--space-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}
body .wol-psb.wol-psb .wol-psb__heading {
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--space-2xs) 0;
}
body .wol-psb.wol-psb .wol-psb__section { display: flex; flex-direction: column; }
body .wol-psb.wol-psb .wol-psb__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s);
    margin: var(--space-2xs) 0 0 0;
}
body .wol-psb.wol-psb .wol-psb__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body .wol-psb.wol-psb .wol-psb__label {
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: rgba(247, 247, 247, 0.7);
    margin: 0;
}
body .wol-psb.wol-psb .wol-psb__value {
    font-family: var(--font-sans);
    font-size: var(--font-pm);
    font-weight: 500;
    color: var(--color-white);
    margin: 0;
}
body .wol-psb.wol-psb .wol-psb__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4xs);
}
body .wol-psb.wol-psb .wol-psb__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: 999px;
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    font-weight: 600;
    text-decoration: none;
    transition: filter var(--dur-fast) var(--ease-snap);
}
body .wol-psb.wol-psb .wol-psb__chip--collection {
    background-color: #4D6151;
}
body .wol-psb.wol-psb .wol-psb__chip--brand {
    background-color: #314135;
}
body .wol-psb.wol-psb a.wol-psb__chip:hover {
    filter: brightness(1.15);
}


/* ============================================================
   8. INTRO TAGS — pill chips for [wol_market_tags]
   ============================================================ */
body .wol-itags.wol-itags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4xs);
}
body .wol-itags.wol-itags .wol-itags__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: 999px;
    background-color: var(--color-granite);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    font-weight: 600;
}


/* ============================================================
   9. HEADING MARKS — characters before Elementor headings
   ============================================================ */
body .wol-mark-triangle .elementor-heading-title::before {
    content: "▸";
    color: var(--color-sage);
    margin-right: var(--space-3xs);
    display: inline-block;
}
body .wol-mark-triangle.is-on-dark .elementor-heading-title::before,
body .wol-mark-triangle--accent .elementor-heading-title::before { color: var(--color-accent); }

body .wol-mark-diamond .elementor-heading-title::before {
    content: "◆";
    color: var(--color-granite);
    margin-right: var(--space-3xs);
    display: inline-block;
}
body .wol-mark-diamond.is-on-dark .elementor-heading-title::before,
body .wol-mark-diamond--accent .elementor-heading-title::before { color: var(--color-accent); }

body .wol-mark-sparkle .elementor-heading-title::before {
    content: "✦";
    color: var(--color-granite);
    margin-right: var(--space-3xs);
    display: inline-block;
}
body .wol-mark-sparkle.is-on-dark .elementor-heading-title::before,
body .wol-mark-sparkle--accent .elementor-heading-title::before { color: var(--color-accent); }

body .wol-mark-square .elementor-heading-title::before {
    content: "▪";
    color: var(--color-granite);
    margin-right: var(--space-3xs);
    display: inline-block;
}
body .wol-mark-square.is-on-dark .elementor-heading-title::before,
body .wol-mark-square--accent .elementor-heading-title::before { color: var(--color-accent); }


/* ============================================================
   wol-pg — Hero Gallery
   ============================================================ */
body .wol-pg.wol-pg {
    display: grid;
    gap: var(--space-5xs);
    width: 100%;
}

/* 1 image — full width, aspect-ratio drives height */
body .wol-pg.wol-pg.wol-pg--1 {
    grid-template-columns: 1fr;
}

/* 2 images — side by side, aspect-ratio drives height */
body .wol-pg.wol-pg.wol-pg--2 {
    grid-template-columns: 1fr 1fr;
}

/* 3 images — 2 stacked left, 1 tall right; height drives the grid */
body .wol-pg.wol-pg.wol-pg--3 {
    grid-template-columns: 38fr 62fr;
    grid-template-rows: 1fr 1fr;
    height: min(750px, 41.67vw);
}

body .wol-pg.wol-pg.wol-pg--3 .wol-pg__item--1 { grid-column: 1; grid-row: 1; }
body .wol-pg.wol-pg.wol-pg--3 .wol-pg__item--2 { grid-column: 1; grid-row: 2; }
body .wol-pg.wol-pg.wol-pg--3 .wol-pg__item--3 { grid-column: 2; grid-row: 1 / 3; }

body .wol-pg.wol-pg .wol-pg__item {
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

/* In 3-up, the grid height owns sizing — aspect-ratio would fight it */
body .wol-pg.wol-pg.wol-pg--3 .wol-pg__item {
    aspect-ratio: unset;
    min-height: 0;
}

body .wol-pg.wol-pg .wol-pg__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    body .wol-pg.wol-pg.wol-pg--2,
    body .wol-pg.wol-pg.wol-pg--3 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    body .wol-pg.wol-pg.wol-pg--3 .wol-pg__item {
        aspect-ratio: 4 / 3;
    }

    body .wol-pg.wol-pg.wol-pg--3 .wol-pg__item--3 {
        grid-column: 1;
        grid-row: auto;
    }
}


/* ============================================================
   wol-cg — Collection Gallery (justified flex, 3-slot cycle)
   Slot widths: wide ~46% / medium ~31% / narrow ~20%
   flex-grow:1 on all items fills every row including the last.
   ============================================================ */
body .wol-cg.wol-cg {
    --wol-cg-height: clamp(280px, 26vw, 520px);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5xs);
}

body .wol-cg.wol-cg .wol-cg__item {
    flex-grow: 1;
    height: var(--wol-cg-height);
    overflow: hidden;
}

/* Row 1: wide → medium → narrow */
body .wol-cg.wol-cg .wol-cg__item:nth-child(6n+1) { flex-basis: 44%; }
body .wol-cg.wol-cg .wol-cg__item:nth-child(6n+2) { flex-basis: 29%; }
body .wol-cg.wol-cg .wol-cg__item:nth-child(6n+3) { flex-basis: 19%; }
/* Row 2: narrow → medium → wide (flipped) */
body .wol-cg.wol-cg .wol-cg__item:nth-child(6n+4) { flex-basis: 19%; }
body .wol-cg.wol-cg .wol-cg__item:nth-child(6n+5) { flex-basis: 29%; }
body .wol-cg.wol-cg .wol-cg__item:nth-child(6n)   { flex-basis: 44%; }

body .wol-cg.wol-cg .wol-cg__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-normal) var(--ease-out);
}

body .wol-cg.wol-cg .wol-cg__item:hover img {
    transform: scale(1.04);
}

@media (max-width: 767px) {
    body .wol-cg.wol-cg {
        --wol-cg-height: 180px;
        gap: var(--space-5xs);
    }
    body .wol-cg.wol-cg .wol-cg__item:nth-child(3n+1),
    body .wol-cg.wol-cg .wol-cg__item:nth-child(3n+2),
    body .wol-cg.wol-cg .wol-cg__item:nth-child(3n) {
        flex-basis: calc(50% - var(--space-5xs));
    }
}


/* ============================================================
   wol-lb — Lightbox
   ============================================================ */
body .wol-lb.wol-lb {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background-color: rgba(30, 36, 32, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-normal) var(--ease-out), visibility 0s linear var(--dur-normal);
}
body .wol-lb.wol-lb.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-normal) var(--ease-out), visibility 0s;
}
body .wol-lb.wol-lb .wol-lb__img-wrap {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
body .wol-lb.wol-lb .wol-lb__img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}
body .wol-lb.wol-lb .wol-lb__img.is-loaded {
    opacity: 1;
}
body .wol-lb.wol-lb .wol-lb__btn {
    position: fixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid rgba(247, 247, 247, 0.3);
    color: var(--color-white);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
body .wol-lb.wol-lb .wol-lb__btn:hover {
    background-color: rgba(247, 247, 247, 0.12);
    border-color: rgba(247, 247, 247, 0.6);
}
body .wol-lb.wol-lb .wol-lb__btn svg { width: 20px; height: 20px; display: block; }
body .wol-lb.wol-lb .wol-lb__close { top: var(--space-s); right: var(--space-s); }
body .wol-lb.wol-lb .wol-lb__prev  { left: var(--space-s); top: 50%; transform: translateY(-50%); }
body .wol-lb.wol-lb .wol-lb__next  { right: var(--space-s); top: 50%; transform: translateY(-50%); }
body .wol-lb.wol-lb .wol-lb__counter {
    position: fixed;
    bottom: var(--space-s);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(247, 247, 247, 0.5);
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    letter-spacing: var(--ls-widest);
}


/* ============================================================
   wol-mcs — Market Collections stack
   ============================================================ */
body .wol-mcs.wol-mcs {
    position: relative;
}

body .wol-mcs.wol-mcs .wol-mcs__panel {
    position: sticky;
    top: calc(var(--wol-header-height, 80px) + var(--space-xs));
    background-color: var(--color-mint);
    margin-bottom: var(--space-2xs);
}

body .wol-mcs.wol-mcs .wol-mcs__panel:nth-child(even) {
    background-color: var(--color-white);
}

body .wol-mcs.wol-mcs .wol-mcs__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    min-height: clamp(480px, 60vh, 760px);
}

body .wol-mcs.wol-mcs .wol-mcs__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-xl);
}

/* Animate-in initial states */
body .wol-mcs.wol-mcs .wol-mcs__eyebrow,
body .wol-mcs.wol-mcs .wol-mcs__title,
body .wol-mcs.wol-mcs .wol-mcs__desc,
body .wol-mcs.wol-mcs .wol-mcs__cta {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
}
body .wol-mcs.wol-mcs .wol-mcs__media img {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
}

/* Revealed states with stagger */
body .wol-mcs.wol-mcs .wol-mcs__panel.is-revealed .wol-mcs__eyebrow { opacity: 1; transform: none; transition-delay: 0ms; }
body .wol-mcs.wol-mcs .wol-mcs__panel.is-revealed .wol-mcs__title   { opacity: 1; transform: none; transition-delay: 120ms; }
body .wol-mcs.wol-mcs .wol-mcs__panel.is-revealed .wol-mcs__desc    { opacity: 1; transform: none; transition-delay: 220ms; }
body .wol-mcs.wol-mcs .wol-mcs__panel.is-revealed .wol-mcs__cta     { opacity: 1; transform: none; transition-delay: 320ms; }
body .wol-mcs.wol-mcs .wol-mcs__panel.is-revealed .wol-mcs__media img { opacity: 1; transition-delay: 160ms; aspect-ratio: 8 / 5; }

body .wol-mcs.wol-mcs .wol-mcs__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    color: var(--color-granite);
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
}

body .wol-mcs.wol-mcs .wol-mcs__eyebrow::before {
    content: "►";
    font-size: 0.7em;
}

body .wol-mcs.wol-mcs .wol-mcs__title {
    font-family: var(--font-display);
    font-size: var(--font-display-m);
    font-weight: 400;
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-display-s);
    color: var(--color-carbon-black);
    margin: 0;
}

body .wol-mcs.wol-mcs .wol-mcs__desc {
    font-family: var(--font-sans);
    font-size: var(--font-pm);
    color: var(--color-grey);
    line-height: var(--lh-pl);
    margin: 0 0 var(--space-xs) 0;
    max-width: 44ch;
}

body .wol-mcs.wol-mcs .wol-mcs__cta {
    align-self: flex-start;
    margin-top: var(--space-3xs);
    background-color: var(--color-granite) !important;
    color: var(--color-white) !important;
}

body .wol-mcs.wol-mcs .wol-mcs__media {
    overflow: hidden;
    padding: var(--space-m);
}

body .wol-mcs.wol-mcs .wol-mcs__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    body .wol-mcs.wol-mcs .wol-mcs__inner {
        grid-template-columns: 1fr;
        flex-direction: column-reverse;
    }
    body .wol-mcs.wol-mcs .wol-mcs__media {
        aspect-ratio: 16 / 9;
        order: -1;
        padding: 0;
    }
    body .wol-mcs.wol-mcs .wol-mcs__content {
        padding: var(--space-m);
    }
}


/* ============================================================
   wol-bl — Brands loop stacking panels
   ============================================================ */
body .wol-bl.wol-bl {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

body .wol-bl.wol-bl .wol-bl__panel {
    position: sticky;
    top: calc(var(--wol-header-height, 80px) + var(--space-xs));
    background-color: var(--color-mint);
}

body .wol-bl.wol-bl .wol-bl__panel:nth-child(even) {
    background-color: var(--color-white);
}

body .wol-bl.wol-bl .wol-bl__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
body .wol-bl.wol-bl.wol-bl--brands .wol-bl__inner,
body .wol-bl.wol-bl.wol-bl--group .wol-bl__inner {
    grid-template-columns: 3fr 2fr;
}
body .wol-bl.wol-bl.wol-bl--brands .wol-bl__content,
body .wol-bl.wol-bl.wol-bl--group .wol-bl__content {
    justify-content: flex-start;
}
body .wol-bl.wol-bl.wol-bl--brands .wol-bl__logo,
body .wol-bl.wol-bl.wol-bl--group .wol-bl__logo {
    order: 10;
    margin-top: auto;
    padding-top: var(--space-m);
}

body .wol-bl.wol-bl .wol-bl__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-xl);
}

/* Animate-in initial states */
body .wol-bl.wol-bl .wol-bl__logo,
body .wol-bl.wol-bl .wol-bl__title,
body .wol-bl.wol-bl .wol-bl__desc,
body .wol-bl.wol-bl .wol-bl__chips,
body .wol-bl.wol-bl .wol-bl__cta {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
}
body .wol-bl.wol-bl .wol-bl__media img {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
}

/* Revealed states with stagger */
body .wol-bl.wol-bl .wol-bl__panel.is-revealed .wol-bl__logo   { opacity: 1; transform: none; transition-delay: 0ms; }
body .wol-bl.wol-bl .wol-bl__panel.is-revealed .wol-bl__title  { opacity: 1; transform: none; transition-delay: 100ms; }
body .wol-bl.wol-bl .wol-bl__panel.is-revealed .wol-bl__desc   { opacity: 1; transform: none; transition-delay: 200ms; }
body .wol-bl.wol-bl .wol-bl__panel.is-revealed .wol-bl__chips  { opacity: 1; transform: none; transition-delay: 280ms; }
body .wol-bl.wol-bl .wol-bl__panel.is-revealed .wol-bl__cta    { opacity: 1; transform: none; transition-delay: 320ms; margin-top: var(--space-xs) !important; }
body .wol-bl.wol-bl .wol-bl__panel.is-revealed .wol-bl__media img { opacity: 1; transition-delay: 160ms; max-height: 500px; }

/* Brands/group move the logo to the panel foot (order:10), so it must
   reveal LAST to stagger with its visual position. Left at the default
   0ms it fires before the title above it and looks out of sequence. */
body .wol-bl.wol-bl.wol-bl--brands .wol-bl__panel.is-revealed .wol-bl__logo,
body .wol-bl.wol-bl.wol-bl--group .wol-bl__panel.is-revealed .wol-bl__logo { transition-delay: 380ms; }

body .wol-bl.wol-bl .wol-bl__logo {
    display: block;
    margin-bottom: var(--space-4xs);
}
body .wol-bl.wol-bl .wol-bl__logo img {
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    object-position: left center;
    display: block;
}

body .wol-bl.wol-bl .wol-bl__title {
    font-family: var(--font-display);
    font-size: var(--font-display-m);
    font-weight: 400;
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-display-s);
    color: var(--color-carbon-black);
    margin: 0;
}
body .wol-bl.wol-bl .wol-bl__title a {
    color: inherit;
    text-decoration: none;
}
body .wol-bl.wol-bl .wol-bl__title a:hover {
    text-decoration: none;
}

body .wol-bl.wol-bl .wol-bl__desc {
    font-family: var(--font-sans);
    font-size: var(--font-pl);
    color: var(--color-grey);
    line-height: var(--lh-pl);
    margin: 0;
}

body .wol-bl.wol-bl .wol-bl__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4xs);
}
body .wol-bl.wol-bl .wol-bl__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: 999px;
    border: 1.5px solid var(--color-granite);
    background-color: transparent;
    color: var(--color-granite);
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
body .wol-bl.wol-bl .wol-bl__chip:hover {
    background-color: var(--color-granite);
    color: var(--color-white);
}

body .wol-bl.wol-bl .wol-bl__cta {
    align-self: flex-start;
    background-color: var(--color-granite) !important;
    color: var(--color-white) !important;
}

body .wol-bl.wol-bl .wol-bl__media {
    overflow: hidden;
    padding: var(--space-m);
}
/* Anchor must carry the height so the img's height:100% still resolves */
body .wol-bl.wol-bl .wol-bl__media-link {
    display: block;
    height: 100%;
}
body .wol-bl.wol-bl .wol-bl__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 768px) {
    /* No sticky stacking on mobile — the panels scroll as a normal list.
       The pinned-stack effect only reads well on wide screens; on a phone
       the panels pile up under the fixed header and overlap. */
    body .wol-bl.wol-bl .wol-bl__panel {
        position: relative;
        top: auto;
    }
    /* Single column on mobile. The brands/group variants set a more
       specific `3fr 2fr` (three ancestor classes), so the override has to
       match that specificity or the panels stay two-column and the text
       squeezes into a narrow, overflowing strip. */
    body .wol-bl.wol-bl .wol-bl__inner,
    body .wol-bl.wol-bl.wol-bl--brands .wol-bl__inner,
    body .wol-bl.wol-bl.wol-bl--group .wol-bl__inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    body .wol-bl.wol-bl .wol-bl__media {
        padding: 0;
        order: -1;
        align-self: start;
    }
    body .wol-bl.wol-bl .wol-bl__media-link {
        height: auto;
    }
    body .wol-bl.wol-bl .wol-bl__media img {
        aspect-ratio: 8 / 6;
        height: auto;
    }
    body .wol-bl.wol-bl .wol-bl__content {
        padding: var(--space-m) var(--space-m) var(--space-m);
    }
}


/* ============================================================
   wol-pl — Projects loop: filters + grid
   ============================================================ */
body .wol-pl-filters.wol-pl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-m);
}
body .wol-pl-filters.wol-pl-filters .wol-pl-filters__group {
    position: relative;
    display: inline-flex;
}
body .wol-pl-filters.wol-pl-filters .wol-pl-filters__select {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    padding: var(--space-3xs) var(--space-l) var(--space-3xs) var(--space-xs);
    border: 1.5px solid var(--color-sage);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%233A4D3E' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-xs) center;
    background-size: 10px 6px;
    color: var(--color-granite);
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-snap);
    border-radius: 0;
    min-width: 180px;
}
body .wol-pl-filters.wol-pl-filters .wol-pl-filters__select:hover {
    border-color: var(--color-granite);
}
body .wol-pl-filters.wol-pl-filters .wol-pl-filters__select:focus-visible {
    outline: none;
    border-color: var(--color-granite);
}
body .wol-pl-filters.wol-pl-filters .wol-pl-filters__select.has-value {
    border-color: var(--color-granite);
    background-color: var(--color-granite);
    color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23F7F7F7' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
body .wol-pl-filters.wol-pl-filters .wol-pl-filters__clear {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4xs);
    padding: var(--space-3xs) var(--space-xs);
    border: 1.5px solid var(--color-sage);
    background: transparent;
    color: var(--color-grey);
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
body .wol-pl-filters.wol-pl-filters .wol-pl-filters__clear:hover {
    border-color: var(--color-granite);
    color: var(--color-granite);
}
body .wol-pl-filters.wol-pl-filters .wol-pl-filters__clear[hidden] {
    display: none;
}

body .wol-pl.wol-pl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
}
body .wol-pl.wol-pl .wol-pl__card {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    min-height: clamp(360px, 38vw, 560px);
}
body .wol-pl.wol-pl .wol-pl__card.is-hidden {
    display: none;
}
body .wol-pl.wol-pl .wol-pl__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
body .wol-pl.wol-pl .wol-pl__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
body .wol-pl.wol-pl .wol-pl__card:hover .wol-pl__media img { transform: scale(1.04); }
body .wol-pl.wol-pl .wol-pl__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30,36,32,0.85) 0%, rgba(30,36,32,0.4) 35%, rgba(30,36,32,0) 60%);
    pointer-events: none;
    z-index: 1;
}
body .wol-pl.wol-pl .wol-pl__eyebrow {
    position: absolute;
    top: var(--space-s);
    left: var(--space-s);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: var(--space-3xs) var(--space-2xs);
    border: 1px solid rgba(247,247,247,0.4);
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    color: var(--color-white);
    text-transform: uppercase;
}
body .wol-pl.wol-pl .wol-pl__content {
    position: absolute;
    left: var(--space-s);
    right: calc(var(--space-s) + 60px);
    bottom: var(--space-s);
    z-index: 2;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}
body .wol-pl.wol-pl .wol-pl__title {
    font-family: var(--font-display);
    font-size: var(--font-display-s);
    color: var(--color-white);
    margin: 0;
    line-height: var(--lh-display-s);
}
body .wol-pl.wol-pl .wol-pl__desc {
    font-family: var(--font-sans);
    font-size: var(--font-pm);
    color: rgba(247,247,247,0.85);
    margin: 0;
    line-height: var(--lh-pm);
}
body .wol-pl.wol-pl .wol-pl__arrow {
    position: absolute;
    right: var(--space-s);
    bottom: var(--space-s);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--color-clay);
    color: var(--color-white);
    transition: background-color var(--dur-fast) var(--ease-snap);
}
body .wol-pl.wol-pl .wol-pl__arrow svg { width: 18px; height: 18px; display: block; }
body .wol-pl.wol-pl .wol-pl__card:hover .wol-pl__arrow {
    background-color: var(--color-accent);
    color: var(--color-carbon-black);
}

@media (max-width: 1024px) {
    body .wol-pl.wol-pl { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    body .wol-pl.wol-pl { grid-template-columns: 1fr; }
    body .wol-pl.wol-pl .wol-pl__card { min-height: clamp(280px, 70vw, 400px); }
}


/* ============================================================
   wol-il-filters — Insights loop category filters
   ============================================================ */
body .wol-il-filters.wol-il-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4xs);
    margin-bottom: var(--space-m);
}
body .wol-il-filters.wol-il-filters .wol-il-filters__btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: 999px;
    border: 1.5px solid var(--color-sage);
    background-color: transparent;
    color: var(--color-granite);
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
body .wol-il-filters.wol-il-filters .wol-il-filters__btn:hover {
    border-color: var(--color-granite);
}
body .wol-il-filters.wol-il-filters .wol-il-filters__btn.is-active {
    background-color: var(--color-granite);
    border-color: var(--color-granite);
    color: var(--color-white);
}
body .wol-cf.wol-cf .wol-cf__card.is-hidden {
    display: none;
}


/* ============================================================
   wol-faq — Market FAQ accordion
   ============================================================ */
body .wol-faq.wol-faq {
    display: block;
    width: 100%;
}
body .wol-faq.wol-faq .wol-faq__item {
    display: block;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid var(--color-sage);
}
body .wol-faq.wol-faq .wol-faq__item:first-child {
    border-top: 1px solid var(--color-sage);
}
body .wol-faq.wol-faq .wol-faq__question {
    display: grid;
    grid-template-columns: 1fr 20px;
    align-items: center;
    gap: var(--space-m);
    width: 100%;
    padding: var(--space-xs) 0;
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    font-size: var(--font-s);
    font-weight: 500;
    color: var(--color-carbon-black);
    transition: color var(--dur-fast) var(--ease-snap);
}
body .wol-faq.wol-faq .wol-faq__question:focus-visible {
    outline: none;
}
body .wol-faq.wol-faq .wol-faq__question:hover {
    color: var(--color-granite);
}
body .wol-faq.wol-faq .wol-faq__question > span:first-child {
    word-break: break-word;
}
body .wol-faq.wol-faq .wol-faq__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    position: relative;
}
body .wol-faq.wol-faq .wol-faq__icon::before,
body .wol-faq.wol-faq .wol-faq__icon::after {
    content: '';
    position: absolute;
    background-color: currentColor;
    transition: transform var(--dur-fast) var(--ease-snap), opacity var(--dur-fast) var(--ease-snap);
}
body .wol-faq.wol-faq .wol-faq__icon::before {
    width: 100%; height: 1px;
    top: 50%; left: 0;
    transform: translateY(-50%);
}
body .wol-faq.wol-faq .wol-faq__icon::after {
    width: 1px; height: 100%;
    top: 0; left: 50%;
    transform: translateX(-50%);
}
body .wol-faq.wol-faq .wol-faq__item.is-open .wol-faq__icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}
body .wol-faq.wol-faq .wol-faq__answer {
    height: 0;
    overflow: hidden;
    transition: height var(--dur-normal) var(--ease-out);
}
body .wol-faq.wol-faq .wol-faq__answer-inner {
    font-family: var(--font-sans);
    font-size: var(--font-pm);
    color: var(--color-grey);
    line-height: var(--lh-pm);
}
body .wol-faq.wol-faq .wol-faq__item.is-open .wol-faq__answer-inner {
    padding-bottom: var(--space-s);
}
body .wol-faq.wol-faq .wol-faq__answer-inner p { margin: 0; }


/* ============================================================
   9. COMING SOON TEMPLATE — template-coming-soon.php
   ============================================================ */
body .wol-cs.wol-cs {
    background-color: var(--bg-light);
    /* .wol-header is position:fixed — clear it before the eyebrow starts */
    padding-block: calc(var(--wol-header-height, 80px) + var(--space-l)) var(--space-2xl);
    padding-inline: var(--space-s);
}
body .wol-cs.wol-cs .wol-cs__inner {
    max-width: 1040px;
    margin-inline: auto;
    text-align: center;
}
body .wol-cs.wol-cs .wol-cs__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-sage);
    margin: 0 0 var(--space-3xs) 0;
}
body .wol-cs.wol-cs .wol-cs__title {
    font-family: var(--font-display);
    font-size: var(--font-display-xl);
    line-height: var(--lh-display-xl);
    letter-spacing: var(--ls-tight);
    font-weight: 400;
    color: var(--text-on-light);
    max-width: 16ch;
    margin: 0 auto;
    text-wrap: balance;
}
body .wol-cs.wol-cs .wol-cs__media {
    margin-top: var(--space-l);
    overflow: hidden;
    background-color: var(--color-mint);
    aspect-ratio: 16 / 9;
}
body .wol-cs.wol-cs .wol-cs__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    body .wol-cs.wol-cs .wol-cs__media { aspect-ratio: 4 / 3; }
}


/* ============================================================
   wol-bd — Brochure sticky card, modal form, thank you block
   ============================================================ */

/* --- Sticky card --------------------------------------- */
body .wol-bd.wol-bd {
    position: fixed;
    right: var(--space-2xs);
    /* --wol-kb is the height of the on-screen keyboard, set by
       components.js from the VisualViewport API. iOS leaves fixed
       elements pinned to the layout viewport, so without this the
       keyboard slides straight over the open form. */
    bottom: calc(var(--space-2xs) + var(--wol-kb, 0px));
    z-index: 998;
    width: min(340px, calc(100vw - var(--space-2xs) * 2));
}

body .wol-bd.wol-bd .wol-bd__card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* No gap: .wol-bd__expand is a zero-height flex child when collapsed,
       so a gap here still renders below the row and makes the bottom
       padding read as double the top. The form carries its own
       padding-top for the expanded state instead. */
    gap: 0;
    padding: var(--space-2xs);
    background-color: var(--color-background);
    border: 1px solid var(--color-stone);
    border-radius: var(--radius-m);
    box-shadow: 0 6px 28px rgba(30, 36, 32, 0.14);
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity var(--dur-normal) var(--ease-out),
        transform var(--dur-normal) var(--ease-out);
}
body .wol-bd.wol-bd.is-visible .wol-bd__card {
    opacity: 1;
    transform: none;
}

body .wol-bd.wol-bd .wol-bd__row {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

body .wol-bd.wol-bd .wol-bd__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

body .wol-bd.wol-bd .wol-bd__media {
    flex: 0 0 auto;
    display: block;
    width: 88px;
    border-radius: var(--radius-s);
    overflow: hidden;
}
body .wol-bd.wol-bd .wol-bd__media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

body .wol-bd.wol-bd .wol-bd__heading {
    display: block;
    margin: 0;
    padding-right: var(--space-2xs);
    font-family: var(--font-sans);
    font-size: var(--font-s);
    font-weight: 600;
    line-height: var(--lh-m);
    letter-spacing: var(--ls-tight);
    color: var(--color-carbon-black);
    text-wrap: balance;
}

/* Naked CTA — text and arrow only, no pill, so the card stays compact.
   Base button styles land with !important, so these have to as well. */
body .wol-bd.wol-bd .wol-bd__cta {
    width: auto;
    padding: 0 !important;
    background-color: transparent !important;
    color: var(--color-granite) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: var(--font-pm) !important;
    font-weight: 700 !important;
    overflow: visible;
    transition: color var(--dur-fast) var(--ease-snap);
}
body .wol-bd.wol-bd .wol-bd__cta:hover {
    color: var(--color-carbon-black) !important;
}
/* Base buttons space text from arrow with gap + the arrow's own margin.
   Pull both in — at this size the default reads as a gap, not a pair. */
body .wol-bd.wol-bd .wol-bd__cta {
    gap: 0 !important;
}
body .wol-bd.wol-bd .wol-bd__cta .wol-btn-arrow {
    margin-left: 1px;
}

body .wol-bd.wol-bd .wol-bd__dismiss {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-stone);
    border-radius: 999px;
    background-color: var(--color-background);
    color: var(--color-grey);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
body .wol-bd.wol-bd .wol-bd__dismiss:hover {
    color: var(--color-carbon-black);
    border-color: var(--color-granite);
}
body .wol-bd.wol-bd .wol-bd__dismiss svg {
    width: 12px;
    height: 12px;
    fill: none;
}

@media (max-width: 600px) {
    body .wol-bd.wol-bd {
        left: var(--space-3xs);
        right: var(--space-3xs);
        bottom: calc(var(--space-3xs) + var(--wol-kb, 0px));
        width: auto;
    }
    /* With the keyboard up there is very little room — let the card
       scroll internally rather than run off the top of the screen. */
    body .wol-bd.wol-bd .wol-bd__card {
        max-height: calc(100dvh - var(--wol-kb, 0px) - var(--space-m));
        overflow-y: auto;
    }
}

/* --- Expanding panel ------------------------------------ */
/* 0fr -> 1fr animates real height without hard-coding one */
body .wol-bd.wol-bd .wol-bd__expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-normal) var(--ease-out);
}
body .wol-bd.wol-bd.is-expanded .wol-bd__expand {
    grid-template-rows: 1fr;
}
body .wol-bd.wol-bd .wol-bd__expand-inner {
    overflow: hidden;
    min-height: 0;
}

/* The CTA hands over to the form's own submit once open */
body .wol-bd.wol-bd.is-expanded .wol-bd__cta {
    display: none !important;
}

/* --- Form ----------------------------------------------- */
body .wol-bd-form.wol-bd-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4xs);
    padding-top: var(--space-3xs);
}

body .wol-bd-form .wol-bd-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
body .wol-bd-form .wol-bd-field label {
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 600;
    letter-spacing: var(--ls-tight);
    color: var(--color-carbon-black);
}
body .wol-bd-form .wol-bd-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--color-stone);
    border-radius: var(--radius-s);
    background-color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    color: var(--color-carbon-black);
    transition: border-color var(--dur-fast) var(--ease-snap);
}
body .wol-bd-form .wol-bd-field input:focus {
    outline: none;
    border-color: var(--color-granite);
}
body .wol-bd-form .wol-bd-field input.has-error {
    border-color: #A6483C;
}

body .wol-bd-form .wol-bd-consent {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 2px;
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    line-height: 1.3;
    color: var(--color-grey);
    cursor: pointer;
}

/* Toggle — the native checkbox restyled, so the input stays the input
   and label/required/focus behaviour all keep working */
body .wol-bd-form .wol-bd-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 17px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-stone);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-snap);
}
body .wol-bd-form .wol-bd-consent input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--color-white);
    transition: transform var(--dur-fast) var(--ease-snap);
}
body .wol-bd-form .wol-bd-consent input[type="checkbox"]:checked {
    background-color: var(--color-granite);
}
body .wol-bd-form .wol-bd-consent input[type="checkbox"]:checked::after {
    transform: translateX(13px);
}
/* base.css strips focus rings globally with !important — put one back,
   or the toggle becomes unreachable-looking for keyboard users */
body .wol-bd-form .wol-bd-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-granite) !important;
    outline-offset: 2px;
}
body .wol-bd-form .wol-bd-consent input[type="checkbox"].has-error {
    background-color: #A6483C;
}

/* Honeypot — off-canvas rather than display:none, which some bots skip */
body .wol-bd-form .wol-bd-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body .wol-bd-form .wol-bd-form__error {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    line-height: 1.3;
    color: #A6483C;
}

/* Deliberately not a .btn — a compact square-ish action, not a hero pill */
body .wol-bd-form .wol-bd-form__submit {
    align-self: stretch;
    margin-top: 4px;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radius-s);
    background-color: var(--color-granite);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    font-weight: 700;
    letter-spacing: var(--ls-tight);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-snap);
}
body .wol-bd-form .wol-bd-form__submit:hover,
body .wol-bd-form .wol-bd-form__submit:focus {
    background-color: var(--color-carbon-black);
    border: 0;
    border-radius: var(--radius-s);
}
body .wol-bd-form .wol-bd-form__submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* --- Thank you block — centred, page scale -------------- */
body .wol-bd-thanks.wol-bd-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-s);
}
body .wol-bd-thanks.wol-bd-thanks .wol-bd-thanks__cover {
    display: block;
    width: 150px;
    height: auto;
    border-radius: var(--radius-s);
    box-shadow: 0 8px 30px rgba(30, 36, 32, 0.14);
}
body .wol-bd-thanks.wol-bd-thanks .wol-bd-thanks__body {
    max-width: 44ch;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-pm);
    line-height: var(--lh-pm);
    color: var(--color-grey);
    text-wrap: pretty;
}
body .wol-bd-thanks.wol-bd-thanks .btn {
    background-color: var(--color-granite) !important;
    color: var(--color-white) !important;
}

@media (prefers-reduced-motion: reduce) {
    body .wol-bd.wol-bd .wol-bd__card,
    body .wol-bd.wol-bd .wol-bd__expand {
        transition: none;
    }
}


/* --- Mailing list variant -------------------------------- */
/* No cover image, so the text block runs the full card width */
body .wol-bd.wol-bd--mailing .wol-bd__text {
    gap: 3px;
}
body .wol-bd.wol-bd--mailing .wol-bd__heading {
    padding-right: var(--space-s);
}
body .wol-bd.wol-bd--mailing .wol-bd__intro {
    display: block;
    padding-right: var(--space-3xs);
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    line-height: 1.35;
    color: var(--color-grey);
}

/* Elementor buttons wired to either form should read as clickable
   even though they are not links */
body .wol-mailing,
body .wol-mailing .elementor-button,
body .wol-brochure,
body .wol-brochure .elementor-button {
    cursor: pointer;
}


/* ============================================================
   wol-ty — Thank You template (template-thank-you.php)
   Deliberately the same shape as .wol-cs
   ============================================================ */
body .wol-ty.wol-ty {
    background-color: var(--bg-light);
    /* .wol-header is position:fixed — clear it before the eyebrow starts */
    padding-block: calc(var(--wol-header-height, 80px) + var(--space-l)) var(--space-2xl);
    padding-inline: var(--space-s);
}
body .wol-ty.wol-ty .wol-ty__inner {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}
body .wol-ty.wol-ty .wol-ty__eyebrow {
    margin: 0 0 var(--space-3xs) 0;
    font-family: var(--font-sans);
    font-size: var(--font-ps);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-sage);
}
body .wol-ty.wol-ty .wol-ty__title {
    max-width: 18ch;
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: var(--font-display-xl);
    line-height: var(--lh-display-xl);
    letter-spacing: var(--ls-tight);
    font-weight: 400;
    color: var(--text-on-light);
    text-wrap: balance;
}
body .wol-ty.wol-ty .wol-ty__body {
    margin-top: var(--space-xs);
}
body .wol-ty.wol-ty .wol-ty__body > p {
    max-width: 48ch;
    margin: 0 auto var(--space-2xs);
    font-family: var(--font-sans);
    font-size: var(--font-pl);
    line-height: var(--lh-pl);
    color: var(--color-grey);
    text-wrap: pretty;
}
body .wol-ty.wol-ty .wol-ty__body > p:last-child { margin-bottom: 0; }


/* ============================================================
   Generic page blocks — client-editable replacements for
   Elementor widgets that cannot take a dynamic tag.
   Values below mirror what the original widgets rendered, so
   swapping them out is visually a no-op.
   ============================================================ */

/* --- wol-il — diamond bullet list (was: icon-list) ------- */
body .wol-il.wol-il {
    list-style: none;
    margin: 0;
    padding: 0;
}
body .wol-il.wol-il .wol-il__item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
body .wol-il.wol-il .wol-il__item:not(:last-child)  { padding-block-end: 4px; }
body .wol-il.wol-il .wol-il__item:not(:first-child) { margin-block-start: 4px; }

body .wol-il.wol-il .wol-il__icon {
    flex: 0 0 14px;
    display: inline-flex;
}
body .wol-il.wol-il .wol-il__icon img {
    display: block;
    width: 14px;
    height: 14px;
    max-width: none;
}
body .wol-il.wol-il .wol-il__text {
    font-family: var(--font-sans);
    font-size: var(--font-s);
    font-weight: 500;
    line-height: var(--lh-r);
    letter-spacing: var(--ls-tight);
}

@media (max-width: 767px) {
    body .wol-il.wol-il .wol-il__item { align-items: flex-start; }
    body .wol-il.wol-il .wol-il__item:not(:last-child)  { padding-block-end: 7px; }
    body .wol-il.wol-il .wol-il__item:not(:first-child) { margin-block-start: 7px; }
    body .wol-il.wol-il .wol-il__icon { flex-basis: 20px; }
    body .wol-il.wol-il .wol-il__icon img { width: 20px; height: 20px; }
    body .wol-il.wol-il .wol-il__icon { margin-top: 5px; }
}

/* --- wol-kv — label · dotted leader · value (was: price-list) --- */
/* Width and outer margin belong to the Elementor wrapper the shortcode
   sits in — setting them here too shrinks the row to 64% of 64% and
   squeezes the dotted leader out. */
body .wol-kv.wol-kv {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
body .wol-kv.wol-kv .wol-kv__item {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--color-granite);
    font-family: var(--font-sans);
    font-size: var(--font-s);
    line-height: var(--lh-r);
    letter-spacing: var(--ls-tight);
}
body .wol-kv.wol-kv .wol-kv__item:not(:last-child) { margin-bottom: 6px; }

body .wol-kv.wol-kv .wol-kv__label {
    max-width: 80%;
    font-weight: 600;
    white-space: nowrap;
}
body .wol-kv.wol-kv .wol-kv__leader {
    flex-grow: 1;
    height: 0;
    margin-inline: 10px;
    border-bottom: 2px dotted currentColor;
}
body .wol-kv.wol-kv .wol-kv__value {
    font-weight: 300;
    white-space: nowrap;
}



/* --- wol-ss — cross-fading slideshow (was: background slideshow) --- */
/* Elementor wraps a shortcode in two divs before our markup, and those
   wrappers are the container's actual flex children. Without stretching
   them the slideshow has nothing to fill and collapses to zero height.

   Targeted via :has() on the DOM structure rather than a CSS class on the
   widget — a class added in the Elementor data gets stripped whenever the
   client re-saves the page in the editor, which silently broke this once.
   :has() needs no marker, so it survives any re-save. .wol-ss-host is kept
   as a fallback for the rare browser without :has(). */
body .elementor-widget-shortcode:has(> .elementor-shortcode > .wol-ss),
body .wol-ss-host.wol-ss-host {
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: inherit;
}
body .elementor-widget-shortcode:has(> .elementor-shortcode > .wol-ss) > .elementor-shortcode,
body .wol-ss-host.wol-ss-host > .elementor-shortcode {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: inherit;
}

body .wol-ss.wol-ss {
    position: relative;
    align-self: stretch;
    flex: 1 1 auto;
    width: 100%;
    min-height: inherit;
    overflow: hidden;
}
body .wol-ss.wol-ss .wol-ss__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
}
body .wol-ss.wol-ss .wol-ss__slide.is-active {
    opacity: 1;
}
body .wol-ss.wol-ss .wol-ss__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* One slide only — no need to stack or fade */
body .wol-ss.wol-ss .wol-ss__slide:only-child {
    position: relative;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    body .wol-ss.wol-ss .wol-ss__slide { transition: none; }
}


/* ============================================================
   BLOG / ARTICLE CONTENT — .post-con (theme-post-content widget)
   Styles the body of Insights and any post rendered through the
   Elementor "Post Content" widget carrying the class `post-con`.
   Everything is scoped to .post-con so it never leaks into the
   page-builder layouts.
   ============================================================ */
body .post-con .elementor-widget-container {
    --wol-post-measure: 68ch;
    font-family: var(--font-sans);
    font-size: var(--font-pl);
    line-height: var(--lh-pl);
    color: var(--color-carbon-black);
}

/* Constrain line length for readability; media can break out wider */
body .post-con .elementor-widget-container > * {
    max-width: var(--wol-post-measure);
    margin-inline: 0;
}

/* --- Paragraphs --------------------------------------- */
body .post-con .elementor-widget-container p {
    margin: 0 0 var(--space-s);
    color: var(--color-grey);
}
body .post-con .elementor-widget-container > *:last-child { margin-bottom: 0; }

/* Lead-in paragraph */
body .post-con .elementor-widget-container .wol-post__intro {
    font-size: var(--font-l);
    line-height: var(--lh-l);
    color: var(--color-carbon-black);
    margin-bottom: var(--space-m);
}

/* --- Headings ----------------------------------------- */
body .post-con .elementor-widget-container h2,
body .post-con .elementor-widget-container h3,
body .post-con .elementor-widget-container h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-carbon-black);
    letter-spacing: var(--ls-tight);
    text-wrap: balance;
}
body .post-con .elementor-widget-container h2 {
    font-size: var(--font-display-s);
    line-height: var(--lh-display-s);
    margin: var(--space-l) 0 var(--space-xs);
}
body .post-con .elementor-widget-container h3 {
    font-size: var(--font-display-xs);
    line-height: var(--lh-display-xs);
    margin: var(--space-m) 0 var(--space-2xs);
}
body .post-con .elementor-widget-container h4 {
    font-family: var(--font-sans);
    font-size: var(--font-m);
    font-weight: 600;
    line-height: var(--lh-m);
    margin: var(--space-m) 0 var(--space-2xs);
}
/* No top margin when a heading opens the article */
body .post-con .elementor-widget-container > :first-child { margin-top: 0; }

/* --- Lists -------------------------------------------- */
body .post-con .elementor-widget-container ul,
body .post-con .elementor-widget-container ol {
    margin: 0 0 var(--space-s);
    padding-left: 0;
    list-style: none;
    color: var(--color-grey);
}
body .post-con .elementor-widget-container li {
    position: relative;
    padding-left: var(--space-s);
    margin-bottom: var(--space-2xs);
    line-height: var(--lh-pl);
}
body .post-con .elementor-widget-container li:last-child { margin-bottom: 0; }
/* Unordered — sage diamond marker echoing the brand icon lists */
body .post-con .elementor-widget-container ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 7px;
    height: 7px;
    background-color: var(--color-sage);
    transform: rotate(45deg);
}
/* Ordered — counter */
body .post-con .elementor-widget-container ol { counter-reset: wol-post; }
body .post-con .elementor-widget-container ol > li { counter-increment: wol-post; }
body .post-con .elementor-widget-container ol > li::before {
    content: counter(wol-post) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--color-granite);
}
body .post-con .elementor-widget-container li > ul,
body .post-con .elementor-widget-container li > ol {
    margin-top: var(--space-2xs);
    margin-bottom: 0;
}

/* --- Blockquote --------------------------------------- */
body .post-con .elementor-widget-container blockquote {
    margin: var(--space-l) 0;
    padding: 0 0 0 var(--space-s);
    border-left: 3px solid var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--font-display-xs);
    line-height: var(--lh-display-s);
    font-weight: 400;
    letter-spacing: var(--ls-tight);
    color: var(--color-carbon-black);
}
body .post-con .elementor-widget-container blockquote p { color: inherit; }
body .post-con .elementor-widget-container blockquote cite {
    display: block;
    margin-top: var(--space-2xs);
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    font-style: normal;
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-grey);
}

/* --- Inline ------------------------------------------- */
body .post-con .elementor-widget-container strong { font-weight: 700; color: var(--color-carbon-black); }
body .post-con .elementor-widget-container em { font-style: italic; }
body .post-con .elementor-widget-container a {
    color: var(--color-granite);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color-sage);
    transition: text-decoration-color var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
body .post-con .elementor-widget-container a:hover {
    color: var(--color-carbon-black);
    text-decoration-color: var(--color-carbon-black);
}

/* --- Media -------------------------------------------- */
body .post-con .elementor-widget-container figure,
body .post-con .elementor-widget-container img {
    max-width: 100%;
}
body .post-con .elementor-widget-container figure {
    margin: var(--space-l) 0;
}
body .post-con .elementor-widget-container img {
    display: block;
    height: auto;
    border-radius: var(--radius-s);
}
body .post-con .elementor-widget-container figcaption {
    margin-top: var(--space-3xs);
    font-family: var(--font-sans);
    font-size: var(--font-pr);
    color: var(--color-grey);
    text-align: left;
}
/* Wide/full-width images break the measure */
body .post-con .elementor-widget-container .alignwide,
body .post-con .elementor-widget-container .alignfull,
body .post-con .elementor-widget-container figure.wp-block-image.alignwide,
body .post-con .elementor-widget-container figure.wp-block-image.alignfull {
    max-width: none;
}

/* --- Divider ------------------------------------------ */
body .post-con .elementor-widget-container hr {
    margin: var(--space-l) 0;
    border: 0;
    border-top: 1px solid var(--color-stone);
    max-width: var(--wol-post-measure);
}

@media (max-width: 768px) {
    body .post-con .elementor-widget-container .wol-post__intro { font-size: var(--font-m); }
}