/* https://piccalil.li/blog/a-css-project-boilerplate/ */

.transform {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}

.blur, .filter {
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
}

/* Admin bar offset now lives in block--pe-nav.css (needs to come after base .pe-nav rules) */

/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */

textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */

:target {
  scroll-margin-block: 5ex;
}

body {
  margin: 0;
}

/* https://www.zachleat.com/web/stable-scrollbar-gutters/ */

html {
	overflow-x: hidden;
	overflow-y: scroll;
}

@supports (scrollbar-gutter: stable) {
	html {
		overflow-y: auto;
		scrollbar-gutter: stable;
	}
}

/* ==========================================================================
   Typography — single source of truth
   Sizes:   src/design-tokens/text-sizes.json
   Fonts:   src/design-tokens/fonts.json
   Leading: src/design-tokens/text-leading.json
   ========================================================================== */

body {
  font-family: var(--font-base);
  font-size: var(--size-step-0);
  font-weight: 300;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); }

/* ---------- Type styles ---------- */

/* Huge — hero / display / prices */

.type-huge {
  font-family: var(--font-heading);
  font-size: var(--size-step-4);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
}

.type-big-heading,
h1, .h1, h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--size-step-3);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
}

/* Heading — section titles, card names, FAQ questions */

.type-heading,
 h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--size-step-2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Body — paragraphs, descriptions, answers */

.type-body,
p, li, dd, blockquote {
  font-size: var(--size-step-0);
  font-weight: 300;
  line-height: 1.75;
}

/* Small — meta, captions, secondary copy, buttons, links */

.type-small,
h4, h5, h6, .h4, .h5, .h6 {
  font-size: var(--size-step-00);
  font-weight: 400;
  line-height: 1.5;
}

/* Eyebrow — uppercase label */

.type-eyebrow {
  font-size: var(--size-step-00);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Helpers ---------- */

.uppercase,
.text-uppercase { text-transform: uppercase; }

/* Heading em accent (italic + green) */

.type-heading em,
.type-huge em,
h2 em, h3 em {
  font-style: italic;
  color: var(--color-primary);
}

:root {
  --gutter: var(--space-s-l);
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --leading-standard: 1.5;

  --nav-height: 64px;
  --double-nav-height: 128px;
  --flow-space: var(--space-s);
  --flow-space--half: calc( var(--flow-space) / 2 );
  --flow-space--third: calc( var(--flow-space) / 3 );
  --flow-space--double: calc( var(--flow-space) * 2 );
  --block-spacing: var(--space-xl-2xl);
  --block-spacing--double: calc( var(--block-spacing) * 2 );

}

.\!container {
  width: 100% !important;
}

@media (min-width: 330px) {

  .\!container {
    max-width: 330px !important;
  }
}

@media (min-width: 760px) {

  .\!container {
    max-width: 760px !important;
  }
}

@media (min-width: 1230px) {

  .\!container {
    max-width: 1230px !important;
  }
}

:root {
  --color-dark: #141210;
  --color-light: #faf8f4;
  --color-white: #ffffff;
  --color-cream: #f5f2eb;
  --color-primary: #b6f812;
  --color-primary-light: #c8f135;
  --color-primary-pale: #eaf7ed;
  --color-ink: #141210;
  --color-ink-mid: #3a3730;
  --color-muted: #8a8680;
  --color-border: #ddd9d0;
  --color-red: #c0392b;
  --color-blue: #00173D;
  --space-zero: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem);
  --space-3xs: clamp(0.3125rem, 0.29rem + 0.11vw, 0.375rem);
  --space-2xs: clamp(0.5625rem, 0.49rem + 0.33vw, 0.75rem);
  --space-xs: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
  --space-s: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
  --space-m: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
  --space-l: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
  --space-xl: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
  --space-2xl: clamp(4.5rem, 3.95rem + 2.67vw, 6rem);
  --space-3xl: clamp(6.75rem, 5.92rem + 4.00vw, 9rem);
  --space-4xl: clamp(9rem, 7.90rem + 5.33vw, 12rem);
  --space-3xs-2xs: clamp(0.3125rem, 0.15rem + 0.78vw, 0.75rem);
  --space-2xs-xs: clamp(0.5625rem, 0.36rem + 1.00vw, 1.125rem);
  --space-xs-s: clamp(0.875rem, 0.65rem + 1.11vw, 1.5rem);
  --space-s-m: clamp(1.125rem, 0.71rem + 2.00vw, 2.25rem);
  --space-m-l: clamp(1.6875rem, 1.21rem + 2.33vw, 3rem);
  --space-l-xl: clamp(2.25rem, 1.42rem + 4.00vw, 4.5rem);
  --space-xl-2xl: clamp(3.375rem, 2.41rem + 4.67vw, 6rem);
  --space-2xl-3xl: clamp(4.5rem, 2.85rem + 8.00vw, 9rem);
  --space-3xl-4xl: clamp(6.75rem, 4.83rem + 9.33vw, 12rem);
  --space-s-l: clamp(1.125rem, 0.44rem + 3.33vw, 3rem);
  --space-s-xl: clamp(1.125rem, -0.11rem + 6.00vw, 4.5rem);
  --size-step-00: clamp(0.9375rem, 0.91rem + 0.11vw, 1rem);
  --size-step-0: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --size-step-1: clamp(1.125rem, 1.06rem + 0.33vw, 1.3125rem);
  --size-step-2: clamp(1.75rem, 1.66rem + 0.44vw, 2rem);
  --size-step-3: clamp(3.5rem, 3.00rem + 2.44vw, 4.875rem);
  --size-step-4: clamp(3.5rem, 1.90rem + 7.78vw, 7.875rem);
  --leading-flat: 1;
  --leading-fine: 1.15;
  --leading-standard: 1.5;
  --leading-loose: 1.7;
  --font-base: DM Sans,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-heading: forma-djr-display,DM Sans,Segoe UI,sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
}

/*
  Global styles

  Low-specificity, global styles that apply to the whole
  project: https://cube.fyi/css.html
*/

body {
  background: var(--color-light);
  color: var(--color-ink);
}

ol[role=list], ul[role=list] {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
}

/* Text width constraint */

.text-width {
  max-width: 560px;
}

/* Screen reader only */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Reveal animation */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* offside-js 1.4.0 26-03-2018
* Minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation
* https://github.com/toomuchdesign/offside.git
*
* by Andrea Carraro
* Available under the MIT license
*/

:root {
  --offside-width: 400px;  /* --space-s --space-s-m */
  --offside-inverted-width: -400px;  /* --space-s --space-s-m */
  --offside-width--desktop: 800px;  /* --space-s --space-s-m */
  --offside-inverted-width--desktop: -800px;  /* --space-s --space-s-m */
  /* for really small screens.. */
  --offside-max-width: 80vw;  /* --space-s --space-s-m */
}

/* When site loads, nav appears briefly before being hidden by offside. Adding in a class to hide this unwanted flash */

.off-canvas {
    display: none;
}

.offside-js--init .off-canvas {
        display: block;
    }

/* Off-canvas element CSS */

.offside {
    position: fixed; /* Does not play well with some old browsers (see: README) */
    width: var(--offside-width);
    max-width: var(--offside-max-width);
    height: 100%;
    top: 0;
    z-index: 9999;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
}

/* Left off-canvas elements default status: out of the page */

.offside,
.offside--left {
    left: var(--offside-inverted-width);
}

/* Right off-canvas elements default status: out of the page */

.offside,
.offside--right {
    left: auto;
    right: var(--offside-inverted-width);
}

/*
 * Left off-canvas element is open:
 * - off-canvas element slides in
 * - container elements slides out
 */

.offside--left.is-open,
.offside-js--is-left .offside-sliding-element {
    -webkit-transform: translate3d(var(--offside-width), 0, 0);
    -moz-transform: translate3d(var(--offside-width), 0, 0);
    -ms-transform: translate3d(var(--offside-width), 0, 0);
    -o-transform: translate3d(var(--offside-width), 0, 0);
    transform: translate3d(var(--offside-width), 0, 0);
}

/*
 * Right off-canvas element is open:
 * - off-canvas element slides in
 * - container elements slides out
 */

.offside--right.is-open,
.offside-js--is-right .offside-sliding-element {
    -webkit-transform: translate3d(var(--offside-inverted-width), 0, 0);
    -moz-transform: translate3d(var(--offside-inverted-width), 0, 0);
    -ms-transform: translate3d(var(--offside-inverted-width), 0, 0);
    -o-transform: translate3d(var(--offside-inverted-width), 0, 0);
    transform: translate3d(var(--offside-inverted-width), 0, 0);
}

/* Elements Transitions */

.offside-js--interact .offside,
.offside-js--interact .offside-sliding-element {
    -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
    -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
    -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
    
    /* improves performance issues on mobile*/
    -webkit-backface-visibility: hidden;
    /* -webkit-perspective: 1000;  // removed due to appearing nav glitch */
}

/* Body overflow — moved to html in reset.css so it doesn't break position:sticky on body children */

.offside-js--init {
    /* overflow-x: hidden; */
}

/* Fallback movements for browser not supporting CSS 3d Transitions
----------------------------------------------- */

/* Modernizr false negative csstransforms3d fix, reset CSS 3d Transitions */

.no-csstransforms3d .offside {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.no-csstransforms3d .offside-sliding-element {
    overflow-x: hidden;
    position: relative;
}

/* Element is open: off-canvas element slides in */

.no-csstransforms3d .offside--left.is-open {
    left: 0;
}

.no-csstransforms3d .offside--right.is-open {
    right: 0;
}

/* Element is open: container elements slide out */

.no-csstransforms3d > .offside-js--is-left .offside-sliding-element {
    right: var(--offside-inverted-width);
}

.no-csstransforms3d > .offside-js--is-right .offside-sliding-element {
    left: var(--offside-inverted-width);
}

@media (min-width: 50em) {
    /* DESKTOP */
    .offside {
        width: var(--offside-width--desktop);
    }

    .offside,
    .offside--left {
        left: var(--offside-inverted-width--desktop);
    }

    .offside--right {
        left: unset;
        right: var(--offside-inverted-width--desktop);
    }

    .offside--left.is-open,
    .offside-js--is-left .offside-sliding-element {
        -webkit-transform: translate3d(var(--offside-width--desktop), 0, 0);
        -moz-transform: translate3d(var(--offside-width--desktop), 0, 0);
        -ms-transform: translate3d(var(--offside-width--desktop), 0, 0);
        -o-transform: translate3d(var(--offside-width--desktop), 0, 0);
        transform: translate3d(var(--offside-width--desktop), 0, 0);
    }

    .offside--right.is-open,
    .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(var(--offside-inverted-width--desktop), 0, 0);
        -moz-transform: translate3d(var(--offside-inverted-width--desktop), 0, 0);
        -ms-transform: translate3d(var(--offside-inverted-width--desktop), 0, 0);
        -o-transform: translate3d(var(--offside-inverted-width--desktop), 0, 0);
        transform: translate3d(var(--offside-inverted-width--desktop), 0, 0);
    }

    /* Element is open: container elements slide out */
    .no-csstransforms3d > .offside-js--is-left .offside-sliding-element {
        right: var(--offside-inverted-width--desktop);
    }

    .no-csstransforms3d > .offside-js--is-right .offside-sliding-element {
        left: var(--offside-inverted-width--desktop);
    }
}

/* Shared block styles */

.site-block {
	margin-bottom: var(--block-spacing, 4rem);
}

/* Accordion Block Styles */

.accordion-block {
  --accordion-border-color: var(--color-border);
  --accordion-bg: var(--color-light);
  --accordion-hover-bg: var(--color-cream);
  --accordion-active-bg: var(--color-primary);
  --accordion-active-color: var(--color-light);
  --accordion-radius: var(--radius-md);
  --accordion-spacing: var(--space-s);
}

.accordion-block__heading {
  margin-block-end: var(--space-m-l);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

.accordion-block__items {
  --flow-space: var(--accordion-spacing);
}

/* Accordion Item */

.accordion-item {
  background: var(--accordion-bg);
  border: 1px solid var(--accordion-border-color);
  border-radius: var(--accordion-radius);
  overflow: hidden;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

.accordion-item:hover {
  box-shadow: var(--shadow-sm);
}

/* Trigger Button */

.accordion-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-m);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.accordion-item__trigger:hover {
  background-color: var(--accordion-hover-bg);
}

.accordion-item__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Icon */

.accordion-item__icon {
  flex-shrink: 0;
  margin-inline-start: var(--space-s);
  transition: transform var(--duration-normal) var(--ease-out);
}

.accordion-item__trigger[aria-expanded="true"] .accordion-item__icon {
  transform: rotate(180deg);
}

/* Content */

.accordion-item__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-normal) var(--ease-out);
}

.accordion-item__content[data-expanded] {
  grid-template-rows: 1fr;
}

.accordion-item__body {
  overflow: hidden;
  padding: 0 var(--space-m);
}

.accordion-item__content[data-expanded] .accordion-item__body {
  padding-bottom: var(--space-m);
}

/* Style Variations */

/* Minimal Style */

.accordion-block--minimal .accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accordion-border-color);
  border-radius: 0;
}

.accordion-block--minimal .accordion-item:last-child {
  border-bottom: none;
}

.accordion-block--minimal .accordion-item__trigger {
  padding-inline: 0;
}

.accordion-block--minimal .accordion-item__trigger:hover {
  background: transparent;
  color: var(--color-primary);
}

/* Filled Style */

.accordion-block--filled .accordion-item {
  background: var(--color-cream);
  border: none;
}

.accordion-block--filled .accordion-item__trigger:hover {
  background: var(--color-border);
}

/* Compact Style */

.accordion-block--compact .accordion-item__trigger {
  padding: var(--space-s) var(--space-m);
  font-size: var(--text-base);
}

.accordion-block--compact .accordion-item__body {
  font-size: var(--text-sm);
}

/* Active State Highlight */

.accordion-item__trigger[aria-expanded="true"] {
  font-weight: var(--font-semibold);
}

.accordion-block--highlight .accordion-item__trigger[aria-expanded="true"] {
  background: var(--accordion-active-bg);
  color: var(--accordion-active-color);
}

.accordion-block--highlight .accordion-item__trigger[aria-expanded="true"]:hover {
  background: var(--color-ink);
}

/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {
  .accordion-item__icon,
  .accordion-item__content {
    transition: none;
  }
}

/* Responsive */

@media (max-width: 768px) {
  .accordion-item__trigger {
    padding: var(--space-s-m);
    font-size: var(--text-base);
  }
  
  .accordion-item__body {
    padding-inline: var(--space-s-m);
  }
}

/* Print Styles */

@media print {
  .accordion-item__content {
    display: block !important;
    grid-template-rows: auto !important;
  }
  
  .accordion-item__trigger {
    font-weight: var(--font-bold);
  }
  
  .accordion-item__icon {
    display: none;
  }
}

/* Button — CUBE CSS */

.forminator-button,
.button {
    align-items: center;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-dark);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    gap: 0 var(--space-2xs);
    justify-content: center;
    line-height: 1;
    padding: .6em 1em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    border-radius: 0.1rem;
}

