/* 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:  ;
}

/* if logged in, change nav so we can see it */

body.admin-bar {
  /* #wpadminbar {
    opacity: 0.5;
    &:hover {
      opacity: 1;
    }
  } */
}

body.admin-bar .site-header-inner {
    padding-top: 32px;
  }

/* 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-y: scroll;
}

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

/**
 * Normalize Elements
 *
 * Removes default browser margins and padding from HTML elements
 * that the reset doesn't cover, giving full control in authored CSS.
 * Removes logical property defaults (-start/-end) for consistent styling.
 */

/* Remove all default margins from block-level elements */

blockquote,
figure,
figcaption,
fieldset,
dl,
dd,
pre {
	margin: 0;
}

/* Remove default padding from elements */

blockquote,
fieldset,
ul,
ol {
	padding: 0;
}

/* Remove default border from fieldset */

fieldset {
	border: 0;
}

/* Remove default list styling */

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

/* Remove default heading margins */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

/* Remove default paragraph margins */

p {
	margin: 0;
}

/* Remove default hr margins */

hr {
	margin: 0;
}

/* Remove default dialog padding */

dialog {
	padding: 0;
}

body {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* @font-face here */

/* albra-medium */

/* @font-face {
  font-family: 'albra-medium';
  src:  url('../fonts/albra-medium.woff2') format('woff2'),
        url('../fonts/albra-medium.woff') format('woff');
} */

body
{
  font-weight: var(--font-regular);
  font-size: var(--size-step-0);
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
}

h1 {
	font-size: var(--size-step-2);
}

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

.font-base { font-family: var(--font-base); }

.font-bold,
.bold {
  font-weight: 700 !important;
}

h1,h2,h3,h4,h5,h6,
.h0,.h1,.h2,.h3,.h4,.h5,.h6 {
	font-family: var(--font-polymath);
	font-weight: 400;
  /* line-height: 1.1; */
}

/* h0 and h1 use bold weight */

h1, .h0, .h1 {
	font-weight: 700;
  /* letter-spacing: 1.05em; */
}

/* Typography utility classes - apply heading styles to any element */

.h0 { font-size: var(--size-step-6); line-height: 0.92em; letter-spacing: 0.05rem; word-break: break-word; }

h1, .h1 { font-size: var(--size-step-5); line-height: 1.1em; }

h2, .h2 { font-size: var(--size-step-4); line-height: 1.1em; }

h3, .h3 { font-size: var(--size-step-3); line-height: 1.1em; }

h4, .h4 { font-size: var(--size-step-2); line-height: 1.2em; }

h5, .h5 { font-size: var(--size-step-1); line-height: 1.3em; }

h6, .h6 { font-size: var(--size-step-0); line-height: 1.4em; }

.font-eyebrow {
 font-family: var(--font-mono);
 font-weight: 400;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-size: var(--size-step-00);
}

/* .font-albra { font-family: var(--font-albra-semi); } */

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

.size-step-5 {
	font-size: var(--size-step-5);
	/* letter-spacing: -0.2rem; */
	/* line-height: 0.9em; */
  
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.size-step-4 {
  font-size: var(--size-step-4);
  /* letter-spacing: -0.1rem; */
  line-height: 0.86em;
}

.size-step-3 {
  font-size: var(--size-step-3);
  /* line-height: 0; */
}

.size-step-2 {
  font-size: var(--size-step-2);
  line-height: 1.2em;
}

.size-step-1 {
  font-size: var(--size-step-1);
  /* line-height: 0; */
}

.size-step-0 {
  font-size: var(--size-step-0);
  /* line-height: 0; */
}

.size-step-00 {
  font-size: var(--size-step-00);
  /* line-height: 0; */
}

.size-step-000 {
  font-size: var(--size-step-000);
  /* line-height: 0; */
}

.p-large {
  font-size: var(--size-step-1);
  line-height: 1.3;
}

/* ==========================================================================
   Responsive Typography Utilities
   Usage: h3 md:h0 lg:h1
   Breakpoints: sm (330px), md (760px), lg (1230px)
   ========================================================================== */

/* Medium breakpoint (760px) */

@media (min-width: 760px) {
  .md\:h0 { font-size: var(--size-step-6); line-height: 0.9em; font-family: var(--font-polymath); font-weight: 700; }
  .md\:h1 { font-size: var(--size-step-5); line-height: 0.9em; font-family: var(--font-polymath); font-weight: 700; }
  .md\:h2 { font-size: var(--size-step-4); line-height: 0.86em; font-family: var(--font-polymath); font-weight: 400; }
  .md\:h3 { font-size: var(--size-step-3); line-height: 1.1em; font-family: var(--font-polymath); font-weight: 400; }
  .md\:h4 { font-size: var(--size-step-2); line-height: 1.2em; font-family: var(--font-polymath); font-weight: 400; }
  .md\:h5 { font-size: var(--size-step-1); line-height: 1.3em; font-family: var(--font-polymath); font-weight: 400; }
  .md\:h6 { font-size: var(--size-step-0); line-height: 1.4em; font-family: var(--font-polymath); font-weight: 400; }

  .md\:size-step-6 { font-size: var(--size-step-6); }
  .md\:size-step-5 { font-size: var(--size-step-5); }
  .md\:size-step-4 { font-size: var(--size-step-4); }
  .md\:size-step-3 { font-size: var(--size-step-3); }
  .md\:size-step-2 { font-size: var(--size-step-2); }
  .md\:size-step-1 { font-size: var(--size-step-1); }
  .md\:size-step-0 { font-size: var(--size-step-0); }
  .md\:size-step-00 { font-size: var(--size-step-00); }
  .md\:size-step-000 { font-size: var(--size-step-000); }

  .md\:p-large { font-size: var(--size-step-1); line-height: 1.3; }
  .md\:font-eyebrow { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--size-step-00); }
}

/* Large breakpoint (1230px) */

@media (min-width: 1230px) {
  .lg\:h0 { font-size: var(--size-step-6); line-height: 0.9em; font-family: var(--font-polymath); font-weight: 700; }
  .lg\:h1 { font-size: var(--size-step-5); line-height: 0.9em; font-family: var(--font-polymath); font-weight: 700; }
  .lg\:h2 { font-size: var(--size-step-4); line-height: 0.86em; font-family: var(--font-polymath); font-weight: 400; }
  .lg\:h3 { font-size: var(--size-step-3); line-height: 1.1em; font-family: var(--font-polymath); font-weight: 400; }
  .lg\:h4 { font-size: var(--size-step-2); line-height: 1.2em; font-family: var(--font-polymath); font-weight: 400; }
  .lg\:h5 { font-size: var(--size-step-1); line-height: 1.3em; font-family: var(--font-polymath); font-weight: 400; }
  .lg\:h6 { font-size: var(--size-step-0); line-height: 1.4em; font-family: var(--font-polymath); font-weight: 400; }

  .lg\:size-step-6 { font-size: var(--size-step-6); }
  .lg\:size-step-5 { font-size: var(--size-step-5); }
  .lg\:size-step-4 { font-size: var(--size-step-4); }
  .lg\:size-step-3 { font-size: var(--size-step-3); }
  .lg\:size-step-2 { font-size: var(--size-step-2); }
  .lg\:size-step-1 { font-size: var(--size-step-1); }
  .lg\:size-step-0 { font-size: var(--size-step-0); }
  .lg\:size-step-00 { font-size: var(--size-step-00); }
  .lg\:size-step-000 { font-size: var(--size-step-000); }

  .lg\:p-large { font-size: var(--size-step-1); line-height: 1.3; }
  .lg\:font-eyebrow { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--size-step-00); }
}

:root {
  --gutter: var(--space-s-l);  /* --space-s --space-s-m */
  --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;

  /* RGB values for opacity usage */
  --color-green-rgb: 36 83 51;

  --nav-height: 70px; /* change */
  --double-nav-height: 140px; /* change */
  --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);
  --block-spacing--double: calc( var(--block-spacing) * 2 );

}

.grid {
    /* gap: var(--gutter, var(--space-s-l)); */
	gap: var(--space-m-l);
}

.\!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: #030303;
  --color-light: #ffffff;
  --color-gold: #E6D9B6;
  --color-light-gold: #F9F4E6;
  --color-lime: #C8F88A;
  --color-green: #245333;
  --color-charcoal: #333333;
  --color-light-green: #F3F4EE;
  --color-sage: #eef0e2;
  --color-sage-dark: #aec69c;
  --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-000: clamp(0.625rem, 0.53rem + 0.44vw, 0.875rem);
  --size-step-00: clamp(0.9375rem, 0.91rem + 0.11vw, 1rem);
  --size-step-0: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --size-step-1: clamp(1.35rem, 1.27rem + 0.38vw, 1.5625rem);
  --size-step-2: clamp(1.62rem, 1.50rem + 0.59vw, 1.953125rem);
  --size-step-3: clamp(1.94375rem, 1.76rem + 0.88vw, 2.44125rem);
  --size-step-4: clamp(2.25375rem, 1.96rem + 1.42vw, 3.051875rem);
  --size-step-5: clamp(3rem, 2.77rem + 1.11vw, 3.625rem);
  --size-step-6: clamp(3.1875rem, 2.11rem + 5.22vw, 6.125rem);
  --leading-flat: 1;
  --leading-fine: 1.15;
  --leading-standard: 1.5;
  --leading-loose: 1.7;
  --font-base: Inter,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-polymath: polymath-display,Inter,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-mono: dm-mono,Inter,Segoe UI,Roboto,Helvetica Neue,Arial,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-pink);
  font-size: var(--size-step-0);
  font-family: var(--font-base);
  line-height: var(--leading-standard);
}

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

/* STYLING GUIDE */

/* https://photoswipe.com/styling/ */

/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  

  --pswp-root-z-index: 100000;
  
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}

/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/

.pswp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: 0.003;
	contain: layout style size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */

.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

.pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
	background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */

.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}

/* Prevent selection and tap highlights */

.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}

.pswp__hidden {
	display: none !important;
}

/* Allow to click through pswp__content element, but not its children */

.pswp__content {
  pointer-events: none;
}

.pswp__content > * {
  pointer-events: auto;
}

/*

  PhotoSwipe UI

*/

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/

.pswp__error-msg-container {
  display: grid;
}

.pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */

.pswp .pswp__hide-on-close {
	opacity: 0.005;
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */

.pswp--ui-visible .pswp__hide-on-close {
	opacity: 1;
	pointer-events: auto;
}

/* <button> styles, including css reset */

.pswp__button {
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 0.85;
	-webkit-appearance: none;
	-webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
	outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/

div.pswp__img--placeholder,
.pswp__img--with-bg {
	background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
  flex-direction: row;
  justify-content: flex-end;
	z-index: 10;

	/* allow events to pass through top bar itself */
	pointer-events: none !important;
}

.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}

/*

  Close button

*/

.pswp__button--close {
  margin-right: 6px;
}

/*

  Arrow buttons

*/

.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */

.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */

.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}

.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/

.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */

.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}

/*

  Loading indicator

*/

.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}

@keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*

  "1 of 10" counter

*/

.pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
  display: none;
}

.glightbox-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999 !important;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: none;
}

.glightbox-container.inactive {
  display: none;
}

.glightbox-container .gcontainer {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: hidden;
}

.glightbox-container .gslider {
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.glightbox-container .gslide {
  width: 100%;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0;
}

.glightbox-container .gslide.current {
  opacity: 1;
  z-index: 99999;
  position: relative;
}

.glightbox-container .gslide.prev {
  opacity: 1;
  z-index: 9999;
}

.glightbox-container .gslide-inner-content {
  width: 100%;
}

.glightbox-container .ginner-container {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1400px;
  margin: auto;
  height: 100vh;
}

.glightbox-container .ginner-container.gvideo-container {
  width: 100%;
}

.glightbox-container .ginner-container.desc-bottom,
        .glightbox-container .ginner-container.desc-top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.glightbox-container .ginner-container.desc-left,
        .glightbox-container .ginner-container.desc-right {
  max-width: 100% !important;
}

.gslide iframe,
    .gslide video {
  outline: none !important;
  border: none;
  min-height: 165px;
  -webkit-overflow-scrolling: touch;
  -ms-touch-action: auto;
  touch-action: auto;
}

.gslide:not(.current) {
  pointer-events: none;
}

.gslide-image {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.gslide-image img {
  max-height: 100vh;
  display: block;
  padding: 0;
  float: none;
  outline: none;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-width: 100vw;
  width: auto;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  -ms-touch-action: none;
  touch-action: none;
  margin: auto;
  min-width: 200px;
}

.desc-top .gslide-image img,
        .desc-bottom .gslide-image img {
  width: auto;
}

.desc-left .gslide-image img,
        .desc-right .gslide-image img {
  width: auto;
  max-width: 100%;
}

.gslide-image img.zoomable {
  position: relative;
}

.gslide-image img.dragging {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
  -webkit-transition: none;
  transition: none;
}

.gslide-video {
  position: relative;
  max-width: 100vh;
  width: 100% !important;
}

.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster {
  display: none;
}

.gslide-video .gvideo-wrapper {
  width: 100%;
        /* max-width: 160vmin; */
  margin: auto;
}

.gslide-video::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.34);
  display: none;
}

.gslide-video.playing::before {
  display: none;
}

.gslide-video.fullscreen {
  max-width: 100% !important;
  min-width: 100%;
  height: 75vh;
}

.gslide-video.fullscreen video {
  max-width: 100% !important;
  width: 100% !important;
}

.gslide-inline {
  background: #fff;
  text-align: left;
  max-height: calc(100vh - 40px);
  overflow: auto;
  max-width: 100%;
  margin: auto;
}

.gslide-inline .ginlined-content {
  padding: 20px;
  width: 100%;
}

.gslide-inline .dragging {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
  -webkit-transition: none;
  transition: none;
}

.ginlined-content {
  overflow: auto;
  display: block !important;
  opacity: 1;
}

.gslide-external {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  min-width: 100%;
  background: #fff;
  padding: 0;
  overflow: auto;
  max-height: 75vh;
  height: 100%;
}

.gslide-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
}

