/* Theme Name: PEMFiT
Theme URI: https://pemfit.co.uk
Author: Oliver Foxley
Author URI: https://foxley.studio
Description: A bespoke Foxley Studio site crafted to look slick and stay slick
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pemfit
*/
/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

main {
    display: block;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: var(--Hanken-Grotesk);
    font-size: 1em;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp {
    font-family: var(--Hanken-Grotesk);
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -.25em;
}

sup {
    top: 0em;
}

img {
    border-style: none;
}

picture {
    display: contents;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: .35em .75em .625em;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

/* ***** Elad Shechter's RESET ******
/* ** box sizing border-box for all elements ** */
*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    text-decoration: none!important;
    color: inherit;
    cursor: pointer;
}

button {
    background-color: transparent;
    color: inherit;
    border-width: 0;
    padding: 0;
    cursor: pointer;
}

figure {
    margin: 0;
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin: 0;
}

ul,
ol,
dd {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

p {
    margin: 0;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 850px;
}

cite {
    font-style: normal;
}

fieldset {
    border-width: 0;
    padding: 0;
    margin: 0;
}

a:not(#copyright-info a):not(.ab-item):not(nav li a),
figcaption {
    font-size: clamp(1.4rem, calc(1.1rem + (72 - 60) * (100vw - 400px) / (2000 - 400)), 1.8rem);
    font-family: var(--DM-Sans);
}

.cta,
.info-button {
    padding-left: clamp(2.2rem, calc(1.6rem + (70 - 60) * (100vw - 400px) / (2000 - 400)), 3rem);
    padding-right: clamp(2.2rem, calc(1.6rem + (70 - 60) * (100vw - 400px) / (2000 - 400)), 3rem);
    padding-top: clamp(1.2rem, calc(0.4rem + (70 - 60) * (100vw - 400px) / (2000 - 400)), 1.6rem);
    padding-bottom: clamp(1.2rem, calc(0.4rem + (70 - 60) * (100vw - 400px) / (2000 - 400)), 1.6rem);
    background-color: var(--orange);
    border-radius: 10rem;
    color: #fff;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    display: block;
    white-space: nowrap!important;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    flex: 1;
    text-align: center;
    transition: background-color 0.2s ease;
}

@font-face {
    font-family: "DM-Sans-Regular";
    src: url("fonts/DMSans-VariableFont.woff2") format("woff2 supports variations"),
         url("fonts/DMSans-VariableFont.woff2") format("woff2-variations");
    font-weight: 100 1000;
}

@font-face {
    font-family: "Source-Serif-4-Italic";
    src: url("fonts/SourceSerif4-Italic-VariableFont.woff2") format("woff2 supports variations"),
         url("fonts/SourceSerif4-Italic-VariableFont.woff2") format("woff2-variations");
    font-weight: 100 1000;
}

@-ms-viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
    min-zoom: 1;
    max-zoom: 1;
    user-zoom: fixed;
}

@-o-viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
    min-zoom: 1;
    max-zoom: 1;
    user-zoom: fixed;
}

@viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
    min-zoom: 1;
    max-zoom: 1;
    user-zoom: fixed;
}

:root {
    --DM-Sans: "DM-Sans-Regular", Arial, Helvetica, sans-serif;
    --Source-Serif-Italic: "Source-Serif-4-Italic",  Arial, Helvetica, sans-serif;
    --sage-grey: #D0D1C6;
    --forest-green: #3A4742;
    --off-white: #F5F2EE;
    --beige: #F0E0C9;
    --orange: #F37122;
    --light-beige: #F8EBDD;
    --dun: #D6C9B7;
    --brown: #856D5C;
    --thin-gutter: clamp(1rem, calc(1rem + (100 - 83) * (100vw - 400px) / (2000 - 400)), 2.5rem);
    --medium-gutter: clamp(2rem, calc(1.8rem + (100 - 40) * (100vw - 400px) / (2000 - 400)), 5.5rem);
    --large-gutter: clamp(4rem, calc(2.5rem + (100 - 10) * (100vw - 400px) / (2000 - 400)), 14rem);
    --rounded-corners: clamp(10px, calc(10px + (20 - 10) * (100vw - 320px) / (1600 - 320)), 20px);
}