.forminator-button svg,
.button svg {
    height: auto;
    width: 1.85ex;
}

.forminator-button span + svg,
.button span + svg {
    width: 1.5ex;
}

/* Hover (default) */

.forminator-button:not([data-type="naked"]):hover,
.button:not([data-type="naked"]):hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-light);
}

/* ---------- Size variants ---------- */

.button--lg {
    padding: 1rem 2.5rem;
}

/* ---------- Type variants ---------- */

.forminator-button[data-type="secondary"],
.button[data-type="secondary"] {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-light);
}

.forminator-button[data-type="secondary"]:hover,
.button[data-type="secondary"]:hover {
    background: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-dark);
}

.forminator-button[data-type="naked"],
.button[data-type="naked"] {
    background: transparent;
    border: none;
    color: var(--color-dark);
    padding: 0;
}

.button[data-type="naked"]:hover svg {
    transform: rotate(-45deg);
    transition: transform var(--transition-base);
}

.forminator-button[data-type="badge"],
.button[data-type="badge"] {
    border-radius: 2em;
    padding: var(--space-2xs) var(--space-s);
}

/* ---------- Theme variants ---------- */

.forminator-button[data-theme="dark"],
.button[data-theme="dark"] {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-light);
}

.forminator-button[data-theme="dark"]:hover,
.button[data-theme="dark"]:hover {
    background-color: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-dark);
}

.forminator-button[data-theme="ghost"],
.button[data-theme="ghost"] {
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    color: var(--color-dark);
}

.forminator-button[data-theme="ghost"] svg,
.button[data-theme="ghost"] svg {
    color: var(--color-primary);
}

.forminator-button[data-theme="ghost"]:hover,
.button[data-theme="ghost"]:hover {
    background: var(--color-primary-pale);
    border-color: var(--color-primary);
    color: var(--color-dark);
}

.forminator-button[data-theme="outline"],
.button[data-theme="outline"] {
    background: transparent;
    border-color: currentColor;
    color: var(--color-light);
}

.forminator-button[data-theme="outline"]:hover,
.button[data-theme="outline"]:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-light);
    color: var(--color-light);
}

/* Post card */

.post-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-ink);
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base);
}

.post-card__link:hover {
  border-color: var(--color-ink);
}

