/* =========================================================================
   pemfit/pemf-info-grid — "What is PEMF?" information grid
   Append to blocks/block-styles.css, then bump ?ver= / filemtime.
   ====================================================================== */
 
.three-image-text-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: var(--pemf-grid-column-gap, var(--pemf-space-m, 2rem));
    column-gap: var(--pemf-grid-column-gap, var(--pemf-space-m, 2rem));
    row-gap: var(--pemf-grid-row-gap, var(--pemf-space-m, 2rem));
    align-items: start;
}

.three-image-text-grid.is-reversed {
    direction: rtl;
}

.three-image-text-grid.is-reversed > * {
    direction: ltr;
}

.three-image-text-grid.has-text-align-center .title-p,
.three-image-text-grid.has-text-align-center .p-cta {
    text-align: center;
}

.three-image-text-grid.has-text-align-right .title-p,
.three-image-text-grid.has-text-align-right .p-cta {
    text-align: right;
}

/* --- Text columns ------------------------------------------------------ */
.three-image-text-grid .title-p,
.three-image-text-grid .p-cta {
    display: flex;
    flex-direction: column;
    gap: var(--pemf-space-s, 1rem);
    align-self: center;
}

.three-image-text-grid .pemf-info-grid__title {
    color: var(--pemf-heading-colour, currentColor);
    margin: 0;
}

.three-image-text-grid .pemf-info-grid__description {
    margin: 0;
}

.three-image-text-grid .p-cta .cta {
    align-self: flex-start;
}

.three-image-text-grid.has-text-align-center .p-cta .cta {
    align-self: center;
}

.three-image-text-grid.has-text-align-right .p-cta .cta {
    align-self: flex-end;
}

/* --- Media slots ------------------------------------------------------- */
.three-image-text-grid .pemf-info-grid__media {
    /* position, overflow, height and padding-bottom are set inline per
	   block instance (padding-bottom intrinsic-ratio box, matching the
	   same technique used on the HTI image block) — not set here, since
	   the ratio is per-block, not fixed in the stylesheet. */
    margin: 0;
    background-color: var(--pemf-colour-neutral-100, #f2f2f0);
    line-height: 0;

    /* stops descender gap under replaced elements */
}

/* The ratio-box fill wrapper — absolutely positioned inline per instance
   (top/left/width/height) so image, video and embed content all fill the
   padding-bottom box identically, the same way a plain <img> would. */
.three-image-text-grid .pemf-info-grid__media-inner {
    line-height: normal;
}

.three-image-text-grid .pemf-info-grid__media-inner img,
.three-image-text-grid .pemf-info-grid__media-inner > video {
    display: block;
    width: 100%;
    height: 100%;
}

.three-image-text-grid .pemf-info-grid__media-inner img.is-cover,
.three-image-text-grid .pemf-info-grid__media-inner > video.is-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

.three-image-text-grid .pemf-info-grid__media-inner img.is-contain,
.three-image-text-grid .pemf-info-grid__media-inner > video.is-contain {
    -o-object-fit: contain;
    object-fit: contain;
}

/* Embeds / shortcode output — force any iframe or player to fill the frame.
   No position:absolute here — the .pemf-info-grid__media-inner wrapper
   above already handles that when a fixed aspect ratio is set. */
.three-image-text-grid .pemf-info-grid__embed {
    width: 100%;
    height: 100%;
}

.three-image-text-grid .pemf-info-grid__embed > *,
.three-image-text-grid .pemf-info-grid__embed iframe,
.three-image-text-grid .pemf-info-grid__embed video,
.three-image-text-grid .pemf-info-grid__embed .wp-video,
.three-image-text-grid .pemf-info-grid__embed .mejs-container {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    border: 0;
    display: block;
}

/* 'auto' aspect (no ratio box, no .pemf-info-grid__media-inner wrapper) —
   content sizes naturally, embed/video allowed to set their own height. */
.three-image-text-grid .pemf-info-grid__media > .pemf-info-grid__embed:only-child {
    width: 100%;
}

/* --- Editor-only affordances ------------------------------------------ */
.pemf-info-grid__media-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--pemf-colour-neutral-300, #c9c9c4);
    line-height: normal;
}

.pemf-info-grid__embed--placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    border: 1px dashed var(--pemf-colour-neutral-300, #c9c9c4);
    overflow: hidden;
}

.pemf-info-grid__embed-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}

.pemf-info-grid__embed--placeholder code {
    font-size: 0.75rem;
    word-break: break-all;
    max-height: 6em;
    overflow: hidden;
}

.pemf-media-slot__buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

@media screen and (max-aspect-ratio: 1/1) {
    .page-template-PULSE-PEMF .full-height-hero,
    .page-template-Optimal-Hydration .full-height-hero {
        min-height: 40svh;
        height: 80vw;
    }
}

/* @media screen and (max-height: 600px) {
    .page-template-PULSE-PEMF .full-height-hero,
    .page-template-Optimal-Hydration .full-height-hero {
        min-height: 70svh;
        height: 80vw;
    }
} */
@media screen and (min-width: 2000px) {
    .wp-block-pemfit-stat-counter .stat-counter-grid {
        grid-template-rows: 2vw 2vw 5vw 5vw 2vw 2vw !important;
    }
}

@media screen and (max-width: 2000px) {
    .author.half-hero h1 {
        min-width: 0;
    }

    .author figure {
        flex-basis: 50%;
    }

    .author .hero-text-container {
        flex-basis: 50%;
    }
}

@media screen and (max-width: 1600px) {
    .echelon-hero .cover-image img {
        -o-object-position: 80% 50%;
        object-position: 80% 50%;
    }
}

@media screen and (max-width: 1500px) {
    .info-snippet {
        grid-template-columns: repeat(2, auto);
        justify-content: start;
    }

    .author figure {
        flex-basis: 60%;
    }

    .author .hero-text-container {
        flex-basis: 40%;
    }

    .four-card-pricing {
        padding: var(--medium-gutter) var(--large-gutter);
    }

    .four-card-pricing .card-container {
        flex-wrap: wrap;
        gap: var(--large-gutter);
        width: calc(100% + var(--large-gutter));
    }

    .four-card-pricing .card {
        flex-basis: calc(50% - var(--large-gutter));
    }
}

@media screen and (max-width: 1400px) {
    .four-card:not(.four-card-pricing) {
        padding: var(--thin-gutter);
    }

    .four-card:not(.four-card-pricing) .card-info .cta-container {
        width: 100%;
    }

    .borderless-image-right .inner-hero-wrap {
        height: 80%;
    }

    .infographic:not(.our-story) figure:nth-of-type(1),
    .infographic:not(.our-story) figure:nth-of-type(2) {
        align-self: center;
    }

    /* .half-text-image figure {
        -ms-flex-item-align: stretch;
            align-self: stretch;
    } */
    .half-text-image figure {
        align-self: flex-start;
    }
}

@media screen and (max-width: 1200px) {
    .main-menu ul:not(.dropdown-menu) li a:not(#socials a) {
        padding: 1.5rem 1.2rem;
    }

    .regenerus-logo {
        width: 40%;
        max-width: none;
    }

    .echelon-hero h2 span {
        display: inline;
    }

    .OH-product-intro {
        width: 80%;
    }

    .search-nav h3 {
        display: none;
    }

    #pete-comparison .flex {
        gap: 2rem;
    }

    .author {
        padding: 0 var(--medium-gutter);
    }

    .author .inner-hero-wrap {
        gap: var(--medium-gutter);
    }

    .four-card .card-inner {
        flex-basis: calc(33.33% - var(--medium-gutter));
    }

    .three-card-grid figure {
        padding: 3rem;
    }

    .infographic:not(.our-story) figure:nth-of-type(1) {
        align-self: flex-end;
        margin-bottom: 2rem;
    }

    .infographic figure:nth-of-type(2) {
        align-self: flex-start;
        margin-top: 2rem;
    }

    #footer-info {
        padding: 3rem;
    }

    .three-image-text-grid {
        grid-template-columns: 35% 5% 5% 35% 20%;
        grid-template-rows: 5vw auto 5vw auto;
    }

    .three-image-text-grid figure:nth-of-type(1) {
        grid-area: 1 / 4 / 3 / 6;
        margin: 0;
    }

    .three-image-text-grid figure:nth-of-type(2) {
        grid-area: 3 / 1 / 6 / 3;
        margin: 5vw 0 0 0;
    }

    .three-image-text-grid figure:nth-of-type(2) img {
        -o-object-position: 50% 35%;
        object-position: 50% 35%;
    }

    .three-image-text-grid figure:nth-of-type(3) {
        grid-area: 4 / 4 / 7 / 6;
        margin: 0;
    }

    .three-image-text-grid .p-cta {
        grid-area: 4 / 4 / auto / 6;
        margin: 0;
    }

    .three-image-text-grid .title-p {
        grid-area: 1 / 1 / 3 / 3;
    }

    .infographic.our-story .info-container {
        grid-area: 1 / 1 / 3 / 3;
    }

    .infographic.our-story .summary {
        grid-area: 1 / 4 / 2 / 7;
    }

    .infographic.our-story figure {
        grid-area: 2 / 4 / 3 / 7;
    }

    .infographic.our-story figure img {
        -o-object-position: 30% 50%;
        object-position: 30% 50%;
    }

    /* .home-hero {
        min-height: 80svh
    } */
}

