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

.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;*/
    word-wrap: break-word;
}

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

/* @font-face here */

/* @font-face here */

/* @font-face {
    font-family: 'Tiempos Headline';
    src: url('../fonts/tiempos-light-italic/TiemposHln-LightItalic.woff2') format('woff2'),
         url('../fonts/tiempos-light-italic/TiemposHln-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik Regular';
    src: url('../fonts/aeonik-regular/Aeonik-Regular.eot'); 
    src: url('../fonts/aeonik-regular/Aeonik-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/aeonik-regular/Aeonik-Regular.woff2') format('woff2'),
        url('../fonts/aeonik-regular/Aeonik-Regular.woff') format('woff'),
        url('../fonts/aeonik-regular/Aeonik-Regular.ttf') format('truetype'),
        url('../fonts/aeonik-regular/Aeonik-Regular.svg#Aeonik-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} */

/* em {
    font-family: 'Tiempos Headline';
} */

/* Font Sizes / Classes
   These now use the fluid type-scale custom properties generated from
   src/design-tokens/text-sizes.json (the Utopia "Step" scale, emitted as
   --size-step-* on :root by tailwind.config.js). One fluid clamp per level
   means text scales smoothly between the min/max viewports instead of
   jumping at a single breakpoint — the large-screen sizes are preserved
   (each step's max ≈ the previous desktop value). */

.h1 {
    font-size: var(--size-step-4);
    line-height: 1.1;
    font-weight: 400;
}

.h2 {
    font-size: var(--size-step-3);
    line-height: 1.15;
    font-weight: 400;
}

.h3, h3.h3 {
    font-size: var(--size-step-2);
    line-height: 1.2;
    font-weight: 400;
}

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

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

.h6 {
    font-size: var(--size-step-00);
    line-height: 1.3;
}

/* Responsive heading size utilities — mirror `.h1`…`.h6` at Tailwind's
   `md` breakpoint (760px, see src/design-tokens/viewports.json). Lets
   templates write e.g. `class="h3 md:h1"` for a heading that's h3 on
   small screens and h1 from md up. Colon in the class name is escaped
   with a backslash so it selects the literal `md:h1` attribute value. */

@media (min-width: 760px) {
    .md\:h1 {
        font-size: var(--size-step-4);
        line-height: 1.1;
        font-weight: 400;
    }

    .md\:h2 {
        font-size: var(--size-step-3);
        line-height: 1.15;
        font-weight: 400;
    }

    .md\:h3 {
        font-size: var(--size-step-2);
        line-height: 1.2;
        font-weight: 400;
    }

    .md\:h4 {
        font-size: var(--size-step-1);
        line-height: 1.2;
    }

    .md\:h5 {
        font-size: var(--size-step-0);
        line-height: 1.3;
    }

    .md\:h6 {
        font-size: var(--size-step-00);
        line-height: 1.3;
    }
}

.preheader {
    font-size: var(--size-step-00);
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.body-large {
    font-size: var(--size-lg);
    line-height: 1.35;
    letter-spacing: -0.01em;
    font-weight: 400;
}

.body-medium {
    font-size: var(--size-md);
    line-height: 1.45;
    font-weight: 400;
}

.body-small {
    font-size: var(--size-sm);
    line-height: 1.4;
    font-weight: 400;
}

.body-smallest {
    font-size: var(--size-xs);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 400;
}

.tag {
    font-size: 10px;
    line-height: 11px;
    text-transform: uppercase;
}

.tag--border {
    border: 1px solid var(--color-mild-steel);
    border-radius: 50px;
    padding: 6px;
    min-width: 30px;
    display: inline-block;
    text-align: center;
    font-weight: 400;
}

.mt-\[0rem\] > p {
    margin-top: 0rem;
}

:root{
  --color-initial: initial;
  --color-dark: #13140d;
  --color-off-black: #13140d;
  --color-light: #f4f3e7;
  --color-off-white: #f4f3e7;
  --color-white: #ffffff;
  --color-pink: #d4145a;
  --color-badass: #bada55;
  --color-primary: #e6e86b;
  --color-butter: #e6e86b;
  --color-coral: #d8503d;
  --color-denim-teal: #2a6a7a;
  --color-gold: #b3994a;
  --color-light-grey: #e7e7e7;
  --space-zero: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem);
  --space-3xs: clamp(0.3125rem, 0.29rem + 0.11vw, 0.375rem);
  --space-2xs: clamp(0.5625rem, 0.49rem + 0.33vw, 0.75rem);
  --space-xs: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
  --space-s: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
  --space-m: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
  --space-l: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
  --space-xl: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
  --space-2xl: clamp(4.5rem, 3.95rem + 2.67vw, 6rem);
  --space-3xl: clamp(6.75rem, 5.92rem + 4.00vw, 9rem);
  --space-4xl: clamp(9rem, 7.90rem + 5.33vw, 12rem);
  --space-3xs-2xs: clamp(0.3125rem, 0.15rem + 0.78vw, 0.75rem);
  --space-2xs-xs: clamp(0.5625rem, 0.36rem + 1.00vw, 1.125rem);
  --space-xs-s: clamp(0.875rem, 0.65rem + 1.11vw, 1.5rem);
  --space-s-m: clamp(1.125rem, 0.71rem + 2.00vw, 2.25rem);
  --space-m-l: clamp(1.6875rem, 1.21rem + 2.33vw, 3rem);
  --space-l-xl: clamp(2.25rem, 1.42rem + 4.00vw, 4.5rem);
  --space-xl-2xl: clamp(3.375rem, 2.41rem + 4.67vw, 6rem);
  --space-2xl-3xl: clamp(4.5rem, 2.85rem + 8.00vw, 9rem);
  --space-3xl-4xl: clamp(6.75rem, 4.83rem + 9.33vw, 12rem);
  --space-s-l: clamp(1.125rem, 0.44rem + 3.33vw, 3rem);
  --space-s-xl: clamp(1.125rem, -0.11rem + 6.00vw, 4.5rem);
  --size-step-00: clamp(0.9375rem, 0.91rem + 0.11vw, 1rem);
  --size-step-0: clamp(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.44125rem, 2.22rem + 1.09vw, 3.051875rem);
  --size-step-5: clamp(2.799375rem, 2.43rem + 1.81vw, 3.815rem);
  --size-xs: 0.75rem;
  --size-sm: 1rem;
  --size-md: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --size-lg: clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem);
  --size-xl: clamp(1.5rem, 1.32rem + 0.89vw, 2rem);
  --size-2xl: clamp(2rem, 1.63rem + 1.78vw, 3rem);
  --size-3xl: clamp(2.5rem, 1.95rem + 2.67vw, 4rem);
  --size-4xl: clamp(3rem, 1.90rem + 5.33vw, 6rem);
  --leading-flat: 1;
  --leading-fine: 1.15;
  --leading-standard: 1.3;
  --leading-large: 1.5;
  --leading-loose: 1.7;
  --leading-xs: 1rem;
  --leading-sm: 1.5rem;
  --leading-md: 2rem;
  --leading-lg: 2.5rem;
  --leading-xl: clamp(3rem, 2.82rem + 0.89vw, 3.5rem);
  --leading-2xl: clamp(3.5rem, 3.13rem + 1.78vw, 4.5rem);
  --font-base: Questrial,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-heading: Space Grotesk,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-headline: Space Grotesk,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-body: Questrial,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-link: Questrial,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-hairline: Questrial,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-title: Space Grotesk,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-serif: Space Grotesk,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  --font-extra-bold: 800;
  --gutter: var(--space-2xs-xs);  /* --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);

  --nav-height: 104px; /* change */
  --double-nav-height: 208px; /* 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 );

  --hamburger-width: 35px;
  --hamburger-height: 24px;
}

/* 
  Global styles 

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

body {
    color: var(--color-dark);
    font-size: var(--size-step-0);
    font-family: var(--font-base);
    line-height: var(--leading-standard);
    -webkit-font-smoothing: antialiased;
}

/* Site header + headings use the display font (Space Grotesk). Body copy,
   preheaders, captions etc. inherit Questrial from <body>. */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.site-header {
    font-family: var(--font-heading);
    font-weight: 400;
}

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

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

.wp-block-list {
    list-style: disc;
    margin-left: 1rem;
}

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

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

.pswp__container {
	padding: 1rem;
}

/* 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: 100%;
  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 {
  height: var(--hamburger-height);
  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;
  overflow: visible; }

.hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: var(--hamburger-width);
  height: var(--hamburger-height);
  display: inline-block;
  position: relative; }

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

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: var(--hamburger-width);
    height: 3px;
    background-color: #000;
    border-radius: 0;
    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: -10px; }

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

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

/* Off-canvas element CSS */

.offside {
    position: fixed; /* Does not play well with some old browsers (see: README) */
    width: var(--offside-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--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 {
        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;
}

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

.swiper-container {
    height: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5vw;
}

.swiper-slide[data-slide-index="1"] {
    background: pink;
}

.swiper-slide[data-slide-index="2"] {
    background: lightblue;
}

.swiper-slide[data-slide-index="3"] {
    background: gold;
}

.swiper-controls button {
    z-index: 100;
    position: absolute;
    top: 40px;
}

.swiper-start {
    left: 40px;
}

.swiper-stop {
    left: 100px;
}

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

/* Archive pagination — yellow circular prev/next buttons at the ends,
   plain page numbers in the middle, current page wrapped in an outlined
   circle. */

.archive-post-nav {
  margin: var(--flow-space--double, 3rem) auto;
}

.archive-post-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-archive {
  margin-bottom: 4rem;
}

.archive-post-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Numbers & dots — plain text, no underline. */

.archive-post-nav__list a,
.archive-post-nav__list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  color: var(--color-dark);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Page number hover — match the current-page style: 2rem circle with
   1px border, no background. Prev / next (yellow circles) and dots keep
   their own styles via the more specific rules below. */

a.page-numbers:not(.prev):not(.next):hover,
a.page-numbers:not(.prev):not(.next):focus-visible {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-dark);
  border-radius: 50%;
  background-color: transparent;
}

/* Current page — outlined circle around the number. Direct-child only
   so it can't reach into the arrow span inside prev/next items. */

.archive-post-nav__item--current > span,
.archive-post-nav__item--current > a {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-dark);
  border-radius: 50%;
  padding: 0;
}

/* Dots ("…") — non-interactive, no hover. */

.archive-post-nav__item--dots span {
  background-color: transparent;
  pointer-events: none;
}

/* Prev / next — yellow circles with arrow svg inside, no border. */

.archive-post-nav__item--prev a,
.archive-post-nav__item--next a {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-dark);
}

.archive-post-nav__item--prev a:hover,
.archive-post-nav__item--prev a:focus-visible,
.archive-post-nav__item--next a:hover,
.archive-post-nav__item--next a:focus-visible {
  background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark));
}

.archive-post-nav__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.archive-post-nav__arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

.accordion {
  position: relative;
  background: transparent;
  border: none;
  margin-top: 0;
  cursor: pointer;
  padding: 15px 25px;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  border-top: 1px solid get-color('primary-light');
  display: flex;
  justify-content: space-between;
  align-content: center;
  gap: 0.5rem;

  /* &.active svg {
    transform: rotateZ(45deg);
  } */
}

.accordion:last-of-type {
    border-bottom: none;
  }

.accordion .accordion--title {
    display: initial;
    margin: 0;
  }

.accordion .accordion--title p,
    .accordion .accordion--title h1,
    .accordion .accordion--title h2,
    .accordion .accordion--title h3,
    .accordion .accordion--title h4,
    .accordion .accordion--title h5,
    .accordion .accordion--title h6 {
      margin-bottom: 0;
      margin-top: 0;
      padding-top: 6px;
    }

.accordion p {
    max-width: 100%;
  }

.accordion .accordion-icon--open {
    display: flex;
    align-items: center;
    justify-content: center;
  }

.accordion .accordion-icon--close {
    display: none;
  }

.accordion.active .accordion-icon--open {
      display: none;
    }

.accordion.active .accordion-icon--close {
      display: block;
      display: flex;
      align-items: center;
      justify-content: center;
    }

.accordion svg {
    transition: 0.3s;
  }

.accordion-wrapper {
  border-top: 1px solid get-color(secondary);
}

.accordion-wrapper:last-of-type {
    border-bottom: 1px solid get-color(secondary);
  }

/* Style the accordion panel. Note: hidden by default */

.panel {
  padding: 0 25px;
  max-height: 0;
  //overflow: hidden;
  overflow: scroll;
  transition: max-height 0.2s ease-out;
  @extend .font-small-medium;
}

.panel:last-of-type {
    border-bottom: 1px solid get-color('primary-light');
  }

.panel ul,
  .panel ol {
    padding-left: 1rem;
  }

.panel li {
    margin-bottom: 1rem;
  }

.panel .accordion--content {
    margin: 0;
    max-width: 100%;
  }

.panel p {
    max-width: 100%;
    margin-right: 2rem;
    @extend .font-small-medium;
  }

/* Hide scrollbar for Chrome, Safari and Opera */

.accordion-content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */

.accordion-content {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Contact Form block — see template-parts/blocks/contact-form/contact-form.php
   • Top: media (left) + preheader/title/form (right).
   • Bottom: email/phone (left) + address/socials (right). */

.contact-form-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* ── Top: media + form ───────────────────────────────────────────── */

.contact-form-block__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: start;
}

@media (min-width: 900px) {
    .contact-form-block__top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-xl);
    }
}

.contact-form-block__media {
    border-radius: var(--radius-card, 16px);
    overflow: hidden;
}

.contact-form-block__media img,
.contact-form-block__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 5;
}

.contact-form-block__content {
    max-width: 36rem;
}

.contact-form-block__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--size-2xl);
    line-height: 1.1;
    font-weight: 400;
}

.contact-form-block__form {
    margin-top: var(--space-m);
}

/* ── Forminator overrides ────────────────────────────────────────
   Scoped to this block. Selectors chain .forminator-ui.forminator-custom-form[data-design=default]
   to beat Forminator's own default stylesheet (0,0,4,0 specificity). */

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-row {
    margin-bottom: var(--space-2xs);
}

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-row:last-of-type {
    margin-bottom: 0;
}

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-field {
    padding-bottom: 0;
    margin-bottom: 0;
}

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-label {
    font-weight: 400 !important;
    font-size: 15px;
    color: var(--color-dark);
    margin-bottom: 0.25rem;
    text-transform: none;
    letter-spacing: normal;
}

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-description {
    display: none;
}

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-input,
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-textarea,
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] input[type='text'],
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] input[type='email'],
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] input[type='tel'],
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] input[type='url'],
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] input[type='number'],
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] textarea {
    background-color: transparent;
    border: 1px solid var(--color-dark);
    border-radius: 8px;
    color: var(--color-dark);
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: var(--size-step-0);
    box-shadow: none;
    transition: border-color 0.2s ease;
}

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-input:focus,
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-textarea:focus,
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] textarea,
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Consent field: hide only the outer .forminator-label wrapper.
   Keep .forminator-checkbox__label / .forminator-consent__label visible so the
   inline consent copy still shows next to the tick box. */

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-field-consent .forminator-col.forminator-col-12 > .forminator-label {
    display: none;
}

/* Checkbox visual: transparent bg, rounded. */

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-checkbox .forminator-checkbox-box {
    background-color: transparent;
    border: 1px solid var(--color-dark);
    border-radius: 6px;
}

/* Submit: match .button (primary pill, full width). */

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit,
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] button[type='submit'] {
    align-items: center;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 60px;
    color: var(--color-dark);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--size-step-0) !important;
    font-weight: 500;
    gap: 0 var(--space-2xs);
    justify-content: center;
    line-height: 1;
    padding: 19px 30px;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    transition: 0.3s;
    width: 100%;
}

.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit:hover,
.contact-form-block__form .forminator-ui.forminator-custom-form[data-design=default] button[type='submit']:hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-primary);
}

/* ── Bottom: contacts + details ──────────────────────────────────── */

.contact-form-block__bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
}

@media (min-width: 900px) {
    .contact-form-block__bottom {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-xl);
    }
}

.contact-form-block__contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
}

/* Email + phone: both highlighted with primary yellow, like an inline pill. */

.contact-form-block__email,
.contact-form-block__phone {
    background-color: var(--color-primary);
    color: var(--color-dark);
    padding: 0.15em 0.4em;
    border-radius: 0.2em;
    text-decoration: none;
    font-size: var(--size-lg);
    font-family: var(--font-heading);
    line-height: 1.2;
    transition: filter 0.2s ease;
}

.contact-form-block__email:hover,
.contact-form-block__email:focus-visible,
.contact-form-block__phone:hover,
.contact-form-block__phone:focus-visible {
    filter: brightness(0.95);
}

/* Right-bottom: address + socials. */

.contact-form-block__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.contact-form-block__address {
    margin: 0;
    line-height: 1.5;
}

.contact-form-block__address br {
        display: none;
    }