.post-card__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.post-card__content {
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.post-card__meta {
  display: flex;
  gap: var(--space-2xs);
  color: var(--color-primary);
}

.post-card__date {
  font-size: var(--size-step-00);
  margin-top: auto;
}

/* Contact Form Block Styles */

.contact-form-block {
    --form-gap: var(--space-m, 1.5rem);
    --field-gap: var(--space-s, 1rem);
    --field-padding: var(--space-xs, 0.75rem);
    --field-border-width: 1px;
    --field-border-color: var(--color-gray-300, #d1d5db);
    --field-border-radius: var(--radius-s, 0.375rem);
    --field-bg: var(--color-white, #ffffff);
    --field-focus-color: var(--color-primary, #3b82f6);
    --field-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    --label-color: var(--color-gray-700, #374151);
    --label-font-weight: var(--font-weight-medium, 500);
    --button-padding: var(--space-xs, 0.75rem) var(--space-m, 1.5rem);
    --error-color: var(--color-red-600, #dc2626);
    --success-color: var(--color-green-600, #16a34a);
}

.contact-form-block__inner {
    container-type: inline-size;
}

/* Form Styles */

.contact-form-block .forminator-custom-form {
    display: grid;
    gap: var(--form-gap);
}

/* Field Row Styles */

.contact-form-block .forminator-row {
    display: grid;
    gap: var(--field-gap);
}

/* Column Layouts */

.contact-form-block--columns-2 .forminator-row {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.contact-form-block--columns-3 .forminator-row {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Field Styles */

.contact-form-block .forminator-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs, 0.5rem);
}

.contact-form-block .forminator-label {
    color: var(--label-color);
    font-weight: var(--label-font-weight);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.2;
}

.contact-form-block .forminator-input,
.contact-form-block .forminator-textarea,
.contact-form-block .forminator-select {
    padding: var(--field-padding);
    border: var(--field-border-width) solid var(--field-border-color);
    border-radius: var(--field-border-radius);
    background-color: var(--field-bg);
    font-size: var(--text-base, 1rem);
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.contact-form-block .forminator-input:focus,
.contact-form-block .forminator-textarea:focus,
.contact-form-block .forminator-select:focus {
    outline: none;
    border-color: var(--field-focus-color);
    box-shadow: var(--field-focus-shadow);
}

/* Textarea specific */

.contact-form-block .forminator-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select specific */

.contact-form-block .forminator-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-position: right var(--field-padding) center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    padding-right: calc(var(--field-padding) * 3);
}

/* Radio and Checkbox */

.contact-form-block .forminator-radio,
.contact-form-block .forminator-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs, 0.5rem);
}

.contact-form-block .forminator-radio input[type="radio"],
.contact-form-block .forminator-checkbox input[type="checkbox"] {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* Button Styles */

.contact-form-block .forminator-button-submit {
    padding: var(--button-padding);
    border-radius: var(--field-border-radius);
    font-weight: var(--font-weight-medium, 500);
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs, 0.5rem);
}

/* Button Styles - Primary */

.contact-form-block--button-primary .forminator-button-submit {
    background-color: var(--color-primary, #3b82f6);
    color: var(--color-white, #ffffff);
}

.contact-form-block--button-primary .forminator-button-submit:hover {
    background-color: var(--color-primary-dark, #2563eb);
}

/* Button Styles - Secondary */

.contact-form-block--button-secondary .forminator-button-submit {
    background-color: var(--color-gray-200, #e5e7eb);
    color: var(--color-gray-800, #1f2937);
}

.contact-form-block--button-secondary .forminator-button-submit:hover {
    background-color: var(--color-gray-300, #d1d5db);
}

/* Button Styles - Outline */

.contact-form-block--button-outline .forminator-button-submit {
    background-color: transparent;
    color: var(--color-primary, #3b82f6);
    border-color: var(--color-primary, #3b82f6);
}

.contact-form-block--button-outline .forminator-button-submit:hover {
    background-color: var(--color-primary, #3b82f6);
    color: var(--color-white, #ffffff);
}

/* Button Styles - Ghost */

.contact-form-block--button-ghost .forminator-button-submit {
    background-color: transparent;
    color: var(--color-primary, #3b82f6);
}

.contact-form-block--button-ghost .forminator-button-submit:hover {
    background-color: var(--color-gray-100, #f3f4f6);
}

/* Button Sizes */

.contact-form-block--button-small .forminator-button-submit {
    padding: var(--space-2xs, 0.5rem) var(--space-s, 1rem);
    font-size: var(--text-sm, 0.875rem);
}

.contact-form-block--button-large .forminator-button-submit {
    padding: var(--space-s, 1rem) var(--space-l, 2rem);
    font-size: var(--text-lg, 1.125rem);
}

/* Button Full Width */

.contact-form-block--button-full .forminator-button-submit {
    width: 100%;
}

/* Form Spacing Variations */

.contact-form-block--spacing-compact {
    --form-gap: var(--space-s, 1rem);
    --field-gap: var(--space-xs, 0.75rem);
    --field-padding: var(--space-2xs, 0.5rem);
}

.contact-form-block--spacing-spacious {
    --form-gap: var(--space-l, 2rem);
    --field-gap: var(--space-m, 1.5rem);
    --field-padding: var(--space-s, 1rem);
}

/* Form Style Variations */

/* Modern Style */

.contact-form-block--style-modern {
    --field-border-color: transparent;
    --field-bg: var(--color-gray-100, #f3f4f6);
    --field-border-radius: var(--radius-m, 0.5rem);
}

.contact-form-block--style-modern .forminator-input:focus,
.contact-form-block--style-modern .forminator-textarea:focus,
.contact-form-block--style-modern .forminator-select:focus {
    --field-bg: var(--color-white, #ffffff);
    border-color: var(--field-focus-color);
}

/* Minimal Style */

.contact-form-block--style-minimal {
    --field-border-color: transparent;
    --field-border-width: 0 0 1px 0;
    --field-border-radius: 0;
    --field-padding: var(--space-2xs, 0.5rem) 0;
    --field-bg: transparent;
}

/* Bordered Style */

.contact-form-block--style-bordered {
    --field-border-width: 2px;
    --field-border-color: var(--color-gray-900, #111827);
    --field-border-radius: 0;
}

/* No Labels */

.contact-form-block--no-labels .forminator-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Placeholder Labels */

.contact-form-block--placeholder-labels .forminator-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Error Messages */

.contact-form-block .forminator-error-message {
    color: var(--error-color);
    font-size: var(--text-sm, 0.875rem);
    margin-top: var(--space-2xs, 0.5rem);
}

.contact-form-block .forminator-field.forminator-has_error .forminator-input,
.contact-form-block .forminator-field.forminator-has_error .forminator-textarea,
.contact-form-block .forminator-field.forminator-has_error .forminator-select {
    border-color: var(--error-color);
}

/* Success Messages */

.contact-form-block .forminator-response-message {
    padding: var(--space-s, 1rem);
    border-radius: var(--field-border-radius);
    margin-top: var(--space-m, 1.5rem);
}

.contact-form-block .forminator-success {
    background-color: var(--color-green-50, #f0fdf4);
    color: var(--success-color);
    border: 1px solid var(--color-green-200, #bbf7d0);
}

.contact-form-block .forminator-error {
    background-color: var(--color-red-50, #fef2f2);
    color: var(--error-color);
    border: 1px solid var(--color-red-200, #fecaca);
}

/* Loading State */

.contact-form-block .forminator-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs, 0.5rem);
}

.contact-form-block .forminator-loading::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-gray-300, #d1d5db);
    border-top-color: var(--color-primary, #3b82f6);
    border-radius: 50%;
    animation: forminator-spin 0.6s linear infinite;
}

@keyframes forminator-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Required Fields */

.contact-form-block .forminator-required {
    color: var(--error-color);
}

/* File Upload */

.contact-form-block .forminator-upload {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-m, 1.5rem);
    border: 2px dashed var(--field-border-color);
    border-radius: var(--field-border-radius);
    background-color: var(--color-gray-50, #f9fafb);
    transition: all 0.2s ease;
}

.contact-form-block .forminator-upload:hover {
    border-color: var(--field-focus-color);
    background-color: var(--color-blue-50, #eff6ff);
}

.contact-form-block .forminator-upload input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Progress Bar */

.contact-form-block .forminator-progress {
    height: 4px;
    background-color: var(--color-gray-200, #e5e7eb);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--space-m, 1.5rem);
}

.contact-form-block .forminator-progress-bar {
    height: 100%;
    background-color: var(--field-focus-color);
    transition: width 0.3s ease;
}

/* GDPR/Consent */

.contact-form-block .forminator-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
}

.contact-form-block .forminator-consent input[type="checkbox"] {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* Error Block */

.contact-form-block__error {
    padding: var(--space-m, 1.5rem);
    background-color: var(--color-gray-100, #f3f4f6);
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: var(--field-border-radius);
    text-align: center;
    color: var(--color-gray-600, #4b5563);
}

/* Responsive */

@media (max-width: 640px) {
    .contact-form-block--columns-2 .forminator-row,
    .contact-form-block--columns-3 .forminator-row {
        grid-template-columns: 1fr;
    }
    
    .contact-form-block--button-full .forminator-button-submit {
        width: 100%;
    }
}

/* CTA Block Styles */

.cta-block {
  --cta-padding: var(--space-xl-2xl);
  --cta-bg: var(--color-light);
  --cta-color: var(--color-ink);
  
  padding-block: var(--cta-padding);
  background: var(--cta-bg);
  color: var(--cta-color);
}

/* Background variations */

.cta-block--bg-primary {
  --cta-bg: var(--color-primary);
  --cta-color: var(--color-light);
}

.cta-block--bg-accent {
  --cta-bg: var(--color-primary);
  --cta-color: var(--color-light);
}

.cta-block--bg-gray {
  --cta-bg: var(--color-cream);
  --cta-color: var(--color-ink);
}

.cta-block--bg-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-ink) 100%);
  --cta-color: var(--color-light);
}

/* Content container */

.cta-block__content {
  --flow-space: var(--space-m);
  max-inline-size: var(--measure-wide, 80ch);
  margin-inline: auto;
}

/* Alignment variations */

.cta-block--align-left .cta-block__content {
  margin-inline-start: 0;
  text-align: left;
}

.cta-block--align-center .cta-block__content {
  text-align: center;
}

.cta-block--align-right .cta-block__content {
  margin-inline-end: 0;
  text-align: right;
  margin-inline-start: auto;
}

/* Typography */

.cta-block__heading {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
  color: inherit;
}

.cta-block__subheading {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: inherit;
  opacity: 0.9;
}

.cta-block__description {
  margin-inline: auto;
}

/* Button group */

.cta-block__buttons {
  --cluster-gap: var(--space-s);
  margin-block-start: var(--space-m-l);
}

/* Button adjustments for CTA context */

.cta-block--bg-primary .button[data-variant="primary"],
.cta-block--bg-accent .button[data-variant="primary"],
.cta-block--bg-gradient .button[data-variant="primary"] {
  --button-bg: var(--color-light);
  --button-color: var(--color-ink);
  --button-hover-bg: var(--color-cream);
}

.cta-block--bg-primary .button[data-variant="secondary"],
.cta-block--bg-accent .button[data-variant="secondary"],
.cta-block--bg-gradient .button[data-variant="secondary"] {
  --button-bg: transparent;
  --button-color: var(--color-light);
  --button-border: 2px solid currentColor;
  --button-hover-bg: rgba(255, 255, 255, 0.1);
}

/* Focus states with good contrast */

.cta-block .button:focus-visible {
  outline: 3px solid var(--cta-color);
  outline-offset: 2px;
}

/* Dark background focus adjustment */

.cta-block--bg-primary .button:focus-visible,
.cta-block--bg-accent .button:focus-visible,
.cta-block--bg-gradient .button:focus-visible {
  outline-color: var(--color-light);
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .cta-block {
    --cta-padding: var(--space-l-xl);
  }
  
  .cta-block__heading {
    font-size: var(--text-2xl);
  }
  
  .cta-block__subheading {
    font-size: var(--text-lg);
  }
  
  .cta-block__buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .cta-block__buttons .button {
    width: 100%;
    justify-content: center;
  }
}

/* PE Footer — CUBE CSS */

.pe-footer {
  background: var(--color-ink);
  color: var(--color-light);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-l);
  border-top: 1px solid var(--color-border);
}

.pe-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pe-footer__heading {
  margin-bottom: var(--space-s);
  color: var(--color-light);
}

.pe-footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pe-footer__menu li {
  margin-bottom: var(--space-3xs);
}

.pe-footer__menu a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-base);
}

.pe-footer__menu a:hover {
  color: var(--color-light);
}

/* Footer logo */

.pe-footer__top {
  padding-bottom: var(--space-l);
}

.pe-footer__logo {
  display: inline-block;
  color: var(--color-light);
}

.pe-footer__logo svg {
  height: 1.8rem;
  width: auto;
  fill: currentColor;
}

.pe-footer__tagline {
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-2xs);
}

/* Latest articles row */

.pe-footer__articles {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pe-footer__article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-l);
}

.pe-footer__article-list li {
  margin: 0;
}

.pe-footer__article-list a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-base);
}

.pe-footer__article-list a:hover {
  color: var(--color-light);
}

/* City directory links */

.pe-footer__cities {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pe-footer__city-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-m);
}

.pe-footer__city-list a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-base);
}

.pe-footer__city-list a:hover {
  color: var(--color-light);
}

/* Bottom bar */

.pe-footer__bottom {
  padding-top: var(--space-m);
}

.pe-footer__copy {
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.pe-footer__legal {
  color: rgba(255, 255, 255, 0.25);
  margin-top: var(--space-2xs);
  max-width: 640px;
}

/* Responsive */

@media (max-width: 768px) {
  .pe-footer__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
  }
}

@media (max-width: 480px) {
  .pe-footer__columns {
    grid-template-columns: 1fr;
  }
}

/* Using forminator... Set CSS to none */

:root {
    --button-bg-color: transparent;
    --button-text-color: var(--color-dark);
    --button-bg-color--hover: transparent;
    --button-text-color--hover: var(--color-primary);
}

.forminator-ui {
  
/*   .forminator-button {

  } */

}

.forminator-ui fieldset {
    padding: var(--flow-space, 1em) var(--flow-space, 1em);
    margin: var(--flow-space, 1em) 0;
  }

.forminator-ui legend {
    padding: 0;
    font-weight: bold;
    font-size: 1.2em;
  }

.forminator-ui .forminator-error-message,
  .forminator-ui label {
    display: block;
    margin: var(--flow-space, 1em) 0;
  }

.forminator-ui .forminator-error-message textarea, .forminator-ui .forminator-error-message select, .forminator-ui .forminator-error-message input[type="text"], .forminator-ui .forminator-error-message input[type="email"], .forminator-ui .forminator-error-message input[type="search"], .forminator-ui .forminator-error-message input[type="tel"], .forminator-ui .forminator-error-message input[type="url"], .forminator-ui .forminator-error-message input[type="password"], .forminator-ui .forminator-error-message input[type="color"], .forminator-ui .forminator-error-message input[type="file"], .forminator-ui .forminator-error-message input[type="color"], .forminator-ui .forminator-error-message input[type="number"], .forminator-ui .forminator-error-message input[type="range"], .forminator-ui .forminator-error-message input[type="date"], .forminator-ui .forminator-error-message input[type="month"], .forminator-ui .forminator-error-message input[type="week"], .forminator-ui .forminator-error-message input[type="time"], .forminator-ui .forminator-error-message input[type="datetime"], .forminator-ui .forminator-error-message input[type="datetime-local"], .forminator-ui label textarea, .forminator-ui label select, .forminator-ui label input[type="text"], .forminator-ui label input[type="email"], .forminator-ui label input[type="search"], .forminator-ui label input[type="tel"], .forminator-ui label input[type="url"], .forminator-ui label input[type="password"], .forminator-ui label input[type="color"], .forminator-ui label input[type="file"], .forminator-ui label input[type="color"], .forminator-ui label input[type="number"], .forminator-ui label input[type="range"], .forminator-ui label input[type="date"], .forminator-ui label input[type="month"], .forminator-ui label input[type="week"], .forminator-ui label input[type="time"], .forminator-ui label input[type="datetime"], .forminator-ui label input[type="datetime-local"] {
      display: block;
      width: 100%;
    }

.forminator-ui textarea, .forminator-ui select, .forminator-ui input[type="text"], .forminator-ui input[type="email"], .forminator-ui input[type="search"], .forminator-ui input[type="tel"], .forminator-ui input[type="url"], .forminator-ui input[type="password"], .forminator-ui input[type="color"], .forminator-ui input[type="file"], .forminator-ui input[type="color"], .forminator-ui input[type="number"], .forminator-ui input[type="range"], .forminator-ui input[type="date"], .forminator-ui input[type="month"], .forminator-ui input[type="week"], .forminator-ui input[type="time"], .forminator-ui input[type="datetime"], .forminator-ui input[type="datetime-local"] {
      margin: .2em 0;
      padding: .25em .4em;
      border: 1px solid #ddd;
      max-width: 100%; 
  }

.forminator-ui input[type="search"] { 
    box-sizing: border-box;
  }

.forminator-ui input[type="file"] { 
    border-width: 0;
    padding: 0;
  }

.forminator-ui input[type="image"] {
    vertical-align: bottom;
  }

.forminator-ui .forminator-button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
  }

.forminator-ui .forminator-button:hover {
    background-color: var(--button-bg-color--hover);
    color: var(--button-text-color--hover);
  }

/* :root {
    --color-fui-black-rgba: rgba(0, 0, 0, 0);
    --color-fui-error: #E04562;
    --color-fui-error-rgba: rgba(224, 69, 98, 0.3);
    --color-fui-success: #1ABCA1;
    --color-fui-gray-dark: #888888; 
    --color-fui-gray: #777777; 
    --color-fui-gray-light: #999;
    --color-fui-gray-lighter: #b7b7b7;
    --color-fui-primary: var(--color-orange);
    --color-fui-primary-hover: var(--color-orangeburnt);
    --color-fui-background: #F8F8F8;
    --color-fui-background-lighter: #EDEDED;
    --color-fui-background-lightest: #E6E6E6;
    --color-fui-background-hover: #DDDDDD;
    --color-fui-white: #FFFFFF;
    --color-fui-button-success: #1ABCA1;
    --color-fui-button-success-hover: #159C85;
    --color-fui-delete-background: rgba(0, 0, 0, 0);
    --color-fui-delete-background-hover: #F9E4E8;
}

.forminator-ui:not(.select2-dropdown),
.forminator-ui .forminator-response-message,
.forminator-ui .forminator-response-message p,
.forminator-ui .forminator-description,
.forminator-ui .forminator-description p,
.forminator-ui .forminator-error-message,
.forminator-ui .forminator-input,
.forminator-ui .forminator-input input,
.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-input:-moz-placeholder,
.forminator-ui .forminator-input::-moz-placeholder,
.forminator-ui .forminator-input:-ms-input-placeholder,
.forminator-ui .forminator-input::-webkit-input-placeholder,
.forminator-ui .forminator-select,
.forminator-ui .forminator-select--arrow,
.forminator-ui .forminator-calculation,
.forminator-ui .forminator-calculation span,
.forminator-ui .forminator-pagination-footer,
.forminator-ui .forminator-pagination-footer .forminator-button-submit,
.forminator-ui .forminator-pagination-footer .forminator-button-next,
.forminator-ui .forminator-pagination-footer .forminator-button-back,
.forminator-ui .forminator-field.fui-acceptance .forminator-checkbox label,
.forminator-ui .forminator-select2-container--default .forminator-select2-selection--single,
.forminator-ui .forminator-select2-container--default .forminator-select2-selection--multiple,
.forminator-ui .forminator-select2-container--default.forminator-select2-container--focus .forminator-select2-selection--single,
.forminator-ui .forminator-select2-container--default.forminator-select2-container--focus .forminator-select2-selection--multiple,
.forminator-ui .forminator-select2-container--default .forminator-select2-selection--single .forminator-select2-selection__arrow b,
.forminator-ui .forminator-select2-container--default .forminator-select2-selection--multiple .forminator-select2-selection__arrow b,
.forminator-ui .forminator-select2-container--default .forminator-select2-results__option--highlighted[aria-selected],
.forminator-ui .forminator-select2-container--default .forminator-select2-results__option--highlighted[aria-selected]:hover,
.forminator-ui .forminator-select2-container .forminator-select2-selection__choice,
.forminator-ui .forminator-select2-container .forminator-select2-selection__choice__remove {
    font-family: inherit;
    font-weight: 400;
}

.forminator-error-message {
    font-size: 16px !important;
}

#forminator-module-361 {
    padding: 0;
    border: 0 none;
    border-radius: 0;
    border-color: var(--color-fui-black-rgba) !important;
    background-color: var(--color-fui-black-rgba) !important;
}

.forminator-ui .forminator-response-message.forminator-error,
.forminator-ui .forminator-response-message.forminator-success {
    box-shadow: inset 4px 0 0 0 var(--color-fui-error), 1px 1px 4px 0 var(--color-fui-error-rgba) !important;
}

.forminator-ui .forminator-response-message.forminator-error:hover,
.forminator-ui .forminator-response-message.forminator-error:focus,
.forminator-ui .forminator-response-message.forminator-error:active,
.forminator-ui .forminator-response-message.forminator-success:hover,
.forminator-ui .forminator-response-message.forminator-success:focus,
.forminator-ui .forminator-response-message.forminator-success:active {
    box-shadow: inset 4px 0 0 0 var(--color-fui-error), 1px 1px 4px 0 var(--color-fui-error-rgba) !important;
}

.forminator-ui .forminator-response-message.forminator-error,
.forminator-ui .forminator-response-message.forminator-error p,
.forminator-ui .forminator-response-message.forminator-success,
.forminator-ui .forminator-response-message.forminator-success p {
    color: var(--color-fui-gray-dark) !important;
}

.forminator-ui .forminator-response-message.forminator-loading {
    background-color: var(--color-fui-background) !important;
    color: var(--color-fui-gray) !important;
}

.forminator-ui .forminator-title {
    font-size: 45px;
    text-align: left;
    color: var(--color-fui-gray-dark) !important;
}

.forminator-ui .forminator-subtitle {
    font-size: 18px;
    text-align: left;
    color: var(--color-fui-gray-dark) !important;
}

.forminator-ui .forminator-label[class*="forminator-floating-"] {
    font-size: 16px;
    color: var(--color-fui-gray-light) !important;
}

.forminator-ui .forminator-label:not([class*="forminator-floating-"]) {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-fui-gray-lighter) !important;
}

.forminator-ui .forminator-is_filled .forminator-label[class*="forminator-floating-"],
.forminator-ui .forminator-is_active .forminator-label[class*="forminator-floating-"] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-fui-gray-lighter) !important;
}

.forminator-ui .forminator-label:not([class*="forminator-floating-"]) .forminator-required,
.forminator-ui .forminator-is_filled .forminator-label[class*="forminator-floating-"] .forminator-required,
.forminator-ui .forminator-is_active .forminator-label[class*="forminator-floating-"] .forminator-required,
.forminator-ui .forminator-is_filled.forminator-has_error .forminator-label[class*="forminator-floating-"],
.forminator-ui .forminator-is_active.forminator-has_error .forminator-label[class*="forminator-floating-"] {
    color: var(--color-fui-error) !important;
}

.forminator-ui .forminator-description a,
.forminator-ui .forminator-description a:hover,
.forminator-ui .forminator-description a:focus,
.forminator-ui .forminator-description a:active,
.forminator-ui .forminator-select2-container .forminator-select2-selection__choice__remove {
    box-shadow: none;
    text-decoration: none;
}

.forminator-ui .forminator-description a {
    color: var(--color-fui-primary) !important;
}

.forminator-ui .forminator-description a:hover,
.forminator-ui .forminator-description a:active {
    color: var(--color-fui-primary-hover) !important;
}

.forminator-ui .forminator-input,
.forminator-ui .forminator-input input,
.forminator-ui .forminator-select {
    font-size: 16px;
    border-color: var(--color-fui-gray-lighter) !important;
    color: var(--color-white) !important;
}

.forminator-ui .forminator-input:disabled,
.forminator-ui .forminator-calculation:disabled,
.forminator-ui .forminator-select:disabled {
    -webkit-text-fill-color: #000;
    opacity: 1;
}

.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-input:-moz-placeholder,
.forminator-ui .forminator-input::-moz-placeholder,
.forminator-ui .forminator-input:-ms-input-placeholder,
.forminator-ui .forminator-input::-webkit-input-placeholder {
    color: var(--color-fui-gray-light) !important;
}

.forminator-ui .forminator-input--wrap:after,
.forminator-ui .forminator-is_active .forminator-input--wrap:after,
.forminator-ui .forminator-is_active .forminator-input--wrap:after {
    background-color: var(--color-fui-primary) !important;
}

.forminator-ui .forminator-has_error .forminator-input--wrap:after {
    background-color: var(--color-fui-error) !important;
}

.forminator-ui .forminator-checkbox input:checked + label:before,
.forminator-ui .forminator-radio input:checked + label:before {
    background-color: var(--color-fui-primary) !important;
    border-color: var(--color-fui-primary) !important;
}

.forminator-ui .forminator-checkbox input + label:before,
.forminator-ui .forminator-radio input + label:before {
    border-color: var(--color-fui-gray-light) !important;
}

.forminator-ui .forminator-radio .forminator-radio-bullet {
    background-color: var(--color-fui-primary) !important;
}

.forminator-ui .forminator-select--arrow,
.forminator-ui .forminator-select--arrow:before,
.forminator-ui .forminator-select--arrow:after,
.forminator-ui .forminator-pagination-header .forminator-pagination-steps,
.forminator-ui .forminator-pagination-header .forminator-pagination-steps .forminator-step-icon,
.forminator-ui .forminator-pagination-header .forminator-pagination-steps .forminator-step-icon:before,
.forminator-ui .forminator-pagination-header .forminator-pagination-steps .forminator-step-icon span,
.forminator-ui .forminator-pagination-header .forminator-pagination-steps .forminator-step-icon span:before,
.forminator-ui .forminator-pagination-header .forminator-pagination-steps .forminator-step-label,
.forminator-ui .forminator-pagination-footer .forminator-button-submit,
.forminator-ui .forminator-pagination-footer .forminator-button-next,
.forminator-ui .forminator-pagination-footer .forminator-button-back,
.forminator-ui .forminator-button-submit,
.forminator-ui .forminator-button-back,
.forminator-ui .forminator-button-delete {
    background-color: var(--color-fui-primary) !important;
    border-color: var(--color-fui-primary) !important;
    color: var(--color-fui-white) !important;
    text-align: center;
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 0;
    margin-left: 5px;
    font-weight: 700;
    text-transform: none;
    padding: 10px 20px;
    height: auto;
    line-height: 1.5;
    box-shadow: none;
    border-radius: 5px;
}

.forminator-ui .forminator-pagination-header .forminator-pagination-steps,
.forminator-ui .forminator-pagination-header .forminator-pagination-steps .forminator-step-icon:before {
    color: var(--color-fui-white) !important;
}

.forminator-ui .forminator-pagination-header .forminator-pagination-steps .forminator-step-icon {
    color: var(--color-fui-primary) !important;
    border-color: var(--color-fui-primary) !important;
}

.forminator-ui .forminator-pagination-header .forminator-pagination-steps .forminator-step-icon span,
.forminator-ui .forminator-pagination-header .forminator-pagination-steps .forminator-step-icon span:before {
    background-color: var(--color-fui-primary) !important;
    color: var(--color-fui-primary) !important;
}

.forminator-ui .forminator-button-submit:hover,
.forminator-ui .forminator-button-submit:focus,
.forminator-ui .forminator-button-submit:active,
.forminator-ui .forminator-button-back:hover,
.forminator-ui .forminator-button-back:focus,
.forminator-ui .forminator-button-back:active,
.forminator-ui .forminator-button-delete:hover,
.forminator-ui .forminator-button-delete:focus,
.forminator-ui .forminator-button-delete:active {
    background-color: var(--color-fui-primary-hover) !important;
    border-color: var(--color-fui-primary-hover) !important;
    color: var(--color-fui-white) !important;
}

.forminator-ui .forminator-button-back {
    font-size: 14px;
    border-color: var(--color-fui-background-lighter) !important;
    background-color: var(--color-fui-background-lighter) !important;
    color: var(--color-fui-primary) !important;
}

.forminator-ui .forminator-button-back:hover,
.forminator-ui .forminator-button-back:focus,
.forminator-ui .forminator-button-back:active {
    background-color: var(--color-fui-background-hover) !important;
    border-color: var(--color-fui-background-hover) !important;
    color: var(--color-fui-primary) !important;
}

.forminator-ui .forminator-button-delete {
    font-size: 14px;
    border-color: var(--color-fui-delete-background) !important;
    background-color: var(--color-fui-delete-background) !important;
    color: var(--color-fui-error) !important;
}

.forminator-ui .forminator-button-delete:hover,
.forminator-ui .forminator-button-delete:focus,
.forminator-ui .forminator-button-delete:active {
    background-color: var(--color-fui-delete-background !important-hover);
    border-color: var(--color-fui-delete-background !important-hover);
    color: var(--color-fui-error) !important;
}

.forminator-ui .forminator-field.fui-acceptance .forminator-checkbox label {
    font-size: 16px;
    color: var(--color-fui-gray-light) !important;
}

.forminator-ui .forminator-select2-container--default .forminator-select2-selection--single,
.forminator-ui .forminator-select2-container--default .forminator-select2-selection--multiple,
.forminator-ui .forminator-select2-container--default.forminator-select2-container--focus .forminator-select2-selection--single,
.forminator-ui .forminator-select2-container--default.forminator-select2-container--focus .forminator-select2-selection--multiple,
.forminator-ui .forminator-select2-container--default .forminator-select2-results__option--highlighted[aria-selected],
.forminator-ui .forminator-select2-container--default .forminator-select2-results__option--highlighted[aria-selected]:hover,
.forminator-ui .forminator-select2-container .forminator-select2-selection__choice {
    border-color: var(--color-fui-gray-lighter) !important;
    background-color: var(--color-fui-background-lighter) !important;
    color: var(--color-fui-primary) !important;
}

.forminator-ui .forminator-select2-container .forminator-select2-selection__choice__remove {
    color: var(--color-fui-primary) !important;
}

.forminator-ui button.forminator-button {
    align-items: center !important;
    background: var(--color-primary) !important;
    border: 1px solid var(---color-primary) !important;
    color: var(--color-light) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
    font-size: var(--size-step-0) !important;
    font-family: var(--font-bold) !important;
    gap: 0 var(--space-2xs) !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: .4em 2em !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 5rem !important;
    text-transform: uppercase !important;
    transition: all 0.2s !important;
}
 */

.block--gallery img {
	width: 100%;
}

/* LAYOUT A */

.block--gallery.layout-a .image-gallery-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: var(--space-3xs, 1rem);
	grid-row-gap: var(--space-3xs, 1rem);
	grid-auto-flow: row;
}

.block--gallery.layout-a .image-gallery-grid picture,
.block--gallery.layout-a .image-gallery-grid img { height: 100%; }

.block--gallery.layout-a .image-gallery-grid img { object-fit: cover; }

.block--gallery.layout-a .image-gallery-grid > *:nth-child(4n+1) { 
	grid-column-start: 1;
	grid-column-end: 4;
}

.block--gallery.layout-a .image-gallery-grid > *:nth-child(4n+2) {
	grid-column-start: 4;
	grid-column-end: 6;
}

.block--gallery.layout-a .image-gallery-grid > *:nth-child(4n+3) { 
	grid-column-start: 1;
	grid-column-end: 3;
}

.block--gallery.layout-a .image-gallery-grid > *:nth-child(4n+4) { 
	grid-column-start: 3;
	grid-column-end: 6;
}

/* LAYOUT B */

.block--gallery.layout-b .image-gallery-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	/* grid-template-rows: repeat(2, 1fr); */
	grid-column-gap: var(--space-3xs, 1rem);
	grid-row-gap: var(--space-3xs, 1rem);
	grid-auto-flow: row;
}

.block--gallery.layout-b .image-gallery-grid picture,
.block--gallery.layout-b .image-gallery-grid img { height: 100%; }

.block--gallery.layout-b .image-gallery-grid img { object-fit: cover; }

.block--gallery.layout-b .image-gallery-grid > *:nth-child(3n+1) { 
	grid-column-start: 1;
	grid-column-end: 7;
}

.block--gallery.layout-b .image-gallery-grid > *:nth-child(3n+2) {
	grid-column-start: 1;
	grid-column-end: 4;
}

.block--gallery.layout-b .image-gallery-grid > *:nth-child(3n+3) { 
	grid-column-start: 4;
	grid-column-end: 7;
}

/* Hero Media — shared styles for video/image/fallback in hero blocks */

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Video — iframe (Bunny Stream etc.) */

.hero-media__iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: 177.78vh;   /* 16/9 × 100vh — covers when container is tall */
  height: 56.25vw;   /* 9/16 × 100vw — covers when container is wide */
  border: 0;
  pointer-events: none;
}

/* Video — native <video> element */

.hero-media__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

/* Image */

.hero-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback court graphic */

.hero-media--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.06;
  color: var(--color-primary);
}

.block--hero {
	aspect-ratio: 16/9;
	position: relative;
}

.block--hero .hero-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.block--hero .hero-background {
	z-index: -10;
	/* width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0; */
}

.hero-background .hero_bg_colour,
.hero-background .hero_image,
.hero-background .hero_slideshow, 
.hero-background .hero_video {
	/* position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%; */
}

.hero-background .hero_bg_colour {
	z-index: -8;
}

.hero-background .hero_image {
	z-index: -5;
}

.hero-background .hero_image picture,
.hero-background .hero_image img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.hero-background .hero_slideshow {
	z-index: -3;
}

.hero-background .hero_slideshow picture,
.hero-background .hero_slideshow img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.hero-background .hero_video {
	z-index: -1;
}

.hero-background .hero_video iframe {
	width: 100%;
	height: 100%;
}

.block--image img {
	width: 100%;
}

/* Map Block */

.map-block {
	position: relative;
}

.map-block__container {
	position: relative;
}

/* Map Image */

.map-block__image-wrapper {
	position: relative;
	width: 100%;
}

.map-block__image {
	width: 100%;
	height: auto;
	display: block;
}

/* Walk Times Key - Stacked on mobile */

.map-block__key {
	background-color: var(--color-dark-green, #1a3a2f);
	color: var(--color-light-green, #90c9a7);
	padding: var(--space-m, 1.5rem);
}

@media (min-width: 1230px) {
	/* Desktop: Inset positioning */
	.map-block__key {
		position: absolute;
		bottom: var(--space-l, 2rem);
		left: var(--space-l, 2rem);
		max-width: 320px;
		padding: var(--space-m, 1.5rem);
	}
}

.map-block__key-title {
	font-size: var(--size-step-1, 1.25rem);
	font-weight: 600;
	margin: 0 0 var(--space-s, 1rem) 0;
	color: var(--color-light-green, #90c9a7);
}

.map-block__key-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs, 0.5rem);
}

.map-block__key-item {
	display: flex;
	align-items: center;
	gap: var(--space-s, 0.75rem);
}

/* Icon styling */

.map-block__key-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.map-block__key-icon svg {
	width: 100%;
	height: 100%;
	fill: var(--color-light-green, #90c9a7);
}

.map-block__key-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Text styling */

.map-block__key-text {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.map-block__key-location {
	font-weight: 500;
	color: var(--color-light-green, #90c9a7);
	font-size: var(--size-step-0, 1rem);
}

.map-block__key-time {
	font-size: var(--size-step--1, 0.875rem);
	color: var(--color-light-green, #90c9a7);
	opacity: 0.8;
}

/* Empty state */

.map-block__empty {
	padding: var(--space-l, 2rem);
	text-align: center;
	background-color: var(--color-sand, #f5f5f0);
	color: var(--color-dark-green, #1a3a2f);
}

/* Off-canvas mobile nav — CUBE CSS */

.off-canvas {
  background-color: var(--color-ink);
  color: var(--color-light);
  padding: var(--space-l) var(--space-m);
}

.off-canvas__close {
  display: block;
  margin-left: auto;
  margin-bottom: var(--space-m);
  background: none;
  border: none;
  color: var(--color-light);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* Off-canvas menu links */

.off-canvas .off-canvas-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.off-canvas .off-canvas-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.off-canvas .off-canvas-menu a {
  display: block;
  padding: var(--space-xs) 0;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--size-step-0);
  transition: color var(--transition-base);
}

.off-canvas .off-canvas-menu a:hover {
  color: var(--color-light);
}

/* Parent items with children — link + toggle side by side */

.off-canvas .menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
}

.off-canvas .menu-item-has-children > a {
  flex: 1;
}

/* Toggle button */

.off-canvas__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  background: none;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color var(--transition-base);
}

.off-canvas__toggle:hover {
  color: var(--color-light);
}

.off-canvas__toggle svg {
  transition: transform var(--transition-base);
}

.off-canvas .menu-item-has-children.is-open > .off-canvas__toggle svg {
  transform: rotate(180deg);
}

/* Sub-menus — hidden by default */

.off-canvas .off-canvas-menu .sub-menu {
  list-style: none;
  padding-left: var(--space-m);
  width: 100%;
  display: none;
}

.off-canvas .menu-item-has-children.is-open > .sub-menu {
  display: block;
}

.off-canvas .off-canvas-menu .sub-menu a {
  color: rgba(255, 255, 255, 0.5);
}

.off-canvas .off-canvas-menu .sub-menu a:hover {
  color: var(--color-light);
}

/* Overlay */

.site-overlay {
  z-index: 1;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
  transition: visibility 0s ease, opacity 0.2s ease;
}

.offside-js--is-open .site-overlay {
  visibility: visible;
  opacity: 0.7;
  transition-delay: 0s;
}

/* PE Child Pages — card grid of sub-pages */

.pe-child-pages__card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-light);
  padding: var(--space-m);
}

/* Background image */

.pe-child-pages__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Colour tint overlay */

.pe-child-pages__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-blue);
  opacity: 0.75;
  transition: opacity var(--transition-base);
}

.pe-child-pages__card:hover .pe-child-pages__overlay {
  opacity: 0.6;
}

/* Content stacking */

.pe-child-pages__title {
  position: relative;
  z-index: 2;
}

.pe-child-pages__excerpt {
  position: relative;
  z-index: 2;
  margin-top: var(--space-2xs);
}

/* Link pinned to bottom */

.pe-child-pages__link {
  position: relative;
  z-index: 2;
  margin-top: auto;
  color: var(--color-ink);
}

/* PE Comparison Table Block — CUBE CSS */

.pe-comparison-block__wrap {
  overflow-x: auto;
}

.pe-comparison-block__table {
  width: 100%;
  border-collapse: collapse;
}

.pe-comparison-block__table th {
  text-align: left;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-border);
}

.pe-comparison-block__th--highlight {
  color: var(--color-primary) !important;
}

.pe-comparison-block__table td {
  padding: var(--space-xs) var(--space-s);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.pe-comparison-block__row--highlight td {
  background: var(--color-primary-pale);
  color: var(--color-ink);
}

.pe-comparison-block__row--highlight td:first-child {
  border-left: 3px solid var(--color-primary);
}

.pe-comparison-block__tick {
  color: var(--color-primary);
}

.pe-comparison-block__cross {
  color: var(--color-border);
}

.pe-comparison-block__half {
  color: #e0a030;
}

/* PE CTA Band Block — CUBE CSS */

.pe-cta-band-block {
  background-color: var(--color-ink);
  color: var(--color-light);
  position: relative;
  overflow: hidden;
}

/* Background — image or video */

.pe-cta-band-block__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.pe-cta-band-block__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 10, 11, 0.55) 0%,
      rgba(10, 10, 11, 0.4) 40%,
      rgba(10, 10, 11, 0.75) 100%
    );
}

/* Inner — generous vertical padding for breathing space */

.pe-cta-band-block__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-l);
  padding-block: var(--space-3xl);
}

.pe-cta-band-block__heading em {
  font-style: italic;
  color: var(--color-primary-light);
}

.pe-cta-band-block__sub {
  max-width: 560px;
}

.pe-cta-band-block__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.pe-cta-band-block__secondary {
  text-decoration: none;
  transition: color var(--transition-base);
}

.pe-cta-band-block__secondary:hover {
  color: var(--color-light);
}

/* PE FAQ Block — 2-column: FAQs + sticky sidebar */

/* 2-column grid */

.pe-faq-block__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-xl);
  align-items: start;
}

/* Left column */

.pe-faq-block__body {
  max-width: 560px;
}

.pe-faq-block__item {
  border-bottom: 1px solid var(--color-border);
}

.pe-faq-block__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-s) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.pe-faq-block__question::-webkit-details-marker {
  display: none;
}

.pe-faq-block__toggle {
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

details[open] .pe-faq-block__toggle {
  transform: rotate(45deg);
}

.pe-faq-block__answer {
  padding: 0 0 var(--space-s) 0;
  max-width: 680px;
}

/* Right column — sticky sidebar card */

.pe-faq-block__sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-m));
}

