/* =========================================================
   Create Balance — overrides (layout + aesthetic only)
   Prefer tokens in cb-brand.css wherever possible.
========================================================= */

/* =========================================================
   Create Balance Tokens / small site tweaks
========================================================= */

:root {
    --ps-surface-muted: #f7f5f6;
    --cb-fx-pink: var(--cb-pink);
    scroll-padding-top: 96px; /* match header height (92px + a bit) */
}

@media (max-width: 576px) {
    :root {
        scroll-padding-top: 78px;
    }
}

img.ps-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: initial; /* optional */
}

    img.ps-image.ps-image--natural {
        height: auto !important;
        object-fit: unset !important;
    }




/* =========================================================
   Header: white, burger always, centered logo
========================================================= */

.ps-header {
    background: var(--ps-header-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--ps-ink, #111) 10%, transparent);
}

    .ps-header .ps-navbar .container {
        position: relative;
        min-height: 92px; /* airy CB header */
    }

    /* Center the logo */
    .ps-header .ps-navbar-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
    }

    /* Bigger logo (CB) */
    .ps-header .site-logo {
        height: clamp(40px, 6vw, 56px); /* mobile → desktop */
        width: auto;
        max-width: 100%;
    }

    /* Burger always visible */
    .ps-header .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 0;
        padding: .5rem;
        margin-left: .25rem;
    }

    /* Hide desktop nav — CB is always burger */
    .ps-header .navbar-collapse,
    .ps-header .ps-navbar-collapse {
        display: none !important;
    }

@media (max-width: 576px) {
    .ps-header .ps-navbar .container {
        min-height: 74px;
    }

    .ps-header .site-logo {
        height: 44px;
    }
}

/* =========================================================
   Header: sticky
========================================================= */

.ps-header {
    position: sticky;
    top: 0;
    z-index: 1030; /* above content; below modals/offcanvas (1055) */
    box-shadow: 0 0 0 rgba(0,0,0,0); /* default */
}

/*@supports (position: sticky) {
    .ps-header {
        box-shadow: 0 6px 18px color-mix(in srgb, var(--ps-ink, #111) 10%, transparent);
    }
}*/