html {
    touch-action: manipulation;
    background-color: #ffffff;
    font-size: 62.5%;
    pointer-events: all;
}

/* Safari 6.1-10.0 */
@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) {
    @media {
        h1,
        h2,
        input {
            -webkit-font-smoothing: antialiased;
        }
    }
}

/* Safari 10.1+ */
@media not all and (min-resolution: .001dpcm) {
    @media {
        @supports (-webkit-appearance: none) {
            input {
                -webkit-font-smoothing: antialiased;
            }
        }
    }
}

::-moz-selection {
    background-color: var(--orange);
    color: #000;
}

::selection {
    background-color: var(--orange);
    color: #000;
}

::-moz-selection:not(h1,h2,h3,h4,h5,h6,p,a,div,span,time) {
    background-color: transparent;
}

::selection:not(h1,h2,h3,h4,h5,h6,p,a,div,span,time) {
    background-color: transparent;
}

iframe {
    outline: none!important;
    border: none!important;
}

html,
body {
    width: 100%;
    height: 100%;
    background-color: var(--off-white);
}

body {
    -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
    from {
        padding: 0;
    }

    to {
        padding: 0;
    }

    /* Android checkbox hack */
}

body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    font-size: clamp(1.6rem, calc(1.1rem + (70 - 60) * (100vw - 400px) / (2000 - 400)), 2.1rem);
    font-family: var(--DM-Sans);
    font-weight: 450;
    height: auto;

    /* background: -o-linear-gradient(#F5F2EE, transparent),
        -o-linear-gradient(bottom right, #D0D1C6, transparent),
        -o-linear-gradient(bottom left, #F0E0C9, transparent)!important;
    background: -webkit-gradient(linear, left top, left bottom, from(#F5F2EE), to(transparent)),
        -webkit-gradient(linear, right bottom, left top, from(#D0D1C6), to(transparent)),
        -webkit-gradient(linear, left bottom, right top, from(#F0E0C9), to(transparent))!important;
    background: linear-gradient(#F5F2EE, transparent),
        linear-gradient(to top left, #D0D1C6, transparent),
        linear-gradient(to top right, #F0E0C9, transparent)!important;
    background-blend-mode: screen; */
}

.page-template-testimonials #content-wrap {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.page-template-testimonials.loaded #content-wrap {
    opacity: 1;
    pointer-events: all;
}

.flex {
    display: flex!important;
}

.grid {
    display: grid!important;
}

/* navbar container */
#menu-container {
    height: 90px;
    padding: 0 var(--thin-gutter);
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    justify-items: left;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    transition: top 0.3s ease;
}

.page-template-studio-microsite-v2 #menu-container {
    z-index: 10002;
}

#menu-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(242, 237, 231, 0.85);
    -webkit-backdrop-filter: blur(24px) brightness(1.2) contrast(1.2);
    backdrop-filter: blur(24px) brightness(1.2) contrast(1.2);
    z-index: -1;
}

#menu-container.scrolled:before {
    box-shadow: 0px 1px 10px -8px rgba(0,0,0,1);
}

.nav-container {
    height: 100%;
}

#menu-container.nav-up {
    top: -90px;
}

.main-menu {
    margin: auto;
    height: 100%;
}

.main-menu ul:not(.dropdown-menu) {
    height: 100%;
}

.main-menu ul:not(.dropdown-menu) li,
.accordion-label {
    display: inline-block;
    height: 100%;
    position: relative;
}

.accordion-label {
    padding: 0 0.5rem;
}

.main-menu ul li a {
    padding: 1rem;
    width: 100%;
    display: block;
}