@media screen and (max-width: 1024px) {
    .pulse-sticky.product-focus {
        margin-bottom: var(--large-gutter);
    }

    .blog-article .excerpt {
        display: none;
    }

    .blog-article h2 {
        margin-bottom: 0;
    }

    .before-the-session figure {
        padding-bottom: 0;
    }

    .before-the-session figure img {
        position: relative;
    }

    .home-hero {
        min-height: 0;
        height: auto;
    }

    .page-template-home .full-height-hero p {
        z-index: 8;

        /* -webkit-backdrop-filter: blur(0.5px);
        backdrop-filter: blur(0.5px);
        -webkit-mask-image: -webkit-gradient(
        linear,
        left bottom, left top,
        color-stop(87.5%, rgba(0, 0, 0, 0)),
        to(rgba(0, 0, 0, 1))
      );
        -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 87.5%,
        rgba(0, 0, 0, 1) 100%
      );
        mask-image: -webkit-gradient(
        linear,
        left bottom, left top,
        color-stop(87.5%, rgba(0, 0, 0, 0)),
        to(rgba(0, 0, 0, 1))
      );
        mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 87.5%,
        rgba(0, 0, 0, 1) 100%
      ); */
    }

    .page-template-home .full-height-hero p:not(.info-button):not(.info-snippet p) {
        width: 60%;
    }

    /* .page-template-home .hero-text-container {
        margin-top: 120px
        grid-area: 2 / 1 / 5 / 2;
    } */
    /* p:not(footer p),
    a:not(footer a),
    figcaption,
    label {
        font-size: 1.6rem
    }

    h4 {
        font-size: 1.8rem
    } */
    .complete figure {
        flex-basis: 80%;
    }

    .complete figure img {
        -o-object-position: 65% 50%;
        object-position: 65% 50%;
    }
}

@media screen and (max-width: 991px) {
    .wp-block-pemfit-stat-counter.stat-counter-section {
        padding: var(--medium-gutter) var(--thin-gutter);
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid {
        grid-template-columns: 0.5fr 0.8fr 1.1fr 0.8fr 0.5fr !important;
        grid-template-rows: auto !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(3) .stat-number,
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(3) .stat-suffix {
        font-size: clamp(4rem, 4vw, 11rem) !important;
    }

    .wp-block-pemfit-feature-cards .fc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .product-text-container,
    .pulse-sticky div:not(.image-container),
    .pulse-accessories .image-container {
        flex-basis: 50%;
    }

    .pulse-sticky div.image-container {
        flex-basis: 50%;
    }

    .regenerus-banner {
        padding-bottom: 50%;
    }

    .echelon-hero {
        display: block!important;
        padding: 0 var(--thin-gutter);
    }

    .echelon-hero .cover-image {
        padding-bottom: 60%;
        margin: 0;
        border-radius: var(--rounded-corners);
    }

    .echelon-hero .echelon-logo {
        position: relative;
        padding: 3rem 0;
        width: 60%;
        margin: 0 auto;
        min-width: 250px;
    }

    .echelon-hero h2 {
        text-align: center;
        margin: 0;
        padding: 1rem var(--medium-gutter);
    }

    .echelon-hero .cta {
        margin: 3rem auto;
    }

    #find-studio {
        flex-direction: column;
        justify-content: flex-end;
    }

    .full-height-hero {
        padding: 70px var(--thin-gutter) var(--thin-gutter) var(--thin-gutter);
    }

    .page-template-studio-microsite-v2 .full-height-hero figure:not(.studio-details-accordion figure),
    .page-template-head-office .full-height-hero figure,
    .page-template-PULSE-PEMF .full-height-hero figure,
    .page-template-Optimal-Hydration .full-height-hero figure {
        height: calc(100% - 70px - var(--thin-gutter));
    }

    .echelon-hero {
        height: auto;
        min-height: 0;
        margin-top: 70px;
    }

    #find-studio .cta {
        position: relative;
        margin-top: 2rem;
    }

    #find-studio .cta-border-outline:before {
        content: none;
    }

    .video-container {
        margin: var(--thin-gutter);
    }

    .three-card .card-inner .card-info {
        margin-top: 0;
    }

    .borderless-image-right .inner-hero-wrap {
        height: 60%;
    }

    .during-the-session .flex {
        gap: var(--medium-gutter);
    }

    .inner-hero-wrap {
        height: calc(100% - 70px);
    }

    .author .hero-text-container {
        padding-right: var(--medium-gutter);
    }

    .author figure {
        top: 70px;
        border-radius: 0 var(--rounded-corners) var(--rounded-corners) 0;
    }

    .infographic {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto 1fr;
        gap: 0 var(--medium-gutter);
    }

    .infographic.our-story {
        grid-template-columns: repeat(3, auto);
    }

    .infographic .info-container {
        grid-area: 1 / 1 / 3 / 4;
    }

    .infographic.our-story .info-container {
        grid-area: 1 / 1 / 3 / 4;
    }

    .infographic .summary {
        grid-area: 3 / 1 / auto / 3;
        margin: 3rem 0 0 0;
    }

    .infographic.our-story .summary {
        margin: 0 0 var(--medium-gutter) 0;
    }

    .infographic figure:nth-of-type(1) {
        grid-area: 1 / 3 / 2 / 4;
        align-self: flex-start;
    }

    .infographic figure:nth-of-type(2) {
        grid-area: 2 / 3 / auto / 4;
        margin: 3rem 0;

        /* align-self: flex-end */
    }

    .infographic figure:nth-of-type(3) {
        grid-area: 3 / 3 / auto / 4;
        position: relative;
        right: 0;
    }

    .infographic.our-story figure {
        grid-area: 2 / 4 / auto / 7;
    }

    .large-intro:not(.pemf-session) p {
        text-align: left;
        margin: 0;
        grid-area: 2 / 1 / auto / 5;
    }

    /* .search-container {
        justify-content: center
    } */
    .borderless-image {
        flex-direction: column;

        /* padding: 0 var(--thin-gutter)!important */
    }

    .half-hero.borderless-image {
        margin-bottom: 0;
    }

    .borderless-image .hero-text-container {
        max-width: none;
        min-width: 0;

        /* padding: 3rem 1rem 0 1rem */
    }

    .borderless-image-gallery-right {
        grid-template-columns: 1fr 0.6fr;
        grid-template-rows: 1fr 1fr 1fr;

        /* height: calc(100svh - var(--medium-gutter) *2) */
    }

    .borderless-image-gallery-right figure {
        border-radius: var(--rounded-corners) 0px 0px var(--rounded-corners);
    }

    .borderless-image-gallery-right .hero-text-container {
        grid-area: 1 / 1 / 4 / 2;
        padding-left: var(--medium-gutter);
    }

    .borderless-image-gallery-right figure:nth-of-type(1) {
        grid-area: 3 / 2 / 4 / 3;
    }

    .borderless-image-gallery-right figure:nth-of-type(2) {
        grid-area: 2 / 2 / 3 / 3;
    }

    .borderless-image-gallery-right figure:nth-of-type(3) {
        grid-area: 1 / 2 / 2 / 3;
    }

    .image-side-below-text {
        grid-template-columns: 40% 40% calc(20% - var(--medium-gutter) *2);
        gap: var(--medium-gutter);
    }

    .image-side-below-text-info {
        margin-left: 0;
        grid-area: 1 / 2 / 1 / 4;
    }

    .image-side-below-text-info p {
        padding-bottom: 0;
    }

    .image-side-below-text figure:nth-of-type(1) {
        align-self: flex-start;
        height: 55%;
        grid-area: 1 / 1 / 2 / 2;
    }

    .image-side-below-text figure:nth-of-type(2) {
        margin-left: 0;
        grid-area: 2 / 2 / 3 / 4;
    }

    .half-hero:not(.post-hero) {
        margin: 70px auto 0 auto;
        padding: 0;

        /* grid-template-columns: 1fr 50% */
    }

    .pemfit-vision,
    .infographic.our-story {
        margin-top: 70px;
    }

    .half-hero h1 {
        grid-area: 1 / 1 / 4 / 2;
        min-width: 0;
    }

    .home-hero {
        padding: 70px var(--thin-gutter) 0 var(--thin-gutter);
    }

    .large-intro {
        margin-top: 70px;
    }

    .quote-box {
        grid-area: 3 / 2 / 4 / 3;
        margin: -3rem 0 0 0!important;
        width: 100%;
        min-width: 0;
        max-width: none;
        border-radius: 0 0 var(--rounded-corners) var(--rounded-corners);
    }

    .featured-image-container,
    .quote-box {
        min-width: 250px;
    }

    .quote-box p {
        font-size: 1.8rem;
    }

    .card-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .three-image-grid,
    .three-card-grid .card-container {
        padding: 0 var(--thin-gutter);
    }

    .map-info {
        flex-direction: column;
    }

    .map {
        height: 450px;
        flex-basis: auto;
    }

    .essential-info {
        flex-basis: auto;
    }

    .affiliate-logos {
        width: 90%;
    }

    #footer-links ul {
        margin-right: auto;
    }

    .right-info {
        padding: var(--large-gutter);
    }

    /* .home-hero .hero-text-container {
        margin-top: 70px
    } */
    .infographic .info-container {
        grid-area: 1 / 1 / 3 / 3;
    }

    .infographic:not(.our-story) figure:nth-of-type(1) {
        align-self: flex-start;
    }
}