.zoomed .gslide-media {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.desc-top .gslide-media,
    .desc-bottom .gslide-media {
  margin: 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.gslide-description {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

.gslide-description.description-left,
    .gslide-description.description-right {
  max-width: 100%;
}

.gslide-description.description-bottom,
    .gslide-description.description-top {
  margin: 0 auto;
  width: 100%;
}

.gslide-description p {
  margin-bottom: 12px;
}

.gslide-description p:last-child {
  margin-bottom: 0;
}

.zoomed .gslide-description {
  display: none;
}

.glightbox-button-hidden {
  display: none;
}

/*
 * Description for mobiles
 * something like facebook does the description
 * for the photos
*/

.glightbox-mobile .glightbox-container .gslide-description {
  height: auto !important;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 19px 11px;
  max-width: 100vw !important;
  -webkit-box-ordinal-group: 3 !important;
  -ms-flex-order: 2 !important;
  order: 2 !important;
  max-height: 78vh;
  overflow: auto !important;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  padding-bottom: 50px;
}

.glightbox-mobile .glightbox-container .gslide-title {
  color: #fff;
  font-size: 1em;
}

.glightbox-mobile .glightbox-container .gslide-desc {
  color: #a1a1a1;
}

.glightbox-mobile .glightbox-container .gslide-desc a {
  color: #fff;
  font-weight: bold;
}

.glightbox-mobile .glightbox-container .gslide-desc * {
  color: inherit;
}

.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
  color: #fff;
  opacity: 0.4;
}

.gdesc-open .gslide-media {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 0.4;
}

.gdesc-open .gdesc-inner {
  padding-bottom: 30px;
}

.gdesc-closed .gslide-media {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 1;
}

.greset {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.gabsolute {
  position: absolute;
}

.grelative {
  position: relative;
}

.glightbox-desc {
  display: none !important;
}

.glightbox-open {
  overflow: hidden;
}

.gloader {
  height: 25px;
  width: 25px;
  -webkit-animation: lightboxLoader 0.8s infinite linear;
  animation: lightboxLoader 0.8s infinite linear;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  display: block;
  z-index: 9999;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 47%;
}

.goverlay {
  width: 100%;
  height: calc(100vh + 1px);
  position: fixed;
  top: -1px;
  left: 0;
  background: #000;
  will-change: opacity;
}

.glightbox-mobile .goverlay {
  background: #000;
}

.gprev,
.gnext,
.gclose {
  z-index: 99999;
  cursor: pointer;
  width: 26px;
  height: 44px;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.gprev svg,
.gnext svg,
.gclose svg {
  display: block;
  width: 25px;
  height: auto;
  margin: 0;
  padding: 0;
}

.gprev.disabled,
.gnext.disabled,
.gclose.disabled {
  opacity: 0.1;
}

.gprev .garrow,
.gnext .garrow,
.gclose .garrow {
  stroke: #fff;
}

.gbtn.focused {
  outline: 2px solid #0f3d81;
}

iframe.wait-autoplay {
  opacity: 0;
}

.glightbox-closing .gnext,
    .glightbox-closing .gprev,
    .glightbox-closing .gclose {
  opacity: 0 !important;
}

/*Skin */

.glightbox-clean .gslide-description {
  background: #fff;
}

.glightbox-clean .gdesc-inner {
  padding: 22px 20px;
}

.glightbox-clean .gslide-title {
  font-size: 1em;
  font-weight: normal;
  font-family: arial;
  color: #000;
  margin-bottom: 19px;
  line-height: 1.4em;
}

.glightbox-clean .gslide-desc {
  font-size: 0.86em;
  margin-bottom: 0;
  font-family: arial;
  line-height: 1.4em;
}

.glightbox-clean .gslide-video {
  background: #000;
}

.glightbox-clean .gprev,
    .glightbox-clean .gnext,
    .glightbox-clean .gclose {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
}

.glightbox-clean .gprev path,
.glightbox-clean .gnext path,
.glightbox-clean .gclose path {
  fill: #fff;
}

.glightbox-clean .gprev {
  position: absolute;
  top: -100%;
  left: 30px;
  width: 40px;
  height: 50px;
}

.glightbox-clean .gnext {
  position: absolute;
  top: -100%;
  right: 30px;
  width: 40px;
  height: 50px;
}

.glightbox-clean .gclose {
  width: 35px;
  height: 35px;
  top: 15px;
  right: 10px;
  position: absolute;
}

.glightbox-clean .gclose svg {
  width: 18px;
  height: auto;
}

.glightbox-clean .gclose:hover {
  opacity: 1;
}

/*CSS Animations*/

.gfadeIn {
  -webkit-animation: gfadeIn 0.5s ease;
  animation: gfadeIn 0.5s ease;
}

.gfadeOut {
  -webkit-animation: gfadeOut 0.5s ease;
  animation: gfadeOut 0.5s ease;
}

.gslideOutLeft {
  -webkit-animation: gslideOutLeft 0.3s ease;
  animation: gslideOutLeft 0.3s ease;
}

.gslideInLeft {
  -webkit-animation: gslideInLeft 0.3s ease;
  animation: gslideInLeft 0.3s ease;
}

.gslideOutRight {
  -webkit-animation: gslideOutRight 0.3s ease;
  animation: gslideOutRight 0.3s ease;
}

.gslideInRight {
  -webkit-animation: gslideInRight 0.3s ease;
  animation: gslideInRight 0.3s ease;
}

.gzoomIn {
  -webkit-animation: gzoomIn 0.5s ease;
  animation: gzoomIn 0.5s ease;
}

.gzoomOut {
  -webkit-animation: gzoomOut 0.5s ease;
  animation: gzoomOut 0.5s ease;
}

@-webkit-keyframes lightboxLoader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes lightboxLoader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes gfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes gfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes gslideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
  }
  to {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes gslideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
  }
  to {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes gslideOutLeft {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes gslideOutLeft {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    visibility: hidden;
  }
}

@-webkit-keyframes gslideInRight {
  from {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes gslideInRight {
  from {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes gslideOutRight {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
}

@keyframes gslideOutRight {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
}

@-webkit-keyframes gzoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
}

@keyframes gzoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes gzoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

@keyframes gzoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

@media (min-width: 769px) {
  .glightbox-container .ginner-container {
    width: auto;
    height: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .glightbox-container .ginner-container.desc-top .gslide-description {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .glightbox-container .ginner-container.desc-top .gslide-image,
                .glightbox-container .ginner-container.desc-top .gslide-image img {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .glightbox-container .ginner-container.desc-left .gslide-description {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .glightbox-container .ginner-container.desc-left .gslide-image {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .gslide-image img {
    max-height: 97vh;
    max-width: 100%;
  }
  .gslide-image img.zoomable {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }
  .zoomed .gslide-image img.zoomable {
    cursor: -webkit-grab;
    cursor: grab;
  }
  .gslide-inline {
    max-height: 95vh;
  }
  .gslide-external {
    max-height: 100vh;
  }
  .gslide-description.description-left,
    .gslide-description.description-right {
    max-width: 275px;
  }
  .glightbox-open {
    height: auto;
  }
  .goverlay {
    background: rgba(0, 0, 0, 0.92);
  }
  .glightbox-clean .gslide-media {
    -webkit-box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
    box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
  }
  .glightbox-clean .description-left .gdesc-inner,
.glightbox-clean .description-right .gdesc-inner {
    position: absolute;
    height: 100%;
    overflow-y: auto;
  }
  .glightbox-clean .gprev,
    .glightbox-clean .gnext,
    .glightbox-clean .gclose {
    background-color: rgba(0, 0, 0, 0.32);
  }
  .glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gclose:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  .glightbox-clean .gprev {
    top: 45%;
  }
  .glightbox-clean .gnext {
    top: 45%;
  }
}

@media (min-width: 992px) {
  .glightbox-clean .gclose {
    opacity: 0.7;
    right: 20px;
  }
}

@media screen and (max-height: 420px) {
  .goverlay {
    background: #000;
  }
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

.hamburger {
  padding: 5px 20px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  border: 1px solid var(--color-green);
  border-radius: var(--radius-pill);
  display: flex;
  /* background-color: var(--color-light-green); */
  gap: 8px;
  overflow: visible; }

.hamburger:hover {
    opacity: 0.7; }

.hamburger.is-active:hover {
    opacity: 0.7; }

.hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: var(--color-green) }

.hamburger-box {
  width: 21px;
  height: 21px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: 0px; }

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 23px;
    height: 2px;
    background-color: var(--color-green);
    border-radius: 0px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }

.hamburger-inner::before {
    top: -6px; }

.hamburger-inner::after {
    bottom: -6px; }

/*
   * 3DX
   */

.hamburger--3dx .hamburger-box {
  perspective: 80px; }

.hamburger--3dx .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dx.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateY(180deg); }

.hamburger--3dx.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }

.hamburger--3dx.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * 3DX Reverse
   */

.hamburger--3dx-r .hamburger-box {
  perspective: 80px; }

.hamburger--3dx-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dx-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateY(-180deg); }

.hamburger--3dx-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }

.hamburger--3dx-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * 3DY
   */

.hamburger--3dy .hamburger-box {
  perspective: 80px; }

.hamburger--3dy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(-180deg); }

.hamburger--3dy.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }

.hamburger--3dy.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * 3DY Reverse
   */

.hamburger--3dy-r .hamburger-box {
  perspective: 80px; }

.hamburger--3dy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dy-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg); }

.hamburger--3dy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }

.hamburger--3dy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * 3DXY
   */

.hamburger--3dxy .hamburger-box {
  perspective: 80px; }

.hamburger--3dxy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dxy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg) rotateY(180deg); }

.hamburger--3dxy.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }

.hamburger--3dxy.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * 3DXY Reverse
   */

.hamburger--3dxy-r .hamburger-box {
  perspective: 80px; }

.hamburger--3dxy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dxy-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); }

.hamburger--3dxy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }

.hamburger--3dxy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * Arrow
   */

.hamburger--arrow.is-active .hamburger-inner::before {
  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }

.hamburger--arrow.is-active .hamburger-inner::after {
  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }

/*
   * Arrow Right
   */

.hamburger--arrow-r.is-active .hamburger-inner::before {
  transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }

.hamburger--arrow-r.is-active .hamburger-inner::after {
  transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }

/*
   * Arrow Alt
   */

.hamburger--arrowalt .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.hamburger--arrowalt .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.hamburger--arrowalt.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }

.hamburger--arrowalt.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }

/*
   * Arrow Alt Right
   */

.hamburger--arrowalt-r .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.hamburger--arrowalt-r .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.hamburger--arrowalt-r.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }

.hamburger--arrowalt-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }

/*
   * Arrow Turn
   */

.hamburger--arrowturn.is-active .hamburger-inner {
  transform: rotate(-180deg); }

.hamburger--arrowturn.is-active .hamburger-inner::before {
    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }

.hamburger--arrowturn.is-active .hamburger-inner::after {
    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }

/*
   * Arrow Turn Right
   */

.hamburger--arrowturn-r.is-active .hamburger-inner {
  transform: rotate(-180deg); }

.hamburger--arrowturn-r.is-active .hamburger-inner::before {
    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }

.hamburger--arrowturn-r.is-active .hamburger-inner::after {
    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }

/*
   * Boring
   */

.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
  transition-property: none; }

.hamburger--boring.is-active .hamburger-inner {
  transform: rotate(45deg); }

.hamburger--boring.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }

.hamburger--boring.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg); }

/*
   * Collapse
   */

.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }

.hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }

.hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Collapse Reverse
   */

.hamburger--collapse-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }

.hamburger--collapse-r .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--collapse-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }

.hamburger--collapse-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Elastic
   */

.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease; }

.hamburger--elastic .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 0.075s; }

.hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }

.hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-270deg);
    transition-delay: 0.075s; }

/*
   * Elastic Reverse
   */

.hamburger--elastic-r .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic-r .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease; }

.hamburger--elastic-r .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic-r.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(-135deg);
  transition-delay: 0.075s; }

.hamburger--elastic-r.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }

.hamburger--elastic-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(270deg);
    transition-delay: 0.075s; }

/*
   * Emphatic
   */

.hamburger--emphatic {
  overflow: hidden; }

.hamburger--emphatic .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in; }

.hamburger--emphatic .hamburger-inner::before {
      left: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }

.hamburger--emphatic .hamburger-inner::after {
      top: 10px;
      right: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }

.hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent !important; }

.hamburger--emphatic.is-active .hamburger-inner::before {
      left: -80px;
      top: -80px;
      transform: translate3d(80px, 80px, 0) rotate(45deg);
      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }

.hamburger--emphatic.is-active .hamburger-inner::after {
      right: -80px;
      top: -80px;
      transform: translate3d(-80px, 80px, 0) rotate(-45deg);
      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }

/*
   * Emphatic Reverse
   */

.hamburger--emphatic-r {
  overflow: hidden; }

.hamburger--emphatic-r .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in; }

.hamburger--emphatic-r .hamburger-inner::before {
      left: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }

.hamburger--emphatic-r .hamburger-inner::after {
      top: 10px;
      right: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }

.hamburger--emphatic-r.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent !important; }

.hamburger--emphatic-r.is-active .hamburger-inner::before {
      left: -80px;
      top: 80px;
      transform: translate3d(80px, -80px, 0) rotate(-45deg);
      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }

.hamburger--emphatic-r.is-active .hamburger-inner::after {
      right: -80px;
      top: 80px;
      transform: translate3d(-80px, -80px, 0) rotate(45deg);
      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }

/*
   * Minus
   */

.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
  transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; }

.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
  opacity: 0;
  transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; }

.hamburger--minus.is-active .hamburger-inner::before {
  top: 0; }

.hamburger--minus.is-active .hamburger-inner::after {
  bottom: 0; }

/*
   * Slider
   */

.hamburger--slider .hamburger-inner {
  top: 2px; }

.hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s; }

.hamburger--slider .hamburger-inner::after {
    top: 20px; }

.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(45deg); }

.hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0; }

.hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-90deg); }

/*
   * Slider Reverse
   */

.hamburger--slider-r .hamburger-inner {
  top: 2px; }

.hamburger--slider-r .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s; }

.hamburger--slider-r .hamburger-inner::after {
    top: 20px; }

.hamburger--slider-r.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(-45deg); }

.hamburger--slider-r.is-active .hamburger-inner::before {
    transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
    opacity: 0; }

.hamburger--slider-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(90deg); }

/*
   * Spin
   */

.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }

.hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }

.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Spin Reverse
   */

.hamburger--spin-r .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin-r .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }

.hamburger--spin-r .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin-r.is-active .hamburger-inner {
  transform: rotate(-225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--spin-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }

.hamburger--spin-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Spring
   */

.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s 0.13s linear; }

.hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important; }

.hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg); }

.hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg); }

/*
   * Spring Reverse
   */

.hamburger--spring-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }

.hamburger--spring-r .hamburger-inner::before {
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--spring-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }

.hamburger--spring-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Stand
   */

.hamburger--stand .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }

.hamburger--stand .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--stand .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--stand.is-active .hamburger-inner {
  transform: rotate(90deg);
  background-color: transparent !important;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }

.hamburger--stand.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--stand.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Stand Reverse
   */

.hamburger--stand-r .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }

.hamburger--stand-r .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--stand-r .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--stand-r.is-active .hamburger-inner {
  transform: rotate(-90deg);
  background-color: transparent !important;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }

.hamburger--stand-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--stand-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Squeeze
   */

.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }

.hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }

.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Vortex
   */

.hamburger--vortex .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

.hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear; }

.hamburger--vortex .hamburger-inner::before {
    transition-property: top, opacity; }

.hamburger--vortex .hamburger-inner::after {
    transition-property: bottom, transform; }

.hamburger--vortex.is-active .hamburger-inner {
  transform: rotate(765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

.hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
    transition-delay: 0s; }

.hamburger--vortex.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }

.hamburger--vortex.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg); }

/*
   * Vortex Reverse
   */

.hamburger--vortex-r .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

.hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear; }

.hamburger--vortex-r .hamburger-inner::before {
    transition-property: top, opacity; }

.hamburger--vortex-r .hamburger-inner::after {
    transition-property: bottom, transform; }

.hamburger--vortex-r.is-active .hamburger-inner {
  transform: rotate(-765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

.hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
    transition-delay: 0s; }

.hamburger--vortex-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }

.hamburger--vortex-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg); }

/* 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 */

.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);
    }
}

/**
 * Swiper 11.0.7
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 27, 2024
 */

/* FONT_START */

@font-face {
  font-family: 'swiper-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
  font-weight: 400;
  font-style: normal;
}

/* FONT_END */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* 3D Effects */

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}

/* CSS Mode */

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

/* Slide styles start */

/* 3D Shadows */

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Slide styles end */

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}

.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-lock {
  display: none;
}

/* Navigation font start */

.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}

/* Navigation font end */

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

/* Common Styles */

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

/* Bullets */

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform,
        200ms top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
        200ms left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
    200ms right;
}

/* Fraction */

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

/* Progress */

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}

.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}

.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-vertical > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

/* Zoom container styles start */

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Zoom container styles end */

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

/* a11y */

.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

/* Cube slide shadows start */

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* Cube slide shadows end */

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

/* Flip slide shadows start */

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* Flip slide shadows end */

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
}

/* Import team member block styles */

/* @import url('../../../template-parts/blocks/team-member/team-member.css'); */

/* Import video block styles */

/* @import url('../../../template-parts/blocks/video-block/video-block.css'); */

/* Import pricing table block styles */

/* @import url('../../../template-parts/blocks/pricing-table/pricing-table.css'); */

/* Import timeline block styles */

/* @import url('../../../template-parts/blocks/timeline/timeline.css'); */

/* Import contact form block styles */

/* @import url('../../../template-parts/blocks/contact-form/contact-form.css'); */

/* Import ticker block styles */

/* @import url('../../../template-parts/blocks/ticker/ticker.css'); */

/* Import values block styles */

/* @import url('../../../template-parts/blocks/values/values.css'); */

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

.home-hero-block {
	padding-top: var(--block-spacing--double, 8rem);
	margin-bottom: var(--block-spacing, 4rem);
} */

/* .block-hero,
.block-copy_and_image,
.block-statement,
.block-collections,
.block-gallery,
.block-cards,
.block-testimonials,
.block-cta,

.block-image,
.card-grid,
.single-post-intro,
.related-posts,
.block-classic,
.block-copy {
	margin-bottom: var(--block-spacing, 4rem);
}

.block-stonesoverview,
.block-process,
.block-facts,
.block-statement,
.related-posts {
	padding-top: var(--block-spacing, 4rem);
	padding-bottom: var(--block-spacing, 4rem);
}

.block-resources {
	padding-top: var(--block-spacing--double, 8rem);
	padding-bottom: var(--block-spacing--double, 8rem);
} */

/* ==========================================================================
   Book a Call Block
   ========================================================================== */

.book-a-call-block__inner {
	align-items: start;
}

.book-a-call-block__content {
	max-width: 40ch;
}

.book-a-call-block__heading {
	font-size: var(--size-step-3);
}

/* Form column */

.book-a-call-block__form {
	background: var(--color-sage);
	padding: var(--space-l);
	border-radius: var(--radius-m);
	/* border: 1px solid var(--color-green); */
}

/* Placeholder/error messages */

.book-a-call-block__placeholder,
.book-a-call-block__error {
	color: var(--color-muted);
	font-style: italic;
}

/* ==========================================================================
   CARDS BLOCK STYLES
   ========================================================================== */

/* ==========================================================================
   CASE STUDIES CARDS BLOCK
   ========================================================================== */

.case-studies-cards-block {
	padding-block: var(--space-xl);
}

.case-studies-cards-block__header {
	/* text-align: center; */
	/* margin-inline: auto; */
	/* max-width: 40ch; */
}

.case-studies-cards-block__grid {
	gap: var(--space-s);
}

.case-studies-cards-block__footer {
	text-align: center;
	margin-block-start: var(--space-l);
}

.case-studies-cards-block .button {
	/* color: var(--color-light); */
	border-color: var(--color-light);
}

/* Case Study Card
   ========================================================================== */

.card-case-study {
	--flow-space: var(--space-s);
	border-radius: var(--radius-l);
	overflow: hidden;
}

.card-case-study__image-link {
	display: block;
	overflow: hidden;
	/* border-radius: var(--radius-m); */
}