.main-menu ul:not(.dropdown-menu) li a:not(#socials a),
.main-menu ul li.dropdown label {
    padding: 1rem 1.5rem;
    transition: opacity 0.2s ease, background-color 0.3s ease;
    border-radius: 10rem;
    grid-area: 1 / 2 / 2 / 3;
    height: 100%;
    line-height: 1;
    align-items: center;
    display: flex;
    cursor: pointer;
}

.main-menu ul:not(.dropdown-menu) li {
    border-radius: var(--rounded-corners) var(--rounded-corners) 0 0;
}

.main-menu ul:hover li a:not(#socials a),
.main-menu ul:hover li label {
    opacity: 0.6;
}

.main-menu ul li:hover a:not(#socials a),
.main-menu ul li:hover label {
    /* background-color: var(--forest-green); */
    opacity: 1;
}

ul.dropdown-menu,
ul.dropdown-menu li {
    display: block;
}

ul.dropdown-menu {
    position: absolute;
    left: -1rem;
    top: 100%;

    /* background-color: rgba(242, 237, 231, 0.75) */
    background-color: rgba(58, 71, 66, 0.85);
    -webkit-backdrop-filter: blur(24px) brightness(1.2) contrast(1.2);
    backdrop-filter: blur(24px) brightness(1.2) contrast(1.2);
    padding: 1.5rem 0;
    border-radius: 1.5rem;

    /* margin-left: -1.5rem; */
    /* -webkit-box-shadow: 0px 3px 16px -11px rgba(0,0,0,1);
    box-shadow: 0px 3px 16px -11px rgba(0,0,0,1); */
    box-shadow: 0,0 8px 33px #0000000d,0 4px 18px #0000000a,0 2px 10px #00000008;
}

ul.dropdown-menu:not(.dropdown-submenu) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.submenu-container {
    position: absolute;
    left: 100%;
    top: -1.5rem;
}

.submenu-container {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

ul.dropdown-submenu {
    top: 0;
    left: 0;
    margin-left: 1.4rem;
    position: relative;
}

.menu-arrow {
    position: absolute;
    width: 100%;
    margin-top: -29px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.depth-1 .menu-arrow {
    margin-top: 0;
    left: 100%;
    top: 50%;
    margin-left: -1px;
}

.menu-arrow-svg {
    position: absolute;
    width: 22px;
    height: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.depth-1 .menu-arrow-svg {
    transform: none;
    transform: translateY(-50%) rotate(-90deg);
    left: 0;
}

li.depth-2 {
    display: block!important;
}

/* .menu-arrow-svg path {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, 0.7));
            filter: drop-shadow( -1px -1px 12px rgba(0, 0, 0, 0.6));
    border-top: 1px solid #ccc
} */
/* ul.dropdown-menu:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: rgba(58, 71, 66, 0.85);
    border-width: 15px;
    margin-left: -15px;
} */
ul.dropdown-menu li {
    white-space: nowrap;
}

ul.dropdown-menu li,
ul.dropdown-menu li a {
    display: block;
    width: 100%;

    /* color: #fff; */
    color: #fff;
}

.main-menu ul.dropdown-menu li a,
.main-menu ul.dropdown-menu li label {
    padding: 1rem 3rem!important;
}

@media (hover: hover) and (min-width: 992px) {
    .main-menu ul li:hover ul.dropdown-menu,
    .main-menu ul li.depth-1:hover .submenu-container {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transition: opacity 0.3s ease;
    }

    .submenu-container:hover,
    .main-menu ul li.depth-1:hover .menu-arrow {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transition: opacity 0.3s ease visibility 0s linear 0.3s;
    }

    .main-menu ul li:hover .menu-arrow:not(.depth-1 .menu-arrow) {
        opacity: 1;
    }

    /* Dim only direct dropdown items */
    .main-menu ul.dropdown-menu:hover > li > a:not(#socials a),
    .main-menu ul.dropdown-menu:hover > li > label {
        opacity: 0.6;
    }

    /* Restore hovered dropdown item */
    .main-menu ul.dropdown-menu > li:hover > a:not(#socials a),
    .main-menu ul.dropdown-menu > li:not(.depth-2):hover > label {
        opacity: 1;
    }

    /* Submenu dim */
    .main-menu ul.dropdown-submenu:hover > li > a {
        opacity: 0.6;
    }

    /* Submenu highlight */
    .main-menu ul.dropdown-submenu > li:hover > a {
        opacity: 1;
    }
}

.accordion-checkbox {
    display: none;
}

#logo {
    max-width: 130px;
    min-width: 50px;
    width: calc(8rem + (100 - 45) * (100vw - 400px) / (2000 - 400));
}

.page-template-studio-microsite-v2 footer {
    z-index: 10001;
    background: var(--off-white);
}

#footer-logo {
    max-width: 200px;
    min-width: 100px;
    width: calc(10rem + (100 - 45) * (100vw - 400px) / (2000 - 400));
}

#logo a,
#footer-logo a {
    display: block;
    padding: 1rem;
}

#logo img,
#footer-logo img {
    display: block;
    width: 100%;
    margin: 0;
}

h1 {
    font-family: var(--DM-Sans);
    font-size: clamp(5rem, calc(4rem + (100 - 10) * (100vw - 400px) / (2000 - 400)), 13rem);
    font-weight: 520;
    letter-spacing: clamp(-0.3rem, calc(-0.36vw + (100 - 96) * (100vw - 400px) / (2000 - 400)), -0.1rem);
    margin-bottom: 3rem;
    align-self: center;
    line-height: 1;
}

/* h1:not(.wp-block-kadence-advancedheading):not(.kadence-advancedheading-text) {
    padding-left: 6%;
} */
.spacer-standard {
    height: var(--large-gutter);
}

h2 {
    font-family: var(--DM-Sans);
    font-size: clamp(3rem, calc(2.4rem + (100 - 80) * (100vw - 400px) / (2000 - 400)), 6rem);
    font-weight: 500;

    /* letter-spacing: calc(-0.05vw + (100 - 96) * (40vw - 400px) / (2000 - 400)) */
    letter-spacing: -0.03em;
    margin-bottom: 3rem;
    line-height: 1.3;
}

h3 {
    font-family: var(--DM-Sans);
    font-size: clamp(2.3rem, calc(2rem + (100 - 86) * (100vw - 400px) / (2000 - 400)), 4rem);
    font-weight: 530;
    letter-spacing: clamp(-0.1rem, -0.08vw, -0.1rem);
    margin-bottom: 3rem;
    line-height: 1.3;
}

h4 {
    font-family: var(--DM-Sans);
    font-size: 2.2rem;
    font-weight: 530;
    letter-spacing: clamp(-0.08rem, -0.07vw, -0.1rem);
    margin-bottom: 3rem;
    line-height: 1.3;
}

h1 .alternate-title,
h1 em {
    font-family: var(--Source-Serif-Italic);
    font-size: clamp(7.15rem, calc(4.25rem + (100 - 5) * (100vw - 400px) / (2000 - 400)), 14.9rem);
    display: block;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    letter-spacing: clamp(-0.6rem, calc(-0.45vw + (100 - 96) * (100vw - 400px) / (2000 - 400)), -0.15rem);
}

ul:not(.main-menu ul):not(.opening-hours):not(.four-card-pricing ul) {
    padding-left: 2rem;
}

ul li {
    list-style: disc;
    line-height: 2;
}

.logged-in #menu-container {
    margin-top: 32px;
}

#menu-container .cta {
    margin-left: auto;
    margin-right: 1rem;
}

/* .single main {
    max-width: 1200px;
    width: 60%;
    margin: 150px auto 150px auto;
}

.single main img {
    margin-bottom: 3rem;
    max-width: 100%;
} */
.expand {
    width: 100%;
}

#menu-toggle {
    display: none!important;
}

#main-nav-check {
    display: none;
    pointer-events: none;
}