.contact-form-block__socials {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.contact-form-block__socials-label {
    margin: 0;
    font-size: var(--size-step-00, 0.8rem);
}

/* Re-skin the shared social-links snippet inside this block — no
   bordered circles, just plain icons in a row. */

.contact-form-block__socials .social-links {
    display: flex;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-form-block__socials .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    transition: color 0.2s ease;
}

.contact-form-block__socials .social-links a:hover,
.contact-form-block__socials .social-links a:focus-visible {
    color: var(--color-primary);
}

.contact-form-block__socials .social-links svg {
    width: 1.1rem;
    height: 1.1rem;
}

.contact-form-block__socials .social-links svg path,
.contact-form-block__socials .social-links svg rect {
    fill: currentColor;
}

.block--copy-and-image-rows img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

/* Copy block — header + optional large-copy lede + main copy column.
   Large copy spans the wrapper; main copy is constrained to 502px and
   left-aligned. */

.copy-block__header {
  /* Header sits at the wrapper's natural width so titles can run wide. */
  max-width: 100%;
}

.copy-block__large-copy {
  width: 100%;
}

.copy-block__large-copy p {
  margin: 0 0 1rem;
}

.copy-block__copy {
  max-width: 502px;
  text-align: left;
}

/* CTA block — text panel + optional image. When an image is present the
   image hits the edges of the block; only the text panel keeps padding
   and the primary background. When no image is present the panel
   centres its contents. */

.block--cta {
  padding-block: var(--space-xl, 5rem);
}

.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  /* No outer padding — content + image flush to the block edges. */
  padding: 0;
  /* Primary bg lives on the block; with-image variant lets the image
     sit on top of it edge-to-edge, no-image variant fills the panel. */
  background-color: var(--color-primary);
  border-radius: var(--radius-card, 10px);
  overflow: hidden;
}

/* No-image CTA stays centred and constrained. */

.cta--no-image {
  max-width: 900px;
  margin-inline: auto;
}

.cta--no-image .cta__content {
  text-align: center;
  align-items: center;
}

.cta--no-image .cta__actions {
  justify-content: center;
}

@media (min-width: 900px) {
  .cta--with-image {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

/* Text panel — padded; bg comes from the parent .cta. */

.cta__content {
  padding: var(--space-l, 3rem);
  background-color: var(--color-primary);
  color: var(--color-dark);
}

@media (min-width: 900px) {
  .cta--with-image .cta__content {
    padding: var(--space-l, 5rem);
  }
}

.cta--no-image .cta__content {
  max-width: 100%;
}

.cta__preheader {
  text-transform: uppercase;
  margin: 0;
}

.cta__title {
  font-size: clamp(1.75rem, 3vw + 0.5rem, 3rem);
  line-height: 1.1;
  margin: 0;
}

.cta__copy {
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem);
  line-height: 1.5;
}

.cta__actions {
  margin-top: var(--space-l, 1rem);
}

/* Image fills its side of the block edge-to-edge — no corner radius
   (the parent .cta handles rounding). */

.cta__media {
  overflow: hidden;
  display: block;
  border-radius: 0;
}

.cta__media picture,
.cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Stacked layout (mobile or no image) — image still fills its full width. */

.cta--with-image .cta__media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  .cta--with-image .cta__media {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* Second CTA (and beyond): no border in any state, no horizontal padding,
   and underline on hover instead of the standard .button fill swap. */

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

.cta__actions .button--secondary,
.cta__actions .button--secondary:hover,
.cta__actions .button--secondary:focus,
.cta__actions .button--secondary:active {
  background: transparent;
  border: 0;
  color: var(--color-dark);
  padding-inline: 0;
}

.cta__actions .button--secondary:hover,
.cta__actions .button--secondary:focus-visible {
  text-decoration: underline;
}

/* When the section uses an image background, the CTA card flips to
   off-white so it reads cleanly on top of the photograph. */

.section-bg--image .cta,
.section-bg--image .cta .cta__content {
  background-color: var(--color-light);
  color: var(--color-dark);
}

/* Facts and Figures — two layout modes controlled by the `layout` ACF
   field:
   • .facts-and-figures--grid     → intro left, 2x2 figures right (default)
   • .facts-and-figures--vertical → intro spans top (title left / copy
     right), figures stack as horizontal rows below with thin rules.

   The block itself opts out of the standard wrapper max-width so it
   fills the available width (still keeping the gutter padding). */

/* .facts-and-figures {
  --wrapper-max-width: none;
} */

.facts-and-figures__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}

/* ---------- Grid layout ---------- */

@media (min-width: 900px) {
  .facts-and-figures--grid .facts-and-figures__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

/* ---------- Vertical layout ---------- */

/* Intro sits as one row (split into 2 cols on tablet+), figures stack
   beneath as a single column row of horizontal entries. */

.facts-and-figures--vertical .facts-and-figures__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 1rem + 4vw, 5rem);
}

.facts-and-figures--vertical .facts-and-figures__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 4rem;
  align-items: start;
}

@media (min-width: 768px) {
  .facts-and-figures--vertical .facts-and-figures__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }
}

/* Head (preheader + title) stays as a tight vertical stack — they sit
   inside the same grid cell so the row gap can't split them apart. */

.facts-and-figures__intro-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Inside the head, drop the default bottom margins so the flex gap
   controls spacing. */

.facts-and-figures__intro-head .facts-and-figures__preheader,
.facts-and-figures__intro-head .facts-and-figures__title {
  margin: 0;
}

/* Intro column */

.facts-and-figures__preheader {
  margin: 0 0 1.25rem;
}

.facts-and-figures__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.05;
}

.facts-and-figures__copy {
  max-width: 28rem;
}

.facts-and-figures__copy p {
  margin: 0 0 1em;
}

.facts-and-figures__copy p:last-child {
  margin-bottom: 0;
}

.facts-and-figures__figures {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Figures in GRID layout: 2 across on tablet+, stacked on mobile. --- */

.facts-and-figures--grid .facts-and-figures__figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}

@media (min-width: 600px) {
  .facts-and-figures--grid .facts-and-figures__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.facts-and-figures--grid .facts-and-figures__figure {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Figures in VERTICAL layout: horizontal rows separated by rules. --- */

.facts-and-figures--vertical .facts-and-figures__figures {
  border-top: 1px solid color-mix(in srgb, var(--color-dark) 20%, transparent);
  width: 100%;
}

.facts-and-figures--vertical .facts-and-figures__figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 4rem;
  padding: 2rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dark) 20%, transparent);
  align-items: center;
}

@media (min-width: 768px) {
  .facts-and-figures--vertical .facts-and-figures__figure {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.facts-and-figures__figure-number {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.2rem + 3.5vw, 4rem);
  line-height: 1;
}

.facts-and-figures__figure-copy {
  margin: 0;
  line-height: 1.4;
}

/* Features block — centred title (optional yellow halo behind) and a
   vertical list of label/copy rows separated by thin horizontal rules.
   Mirrors the design reference: B Corp / Minority-led / Female-owned. */

.features__head {
  /* Centre the head + reserve in-flow space for the halo. The halo is
     painted as background on the title itself (not absolutely positioned)
     so it can't overlap the section above or the list below. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(2rem, 1rem + 2vw, 4rem);
}

.features__preheader {
  margin: 0 0 0.5rem;
}

/* Title + halo overlap. Both children sit in the same single-cell CSS
   grid so the wrapper takes the larger of the two as its natural size,
   keeping the halo fully in flow (no overlap with surrounding sections). */

.features__title-wrap {
  display: inline-grid;
  grid-template-columns: 1fr;
  place-items: center;
}

.features__title-wrap > .features__halo,
.features__title-wrap > .features__title {
  grid-column: 1;
  grid-row: 1;
}

/* The halo is a real element that reserves its own width AND height. */

.features__halo {
  width: min(70%, 22rem);
  aspect-ratio: 1 / 1;
  background-color: var(--color-primary);
  border-radius: 50%;
  pointer-events: none;
}

/* When the halo is on, give the wrap a bit more horizontal room so the
   title can extend past the circle's left/right edges if it wants to. */

.features__title-wrap--halo {
  padding: 1.5rem 0;
}

.features__title {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.05;
  text-align: center;
  /* Sits on top of the halo, but no positional escape from the grid. */
  z-index: 1;
  /* Mobile: no left padding so the title sits flush against the wrapper. */
  padding: 0 0 0 0;
}

@media (min-width: 768px) {
  .features__title {
    padding: 0 0.4em 0 0;
  }
}

/* List of features */

.features__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-dark) 20%, transparent);
}

.features__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dark) 20%, transparent);
}

@media (min-width: 768px) {
  .features__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    /* Baseline-align the big left-hand label with the summary line on
       the right. When the accordion opens, the summary's baseline
       doesn't move (only the copy beneath it grows), so the label
       stays visually locked to the summary regardless of open state. */
    align-items: baseline;
  }
}

.features__label {
  margin: 0;
  font-size: clamp(1.5rem, 0.9rem + 1.5vw, 2.25rem);
  line-height: 1.15;
  font-weight: 400;
}

.features__body {
  /* Top-align the accordion with the left-hand label. `justify-content:
     center` used to pull the summary down to match a single-line label
     when closed, but as soon as the panel opens the whole (summary +
     copy) group re-centres → the summary jumps upward. Anchoring to
     the top instead keeps the summary put; the copy pushes down. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Accordion — uses native <details>/<summary> with the new
   `interpolate-size` / `::details-content` CSS to animate open/close.
   Falls back to an instant toggle in browsers that don't support those
   features. */

.features__details {
  width: 100%;
  interpolate-size: allow-keywords;
}

.features__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  line-height: 1.4;
}

/* Hide the default disclosure triangle in WebKit + Firefox. */

.features__summary::-webkit-details-marker { display: none; }

.features__summary::marker { content: ""; }

/* Per-row title sits to the left, never centred. */

.features__title {
  font-weight: 500;
  text-align: left;
}

.features__title--static {
  margin: 0;
  font-weight: 500;
  text-align: left;
}

/* Animate the hidden content. In supporting browsers the block-size
   transitions from 0 → auto via interpolate-size, with content-visibility
   flipped through `allow-discrete` so the element actually appears /
   disappears at the right moment. */

.features__details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: content-visibility 0.35s allow-discrete,
              block-size 0.35s ease,
              opacity 0.35s ease;
  transition-behavior: allow-discrete;
}

.features__details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* Plus / minus toggle drawn in pure CSS. Two pseudo-elements crossed. */

.features__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
}

.features__toggle::before,
.features__toggle::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Horizontal bar */

.features__toggle::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
}

/* Vertical bar */

.features__toggle::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
}

/* Open state — collapse the vertical bar to make a minus. */

.features__details[open] .features__toggle::after {
  transform: scaleY(0);
}

/* Reveal animation for the copy. */

.features__details .features__copy {
  margin-top: 1rem;
  padding-right: 3rem;
}

.features__copy {
  color: inherit;
  line-height: 1.5;
}

.features__copy p {
  margin: 0 0 0.75em;
}

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

.block--gallery img {
  width: 100%;
  max-height: 90vh;
}

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

.block--hero {
  position: relative;
}

.block--hero .hero-wrapper,
  .block--hero .hero-content--wrapper,
  .block--hero .hero-content {
    position: relative;
    /* min-height: 80vh; */
  }

/* Compact hero on single case studies — drop the 80vh min-height
   and the vertical block-spacing so the case-study body starts close
   to the nav. */

body.single-work_cpt .block--hero {
  padding-block: 0;
  margin-block: 0;
}

body.single-work_cpt .block--hero .hero-wrapper,
body.single-work_cpt .block--hero .hero-content--wrapper,
body.single-work_cpt .block--hero .hero-content {
  min-height: 0;
}

body.single-work_cpt .block--hero .hero-content {
  padding-block: var(--space-s, 1rem);
}

.block--hero .hero-content--wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

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

.block--hero .hero-content > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    margin-inline: 0;
  }

.block--hero .hero-content .cluster {
    justify-content: flex-start;
  }

.block--hero .hero-background {
    z-index: -10;
  }

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

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

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

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

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

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

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

.block--hero .hero__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(3rem, 6vw, 4.5rem);
    height: clamp(3rem, 6vw, 4.5rem);
    margin-inline: auto;
  }

.block--hero .hero__play svg {
      width: 100%;
      height: 100%;
      fill: currentColor;
      opacity: 0.9;
    }

/* Slim variant — left-aligned, no min-height, no top/bottom padding.
     Used on service / sector landings and similar where the hero just
     introduces the page. */

.block--hero.block--hero--slim {
    padding-block: 0;
  }

.block--hero.block--hero--slim .hero-wrapper,
    .block--hero.block--hero--slim .hero-content--wrapper,
    .block--hero.block--hero--slim .hero-content {
      min-height: 0;
    }

.block--hero.block--hero--slim .hero-content--wrapper {
      align-items: flex-start;
    }

.block--hero.block--hero--slim .hero-content {
      align-items: flex-start;
      text-align: left;
      padding-block: var(--space-s, 1rem);
    }

.block--hero.block--hero--slim .hero-content > div {
      align-items: flex-start;
      text-align: left;
      margin-inline: 0;
    }

.block--hero.block--hero--slim .hero-content .cluster {
      justify-content: flex-start;
    }

@media (max-width: 768px) {
    .block--hero .hero-wrapper,
    .block--hero .hero-content--wrapper,
    .block--hero .hero-content {
      min-height: auto;
      padding-block: 4rem;
    }
    .block--hero.block--hero--slim .hero-wrapper,
    .block--hero.block--hero--slim .hero-content--wrapper,
    .block--hero.block--hero--slim .hero-content {
      padding-block: var(--space-s, 1rem);
    }
  }

/* Home hero — headline + showreel + services grid stack. */

.block--home-hero .home-hero {
  padding-block: var(--space-l, 3rem);
}

.block--home-hero .home-hero__head {
  max-width: 56ch;
}

.block--home-hero .home-hero__headline {
  font-size: clamp(2rem, 4vw + 0.5rem, 4rem);
  line-height: 1.05;
  margin: 0;
}

.block--home-hero .home-hero__copy {
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem);
  line-height: 1.5;
}

/* 16:9 showreel container — full-bleed within the wrapper. */

.block--home-hero .home-hero__showreel {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-dark, #030303);
  border-radius: var(--radius, 0.5rem);
}

.block--home-hero .home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
}

.block--home-hero .home-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* Services grid — 6 evenly-spaced tiles; wraps gracefully. */

.block--home-hero .home-hero__services {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-s, 1rem);
  padding: 0;
  margin: 0;
  list-style: none;
}

.block--home-hero .home-hero__service-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-s, 1rem) var(--space-2xs, 0.5rem);
  text-align: center;
}

.block--home-hero .home-hero__showreel--static img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.block--home-hero .home-hero__service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: currentColor;
}

.block--home-hero .home-hero__service-icon svg {
  width: 100%;
  height: 100%;
}

.block--home-hero .home-hero__service-label {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .block--home-hero .home-hero__services {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .block--home-hero .home-hero__services {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Home Intro block — ported from page-templates/template-home-hero-demo.php.
   See template-parts/blocks/home-intro for markup and ACF schema.
   All class names prefixed with `home-intro` (or `home-intro__`) so
   nothing collides with theme-wide styles. */

.block--home-intro {
    /* Self-contained — render flush, the block owns its own bg. */
    padding: 0 !important;
}

.home-intro {
    --hi-bg:        #13140d;
    --hi-bg-2:      #0c0d07;
    --hi-butter:    var(--color-primary, #e6e96a);
    --hi-ink:       #13140d;
    --hi-cream:     var(--color-light, #f4f1e6);
    --hi-cream-dim: rgba(244, 241, 230, .66);
    --hi-line:      rgba(230, 233, 106, .45);
    --hi-radius:    16px;
    --hi-video-ratio: 16 / 9;
    --hi-pad:       clamp(20px, 4vw, 56px);
    --hi-maxw:      1240px;
    --hi-vgap:      clamp(72px, 8vw, 120px);

    position: relative;
    color: var(--hi-cream);
    overflow-x: clip;
    /* Default = ink (no-JS fallback / final state). JS-capable browsers
       open on butter via the rule below, then GSAP transitions to ink
       during the loading sequence. The theme's inline header script
       toggles `no-js` → `js` on <html> before this block renders, so
       the open colour lands on the first paint without a flash. */
    background: var(--hi-bg);
    isolation: isolate;
}

html.js .home-intro {
    background: var(--hi-butter);
}

/* Subtle vignette + film grain — fades in via JS once the intro lands. */

.home-intro__atmos {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .03), transparent 55%),
        radial-gradient(120% 120% at 50% 100%, var(--hi-bg-2), transparent 60%);
}

.home-intro__atmos::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* ── Stage: full-bleed hero video + wordmark ─────────────────────── */

.home-intro__stage {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Video is FULL-BLEED at every viewport — overrides the original
       template which only went edge-to-edge above 1024px. */
    margin: 0;
    padding: 0;
}

.home-intro__video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--hi-video-ratio);
    /* On very large / wide screens the 16:9 box gets too tall — cap it and let
       the video (object-fit: cover) crop. Self-gating: only bites once the
       computed height would exceed 80vh. */
    max-height: 80vh;
    overflow: hidden;
    background: #0a0b07;
    clip-path: inset(100% 0% 0% 0%);  /* armed — revealed via GSAP */
}

.home-intro__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.home-intro__bg-video-el {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}

.home-intro__video-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(19, 20, 13, .45) 0%,
        rgba(19, 20, 13, .10) 16%,
        rgba(19, 20, 13, .05) 45%,
        rgba(19, 20, 13, .55) 100%);
}

.home-intro__wordmark {
    position: absolute;
    left: 1.5%;
    right: 1.5%;
    bottom: 0;
    z-index: 5;
    will-change: transform, opacity;
    pointer-events: none;
}

/* FOUC guard: when JS is active the wordmark stays hidden until GSAP's
   arm()/revealStatic() reveals it via autoAlpha. Without this the black
   (ink) logo paints at its resting position before the intro runs.
   Kept behind `html.js` so the no-JS fallback still shows the logo. */

html.js .home-intro__wordmark {
    visibility: hidden;
}

.home-intro__wordmark svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.home-intro__wordmark svg path {
    fill: var(--hi-ink);
}

.home-intro__wordmark svg path.home-intro__letter {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    will-change: transform;
}