.pe-faq-block__card {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.pe-faq-block__card-img {
  width: 100%;
  height: auto;
  display: block;
}

.pe-faq-block__card-img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-border);
}

.pe-faq-block__card-heading {
  padding: var(--space-m) var(--space-m) 0;
}

.pe-faq-block__card-copy {
  padding: var(--space-2xs) var(--space-m) 0;
}

.pe-faq-block__card-btn {
  display: block;
  margin: var(--space-m);
  padding: 0.9rem;
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  transition: background var(--transition-base);
}

.pe-faq-block__card-btn:hover {
  background: var(--color-ink);
}

/* Responsive — image first, then questions */

@media (max-width: 768px) {
  .pe-faq-block__grid {
    grid-template-columns: 1fr;
  }

  .pe-faq-block__sidebar {
    position: static;
    order: -1;
  }
}

/* PE Features Grid Block — CUBE CSS */

.pe-features-block__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.pe-features-block__cell {
  --flow-space: var(--space-xs);
  padding: var(--space-l);
  border: 1px solid var(--color-border);
  margin-top: -1px;
  margin-left: -1px;
  transition: background var(--transition-base);
}

.pe-features-block__cell:hover {
  background: var(--color-primary-pale);
}

.pe-features-block__icon {
  font-size: 1.5rem;
}

.pe-features-block__link {
  display: inline-block;
  color: var(--color-primary);
  text-decoration: none;
}

.pe-features-block__link:hover {
  text-decoration: underline;
}

/* Responsive */