li#socials {
    position: fixed;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 50svh;
    transform: translateY(-50%);
    right: calc(var(--thin-gutter) + 1rem);
    width: 44px;
    padding: 1rem;
    height: auto;
    background-color: rgba(245, 242, 238, 0.7);
    -webkit-backdrop-filter: blur(24px) brightness(1.2) contrast(1.4);
    backdrop-filter: blur(24px) brightness(1.2) contrast(1.4);
    border-radius: 10rem;
    z-index: 10;
}

li#socials a {
    display: flex;
    flex-direction: column;
    width: 40px;
    height: 40px;
}

li#socials a img {
    margin: auto;
}

/* centered-info block */
.centered-info {
    text-align: center;
    flex-direction: column;
    padding: 100px var(--thin-gutter);
}

.centered-info p {
    margin: 0 auto;
}

.review-score {
    line-height: 1;
    margin: 0 auto;
}

.review-score h3 {
    margin: 0;
}

.review-score span {
    margin: 0 var(--thin-gutter);
}

.review-score span img {
    align-self: center;
    width: 20px;
    height: 20px;
}

/* testimonials template base styles */
body.page-template-testimonials {
    background-color: var(--dun);
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

/* .sp-testimonial-pro {
    border-radius: var(--rounded-corners)!important;
} */
/* @media screen and (max-width: 1920px) {
    body {
        font-size: 2.2rem;
    }
} */
/* testimonials drop down select menus */
.select-menu {
    /* max-width: 330px; */
    margin: 50px auto;
    line-height: 1;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.select-menu .select-btn {
    display: flex;
    width: auto;
    width: 220px;
    background: #fff;
    padding: 8px 16px;
    position: relative;
    font-size: 15px;
    height: 36px;
    font-weight: 400;
    border-radius: 100px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.select-menu .options {
    position: absolute;
    width: auto;
    overflow-y: auto;
    max-height: 295px;
    padding: 10px;
    margin-top: 10px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
    animation-duration: 0.35s;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.35s;
    -webkit-animation-fill-mode: both;
}

.select-menu .options li {
    display: flex;
    cursor: pointer;
    padding: 6px 0;
    border-radius: 8px;
    align-items: center;
    background: #fff;
}

.select-menu .options li a {
    background: none!important;
    border: none!important;
    color: #000!important;
}

.select-menu .options .option:hover {
    background: #f2f2f2;
}

.select-menu .options .option .option-text {
    font-size: 18px;
    color: #333;
}

.select-btn:after {
    content: '\203A';
    display: inline-block;
    transform: rotate(90deg);
    font-size: 25px;
    transition: 0.3s;
    transform-origin: 50% 50%;
}

.select-menu.active .select-btn:after {
    transform: rotate(-90deg);
}

.select-menu.active .options {
    display: block;
    opacity: 0;
    z-index: 10;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-duration: 0.4s;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0, 30px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0, 30px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes fadeInDown {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    to {
        transform: translate3d(0, 20px, 0);
        opacity: 0;
    }
}

@keyframes fadeInDown {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    to {
        transform: translate3d(0, 20px, 0);
        opacity: 0;
    }
}

/* cookie consent banner button */
.cky-revisit-bottom-left {
    bottom: var(--thin-gutter)!important;
    right: var(--thin-gutter)!important;
    margin: 1rem!important;
}

/* @media screen and (max-width: 1400px) {
    .single main {
        width: 70%;
    }
} */
@media screen and (max-width: 1200px) {
    #menu-container {
        grid-template-columns: auto auto auto;
    }
}

@media screen and (max-width: 1024px) {
    body {
        font-size: 1.6rem;
    }

    h4 {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 991px) {
    #menu-container {
        height: 70px;
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    }

    #menu-container:before {
        background: var(--off-white);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .nav-container {
        position: absolute;
        width: 100%;
        top: 70px;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        box-shadow: none;

        /* border-radius: 2.8rem; */
        opacity: 0;
        pointer-events: none;
        transition: box-shadow 0.3s ease-in-out 0.1s, opacity 0s linear 0.3s;
    }

    #logo {
        order: 1;
    }

    #menu-toggle {
        display: block!important;
        position: relative;
        padding: 2rem;
        width: 2rem;
        height: 2rem;
        margin-left: auto;
        justify-content: center;
        order: 4;
    }

    #main-nav-check {
        order: 2;
    }

    #menu-toggle:before,
    #menu-toggle:after {
        content: '';
        width: 20px;
        height: 2px;
        background-color: #000;
        position: absolute;
        left: 1rem;
        align-self: center;
        top: 1.2rem;
    }

    #menu-toggle:before {
        transform: translateY(3px);
    }

    #menu-toggle:after {
        transform: translateY(12px);
    }

    #menu-container .cta {
        order: 3;
        margin: 0;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

    #main-nav-check:checked ~ .nav-container {
        opacity: 1;
        box-shadow: inset 0 0 0 var(--thin-gutter) var(--off-white);
        transition: box-shadow 0.3s ease-in-out;
    }

    #main-nav-check:checked ~ .nav-container .main-menu {
        opacity: 1;
        pointer-events: all;
        transform: translate3d(0,0,0);
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    .main-menu {
        position: relative;
        height: auto;
        z-index: 1;
        width: calc(100% - var(--thin-gutter) * 2);
        top: 0;
        border-radius: var(--rounded-corners);
        padding: 2rem 0;
        background-color: rgba(255, 255, 255, 0.7);
        -webkit-backdrop-filter: blur(24px) brightness(1.1) contrast(1.3);
        backdrop-filter: blur(24px) brightness(1.1) contrast(1.3);
        transform: translate3d(0,-2rem,0);

        /* background: linear-gradient(to right, rgba(222, 224, 216, 0.9) 0%,rgba(203, 204, 195, 0.8) 100%) */
        opacity: 0;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        pointer-events: none;
    }

    .main-menu ul li {
        padding: 0;
        width: 100%;
    }

    li#socials {
        flex-direction: row;
        position: relative;
        padding: 1rem 4.5vw 0 4.5vw;
        justify-content: space-between;
        align-items: center;
        max-width: 400px;
        background: none;
        transform: none;
        -webkit-backdrop-filter: unset;
        backdrop-filter: unset;
        right: auto;
        top: auto;
        width: auto;
        justify-content: space-between;
    }

    li#socials a {
        display: inline-flex;
        width: 46px;
        height: 46px;
        padding: 1rem!important;
        align-items: center;
        justify-content: center;

        /* background-repeat: no-repeat;
        background-position: 50% 50%; */
    }

    li#socials a img {
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: 50% 50%;
        object-position: 50% 50%;
    }

    #linked-in img {
        margin: 0!important;
        margin-top: -3px!important;
    }

    /* #facebook {
        background-image: url('graphics/facebook.svg');
        background-size: 31%;
    }
    #x {
        background-image: url('graphics/x.svg');
        background-size: 55%;
        margin-top: 1px;
    }
    #instagram {
        background-image: url('graphics/instagram.svg');
        background-size: 51.1%;
        margin-top: 1px;
    }
    #linked-in {
        background-image: url('graphics/linked-in.svg');
        background-size: 47%;
        margin-top: -1px
    }
    #youtube {
        background-image: url('graphics/youtube.svg');
        background-size: 69%;
        margin-top: 1px;
        margin-right: 1rem;
    } */
    .main-menu ul li a {
        font-weight: 550;
        padding: 1.8rem 8% !important;

        /* font-size: 2rem */
        display: block;
        color: #000;
    }

    /* .main-menu ul li:hover ul.dropdown-menu {
        opacity: 0;
        pointer-events: none;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    } */
    .accordion-label {
        padding: 1.8rem 8% !important;
    }

    .menu-arrow {
        display: none;
    }

    .dropdown-container {
        position: relative;
        width: 100%;
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
        transition: grid-template-rows 0.3s ease, opacity 0.3s ease, -ms-grid-rows 0.3s ease;
    }

    .accordion-checkbox:checked ~ .dropdown-container {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    ul.dropdown-menu {
        position: relative;
        top: 0;
        pointer-events: none;
        width: 100%;

        /* background-color: rgba(242, 237, 231, 0.75); */
        background-color: rgba(58, 71, 66, 0.75);
        box-shadow: none;
        margin: 0;
        border-radius: 0;
        height: auto;
        visibility: visible!important;
        left: 0;
        padding: 0;
        transform-origin: 50% 0;
        overflow: hidden;
        opacity: 1!important;
    }

    .main-menu ul.dropdown-menu li a:not(#socials a) {
        color: #fff;
    }

    .main-menu ul:not(.dropdown-menu) li,
    .accordion-label {
        display: block;
        height: auto;
    }

    .main-menu ul:not(.dropdown-menu) li:not(.depth-2):first-of-type {
        padding: 1.5rem 0 0 0;
    }

    .main-menu ul:not(.dropdown-menu) li:not(.depth-2):last-of-type {
        padding: 0 0 1.5rem 0;
    }

    .accordion-checkbox:checked ~ .dropdown-container ul.dropdown-menu {
        pointer-events: all;
        visibility: visible;
    }

    .submenu-container {
        position: relative;
        left: 0;
        width: auto;
        text-indent: 5vw;
        top: 0;
        opacity: 1;
    }

    ul.dropdown-submenu li {
        background: none;
    }

    .accordion-checkbox:checked ~ .submenu-container {
        height: auto;
    }

    .accordion-checkbox:checked ~ .submenu-container ul.dropdown-submenu {
        opacity: 1;
        pointer-events: all;
    }

    .main-menu ul.dropdown-menu li a,
    .main-menu ul.dropdown-menu li label {
        padding: 1rem 8%!important;
    }
}