@supports (position: sticky) {
    .ps-header {
        box-shadow: 0 2px 8px color-mix(in srgb, var(--ps-ink, #111) 6%, transparent);
    }
}

/*@supports (position: sticky) {
    .ps-header {
        box-shadow: none;
        border-bottom: 1px solid color-mix( in srgb, var(--ps-ink, #111) 8%, transparent );
    }
}*/





/* =========================================================
   CB: burger icon - remove invert + force strong contrast
========================================================= */

.ps-header .ps-navbar .navbar-toggler-icon {
    filter: none !important; /* <-- key */
    opacity: 1 !important;
    background-size: 100% 100%;
}

/* Keep / set the SVG on the navbar (Bootstrap reads it here) */
.ps-header .ps-navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =========================================================
   Offcanvas: clean white panel, black text, pink active
========================================================= */

.ps-offcanvas {
    background: #fff;
    color: var(--ps-ink, #111);
}

    .ps-offcanvas .ps-nav-link {
        color: var(--ps-ink, #111) !important;
        font-weight: 650;
        text-decoration: none;
    }

        .ps-offcanvas .ps-nav-link:hover,
        .ps-offcanvas .ps-nav-link:focus-visible,
        .ps-offcanvas .ps-nav-link.active {
            color: var(--ps-accent) !important;
        }

        /* Keep any “button-like” nav items simple */
        .ps-offcanvas .ps-nav-link.ps-nav-btn.ps-btn {
            background: transparent;
            border: 2px solid var(--ps-ink, #111);
            color: var(--ps-ink, #111) !important;
        }

            .ps-offcanvas .ps-nav-link.ps-nav-btn.ps-btn:hover,
            .ps-offcanvas .ps-nav-link.ps-nav-btn.ps-btn:focus-visible {
                border-color: var(--ps-accent);
                color: var(--ps-accent) !important;
            }

/* =========================================================
   CB Offcanvas nav links — match createbalance.com sizing
========================================================= */

/* Target links inside the burger/offcanvas menu */
.ps-header .offcanvas .nav-link,
.ps-header .offcanvas a.nav-link {
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    display: block;
    padding: 8px 0;
    height: 45px; /* matches your inspect */
    width: 100%;
    color: var(--ps-ink, #000);
    background: transparent;
    text-decoration: none;
    border-bottom: 1px dotted rgb(169, 170, 173);
}

/* Optional: last item usually has no divider */
.ps-header .offcanvas .nav-item:last-child .nav-link {
    border-bottom: 0;
}

/* Hover/focus states (minimal like live) */
.ps-header .offcanvas .nav-link:hover,
.ps-header .offcanvas .nav-link:focus-visible {
    color: var(--ps-ink, #000);
    text-decoration: none;
}

/* =========================================================
   Footer: black with pink links (CB look)
========================================================= */

.ps-footer {
    background: #000;
    color: #fff;
}

    .ps-footer a,
    .ps-footer-link {
        color: var(--ps-accent);
        text-decoration: none;
        font-weight: 600;
    }

        .ps-footer a:hover,
        .ps-footer a:focus-visible,
        .ps-footer-link:hover,
        .ps-footer-link:focus-visible {
            color: #fff;
            text-decoration: none;
        }

/* =========================================================
   CB Typography — body font
========================================================= */

body {
    font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 300; /* poppins light */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 1.0rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 600; /* poppins semi bold */
    letter-spacing: 0.000em;
}

/* =========================================================
   CB override: treat accent sections as dark
========================================================= */

.ps-section.ps-bg-accent {
    --ps-on-bg-text: var(--ps-ink-contrast, #fff);
    --ps-on-bg-link: #ffffff;
    --ps-on-bg-link-hover: #ffffff;
}

/* =========================================================
   RTE display styles (tuned)
========================================================= */

.ps-rte .rte-display-1 {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 1.08;
    font-weight: 700;
    margin: 0 0 1.65rem;
    letter-spacing: 0.00em;
}

.ps-rte .rte-display-2 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: 0.000em;
    margin: 0 0 0.6rem;
}

.ps-rte h1 + .rte-display-1,
.ps-rte h2 + .rte-display-2 {
    margin-top: -0.25rem;
}

/* RTE: ensure bold actually renders */
.ps-rte strong,
.ps-rte b {
    font-weight: 700; /* or 600 if that matches your brand weight */
}

.ps-rte a {

}

    .ps-rte a:hover {
        text-decoration: underline;
        color: var(--ps-link) ;
        /*color: var(--ps-ink);*/
    }


    /* =========================================================
   Create Balance: Pink wash + slanted band effects
   (brand-specific helpers)
========================================================= */
    /* ---------- Image wash (wrapper required) ---------- */
    .cb-imgwash {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: inherit; /* plays nicely if card has radius */
    }

    .cb-imgwash > img,
    .cb-imgwash > picture,
    .cb-imgwash > picture > img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Pink overlay */
    .cb-imgwash::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--cb-imgwash-color, var(--cb-fx-pink));
        opacity: var(--cb-imgwash-opacity, .55);
        mix-blend-mode: var(--cb-imgwash-blend, multiply);
        pointer-events: none;
    }

    /* Optional diagonal band */
    .cb-imgwash.cb-band::before {
        content: "";
        position: absolute;
        inset: -20%;
        background: linear-gradient( var(--cb-band-angle, 135deg), transparent 38%, var(--cb-band-color, var(--cb-fx-pink)) 38%, var(--cb-band-color, var(--cb-fx-pink)) 62%, transparent 62% );
        opacity: var(--cb-band-opacity, .85);
        mix-blend-mode: var(--cb-band-blend, multiply);
        pointer-events: none;
    }



/* =========================================================
   Create Balance – slashed text (LG/XL only)
   - Tablet/mobile: renders as normal text (no effect)
========================================================= */

/* Default: no effect */
.cb-slashed-text {
    color: currentColor;
}

/* Enable effect on LG+ only */
@media (min-width: 992px) {
    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
        .cb-slashed-text {
            --cb-slash-a: var(--cb-pink, #ff00b8);
            --cb-slash-b: #000;
            --cb-slash-angle: 135deg;
            background-image: linear-gradient( var(--cb-slash-angle), var(--cb-slash-a) 0%, var(--cb-slash-a) 50%, var(--cb-slash-b) 50%, var(--cb-slash-b) 100% );
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }
    }
}






/* ---------- Text: diagonal highlight band behind normal text ---------- */
.cb-textband {
    position: relative;
    display: inline;
    --cb-bandhi-color: var(--cb-fx-pink);
    --cb-bandhi-angle: 135deg;
    --cb-bandhi-opacity: .35;
    --cb-bandhi-pad-y: .12em;
    --cb-bandhi-pad-x: .25em;
}

    .cb-textband::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: calc(-1 * var(--cb-bandhi-pad-x));
        right: calc(-1 * var(--cb-bandhi-pad-x));
        top: calc(-1 * var(--cb-bandhi-pad-y));
        bottom: calc(-1 * var(--cb-bandhi-pad-y));
        background: linear-gradient( var(--cb-bandhi-angle), transparent 35%, var(--cb-bandhi-color) 35%, var(--cb-bandhi-color) 65%, transparent 65% );
        opacity: var(--cb-bandhi-opacity);
        border-radius: .2em;
        pointer-events: none;
    }




/* =========================================================
   Buttons (token-driven)
========================================================= */

/* Make sure anchor buttons don't inherit link colours */
a.ps-btn {
    color: inherit;
    text-decoration: none;
}

.ps-btn--primary {
    background-color: var(--ps-btn-primary-bg);
    color: var(--ps-btn-primary-text);
}

    .ps-btn--primary:hover,
    .ps-btn--primary:focus {
        background-color: var(--ps-btn-primary-hover-bg);
        color: var(--ps-btn-primary-hover-text);
    }

.ps-btn--secondary {
    background-color: var(--ps-btn-secondary-bg);
    color: var(--ps-btn-secondary-text);
}

    .ps-btn--secondary:hover,
    .ps-btn--secondary:focus {
        background-color: var(--ps-btn-secondary-hover-bg);
        color: var(--ps-btn-secondary-hover-text);
    }

/* ---------------------------------------------------------
   RTE button links: force button colours to win vs link rules
   + support both "old bad markup" and "new wrapper markup"
   --------------------------------------------------------- */

/* A) Ensure actual anchor buttons always keep their intended text colour */
a.ps-btn,
a.ps-btn:link,
a.ps-btn:visited {
    text-decoration: none;
}

    /* Primary anchor states */
    a.ps-btn.ps-btn--primary,
    a.ps-btn.ps-btn--primary:link,
    a.ps-btn.ps-btn--primary:visited {
        color: var(--ps-btn-primary-text) !important;
    }

        a.ps-btn.ps-btn--primary:hover,
        a.ps-btn.ps-btn--primary:focus,
        a.ps-btn.ps-btn--primary:focus-visible {
            color: var(--ps-btn-primary-hover-text) !important;
        }

    /* Secondary anchor states */
    a.ps-btn.ps-btn--secondary,
    a.ps-btn.ps-btn--secondary:link,
    a.ps-btn.ps-btn--secondary:visited {
        color: var(--ps-btn-secondary-text) !important;
    }

        a.ps-btn.ps-btn--secondary:hover,
        a.ps-btn.ps-btn--secondary:focus,
        a.ps-btn.ps-btn--secondary:focus-visible {
            color: var(--ps-btn-secondary-hover-text) !important;
        }

/* B) Wrapper approach (if TipTap uses ps-rte-btnwrap...) */
.ps-rte-btnwrap {
    margin: 0;
}

.ps-rte-btnwrap--center {
    text-align: center;
}

.ps-rte-btnwrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
}

/* Wrapper -> Primary colours */
.ps-rte-btnwrap--primary a,
.ps-rte-btnwrap--primary a:link,
.ps-rte-btnwrap--primary a:visited {
    background-color: var(--ps-btn-primary-bg);
    color: var(--ps-btn-primary-text) !important;
}

    .ps-rte-btnwrap--primary a:hover,
    .ps-rte-btnwrap--primary a:focus,
    .ps-rte-btnwrap--primary a:focus-visible {
        background-color: var(--ps-btn-primary-hover-bg);
        color: var(--ps-btn-primary-hover-text) !important;
    }

/* Wrapper -> Secondary colours */
.ps-rte-btnwrap--secondary a,
.ps-rte-btnwrap--secondary a:link,
.ps-rte-btnwrap--secondary a:visited {
    background-color: var(--ps-btn-secondary-bg);
    color: var(--ps-btn-secondary-text) !important;
    border: 2px solid var(--ps-btn-secondary-text);
}

    .ps-rte-btnwrap--secondary a:hover,
    .ps-rte-btnwrap--secondary a:focus,
    .ps-rte-btnwrap--secondary a:focus-visible {
        background-color: var(--ps-btn-secondary-hover-bg);
        color: var(--ps-btn-secondary-hover-text) !important;
    }

/* RTE button alignment options */
.ps-rte-btnwrap--left {
    text-align: left;
}

.ps-rte-btnwrap--center {
    text-align: center;
}

.ps-rte-btnwrap--right {
    text-align: right;
}

/* If no align class is present, default to left */
.ps-rte-btnwrap {
    text-align: left;
}


/* C) Back-compat for existing content with <p class="ps-btn ..."><a class="ps-btn ..."> */
p.ps-btn > a.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
}

/* D) If a paragraph somehow gets button classes, stop it rendering as a button */
p.ps-btn,
p.ps-btn.ps-btn--primary,
p.ps-btn.ps-btn--secondary {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
}

/* =========================================================
   Testimonial component (quote spans inside grey panel)
========================================================= */

.ps-testimonial {
    border: 1px solid var(--ps-border-muted);
    border-radius: var(--ps-radius-lg);
    overflow: hidden;
    --ps-testimonial-pad: clamp(1.5rem, 3vw, 2.25rem);
    --ps-quote-inset: clamp(1.15rem, 2.5vw, 1.9rem);
    --ps-quote-gutter: clamp(1.5rem, 3vw, 2.25rem);
}

/* Grey panel */
.ps-testimonial__body {
    background-color: var(--ps-surface-muted);
    margin: 0;
    position: relative;
    padding: var(--ps-testimonial-pad);
}

    /* Kill any old pseudo-element quotes */
    .ps-testimonial__body::before,
    .ps-testimonial__body::after {
        content: none !important;
    }

/* Text wrapper */
.ps-testimonial__content {
    position: relative;
    z-index: 1;
    padding-left: var(--ps-quote-gutter);
    padding-right: var(--ps-quote-gutter);
}

    /* tidy RTE margins */
    .ps-testimonial__content > *:first-child {
        margin-top: 0;
    }

    .ps-testimonial__content > *:last-child {
        margin-bottom: 0;
    }

/* Decorative quote spans */
.ps-testimonial__quote {
    position: absolute;
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
    line-height: 1;
    font-size: clamp(3rem, 6vw, 5rem);
}

.ps-testimonial__quote--open {
    top: var(--ps-quote-inset);
    left: var(--ps-quote-inset);
}

.ps-testimonial__quote--close {
    bottom: var(--ps-quote-inset);
    right: var(--ps-quote-inset);
    transform: translateY(0.35em);
}

/* Author inside testimonial panel */
.ps-testimonial__author {
    margin-top: clamp(1rem, 2vw, 1.5rem);
    padding-top: clamp(0.75rem, 1.5vw, 1rem);
    border-top: 1px solid var(--ps-border-muted);
    text-align: center;
}

/* Author text */
.ps-testimonial__authorText,
.ps-testimonial__authorLink {
    font-style: italic;
    font-weight: 500;
    color: var(--ps-accent, currentColor);
}

/* Linked author hover */
.ps-testimonial__authorLink {
    text-decoration: none;
}

    .ps-testimonial__authorLink:hover,
    .ps-testimonial__authorLink:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }




/* =========================================================
   Mobile section Zig Zag

   Two column sections: on mobile, always stack Text then Image
   Works by detecting whether the column contains an imageBlock.
========================================================= */

@media (max-width: 767.98px) {
    /* make sure the row is flex (Bootstrap .row already is) */
    .ps-columns > .row

{
    display: flex;
    flex-direction: column;
}

/* Default: let things flow normally */
.ps-columns > .row > .col-12.col-lg-6 {
    order: 0;
}

    /* If a column CONTAINS an imageBlock, push it after text */
    .ps-columns > .row > .col-12.col-lg-6:has([data-content-element-type-alias="imageBlock"]) {
        order: 2;
    }

    /* If a column CONTAINS an rteBlock, pull it before image */
    .ps-columns > .row > .col-12.col-lg-6:has([data-content-element-type-alias="rteBlock"]) {
        order: 1;
    }
}


/* =========================================================
   Content Grid filter tabs: force colour (beats a.ps-btn { color: inherit; })
========================================================= */

.ps-main .content-grid .cg-filter > a.ps-btn {
    color: var(--cb-pink, #ff00b8) !important;
}

    /* hover/focus + active */
    .ps-main .content-grid .cg-filter > a.ps-btn:hover,
    .ps-main .content-grid .cg-filter > a.ps-btn:focus-visible,
    .ps-main .content-grid .cg-filter > a.btn-primary {
        color: #fff !important;
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

/* remove button paint for filter only */
.ps-main .content-grid .cg-filter > a.ps-btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-width: 0 !important;
}


/* =========================================================
   Content Grid filter tabs – readable on light + dark
   Default: pink
   Active: underline + context colour (dark->white, light->muted ink)
========================================================= */

/* Base (works everywhere) */
.ps-main .content-grid .cg-filter > a.ps-btn {
    color: var(--cb-pink, #ff00b8) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-width: 0 !important;
    text-decoration: none !important;
}

    /* Hover/focus: keep pink, add underline (works on white + dark) */
    .ps-main .content-grid .cg-filter > a.ps-btn:hover,
    .ps-main .content-grid .cg-filter > a.ps-btn:focus-visible {
        color: var(--cb-pink, #ff00b8) !important;
        text-decoration: underline !important;
        text-underline-offset: 0.18em;
    }

/* Active (default/light sections): muted ink + underline */
.ps-main .content-grid .cg-filter > a.btn-primary {
    color: color-mix(in srgb, var(--ps-ink, #111) 70%, transparent) !important;
    text-decoration: underline !important;
    text-underline-offset: 0.18em;
}

/* Active on dark sections: white + underline */
.ps-section.ps-bg-primary .content-grid .cg-filter > a.btn-primary,
.ps-section.ps-bg-dark .content-grid .cg-filter > a.btn-primary,
.ps-section.ps-bg-black .content-grid .cg-filter > a.btn-primary {
    color: #fff !important;
}

/* Content Grid: remove underline from card title links (incl. featured) */
.content-grid .card-title a.stretched-link {
    text-decoration: none;
}

    /* keep it off on hover/focus too */
    .content-grid .card-title a.stretched-link:hover,
    .content-grid .card-title a.stretched-link:focus,
    .content-grid .card-title a.stretched-link:focus-visible {
        text-decoration: none;
    }



/* 
    Carousel image colour flash

*/
/* =========================================================
   Create Balance — carousel image colour flash (single source of truth)
========================================================= */


/* =========================================================
   Create Balance — carousel image colour flash (single source of truth)
========================================================= */

/* Make the card a stacking context so blend effects can't bleed */
.ps-promo-carousel__card .card {
    position: relative;
    isolation: isolate;
}

/* Media wrapper only */
.ps-promo-carousel__media.cb-colour-flash {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

    /* Base image */
    .ps-promo-carousel__media.cb-colour-flash img,
    .ps-promo-carousel__media.cb-colour-flash picture {
        display: block;
        width: 100%;
        height: auto;
    }

    .ps-promo-carousel__media.cb-colour-flash img {
        filter: grayscale(100%) contrast(1.05);
    }

    /* Flash overlay
   Pink should be BOTTOM-LEFT, diagonal runs TOP-LEFT -> BOTTOM-RIGHT */
    .ps-promo-carousel__media.cb-colour-flash::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        --cb-flash: var(--ps-accent, var(--cb-pink, #ff00b8));
        /* key change: start at bottom-left (0%), move to top-right (100%) */
        background: linear-gradient( to top right, var(--cb-flash) 0%, var(--cb-flash) 50%, transparent 56%, transparent 100% );
        mix-blend-mode: color;
        opacity: 1;
    }

/* Ensure text always above */
.ps-promo-carousel__card .card-body {
    position: relative;
    z-index: 2;
}


/* =========================================================
   MAIN promo carousel: crop portrait "card" images to a card-top viewport
   (blog template remains unchanged)
========================================================= */

/* Use a landscape-ish viewport for the media area */
.ps-promo-carousel:not(.ps-promo-carousel--blog) .ps-promo-carousel__media.cb-colour-flash {
    aspect-ratio: 16 / 10; /* tweak: 16/9 (more crop), 3/2 (less crop) */
}

    /* Make the image fill that viewport */
    .ps-promo-carousel:not(.ps-promo-carousel--blog) .ps-promo-carousel__media.cb-colour-flash img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }

    /* If ps-image--cover sets something global, ensure it’s consistent here */
    .ps-promo-carousel:not(.ps-promo-carousel--blog) .ps-promo-carousel__media.cb-colour-flash .ps-image--cover {
        height: 100%;
        object-fit: cover;
    }


/* =========================================================
   Blog template: DO NOT force tall / zoomed crop
   Revert to normal "card image" flow (height:auto)
========================================================= */

.ps-promo-carousel--blog .ps-promo-carousel__media {
    aspect-ratio: auto; /* remove tall box */
}

    /* Let the image size naturally (no forced cover cropping) */
    .ps-promo-carousel--blog .ps-promo-carousel__media img {
        width: 100%;
        height: auto;
        object-fit: unset;
        object-position: 50% 50%;
    }

    /* If your global .ps-image--cover forces cover/height, neutralise it for blog */
    .ps-promo-carousel--blog .ps-promo-carousel__media .ps-image--cover {
        height: auto;
        object-fit: unset;
    }

/* =========================================================
   Latest Posts – subtle card hover lift
========================================================= */

.ps-main .card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform-origin: center center;
}

    .ps-main .card:hover {
        transform: scale(1.02);
        box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.12);
    }


@media (hover: hover) {
    .ps-main .card {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

        .ps-main .card:hover {
            transform: scale(1.02);
            box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.12);
        }
}



.ps-main .card-body strong, .card-body b {
    font-weight: 700;
}


.ps-main .ps-promo-carousel strong, .ps-promo-carousel b {
    font-weight: 700;
}


.ps-main .card-body strong,
.ps-main .card-body b {
    font-weight: 700;
}