@media screen and (max-width: 767px) {
    .pulse-accessories {
        padding-top: 0!important;
    }

    .standalone {
        position: relative;
        z-index: 1;
        padding: 0 var(--medium-gutter);
    }

    .image-switch:before {
        content: '';
        position: absolute;
        top: calc(var(--medium-gutter) *-1);
        left: 0;
        width: 100%;
        height: calc(100% + var(--medium-gutter) *2);
        background: var(--off-white);
    }

    .pulse-sticky div.image-container {
        top: 70px;
        min-height: 60vw;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }

    .pulse-sticky div.image-container.image-switch {
        top: var(--medium-gutter);
    }

    .pulse-sticky,
    .pulse-sticky.flex-reverse {
        flex-direction: column;
        padding: 0 var(--medium-gutter)var(--large-gutter)var(--medium-gutter);
        gap: 0;
    }

    .pulse-sticky.pulse-accessories.flex-reverse {
        flex-direction: column-reverse!important;

        /* padding: var(--large-gutter) var(--medium-gutter) */
    }

    .page-template-PULSE-PEMF .centre-image-cta figure {
        order: 3;
    }

    .page-template-PULSE-PEMF .centre-image-cta p {
        order: 1;
        margin-top: calc(3rem - var(--thin-gutter));
        padding: 0 var(--thin-gutter);
    }

    .page-template-PULSE-PEMF .centre-image-cta .cta {
        margin-bottom: 3rem;
        order: 2;
    }

    .blog-grid-one .blog-article:nth-of-type(1) .excerpt,
    .blog-grid-two .blog-article:nth-of-type(5n + 1) .excerpt {
        display: none;
    }

    .benefit-info {
        grid-template-columns: 1fr;
    }

    .page-template-PULSE-PEMF .centre-image-cta figure {
        width: 100%;
        margin-bottom: 0;

        /* margin-top: var(--thin-gutter) */
    }

    .page-template-PULSE-PEMF .centre-image-cta {
        padding: 0 var(--thin-gutter) var(--large-gutter) var(--thin-gutter);

        /* flex-flow: column-reverse */
    }

    .pulse-xl-text-image div {
        flex-basis: 50%;
        padding-right: var(--thin-gutter);
    }

    .page-template-PULSE-PEMF .full-height-hero,
    .page-template-Optimal-Hydration .full-height-hero {
        height: 66svh;
    }

    .page-template-PULSE-PEMF .studio-hero:after,
    .page-template-Optimal-Hydration .studio-hero:after {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0,0,0,0) 100%);
    }

    .page-template-PULSE-PEMF .full-height-hero figure img,
    .page-template-Optimal-Hydration .full-height-hero figure img {
        -o-object-position: 30% 50%;
        object-position: 30% 50%;
    }

    .brand-feature-hero-info {
        margin-bottom: 0;
    }

    .pulse-sticky.product-focus {
        flex-direction: column;
        padding: 0 var(--medium-gutter);
    }

    .pulse-sticky div:not(.image-container) {
        position: relative;

        /* margin-top: var(--large-gutter) */
        top: 0;
        min-height: 0;
    }

    .pulse-sticky.pulse-accessories div:not(.image-container) {
        margin-top: var(--large-gutter);
    }

    .pulse-sticky figure {
        height: 60vw;
    }

    .regenerus-hero {
        padding: 0 var(--medium-gutter);
    }

    .regenerus-logo {
        width: 60%;
        max-width: none;
    }

    .centre-image-cta {
        padding: var(--large-gutter) var(--medium-gutter);
    }

    .half-text-image {
        flex-direction: column;
        flex-flow: column-reverse;
        padding: var(--medium-gutter);
        gap: 3rem;
    }

    .half-text-image figure {
        padding-bottom: 60%!important;
    }

    .blog-grid.grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        height: auto;
        max-height: none;
    }

    .blog-grid-two .blog-article:nth-of-type(5n + 1) .excerpt-container {
        padding: 0;
    }

    /* .blog-grid-one .blog-article:nth-of-type(1) {
        padding: var(--thin-gutter);
    } */
    .blog-grid-one {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }

    .cta-minimal:after,
    .blog-grid-one .blog-article:nth-of-type(1) .cta-article:after,
    .blog-grid-two .blog-article:nth-of-type(5n + 1) .cta-article:after {
        content: '\2197';
    }

    .cta-minimal,
    .blog-article .cta-article {
        width: 5vw!important;
        height: 5vw!important;
        min-width: 30px;
        min-height: 30px;
        padding: 0;
        max-height: 80px!important;
        max-width: 80px!important;
        display: flex;
        align-items: center;
        margin-left: auto;
        align-self: flex-start;
        justify-content: center;
    }

    .blog-article h2:not(.blog-grid-one .blog-article:nth-of-type(1) h2),
    .blog-grid-one .blog-article:nth-of-type(1) h2 {
        font-size: clamp(1.8rem, calc(1.6rem + (100 - 50) * (100vw - 400px) / (2000 - 400)), 4rem);
    }

    .blog-article:nth-of-type(1) {
        grid-area: 1 / 1 / 2 / 2;
    }

    .blog-article:nth-of-type(2) {
        grid-area: 2 / 1 / 3 / 2;
    }

    .blog-article:nth-of-type(3) {
        grid-area: 3 / 1 / 4 / 2;
    }

    .blog-article {
        height: 60vw!important;
        padding: var(--medium-gutter);
    }

    .blog-article h2 {
        align-self: flex-end;
    }

    .blog-grid-two .blog-article:nth-of-type(5n + 1) {
        grid-area: span 1 / span 1!important;
    }

    .blog-grid-two .blog-article,
    .blog-grid-two .blog-article:nth-of-type(10n + 1) {
        grid-column: 1 / 2!important;
    }

    .search-nav {
        flex-direction: column;
        align-items: center;
    }

    .blog-social-links {
        margin-left: 0;
    }

    .text-image-right .flex {
        flex-direction: column;
        gap: 3rem;
    }

    .before-the-session-info p {
        margin-bottom: 0;
    }

    .during-the-session .flex {
        flex-direction: column;
    }

    .during-the-session figure {
        position: relative;
        top: 0;
    }

    .infographic .info-container .cta-container {
        /* -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2; */
        margin-bottom: 3rem;
    }

    .infographic figure:nth-of-type(2) {
        margin: 0;
    }

    .author .hero-text-container {
        padding: var(--medium-gutter);
    }

    .author figure {
        position: relative;
        padding: 35%;
        border-radius: var(--rounded-corners);
        top: 0;
    }

    .image-text-cascade {
        padding: var(--medium-gutter);
    }

    .cascade-inner .flex {
        flex-direction: column;
    }

    .cascade-inner .flex figure {
        padding-bottom: 0;
    }

    .cascade-inner .flex figure img {
        position: relative;
    }

    .page-template-studio-microsite-v2 .cascade-inner .flex div {
        order: 2;
    }

    .page-template-studio-microsite-v2 .cascade-inner .flex figure {
        order: 1;
    }

    .four-card .card-inner {
        flex-basis: calc(50% - var(--medium-gutter));
    }

    .hero-map .hero-text-container {
        order: 1;
    }

    .hero-map .map-container {
        order: 2;
    }

    mappress-map:where(:not(.wp-toolbar *)).mapp-layout {
        aspect-ratio: 100 / 90!important;
    }

    .gallery-grid.grid {
        display: flex!important;
        flex-direction: column;
        width: 100%;
    }

    .gallery-grid figure {
        padding-bottom: 70%;
    }

    .gallery-grid figure:nth-of-type(4) {
        padding-bottom: 100%;
    }

    .three-card {
        padding-top: var(--large-gutter);
    }

    .three-card .card-container {
        gap: var(--large-gutter);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

    .three-card .card-inner p {
        margin-bottom: 3rem;
    }

    #pete-comparison {
        margin-top: 0;
        padding: var(--large-gutter);
    }

    .right-info.small figure {
        max-width: 300px;
        margin: 0 auto;
    }

    .right-info p.summary {
        text-align: center;
    }

    .large-intro.pemf-session p {
        grid-area: 2 / 7 / 3 / 25;
        text-align: left;

        /* margin-top: 3rem */
    }

    .large-intro.pemf-session h1 {
        grid-area: 1 / 7 / 2 / 25;
        text-align: left;
    }

    .large-intro.pemf-session figure:nth-of-type(1) {
        margin-right: 3rem;
    }

    .large-intro.pemf-session figure:nth-of-type(2) {
        grid-area: 4 / 19 / 8 / 25;
        margin-top: 3rem;
    }

    body:where(:not(.wp-toolbar *)).page-template-wellness-A-Z .half-hero,
    body:where(:not(.wp-toolbar *)).page-template-wellness-A-Z-v2 .half-hero,
    .half-hero.borderless-image-right {
        padding: var(--thin-gutter);
    }

    .borderless-image-right {
        height: auto;
    }

    .borderless-image figure,
    .half-hero.borderless-image-right figure {
        border-radius: var(--rounded-corners);
        margin: 0 var(--thin-gutter);
        padding-bottom: 55%;
        width: auto;
    }

    .author.borderless-image figure {
        padding-bottom: 80%!important;
    }

    mappress-map:where(:not(.wp-toolbar *)).mapp-layout {
        border-radius: var(--rounded-corners)!important;
    }

    .hero-map .map-container {
        padding-bottom: 0;
    }

    body:where(:not(.wp-toolbar *)).page-template-wellness-A-Z .half-hero,
    body:where(:not(.wp-toolbar *)).page-template-wellness-A-Z-v2 .half-hero {
        height: auto;
    }

    .borderless-image .hero-text-container {
        width: 100%;
        padding: 3rem var(--large-gutter) 0 var(--large-gutter);
    }

    .complete .flex {
        flex-direction: column;
    }

    .complete figure {
        order: 1;
    }

    .complete div {
        order: 2;
    }

    .page-template-what-is-a-pemf-session section {
        padding: var(--large-gutter)var(--medium-gutter) 0 var(--medium-gutter);
    }

    .right-info {
        flex-direction: column;
        padding: var(--large-gutter) var(--thin-gutter);
    }

    .right-info .info-container {
        padding: 0 var(--thin-gutter);
    }

    .inner-hero-wrap {
        flex-direction: column;
        padding: 0;
    }

    .borderless-image-right .hero-text-container {
        order: 2;
        width: auto;
        padding: var(--large-gutter) var(--medium-gutter) 0 var(--medium-gutter);
        min-width: 0;
    }

    .faq-hero .hero-text-container {
        order: 1;
        position: relative;
        top: 0;
    }

    .faq-hero .faq-accordion {
        order: 2;
    }

    .borderless-image-right figure {
        padding-bottom: 60%;
        order: 1;
        border-radius: 0;
    }

    .large-intro:not(.pemf-session) h1 {
        margin-top: 5%;
    }

    .large-intro:not(.pemf-session) figure:nth-of-type(1) {
        margin-top: -30%;
    }

    .borderless-image-gallery-right .hero-text-container h1,
    .borderless-image-gallery-right .hero-text-container ul:not(.wp-block-list),
    .borderless-image-gallery-right .hero-text-container .post-info {
        width: 58%;
    }

    section:where(:not(.wp-toolbar *)).wider {
        width: auto;
        margin: var(--medium-gutter);
        padding: 6rem 8%;
    }

    .home-hero figure:after {
        width: 100%;
    }

    .three-card {
        max-width: 500px;
    }

    .three-card .card-inner figure {
        height: auto;
        padding-bottom: 80%;
    }

    .three-image-text-grid {
        display: flex!important;
        flex-direction: column;
        gap: 2rem;
        padding: 50px var(--large-gutter);
    }

    .three-image-text-grid figure {
        padding-bottom: 60%;
        margin: 0 !important;
    }

    .three-image-text-grid figure:nth-of-type(2) {
        order: 2;
    }

    .three-image-text-grid figure:nth-of-type(3) {
        order: 3;
    }

    .three-image-text-grid p:not(.title-p p) {
        order: 2;
    }

    .left-info {
        flex-direction: column;
        padding: calc(var(--medium-gutter) + var(--thin-gutter));
    }

    .info-container,
    .card-grid {
        width: 100%;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-container:not(.four-card .card-container) {
        flex-direction: column;
        align-items: center;
        gap: var(--large-gutter);
    }

    .card {
        min-width: 220px;
        margin: 0 var(--medium-gutter);
    }

    .four-card-pricing .card-container {
        width: 100%;
    }

    .four-card-pricing .card {
        margin: 0;
        flex-basis: 100%;
    }

    .card-large {
        min-height: 310px;
    }

    .half-hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto;

        /* padding: var(--thin-gutter) */
        height: auto;
    }

    .post-hero {
        padding: 0 var(--medium-gutter);
    }

    .half-hero h1 {
        grid-area: 1 / 1 / auto / 2;

        /* font-size: clamp(2.6rem, calc(2.7rem + (90 - 20) * (100vw - 400px) / (2000 - 400)), 7.5rem); */
        /* font-size: clamp(3.6rem, calc(2.7rem + (90 - 20) * (100vw - 400px) / (2000 - 400)), 7.5rem) */
        white-space: pre-line;
    }

    .post-hero h1 {
        margin-bottom: 3rem;
    }

    /* .half-hero h1 em {
        font-size: clamp(2.7rem, calc(2.7rem + (80 - 2) * (100vw - 400px) / (2000 - 400)), 8rem);
        font-size: clamp(3.9rem, calc(2.7rem + (80 - 2) * (100vw - 400px) / (2000 - 400)), 8rem)
    } */
    .featured-image-container {
        grid-area: 2 / 1 / 3 / 2;
    }

    .quote-box {
        grid-area: 3 / 1 / auto / 2;
    }

    .affiliate-logos {
        width: 100%;
    }

    .home-hero img.cover-fit {
        -o-object-position: 70% 50%;
        object-position: 70% 50%;
    }

    .borderless-image-gallery-right {
        grid-template-columns: 1fr 40%;
        grid-template-rows: repeat(4, auto);
        padding-left: 0;
    }

    .borderless-image-gallery-right .hero-text-container {
        grid-area: 1 / 1 / 4 / 3;
        min-width: 0;
        padding: var(--medium-gutter);
    }

    .borderless-image-gallery-right .hero-text-container h1 {
        margin: 3rem 0;
    }

    .borderless-image-gallery-right figure:nth-of-type(1) {
        grid-area: 4 / 2 / 5 / 3;
    }

    .borderless-image-gallery-right figure:nth-of-type(2) {
        grid-area: 4 / 1 / 5 / 2;
        margin: 0;
        border-radius: 0 var(--rounded-corners) var(--rounded-corners) 0;
    }

    .borderless-image-gallery-right figure:nth-of-type(3) {
        grid-area: 1 / 2 / 2 / 3;
        margin: 0;
    }

    .infographic {
        padding: var(--large-gutter) var(--medium-gutter);
    }

    .infographic.our-story.grid {
        display: flex!important;
        flex-direction: column;
        gap: var(--medium-gutter);
        padding: var(--large-gutter);
    }

    .wp-block-pemfit-hti-col {
        margin: var(--medium-gutter) 0;
    }

    /* .infographic .info-container p:nth-of-type(1) {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    } */
    /* .infographic .info-container h2 {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
    } */
    /* .infographic .info-container p {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
    } */
    /* .infographic .info-container figure:nth-of-type(1) {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    } */
    .infographic.our-story .summary {
        text-align: center;

        /* -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3; */
        margin-bottom: 3rem;
    }

    /* .infographic.our-story figure {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    } */
    .three-card .card-inner .card-info {
        padding: var(--medium-gutter);
        margin-top: 0;
    }
}