.card-case-study__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.card-case-study:hover .card-case-study__image {
	transform: scale(1.05);
}

.card-case-study__content {
	--flow-space: var(--space-2xs);
	padding: var(--space-m);
	background-color: var(--color-light);
	color: var(--color-dark);
	height: 100%;
}

.card-case-study__title {
	/* font-size: var(--size-step-1); */
	/* line-height: 1.3; */
	color: var(--color-green);
	margin-bottom: 0.5rem;
}

.card-case-study__title a {
	text-decoration: none;
	color: inherit;
}

.card-case-study__title a:hover {
	text-decoration: none;
	opacity: 0.8;
}

.card-case-study__description {
	opacity: 0.8;
}

/* Inset Layout
   ========================================================================== */

.case-studies-cards-block__inset {
	padding: var(--space-xl) var(--space-l);
	border-radius: var(--radius-xl);
}

/* full bleed
   ========================================================================== */

.case-studies-cards-block--full-bleed {
	background-color: var(--color-green);
	color: var(--color-light);
}

.case-studies-cards-block--full-bleed .case-studies-cards-block__heading  {
			color: var(--color-lime);
	}

/* On dark background - card variations
   ========================================================================== */

/* .on-dark-bg .card-case-study__title a {
	color: var(--color-light);
}

.on-dark-bg .card-case-study .button--dark {
	background-color: var(--color-light-green);
	color: var(--color-green);
}

.on-dark-bg .card-case-study .button--dark:hover {
	background-color: var(--color-light);
} */

/* ==========================================================================
   Contact Details Block
   ========================================================================== */

.contact-details-block__inner {
	align-items: start;
}

/* Image */

.contact-details-block__img {
	width: 100%;
	height: auto;
}

/* Talk to Team section */

.contact-details-block__talk {
	padding: var(--space-l);
	background: var(--color-green);
	border-radius: var(--radius-m);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact-details-block__talk .button {
		width: 100%;
		font-size: var(--size-step-1);
	}

.contact-details-block__talk{
	--flow-space: 2rem;
}

.contact-details-block__talk-headline {
	/* font-size: var(--size-step-1); */
	color: var(--color-lime);
}

.contact-details-block__talk-copy {
	color: var(--color-light-green);
}

.contact-details-block__headshots {
	/* gap: calc(var(--space-s) * -0.5); */
	gap: var(--space-xs) !important;
}

.contact-details-block__headshot {
	width: 1.5rem;
	height: 1.5rem;
	/* border: 2px solid var(--color-light); */
}

.contact-details-block__talk {
	margin-bottom: var(--space-xl);
}

/* Contact details list */

.contact-details-block__detail {
	padding-bottom: var(--space-s);
	border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
	display: flex;
	justify-content: space-between;
}

.contact-details-block__detail > * {
		flex-grow: 1;
	}

.contact-details-block__detail-heading {
	/* font-size: var(--size-step-3); */
	flex: 0 0 200px;
}

.contact-details-block__detail:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.contact-details-block__detail-type {
	font-size: var(--size-step--1);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-2xs);
	opacity: 0.7;
	/* flex-basis: 200px; */
}

.contact-details-block__detail-content {
	font-size: var(--size-step-0);
	/* flex-basis: 70%; */
	/* flex: 0 1 70%; */
}

.contact-details-block__detail-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.contact-details-block__office-name {
	font-weight: 600;
}

/* ==========================================================================
   COPY BLOCK STYLES
   ========================================================================== */

/* ==========================================================================
   CTA Block
   ========================================================================== */

.cta-block {
    position: relative;
    overflow: hidden;
}

/* Background image - full cover */

.cta-block__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cta-block__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Inner wrapper for content grid */

.cta-block__inner {
    position: relative;
    z-index: 1;
}

/* When foreground image is present, use 50/50 grid */

/* .cta-block--has-fg-image .cta-block__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: center;
}

@media (min-width: 760px) {
    .cta-block--has-fg-image .cta-block__inner {
        grid-template-columns: 1fr 1fr;
    }
} */

/* Foreground image */

.cta-block__fg {
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.cta-block__fg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: var(--radius-l); */
}

/* Content area */

.cta-block__content {
    /* padding: var(--space-l); */
    border-radius: var(--radius-l);
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
}

@media (min-width: 1230px){

.cta-block__content {
        flex-direction: row
}
    }

.cta-block__content > * {
        flex: 1 1 50%;
    }

.cta-block__copy {
    margin-bottom: var(--space-xl);
}

@media (min-width: 760px){

.cta-block__copy {
        margin-bottom: 8rem
}
    }

.cta-block__content-inner {
    padding: var(--space-m);
}

@media (min-width: 760px){

.cta-block__content-inner {
        padding: var(--space-xl);
}
    }

.cta-block__content-inner{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ==========================================================================
   Layout Style Variants
   ========================================================================== */

.cta-block--dark_on_gold {
    background-color: var(--color-gold);
}

.cta-block--dark_on_gold .cta-block__content {
        background-color: var(--color-charcoal);
        color: var(--color-light);
    }

.cta-block--dark_on_gold .button.button--primary {
        background-color: var(--color-gold);
        color: var(--color-charcoal);
        border: 1px solid var(--color-gold);
    }

.cta-block--dark_on_gold .button.button--primary:hover {
            background-color: var(--color-lime);
            color: var(--color-charcoal);
        }

.cta-block--dark_on_gold .button.button--secondary {
        background-color: var(--color-light);
        color: var(--color-charcoal);
    }

.cta-block--light_on_green {
    background-color: var(--color-green);
}

.cta-block--light_on_green .cta-block__content {
        background-color: var(--color-light-green);
        color: var(--color-dark);
        
    }

.cta-block--light_on_green .button.button--primary {
        background-color: var(--color-dark);
        color: var(--color-light-green);
        border: 1px solid var(--color-light-green);
    }

.cta-block--light_on_green .button.button--primary:hover {
            background-color: var(--color-lime);
            color: var(--color-charcoal);
        }

.cta-block--light_on_green .button.button--secondary {
        background-color: var(--color-gold);
        color: var(--color-charcoal);
    }

.faqs-block .faqs-block__logo svg {
		width: 90px;
		height: 90px;
	}

/* FAQ Item
   ========================================================================== */

.faqs-block__items {
	/* max-width: 400px; */

}

.faqs-block__item {
	background-color: rgba(255,255,255, 0.5);
	transition: background-color 0.3s ease;
	margin-bottom: 1rem;

	/* Enable animating to/from auto height */
	interpolate-size: allow-keywords;
}

/* Remove default marker */

.faqs-block__item summary {
		list-style: none;
	}

.faqs-block__item summary::-webkit-details-marker {
		display: none;
	}

.faqs-block__item summary::marker {
		display: none;
		content: "";
	}

.faqs-block__item[open] {
		background-color: rgba(255,255,255, 1);
	}

.faqs-block__item[open] .faqs-block__answer {
		height: auto;
		opacity: 1;
	}

.faqs-block__question {
	display: grid;
	grid-template-columns: 1.5em 1fr;
	gap: var(--space-s);
	align-items: center;
	cursor: pointer;
	font-weight: 600;
}

.faqs-block__answer {
	display: grid;
	grid-template-columns: 1.5em 1fr;
	gap: var(--space-s);
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: height 0.3s ease, opacity 0.3s ease;
	padding: 0 var(--space-m) var(--space-m) var(--space-m);
}

/* Invisible spacer to align with question icon */

.faqs-block__answer::before {
	content: "";
	width: 1.5em;
}

.faqs-block__question-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.faqs-block__question-icon svg {
	width: 1em;
	height: 1em;
}

/* Rotate arrow when open */

.faqs-block__item[open] .faqs-block__question-icon {
	transform: rotate(90deg);
}

.faqs-block__cta {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ==========================================================================
   FEATURED TESTIMONIAL BLOCK STYLES
   ========================================================================== */

.footer-cta-block {
	background-size: cover;
	background-position: center;

}

/* padding: 200px 20px; */

@media (min-width: 760px){

.footer-cta-block {
		/* padding: var(--space-xl) 70px; */

}
	}

.footer-cta-block .wrapper {
	max-width: 1180px;
}

.footer-cta-block__content {
	background-color: rgb(var(--color-green-rgb) / 0.9);
	border-radius: var(--radius-l);
	padding: 70px 30px;
	margin: 50px 0;
	text-align: center;
}

/* max-width: 1080px; */

/* position: relative; */

@media (min-width: 760px){

.footer-cta-block__content {
		padding: var(--space-xl) 70px;
		margin: 0 50px
}
	}

.footer-cta-roundel {
	position: absolute;
	width: 100px;
	height: 100px;
	margin-top: 0 !important;
}

@media (min-width: 1230px){

.footer-cta-roundel {
		width: 160px;
		height: 160px
}
	}

.footer-cta-block__slogan-roundel {
	right: 20%;
	bottom: -50px;
}

@media (min-width: 760px){

.footer-cta-block__slogan-roundel {
		right: 40px;
		top: 50%;
		bottom: auto
}
	}

@media (min-width: 1230px){

.footer-cta-block__slogan-roundel {
		right: 20px
}
	}

.footer-cta-block__logo-roundel {
	left: 20%;
	top: -50px;
}

@media (min-width: 760px){

.footer-cta-block__logo-roundel {
		left: 40px;
		top: 15%;
		right: auto
}
	}

@media (min-width: 1230px){

.footer-cta-block__logo-roundel {
		left: 20px
}
	}

.footer-cta-block__buttons .buttons-list {
	margin-top: 1rem;
}

@media (min-width: 760px){

.footer-cta-block__buttons .buttons-list {
		margin-top: 3rem
}
	}

/* .buttons-list { */

/* @media screen(md){
		justify-content: center;
	} */

/* } */

/* ==========================================================================
   FORM BLOCK STYLES
   ========================================================================== */

/* ==========================================================================
   FULL MEDIA BLOCK STYLES
   ========================================================================== */

.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 BLOCK STYLES
   ========================================================================== */

/* * { */

/* outline: 1px solid red; */

/* } */

.home-hero-block__text a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--color-lime);
}

.home-hero-block__media {
	margin-right: 2rem !important;
	margin-left: 2rem !important;
}

@media (min-width:1780px){

.home-hero-block__heading.h0 {
		font-size: 128px
}
	}

@media (min-width: 1230px) {

	
	.home-hero-block__inner {
		justify-content: center;
		align-items: center;
		display: flex !important;
	}
	
	.home-hero-block__media {
		width: 1500px;
	}
}

@media (min-width:1780px){
	.home-hero-block__media {
		width: 2000px;
	}
}

/* .home-intro-block svg {
	width: 100px;
} */

.home-intro-block__logo {
	display: flex;
	justify-content: center;
}

.home-intro-block__logo svg {
		width: 100px;
	}

.home-intro-block__logo svg path {
			fill: var(--color-green) !important;
		}

.home-intro-block__inner {
	--flow-space: 8rem;
}

.home-intro-block__copy .flow {
	--flow-space: 2rem;
}

.home-hero--logo-and-intro {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

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

/* ==========================================================================
   LATEST POSTS BLOCK STYLES
   ========================================================================== */

.latest-posts-block {
	background-color: var(--color-light);
}

/* Extra posts handling for tablet layout
   When odd number of posts selected (e.g., 3), we fetch one extra
   to complete the 2-column grid on tablet without gaps */

.latest-posts-block__extra-item {
	display: none; /* Hidden by default (mobile - 1 column) */
}

@media (min-width: 760px) {
	.latest-posts-block__extra-item {
		display: block; /* Show on tablet (2 columns - fills the row) */
	}
}

@media (min-width: 1230px) {
	.latest-posts-block__extra-item {
		display: none; /* Hide on desktop (3 columns - show original count) */
	}
}

/**
 * Logo Wall Block CSS
 */

.logowall-block__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-m) var(--space-l);
}

.logowall-block__eyebrow {
	margin-bottom: var(--space-l);
}

.logowall-block__logo {
	flex: 0 0 auto;
}

.logowall-block__logo img {
	/* max-height: 60px; */
	/* opacity: 0.7; */
	transition: opacity var(--transition-base);
	aspect-ratio: 16/9;
	width: 185px;
}

.logowall-block__logo img:hover {
	opacity: 1;
}

@media (max-width: 768px) {
	.logowall-block__logo img {
		max-height: 40px;
	}
}

/* ==========================================================================
   PAGE CTA BLOCK STYLES
   ========================================================================== */

/* ==========================================================================
   PAGE HERO BLOCK STYLES
   ========================================================================== */

.page-hero-block__inner {
      --flow-space: var(--space-xl);
   }

.page-hero-block__content {
      --flow-space: var(--space-s);
   }

/* ==========================================================================
   PROCESS DETAILS BLOCK STYLES
   ========================================================================== */

.process-details-block__items {
      --flow-space: var(--space-2xl);
   }

.process-details-block__item-right {
      --flow-space: var(--space-m);
   }

/* ==========================================================================
   Process Block
   ========================================================================== */

.process-block__intro-section {
	margin-bottom: var(--space-xl);
}

.process-block__logo {
	margin-bottom: var(--space-l);
}

.process-block__logo svg {
	width: 4rem;
	height: auto;
}

/* Steps layout */

.process-block__steps {
	list-style: none;
	padding: 0;
	margin: 0;
}

.process-block__step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-s);
	align-items: start;
	margin-bottom: var(--space-xl);
}

.process-block__step-number {
	color: var(--color-green);
	border-radius: 50%;
	font-size: var(--size-step-2);
	outline: 1px solid var(--color-green);
	width: 4rem;
	height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--font-polymath);
}

.process-block__step-title {
	font-size: var(--size-step-2);
	margin-bottom: var(--space-2xs);
}

.process-block__step-description {
	/* opacity: 0.8; */
	color: var(--color-charcoal);
	font-size: var(--size-step-00);
}

/* Image - full height of block */

.process-block__image {
	height: 100%;
	max-height: 900px;
}

.process-block__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-l);
}

/* ==========================================================================
   RESOURCES SECTION BLOCK STYLES
   ========================================================================== */

/* ==========================================================================
   Services Intro Block
   ========================================================================== */

/* body.single-service_cpt, */

body.first-block-is-services-intro {
	background-color: var(--color-light-gold);
   }

.services-intro-block {
	background-color: var(--color-light-gold);
	color: var(--color-charcoal);
	padding-block: var(--space-xl);
}

.services-intro-block__inner {
	text-align: center;
	--flow-space: 4rem;
}

.services-intro-block__copy.flow p {
	--flow-space: 2rem;
}

.services-intro-block__logo {
	/* max-width: 200px; */
}

.services-intro-block__logo svg {
	width: 200px;
	height: 200px;
	aspect-ratio: 1/1;
}

.services-intro-block__logo svg path {
		fill: var(--color-gold) !important;
	}

.services-intro-block__big-intro {
	max-width: 22ch;
	/* font-size: var(--size-step-3); */
	/* line-height: 1.1; */
}

.services-intro-block__copy {
	max-width: 65ch;
}

.services-intro-block__images {
	margin-block-start: var(--space-m);
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

@media (min-width: 768px) {
	.services-intro-block__images {
		flex-direction: row;
		justify-content: center;
	}
}

/* Single image: full width, 16:9 aspect ratio with cover */

.services-intro-block__images--1 .services-intro-block__image-item {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.services-intro-block__images--1 .services-intro-block__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 2 or 3 images: 1:1 aspect ratio */

.services-intro-block__images--2 .services-intro-block__image-item,
.services-intro-block__images--3 .services-intro-block__image-item {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

@media (min-width: 768px) {
	.services-intro-block__images--2 .services-intro-block__image-item,
	.services-intro-block__images--3 .services-intro-block__image-item {
		flex: 1 1 0;
		min-width: 0;
	}
}

.services-intro-block__images--2 .services-intro-block__img,
.services-intro-block__images--3 .services-intro-block__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.services-intro-block__img {
	border-radius: var(--radius-m);
}

/* ==========================================================================
   Services List Block
   ========================================================================== */

.services-list-block {
	background-color: var(--color-light-gold);
	color: var(--color-charcoal);
	padding-block: var(--space-xl);
}

.services-list-block__header {
	text-align: center;
	max-width: 50ch;
	margin-inline: auto;
	margin-block-end: var(--space-l);
}

.services-list-block__list {
	background-color: var(--color-gold);
	border-radius: var(--radius-l);
	padding: var(--space-m) var(--space-l);
	--flow-space: 0;
}

/* ==========================================================================
   SINGLE TESTIMONIAL BLOCK STYLES
   ========================================================================== */

.stats-block__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
}

.stats-block__item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 calc(25% - var(--space-m));
	min-width: 200px;
	/* max-width: calc(25% - var(--space-m)); */
	flex: 1 1 100%;
	max-width: 100%;
}

@media (min-width: 760px){

.stats-block__item {
		flex: 1 1 33%
		/* flex: 1 1 auto; */
}
	}

@media (min-width: 1230px){

.stats-block__item {
		flex: 1 1 25%
		/* flex: 1 1 auto; */
}
	}

/* @media screen(max-width: 768px) {
	.stats-block__item {
		flex: 1 1 calc(50% - var(--space-m));
		max-width: calc(50% - var(--space-m));
	}
}

@media (max-width: 480px) {
	.stats-block__item {
		flex: 1 1 100%;
		max-width: 100%;
	}
} */

.stats-block__stat-heading {
	/* font-size: var(--size-step-3); */
	/* font-weight: var(--font-bold); */
	/* line-height: 1.1; */
	word-break: break-word;
	margin-bottom: 8rem;
}

.stats-block__small-print {
	/* font-size: var(--size-step-00); */
}

/* ==========================================================================
   TALK TO TEAM CTA BLOCK STYLES
   ========================================================================== */

/* .home-intro-block svg {
	width: 100px;
} */

.team-block__inner {
--flow-space: var(--space-xl);
}

.team-block__header {
	--flow-space: var(--space-s);
}

.team-block__member-info {
	--flow-space: var(--space-xs);
}

.team-block__logo {
	display: flex;
	justify-content: center;
}

.team-block__logo svg {
		width: 100px;
	}

.team-block__logo svg path {
			fill: var(--color-green) !important;
		}

/* Bio reveal animation */

.team-block__member-bio {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.4s ease, opacity 0.4s ease;
}

.team-block__member-bio > * {
	overflow: hidden;
}

.team-block__member-bio.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* Hide read more button after use */

.js-team-read-more[hidden] {
	display: none !important;
}

/**
 * Testimonial Block CSS
 * Shared styles for featured testimonial and single testimonial blocks
 * Uses card-testimonial_cpt.php classes
 */

/* Featured/single testimonial block - single centered card */

.featured-testimonial-block .wrapper,
.single-testimonial-block .wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.featured-testimonial-block__card,
.single-testimonial-block__card {
	max-width: 800px;
	width: 100%;
}

.featured-testimonial-block .wrapper {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing);
}