@media (max-width: 768px) {
  .pe-features-block__grid {
    grid-template-columns: 1fr;
  }
}

/* PE Footer Links Block — CUBE CSS */

.pe-footer-block {
  background: var(--color-cream);
  padding: var(--block-spacing) var(--space-xl) var(--space-m);
}

.pe-footer-block__inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-xl);
}

/* Brand column */

.pe-footer-block__logo {
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
}

.pe-footer-block__dot {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
}

.pe-footer-block__tagline {
  max-width: 280px;
}

/* Link columns */

.pe-footer-block__col h4 {
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

.pe-footer-block__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pe-footer-block__col li {
  margin-bottom: var(--space-3xs);
}

.pe-footer-block__col a {
  text-decoration: none;
  transition: color var(--transition-base);
}

.pe-footer-block__col a:hover {
  color: var(--color-ink);
}

/* Bottom bar */

.pe-footer-block__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-m);
  margin-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}

.pe-footer-block__bottom a {
  color: inherit;
  text-decoration: none;
}

.pe-footer-block__bottom a:hover {
  color: var(--color-ink);
}

/* Responsive */

@media (max-width: 768px) {
  .pe-footer-block {
    padding: var(--space-l) var(--space-m) var(--space-s);
  }

  .pe-footer-block__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
  }

  .pe-footer-block__brand {
    grid-column: 1 / -1;
  }

  .pe-footer-block__bottom {
    flex-direction: column;
    gap: var(--space-2xs);
    text-align: center;
  }
}

/* PE Hero + Form Block — CUBE CSS */

.pe-hero-form-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--nav-height));
  border-bottom: 1px solid var(--color-border);
}

/* Left column — copy + form */

.pe-hero-form-block__left {
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--color-border);
}

.pe-hero-form-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-m);
}

.pe-hero-form-block__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--color-primary);
}

.pe-hero-form-block__heading {
  margin-bottom: var(--space-s-m);
}

.pe-hero-form-block__heading em {
  font-style: italic;
  color: var(--color-primary);
}

.pe-hero-form-block__sub {
  max-width: 440px;
  margin-bottom: var(--space-m-l);
}

/* Form wrapper */

.pe-hero-form-block__form-wrapper {
  max-width: 480px;
  margin-bottom: var(--space-m);
}

.pe-hero-form-block__form-heading {
  margin-bottom: var(--space-2xs);
}

.pe-hero-form-block__form-subtext {
  margin-bottom: var(--space-m);
}

.pe-hero-form-block__error {
  font-style: italic;
}

/* Stats strip */

.pe-hero-form-block__stats {
  display: flex;
  gap: var(--space-m);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.pe-hero-form-block__stat-value {
  color: var(--color-ink);
}

/* Right column — media */

.pe-hero-form-block__right {
  background: var(--color-cream);
  position: relative;
  overflow: hidden;
}

/* Responsive */

@media (max-width: 768px) {
  .pe-hero-form-block {
    grid-template-columns: 1fr;
  }

  .pe-hero-form-block__left {
    padding: var(--space-l) var(--space-m);
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .pe-hero-form-block__right {
    min-height: 300px;
  }

  .pe-hero-form-block__stats {
    flex-wrap: wrap;
    gap: var(--space-s);
  }
}

/* PE Hero Home — full-bleed video/image homepage hero */

.pe-hero-home {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--color-light);
}

/* Stacking: bg image (2) → bg video (3) → overlay (4) → content (6) */

.pe-hero-home__bg {
  z-index: 2;
}

.pe-hero-home__bg--video {
  z-index: 3;
}

.pe-hero-home__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background-color: var(--color-blue);
  opacity: 0.6;
}

.pe-hero-home__content {
  z-index: 6;
}

.pe-hero-home__heading {
  font-style: italic;
  max-width: 900px;
  margin-top: 0.5rem !important;
}

.pe-hero-home__sub {
  /* opacity: 0.65; */
  max-width: 540px;
}

.pe-hero-home__eyebrow {
  /* opacity: 0.7; */
}

/* Responsive */

@media (max-width: 768px) {
  .pe-hero-home {
    min-height: 85vh;
  }

  .pe-hero-home__content {
    padding-bottom: var(--space-xl);
  }
}

/* PE Hero Block — CUBE CSS */

.pe-hero-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--nav-height));
  border-bottom: 1px solid var(--color-border);
}

/* Left column — copy */

.pe-hero-block__left {
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--color-border);
}

.pe-hero-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-m);
}

.pe-hero-block__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--color-primary);
}

.pe-hero-block__heading {
  margin-bottom: var(--space-s-m);
}

.pe-hero-block__heading em {
  font-style: italic;
  color: var(--color-primary);
}

.pe-hero-block__sub {
  max-width: 440px;
  margin-bottom: var(--space-m-l);
}

.pe-hero-block__actions {
  --cluster-gap: var(--space-xs);
  margin-bottom: 0;
}

/* Stats strip */

.pe-hero-block__stats {
  display: flex;
  gap: var(--space-m);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

/* Right column — media */

.pe-hero-block__right {
  background: var(--color-cream);
  position: relative;
  overflow: hidden;
  padding: var(--space-xl);
}

/* Feature stack */

.pe-hero-block__feature-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 380px;
  position: relative;
  z-index: 1;
}

.pe-hero-block__feature {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--space-xs) var(--space-s);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: -1px;
  transition: background var(--transition-base), transform var(--transition-movement);
}

.pe-hero-block__feature:hover {
  background: var(--color-primary-pale);
  transform: translateX(4px);
  z-index: 2;
  position: relative;
}

.pe-hero-block__feature-icon {
  width: 36px;
  height: 36px;
  background: var(--color-primary-pale);
  border: 1px solid rgba(26, 107, 58, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pe-hero-block__feature-text strong {
  display: block;
  color: var(--color-ink);
  margin-bottom: 0.15rem;
}

/* Buttons */

.pe-hero-block .button--primary {
  background: var(--color-ink);
  color: var(--color-light);
  padding: 0.9rem 2rem;
  text-decoration: none;
  transition: background var(--transition-base);
  display: inline-block;
  border: none;
}

.pe-hero-block .button--primary:hover {
  background: var(--color-primary);
}

.pe-hero-block .button--ghost {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--transition-base);
}

.pe-hero-block .button--ghost:hover {
  color: var(--color-ink);
}

/* Responsive */

@media (max-width: 768px) {
  .pe-hero-block {
    grid-template-columns: 1fr;
  }

  .pe-hero-block__left {
    padding: var(--space-l) var(--space-m);
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .pe-hero-block__right {
    padding: var(--space-l) var(--space-m);
    min-height: auto;
  }


  .pe-hero-block__stats {
    flex-wrap: wrap;
    gap: var(--space-s);
  }
}

/* PE How It Works — full-width heading + 2-column steps/media */

/* Header — sits above the grid, full width */

.pe-hiw__header {
  --flow-space: var(--space-s);
}

/* 2-column grid: steps + media */

.pe-hiw__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Steps list */

.pe-hiw__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.pe-hiw__step {
  display: flex;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  border-top: 1px solid var(--color-border);
}

.pe-hiw__step h3 {
    margin-top: 0;
    height: 3.5rem;
    display: flex;
    align-items: center;
  }

.pe-hiw__step:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* Number circles */

.pe-hiw__step-num {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-ink);
  margin-top: 0;
}

.pe-hiw__step-body {
  --flow-space: var(--space-3xs);
}

/* Right column — media with logo overlay */

.pe-hiw__media {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-m));
  aspect-ratio: 9 / 16;
  background: var(--color-ink);
  border-radius: 0.5rem;
}

.pe-hiw__media-logo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pe-hiw__media-logo svg {
  width: 50%;
  height: auto;
  fill: var(--color-light);
  opacity: 0.1;
}

/* Responsive */

@media (max-width: 768px) {
  .pe-hiw__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

  .pe-hiw__media {
    position: static;
    aspect-ratio: 16 / 9;
  }
}

/* PE Marquee Band Block — CUBE CSS */

.pe-marquee-block {
  background: var(--color-blue);
  color: var(--color-light);
  padding: var(--space-s) 0;
  overflow: hidden;
  /* border-top: 1px solid var(--color-border); */
  /* border-bottom: 1px solid var(--color-border); */
}

.pe-marquee-block__track {
  display: flex;
  gap: 0;
  animation: pe-marquee 25s linear infinite;
  width: max-content;
}

.pe-marquee-block__item {
  display: flex;
  align-items: center;
  /* gap: var(--space-s); */
  gap: 0;
  /* padding: var(--space-s) 0; */
  white-space: nowrap;
}

.pe-marquee-block__sep {
  width: 4px;
  height: 4px;
  background: var(--color-primary-light);
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0 var(--space-m);
}

@keyframes pe-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 6)); }
}

/* PE Navigation — CUBE CSS */

.pe-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-light);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  transition: transform 0.3s ease;
}

/* Hide on scroll down */

html.nav-is-hidden .pe-nav {
  transform: translateY(-100%);
}

/* -------------------------------------------------------
   Hero pages — transparent nav that sits over the hero
   .page-is-at-top is on <html>, .first-block-is-* on <body>
   ------------------------------------------------------- */

body.first-block-is-pe-hero-home .pe-nav,
body.first-block-is-pe-hero .pe-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* At top: transparent, white text */

html.page-is-at-top body.first-block-is-pe-hero-home .pe-nav,
html.page-is-at-top body.first-block-is-pe-hero .pe-nav {
  background: transparent;
  border-bottom-color: transparent;
}

html.page-is-at-top body.first-block-is-pe-hero-home .pe-nav__logo svg path,
html.page-is-at-top body.first-block-is-pe-hero .pe-nav__logo svg path {
  fill: var(--color-primary);
}

html.page-is-at-top body.first-block-is-pe-hero-home .pe-nav #site-navigation a,
html.page-is-at-top body.first-block-is-pe-hero .pe-nav #site-navigation a {
  color: rgba(240, 240, 238, 0.7);
}

html.page-is-at-top body.first-block-is-pe-hero-home .pe-nav #site-navigation a:hover,
html.page-is-at-top body.first-block-is-pe-hero .pe-nav #site-navigation a:hover,
html.page-is-at-top body.first-block-is-pe-hero-home .pe-nav #site-navigation .current-menu-item > a,
html.page-is-at-top body.first-block-is-pe-hero .pe-nav #site-navigation .current-menu-item > a {
  color: var(--color-light);
}

html.page-is-at-top body.first-block-is-pe-hero-home .pe-nav__hamburger span,
html.page-is-at-top body.first-block-is-pe-hero .pe-nav__hamburger span {
  background: var(--color-light);
}

/* Scrolled past top: solid bg, dark text — no colour transition, just instant swap */

html:not(.page-is-at-top) body.first-block-is-pe-hero-home .pe-nav,
html:not(.page-is-at-top) body.first-block-is-pe-hero .pe-nav {
  background: var(--color-light);
  border-bottom-color: var(--color-border);
}

html:not(.page-is-at-top) body.first-block-is-pe-hero-home .pe-nav__logo,
html:not(.page-is-at-top) body.first-block-is-pe-hero .pe-nav__logo {
  color: var(--color-ink);
}

html:not(.page-is-at-top) body.first-block-is-pe-hero-home .pe-nav #site-navigation a:hover,
html:not(.page-is-at-top) body.first-block-is-pe-hero .pe-nav #site-navigation a:hover,
html:not(.page-is-at-top) body.first-block-is-pe-hero-home .pe-nav #site-navigation .current-menu-item > a,
html:not(.page-is-at-top) body.first-block-is-pe-hero .pe-nav #site-navigation .current-menu-item > a {
  color: var(--color-ink);
}

html:not(.page-is-at-top) body.first-block-is-pe-hero-home .pe-nav__hamburger span,
html:not(.page-is-at-top) body.first-block-is-pe-hero .pe-nav__hamburger span {
  background: var(--color-ink);
}

/* -------------------------------------------------------
   Base styles
   ------------------------------------------------------- */

.pe-nav__logo {
  color: var(--color-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
}

.pe-nav__logo svg {
  height: 2.2rem;
  width: auto;
  /* fill: currentColor; */
 }

.pe-nav__logo svg path {
 fill: var(--color-dark);
}

/* Main nav menu (output by ray_top_bar) */

.pe-nav #site-navigation {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pe-nav #site-navigation a {
  font-size: var(--size-step-00);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition-base);
}

.pe-nav #site-navigation a:hover,
.pe-nav #site-navigation .current-menu-item > a {
  color: var(--color-ink);
}

/* Hide sub-menus in top bar for now */

.pe-nav #site-navigation .sub-menu {
  display: none;
}

.pe-nav__cta {
  background: var(--color-ink) !important;
  color: var(--color-light) !important;
  padding: 0.55rem 1.4rem;
  transition: background var(--transition-base);
}

.pe-nav__cta:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* Mobile hamburger */

.pe-nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 5px;
}

.pe-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  transition: transform var(--transition-base);
}

/* WP admin bar — offset sticky/fixed nav */

body.admin-bar .pe-nav {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .pe-nav {
    top: 46px;
  }
}

/* Responsive */

@media (max-width: 768px) {
  .pe-nav {
    padding: 0 var(--space-m);
  }

  .pe-nav #site-navigation,
  .pe-nav > nav {
    display: none;
  }

  .pe-nav__hamburger {
    display: flex;
  }
}

/* PE Pricing Block — CUBE CSS */

/* ─── Cards stack as rows ────────────────────────────── */

.pe-pricing-block__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* ─── Card ───────────────────────────────────────────── */

.pe-pricing-block__card {
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
}

/* ─── Two-column inner layout ────────────────────────── */

.pe-pricing-block__card-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: stretch;
}

/* ─── Left: plan info with bg image ──────────────────── */

.pe-pricing-block__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background: #0a1e3d;
  padding: var(--space-l);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.pe-pricing-block__info > * {
  position: relative;
  z-index: 2;
}

/* Background image — desaturated + blended */

.pe-pricing-block__info-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: luminosity;
  opacity: 0.25;
}

/* Blue overlay on top of image */

.pe-pricing-block__info-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0a1e3d;
  mix-blend-mode: multiply;
}

/* ─── Badge ──────────────────────────────────────────── */

.pe-pricing-block__badge {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  width: fit-content;
}

/* ─── Name & price ───────────────────────────────────── */

.pe-pricing-block__name em {
  font-style: normal;
  color: var(--color-primary);
}

.pe-pricing-block__price sup {
  font-size: 0.5em;
  font-weight: 400;
  vertical-align: top;
}

.pe-pricing-block__price sub {
  font-size: 0.35em;
  font-weight: 400;
  vertical-align: baseline;
}

/* ─── Free line ──────────────────────────────────────── */

.pe-pricing-block__free-line {
  color: var(--color-primary);
}

/* ─── CTA button ─────────────────────────────────────── */

.pe-pricing-block__cta {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
  margin-top: auto;
  background: var(--color-primary);
  color: var(--color-ink);
  transition: background var(--transition-base);
}

.pe-pricing-block__cta:hover {
  background: var(--color-primary-light);
}