@media screen and (max-width: 600px) {
    .three-image-text-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .three-image-text-grid.is-reversed {
        direction: ltr;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto auto !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(1),
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(2),
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(3),
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(4),
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(5) {
        grid-column: auto !important;
        grid-row: auto !important;
        padding: var(--medium-gutter) !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(1) {
        grid-row: 1 !important;
        grid-column: 1 !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(2) {
        grid-row: 1 !important;
        grid-column: 2 !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(3) {
        grid-row: 2 !important;
        grid-column: 1 / 3 !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(4) {
        grid-row: 3 !important;
        grid-column: 1 !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(5) {
        grid-row: 3 !important;
        grid-column: 2 !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(1),
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(5) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(1) .stat-number-wrap,
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(5) .stat-number-wrap {
        justify-content: center !important;
        margin-bottom: 0.3rem !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(1) .stat-text-wrap,
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(5) .stat-text-wrap {
        align-items: center !important;
        text-align: center !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(1) .stat-heading,
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(5) .stat-heading,
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(1) .stat-counter-description,
    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(5) .stat-counter-description {
        text-align: center !important;
    }

    .wp-block-pemfit-stat-counter .stat-counter-grid > *:nth-child(3) {
        padding: 10% 0 !important;
    }

    .wp-block-pemfit-feature-cards .fc-grid {
        grid-template-columns: 1fr !important;
    }

    .wp-block-pemfit-feature-cards.fc-section {
        padding: var(--medium-gutter) var(--thin-gutter);
    }

    .info-snippet {
        grid-template-columns: 1fr;
    }

    .page-template-home .full-height-hero .gradient-container {
        position: absolute;
        height: 70%;
        bottom: 0;
        top: auto;
        left: 0;
        width: 100%;

        /* background: -o-linear-gradient(left, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%) */
        /* background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.4)),to(rgba(0,0,0,0))) */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0,0,0,0) 100%);
        z-index: 1;
    }

    .gradient-blur > div,
    .gradient-blur:before,
    .gradient-blur:after {
        position: absolute;
        left: 0;
        bottom: 0;
        top: auto;
        height: 50%;
        width: 100%;
    }

    .gradient-blur:before {
        content: "";
        z-index: 1;
        -webkit-backdrop-filter: blur(64px);
        backdrop-filter: blur(64px);
        -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 12.5%,
        rgba(0, 0, 0, 1) 25%,
        rgba(0, 0, 0, 0) 37.5%
      );
        mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 12.5%,
        rgba(0, 0, 0, 1) 25%,
        rgba(0, 0, 0, 0) 37.5%
      );
    }

    .gradient-blur > div:nth-of-type(1) {
        z-index: 2;
        -webkit-backdrop-filter: blur(32px);
        backdrop-filter: blur(32px);
        -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 12.5%,
        rgba(0, 0, 0, 1) 25%,
        rgba(0, 0, 0, 1) 37.5%,
        rgba(0, 0, 0, 0) 50%
      );
        mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 12.5%,
        rgba(0, 0, 0, 1) 25%,
        rgba(0, 0, 0, 1) 37.5%,
        rgba(0, 0, 0, 0) 50%
      );
    }

    .gradient-blur > div:nth-of-type(2) {
        z-index: 3;
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 25%,
        rgba(0, 0, 0, 1) 37.5%,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 0) 62.5%
      );
        mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 25%,
        rgba(0, 0, 0, 1) 37.5%,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 0) 62.5%
      );
    }

    .gradient-blur > div:nth-of-type(3) {
        z-index: 4;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 37.5%,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 1) 62.5%,
        rgba(0, 0, 0, 0) 75%
      );
        mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 37.5%,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 1) 62.5%,
        rgba(0, 0, 0, 0) 75%
      );
    }

    .gradient-blur > div:nth-of-type(4) {
        z-index: 5;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 1) 62.5%,
        rgba(0, 0, 0, 1) 75%,
        rgba(0, 0, 0, 0) 87.5%
      );
        mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 1) 62.5%,
        rgba(0, 0, 0, 1) 75%,
        rgba(0, 0, 0, 0) 87.5%
      );
    }

    .gradient-blur > div:nth-of-type(5) {
        z-index: 6;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 62.5%,
        rgba(0, 0, 0, 1) 75%,
        rgba(0, 0, 0, 1) 87.5%,
        rgba(0, 0, 0, 0) 100%
      );
        mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 62.5%,
        rgba(0, 0, 0, 1) 75%,
        rgba(0, 0, 0, 1) 87.5%,
        rgba(0, 0, 0, 0) 100%
      );
    }

    .gradient-blur > div:nth-of-type(6) {
        z-index: 7;
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
        -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 75%,
        rgba(0, 0, 0, 1) 87.5%,
        rgba(0, 0, 0, 1) 100%
      );
        mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 75%,
        rgba(0, 0, 0, 1) 87.5%,
        rgba(0, 0, 0, 1) 100%
      );
    }

    .home-hero .hero-img-wrap:after {
        content: none;
    }

    .pulse-xl-text-image {
        flex-direction: column;
        padding: 0 var(--medium-gutter);
        flex-flow: column-reverse;
    }

    .pulse-xl-text-image figure {
        padding-bottom: 70%;
        margin-top: var(--large-gutter);
    }

    .pulse-xl-text-image figure img {
        position: absolute;
    }

    .pulse-sticky,
    .pulse-sticky.flex-reverse {
        flex-direction: column;
        padding: var(--medium-gutter);
        margin-bottom: var(--large-gutter);
    }

    .OH-product-intro p,
    .OH-product-intro h2 {
        text-align: left;
    }

    .regenerus-banner {
        padding-bottom: 70%;
    }

    .OH-product-intro {
        width: auto;
        margin: 0 var(--thin-gutter);
        padding: var(--medium-gutter);
    }

    .full-height-hero {
        padding: 60px var(--thin-gutter) var(--thin-gutter) var(--thin-gutter);
    }

    .page-template-studio-microsite-v2 .full-height-hero figure:not(.studio-details-accordion figure),
    .page-template-head-office .full-height-hero figure,
    .page-template-PULSE-PEMF .full-height-hero figure,
    .page-template-Optimal-Hydration .full-height-hero figure {
        height: calc(100% - 60px - var(--thin-gutter));
    }

    .echelon-hero {
        margin-top: 60px;
    }

    .flex-review-score {
        order: 1;
    }

    .page-template-home .full-height-hero p:not(.info-snippet p):not(.info-button) {
        display: none;
        color: #333!important;

        /* margin-bottom: 2rem */
        margin-top: 2rem;
    }

    .subheading-wrap:has(> .home-hero p[style*="display: none"]) {
        display: none;
    }

    .borderless-image .hero-text-container {
        padding: 3rem var(--medium-gutter) 0 var(--medium-gutter);
    }

    .text-image-right,
    .during-the-session {
        padding: var(--medium-gutter);
    }

    .before-the-session figure {
        padding-bottom: 100%;
    }

    .during-the-session figure {
        padding-bottom: 60%;
    }

    .before-the-session figure img {
        position: absolute;
    }

    .info-snippet {
        padding-top: 3rem;
        margin-top: 3rem;
    }

    .three-card {
        padding: var(--large-gutter);
    }

    .four-card .card-container {
        width: 100%;
        gap: var(--medium-gutter) 0;
    }

    .four-card .card-info .cta-container {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

    .four-card .card-inner {
        flex-basis: 100%;
    }

    .before-the-session h2 {
        width: auto;
    }

    .large-intro.pemf-session p {
        grid-area: 4 / 1 / 6 / 25;
    }

    .large-intro.pemf-session h1 {
        font-size: 4rem;
        grid-area: 1 / 8 / 2 / 25;
        font-size: (5rem, calc(4.1rem + (100 - 10) * (100vw - 400px) / (2000 - 400)), 14rem);
    }

    .large-intro.pemf-session figure:nth-of-type(1) {
        grid-area: 1 / 1 / 4 / 7;
    }

    .large-intro.pemf-session figure:nth-of-type(2) {
        grid-area: 2 / 8 / 3 / 21;
        margin: 0 0 3rem 0;
    }

    .page-template-what-is-a-pemf-session .flex {
        flex-direction: column;
    }

    .during-the-session figure {
        position: relative;
        top: 0;
    }

    /* .page-template-what-is-a-pemf-session .flex figure {
        padding-bottom: 60%
    } */
    .cascade-one .flex:nth-of-type(1) figure,
    .cascade-one .flex:nth-of-type(3) figure,
    .cascade-two .flex:nth-of-type(2) figure {
        order: 1;
    }

    .cascade-one .flex:nth-of-type(1) div,
    .cascade-one .flex:nth-of-type(3) div,
    .cascade-two .flex:nth-of-type(2) div {
        order: 2;
    }

    .right-info {
        margin-top: 190px;
        padding: 0 var(--thin-gutter);
    }

    .infographic.grid {
        display: flex!important;
        flex-direction: column;
        gap: 5rem;
        padding-bottom: 320px;
    }

    .infographic.our-story.grid {
        padding-bottom: var(--large-gutter);
    }

    .infographic .summary {
        text-align: center;
        margin: 0;
    }

    .infographic figure:nth-of-type(1) {
        margin: 0 auto;
    }

    .infographic figure:nth-of-type(2),
    .infographic figure:nth-of-type(3) {
        max-width: 220px;
    }

    .infographic figure:nth-of-type(3) {
        position: absolute;
        z-index: 10;
        height: 400px;
        width: 220px;
        right: auto;
        align-self: center;
        bottom: -130px;
        top: auto;
    }

    .conditions {
        /* padding: var(--thin-gutter) */
        grid-template-columns: 1fr;
    }

    .borderless-image-gallery-right .hero-text-container h1,
    .borderless-image-gallery-right .hero-text-container ul:not(.wp-block-list),
    .borderless-image-gallery-right .hero-text-container .post-info {
        width: 100%;
    }

    .secondary-info {
        width: 100%;
        left: auto;
    }

    .borderless-image-gallery-right .hero-text-container {
        grid-area: 2 / 1 / 4 / 3;
    }

    .borderless-image-gallery-right figure:nth-of-type(3) {
        grid-area: 1 / 1 / 2 / 3;
        border-radius: 0;
        height: 250px;
    }

    .image-side-below-text {
        display: flex!important;
        flex-direction: column;
        grid-template-columns: 40% 40% calc(20% - var(--medium-gutter) *2);
        gap: var(--medium-gutter);
        padding: 0 var(--thin-gutter);
    }

    .image-side-below-text figure {
        margin: 0!important;
        padding-bottom: 80%!important;
    }

    .image-side-below-text div,
    .image-side-below-text p {
        margin: 0;
    }

    .image-side-below-text-info {
        padding: 0 var(--medium-gutter);
    }

    /* .half-hero {
        margin: 60px auto;
        padding: 0;
    } */
    .home-hero {
        padding: 60px var(--thin-gutter) 0 var(--thin-gutter);
        grid-template-columns: var(--medium-gutter) auto var(--medium-gutter);
        grid-template-rows: var(--medium-gutter) auto 1fr auto auto auto 0fr auto var(--medium-gutter);

        /* min-height: 0 */
    }

    .home-hero figure {
        /* height: calc(100% + 40px) */
        grid-area: 1 / 1 / 5 / 4;
    }

    .hero-text-container h1 {
        margin: 0 auto 3rem auto;
    }

    .page-template-home .full-height-hero p:not(.info-button) {
        position: relative;

        /* padding: var(--medium-gutter) */
        padding-bottom: 0;

        /* text-align: center */
        align-items: center;
    }

    .page-template-home .full-height-hero p {
        color: #000;

        /* text-align: center */
    }

    .pemfit-vision,
    .infographic.our-story {
        margin-top: 60px;
    }

    .home-hero figure:after {
        content: none;
    }

    .home-hero .full p:not(.info-button) {
        min-width: 0;
        width: auto;
        padding-top: 0;
        margin-bottom: 2rem;
    }

    .info-snippet p span:not(.container):not(.secondary) {
        color: var(--forest-green);
    }

    .info-snippet .secondary {
        color: #50655c !important;
    }

    .home-hero .cta-outline.cta-white-text {
        color: var(--forest-green);
        border-color: var(--forest-green);
    }

    .home-hero .cta-outline.cta-white-text:hover {
        border-color: var(--orange);
        color: #61756d!important;
    }

    .info-snippet {
        row-gap: 0.2rem;
        text-align: center;
    }

    .reviews-snippet {
        justify-content: center;
    }

    .full-height-hero.home-hero {
        /* min-height: 100svh */
    }

    .home-hero img.cover-fit {
        -o-object-position: 70% 50%;
        object-position: 70% 50%;
    }

    .large-intro {
        margin-top: 60px;
    }

    /* .home-hero .hero-text-container {
        grid-area: 1 / 1 / auto / 2;
        min-width: 280px;
        margin-left: auto;
        margin-right: auto;
        border-radius: var(--rounded-corners);
        text-align: center;
        padding: var(--large-gutter);
        -webkit-backdrop-filter: blur(2px) brightness(0.7);
        backdrop-filter: blur(2px) brightness(0.7);
    } */
    .home-hero h1 {
        margin: 0 auto var(--medium-gutter) auto;
        overflow-wrap: break-word;
        text-align: center;
    }

    .home-hero .cta-container {
        width: 100%;
        margin-top: 2rem;
    }

    .centered-info {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .review-score {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .studio-hero-info {
        width: 88%;
    }

    .affiliate-logos {
        flex-wrap: wrap;
        gap: 4rem;
        padding: 6rem;
    }

    .affiliate-logos figure {
        flex-basis: 50%;
        max-width: 130px;
    }
}

@media screen and (max-width: 525px) {
    .large-intro:not(.pemf-session) h1 {
        margin-top: 7%;
    }

    .large-intro:not(.pemf-session) figure:nth-of-type(2) {
        margin-top: -50%;
    }

    .large-intro:not(.pemf-session) p {
        grid-area: 3 / 1 / auto / 7;
        margin-top: 3rem;
    }
}

@media screen and (max-width: 480px) {
    .borderless-image-gallery-right {
        grid-template-rows: repeat(6, auto);
    }

    .borderless-image-gallery-right figure {
        margin: 0 var(--medium-gutter)!important;
        border-radius: var(--rounded-corners)!important;
        width: calc(100% - var(--medium-gutter) *2);
    }

    .borderless-image-gallery-right figure:nth-of-type(1) {
        grid-area: 4 / 1 / 5 / 3;
    }

    .borderless-image-gallery-right figure:nth-of-type(2) {
        grid-area: 5 / 1 / 6 / 3;
    }

    .borderless-image-gallery-right figure:nth-of-type(3) {
        grid-area: 6 / 1 / 7 / 3;
    }

    .benefit-info {
        padding: var(--medium-gutter);
    }

    .regenerus-hero p {
        text-align: left;
    }

    .regenerus-logo {
        align-self: flex-start;
    }

    .blog-social-links a {
        width: 4rem;
        height: 4rem;
    }

    .three-card,
    .infographic.our-story.grid {
        padding: var(--medium-gutter);
    }

    .four-card-pricing {
        padding: var(--thin-gutter);
    }

    .large-intro.pemf-session h1 {
        grid-area: 1 / 1 / 2 / 25;
    }

    .large-intro.pemf-session figure {
        min-width: 0;
    }

    .large-intro.pemf-session figure:nth-of-type(1) {
        grid-area: 2 / 1 / 4 / 13;
    }

    .large-intro.pemf-session figure:nth-of-type(2) {
        grid-area: 2 / 13 / 4 / 25;
    }

    .large-intro.pemf-session figure {
        padding-bottom: 130%;
        margin: 0!important;
    }

    .large-intro.pemf-session p {
        margin-top: 3rem;
    }

    .large-intro.pemf-session figure img {
        position: absolute;
        height: 100%;
    }

    #find-studio:before {
        font-size: 5rem;
        white-space: normal;
    }

    .large-intro {
        padding: 60px var(--medium-gutter) 0 var(--medium-gutter);
    }

    .large-intro:not(.pemf-session) figure:nth-of-type(2) {
        margin-left: 0;
        margin-top: -30%;
    }

    .cta-container {
        width: 100%;
    }

    .full-height-hero .hero-text-container {
        width: calc(85% + 2rem);
        padding: 0;
        padding-top: var(--medium-gutter);
    }

    /* .full-height-hero .hero-text-container h1 {
        font-size: clamp(5.1rem, calc(6.15rem + (250 - 10) * (100vw - 400px) / (2000 - 400)), 14rem)
    } */
    /* .full-height-hero .hero-text-container h1 em {
        font-size: clamp(5.15rem, calc(6.3rem + (260 - 5) * (100vw - 400px) / (2000 - 400)), 14.9rem)
    } */
    .info-container .cta {
        width: 100%;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .affiliate-logos {
        padding: 2rem;
    }

    .affiliate-logos figure {
        min-width: 100px;
    }

    .three-image-text-grid {
        padding: var(--large-gutter) var(--medium-gutter);
    }
}

@media screen and (max-width: 400px) {
    .centre-image-cta p {
        text-align: left;
    }

    .regenerus-hero .cta {
        width: calc(100% - var(--medium-gutter) *4);
    }

    .centre-image-cta .cta {
        width: 100%;
    }

    .cta-container {
        width: 100%!important;
    }

    .faq-accordion {
        padding: 0;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   .top-element — clears the fixed header (#menu-container, see style.css).
   Add the class to the first block on a page (Kadence: Advanced > Additional
   CSS class). Header heights: 90px, 70px at <= 991px, 60px at <= 600px.
   Front end only (the editor has no fixed header).
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --pemfit-header-height: 90px; }
@media (max-width: 991px) { :root { --pemfit-header-height: 70px; } }
@media (max-width: 600px) { :root { --pemfit-header-height: 60px; } }

body:not(.editor-styles-wrapper) .top-element {
    margin-top: var(--pemfit-header-height);
}


/* <picture> support (Imagify WebP "picture tags"): the wrapper must not take
   part in layout, so every existing img / .cover-fit / figure rule behaves
   exactly as it did with a bare <img>. */
picture {
    display: contents;
}


/* Editable footer (Appearance > Footers): block-based link columns and copyright bar */
#footer-links .footer-links-col {
    min-width: 165px;
    padding: 0;
}

#footer-links .footer-links-col ul {
    margin: 0;
    padding: 0;
}

#footer-links .footer-links-col li {
    list-style: none;
}

#footer-top .wp-block-image,
#footer-top figure {
    margin: 0;
}