/* Butter frame on the foreignObject itself: the reel video is overscanned
   (scale 1.08) so it overflows any border on the inner div — the FO clips its
   content, so the border here caps the video edge and stops it bleeding
   through the letter mask on sub-pixel-rounding resolutions. */

.home-intro__wordmark-reel-fo {
    box-sizing: border-box;
    border: 2px solid var(--color-butter, #e6e86b);
    overflow: hidden;
}

.home-intro__wordmark-reel {
    width: 100%;
    height: 100%;
}

.home-intro__wordmark-reel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Slight overscan so no hairline of the video edge shows through the
       letter mask at the very top/bottom of the wordmark. */
    transform: scale(1.08);
}

.home-intro__wordmark .home-intro__wordmark-solid path {
    fill: var(--hi-butter);
}

/* ── Showreel play circle (cursor-follow) ────────────────────────── */

.home-intro__video-frame--playable {
    cursor: none;
}

.home-intro__cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    width: clamp(5.5rem, 9vw, 8rem);
    height: clamp(5.5rem, 9vw, 8rem);
    border-radius: 50%;
    background: var(--hi-butter);
    color: var(--hi-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    font-family: var(--font-heading, inherit);
    font-size: clamp(.75rem, 1vw, .95rem);
    font-weight: 600;
    pointer-events: none;
    will-change: transform;
}

/* No hover cursor circle on touch — the frame still opens on tap. */

@media (hover: none) {
    .home-intro__video-frame--playable { cursor: pointer; }
    .home-intro__cursor { display: none; }
}

/* ── In-place showreel spotlight (no lightbox) ───────────────────── */

.home-intro__spotlight {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    cursor: pointer;
}

.home-intro__spotlight-frame {
    width: min(90vw, calc(90vh * 16 / 9));
    aspect-ratio: 16 / 9;
    max-height: 90vh;
    background: #000;
    cursor: default;
}

.home-intro__spotlight-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.home-intro__spotlight-close {
    position: fixed;
    top: clamp(1rem, 2vw, 1.75rem);
    right: clamp(1rem, 2vw, 1.75rem);
    z-index: 1;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--hi-butter);
    border-radius: 50%;
    color: var(--hi-butter);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.home-intro__spotlight-close:hover,
.home-intro__spotlight-close:focus-visible {
    background: var(--hi-butter);
    color: var(--hi-ink);
}

.home-intro__spotlight-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ── Wrap below the stage ────────────────────────────────────────── */

.home-intro__wrap {
    position: relative;
    z-index: 2;
    padding-bottom: clamp(48px, 7vh, 84px);
}

.home-intro__hero-row {
    margin-top: var(--hi-vgap);
}

.home-intro__hero-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 40px);
    max-width: 75%;
}

.home-intro__headline {
    font-weight: 600;
    font-size: clamp(2.1rem, 4.6vw, 4rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--hi-cream);
    margin: 0;
}

.home-intro__line {
    display: block;
    overflow: hidden;
    padding-bottom: .03em;
}

.home-intro__line > span {
    display: block;
    transform: translateY(120%);
    will-change: transform;
}

.home-intro__body p {
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.5;
    color: #fff;
    max-width: 47ch;
    opacity: 0;
    will-change: transform, opacity;
}

.home-intro__body p + p {
    margin-top: .4em;
}

/* Showreel text link — butter, with arrow; opens the in-place spotlight. */

.home-intro__showreel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    align-self: flex-start;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--hi-butter);
    font-family: var(--font-heading, inherit);
    font-size: var(--size-step-0);
    font-weight: 600;
    line-height: 1.1;
}

.home-intro__showreel-link svg {
    width: 1.4em;
    height: auto;
    transition: transform 0.25s ease;
}

.home-intro__showreel-link:hover svg,
.home-intro__showreel-link:focus-visible svg {
    transform: translateX(0.35rem);
}

/* ── Services row ────────────────────────────────────────────────── */

.home-intro__services-wrap {
    margin-top: var(--hi-vgap);
}

.home-intro__rule {
    height: 1px;
    background: var(--hi-line);
    transform-origin: left center;
    transform: scaleX(0);
}

.home-intro__services {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 16px;
    padding: clamp(16px, 2vw, 22px) 0;
    margin: 0;
}

.home-intro__services li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: clamp(.85rem, 1vw, .96rem);
    font-weight: 500;
    color: var(--hi-butter);
    opacity: 0;
    will-change: transform, opacity;
    white-space: nowrap;
}

.home-intro__services svg {
    width: 23px;
    height: 23px;
    flex: none;
}

.home-intro__services-label {
    display: inline-block;
    margin-top: 4px;
}

@media (max-width: 860px) {
    .home-intro__hero-copy {
        max-width: none;
    }
    .home-intro__services {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 14px 22px;
    }
}

/* Mobile: the hero video switches to a 1:1 square. The wordmark hang is
   measured from the frame height in JS, so it re-positions automatically. */

@media (max-width: 768px) {
    .home-intro {
        --hi-video-ratio: 1 / 1;
    }
}

/* Icon List block — 2-col on desktop (copy left, icon list right),
   stacks on small screens. See template-parts/blocks/icon-list. */

.icon-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l, 2rem);
    align-items: start;
}

@media (min-width: 900px) {
    .icon-list {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl, 3rem);
    }
}

.icon-list__copy {
    max-width: 50ch;
}

.icon-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.icon-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-m, 1.5rem);
    padding-block: var(--space-m, 1.5rem);
    border-bottom: 1px solid currentColor;
}

@media (min-width: 1080px) {

.icon-list__item {
        gap: var(--space-xl, 1.5rem)
}
    }

.icon-list__item:first-child {
    padding-block-start: 0;
}

.icon-list__item:last-child {
    border-bottom: 0;
}

.icon-list__icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-list__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.icon-list__text {
    font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
    line-height: 1.5;
}

.icon-list__text p:first-child { margin-top: 0; }

.icon-list__text p:last-child  { margin-bottom: 0; }

.block--image img {
	width: 100%;
	max-height: 40rem;
    object-fit: cover;
}

@media (min-width: 760px) {

.block--image img {
        max-height: 40rem
}
    }

/* "Reduced max-height" toggle — independent of contained / full-bleed,
   so the editor can pair it with either width mode (e.g. full-bleed +
   reduced height = wide-but-short banner). Roughly half the default. */

.block--image.block--image--reduced-height img {
    max-height: 22rem;
}

@media (min-width: 760px) {

.block--image.block--image--reduced-height img {
        max-height: 28rem
}
    }

.main-content > .site-block.block--image--no-padding {
    padding-block: 0;
}

/* Insights filter — primary category tabs + secondary topic dropdown.
   Same shape as block--work-filter so the two read consistently. */

.insights-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-block-end: var(--space-s, 1rem);
}

.insights-filter__categories {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

/* Pill tabs — inactive is plain text, active is a dark pill with
   primary (yellow) text. */

.insights-filter__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: var(--color-dark);
  background-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.insights-filter__pill:hover,
.insights-filter__pill:focus-visible,
.insights-filter__pill.is-current {
  background-color: var(--color-dark);
  color: var(--color-primary);
}

.insights-filter__pill.is-current:hover,
.insights-filter__pill.is-current:focus-visible {
  background-color: var(--color-dark);
  color: var(--color-primary);
}

.insights-filter__topics {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.insights-filter__select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.35rem 2rem 0.35rem 0.75rem;
  border: 1px solid var(--color-dark);
  border-radius: 999px;
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 0.9rem) 55%, calc(100% - 0.55rem) 55%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-dark);
  cursor: pointer;
}

.insights-filter__select:hover,
.insights-filter__select:focus-visible {
  background-color: color-mix(in srgb, var(--color-dark) 8%, transparent);
}

@media (max-width: 640px) {
  .insights-filter {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Logo wall — monochrome client logos are rendered as CSS masks
   (see logowall.php `$render_logo`). The logo's own SVG/PNG silhouette
   becomes the mask and `background-color` paints it, so each logo takes
   an *exact* brand colour rather than an approximated `filter` stack. */

.logo-wall__logo {
  display: block;
  width: 100%;
  height: 100%;
  /* Default — page sits on the light/off-white theme bg, render dark. */
  background-color: var(--color-dark);
  -webkit-mask: var(--logo-src) center / contain no-repeat;
          mask: var(--logo-src) center / contain no-repeat;
  transition: background-color 0.3s ease;
}

/* On the yellow section bg logos stay dark (same as the default). */

/* On the black section bg, retint to brand butter (#e6e86b). */

.section-bg--black .logo-wall__logo {
  background-color: var(--color-primary);
}

/* Grid variant — each cell is a 16:9 box; the masked logo fits inside. */

.logo-wall__grid .logo-wall__logo {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Scroller variant comes in two flavours rendered in parallel —
   the PHP outputs both and CSS picks one based on viewport:
     • Desktop: 2 marquee rows, each containing a full gallery.
     • Mobile:  4 marquee rows, each containing half a gallery
       (so we get more visual rows on small screens). */

.logo-wall__scroller--desktop { display: none; }

.logo-wall__scroller--mobile  { display: block; }

@media (min-width: 1024px) {
  .logo-wall__scroller--desktop { display: block; }
  .logo-wall__scroller--mobile  { display: none; }
}

/* Logo marquee — true CSS keyframes scroll. The track contains two
   identical copies of the logos; translating -50% lands on the start
   of the second copy so the loop is seamless. */

.logo-marquee {
  overflow: hidden;
  width: 100%;
}

/* Stacked marquee rows sit flush — no vertical gap between them. */

.logo-marquee + .logo-marquee {
  margin-top: 0;
}

/* Constant speed regardless of how many logos are in the row. The
   marquee element sets --logo-count from PHP and we compute duration
   as (count × seconds-per-logo) so a row of 8 and a row of 16 move
   at the same pixels-per-second rate. */

.logo-marquee {
  --logo-count: 8;
  --seconds-per-logo: 6s;
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: logo-marquee-scroll-left calc(var(--seconds-per-logo) * var(--logo-count)) linear infinite;
  /* GPU-accelerate to avoid sub-pixel jitter on the loop. */
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Second row scrolls the opposite direction. */

.logo-marquee--right .logo-marquee__track {
  animation-name: logo-marquee-scroll-right;
}

/* Each marquee cell is a fixed 170px-wide 16:9 box; the masked logo
   sits centred inside it. */

.logo-marquee__item {
  flex: 0 0 auto;
  width: 170px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes logo-marquee-scroll-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes logo-marquee-scroll-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

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

.block--multiple-images-and-text .block--image__left img {
			aspect-ratio: 9/11;
			object-fit: cover;
		}

/* Service card — stacked: 16:9 media on top (hover-play video), then
   title + summary + See more CTA. No overlay text. */

.service-card {
  display: block;
  border-radius: var(--radius, 0.5rem);
  overflow: hidden;
}

.service-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs, 0.5rem);
  text-decoration: none;
  color: inherit;
}

.service-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card, 10px);
}

.service-card__media picture,
.service-card__media img,
.service-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.service-card__video {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.service-card__inner:hover .service-card__video,
.service-card__inner:focus-visible .service-card__video {
  opacity: 1;
}

.service-card__inner:hover .service-card__media img,
.service-card__inner:focus-visible .service-card__media img {
  transform: scale(1.02);
}

.service-card__body {
  padding-block-start: var(--space-2xs, 0.5rem);
}

.service-card__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  line-height: 1.2;
  font-weight: 500;
}

.service-card__summary {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: 0.3s;
}

.service-card__inner:hover .service-card__cta,
.service-card__inner:focus-visible .service-card__cta {
  color: var(--color-primary)
}

/* Stat / Result block — left column stacks one or more preheader +
   statement entries; right column shows an optional image. Bold runs
   inside statements get a primary-yellow highlight. */

.stat-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}

@media (min-width: 900px) {
  .stat-result--with-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.stat-result__results {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 1rem + 3vw, 4rem);
  max-width: 550px;
}

.stat-result__preheader {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.25rem;
}

.stat-result__statement {
  line-height: 1.5;
}

.stat-result__statement p:last-child {
  margin-bottom: 0;
}

/* Highlighted runs — wrap bold text inline-block style so the yellow
   background hugs the inline run, with comfortable padding and rounded
   corners. box-decoration-break:clone keeps it readable when the bold
   run wraps across lines. */

.stat-result__statement strong,
.stat-result__statement b {
  background-color: var(--color-primary);
  color: inherit;
  font-weight: inherit;
  padding: 0 0.2em;
  border-radius: 0.15em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Right-hand image column. */

.stat-result__media {
  overflow: hidden;
  border-radius: var(--radius-card, 10px);
}

.stat-result__media picture,
.stat-result__media img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 900px) {
  .stat-result__media {
    position: sticky;
    top: 2rem;
    align-self: start;
  }
}

.team-members-grid .member-image {
    overflow: hidden;
    border-radius: var(--radius-card, 10px);
    aspect-ratio: 1 / 1;
  }

.team-members-grid .member-image picture,
  .team-members-grid .member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    aspect-ratio: 1 / 1;
  }

/* Name + position sit tight against each other. */

.team-members-grid .member-name {
    margin: 0;
    line-height: 1.05;
    font-weight: 500;
  }

.team-members-grid .member-bio-intro {
    margin: 0.5rem 0 1rem;
    font-size: var(--size-sm);
    line-height: 1.4;
  }

.team-members-grid .member-bio {
    margin-top: 0.5rem;
    /* `sm` from the design token scale — flat 16px. */
    font-size: var(--size-sm);
    line-height: 1.5;
  }

/* Testimonials — driven by testimonial_cpt relationship. Single (one
   selected) and carousel (multiple) share an 900px max-width container. */

/* .block--testimonials .testimonials {
  padding-block: var(--space-l, 3rem);
} */

.block--testimonials .testimonials__head {
  max-width: 60ch;
  margin-inline: auto;
}

/* -------------------------------------------------- *
 *  Single testimonial layout
 * -------------------------------------------------- */

.testimonial-single {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
  margin: 0 auto;
}

.testimonial-single__quote {
  margin: 0;
  line-height: 1.2;
  font-weight: 400;
  font-family: var(--font-heading);
  font-size: var(--size-xl);
}

@media (min-width: 760px) {

.testimonial-single__quote {
    font-size: var(--size-2xl)
}
  }

/* Bold runs inside the quote get a yellow (primary) highlight. The
   tiny horizontal padding + box-decoration-break keep it readable when
   the bold text wraps across lines. */

.testimonial-single__quote strong,
.testimonial-single__quote b,
.testimonial-slide__quote strong,
.testimonial-slide__quote b {
  background-color: var(--color-primary);
  color: inherit;
  padding: 0 0.15em;
  border-radius: 0.15em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  font-weight: 500;
}

.testimonial-single__footer {
  flex-wrap: wrap;
}

.testimonial-single__person {
  flex: 0 1 auto;
  min-width: 0;
}

.testimonial-single__headshot {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}

.testimonial-single__headshot picture,
.testimonial-single__headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.testimonial-single__name {
  margin: 0;
}

.testimonial-single__position {
  margin: 0;
  font-size: 0.9em;
}

.testimonial-single__logo {
  flex: 0 0 auto;
  max-width: 140px;
}

.testimonial-single__logo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* -------------------------------------------------- *
 *  Carousel layout (2+ testimonials)
 * -------------------------------------------------- */

.testimonial-carousel {
  position: relative;
}

.block--testimonials .testimonials-swiper {
  position: relative;
  /* padding-block: var(--space-m, 2rem); */
}

.testimonial-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  margin: 0 auto;
}

.testimonial-slide__logo {
  max-width: 160px;
}

.testimonial-slide__logo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  max-height: 80px;
}

.testimonial-slide__quote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--size-2xl);
  line-height: 1.2;
  font-weight: 400;
}

.testimonial-slide__headshot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-inline: auto;
}