/* ─── Coming soon ────────────────────────────────────── */

.pe-pricing-block__card--coming-soon {
  border-style: dashed;
}

.pe-pricing-block__card--coming-soon .pe-pricing-block__cta {
  pointer-events: none;
  background: var(--color-border);
}

/* ─── Right: features ────────────────────────────────── */

.pe-pricing-block__features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs) var(--space-m);
  padding: var(--space-l);
  margin: 0;
  background: var(--color-cream);
}

.pe-pricing-block__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.pe-pricing-block__features li::before {
  content: '\2713';
  color: var(--color-ink);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─── Meta cards (includes section) ──────────────────── */

.pe-pricing-block__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-s);
}

.pe-pricing-block__meta-card {
  border-radius: 1rem;
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--color-border);
}

.pe-pricing-block__meta-card::before {
  content: '\2713';
  color: var(--color-ink);
  display: block;
  margin-bottom: var(--space-2xs);
}

/* ─── Footnote ───────────────────────────────────────── */

.pe-pricing-block__footnote {
  text-align: center;
}

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

@media (max-width: 768px) {
  .pe-pricing-block__card-inner {
    grid-template-columns: 1fr;
  }

  .pe-pricing-block__features {
    grid-template-columns: 1fr;
  }

  .pe-pricing-block__meta {
    grid-template-columns: 1fr;
  }
}

/* PE Problem Strip Block — CUBE CSS */

/* 3-column grid */

.pe-problem-block__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-border);
}

.pe-problem-block__cell {
  --flow-space: var(--space-xs-s);
  padding: var(--space-l);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .pe-problem-block__cell {
    border-bottom: none;
  }
}

.pe-problem-block__cell:last-child {
  border-right: none;
}

.pe-problem-block__icon {
  color: var(--color-dark);
}

.pe-problem-block__icon svg {
  display: block;
  width: 32px;
  height: 32px;
}

/* Responsive */

@media (max-width: 768px) {
  .pe-problem-block__grid {
    grid-template-columns: 1fr;
  }

  .pe-problem-block__cell {
    border-right: none;
  }
}

/* PE Stats Strip — large stat callouts */

.pe-stats-strip {
  padding-block: var(--space-xl);
  background: var(--color-blue);
  color: var(--color-light);
}

.pe-stats-strip__grid {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.pe-stats-strip__item {
  text-align: center;
}

.pe-stats-strip__value {
  color: var(--color-primary);
}

/* Responsive */

@media (max-width: 768px) {
  .pe-stats-strip__grid {
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
  }
}

/* PE Testimonial — full-bleed image with content on the side */

.pe-testimonial {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background image */

.pe-testimonial__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.pe-testimonial__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(0, 23, 61, 0.3) 0%,
    rgba(0, 23, 61, 0.85) 50%,
    rgba(0, 23, 61, 0.95) 100%
  );
}

/* 2-column grid: empty left (shows image), content right */

.pe-testimonial__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-xl-2xl);
}

.pe-testimonial__content {
  color: var(--color-light);
}

/* Card — no white bg, just content */

.pe-testimonial__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.pe-testimonial__card + .pe-testimonial__card {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.pe-testimonial__quote-mark {
  font-size: 3rem;
  line-height: 1;
  color: var(--color-primary);
}

.pe-testimonial__quote {
  color: var(--color-light);
}

/* Author */

.pe-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.pe-testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pe-testimonial__name {
  display: block;
  font-style: normal;
  color: var(--color-light);
}

/* Responsive — content underneath */

@media (max-width: 768px) {
  .pe-testimonial {
    min-height: auto;
  }

  .pe-testimonial__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 23, 61, 0.2) 0%,
      rgba(0, 23, 61, 0.9) 60%,
      rgba(0, 23, 61, 0.95) 100%
    );
  }

  .pe-testimonial__grid {
    grid-template-columns: 1fr;
  }

  .pe-testimonial__image-col {
    min-height: 250px;
  }
}

/* PE Who It's For Block — CUBE CSS */

.pe-whoisitfor-block__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-l);
}

.pe-whoisitfor-block__card {
  --flow-space: var(--space-2xs);
}

.pe-whoisitfor-block__cta {
  display: inline-block;
  color: var(--color-primary);
  text-decoration: none;
}

.pe-whoisitfor-block__cta:hover {
  text-decoration: underline;
}

/* Responsive */

@media (max-width: 768px) {
  .pe-whoisitfor-block__grid {
    grid-template-columns: 1fr;
  }
}

.pill {
    background-color: var(--color-dark);
    color: var(--color-light);
    display: inline-block;
    font-size: var(--size-step-0);
    padding: var(--space-3xs) var(--space-2xs);
    text-decoration: none;
}

/*
  Prose — element-level styling for standard WP content.
  Width and spacing are handled by the PHP content-wrapper
  which wraps core content in .wrapper.wrapper--narrow.flow.block-padding
*/

/* Blockquotes */

.page-content blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-m);
}

/* Lists — add left indent */

.page-content ul,
.page-content ol {
  padding-left: 1.25em;
}

/* Horizontal rule */

.page-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-l);
}

/* Tables */

.page-content table {
  width: 100%;
  border-collapse: collapse;
}

.page-content table th,
.page-content table td {
  padding: var(--space-xs) var(--space-s);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

/* Images */

.page-content figure img,
.page-content .wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* ─── Details / Summary (classic editor FAQs) ────────── */

.page-content details {
  border-bottom: 1px solid var(--color-border);
}

.page-content details:first-of-type {
  border-top: 1px solid var(--color-border);
}

.page-content details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-s) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.page-content details summary::-webkit-details-marker {
  display: none;
}

.page-content details summary::after {
  content: '+';
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.page-content details[open] summary::after {
  transform: rotate(45deg);
}

.page-content details > p,
.page-content details > div {
  padding-bottom: var(--space-s);
}

/* ─── Standalone prose class ─────────────────────────── */

.prose {
  --flow-space: var(--space-m);
}

.prose > * + * {
  margin-top: var(--flow-space);
}

.prose > :is(h2, h3, h4) + * {
  margin-top: var(--space-s);
}

.prose blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-m);
}

/*** Site Header / Nav Styles ***/

.nav-logo {
  width: 10rem;
}

.menu a {
    letter-spacing: .04ch;
    text-decoration: none;
}

@media (max-width: 31em) {

.site-header .nav-button-wrapper .button {
      padding: 0.2rem
  }
    }

.site-header .nav-button-wrapper span {
    display: none;
  }

@media (min-width: 31em) {

.site-header .nav-button-wrapper span {
      display: block
  }
    }

@media (max-width: 31em) {

.site-header .nav-button-wrapper svg {
      width: 1.6rem
  }
    }

@media (min-width: 31em) {

.site-header .nav-button-wrapper svg {
      display: none
  }
    }

/*** Header Options: ***/

/*** 1 - Sticky header ***/

.site-header {
  z-index: 10;
  position: sticky;
  top: 0;
}

/*** 1 - Auto Hide Header on Scroll - Need to add JS ***/

/* .site-header-inner {
  z-index: 10;
  position: fixed;
  transition: all 0.2s;
  width: 100%;
  height: var(--nav-height, 100px);
  top: 0;
}

.site-header-content-wrapper {
  height: var(--nav-height, 100px);
}

.site-header-bg {
  position: absolute;
  width: 100%;
  background-color: var(--color-light);
  height: var(--nav-height, 100px);
} */

/* html.page-is-at-top body.first-block-is-hero {
  .site-header-bg {
    background-color: transparent;
    background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.1), rgba(0,0,0,0.1));
  }
  .site-header-inner {
    color: var(--color-light);
  }
  .nav-logo svg path {
    fill: var(--color-light);
  }
  .menu-item a {
    background: linear-gradient(0deg, var(--color-light), var(--color-light)) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 350ms;
    --bg-h: 2px;
    padding-bottom: 2px;
  }
  .menu-item a:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;
  }
} */

@media (min-width: 50em) {

html.nav-is-hidden:not(.page-is-at-top) body:not(.offside-js--is-open) .site-header-inner {
      transform: translateY(-150%)
  }
    }

html.nav-is-visible .site-header-inner, html.nav-is-hidden body.offside-js--is-open .site-header-inner {
      transform: none;
  }

.site-header-inner {
  transition: all 0.2s;
}

/* body:not(.first-block-is-hero):not(.offside-js--is-open) {
  margin-top: var(--nav-height, 100px);
}

body:not(.offside-js--is-open).post-type-archive-stone_cpt,
body:not(.offside-js--is-open).blog,
body:not(.offside-js--is-open).first-block-is-copy {
  margin-top: var(--double-nav-height, 100px);
}

body.first-block-is-hero .site-header {
  position: absolute;
}
body.first-block-is-hero .block-hero {
  &:before {
    content: "";
    display: block;
    height: var(--nav-height, 100px);
  }
} */

/* 
MENU - AUTO HIDE - Remove if not using (also JS)
Auto hiding nav on scroll down and reveal on scroll up
*/

/* .site-header-inner {
  z-index: 10;
  position: fixed;
  transition: all 0.2s;
  width: 100%;
  height: var(--nav-height, 100px);
  top: 0;
}

.site-header-content-wrapper {
  height: var(--nav-height, 100px);
}

.site-header-bg {
  position: absolute;
  width: 100%;
  background-color: var(--color-light);
  height: var(--nav-height, 100px);
}

html.page-is-at-top body.first-block-is-hero {
  .site-header-bg {
    background-color: transparent;
    background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.1), rgba(0,0,0,0.1));
  }
  .site-header-inner {
    color: var(--color-light);
  }
  .nav-logo svg path {
    fill: var(--color-light);
  }
  .menu-item a {
    background: linear-gradient(0deg, var(--color-light), var(--color-light)) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 350ms;
    --bg-h: 2px;
    padding-bottom: 2px;
  }
  .menu-item a:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;
  }
}

html.nav-is-hidden body:not(.menu-is-open) {
  .site-header-inner {
    @media (min-width: 50em) {
      transform: translateY(-150%);
    }
  }
}

html.nav-is-visible,
html.nav-is-hidden body.offside-js--is-open {
  .site-header-inner {
      transform: none;
  }
} */

.social-links svg {
  width: 3rem;
  height: 3rem;
}

.social-links svg rect,
.social-links svg path {
  fill: var(--color-dark);
}

.block--video iframe,
.block--video img {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.video-thumb {
	aspect-ratio: 16 / 9;
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.video-thumb > * {
	position: absolute;
	width: 100%;
}

.video-thumb iframe {
	pointer-events: none;
}

.video-thumb svg {
	width: 8em;
	height: 8em;
	filter: invert(100%);
	mix-blend-mode: difference;
}

/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
  display: flex;
  flex-wrap: wrap;
  /* gap: var(--gutter, var(--space-s-m)); */
  gap: var(--space-s);
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

/*
FLOW COMPOSITION
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
*/

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

/* Exception: Headings following eyebrows should be closer */

.flow > .font-eyebrow + :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  margin-top: var(--flow-space--half, 0.5em);
}

/* Modifier for half spacing throughout */

.flow--half > * + * {
  margin-top: calc(var(--flow-space, 1em) / 2);
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-s-l));
}

/* A split 50/50 layout */

.grid[data-layout='50-50'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
}

/* Three column grid layout */

.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

/* Four column grid layout */

.grid[data-layout='quarters'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(14rem, 25%, 18rem);
}

/* Twelve column grid layout */

.grid[data-layout='twelfths'] {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* Special layout for larger devices. Used on home page intro */

.grid[data-layout='lg:10/2'] {
  grid-template-columns: 100%;
}

@media (min-width: 760px) {
  .grid[data-layout='lg:10/2'] {
    grid-template-columns: clamp(40rem, 80vw, 60rem);
  }
}

@media (min-width: 1230px) {
  .grid[data-layout='lg:10/2'] {
    grid-template-columns: 10fr 2fr;
  }
}

/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--repel-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-m));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so anything greater than 2 is ful width */

.switcher > :nth-child(n + 3) {
  flex-basis: 100%;
}

/*
WRAPPER COMPOSITION 
A common wrapper/container
*/

.wrapper {
  margin-inline: auto;
  max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 80rem);  /* clamp(min, val, max) */
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

.wrapper--narrow {
  max-width: 60rem;
}

/* ==========================================================================
   ARCHIVE POST NAVIGATION
   Pagination styling for archive pages
   ========================================================================== */

.archive-post-nav {
	/* PROJECT-SPECIFIC: Update these custom properties with your brand colours */
	--post-nav-bg: var(--color-primary, #333);
	--post-nav-fg: var(--color-neutral-light, #fff);
}

.archive-post-nav ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs, 0.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Previous/Next arrow links */

.archive-post-nav .prev-list-item a,
.archive-post-nav .next-list-item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.archive-post-nav .prev-list-item a:hover,
.archive-post-nav .next-list-item a:hover {
	transform: scale(1.05);
}

.archive-post-nav .prev-list-item a:active,
.archive-post-nav .next-list-item a:active {
	transform: scale(0.98);
}

/* SVG sizing */

.archive-post-nav .prev-list-item svg,
.archive-post-nav .next-list-item svg {
	display: block;
	width: auto;
	height: 50px;
}

/* Page number links */

.archive-post-nav ul li:not(.prev-list-item):not(.next-list-item) {
	margin: 0;
}

.archive-post-nav ul li:not(.prev-list-item):not(.next-list-item) a,
.archive-post-nav ul li:not(.prev-list-item):not(.next-list-item) span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: var(--space-2xs, 0.25rem) var(--space-xs, 0.5rem);
	background-color: var(--post-nav-bg);
	color: var(--post-nav-fg);
	text-decoration: none;
	font-weight: 500;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.archive-post-nav ul li:not(.prev-list-item):not(.next-list-item) a:hover {
	transform: translateY(-2px);
}

.archive-post-nav ul li:not(.prev-list-item):not(.next-list-item) a:active {
	transform: translateY(0);
}

/* Current page */

.archive-post-nav ul li:not(.prev-list-item):not(.next-list-item) span.current {
	background-color: var(--post-nav-fg);
	color: var(--post-nav-bg);
	font-weight: 700;
}

/* Responsive adjustments */

@media (max-width: 768px) {
	.archive-post-nav ul {
		gap: var(--space-2xs, 0.25rem);
	}

	.archive-post-nav .prev-list-item svg,
	.archive-post-nav .next-list-item svg {
		height: 40px;
	}

	.archive-post-nav ul li:not(.prev-list-item):not(.next-list-item) a,
	.archive-post-nav ul li:not(.prev-list-item):not(.next-list-item) span {
		min-width: 32px;
		min-height: 32px;
		padding: var(--space-3xs, 0.125rem) var(--space-2xs, 0.25rem);
		font-size: 0.875rem;
	}
}

/* Blog Index */

.blog-index__header {
  padding-top: var(--space-l);
  padding-bottom: var(--space-m);
}

.blog-index__title {
  margin-bottom: var(--space-2xs);
}

.blog-index__intro {
  color: var(--color-muted);
  max-width: 560px;
}

/* Category filter tabs */

.blog-index__filters {
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--color-border);
}

.blog-index__filter-list {
  --cluster-gap: var(--space-2xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-index__filter-pill {
  display: inline-block;
  padding: var(--space-3xs) var(--space-s);
  color: var(--color-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

.blog-index__filter-pill:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.blog-index__filter-pill.is-active {
  background: var(--color-ink);
  color: var(--color-light);
  border-color: var(--color-ink);
}

/* Card grid */

.blog-index__grid {
  padding-top: var(--space-l);
  padding-bottom: var(--space-2xl);
}

.blog-index__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
}

/* Pagination */

.blog-index__pagination {
  margin-top: var(--space-xl);
}

.blog-index__pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
}

.blog-index__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-2xs);
  color: var(--color-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

.blog-index__pagination .page-numbers:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.blog-index__pagination .page-numbers.current {
  background: var(--color-ink);
  color: var(--color-light);
  border-color: var(--color-ink);
}

/* Empty state */

.blog-index__empty {
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--color-muted);
}

/* Responsive */

@media (max-width: 768px) {
  .blog-index__cards {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .blog-index__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Blog Single — full-width hero with text overlay and narrow content */

.blog-single-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.blog-single-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blog-single-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-single-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 10, 11, 0.15) 0%,
      rgba(10, 10, 11, 0.4) 50%,
      rgba(10, 10, 11, 0.85) 100%
    );
}

.blog-single-hero__content {
  position: relative;
  z-index: 3;
  padding-bottom: var(--space-xl);
  padding-top: var(--space-3xl);
}

.blog-single-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: rgba(240, 240, 238, 0.7);
  text-decoration: none;
  margin-bottom: var(--space-m);
  transition: color var(--transition-base);
}