#copyright-info p a {
    padding: 0;
    margin: 0;
}

@media (max-width: 991px) {
    #footer-links .footer-links-col {
        margin-right: auto;
    }
}


/* Footer logo is an image block now: undo the generic .wp-block-image radius / margin */
#footer-logo,
#footer-logo.wp-block-image {
    margin: 0;
    border-radius: 0;
}

#footer-logo img,
#footer-logo.wp-block-image img,
#footer-logo a {
    border-radius: 0 !important;
}
/* studio-template-new.css — BUILD 2026-08-01-A */
:root { --pf-build: "2026-08-01-A"; }

/* ═══════════════════════════════════════════════════════════════════════════
   PEMFiT Burnley Redesign Blocks — studio-template-new.css
   ───────────────────────────────────────────────────────────────────────────
   Translates the approved Burnley landing mockup into the PEMFiT design
   system defined in block-styles.css / theme.json:

     mockup teal    #3a4742  →  var(--forest-green)
     mockup cream   #efe3d0  →  var(--beige)
     mockup offwht  #f6f2ef  →  var(--off-white)
     mockup orange  #e8722a  →  var(--orange)
     Montserrat               →  var(--DM-Sans)
     Libre Caslon Italic      →  var(--Source-Serif-Italic)
     fixed 12px radii         →  var(--rounded-corners)
     fixed paddings           →  fluid gutter tokens

   Enqueued for BOTH the front end and the editor (same pattern as
   block-styles.css) — class names are identical on both sides, so editor
   canvas matches published output with no separate editor CSS.
   Selectors deliberately use descendant (not direct-child) combinators so
   the editor's wrapper elements never break layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared section scaffolding ─────────────────────────────────────────── */