/* Testimonial author wrapper (shared with testimonials wall) */

.testimonial-author-wrapper {
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

.testimonial-author--image {
	flex-shrink: 0;
}

.testimonial-author--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   TESTIMONIALS WALL BLOCK STYLES
   ========================================================================== */

.testimonials-wall-block__header {
	text-align: center;
	padding-bottom: var(--space-l);
}

/* Masonry-style layout using CSS columns */

.testimonials-wall-block__grid {
	columns: 1;
	column-gap: var(--space-m);
}

.testimonials-wall-block__grid > * {
	break-inside: avoid;
	margin-bottom: var(--space-m);
}

@media (min-width: 760px) {
	.testimonials-wall-block__grid {
		columns: 2;
	}
}

/* ==========================================================================
   TESTIMONIALS BLOCK STYLES
   ========================================================================== */

/* ==========================================================================
   TICKER BLOCK STYLES
   ========================================================================== */

.ticker-block {
	overflow: hidden;
	width: 100%;
}

.ticker-block__track {
	display: flex;
	width: max-content;
	background-color: var(--color-green);
	color: var(--color-light);
	padding-block: var(--space-xs);
	font-weight: 700;
	font-size: var(--size-step-3);
	transform: rotate(-2deg);
	/* Extend beyond container to prevent gaps at edges when rotated */
	margin-inline: -5%;
	padding-inline: 5%;
	/*
	 * Compensate for rotation clipping:
	 * At -2deg rotation, the bottom edge drops by approx tan(2deg) * width
	 * Using em units so it scales with font size
	 */
	margin-block: 0.5em 3em;
}

.ticker-block__content {
	display: flex;
	flex-shrink: 0;
	animation: ticker-scroll 20s linear infinite;
}

.ticker-block__item {
	flex-shrink: 0;
	padding-inline: var(--space-s);
	white-space: nowrap;
	/* font-size: var(--size-step-1); */
	/* font-family: var(--font-albra-semi); */
}

/* Animation */

@keyframes ticker-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

/* Pause on hover for accessibility */

@media (prefers-reduced-motion: reduce) {
	 .ticker-block__content {
		animation-play-state: paused;
	 }
}

/* Reduced motion preference */

@media (prefers-reduced-motion: reduce) {
	.ticker-block__content {
		animation: none;
	}
}

/* Speed variations */

.ticker-block--speed-slow .ticker-block__content {
	animation-duration: 50s;
}

.ticker-block--speed-normal .ticker-block__content {
	animation-duration: 30s;
}

.ticker-block--speed-fast .ticker-block__content {
	animation-duration: 20s;
}

/* Direction variations */

.ticker-block--direction-right .ticker-block__content {
	animation-direction: reverse;
}

/* ==========================================================================
   TWO COL COPY BLOCK STYLES
   ========================================================================== */

/* ==========================================================================
   VALUES BLOCK STYLES
   ========================================================================== */

.values-block__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.values-block__icon svg path, .values-block__icon svg circle, .values-block__icon svg line { stroke: var(--color-lime); }

.values-block__icon svg{
		width: 22px;
		height: 22px;
}

.values-block__icon{
	padding: 10px;
	border-radius: 50%;
}

/* 3-column flex centered layout */

.values-block__grid--centered {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-l);
}

.values-block__grid--centered .values-block__item {
	flex: 0 1 calc(33.333% - var(--space-l));
	min-width: 280px;
	margin: var(--space-l) 0;
}

@media (max-width: 768px) {
	.values-block__grid--centered .values-block__item {
		flex: 1 1 100%;
	}
}

.values-block__media {
	aspect-ratio: 1/1;
}

.values-block__item {
	--flow-space: var(--space-xs);
}

.values-block__header {
	margin-bottom: var(--space-xl);
}

.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;
}

/* Video Block - Play Button */

.video-block__container {
	position: relative;
}

.video-block__play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-green);
	z-index: 1;
}

.video-block__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 7rem;
	height: 7rem;
	background-color: var(--color-green);
	border-radius: 50%;
	color: var(--color-lime);
	transition: transform 0.2s ease;
}

.video-block__play-button:hover .video-block__play-icon {
	transform: scale(1.1);
}

.video-block__play-icon svg {
	width: 6rem;
	height: 6rem;
}

.video-block__play-text {
	font-family: var(--font-albra-semi);
	font-size: var(--size-step-0);
	color: var(--color-light);
}

.video-block__thumbnail iframe {
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
	}

.forminator-button,
.button {
    align-items: center;
    background: var(--color-green);
    border: 1px solid var(--color-green);
    color: var(--color-light);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--size-step-0);
    /* font-weight: var(--font-bold); */
    gap: 0 var(--space-2xs);
    justify-content: center;
    line-height: 1;
    padding: .6em 1em;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: all 0.2s;
}

.forminator-button:hover, .button:hover {
        background: var(--color-lime);
        color: var(--color-dark);
        border: 1px solid var(--color-lime);
    }

.button.button--gold,
.button.button--secondary {
    background: var(--color-gold);
    color: var(--color-dark);
    border: 1px solid var(--color-gold);
}

.button.button--gold:hover, .button.button--secondary:hover {
        background: var(--color-lime);
        color: var(--color-dark);
        border: 1px solid var(--color-lime);
    }

.button.button--outline {
    background: transparent;
    color: var(--color-green);
    border: 1px solid var(--color-green);
}

.button.button--outline:hover {
        background: var(--color-lime);
        color: var(--color-dark);
        border: 1px solid var(--color-lime);
    }

.button.button--dark {
    background: var(--color-dark);
    color: var(--color-light);
    border: 1px solid var(--color-dark);
}

.button.button--dark:hover {
        background: var(--color-lime);
        color: var(--color-dark);
        border: 1px solid var(--color-lime);
    }

.button.button--light {
    background: var(--color-light);
    color: var(--color-dark);
    border: 1px solid var(--color-light);
}

.button.button--light:hover {
        background: var(--color-lime);
        color: var(--color-dark);
        border: 1px solid var(--color-lime);
    }

.buttons-list {
    display: flex;
    gap: var(--space-s);
    flex-wrap: wrap;
}

/* 
.forminator-button svg,
.button svg {
    height: auto;
    transform: rotate(0deg);
    width: 1.85ex
}

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

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

.forminator-button[data-type=secondary],
.button[data-type=secondary] {
    border: 1px solid var(--color-dark)
}

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

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

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

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


.buttonforminator-[data-type=secondary]:hover,.button[data-theme=dark]:hover,
.button[data-type=secondary]:hover {
    background-color: var(--color-quaternary);
    color: var(--color-dark)
}

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

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

.buttonforminator-[data-theme=ghost]:hover,
.button[data-theme=ghost]:hover {
    background: var(--color-primary-glare);
    border-color: var(--color-primary);
    color: var(--color-dark)
} */

/* ==========================================================================
   BASIC CARD STYLES
   ========================================================================== */

/* ==========================================================================
   CASE STUDY CARD STYLES
   ========================================================================== */

.card-case-study .card-case-study__title {
      color: var(--color-green) !important;
   }

.card-case-study__content {
      --flow-space: 0.5rem;
   }

/* ==========================================================================
   POST CARD STYLES
   ========================================================================== */

/* ==========================================================================
   RESOURCE CARD STYLES
   ========================================================================== */

/* ==========================================================================
   SEARCH RESULT CARD STYLES
   ========================================================================== */

/* ==========================================================================
   SERVICE CARD STYLES
   ========================================================================== */

/* ==========================================================================
   TEAM CARD STYLES
   ========================================================================== */

/* ==========================================================================
   TESTIMONIAL CARD STYLES
   ========================================================================== */

.testimonial-card {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      color: var(--color-dark);
      padding: var(--space-m);
      border-radius: var(--radius-l);
   }

.testimonial-card h1,
   .testimonial-card h2,
   .testimonial-card h3,
   .testimonial-card h4 {
      color: inherit;
   }

.testimonial-card__author-wrapper {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
   }

.testimonial-card__author-info {
      display: flex;
      flex-direction: column;
      
   }

.testimonial-card__author-image {
      flex: 0 0 60px;
   }

.testimonial-card__author-image img {
      border-radius: var(--radius-pill);
      width: 60px;
      height: 60px;
      
      /* overflow: hidden; */
   }

.testimonial-card__author-name {
      font-size: var(--size-step-0);
      /* font-weight: var(--font-semibold, 600); */
   }

.testimonial-card__author-role {
      font-size: var(--size-step-00);
      opacity: 0.6;
   }

.testimonial-card__quote {
      color: var(--color-dark) !important;
      margin-bottom: var(--space-s);
   }

.card img {
    object-fit: cover;
    /* object-position: center; */
    width: 100%;
}

.card__separator {
	display: inline-block;
	width: 5px;
	height: 5px;
	background-color: currentColor;
	border-radius: 50%;
	/* opacity: 0.5; */
}

.card-service {
    padding: var(--space-s) 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-s);
}

.card-service svg {
        width: 20px !important;
        height: 20px !important;
    }

.card-service .card-service__title {
        font-weight: 600;
    }

.card-service .card-service__link {
        opacity: 0.7;
    }

@media (min-width: 760px){

.card-service {
        flex-direction: row;
        justify-content: space-between;
        align-items: center
}
    }

/* .card {
    backface-visibility: hidden;
    background-color: var(--color-pink);
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    position: relative;
    text-align: left;
    text-decoration: none;
}

.card:not([data-type=featured]):nth-last-child(n+1):nth-last-child(-n+2):first-child,
.card:not([data-type=featured]):nth-last-child(n+1):nth-last-child(-n+2):first-child~.card:not([data-type=featured]) {
    max-width: 20rem;
}

.card:not([data-type=featured]):hover {
    transform: translateY(-.2em) scale(1.01);
    transition: transform var(--transition-bounce);
}

.card__content,
.card__media {
    position: relative;
}

.card__content {
    padding: 0 var(--space-s) var(--space-s);
    z-index: 1;
}

.card img {
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.card>svg {
    height: auto;
    margin: auto var(--space-xs) var(--space-xs) auto;
    position: relative;
    width: 1.85ex;
    z-index: 1;
}

.card:hover>svg {
    transform: rotate(-45deg);
    transition: transform var(--transition-base);
}

.card:not(:hover) img {
    filter: grayscale(1);
}

.card .tags {
    margin-bottom: 0!important;
    margin-top: auto;
}

.card[data-type=featured] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem,50vw,33rem);
    background-color: unset;
    display: grid;
    gap: var(--gutter,var(--space-s-l));
    grid-template-columns: repeat(var(--grid-placement,auto-fill),minmax(var(--grid-min-item-size,16rem),1fr));
    padding: 0;
}

.card[data-type=featured]>div:first-child {
    box-shadow: 0 4px 23px 0 rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
}

.card[data-type=featured]>div:last-child .button {
    margin-top: var(--space-s-l);
}

.card.grunge:before {
    background-color: var(--color-secondary);
}

@media (min-width: 50em) {
    .card[data-type=featured]>div:last-child {
        padding-right:calc(var(--space-s-l)*2)
    };
} */

.content-wrapper * {
        margin-bottom: var(--flow-space, 1em);
    }

.content-wrapper .wp-block-heading {
        padding-top: var(--flow-space, 1em);
    }

/* ==========================================================================
   Site Footer
   ========================================================================== */

.site-footer {
	padding-block: var(--space-xl);
}

.site-footer__top {
	padding-block-end: var(--space-l);
	align-items: center;
}

.site-footer__logo svg {
	max-width: 400px;
	height: auto;
}

.site-footer__logo svg path, .site-footer__logo svg ellipse {
		fill: var(--color-light) !important;
	}

/* Newsletter
   ========================================================================== */

.site-footer__newsletter {
	--flow-space: var(--space-xs);
}

.site-footer__newsletter-heading {
	font-size: var(--size-step-2);
	font-weight: 700;
}

/* Footer newsletter form - gold button with pill radius */

.site-footer__newsletter .forminator-button,
.site-footer__newsletter .button {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-dark);
	border-radius: var(--radius-pill);
}

.site-footer__newsletter .forminator-button:hover,
.site-footer__newsletter .button:hover {
	background: var(--color-light-gold);
	border-color: var(--color-light-gold);
	color: var(--color-dark);
}

/* Footer newsletter form fields - pill radius */

.site-footer__newsletter .forminator-ui input[type="text"],
.site-footer__newsletter .forminator-ui input[type="email"] {
	background: var(--color-light);
	border-color: var(--color-light);
	color: var(--color-dark);
	border-radius: var(--radius-pill);
}

/* Navigation
   ========================================================================== */

.site-footer__nav {
	padding-block: var(--space-m);
	font-size: var(--size-step-00);
}

.site-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s) var(--space-l);
}

.site-footer__nav a {
	color: inherit;
	text-decoration: none;
}

.site-footer__nav a:hover {
	/* text-decoration: underline; */
	color: var(--color-gold);
}

/* Current page indicator - lime dot (no bg change) */

.site-footer__nav li.current-menu-item a,
.site-footer__nav li.current-menu-ancestor a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background-color: transparent;
}

.site-footer__nav li.current-menu-item a::before,
.site-footer__nav li.current-menu-ancestor a::before {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	background-color: var(--color-gold);
	border-radius: 50%;
	flex-shrink: 0;
}

.footer-nav {
	/* text-align: center; */
	justify-content: center;
	margin: var(--space-xl) 0 !important;
}

/* Divider
   ========================================================================== */

.site-footer__divider {
	height: 1px;
	border: 0;
}

/* Bottom
   ========================================================================== */

.site-footer__bottom {
	padding-block-start: var(--space-m);
	font-size: var(--size-step-00);
}

.site-footer__copyright {
	opacity: 0.8;
}

.site-footer__legal {
	--cluster-space: var(--space-s);
}

.site-footer__legal a {
	color: inherit;
	text-decoration: none;
	opacity: 0.8;
}

.site-footer__legal a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* ==========================================================================
   Forminator Form Styling
   ========================================================================== */

.forminator-ui {

	/* Button styling inherited from button.css via .forminator-button selector */
	/* No overrides needed - .forminator-button is defined in button.css */

}

.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="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="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="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: 0.2em 0;
		padding: 0.5em 0.75em;
		border: 1px solid var(--color-border, #ddd);
		border-radius: var(--radius-s, 4px);
		max-width: 100%;
		font-size: var(--size-step-0);
	}

.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;
	}

/* ==========================================================================
   Off-Canvas Menu - GSAP height animation
   ========================================================================== */

/* Override offside defaults - no slide, GSAP handles animation */

.offside,
.offside--right {
	position: fixed;
	top: var(--nav-height, 80px);
	left: 0;
	right: 0;
	width: 100%;
	max-width: none;
	height: auto;
	padding: 0 5%;
	transform: none !important;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.offside--right.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Prevent site from sliding */

.offside-js--is-right .offside-sliding-element {
	transform: none !important;
}

/* Menu panel styling */

.off-canvas {
	/* background-color: var(--color-green); */
	color: var(--color-light);
	padding: var(--space-m);
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: center; */
	border-radius: var(--radius-l, 1rem);
	height: 100%;
	overflow: auto;
}

.off-canvas__inner {
	/* text-align: center; */
	width: 100%;
	background-color: var(--color-green);
	padding: var(--space-m);
	border-radius: var(--radius-l);
}

.off-canvas__menu {
	margin-bottom: var(--space-m);
}

.off-canvas__menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.off-canvas__menu ul li {
		margin-bottom: 0.5rem;
	}

.off-canvas__menu a {
	color: var(--color-light);
	text-decoration: none;
	font-size: var(--size-step-1);
}

/* Current page indicator - lime dot */

.off-canvas__menu li.current-menu-item a,
.off-canvas__menu li.current-menu-ancestor a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: transparent;
}