.blog-single-hero__back:hover {
  color: var(--color-light);
}

.blog-single-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-s);
}

.blog-single-hero__category {
  display: inline-block;
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-primary);
  color: var(--color-ink);
  text-decoration: none;
}

.blog-single-hero__date {
  color: rgba(240, 240, 238, 0.6);
}

.blog-single-hero__title {
  color: var(--color-light);
  max-width: 800px;
}

.blog-single-hero__excerpt {
  color: rgba(240, 240, 238, 0.7);
  max-width: 600px;
  margin-top: var(--space-s);
}

/* Article content */

.blog-single__article {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}

/* Related/next posts section */

.blog-single__related {
  padding-top: var(--space-l);
  padding-bottom: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.blog-single__related h3 {
  margin-bottom: var(--space-m);
}

/* Responsive */

@media (max-width: 768px) {
  .blog-single-hero {
    min-height: 50vh;
  }

  .blog-single-hero__content {
    padding-bottom: var(--space-l);
  }
}

/* ==========================================================================
   Coach Directory — archive-coach.php + taxonomy-city.php
   ========================================================================== */

/* Directory layout */

.coach-directory {
    padding-block: var(--space-l-xl);
}

.coach-directory__header {
    margin-block-end: var(--space-l-xl);
}

.coach-directory__title {
    margin-block-end: var(--space-s);
}

.coach-directory__intro {
    color: var(--color-ink-mid);
}

/* Grid override for city cards */

.coach-directory__grid {
    --grid-min-item-size: 16rem;
}

/* --------------------------------------------------------------------------
   City cards (archive-coach.php)
   -------------------------------------------------------------------------- */

.city-card {
    position: relative;
    background-color: var(--color-light);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-m);
    text-decoration: none;
    color: var(--color-ink);
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.city-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.city-card__name {
    margin: 0;
}

.city-card__count {
    position: absolute;
    top: var(--space-s);
    right: var(--space-s);
    background-color: var(--color-primary);
    color: var(--color-ink);
    padding: 0.35em 0.6em;
    margin: 0;
}

.city-card__empty {
    color: var(--color-muted);
    font-style: italic;
    margin: 0;
}

.city-card__arrow {
    color: var(--color-primary);
    margin-block-start: auto;
    transition: transform var(--transition-base);
}

.city-card:hover .city-card__arrow {
    transform: translateX(4px);
}

/* Empty state */

.coach-directory__no-cities {
    color: var(--color-muted);
    text-align: center;
    padding-block: var(--space-xl-2xl);
}

/* --------------------------------------------------------------------------
   Coach cards (taxonomy-city.php, via card-coach.php partial)
   -------------------------------------------------------------------------- */

.coach-card {
    background-color: var(--color-light);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.coach-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.coach-card__image a {
    display: block;
}

.coach-card__photo {
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

.coach-card__photo-placeholder {
    align-items: center;
    aspect-ratio: 4 / 3;
    background-color: var(--color-cream);
    color: var(--color-muted);
    display: flex;
    justify-content: center;
    width: 100%;
}

.coach-card__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--space-2xs);
    padding: var(--space-s);
}

.coach-card__name {
    margin: 0;
}

.coach-card__name a {
    color: var(--color-ink);
    text-decoration: none;
}

.coach-card__name a:hover {
    color: var(--color-primary);
}

.coach-card__tagline {
    color: var(--color-ink-mid);
    margin: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.coach-card__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-s);
    margin-block-start: auto;
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--color-border);
}

.coach-card__location {
    align-items: center;
    color: var(--color-ink-mid);
    display: inline-flex;
    gap: 0.3em;
}

.coach-card__location svg {
    flex-shrink: 0;
}

.coach-card__badge {
    background-color: var(--color-primary);
    color: var(--color-cream);
    padding: 0.15em 0.5em;
    white-space: nowrap;
}

.coach-card__rate {
    color: var(--color-ink);
    margin-inline-start: auto;
}

/* City archive empty state */

.coach-directory__empty {
    padding-block: var(--space-xl-2xl);
    text-align: center;
}

.coach-directory__empty p {
    color: var(--color-ink-mid);
    margin-block-end: var(--space-m);
}

/* Pagination */

.coach-directory__pagination {
    margin-block-start: var(--space-l-xl);
}

/* ==========================================================================
   Coach Profile — single-coach.php
   ========================================================================== */

.coach-profile {
    padding-block: var(--space-l-xl);
}

/* Two-column layout */

.coach-profile__layout {
    display: grid;
    gap: var(--space-l-xl);
    grid-template-columns: 1fr;
}

@media (min-width: 50em) {
    .coach-profile__layout {
        grid-template-columns: 1fr 20rem;
        align-items: start;
    }
}

/* --------------------------------------------------------------------------
   Main column
   -------------------------------------------------------------------------- */

.coach-profile__image {
    margin-block-end: var(--space-m);
}

.coach-profile__photo {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--color-border);
    display: block;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

.coach-profile__name {
    margin-block-end: var(--space-2xs);
}

.coach-profile__tagline {
    color: var(--color-ink-mid);
    margin-block-end: var(--space-m);
}

.coach-profile__bio {
    margin-block-end: var(--space-l);
}

.coach-profile__section-title {
    margin-block-end: var(--space-s);
}

.coach-profile__services,
.coach-profile__venues {
    margin-block-end: var(--space-l);
}

.coach-profile__services-list,
.coach-profile__venues-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.coach-profile__services-list li,
.coach-profile__venues-list li {
    border-block-end: 1px solid var(--color-border);
    padding-block: var(--space-2xs);
}

.coach-profile__services-list li:first-child,
.coach-profile__venues-list li:first-child {
    border-block-start: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.coach-profile__sidebar {
    background-color: var(--color-light);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-m);
}

@media (min-width: 50em) {
    .coach-profile__sidebar {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-m));
    }
}

.coach-profile__badge-wrap {
    text-align: center;
}

.coach-profile__badge {
    background-color: var(--color-primary);
    color: var(--color-cream);
    display: inline-block;
    padding: 0.3em 0.8em;
}

.coach-profile__rate-wrap,
.coach-profile__location-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.coach-profile__rate-label,
.coach-profile__location-label {
    color: var(--color-muted);
}

.coach-profile__rate {
    color: var(--color-ink);
}

.coach-profile__location {
    color: var(--color-ink);
}

/* Booking CTA */

.coach-profile__cta {
    text-align: center;
    width: 100%;
}

/* Social links */

.coach-profile__social-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.coach-profile__social-list a {
    align-items: center;
    color: var(--color-ink-mid);
    display: inline-flex;
    gap: 0.5em;
    text-decoration: none;
    transition: color var(--transition-base);
}

.coach-profile__social-list a:hover {
    color: var(--color-primary);
}

/* Loading overlay — homepage only */

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue);
  pointer-events: none;
}

.loading-overlay__courtline {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* background-color: rgba(55,55,55, 0.4); */
}

.loading-overlay__courtline svg {
  display: block;
  height: 100%;
  width: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.1;
}

.loading-overlay__logo {
  height: 30vh;
  width: auto;
  max-width: 80vw;
  position: relative;
  z-index: 2;
}

.loading-overlay__logo svg {
  display: block;
  height: 100%;
  width: auto;
}

.loading-overlay__logo .cls-1 {
  fill: var(--color-primary);
}

/* Features Hub + Feature Page — CUBE CSS */

/* Features Hub */

.features-hub__header {
  padding-top: var(--space-l);
  padding-bottom: var(--space-m);
}

.features-hub__title {
  margin-bottom: var(--space-2xs);
}

.features-hub__intro {
  color: var(--color-muted);
  max-width: 560px;
}

.features-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  padding-bottom: var(--space-2xl);
}

.features-hub__card {
  display: block;
  border: 1px solid var(--color-border);
  padding: var(--space-l) var(--space-m);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color var(--transition-base), transform var(--transition-movement);
}

.features-hub__card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.features-hub__card-icon {
  display: block;
  margin-bottom: var(--space-s);
}

.features-hub__card-title {
  margin-bottom: var(--space-3xs);
}

.features-hub__card-desc {
  color: var(--color-muted);
  margin-bottom: var(--space-s);
}

.features-hub__card-link {
  color: var(--color-primary);
}

/* Feature Page */

.feature-page__header {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}

.feature-page__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-l);
  align-items: center;
  margin-top: var(--space-m);
}

.feature-page__hero-image img {
  width: 100%;
  height: auto;
}

.feature-page__title {
  margin-bottom: var(--space-s);
}

.feature-page__standfirst {
  color: var(--color-ink-mid);
}

.feature-page__body {
  padding-bottom: var(--space-xl);
}

/* Related features */

.feature-page__related {
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
}

.feature-page__related-heading {
  margin-bottom: var(--space-m);
}

.feature-page__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
}

.feature-page__related-card {
  display: block;
  padding: var(--space-m);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color var(--transition-base);
}

.feature-page__related-card:hover {
  border-color: var(--color-primary);
}

/* Feature CTA — reuses pe-cta-band-block styles */

/* Landing page nav modifier */

.pe-nav--landing {
  justify-content: space-between;
}

.pe-nav--landing #site-navigation,
.pe-nav--landing > nav,
.pe-nav--landing .pe-nav__hamburger {
  display: none;
}

/* Landing page footer */

.pe-footer--landing {
  background: var(--color-ink);
  padding: var(--space-m) 0;
}

.pe-footer--landing .pe-footer__copy a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.pe-footer--landing .pe-footer__copy a:hover {
  color: var(--color-light);
}

/* Pricing page */

.pricing-page__header {
  padding-top: var(--space-l);
  padding-bottom: var(--space-m);
  text-align: center;
}

.pricing-page__title {
  margin-bottom: var(--space-2xs);
}

.pricing-page__intro {
  color: var(--color-muted);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */

@media (max-width: 768px) {
  .features-hub__grid,
  .feature-page__related-grid {
    grid-template-columns: 1fr;
  }

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

@media (min-width: 769px) and (max-width: 1024px) {
  .features-hub__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PE Reveal Footer — revealed in place as page scrolls past */

/* Main content needs a solid bg and stacking context so it slides over the footer */

#site-content-container {
  position: relative;
  z-index: 1;
  background: var(--color-light);
  isolation: isolate; /* Stacking context without breaking position:fixed (admin bar) or sticky (nav) */
  /* margin-bottom: 80vh; Creates scroll space for the reveal footer behind */
}

/* The reveal footer sits behind main content, revealed as page scrolls past */

.pe-reveal-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  left: 0;
  z-index: 0;
  background: #0a0a0b;
  color: var(--color-light);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background video */

.pe-reveal-footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.pe-reveal-footer__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(10, 10, 11, 0.65);
}

.pe-reveal-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-l);
  padding: var(--space-2xl) var(--gutter);
  width: 100%;
  max-width: 60rem;
  position: relative;
  z-index: 3;
}

/* Large logo */

.pe-reveal-footer__logo {
  display: block;
  color: var(--color-light);
  opacity: 0.1;
}

.pe-reveal-footer__logo svg {
  width: min(70vw, 500px);
  height: auto;
  fill: currentColor;
}

/* Social links */

.pe-reveal-footer__social {
  display: flex;
  gap: var(--space-m);
  flex-wrap: wrap;
  justify-content: center;
}

.pe-reveal-footer__social a {
  color: rgba(240, 240, 238, 0.6);
  text-decoration: none;
  transition: color var(--transition-base);
}

.pe-reveal-footer__social a:hover {
  color: var(--color-light);
}

/* Small print links */

.pe-reveal-footer__links {
  display: flex;
  gap: var(--space-m);
  flex-wrap: wrap;
  justify-content: center;
}

.pe-reveal-footer__links a {
  color: rgba(240, 240, 238, 0.35);
  text-decoration: none;
  transition: color var(--transition-base);
}

.pe-reveal-footer__links a:hover {
  color: rgba(240, 240, 238, 0.7);
}

.pe-reveal-footer__copy {
  color: rgba(240, 240, 238, 0.2);
  margin: 0;
}

/* Search form - single line layout */

.searchform {
	width: 100%;
}

.searchform .input-group {
	display: flex;
	align-items: stretch;
	gap: 0;
	max-width: 600px;
}

.searchform .input-group-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-neutral-light, #ddd);
	border-right: none;
}

.searchform .input-group-button {
	flex: 0 0 auto;
}

.searchform .input-group-button label {
	display: block;
	margin: 0;
	cursor: pointer;
	height: 100%;
}