.pf-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pf-section-gap, var(--thin-gutter));
    padding: var(--large-gutter) var(--thin-gutter);
    background-color: var(--off-white);
}

.pf-section-label {
    font-family: var(--DM-Sans);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--pf-leaf-color, var(--orange));
    text-align: center;
}

.pf-section-heading {
    font-family: var(--DM-Sans);
    font-size: var(--global-kb-font-size-sm);
    font-weight: 520;
    line-height: 1.15;
    color: var(--pf-leaf-color, var(--forest-green));
    text-align: center;
    max-width: 24ch;
    margin: 0;
}

/* Serif italic accent — em/i inside any Burnley heading */
.pf-section-heading em,
.pf-section-heading i,
.pf-hero-title em,
.pf-hero-title i,
.pf-panel-title em,
.pf-panel-title i {
    font-family: var(--Source-Serif-Italic);
    font-style: italic;
    font-weight: 450;
    color: var(--pf-heading-accent, var(--orange));
}

.pf-section-subtext {
    font-size: clamp(1.4rem, calc(1.1rem + (72 - 60) * (100vw - 400px) / (2000 - 400)), 1.8rem);
    line-height: 1.65;
    color: var(--pf-leaf-color, rgba(58, 71, 66, 0.8));
    text-align: center;
    max-width: 62ch;
    margin: 0;
}

.pf-section-footnote {
    font-size: 1.35rem;
    color: var(--pf-leaf-color, rgba(58, 71, 66, 0.7));
    text-align: center;
    margin: 0;
}
/* The footnote text sits in a plain <span>, and block-styles.css has a bare
   `span { color: forest-green }` rule — so the block's own Colour control
   (set on the <p>) never reached the text. Let it inherit. */
.pf-section-footnote > span:not([class]):not([style]) {
    color: inherit;
}

.pf-section-footnote.pf-footnote-pill {
    display: inline-block;
    padding: 1.1rem 2.2rem;
    border: 1px dashed var(--orange);
    border-radius: 10rem;
    background-color: var(--light-beige);
    color: var(--pf-leaf-color, var(--forest-green));
}

/* Dark-background sections recolour the shared header leaves */
.pf-split-feature .pf-section-heading,
.pf-value-props .pf-section-heading {
    color: var(--pf-leaf-color, var(--off-white));
}

/* ── Hero Split ─────────────────────────────────────────────────────────── */

.pf-hero-split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    gap: var(--pf-hero-gap, var(--medium-gutter));
    align-items: center;
    padding: var(--large-gutter) var(--medium-gutter);
    min-height: 82svh;
    background-color: var(--forest-green);
    overflow: hidden;
}

.pf-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Legibility scrim under the content even before an overlay is set */
.pf-hero-split::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(58, 71, 66, 0.82) 0%, rgba(58, 71, 66, 0.55) 55%, rgba(58, 71, 66, 0.25) 100%);
    pointer-events: none;
}

.pf-hero-overlay { z-index: 1; }

.pf-hero-content,
.pf-hero-panel {
    position: relative;
    z-index: 2;
}

.pf-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--thin-gutter);
    max-width: 62rem;
}

.pf-hero-title {
    font-family: var(--DM-Sans);
    font-size: var(--global-kb-font-size-md);
    font-weight: 520;
    line-height: 1.08;
    color: var(--pf-leaf-color, var(--off-white));
    margin: 0;
}

.pf-hero-sub {
    font-size: clamp(1.5rem, calc(1.2rem + (72 - 60) * (100vw - 400px) / (2000 - 400)), 1.9rem);
    line-height: 1.6;
    color: var(--pf-leaf-color, rgba(245, 242, 238, 0.88));
    max-width: 52ch;
    margin: 0;
}

.pf-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: center;
}

/* Frosted info panel */
.pf-hero-panel {
    background-color: var(--pf-panel-bg, rgba(245, 242, 238, 0.10));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 242, 238, 0.22);
    border-radius: var(--rounded-corners);
    padding: var(--thin-gutter);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 42rem;
    justify-self: end;
    width: 100%;
}

.pf-panel-title {
    font-family: var(--DM-Sans);
    font-size: 2rem;
    font-weight: 520;
    color: var(--pf-leaf-color, var(--off-white));
    margin: 0 0 0.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(245, 242, 238, 0.18);
}

.pf-panel-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.2rem 0.4rem;
    font-size: 1.45rem;
    color: var(--pf-leaf-color, rgba(245, 242, 238, 0.92));
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 242, 238, 0.10);
    transition: color 0.2s ease;
}

.pf-panel-row:last-child { border-bottom: none; }

a.pf-panel-row:hover { color: var(--orange); }

.pf-panel-dot {
    font-size: 0.7rem;
    color: var(--orange);
    flex-shrink: 0;
}

.pf-panel-row-label { flex: 1; }

.pf-panel-plus {
    color: rgba(245, 242, 238, 0.55);
    font-size: 1.7rem;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

a.pf-panel-row:hover .pf-panel-plus {
    color: var(--orange);
    transform: rotate(90deg);
}

/* ── Value Props Strip ──────────────────────────────────────────────────── */

.pf-value-props {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--pf-vp-gap, var(--medium-gutter));
    padding: var(--medium-gutter) var(--medium-gutter);
    background-color: var(--forest-green);
}

.pf-vp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
}

.pf-vp-icon {
    width: 5.2rem;
    height: 5.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.1rem;
    color: var(--pf-vp-icon, var(--orange));
    background-color: var(--pf-vp-icon-bg, rgba(243, 113, 34, 0.14));
    border: 1px solid rgba(243, 113, 34, 0.35);
}

.pf-vp-heading {
    font-family: var(--DM-Sans);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--pf-vp-text, var(--off-white));
    margin: 0;
}

.pf-vp-text {
    font-size: 1.35rem;
    line-height: 1.55;
    color: var(--pf-vp-text, rgba(245, 242, 238, 0.72));
    max-width: 30ch;
    margin: 0;
}

/* ── Membership Grid ────────────────────────────────────────────────────── */

.pf-membership-section { background-color: var(--off-white); }

.pf-membership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--thin-gutter);
    align-items: stretch;
    width: 100%;
    max-width: 130rem;
    margin-top: var(--thin-gutter);
}

.pf-m-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--pf-card-bg, #fff);
    border: 1px solid var(--dun);
    border-radius: var(--rounded-corners);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-m-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(58, 71, 66, 0.14);
}

.pf-m-card.pf-featured {
    border: 2px solid var(--pf-card-accent, var(--orange));
    box-shadow: 0 12px 34px rgba(243, 113, 34, 0.22);
}