.off-canvas__menu li.current-menu-item a::before,
.off-canvas__menu li.current-menu-ancestor a::before {
	content: '';
	display: inline-block;
	width: 0.3em;
	height: 0.3em;
	background-color: var(--color-lime);
	border-radius: 50%;
	flex-shrink: 0;
}

.off-canvas__contact {
	/* margin-bottom: var(--space-m); */
}

.off-canvas__social {
	justify-content: center;
}

.off-canvas__social svg {
	fill: var(--color-light);
	
}

.off-canvas__social.social-links svg {
	width: 1.6rem;
	height: 1.6rem;
}

.off-canvas__contact-wrapper {
	display: flex;
	justify-content: space-between;
	align-item: center;
	margin-bottom: 0.5rem;
}

.off-canvas__contact {
	display: flex;
}

.off-canvas__contact a {
	/* width: 100%; */
	/* text-decoration: none; */
	/* padding: 1rem; */
	font-size: var(--size-step-1);
}

.off-canvas__social.social-links svg rect,
.off-canvas__social.social-links svg path {
	fill: var(--color-light-green);
}

/* Overlay */

.site-overlay {
	z-index: 9998;
	position: fixed;
	inset: 0;
	background-color: var(--color-light-green);
	visibility: hidden;
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.offside-js--is-open .site-overlay {
	visibility: visible;
	opacity: 0.9;
	transition: opacity 0.3s ease, visibility 0s 0s;
}

.hamburger--label__open {
		display: none;
	}

body.offside-js--is-open .hamburger--label__closed {
		display: none;
	}

body.offside-js--is-open .hamburger--label__open {
		display: block;
	}

.pill {
    background-color: var(--color-dark);
    color: var(--color-light);
    display: inline-block;
    font-size: var(--size-step-000);
    padding: var(--space-3xs) var(--space-2xs);
    text-decoration: none;
    font-family: var(--font-mono);
    text-transform: uppercase;
    border-radius: var(--radius-pill);
}

.prose {
  --flow-space: var(--space-m);
  /* font-size: var(--size-step-3); */
}

/* ==========================================================================
   Gutenberg List Block
   Restores bullet/number styling stripped by reset
   ========================================================================== */

.wp-block-list {
  padding-left: 1.5em;
}

ul.wp-block-list {
  list-style-type: disc;
}

ol.wp-block-list {
  list-style-type: decimal;
}

/* Nested lists */

.wp-block-list .wp-block-list {
  margin-top: 0.5em;
}

ul.wp-block-list ul.wp-block-list {
  list-style-type: circle;
}

ul.wp-block-list ul.wp-block-list ul.wp-block-list {
  list-style-type: square;
}

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

.nav-logo {
	width: 10rem;
}

.menu a {
	letter-spacing: 0.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: ***/

/*** Auto Hide Header on Scroll ***/

.site-header {
	z-index: 10000;
}

.site-header-inner {
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: transform 0.3s ease;
	padding: var(--space-s) 0;
}

.site-header-bg {
	position: absolute;
	inset: 0;
	background-color: var(--color-light-green);
	opacity: 0.9;
	/* transition: 0.2s ease background-color; */
}

body.first-block-is-services-intro .site-header-bg,
.single-service_cpt .site-header-bg {
	background-color: var(--color-light-gold);
}

@media (min-width: 760px) {
	.site-header-bg {
		opacity: 0;
	}
}

.site-header-content-wrapper {
	position: relative;
	z-index: 1;
}

/* Hide nav on scroll down (desktop only) */

html.nav-is-hidden:not(.page-is-at-top) body:not(.offside-js--is-open) .site-header-inner {
	/* @media (min-width: 50em) { */
		transform: translateY(-100%);
	/* } */
}

/* Show nav on scroll up or when menu is open */

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

body.offside-js--is-open .site-header-bg {
	/* background-color: transparent; */
}

/* Spacer to prevent content jumping under fixed header */

/* Height calculated via JS and set as --nav-height custom property */

.site-header::after {
	content: "";
	display: block;
	height: var(--nav-height, 5rem);
}

.site-main-menu {
	display: flex;
}

.site-main-menu a {
		text-decoration: none;
	}

:root {
	--nav-spacing: 0.9rem;
	--nav-spacing-large: 1.6rem;
}

.top-bar-wrapper {
	--gutter: 1rem;
}

a.site-header-contact-button,
.site-main-menu .menu-item a {
	padding: var(--nav-spacing) var(--nav-spacing);
	display: block;
	text-decoration: none;
	font-size: var(--size-step-00);
}

/* .menu-main-nav-container {
	border-radius: var(--radius-pill);
} */

.site-main-menu .menu-item:first-of-type a {
	padding: var(--nav-spacing) var(--nav-spacing) var(--nav-spacing) var(--nav-spacing-large);
	border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.site-main-menu .menu-item:last-of-type a {
	padding: var(--nav-spacing) var(--nav-spacing-large) var(--nav-spacing) var(--nav-spacing);
	border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.site-main-menu .menu-item a,
a.site-header-contact-button {
	transition: all 0.2s;
}

li.current-menu-item a,
.site-main-menu .menu-item a:hover {
	background-color: #0c3a1b;
}

a.site-header-contact-button:hover {
	background-color: var(--color-gold);
}

/* increase nav on v large screens */

@media (min-width:1780px){
	a.site-header-contact-button,
	.site-main-menu .menu-item a {
		/* outline: 1px solid red; */
		font-size: var(--size-step-0) !important;
	}
	.nav-logo {
		width: 13rem;
	}
}

/* in archive resources */

body.post-type-archive-resource_cpt {
	background-color: var(--color-light-gold);
}

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

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

/*
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));
  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);
}

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

/* AUTO GRID


USING TAILWIND CSS GRID INSTEAD




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));
}

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

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

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

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

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

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

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

/* ==========================================================================
   ON DARK BACKGROUND
   ========================================================================== */

/**
 * When .on-dark-bg is applied to a container, text becomes light coloured.
 *
 * Uses :where() for descendant selectors to keep specificity low.
 * This allows component-specific styles (e.g., .newsletter-signup .color-gold)
 * to naturally override these defaults without needing resets.
 */

/* Default: all text is light on dark backgrounds */

.on-dark-bg {
	color: var(--color-light);
}

/* Headings - low specificity so component styles override */

.on-dark-bg :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4) {
	color: var(--color-light);
}

/* Links */

.on-dark-bg :where(a:not(.button)) {
	color: var(--color-light);
}

/* Muted text */

.on-dark-bg :where(.text-muted, .color-muted) {
	color: var(--color-light);
	opacity: 0.7;
}

/* Eyebrow text - often lime/accent on dark */

.on-dark-bg :where(.font-eyebrow) {
	color: var(--color-lime);
}

/* Button outline on dark backgrounds */

.on-dark-bg :where(.button) {
	border-color: var(--color-light);
}

/* ==========================================================================
   SPECIFIC BLOCK OVERRIDES
   These need higher specificity to override the :where() rules above
   ========================================================================== */

/* Archive page content inherits dark bg styling */

.on-dark-bg .archive-page-content {
	color: var(--color-light);
}

/* Values block icon outline on dark backgrounds */

.on-dark-bg .values-block__icon {
	outline: 1px solid var(--color-lime);
}

/* Case study card button */

.on-dark-bg .card-case-study .button--dark {
	border-color: var(--color-dark);
}

.on-dark-bg .card-case-study .button--dark:hover {
	background-color: var(--color-lime);
	border-color: var(--color-lime);
}

/* ==========================================================================
   NAV OVERRIDES FOR CASE STUDY ARCHIVE
   ========================================================================== */

body.post-type-archive-case_study_cpt .site-header-contact-button {
		color: var(--color-dark);
	}

body.post-type-archive-case_study_cpt .nav-logo svg ellipse,
		body.post-type-archive-case_study_cpt .nav-logo svg path {
			fill: var(--color-light) !important;
		}

body.post-type-archive-case_study_cpt .site-main-menu {
		background-color: var(--color-light);
	}

body.post-type-archive-case_study_cpt .site-main-menu a {
			color: var(--color-green);
		}

body.post-type-archive-case_study_cpt .site-main-menu li.current-menu-item a,
		body.post-type-archive-case_study_cpt .site-main-menu a:hover {
			background-color: #aec69c;
		}

body.post-type-archive-case_study_cpt .site-header-bg {
		background: var(--color-dark);
	}

body.post-type-archive-case_study_cpt .hamburger {
		border-color: var(--color-light);
	}

body.post-type-archive-case_study_cpt .hamburger--label {
		color: var(--color-light);
	}

body.post-type-archive-case_study_cpt .hamburger.is-active .hamburger-inner, body.post-type-archive-case_study_cpt .hamburger.is-active .hamburger-inner::before, body.post-type-archive-case_study_cpt .hamburger.is-active .hamburger-inner::after, body.post-type-archive-case_study_cpt .hamburger-inner, body.post-type-archive-case_study_cpt .hamburger-inner::before, body.post-type-archive-case_study_cpt .hamburger-inner::after {
		background-color: var(--color-light);
	}

body.post-type-archive-case_study_cpt .site-overlay {
		background-color: var(--color-dark);
	}

/*
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), 110rem);  /* clamp(min, val, max) */
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

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

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

/* ==========================================================================
   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-green);
	--post-nav-fg: var(--color-light);
	--post-nav-radius: var(--radius-s);
}

.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);
	border-radius: var(--post-nav-radius);
	text-decoration: none;
	font-weight: 500;
	transition: transform 0.2s ease, opacity 0.2s ease, background-color 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);
}

/* 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;
	}
}

.archive-content {
	margin-bottom: var(--block-spacing--double);
}

.blog-resources {
	padding-top: var(--block-spacing--double);
	padding-bottom: var(--block-spacing--double);
}

/**
 * Block Padding System
 *
 * Global padding management for all blocks.
 * Follows CUBE CSS methodology - values defined once, applied consistently.
 *
 * Structure:
 * 1. Default padding for standard content blocks
 * 2. Explicit no-padding for full-bleed blocks
 * 3. Utility classes (has-padding--*, has-spacing--*) - override defaults
 *
 * Order matters: defaults first, then utilities to override them.
 */

/* ==========================================================================
   DEFAULT BLOCK PADDING - Standard content blocks
   ========================================================================== */

/* Content blocks that should have standard top/bottom padding */

.accordion-block,
.book-a-call-block,
.cards-block,

.contact-block,
.contact-details-block,
.contact-form-block,
.copy-block,
.copy-and-image-block,

.form-block,
.gallery-block,
.image-block,

.logowall-block,
.pricing-table-block,
.process-block,
/* .process-details-block, */
.resources-section-block,
.services-intro-block,

.statement-block,
.stats-block,

.team-member-block,
.testimonials-block,
.testimonials-wall-block,
.timeline-block,
.two-col-copy-block,

.page-hero-block,
.video-block {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing);
}

/* CTA blocks typically need standard padding */

.page-cta-block,
.footer-cta-block,
.talk-to-team-cta-block {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing);
}

/* Testimonial blocks */

/* .featured-testimonial-block, */

/* .single-testimonial-block, */

.archive-header,
.case-studies-cards-block,
.single-service__other-services,
.values-block,
.team-block,


.full-media-block__inset,
/* .single-case-study__next-header, */
.testimonial-block {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing);
}

.latest-posts-block,

/* .single-case-study__header, */



.services-list-block,
.single-testimonial-block,
.process-details-block,
.featured-testimonial-block {
/* .testimonial-block { */
	padding-top: var(--block-spacing--double);
	padding-bottom: var(--block-spacing--double);
}

.single-service__header {
	padding-top: var(--block-spacing--double);
	padding-bottom: var(--block-spacing);
}

.blog-resources__header {
	padding-top: 0;
	padding-bottom: var(--block-spacing);
}

.single-case-study__footer {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing--double);
}

.single-resource__download-section-wrapper {
	margin-bottom: var(--block-spacing--double);
}

/* ==========================================================================
   NO PADDING - Full-bleed and hero blocks
   ========================================================================== */

/* Full-bleed blocks should have no padding by default */

.hero-block,
/* .page-hero-block, */
.full-media-block,
.ticker-block {
	padding-top: 0;
	padding-bottom: 0;
}

/* ==========================================================================
   DOUBLE PADDING - 
   ========================================================================== */

/* Full-bleed blocks should have no padding by default */

.home-intro-block {
	padding-top: calc(var(--block-spacing) / 2);
	padding-bottom: calc(var(--block-spacing) / 2);
}

@media (min-width: 760px) {

.home-intro-block {
		padding-top: var(--block-spacing);
		padding-bottom: var(--block-spacing)
}
	}

.home-hero-block {
	padding-top: calc(var(--block-spacing) / 2);
	padding-bottom: calc(var(--block-spacing) / 2);
}

@media (min-width: 1230px) {

.home-hero-block {
		padding-top: 0;
		padding-bottom: 0
}
	}

@media (min-width:1780px){

.home-hero-block {
		padding-top: var(--block-spacing);
		padding-bottom: var(--block-spacing)
		/* padding-top: var(--block-spacing--double); */
		/* padding-bottom: var(--block-spacing--double); */
}
	}

.faqs-block,
.cta-block {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing);
}

@media (min-width: 760px) {

.faqs-block,
.cta-block {
		padding-top: var(--block-spacing--double);
		padding-bottom: var(--block-spacing--double)
}
	}

/* ==========================================================================
   UTILITY CLASSES - Override defaults when applied via ACF
   ========================================================================== */

/*
 * These classes override the block-specific defaults above.
 * Applied via ACF fields for per-instance customization.
 *
 * Order: These come AFTER block defaults to ensure proper cascade.
 */

.has-padding--none {
	padding-top: 0;
	padding-bottom: 0;
}

.has-padding--half {
	padding-top: calc(var(--block-spacing) / 2);
	padding-bottom: calc(var(--block-spacing) / 2);
}

.has-padding--standard {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing);
}

.has-padding--large {
	padding-top: var(--block-spacing--double);
	padding-bottom: var(--block-spacing--double);
}

/* Individual padding-top utilities */

.has-padding-top--none {
	padding-top: 0;
}

.has-padding-top--half {
	padding-top: calc(var(--block-spacing) / 2);
}

.has-padding-top--standard {
	padding-top: var(--block-spacing);
}

.has-padding-top--large {
	padding-top: var(--block-spacing--double);
}

/* Individual padding-bottom utilities */

.has-padding-bottom--none {
	padding-bottom: 0;
}

.has-padding-bottom--half {
	padding-bottom: calc(var(--block-spacing) / 2);
}

.has-padding-bottom--standard {
	padding-bottom: var(--block-spacing);
}

.has-padding-bottom--large {
	padding-bottom: var(--block-spacing--double);
}

/* Spacing (margin-bottom) utilities */

.has-spacing--none {
	margin-bottom: 0;
}

.has-spacing--half {
	margin-bottom: calc(var(--block-spacing) / 2);
}

.has-spacing--standard {
	margin-bottom: var(--block-spacing);
}

.has-spacing--large {
	margin-bottom: var(--block-spacing--double);
}

/* ==========================================================================
   RESPONSIVE PADDING UTILITIES - Apply padding at specific breakpoints
   ========================================================================== */

/*
 * Responsive padding utilities following Tailwind-style prefix pattern.
 * Apply padding only at specified breakpoint and above.
 */

/* Medium screens and up (768px+) */

@media (min-width: 760px) {
	.md\:has-padding--none {
		padding-top: 0;
		padding-bottom: 0;
	}

	.md\:has-padding--half {
		padding-top: calc(var(--block-spacing) / 2);
		padding-bottom: calc(var(--block-spacing) / 2);
	}

	.md\:has-padding--standard {
		padding-top: var(--block-spacing);
		padding-bottom: var(--block-spacing);
	}

	.md\:has-padding--large {
		padding-top: var(--block-spacing--double);
		padding-bottom: var(--block-spacing--double);
	}

	/* Individual padding-top utilities */
	.md\:has-padding-top--none {
		padding-top: 0;
	}

	.md\:has-padding-top--half {
		padding-top: calc(var(--block-spacing) / 2);
	}

	.md\:has-padding-top--standard {
		padding-top: var(--block-spacing);
	}

	.md\:has-padding-top--large {
		padding-top: var(--block-spacing--double);
	}

	/* Individual padding-bottom utilities */
	.md\:has-padding-bottom--none {
		padding-bottom: 0;
	}

	.md\:has-padding-bottom--half {
		padding-bottom: calc(var(--block-spacing) / 2);
	}

	.md\:has-padding-bottom--standard {
		padding-bottom: var(--block-spacing);
	}

	.md\:has-padding-bottom--large {
		padding-bottom: var(--block-spacing--double);
	}

	.md\:has-spacing--half {
		margin-bottom: calc(var(--block-spacing) / 2);
	}

	.md\:has-spacing--standard {
		margin-bottom: var(--block-spacing);
	}

	.md\:has-spacing--large {
		margin-bottom: var(--block-spacing--double);
	}
}

/* Large screens and up (1024px+) */