.searchform .input-group-button .button {
	height: 100%;
	margin: 0;
	border-radius: 0;
	border: 1px solid var(--color-neutral-light, #ddd);
	padding: 0.5rem 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.searchform .input-group-button svg {
	width: 20px;
	height: 20px;
}

/*
ABSOLUTE CORNERS
Position elements absolutely in each corner
*/

.absolute-top-left {
	position: absolute;
	top: 0;
	left: 0;
}

.absolute-top-right {
	position: absolute;
	top: 0;
	right: 0;
}

.absolute-bottom-left {
	position: absolute;
	bottom: 0;
	left: 0;
}

.absolute-bottom-right {
	position: absolute;
	bottom: 0;
	right: 0;
}

/* 
ABSOLUTE FULL
position absolutely, top, bottom, left, right 0 and 100% height and width
*/

.absolute-full {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.img-wrapper {
	position: relative;
}

/* Direct child images only - excludes slideshow images */

.img-wrapper > picture,
	.img-wrapper > img {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

/* Base aspect ratio utilities (mobile-first) */

.aspect-ratio--1-1 	{ aspect-ratio: 1 / 1; }

.aspect-ratio--3-2 	{ aspect-ratio: 3 / 2; }

.aspect-ratio--2-3 	{ aspect-ratio: 2 / 3; }

.aspect-ratio--4-3 	{ aspect-ratio: 4 / 3; }

.aspect-ratio--3-4 	{ aspect-ratio: 3 / 4; }

.aspect-ratio--16-9 { aspect-ratio: 16 / 9; }

.aspect-ratio--21-9 { aspect-ratio: 21 / 9; }

/* Small breakpoint (760px+) */

@media (min-width: 760px) {
	.aspect-ratio--1-1\@sm 	{ aspect-ratio: 1 / 1; }
	.aspect-ratio--3-2\@sm 	{ aspect-ratio: 3 / 2; }
	.aspect-ratio--2-3\@sm 	{ aspect-ratio: 2 / 3; }
	.aspect-ratio--4-3\@sm 	{ aspect-ratio: 4 / 3; }
	.aspect-ratio--3-4\@sm 	{ aspect-ratio: 3 / 4; }
	.aspect-ratio--16-9\@sm { aspect-ratio: 16 / 9; }
	.aspect-ratio--21-9\@sm { aspect-ratio: 21 / 9; }
}

/* Medium breakpoint (1024px+) */

@media (min-width: 1024px) {
	.aspect-ratio--1-1\@md 	{ aspect-ratio: 1 / 1; }
	.aspect-ratio--3-2\@md 	{ aspect-ratio: 3 / 2; }
	.aspect-ratio--2-3\@md 	{ aspect-ratio: 2 / 3; }
	.aspect-ratio--4-3\@md 	{ aspect-ratio: 4 / 3; }
	.aspect-ratio--3-4\@md 	{ aspect-ratio: 3 / 4; }
	.aspect-ratio--16-9\@md { aspect-ratio: 16 / 9; }
	.aspect-ratio--21-9\@md { aspect-ratio: 21 / 9; }
}

/* Large breakpoint (1280px+) */

@media (min-width: 1280px) {
	.aspect-ratio--1-1\@lg 	{ aspect-ratio: 1 / 1; }
	.aspect-ratio--3-2\@lg 	{ aspect-ratio: 3 / 2; }
	.aspect-ratio--2-3\@lg 	{ aspect-ratio: 2 / 3; }
	.aspect-ratio--4-3\@lg 	{ aspect-ratio: 4 / 3; }
	.aspect-ratio--3-4\@lg 	{ aspect-ratio: 3 / 4; }
	.aspect-ratio--16-9\@lg { aspect-ratio: 16 / 9; }
	.aspect-ratio--21-9\@lg { aspect-ratio: 21 / 9; }
}

/* Block padding — standard section spacing used by most PE blocks */

.block-padding {
  padding: var(--block-spacing) var(--space-xl);
}

@media (max-width: 768px) {
  .block-padding {
    padding: var(--space-l) var(--space-m);
  }
}

/* Border top — light separator used between sections */

.border-top {
  border-top: 1px solid var(--color-border);
}

/* Breadcrumbs utility */

.breadcrumbs {
  --breadcrumb-separator: "/";
  --breadcrumb-gap: var(--space-xs);
  font-size: var(--text-sm, 0.875rem);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--breadcrumb-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
}

/* Add separator between items */

.breadcrumbs__item:not(:last-child)::after {
  content: var(--breadcrumb-separator);
  color: var(--color-gray-400, #9ca3af);
  font-weight: 300;
}

.breadcrumbs__item a {
  color: var(--color-primary, #3b82f6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs__item a:hover {
  color: var(--color-primary-dark, #2563eb);
  text-decoration: underline;
}

.breadcrumbs__item--current {
  color: var(--color-gray-600, #4b5563);
  font-weight: 500;
}

/* Accessibility - ensure good contrast */

@media (prefers-contrast: high) {
  .breadcrumbs__item a {
    text-decoration: underline;
  }
}

/*
CENTER CONTENT
Center children within a container
Useful for centering icons, text, or any content
*/

.center-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Grid-based centering alternative */

.center-content-grid {
	display: grid;
	place-items: center;
}

/* Inline centering (for icons within text) */

.center-inline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}

/* ==========================================================================
   GRADIENT FADE UTILITY
   For text legibility over images
   ========================================================================== */

/* Bottom fade - for text at bottom of image */

.gradient-fade-bottom {
	position: relative;
}

.gradient-fade-bottom::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0.4) 50%,
		transparent 100%
	);
	z-index: 1;
	pointer-events: none;
}

/* Ensure content sits above gradient */

.gradient-fade-bottom > * {
	position: relative;
	z-index: 2;
}

/* Top fade variant - for text at top of image */

.gradient-fade-top {
	position: relative;
}

.gradient-fade-top::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0.4) 50%,
		transparent 100%
	);
	z-index: 1;
	pointer-events: none;
}

.gradient-fade-top > * {
	position: relative;
	z-index: 2;
}

/*
Height utility classes
Extends Tailwind's height utilities with additional percentage-based values
*/

.h-10 { height: 10%; }

.h-20 { height: 20%; }

.h-30 { height: 30%; }

.h-40 { height: 40%; }

.h-50 { height: 50%; }

.h-60 { height: 60%; }

.h-70 { height: 70%; }

.h-80 { height: 80%; }

.h-90 { height: 90%; }

.h-100 { height: 100%; }

/* Min height utilities */

.min-h-10 { min-height: 10%; }

.min-h-20 { min-height: 20%; }

.min-h-30 { min-height: 30%; }

.min-h-40 { min-height: 40%; }

.min-h-50 { min-height: 50%; }

.min-h-60 { min-height: 60%; }

.min-h-70 { min-height: 70%; }

.min-h-80 { min-height: 80%; }

.min-h-90 { min-height: 90%; }

.min-h-100 { min-height: 100%; }

/* ==========================================================================
   MEDIA COVER UTILITY
   ========================================================================== */

/**
 * Forces any media element (img, video, iframe) to fill its container
 * while maintaining aspect ratio — no background visible, ever.
 *
 * For <img> and <video>: uses object-fit: cover.
 * For <iframe>: uses the min-width/min-height trick since iframes
 * don't support object-fit.
 *
 * The parent must have position: relative and overflow: hidden.
 *
 * Usage:
 *   <div class="media-cover">
 *     <img class="media-cover__content" src="..." alt="..." />
 *   </div>
 *
 *   <div class="media-cover">
 *     <iframe class="media-cover__content" src="..."></iframe>
 *   </div>
 */

.media-cover {
  position: relative;
  overflow: hidden;
}

/* Native elements that support object-fit */

.media-cover > img,
.media-cover > video,
.media-cover__content:is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Iframes — no object-fit support, so we oversize and centre */

.media-cover > iframe,
.media-cover__content:is(iframe) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: 177.78vh;   /* 16/9 × 100vh */
  height: 56.25vw;   /* 9/16 × 100vw */
  border: 0;
}

/* 
MENU UTILITY
Push away from each other but wrap when not enough space (For Nav)
*/

.menu ul,
ul.menu {
    --gutter: var(--space-2xs) var(--space-s-m);
    margin: 0
}

/* Outline White utility — 1px solid white border for key blocks on dark backgrounds */

.outline-white {
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 
REGION UTILITY
Consistent block padding for page sections
*/

.region {
  padding-block: var(--region-space, var(--space-xl-2xl));
}

.width-10ch {  max-width: 10ch; }

.width-20ch {  max-width: 20ch; }

.width-30ch {  max-width: 30ch; }

.width-40ch {  max-width: 40ch; }

.width-50ch {  max-width: 50ch; }

.width-60ch {  max-width: 60ch; }

.width-70ch {  max-width: 70ch; }

.width-80ch {  max-width: 80ch; }

.width-90ch {  max-width: 90ch; }

.width-100ch {  max-width: 100ch; }

/* 
TINY IMAGE IN A CIRCLE - e.g. TESIMONIAL / AUTHOR IMAGE
*/

.tiny-circle-image {
    width: 5rem;
    height: 5rem;
    
}

.tiny-circle-image img,
.tiny-circle-image picture {
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

/* ==========================================================================
   VIDEO COVER UTILITY
   ========================================================================== */

/**
 * VIDEO COVER - Make video/iframe fill container like object-fit: cover
 *
 * Problem: Unlike images, iframes don't respect object-fit: cover.
 * When a video (usually 16:9) needs to fill a container of different aspect ratio,
 * setting width/height to 100% leaves gaps due to the video's intrinsic ratio.
 *
 * Solution: Use absolute positioning with min-width/min-height to ensure coverage.
 *
 * Usage:
 *
 *   <div class="video-cover">
 *     <iframe class="video-cover__content" src="..."></iframe>
 *   </div>
 */

.video-cover {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.video-cover__content {
	/* Center the video */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	/* Ensure minimum coverage */
	min-width: 100%;
	min-height: 100%;

	/* Force dimensions that ensure one axis always overflows (for 16:9 video) */
	width: 177.78vh;  /* 16/9 × 100vh - ensures width covers when container is tall */
	height: 56.25vw;  /* 9/16 × 100vw - ensures height covers when container is wide */

	/* Fade in when video loads */
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}

/* Modifier for 4:3 aspect ratio videos */

.video-cover__content--4-3 {
	width: 133.33vh;
	height: 75vw;
}

/* Modifier for 21:9 aspect ratio videos (ultra-wide) */

.video-cover__content--21-9 {
	width: 233.33vh;
	height: 42.86vw;
}

/* Modifier for 1:1 aspect ratio videos (square) */

.video-cover__content--1-1 {
	width: 100vh;
	height: 100vw;
}

/**
 * VIDEO COVER THUMBNAIL
 * Displays a loading/poster image while Vimeo video loads
 */

.video-cover__thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 2;
	opacity: 1;
	transition: opacity 0.6s ease-in-out;
	pointer-events: none; /* Allow clicks to pass through to video */
}

/* Hide thumbnail when video is loaded */

.video-cover--loaded .video-cover__thumbnail {
	opacity: 0;
}

/* Fade in video content when loaded */

.video-cover--loaded .video-cover__content {
	opacity: 1;
}

/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.display-none {
  display: none;
}

.hide-on-mobile {
  display: none;
}

@media (min-width: 760px) {

.hide-on-mobile {
    display: unset
}

.hide-on-desktop {
    display: none
}
  }

/**
 * Wrapper Alignment Utilities
 *
 * Allows full-bleed elements to have content that aligns with the .wrapper
 * on the left or right side, while maintaining full-width backgrounds.
 *
 * Uses calculated padding to match the wrapper's side gutters at max-width (120rem).
 * Accounts for scrollbar width via --scrollbar-width (0 on mobile, 0.9rem on desktop).
 * Falls back to standard gutter on smaller screens.
 *
 * Formula: (100vw - scrollbar - 120rem) / 2 + wrapper padding
 *
 * Usage:
 * - .wrapper-align-left - Content aligns with wrapper's left edge
 * - .wrapper-align-right - Content aligns with wrapper's right edge
 * - Responsive variants: md:wrapper-align-left, lg:wrapper-align-right, etc.
 */

/* Base utilities - apply at all breakpoints */

.wrapper-align-left {
	padding-left: max(var(--gutter), calc((100vw - var(--scrollbar-width, 0px) - 120rem) / 2 + var(--gutter)));
}

.wrapper-align-right {
	padding-right: max(var(--gutter), calc((100vw - var(--scrollbar-width, 0px) - 120rem) / 2 + var(--gutter)));
}

/* Medium screens and up (768px+) */

@media (min-width: 768px) {
	.md\:wrapper-align-left {
		padding-left: max(var(--gutter), calc((100vw - var(--scrollbar-width, 0px) - 120rem) / 2 + var(--gutter)));
	}

	.md\:wrapper-align-right {
		padding-right: max(var(--gutter), calc((100vw - var(--scrollbar-width, 0px) - 120rem) / 2 + var(--gutter)));
	}
}

/* Large screens and up (1024px+) */

@media (min-width: 1024px) {
	.lg\:wrapper-align-left {
		padding-left: max(var(--gutter), calc((100vw - var(--scrollbar-width, 0px) - 120rem) / 2 + var(--gutter)));
	}

	.lg\:wrapper-align-right {
		padding-right: max(var(--gutter), calc((100vw - var(--scrollbar-width, 0px) - 120rem) / 2 + var(--gutter)));
	}
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.col-span-12 {
  grid-column: span 12 / span 12;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.grow {
  flex-grow: 1;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

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

.gap-xs {
  gap: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
}

.rounded {
  border-radius: 0.25rem;
}

.bg-blue {
  background-color: #00173D;
}

.bg-border {
  background-color: #ddd9d0;
}

.bg-cream {
  background-color: #f5f2eb;
}

.bg-dark {
  background-color: #141210;
}

.bg-ink {
  background-color: #141210;
}

.bg-ink-mid {
  background-color: #3a3730;
}

.bg-light {
  background-color: #faf8f4;
}

.bg-muted {
  background-color: #8a8680;
}

.bg-primary {
  background-color: #b6f812;
}

.bg-primary-light {
  background-color: #c8f135;
}

.bg-primary-pale {
  background-color: #eaf7ed;
}

.bg-red {
  background-color: #c0392b;
}

.bg-white {
  background-color: #ffffff;
}

.text-center {
  text-align: center;
}

.uppercase {
  text-transform: uppercase;
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.bg-dark {
  background-color: #141210;
}

.bg-light {
  background-color: #faf8f4;
}

.bg-white {
  background-color: #ffffff;
}

.bg-cream {
  background-color: #f5f2eb;
}

.bg-primary {
  background-color: #b6f812;
}

.bg-primary-light {
  background-color: #c8f135;
}

.bg-primary-pale {
  background-color: #eaf7ed;
}

.bg-ink {
  background-color: #141210;
}

.bg-ink-mid {
  background-color: #3a3730;
}

.bg-muted {
  background-color: #8a8680;
}

.bg-border {
  background-color: #ddd9d0;
}

.bg-red {
  background-color: #c0392b;
}

.bg-blue {
  background-color: #00173D;
}

.color-dark {
  color: #141210;
}

.color-light {
  color: #faf8f4;
}

.color-white {
  color: #ffffff;
}

.color-cream {
  color: #f5f2eb;
}

.color-primary {
  color: #b6f812;
}

.color-primary-light {
  color: #c8f135;
}

.color-primary-pale {
  color: #eaf7ed;
}

.color-ink {
  color: #141210;
}

.color-ink-mid {
  color: #3a3730;
}

.color-muted {
  color: #8a8680;
}

.color-border {
  color: #ddd9d0;
}

.color-red {
  color: #c0392b;
}

.color-blue {
  color: #00173D;
}

/* Debug styles - only in development */

/* @import '../css-utils/debug.css'; */

/* @import '../css-utils/a11y-check.css'; */

@media (min-width: 760px) {

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .md\:col-start-2 {
    grid-column-start: 2;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:justify-center {
    justify-content: center;
  }
}

@media (min-width: 1230px) {

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:block {
    display: block;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}