.pf-m-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    padding: 0.45rem 1.3rem;
    border-radius: 10rem;
    background-color: var(--beige);
    color: var(--forest-green);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pf-m-header {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 2.2rem 2rem 1.8rem;
    background-color: var(--pf-card-header-bg, var(--forest-green));
}

.pf-m-card.pf-featured .pf-m-header {
    background-color: var(--pf-card-header-bg, var(--pf-card-accent, var(--orange)));
}

.pf-m-tier-name {
    font-family: var(--DM-Sans);
    font-size: 2rem;
    font-weight: 560;
    color: var(--pf-leaf-color, var(--off-white));
    margin: 0;
}

.pf-m-tagline {
    font-family: var(--Source-Serif-Italic);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--pf-leaf-color, rgba(245, 242, 238, 0.8));
}

.pf-m-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    padding: 2.2rem 2rem 0.4rem;
    color: var(--pf-leaf-color, var(--forest-green));
}

.pf-m-price-value {
    font-size: 3.4rem;
    font-weight: 620;
    line-height: 1;
}

.pf-m-price-suffix {
    font-size: 1.3rem;
    color: rgba(58, 71, 66, 0.6);
}

.pf-m-sessions {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 620;
    color: var(--pf-leaf-color, var(--orange));
    padding: 0 2rem 1.6rem;
}

.pf-m-saving {
    margin: 0 1.6rem 1.6rem;
    padding: 1rem 1.2rem;
    border-radius: calc(var(--rounded-corners) * 0.6);
    background-color: var(--light-beige);
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
    color: var(--pf-leaf-color, var(--forest-green));
}

.pf-m-features {
    list-style: none;
    margin: 0;
    padding: 0 2rem;
    flex: 1;                       /* pushes the CTA to a common baseline   */
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pf-m-feature {
    position: relative;
    padding-left: 2.4rem;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--pf-leaf-color, rgba(58, 71, 66, 0.85));
    list-style: none;
}

.pf-m-feature::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--orange);
    font-weight: 700;
}

/* Existing pemfit/cta-button, adapted as the card CTA */
.pf-m-card .wp-block-pemfit-cta-button,
.pf-m-card .cta {
    width: auto;
    display: block;
    margin: 2rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 620;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pf-m-card .cta-outline { color: var(--forest-green); }

/* block-styles.css already sets white-space:nowrap!important on .cta — that
   default is kept. Long labels are clipped with an ellipsis instead of
   wrapping or overflowing the pill. */
.pf-m-card .cta,
.pf-pack-card .cta {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Split Feature / Discovery ──────────────────────────────────────────── */

.pf-split-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--pf-sf-gap, var(--large-gutter));
    align-items: center;
    padding: var(--large-gutter) var(--medium-gutter);
    background-color: var(--forest-green);
}

.pf-sf-content {
    display: flex;
    flex-direction: column;
    gap: var(--thin-gutter);
    align-items: flex-start;
}

.pf-sf-content .pf-section-label,
.pf-sf-content .pf-section-heading { text-align: left; }

.pf-sf-content .pf-section-heading {
    max-width: 20ch;
    color: var(--pf-leaf-color, var(--off-white));
}

.pf-sf-content p {
    font-size: clamp(1.4rem, calc(1.1rem + (72 - 60) * (100vw - 400px) / (2000 - 400)), 1.7rem);
    line-height: 1.7;
    color: var(--pf-sf-text, rgba(245, 242, 238, 0.85));
    max-width: 54ch;
    margin: 0;
}

.pf-steps-card {
    background-color: var(--pf-steps-bg, rgba(245, 242, 238, 0.07));
    border: 1px solid rgba(245, 242, 238, 0.18);
    border-radius: var(--rounded-corners);
    padding: var(--thin-gutter);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    counter-reset: pf-step;        /* auto numbering — reorder-safe         */
}

.pf-step-item {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    counter-increment: pf-step;
}

.pf-step-num {
    flex-shrink: 0;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background-color: var(--pf-step-num-bg, var(--orange));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 650;
}

.pf-step-num::before { content: counter(pf-step); }

.pf-step-heading {
    font-family: var(--DM-Sans);
    font-size: 1.55rem;
    font-weight: 620;
    color: var(--off-white);
    margin: 0 0 0.4rem;
}

.pf-step-text {
    font-size: 1.3rem;
    line-height: 1.55;
    color: rgba(245, 242, 238, 0.72);
    margin: 0;
}

/* ── Session Packs ──────────────────────────────────────────────────────── */

.pf-pack-section { background-color: var(--beige); }

.pf-pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--thin-gutter);
    align-items: stretch;
    width: 100%;
    max-width: 120rem;
    margin-top: var(--thin-gutter);
}

.pf-pack-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    background-color: var(--pf-card-bg, var(--off-white));
    border: 1px solid var(--dun);
    border-radius: var(--rounded-corners);
    padding: 2.8rem 2rem 2.4rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-pack-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(58, 71, 66, 0.12);
}

.pf-pack-name {
    font-family: var(--DM-Sans);
    font-size: 1.55rem;
    font-weight: 620;
    color: var(--pf-leaf-color, var(--forest-green));
    margin: 0;
}

.pf-pack-price {
    font-size: 2.9rem;
    font-weight: 620;
    line-height: 1.1;
    color: var(--pf-leaf-color, var(--forest-green));
}

.pf-pack-per {
    font-size: 1.25rem;
    color: var(--pf-leaf-color, rgba(58, 71, 66, 0.6));
}

.pf-pack-card .wp-block-pemfit-cta-button,
.pf-pack-card .cta {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 1.25rem;
    font-weight: 620;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pf-pack-card .cta-outline { color: var(--forest-green); }

/* Pin the pack buttons' size on the front end too. style.css has
   `a:not(#copyright-info a):not(.ab-item):not(nav li a) { font-size: … }`,
   whose ID inside :not() outranks the 1.25rem above — the editor doesn't
   load style.css, so only the front end showed the larger text. */
.pf-pack-card.pf-pack-card.pf-pack-card .cta {
    font-size: 1.5rem !important; /* same as the comparison table buttons */
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.pf-faq-section { background-color: var(--off-white); }

.pf-faq-list {
    width: 100%;
    max-width: 78rem;
    margin-top: var(--thin-gutter);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.pf-faq-item {
    background-color: #fff;
    border: 1px solid var(--dun);
    border-radius: calc(var(--rounded-corners) * 0.8);
    overflow: hidden;
}

.pf-faq-q-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.8rem 2.2rem;
    cursor: pointer;
    list-style: none;              /* hide the default details marker       */
}

.pf-faq-q-row::-webkit-details-marker { display: none; }

.pf-faq-question {
    font-family: var(--DM-Sans);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--forest-green);
}

.pf-faq-toggle {
    font-size: 2rem;
    line-height: 1;
    color: var(--pf-faq-toggle-color, var(--orange));
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

details.pf-faq-item[open] .pf-faq-toggle { transform: rotate(45deg); }

.pf-faq-answer {
    padding: 0 2.2rem 2rem;
    font-size: 1.35rem;
    line-height: 1.65;
    color: rgba(58, 71, 66, 0.8);
}

/* Editor shows the answer always-open beneath the question */
.editor-styles-wrapper .pf-faq-item .pf-faq-answer { padding-top: 0.4rem; }

/* ── Team Grid ──────────────────────────────────────────────────────────── */

.pf-team-section { background-color: var(--light-beige); }

.pf-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--thin-gutter);
    width: 100%;
    max-width: 110rem;
    margin-top: var(--thin-gutter);
}

.pf-team-card {
    background-color: var(--pf-card-bg, #fff);
    border-radius: var(--rounded-corners);
    overflow: hidden;
    border: 1px solid var(--dun);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-team-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(58, 71, 66, 0.12);
}

.pf-team-photo {
    aspect-ratio: 4 / 5;
    background-color: var(--sage-grey);
    overflow: hidden;
}

.pf-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pf-team-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.25rem;
    color: rgba(58, 71, 66, 0.55);
    padding: 1rem;
    text-align: center;
}