@media (min-width: 1230px) {
	.lg\:has-padding--none {
		padding-top: 0;
		padding-bottom: 0;
	}

	.lg\:has-padding--half {
		padding-top: calc(var(--block-spacing) / 2);
		padding-bottom: calc(var(--block-spacing) / 2);
	}

	.lg\:has-padding--standard {
		padding-top: var(--block-spacing);
		padding-bottom: var(--block-spacing);
	}

	.lg\:has-padding--large {
		padding-top: var(--block-spacing--double);
		padding-bottom: var(--block-spacing--double);
	}

	/* Individual padding-top utilities */
	.lg\:has-padding-top--none {
		padding-top: 0;
	}

	.lg\:has-padding-top--half {
		padding-top: calc(var(--block-spacing) / 2);
	}

	.lg\:has-padding-top--standard {
		padding-top: var(--block-spacing);
	}

	.lg\:has-padding-top--large {
		padding-top: var(--block-spacing--double);
	}

	/* Individual padding-bottom utilities */
	.lg\:has-padding-bottom--none {
		padding-bottom: 0;
	}

	.lg\:has-padding-bottom--half {
		padding-bottom: calc(var(--block-spacing) / 2);
	}

	.lg\:has-padding-bottom--standard {
		padding-bottom: var(--block-spacing);
	}

	.lg\:has-padding-bottom--large {
		padding-bottom: var(--block-spacing--double);
	}

	.lg\:has-spacing--half {
		margin-bottom: calc(var(--block-spacing) / 2);
	}

	.lg\:has-spacing--standard {
		margin-bottom: var(--block-spacing);
	}

	.lg\:has-spacing--large {
		margin-bottom: var(--block-spacing--double);
	}
}

/* ==========================================================================
   FIRST BLOCK PADDING - Add padding when needed
   ========================================================================== */

.page-content div:nth-child(1) h1.first-gutenberg-block,
	.page-content div:nth-child(1) h2.first-gutenberg-block,
	.page-content div:nth-child(1) h3.first-gutenberg-block,
	.page-content div:nth-child(1) h4.first-gutenberg-block,
	.page-content div:nth-child(1) h5.first-gutenberg-block,
	.page-content div:nth-child(1) h6.first-gutenberg-block,
	.page-content div:nth-child(1) p.first-gutenberg-block {
		padding-top: var(--block-spacing);
	}

/* Remove padding-top from blocks that follow gutenberg-blocks-wrapper */

.page-content .gutenberg-blocks-wrapper + div,
.page-content .gutenberg-blocks-wrapper + section,
.page-content .gutenberg-blocks-wrapper + article {
	padding-top: 0 !important;
}

/* ==========================================================================
   BLOG/POST CONTENT SPACING
   ========================================================================== */

body.single-post #main {
	margin-top: calc(var(--block-spacing) * 1);
}

body.single-post .single-post__content > *,
body.single-post .single-post__content div > * {
	margin-bottom: calc(var(--block-spacing) / 2);
}

/* ==========================================================================
   Service Card
   ========================================================================== */

.card-service {
	padding-block: var(--space-s);
}

.card-service__title {
	margin: 0;
}

.card-service__title a {
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, color 0.2s ease;
	display: inline-block;
}

.card-service:hover .card-service__title a {
	transform: translateX(var(--space-2xs));
	color: var(--color-green);
}

.card-service__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	text-decoration: none;
	color: inherit;
	font-family: var(--font-albra-semi);
	transition: color 0.2s ease;
}

.card-service:hover {
	color: var(--color-green);
}

.card-service__link svg {
	width: 1.5em;
	height: 1.5em;
	transition: transform 0.2s ease;
}

.card-service:hover .card-service__link svg {
	/* transform: translateX(var(--space-3xs)); */
}

/* Separator line */

.services-list-block__separator {
	border: 0;
	height: 1px;
	background: currentColor;
	opacity: 0.2;
	margin: 0;
}

/* ==========================================================================
   Card Component
   ========================================================================== */