.testimonial-slide__headshot picture,
.testimonial-slide__headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.testimonial-slide__byline {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.testimonial-slide__name {
  margin: 0;
}

.testimonial-slide__position {
  margin: 0;
}

/* Arrow nav buttons — sit outside the .swiper (overflow:hidden) so they
   can extend past the column edges and remain visible. */

.testimonial-carousel__nav {
  position: absolute;
  top: 45%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 5;
  color: var(--color-dark);
  transition: color 0.2s ease, transform 0.2s ease;
}

.testimonial-carousel__nav svg {
  width: 20px;
  height: 20px;
  display: block;
}

.testimonial-carousel__nav:hover,
.testimonial-carousel__nav:focus-visible {
  color: var(--color-primary);
}

.testimonial-carousel__nav--prev {
  left: -3.5rem;
}

.testimonial-carousel__nav--next {
  right: -3.5rem;
}

@media (max-width: 1024px) {
  .testimonial-carousel__nav--prev { left: 0.25rem; }
  .testimonial-carousel__nav--next { right: 0.25rem; }
}

.testimonial-carousel__nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Text Statistic block — short, large statement in the title font.
   Bold inside the WYSIWYG renders with a primary-yellow background
   strip (font-weight inherits, no weight change). */

.text-statistic__text p:first-child {
		margin-top: 0;
	}

.text-statistic__text p:first-of-type {
		margin-top: 0;
	}

.text-statistic__text > * + * {
	margin-top: 0.5em;
}

.text-statistic__text strong,
.text-statistic__text b {
	font-weight: inherit;
	background-color: var(--color-primary, #e6e86b);
	color: var(--color-dark, #13140d);
	padding-inline: 0.15em;
	border-radius: 0.15em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Links inside the statement: reserve the same padding + rounded box
   at rest (with a transparent background) so hover only swaps colours —
   no width reflow of the surrounding text. Matches the testimonials
   slider's yellow-highlight radius (0.15em). */

.text-statistic__text a {
	color: inherit;
	background-color: transparent;
	padding-inline: 0.15em;
	border-radius: 0.15em;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	transition: background-color 0.2s ease, color 0.2s ease, text-decoration-color 0.2s ease;
}

.text-statistic__text a:hover,
.text-statistic__text a:focus-visible {
	background-color: var(--color-primary, #e6e86b);
	color: var(--color-dark, #13140d);
	text-decoration: none;
}

/* Video spotlight — shared "play in place" UI (see video-spotlight.js).
   A trigger shows a butter "play" circle on hover; clicking dims the page
   to black and plays the video centred with sound. */

/* ── Trigger + hover play circle ─────────────────────────────────── */

[data-video-spotlight] {
  position: relative;
  cursor: none;
}

/* Touch devices have no hover cursor circle — keep a normal affordance. */

@media (hover: none) {
  [data-video-spotlight] {
    cursor: pointer;
  }
}

/* Transparent click-catcher so the click lands on the trigger and not on
   an inner iframe (iframes swallow pointer events). */

[data-video-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

/* Cursor-follow play circle (GSAP positions it via x/y + xPercent/yPercent).
   Hidden at scale 0 until hover. */

.video-cue {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: clamp(4rem, 7vw, 6rem);
  height: clamp(4rem, 7vw, 6rem);
  border-radius: 50%;
  background: var(--color-primary, #e6e86b);
  color: var(--color-dark, #13140d);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}

/* Fallback when GSAP isn't present: centred, revealed on hover. */

.video-cue--static {
  top: 50%;
  left: 50%;
  transition: transform 0.25s ease;
}

[data-video-spotlight]:hover .video-cue--static,
[data-video-spotlight]:focus-visible .video-cue--static {
  transform: translate(-50%, -50%) scale(1);
}

.video-cue svg {
  width: 38%;
  height: 38%;
  margin-left: 6%; /* optically centre the play triangle */
}

/* ── Full-screen spotlight ───────────────────────────────────────── */

.video-spotlight {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  transition: opacity 0.35s ease;
  cursor: pointer;
}

.video-spotlight.is-open {
  opacity: 1;
}

.video-spotlight__frame {
  width: min(90vw, calc(90vh * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: 90vh;
  background: #000;
  cursor: default;
  transform: scale(0.94);
  transition: transform 0.4s ease;
}

.video-spotlight--portrait .video-spotlight__frame {
  width: min(90vw, calc(90vh * 9 / 16));
  aspect-ratio: 9 / 16;
}

.video-spotlight.is-open .video-spotlight__frame {
  transform: scale(1);
}

.video-spotlight__video {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  display: block;
}

.video-spotlight__close {
  position: fixed;
  top: clamp(1rem, 2vw, 1.75rem);
  right: clamp(1rem, 2vw, 1.75rem);
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-primary, #e6e86b);
  border-radius: 50%;
  color: var(--color-primary, #e6e86b);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.video-spotlight__close:hover,
.video-spotlight__close:focus-visible {
  background: var(--color-primary, #e6e86b);
  color: var(--color-dark, #13140d);
}

.video-spotlight__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ──────────────────────────────────────────────────────────────────────
   Video block
   • .aspect--landscape  – legacy 16:9, single video.
   • .aspect--portrait   – 9:16, supports 1, 2 or 3+ videos with a
     carousel + progress bar for 3+. Yellow background.
   ────────────────────────────────────────────────────────────────────── */

/* Landscape (16:9) — full-width inside the wrapper, capped to a sensible
   max so it doesn't sprawl on ultrawides. */

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

.block--video.aspect--landscape .iframe-wrapper {
	max-width: 1200px;
	margin-inline: auto;
}

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

/* ── Portrait (9:16) ─────────────────────────────────────────────────── */

.block--video.aspect--portrait {
	padding-block: var(--space-m);
}

/* Yellow band sits behind the videos (carousel or grid). It stays inside
   the wrapper (parent provides horizontal padding) and is shorter than
   the carousel's active slide so the centre video pokes out top/bottom. */

.block--video.aspect--portrait .video-portrait__carousel,
.block--video.aspect--portrait .video-portrait__grid {
	position: relative;
	z-index: 0;
}

/* Band spans the full viewport width (full-bleed) using left:50% + 100vw
   trick so it escapes the parent .wrapper's horizontal padding. */

.block--video.aspect--portrait .video-portrait__carousel::before,
.block--video.aspect--portrait .video-portrait__grid::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100vw;
	transform: translate(-50%, -50%);
	background-color: var(--color-primary, #e6e86b);
	z-index: -1;
	pointer-events: none;
}

/* Carousel band = small-slide height (active slide is scaled 1.25× → 80%). */

.block--video.aspect--portrait .video-portrait__carousel::before {
	height: 80%;
}

/* Grid (1-up / 2-up) band = video height + a touch of vertical breathing. */

.block--video.aspect--portrait .video-portrait__grid::before {
	height: calc(100% + var(--space-m) * 2);
	max-height: 430px;
}

.block--video.aspect--portrait .video-portrait__item iframe,
.block--video.aspect--portrait .video-portrait__item img {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.block--video.aspect--portrait .video-portrait__item {
	aspect-ratio: 9 / 16;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
	position: relative;
}

/* 1-up: centred, capped width. */

.video-portrait__grid--1 {
	display: flex;
	justify-content: center;
}

.video-portrait__grid--1 .video-portrait__item {
	width: min(443px, 100%);
}

/* 2-up: side-by-side centred, stack on small screens. */

.video-portrait__grid--2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	justify-content: center;
	max-width: 1200px;
	margin-inline: auto;
}

.video-portrait__grid--2 .video-portrait__item {
	width: 100%;
	max-width: 443px;
	margin-inline: auto;
}

@media (min-width: 640px) {
	.video-portrait__grid--2 {
		grid-template-columns: repeat(2, minmax(0, 443px));
	}
}

/* 3+ carousel. */

.video-portrait__carousel {
	position: relative;
}

.video-portrait__swiper {
	overflow: clip;
	overflow-y: visible;
	padding-block: var(--space-s);
}

.video-portrait__swiper .swiper-slide {
	width: 220px;
	transition: transform 0.5s ease;
	opacity: 1;
}

.video-portrait__swiper .swiper-slide-active {
	transform: scale(1.25);
	z-index: 2;
}

@media (min-width: 768px) {
	.video-portrait__swiper .swiper-slide {
		width: 280px;
	}
}

@media (min-width: 1200px) {
	.video-portrait__swiper .swiper-slide {
		width: 320px;
	}
}

/* Carousel nav arrows — plain dark glyphs, no circle / background. */

.video-portrait__carousel .swiper-button-prev,
.video-portrait__carousel .swiper-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	background: transparent;
	color: var(--color-dark, #13140d);
	border: 0;
	border-radius: 0;
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0.25rem;
	transition: opacity 0.2s ease;
}

.video-portrait__carousel .swiper-button-prev { left: var(--space-s); }

.video-portrait__carousel .swiper-button-next { right: var(--space-s); }

.video-portrait__carousel .swiper-button-prev svg,
.video-portrait__carousel .swiper-button-next svg {
	width: 1.5rem;
	height: 1.5rem;
}

.video-portrait__carousel .swiper-button-prev:hover,
.video-portrait__carousel .swiper-button-next:hover,
.video-portrait__carousel .swiper-button-prev:focus-visible,
.video-portrait__carousel .swiper-button-next:focus-visible {
	opacity: 0.7;
}

.video-portrait__carousel .swiper-button-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* Progress bar. */

.video-portrait__progress {
	margin: var(--space-xl) auto 0;
	width: min(60%, 420px);
	height: 4px;
	width: 150px;
    background: grey;
	border-radius: 20px;
	overflow: hidden;
}

.video-portrait__progress-fill {
	display: block;
	width: 0%;
	height: 100%;
	background: var(--color-primary);
	transition: width 0.1s linear;
}

/* ── Sound toggle ────────────────────────────────────────────────────
   Small speaker chip pinned to the bottom-right of the video. Both
   icons render in the DOM; the [data-muted] attribute swaps which
   one is visible so we avoid a layout shift on toggle. */

.video-sound-toggle {
	position: absolute;
	bottom: 1.5rem;
	right: 1.25rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgb(230 232 107);
	color: #0c0c0c;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.video-sound-toggle:hover,
.video-sound-toggle:focus-visible {
	background: rgb(230 232 107);
	filter: brightness(0.92);
}

.video-sound-toggle:focus-visible {
	outline: 2px solid #0c0c0c;
	outline-offset: 2px;
}

.video-sound-toggle__icon {
	width: 1.1rem;
	height: 1.1rem;
	display: none;
}

.video-sound-toggle[data-muted="1"] .video-sound-toggle__icon--muted { display: block; }

.video-sound-toggle[data-muted="0"] .video-sound-toggle__icon--unmuted { display: block; }

/* Landscape inline: parent .iframe-wrapper needs to be a positioning
   context so the button sits over the iframe rather than the section. */

.block--video.aspect--landscape .iframe-wrapper {
	position: relative;
}

/* Portrait carousel: one button per slide. Non-active slides get their
   buttons hidden to avoid noise on tiny thumbnails; the active slide's
   button remains interactive at the base bottom-right position. */

.block--video.aspect--portrait .video-portrait__carousel .swiper-slide:not(.swiper-slide-active) .video-sound-toggle {
	opacity: 0;
	pointer-events: none;
}

/* What We Do block — full-bleed yellow band with a 2-column list of
   labels separated by full-width dividers. The block.php groups items
   into rows of 2 so each divider spans the row width (no gap between
   columns). See template-parts/blocks/what-we-do/what-we-do.php. */

.what-we-do {
    background-color: var(--color-primary);
    color: var(--color-dark);
    padding-block: clamp(2rem, 6vw, 4.5rem);
}

.what-we-do__inner {
    display: flex;
    flex-direction: column;
}

.what-we-do__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--size-2xl);
    line-height: 1.1;
    font-weight: 400;
    padding-block-end: clamp(1.25rem, 3vw, 2rem);
    border-block-end: 1px solid var(--color-dark);
}

.what-we-do__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each row spans the full content width with a single divider line
   below it. Inside the row, the two labels share a 2-col grid. */

.what-we-do__row {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: clamp(1.5rem, 4vw, 4rem);
    padding-block: clamp(1.25rem, 3vw, 2rem);
    border-block-end: 1px solid var(--color-dark);
}

@media (min-width: 640px) {
    .what-we-do__row {
        grid-template-columns: 1fr 1fr;
    }
}

.what-we-do__row:last-child {
    border-block-end: 0;
}

.what-we-do__item {
    font-family: var(--font-heading);
    font-size: var(--size-xl);
    font-weight: 500;
    line-height: 1.2;
}

/* Mobile: stack every label in a single column with its own underline,
   rather than pairing two per row with a shared row divider. */

@media (max-width: 639px) {
    .what-we-do__row {
        display: block;
        padding-block: 0;
        border-block-end: 0;
    }

    .what-we-do__item {
        display: block;
        padding-block: clamp(1rem, 4vw, 1.5rem);
        border-block-end: 1px solid var(--color-dark);
    }

    /* No trailing divider after the very last label. */
    .what-we-do__row:last-child .what-we-do__item:last-child {
        border-block-end: 0;
    }
}

/* Work filter — two-level: service tabs on top, sector <select> below. */

.work-filter {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s, 1rem);
  margin-block: var(--space-l, 1rem);
  /* margin-block: var(--space-l, 1rem); */
}

.work-filter__services {
  list-style: none;
  padding: 0;
  margin: 0;
}

.work-filter__sectors {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 0.5rem);
  min-width: 175px;
}

@media (min-width: 760px) {

.work-filter__sectors {
    justify-content: flex-end
}
  }

.work-filter__select {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 28px 4px 12px;
  border: 0;
  border-radius: 999px;
  background-color: var(--color-light, #f4f3e7);
  color: var(--color-dark);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
  font-family: inherit;
  font-size: var(--size-step-00, 0.8rem);
  line-height: 1.4;
  cursor: pointer;
}

@media (max-width: 640px) {
  .work-filter {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── acf/work-grid block wrapper ─────────────────────────────────────
   Title + link head, then a stack of row layouts. Matches the row gap
   used inside the work-page block so the two blocks look the same
   when stacked on the page. */

.work-grid-block__head {
  margin-block-end: var(--space-s, 2rem);
}

.work-grid-block__rows {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 760px) {

.work-grid-block__rows {
    gap: 1rem
}
  }

/* Bento 2-column grid — every third tile spans both columns. Half-width
   tiles are 16:9; full-width tiles are 32:9 so their row height matches
   a half-width tile next to it (gap is zero so the maths is clean). */

.work-grid,
.block--work-grid .work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3xs, 0.25rem);
  list-style: none;
  width: 100%;
  box-sizing: border-box;
}

.work-grid__item {
  grid-column: span 1;
  min-width: 0;
}

.work-grid__item:nth-child(3n) {
  grid-column: span 2;
}

/* Tile link is the positioning context for media + overlay. */

.work-grid__inner,
.work-grid__inner:link,
.work-grid__inner:visited {
  text-decoration: none;
  color: var(--color-light, #fff);
}

.work-grid__inner {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-dark, #030303);
  border-radius: var(--radius-card, 10px);
}

/* Full-width tiles in the bento — wider so their height matches the
   half-width neighbours sat next to them. */

/* .work-grid__item:nth-child(3n) .work-grid__inner { */

/* aspect-ratio: 32 / 9; */

/* aspect-ratio: 24 / 9;
} */

/* Portrait tiles — used by the Work Page block's 9:16 rows. */

.work-grid__item--9-16 .work-grid__inner,
.work-page__row--9-16 .work-grid__item .work-grid__inner {
  aspect-ratio: 9 / 16;
}

.work-grid__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.work-grid__media picture,
.work-grid__media img,
.work-grid__placeholder,
.work-grid__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.work-grid__placeholder {
  background-color: transparent;
}

.work-grid__video {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Vimeo iframe variant — swapped in at runtime when the hover URL is a
   plain vimeo.com link. Fills the tile; Vimeo's player letterboxes
   non-matching aspect ratios on a dark background which blends with
   the bg-dark tile. */

.work-grid__video--iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-dark);
  object-fit: cover;
}

.work-grid__inner:hover .work-grid__video,
.work-grid__inner:focus-visible .work-grid__video {
  opacity: 1;
}

.work-grid__inner:hover .work-grid__media img,
.work-grid__inner:focus-visible .work-grid__media img {
  transform: scale(1.02);
}

/* Overlay — always rendered (SEO). Gradient darkens on hover. */

.work-grid__overlay {
  position: absolute;
  inset: 0;
  display: block;
  padding: var(--space-s, 1rem);
  color: var(--color-light, #fff);
  pointer-events: none;
  z-index: 2;
}

.work-grid__overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0) 80%
  );
  transition: opacity 0.3s ease;
  /* Hidden until hover/focus reveals the text overlay below. */
  opacity: 0;
}

.work-grid__inner:hover .work-grid__overlay-gradient,
.work-grid__inner:focus-visible .work-grid__overlay-gradient {
  opacity: 1;
}

.work-grid__hover {
  position: absolute;
  left: var(--space-m, 1.5rem);
  right: calc(var(--space-m, 1.5rem) + 3rem);
  bottom: var(--space-m, 1.5rem);
  max-width: 600px;
}

.work-grid__service {
  display: block;
  color: var(--color-primary);
  margin-bottom: var(--space-3xs, 0.25rem);
}

.work-grid__summary {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1vw + 0.6rem, 1.25rem);
  line-height: 1.3;
  font-weight: 400;
}

.work-grid__summary svg {
  color: var(--color-primary);
  fill: var(--color-primary);
}

.work-grid__summary svg path,
.work-grid__summary svg rect {
  fill: currentColor;
  stroke: currentColor;
}

/* Bottom-right arrow — fades in on hover/focus.
   Plain yellow glyph: no bg, no padding, no circle. */

.work-grid__arrow {
  position: absolute;
  right: var(--space-m, 1.5rem);
  bottom: var(--space-m, 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.work-grid__arrow svg {
  width: 1.25rem;
  height: auto;
}

.work-grid__arrow svg path {
  stroke: var(--color-primary);
}

@media (hover: hover) {
  /* Hover reveal — hide the service label, summary and arrow at rest and
     stagger them in on hover so the eye reads down: service → summary →
     arrow. Animation lives on the children (not the .work-grid__hover
     wrapper) so each can carry its own transition-delay. */
  .work-grid__service,
  .work-grid__summary,
  .work-grid__arrow {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0ms;
  }

  .work-grid__inner:hover .work-grid__service,
  .work-grid__inner:focus-visible .work-grid__service {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
  }

  .work-grid__inner:hover .work-grid__summary,
  .work-grid__inner:focus-visible .work-grid__summary {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
  }

  .work-grid__inner:hover .work-grid__arrow,
  .work-grid__inner:focus-visible .work-grid__arrow {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 160ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .work-grid__service,
    .work-grid__summary,
    .work-grid__arrow,
    .work-grid__inner:hover .work-grid__service,
    .work-grid__inner:focus-visible .work-grid__service,
    .work-grid__inner:hover .work-grid__summary,
    .work-grid__inner:focus-visible .work-grid__summary,
    .work-grid__inner:hover .work-grid__arrow,
    .work-grid__inner:focus-visible .work-grid__arrow {
      transition-delay: 0ms;
    }
  }
}

@media (max-width: 540px) {
  .work-grid,
  .block--work-grid .work-grid {
    grid-template-columns: 1fr;
    /* More breathing room between stacked cards on mobile. */
    row-gap: var(--space-l, 3rem);
  }

  .work-grid__item,
  .work-grid__item:nth-child(3n) {
    grid-column: span 1;
  }

  .work-grid__item:nth-child(3n) .work-grid__inner {
    aspect-ratio: 16 / 9;
  }

  /* Mobile: drop the overlay treatment — show the image, then the
     title/service inline beneath it (no gradient, no hover reveal). */
  .work-grid__inner {
    aspect-ratio: auto;
    overflow: visible;
    background-color: transparent;
    border-radius: 0;
    color: var(--color-dark);
  }

  /* Mobile thumbnails keep the tile's authored aspect ratio — landscape
     tiles render 16:9, portrait tiles stay 9:16 so vertical videos
     don't get cropped down to a letterbox. */
  .work-grid__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card, 10px);
    overflow: hidden;
  }

  .work-grid__item--9-16 .work-grid__media {
    aspect-ratio: 9 / 16;
    margin-inline: auto;

  }

  .work-grid__overlay {
    position: static;
    padding: var(--space-2xs, 0.5rem) 0 0;
    color: var(--color-dark);
    pointer-events: auto;
  }

  .work-grid__overlay-gradient {
    display: none;
  }

  .work-grid__hover {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: none;
    opacity: 1;
    transform: none;
  }

  .work-grid__service {
    color: var(--color-dark);
  }

  .work-grid__summary {
    color: var(--color-dark);
  }

  .work-grid__arrow {
    display: none;
  }
}

/* Cards block bento variant — 6-col grid. First tile 4 cols, next 2 cols,
   next full width (6 cols), then repeat. Tiles share row height so each
   row visually fills top-to-bottom. */

.work-grid--bento-6 {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
}

.work-grid--bento-6 .work-grid__item,
.work-grid--bento-6 .work-grid__item:nth-child(3n) {
  grid-column: span 6;
}

.work-grid--bento-6 .work-grid__item:nth-child(3n + 1) {
  grid-column: span 4;
}

.work-grid--bento-6 .work-grid__item:nth-child(3n + 2) {
  grid-column: span 2;
}

.work-grid--bento-6 .work-grid__inner,
.work-grid--bento-6 .work-grid__item:nth-child(3n) .work-grid__inner {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
}

@media (max-width: 540px) {
  .work-grid--bento-6 {
    grid-template-columns: 1fr;
  }

  .work-grid--bento-6 .work-grid__item,
  .work-grid--bento-6 .work-grid__item:nth-child(3n),
  .work-grid--bento-6 .work-grid__item:nth-child(3n + 1),
  .work-grid--bento-6 .work-grid__item:nth-child(3n + 2) {
    grid-column: span 1;
  }

  .work-grid--bento-6 .work-grid__inner {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

/* Auto "More work" at the foot of a work single — 3 equal tiles. */

.block--next-work .work-grid {
  grid-template-columns: repeat(3, 1fr);
}

.block--next-work .work-grid__item,
.block--next-work .work-grid__item:nth-child(3n) {
  grid-column: span 1;
}

.block--next-work .work-grid__item:nth-child(3n) .work-grid__inner {
  aspect-ratio: 16 / 9;
}

@media (max-width: 900px) {
  .block--next-work .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* "Other case studies" — straight 2-up equal tiles, no bento pattern. */

.block--other-case-studies .work-grid {
  grid-template-columns: repeat(2, 1fr);
}

.block--other-case-studies .work-grid__item,
.block--other-case-studies .work-grid__item:nth-child(3n) {
  grid-column: span 1;
}

.block--other-case-studies .work-grid__item:nth-child(3n) .work-grid__inner {
  aspect-ratio: 16 / 9;
}

/* Work page block — yellow header band that overlaps into the grid.
   See template-parts/blocks/work-page/work-page.php. */

.work-page {
    position: relative;
}

/* Yellow header — contained inside the wrapper (off-white margins on
   either side), rounded corners. Padding-bottom is generous so the
   band extends well below the filter bar; the grid below uses a
   negative margin-top to pull its first row up over the band. */

.work-page__header {
    background-color: var(--color-primary);
    color: var(--color-dark);
    border-radius: var(--radius-card, 16px);
    padding-block: var(--space-xl) var(--space-4xl);
    padding-inline: var(--space-xl);
    margin-inline: auto;
    max-width: clamp(16rem, var(--wrapper-max-width, 90vw), 90rem);
}

@media (max-width: 640px) {
    .work-page__header {
        padding-inline: var(--space-m);
        border-radius: var(--radius-card, 12px);
    }
}

.work-page__preheader {
    color: var(--color-dark);
}

.work-page__title {
    margin: 0;
}

/* Pull the grid up into the yellow band so the first row overlaps. */

.work-page__grid-wrapper {
    position: relative;
    margin-top: calc(var(--space-2xl) * -2);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.work-page__empty {
    margin: var(--space-l) 0;
    text-align: center;
    color: var(--color-dark);
}

/* ── Authored rows ─────────────────────────────────────────────────── */

.work-page__row {
    display: grid;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xs, 0.5rem) 0;
}

@media (min-width: 760px) {

.work-page__row {
        gap: var(--space-xs, 0.5rem)
}
    }

/* Layout: 1 Landscape — single full-width 16:9 tile. */

.work-page__row--landscape {
    grid-template-columns: 1fr;
}

/* Layout: 2 Side-by-side — two equal 16:9 tiles. */

.work-page__row--side-by-side {
    grid-template-columns: repeat(2, 1fr);
}

/* Layout: 3 Portrait — three equal 9:16 tiles. */

.work-page__row--3-portrait {
    grid-template-columns: repeat(3, 1fr);
}

/* Layout: 2 Portrait — auto-packer tail case when two portraits remain
   with no landscape to pair with. Centred (max-width 66.6%) to avoid an
   empty third column. Row gets an explicit aspect-ratio so its height
   doesn't collapse to zero when the column width degenerates under
   minmax(0, 1fr); inner tiles then fill 100% of that height. */

.work-page__row--2-portrait {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 66.6%;
    margin-inline: auto;
    aspect-ratio: 9 / 8;
}

.work-page__row--2-portrait .work-grid__inner {
    aspect-ratio: auto;
    height: 100%;
}

/* Mixed-aspect rows: column widths from the layout-icon mocks (313.98 /
   169.99). Both tiles fill the row's height — the per-tile aspect-ratio
   rules in block--work-grid.css are overridden inside these rows so the
   tiles match heights instead of dictating them. */

.work-page__row--landscape-portrait {
    grid-template-columns: minmax(0, 313.98fr) minmax(0, 169.99fr);
    aspect-ratio: 491 / 202;
}

.work-page__row--portrait-landscape {
    grid-template-columns: minmax(0, 169.99fr) minmax(0, 313.98fr);
    aspect-ratio: 491 / 202;
}

.work-page__row--landscape-portrait .work-grid__inner,
.work-page__row--portrait-landscape .work-grid__inner {
    aspect-ratio: auto;
    height: 100%;
}

/* Inside a row, every tile is a single column (override the bento's
   every-third-child full-width rule). */

.work-page__row .work-grid__item,
.work-page__row .work-grid__item:nth-child(3n) {
    grid-column: span 1;
    min-width: 0;
}

/* Phones: collapse all rows to single column; drop the row's fixed
   aspect-ratio so mixed rows don't squish vertically. */

@media (max-width: 640px) {
    .work-page__row {
        grid-template-columns: 1fr !important;
        aspect-ratio: auto !important;
    }
    .work-page__row--2-portrait {
        max-width: none;
    }
    .work-page__row--2-portrait .work-grid__inner,
    .work-page__row--landscape-portrait .work-grid__inner,
    .work-page__row--portrait-landscape .work-grid__inner {
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

.block--usps .block--usps--item {
    border: 0;
    background-color: var(--color-primary);
    color: var(--color-dark);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Big gap between the head (number + title) and the content body. */
    gap: 3rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* min-height: 400px; */

  }

.block--usps a.block--usps--item--linked:hover,
  .block--usps a.block--usps--item--linked:focus-visible {
    transform: translateY(-2px);
  }

.block--usps .block--usps--head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

/* .block--usps--number {
    font-size: 0.875em;
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0.7;
    color: inherit;
  } */

.block--usps .block--usps--title {
    margin: 0;
    color: inherit;
    font-weight: 400;
  }

.block--usps .block--usps--content {
    color: inherit;
  }

.block--usps .block--usps--cta {
    display: inline-block;
    font-weight: 600;
    color: inherit;
  }

@media (max-width: 768px) {
    .block--usps .block--usps--item {
      padding: 1.5rem !important;
      gap: 2rem;
    }
  }

/* ── Sticky Image layout ─────────────────────────────────────────────────────
   Left column: USP cards stacked. Right column: a single image area that
   sticks to the top of the viewport and swaps to the matching USP's image
   as each card scrolls into view (handled by JS via .is-active). */

/* The block's outer .wrapper has the .radius utility which sets
   overflow: hidden — that disables position: sticky on descendants.
   Restore visible overflow for the sticky variant so the media column
   can actually stick. */

.block--usps--sticky-image-variant .wrapper.radius {
  overflow: visible;
}

.block--usps--sticky {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 900px) {
  .block--usps--sticky {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}

.block--usps--sticky__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.block--usps--sticky__item {
  /* Each card uses the existing .block--usps--item base. The sticky
     variant tightens the min-height so a card fits comfortably beside
     a single sticky image at desktop sizes. */
  min-height: auto;
}

.block--usps--sticky__media {
  /* On mobile the media stack flows under the last card. On desktop we
     stick it to the top so it stays visible while cards scroll past. */
  position: relative;
}

@media (min-width: 900px) {
  .block--usps--sticky__media {
    position: sticky;
    top: 8rem;
    height: calc(100vh - 12rem);
    max-height: 680px;
  }
}

.block--usps--sticky__media-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-card, 10px);
  overflow: hidden;
  background-color: var(--color-light-grey, #e7e7e7);
}

.block--usps--sticky__image {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.block--usps--sticky__image.is-active {
  opacity: 1;
}

.block--usps--sticky__image picture,
.block--usps--sticky__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 899px) {
  /* Mobile fallback: show each card's image inline above its copy,
     bypassing the sticky behaviour entirely. */
  .block--usps--sticky__media {
    display: none;
  }
}

.button {
    align-items: center;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 60px;
    color: var(--color-dark);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--size-step-0);
    gap: 0 var(--space-2xs);
    justify-content: center;
    line-height: 1;
    padding: 19px 30px;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    /* } */
}

/* @media screen(md) { */

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

.button svg {
    height: auto;
    transform: rotate(0deg);
    width: 1.85ex
}

.button span+svg {
    width: 1.5ex
}

.button[data-type=secondary],
.button--secondary {
    background: transparent;
    border: 1px solid currentColor;
    color: var(--color-dark);
}

.button--secondary:hover,
.button--secondary:focus-visible {
    background: var(--color-dark);
    color: var(--color-light);
}

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

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

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

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

.button[data-theme=dark]:hover,.button[data-type=secondary]:hover {
    background-color: var(--color-quaternary);
    color: var(--color-dark)
}

.button[data-theme=ghost] {
    background: var(--color-light-shade);
    border: 1px solid var(--color-mid-glare);
    color: var(--color-dark)
}

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

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

/* Cards block bento grid — 6-col grid where the first two children span
   3 cols (50% each) and the rest span 2 cols (thirds). Designed around
   5 items (2 wide on top row, 3 across the bottom), but works for any
   count: the first two are always wider than the rest. */

.cards-grid {
  display: grid;
  width: 100%;
  gap: clamp(1.5rem, 1rem + 1vw, 2.5rem);
}

.cards-grid--bento {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cards-grid--bento > * {
  grid-column: span 2;
  min-width: 0;
}

.cards-grid--bento > *:nth-child(1),
.cards-grid--bento > *:nth-child(2) {
  grid-column: span 3;
}

@media (max-width: 768px) {
  .cards-grid--bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .cards-grid--bento > *,
  .cards-grid--bento > *:nth-child(1),
  .cards-grid--bento > *:nth-child(2) {
    grid-column: span 1;
  }
}

/* Block intros (cards + work-grid): title on the left, "See All" link on
   the right. Both blocks share the same .see-all-link pattern. */

.cards-intro__text,
.work-grid-intro__text {
  flex: 1 1 auto;
  min-width: 0;
}

.see-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.see-all-link__label {
  /* No underline — design wants the label plain. */
  text-decoration: none;
  transition: transform 0.25s ease;
}

/* Shift the label left on hover to open up room for the extending line. */

.see-all-link:hover .see-all-link__label,
.see-all-link:focus-visible .see-all-link__label {
  transform: translateX(-0.75rem);
}

.see-all-link__arrow {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.see-all-link__arrow svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Hover/focus: don't recolour — instead the arrow's shaft "extends".
   A line grows in the gap just left of the arrowhead so it reads as the
   horizontal stroke lengthening. */

/* .see-all-link__arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: -1px;
  height: 1.5px;
  width: 0;
  background: currentColor;
  border-radius: 1px;
  transform: translateY(-50%);
  transition: width 0.25s ease;
} */

/* .see-all-link:hover .see-all-link__arrow::before,
.see-all-link:focus-visible .see-all-link__arrow::before {
  width: 0.75rem;
} */

.card {
  backface-visibility: hidden;
  background-color: transparent;
  color: var(--color-dark);
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
  text-decoration: none;
  border-radius: var(--radius-card, 10px);
  overflow: visible;
}

.card .card--media {
    overflow: hidden;
    border-radius: var(--radius-card, 10px);
  }

.card .card--media img {
      transition: 0.3s;
    }

@media (min-width: 760px) {
        .card .card--media:hover img {
          transform: scale(1.05);
        }
    }

/*.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__content,
.card__media {
  position: relative;
}

.card--content {
  /* Padding on three sides only — design wants the bottom flush. */
  padding: var(--space-xs) 0 0 0;
  z-index: 1;
}

.card--arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  color: var(--color-dark);
  transition: transform 0.3s ease;
}

.card--arrow svg {
  display: block;
  width: 20px;
  height: 20px;
}

.card:hover .card--arrow,
.card:focus-within .card--arrow {
  transform: translateX(4px);
}

/* News archive header — uses the same .site-block + .block--hero classes
   as the slim hero, so it inherits the hero's section / hero padding.
   Only tweak we need is to cap the description width so it doesn't run
   wider than the hero column. */

.news-archive__description {
  max-width: 60ch;
}

/* News archive — square (1:1) media on larger screens. */

@media (min-width: 768px) {
  .news-archive__grid .card .card--media img,
  .news-archive__grid .card .card--media picture,
  .news-archive__grid .card .card--media,
  .cards-grid--posts .card .card--media img,
  .cards-grid--posts .card .card--media picture,
  .cards-grid--posts .card .card--media {
    aspect-ratio: 1 / 1;
  }

  .news-archive__grid .card .card--media img,
  .cards-grid--posts .card .card--media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Cards block — posts variant. The 4-col grid comes from Tailwind classes
   on the wrapper in cards.php; this just overrides the default 16:9
   image rule below so square media is the default at every viewport. */

.cards-grid--posts .card img {
  aspect-ratio: 1 / 1;
}

.card img {
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 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 .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, 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);
  }
}

.filter-bar .button {
        background: var(--color-cream);
        color:  var(--color-black);
        border: none;
        transition: 0.3s;
        font-weight: var(--font-medium);
    }

.filter-bar .button.current, .filter-bar .button:hover {
            background: var(--color-primary);
            color:  var(--color-light);
        }

.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

/* Off-white horizontal rule used between footer sections. */

.site-footer .site-footer__divider {
    border: 0;
    border-top: 1px solid var(--color-light, #f4f3e7);
    opacity: 0.4;
    margin: 3rem 0 1rem;
    width: 100%;
  }

/* All footer links: no underline; primary colour on hover/active/focus
     with a 0.3s transition. */

.site-footer a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
  }

.site-footer a:hover,
  .site-footer a:focus-visible,
  .site-footer a:active,
  .site-footer a.is-active,
  .site-footer a[aria-current="page"] {
    color: var(--color-primary);
    text-decoration: none;
  }

.site-footer .site-footer__cta-label {
    margin: 0 0 0.5rem;
  }

.site-footer .site-footer__cta-value {
    font-size: 1.125em;
    margin: 0;
  }

.site-footer .site-footer__cta-col--bcorp {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }

.site-footer .site-footer__bcorp {
    display: inline-block;
    line-height: 0;
    max-width: 5rem;
  }

.site-footer .site-footer__bcorp img {
      width: 100%;
      height: auto;
      display: block;
    }

.site-footer .site-footer__nav-heading {
    font-size: 0.875em;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0 0 2rem;
  }

.site-footer .site-footer__nav-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

.site-footer .site-footer__nav-col li {
    margin-bottom: 0.5rem;
  }

/* Bumped specificity so this beats the .footer-nav rule that lives
     in nav.css (which still targets an undefined light-blue token). */

.site-footer .site-footer__nav-col li a,
  .site-footer .site-footer__nav-col ul.footer-nav li a {
    color: inherit;
    transition: color 0.3s ease;
  }

.site-footer .site-footer__nav-col li a:hover,
  .site-footer .site-footer__nav-col li a:focus-visible,
  .site-footer .site-footer__nav-col li.current-menu-item > a,
  .site-footer .site-footer__nav-col li.current_page_item > a,
  .site-footer .site-footer__nav-col ul.footer-nav li:not(.button) a:hover {
    color: var(--color-primary);
  }

.site-footer .site-footer__address {
    line-height: 1.5;
  }

.site-footer .site-footer__address p {
    margin: 0 0 0.25rem;
  }

/* Each <br> in the address acts as a row break with the same vertical
     rhythm as the nav <li> spacing (0.5rem) above. */

.site-footer .site-footer__address br {
    display: block;
    content: "";
    margin-bottom: 0.5rem;
  }

/* Full-bleed alt logo brandmark sits below the nav grid.
     Rendered as a Lottie animation ("up and out" — skylark bird lifts off the
     wordmark). Canvas is 281×83 with 12px extra right + 10px extra top of
     transparent padding, so aspect-ratio locks the container height before the
     SVG loads. Wordmark inside carries the butter fill baked into the JSON. */

.site-footer .site-footer__brandmark {
    margin: 6rem 0 0;
    width: 100%;
    aspect-ratio: 281 / 83;
    line-height: 0;
    cursor: pointer;
  }

.site-footer .site-footer__brandmark svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

@media (min-width: 768px) {
    .site-footer .site-footer__brandmark {
      margin-top: 10rem;
    }
  }

.site-footer .site-footer__small-print {
    font-size: 0.875em;
    opacity: 0.85;
  }

.site-footer .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

.site-footer .social-links li {
      display: inline-flex;
      margin: 0;
    }

.site-footer .social-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--color-light);
      transition: color 0.3s ease;
    }

.site-footer .social-links a:hover,
    .site-footer .social-links a:focus-visible {
      color: var(--color-primary);
    }

.site-footer .social-links svg {
      width: 1.5rem;
      height: 1.5rem;
    }

.site-footer .social-links svg path,
      .site-footer .social-links svg circle,
      .site-footer .social-links svg rect {
        fill: currentColor;
        transition: fill 0.3s ease;
      }

/* Site-wide contact roundel — fixed bottom-right; the text ring rotates
   (see roundel.js). Lives outside .site-footer so it floats on every page.
   Hidden on home until the user scrolls past ~30% of the intro stage
   (roundel.js toggles .is-visible on scroll). */

.roundel {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2.5rem);
  bottom: clamp(1rem, 2.5vw, 2.5rem);
  z-index: 9000;
  width: clamp(96px, 11vw, 168px);
  display: block;
  line-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.35s ease;
}

.roundel.is-visible {
  opacity: 1;
  visibility: visible;
}

/* When the footer's small print scrolls into view, lift the roundel
   above it so it stops covering the Privacy / credit links. Offset is
   set from JS to match the small-print row's measured height. */

.roundel.is-parked {
  transform: translateY(calc(-1 * var(--roundel-park-offset, 90px)));
}

.roundel svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Colours invert on hover: butter disc + off-black text becomes off-black
   disc + butter text/mark. */

.roundel ellipse {
  fill: var(--color-primary);
  transition: fill 0.3s ease;
}

.roundel path {
  fill: var(--color-dark);
  transition: fill 0.3s ease;
}

.roundel:hover ellipse {
  fill: var(--color-dark);
}

.roundel:hover path {
  fill: var(--color-primary);
}

.roundel__text {
  will-change: transform;
}

.nav-logo {
  width: 100px;
  color: inherit;
  /* Allow the hover-hop to poke above the wrapper without being clipped. */
  overflow: visible;
}

.nav-logo a {
    display: inline-flex;
    color: inherit;
    overflow: visible;
  }

.nav-logo svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

@media (min-width: 760px) {

.nav-logo svg {
      max-height: clamp(20px, 2.2vw, 26px)
  }
    }

/* Letter-by-letter hop on hover. Each <path> in inline-sk_logo.svg is one
   letter (plus the dot accent). Paths are stored right-to-left in the
   source, so :nth-last-child(1) targets the leftmost letter ("s") and we
   step through in reading order via increasing animation-delay.
   Pixel-value translate (rather than %) keeps the letters snapping to
   whole pixels on each frame — % translates on SVG paths tend to land on
   fractional pixels which the browser anti-aliases, softening the edges. */

@keyframes nav-logo-hop {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

.nav-logo a:hover svg path,
.nav-logo a:focus-visible svg path {
  animation: nav-logo-hop 320ms ease-out both;
}

.nav-logo a:hover svg path:nth-last-child(1),
.nav-logo a:focus-visible svg path:nth-last-child(1) { animation-delay: 0ms;   }

/* s */

.nav-logo a:hover svg path:nth-last-child(2),
.nav-logo a:focus-visible svg path:nth-last-child(2) { animation-delay: 55ms;  }

/* k */

.nav-logo a:hover svg path:nth-last-child(3),
.nav-logo a:focus-visible svg path:nth-last-child(3) { animation-delay: 110ms; }

/* y */

.nav-logo a:hover svg path:nth-last-child(4),
.nav-logo a:focus-visible svg path:nth-last-child(4) { animation-delay: 165ms; }

/* l */

.nav-logo a:hover svg path:nth-last-child(5),
.nav-logo a:focus-visible svg path:nth-last-child(5) { animation-delay: 220ms; }

/* a */

.nav-logo a:hover svg path:nth-last-child(6),
.nav-logo a:focus-visible svg path:nth-last-child(6) { animation-delay: 275ms; }

/* r */

.nav-logo a:hover svg path:nth-last-child(7),
.nav-logo a:focus-visible svg path:nth-last-child(7) { animation-delay: 330ms; }

/* k */

.nav-logo a:hover svg path:nth-last-child(8),
.nav-logo a:focus-visible svg path:nth-last-child(8) { animation-delay: 385ms; }

/* accent dot */

@media (prefers-reduced-motion: reduce) {
  .nav-logo a:hover svg path,
  .nav-logo a:focus-visible svg path {
    animation: none;
  }
}

/* Sticky reveal-on-scroll-up. JS toggles .nav-is-hidden, .nav-is-visible
   and .page-is-at-top on <html> (see src/js/components/hidenavonscroll.js).
   - Scrolling down  → header slides off the top.
   - Scrolling up    → header slides back in (still transparent).
   - At top of page  → transparent.
   Header z-index sits above offside.js' panel (it uses 9999) so the
   hamburger-turned-cross stays visible and clickable while the menu is open. */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background-color: transparent;
  color: var(--color-dark);
  transform: translateY(0);
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header .site-header-content {
    padding: 2rem 0;
    background: transparent;
  }

/* While the off-canvas is open: keep the header transparent (the dark
   panel sits beneath it) and recolour the logo + hamburger so they read
   on the dark surface. The chained selector outweighs the
   `html.nav-is-visible .site-header` light-bg rule below. */

html body.offside-js--is-open .site-header,
html body.offside-js--is-open .site-header .site-header-content,
html.nav-is-visible body.offside-js--is-open .site-header,
html.nav-is-visible body.offside-js--is-open .site-header .site-header-content {
  background-color: transparent;
  box-shadow: none;
}

body.offside-js--is-open .nav-logo {
  color: var(--color-light);
}

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

html.nav-is-visible .site-header {
  transform: translateY(0);
  background-color: var(--color-light, #f4f3e7);
}

html.nav-is-visible .site-header .site-header-content {
  background-color: var(--color-light, #f4f3e7);
}

html.page-is-at-top .site-header,
html.page-is-at-top .site-header .site-header-content {
  background-color: transparent;
  box-shadow: none;
}

/* Mobile: once the page is scrolled past the top, keep the header's
   light background regardless of scroll direction. Desktop still
   toggles the bg on scroll-up (via .nav-is-visible above); on mobile
   the transient "no bg / not at top" state clashes with page content
   whenever the header briefly reappears, so lock the bg on instead. */

@media (max-width: 768px) {
  html:not(.page-is-at-top) .site-header,
  html:not(.page-is-at-top) .site-header .site-header-content {
    background-color: var(--color-light, #f4f3e7);
  }
}

.hamburger {
  background: transparent;
  border: none;
  padding: 0.5rem;
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  /* Sits above offside's panel (z-index 9999) so it remains clickable
     while the menu is open and can be used to close it. */
  z-index: 10001;
}

.hamburger .hamburger-inner,
  .hamburger .hamburger-inner::before,
  .hamburger .hamburger-inner::after,
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: currentColor;
    height: 2px;
    border-radius: 50px;
  }

.hamburger:hover,
.hamburger:focus-visible {
  color: var(--color-primary);
}

/* When the off-canvas is open, swap the bar colour to light so the X
   reads on the dark panel. */

body.offside-js--is-open .hamburger {
  color: var(--color-light);
}

body.offside-js--is-open .hamburger:hover,
body.offside-js--is-open .hamburger:focus-visible {
  color: var(--color-primary);
}

.menu li:not(.button) a {
  transition: 0.3s;
}

.menu a {
  text-decoration: none;
}

.menu li:not(.button) a {
  color: var(--color-dark);
}

.menu .sub-menu li:not(.button) a {
  color: var(--color-dark);
}

.menu,
.footer-nav {
  text-decoration: none;
}

/* Footer nav keeps the hover → primary colour (handled in the dedicated
   footer rule in footer.css with higher specificity). */

.footer-nav .current_page_item,
.footer-nav li:not(.button) a:hover {
  color: var(--color-primary);
}

/* Hover / active state on the top-bar nav: link text goes bold and a
   dot indicator appears below. To prevent the bolder glyph widths from
   pushing surrounding items, each link reserves its bold width via a
   hidden ::before pseudo-element carrying the same text at bold weight.
   ::after is reserved for the dot. */

.desktop-menu > li:not(.button) > a {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.desktop-menu > li:not(.button) > a::before {
  content: attr(data-text);
  font-weight: 700;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

/* Dot indicator — sits below the link, fades in on hover/active. */

.desktop-menu > li:not(.button) > a::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.desktop-menu > li:not(.button):hover > a,
.desktop-menu > li:not(.button):focus-within > a,
.desktop-menu > li:not(.button).current-menu-item > a,
.desktop-menu > li:not(.button).current-menu-ancestor > a,
.desktop-menu > li:not(.button).current-menu-parent > a,
.desktop-menu > li:not(.button).current_page_item > a,
.desktop-menu > li:not(.button).current_page_ancestor > a,
.desktop-menu > li:not(.button).current_page_parent > a {
  font-weight: 700;
}

.desktop-menu > li:not(.button):hover > a::after,
.desktop-menu > li:not(.button):focus-within > a::after,
.desktop-menu > li:not(.button).current-menu-item > a::after,
.desktop-menu > li:not(.button).current-menu-ancestor > a::after,
.desktop-menu > li:not(.button).current-menu-parent > a::after,
.desktop-menu > li:not(.button).current_page_item > a::after,
.desktop-menu > li:not(.button).current_page_ancestor > a::after,
.desktop-menu > li:not(.button).current_page_parent > a::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Push everything below the fixed header by the nav's height — except
   when the first block on the page is the hero, in which case we want
   the hero to start at y:0 and the transparent header to overlay it.
   `:not(.wp-admin)` keeps this out of the block editor canvas
   (add_editor_style pipes this file into the editor). */

body:not(.wp-admin):not(.offside-js--is-open):not(.first-block-is-hero):not(.first-block-is-home-hero):not(.first-block-is-home-intro),
.single-post {
  margin-top: var(--nav-height, 100px);
}

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

/* Hero-first pages: the body has no margin-top (so the hero's bg sits
   under the transparent header). The hero's *content* still needs room
   to clear the header — give the inner content wrapper top padding
   equal to the nav height. The bg lives in .hero-background, which is
   absolutely positioned inside .hero-wrapper, so it still covers the
   full hero area including the padded region. */

body.first-block-is-hero .block--hero .hero-content--wrapper {
  padding-top: var(--nav-height, 100px);
}

body.first-block-is-home-hero .block--home-hero .home-hero {
  padding-top: calc(var(--nav-height, 100px) + var(--space-l, 3rem));
}

/* Hero-first pages at the top: transparent header with butter
   logo + nav links (overlays the hero / home intro). */

html.page-is-at-top body.first-block-is-home-hero .site-header, html.page-is-at-top body.first-block-is-home-intro .site-header {
    color: var(--color-primary, #e6e86b);
  }

html.page-is-at-top body.first-block-is-home-hero .hamburger, html.page-is-at-top body.first-block-is-home-intro .hamburger {
    color: var(--color-primary, #e6e86b);
  }

html.page-is-at-top body.first-block-is-home-hero .desktop-menu > li:not(.button) > a,
  html.page-is-at-top body.first-block-is-home-hero .menu li:not(.button) a,
  html.page-is-at-top body.first-block-is-home-intro .desktop-menu > li:not(.button) > a,
  html.page-is-at-top body.first-block-is-home-intro .menu li:not(.button) a {
    color: var(--color-primary, #e6e86b);
  }

/* …but sub-menu (sub-page) links always read dark on their off-white
     panel, even at the transparent/butter page top. */

html.page-is-at-top body.first-block-is-home-hero .desktop-menu .sub-menu li:not(.button) a, html.page-is-at-top body.first-block-is-home-intro .desktop-menu .sub-menu li:not(.button) a {
    color: var(--color-dark);
  }

@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
  }
    }

/* display: block; */

@media (min-width: 31em) {

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

.desktop-menu {
  display: flex;
}

/* Sub-menu always rendered in DOM (visibility-toggled) so the items
     remain crawlable; absolute-positioned so it doesn't shift layout.
     Light surface with dark links; on hover the link text slides right
     to make space for a primary-yellow dot that fades in on the left. */

.desktop-menu .sub-menu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    transform: translateY(0.25rem);
    flex-direction: column;
    position: absolute;
    /* Sit slightly lower than the trigger. The ::before bridge below
       keeps the gap hover-able so the dropdown doesn't close when the
       cursor crosses from the nav item to the panel. */
    top: calc(100% + 0.5rem);
    left: 0;
    /* Wide enough that the longest service label (e.g.
       "AI Video Production") fits on a single line, with headroom for
       the hover state which adds padding-left to the link and would
       otherwise push the sub-menu wider on hover. */
    min-width: max-content;
    width: max-content;
    max-width: min(520px, 92vw);
    background: var(--color-light, #f4f3e7);
    padding: var(--space-m, 1.5rem) var(--space-m, 1.5rem);
    border-radius: 10px;
    gap: var(--space-2xs, 0.75rem);
    box-shadow: 0 1px 11px 0 rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    z-index: 50;
  }

/* Invisible bridge spanning the gap between the trigger and the panel
     so the dropdown stays open while the cursor crosses it. */

.desktop-menu .sub-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.75rem;
    height: 0.75rem;
  }

.desktop-menu .sub-menu li:not(.button) a {
    white-space: nowrap;
  }

/* The dot lives on the <li> (not the <a>) so the link can slide right
     via `transform: translateX(...)` without affecting layout. If the
     padding were on the link itself, hovering / clicking would expand
     the link's box and the sub-menu's `width: max-content` would
     recalculate, making the whole dropdown wider. */

.desktop-menu .sub-menu li:not(.button) {
    position: relative;
  }

.desktop-menu .sub-menu li:not(.button)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-dark);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }

/* First / last items have an asymmetric link padding-block (see the
     :first-child / :last-child <a> rules below) so the li's geometric
     centre no longer matches the text centre. Nudge the dot by half the
     link's padding-block so it still lines up with the label. */

.desktop-menu .sub-menu li:not(.button):first-child::before {
    top: calc(50% - var(--space-2xs, 0.5rem) / 2);
  }

.desktop-menu .sub-menu li:not(.button):last-child::before {
    top: calc(50% + var(--space-2xs, 0.5rem) / 2);
  }

.desktop-menu .sub-menu li:not(.button):hover::before,
  .desktop-menu .sub-menu li:not(.button):focus-within::before,
  .desktop-menu .sub-menu li:not(.button).current-menu-item::before,
  .desktop-menu .sub-menu li:not(.button).current_page_item::before {
    opacity: 1;
  }

/* Current sub-item: keep the link slid right so the dot has room,
     matching the hover state. */

.desktop-menu .sub-menu li:not(.button).current-menu-item > a,
  .desktop-menu .sub-menu li:not(.button).current_page_item > a {
    /* transform: translateX(1rem); */
    padding-left: 1rem;
  }

.desktop-menu .sub-menu li:not(.button) a {
    color: var(--color-dark);
    padding-block: var(--space-2xs, 0.5rem);
    transition: 0.2s ease;
  }

/* Trim the outer padding so the panel's own inner padding provides
     the visual gutter — no double-spacing at the top/bottom edges. */

.desktop-menu .sub-menu li:not(.button):first-child a {
    padding-top: 0;
  }

.desktop-menu .sub-menu li:not(.button):last-child a {
    padding-bottom: 0;
  }

.desktop-menu .sub-menu li:not(.button) a:hover,
  .desktop-menu .sub-menu li:not(.button) a:focus-visible {
    /* transform: translateX(1rem); */
    padding-left: 1rem;
  }

.desktop-menu li {
    list-style-type: none;
    display: flex;
    position: relative;
  }

.desktop-menu .menu-item-has-children:hover > .sub-menu,
  .desktop-menu .menu-item-has-children:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

/* ----------------------------------------------------------------------------
   Off-canvas mobile menu
   - Full-viewport panel slid in from the right by offside.js
   - Dark surface using Skylark tokens (matches the wider site palette)
   - Hosts logo, primary nav, contact details and social links
---------------------------------------------------------------------------- */

.off-canvas {
    --off-canvas-bg: var(--color-dark, #13140d);
    --off-canvas-fg: var(--color-light, #f4f3e7);
    --off-canvas-accent: var(--color-primary, #e6e86b);
    --off-canvas-link-border: color-mix(in srgb, var(--color-light) 25%, transparent);

    background-color: var(--off-canvas-bg);
    color: var(--off-canvas-fg);
    padding: var(--space-l) clamp(1.25rem, 4vw, 3rem);
    /* Push content well below the fixed site-header so the first menu
       item clears the logo / hamburger. The panel bg still reaches the
       top of the viewport. */
    padding-block-start: calc(var(--nav-height, 100px) + var(--space-l));
    overflow-y: auto;
}

/* Force offside.js' panel to fill the viewport. Selectors match the
   higher-specificity rules offside-js adds on init so they actually win.
   `position: fixed` is baked in (not waiting for offside.js to add
   .offside) so the panel sits off-screen from the very first paint —
   prevents the FOUC where the dark <nav> renders inline at the top
   of the page during page load. */

.off-canvas#off-canvas-menu,
.offside-js--init .off-canvas#off-canvas-menu {
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 9999;
    width: 100vw;
    max-width: 100vw;
    left: auto;
    right: -100vw;
    display: flex;
    flex-direction: column;
}

.offside--right.is-open#off-canvas-menu,
.offside-js--is-right .offside-sliding-element {
    transform: translate3d(-100vw, 0, 0);
}

/* Disable the page-push behaviour at full-screen so content doesn't visibly slide */

.offside-js--is-right .offside-sliding-element {
    transform: none;
}

.off-canvas__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    flex: 1;
    max-width: 36rem;
    margin-inline: auto;
    width: 100%;
}

/* ── Navigation ──────────────────────────────────────────────────────── */

.off-canvas .off-canvas-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.off-canvas .off-canvas-menu .menu-item {
    border-bottom: 1px solid var(--off-canvas-link-border);
}

.off-canvas .off-canvas-menu .menu-item > a {
    display: block;
    position: relative;
    color: var(--off-canvas-fg);
    padding-block: var(--space-2xs);
    font-family: var(--font-heading, inherit);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 400;
    line-height: 1.15;
    text-decoration: none;
    transition: color 0.2s ease;
}

.off-canvas .off-canvas-menu .menu-item > a:hover,
.off-canvas .off-canvas-menu .menu-item > a:focus-visible {
    color: var(--off-canvas-accent);
}

/* Yellow dot to the left of the current page's menu link. The text
   stays its normal colour; the dot is the only highlight. */

.off-canvas .off-canvas-menu .current-menu-item > a::before,
.off-canvas .off-canvas-menu .current-menu-ancestor > a::before,
.off-canvas .off-canvas-menu .current_page_item > a::before,
.off-canvas .off-canvas-menu .current_page_ancestor > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--off-canvas-accent);
    transform: translateY(-50%);
}

/* Sub-menus — padding-block-end only when open so closed submenus
   don't leave a visible gap beneath their parent. */

.off-canvas .off-canvas-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding-inline-start: var(--space-s);
}

.off-canvas-menu .menu-item-has-children.is-active > .sub-menu {
    padding-block-end: var(--space-2xs);
}

.off-canvas .off-canvas-menu .sub-menu .menu-item {
    border-bottom: 0;
}

.off-canvas .off-canvas-menu .sub-menu .menu-item > a {
    font-size: 1.125rem;
    font-family: inherit;
}

/* Override the global `.menu .sub-menu li:not(.button) a { color: dark }`
   rule from nav.css — inside the off-canvas the sub-menu sits on the
   dark panel so links need to be light. */

.off-canvas .menu .sub-menu li:not(.button) a,
.off-canvas .off-canvas-menu .sub-menu li:not(.button) a {
    color: var(--off-canvas-fg);
}

.off-canvas .menu .sub-menu li:not(.button) a:hover,
.off-canvas .menu .sub-menu li:not(.button) a:focus-visible,
.off-canvas .off-canvas-menu .sub-menu li:not(.button) a:hover,
.off-canvas .off-canvas-menu .sub-menu li:not(.button) a:focus-visible {
    color: var(--off-canvas-accent);
}

/* ── Footer block (contact + socials, pinned to the bottom) ──────────── */

.off-canvas__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding-block-start: var(--space-s);
    border-top: 1px solid var(--off-canvas-link-border);
    font-size: 0.95rem;
}

.off-canvas__contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    line-height: 1.4;
}

.off-canvas__contact a {
    color: var(--off-canvas-fg);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.off-canvas__contact a:hover,
.off-canvas__contact a:focus-visible {
    border-bottom-color: var(--off-canvas-accent);
}

/* Social links — restyle the shared snippet for the dark surface.
   No border, no inner padding box — just the icons in a row. */

.off-canvas__social .social-links {
    display: flex;
    gap: var(--space-s);
    list-style: none;
    margin: 0;
    padding: 0;
}

.off-canvas__social .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--off-canvas-fg);
    transition: color 0.2s ease;
}

.off-canvas__social .social-links a:hover,
.off-canvas__social .social-links a:focus-visible {
    color: var(--off-canvas-accent);
}

.off-canvas__social .social-links svg {
    width: 1.25rem;
    height: 1.25rem;
}

.off-canvas__social .social-links svg path,
.off-canvas__social .social-links svg rect {
    fill: currentColor;
}

/* ── Site overlay ────────────────────────────────────────────────────── */

.site-overlay {
    z-index: 1;
    position: fixed;
    inset: 0;
    background-color: var(--color-dark);
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    transition: visibility 0s ease, opacity 0.2s ease;
}

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

/* Lock the body scroll while the panel is open */

.offside-js--is-open {
    overflow: hidden;
}

/* ── Off-canvas sub-menu accordion animations (preserved) ────────────── */

.off-canvas-menu .menu-item-has-children > a {
    position: relative;
    padding-right: 2rem;
}

.off-canvas-menu .menu-item-has-children > a:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,184a7.97507,7.97507,0,0,1-5.65674-2.34326l-80-79.99976A8,8,0,1,1,53.65674,90.343L128,164.686l74.34326-74.343a8,8,0,0,1,11.31348,11.314l-80,79.99976A7.97507,7.97507,0,0,1,128,184Z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,184a7.97507,7.97507,0,0,1-5.65674-2.34326l-80-79.99976A8,8,0,1,1,53.65674,90.343L128,164.686l74.34326-74.343a8,8,0,0,1,11.31348,11.314l-80,79.99976A7.97507,7.97507,0,0,1,128,184Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    transition: transform 0.3s ease-in-out;
}

.off-canvas-menu .menu-item-has-children.is-active > a:after {
    transform: translateY(-50%) rotate(180deg);
}

.off-canvas-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
    list-style-type: none;
    padding-left: 0.5rem;
}

.off-canvas-menu .menu-item-has-children.is-active > .sub-menu {
    max-height: 700px;
    opacity: 1;
    margin-bottom: 0.5rem;
}

.pill {
    background-color: var(--color-off-white, #fff);
    color: var(--color-dark);
    display: inline-block;
    font-size: var(--size-step-00, 0.8rem);
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pill:hover,
.pill:focus-visible,
.pill.is-current,
.pill.is-active,
a.pill:hover,
a.pill:focus-visible {
    background-color: var(--color-dark);
    color: var(--color-primary);
}

/* Transparent variant used on insights cards: descriptor sits beside
   the headline with no background block. */

.pill--ghost {
    background-color: transparent;
    color: currentColor;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 0;
}

.card .pill {
    font-size: 0.72rem;
    padding: 0.12rem 0.55rem;
}

.card--descriptor {
    margin-bottom: 0.4rem;
}

/* Pinned Text Lines Block Styles */

.pinned-text-lines-container {
  position: relative;
}

.pinned-text-lines-scroll-wrapper {
  position: relative;
}

@media (min-width: 760px) {

.pinned-text-lines-scroll-wrapper {
    height: 60vh;
    max-height: 600px;
    overflow: hidden
}
  }

.pinned-text-lines-scroll-wrapper .text-line-card {
    border-bottom: 1px solid;
  }

.pinned-text-lines-scroll-wrapper .text-line-card:last-child {
      border-bottom: none;
    }

.pinned-text-lines-scroll-content {
  position: relative;
  will-change: transform;
}

.prose {
  --flow-space: var(--space-m);
  /* font-size: var(--size-step-3); */
}

/* Single post (insight) — top header, body width constraints, related
   posts strip. */

.single-insight__header {
  /* Use padding instead of margin so it can't collapse into the parent
     <article> / <main>. Matches the room a hero / first-block reserves
     for the fixed header. */
  padding-top: var(--nav-height, 100px);
  margin-bottom: var(--nav-height, 100px);
}

/* Featured image with a primary-coloured floating offset behind it. */

.single-insight__image {
  position: relative;
  isolation: isolate;
}

/* Yellow offset shape — sits behind the image, extending past the
   bottom-LEFT corner of the photo. */

.single-insight__image::before {
  content: "";
  position: absolute;
  inset: 1.5rem 1.5rem -1.5rem -1.5rem;
  background-color: var(--color-primary);
  border-radius: var(--radius-card, 10px);
  z-index: -1;
}

.single-insight__image img,
.single-insight__image picture {
  border-radius: var(--radius-card, 10px);
  display: block;
  width: 100%;
  height: auto;
}

/* Intro column — category + title. */

.single-insight__category {
  margin: 0 0 0.75rem;
}

.single-insight__title {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0;
}

/* Body — heading / paragraph / list copy is constrained to a reading
   column. Images can break out a bit wider but are still centred. */

.single-insight__body {
  width: 100%;
  /* Breathing room above the body so it clears the offset image, and
     below it before the related-posts strip. */
  margin-top: clamp(3rem, 1.5rem + 4vw, 6rem);
  margin-bottom: clamp(3rem, 1.5rem + 4vw, 6rem);
}

.single-insight__body > * {
  max-width: 650px;
  margin-inline: auto;
}

.single-insight__body h1,
.single-insight__body h2,
.single-insight__body h3,
.single-insight__body h4,
.single-insight__body h5,
.single-insight__body h6,
.single-insight__body p,
.single-insight__body ul,
.single-insight__body ol,
.single-insight__body blockquote,
.single-insight__body table {
  max-width: 650px;
  margin-inline: auto;
}

.single-insight__body img,
.single-insight__body picture,
.single-insight__body figure,
.single-insight__body .wp-block-image,
.single-insight__body .wp-block-video,
.single-insight__body .wp-block-embed {
  max-width: 875px;
  margin-inline: auto;
}

.single-insight__body img,
.single-insight__body picture {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card, 10px);
  overflow: hidden;
}

.single-insight__body figure,
.single-insight__body .wp-block-image,
.single-insight__body .wp-block-image > img,
.single-insight__body .wp-block-image > picture {
  border-radius: var(--radius-card, 10px);
  overflow: hidden;
}

/* Videos / embeds match the image footprint: max 875px, centred, with
   the same card radius, forced 16:9 frame. */

.single-insight__body .wp-block-video,
.single-insight__body .wp-block-embed,
.single-insight__body video {
  border-radius: var(--radius-card, 10px);
  overflow: hidden;
}

.single-insight__body video,
.single-insight__body .wp-block-video video,
.single-insight__body .wp-block-embed iframe,
.single-insight__body iframe {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-card, 10px);
}

.single-insight__body .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card, 10px);
  overflow: hidden;
}

.single-insight__body .wp-block-embed__wrapper > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.single-insight__body figcaption,
.single-insight__body .wp-element-caption {
  font-size: 0.8125rem;
  line-height: 1.4;
  max-width: 650px;
  margin-inline: auto;
  margin-top: 0.5rem;
  opacity: 0.75;
  text-align: center;
}

/* Related posts strip — sits on a primary-yellow background. */

.related-posts {
  padding-block: clamp(3rem, 1.5rem + 4vw, 5rem);
}

.related-posts__title {
  margin: 0 0 1.5rem;
}

/* Centred "More News" button with extra breathing room above. */

.related-posts__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 4rem);
}

/* Related grid — 4 across on lg, follows the news-archive aesthetic
   with 1:1 square media on tablet+. */

@media (min-width: 768px) {
  .related-posts__grid .card .card--media,
  .related-posts__grid .card .card--media picture,
  .related-posts__grid .card .card--media img {
    aspect-ratio: 1 / 1;
  }

  .related-posts__grid .card .card--media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Single Work (case study) — header section. Uses the same .site-block
   + .block--hero (slim) classes as the news-archive hero, so the
   padding / spacing is consistent across page types.
   Layout inside: preheader (post title) → big H1 (summary) → meta row
   (CLIENT / SECTOR / SERVICES). */

/* Re-enable the standard site-block padding on this header. Needed
   because block--hero.css zeros it out for case studies via
   `body.single-work_cpt .block--hero` and `.block--hero--slim`. */

@media (min-width: 760px) {

body.single-work_cpt .block--hero.single-work__header,
.main-content > .site-block.single-work__header {
    padding-block: var(--space-xl, 4rem)
}
  }

.single-work__intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.single-work__preheader {
  margin: 0;
}

.single-work__summary {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.1;
  max-width: 60ch;
}

/* Meta row — CLIENT / SECTOR / SERVICES. dl/dt/dd for semantics; styled
   into a horizontal row with label above value. */

.single-work__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin: 2rem 0 0;
  padding: 0;
}

.single-work__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

.single-work__meta-label {
  margin: 0;
}

.single-work__meta-value {
  margin: 0;
  font-weight: 600;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-links li {
    margin: 0;
}

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

.social-links svg rect,
.social-links svg path {
    fill: currentColor;
}

.swiper .swiper-slide {
        align-items: start; 
        justify-content: start;
    }

/* .swiper { */

.swiper-slide {
    align-items: start; 
    justify-content: start;
}

&.overflow-visible {
    overflow: visible;
}

@media (min-width: 760px) {
    &.overflow-hidden, &.md\:overflow-hidden {
        overflow: hidden;
    }
}

.swiper-navigation {
    display: none;
    height: 44px;
}

@media (min-width: 760px) {

.swiper-navigation {
        display: flex
}
    }

.swiper-navigation{
    
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

.swiper-navigation .swiper-button-prev, .swiper-navigation .swiper-button-next {
        position: relative;
        top: auto;
        width: 18px;
        margin-top: 0;
    }

.swiper-navigation .swiper-button-prev svg, .swiper-navigation .swiper-button-next svg {
            width: 18px;
        }

.swiper-navigation .swiper-button-prev svg path, .swiper-navigation .swiper-button-next svg path {
                transition: stroke 0.3s ease;
            }

.swiper-navigation .swiper-button-prev:hover svg path, .swiper-navigation .swiper-button-next:hover svg path {
                    stroke: var(--color-lime);
                }

.swiper-navigation .swiper-button-prev:after, .swiper-navigation .swiper-button-next:after {
            content: none !important;
        }

.swiper-navigation .swiper-button-prev {
        left: 0;
    }

.swiper-navigation .swiper-button-next {
        right: 0;
    }

/* } */

.block--testimonials .swiper-navigation {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.swiper-button-prev:after, .swiper-button-next:after {
content: none !important;
}

.swiper-slide { 
    font-size: 22px;
}

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

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

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

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

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

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

/* A split 50/50 layout */

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

/* Three column grid layout */

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

/* Twelve column grid layout */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
WRAPPER COMPOSITION 
A common wrapper/container
*/

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

.wrapper--narrow {
  margin-inline: auto;
  max-width: 1000px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* 
ABSOLUTE FULL
position absolutely, top, bottom, left, right 0 and 100% height and width
*/

.absolute-full {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.img-wrapper {
	position: relative;
}

.img-wrapper picture, .img-wrapper img {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

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

.aspect-ratio--3-2 	{ aspect-ratio: 2 / 3; }

.aspect-ratio--4-3 	{ aspect-ratio: 3 / 4; }

.aspect-ratio--16-9 { aspect-ratio: 16 / 9; }

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

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

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

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

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

html.page-is-at-top body.first-block-is-hero .site-header-bg {
    background-color: transparent;
    background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.1), rgba(0,0,0,0.1));
  }

html.page-is-at-top body.first-block-is-hero .site-header-inner {
    color: var(--color-light);
  }

html.page-is-at-top body.first-block-is-hero .nav-logo svg path {
    fill: var(--color-dark);
  }

@media (min-width: 50em) {

html.nav-is-hidden body:not(.menu-is-open) .site-header-inner {
      transform: translateY(-150%)
  }
    }

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

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.bento-grid .grid--item {
        grid-column: span 12;
    }

@media (min-width: 760px) {

.bento-grid {
        /* Row 1: wide, narrow */

        /* Row 2: narrow, wide */
}
        .bento-grid .grid--item:nth-of-type(4n + 1) {
            grid-column: span 8;
        }
        .bento-grid .grid--item:nth-of-type(4n + 2) {
            grid-column: span 4;
        }
        .bento-grid .grid--item:nth-of-type(4n + 3) {
            grid-column: span 4;
        }
        .bento-grid .grid--item:nth-of-type(4n + 4) {
            grid-column: span 8;
        }
    }

/* Centering Site Block Option */

.site-block.center {
    text-align: center;
}

.site-block.center .wrapper.hero-content {
        justify-content: center;
        align-items: center;
    }

/* 
GRID UTILITY
Consistent block padding for page sections
*/

/*
    UPDATE TO THIS?:
    add this in for grids: https://codepen.io/tommiehansen/pen/NWmNbyr
*/

.grid {
    display: grid;
    /* gap: var(--gutter, var(--space-l)); */
    gap: 1rem;
}

@media (min-width: 1230px) {

.grid {
        gap: 4rem
}
    }

.grid.grid-gap--tiny {
        gap: 0.5rem;
    }

.grid.grid-gap--small {
        gap: 1.5rem;
    }

.grid.grid-gap--medium {
        gap: 1rem;
    }

@media (min-width: 1230px) {

.grid.grid-gap--medium {
            gap: 2rem
    }
        }

.grid.grid-gap--large {
        gap: 4rem;
    }

@media (min-width: 1230px) {

.grid.grid-gap--large {
            gap: 2rem
    }
        }

.grid.gap-\[0rem\] {
        gap: 0rem;
    }

@media (min-width: 760px) {

.grid.md\:gap-\[2rem\] {
            gap: 2rem
    }
        }

.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=thirds]:has(>:nth-child(2):last-child) {
    --grid-placement: auto-fill
}

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

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

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

@media (min-width: 80em) {
    .grid[data-layout="lg:10/2"] {
        grid-template-columns: 10fr 2fr
    }
}

/* direction: rtl; */

@media (min-width: 1230px) {

.grid[data-state="reversed"] {
        flex-direction: row-reverse;
        display: flex

}
        .grid[data-state="reversed"]>div {
            width: 50%;
        }
       
    }

.icon {
    width: 60px;
    height: 60px;
}

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

.option--background .grid {
        padding: 2rem;
        background: var(--color-light-grey);
    }

/* Shared card / image corner radius. Use the variable elsewhere, or
   apply .radius / .border-radius as a utility class. Full-bleed images
   opt out by adding the .radius--none modifier or by living inside a
   wrapper that overrides it (e.g. .full-bleed > img). */

:root {
    --radius-card: 10px;
}

.radius,
.border-radius {
    border-radius: var(--radius-card);
    overflow: hidden;
}

.radius--none,
.full-bleed,
.full-bleed > img,
.full-bleed > picture,
.full-bleed > picture > img {
    border-radius: 0;
}

/* 
REGION UTILITY
Consistent block padding for page sections
*/

.region {
  padding-block: var(--region-space, var(--space-xl-2xl));
}

/* 
REPEL UTILITY
Push away from each other but wrap when not enough space (For Nav)
*/

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

/* Alternating section backgrounds — odd = white, even = light grey.
   Heroes and sitewide / case-study heroes set their own background.

   Also gives every site-block sensible vertical padding so sections breathe. */

.main-content > .site-block {
  padding-block: var(--space-xl, 4rem);
}

/* Opt-in modifier: removes the section's bottom padding + margin so the
   next block stacks flush against this one. Set via the
   `No bottom spacing` ACF toggle (see acf/what-we-do; can be reused on
   any block that adds the same class). */

.main-content > .site-block.site-block--no-bottom-spacing {
  padding-block-end: 0;
  margin-block-end: 0;
}

/* .main-content > .site-block.block--hero,
.main-content > .site-block.block--case-study-hero { */

/* Heroes already set min-height + flex centering, no extra padding needed. */

/* padding-block: 0;
} */

/* .main-content > .site-block:not(.block--hero):not(.block--sitewide):not(.block--case-study-hero) {
  background-color: var(--color-light);
} */

/* Section background switcher — pairs with the `Section Background`
   ACF field group and the logic in template-parts/block-snippets/
   section-open.php. The selectors below need a higher specificity than
   `.main-content > .site-block:not(...)` in section-alternation.css so
   the editor's choice actually wins. */

.main-content > .site-block.section-bg--off-white {
  background-color: var(--color-light);
  color: var(--color-dark);
}

.main-content > .site-block.section-bg--yellow {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

.main-content > .site-block.section-bg--black {
  background-color: var(--color-dark);
  color: var(--color-light);
}

/* Image background — full-bleed, cover-fit, behind the block content.
   The block sits on the off-white colour scheme so text stays readable
   in case the image is missing or slow to load. */

.main-content > .site-block.section-bg--image {
  background-color: var(--color-light);
  color: var(--color-dark);
  position: relative;
  isolation: isolate;
}

.section-bg-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.section-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Black section: nudge a few common children towards light text so
   editors don't have to re-style every block they drop in. */

.main-content > .site-block.section-bg--black h1,
.main-content > .site-block.section-bg--black h2,
.main-content > .site-block.section-bg--black h3,
.main-content > .site-block.section-bg--black h4,
.main-content > .site-block.section-bg--black h5,
.main-content > .site-block.section-bg--black h6,
.main-content > .site-block.section-bg--black p,
.main-content > .site-block.section-bg--black li,
.main-content > .site-block.section-bg--black a {
  color: var(--color-light);
}

/* 
TINY IMAGE IN A CIRCLE - e.g. TESIMONIAL / AUTHOR IMAGE
*/

.tiny-circle-image {
    width: 24px;
    height: 24px;

}

.tiny-circle-image img,
.tiny-circle-image picture {
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

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

/* Skip link - visible when focused */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 9999;
}

.skip-link:focus {
  top: 0;
  clip: auto;
  height: auto;
  width: auto;
  overflow: visible;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.top-\[0rem\]{
  top: 0rem;
}

.z-\[1\]{
  z-index: 1;
}

.col-span-10{
  grid-column: span 10 / span 10;
}

.col-span-6{
  grid-column: span 6 / span 6;
}

.col-start-2{
  grid-column-start: 2;
}

.m-\[0rem\]{
  margin: 0rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.mb-\[0\.5rem\]{
  margin-bottom: 0.5rem;
}

.mb-\[1rem\]{
  margin-bottom: 1rem;
}

.mb-\[2rem\]{
  margin-bottom: 2rem;
}

.ml-auto{
  margin-left: auto;
}

.mt-\[--flow-space\]{
  margin-top: var(--flow-space);
}

.mt-\[0\.5rem\]{
  margin-top: 0.5rem;
}

.mt-\[0rem\]{
  margin-top: 0rem;
}

.mt-\[1rem\]{
  margin-top: 1rem;
}

.mt-\[2rem\]{
  margin-top: 2rem;
}

.mt-\[var\(--flow-space--double\)\]{
  margin-top: var(--flow-space--double);
}

.block{
  display: block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.h-\[100\%\]{
  height: 100%;
}

.h-full{
  height: 100%;
}

.w-\[100\%\]{
  width: 100%;
}

.w-full{
  width: 100%;
}

.max-w-\[470px\]{
  max-width: 470px;
}

.max-w-\[502px\]{
  max-width: 502px;
}

.max-w-\[503px\]{
  max-width: 503px;
}

.max-w-\[640px\]{
  max-width: 640px;
}

.max-w-\[650px\]{
  max-width: 650px;
}

.max-w-\[700px\]{
  max-width: 700px;
}

.max-w-\[750px\]{
  max-width: 750px;
}

.max-w-\[80\%\]{
  max-width: 80%;
}

.max-w-\[900px\]{
  max-width: 900px;
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize{
  resize: both;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

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

.flex-row{
  flex-direction: row;
}

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

.flex-wrap{
  flex-wrap: wrap;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.justify-start{
  justify-content: flex-start;
}

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

.justify-between{
  justify-content: space-between;
}

.gap-\[0\.5rem\]{
  gap: 0.5rem;
}

.gap-\[1\.5rem\]{
  gap: 1.5rem;
}

.gap-\[1rem\]{
  gap: 1rem;
}

.gap-\[2rem\]{
  gap: 2rem;
}

.gap-\[var\(--flow-space--double\)\]{
  gap: var(--flow-space--double);
}

.gap-s{
  gap: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
}

.gap-xs{
  gap: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
}

.gap-x-\[4rem\]{
  column-gap: 4rem;
}

.gap-y-\[3rem\]{
  row-gap: 3rem;
}

.overflow-hidden{
  overflow: hidden;
}

.rounded{
  border-radius: 0.25rem;
}

.bg-butter{
  background-color: #e6e86b;
}

.bg-dark{
  background-color: #13140d;
}

.bg-light{
  background-color: #f4f3e7;
}

.bg-light-grey{
  background-color: #e7e7e7;
}

.bg-primary{
  background-color: #e6e86b;
}

.p-\[--flow-space--double\]{
  padding: var(--flow-space--double);
}

.p-\[3rem\]{
  padding: 3rem;
}

.py-\[var\(--flow-space\)\]{
  padding-top: var(--flow-space);
  padding-bottom: var(--flow-space);
}

.py-\[var\(--flow-space--half\)\]{
  padding-top: var(--flow-space--half);
  padding-bottom: var(--flow-space--half);
}

.py-s{
  padding-top: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
  padding-bottom: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
}

.pt-\[3rem\]{
  padding-top: 3rem;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.font-base{
  font-family: Questrial, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.font-heading{
  font-family: Space Grotesk, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.font-headline{
  font-family: Space Grotesk, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.font-serif{
  font-family: Space Grotesk, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.text-2xl{
  font-size: clamp(2rem, 1.63rem + 1.78vw, 3rem);
}

.text-3xl{
  font-size: clamp(2.5rem, 1.95rem + 2.67vw, 4rem);
}

.text-lg{
  font-size: clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem);
}

.text-md{
  font-size: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
}

.text-sm{
  font-size: 1rem;
}

.text-step-00{
  font-size: clamp(0.9375rem, 0.91rem + 0.11vw, 1rem);
}

.text-step-1{
  font-size: clamp(1.35rem, 1.27rem + 0.38vw, 1.5625rem);
}

.text-xl{
  font-size: clamp(1.5rem, 1.32rem + 0.89vw, 2rem);
}

.font-bold{
  font-weight: 700;
}

.font-medium{
  font-weight: 500;
}

.font-regular{
  font-weight: 400;
}

.font-semi-bold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.leading-large{
  line-height: 1.5;
}

.leading-standard{
  line-height: 1.3;
}

.no-underline{
  text-decoration-line: none;
}

.outline{
  outline-style: solid;
}

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

.gutter-xs{
  --gutter: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
}

.bg-dark{
  background-color: #13140d;
}

.bg-light{
  background-color: #f4f3e7;
}

.bg-primary{
  background-color: #e6e86b;
}

.bg-butter{
  background-color: #e6e86b;
}

.bg-light-grey{
  background-color: #e7e7e7;
}

.color-initial{
  color: initial;
}

.color-dark{
  color: #13140d;
}

.color-light{
  color: #f4f3e7;
}

.color-off-white{
  color: #f4f3e7;
}

/*body {
    outline: 1px solid #2980B9 !important;
}

article {
    outline: 1px solid #3498DB !important;
}

nav {
    outline: 1px solid #0088C3 !important;
}

aside {
    outline: 1px solid #33A0CE !important;
}

section {
    outline: 1px solid #66B8DA !important;
}

header {
    outline: 1px solid #99CFE7 !important;
}

footer {
    outline: 1px solid #CCE7F3 !important;
}

h1 {
    outline: 1px solid #162544 !important;
}

h2 {
    outline: 1px solid #314E6E !important;
}

h3 {
    outline: 1px solid #3E5E85 !important;
}

h4 {
    outline: 1px solid #449BAF !important;
}

h5 {
    outline: 1px solid #C7D1CB !important;
}

h6 {
    outline: 1px solid #4371D0 !important;
}

main {
    outline: 1px solid #2F4F90 !important;
}

address {
    outline: 1px solid #1A2C51 !important;
}

div {
    outline: 1px solid #036CDB !important;
}

p {
    outline: 1px solid #AC050B !important;
}

hr {
    outline: 1px solid #FF063F !important;
}

pre {
    outline: 1px solid #850440 !important;
}

blockquote {
    outline: 1px solid #F1B8E7 !important;
}

ol {
    outline: 1px solid #FF050C !important;
}

ul {
    outline: 1px solid #D90416 !important;
}

li {
    outline: 1px solid #D90416 !important;
}

dl {
    outline: 1px solid #FD3427 !important;
}

dt {
    outline: 1px solid #FF0043 !important;
}

dd {
    outline: 1px solid #E80174 !important;
}

figure {
    outline: 1px solid #FF00BB !important;
}

figcaption {
    outline: 1px solid #BF0032 !important;
}

table {
    outline: 1px solid #00CC99 !important;
}

caption {
    outline: 1px solid #37FFC4 !important;
}

thead {
    outline: 1px solid #98DACA !important;
}

tbody {
    outline: 1px solid #64A7A0 !important;
}

tfoot {
    outline: 1px solid #22746B !important;
}

tr {
    outline: 1px solid #86C0B2 !important;
}

th {
    outline: 1px solid #A1E7D6 !important;
}

td {
    outline: 1px solid #3F5A54 !important;
}

col {
    outline: 1px solid #6C9A8F !important;
}

colgroup {
    outline: 1px solid #6C9A9D !important;
}

button {
    outline: 1px solid #DA8301 !important;
}

datalist {
    outline: 1px solid #C06000 !important;
}

fieldset {
    outline: 1px solid #D95100 !important;
}

form {
    outline: 1px solid #D23600 !important;
}

input {
    outline: 1px solid #FCA600 !important;
}

keygen {
    outline: 1px solid #B31E00 !important;
}

label {
    outline: 1px solid #EE8900 !important;
}

legend {
    outline: 1px solid #DE6D00 !important;
}

meter {
    outline: 1px solid #E8630C !important;
}

optgroup {
    outline: 1px solid #B33600 !important;
}

option {
    outline: 1px solid #FF8A00 !important;
}

output {
    outline: 1px solid #FF9619 !important;
}

progress {
    outline: 1px solid #E57C00 !important;
}

select {
    outline: 1px solid #E26E0F !important;
}

textarea {
    outline: 1px solid #CC5400 !important;
}

details {
    outline: 1px solid #33848F !important;
}

summary {
    outline: 1px solid #60A1A6 !important;
}

command {
    outline: 1px solid #438DA1 !important;
}

menu {
    outline: 1px solid #449DA6 !important;
}

del {
    outline: 1px solid #BF0000 !important;
}

ins {
    outline: 1px solid #400000 !important;
}

img {
    outline: 1px solid #22746B !important;
}

iframe {
    outline: 1px solid #64A7A0 !important;
}

embed {
    outline: 1px solid #98DACA !important;
}

object {
    outline: 1px solid #00CC99 !important;
}

param {
    outline: 1px solid #37FFC4 !important;
}

video {
    outline: 1px solid #6EE866 !important;
}

audio {
    outline: 1px solid #027353 !important;
}

source {
    outline: 1px solid #012426 !important;
}

canvas {
    outline: 1px solid #A2F570 !important;
}

track {
    outline: 1px solid #59A600 !important;
}

map {
    outline: 1px solid #7BE500 !important;
}

area {
    outline: 1px solid #305900 !important;
}



a {
    outline: 1px solid #FF62AB !important;
}

em {
    outline: 1px solid #800B41 !important;
}

strong {
    outline: 1px solid #FF1583 !important;
}

i {
    outline: 1px solid #803156 !important;
}

b {
    outline: 1px solid #CC1169 !important;
}

u {
    outline: 1px solid #FF0430 !important;
}

s {
    outline: 1px solid #F805E3 !important;
}

small {
    outline: 1px solid #D107B2 !important;
}

abbr {
    outline: 1px solid #4A0263 !important;
}

q {
    outline: 1px solid #240018 !important;
}

cite {
    outline: 1px solid #64003C !important;
}

dfn {
    outline: 1px solid #B4005A !important;
}

sub {
    outline: 1px solid #DBA0C8 !important;
}

sup {
    outline: 1px solid #CC0256 !important;
}

time {
    outline: 1px solid #D6606D !important;
}

code {
    outline: 1px solid #E04251 !important;
}

kbd {
    outline: 1px solid #5E001F !important;
}

samp {
    outline: 1px solid #9C0033 !important;
}

var {
    outline: 1px solid #D90047 !important;
}

mark {
    outline: 1px solid #FF0053 !important;
}

bdi {
    outline: 1px solid #BF3668 !important;
}

bdo {
    outline: 1px solid #6F1400 !important;
}

ruby {
    outline: 1px solid #FF7B93 !important;
}

rt {
    outline: 1px solid #FF2F54 !important;
}

rp {
    outline: 1px solid #803E49 !important;
}

span {
    outline: 1px solid #CC2643 !important;
}

br {
    outline: 1px solid #DB687D !important;
}

wbr {
    outline: 1px solid #DB175B !important;
}

// SVG
circle {
    outline: 1px solid #FF62AB !important;
}

clipPath {
    outline: 1px solid #DB175B !important;
}

ellipse {
    outline: 1px solid #803E49 !important;
}

g {
    outline: 1px solid #BF3668 !important;
}

glyph {
    outline: 1px solid #D90047 !important;
}

line {
    outline: 1px solid #E04251 !important;
}

path {
    outline: 1px solid #DBA0C8 !important;
}

polygon {
    outline: 1px solid #D107B2 !important;
}

rect {
    outline: 1px solid #6F1400 !important;
}

svg {
    outline: 1px solid #A2F570 !important;
}

symbol {
    outline: 1px solid #37FFC4 !important;
}*/

/* @import '../css-utils/a11y-check.css'; */

@media (min-width: 760px){

  .md\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .md\:mt-\[5rem\]{
    margin-top: 5rem;
  }

  .md\:mt-\[var\(--flow-space\)\]{
    margin-top: var(--flow-space);
  }

  .md\:block{
    display: block;
  }

  .md\:hidden{
    display: none;
  }

  .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-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:gap-\[2rem\]{
    gap: 2rem;
  }

  .md\:gap-\[4rem\]{
    gap: 4rem;
  }

  .md\:gap-x-\[6rem\]{
    column-gap: 6rem;
  }

  .md\:gap-y-\[6rem\]{
    row-gap: 6rem;
  }

  .md\:overflow-visible{
    overflow: visible;
  }

  .md\:px-\[3rem\]{
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:py-\[3rem\]{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py-\[var\(--flow-space\)\]{
    padding-top: var(--flow-space);
    padding-bottom: var(--flow-space);
  }

  .md\:pb-\[20vh\]{
    padding-bottom: 20vh;
  }

  .md\:pt-\[20vh\]{
    padding-top: 20vh;
  }

  .md\:text-2xl{
    font-size: clamp(2rem, 1.63rem + 1.78vw, 3rem);
  }
}

@media (min-width: 950px){

  .min-\[950px\]\:block{
    display: block;
  }

  .min-\[950px\]\:hidden{
    display: none;
  }
}

@media (min-width: 1230px){

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:text-3xl{
    font-size: clamp(2.5rem, 1.95rem + 2.67vw, 4rem);
  }
}