@media screen and (max-height: 500px) {
    #menu-container {
        position: absolute;
    }
}

@media screen and (max-width: 850px) {
    #footer-links {
        gap: 4rem;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 782px) {
    .logged-in #menu-container {
        margin-top: 46px;
    }
}

@media screen and (max-width: 767px) {
    #disclaimer {
        margin-top: 2rem;
    }

    /* .single main {
        width: 82%;
    } */
}

@media screen and (max-width: 600px) {
    #menu-container {
        height: 60px;
    }

    .nav-container {
        top: 60px;
    }

    #menu-container .cta,
    .cta {
        padding: 1rem 1.4rem!important;
        font-size: 1.4rem!important;
    }

    .main-menu {
        /* top: 60px */
    }

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

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

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

@media screen and (max-width: 480px) {
    #menu-toggle {
        margin-right: -0.6rem;
    }

    #logo {
        margin-left: -0.6rem;
    }

    #footer-info {
        margin-top: 4rem;
        padding: 2rem;
        border-radius: var(--rounded-corners);
    }

    footer {
        margin: 0;
    }

    #footer-background {
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
    }

    #footer-background figure {
        border-radius: var(--rounded-corners);
    }

    #footer-links {
        gap: 4rem 1rem;
    }

    #copyright-info:before {
        border-radius: 0;
    }

    /* .cta {
        white-space: wrap;
        line-height: 1.3;
    } */
    /* #find-studio:before {
        white-space: wrap;
    } */
}

/* @media screen and (max-width: 442px) {
    #find-studio {
        text-align: left;
        padding-left: 1rem;
    }
    #find-studio .cta {
        align-self: flex-start;
    }
} */
/* @media screen and (max-width: 380px) {
    .cta {
        padding: 0.8rem 1.2rem;
        font-size: 1.3rem;
    }
} */
/* 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;
}