.card--post {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

.card__content {
	--flow-space: var(--space-2xs);
}

.card__title {
	font-size: var(--size-step-2);
	line-height: 1.3;
}

.card__title a {
	text-decoration: none;
	color: inherit;
}

.card__title a:hover {
	text-decoration: underline;
}

.card__excerpt {
	font-size: var(--size-step-00);
	/* color: var(--color-text-muted, inherit); */
	/* opacity: 0.8; */
}

/* Author meta
   ========================================================================== */

.meta-layout {
	display: flex;
	align-items:center;
	gap: 0.5rem;
   }

.meta-layout--author {
	display: flex;
	gap: 0.5rem;
	align-items: center;
   }

.card__meta {
	--cluster-space: var(--space-s);
	font-size: var(--size-step-00);
	margin-block-start: auto;
	padding-block-start: var(--space-xs);
}

.card__author {
	--cluster-space: var(--space-2xs);
	align-items: center;
}

.card__author-image {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	overflow: hidden;
}

.card__author-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card__author-name {
	/* font-weight: 500; */
}

.card__date {
	/* color: var(--color-text-muted, inherit); */
	/* opacity: 0.7; */
	/* height: 20px; */
	display: flex;
	align-items: center;
}

/* Resource ribbon
   ========================================================================== */

.card__media {
	position: relative;
	overflow: hidden;
}

.card__ribbon {
	position: absolute;
	/* top: 1rem;
	right: -2.5rem; */
	top: 4rem;
    right: -3.5rem;
	z-index: 1;
	padding: 0.25rem 3rem;
	font-size: var(--step--2);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-dark, #000);
	background-color: var(--color-lime, #c8fa5f);
	transform: rotate(45deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Filter Bar
   ========================================================================== */

.filter-bar {
	padding-block: var(--space-m);
	padding-bottom: var(--space-xl);
}

.filter-bar--inner-wrapper {
	max-width: var(--wrapper-max-width, 1200px);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.filter-bar--filter-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-s);
}

/* Hide the heading as per task requirement */

.filter-bar-heading {
	display: none;
}

/* Style filter buttons like pills */

.filter-bar .button,
.filter-bar a {
	background-color: #e6e8de;
	color: var(--color-dark);
	display: inline-block;
	font-size: var(--size-step-000);
	padding: var(--space-3xs) var(--space-s);
	text-decoration: none;
	font-family: var(--font-mono);
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.filter-bar .button:hover,
.filter-bar a:hover {
	background-color: var(--color-gold);
	color: var(--color-dark);
}

/* Current/active state */

.filter-bar .button.current,
.filter-bar a.current,
.filter-bar .button.is-current,
.filter-bar a.is-current {
	background-color: var(--color-gold);
	color: var(--color-dark);
}

/* On dark backgrounds */

.on-dark-bg .filter-bar .button,
.on-dark-bg .filter-bar a {
	background-color: #e6e8de;
	color: var(--color-dark);
	border-color: transparent;
}

.on-dark-bg .filter-bar .button:hover,
.on-dark-bg .filter-bar a:hover,
.on-dark-bg .filter-bar .button.current,
.on-dark-bg .filter-bar a.current,
.on-dark-bg .filter-bar .button.is-current,
.on-dark-bg .filter-bar a.is-current {
	background-color: var(--color-gold);
	color: var(--color-dark);
}

/* Center the list */

.filter-bar ul {
	justify-content: center;
}

/* ==========================================================================
   FORMINATOR FORM STYLING
   Comprehensive CSS with custom properties for easy customisation
   ========================================================================== */

/*
 * CUSTOMISATION GUIDE:
 * Update the custom properties in :root to match your brand.
 * All form elements use these properties for consistent styling.
 *
 * Example customisation:
 * :root {
 *   --form-font-family: var(--font-base);
 *   --form-field-bg: var(--color-light);
 *   --form-field-border-color: var(--color-green);
 * }
 */

:root {
	/* Typography */
	--form-font-family: var(--font-base);
	--form-font-size: var(--size-step-0);
	--form-label-font-size: var(--size-step--1);
	--form-label-font-weight: 400;

	/* Field styling */
	--form-field-bg: var(--color-light);
	--form-field-color: var(--color-dark);
	--form-field-border-color: transparent;
	--form-field-border-width: 0;
	--form-field-border-radius: var(--radius-m);
	--form-field-padding: 1em 1.25em;
	--form-field-focus-border-color: var(--color-green);
	--form-field-focus-shadow: 0 0 0 2px rgba(36, 83, 51, 0.2);

	/* Placeholder */
	--form-placeholder-color: var(--color-charcoal);
	--form-placeholder-opacity: 0.6;

	/* Labels */
	--form-label-color: var(--color-dark);
	--form-required-color: var(--color-green);

	/* Checkbox/Radio */
	--form-checkbox-size: 1.25em;
	--form-checkbox-border-width: 2px;
	--form-checkbox-border-color: var(--color-charcoal);
	--form-checkbox-checked-bg: var(--color-light-green);
	--form-checkbox-checked-color: var(--color-green);

	/* Error states */
	--form-error-color: #d32f2f;
	--form-error-bg: #ffeaea;
	--form-error-border-color: #d32f2f;

	/* Success states */
	--form-success-color: var(--color-green);
	--form-success-bg: #e8f5e9;

	/* Spacing */
	--form-row-gap: var(--space-m);
	--form-field-gap: var(--space-2xs);
}

/* ==========================================================================
   BASE FORM STYLING
   ========================================================================== */

.forminator-ui {
	font-family: var(--form-font-family);
	font-size: var(--form-font-size);
}

/* Form rows */

.forminator-ui .forminator-row {
	margin-bottom: var(--form-row-gap);
}

.forminator-ui .forminator-row:last-of-type {
	margin-bottom: 0;
}

/* ==========================================================================
   LABELS
   ========================================================================== */

.forminator-ui.forminator-custom-form .forminator-label {
	display: block !important;
	margin-bottom: var(--form-field-gap) !important;
	font-size: var(--form-label-font-size) !important;
	font-weight: var(--form-label-font-weight) !important;
	color: var(--form-label-color) !important;
}

.forminator-ui .forminator-required {
	color: var(--form-required-color);
	font-weight: 700;
}

/* Description text */

.forminator-ui .forminator-description {
	font-size: var(--size-step-00) !important;
	color: var(--form-placeholder-color);
	margin-top: var(--form-field-gap);
	padding-bottom: calc(var(--form-field-gap)*2);
	display: flex;
    flex-direction: column;
}

/* ==========================================================================
   INPUT FIELDS
   Uses !important to override Forminator's ID-based selectors
   ========================================================================== */

.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea {
	width: 100% !important;
	padding: var(--form-field-padding) !important;
	font-family: var(--form-font-family) !important;
	font-size: var(--form-font-size) !important;
	color: var(--form-field-color) !important;
	background-color: var(--form-field-bg) !important;
	border: none !important;
	border-radius: var(--form-field-border-radius) !important;
	transition: box-shadow 0.2s ease !important;
}

.forminator-ui.forminator-custom-form .forminator-select2 + .select2-container .select2-selection {
	background-color: var(--form-field-bg) !important;
	border: none !important;
	border-radius: var(--form-field-border-radius) !important;
}

/* Focus states */

.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus {
	outline: none !important;
	box-shadow: var(--form-field-focus-shadow) !important;
}

/* Placeholder styling */

.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-textarea::placeholder {
	color: var(--form-placeholder-color);
	opacity: var(--form-placeholder-opacity);
}

/* Textarea specific */

.forminator-ui .forminator-textarea {
	min-height: 140px;
	resize: vertical;
}

/* ==========================================================================
   SELECT / DROPDOWN (Select2)
   ========================================================================== */

.forminator-ui .select2-container .select2-selection {
	height: auto;
	min-height: calc(1em + var(--form-field-padding) * 2 + var(--form-field-border-width) * 2);
}

.forminator-ui .select2-container .select2-selection__rendered {
	padding: var(--form-field-padding);
	line-height: 1.5;
}

.forminator-ui .select2-container .select2-selection__arrow {
	height: 100%;
	right: 0.75em;
}

/* Dropdown menu */

.forminator-ui .select2-dropdown {
	border-color: var(--form-field-border-color);
	border-radius: var(--form-field-border-radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.forminator-ui .select2-results__option {
	padding: 0.5em 1em;
}

.forminator-ui .select2-results__option--highlighted {
	background-color: var(--color-light-green) !important;
	color: var(--color-dark) !important;
}

.forminator-ui .select2-results__option--selected {
	background-color: var(--color-green) !important;
	color: var(--color-light) !important;
}

/* ==========================================================================
   CHECKBOXES & RADIO BUTTONS
   ========================================================================== */

.forminator-ui .forminator-checkbox,
.forminator-ui .forminator-radio {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	cursor: pointer;
	margin-bottom: var(--form-field-gap);
}

.forminator-ui .forminator-checkbox:last-child,
.forminator-ui .forminator-radio:last-child {
	margin-bottom: 0;
}

/* Hide native checkbox/radio */

.forminator-ui .forminator-checkbox input,
.forminator-ui .forminator-radio input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Custom checkbox box */

.forminator-ui .forminator-checkbox-box,
.forminator-ui .forminator-radio-box {
	flex-shrink: 0;
	width: var(--form-checkbox-size);
	height: var(--form-checkbox-size);
	border: var(--form-checkbox-border-width) solid var(--form-checkbox-border-color);
	background-color: var(--form-field-bg);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.forminator-ui .forminator-checkbox-box {
	border-radius: var(--radius-xs);
}

.forminator-ui .forminator-radio-box {
	border-radius: 50%;
}

/* Checked state */

.forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box,
.forminator-ui .forminator-radio input:checked + .forminator-radio-box {
	background-color: var(--form-checkbox-checked-bg);
	border-color: var(--form-checkbox-checked-bg);
}

/* Checkmark */

.forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box::after {
	content: '';
	display: block;
	width: 0.4em;
	height: 0.7em;
	margin: 0.15em auto 0;
	border: solid var(--form-checkbox-checked-color);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Radio dot */

.forminator-ui .forminator-radio input:checked + .forminator-radio-box::after {
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	margin: 0.3em auto 0;
	background-color: var(--form-checkbox-checked-color);
	border-radius: 50%;
}

/* Focus state */

.forminator-ui .forminator-checkbox input:focus + .forminator-checkbox-box,
.forminator-ui .forminator-radio input:focus + .forminator-radio-box {
	box-shadow: var(--form-field-focus-shadow);
}

/* Label text */

.forminator-ui .forminator-checkbox-label,
.forminator-ui .forminator-radio-label {
	font-size: var(--form-font-size);
	line-height: 1.4;
	transition: font-weight 0.2s ease;
}

/* Bold label when checked */

.forminator-ui .forminator-checkbox.forminator-is_checked .forminator-checkbox-label,
.forminator-ui .forminator-radio.forminator-is_checked .forminator-radio-label {
	font-weight: 700;
}

/* ==========================================================================
   BUTTONS
   Override Forminator plugin's high-specificity selectors
   ========================================================================== */

.forminator-ui.forminator-custom-form .forminator-button,
.forminator-ui.forminator-custom-form .forminator-button-submit {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 1em 1.5em !important;
	font-family: var(--form-font-family) !important;
	font-size: var(--form-font-size) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	border: none !important;
	border-radius: var(--radius-m) !important;
	background-color: var(--color-green) !important;
	color: var(--color-light) !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.forminator-ui.forminator-custom-form .forminator-button:hover,
.forminator-ui.forminator-custom-form .forminator-button-submit:hover {
	background-color: var(--color-charcoal) !important;
}

.forminator-ui.forminator-custom-form .forminator-button:active,
.forminator-ui.forminator-custom-form .forminator-button-submit:active {
	transform: scale(0.98);
}

/* ==========================================================================
   ERROR STATES
   ========================================================================== */

.forminator-ui .forminator-has-error .forminator-input,
.forminator-ui .forminator-has-error .forminator-textarea {
	border-color: var(--form-error-border-color);
	background-color: var(--form-error-bg);
}

.forminator-ui .forminator-error-message {
	color: var(--form-error-color);
	font-size: var(--size-step--1);
	margin-top: var(--form-field-gap);
}

/* Response messages */

.forminator-ui .forminator-response-message {
	padding: var(--space-m);
	border-radius: var(--form-field-border-radius);
	margin-bottom: var(--form-row-gap);
	border: 1px solid var(--color-green);
}

.forminator-ui .forminator-response-message.forminator-error {
	background-color: var(--form-error-bg);
	color: var(--form-error-color);
	border: 1px solid var(--form-error-border-color);
}

.forminator-ui .forminator-response-message.forminator-success {
	background-color: var(--form-success-bg);
	color: var(--form-success-color);
	border: 1px solid var(--form-success-color);
}

/* ==========================================================================
   FORM GRID / COLUMNS
   ========================================================================== */

.forminator-ui .forminator-row .forminator-col {
	margin-bottom: var(--form-row-gap);
}

.forminator-ui .forminator-row .forminator-col:last-child {
	margin-bottom: 0;
}

/* Multi-column name fields */

.forminator-ui .forminator-row-no-margin {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
}

.forminator-ui .forminator-row-no-margin .forminator-col {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.forminator-ui .forminator-col-md-6 {
		flex: 1 1 calc(50% - var(--space-s) / 2);
	}
}

/* ==========================================================================
   ARIA-HIDDEN ELEMENTS
   Note: Don't hide all aria-hidden elements as checkbox/radio boxes need to be visible
   ========================================================================== */

/* Removed global aria-hidden rule - checkbox/radio boxes need to be visible */

/* ==========================================================================
   Newsletter Signup (sidebar/inline version)
   ========================================================================== */

.newsletter-signup {
	/* Component custom properties */
	--newsletter-bg: var(--color-charcoal);
	--newsletter-text: var(--color-light);
	--newsletter-heading: var(--color-gold);
	--newsletter-radius: var(--radius-xl);
	--newsletter-padding: var(--space-m);
	--newsletter-gap: var(--space-xs);

	/* Field styling */
	--newsletter-field-bg: var(--color-light);
	--newsletter-field-text: var(--color-dark);
	--newsletter-field-radius: var(--radius-pill);

	/* Button styling */
	--newsletter-btn-bg: var(--color-gold);
	--newsletter-btn-text: var(--color-dark);
	--newsletter-btn-radius: var(--radius-pill);
	--newsletter-btn-hover-bg: var(--color-light-gold);

	--flow-space: var(--space-s);
	background-color: var(--newsletter-bg);
	color: var(--newsletter-text);
	border-radius: var(--newsletter-radius);
	padding: var(--newsletter-padding);
}

.site-footer__newsletter.newsletter-signup {
	--newsletter-bg: #2a2929;
}

.newsletter-signup__heading {
	color: var(--newsletter-heading);
}

.newsletter-signup__copy {
	font-size: var(--size-step--1);
}

/* Override button styling within newsletter */

.newsletter-signup .forminator-ui.forminator-custom-form .forminator-button,
.newsletter-signup .button {
	background: var(--newsletter-btn-bg) !important;
	border: none !important;
	color: var(--newsletter-btn-text) !important;
	border-radius: var(--newsletter-btn-radius) !important;
}

.newsletter-signup .forminator-ui.forminator-custom-form .forminator-button:hover,
.newsletter-signup .button:hover {
	background: var(--newsletter-btn-hover-bg) !important;
	color: var(--newsletter-btn-text) !important;
}

/* Form field styling */

.newsletter-signup .forminator-ui.forminator-custom-form .forminator-input {
	background: var(--newsletter-field-bg) !important;
	color: var(--newsletter-field-text) !important;
	border-radius: var(--newsletter-field-radius) !important;
}

.newsletter-signup .forminator-ui.forminator-custom-form .forminator-label {
	color: var(--newsletter-text) !important;
}

/* Inline form layout - input and button side by side */

.newsletter-signup .forminator-ui.forminator-custom-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--newsletter-gap);
	align-items: flex-end;
}

.newsletter-signup .forminator-ui.forminator-custom-form .forminator-row {
	flex: 1 1 auto;
	margin-bottom: 15px !important;
}

.newsletter-signup .forminator-ui.forminator-custom-form .forminator-row-last {
	flex: 0 0 auto;
}

/* Hide label for inline layout (visually hidden but accessible) */

.newsletter-signup .forminator-ui.forminator-custom-form .forminator-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.forminator-error-message {
	font-size: var(--size-step-0) !important;
	margin: 1rem 0 !important;
	border-radius: var(--radius-m) !important;
}

/* 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;
}

/* ==========================================================================
   Single Case Study
   ========================================================================== */

body.single-case_study_cpt {
	background-color: var(--color-green);
}

.single-case-study__body {
	background-color: var(--color-light-green);
	color: var(--color-charcoal);
	padding-top: var(--space-xl);
}

/* Override .on-dark-bg heading styles - this section has its own colour scheme */

.single-case-study__body :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4) {
		color: var(--color-green);
	}

.single-case-study__body .single-case-study__content,
	.single-case-study__body .gutenberg-blocks-wrapper {
		padding: 0;
	}

.single-case-study__body .single-case-study__content *, .single-case-study__body .gutenberg-blocks-wrapper * {
			margin-bottom: var(--space-s);
		}

.single-case-study__body .single-case-study__content h1,.single-case-study__body .single-case-study__content h2,.single-case-study__body .single-case-study__content h3,.single-case-study__body .single-case-study__content h4,.single-case-study__body .single-case-study__content h5,.single-case-study__body .single-case-study__content h6,.single-case-study__body .gutenberg-blocks-wrapper h1,.single-case-study__body .gutenberg-blocks-wrapper h2,.single-case-study__body .gutenberg-blocks-wrapper h3,.single-case-study__body .gutenberg-blocks-wrapper h4,.single-case-study__body .gutenberg-blocks-wrapper h5,.single-case-study__body .gutenberg-blocks-wrapper h6 {
			margin-top: var(--space-l);
			margin-bottom: var(--space-xs);
		}

.single-case-study__body .single-case-study__content li, .single-case-study__body .gutenberg-blocks-wrapper li {
			margin-bottom: var(--space-xs);
		}

.single-case-study__body .single-case-study__content ul, .single-case-study__body .gutenberg-blocks-wrapper ul {
			margin-bottom: var(--space-m);
		}

.single-case-study__body .single-case-study__content .first-gutenberg-block, .single-case-study__body .gutenberg-blocks-wrapper .first-gutenberg-block {
			margin-top: 0;
		}

.single-case-study__stats {
	background-color: var(--color-light-green);
}

/* Header intro */

.single-case-study__intro {
	max-width: 50rem;
	margin-inline: auto;
}

.single-case-study__title {
	max-width: 20ch;
	margin-inline: auto;
}

.single-case-study__summary {
	opacity: 0.9;
}

/* Author */

.single-case-study__author {
	margin-top: var(--space-m);
}

.single-case-study__author-name {
	font-weight: var(--font-medium);
}

/* Full-bleed featured image */

.single-case-study__featured-image {
	width: 100%;
	/* max-height: 900px; */
	max-height: 70vh;
}

/* overflow: hidden; */

.single-case-study__featured-image * {
		/* max-height: 900px; */
		max-height: 70vh;
		object-fit: cover;
	}

/* .single-case-study__featured-image .aspect-ratio--16-9 { */

/* max-height: 70vh; */

/* } */

.single-case-study__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Content layout */

.single-case-study__layout {
	align-items: start;
}

/* Sidebar */

.single-case-study__sidebar {
	position: relative;
	/* Ensure grid item doesn't interfere with sticky */
	align-self: start;
}

/* .single-case-study__sidebar-inner {
	position: -webkit-sticky; 
	position: sticky;
	top: calc(var(--nav-height, 70px) + var(--space-m));
	align-self: flex-start; 
} */

/* 1. Ensure the sidebar doesn't stretch to full height */

.single-case-study__sidebar {
    position: -webkit-sticky; /* For Safari support */
    position: sticky;
    top: 20px;               /* Adjust this for your header height */
	top: calc(var(--nav-height, 70px));
    align-self: flex-start;  /* CRITICAL: prevents height stretching */
}

/* This allows the sticky element to "see" the viewport scroll */

html, body {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* If you were using overflow-x: hidden to prevent horizontal scrolling, 
   use 'clip' instead. It doesn't break sticky like 'hidden' does. */

html, body {
    overflow-x: clip; 
}

/* Hide sidebar on mobile */

@media (max-width: 1229px) {
	.hide-on-mobile {
		display: none;
	}
}

/* Testimonial section with background image */

.single-case-study__testimonial {
	position: relative;
}

.single-case-study__testimonial.has-bg-image {
	overflow: hidden;
}

.single-case-study__testimonial-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.single-case-study__testimonial-bg-img {
	width: 100%;
	height: 100%;
}

.single-case-study__testimonial.has-bg-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
}

.single-case-study__testimonial .wrapper {
	position: relative;
	z-index: 2;
}

/* Footer */

.single-case-study__footer {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dark background nav styling for single case study */

body.single-case_study_cpt .site-header-contact-button {
		color: var(--color-dark);
	}

body.single-case_study_cpt .nav-logo svg ellipse,
		body.single-case_study_cpt .nav-logo svg path {
			fill: var(--color-light) !important;
		}

body.single-case_study_cpt .site-main-menu {
		background-color: var(--color-light);
	}

body.single-case_study_cpt .site-main-menu a {
			color: var(--color-green);
		}

body.single-case_study_cpt .site-main-menu li.current-menu-item a,
		body.single-case_study_cpt .site-main-menu a:hover {
			background-color: #aec69c;
		}

body.single-case_study_cpt .site-header-bg {
		background: var(--color-green);
	}

body.single-case_study_cpt .hamburger {
		border-color: var(--color-light);
	}

body.single-case_study_cpt .hamburger--label {
		color: var(--color-light);
	}

body.single-case_study_cpt .hamburger.is-active .hamburger-inner,
	body.single-case_study_cpt .hamburger.is-active .hamburger-inner::before,
	body.single-case_study_cpt .hamburger.is-active .hamburger-inner::after,
	body.single-case_study_cpt .hamburger-inner,
	body.single-case_study_cpt .hamburger-inner::before,
	body.single-case_study_cpt .hamburger-inner::after {
		background-color: var(--color-light);
	}

body.single-case_study_cpt .site-overlay {
		background-color: var(--color-dark);
	}

.podcast-links__link svg {
		width: 40px;
		height: 40px;
	}

.single-case-study__next-header {
	margin-top: var(--space-l);
	margin-bottom: var(--space-l);
}

.single-case-study__nav {
	margin-top: var(--space-xl);
	/* margin-bottom: var(--space-s); */
}

.single-case-study__header {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-2xl);
}

/* ==========================================================================
   LEGAL TEMPLATE
   ========================================================================== */

/*  */

.page-template-template-legal {
	
}

/* ==========================================================================
   Single Blog Post
   ========================================================================== */

/* Header */

.single-post__title {
	font-size: var(--size-step-5);
	max-width: 20ch;
}

.single-resource__header-inner,
.single-post__header-inner {
	margin-bottom: var(--space-l);
	padding-bottom: var(--space-l);
}

.single-post__intro{
	margin-top: var(--space-l);
}

/* Author/Date meta */

.single-post__author-date {
	gap: var(--space-m);
}

.single-post__author {
	gap: var(--space-xs);
}

.single-post__author .tiny-circle-image {
	width: 3rem;
	height: 3rem;
}

.single-post__author-name {
	font-weight: var(--font-medium);
}

.single-post__author-image img {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
}

.single-post__separator {
	display: inline-block;
	width: 5px;
	height: 5px;
	background-color: currentColor;
	border-radius: 50%;
}

.single-post__date {
	/* color: var(--color-muted); */
	/* font-size: var(--size-step--1); */
}

/* Featured image */

.single-post__featured-image {
	overflow: hidden;
}

.single-post__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Content layout */

.single-post__layout {
	align-items: start;
}

.single-post__content .wrapper {
		padding: 0;
	}

/* Sidebar */

.single-post__sidebar {
	position: relative;
}

/* .single-post__sidebar-inner.sticky-sidebar {
	position: sticky;
	top: calc(var(--nav-height, 70px) + var(--space-m));
} */

/* Related posts */

.single-post__related {
	margin-top: 8rem;
	margin-bottom: 8rem;
}

.single-post__related-title {
	margin-bottom: var(--space-l);
}

/* Hide sidebar on mobile - reuse from single-case-study */

@media (max-width: 759px) {
	.single-post__sidebar.hide-on-mobile {
		display: none;
	}
}

/* ==========================================================================
   Single Resource
   ========================================================================== */

/* Header */

.single-resource__title {
	font-size: var(--size-step-4);
	max-width: 20ch;
}

.single-resource__summary {
	color: var(--color-muted);
}

.single-resource__date {
	color: var(--color-muted);
	font-size: var(--size-step--1);
}

/* Featured image */

.single-resource__featured-image {
	overflow: hidden;
}

.single-resource__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Content layout */

.single-resource__layout {
	align-items: start;
}

/* Download section */

.single-resource__download-section {
	margin-top: var(--space-xl);
}

.single-resource__download-heading {
	font-size: var(--size-step-1);
}

.single-resource__file-info {
	font-size: var(--size-step--1);
}

/* Related resources */

.single-resource__related-title {
	margin-bottom: var(--space-l);
}

/* Hide sidebar on mobile - reuse pattern */

@media (max-width: 759px) {
	.single-resource__sidebar.hide-on-mobile {
		display: none;
	}
}

.single-resource__download-section-wrapper {
	max-width: 1000px;
}

/* ==========================================================================
   Single Service Page
   ========================================================================== */

body.single-service_cpt {
	background-color: var(--color-light-gold);
   }

body.single-service_cpt p.first-gutenberg-block {
		font-size: var(--size-step-1);
	}

.single-service__icon {
	width: 3rem;
	height: 3rem;
}

.single-service__icon svg {
	width: 100%;
	height: 100%;
}

.single-service__other-services .services-list-block__list {
	max-width: 800px;
	margin-inline: auto;
}

.single-service__blog .card {
	background-color: var(--color-light);
}

/* ==========================================================================
   Table of Contents
   ========================================================================== */

.table-of-contents {
	display: none;
	padding: var(--space-m);
	background: var(--color-sage);
	border-radius: var(--radius-m);
	color: var(--color-dark);
}

@media (min-width: 1024px) {
	.table-of-contents {
		display: block;
	}
}

.table-of-contents__title {
	font-size: var(--size-step-0);
	margin-bottom: var(--space-s);
	color: var(--color-dark);
}

.table-of-contents__list {
	list-style: none;
	padding: 0;
	margin: 0;
	--flow-space: var(--space-2xs);
}

.table-of-contents__item {
	line-height: 1.3;
}

.table-of-contents__item--h3 {
	padding-left: var(--space-s);
}

.table-of-contents__link {
	font-size: var(--size-step--1);
	color: var(--color-dark);
	text-decoration: none;
	display: block;
	padding: var(--space-3xs) var(--space-2xs);
	border-radius: var(--radius-s);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.table-of-contents__link:hover {
	color: var(--color-green);
	background: var(--color-sage-dark);
}

/* Active state - applied via JS when section is in viewport */

.table-of-contents__link.is-active {
	background: var(--color-sage-dark);
	color: var(--color-green);
	/* font-weight: 600; */
}

/* ==========================================================================
   Legal Page Template
   ========================================================================== */

.page-template-page-templatestemplate-legal-php .wp-block-heading {
	margin-block-start: var(--space-xl);
}

/* First heading doesn't need top margin */

.page-template-page-templatestemplate-legal-php .page-content-container > .wp-block-heading:first-child {
	margin-block-start: 0;
}

/*
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;
}

.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;
	}

/* Object-fit utility classes */

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

.object-fit-contain {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

/* 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--5-7 	{ aspect-ratio: 5 / 7; }

.aspect-ratio--16-9 { aspect-ratio: 16 / 9; }

.aspect-ratio--21-9 { aspect-ratio: 21 / 9; }

/* Aspect ratio containers - ensure images fill and cover */

[class*="aspect-ratio--"] {
	overflow: hidden;
	background-color: var(--color-grey-light, #e5e5e5);
}

[class*="aspect-ratio--"] > img,
[class*="aspect-ratio--"] > picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Small breakpoint (330px+) */

@media (min-width: 330px) {
	.sm\:aspect-ratio--1-1 	{ aspect-ratio: 1 / 1; }
	.sm\:aspect-ratio--3-2 	{ aspect-ratio: 3 / 2; }
	.sm\:aspect-ratio--2-3 	{ aspect-ratio: 2 / 3; }
	.sm\:aspect-ratio--4-3 	{ aspect-ratio: 4 / 3; }
	.sm\:aspect-ratio--3-4 	{ aspect-ratio: 3 / 4; }
	.sm\:aspect-ratio--5-7 	{ aspect-ratio: 5 / 7; }
	.sm\:aspect-ratio--16-9 { aspect-ratio: 16 / 9; }
	.sm\:aspect-ratio--21-9 { aspect-ratio: 21 / 9; }
}

/* Medium breakpoint (760px+) */

@media (min-width: 760px) {
	.md\:aspect-ratio--1-1 	{ aspect-ratio: 1 / 1; }
	.md\:aspect-ratio--3-2 	{ aspect-ratio: 3 / 2; }
	.md\:aspect-ratio--2-3 	{ aspect-ratio: 2 / 3; }
	.md\:aspect-ratio--4-3 	{ aspect-ratio: 4 / 3; }
	.md\:aspect-ratio--3-4 	{ aspect-ratio: 3 / 4; }
	.md\:aspect-ratio--5-7 	{ aspect-ratio: 5 / 7; }
	.md\:aspect-ratio--16-9 { aspect-ratio: 16 / 9; }
	.md\:aspect-ratio--21-9 { aspect-ratio: 21 / 9; }
}

/* Large breakpoint (1230px+) */

@media (min-width: 1230px) {
	.lg\:aspect-ratio--1-1 	{ aspect-ratio: 1 / 1; }
	.lg\:aspect-ratio--3-2 	{ aspect-ratio: 3 / 2; }
	.lg\:aspect-ratio--2-3 	{ aspect-ratio: 2 / 3; }
	.lg\:aspect-ratio--4-3 	{ aspect-ratio: 4 / 3; }
	.lg\:aspect-ratio--3-4 	{ aspect-ratio: 3 / 4; }
	.lg\:aspect-ratio--5-7 	{ aspect-ratio: 5 / 7; }
	.lg\:aspect-ratio--16-9 { aspect-ratio: 16 / 9; }
	.lg\:aspect-ratio--21-9 { aspect-ratio: 21 / 9; }
}

/* ==========================================================================
   BORDER RADIUS UTILITY CLASSES
   ========================================================================== */

/*
 * Standard border radius utilities.
 * Uses consistent values for rounded corners across the project.
 *
 * Usage:
 *   <div class="radius-s">Small border radius</div>
 *   <div class="radius-pill">Fully rounded (pill shape)</div>
 */

:root {
	--radius-xs: 0.125rem;   /* 2px */
	--radius-s: 0.25rem;     /* 4px */
	--radius-m: 0.5rem;      /* 8px */
	--radius-l: 0.75rem;     /* 12px */
	--radius-xl: 3rem;       /* 16px */
	--radius-2xl: 6rem;    /* 24px */
	--radius-pill: 9999px;   /* Fully rounded */
}

.radius-none { border-radius: 0; }

.radius-xs   { border-radius: var(--radius-xs); }

.radius-s    { border-radius: var(--radius-s); }

.radius-m    { border-radius: var(--radius-m); }

.radius-l    { border-radius: var(--radius-l); }

.radius-xl   { border-radius: var(--radius-xl); }

.radius-2xl  { border-radius: var(--radius-2xl); }

.radius-pill { border-radius: var(--radius-pill); }

.radius-full { border-radius: 50%; }

/* ==========================================================================
   BORDER UTILITY CLASSES
   ========================================================================== */

/*
 * Decorative border utilities for layout accents.
 * Uses brand green colour for visual hierarchy.
 *
 * Usage:
 *   <div class="border-l">Content with left border accent</div>
 */

:root {
	--border-accent-width: 4px;
	--border-accent-color: var(--color-green);
}

.border-l {
	border-left: var(--border-accent-width) solid var(--border-accent-color);
	padding-left: var(--space-m);
}

.border-r {
	border-right: var(--border-accent-width) solid var(--border-accent-color);
	padding-right: var(--space-m);
}

.border-t {
	border-top: var(--border-accent-width) solid var(--border-accent-color);
	padding-top: var(--space-m);
}

.border-b {
	border-bottom: var(--border-accent-width) solid var(--border-accent-color);
	padding-bottom: var(--space-m);
}

/* 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%; }

/* 
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 */

/* } */

/* ==========================================================================
   PADDING UTILITY CLASSES
   ========================================================================== */

/*
 * Standard padding utilities using design token spacing values.
 * Uses CSS custom properties for consistent spacing across the project.
 *
 * Usage:
 *   <div class="p-s">Small padding all around</div>
 *   <div class="px-m py-l">Medium horizontal, large vertical</div>
 */

/* All sides */

.p-3xs { padding: var(--space-3xs); }

.p-2xs { padding: var(--space-2xs); }

.p-xs  { padding: var(--space-xs); }

.p-s   { padding: var(--space-s); }

.p-m   { padding: var(--space-m); }

.p-l   { padding: var(--space-l); }

.p-xl  { padding: var(--space-xl); }

.p-2xl { padding: var(--space-2xl); }

.p-3xl { padding: var(--space-3xl); }

/* Horizontal (left and right) */

.px-3xs { padding-inline: var(--space-3xs); }

.px-2xs { padding-inline: var(--space-2xs); }

.px-xs  { padding-inline: var(--space-xs); }

.px-s   { padding-inline: var(--space-s); }

.px-m   { padding-inline: var(--space-m); }

.px-l   { padding-inline: var(--space-l); }

.px-xl  { padding-inline: var(--space-xl); }

.px-2xl { padding-inline: var(--space-2xl); }

.px-3xl { padding-inline: var(--space-3xl); }

/* Vertical (top and bottom) */

.py-3xs { padding-block: var(--space-3xs); }

.py-2xs { padding-block: var(--space-2xs); }

.py-xs  { padding-block: var(--space-xs); }

.py-s   { padding-block: var(--space-s); }

.py-m   { padding-block: var(--space-m); }

.py-l   { padding-block: var(--space-l); }

.py-xl  { padding-block: var(--space-xl); }

.py-2xl { padding-block: var(--space-2xl); }

.py-3xl { padding-block: var(--space-3xl); }

/* Top */

.pt-3xs { padding-block-start: var(--space-3xs); }

.pt-2xs { padding-block-start: var(--space-2xs); }

.pt-xs  { padding-block-start: var(--space-xs); }

.pt-s   { padding-block-start: var(--space-s); }

.pt-m   { padding-block-start: var(--space-m); }

.pt-l   { padding-block-start: var(--space-l); }

.pt-xl  { padding-block-start: var(--space-xl); }

.pt-2xl { padding-block-start: var(--space-2xl); }

.pt-3xl { padding-block-start: var(--space-3xl); }

/* Bottom */

.pb-3xs { padding-block-end: var(--space-3xs); }

.pb-2xs { padding-block-end: var(--space-2xs); }

.pb-xs  { padding-block-end: var(--space-xs); }

.pb-s   { padding-block-end: var(--space-s); }

.pb-m   { padding-block-end: var(--space-m); }

.pb-l   { padding-block-end: var(--space-l); }

.pb-xl  { padding-block-end: var(--space-xl); }

.pb-2xl { padding-block-end: var(--space-2xl); }

.pb-3xl { padding-block-end: var(--space-3xl); }

/* Left */

.pl-3xs { padding-inline-start: var(--space-3xs); }

.pl-2xs { padding-inline-start: var(--space-2xs); }

.pl-xs  { padding-inline-start: var(--space-xs); }

.pl-s   { padding-inline-start: var(--space-s); }

.pl-m   { padding-inline-start: var(--space-m); }

.pl-l   { padding-inline-start: var(--space-l); }

.pl-xl  { padding-inline-start: var(--space-xl); }

.pl-2xl { padding-inline-start: var(--space-2xl); }

.pl-3xl { padding-inline-start: var(--space-3xl); }

/* Right */

.pr-3xs { padding-inline-end: var(--space-3xs); }

.pr-2xs { padding-inline-end: var(--space-2xs); }

.pr-xs  { padding-inline-end: var(--space-xs); }

.pr-s   { padding-inline-end: var(--space-s); }

.pr-m   { padding-inline-end: var(--space-m); }

.pr-l   { padding-inline-end: var(--space-l); }

.pr-xl  { padding-inline-end: var(--space-xl); }

.pr-2xl { padding-inline-end: var(--space-2xl); }

.pr-3xl { padding-inline-end: var(--space-3xl); }

/* 
REGION UTILITY
Consistent block padding for page sections
*/

/* .region { */

/* padding-block: var(--region-space, var(--space-xl-2xl)); */

/* } */

/* ==========================================================================
   CLIP-PATH BRAND SHAPES UTILITY
   ========================================================================== */

/*
 * Brand shape masking utilities using CSS clip-path.
 * Requires brand-shapes-clippath.php SVG sprite to be included in footer.
 *
 * Usage:
 *   <div class="u-clip-shape-brand">
 *     <img src="..." />
 *   </div>
 *
 * Works with: images, slideshows, video embeds, and any block-level content
 */

/* Brand shape: TPC logo shape */

.u-clip-shape-brand {
	clip-path: url(#clip-shape-brand);
	overflow: hidden;
}

.width-10ch {  max-width: 10ch; }

.width-12ch {  max-width: 12ch; }

.width-15ch {  max-width: 15ch; }

.width-18ch {  max-width: 18ch; }

.width-20ch {  max-width: 20ch; }

.width-25ch {  max-width: 25ch; }

.width-30ch {  max-width: 30ch; }

.width-40ch {  max-width: 40ch; }

.width-45ch {  max-width: 45ch; }

.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: 2.5rem;
    height: 2.5rem;
    
}

.small-circle-image {
    width: 4rem;
    height: 4rem;
    
}

.small-circle-image img,
.small-circle-image picture,
.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;
}

/**
 * CONTAINED VIDEO COVER
 * For videos within a defined container (not full viewport)
 * Uses percentage-based sizing relative to parent container.
 *
 * Usage:
 *   <div class="video-cover video-cover--contained aspect-ratio--1-1">
 *     <iframe class="video-cover__content" src="..."></iframe>
 *   </div>
 */

.video-cover--contained .video-cover__content {
	/* Override viewport-based sizing with container-relative sizing */
	/* For 16:9 video in 1:1 container: video needs to be wider to cover */
	width: 177.78%;  /* 16/9 × 100% - ensures width covers in square container */
	height: 100%;
	min-width: 100%;
	min-height: 100%;
}

/* Contained 1:1 video in 1:1 container - exact fit */

.video-cover--contained.aspect-ratio--1-1 .video-cover__content--1-1 {
	width: 100%;
	height: 100%;
}

/* Contained 16:9 video in portrait container */

.video-cover--contained .video-cover__content--portrait {
	width: 100%;
	height: 177.78%;  /* 16/9 × 100% */
}

/**
 * VIDEO COVER - MATCHED ASPECT RATIO
 * For when video and container have the same aspect ratio (e.g., 16:9 video in 16:9 container)
 * No transform centering needed - simple fill
 */

.video-cover--matched .video-cover__content {
	position: absolute;
	top: 0;
	left: 0;
	transform: none;
	width: 100%;
	height: 100%;
	min-width: unset;
	min-height: unset;
}

/**
 * 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;
}

/* ==========================================================================
   VISIBILITY UTILITY CLASSES
   ========================================================================== */

/*
 * Responsive visibility utilities for showing/hiding content at breakpoints.
 * Based on viewport tokens: sm (330px), md (760px), lg (1080px), xl (1440px)
 *
 * Usage:
 *   <div class="large-viewports--only">Visible on desktop only (760px+)</div>
 *   <div class="x-large-viewports--only">Visible on large desktop only (1080px+)</div>
 *   <div class="small-viewports--only">Visible on mobile only</div>
 *   <div class="hide-on-mobile">Hidden on mobile</div>
 *   <div class="hide-on-desktop">Hidden on desktop</div>
 */

/* Show only on large viewports (760px+) */

.large-viewports--only {
	display: none !important;
}

@media (min-width: 760px) {
	.large-viewports--only {
		display: block !important;
	}

	/* Support flex containers */
	.large-viewports--only.cluster,
	.large-viewports--only.flex,
	.large-viewports--only[class*="flex"] {
		display: flex !important;
	}

	/* Support grid containers */
	.large-viewports--only.grid {
		display: grid !important;
	}

	/* Support inline elements */
	.large-viewports--only.inline,
	.large-viewports--only[class*="inline"] {
		display: inline !important;
	}

	.large-viewports--only.inline-block {
		display: inline-block !important;
	}

	.large-viewports--only.inline-flex {
		display: inline-flex !important;
	}
}

/* Show only on x-large viewports (1080px+) */

.x-large-viewports--only {
	display: none !important;
}

@media (min-width: 1080px) {
	.x-large-viewports--only {
		display: block !important;
	}

	/* Support flex containers */
	.x-large-viewports--only.cluster,
	.x-large-viewports--only.flex,
	.x-large-viewports--only[class*="flex"] {
		display: flex !important;
	}

	/* Support grid containers */
	.x-large-viewports--only.grid {
		display: grid !important;
	}

	/* Support inline elements */
	.x-large-viewports--only.inline,
	.x-large-viewports--only[class*="inline"] {
		display: inline !important;
	}

	.x-large-viewports--only.inline-block {
		display: inline-block !important;
	}

	.x-large-viewports--only.inline-flex {
		display: inline-flex !important;
	}
}

/* Hide on x-large viewports (1080px+) */

@media (min-width: 1080px) {
	.hide-on-x-large {
		display: none !important;
	}
}

/* Show only on small viewports (below 760px) */

.small-viewports--only {
	display: block !important;
}

/* Support flex containers on small viewports */

.small-viewports--only.cluster,
.small-viewports--only.flex,
.small-viewports--only[class*="flex"] {
	display: flex !important;
}

/* Support grid containers on small viewports */

.small-viewports--only.grid {
	display: grid !important;
}

@media (min-width: 760px) {
	.small-viewports--only {
		display: none !important;
	}
}

/* Hide on mobile (below 760px) */

.hide-on-mobile {
	display: none !important;
}

@media (min-width: 760px) {
	.hide-on-mobile {
		display: block !important;
	}

	.hide-on-mobile.cluster,
	.hide-on-mobile.flex {
		display: flex !important;
	}

	.hide-on-mobile.grid {
		display: grid !important;
	}

	.hide-on-mobile.inline {
		display: inline !important;
	}

	.hide-on-mobile.inline-block {
		display: inline-block !important;
	}
}

/* Hide on desktop (760px+) */

@media (min-width: 760px) {
	.hide-on-desktop {
		display: none !important;
	}
}

/* 
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-tablet {
  display: none;
}

@media (min-width: 1230px) {

.hide-on-tablet {
    display: unset
}
  }

@media (min-width: 760px) {

.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)));
	}
}

.fixed{
  position: fixed;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.col-span-12{
  grid-column: span 12 / span 12;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-2xl{
  margin-top: clamp(4.5rem, 3.95rem + 2.67vw, 6rem);
  margin-bottom: clamp(4.5rem, 3.95rem + 2.67vw, 6rem);
}

.my-l{
  margin-top: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
  margin-bottom: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.my-s{
  margin-top: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
  margin-bottom: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
}

.my-xl{
  margin-top: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
  margin-bottom: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.mb-l{
  margin-bottom: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.mb-s{
  margin-bottom: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
}

.mb-xl{
  margin-bottom: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.mb-xs{
  margin-bottom: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
}

.mt-m{
  margin-top: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
}

.mt-s{
  margin-top: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
}

.mt-xl{
  margin-top: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.block{
  display: block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.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));
}

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

.flex-wrap{
  flex-wrap: wrap;
}

.content-center{
  align-content: center;
}

.items-start{
  align-items: flex-start;
}

.items-center{
  align-items: center;
}

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

.gap-l{
  gap: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.gap-m{
  gap: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
}

.gap-s{
  gap: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
}

.gap-xl{
  gap: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.gap-xs{
  gap: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
}

.overflow-hidden{
  overflow: hidden;
}

.rounded{
  border-radius: 0.25rem;
}

.bg-charcoal{
  background-color: #333333;
}

.bg-dark{
  background-color: #030303;
}

.bg-gold{
  background-color: #E6D9B6;
}

.bg-green{
  background-color: #245333;
}

.bg-light{
  background-color: #ffffff;
}

.bg-light-gold{
  background-color: #F9F4E6;
}

.bg-light-green{
  background-color: #F3F4EE;
}

.bg-lime{
  background-color: #C8F88A;
}

.bg-sage{
  background-color: #eef0e2;
}

.bg-sage-dark{
  background-color: #aec69c;
}

.object-cover{
  object-fit: cover;
}

.p-l{
  padding: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.p-m{
  padding: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
}

.p-s-m{
  padding: clamp(1.125rem, 0.71rem + 2.00vw, 2.25rem);
}

.py-l{
  padding-top: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
  padding-bottom: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.py-xl{
  padding-top: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
  padding-bottom: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.pb-l{
  padding-bottom: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.pb-xl{
  padding-bottom: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.pr-l{
  padding-right: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.pt-xl{
  padding-top: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.text-center{
  text-align: center;
}

.font-base{
  font-family: Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.font-polymath{
  font-family: polymath-display, Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.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: #030303;
}

.bg-light{
  background-color: #ffffff;
}

.bg-gold{
  background-color: #E6D9B6;
}

.bg-light-gold{
  background-color: #F9F4E6;
}

.bg-lime{
  background-color: #C8F88A;
}

.bg-green{
  background-color: #245333;
}

.bg-charcoal{
  background-color: #333333;
}

.bg-light-green{
  background-color: #F3F4EE;
}

.bg-sage{
  background-color: #eef0e2;
}

.bg-sage-dark{
  background-color: #aec69c;
}

.color-dark{
  color: #030303;
}

.color-light{
  color: #ffffff;
}

.color-gold{
  color: #E6D9B6;
}

.color-light-gold{
  color: #F9F4E6;
}

.color-lime{
  color: #C8F88A;
}

.color-green{
  color: #245333;
}

.color-charcoal{
  color: #333333;
}

.color-light-green{
  color: #F3F4EE;
}

.color-sage{
  color: #eef0e2;
}

.color-sage-dark{
  color: #aec69c;
}

/* Debug styles - only in development */

/* @import '../css-utils/debug.css'; */

/* @import '../css-utils/a11y-check.css'; */

@media (min-width: 760px){

  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .md\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .md\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .md\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .md\:col-start-2{
    grid-column-start: 2;
  }

  .md\:col-start-7{
    grid-column-start: 7;
  }

  .md\:flex{
    display: flex;
  }

  .md\:grid{
    display: grid;
  }

  .md\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, 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-span-4{
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8{
    grid-column: span 8 / span 8;
  }

  .lg\:col-start-2{
    grid-column-start: 2;
  }

  .lg\:col-start-3{
    grid-column-start: 3;
  }

  .lg\:mx-xl{
    margin-left: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
    margin-right: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
  }

  .lg\:grid{
    display: grid;
  }

  .lg\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}