.pf-team-body {
    padding: 1.8rem 2rem 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pf-team-name {
    font-family: var(--DM-Sans);
    font-size: 1.7rem;
    font-weight: 620;
    color: var(--forest-green);
    margin: 0;
}

.pf-team-bio {
    font-size: 1.3rem;
    line-height: 1.6;
    color: rgba(58, 71, 66, 0.75);
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .pf-membership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-pack-grid       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .pf-hero-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .pf-hero-panel { justify-self: stretch; max-width: none; }

    .pf-split-feature { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .pf-membership-grid,
    .pf-pack-grid,
    .pf-team-grid { grid-template-columns: 1fr; }

    .pf-value-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .pf-value-props { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FIXES — editor parity, em sizing, card padding, equal CTA heights
   ═══════════════════════════════════════════════════════════════════════════ */

/* All em elements at 1.05em across the Burnley blocks. block-styles.css sets
   1.04em on h1 em and 1.14em elsewhere, both at higher specificity than a
   bare element selector, hence the scoping. */
.pf-section em, .pf-section i,
.pf-hero-split em, .pf-hero-split i,
.pf-value-props em, .pf-value-props i,
.pf-split-feature em, .pf-split-feature i {
    font-size: 1.05em;
}

/* The editor adds vertical margins between top-level blocks that do not
   exist on the front end, leaving a visible gap between sections.
   Blocks whose own controls set a margin (inline margin-top / margin-bottom)
   are excluded — this used to zero every Margin top / bottom control in the
   editor. (Same rule, same fix, in studio-hero-v2.css.) */
.editor-styles-wrapper .block-editor-block-list__layout > [data-type^="pemfit/"]:not([style*="margin-top"]),
.editor-styles-wrapper .wp-block[data-type^="pemfit/"]:not([style*="margin-top"]) {
    margin-block-start: 0 !important;
}
.editor-styles-wrapper .block-editor-block-list__layout > [data-type^="pemfit/"]:not([style*="margin-bottom"]),
.editor-styles-wrapper .wp-block[data-type^="pemfit/"]:not([style*="margin-bottom"]) {
    margin-block-end: 0 !important;
}

/* ── Membership cards ────────────────────────────────────────────────────── */
/* One padding value drives every child, so the tick bullets line up with the
   rest of the card content instead of sitting hard against the edge. */

.pf-m-card {
    --pf-card-pad: 2rem;
}

.pf-m-header   { padding: 2.2rem var(--pf-card-pad) 1.8rem; }
.pf-m-price    { padding: 2.2rem var(--pf-card-pad) 0.4rem; }
.pf-m-sessions { padding: 0 var(--pf-card-pad) 1.6rem; }
.pf-m-saving   { margin: 0 var(--pf-card-pad) 1.6rem; }
.pf-m-features { padding: 0 var(--pf-card-pad); }

/* Tick sits at the content edge and the label is indented from it, so the
   whole list aligns with the price, sessions and savings strip above. */
.pf-m-feature {
    padding-left: 2.2rem;
}

.pf-m-feature::before {
    left: 0;
}

.pf-m-card .wp-block-pemfit-cta-button,
.pf-m-card .cta {
    margin: 2rem var(--pf-card-pad);
}

/* ── Equal CTA heights ───────────────────────────────────────────────────── */
/* Card CTAs previously varied in height because a wrapped label made the
   button taller. A shared min-height plus centred flex content keeps every
   button on the same baseline regardless of label length. */
.pf-m-card .cta,
.pf-pack-card .cta {
    display: flex;
    align-items: center;
    justify-content: center;
    /* A fixed height, not a minimum. The cards are flex columns, so a label
       that wraps to two lines in a narrow card grew the button past any
       min-height and the row of buttons stopped lining up. flex:none stops
       the column stretching or shrinking it. */
    height: var(--pf-cta-height, 4.8rem);
    min-height: var(--pf-cta-height, 4.8rem);
    flex: none;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
}

/* ── Membership feature list alignment ───────────────────────────────────── */
/* The tick sits exactly on the card's content edge, which is the same x as
   the left edge of the savings strip above it, so the list lines up with the
   rest of the card rather than hanging outside it. Centring the list as a
   group was wrong — it pushed the ticks away from that edge. */
.pf-m-features {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 0 var(--pf-card-pad);
}

.pf-m-feature {
    padding-left: 2.2rem;
}

.pf-m-feature::before {
    left: 0;
}

/* ── Footnote icons ──────────────────────────────────────────────────────── */
.pf-section-footnote .pf-icon {
    margin-right: 0.6em;
    color: var(--orange);
}

/* ── Value prop icons ────────────────────────────────────────────────────── */
.pf-vp-icon .pf-icon {
    font-size: 2.1rem;
    line-height: 1;
    color: inherit;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DEFAULT SPACING — so the cards look right before anyone touches a control
   ═══════════════════════════════════════════════════════════════════════════ */

/* The CTA was sitting hard against the bottom edge of the card. The card now
   carries its own bottom padding and the button's bottom margin is dropped,
   so the two don't double up. */
.pf-m-card,
.pf-pack-card {
    padding-bottom: var(--pf-card-pad, 2rem);
}

.pf-m-card .wp-block-pemfit-cta-button,
.pf-m-card .cta {
    margin: 2rem var(--pf-card-pad) 0;
}

/* Breathing room above and below the feature list. */
.pf-m-features {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CTA BUTTONS IN THE EDITOR
   The canvas loads block-styles.css too, so `.cta` arrives with
   `display:block`, `height:fit-content`, `flex:1 1 0%` and a 15px line box.
   In the editor the button is a RichText <a> inside a block wrapper, and the
   wrapper's own flex context was letting flex-basis win over height again —
   labels sat at the top of the pill and wrapped. These rules pin the same
   geometry the front end gets.
   ═══════════════════════════════════════════════════════════════════════════ */

.editor-styles-wrapper .wp-block-pemfit-cta-button,
.editor-styles-wrapper .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    line-height: 1.2;
    white-space: nowrap;
}

/* Full-width contexts keep their fixed height and centred label.
   Pack cards are NOT full width on the front end (the button is its label's
   width), so they're excluded here — this rule made them full width in the
   editor only. */
.editor-styles-wrapper .pf-m-card .cta,
.editor-styles-wrapper .pf-ct-cta-cell .cta {
    display: flex;
    width: 100%;
    height: var(--pf-cta-height, 4.8rem);
    padding-top: 0;
    padding-bottom: 0;
}

/* Hero buttons: same nowrap and same font size as the front end, so the
   canvas and the page agree. */
.editor-styles-wrapper .shv2-cta-row .cta,
.editor-styles-wrapper .pf-hero-ctas .cta {
    white-space: nowrap;
    font-size: var(--shv2-cta-font-size, 1.5rem);
    line-height: 1.2;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Letter-spacing on heading em elements.
   -1.05em was requested and applied previously, but it visibly broke the
   heading — at that size consecutive letters overlap almost completely
   rather than sitting closer together, which is what showed up as garbled
   text in "Everything included in each" on the live page. Reverted to a
   normal tight-kerning value. Change this single number to anything else if
   a different amount of tightening was actually wanted — just not anything
   close to -1em, which will reproduce the overlap regardless of context.
   ═══════════════════════════════════════════════════════════════════════════ */
.pf-section-heading em,
.pf-section-heading i,
.pf-hero-title em,
.pf-hero-title i,
.pf-panel-title em,
.pf-panel-title i {
    letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Font Awesome vertical alignment
   FA glyphs sit slightly differently on the font baseline than the
   surrounding text depending on which icon it is, so a plain inline icon
   next to text (ticks, footnote icons, etc.) doesn't always look centred.
   Setting them to inline-flex with their own centring makes every icon
   align the same way regardless of the specific glyph's internal metrics.
   ═══════════════════════════════════════════════════════════════════════════ */
/* .pf-icon covers footnotes and value-prop items — both already emit that
   class. It does NOT cover .pf-m-feature's tick, which is a plain CSS
   ::before character rather than a Font Awesome element, so is unaffected
   by this and needs no change. */
.pf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.1em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Typography from the global controls layer — pemfit-global-attributes.php
   ───────────────────────────────────────────────────────────────────────────
   REPLACES a dynamically-generated per-instance <style> tag that was
   injected into content on every page load. That approach broke in
   production: WordPress's content pipeline (kses stripping the tag for
   users without unfiltered_html, SEO plugins reading rendered content with
   PHP's strip_tags — which removes tags but NOT the text they contained —
   or any full-page-HTML processor) could leave the raw CSS text behind as
   visible page content.

   This is STATIC — written once, shipped in the ordinary stylesheet, never
   regenerated — and reads its values from CSS custom properties that PHP
   merges into an element's own style="" attribute, using the exact same
   safe merge already used for padding/margin/border (which has never had
   this problem, because inline style is never "content" to anything).

   The attribute selector means these rules are completely inert for every
   element on the site that was never touched: [style*="--pf-t-font-size"]
   simply never matches unless PHP put that property there.

   The selector is doubled ([attr][attr]) to push specificity to (0,2,x) —
   this theme's own block-styles.css carries a large number of
   `font-size: ... !important` rules (fluid clamp() sizing on many
   components), some of which land at the SAME (0,1,1) specificity a single
   attribute selector would have. Two !important declarations at equal
   specificity are decided by source order, and this file cannot rely on
   always loading after block-styles.css — colour worked with the single
   form because that stylesheet has far fewer competing !important color
   rules than font-size ones; font-size did not, for exactly that reason.
   Doubling costs nothing and removes the dependency on load order
   entirely — verified directly against a simulated equal-specificity
   competing rule.
   ═══════════════════════════════════════════════════════════════════════════ */

[style*="--pf-t-font-size"][style*="--pf-t-font-size"],
[style*="--pf-t-font-size"][style*="--pf-t-font-size"] :is(h1, h2, h3, h4, h5, h6, p, li, span, a, div, strong, em, th, td):not(.pf-size):not(.pf-size *) {
    font-size: var(--pf-t-font-size) !important;
}
[style*="--pf-t-font-weight"][style*="--pf-t-font-weight"],
[style*="--pf-t-font-weight"][style*="--pf-t-font-weight"] :is(h1, h2, h3, h4, h5, h6, p, li, span, a, div, strong, em, th, td):not(strong):not(b):not(strong *):not(b *) {
    font-weight: var(--pf-t-font-weight) !important;
}
[style*="--pf-t-line-height"][style*="--pf-t-line-height"],
[style*="--pf-t-line-height"][style*="--pf-t-line-height"] :is(h1, h2, h3, h4, h5, h6, p, li, span, a, div, strong, em, th, td) {
    line-height: var(--pf-t-line-height) !important;
}
[style*="--pf-t-letter-spacing"][style*="--pf-t-letter-spacing"],
[style*="--pf-t-letter-spacing"][style*="--pf-t-letter-spacing"] :is(h1, h2, h3, h4, h5, h6, p, li, span, a, div, strong, em, th, td) {
    letter-spacing: var(--pf-t-letter-spacing) !important;
}
[style*="--pf-t-color"][style*="--pf-t-color"],
[style*="--pf-t-color"][style*="--pf-t-color"] :is(h1, h2, h3, h4, h5, h6, p, li, span, a, div, strong, em, th, td):not(.pf-color):not(.pf-color *) {
    color: var(--pf-t-color) !important;
}
[style*="--pf-t-text-align"][style*="--pf-t-text-align"],
[style*="--pf-t-text-align"][style*="--pf-t-text-align"] :is(h1, h2, h3, h4, h5, h6, p, li, span, a, div, strong, em, th, td) {
    text-align: var(--pf-t-text-align) !important;
}

/* Pseudo-element typography — a separate --pf-t-pe-* namespace, since a
   pseudo-element (like .pf-m-feature's tick) and a sibling part targeting
   the same real host element (its label) would otherwise collide on the
   same custom property. Extend this list if a future block needs a
   pseudo-element part with a property beyond colour. */
[style*="--pf-t-pe-color"][style*="--pf-t-pe-color"]::before,
[style*="--pf-t-pe-color"][style*="--pf-t-pe-color"]::after {
    color: var(--pf-t-pe-color) !important;
}
[style*="--pf-t-pe-font-size"][style*="--pf-t-pe-font-size"]::before,
[style*="--pf-t-pe-font-size"][style*="--pf-t-pe-font-size"]::after {
    font-size: var(--pf-t-pe-font-size) !important;
}