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

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

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

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

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

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

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

/* Box sizing rules */

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

/* Prevent font size inflation */

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

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

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

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

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

/* Set core body defaults */

body {
  min-height: var(--viewport-height);
  line-height: 1.5;
}

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

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

/* Balance text wrapping on headings */

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

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

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

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  height: auto; /* keep aspect ratio when width/height attrs are present (wp_get_attachment_image) */
  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;
}

/* Anchored blocks land flush at the top of the viewport. The site header is
   position:fixed and auto-hides on scroll-down, so no offset is needed; the
   previous 5ex (~45px) left a visible gap above the targeted block. */

:target {
  scroll-margin-block: 0;
}

body {
  margin: 0;
}

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

html {
	overflow-y: scroll;
	overflow-x: hidden; /* Prevent horizontal scroll from 100vw full-bleed elements */
}

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

/* ============================================================================
   TYPOGRAPHY SYSTEM - Canons Wharf
   ============================================================================

   Quick Reference - Figma Text Styles:

   NAVIGATION (Proxima Nova Semibold, 16px, UPPERCASE, 10% letter-spacing)
   → .font-navigation or .button

   HEADLINES (Larken Light, -2% letter-spacing):
   → .font-h0  (56-96px fluid)   | Display heading | Supports md:font-h0
   → h1, .h1, .font-h1  (40-64px fluid)   | Page title | Supports md:font-h1
   → h2, .h2, .font-h2  (28-40px fluid)   | Section heading | Supports md:font-h2
   → h3, .h3, .font-h3  (24-32px fluid)   | Subsection heading | Supports md:font-h3
   → h4, .h4, .font-h4  (20-24px fluid)   | Small heading | Supports md:font-h4

   ALL UTILITIES SUPPORT RESPONSIVE PREFIXES: sm:, md:, lg:, xl:, 2xl:

   BODY TEXT (Work Sans Regular, 0 letter-spacing, 1.5 line-height):
   → .font-body-large    (20-24px fluid)
   → .font-body-medium   (16-20px fluid)
   → .font-body-small    (14-16px fluid)
   → .font-body-xsmall   (12px)

   SIZE-ONLY UTILITIES (apply size only, no other properties):
   → .size-step-5   (56-96px)
   → .size-step-4   (40-64px)
   → .size-step-3   (28-40px)
   → .size-step-2   (24-32px)
   → .size-step-1   (20-24px)
   → .size-step-0   (16-20px)
   → .size-step-00  (14-16px)
   → .size-step--1  (12px)

   FONT FAMILY:
   → .font-base     (Proxima Nova) - changed to calibre
   → .font-heading  (Larken)

   FONT WEIGHT:
   → .font-light     (300)
   → .font-regular   (400)
   → .font-medium    (500)
   → .font-semibold  (600)
   → .font-bold      (700)

   ============================================================================ */

/* Calibre font faces */

@font-face {
  font-family: 'calibre';
  src: url('../fonts/calibre-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'calibre';
  src: url('../fonts/calibre-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

/* Remove user agent top margins from all block-level elements within blocks
   Using :where() for 0 specificity so .flow utility can easily override */

:where([class*="-block"]) h1, :where([class*="-block"]) h2, :where([class*="-block"]) h3, :where([class*="-block"]) h4, :where([class*="-block"]) h5, :where([class*="-block"]) h6, :where([class*="-block"]) p, :where([class*="-block"]) ul, :where([class*="-block"]) ol, :where([class*="-block"]) dl, :where([class*="-block"]) blockquote, :where([class*="-block"]) figure, :where([class*="-block"]) pre, :where([class*="-block"]) hr, :where([class*="-block"]) fieldset {
    margin-top: 0;
  }

/* Links */

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

/* Heading defaults */

:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--font-heading);
  font-weight: var(--font-light);
  letter-spacing: -0.02em;
}

/* Specific heading sizes */

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

h2, .h2, .font-h2 {
  font-size: var(--size-step-3);
  line-height: 1.2;
}

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

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

/* ==========================================================================
   RESPONSIVE FONT UTILITIES (Tailwind layer for md:, lg:, etc. support)
   ========================================================================== */

/* Button inherits navigation typography (outside @layer to maintain specificity) */

.button {
  font-family: var(--font-base);
  font-weight: var(--font-semibold);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

:root {

  --gutter: var(--space-s-m);  /* --space-s --space-s-m */
  --scrollbar-width: 0;  /* Default: no scrollbar (mobile/overlay scrollbars) */
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --leading-standard: 1.5;

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

  /* Mobile-friendly viewport heights - use dvh (dynamic) to account for browser chrome */
  --viewport-height: 100vh;  /* Fallback for older browsers */
  --viewport-height: 100dvh; /* Modern browsers: adjusts for mobile browser UI */

}

/* Desktop scrollbar width - typical browsers show ~15px scrollbar */

@media (min-width: 760px) {
  :root {
    --scrollbar-width: 0.9rem;
  }
}

/*
BRAND COLOURS
Defines color variables and brand colour combination classes
*/

:root {
  /* Base colors from design tokens */
  /* --color-dark: #000000;
  --color-gray-dark: #B9B9B9;
  --color-gray: #D9D9D9;
  --color-gray-light: #F1F1F1;
  --color-light: #FFFFFF;
  --color-dark-green: #36544f;
  --color-dark-blue: #0f2b5e;
  --color-clay: #ab4f42;
  --color-yellow: #ffd654;
  --color-pink: #ff9487;
  --color-light-blue: #cfebeb;
  --color-light-green: #a3ccab;
  --color-sand: #e5d9c7; */
}

/* Brand colour combination classes */

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

.default {
  color: var(--color-dark-green);
  background-color: var(--color-light);
}

/* Sand combinations */

.sand-on-dark-green {
  color: var(--color-sand);
  background-color: var(--color-dark-green);
}

.sand-on-dark-blue {
  color: var(--color-sand);
  background-color: var(--color-dark-blue);
}

.sand-on-light-blue {
  color: var(--color-sand);
  background-color: var(--color-light-blue);
}

.sand-on-light-green {
  color: var(--color-sand);
  background-color: var(--color-light-green);
}

.sand-on-pink {
  color: var(--color-sand);
  background-color: var(--color-pink);
}

.sand-on-yellow {
  color: var(--color-sand);
  background-color: var(--color-yellow);
}

.sand-on-clay {
  color: var(--color-sand);
  background-color: var(--color-clay);
}

.sand-on-white {
  color: var(--color-sand);
  background-color: var(--color-light);
}

.dark-blue-on-sand {
  color: var(--color-dark-blue);
  background-color: var(--color-sand);
}

.dark-green-on-sand {
  color: var(--color-dark-green);
  background-color: var(--color-sand);
}

.dark-green-on-light-blue {
  color: var(--color-dark-green);
  background-color: var(--color-light-blue);
}

.dark-green-on-light-green {
  color: var(--color-dark-green);
  background-color: var(--color-light-green);
}

.dark-green-on-pink {
  color: var(--color-dark-green);
  background-color: var(--color-pink);
}

.dark-green-on-yellow {
  color: var(--color-dark-green);
  background-color: var(--color-yellow);
}

.light-blue-on-sand {
  color: var(--color-light-blue);
  background-color: var(--color-sand);
}

.light-blue-on-dark-green {
  color: var(--color-light-blue);
  background-color: var(--color-dark-green);
}

.light-green-on-sand {
  color: var(--color-light-green);
  background-color: var(--color-sand);
}

.light-green-on-dark-green {
  color: var(--color-light-green);
  background-color: var(--color-dark-green);
}

.pink-on-sand {
  color: var(--color-pink);
  background-color: var(--color-sand);
}

.pink-on-dark-green {
  color: var(--color-pink);
  background-color: var(--color-dark-green);
}

.pink-on-clay {
  color: var(--color-pink);
  background-color: var(--color-clay);
}

.clay-on-sand {
  color: var(--color-clay);
  background-color: var(--color-sand);
}

.clay-on-light-blue {
  color: var(--color-clay);
  background-color: var(--color-light-blue);
}

.clay-on-light-green {
  color: var(--color-clay);
  background-color: var(--color-light-green);
}

.clay-on-pink {
  color: var(--color-clay);
  background-color: var(--color-pink);
}

.clay-on-yellow {
  color: var(--color-clay);
  background-color: var(--color-yellow);
}

.yellow-on-sand {
  color: var(--color-yellow);
  background-color: var(--color-sand);
}

.yellow-on-dark-green {
  color: var(--color-yellow);
  background-color: var(--color-dark-green);
}

.yellow-on-dark-blue {
  color: var(--color-yellow);
  background-color: var(--color-dark-blue);
}

.yellow-on-white {
  color: var(--color-yellow);
  background-color: var(--color-light);
}

/* Dark (black) combinations */

.dark-on-sand {
  color: var(--color-dark);
  background-color: var(--color-sand);
}

.dark-on-light {
  color: var(--color-dark);
  background-color: var(--color-light);
}

.dark-on-light-blue {
  color: var(--color-dark);
  background-color: var(--color-light-blue);
}

.dark-on-light-green {
  color: var(--color-dark);
  background-color: var(--color-light-green);
}

.dark-on-pink {
  color: var(--color-dark);
  background-color: var(--color-pink);
}

.dark-on-yellow {
  color: var(--color-dark);
  background-color: var(--color-yellow);
}

/* Dark blue combinations */

.dark-blue-on-light {
  color: var(--color-dark-blue);
  background-color: var(--color-light);
}

.dark-blue-on-white {
  color: var(--color-dark-blue);
  background-color: var(--color-light);
}

.dark-blue-on-light-blue {
  color: var(--color-dark-blue);
  background-color: var(--color-light-blue);
}

.dark-blue-on-light-green {
  color: var(--color-dark-blue);
  background-color: var(--color-light-green);
}

.dark-blue-on-pink {
  color: var(--color-dark-blue);
  background-color: var(--color-pink);
}

.dark-blue-on-yellow {
  color: var(--color-dark-blue);
  background-color: var(--color-yellow);
}

/* Dark green combinations */

.dark-green-on-light {
  color: var(--color-dark-green);
  background-color: var(--color-light);
}

.dark-green-on-white {
  color: var(--color-dark-green);
  background-color: var(--color-light);
}

/* Light (white) combinations */

.light-on-dark-green {
  color: var(--color-light);
  background-color: var(--color-dark-green);
}

.light-on-dark-blue {
  color: var(--color-light);
  background-color: var(--color-dark-blue);
}

.light-on-clay {
  color: var(--color-light);
  background-color: var(--color-clay);
}

/* Light blue combinations */

.light-blue-on-white {
  color: var(--color-light-blue);
  background-color: var(--color-light);
}

.light-blue-on-dark-blue {
  color: var(--color-light-blue);
  background-color: var(--color-dark-blue);
}

/* Light green combinations */

.light-green-on-white {
  color: var(--color-light-green);
  background-color: var(--color-light);
}

.light-green-on-dark-blue {
  color: var(--color-light-green);
  background-color: var(--color-dark-blue);
}

/* Pink combinations */

.pink-on-white {
  color: var(--color-pink);
  background-color: var(--color-light);
}

.pink-on-dark-blue {
  color: var(--color-pink);
  background-color: var(--color-dark-blue);
}

.pink-on-light-blue {
  color: var(--color-pink);
  background-color: var(--color-light-blue);
}

/* Clay combinations */

.clay-on-light {
  color: var(--color-clay);
  background-color: var(--color-light);
}

.clay-on-white {
  color: var(--color-clay);
  background-color: var(--color-light);
}

/* SVG color inheritance */

/* Make SVGs inherit color from their parent color combo class */

.big-intro-block__feature-icon svg,
.big-intro-block__feature-icon svg * {
  fill: var(--block-fg-color, var(--color-dark-green));
}

/* Arrow SVG special handling - rect fills with background, lines stroke with foreground */

/* Apply to arrows with color combo classes */

[class*="-on-"].feature-cards-block__page-link svg path,
[class*="-on-"].offices-cta-block__arrow svg path,
[class*="-on-"].latest-block__archive-link svg path,
.feature-cards-block__page-link[class*="-on-"] svg path,
.offices-cta-block__arrow[class*="-on-"] svg path,
.latest-block__archive-link[class*="-on-"] svg path {
  fill: var(--block-bg-color, var(--color-light)) !important;
}

[class*="-on-"].feature-cards-block__page-link svg path:last-child,
[class*="-on-"].offices-cta-block__arrow svg path:last-child,
[class*="-on-"].latest-block__archive-link svg path:last-child,
.feature-cards-block__page-link[class*="-on-"] svg path:last-child,
.offices-cta-block__arrow[class*="-on-"] svg path:last-child,
.latest-block__archive-link[class*="-on-"] svg path:last-child {
  stroke: var(--block-fg-color, var(--color-dark-green)) !important;
}

/* ==========================================================================
   HOVER COLOR MAPPING
   ========================================================================== */

/*
 * Defines complementary hover colors for each base background color.
 * Used for button hover states and interactive elements.
 *
 * Mapping logic:
 * - Dark colors → Light variants (dark-green → light-green, dark-blue → light-blue)
 * - Clay → Yellow (warm to bright)
 * - Pink → Yellow (complementary warm)
 * - Yellow → Clay (bright to warm)
 * - Light colors → Darker variants (light-green → dark-green, light-blue → dark-blue)
 * - Sand → Clay (neutral to warm)
 * - Light/White → Light-blue (neutral to accent)
 */

/* Set CSS custom properties for foreground, background, and hover colors on brand combo classes */

.sand-on-dark-green { --block-fg-color: var(--color-sand); --block-bg-color: var(--color-dark-green); --block-hover-color: var(--color-light-green); }

.sand-on-dark-blue { --block-fg-color: var(--color-sand); --block-bg-color: var(--color-dark-blue); --block-hover-color: var(--color-light-blue); }

.sand-on-light-blue { --block-fg-color: var(--color-sand); --block-bg-color: var(--color-light-blue); --block-hover-color: var(--color-dark-blue); }

.sand-on-light-green { --block-fg-color: var(--color-sand); --block-bg-color: var(--color-light-green); --block-hover-color: var(--color-dark-green); }

.sand-on-pink { --block-fg-color: var(--color-sand); --block-bg-color: var(--color-pink); --block-hover-color: var(--color-yellow); }

.sand-on-yellow { --block-fg-color: var(--color-sand); --block-bg-color: var(--color-yellow); --block-hover-color: var(--color-clay); }

.sand-on-clay { --block-fg-color: var(--color-sand); --block-bg-color: var(--color-clay); --block-hover-color: var(--color-yellow); }

.sand-on-white { --block-fg-color: var(--color-sand); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.dark-blue-on-sand { --block-fg-color: var(--color-dark-blue); --block-bg-color: var(--color-sand); --block-hover-color: var(--color-clay); }

.dark-green-on-sand { --block-fg-color: var(--color-dark-green); --block-bg-color: var(--color-sand); --block-hover-color: var(--color-clay); }

.dark-green-on-light-blue { --block-fg-color: var(--color-dark-green); --block-bg-color: var(--color-light-blue); --block-hover-color: var(--color-dark-blue); }

.dark-green-on-light-green { --block-fg-color: var(--color-dark-green); --block-bg-color: var(--color-light-green); --block-hover-color: var(--color-dark-green); }

.dark-green-on-pink { --block-fg-color: var(--color-dark-green); --block-bg-color: var(--color-pink); --block-hover-color: var(--color-yellow); }

.dark-green-on-yellow { --block-fg-color: var(--color-dark-green); --block-bg-color: var(--color-yellow); --block-hover-color: var(--color-clay); }

.light-blue-on-sand { --block-fg-color: var(--color-light-blue); --block-bg-color: var(--color-sand); --block-hover-color: var(--color-clay); }

.light-blue-on-dark-green { --block-fg-color: var(--color-light-blue); --block-bg-color: var(--color-dark-green); --block-hover-color: var(--color-light-green); }

.light-green-on-sand { --block-fg-color: var(--color-light-green); --block-bg-color: var(--color-sand); --block-hover-color: var(--color-clay); }

.light-green-on-dark-green { --block-fg-color: var(--color-light-green); --block-bg-color: var(--color-dark-green); --block-hover-color: var(--color-light-green); }

.pink-on-sand { --block-fg-color: var(--color-pink); --block-bg-color: var(--color-sand); --block-hover-color: var(--color-clay); }

.pink-on-dark-green { --block-fg-color: var(--color-pink); --block-bg-color: var(--color-dark-green); --block-hover-color: var(--color-light-green); }

.pink-on-clay { --block-fg-color: var(--color-pink); --block-bg-color: var(--color-clay); --block-hover-color: var(--color-yellow); }

.clay-on-sand { --block-fg-color: var(--color-clay); --block-bg-color: var(--color-sand); --block-hover-color: var(--color-clay); }

.clay-on-light-blue { --block-fg-color: var(--color-clay); --block-bg-color: var(--color-light-blue); --block-hover-color: var(--color-dark-blue); }

.clay-on-light-green { --block-fg-color: var(--color-clay); --block-bg-color: var(--color-light-green); --block-hover-color: var(--color-dark-green); }

.clay-on-pink { --block-fg-color: var(--color-clay); --block-bg-color: var(--color-pink); --block-hover-color: var(--color-yellow); }

.clay-on-yellow { --block-fg-color: var(--color-clay); --block-bg-color: var(--color-yellow); --block-hover-color: var(--color-clay); }

.yellow-on-sand { --block-fg-color: var(--color-yellow); --block-bg-color: var(--color-sand); --block-hover-color: var(--color-clay); }

.yellow-on-dark-green { --block-fg-color: var(--color-yellow); --block-bg-color: var(--color-dark-green); --block-hover-color: var(--color-light-green); }

.yellow-on-dark-blue { --block-fg-color: var(--color-yellow); --block-bg-color: var(--color-dark-blue); --block-hover-color: var(--color-light-blue); }

.yellow-on-white { --block-fg-color: var(--color-yellow); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.dark-on-sand { --block-fg-color: var(--color-dark); --block-bg-color: var(--color-sand); --block-hover-color: var(--color-clay); }

.dark-on-light { --block-fg-color: var(--color-dark); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.dark-on-light-blue { --block-fg-color: var(--color-dark); --block-bg-color: var(--color-light-blue); --block-hover-color: var(--color-dark-blue); }

.dark-on-light-green { --block-fg-color: var(--color-dark); --block-bg-color: var(--color-light-green); --block-hover-color: var(--color-dark-green); }

.dark-on-pink { --block-fg-color: var(--color-dark); --block-bg-color: var(--color-pink); --block-hover-color: var(--color-yellow); }

.dark-on-yellow { --block-fg-color: var(--color-dark); --block-bg-color: var(--color-yellow); --block-hover-color: var(--color-clay); }

.dark-blue-on-light { --block-fg-color: var(--color-dark-blue); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.dark-blue-on-white { --block-fg-color: var(--color-dark-blue); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.dark-blue-on-light-blue { --block-fg-color: var(--color-dark-blue); --block-bg-color: var(--color-light-blue); --block-hover-color: var(--color-dark-blue); }

.dark-blue-on-light-green { --block-fg-color: var(--color-dark-blue); --block-bg-color: var(--color-light-green); --block-hover-color: var(--color-dark-green); }

.dark-blue-on-pink { --block-fg-color: var(--color-dark-blue); --block-bg-color: var(--color-pink); --block-hover-color: var(--color-yellow); }

.dark-blue-on-yellow { --block-fg-color: var(--color-dark-blue); --block-bg-color: var(--color-yellow); --block-hover-color: var(--color-clay); }

.dark-green-on-light { --block-fg-color: var(--color-dark-green); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.dark-green-on-white { --block-fg-color: var(--color-dark-green); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.light-on-dark-green { --block-fg-color: var(--color-light); --block-bg-color: var(--color-dark-green); --block-hover-color: var(--color-light-green); }

.light-on-dark-blue { --block-fg-color: var(--color-light); --block-bg-color: var(--color-dark-blue); --block-hover-color: var(--color-light-blue); }

.light-on-clay { --block-fg-color: var(--color-light); --block-bg-color: var(--color-clay); --block-hover-color: var(--color-yellow); }

.light-blue-on-white { --block-fg-color: var(--color-light-blue); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.light-blue-on-dark-blue { --block-fg-color: var(--color-light-blue); --block-bg-color: var(--color-dark-blue); --block-hover-color: var(--color-light-blue); }

.light-green-on-white { --block-fg-color: var(--color-light-green); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.light-green-on-dark-blue { --block-fg-color: var(--color-light-green); --block-bg-color: var(--color-dark-blue); --block-hover-color: var(--color-light-blue); }

.pink-on-white { --block-fg-color: var(--color-pink); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.pink-on-dark-blue { --block-fg-color: var(--color-pink); --block-bg-color: var(--color-dark-blue); --block-hover-color: var(--color-light-blue); }

.pink-on-light-blue { --block-fg-color: var(--color-pink); --block-bg-color: var(--color-light-blue); --block-hover-color: var(--color-dark-blue); }

.clay-on-light { --block-fg-color: var(--color-clay); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.clay-on-white { --block-fg-color: var(--color-clay); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

.default { --block-fg-color: var(--color-dark-green); --block-bg-color: var(--color-light); --block-hover-color: var(--color-light-blue); }

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

@media (min-width: 330px){

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

@media (min-width: 760px){

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

@media (min-width: 1230px){

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

:root{
  --color-dark: #000000;
  --color-gray-dark: #B9B9B9;
  --color-gray: #D9D9D9;
  --color-gray-light: #F1F1F1;
  --color-light: #FFFFFF;
  --color-dark-green: #36544f;
  --color-dark-blue: #0f2b5e;
  --color-clay: #ab4f42;
  --color-yellow: #ffd654;
  --color-pink: #ff9487;
  --color-light-blue: #cfebeb;
  --color-light-green: #a3ccab;
  --color-sand: #e5d9c7;
  --color-cream: #f0e9de;
  --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-1: clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem);
  --size-step-00: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --size-step-0: clamp(1rem, 0.91rem + 0.44vw, 1.25rem);
  --size-step-2: clamp(1.5rem, 1.32rem + 0.89vw, 2rem);
  --size-step-3: clamp(1.75rem, 1.48rem + 1.33vw, 2.5rem);
  --size-step-4: clamp(2.5rem, 1.95rem + 2.67vw, 4rem);
  --size-step-5: clamp(3.5rem, 2.58rem + 4.44vw, 6rem);
  --leading-flat: 1;
  --leading-fine: 1.15;
  --leading-standard: 1.5;
  --leading-loose: 1.7;
  --font-base: calibre,proxima-nova,Helvetica Neue,Arial,sans-serif;
  --font-heading: larken,sans-serif;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
}

/*
  Global styles

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

  Color variables are defined in global/brand-colours.css
*/

/* Prevent FOUC - hide body until JS has loaded and initialized */

html.no-js body,
html.is-loading body {
  opacity: 0;
}

html.js body {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

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

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

#site-content-container {
  background: var(--color-light);
}

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

/* Let GLightbox's scrollbar fixer work properly to prevent scroll jump */

/* .gscrollbar-fixer {
  margin-right: 0 !important;
} */

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

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

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

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

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

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

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

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

iframe.wait-autoplay {
  opacity: 0;
}

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

/*Skin */

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

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

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

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

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

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

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

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

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

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

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

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

/*CSS Animations*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hamburger {
  padding: 15px 15px;
  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; */
  background-color: var(--color-pink);
  border: 0;
  margin: 0;
  overflow: visible; }

.hamburger:hover {
    opacity: 0.7; }

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

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

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

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

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: var(--color-dark-green);
    border-radius: 4px;
    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
*
* CUSTOM: Modified to slide from bottom with 100vw x 100vh
*/

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

.off-canvas {
    display: none;
}

/* Only show off-canvas when offside.js has initialized AND page is not loading */

.offside-js--init:not(.is-loading) .off-canvas {
        display: block;
    }

/* Keep hidden during loading even if offside.js initializes early */

html.is-loading .off-canvas,
html.no-js .off-canvas {
    display: none !important;
}

/* Off-canvas element CSS - Custom bottom slide */

.offside {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: var(--viewport-height);
    z-index: 100;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(100%);
}

/* Override default left/right positioning */

.offside--right {
    left: 0;
    right: auto;
}

/* Off-canvas element is open: slides up from bottom */

.offside--right.is-open {
    transform: translateY(0) !important;
}

/* Elements Transitions */

.offside-js--interact .offside {
    transition: transform 0.3s ease;
    -webkit-backface-visibility: hidden;
}

/* Site overlay */

.site-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--viewport-height);
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    cursor: pointer;
    z-index: 99;
}

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

/**
 * 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: var(--color-dark-green);
  /*
  --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;
}

/* Custom: Hide navigation when all slides are visible */

.swiper-all-visible .swiper-button-prev,
.swiper-all-visible .swiper-button-next {
  display: none !important;
}

/* Pannellum 2.5.6, https://github.com/mpetroff/pannellum */

.pnlm-container{margin:0;padding:0;overflow:hidden;position:relative;cursor:default;width:100%;height:100%;font-family:Helvetica,"Nimbus Sans L","Liberation Sans",Arial,sans-serif;background:#f4f4f4 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2267%22%20height%3D%22100%22%20viewBox%3D%220%200%2067%20100%22%3E%0A%3Cpath%20stroke%3D%22%23ccc%22%20fill%3D%22none%22%20d%3D%22M33.5%2C50%2C0%2C63%2C33.5%2C75%2C67%2C63%2C33.5%2C50m-33.5-50%2C67%2C25m-0.5%2C0%2C0%2C75m-66.5-75%2C67-25m-33.5%2C75%2C0%2C25m0-100%2C0%2C50%22%2F%3E%0A%3C%2Fsvg%3E%0A') repeat;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;outline:0;line-height:1.4;contain:content}

.pnlm-container *{box-sizing:content-box}

.pnlm-ui{position:absolute;width:100%;height:100%;z-index:1}

.pnlm-grab{cursor:grab;cursor:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A') 12 8,default}

.pnlm-grabbing{cursor:grabbing;cursor:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s5.07-5.29%203.77-6.74c-1.31-1.45-2.53%200.14-2.53%200.14s2.74-3.29%200.535-4.06c-2.2-0.769-2.52%201.3-2.52%201.3s0.81-2.13-1.12-2.13-1.52%201.77-1.52%201.77-0.261-1.59-1.87-1.12c-1.61%200.468-0.874%202.17-0.874%202.17s-0.651-1.55-2-0.445c-1.35%201.11-0.68%202.25-0.365%203.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A') 12 8,default}

.pnlm-sprite{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22208%22%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22117%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22143%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20cy%3D%22169%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cy%3D%22195%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%22195%22%20r%3D%222.5%22%2F%3E%0A%3Cpath%20d%3D%22m5%2083v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-5%205v6h6v-6zm-5%205v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20110a7%207%200%200%200%20-7%207%207%207%200%200%200%207%207%207%207%200%200%200%207%20-7%207%207%200%200%200%20-7%20-7zm-1%203h2v2h-2zm0%203h2v5h-2z%22%2F%3E%0A%3Cpath%20d%3D%22m5%2057v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-10%2010v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m17%2038v2h-8v-2z%22%2F%3E%0A%3Cpath%20d%3D%22m12%209v3h-3v2h3v3h2v-3h3v-2h-3v-3z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20136-6.125%206.125h4.375v7.875h3.5v-7.875h4.375z%22%2F%3E%0A%3Cpath%20d%3D%22m10.428%20173.33v-5.77l5-2.89v5.77zm1-1.73%203-1.73-3.001-1.74z%22%2F%3E%0A%3C%2Fsvg%3E%0A')}

.pnlm-container:-moz-full-screen{height:100%!important;width:100%!important;position:static!important}

.pnlm-container:-webkit-full-screen{height:100%!important;width:100%!important;position:static!important}

.pnlm-container:-ms-fullscreen{height:100%!important;width:100%!important;position:static!important}

.pnlm-container:fullscreen{height:100%!important;width:100%!important;position:static!important}

.pnlm-render-container{cursor:inherit;position:absolute;height:100%;width:100%}

.pnlm-controls{margin-top:4px;background-color:#fff;border:1px solid #999;border-color:rgba(0,0,0,0.4);border-radius:3px;cursor:pointer;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}

.pnlm-control:hover{background-color:#f8f8f8}

.pnlm-controls-container{position:absolute;top:0;left:4px;z-index:1}

.pnlm-zoom-controls{width:26px;height:52px}

.pnlm-zoom-in{width:100%;height:50%;position:absolute;top:0;border-radius:3px 3px 0 0}

.pnlm-zoom-out{width:100%;height:50%;position:absolute;bottom:0;background-position:0 -26px;border-top:1px solid #ddd;border-top-color:rgba(0,0,0,0.10);border-radius:0 0 3px 3px}

.pnlm-fullscreen-toggle-button,.pnlm-orientation-button,.pnlm-hot-spot-debug-indicator{width:26px;height:26px}

.pnlm-hot-spot-debug-indicator{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;background-color:rgba(255,255,255,0.5);border-radius:13px;display:none}

.pnlm-orientation-button-inactive{background-position:0 -156px}

.pnlm-orientation-button-active{background-position:0 -182px}

.pnlm-fullscreen-toggle-button-inactive{background-position:0 -52px}

.pnlm-fullscreen-toggle-button-active{background-position:0 -78px}

.pnlm-panorama-info{position:absolute;bottom:4px;background-color:rgba(0,0,0,0.7);border-radius:0 3px 3px 0;padding-right:10px;color:#fff;text-align:left;display:none;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}

.pnlm-title-box{position:relative;font-size:20px;display:table;padding-left:5px;margin-bottom:3px}

.pnlm-author-box{position:relative;font-size:12px;display:table;padding-left:5px}

.pnlm-load-box{position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:rgba(0,0,0,0.7);border-radius:3px;text-align:center;font-size:20px;display:none;color:#fff}

.pnlm-load-box p{margin:20px 0}

.pnlm-lbox{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;display:none}

.pnlm-loading{animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-name:pnlm-mv;-webkit-animation-name:pnlm-mv;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-timing-function:linear;height:10px;width:10px;background-color:#fff;position:relative}

@keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}

@-webkit-keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}

.pnlm-load-button{position:absolute;top:50%;left:50%;width:200px;height:100px;margin:-50px 0 0 -100px;background-color:rgba(0,0,0,.7);border-radius:3px;text-align:center;font-size:20px;display:table;color:#fff;cursor:pointer}

.pnlm-load-button:hover{background-color:rgba(0,0,0,.8)}

.pnlm-load-button p{display:table-cell;vertical-align:middle}

.pnlm-info-box{font-size:15px;position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:#000;border-radius:3px;display:table;text-align:center;color:#fff;table-layout:fixed}

.pnlm-info-box a,.pnlm-author-box a{color:#fff;word-wrap:break-word;overflow-wrap:break-word}

.pnlm-info-box p{display:table-cell;vertical-align:middle;padding:0 5px 0 5px}

.pnlm-error-msg{display:none}

.pnlm-about-msg{font-size:11px;line-height:11px;color:#fff;padding:5px 8px 5px 8px;background:rgba(0,0,0,0.7);border-radius:3px;position:absolute;top:50px;left:50px;display:none;opacity:0;-moz-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;z-index:1}

.pnlm-about-msg a:link,.pnlm-about-msg a:visited{color:#fff}

.pnlm-about-msg a:hover,.pnlm-about-msg a:active{color:#eee}

.pnlm-hotspot-base{position:absolute;visibility:hidden;cursor:default;vertical-align:middle;top:0;z-index:1}

.pnlm-hotspot{height:26px;width:26px;border-radius:13px}

.pnlm-hotspot:hover{background-color:rgba(255,255,255,0.2)}

.pnlm-hotspot.pnlm-info{background-position:0 -104px}

.pnlm-hotspot.pnlm-scene{background-position:0 -130px}

div.pnlm-tooltip span{visibility:hidden;position:absolute;border-radius:3px;background-color:rgba(0,0,0,0.7);color:#fff;text-align:center;max-width:200px;padding:5px 10px;margin-left:-220px;cursor:default}

div.pnlm-tooltip:hover span{visibility:visible}

div.pnlm-tooltip:hover span:after{content:'';position:absolute;width:0;height:0;border-width:10px;border-style:solid;border-color:rgba(0,0,0,0.7) transparent transparent transparent;bottom:-20px;left:-10px;margin:0 50%}

.pnlm-compass{position:absolute;width:50px;height:50px;right:4px;bottom:4px;border-radius:25px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2250%22%20width%3D%2250%22%3E%0A%3Cpath%20d%3D%22m24.5078%206-3.2578%2018h7.5l-3.25781-18h-0.984376zm-3.2578%2020%203.2578%2018h0.9844l3.2578-18h-7.5zm1.19531%200.9941h5.10938l-2.5547%2014.1075-2.5547-14.1075z%22%2F%3E%0A%3C%2Fsvg%3E%0A');cursor:default;display:none}

.pnlm-world{position:absolute;left:50%;top:50%}

.pnlm-face{position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0}

.pnlm-dragfix,.pnlm-preview-img{position:absolute;height:100%;width:100%}

.pnlm-preview-img{background-size:cover;background-position:center}

.pnlm-lbar{width:150px;margin:0 auto;border:#fff 1px solid;height:6px}

.pnlm-lbar-fill{background:#fff;height:100%;width:0}

.pnlm-lmsg{font-size:12px}

.pnlm-fade-img{position:absolute;top:0;left:0}

.pnlm-pointer{cursor:pointer}

/* ==========================================================================
   LOAD MORE EVENTS COMPONENT
   ========================================================================== */

/* Load More Button */

.js-load-more-events {
	min-width: 200px;
	position: relative;
	transition: opacity 0.3s ease, transform 0.2s ease;
}

.js-load-more-events:hover:not(:disabled) {
	transform: translateY(-2px);
}

.js-load-more-events:active:not(:disabled) {
	transform: translateY(0);
}

.js-load-more-events:disabled {
	cursor: wait;
	opacity: 0.7;
}

/* Loading spinner */

.js-load-more-spinner {
	display: inline-block;
	position: relative;
}

.js-load-more-spinner::after {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 0.6s linear infinite;
	vertical-align: middle;
	margin-left: 0.5em;
}

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

/* Text transition */

.js-load-more-text,
.js-load-more-spinner {
	transition: opacity 0.2s ease;
}

/* Past events grid - prepare for GSAP animations */

.js-past-events-grid {
	position: relative;
}

/* Ensure new cards are positioned correctly */

.js-past-events-grid > * {
	position: relative;
}

/* Smooth height transitions when button is hidden */

.js-load-more-events:has(+ .js-load-more-events[style*="display: none"]) {
	overflow: hidden;
	transition: height 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
}

/* ==========================================================================
   ARCHIVE POST NAVIGATION
   ========================================================================== */

.archive-post-nav {
	--post-nav-bg: var(--color-pink);
	--post-nav-fg: var(--color-clay);
}

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

.archive-post-nav ul * {
		/* height: 100%; */
		max-height: 50px;
	}

.archive-post-nav ul{
	margin-bottom: 3rem;
}

/* Previous/Next arrow links */

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

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

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

/* SVG sizing */

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

/* Page number links */

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

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

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

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

/* Current page */

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

/* Responsive adjustments */

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

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

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

/* ==========================================================================
   OFFICES PAGE TEMPLATE
   ========================================================================== */

/* Site header on offices page - default transparent with transition */

.page-template-template-offices .site-header {
	background-color: var(--color-sand);
	/* background-color: transparent; */
	/* padding-bottom: 0.5rem; */
	height: var(--navTotalHeight);
	transition: all 0.6s ease;
	z-index: 50;
}

html.nav-is-visible body.page-template-template-offices .site-header {
	transition: all 0.3s ease;
}

/* Nav logo background on offices page */

.page-template-template-offices .nav-logo {
	background-color: var(--color-sand);
}

/* Search form - single line layout */

.searchform {
    width: 100%;
}

.searchform .input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 600px;
}

.searchform .input-group-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-sand, #ddd);
    border-right: none;
}

.searchform .input-group-button {
    flex: 0 0 auto;
}

.searchform .input-group-button label {
    display: block;
    margin: 0;
    cursor: pointer;
    height: 100%;
}

.searchform .input-group-button .button {
    height: 100%;
    margin: 0;
    border-radius: 0;
    border: 1px solid var(--color-sand, #ddd);
    padding: 0.5rem 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.searchform .input-group-button svg {
    width: 20px;
    height: 20px;
}

/* Slideshow Component */

.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

.slideshow .swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: relative;
  height: 100%;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Arrow wrapper - positions arrows in top right
   Uses flexbox to place arrows side-by-side instead of Swiper's default positioning */

.slideshow .absolute-top-right {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0;
  padding: 0;
  z-index: 10;
}

/* Arrow styling */

.slideshow__arrow {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;

  /* Override Swiper's hardcoded --swiper-navigation-color (set to dark-green) */
  color: inherit !important;

  /* Override Swiper default positioning - arrows sit in flex container instead */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: 0 !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  flex-shrink: 0;
}

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

/* Arrow SVG styling - left and right arrows have opposite colors */

/* Left arrow: background color fill, foreground color stroke */

.slideshow__arrow--prev svg path:first-child {
  fill: var(--block-bg-color, var(--color-light));
}

.slideshow__arrow--prev svg path:last-child {
  fill: none;
  stroke: var(--block-fg-color, var(--color-dark-green));
  stroke-width: 2px;
  stroke-linecap: square;
}

/* Right arrow: foreground color fill, background color stroke */

.slideshow__arrow--next svg path:first-child {
  fill: var(--block-fg-color, var(--color-dark-green));
}

.slideshow__arrow--next svg path:last-child {
  fill: none;
  stroke: var(--block-bg-color, var(--color-light));
  stroke-width: 2px;
  stroke-linecap: square;
}

/* Remove default Swiper arrow background */

.slideshow__arrow::after {
  content: none !important;
}

/* Disabled state */

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

/* Hidden state */

.slideshow__arrow.swiper-button-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

/* Pagination wrapper - sits in bottom right with solid background
   Background color inherits from parent slideshow's color combo
   Uses absolute-bottom-right utility for positioning */

.slideshow-pagination-wrapper {
  /* padding: var(--space-s, 1rem); */
  background-color: var(--block-bg-color, var(--color-light-green));
  z-index: 10;
}

/* Override Swiper pagination container */

.slideshow .swiper-pagination {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  padding: 0.0rem 0.5rem 0.1rem;
}

/* Pagination bullets - override Swiper defaults */

.slideshow .swiper-pagination-bullet {
  width: 0.8rem !important;
  height: 0.8rem !important;
  background: transparent !important;
  border: 1px solid var(--block-fg-color, var(--color-dark-green)) !important;
  opacity: 1 !important;
  transition: background-color 0.3s ease;
  /* margin: 0 var(--space-2xs, 0.15rem) !important; */
}

/* Active bullet - filled with foreground color */

.slideshow .swiper-pagination-bullet-active {
  background: var(--block-fg-color, var(--color-dark-green)) !important;
}

/* Ensure bullets are clickable */

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

/* ==========================================================================
   CAPTIONS
   ========================================================================== */

/* Image captions - positioned in top left of each slide
   Uses same color pattern as right arrow (fg-color bg, bg-color text) */

.slideshow__caption {
  padding: 0.25rem 0.6rem;
  background-color: var(--block-fg-color, var(--color-dark-green));
  color: var(--block-bg-color, var(--color-light));
  max-width: 50%;
  word-wrap: break-word;
}

/* ==========================================================================
   STICKY NAV (Offices Page Template)
   ========================================================================== */

.sticky-nav {
	display: none;
}

@media (min-width: 1230px){
	.sticky-nav { display: block; }
}

.sticky-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--color-sand);
	color: var(--color-dark-green);
	transition: top 0.3s ease;
}

/* Pseudo-element to extend background behind main nav */

.sticky-nav::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 100%;
	background-color: var(--color-sand);
	z-index: -1;
}

/* Offset sticky nav when main nav is visible (not hidden) */

html.nav-is-visible .page-template-template-offices .sticky-nav {
	top: var(--navTotalHeight, 80px);
}

.sticky-nav__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem 0;
}

.sticky-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.sticky-nav__item {
	margin: 0;
	padding: 0;
}

.sticky-nav__link {
	color: var(--color-dark-green);
	text-decoration: none;
	font-weight: 500;
	transition: opacity 0.2s ease;
}

.sticky-nav__link:hover {
	opacity: 0.7;
}

.sticky-nav__enquire {
	flex-shrink: 0;
}

/* ==========================================================================
   SVG MASK UTILITY
   ========================================================================== */

/* Base mask utility class - can be extended per-block */

.has-svg-mask {
	position: relative;
	overflow: hidden;
}

/* Ensure masked elements maintain aspect ratio */

.has-svg-mask img,
.has-svg-mask video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Support for background images with mask */

.has-svg-mask.has-bg-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Mask variants for each brand shape */

.has-svg-mask--cw_brand_shape_a {
	-webkit-mask-image: url('../svg/inline-cw_brand_shape_a.svg');
	mask-image: url('../svg/inline-cw_brand_shape_a.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.has-svg-mask--cw_brand_shape_b {
	-webkit-mask-image: url('../svg/inline-cw_brand_shape_b.svg');
	mask-image: url('../svg/inline-cw_brand_shape_b.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.has-svg-mask--cw_brand_shape_c {
	-webkit-mask-image: url('../svg/inline-cw_brand_shape_c.svg');
	mask-image: url('../svg/inline-cw_brand_shape_c.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.has-svg-mask--cw_brand_shape_d {
	-webkit-mask-image: url('../svg/inline-cw_brand_shape_d.svg');
	mask-image: url('../svg/inline-cw_brand_shape_d.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Page Hero Block */

.page-hero-block__media {
  position: relative;
}

/* Full Bleed Layout */

.page-hero-block--full-bleed .page-hero-block__media-wrapper {
  position: relative;
  height: 100%;
  max-height: 90vh;
  overflow: hidden;
  background-color: var(--block-bg-color, transparent);
}

.page-hero-block--full-bleed .page-hero-block__media,
.page-hero-block--full-bleed .page-hero-block__media img {
  width: 100%;
  max-height: 90vh;
  object-fit: cover;
}

/* Content overlay positioned at bottom left */

.page-hero-block__content-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding-bottom: var(--space-l, 2rem);
  padding-top: var(--space-2xl, 4rem);
}

/* Full bleed text uses foreground colour from colour combo */

.page-hero-block--full-bleed .page-hero-block__heading,
.page-hero-block--full-bleed .page-hero-block__copy {
  color: var(--block-fg-color, inherit);
}

/* Contained in Shape Layout */

.page-hero-block--contained-in-shape {
  background-color: var(--block-bg-color, transparent);
}

.page-hero-block--contained-in-shape .page-hero-block__inner {
  padding-top: var(--navTotalHeight); 
}

.page-hero-block--contained-in-shape .page-hero-block__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Contained in shape text uses foreground colour from colour combo */

.page-hero-block--contained-in-shape .page-hero-block__heading,
.page-hero-block--contained-in-shape .page-hero-block__copy {
  color: var(--block-fg-color, inherit);
}

/* When SVG mask is applied, ensure proper sizing */

.page-hero-block--contained-in-shape .page-hero-block__media.has-svg-mask {
  aspect-ratio: 1 / 1;
}

.page-hero-block--contained-in-shape .page-hero-block__media.has-svg-mask img,
.page-hero-block--contained-in-shape .page-hero-block__media.has-svg-mask video {
  height: 100%;
  object-fit: cover;
}

/* When SVG mask is applied, video wrapper should match mask dimensions */

.page-hero-block--contained-in-shape .page-hero-block__media.has-svg-mask .page-hero-block__video {
  height: 100%;
  min-height: 0;
}

/* ==========================================================================
   Content in Shape Layout
   Full bleed image with brand shape content overlay
   ========================================================================== */

.page-hero-block--content-in-shape .page-hero-block__media-wrapper {
  position: relative;
}

.page-hero-block--content-in-shape .page-hero-block__media {
  width: 100%;
}

/* Mobile: 1:1 aspect ratio for image */

.page-hero-block--content-in-shape .page-hero-block__media,
.page-hero-block--content-in-shape .page-hero-block__media img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Mobile: Hide desktop shape overlay */

.page-hero-block--content-in-shape .page-hero-block__shape-overlay {
  display: none;
}

/* Mobile: Show stacked content with full-bleed background */

.page-hero-block--content-in-shape .page-hero-block__mobile-content {
  background-color: var(--block-bg-color, var(--color-light));
  padding-block: var(--space-l);
  text-align: center;
}

.page-hero-block--content-in-shape .page-hero-block__mobile-content .page-hero-block__heading,
.page-hero-block--content-in-shape .page-hero-block__mobile-content .page-hero-block__copy {
  color: var(--block-fg-color, var(--color-dark-green));
}

/* Desktop: Switch to full-bleed image with shape overlay */

@media (min-width: 1024px) {
  .page-hero-block--content-in-shape .page-hero-block__media-wrapper {
    height: 100%;
    max-height: 90vh;
    overflow: hidden;
  }

  .page-hero-block--content-in-shape .page-hero-block__media,
  .page-hero-block--content-in-shape .page-hero-block__media img {
    aspect-ratio: auto;
    width: 100%;
    max-height: 90vh;
    object-fit: cover;
  }

  /* Hide mobile content on desktop */
  .page-hero-block--content-in-shape .page-hero-block__mobile-content {
    display: none;
  }

  /* Show shape overlay on desktop */
  .page-hero-block--content-in-shape .page-hero-block__shape-overlay {
    display: block;
    position: absolute;
    bottom: var(--space-l);
    left: 0;
    right: 0;
    z-index: 2;
  }

  /* Content wrapper - positions at 20% from left */
  .page-hero-block--content-in-shape .page-hero-block__shape-content-wrapper {
    width: 40%;
    margin-left: 5%;
  }

  /* Shape content - follows brand-shape-card__content pattern */
  .page-hero-block--content-in-shape .page-hero-block__shape-content {
    position: relative;
    width: 100%;
    padding-top: 10%;
    padding-bottom: 10%;
    background-color: transparent; /* Override colour combo bg - only shape SVG should have colour */
  }

  /* Shape background (SVG) - follows brand-shape-card__shape pattern */
  .page-hero-block--content-in-shape .page-hero-block__shape {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  .page-hero-block--content-in-shape .page-hero-block__shape svg {
    display: block;
    width: 100%;
  }

  /* SVG fill uses brand color combo background color */
  .page-hero-block--content-in-shape .page-hero-block__shape svg path,
  .page-hero-block--content-in-shape .page-hero-block__shape svg polygon,
  .page-hero-block--content-in-shape .page-hero-block__shape svg rect,
  .page-hero-block--content-in-shape .page-hero-block__shape svg circle,
  .page-hero-block--content-in-shape .page-hero-block__shape svg ellipse {
    fill: var(--block-bg-color, var(--color-light)) !important;
  }

  /* Text sits on top of shape - follows brand-shape-card__text pattern */
  .page-hero-block--content-in-shape .page-hero-block__shape-text {
    position: relative;
    z-index: 2;
    width: 70%;
    margin-inline: auto;
    text-align: center;
    color: var(--block-fg-color, var(--color-dark-green));
    --flow-space: 0.9rem;
  }

  .page-hero-block--content-in-shape .page-hero-block__shape-text .page-hero-block__heading,
  .page-hero-block--content-in-shape .page-hero-block__shape-text .page-hero-block__copy {
    color: var(--block-fg-color, var(--color-dark-green));
  }
}

/* ==========================================================================
   Content in Shape INSET Layout
   Same as content-in-shape but with inset margins and cream background
   ========================================================================== */

.page-hero-block--content-in-shape-inset {
  background-color: var(--color-cream, #f0e9de);
  padding-top: calc(var(--navTotalHeight) + var(--space-l, 2rem));
}

.page-hero-block--content-in-shape-inset .page-hero-block__media-wrapper {
  position: relative;
  /* margin: 0 5%; */
  /* max-width: var(--wrapper-width); */
}

/* Mobile: 1:1 aspect ratio for image */

.page-hero-block--content-in-shape-inset .page-hero-block__media,
.page-hero-block--content-in-shape-inset .page-hero-block__media img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Mobile: Hide desktop shape overlay */

.page-hero-block--content-in-shape-inset .page-hero-block__shape-overlay {
  display: none;
}

/* Mobile: Show stacked content with full-bleed background */

.page-hero-block--content-in-shape-inset .page-hero-block__mobile-content {
  background-color: var(--block-bg-color, var(--color-light));
  padding-block: var(--space-l);
  text-align: center;
}

.page-hero-block--content-in-shape-inset .page-hero-block__mobile-content .page-hero-block__heading,
.page-hero-block--content-in-shape-inset .page-hero-block__mobile-content .page-hero-block__copy {
  color: var(--block-fg-color, var(--color-dark-green));
}

/* Desktop: Switch to full-bleed-ish image with shape overlay */

@media (min-width: 1024px) {
  .page-hero-block--content-in-shape-inset .page-hero-block__media-wrapper {
    /* max-height: 75vh; */
    max-height: 90vh;
    overflow: hidden;
  }

  .page-hero-block--content-in-shape-inset .page-hero-block__media,
  .page-hero-block--content-in-shape-inset .page-hero-block__media img {
    aspect-ratio: auto;
    width: 100%;
    max-height: 80vh;
    object-fit: cover;
  }

  /* Hide mobile content on desktop */
  .page-hero-block--content-in-shape-inset .page-hero-block__mobile-content {
    display: none;
  }

  /* Show shape overlay on desktop */
  .page-hero-block--content-in-shape-inset .page-hero-block__shape-overlay {
    display: block;
    position: absolute;
    bottom: var(--space-l);
    left: 0;
    right: 0;
    z-index: 2;
  }

  /* Content wrapper - positions at left */
  .page-hero-block--content-in-shape-inset .page-hero-block__shape-content-wrapper {
    width: 50%;
    max-width: 520px;
    margin-left: 5%;
  }

  /* Shape content */
  .page-hero-block--content-in-shape-inset .page-hero-block__shape-content {
    position: relative;
    width: 100%;
    padding-top: 10%;
    padding-bottom: 4%;
    background-color: transparent;
  }

  /* Shape background (SVG) */
  .page-hero-block--content-in-shape-inset .page-hero-block__shape {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  .page-hero-block--content-in-shape-inset .page-hero-block__shape svg {
    display: block;
    width: 100%;
  }

  /* SVG fill uses brand color combo background color */
  .page-hero-block--content-in-shape-inset .page-hero-block__shape svg path,
  .page-hero-block--content-in-shape-inset .page-hero-block__shape svg polygon,
  .page-hero-block--content-in-shape-inset .page-hero-block__shape svg rect,
  .page-hero-block--content-in-shape-inset .page-hero-block__shape svg circle,
  .page-hero-block--content-in-shape-inset .page-hero-block__shape svg ellipse {
    fill: var(--block-bg-color, var(--color-light)) !important;
  }

  /* Text sits on top of shape */
  .page-hero-block--content-in-shape-inset .page-hero-block__shape-text {
    position: relative;
    z-index: 2;
    width: 80%;
    margin-inline: auto;
    text-align: center;
    color: var(--block-fg-color, var(--color-dark-green));
    --flow-space: 0.9rem;
  }

  .page-hero-block--content-in-shape-inset .page-hero-block__shape-text .page-hero-block__heading,
  .page-hero-block--content-in-shape-inset .page-hero-block__shape-text .page-hero-block__copy {
    color: var(--block-fg-color, var(--color-dark-green));
  }
}

/* ==========================================================================
   Google Maps Link (for content-in-shape layouts)
   ========================================================================== */

/* .page-hero-block__google-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 0.25rem);
  color: var(--block-fg-color, var(--color-dark-green));
  font-size: var(--size-step--1, 0.875rem);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.page-hero-block__google-link:hover {
  opacity: 0.7;
}

.page-hero-block__google-link svg {
  flex-shrink: 0;
} */

/* Feature Cards Block */

.feature-cards-block {
  overflow: hidden;
}

/* ==========================================================================
   BASE STYLES (Mobile First)
   ========================================================================== */

/* Intro section text color classes */

.feature-cards-block__intro.text-dark-green { color: var(--color-dark-green); }

.feature-cards-block__intro.text-dark-blue { color: var(--color-dark-blue); }

.feature-cards-block__intro.text-clay { color: var(--color-clay); }

.feature-cards-block__intro.text-yellow { color: var(--color-yellow); }

.feature-cards-block__intro.text-pink { color: var(--color-pink); }

.feature-cards-block__intro.text-light-blue { color: var(--color-light-blue); }

.feature-cards-block__intro.text-light-green { color: var(--color-light-green); }

.feature-cards-block__intro.text-sand { color: var(--color-sand); }

/* Cards now use shared .brand-shape-card class from card.css */

/* Block-specific overrides only below */

/* Solid brand colour behind image for reveal animation */

.feature-cards-swiper .swiper-slide {
  background-color: var(--block-bg-color, var(--color-dark-green));
}

/* ==========================================================================
   FEATURE CARDS SLIDER (Mobile/Tablet/Desktop)
   ========================================================================== */

/* Wrapper for cards - handles responsive behavior */

.feature-cards-block__cards-wrapper {
  position: relative;
}

/* Mobile/Tablet/Desktop: Swiper slider enabled up to 1440px */

@media (max-width: 89.9375em) {
  .feature-cards-swiper {
    overflow: visible;
  }

  .feature-cards-swiper .swiper-wrapper {
    display: flex;
  }

  .feature-cards-swiper .swiper-slide {
    width: auto;
  }
}

/* XL Desktop (1440px+): Disable Swiper, show as grid */

@media (min-width: 90em) {
  .feature-cards-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m, 1.5rem);
  }

  .feature-cards-swiper .swiper-slide {
    width: 100%;
  }

  /* Hide navigation arrows on XL desktop */
  .feature-cards-block__arrows {
    display: none;
  }
}

/* Arrow positioning for feature cards */

.feature-cards-block__arrows {
  position: relative;
  margin-top: var(--space-m, 1.5rem);
  display: flex;
  justify-content: flex-end;
  gap: 0;
}

/* @media (min-width: 48em) { */

/* .feature-cards-block__arrows {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
  } */

/* } */

/* ==========================================================================
   CARD SIZING BREAKPOINTS
   Add specific width/height/max-width values to ensure text fits shapes
   ========================================================================== */

/* Mobile: 0-768px */

@media (max-width: 47.9375em) {
  .feature-cards-block .brand-shape-card {
    width: 350px !important;
  }
}

/* Tablet: 768-1023px */

@media (min-width: 48em) and (max-width: 63.9375em) {
  .feature-cards-block .brand-shape-card {
    width: 350px !important;
  }
}

/* Desktop: 1024-1279px */

@media (min-width: 64em) and (max-width: 79.9375em) {
  .feature-cards-block .brand-shape-card {
    width: 400px !important;
  }
}

/* Large Desktop: 1280-1439px */

@media (min-width: 80em) and (max-width: 89.9375em) {
  .feature-cards-block .brand-shape-card {
    width: 420px !important;
  }
}

/* XL Desktop: 1440px+ */

@media (min-width: 90em) and (max-width: 99.9375em) {
  .feature-cards-block .brand-shape-card {
    width: 100% !important;
  }
}

@media (min-width: 100em) {
  .feature-cards-block .brand-shape-card {
    width: 100% !important;
  }
  .feature-cards-block__card-heading {
    font-size: var(--size-step-3);
  }
}

/* ==========================================================================
   SIMPLE CARD STYLE
   Heading in eyebrow font on solid full-width band at bottom
   ========================================================================== */

.simple-card {
  position: relative;
  overflow: hidden;
}

.simple-card img {
  position: absolute;
  transition: scale 0.5s ease;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.simple-card.has-link:hover img {
  scale: 1.02;
}

.simple-card__content-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--block-bg-color, var(--color-light));
  padding: var(--space-s) var(--space-m);
}

.simple-card__heading {
  color: var(--block-fg-color, var(--color-dark-green));
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Simple card sizing - match brand-shape-card sizes */

@media (max-width: 47.9375em) {
  .feature-cards-block .simple-card {
    width: 350px !important;
  }
}

@media (min-width: 48em) and (max-width: 63.9375em) {
  .feature-cards-block .simple-card {
    width: 350px !important;
  }
}

@media (min-width: 64em) and (max-width: 79.9375em) {
  .feature-cards-block .simple-card {
    width: 400px !important;
  }
}

@media (min-width: 80em) and (max-width: 89.9375em) {
  .feature-cards-block .simple-card {
    width: 420px !important;
  }
}

@media (min-width: 90em) {
  .feature-cards-block .simple-card {
    width: 100% !important;
  }
}

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

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

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

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

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

body.post-type-archive-event_cpt {
  background-color: var(--color-sand);
}

/* arrows */

/* .arrow-wrapper--small,
.arrow-wrapper--big {
	svg {
		background-color: var(--color-pink);
	}
} */

.arrow-wrapper--small {
	width: 50px;
	height: 50px;
}

.arrow-wrapper--big {
	width: 75px;
	height: 75px;
}

/* ==========================================================================
   ABOUT INTRO BLOCK
   ========================================================================== */

.about-intro-block {
	background-color: var(--color-cream, #f0e9de);
}

.about-intro-block__column {
	--flow-space: var(--space-m);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.about-intro-block__copy p {
	line-height: 1.6;
}

/* Media container */

.about-intro-block__media {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.about-intro-block__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* When SVG mask is applied, ensure proper sizing */

.about-intro-block__media.has-svg-mask {
	aspect-ratio: 1 / 1;
}

.about-intro-block__media.has-svg-mask img {
	height: 100%;
	object-fit: cover;
}

/* Caption styling */

.about-intro-block__caption {
	color: var(--color-dark-green);
	opacity: 0.8;
	display: flex;
}

@media (min-width: 1200px) {

.about-intro-block__caption {
		padding-left: var(--space-xs)
}
	}

/* Figure spacing */

.about-intro-block__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.about-intro-block__figure .about-intro-block__media {
		aspect-ratio: 9/12;
		flex: 1 0 64%;
	}

@media (min-width: 1200px) {
	.about-intro-block__figure {
		flex-direction: row;
		align-items: center;
	}
}

/* Accordion Block Styles */

.accordion-block {
  --accordion-border-color: var(--color-border);
  --accordion-bg: var(--color-surface);
  --accordion-hover-bg: var(--color-gray-50);
  --accordion-active-bg: var(--color-dark-green);
  --accordion-active-color: var(--color-text-inverse);
  --accordion-radius: var(--radius-md);
  --accordion-spacing: var(--space-s);
}

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

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

/* Accordion Item */

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

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

/* Trigger Button */

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

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

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

/* Icon */

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

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

/* Content */

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

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

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

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

/* Style Variations */

/* Minimal Style */

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

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

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

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

/* Filled Style */

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

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

/* Compact Style */

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

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

/* Active State Highlight */

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

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

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

/* Reduced Motion */

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

/* Responsive */

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

/* Print Styles */

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

/* ==========================================================================
   BEFORE-AFTER SLIDER BLOCK
   ========================================================================== */

/* Container - relative positioning for stacked images */

.before-after-slider-block__container {
	position: relative;
	width: 100%;
	overflow: hidden;
	cursor: ew-resize;
}

/* Image wrappers - stacked absolutely */

.before-after-slider-block__container .img-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}

.before-after-slider-block__container .img-wrap.is-after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Images fill their containers */

.before-after-slider-block__container .img-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	pointer-events: none;
}

/* Before image - 6px border using brand color */

.before-after-slider-block__container .img-wrap.is-before img {
	border: 6px solid var(--block-fg-color, var(--color-yellow));
	box-sizing: border-box;
}

/* Dragger handle - positioned absolutely, centered on drag position */

.dragger {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 4px;
	background-color: var(--block-fg-color, var(--color-yellow));
	cursor: ew-resize;
	z-index: 1 !important;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Dragger handle icon - centered vertically */

.dragger__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	user-select: none;
}

.dragger__handle:active {
	cursor: grabbing;
}

.dragger__handle svg {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--block-fg-color, var(--color-yellow));
}

/* Empty state message */

.before-after-slider-block__empty {
	padding: var(--space-l, 2rem);
	text-align: center;
	background-color: var(--color-light-shade, #f5f5f5);
	color: var(--color-dark, #333);
}

/* Responsive aspect ratio container */

.before-after-slider-block__container.before-after-wrap {
	aspect-ratio: 1 / 1;
	max-height: 600px;
}

@media (min-width: 48em) {
	.before-after-slider-block__container.before-after-wrap {
		max-height: 700px;
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 64em) {
	.before-after-slider-block__container.before-after-wrap {
		max-height: 850px;
	}
}

.big-intro-block__feature-icon svg {
  width: 20px;
  height: 20px;
}

.big-intro-block__copy * {
  margin: 0;
}

.big-intro-block__copy p {
  line-height: 1.2;
}

.big-intro-block__media {
  height: 100%;
  aspect-ratio: 1/1;
}

.big-intro-block__media img,
.big-intro-block__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.big-intro-block__media--inset {
  padding: 2rem;
  background-color: var(--color-light);
}

.big-intro-block__feature {
    text-align: left;
    display: flex;
    /* svg {  
      margin-right: 0.25rem;
    } */
}

.big-intro-block__feature-icon {
  display: inline-block;
  margin-top: 0.25rem;
  margin-right: 0.5rem;
}

.big-intro-block__heading {
      max-width: 1110px;
}

.big-intro-block .big-intro-block__feature-icon svg #inner {
  fill: transparent !important;
}

/* ==========================================================================
   BIG INTRO SLIDESHOW PROGRESSBAR
   ========================================================================== */

/**
 * Pagination disabled via JavaScript configuration (no progressbar initialized)
 */

/* ==========================================================================
   BLOG BLOCKS
   Minimal styling - tweak as needed
   ========================================================================== */

/* ==========================================================================
   BLOG BIG INTRO
   ========================================================================== */

.blog-big-intro-block {
	padding-block: var(--space-l, 2rem);
}

.blog-big-intro-block__copy {
	max-width: 900px;
	margin-inline: auto;
}

/* ==========================================================================
   BLOG MEDIA SHAPE
   ========================================================================== */

.blog-media-shape-block {
	padding-block: var(--space-l, 2rem);
	
}

.blog-media-shape-block__image-wrapper {
	overflow: hidden;
}

.blog-media-shape-block__image {
	width: 100%;
	height: auto;
	display: block;
}

.blog-media-shape-block__wrapper {
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
}

@media (min-width: 760px) {
	.blog-media-shape-block__wrapper {
		justify-content: center;
		flex-direction: row;
	}
}

.blog-media-shape-block__inner {
	max-width: 900px;
	display: flex;
	flex-direction: column;
	flex: 1 1 50%;
	gap: 1rem;
}

.blog-media-shape-block__inner > * {
		flex-basis: 50%;
	}

@media (min-width: 760px) {
	.blog-media-shape-block__inner {
		flex-direction: row;	
		gap: 3rem;	
	}
}

/* ==========================================================================
   BLOG SECTIONS
   ========================================================================== */

.blog-sections-block {
	padding-block: var(--space-l, 2rem);
}

.blog-sections-block__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-l, 2rem);
}

/* Inset on desktop */

@media (min-width: 1230px) {
	.blog-sections-block__inner {
		max-width: 900px;
		margin-inline: auto;
		/* padding-inline: var(--space-xl, 4rem); */
	}
}

.blog-sections-block__heading {
	margin-bottom: var(--space-s, 1rem);
}

/* ==========================================================================
   BROCHURE CTA BLOCK
   ========================================================================== */

/**
 * Full-bleed background media with centered button CTA
 * Min-height: 80vh for impact
 */

.brochure-cta-block {
	position: relative;
	width: 100%;
	min-height: 80vh;
	overflow: hidden;
}

/* Background Media Layer */

.brochure-cta-block__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.brochure-cta-block__background-image,
.brochure-cta-block__slideshow,
.brochure-cta-block__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Slideshow specific */

.brochure-cta-block__slideshow {
	height: 100% !important;
}

.brochure-cta-block__slideshow .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Video specific */

.brochure-cta-block__video {
	position: absolute;
	top: 0;
	left: 0;
}

/* Content Layer - Centered */

.brochure-cta-block__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
	padding: var(--space-m, 2rem);
}

.brochure-cta-block__content-inner {
	text-align: center;
}

/* Buttons Styling */

.brochure-cta-block__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 1rem);
	align-items: center;
}

/* Responsive - horizontal buttons on larger screens */

@media (min-width: 48em) {
	.brochure-cta-block__buttons {
		flex-direction: row;
		gap: var(--space-m, 1.5rem);
	}
}

/* Our Spaces Cards Block */

/* ==========================================================================
   BASE STYLES (Mobile First)
   ========================================================================== */

/* Intro section text color classes */

.canon-3d-viewer-block {
	z-index: 11;
   position: relative;
}

/* Editor-only placeholder (the live viewer doesn't run in Gutenberg) */

.canon-3d-viewer-block--editor-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: var(--space-xl, 3rem);
	color: var(--color-sand);
}

.canon-3d-placeholder__roundel {
	width: 72px;
	margin-inline: auto;
}

.canon-3d-placeholder__roundel svg {
	width: 100%;
	height: auto;
}

.canon-3d-placeholder__roundel svg * {
	fill: var(--color-sand);
}

/* Companies List Block */

/* ==========================================================================
   BLOCK BACKGROUND
   ========================================================================== */

.companies-list-block {
	background-color: var(--color-sand);
}

/* ==========================================================================
   FLAT GRID — 1 col mobile, 2 col tablet, 3 col desktop
   ========================================================================== */

.companies-list-block__grid {
	display: grid;
	grid-template-columns: 1fr;
	
	gap: var(--space-m, 1.5rem);
	row-gap: 12rem;
	align-items: end;
}

@media (min-width: 500px) {
	.companies-list-block__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1230px) {
	.companies-list-block__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Each group begins on a new row at column one */

.companies-list-block__card--row-start {
	grid-column-start: 1;
}

/* ==========================================================================
   GROUP HEADING — line spans across group columns via ::after
   ========================================================================== */

.companies-list-block__group-heading {
	position: relative;
	font-size: var(--size-step-4, 2.5rem);
	padding-bottom: var(--space-xs, 0.5rem);
	margin-bottom: var(--space-s, 1rem);
}

/* Underline spans the full grid width beneath the heading. Each group starts on
   column one, so the line extends across every column of the grid. */

.companies-list-block__group-heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	background-color: var(--color-dark-green);
	width: 100%;
}

/* Tablet (2 col): two column widths + the gap between them. */

@media (min-width: 500px) {
	.companies-list-block__group-heading::after {
		width: calc(2 * 100% + var(--space-m, 1.5rem));
	}
}

/* Desktop (3 col): three column widths + the two gaps between them. */

@media (min-width: 1230px) {
	.companies-list-block__group-heading::after {
		width: calc(3 * 100% + 2 * var(--space-m, 1.5rem));
	}
}

/* ==========================================================================
   CARD
   ========================================================================== */

.companies-list-block__card {
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.companies-list-block__card-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-s, 1rem) 0 ;
	max-width: 100%;
}

.companies-list-block__card-logo img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

.contact-details-block {
	background-color: var(--color-cream);
}

.contact-details-block__social a {
		display: inline-block;
	}

.contact-details-block__social .social-links svg {
		width: 1.5rem;
		height: 1.5rem;
	}

.contact-details-block__point {
	display: flex;
	align-items: center;
}

.contact-details-block__point span {
		display: flex;
		align-items: center;
		margin-right: 0.5rem;
	}

.contact-details-block__logo img {
	width: 200px;
	height: 100px;
}

.contact-details-block a {
	text-decoration: none;
}

.copy-gallery-block__content p {
		margin-bottom: 0.5rem;
	}

/* ==========================================================================
   SHARED CTA BLOCK SPACING
   Applied to all CTA-style blocks for generous vertical padding
   ========================================================================== */

/* ==========================================================================
   ENQUIRY CTA BLOCK
   ========================================================================== */

/* Media container */

.enquiry-cta-block__media {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Ensure media fills container */

.enquiry-cta-block__media img,
.enquiry-cta-block__media video {
	width: 100%;
	height: auto;
	display: block;
}

/* Video wrapper fills container - relies on the .video-bg utility for cropping */

.enquiry-cta-block__video {
	width: 100%;
	height: 100%;
	min-height: 400px;
}

/* When SVG mask is applied, ensure proper sizing */

.enquiry-cta-block__media.has-svg-mask {
	aspect-ratio: 1 / 1;
}

.enquiry-cta-block__media.has-svg-mask img,
.enquiry-cta-block__media.has-svg-mask video {
	height: 100%;
	object-fit: cover;
}

/* When SVG mask is applied, video wrapper should match mask dimensions */

.enquiry-cta-block__media.has-svg-mask .enquiry-cta-block__video {
	height: 100%;
	min-height: 0;
}

.enquiry-cta-block__copy {
	padding-right: 2rem;
}

/* ==========================================================================
   NARROW LAYOUT
   Circle image on left, copy on right
   ========================================================================== */

/* Circle media container */

.enquiry-cta-block__media--circle {
	border-radius: 50%;
	max-width: 280px;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.enquiry-cta-block__media--circle {
		max-width: 100%;
	}
}

.enquiry-cta-block__media--circle img {
	/* border-radius: 50%; */
	object-fit: cover;
}

/* Narrow layout adjustments */

.enquiry-cta-block--narrow .enquiry-cta-block__copy {
	padding-right: 0;
}

.enquiry-cta-block__buttons {

    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

}

/* ==========================================================================
   FACILITIES CARDS BLOCK
   ========================================================================== */

/* Media container needs overflow hidden for clip-path reveal */

.facilities-cards-block__card-media {
	position: relative;
	overflow: hidden;
}

/* The single image fills the aspect-ratio box. Absolute positioning gives a
   definite height so object-fit: cover works in Safari too — a percentage
   height (100%/auto/min-height) is mis-resolved against an aspect-ratio
   container in Safari and the image reverts to its intrinsic ratio.
   Slideshow images are nested deeper and covered by .object-fit-cover. */

.facilities-cards-block__card-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Ensure copy is visible initially if JS fails */

.facilities-cards-block__card-copy {
	visibility: visible;
}

/* FEATURE BLOCK */

/* Section 2 - Media container */

.feature-block__section-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Section 2 - Contained in shape variant */

.feature-block__section-2--contained {
  padding: var(--space-m);
}

.feature-block__section-2--contained .feature-block__section-2-media {
  width: 100%;
  /* height: auto; */
  max-width: 100%;
}

/* Section 2 - Full cover variant (no shape) */

.feature-block__section-2--full-cover {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
}

.feature-block__section-2--full-cover .feature-block__section-2-media {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.feature-block__section-2--full-cover .feature-block__section-2-media img,
.feature-block__section-2--full-cover .feature-block__section-2-media .feature-block__image,
.feature-block__section-2--full-cover .feature-block__section-2-media .video-bg,
.feature-block__section-2--full-cover .feature-block__section-2-media .video-embed {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Remove aspect ratio constraints when full cover */

.feature-block__section-2--full-cover .feature-block__section-2-media .slideshow {
  height: 100%;
}

.feature-block__section-2--full-cover .feature-block__section-2-media .slideshow::before {
  display: none;
}

.feature-block__section-2--full-cover .feature-block__section-2-media .slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Buttons - inherit brand colours from section colour combo */

.feature-block__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.feature-block__section-1 .feature-block__buttons .button--primary {
  background-color: var(--block-fg-color, var(--color-dark-green));
  border-color: var(--block-fg-color, var(--color-dark-green));
  color: var(--block-bg-color, var(--color-sand));
}

.feature-block__section-1 .feature-block__buttons .button--primary:hover {
  background-color: var(--block-hover-color, var(--color-light-green));
  border-color: var(--block-hover-color, var(--color-light-green));
  color: var(--block-bg-color, var(--color-dark-green));
}

.feature-block__section-1 .feature-block__buttons .button--secondary {
  background-color: transparent;
  border-color: var(--block-fg-color, var(--color-dark-green));
  color: var(--block-fg-color, var(--color-dark-green));
}

.feature-block__section-1 .feature-block__buttons .button--secondary:hover {
  background-color: var(--block-hover-color, var(--color-dark-green));
  border-color: var(--block-hover-color, var(--color-dark-green));
  color: var(--block-bg-color, var(--color-light));
}

.feature-block__copy {
  padding-bottom: var(--space-m);
}

/* Copy - vertically centre on large screens */

@media (min-width: 1024px) {
  .feature-block__copy {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Form Block */

/* ==========================================================================
   BLOCK BACKGROUND AND FOREGROUND COLORS
   ========================================================================== */

.form-block {
	background-color: var(--color-dark-green);
	color: var(--color-light);
}

/* ==========================================================================
   FORMINATOR FORM OVERRIDES
   ========================================================================== */

/* Ensure white text for all form elements */

.form-block .forminator-label,
.form-block .forminator-description,
.form-block input,
.form-block textarea,
.form-block select {
	color: var(--color-light);
}

/* Style labels with eyebrow font */

.form-block .forminator-ui.forminator-design--default .forminator-label,
.form-block .forminator-label {
	font-family: var(--font-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	font-size: 1rem !important;
}

/* Input field styling for visibility on dark background */

.form-block input[type="text"],
.form-block input[type="email"],
.form-block input[type="tel"],
.form-block input[type="url"],
.form-block input[type="number"],
.form-block textarea,
.form-block select {
	background-color: var(--color-light);
	color: var(--color-dark-green);
	border-color: var(--color-light);
}

.form-block input::placeholder,
.form-block textarea::placeholder {
	color: var(--color-dark-green);
	opacity: 0.6;
}

/* ==========================================================================
   SUBMIT BUTTON STYLING
   ========================================================================== */

/* More specific selector to override Forminator defaults */

.form-block .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit,
.form-block .forminator-ui .forminator-button-submit,
.form-block .forminator-button-submit {
	background-color: var(--color-yellow) !important;
	color: var(--color-dark-green) !important;
	font-family: var(--font-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	border: none !important;
	cursor: pointer;
	transition: opacity 0.2s ease;
	padding: 0.5rem var(--space-m, 1.5rem) !important;
}

.form-block .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit:hover,
.form-block .forminator-ui .forminator-button-submit:hover,
.form-block .forminator-button-submit:hover {
	opacity: 0.9;
	background-color: var(--color-yellow) !important;
}

/* Full width on mobile and tablet */

.form-block .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit,
.form-block .forminator-ui .forminator-button-submit,
.form-block .forminator-button-submit {
	width: 100%;
}

/* Desktop: horizontal padding instead of full width */

@media (min-width: 64em) {
	.form-block .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit,
	.form-block .forminator-ui .forminator-button-submit,
	.form-block .forminator-button-submit {
		width: auto;
		padding-left: var(--space-xl, 3rem) !important;
		padding-right: var(--space-xl, 3rem) !important;
	}
}

/* Full Bleed Media (in Shape) Block */

/* Block uses brand colour for background */

.full-bleed-media-in-shape-block {
	min-height: 50vh;
	display: flex;
	align-items: center;
}

/* Media container */

.full-bleed-media-in-shape-block__media {
	position: relative;
	width: 100%;
	min-height: 400px;
	max-height: 90vh;
}

/* Image styling */

.full-bleed-media-in-shape-block__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Video container */

.full-bleed-media-in-shape-block__video {
	width: 100%;
	height: 100%;
	min-height: 400px;
}

/* Slideshow wrapper */

.full-bleed-media-in-shape-block__slideshow {
	width: 100%;
	height: 100%;
	min-height: 400px;
}

/* When SVG mask is applied, ensure proper sizing */

.full-bleed-media-in-shape-block__media.has-svg-mask {
	aspect-ratio: 1 / 1;
}

.full-bleed-media-in-shape-block__media.has-svg-mask img,
.full-bleed-media-in-shape-block__media.has-svg-mask video {
	height: 100%;
	object-fit: cover;
}

/* When SVG mask is applied, video and slideshow wrappers should match mask dimensions */

.full-bleed-media-in-shape-block__media.has-svg-mask .full-bleed-media-in-shape-block__video,
.full-bleed-media-in-shape-block__media.has-svg-mask .full-bleed-media-in-shape-block__slideshow {
	height: 100%;
	min-height: 0;
}

/* Background colour classes */

.full-bleed-media-in-shape-block.bg-dark-green {
	background-color: var(--color-dark-green);
}

.full-bleed-media-in-shape-block.bg-dark-blue {
	background-color: var(--color-dark-blue);
}

.full-bleed-media-in-shape-block.bg-clay {
	background-color: var(--color-clay);
}

.full-bleed-media-in-shape-block.bg-yellow {
	background-color: var(--color-yellow);
}

.full-bleed-media-in-shape-block.bg-pink {
	background-color: var(--color-pink);
}

.full-bleed-media-in-shape-block.bg-light-blue {
	background-color: var(--color-light-blue);
}

.full-bleed-media-in-shape-block.bg-light-green {
	background-color: var(--color-light-green);
}

.full-bleed-media-in-shape-block.bg-sand {
	background-color: var(--color-sand);
}

/* Responsive adjustments */

@media (min-width: 48em) {
	.full-bleed-media-in-shape-block__media {
		min-height: 600px;
	}

	.full-bleed-media-in-shape-block__video,
	.full-bleed-media-in-shape-block__slideshow {
		min-height: 600px;
	}
}

.full-bleed-slider-block {
	max-height: 80vh !important;
}

@media (min-width: 760px) {
	.full-bleed-slider-block {
		max-height: 90vh !important;
	}
}

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

/* LAYOUT A */

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

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

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

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

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

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

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

/* LAYOUT B */

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

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

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

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

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

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

/* .gutenberg-blocks-wrapper * {
	
} */

.gutenberg-blocks-wrapper h1,
.gutenberg-blocks-wrapper h2,
.gutenberg-blocks-wrapper h3,
.gutenberg-blocks-wrapper h4,
.gutenberg-blocks-wrapper h5 {
	margin-bottom: 1rem;
}

.gutenberg-blocks-wrapper p {
		margin-bottom: 0.5rem;
	}

/* ==========================================================================
   HERO GALLERY BLOCK
   ========================================================================== */

.hero-gallery-block {
    background-color: var(--color-sand);
    padding-top: 70px;
    padding-bottom: 2rem;
    z-index: 45;
    position: relative;
}

.hero-gallery-block__preview-grid {
    min-height: 60vh;
}

/* Preview grid - ensure equal height rows */

.hero-gallery-block__preview-grid {
    position: relative;
    height: 300px;
}

.hero-gallery-block__preview-grid .grid {
    height: 100%;
    gap: 0.5rem;
}

/* Equal height rows on all breakpoints */

.hero-gallery-block__preview-grid .grid {
    grid-auto-rows: 1fr;
}

/* Tablet: 2 columns, 2 equal rows */

@media (min-width: 760px) {
    .hero-gallery-block__preview-grid {
        height: 400px;
    }

    .hero-gallery-block__preview-grid .grid {
        gap: 1rem;
        grid-template-rows: repeat(2, 1fr);
    }
}

/* Desktop: 4 columns, 2 equal rows */

@media (min-width: 1230px) {
    .hero-gallery-block__preview-grid {
        height: 80vh;
    }

    .hero-gallery-block__preview-grid .grid {
        gap: 1.5rem;
        grid-template-rows: repeat(2, 1fr);
    }
}

/* Preview grid image buttons */

.hero-gallery-block__preview-grid button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: block;
    
}

.hero-gallery-block__preview-grid .content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}

.hero-gallery-block__preview-grid button:hover .content-overlay {
    background: rgba(0, 0, 0, 0.2);
}

/* Show more button */

button.hero-gallery-block__show-more {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    border: 1px solid var(--color-light);
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    z-index: 9;
}

/* is this being used? */

.block--hero {
	aspect-ratio: 16/9;
	position: relative;
	max-height: 90vh;
	overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

/* Home Hero Block
   The hero is bounded by the viewport rather than by its media's intrinsic size,
   so both bounds are declared once here and reused by the block, its media
   container and the media itself. */

.home-hero-block {
	--home-hero-min-height: 60vh;
	--home-hero-max-height: 90vh;
}

/* Prevent flash while hero image loads */

html.is-loading .home-hero-block,
html.no-js .home-hero-block {
	min-block-size: var(--home-hero-max-height);
	background-color: var(--color-dark-green);
}

.home-hero-block {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: var(--home-hero-min-height);
	max-block-size: var(--home-hero-max-height);
	overflow: hidden;
}

/* Hero image zoom-in reveal on load */

.home-hero-block__media {
	overflow: hidden;
}

/* The viewport bounds belong to media that sizes the hero itself. A background
   video's poster is not that: .video-bg already stretches it to whatever box the
   video occupies, and forcing a 60vh minimum on top would push it out of a
   ratio-locked box and leave the still framed differently from the clip behind
   it. */

.home-hero-block__media img:not(.video-bg__poster) {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: var(--home-hero-min-height);
	max-block-size: var(--home-hero-max-height);
	object-fit: cover;
}

/* Reveal applies to every hero still, poster included. */

.home-hero-block__media img {
	transform: scale(1.03);
	transition: transform 1.2s ease-out;
}

.home-hero-block__media.is-loaded img {
	transform: scale(1);
}

/* Background video: the poster and the <video> are both absolutely positioned
   inside .video-bg, so — unlike the image case — nothing in flow can give the
   container a height and it collapses to zero. Left to itself a loop has no
   intrinsic ratio to size against, so it takes the hero's full height, which
   also matches the is-loading placeholder above and avoids a shift when it
   paints. */

.home-hero-block__media .video-bg:not([class*="aspect-ratio--"]) {
	block-size: var(--home-hero-max-height);
}

/* When the editor locks a shape, the ratio decides the height instead. The
   viewport cap stays as a guard so a tall ratio on a short screen cannot push
   everything below the hero out of sight; past that point object-fit crops
   rather than the page growing.
   .video-bg--uncapped opts out, for a video whose frame cannot survive being
   cropped — one carrying text or a logo. The shape is then kept exactly and the
   hero is as tall as it needs to be, fold or no fold. */

.home-hero-block__media .video-bg[class*="aspect-ratio--"]:not(.video-bg--uncapped) {
	max-block-size: var(--home-hero-max-height);
}

/* A locked shape governs the hero outright, so the block's own viewport bounds
   have to stand down — otherwise the min would leave a strip of background
   below a short ratio and the loading placeholder would reserve a height the
   ratio then contradicts. The ratio box reserves its own space, so no
   placeholder is needed here either. */

.home-hero-block--fixed-ratio,
html.is-loading .home-hero-block--fixed-ratio,
html.no-js .home-hero-block--fixed-ratio {
	block-size: auto;
	min-block-size: 0;
	max-block-size: none;
}

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

/* ==========================================================================
   MAP BLOCK
   ========================================================================== */

.map-block {
	position: relative;
	padding-block: var(--space-xl);
}

.map-block__container {
	position: relative;
}

/* Map Image */

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

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

/* Google Maps Link */

.map-block__google-link {
	position: absolute;
	bottom: var(--space-s, 0.75rem);
	right: var(--space-s, 0.75rem);
	display: inline-flex;
}

.map-block__google-link:hover {
	background-color: var(--color-light-green);
	transform: translateY(-1px);
}

.map-block__google-link svg {
	flex-shrink: 0;
}

@media (min-width: 1230px) {
	.map-block__google-link {
		bottom: var(--space-l, 2rem);
		right: var(--space-l, 2rem);
	}
}

/* ==========================================================================
   WALK TIMES KEY
   Mobile: stacked below map
   Desktop: right-aligned, overlapping below the map
   ========================================================================== */

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

.map-key-grid {
	display: grid;
	grid-template-columns: 35px 3fr 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: var(--space-s, 0.75rem);
	grid-row-gap: 0px;
}

@media (min-width: 1230px) {
	/* Extra bottom padding on block to accommodate the key overlap */
	/* .map-block { */
		/* padding-bottom: var(--space-4xl); */
	/* } */

	/* Position key right-aligned, overlapping below the map */
	.map-block__container {
		padding-bottom: var(--space-2xl);
	}

	.map-block__key {
		position: absolute;
		bottom: 0;
		right: 5%;
		max-width: 520px;
		z-index: 2;
	}
}

.map-block__key-title {
	margin: 0;
	color: var(--color-light-blue);
	grid-column: 2;
}

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

.map-block__key-item {
	display: grid;
	grid-template-columns: 35px 3fr 1fr;
	grid-column-gap: var(--space-s, 0.75rem);
	align-items: center;
}

/* Icon styling */

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

.map-block__key-icon svg {
	width: 100%;
	height: 100%;
}

.map-block__key hr {
	height: 1px;
	color: var(--color-light-blue);
	background: var(--color-light-blue);
	font-size: 0;
	border: 0;
}

.map-block__key-icon svg path {
	fill: var(--color-light-blue);
}

.map-block__key-icon svg #inner {
	fill: transparent !important;
}

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

/* Text styling */

.map-block__key-location {
	color: var(--color-light-blue);
}

.map-block__key-time {
	color: var(--color-light-blue);
	opacity: 0.8;
}

/* Empty state */

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

/* OFFICE FEATURE INTRO */

.office-feature-intro-block__media img {
  width: 100%;
}

.offices-cta-block .offices-cta-media {
		/* max-height: 80%; */
		/* aspect-ratio: 1/1; */

		/* max-height: 80vh; */
		/* margin: 2rem auto; */
		/* display: flex; */
		/* align-items: center; */
		/* height: 100%; */
		/* > * { */
			/* max-height: 80%; */
		/* } */
	}

/* Swiper navigation buttons inherit background color from colour combo */

.offices-cta-block .swiper-button-prev {
		background-color: var(--block-bg-color, var(--color-light-green));
	}

.offices-cta-block .swiper-button-next {
		background-color: var(--block-fg-color, var(--color-dark-green));
	}

@media (min-width: 1230px) {
	.offices-cta-media-column {
		/* max-height: 80vh; */
	}
	.offices-cta-media-wrapper {
		/* padding: 3rem; */
		/* max-height: 80%; */
		/* aspect-ratio: 1/1; */
		
		/* max-height: 80vh; */
	}
	
}

/* Our Spaces Cards Block */

/* ==========================================================================
   BASE STYLES (Mobile First)
   ========================================================================== */

/* Intro section text color classes */

.our-spaces-cards-block__intro.text-dark-green { color: var(--color-dark-green); }

.our-spaces-cards-block__intro.text-dark-blue { color: var(--color-dark-blue); }

.our-spaces-cards-block__intro.text-clay { color: var(--color-clay); }

.our-spaces-cards-block__intro.text-yellow { color: var(--color-yellow); }

.our-spaces-cards-block__intro.text-pink { color: var(--color-pink); }

.our-spaces-cards-block__intro.text-light-blue { color: var(--color-light-blue); }

.our-spaces-cards-block__intro.text-light-green { color: var(--color-light-green); }

.our-spaces-cards-block__intro.text-sand { color: var(--color-sand); }

/* Cards now use shared .brand-shape-card class from card.css */

/* Block-specific overrides only below */

.our-spaces-cards-block__cards a {
	text-decoration: none;
}

/* ==========================================================================
   CARD SIZING BREAKPOINTS
   ========================================================================== */

@media (min-width: 100em) {
	.our-spaces-cards-block__card-heading {
		font-size: var(--size-step-3);
	}
}

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

/* ==========================================================================
   FULL-BLEED LAYOUT
   ========================================================================== */

/* Inner wrapper contains image, overlay, content - has the aspect ratio */

.page-cta-block--full-bleed .page-cta-block__full-bleed-inner {
	position: relative;
	width: 100%;
	max-height: 80vh;
	aspect-ratio: 1 / 1;
}

@media (min-width: 1230px) {
	.page-cta-block--full-bleed .page-cta-block__full-bleed-inner {
		aspect-ratio: 16 / 9;
	}
}

/* Image wrapper with aspect ratio */

.page-cta-block__image-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.page-cta-block__full-bleed .page-cta-block__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.5s ease;
}

/* Hover: zoom image + trigger button hover state */

.page-cta-block__full-bleed-inner:hover .page-cta-block__bg-image {
	transform: scale(1.03);
	transition: transform 0.5s ease;
}

.page-cta-block__full-bleed-inner:hover .page-cta-block__button {
	background-color: var(--block-fg-color, var(--color-light));
	color: var(--block-bg-color, var(--color-dark-green));
}

/* Subtle black gradient overlay on bottom-left corner */

.page-cta-block__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top right,
		rgba(0, 0, 0, 0.6) 0%,
		rgba(0, 0, 0, 0.3) 30%,
		rgba(0, 0, 0, 0) 60%
	);
	pointer-events: none;
	z-index: 1;
}

@media (min-width: 1230px) {
	.page-cta-block__overlay {
	background: linear-gradient(
		to top right,
		rgba(0, 0, 0, 0.6) 0%,
		rgba(0, 0, 0, 0.3) 15%,
		rgba(0, 0, 0, 0) 30%
	);
}
}

/* Content wrapper - overlaid on image */

.page-cta-block--full-bleed .page-cta-block__content-wrapper {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-l, 2rem);
	z-index: 2;
}

/* Title styling */

.page-cta-block__title {
	margin: 0;
	text-align: center;
	font-size: var(--size-step-4);
	color: var(--color-light);
}

@media (min-width: 1230px) {
	.page-cta-block--full-bleed .page-cta-block__content-wrapper {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-l, 2rem);
	}

	.page-cta-block__title {
		text-align: left;
		font-size: var(--size-step-4, 2.5rem);
		max-width: 60%;
	}
}

/* Full-bleed click target - covers entire image area */

.page-cta-block__link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* Button shared styles */

.page-cta-block--full-bleed .page-cta-block__button {
	background-color: var(--block-bg-color, var(--color-dark-green));
	color: var(--block-fg-color, var(--color-light));
	padding: var(--space-xs, 0.5rem) var(--space-m, 1.5rem);
	text-decoration: none;
	font-weight: 600;
	text-align: center;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Mobile button: full width, directly below the image */

.page-cta-block__button--mobile {
	display: block;
	width: 100%;
}

/* Desktop button: sits in flexbox wrapper, right-aligned */

.page-cta-block__button--desktop {
	flex-shrink: 0;
	pointer-events: none;
}

/* ==========================================================================
   CONTAINED LAYOUT (existing styles)
   ========================================================================== */

/* Media container */

.page-cta-block--contained .page-cta-block__media {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Ensure images fill container properly without stretching */

.page-cta-block--contained .page-cta-block__media img,
.page-cta-block--contained .page-cta-block__image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* On mobile, constrain aspect ratio to prevent overly tall images */

@media (max-width: 767px) {
	.page-cta-block--contained .page-cta-block__media {
		aspect-ratio: 4 / 3;
	}

	.page-cta-block--contained .page-cta-block__media img,
	.page-cta-block--contained .page-cta-block__image {
		height: 100%;
	}
}

/* Slideshow within page-cta should also use cover */

.page-cta-block--contained .page-cta-block__slideshow img {
	object-fit: cover;
}

/* Video wrapper */

.page-cta-block--contained .page-cta-block__video {
	width: 100%;
}

/* ==========================================================================
   PANORAMA 360 BLOCK
   ========================================================================== */

/* Panorama viewer container - Pannellum will fill this */

.panorama-360-block__viewer {
	width: 100%;
	height: 500px;
	position: relative;
	overflow: hidden;
	background-color: var(--color-dark, #000);
}

/* 360 icon - centered in viewer */

.panorama-360-block__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.6s ease;
}

/* Hidden state */

.panorama-360-block__icon.is-hidden {
	opacity: 0;
}

/* Icon SVG sizing */

.panorama-360-block__icon svg {
	width: 80px;
	height: 80px;
	display: block;
}

/* Icon inherits brand color combo */

/* Path 1: Background circle - uses bg color for fill */

.panorama-icon svg path:nth-child(1) {
	fill: var(--block-bg-color, var(--color-light)) !important;
}

/* Path 2: 360 globe lines - uses fg color for stroke */

.panorama-icon svg path:nth-child(2) {
	stroke: var(--block-fg-color, var(--color-dark-green)) !important;
}

@media (min-width: 48em) {
	.panorama-360-block__icon svg {
		width: 100px;
		height: 100px;
	}
}

/* Close button - top right corner */

.panorama-360-block__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 20;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--block-bg-color, var(--color-light));
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
	transform: scale(0.9);
}

/* Visible state */

.panorama-360-block__close.is-visible {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

/* Hover effect */

.panorama-360-block__close:hover {
	transform: scale(1.1);
}

/* Close icon SVG sizing */

.panorama-360-block__close svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Icon inherits inverse brand color - uses --block-bg-color for fill */

.panorama-360-block__close svg path {
	fill: var(--block-fg-color, var(--color-dark));
}

@media (min-width: 48em) {
	.panorama-360-block__close {
		width: 50px;
		height: 50px;
		min-width: 50px;
		min-height: 50px;
		top: 1.5rem;
		right: 1.5rem;
	}

	.panorama-360-block__close svg {
		width: 24px;
		height: 24px;
	}
}

/* Responsive heights */

@media (min-width: 48em) {
	.panorama-360-block__viewer {
		height: 600px;
	}
}

@media (min-width: 64em) {
	.panorama-360-block__viewer {
		height: 850px;
	}
}

/* Empty state message */

.panorama-360-block__empty {
	padding: var(--space-l, 2rem);
	text-align: center;
	background-color: var(--color-light-shade, #f5f5f5);
	color: var(--color-dark, #333);
}

/* ==========================================================================
   TOUCH CONTROL ACTIVATION - OVERLAY APPROACH
   ========================================================================== */

/**
 * Transparent overlay blocks touch events on Pannellum canvas until activated.
 * The overlay contains the 360 icon and prevents all interaction with the viewer
 * until the user clicks to activate it.
 */

.panorama-360-block__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 15; /* Above canvas, below close button (z-index: 20) */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.panorama-360-block__overlay.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Icon is now inside overlay, remove absolute positioning */

.panorama-360-block__overlay .panorama-360-block__icon {
	position: static;
	transform: none;
	z-index: auto;
	pointer-events: auto;
	opacity: 1;
	transition: none;
}

/* Remove icon hiding - overlay handles visibility */

.panorama-360-block__overlay .panorama-360-block__icon.is-hidden {
	opacity: 1;
}

/* Keep close button always interactive */

.panorama-360-block__close {
	pointer-events: auto;
}

/* Sustainability Plan Cards Block */

/* ==========================================================================
   BLOCK BACKGROUND AND FOREGROUND COLORS
   ========================================================================== */

.sustainability-plan-cards-block {
	background-color: var(--color-light-green);
	color: var(--color-dark-green);
}

/* ==========================================================================
   INTRO SECTION
   ========================================================================== */

.sustainability-plan-cards-block__intro {
	margin-bottom: var(--space-l, 2rem);
}

/* ==========================================================================
   CARDS GRID - 1 COL MOBILE/TABLET, 2 COL DESKTOP
   ========================================================================== */

.sustainability-plan-cards-block__cards {
	gap: var(--space-m, 1.5rem);
}

/* ==========================================================================
   INDIVIDUAL CARD - TWO COLUMN LAYOUT (NUMBER + CONTENT)
   ========================================================================== */

.sustainability-plan-cards-block__card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-m, 1.5rem);
	align-items: start;
}

/* ==========================================================================
   NUMBER IN FONT-H1 (01, 02, 03, etc.)
   ========================================================================== */

.sustainability-plan-cards-block__card-number {
	color: var(--color-dark-green);
	line-height: 1;
	font-weight: 700;
}

/* ==========================================================================
   CARD CONTENT COLUMN
   ========================================================================== */

.sustainability-plan-cards-block__card-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 1rem);
}

.sustainability-plan-cards-block__card-heading {
	color: var(--color-dark-green);
	margin: 0;
}

.sustainability-plan-cards-block__card-copy {
	margin: 0;
}

/* Sustainability USPs Block */

/* ==========================================================================
   INTRO SECTION
   ========================================================================== */

.sustainability-usps-block__intro {
	margin-bottom: var(--space-l, 2rem);
}

/* ==========================================================================
   STATS GRID - 1 COL MOBILE, 2 COL TABLET, 3 COL DESKTOP
   ========================================================================== */

.sustainability-usps-block__stats {
	gap: var(--space-m, 1.5rem);
	margin-bottom: var(--space-l, 2rem);
}

/* ==========================================================================
   INDIVIDUAL STAT - YELLOW BACKGROUND BOX WITH PADDING
   ========================================================================== */

.sustainability-usps-block__stat {
	background-color: var(--color-yellow);
	padding: var(--space-m, 1.5rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 1rem);
}

.sustainability-usps-block__stat-title {
	margin: 0;
	font-weight: 700;
}

.sustainability-usps-block__stat-copy {
	margin: 0;
}

/* ==========================================================================
   END COPY
   ========================================================================== */

.sustainability-usps-block__end-copy {
	margin-top: var(--space-l, 2rem);
}

/* ==========================================================================
   TARGETS & PERFORMANCE BLOCK
   ========================================================================== */

/* Individual card styling */

.targets-performance-block__card {
	/* display: flex; */
	/* flex-direction: column; */
	/* gap: var(--space-s, 1rem); */
	/* gap: 0; */
	padding: 0 var(--space-m, 1.5rem) var(--space-m, 1.5rem) var(--space-m, 1.5rem);
	background-color: var(--block-bg-color, transparent);
	color: var(--block-fg-color, inherit);
	margin-top: 40%;
}

.targets-performance-block__card-logo {
	/* background-color: var(--color-light); */
	background-color: #f4f4f4;
	border-radius: 55%;
	overflow: hidden;
	transform: translateY(-30%);
	width: 80%;
	margin-left: 10%;
}

.targets-performance-block__cards {
	gap: 0 !important;
}

/* Timeline Block */

.timeline-block {
	background-color: var(--color-sand);
	color: var(--color-dark-green);
}

.timeline-block__heading {
	margin-bottom: var(--space-l, 2rem);
}

/* ==========================================================================
   ROWS CONTAINER — holds the continuous vertical line
   ========================================================================== */

.timeline-block__rows {
	position: relative;
	padding-left: var(--space-l, 2rem);
}

/* Mobile: line on the left */

.timeline-block__line {
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: var(--color-dark-green);
}

/* Desktop: line in the centre */

@media (min-width: 1230px) {
	.timeline-block__rows {
		padding-left: 0;
	}

	.timeline-block__line {
		left: 50%;
	}
}

/* ==========================================================================
   ROW — mobile: stack. desktop: two-column grid
   ========================================================================== */

.timeline-block__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-m, 1.5rem);
}

.timeline-block__row + .timeline-block__row {
	margin-top: var(--space-xl, 3rem);
}

@media (min-width: 1230px) {
	.timeline-block__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl, 3rem);
		align-items: start;
	}
}

/* ==========================================================================
   IMAGES COLUMN
   ========================================================================== */

.timeline-block__row-images {
	display: flex;
	flex-direction: column;
	gap: var(--space-m, 1.5rem);
}

.timeline-block__figure {
	position: relative;
	margin: 0;
}

/* Mobile: constrain image so it doesn't touch the line */

.timeline-block__image {
	display: block;
	width: auto;
	max-width: 80%;
	height: auto;
}

/* Desktop: right-align images, keep away from centre line */

@media (min-width: 1230px) {
	.timeline-block__row-images {
		margin-right: 1rem;
	}

	.timeline-block__figure {
		display: flex;
		justify-content: end;
	}

	.timeline-block__image {
		max-width: 100%;
		max-height: 350px;
		object-fit: contain;
	}
}

/* ==========================================================================
   TICK — fixed 40px, centred on each image vertically
   ========================================================================== */

.timeline-block__tick {
	position: absolute;
	top: 50%;
	width: 20px;
	height: 1px;
	background-color: var(--color-dark-green);
}

/* Mobile: extends from the vertical line toward the image */

.timeline-block__tick {
	left: calc(-1 * var(--space-l, 2rem) + 8px);
}

/* Desktop: positioned just past the image area, toward the centre line */

@media (min-width: 1230px) {
	.timeline-block__tick {
		width: 40px;
		left: auto;
		right: calc(-3rem - 24px);
	}
}

/* ==========================================================================
   CONTENT COLUMN
   ========================================================================== */

.timeline-block__row-content {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	gap: var(--space-m, 1.5rem);
	height: 100%;
	
}

@media (min-width: 1230px) {
	.timeline-block__row-content {
		padding-left: 1rem;
	}
}

.timeline-block__copy-heading {
	margin: 0 0 var(--space-xs, 0.5rem) 0;
}

.timeline-block__copy-content p:last-child {
	margin-bottom: 0;
}

/* Key date */

.timeline-block__date {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
	border-top: solid 1px var(--color-dark-green);
	border-bottom: solid 1px var(--color-dark-green);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-xl);
}

/* ==========================================================================
   DESKTOP ROW SPACING MODIFIERS
   ========================================================================== */

@media (min-width: 1230px) {
	.timeline-block__row--spacing-small-above { margin-top: var(--space-s, 1rem); }
	.timeline-block__row--spacing-medium-above { margin-top: var(--space-m, 1.5rem); }
	.timeline-block__row--spacing-large-above { margin-top: var(--space-l, 2rem); }
	.timeline-block__row--spacing-small-below { margin-bottom: var(--space-s, 1rem); }
	.timeline-block__row--spacing-medium-below { margin-bottom: var(--space-m, 1.5rem); }
	.timeline-block__row--spacing-large-below { margin-bottom: var(--space-l, 2rem); }
}

/* USP Cards Block */

/* Block uses colour combo for background, text, and arrows */

.usp-cards-block {
	background-color: var(--block-bg-color, var(--color-white));
	color: var(--block-fg-color, var(--color-dark-green));
	overflow: hidden;
}

/* Intro section */

.usp-cards-block__intro {
	margin-bottom: var(--space-l, 2rem);
}

/* Card structure */

.usp-cards-block__card {
	position: relative;
	overflow: hidden;
	width: 300px;
}

@media (min-width: 760px) {
	.usp-cards-block__card {
		width: 400px;
	}
}

@media (min-width: 1230px) {
	.usp-cards-block__card { width: 500px; }
}

.usp-cards-block__card-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card content overlay at bottom */

.usp-cards-block__card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-m, 1.5rem);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 2;
}

.usp-cards-block__card-heading {
	color: var(--color-white);
	margin: 1rem 0 0 0;
	max-width: 300px;
	/* text-align: center; */
}

@media (min-width: 760px) {
	.usp-cards-block__card-heading {
		max-width: 400px;
	}
}

/* ==========================================================================
   USP CARDS SLIDER
   ========================================================================== */

/* Wrapper for cards - handles responsive behavior */

.usp-cards-block__cards-wrapper {
	position: relative;
}

/* Swiper slider enabled at all breakpoints */

.usp-cards-swiper {
	overflow: visible;
}

.usp-cards-swiper .swiper-wrapper {
	display: flex;
}

.usp-cards-swiper .swiper-slide {
	width: auto;
	/* max-width: 300px; */
}

@media (min-width: 1230px) {
	.usp-cards-swiper .swiper-slide {
		max-width: 500px;
	}
}

/* Arrow positioning - centered underneath slider at all breakpoints */

.usp-cards-block__arrows {
	position: relative;
	margin-top: var(--space-m, 1.5rem);
	display: flex;
	/* justify-content: center; */
	gap: var(--space-xs, 0.5rem);
}

/* Arrow styling inherits from block colour combo */

.usp-cards-block__arrows .slideshow__arrow {
	color: var(--block-fg-color, var(--color-dark-green));
}

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

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

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

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

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

/* Walking Times Block */

/* ==========================================================================
   BLOCK BACKGROUND AND FOREGROUND COLORS
   ========================================================================== */

.walking-times-block--content {
	background-color: var(--color-sand);
	color: var(--color-dark-green);
}

/* ==========================================================================
   INTRO SECTION
   ========================================================================== */

.walking-times-block__intro {
	margin-bottom: var(--space-l, 2rem);
}

/* ==========================================================================
   COLUMNS GRID
   ========================================================================== */

.walking-times-block__columns {
	gap: var(--space-l, 2rem);
}

/* ==========================================================================
   INDIVIDUAL COLUMN
   ========================================================================== */

.walking-times-block__column {
	/* display: flex; */
	/* flex-direction: column; */
	/* gap: var(--space-s, 1rem); */
}

.walking-times-block__column hr {
		height: 1px;
		color: var(--color-dark-green);
		background: var(--color-dark-green);
		font-size: 0;
		border: 0;
	}

/* Column time heading - dark green bg, light text */

/* .walking-times-block__column-time {
	background-color: var(--color-dark-green);
	color: var(--color-sand);
	padding: var(--space-xs, 0.5rem) var(--space-s, 0.75rem);
	margin: 0;
	font-size: var(--size-step-0, 1rem);
	font-weight: 600;
	display: inline-block;
	align-self: flex-start;
} */

/* ==========================================================================
   ITEMS LIST
   ========================================================================== */

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

/* Individual item */

.walking-times-block__item {
	display: flex;
	align-items: center;
	gap: var(--space-xs, 0.5rem);
}

/* ==========================================================================
   ICON STYLING
   ========================================================================== */

.walking-times-block__icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.walking-times-block__icon-wrapper svg {
	width: 3.5rem;
	height: 3.5rem;
}

.walking-times-block__icon-wrapper svg #inner {
	fill: var(--icon-bg-colour, var(--color-yellow)) !important;
}

/* ==========================================================================
   ITEM TITLE
   ========================================================================== */

.walking-times-block__item-title {
	color: var(--color-dark-green);
	/* font-size: var(--size-step-0, 1rem); */
	line-height: 1.1;
}

/* ==========================================================================
   WATERFRONT PROFILE BLOCK
   ========================================================================== */

/* Gallery grid - repeating pattern: 1 full width, 2 half width */

.waterfront-profile-block__gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-m, 1.5rem);
}

/* Full width items span both columns */

.waterfront-profile-block__gallery-item--full {
	grid-column: 1 / -1;
}

/* Half width items take one column each */

.waterfront-profile-block__gallery-item--half {
	grid-column: span 1;
}

/* Gallery item images fill container */

.waterfront-profile-block__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Optional: Add aspect ratio to maintain consistent heights */

.waterfront-profile-block__gallery-item--full {
	aspect-ratio: 16 / 9;
}

.waterfront-profile-block__gallery-item--half {
	aspect-ratio: 4 / 3;
}

/* Responsive: Stack on mobile */

@media (max-width: 47.99em) {
	.waterfront-profile-block__gallery {
		grid-template-columns: 1fr;
		gap: var(--space-s, 1rem);
	}

	.waterfront-profile-block__gallery-item--full,
	.waterfront-profile-block__gallery-item--half {
		grid-column: 1 / -1;
	}

	/* Adjust aspect ratios for mobile */
	.waterfront-profile-block__gallery-item--full,
	.waterfront-profile-block__gallery-item--half {
		aspect-ratio: 4 / 3;
	}
}

/**
 * Block Padding System
 *
 * Global padding management for all blocks.
 * Follows CUBE CSS methodology - values defined once, applied consistently.
 *
 * Structure:
 * 1. Default padding for standard content blocks
 * 2. Explicit no-padding for full-bleed blocks
 * 3. Utility classes (has-padding--*, has-spacing--*) - override defaults
 *
 * Order matters: defaults first, then utilities to override them.
 */

/* ==========================================================================
   DEFAULT BLOCK PADDING - Standard content blocks
   ========================================================================== */

/* Content blocks that should have standard top/bottom padding */

/* .feature-block, */

.feature-cards-block,
.regular-intro-block,
.usp-cards-block,
.our-spaces-cards-block,
.facilities-cards-block,
.sustainability-usps-block,
.sustainability-plan-cards-block,
.targets-performance-block,

.walking-times-block,
.copy-gallery-block,
.copy-data-table-block,
.contact-details-block,
.about-intro-block,
.events-block,
.latest-block,
.office-stats-block,
.waterfront-profile-block,
.before-after-slider-block,
.panorama-360-block,
/* .page-hero-block--contained-in-shape, */
.full-bleed-media-in-shape-block,
.form-block {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing);
}

/* CTA blocks typically need standard padding */

.page-cta-block.page-cta-block--contained,
.timeline-block,
.enquiry-cta-block,
.offices-cta-block,
.office-feature-intro-block {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing);
}

/* ==========================================================================
   DOUBLE PADDING
   ========================================================================== */

.companies-list-block,
.availability-cta-block {
	padding-top: var(--block-spacing--double);
	padding-bottom: var(--block-spacing--double);
}

/* ==========================================================================
   NO PADDING - Full-bleed and hero blocks
   ========================================================================== */

/* Full-bleed blocks should have no padding by default */

.full-bleed-slider-block,
.big-intro-block,
/* .full-bleed-media-in-shape-block, */
.page-hero-block.not(.page-hero-block--contained-in-shape),
.home-hero-block,
.hero-gallery-block {
	padding-top: 0;
	padding-bottom: 0;
}

/* just padding on bottom */

.page-hero-block--contained-in-shape {
	padding-bottom: var(--block-spacing);
}

/* ==========================================================================
   LARGE PADDING
   ========================================================================== */

/* .page-cta-block, */

.enquiry-cta-block {
/* .offices-cta-block, */
/* .office-feature-intro-block  */
	padding-block: var(--space-4xl);
}

/* ==========================================================================
   UTILITY CLASSES - Override defaults when applied via ACF
   ========================================================================== */

/*
 * These classes override the block-specific defaults above.
 * Applied via ACF fields for per-instance customization.
 *
 * Order: These come AFTER block defaults to ensure proper cascade.
 */

.has-padding--none {
	padding-top: 0;
	padding-bottom: 0;
}

.has-padding--half {
	padding-top: calc(var(--block-spacing) / 2);
	padding-bottom: calc(var(--block-spacing) / 2);
}

.has-padding--standard {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing);
}

.has-padding--large {
	padding-top: var(--block-spacing--double);
	padding-bottom: var(--block-spacing--double);
}

/* Individual padding-top utilities */

.has-padding-top--none {
	padding-top: 0;
}

.has-padding-top--half {
	padding-top: calc(var(--block-spacing) / 2);
}

.has-padding-top--standard {
	padding-top: var(--block-spacing);
}

.has-padding-top--large {
	padding-top: var(--block-spacing--double);
}

/* Individual padding-bottom utilities */

.has-padding-bottom--none {
	padding-bottom: 0;
}

.has-padding-bottom--half {
	padding-bottom: calc(var(--block-spacing) / 2);
}

.has-padding-bottom--standard {
	padding-bottom: var(--block-spacing);
}

.has-padding-bottom--large {
	padding-bottom: var(--block-spacing--double);
}

.has-spacing--half {
	margin-bottom: calc(var(--block-spacing) / 2);
}

.has-spacing--standard {
	margin-bottom: var(--block-spacing);
}

.has-spacing--large {
	margin-bottom: var(--block-spacing--double);
}

/* ==========================================================================
   RESPONSIVE PADDING UTILITIES - Apply padding at specific breakpoints
   ========================================================================== */

/*
 * Responsive padding utilities following Tailwind-style prefix pattern.
 * Apply padding only at specified breakpoint and above.
 *
 * Usage: Add class to block in ACF or template
 * Example: class="md:has-padding--standard lg:has-padding--large"
 */

/* Medium screens and up (768px+) */

@media (min-width: 760px) {
	.md\:has-padding--none {
		padding-top: 0;
		padding-bottom: 0;
	}

	.md\:has-padding--half {
		padding-top: calc(var(--block-spacing) / 2);
		padding-bottom: calc(var(--block-spacing) / 2);
	}

	.md\:has-padding--standard {
		padding-top: var(--block-spacing);
		padding-bottom: var(--block-spacing);
	}

	.md\:has-padding--large {
		padding-top: var(--block-spacing--double);
		padding-bottom: var(--block-spacing--double);
	}

	/* Individual padding-top utilities */
	.md\:has-padding-top--none {
		padding-top: 0;
	}

	.md\:has-padding-top--half {
		padding-top: calc(var(--block-spacing) / 2);
	}

	.md\:has-padding-top--standard {
		padding-top: var(--block-spacing);
	}

	.md\:has-padding-top--large {
		padding-top: var(--block-spacing--double);
	}

	/* Individual padding-bottom utilities */
	.md\:has-padding-bottom--none {
		padding-bottom: 0;
	}

	.md\:has-padding-bottom--half {
		padding-bottom: calc(var(--block-spacing) / 2);
	}

	.md\:has-padding-bottom--standard {
		padding-bottom: var(--block-spacing);
	}

	.md\:has-padding-bottom--large {
		padding-bottom: var(--block-spacing--double);
	}

	.md\:has-spacing--half {
		margin-bottom: calc(var(--block-spacing) / 2);
	}

	.md\:has-spacing--standard {
		margin-bottom: var(--block-spacing);
	}

	.md\:has-spacing--large {
		margin-bottom: var(--block-spacing--double);
	}
}

/* Large screens and up (1024px+) */

@media (min-width: 1230px) {
	.lg\:has-padding--none {
		padding-top: 0;
		padding-bottom: 0;
	}

	.lg\:has-padding--half {
		padding-top: calc(var(--block-spacing) / 2);
		padding-bottom: calc(var(--block-spacing) / 2);
	}

	.lg\:has-padding--standard {
		padding-top: var(--block-spacing);
		padding-bottom: var(--block-spacing);
	}

	.lg\:has-padding--large {
		padding-top: var(--block-spacing--double);
		padding-bottom: var(--block-spacing--double);
	}

	/* Individual padding-top utilities */
	.lg\:has-padding-top--none {
		padding-top: 0;
	}

	.lg\:has-padding-top--half {
		padding-top: calc(var(--block-spacing) / 2);
	}

	.lg\:has-padding-top--standard {
		padding-top: var(--block-spacing);
	}

	.lg\:has-padding-top--large {
		padding-top: var(--block-spacing--double);
	}

	/* Individual padding-bottom utilities */
	.lg\:has-padding-bottom--none {
		padding-bottom: 0;
	}

	.lg\:has-padding-bottom--half {
		padding-bottom: calc(var(--block-spacing) / 2);
	}

	.lg\:has-padding-bottom--standard {
		padding-bottom: var(--block-spacing);
	}

	.lg\:has-padding-bottom--large {
		padding-bottom: var(--block-spacing--double);
	}

	.lg\:has-spacing--half {
		margin-bottom: calc(var(--block-spacing) / 2);
	}

	.lg\:has-spacing--standard {
		margin-bottom: var(--block-spacing);
	}

	.lg\:has-spacing--large {
		margin-bottom: var(--block-spacing--double);
	}
}

/* if block is the first block, we might need to add padding */

.page-content div:nth-child(1) h1.first-gutenberg-block,
	.page-content div:nth-child(1) h2.first-gutenberg-block,
	.page-content div:nth-child(1) h3.first-gutenberg-block,
	.page-content div:nth-child(1) h4.first-gutenberg-block,
	.page-content div:nth-child(1) h5.first-gutenberg-block,
	.page-content div:nth-child(1) h6.first-gutenberg-block,
	.page-content div:nth-child(1) p.first-gutenberg-block {
		padding-top: var(--block-spacing);
	}

/* Remove padding-top from blocks that follow gutenberg-blocks-wrapper */

.page-content .gutenberg-blocks-wrapper + div,
.page-content .gutenberg-blocks-wrapper + section,
.page-content .gutenberg-blocks-wrapper + article {
	padding-top: 0 !important;
}

/* blog content spacing */

body.single-post #main {
	margin-top: var(--block-spacing); 
}

body.single-post #main > *,
body.single-post #main div > * {
	margin-bottom: calc(var(--block-spacing) / 2);
}

.home-hero-block,
.full-bleed-slider-block {
	/* width: 100vh; */
}

/* @screen lg {
	
	
} */

/* ==========================================================================
   BUTTON
   ========================================================================== */

/* Base button styles */

.forminator-button,
.button {
	align-items: center;
	/* border: 1px solid transparent; */
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	font-family: var(--font-eyebrow);
	font-weight: 600;
	gap: 0 var(--space-2xs);
	justify-content: center;
	letter-spacing: 0.1em;
	/* line-height: 1; */
	padding: .4em 1em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0s ease, border-color 0s ease, color 0s ease;

}

/* .button--wide { */

/* padding: .4em 2em; */

/* }  */

/* Default colors (low specificity - can be overridden by variants) */

:where(.forminator-button, .button) {
	background: var(--color-dark-green);
	color: var(--color-light);
}

/* SVG sizing */

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

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

/* ==========================================================================
   BUTTON VARIANTS
   ========================================================================== */

/* On hover: colours change instantly, text roll follows via animation delay */

.forminator-button:hover,
.button:hover {
	transition: background-color 0s ease, border-color 0s ease, color 0s ease;
}

/* Primary variant - inherits from brand colour combo */

a:where(.button--primary) {
	background-color: var(--block-bg-color, var(--color-dark-green));
	border: 1px solid var(--block-bg-color, var(--color-dark-green));
	color: var(--block-fg-color, var(--color-sand));
	/* color: white; */
}

a:where(.button--primary:hover) {
	background-color: var(--block-fg-color, var(--color-sand));
	border-color: var(--block-fg-color, var(--color-sand));
	color: var(--block-bg-color, var(--color-dark-green));
}

/* Reverse fg/bg colors on blocks with brand colour styling to make buttons stand out */

[class*="-on-"] a:where(.button--primary) {
	background-color: var(--block-fg-color, var(--color-sand));
	border: 1px solid var(--block-fg-color, var(--color-sand));
	color: var(--block-bg-color, var(--color-dark-green));
}

[class*="-on-"] a:where(.button--primary:hover) {
	background-color: var(--block-hover-color, var(--color-light-green));
	border-color: var(--block-hover-color, var(--color-light-green));
	color: var(--block-bg-color, var(--color-dark-green));
}

/* Secondary variant - inherits from brand colour combo (inverted) */

a:where(.button--secondary) {
	/* background-color: var(--block-fg-color, var(--color-sand)); */
	background-color: transparent;
	border: 1px solid var(--block-fg-color, var(--color-dark-green));
	color: var(--block-fg-color, var(--color-dark-green));
}

a:where(.button--secondary:hover) {
	background-color: var(--block-hover-color, var(--color-dark-green));
	border-color: var(--block-hover-color, var(--color-dark-green));
	color: var(--block-bg-color, var(--color-light));
}

/* Legacy data-type secondary variant */

/* .forminator-button[data-type="secondary"],
.button[data-type="secondary"] {
	border: 1px solid var(--color-dark);
} */

/* :where(.forminator-button:not([data-type="naked"]):hover,
.forminator-button[data-type="secondary"],
.button:not([data-type="naked"]):hover,
.button[data-type="secondary"]) {
	background: var(--color-dark);
	color: var(--color-quaternary);
}

:where(.forminator-button[data-type="secondary"]:hover,
.button[data-type="secondary"]:hover) {
	background-color: var(--color-quaternary);
	color: var(--color-dark);
} */

/* Naked variant */

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

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

/* Badge variant */

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

/* Wide variant - fills available horizontal space */

.forminator-button--wide,
.button--wide {
	width: 100%;
}

.button.button--large {
	font-size: var(--size-step-1);
}

/* ==========================================================================
   BUTTON HOVER ANIMATION
   ========================================================================== */

.button__text-wrapper {
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.button__label {
	display: block;
}

@media (hover: hover) {
	.button:hover .button__label,
	.forminator-button:hover .button__label {
		animation: text-roll 0.3s ease 0.1s both;
	}
}

@keyframes text-roll {
	0%   { transform: translateY(0); }
	49%  { transform: translateY(-150%); }
	50%  { transform: translateY(150%); }
	100% { transform: translateY(0); }
}

/* ==========================================================================
   BUTTON THEMES
   ========================================================================== */

/* Dark theme */

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

:where(.forminator-button[data-theme="dark"]:hover,
.button[data-theme="dark"]:hover) {
	background-color: var(--color-quaternary);
	color: var(--color-dark);
} */

/* Ghost theme */

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

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

:where(.forminator-button[data-theme="ghost"]:hover,
.button[data-theme="ghost"]:hover) {
	background: var(--color-dark-green-glare);
	border-color: var(--color-dark-green);
	color: var(--color-dark);
} */

/* Blog card hover effects */

.card {
    transition: transform 0.3s ease;
}

.card .image-wrapper {
    overflow: hidden;
}

.card .image-wrapper * {
    /* outline: 1px solid red; */
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card:hover .image-wrapper {
    /* transition: scale 0.5s ease !important; */
}

.card:hover .image-wrapper * {
    transform: scale(1.01);
}

.card .entry-title {
    position: relative;
    padding-left: calc(5px + 0.5rem); /* Reserve space for border + gap */
    margin-top: 1rem;
}

@media (min-width: 760px) {

.card .entry-title {
        margin-bottom: 1rem
}
    }

.card .entry-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--color-dark-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.card:hover .entry-title::before {
    transform: scaleX(1);
}

.card .card--date {
    padding-left: calc(5px + 0.5rem);
}

/* .card .entry-title {
    
    transition: all 0.3s ease;
    
    padding-left: 14px;
    border-left: 0px solid var(--color-dark-green);
}

.card:hover .entry-title {
    border-left: 5px solid var(--color-dark-green);
    padding-left: 10px;
    
    
} */

.card--event .card--content { aspect-ratio: 1/1; }

@media (min-width: 760px){
    .card--event .card--content {
            aspect-ratio: 3/4;
        }
}

/* position: relative; */

.card--event .event-date-wrapper {
        z-index: 1;
        /* position: relative; */
        top: 0;
        position: absolute;
        left: 0;
    }

.card--event .bg-image {
        z-index: 0;
    }

.card--event .bg-image * {
            object-fit: cover;
            height: 100%;
            width: 100%;
        }

.card--event .bg-image ::after {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 5.63%, rgba(0, 0, 0, 0.00) 61.25%);
            position: absolute;
            content: "";
            top: 0;
            width: 100%;
            left: 0;
            height: 100%;
        }

.card--event .card--content {
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.card--event .entry-title {
        color: var(--color-light);
        justify-content: center;
        text-align: center;
        width: 90%;
        margin-top: 2rem;
    }

.card--event .card--date {
        background-color: var(--block-bg-color, var(--color-light));
        color: var(--block-fg-color, var(--color-dark-green));
        padding: 0.3rem 0;
        /* position: absolute; */
        /* top: 0; */
    }

.card--event .card--categories {
        position: absolute;
        right: 0;
        bottom: 20%;
    }

.card-arrow {
    width: 50px;
    height: 50px;

    /* svg * {
         fill: var(--block-fg-color, var(--color-dark-green));
        } */
}

.card-arrow svg {
        width: 50px;
        height: 50px;
        /* fill: var(--block-fg-color, var(--color-dark-green)); */
    }

/* Right arrow: foreground color fill, background color stroke */

.card-arrow svg path:first-child {
    fill: var(--block-bg-color, var(--color-dark-green)) !important;
}

.card-arrow svg path:last-child {
    fill: none;
    stroke: var(--block-fg-color, var(--color-light)) !important;
    stroke-width: 2px;
    stroke-linecap: square;
}

/* ==========================================================================
   BRAND SHAPE CARD - Shared Component
   Used by: feature-cards-block, our-spaces-cards-block
   ========================================================================== */

.brand-shape-card {
	position: relative;
	overflow: hidden;
}

.brand-shape-card img {
	position: absolute;
	transition: scale 0.5s ease;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.brand-shape-card__content-wrapper {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.brand-shape-card__content {
	position: relative;
	width: 90%;
	left: 5%;
	padding-top: 10%;
	padding-bottom: 10%;
	transition: padding 0.3s ease;
}

/* Add padding on hover when card has a link */

.brand-shape-card.has-link:hover .brand-shape-card__content {
	padding-bottom: 12%;
}

.brand-shape-card.has-link:hover img {
	scale: 1.02;
}

/* Brand shape as background for text */

.brand-shape-card__shape {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.brand-shape-card__shape svg {
	display: block;
	width: 100%;
}

/* SVG fill uses brand color combo background color */

.brand-shape-card__shape svg path,
.brand-shape-card__shape svg polygon,
.brand-shape-card__shape svg rect,
.brand-shape-card__shape svg circle,
.brand-shape-card__shape svg ellipse {
	fill: var(--block-bg-color, var(--color-light)) !important;
}

/* Text sits on top of shape with proper z-index */

.brand-shape-card__text {
	position: relative;
	z-index: 2;
	color: var(--block-fg-color, var(--color-dark-green));
	width: 80%;
	left: 10%;
	display: block;
	text-align: center;
	--flow-space: 0.9rem;
}

.brand-shape-card__text p {
	line-height: 1.4;
}

.post-card {
    height: 100%;
}

.post-card a {
        display: flex;  
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

.site-footer svg * {
  fill: var(--color-sand) !important;
}

.site-footer {
  /* Even spacing above and below the bottom row (matches .footer__bottom margin-top) */
  padding: 3rem 0 var(--space-l, 2rem);
}

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

.site-footer a:hover {
  color: var(--color-pink);
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.footer-logo {
  width: 100%;
  margin: 1rem 0;
}

/* Footer logo animation - whole SVG slide up reveal */

.footer-logo a {
  display: block;
  overflow: hidden;
}

.footer-logo svg {
  transform: translateY(120%);
}

@media (min-width: 760px) {
  .footer-logo {
    margin: 6rem 0 1.5rem;
  }
}

@media (min-width: 1230px) {
  .footer-logo {
    margin: 8rem 0 1.5rem;
  }
}

/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */

.footer-hr {
  margin: 1rem 0;
  border-color: var(--color-sand);
}

@media (min-width: 760px) {
  .footer-hr {
    margin: 1.5rem 0;
  }
}

/* ==========================================================================
   TOP COLUMNS: contact | navigation | newsletter
   ========================================================================== */

.footer__top {
  gap: var(--space-xl, 2.5rem);
}

/* Small section headings — Larken (heading family) */

.footer__heading {
  font-family: var(--font-heading);
  font-size: var(--size-step-1);
  line-height: 1.2;
  margin-bottom: var(--space-2xs, 0.5rem);
}

/* --- Contact column --- */

.footer__address {
  line-height: 1.5;
}

.footer__contact .social-links {
  justify-content: flex-start;
}

.footer__social .social-links li svg {
  width: 20px;
}

/* --- Navigation column: primary bold, stacked above the secondary nav --- */

/* Nav items are small, like the address */

.footer__menu a,
.footer__secondary_menu a {
  font-size: var(--size-step-00);
  padding: 0 !important;
  display: block;
}

#menu-footer-main-menu a {
  font-weight: bold;
}

.footer__menu li,
.footer__secondary_menu li {
  margin-bottom: 0;
}

/* Separate the secondary nav from the primary (overrides .flow spacing) */

.footer__nav > .footer__secondary_menu {
  margin-top: 1rem;
}

/* Make an Enquiry: outline button with angled (cut) corners instead of curves.
   clip-path can't keep a border on the diagonals, so the element paints the sand
   "border" colour and the ::before is the dark-green interior inset 1px — leaving
   a 1px sand ring as the outline. On hover the interior fills sand. */

.footer__enquiry {
  --corner: 10px;
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: var(--space-2xs, 0.5rem) var(--space-m, 1.5rem);
  background-color: var(--color-sand);
  color: var(--color-sand) !important;
  font-weight: var(--font-semibold);
  text-align: center;
  clip-path: polygon(
    var(--corner) 0, calc(100% - var(--corner)) 0,
    100% var(--corner), 100% calc(100% - var(--corner)),
    calc(100% - var(--corner)) 100%, var(--corner) 100%,
    0 calc(100% - var(--corner)), 0 var(--corner)
  );
}

.footer__enquiry::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background-color: var(--color-dark-green);
  transition: background-color 0.2s ease;
  clip-path: polygon(
    var(--corner) 0, calc(100% - var(--corner)) 0,
    100% var(--corner), 100% calc(100% - var(--corner)),
    calc(100% - var(--corner)) 100%, var(--corner) 100%,
    0 calc(100% - var(--corner)), 0 var(--corner)
  );
}

.footer__enquiry:hover {
  color: var(--color-dark-green) !important;
}

.footer__enquiry:hover::before {
  background-color: var(--color-sand);
}

/* ==========================================================================
   NEWSLETTER FORM
   ========================================================================== */

/* Copy matches the address text size */

.footer__subscribe-copy {
  font-size: var(--size-step-00);
}

/* Newsletter column spans full width on mobile */

@media (max-width: 47.9375em) {
  .footer__subscribe,
  .footer__subscribe-form,
  .footer__subscribe-form .forminator-input {
    width: 100%;
  }
}

/* Input: sand outline on the dark-green footer, filling with sand once the user
   focuses / types into it. Triple selector beats Forminator's own high-specificity
   border rules (matches the pattern in block--form.css). */

.footer__subscribe-form .forminator-ui.forminator-custom-form[data-design=default] .forminator-input,
.footer__subscribe-form .forminator-ui .forminator-input,
.footer__subscribe-form .forminator-input {
  background-color: transparent !important;
  border: 1px solid var(--color-sand) !important;
  color: var(--color-sand) !important;
  font-size: var(--size-step-00);
  padding: var(--space-2xs, 0.5rem) var(--space-xs, 0.75rem) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.footer__subscribe-form .forminator-input::placeholder {
  color: var(--color-sand);
  opacity: 0.7;
}

.footer__subscribe-form .forminator-input:focus,
.footer__subscribe-form .forminator-input:not(:placeholder-shown) {
  background-color: var(--color-sand) !important;
  color: var(--color-dark-green) !important;
}

.footer__subscribe-form .forminator-input:focus::placeholder {
  color: var(--color-dark-green);
  opacity: 0.6;
}

/* Input and submit button share one height so they line up */

.footer__subscribe-form .forminator-input,
.footer__subscribe-form .forminator-button-submit {
  height: 2.75rem !important;
  box-sizing: border-box;
}

.footer__subscribe-form .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit,
.footer__subscribe-form .forminator-ui .forminator-button-submit,
.footer__subscribe-form .forminator-button-submit {
  border: 1px solid var(--color-sand) !important;
  color: var(--color-sand) !important;
  background-color: transparent !important;
  border-radius: 0px !important;
}

.footer__subscribe-form .forminator-button-submit:hover {
  background-color: var(--color-sand) !important;
  color: var(--color-dark-green) !important;
}

/* Newsletter form - horizontal layout on md+ */

@media (min-width: 48em) {
  .footer__subscribe-form .forminator-custom-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
  }

  .footer__subscribe-form .forminator-response-message {
    flex: 0 0 100%;
    width: 100%;
    order: -1;
    margin-bottom: 0 !important;
  }

  .footer__subscribe-form .forminator-row {
    margin: 0 !important;
    width: auto;
  }

  .footer__subscribe-form .forminator-row:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
  }

  .footer__subscribe-form .forminator-row.forminator-row-last {
    flex: 0 0 auto;
  }

  .footer__subscribe-form .forminator-col {
    width: 100% !important;
    padding: 0 !important;
  }

  .footer__subscribe-form .forminator-field {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .footer__subscribe-form .forminator-input {
    flex: 1 1 auto;
    width: 100% !important;
  }
}

@media (min-width: 760px) {
  .footer__subscribe-form .forminator-row {
    flex-grow: 1;
    max-width: 500px;
  }
}

/* ==========================================================================
   BOTTOM ROW: copyright | small-print (terms) | website by
   ========================================================================== */

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m, 1.5rem);
  margin-top: var(--space-l, 2rem);
}

.footer__bottom .menu {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.forminator-ui .forminator-label:not([class*="forminator-floating-"]) {
    font-size: 14px;
    font-weight: 700;
}

.forminator-ui .forminator-is_filled .forminator-label[class*="forminator-floating-"],
.forminator-ui .forminator-is_active .forminator-label[class*="forminator-floating-"] {
    font-size: 14px;
    font-weight: 700;
}

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

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

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

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

.forminator-ui .forminator-input,
.forminator-ui .forminator-input input,
.forminator-ui .forminator-select {
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 400;
    border: none !important;
    color: var(--color-dark-green) !important;
}

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

.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-input:-moz-placeholder,
.forminator-ui .forminator-input::-moz-placeholder,
.forminator-ui .forminator-input:-ms-input-placeholder,
.forminator-ui .forminator-input::-webkit-input-placeholder {
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-fui-gray-light) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.forminator-ui .forminator-select2-container--default .forminator-select2-selection--single,
.forminator-ui .forminator-select2-container--default .forminator-select2-selection--multiple,
.forminator-ui .forminator-select2-container--default.forminator-select2-container--focus .forminator-select2-selection--single,
.forminator-ui .forminator-select2-container--default.forminator-select2-container--focus .forminator-select2-selection--multiple,
.forminator-ui .forminator-select2-container--default.forminator-select2-container--open .forminator-select2-selection--single,
.forminator-ui .forminator-select2-container--default.forminator-select2-container--open .forminator-select2-selection--multiple {
    border: none !important;
    border-radius: 0 !important;
    background-color: var(--color-light) !important;
    color: var(--color-dark-green) !important;
    font-family: var(--font-base) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    padding: .25em .4em !important;
}

/* Select2 dropdown arrow icon - ::before pseudo needs matching height */

.forminator-ui.forminator-custom-form[data-design=default] [class*="forminator-icon-"]::before {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
}

.forminator-ui.forminator-custom-form[data-design=default] .select2-selection__arrow [class*="forminator-icon-"] {
    font-size: 18px !important;
    color: var(--color-dark-green) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.forminator-ui .forminator-select2-container--default .forminator-select2-results__option,
.forminator-ui .forminator-select2-container--default .forminator-select2-results__option--highlighted[aria-selected],
.forminator-ui .forminator-select2-container--default .forminator-select2-results__option--highlighted[aria-selected]:hover {
    font-family: var(--font-base) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--color-dark-green) !important;
    padding: .4em .6em !important;
}

.forminator-ui .forminator-select2-container--default .forminator-select2-results__option--highlighted[aria-selected],
.forminator-ui .forminator-select2-container--default .forminator-select2-results__option--highlighted[aria-selected]:hover {
    background-color: var(--color-dark-green) !important;
    color: var(--color-light) !important;
}

.forminator-ui .forminator-select2-container .forminator-select2-selection__choice {
    border: none !important;
    background-color: var(--color-cream) !important;
    color: var(--color-dark-green) !important;
}

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

/* ==========================================================================
   SELECT2 DROPDOWN OVERRIDES
   Rendered outside .forminator-ui so needs its own selectors
   ========================================================================== */

/* Dropdown container — remove blue border, border-radius */

.forminator-select-dropdown-container--open [class*="forminator-dropdown--default"] {
    border-color: var(--color-dark-green) !important;
    border-radius: 0 !important;
}

/* All options — base text styling */

.forminator-select-dropdown-container--open [class*="forminator-dropdown--default"] .select2-results .select2-results__options .select2-results__option {
    font-family: var(--font-base) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--color-dark-green) !important;
    padding: .4em .6em !important;
    background-color: var(--color-light) !important;
}

/* Hover state */

.forminator-select-dropdown-container--open [class*="forminator-dropdown--default"] .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted[aria-selected],
.forminator-select-dropdown-container--open [class*="forminator-dropdown--default"] .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted[aria-selected] span:not(.forminator-checkbox-box) {
    background-color: var(--color-cream) !important;
    color: var(--color-dark-green) !important;
}

/* Selected state */

.forminator-select-dropdown-container--open [class*="forminator-dropdown--default"] .select2-results .select2-results__options .select2-results__option.select2-results__option--selected,
.forminator-select-dropdown-container--open [class*="forminator-dropdown--default"] .select2-results .select2-results__options .select2-results__option.select2-results__option--selected span:not(.forminator-checkbox-box) {
    background-color: var(--color-dark-green) !important;
    color: var(--color-light) !important;
}

/* Dropdown search field */

.forminator-select-dropdown-container--open [class*="forminator-dropdown--default"] .select2-search .select2-search__field {
    border-color: var(--color-dark-green) !important;
    border-radius: 0 !important;
    font-family: var(--font-base) !important;
    font-size: 20px !important;
}

/* ==========================================================================
   FORMINATOR BUTTON OVERRIDES
   High specificity to beat forminator's default selectors
   ========================================================================== */

.forminator-ui.forminator-custom-form[data-design=default] .forminator-button,
.forminator-ui.forminator-custom-form .forminator-button {
    align-items: center !important;
    background: var(--color-dark-green) !important;
    border: 1px solid var(--color-dark-green) !important;
    color: var(--color-light) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
    font-family: var(--font-eyebrow) !important;
    font-size: var(--size-step-00) !important;
    font-weight: 600 !important;
    gap: 0 var(--space-2xs) !important;
    justify-content: center !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
    height: 44px !important;
    padding: .4em 2em !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    transition: background-color 0s ease, border-color 0s ease, color 0s ease !important;
}

.forminator-ui.forminator-custom-form[data-design=default] .forminator-button:hover,
.forminator-ui.forminator-custom-form .forminator-button:hover {
    box-shadow: none !important;
}

/* Kill forminator's span transition that fights the text-roll animation */

.forminator-ui.forminator-custom-form[data-design=default] .forminator-button span {
    transition: none !important;
}

/* Input fields */

.forminator-ui.forminator-custom-form[data-design=default] .forminator-input,
.forminator-ui.forminator-custom-form[data-design=default] .forminator-input input,
.forminator-ui.forminator-custom-form[data-design=default] .forminator-textarea,
.forminator-ui.forminator-custom-form[data-design=default] .forminator-select {
    font-family: var(--font-base) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--color-dark-green) !important;
}

.forminator-ui.forminator-custom-form[data-design=default] .forminator-input::placeholder,
.forminator-ui.forminator-custom-form[data-design=default] .forminator-input::-webkit-input-placeholder {
    font-family: var(--font-base) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   HERO GALLERY - TWO-LEVEL SYSTEM
   ========================================================================== */

/* ==========================================================================
   LEVEL 1: OVERLAY GALLERY (White background, grid of images)
   ========================================================================== */

/* White background overlay */

.hero-gallery-overlay-skin .goverlay {
	background: rgba(255, 255, 255, 0.98) !important;
}

/* Overlay container */

.hero-gallery-overlay-skin .ginner-container {
	width: 90vw;
	max-width: 1200px;
}

/* Inline content wrapper */

.hero-gallery-overlay-skin .ginlined-content {
	background: white;
	padding: 2rem;
	border-radius: 0;
	max-height: 90vh;
	overflow-y: auto;
}

/* Close button - dark on white background */

.hero-gallery-overlay-skin .gclose {
	position: fixed;
	top: 2rem;
	right: 2rem;
	width: 3rem;
	height: 3rem;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	z-index: 99999;
	transition: background 0.3s ease;
}

.hero-gallery-overlay-skin .gclose svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke: var(--color-dark-green);
	stroke-width: 2px;
}

.hero-gallery-overlay-skin .gclose:hover {
	background: rgba(0, 0, 0, 0.2);
}

/* Grid layout for images - 1-2-1-2 pattern */

.hero-gallery-overlay__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

/* Single image spans full width */

.hero-gallery-overlay__item--single {
	grid-column: 1 / -1;
}

/* Double images each take one column */

.hero-gallery-overlay__item--double {
	grid-column: span 1;
}

/* Image styling in overlay */

.hero-gallery-overlay__item {
	display: block;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.hero-gallery-overlay__item:hover {
	opacity: 0.8;
}

.hero-gallery-overlay__item img {
	width: 100%;
	height: auto;
	display: block;
}

/* Responsive adjustments for overlay */

@media (max-width: 768px) {
	.hero-gallery-overlay-skin .ginlined-content {
		padding: 1rem;
	}

	.hero-gallery-overlay__grid {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.hero-gallery-overlay__item--single,
	.hero-gallery-overlay__item--double {
		grid-column: 1;
	}

	.hero-gallery-overlay-skin .gclose {
		top: 1rem;
		right: 1rem;
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* ==========================================================================
   LEVEL 2: SLIDESHOW (Full-screen with white arrows)
   ========================================================================== */

/* Full-screen black background */

.hero-gallery-slideshow-skin .goverlay {
	background: rgba(0, 0, 0, 0.98) !important;
}

/* Container - full viewport */

.hero-gallery-slideshow-skin .glightbox-container {
	width: 100vw !important;
	height: 100vh !important;
}

/* Slide container */

.hero-gallery-slideshow-skin .gslide {
	width: 100vw !important;
	height: 100vh !important;
}

/* Media container - full width */

.hero-gallery-slideshow-skin .gslide-media {
	max-width: 100vw !important;
	max-height: 100vh !important;
	width: 100% !important;
}

/* Image - full width, contained */

.hero-gallery-slideshow-skin .gslide-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100vh !important;
}

.hero-gallery-slideshow-skin .gslide-image img {
	width: 100% !important;
	height: auto !important;
	max-height: 100vh !important;
	object-fit: contain;
}

/* ==========================================================================
   SLIDESHOW CONTROLS - Matching site arrow style
   ========================================================================== */

/* Back arrow (close) - top left corner, white */

.hero-gallery-slideshow-skin .gclose {
	position: fixed;
	top: 2rem;
	left: 2rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	z-index: 99999;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.hero-gallery-slideshow-skin .gclose svg {
	width: 100%;
	height: 100%;
}

/* Back arrow styling - matches slideshow prev arrow */

.hero-gallery-slideshow-skin .gclose svg path:first-child {
	fill: white;
}

.hero-gallery-slideshow-skin .gclose svg path:last-child {
	fill: none;
	stroke: var(--color-dark-green, #1a3a2e);
	stroke-width: 2px;
	stroke-linecap: square;
}

.hero-gallery-slideshow-skin .gclose:hover {
	opacity: 0.8;
}

/* Navigation arrows wrapper - bottom right corner */

.hero-gallery-slideshow-skin .gslide-description {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	display: flex;
	gap: 0;
	z-index: 99998;
	background: transparent;
	padding: 0;
}

/* Navigation arrows - matching site style */

.hero-gallery-slideshow-skin .gprev,
.hero-gallery-slideshow-skin .gnext {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
	margin: 0 !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
}

.hero-gallery-slideshow-skin .gprev svg,
.hero-gallery-slideshow-skin .gnext svg {
	width: 100%;
	height: 100%;
}

/* Previous arrow - white background, dark-green stroke */

.hero-gallery-slideshow-skin .gprev svg path:first-child {
	fill: white;
}

.hero-gallery-slideshow-skin .gprev svg path:last-child {
	fill: none;
	stroke: var(--color-dark-green, #1a3a2e);
	stroke-width: 2px;
	stroke-linecap: square;
}

/* Next arrow - dark-green background, white stroke */

.hero-gallery-slideshow-skin .gnext svg path:first-child {
	fill: var(--color-dark-green, #1a3a2e);
}

.hero-gallery-slideshow-skin .gnext svg path:last-child {
	fill: none;
	stroke: white;
	stroke-width: 2px;
	stroke-linecap: square;
}

/* Hover states */

.hero-gallery-slideshow-skin .gprev:hover,
.hero-gallery-slideshow-skin .gnext:hover {
	opacity: 0.7;
}

/* Disabled state */

.hero-gallery-slideshow-skin .gprev.disabled,
.hero-gallery-slideshow-skin .gnext.disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Hide title/description */

.hero-gallery-slideshow-skin .gslide-title {
	display: none;
}

.hero-gallery-slideshow-skin .gslide-desc {
	display: none;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS - Slideshow
   ========================================================================== */

@media (max-width: 768px) {
	.hero-gallery-slideshow-skin .gclose {
		top: 1rem;
		left: 1rem;
		width: 2rem;
		height: 2rem;
	}

	.hero-gallery-slideshow-skin .gslide-description {
		bottom: 1rem;
		right: 1rem;
	}

	.hero-gallery-slideshow-skin .gprev,
	.hero-gallery-slideshow-skin .gnext {
		width: 2rem !important;
		height: 2rem !important;
	}
}

.gslide-description {
	color: var(--color-light) !important;
}

.gslide-title {
	margin-top: 10px;
	font-family: var(--font-base);
	font-weight: var(--font-regular);
	font-size: var(--size-step-0);
	line-height: 1.5;
	padding-bottom: 10px;
}

/* ==========================================================================
   OFF-CANVAS GALLERY
   ========================================================================== */

/* Gallery panel styling */

.off-canvas-gallery {
    background-color: var(--color-light);
    color: var(--color-dark-green);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.off-canvas-gallery__inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Header */

.off-canvas-gallery__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.off-canvas-gallery__title {
    margin: 0;
}

.off-canvas-gallery__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: inherit;
}

.off-canvas-gallery__close svg {
    width: 2rem;
    height: 2rem;
    display: block;
}

.off-canvas-gallery__close svg path {
    fill: var(--color-dark-green);
}

/* Content area */

.off-canvas-gallery__content {
    flex: 1;
}

/* Gallery Grid - 1-2-1-2 pattern */

.off-canvas-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Single image spans full width */

.off-canvas-gallery__item--single {
    grid-column: 1 / -1;
}

/* Double images each take one column */

.off-canvas-gallery__item--double {
    grid-column: span 1;
}

/* Image styling */

.off-canvas-gallery__item {
    display: block;
    position: relative;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.off-canvas-gallery__item:hover {
    opacity: 0.8;
}

/* Image wrapper with mask */

.off-canvas-gallery__image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.off-canvas-gallery__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive adjustments */

@media (min-width: 760px) {
    .off-canvas-gallery {
        padding: 3rem;
    }

    .off-canvas-gallery__grid {
        gap: 1.5rem;
    }
}

/* Mobile: Single column */

@media (max-width: 640px) {
    .off-canvas-gallery__grid {
        grid-template-columns: 1fr;
    }

    .off-canvas-gallery__item--single,
    .off-canvas-gallery__item--double {
        grid-column: 1;
    }
}

/* ==========================================================================
   TEMPORARY DEV OVERRIDE - REMOVE BEFORE PRODUCTION
   ========================================================================== */

/* Force off-canvas menu to be visible for CSS development */

/* .off-canvas {
    transform: translateY(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body { overflow: visible !important; } */

/* ========================================================================== */

/* Off-canvas menu styling */

.off-canvas {
    background-color: var(--color-clay);
    color: var(--color-light);
    display: flex;
    flex-direction: column;
}

.off-canvas-inner-wrapper {
    /* outline: 1px solid greenyellow; */
    max-width: 120rem;
    margin: 0 auto;
    height: 100%;
    position: relative;
    /* padding: 1.25rem var(--gutter); */
    padding: 1.0rem 2.0rem;
}

@media (min-width: 760px) {
    .off-canvas-inner-wrapper {
        padding: 1.0rem 2.4rem;
    }
}

@media (min-width: 1230px) {
    .off-canvas-inner-wrapper {
        padding: 1.0rem 2.9rem;
    }
}

@media (min-width: 1600px) {
.off-canvas-inner-wrapper {
        padding: 1.0rem 2.8rem;
    }
}

@media (min-width: 1920px) {
    .off-canvas-inner-wrapper {
        padding: 1.0rem 2.4rem;
    }
}

/* Header */

.off-canvas__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

@media (min-width: 760px) {
    .off-canvas__header {
        margin-bottom: 2rem;
    }
}

.off-canvas__logo {
    width: 12rem;
}

.off-canvas__logo a {
    display: flex;
    
}

.off-canvas__close svg path,
.off-canvas__logo a svg path {
    transition: all 0.5s;
}

/* opacity: 0.7; */

.off-canvas__close:hover svg path, .off-canvas__logo a:hover svg path {
        fill: var(--color-light) !important;
    }

.off-canvas__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: inherit;
}

.off-canvas__close svg {
    width: 2rem;
    height: 2rem; 
    display: block;
}

/* Content */

.off-canvas__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Slider */

.off-canvas__slider-wrapper {
    /* flex: 1; */
    position: relative;
    /* display: block; */
    /* width: 200px; */
    /* height: 300px; */
    aspect-ratio: 4/5;
    overflow: hidden;
}

.off-canvas__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
}

.off-canvas__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.1);
}

/* Navigation */

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

/* Initial state for animation (hidden until revealed by JS) */

.key-link {
    overflow: hidden;
}

.key-link .off-canvas__nav-link {
    transform: translateY(100%);
}

.secondary__nav a,
.secondary__nav li {
    opacity: 0;
}

.off-canvas__nav-link {
    text-decoration: none;
    color: inherit;
    /* font-size: var(--text-step-2, 2rem); */
    display: block;
    transition: opacity 0.2s ease;
}

.off-canvas__nav-link:hover {
    opacity: 0.7;
}

/* Social links */

.off-canvas__social {
    margin-top: auto;
}

.off-canvas__social svg * { fill: var(--color-light); }

.off-canvas__social .social-links svg {
        width: 20px;
        height: 20px;
    }

.off-canvas-roundel {
    position: absolute;
    bottom: 2%;
    right: 0;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.off-canvas-roundel__inner {
    opacity: 0;
    width: 100%;
    height: 100%;
}

.off-canvas__logo svg path {
        /* transition: all 0.5s; */
        fill: var(--color-pink) !important;
    }

.off-canvas__close svg path, .off-canvas-roundel svg path {
        fill: var(--color-pink) !important;
    }

/* tablet layout */

@media (min-width: 760px) {

    

    .off-canvas__slider-wrapper {
        position: absolute;
        right: 6%;
        height: 80%;
        aspect-ratio: 4/5;
        z-index: -1;
    }

}

/* complex desktop layout */

@media (min-width: 1230px) {

    .off-canvas-menu * {
        margin-bottom: 0.5rem;
    }

    .off-canvas-menu {
        position: absolute;
        top: 50%;
        left: 10%;
    }

    .key-link {  position: absolute; }

    .key-link_1 {
        top: 17%;
        left: 10%;
    }

    .key-link_2 {
        top: 30%;
        left: 20%;
    }

    .key-link_3 {
        top: 55%;
        left: 33%;
    }

    .key-link_4 {
        top: 68%;
        left: 26%;
    }

    .off-canvas__social {
        bottom: 5%;
        position: absolute;
    }

    .off-canvas__slider-wrapper {
        height: 80%;
        aspect-ratio: 4/5;
        right: 6%;
    }

}

@media (min-width: 1600px) {
    .off-canvas__nav-list * {
        font-size: 8rem !important;
    }
    .secondary__nav * {
        font-size: 1.3rem !important;
    }
}

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

/* Category filter row — space below it before the post grid */

.category-filter {
    margin-bottom: var(--space-xl, 3rem);
}

/* First link flush-left so it aligns with the post list below */

.category-filter li:first-child .category-pill {
    padding-left: 0;
}

/* Category filter: plain text links, active one bold, pink on hover. */

.category-pill {
    color: var(--color-dark-green);
    text-decoration: none;
    transition: color 0.2s ease;
}

.category-pill.is-active {
    font-weight: bold;
}

.category-pill:hover,
.category-pill:focus-visible {
    color: var(--color-pink);
}

.prose {
  --flow-space: var(--space-m);
  /* font-size: var(--size-step-3); */
}

/* ==========================================================================
   SINGLE POST LAYOUT
   ========================================================================== */

.single-post-article {
	background-color: var(--color-white);
	color: var(--color-dark-green);
}

.single-post-header {
	max-width: 900px;
	margin-inline: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-top: var(--space-4xl);
}

.single-post-title {
	margin-bottom: var(--space-xs, 0.5rem);
}

.single-post-date {
	opacity: 0.7;
}

.single-post-hero-image {
	width: 100%;
}

.single-post-hero-image img {
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: cover;
}

.single-post-content {
	padding-top: var(--space-l, 2rem);
	padding-bottom: var(--space-l, 2rem);
}

/* Remove extra padding from gutenberg wrapper on single posts */

.single-post-content .gutenberg-blocks-wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

/* Constrain copy blocks to match blog-sections-block__inner */

.single-post-content .gutenberg-blocks-wrapper > * {
	max-width: 900px;
	margin-inline: auto;
}

/* Images, galleries and embeds break out to full wrapper width */

.single-post-content .gutenberg-blocks-wrapper > .wp-block-image,
.single-post-content .gutenberg-blocks-wrapper > .wp-block-gallery,
.single-post-content .gutenberg-blocks-wrapper > .wp-block-embed {
	max-width: none;
	display: flex;
	justify-content: center;
}

/* ==========================================================================
   RELATED POSTS (NEXT POSTS) RESPONSIVE DISPLAY
   ========================================================================== */

/**
 * Controls how many posts are visible at different breakpoints:
 * - Mobile: 6 posts (hide 7-10)
 * - Tablet (md): 10 posts (show all)
 * - Desktop (lg): 8 posts (hide 9-10)
 */

/* Mobile: Hide posts 7-10 */

.js-next-posts-grid > *:nth-child(n+7) {
	display: none;
}

/* Tablet (md): Show all 10 posts */

@media (min-width: 760px) {
	.js-next-posts-grid > *:nth-child(n+7) {
		display: block;
	}
}

/* Desktop (lg): Hide posts 9-10 */

@media (min-width: 1230px) {
	.js-next-posts-grid > *:nth-child(n+9) {
		display: none;
	}
}

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

:root {
  --navHeight: 40px;
  --navTotalHeight: 80px; /* Height including padding */
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transition: transform 0.3s ease;
}

/* Hide nav on scroll down */

.site-header--hidden {
  transform: translateY(-100%);
}

/* Nav inner container */

.site-header-inner {
  width: 100%;
  transition: all 0.2s;
  padding-top: 20px;
}

/* Add ticker height to padding-top on mobile/tablet homepage when at top of page */

@media (max-width: 63.9375em) {
  html.page-is-at-top .home .site-header-inner {
    padding-top: calc(20px + var(--navHeight));
  }
}

.site-header-content-wrapper {
  display: flex;
  align-items: center;
  /* gap: 1rem; */
  transition: justify-content 0.3s ease;
  justify-content: space-between;
}

.enquire_btn_header {
  display: none; 
}

@media (min-width: 440px ) {
  .enquire_btn_header {
    display: block;
  }
}

/* ==========================================================================
   NAV STATE MANAGEMENT
   ========================================================================== */

/* Logo */

.nav-logo {

  padding: 0 0.6rem;

  height: var(--navHeight);
  display: flex;

}

/* flex-shrink: 0; */

.nav-logo a {
    display: flex;
  }

.nav-logo svg {
    width: 12rem;
   }

.nav-logo svg path {
      fill: var(--color-dark-green) !important;
    }

/* ==========================================================================
   TICKER - Two instances (top of page + in navigation)
   ========================================================================== */

/* Base ticker styles */

.nav-ticker {
  overflow: hidden;
  display: none;
  transition: flex 0.4s ease, opacity 0.4s ease;
  height: var(--navHeight);
  position: relative;
  z-index: 15;
}

/* Ticker at top of page - visible on mobile/tablet only */

.nav-ticker--top {
  display: none;
}

.ticker-edge {
  width: 30px;
  background-color: var(--color-pink);
  height: var(--navHeight);
  display: none;
}

@media (max-width: 63.9375em) {
  .nav-ticker--top {
    display: flex;
    width: 100%;
  }
}

/* Ticker in navigation - hidden on mobile/tablet, visible on desktop only */

.nav-ticker--in-nav {
  /* opacity: 0; */
  width: 0;
  display: none !important; /* Force hide on mobile/tablet */
  will-change: width, opacity;
  flex: 1 1 auto; /* When visible, take available space */
  flex-shrink: 1; /* Allow shrinking */
  min-width: 0; /* Allow flexbox to shrink below content size */
  /* transition: opacity 0.4s ease, width 0.4s ease; */
  /* transform: translateY(-200px); */
  /* transition: transform 0.4s ease; */
}

.ticker-nav-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.ticker-edge {
  display: block;
}

.ticker-nav-wrapper {
  transform: translateY(-200px);
  transition: transform 0.4s ease;
}

@media (min-width: 64em) {
  /* On desktop, ticker is in flex flow but hidden by default */
  .nav-ticker--in-nav {
    display: flex !important;
  }

  /* On homepage, show ticker edges only when ticker is visible */
  /* body.home.nav-ticker--visible .site-header-content-wrapper .ticker-edge {
    display: block;
  } */

    

  /* On homepage, show ticker when at top of page */
  body.home.nav-ticker--visible .ticker-nav-wrapper {
    /* opacity: 1; */
    /* width: auto; */
    transform: translateY(0);
  }
}

.nav-ticker-inner {
  display: flex;
  height: var(--navHeight);
  line-height: var(--navHeight); /* Vertically center inline content */
}

/* Ticker messages */

.nav-ticker-message {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0; /* Prevent messages from shrinking */
  /* Ensure consistent spacing - no stray whitespace between flex children */
  gap: 0;
}

/* Separator dot styling */

.nav-ticker-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: 20px; /* Use margin for consistent spacing across iOS Safari */
  font-size: 0.6em;
  opacity: 1;
  flex-shrink: 0;
}

/* Nav actions (menu + enquire buttons) */

.nav-actions {
  display: flex;
  align-items: center;
  /* gap: 1rem; */
  /* margin-left: auto; */
  height: var(--navHeight);
}

.nav-actions * {
    height: 100%;
  }

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

@media (min-width: 50em) {

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

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

/* Canon 3D Interactive Mode - Force hide nav */

html.canon-interactive-active .site-header {
  transform: translateY(-150%) !important;
  pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* A split 50/50 layout */

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

/* Three column grid layout */

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

/* Three column grid layout */

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

/* Twelve column grid layout */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
WRAPPER COMPOSITION
A common wrapper/container
*/

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

/* Narrow wrapper variant for visual interest */

.wrapper--narrow {
  max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 80rem);
}

/*
ABSOLUTE CORNERS
Position elements absolutely in each corner
*/

.absolute-top-left {
    position: absolute;
    top: 0;
    left: 0;
}

.absolute-top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.absolute-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
}

.absolute-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* 
ABSOLUTE FULL
position absolutely, top, bottom, left, right 0 and 100% height and width
*/

.absolute-full {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Legacy img-wrapper using absolute positioning (padding-bottom hack) */

.img-wrapper {
	position: relative;
}

/* Direct child images only - excludes slideshow images */

.img-wrapper > picture,
	.img-wrapper > img {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

/* When img-wrapper is combined with aspect-ratio, use modern approach */

.img-wrapper[class*="aspect-ratio--"] > picture,
	.img-wrapper[class*="aspect-ratio--"] > img {
		position: static;
		height: auto; /* iOS fix */
		min-height: 100%;
	}

/* Object-fit utility classes */

.object-fit-cover {
	object-fit: cover;
	width: 100%;
	height: auto; /* iOS fix: height: 100% causes stretch with aspect-ratio */
	min-height: 100%;
}

.object-fit-contain {
	object-fit: contain;
	width: 100%;
	height: auto; /* iOS fix */
	min-height: 100%;
}

/* Base aspect ratio utilities (mobile-first) */

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

.aspect-ratio--3-2 	{ aspect-ratio: 3 / 2; }

.aspect-ratio--2-3 	{ aspect-ratio: 2 / 3; }

.aspect-ratio--4-3 	{ aspect-ratio: 4 / 3; }

.aspect-ratio--3-4 	{ aspect-ratio: 3 / 4; }

.aspect-ratio--16-9 { aspect-ratio: 16 / 9; }

.aspect-ratio--21-9 { aspect-ratio: 21 / 9; }

/* Aspect ratio containers - ensure images fill and cover */

[class*="aspect-ratio--"] {
	overflow: hidden;
}

[class*="aspect-ratio--"] > img,
[class*="aspect-ratio--"] > picture > img {
	width: 100%;
	height: auto; /* iOS fix: height: 100% causes stretch with aspect-ratio */
	min-height: 100%;
	object-fit: cover;
}

/* Small breakpoint (760px+) */

@media (min-width: 760px) {
	.aspect-ratio--1-1\@sm 	{ aspect-ratio: 1 / 1; }
	.aspect-ratio--3-2\@sm 	{ aspect-ratio: 3 / 2; }
	.aspect-ratio--2-3\@sm 	{ aspect-ratio: 2 / 3; }
	.aspect-ratio--4-3\@sm 	{ aspect-ratio: 4 / 3; }
	.aspect-ratio--3-4\@sm 	{ aspect-ratio: 3 / 4; }
	.aspect-ratio--16-9\@sm { aspect-ratio: 16 / 9; }
	.aspect-ratio--21-9\@sm { aspect-ratio: 21 / 9; }
}

/* Medium breakpoint (1024px+) */

@media (min-width: 1024px) {
	.aspect-ratio--1-1\@md 	{ aspect-ratio: 1 / 1; }
	.aspect-ratio--3-2\@md 	{ aspect-ratio: 3 / 2; }
	.aspect-ratio--2-3\@md 	{ aspect-ratio: 2 / 3; }
	.aspect-ratio--4-3\@md 	{ aspect-ratio: 4 / 3; }
	.aspect-ratio--3-4\@md 	{ aspect-ratio: 3 / 4; }
	.aspect-ratio--16-9\@md { aspect-ratio: 16 / 9; }
	.aspect-ratio--21-9\@md { aspect-ratio: 21 / 9; }
}

/* Large breakpoint (1280px+) */

@media (min-width: 1280px) {
	.aspect-ratio--1-1\@lg 	{ aspect-ratio: 1 / 1; }
	.aspect-ratio--3-2\@lg 	{ aspect-ratio: 3 / 2; }
	.aspect-ratio--2-3\@lg 	{ aspect-ratio: 2 / 3; }
	.aspect-ratio--4-3\@lg 	{ aspect-ratio: 4 / 3; }
	.aspect-ratio--3-4\@lg 	{ aspect-ratio: 3 / 4; }
	.aspect-ratio--16-9\@lg { aspect-ratio: 16 / 9; }
	.aspect-ratio--21-9\@lg { aspect-ratio: 21 / 9; }
}

/* Breadcrumbs utility */

.breadcrumbs {
  --breadcrumb-separator: "/";
  --breadcrumb-gap: var(--space-xs);
  font-size: var(--text-sm, 0.875rem);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--breadcrumb-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
}

/* Add separator between items */

.breadcrumbs__item:not(:last-child)::after {
  content: var(--breadcrumb-separator);
  color: var(--color-gray-400, #9ca3af);
  font-weight: 300;
}

.breadcrumbs__item a {
  color: var(--color-dark-green, #3b82f6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs__item a:hover {
  color: var(--color-dark-green-dark, #2563eb);
  text-decoration: underline;
}

.breadcrumbs__item--current {
  color: var(--color-gray-600, #4b5563);
  font-weight: 500;
}

/* Accessibility - ensure good contrast */

@media (prefers-contrast: high) {
  .breadcrumbs__item a {
    text-decoration: underline;
  }
}

/*
CENTER CONTENT
Center children within a container
Useful for centering icons, text, or any content
*/

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

/* Grid-based centering alternative */

.center-content-grid {
	display: grid;
	place-items: center;
}

/* Inline centering (for icons within text) */

.center-inline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}

/* ==========================================================================
   CLIP-PATH BRAND SHAPES UTILITY
   ========================================================================== */

/*
 * Brand shape masking utilities using CSS clip-path.
 * Requires brand-shapes-clippath.php SVG sprite to be included in footer.
 *
 * Usage:
 *   <div class="u-clip-shape-a">
 *     <img src="..." />
 *   </div>
 *
 * Works with: images, slideshows, video embeds, and any block-level content
 */

/* Shape A: Rounded pillar with scalloped top */

.u-clip-shape-a {
	clip-path: url(#clip-shape-a);
}

/* Shape B: Pentagon house with cut corners */

.u-clip-shape-b {
	clip-path: url(#clip-shape-b);
}

/* Shape C: Rectangular with notches on sides */

.u-clip-shape-c {
	clip-path: url(#clip-shape-c);
}

/* Shape D: Rectangular with scalloped top */

.u-clip-shape-d {
	clip-path: url(#clip-shape-d);
}

/* Optional: Ensure clipped content doesn't overflow */

.u-clip-shape-a,
.u-clip-shape-b,
.u-clip-shape-c,
.u-clip-shape-d {
	overflow: hidden;
}

.full-screen {
    width: 100%;
    height: var(--viewport-height);
    /* margin: 0;
    padding: 0; */
    /* > * { */
        /* width: 100vw; */
        /* height: 100vh; */
    /* } */
}

/* ==========================================================================
   GRADIENT FADE UTILITY
   ========================================================================== */

/* Bottom fade - for text legibility over images */

.gradient-fade-bottom::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Ensure content sits above gradient */

.gradient-fade-bottom > * {
  position: relative;
  z-index: 2;
}

/* Top fade variant */

.gradient-fade-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

.gradient-fade-top > * {
  position: relative;
  z-index: 2;
}

/*
extra utility classes to work with tailwind grid
*/

.gap-0 {
	gap: 0;
}

/*
Height utility classes
Extends Tailwind's height utilities with additional percentage-based values
*/

.h-10 {
  height: 10%;
}

.h-20 {
  height: 20%;
}

.h-30 {
  height: 30%;
}

.h-40 {
  height: 40%;
}

.h-50 {
  height: 50%;
}

.h-60 {
  height: 60%;
}

.h-70 {
  height: 70%;
}

.h-80 {
  height: 80%;
}

.h-90 {
  height: 90%;
}

.h-100 {
  height: 100%;
}

/* Min height utilities */

.min-h-10 {
  min-height: 10%;
}

.min-h-20 {
  min-height: 20%;
}

.min-h-30 {
  min-height: 30%;
}

.min-h-40 {
  min-height: 40%;
}

.min-h-50 {
  min-height: 50%;
}

.min-h-60 {
  min-height: 60%;
}

.min-h-70 {
  min-height: 70%;
}

.min-h-80 {
  min-height: 80%;
}

.min-h-90 {
  min-height: 90%;
}

.min-h-100 {
  min-height: 100%;
}

/*
LIST UNSTYLED
Remove list styling (bullets, numbers, padding, margin)
*/

.list-unstyled {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/* ==========================================================================
   MEDIA VARIANTS
   ==========================================================================

   A block can carry two completely different sets of media — a slideshow on
   desktop and a background video on phones, say. That rules out <picture> and a
   <source media> list, which can only ever switch between sources of one kind,
   so both variants are rendered and one is shown.

   Only the switch lives here. What keeps the hidden variant from costing a
   download is in the markup: video sources are gated with the media query for
   the widths they play at, and images are lazy-loaded, which browsers skip
   entirely while display is none. See snippets/responsive-media.php.

   These wrappers exist only when a block actually has two variants — a block
   with one renders its media bare, exactly as it always has.

   Breakpoint mirrors the @sm aspect-ratio utilities and
   canons_video_mobile_breakpoint(). All three must move together.
   ========================================================================== */

.media-variant--mobile {
	display: none;
}

@media (max-width: 759.98px) {
	.media-variant--desktop {
		display: none;
	}

	.media-variant--mobile {
		display: block;
	}
}

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

/* ==========================================================================
   NO BORDER UTILITY
   ========================================================================== */

/*
 * Removes borders from elements.
 * Uses !important to override component-specific border styles.
 *
 * Usage:
 *   <button class="button u-no-border">...</button>
 */

.u-no-border {
	border: none !important;
}

/*
OBJECT FIT COVER
Makes an image fill its container without warping
*/

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

/* 
REGION UTILITY
Consistent block padding for page sections
*/

.region {
  padding-block: var(--region-space, var(--space-xl-2xl));
}

/* .scale-down .article > * {
	transform: scale(0.98);
	transition: all 0.8s;
} */

/* ==========================================================================
   STYLIZED CORNERS UTILITY
   ========================================================================== */

/*
 * Corner cutout utilities using CSS clip-path.
 * Creates triangle, square, and quarter-circle corner cutouts.
 *
 * Usage:
 *   <div class="triangle-corner--top-right">Content</div>
 *   <div class="square-corner--bottom-left">Content</div>
 *   <div class="round-corner--top-left">Content</div>
 *
 * Customize corner size with CSS custom property:
 *   .my-element { --corner-size: 2rem; }
 *
 * Default corner size is 1rem (16px)
 */

:root {
	--corner-size: 0.5rem;
	--svg-corner-size: 40px;
}

/* ==========================================================================
   TRIANGLE CORNERS (Diagonal Cut)
   ========================================================================== */

.triangle-corner--top-left {
	clip-path: polygon(
		var(--corner-size) 0,
		100% 0,
		100% 100%,
		0 100%,
		0 var(--corner-size)
	);
}

.triangle-corner--top-right {
	clip-path: polygon(
		0 0,
		calc(100% - var(--corner-size)) 0,
		100% var(--corner-size),
		100% 100%,
		0 100%
	);
}

.triangle-corner--bottom-right {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		0 100%
	);
}

.triangle-corner--bottom-left {
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--corner-size) 100%,
		0 calc(100% - var(--corner-size))
	);
}

/* ==========================================================================
   SQUARE CORNERS (Right-Angle Notch)
   ========================================================================== */

.square-corner--top-left {
	clip-path: polygon(
		var(--corner-size) 0,
		100% 0,
		100% 100%,
		0 100%,
		0 var(--corner-size),
		var(--corner-size) var(--corner-size)
	);
}

.square-corner--top-right {
	clip-path: polygon(
		0 0,
		calc(100% - var(--corner-size)) 0,
		calc(100% - var(--corner-size)) var(--corner-size),
		100% var(--corner-size),
		100% 100%,
		0 100%
	);
}

.square-corner--bottom-right {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		0 100%
	);
}

.square-corner--bottom-left {
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--corner-size) 100%,
		var(--corner-size) calc(100% - var(--corner-size)),
		0 calc(100% - var(--corner-size))
	);
}

/* ==========================================================================
   QUARTER-CIRCLE CORNERS (Smooth Rounded Notch)
   ========================================================================== */

/*
 * Quarter-circle corners create inverted/concave arcs (ticket stub style).
 * The circular notch cuts INTO the corner rather than rounding it outward.
 * Uses CSS masks with SVG files for perfect 25.7% radius circular cutouts.
 *
 * Only left/right corner combinations available.
 * For individual corners or top/bottom, use nested elements or clip-path.
 */

/* ==========================================================================
   MULTIPLE CORNERS
   ========================================================================== */

/*
 * Apply cutouts to multiple corners simultaneously
 * Example: .triangle-corners--top applies to both top-left and top-right
 */

.triangle-corners--top {
	clip-path: polygon(
		var(--corner-size) 0,
		calc(100% - var(--corner-size)) 0,
		100% var(--corner-size),
		100% 100%,
		0 100%,
		0 var(--corner-size)
	);
}

.triangle-corners--bottom {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		var(--corner-size) 100%,
		0 calc(100% - var(--corner-size))
	);
}

.triangle-corners--left {
	clip-path: polygon(
		var(--corner-size) 0,
		100% 0,
		100% 100%,
		var(--corner-size) 100%,
		0 calc(100% - var(--corner-size)),
		0 var(--corner-size)
	);
}

.triangle-corners--right {
	clip-path: polygon(
		0 0,
		calc(100% - var(--corner-size)) 0,
		100% var(--corner-size),
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		0 100%
	);
}

.triangle-corners--all {
	clip-path: polygon(
		var(--corner-size) 0,
		calc(100% - var(--corner-size)) 0,
		100% var(--corner-size),
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		var(--corner-size) 100%,
		0 calc(100% - var(--corner-size)),
		0 var(--corner-size)
	);
}

/* Square multiple corners */

.square-corners--top {
	clip-path: polygon(
		var(--corner-size) 0,
		calc(100% - var(--corner-size)) 0,
		calc(100% - var(--corner-size)) var(--corner-size),
		100% var(--corner-size),
		100% 100%,
		0 100%,
		0 var(--corner-size),
		var(--corner-size) var(--corner-size)
	);
}

.square-corners--bottom {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		var(--corner-size) 100%,
		var(--corner-size) calc(100% - var(--corner-size)),
		0 calc(100% - var(--corner-size))
	);
}

.square-corners--left {
	clip-path: polygon(
		var(--corner-size) 0,
		100% 0,
		100% 100%,
		var(--corner-size) 100%,
		var(--corner-size) calc(100% - var(--corner-size)),
		0 calc(100% - var(--corner-size)),
		0 var(--corner-size),
		var(--corner-size) var(--corner-size)
	);
}

.square-corners--right {
	clip-path: polygon(
		0 0,
		calc(100% - var(--corner-size)) 0,
		calc(100% - var(--corner-size)) var(--corner-size),
		100% var(--corner-size),
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		0 100%
	);
}

.square-corners--all {
	clip-path: polygon(
		var(--corner-size) 0,
		calc(100% - var(--corner-size)) 0,
		calc(100% - var(--corner-size)) var(--corner-size),
		100% var(--corner-size),
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		var(--corner-size) 100%,
		var(--corner-size) calc(100% - var(--corner-size)),
		0 calc(100% - var(--corner-size)),
		0 var(--corner-size),
		var(--corner-size) var(--corner-size)
	);
}

/* Round multiple corners (left and right only) */

.round-corners--left {
	mask:
		url('../svg/inline-round-corner-top-left--inverted.svg') top left / var(--svg-corner-size) var(--svg-corner-size) no-repeat,
		url('../svg/inline-round-corner-bottom-left--inverted.svg') bottom left / var(--svg-corner-size) var(--svg-corner-size) no-repeat,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	-webkit-mask:
		url('../svg/inline-round-corner-top-left--inverted.svg') top left / var(--svg-corner-size) var(--svg-corner-size) no-repeat,
		url('../svg/inline-round-corner-bottom-left--inverted.svg') bottom left / var(--svg-corner-size) var(--svg-corner-size) no-repeat,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: destination-out;
}

.round-corners--right {
	mask:
		url('../svg/inline-round-corner-top-right--inverted.svg') top right / var(--svg-corner-size) var(--svg-corner-size) no-repeat,
		url('../svg/inline-round-corner-bottom-right--inverted.svg') bottom right / var(--svg-corner-size) var(--svg-corner-size) no-repeat,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	-webkit-mask:
		url('../svg/inline-round-corner-top-right--inverted.svg') top right / var(--svg-corner-size) var(--svg-corner-size) no-repeat,
		url('../svg/inline-round-corner-bottom-right--inverted.svg') bottom right / var(--svg-corner-size) var(--svg-corner-size) no-repeat,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: destination-out;
}

/* ==========================================================================
   MIXED CORNER TYPES (Triangle/Square only)
   ========================================================================== */

/*
 * Mix triangle and square corner types on the same element.
 * Round corners cannot be mixed with triangle/square due to different CSS technologies.
 *
 * Usage:
 *   <div class="corners-mixed--triangle-left-square-right">Content</div>
 *
 * For combinations with round corners, use separate wrapper elements.
 */

/* Square left + Triangle right */

.corners-mixed--square-left-triangle-right {
	clip-path: polygon(
		var(--corner-size) 0,
		calc(100% - var(--corner-size)) 0,
		100% var(--corner-size),
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		var(--corner-size) 100%,
		var(--corner-size) calc(100% - var(--corner-size)),
		0 calc(100% - var(--corner-size)),
		0 var(--corner-size),
		var(--corner-size) var(--corner-size)
	);
}

/* Triangle left + Square right */

.corners-mixed--triangle-left-square-right {
	clip-path: polygon(
		var(--corner-size) 0,
		calc(100% - var(--corner-size)) 0,
		calc(100% - var(--corner-size)) var(--corner-size),
		100% var(--corner-size),
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		var(--corner-size) 100%,
		0 calc(100% - var(--corner-size)),
		0 var(--corner-size)
	);
}

/* ==========================================================================
   SIZE VARIANTS
   ========================================================================== */

/*
 * Pre-defined size variants for common use cases
 * Can also set custom size: style="--corner-size: 2.5rem"
 */

.corner-xs {
	--corner-size: 0.5rem;
}

.corner-sm {
	--corner-size: 0.75rem;
}

.corner-md {
	--corner-size: 1rem;
}

.corner-lg {
	--corner-size: 1.5rem;
}

.corner-xl {
	--corner-size: 2rem;
}

.corner-2xl {
	--corner-size: 3rem;
}

/* Base text width utilities */

.width-10ch {  max-width: 10ch; }

.width-20ch {  max-width: 20ch; }

.width-25ch {  max-width: 25ch; }

.width-30ch {  max-width: 30ch; }

.width-40ch {  max-width: 40ch; }

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

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

.width-70ch {  max-width: 70ch; }

.width-80ch {  max-width: 80ch; }

.width-90ch {  max-width: 90ch; }

.width-100ch {  max-width: 100ch; }

/* Small breakpoint (sm:) */

@media (min-width: 330px) {
  .sm\:width-10ch {  max-width: 10ch; }
  .sm\:width-20ch {  max-width: 20ch; }
  .sm\:width-30ch {  max-width: 30ch; }
  .sm\:width-40ch {  max-width: 40ch; }
  .sm\:width-50ch {  max-width: 50ch; }
  .sm\:width-60ch {  max-width: 60ch; }
  .sm\:width-70ch {  max-width: 70ch; }
  .sm\:width-80ch {  max-width: 80ch; }
  .sm\:width-90ch {  max-width: 90ch; }
  .sm\:width-100ch {  max-width: 100ch; }
}

/* Medium breakpoint (md:) */

@media (min-width: 760px) {
  .md\:width-10ch {  max-width: 10ch; }
  .md\:width-20ch {  max-width: 20ch; }
  .md\:width-30ch {  max-width: 30ch; }
  .md\:width-40ch {  max-width: 40ch; }
  .md\:width-50ch {  max-width: 50ch; }
  .md\:width-60ch {  max-width: 60ch; }
  .md\:width-70ch {  max-width: 70ch; }
  .md\:width-80ch {  max-width: 80ch; }
  .md\:width-90ch {  max-width: 90ch; }
  .md\:width-100ch {  max-width: 100ch; }
}

/* Large breakpoint (lg:) */

@media (min-width: 1230px) {
  .lg\:width-10ch {  max-width: 10ch; }
  .lg\:width-20ch {  max-width: 20ch; }
  .lg\:width-30ch {  max-width: 30ch; }
  .lg\:width-40ch {  max-width: 40ch; }
  .lg\:width-50ch {  max-width: 50ch; }
  .lg\:width-60ch {  max-width: 60ch; }
  .lg\:width-70ch {  max-width: 70ch; }
  .lg\:width-80ch {  max-width: 80ch; }
  .lg\:width-90ch {  max-width: 90ch; }
  .lg\:width-100ch {  max-width: 100ch; }
}

/* 
TINY IMAGE IN A CIRCLE - e.g. TESIMONIAL / AUTHOR IMAGE
*/

.tiny-circle-image {
    width: 5rem;
    height: 5rem;
    
}

.tiny-circle-image img,
.tiny-circle-image picture {
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

/* ==========================================================================
   VIDEO MEDIA
   ==========================================================================

   Two patterns, matching the two snippets in template-parts/snippets/:

   .video-bg     — decorative autoplaying loop that fills its container
                   (video-background.php). Native <video>, so object-fit does
                   the cropping and no JavaScript is involved.

   .video-embed  — click-to-play player (video-embed.php). Sized by the
                   .aspect-ratio--* utility on the same element.

   This replaces the old .video-cover utility, which existed only because
   iframes ignore object-fit and had to be over-sized with viewport units —
   a hack that mis-scaled badly inside anything narrower than the viewport.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Background loop
   -------------------------------------------------------------------------- */

.video-bg {
	position: relative;
	overflow: hidden;
	inline-size: 100%;
	block-size: 100%;
}

/* Filling the container and holding a shape are mutually exclusive: an explicit
   block-size beats aspect-ratio, so a locked ratio would be ignored without
   this. Applies wherever .video-bg is used, not just the hero. */

.video-bg[class*="aspect-ratio--"] {
	block-size: auto;
}

/* The poster sits underneath and paints immediately. The video is layered over
   it and is transparent until its first frame decodes, so the still image
   carries the container until playback starts — and stays as the fallback if
   the file never loads. */

.video-bg__poster,
.video-bg__media {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.video-bg__media {
	z-index: 1;
	border: 0;
}

/* A <video> is transparent until its first frame decodes, so playback arrives as
   a hard cut over the poster. Fade it in instead, once video-player.js sees a
   frame ready.

   Gated on html.js, which header.php sets in <head> before any of this markup is
   parsed: without scripts the video is simply visible, never stranded at zero
   opacity waiting for a class that will not arrive. */

html.js .video-bg__media {
	opacity: 0;
	transition: opacity var(--transition-fade);
}

html.js .video-bg__media.is-playing {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	html.js .video-bg__media {
		transition: none;
	}
}

/* Movement is decorative here, so drop it entirely and leave the poster.
   video-player.js also empties the element to stop it buffering. */

@media (prefers-reduced-motion: reduce) {
	.video-bg__media {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Click-to-play embed
   -------------------------------------------------------------------------- */

.video-embed {
	position: relative;
	overflow: hidden;
	inline-size: 100%;
	border-radius: var(--radius);
	background-color: var(--block-fg);
}

.video-embed__frame,
.video-embed__media {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	object-fit: cover;
}

.video-embed__trigger {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	appearance: none;
}

.video-embed__poster {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Play affordance, centred over the poster. */

.video-embed__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: var(--space-xl);
	block-size: var(--space-xl);
	border-radius: var(--radius-pill);
	background-color: var(--block-bg);
	transition: var(--transition-base);
}

.video-embed__play::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 54%;
	translate: -50% -50%;
	border-style: solid;
	border-width: var(--space-2xs) 0 var(--space-2xs) var(--space-xs);
	border-color: transparent transparent transparent var(--block-fg);
}

.video-embed__trigger:hover .video-embed__play,
.video-embed__trigger:focus-visible .video-embed__play {
	scale: 1.08;
}

@media (prefers-reduced-motion: reduce) {
	.video-embed__play {
		transition: none;
	}

	.video-embed__trigger:hover .video-embed__play,
	.video-embed__trigger:focus-visible .video-embed__play {
		scale: 1;
	}
}

/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/

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

.display-none {
  display: none;
}

.hide-on-mobile {
  display: none;
}

@media (min-width: 1230px) {

.hide-on-mobile {
    display: unset
}

.hide-on-desktop {
    display: none
}
  }

/**
 * Wrapper Alignment Utilities
 *
 * Allows full-bleed elements to have content that aligns with the .wrapper
 * on the left or right side, while maintaining full-width backgrounds.
 *
 * Uses calculated padding to match the wrapper's side gutters at max-width (120rem).
 * Accounts for scrollbar width via --scrollbar-width (0 on mobile, 0.9rem on desktop).
 * Falls back to standard gutter on smaller screens.
 *
 * Formula: (100vw - scrollbar - 120rem) / 2 + wrapper padding
 *
 * Usage:
 * - .wrapper-align-left - Content aligns with wrapper's left edge
 * - .wrapper-align-right - Content aligns with wrapper's right edge
 * - .wrapper-padding-mobile-only - Padding on mobile, removed on desktop
 * - Responsive variants: md:wrapper-align-left, lg:wrapper-align-right, etc.
 */

/* ==========================================================================
   MOBILE-ONLY WRAPPER PADDING (defined first so wrapper-align can override)
   ========================================================================== */

/**
 * Apply wrapper-style padding on mobile, remove on tablet/desktop.
 * Useful for full-bleed content on desktop that needs breathing room on mobile.
 *
 * Defined BEFORE wrapper-align classes so they can override when used together.
 *
 * Usage: Add class to element that should have mobile padding only
 * Example: <div class="wrapper-padding-mobile-only">
 * Combined: <div class="wrapper-padding-mobile-only wrapper-align-left">
 */

.wrapper-padding-mobile-only {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

@media (min-width: 760px) {
	.wrapper-padding-mobile-only {
		padding-left: 0;
		padding-right: 0;
	}
}

.wrapper-padding-mobile-and-tablet-only {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

@media (min-width: 1230px) {
	.wrapper-padding-mobile-and-tablet-only {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==========================================================================
   WRAPPER ALIGNMENT UTILITIES
   ========================================================================== */

/* Base utilities - apply at all breakpoints */

.wrapper-align-left {
	padding-left: var(--gutter); /* Mobile fallback: always use gutter */
	/* padding-left: max(var(--gutter), calc((100vw - var(--scrollbar-width) - 120rem) / 2 + var(--gutter))); */
}

.wrapper-align-right {
	padding-right: var(--gutter); /* Mobile fallback: always use gutter */
	/* padding-right: max(var(--gutter), calc((100vw - var(--scrollbar-width) - 120rem) / 2 + var(--gutter))); */
}

/* Medium screens and up (768px+) */

@media (min-width: 760px) {
	.md\:wrapper-align-left {
		padding-left: max(var(--gutter), calc((100vw - var(--scrollbar-width) - 120rem) / 2 + var(--gutter)));
	}

	.md\:wrapper-align-right {
		padding-right: max(var(--gutter), calc((100vw - var(--scrollbar-width) - 120rem) / 2 + var(--gutter)));
	}
}

/* Large screens and up (1024px+) */

@media (min-width: 1230px) {
	/* Ensure wrapper-align takes precedence over wrapper-padding-mobile-and-tablet-only at lg+ */
	.wrapper-align-left {
		padding-left: max(var(--gutter), calc((100vw - var(--scrollbar-width) - 120rem) / 2 + var(--gutter)));
	}

	.wrapper-align-right {
		padding-right: max(var(--gutter), calc((100vw - var(--scrollbar-width) - 120rem) / 2 + var(--gutter)));
	}

	.lg\:wrapper-align-left {
		padding-left: max(var(--gutter), calc((100vw - var(--scrollbar-width) - 120rem) / 2 + var(--gutter)));
	}

	.lg\:wrapper-align-right {
		padding-right: max(var(--gutter), calc((100vw - var(--scrollbar-width) - 120rem) / 2 + var(--gutter)));
	}
}

/*
WRAPPER WIDTH
Constrains content to wrapper max-width without container styling.
Use inside full-width containers when you want specific columns constrained.
Matches the wrapper composition but without padding.
*/

.wrapper-width {
    max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 80rem);
    margin-inline: auto;
}

/* 3D Model Viewer Styles */

/* ==========================================================================
   CSS Custom Properties - Structural Only
   Colors, fonts, and decorative tokens moved to theme layer
   ========================================================================== */

:root {
  /* Spacing System */
  --canon-spacing-xs: 4px;
  --canon-spacing-sm: 8px;
  --canon-spacing-md: 12px;
  --canon-spacing: 16px;
  --canon-spacing-lg: 20px;
  --canon-spacing-xl: 24px;
  --canon-spacing-2xl: 32px;
  --canon-spacing-3xl: 40px;

  /* Transitions */
  --canon-transition-fast: 0.15s;
  --canon-transition-base: 0.2s;
  --canon-transition-slow: 0.3s;
  --canon-transition-slower: 0.4s;
  --canon-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --canon-transition-easing-smooth: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  /* Z-index Scale */
  --canon-z-base: 1;
  --canon-z-elevated: 10;
  --canon-z-overlay: 20;
  --canon-z-dropdown: 30;
  --canon-z-modal: 40;
  --canon-z-tooltip: 50;
  --canon-z-toast: 60;
  --canon-z-debug: 70;

  /* ==========================================================================
     THEME TOKENS - Move to theme layer
     ========================================================================== */

  /* Typography Scale - structural sizing */
  /* --canon-font-size-xs: 0.75rem;
  --canon-font-size-sm: 0.875rem;
  --canon-font-size-base: 1rem;
  --canon-font-size-lg: 1.125rem;
  --canon-font-size-xl: 1.25rem;
  --canon-font-size-2xl: 1.5rem; */

  /* Font Weights
  --canon-font-weight-normal: 400;
  --canon-font-weight-medium: 500;
  --canon-font-weight-semibold: 600;
  --canon-font-weight-bold: 700; */

  /* Font Family
  --canon-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --canon-font-family-mono: monospace; */

  /* Border Radius
  --canon-radius-xs: 2px;
  --canon-radius-sm: 4px;
  --canon-radius: 6px;
  --canon-radius-md: 8px;
  --canon-radius-lg: 12px; */

  /* Colors - Semantic
  --canon-color-bg-primary: #000;
  --canon-color-bg-secondary: #fff;
  --canon-color-text-primary: #fff;
  --canon-color-text-secondary: #000;
  --canon-color-text-muted: #666;
  --canon-color-accent: #4ecdc4;
  --canon-color-warning: #ffd700; */

  /* Colors - Alpha Variants
  --canon-bg-overlay: rgba(0, 0, 0, 0.8);
  --canon-bg-overlay-light: rgba(0, 0, 0, 0.5);
  --canon-bg-overlay-heavy: rgba(0, 0, 0, 0.95);
  --canon-bg-glass: rgba(255, 255, 255, 0.1);
  --canon-border-subtle: rgba(255, 255, 255, 0.1);
  --canon-border-light: rgba(255, 255, 255, 0.2);
  --canon-border-medium: rgba(255, 255, 255, 0.3); */

  /* Shadow System
  --canon-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --canon-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --canon-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
  --canon-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3); */
}

/* ==========================================================================
   Mobile & Responsive Styles
   ========================================================================== */

/* Mobile viewport fixes to prevent horizontal scrolling */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
    /* Disable double-tap zoom */
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  * {
    max-width: 100vw;
  }

  /* Ensure all containers respect viewport width */
  .canon-scene-container,
  .canon-scene-wrapper,
  .canon-ui-container,
  .canon-label-container {
    box-sizing: border-box;
  }

  /* Disable pinch-to-zoom on pages with 3D viewer
     The canvas has touch-action: none which allows model interaction to work */
  body.has-canon-3d-viewer,
  body.has-canon-3d-viewer * {
    touch-action: pan-x pan-y;
  }

  /* Ensure 3D canvas still allows full touch control for Three.js */
  body.has-canon-3d-viewer .canon-3d-canvas,
  body.has-canon-3d-viewer canvas {
    touch-action: none;
  }
}

/* ==========================================================================
   Core Scene & Canvas
   ========================================================================== */

/* Scene Container */

.canon-scene-container {
  position: relative;
  width: 100%;
  height: var(--viewport-height, 100vh);
  overflow: hidden;
  transition: transform var(--canon-transition-duration-slow) var(--canon-transition-easing);
}

/* Ensure no horizontal scroll on mobile */

@media (max-width: 768px) {
  .canon-scene-container {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .canon-scene-wrapper {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .canon-3d-canvas,
  #modelCanvas {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden;
  }
}

/* Scene Top Layer - for overlay elements like explore button */

.canon-scene-top-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Scene Wrapper - for 3D content and UI elements */

.canon-scene-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* UI Container - groups all interactive UI elements - uses utility class */

.canon-ui-container {}

/* Mobile UI Container fixes */

@media (max-width: 768px) {
  .canon-ui-container {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

/* Canvas */

.canon-3d-canvas,
#modelCanvas {
  /* Allow 3D interaction gestures but prevent zoom */
  touch-action: none;
}

#panoramaCanvas {
  display: none;
}

/* ==========================================================================
   Body State Management
   ========================================================================== */

/* Core body states managed by UI State Manager */

/* Scroll lock utility - prevents scroll while maintaining position */

body.canon-no-scroll {
  overflow: hidden !important;
}

html.canon-no-scroll {
  overflow: hidden !important;
}

/* Prevent scroll on all UI elements in interactive mode */

body.canon-interactive-active .canon-scene-wrapper,
body.canon-interactive-active .canon-ui-container,
body.canon-interactive-active .canon-hotspot,
body.canon-interactive-active .hotspot,
body.canon-interactive-active .canon-tour-progress,
body.canon-interactive-active button {
  touch-action: none;
}

/* Allow scrolling in tour panel content */

body.canon-interactive-active .canon-tour-panel__content {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Interactive mode - enables 3D interactions */

body.canon-interactive-active .canon-scene-wrapper {
  pointer-events: unset;
}

body.canon-interactive-active .canon-scene-wrapper .canon-3d-canvas,
body.canon-interactive-active .canon-scene-wrapper .canon-ui-container > *,
body.canon-interactive-active .canon-scene-wrapper .canon-label-container > *,
body.canon-interactive-active .canon-scene-wrapper .canon-tour-progress,
body.canon-interactive-active .canon-scene-wrapper .canon-tour-panel,
body.canon-interactive-active .canon-scene-wrapper .canon-toast-container {
  z-index: 6;
}

body.canon-interactive-active .canon-scene-top-layer {
  z-index: -1;
}

/* Panel active state - for tour panels */

body.canon-panel-active .canon-label-container {
  opacity: 0;
}

/* Content active state - for content panels */

body.canon-content-active .canon-ui-container > *:not(.canon-tour-progress):not(.canon-tour-panel) {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--canon-transition-duration) ease;
}

/* Hotspot panel active state - hide hotspots and tooltips if panel active */

body.canon-tour-active .canon-label-container,
  body.canon-tour-active .floating-tooltip,
  body.canon-panel-active .canon-label-container,
  body.canon-panel-active .floating-tooltip {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity var(--canon-transition-duration) ease;
  }

/* Loading active state */

body.canon-loading-active {
  overflow: hidden;
}

/* ==========================================================================
   Interactive Mode System - Structural only
   ========================================================================== */

.canon-scene-wrapper {
  pointer-events: none;
}

/* Explore button */

.canon-explore-button {
  border: none;
  padding: var(--canon-spacing-lg) var(--canon-spacing-3xl);
  cursor: pointer;
  transition: all var(--canon-transition-duration) ease;
  min-width: 200px;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  /* background-color: var(--color-dark-green); */
  /* color: var(--color-sand); */
  /* color: var(--color-dark-green); */
  /* background-color: var(--color-pink); */
  color: var(--color-sand);
  background-color: var(--color-dark-green);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.canon-explore-button .button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--canon-spacing-md);
}

.canon-explore-button:hover {
  /* transform: scale(1.05); */
  background-color: var(--color-clay);
}

.canon-explore-button:active {
  /* transform: scale(0.98); */
}

body.canon-interactive-active .canon-explore-button {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Exit button */

.canon-exit-interactive-btn {
  position: absolute;
  top: var(--canon-spacing);
  right: var(--canon-spacing);
  padding: 12px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px) translateX(0);
  transition: opacity var(--canon-transition-slower) var(--canon-transition-easing-smooth), visibility var(--canon-transition-slower) ease, transform var(--canon-transition-slower) var(--canon-transition-easing-smooth), width 0.2s ease;
  border: none;
}

.canon-exit-interactive-btn svg {
    width: 20px;
  }

body.canon-interactive-active .canon-exit-interactive-btn {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateX(0);
  transition-delay: 0.8s;
}

/* Hide exit button during tour */

body.canon-tour-active .canon-exit-interactive-btn {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition-delay: 0s;
}

/* Hide exit button when overlay/panel is open - slide off right */

body.canon-panel-active .canon-exit-interactive-btn,
body.canon-secondary-overlay-active .canon-exit-interactive-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + var(--canon-spacing-xl)));
  transition-delay: 0s;
}

.canon-exit-interactive-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateX(0);
}

.canon-exit-interactive-btn:hover {
  width: auto;
  min-width: 44px;
  padding: var(--canon-spacing-md) var(--canon-spacing);
}

.canon-exit-text {
  opacity: 0;
  margin-left: var(--canon-spacing-sm);
  transition: opacity var(--canon-transition-duration) ease;
  pointer-events: none;
  display: none;
  /* width: 0; */
  /* transition: all 0.2s; */
}

.canon-exit-interactive-btn:hover .canon-exit-text {
  opacity: 1;
  display: block;
  /* width: auto; */
  /* min-width: 40px; */
}

/* Scene shifting for panels */

/* body.canon-tour-active,
body.canon-panel-active {
  @media (min-width: 769px) {
    .canon-3d-canvas {
      transform: translateX(-25%);
    }
  }
  @media (max-width: 768px) {
    .canon-3d-canvas {
      transform: none;
    }
  }
} */

body.canon-tour-active .canon-3d-canvas {
  transition-delay: 1.5s;
}

body.canon-panel-active .canon-3d-canvas {
  transition-delay: 0.2s;
}

.canon-3d-canvas {
  transition: transform var(--canon-transition-duration-slow) ease;
}

/* ==========================================================================
   Canon Hotspots - Structural styles only
   ========================================================================== */

/* ==========================================================================
   1. Hotspot Base Styles
   ========================================================================== */

/* Hide hotspots until interactive mode */

.canon-hotspot,
.hotspot,
.hotspot-primary,
.hotspot-secondary,
.hotspot-tertiary {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  --hotspot-scale: 0.95;
  transform: translate3d(var(--hotspot-x, 0), var(--hotspot-y, 0), 0) translate(-50%, -50%) scale(var(--hotspot-scale, 1));
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /*
   * Touch action: manipulation
   * Allows taps and pinch-zoom but disables double-tap zoom.
   * Combined with JS touch handlers, this ensures:
   * - Taps trigger hotspot actions
   * - Drags pass through to 3D canvas
   * - Two-finger gestures work for zoom
   */
  touch-action: manipulation;
}

.hotspot,
.hotspot-primary,
.hotspot-secondary,
.hotspot-tertiary {
  transition: all 0.1s;
}

/* Enable pointer-events in interactive mode */

body.canon-interactive-active .canon-hotspot,
body.canon-interactive-active .hotspot,
body.canon-interactive-active .hotspot-primary,
body.canon-interactive-active .hotspot-secondary,
body.canon-interactive-active .hotspot-tertiary {
  pointer-events: auto;
}

/* Hide hotspots when content/tour is active */

body.canon-panel-active .canon-hotspot,
body.canon-panel-active .hotspot,
body.canon-panel-active .hotspot-primary,
body.canon-panel-active .hotspot-secondary,
body.canon-panel-active .hotspot-tertiary,
body.canon-tour-active .canon-hotspot,
body.canon-tour-active .hotspot,
body.canon-tour-active .hotspot-primary,
body.canon-tour-active .hotspot-secondary,
body.canon-tour-active .hotspot-tertiary {
  opacity: 0;
  pointer-events: none;
}

/* Hide tooltips when content/tour is active */

body.canon-panel-active .floating-tooltip,
body.canon-tour-active .floating-tooltip {
  opacity: 0;
  pointer-events: none;
}

/* Block interactions during animation */

.hotspot-animating {
  pointer-events: none !important;
}

/* Hotspot base structure */

.canon-hotspot,
.hotspot,
.hotspot-primary,
.hotspot-secondary,
.hotspot-tertiary {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  cursor: pointer;
  /* Use CSS custom properties for GPU-accelerated positioning (no reflow) */
  /* --hotspot-scale is animated by GSAP without overriding position */
  transform: translate3d(var(--hotspot-x, 0), var(--hotspot-y, 0), 0) translate(-50%, -50%) scale(var(--hotspot-scale, 1));
  will-change: transform;
}

/* Primary hotspots */

.hotspot-primary {
  width: var(--hotspot-primary-size, 24px);
  height: var(--hotspot-primary-size, 24px);
  background-color: var(--color-yellow);
}

.hotspot-primary:hover {
  --hotspot-scale: var(--hotspot-hover-scale, 1.2);
}

.hotspot-primary.hotspot-active {
  --hotspot-scale: var(--hotspot-hover-scale, 1.2);
}

/* Secondary hotspots */

.hotspot-secondary {
  width: var(--hotspot-secondary-size, 16px);
  height: var(--hotspot-secondary-size, 16px);
  background-color: var(--color-pink);
}

.hotspot-secondary:hover {
  --hotspot-scale: var(--hotspot-hover-scale, 1.2);
}

.hotspot-secondary.hotspot-active {
  --hotspot-scale: var(--hotspot-hover-scale, 1.2);
}

/* Tertiary hotspots */

.hotspot-tertiary {
  width: var(--hotspot-tertiary-size, 12px);
  height: var(--hotspot-tertiary-size, 12px);
  background-color: #0000003d;
  border: 2px solid var(--color-yellow);
}

.hotspot-tertiary:hover {
  --hotspot-scale: var(--hotspot-tertiary-hover-scale, 1.3);
}

.hotspot-tertiary.hotspot-active {
  --hotspot-scale: var(--hotspot-tertiary-hover-scale, 1.3);
}

/* ==========================================================================
   2. Enhanced Hit Areas
   ========================================================================== */

.hotspot-primary::before,
.hotspot-secondary::before,
.hotspot-tertiary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;

  /* Inherit touch-action from parent for consistent behavior */
  touch-action: inherit;
}

/* ==========================================================================
   2a. Touch Device Optimizations
   ========================================================================== */

/*
 * On touch devices, reduce hit area size slightly to minimize
 * accidental touches during two-finger gestures (pinch zoom).
 * Uses coarse pointer detection to target touch-only devices.
 */

@media (pointer: coarse) {
  .hotspot-primary::before {
    width: var(--hotspot-hit-area-primary-touch, 60px);
    height: var(--hotspot-hit-area-primary-touch, 60px);
  }

  .hotspot-secondary::before {
    width: var(--hotspot-hit-area-secondary-touch, 48px);
    height: var(--hotspot-hit-area-secondary-touch, 48px);
  }

  .hotspot-tertiary::before {
    width: var(--hotspot-hit-area-tertiary-touch, 36px);
    height: var(--hotspot-hit-area-tertiary-touch, 36px);
  }
}

.hotspot-primary::before {
  width: var(--hotspot-hit-area-primary, 80px);
  height: var(--hotspot-hit-area-primary, 80px);
}

.hotspot-secondary::before {
  width: var(--hotspot-hit-area-secondary, 64px);
  height: var(--hotspot-hit-area-secondary, 64px);
}

.hotspot-tertiary::before {
  width: var(--hotspot-hit-area-tertiary, 48px);
  height: var(--hotspot-hit-area-tertiary, 48px);
}

/* ==========================================================================
   3. Hotspot Cycling/Debug
   ========================================================================== */

.hotspot-cycling-highlight {
  border-radius: 50%;
  z-index: 20 !important;
}

.hotspot-cycling-highlight::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  animation: hotspot-pulse 2s ease-in-out infinite;
}

@keyframes hotspot-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* ==========================================================================
   4. Position Transitions
   ========================================================================== */

/* Position updates now use CSS custom properties (--hotspot-x, --hotspot-y)
   which are applied via transform for GPU-accelerated, reflow-free updates.
   No transition needed as updates happen per-frame during camera movement. */

/* ==========================================================================
   5. Special Hotspots (Easter Eggs)
   ========================================================================== */

.crocodile-hotspot {
  position: absolute;
  width: 60px;
  height: 60px;
  background: transparent;
  border: none;
  pointer-events: auto;
  cursor: pointer;
  z-index: 20;
  opacity: 0;
}

/* ==========================================================================
   Hotspot Animations - Replaces GSAP inline styles
   ========================================================================== */

/* ==========================================================================
   1. Pulse Animation
   ========================================================================== */

.pulse-animation {
  /* TEMPORARILY DISABLED */
  /* animation: hotspot-pulse 2s ease-in-out infinite; */
}

@keyframes hotspot-pulse {
  0% {
    --hotspot-scale: 1;
    opacity: 1;
  }
  50% {
    --hotspot-scale: 1.1;
    opacity: 0.8;
  }
  100% {
    --hotspot-scale: 1;
    opacity: 1;
  }
}

/* ==========================================================================
   2. Fade In Animations
   ========================================================================== */

/* Basic fade in */

.hotspot-fade-in {
  animation: hotspot-fade-in 0.6s ease-out forwards;
}

@keyframes hotspot-fade-in {
  from {
    opacity: 0;
    --hotspot-scale: 0.8;
  }
  to {
    opacity: 1;
    --hotspot-scale: 1;
  }
}

/* LEGACY: Staggered fade in for multiple hotspots - not used
.hotspot-stagger-1 { animation-delay: 0.1s; }
.hotspot-stagger-2 { animation-delay: 0.2s; }
.hotspot-stagger-3 { animation-delay: 0.3s; }
.hotspot-stagger-4 { animation-delay: 0.4s; }
.hotspot-stagger-5 { animation-delay: 0.5s; }
.hotspot-stagger-6 { animation-delay: 0.6s; }
.hotspot-stagger-7 { animation-delay: 0.7s; }
.hotspot-stagger-8 { animation-delay: 0.8s; }
*/

/* LEGACY: Bounce in animation - defined in constants but not used
.hotspot-bounce-in {
  animation: hotspot-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes hotspot-bounce-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
*/

/* ==========================================================================
   3. Fade Out Animations
   ========================================================================== */

.hotspot-fade-out {
  animation: hotspot-fade-out 0.3s ease-out forwards;
}

@keyframes hotspot-fade-out {
  from {
    opacity: 1;
    --hotspot-scale: 1;
  }
  to {
    opacity: 0;
    --hotspot-scale: 0.8;
  }
}

/* ==========================================================================
   4. Scale Animations
   ========================================================================== */

/* LEGACY: Scale animations - not used
.hotspot-scale-hover:hover {
  animation: hotspot-scale-up 0.3s ease-out forwards;
}

@keyframes hotspot-scale-up {
  to {
    transform: translate(-50%, -50%) scale(var(--hotspot-hover-scale, 1.2));
  }
}

.hotspot-scale-down {
  animation: hotspot-scale-down 0.3s ease-out forwards;
}

@keyframes hotspot-scale-down {
  to {
    transform: translate(-50%, -50%) scale(0.8);
  }
}
*/

/* ==========================================================================
   5. Attention Animations
   ========================================================================== */

/* LEGACY: Attention animations - not used
.hotspot-wiggle {
  animation: hotspot-wiggle 0.5s ease-in-out;
}

@keyframes hotspot-wiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(-50%, -50%) rotate(-5deg); }
  75% { transform: translate(-50%, -50%) rotate(5deg); }
}

.hotspot-glow {
  animation: hotspot-glow 2s ease-in-out infinite;
}

@keyframes hotspot-glow {
  0%, 100% {
    box-shadow: 0 0 5px var(--hotspot-primary-color);
  }
  50% {
    box-shadow: 0 0 20px var(--hotspot-primary-color), 0 0 30px var(--hotspot-primary-color);
  }
}
*/

/* ==========================================================================
   6. Interactive Mode Animations
   ========================================================================== */

/* LEGACY: Interactive mode entry animations - not used
.hotspot-entry-init {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

.hotspot-entry-animate {
  animation: hotspot-entry 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes hotspot-entry {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
*/

/* ==========================================================================
   7. Cycling Animations
   ========================================================================== */

/* LEGACY: Cycling highlight pulse - not used
.hotspot-cycling-pulse {
  animation: cycling-pulse 2s ease-in-out infinite;
}

@keyframes cycling-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.6), 0 0 20px rgba(255, 107, 107, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 107, 107, 0.3), 0 0 40px rgba(255, 107, 107, 0.6);
  }
}
*/

/* ==========================================================================
   8. Transition Classes
   ========================================================================== */

/* LEGACY: Transition classes - not used
.hotspot-transition-all {
  transition: all var(--canon-transition-duration, 0.3s) var(--canon-transition-easing, ease);
}

.hotspot-transition-transform {
  transition: transform var(--canon-transition-duration, 0.3s) var(--canon-transition-easing, ease);
}

.hotspot-transition-opacity {
  transition: opacity var(--canon-transition-duration, 0.3s) var(--canon-transition-easing, ease);
}

.hotspot-transition-none {
  transition: none !important;
}
*/

/* ==========================================================================
   Hotspot State Classes - Replaces JavaScript style manipulation
   ========================================================================== */

/* ==========================================================================
   1. Visibility States
   ========================================================================== */

/* Hidden state - replaces style.display = 'none' */

.hotspot--hidden {
  display: none !important;
}

/* Invisible state - replaces style.opacity = 0 */

.hotspot--invisible {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Visible state - replaces style.opacity = 1 */

.hotspot--visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Transparent state for animations */

.hotspot--transparent {
  opacity: 0;
}

/* ==========================================================================
   2. Position States
   ========================================================================== */

/* Fixed positioning - replaces style.position = 'fixed' */

.hotspot--fixed {
  position: fixed !important;
}

/* Absolute positioning - replaces style.position = 'absolute' */

.hotspot--absolute {
  position: absolute !important;
}

/* Centered position - centers hotspot dot on its calculated position */

/* Position comes from --hotspot-x/y CSS custom properties set by JS */

/* Scale comes from --hotspot-scale, animated by GSAP */

.hotspot--centered {
  transform: translate3d(var(--hotspot-x, 0), var(--hotspot-y, 0), 0) translate(-50%, -50%) scale(var(--hotspot-scale, 1));
}

/* Position reset */

.hotspot--position-reset {
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

/* ==========================================================================
   3. Z-Index Management
   ========================================================================== */

/* Base z-index - replaces style.zIndex = 10 */

.hotspot--z-base {
  z-index: var(--canon-z-elevated, 10) !important;
}

/* Hover z-index - replaces style.zIndex = 15 */

.hotspot--z-hover {
  z-index: var(--hotspot-z-hover, 15) !important;
}

/* Front z-index - replaces style.zIndex = 1000 for bring to front */

.hotspot--z-front {
  z-index: var(--canon-z-dropdown) !important;
}

/* Active/elevated z-index - replaces style.zIndex = 20 */

.hotspot--z-elevated {
  z-index: var(--hotspot-z-cycling, 20) !important;
}

/* Tooltip z-index */

.hotspot--z-tooltip {
  z-index: var(--canon-z-tooltip, 100) !important;
}

/* ==========================================================================
   4. Interaction States
   ========================================================================== */

/* Active state when tooltip is showing */

.hotspot--active {
  --hotspot-scale: var(--hotspot-hover-scale, 1.2);
}

/* Hovered state */

.hotspot--hovered {
  --hotspot-scale: var(--hotspot-hover-scale, 1.2);
}

/* Disabled interactions - replaces style.pointerEvents = 'none' */

.hotspot--disabled {
  pointer-events: none !important;
}

/* Interactive enabled - replaces style.pointerEvents = 'auto' */

.hotspot--interactive {
  pointer-events: auto !important;
  cursor: pointer;
}

/* Force interactive (for primary hotspots critical fix) */

.hotspot--force-interactive {
  pointer-events: auto !important;
}

/* ==========================================================================
   5. Animation States
   ========================================================================== */

/* Animating state - blocks interactions during animations */

.hotspot--animating {
  pointer-events: none !important;
}

/* No transitions - replaces style.transition = 'none' */

.hotspot--no-transition {
  transition: none !important;
}

/* Fade transition */

.hotspot--fade-transition {
  transition: opacity var(--canon-transition-duration, 0.3s) var(--canon-transition-easing, ease);
}

/* Scale transition */

.hotspot--scale-transition {
  transition: transform var(--canon-transition-duration, 0.3s) var(--canon-transition-easing, ease);
}

/* ==========================================================================
   6. Special States
   ========================================================================== */

/* Cycling highlight state */

.hotspot--cycling {
  z-index: var(--hotspot-z-cycling, 20) !important;
}

/* LEGACY: Loading and error states - not used
.hotspot--loading {
  opacity: 0.3;
  pointer-events: none;
}

.hotspot--error {
  opacity: 0.5;
  border-color: var(--canon-color-error, #ff0000) !important;
}
*/

/* ==========================================================================
   7. Responsive States
   ========================================================================== */

/* LEGACY: Responsive states - not used
@media (max-width: 768px) {
  .hotspot--mobile-hidden {
    display: none !important;
  }

  .hotspot--mobile-visible {
    display: block !important;
  }
}

@media (min-width: 769px) {
  .hotspot--desktop-hidden {
    display: none !important;
  }

  .hotspot--desktop-visible {
    display: block !important;
  }
}
*/

/* ==========================================================================
   Hotspot Tooltips - State management only
   Main styling is in tooltip.css
   ========================================================================== */

/* Hide tooltips when tour or panel is active */

body.canon-panel-active .floating-tooltip,
body.canon-tour-active .floating-tooltip {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Tooltip Styles - Structural only
   ========================================================================== */

/* Base floating tooltip */

.floating-tooltip {
  position: fixed;
  z-index: 9999;
  width: 280px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Visible state */

.floating-tooltip.visible,
.floating-tooltip--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Tooltip Type Variants - Structure only, theming via theme layer
   ========================================================================== */

.floating-tooltip.tt_primary,
.floating-tooltip.tt_secondary,
.floating-tooltip.tt_tertiary {
  /* Theme styles applied externally */
}

.tt_primary {
  background-color: var(--color-yellow);
  color: var(--color-dark-green);
}

.tt_secondary {
  background-color: var(--color-sand);
  color: var(--color-dark-green);
}

.tt_tertiary {
  /* background-color: var(--color-dark-green); */
  background-color: var(--color-light);
  /* color: var(--color-yellow); */
  color: var(--color-dark-green);
}

/* ==========================================================================
   Tooltip Content Structure
   ========================================================================== */

/* Image container */

.tooltip-image-container {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.tooltip-image-container img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tooltip-image-small { height: 60px; }

.tooltip-image-medium { height: 80px; }

.tooltip-image-large { height: 100px; }

/* Copy/text area */

.tooltip-copy {
  padding: 12px 16px;
}

/* Category label */

.tooltip-category {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  line-height: 1.1;
  font-size: var(--size-step-00);
}

/* Heading */

.tooltip-heading {
  margin: 0 0 8px 0;
  font-size: var(--size-step-1);
  line-height: 1.08;
}

/* Description */

.tooltip-description {
  line-height: 1.1;
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Features list */

.tooltip-features {
  margin-top: 8px;
}

.tooltip-detail-item {
  padding: 2px 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.tooltip-cta {
  padding: 8px 0 0 0;
}

.tooltip-tour-button,
.tooltip-details-button {
  width: 100%;
  padding: 10px 16px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.tooltip-details-button--tertiary {
  /* Theme styles applied externally */
}

.tt_secondary .tooltip-details-button {
  background-color: var(--color-pink);
  color: var(--color-dark-green);
}

/* ==========================================================================
   Arrow
   ========================================================================== */

.tooltip-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
  z-index: -1;
}

/* ==========================================================================
   Animation Classes
   ========================================================================== */

.tooltip-fade-in {
  animation: tooltipFadeIn 0.3s ease forwards;
}

.tooltip-fade-out {
  animation: tooltipFadeOut 0.3s ease forwards;
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tooltipFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(4px); }
}

/* ==========================================================================
   UI Components - Structural styles only
   ========================================================================== */

/* Secondary Overlay System */

.canon-secondary-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--viewport-height, 100vh);
  z-index: var(--canon-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
  /* background-color: aliceblue; */
}

.canon-secondary-overlay--visible {
  opacity: 1;
}

/* Wrapper holds close button and content in a column */

.canon-secondary-overlay__wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* gap: 0.5rem; */
  max-width: 90vw;
  max-height: 90vh;
}

.canon-secondary-overlay__content {
  position: relative;
  overflow-y: auto;
  cursor: default;
  background-color: rgba(255, 255, 255, 0.9);
  /* Two-column layout: image left, copy right */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Mobile: stack vertically */

@media (max-width: 768px) {
  .canon-secondary-overlay__content {
    grid-template-columns: 1fr;
  }
}

/* Close button - flex item in wrapper, positioned above content */

.canon-secondary-overlay__close {
  width: 44px;
  height: 44px;
  padding: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  background-color: var(--color-dark-green);
  color: var(--color-sand);
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.2s ease, padding 0.2s ease;
}

.canon-secondary-overlay__close svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    order: 2;
  }

.canon-secondary-overlay__close svg path {
      fill: var(--color-sand);
    }

.canon-secondary-overlay__close:hover {
  width: auto;
  min-width: 44px;
  padding: 12px var(--canon-spacing);
}

.canon-secondary-overlay__close-text {
  opacity: 0;
  margin-right: var(--canon-spacing-sm);
  transition: opacity var(--canon-transition-duration) ease;
  pointer-events: none;
  display: none;
  order: 1;
}

@media (min-width: 769px) {
  .canon-secondary-overlay__close:hover .canon-secondary-overlay__close-text {
    opacity: 1;
    display: block;
  }
}

@media (max-width: 768px) {
  .canon-secondary-overlay__close-text {
    display: none !important;
  }
}

/* Loading Screen - visible by default so user sees it immediately */

.canon-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--canon-z-overlay);
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--canon-transition-slow) var(--canon-transition-easing);
  background-color: var(--color-dark-green);
  color: var(--color-sand);
}

/* Loading screen fading out after complete */

.canon-loading--complete {
  opacity: 0;
  pointer-events: none;
}

.canon-loading__roundel {
  width: 150px;
  height: 150px;
  margin-bottom: var(--canon-spacing);
}

.canon-loading__roundel svg {
    width: 100%;
    height: 100%;
  }

.canon-loading__roundel svg path {
      fill: var(--color-sand) !important;
    }

.canon-loading__title {
  margin: 0 0 var(--canon-spacing) 0;
}

.canon-loading__progress-container {
  width: 300px;
  height: var(--canon-spacing-xs);
  overflow: hidden;
  margin-bottom: var(--canon-spacing-sm);
}

.canon-loading__progress-bar {
  width: 0%;
  height: 100%;
  transition: width var(--canon-transition-slow) var(--canon-transition-easing);
}

.canon-loading__status {
  opacity: 0.8;
}

/* Debug Panel */

.canon-debug__toggle {
  position: absolute;
  top: var(--canon-spacing-sm);
  left: 50%;
  transform: translateX(-50%) translateY(calc(-100% - var(--canon-spacing-lg)));
  padding: var(--canon-spacing-sm) var(--canon-spacing-md);
  cursor: pointer;
  transition: transform var(--canon-transition-slower) var(--canon-transition-easing-smooth);
  opacity: 0;
  pointer-events: none;
}

body.canon-interactive-active .canon-debug__toggle {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.4s;
}

.canon-debug__panel {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--canon-spacing);
  min-width: 400px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  display: none;
}

.canon-debug__panel--visible {
  display: block;
}

.canon-debug__section {
  margin-bottom: var(--canon-spacing);
  padding-bottom: var(--canon-spacing);
}

.canon-debug__section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.canon-debug__close {
  position: absolute;
  top: var(--canon-spacing-sm);
  right: var(--canon-spacing-sm);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--canon-transition-base);
}

.canon-debug__close:hover {
  opacity: 1;
}

/* Camera Controls */

.canon-camera-controls {
  position: absolute;
  bottom: var(--canon-spacing);
  right: var(--canon-spacing);
  padding: var(--canon-spacing);
  min-width: 200px;
  transform: translateX(calc(100% + var(--canon-spacing-3xl)));
  transition: transform var(--canon-transition-slower) var(--canon-transition-easing-smooth);
}

body.canon-interactive-active .canon-camera-controls {
  transform: translateX(0);
  transition-delay: var(--canon-transition-base);
}

body.canon-debug-visible .canon-camera-controls {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
  transition-delay: 0s !important;
}

body.canon-debug-visible .canon-camera-controls.js-hidden {
  display: block !important;
}

.camera-controls-header {
  display: flex;
  align-items: center;
  gap: var(--canon-spacing-sm);
  margin-bottom: var(--canon-spacing-md);
  padding-bottom: var(--canon-spacing-sm);
}

.camera-controls-content {
  display: flex;
  flex-direction: column;
  gap: var(--canon-spacing-sm);
  background-color: #333;
}

.camera-control-item {
  display: flex;
  align-items: center;
  background-color: #333;
}

.camera-control-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.camera-control-button svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Camera Mode Control */

.camera-mode-control {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.camera-mode-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.camera-mode-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: white;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.camera-mode-select:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.camera-mode-select:focus {
  outline: none;
  border-color: var(--color-pink, #e91e63);
}

.camera-mode-select option {
  background: #333;
  color: white;
}

.camera-mode-info {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.polar-angle-value,
.height-value {
  font-family: monospace;
  color: var(--color-pink, #4ecdc4);
}

.height-label {
  margin-left: auto;
}

.camera-height-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: white;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.camera-height-select:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.camera-height-select:focus {
  outline: none;
  border-color: var(--color-pink, #e91e63);
}

.camera-height-select option {
  background: #333;
  color: white;
}

/* Navigation Buttons (top-left) */

.canon-nav-buttons {
  position: absolute;
  top: var(--canon-spacing, 20px);
  left: var(--canon-spacing, 20px);
  display: none;
  gap: 8px;
  z-index: 100;
  transform: translateX(0);
  transition: transform var(--canon-transition-slower) var(--canon-transition-easing-smooth);
}

/* Show nav buttons only during interactive mode */

body.canon-interactive-active .canon-nav-buttons {
  display: flex;
}

/* Hide nav buttons during tour */

body.canon-tour-active .canon-nav-buttons {
  display: none;
}

/* Hide nav buttons when overlay/panel is open - slide off left */

body.canon-panel-active .canon-nav-buttons,
body.canon-secondary-overlay-active .canon-nav-buttons {
  transform: translateX(calc(-100% - var(--canon-spacing-xl)));
}

.canon-nav-btn {
  font-size: 14px;
  /* padding: 10px 16px; */
  padding: 5px 12px;
  white-space: nowrap;
  border: none;
  color: var(--color-sand) !important;
}

.canon-nav-btn svg {
    width: 20px;
  }

.canon-nav-btn svg path {
      stroke: var(--color-sand) !important;
    }

.canon-nav-btn--icon {
  padding: 5px 6px;
}

/* Toast Notifications */

.canon-toast-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.canon-toast-container.position-top { top: var(--canon-spacing); }

.canon-toast-container.position-bottom { bottom: var(--canon-spacing); }

.canon-toast-container.position-left { left: var(--canon-spacing); }

.canon-toast-container.position-right { right: var(--canon-spacing); }

.canon-toast {
  padding: 12px 24px;
  max-width: 300px;
}

.canon-toast.slide-in {
  animation: canonToastSlideIn 0.3s ease-out;
}

.canon-toast.slide-out {
  animation: canonToastSlideOut 0.3s ease-out;
}

/* Labels */

.canon-label-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.canon-label,
.label {
  position: absolute;
  padding: 5px 10px;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity var(--canon-transition-duration) ease;
}

.canon-pov-label {
  position: absolute;
  pointer-events: auto;
  white-space: nowrap;
  cursor: pointer;
  padding: 5px 10px;
  transition: opacity var(--canon-transition-duration) ease;
}

/* Mesh Analyzer Debug Tool */

.canon-mesh-analyzer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  height: 80vh;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--canon-z-modal);
}

.canon-mesh-analyzer--visible {
  display: flex;
}

.canon-mesh-analyzer__header {
  padding: 20px;
}

.canon-mesh-analyzer__title {
  margin: 0;
}

.canon-mesh-analyzer__content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.canon-mesh-analyzer__close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.canon-mesh-analyzer__close:hover {
  opacity: 1;
}

/* Primary Hotspot Hover Tooltips */

.primary-hotspot-tooltip {
  position: fixed;
  padding: 8px 12px;
  z-index: var(--canon-z-tooltip);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-100%) scale(0.9);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.primary-hotspot-tooltip.tooltip-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-100%) scale(1);
}

.primary-hotspot-tooltip.tooltip-hiding {
  opacity: 0;
  transform: translateX(-50%) translateY(-100%) scale(0.9);
}

.primary-hotspot-tooltip.tooltip-below {
  transform: translateX(-50%) scale(1);
}

.primary-hotspot-tooltip.tooltip-below.tooltip-visible {
  transform: translateX(-50%) scale(1);
}

.primary-hotspot-tooltip.tooltip-below.tooltip-hiding {
  transform: translateX(-50%) scale(0.9);
}

.primary-tooltip-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.primary-tooltip-title {
  line-height: 1.2;
  white-space: nowrap;
}

.primary-tooltip-cta {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Arrow indicators for primary tooltips */

.primary-hotspot-tooltip::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
}

.primary-hotspot-tooltip.tooltip-below::before {
  bottom: auto;
  top: -5px;
  border-top: none;
  border-bottom: 6px solid currentColor;
}

/* Secondary Overlay Content Structure */

.canon-secondary-overlay__image-container,
.canon-secondary-overlay__content {
  max-height: 800px;
}

/* Copy wrapper - right column in 2-col layout */

.canon-secondary-overlay__copy {
  padding: var(--canon-spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.canon-secondary-overlay__header {
  margin-bottom: var(--canon-spacing-md);
}

/* Subtitle appears above title using flexbox order */

.canon-secondary-overlay__header {
  display: flex;
  flex-direction: column;
}

.canon-secondary-overlay__subtitle {
  order: -1;
  margin: 0 0 var(--canon-spacing-xs) 0;
}

.canon-secondary-overlay__title {
  margin: 0;
}

.canon-secondary-overlay__image-container {
  /* Full height on desktop for 2-col layout */
  /* aspect-ratio: 1/1; */
  height: 100%;
  min-height: 300px;
      position: sticky;
        top: 0;
  
}

/* Mobile: restore aspect ratio */

@media (max-width: 768px) {
  .canon-secondary-overlay__image-container {
    aspect-ratio: 16/9;
    height: auto;
    min-height: auto;
  }
}

.canon-secondary-overlay__main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canon-secondary-overlay__description-container {
  margin-bottom: 24px;
}

.canon-secondary-overlay__description {
  margin: 0;
  line-height: 1.6;
}

/* Website link for tertiary hotspots */

.canon-secondary-overlay__website-container {
  margin-bottom: 24px;
}

.canon-secondary-overlay__website-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.canon-secondary-overlay__website-link:hover {
  opacity: 0.7;
}

.canon-secondary-overlay__website-link svg {
  flex-shrink: 0;
}

.canon-secondary-overlay__stats-container {
  margin-bottom: 24px;
}

.canon-secondary-overlay__stats-title {
  margin: 0 0 12px 0;
}

.canon-secondary-overlay__stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.canon-secondary-overlay__stat-item {
  padding: 16px;
}

.canon-secondary-overlay__stat-label {
  margin-bottom: 4px;
}

.canon-secondary-overlay__features-container {
  margin-bottom: 24px;
}

.canon-secondary-overlay__features-title {
  margin: 0 0 12px 0;
}

.canon-secondary-overlay__features-list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

.canon-secondary-overlay__feature-item {
  margin-bottom: 8px;
}

.canon-secondary-overlay__gallery-container {
  margin-bottom: 24px;
  display: none;
}

.canon-secondary-overlay__gallery-title {
  margin: 0 0 12px 0;
}

.canon-secondary-overlay__gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.canon-secondary-overlay__gallery-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.canon-secondary-overlay__gallery-image:hover {
  transform: scale(1.05);
}

.canon-secondary-overlay__read-more-container {
  margin-top: 24px;
  padding-top: 20px;
  text-align: center;
}

.canon-secondary-overlay__read-more-link {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
}

/* No Content Overlay */

.canon-secondary-overlay--no-content .canon-secondary-overlay__content {
  padding: 40px;
  text-align: center;
  max-width: 400px;
  cursor: default;
}

.canon-secondary-overlay__no-content-icon {
  margin-bottom: 16px;
}

.canon-secondary-overlay__no-content-title {
  margin: 0 0 12px 0;
}

.canon-secondary-overlay__no-content-text {
  margin: 0;
  line-height: 1.5;
}

/* Offer/Discount Code Structure */

.canon-secondary-overlay__offer-container {
  margin: 24px 0;
  padding: 20px;
  background-color: var(--color-sand);
}

.canon-secondary-overlay__offer-title {
  margin: 0 0 12px 0;
}

.canon-secondary-overlay__offer-content {
  display: flex;
  /* flex-direction: column; */
  /* gap: 2rem; */
  flex-wrap: wrap;
}

.canon-secondary-overlay__offer-amount {
  margin: 0;
  font-size: var(--size-step-2);
  line-height: 1.2;
  margin-right: 2rem;
  margin-bottom: 1rem;
}

.small-print {
  font-size: var(--size-step-00);
}

.canon-secondary-overlay__offer-code {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.canon-secondary-overlay__offer-code-value {
  padding: 8px 16px;
  font-family: monospace;
  letter-spacing: 1px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.5rem;
  
}

.canon-secondary-overlay__copy-code {
  text-decoration: none;
  padding: 8px 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  color: var(--color-sand);  
}

.canon-secondary-overlay__offer-disclaimer {
  margin: var(--canon-spacing-md) 0 0 0;
  padding: var(--canon-spacing-sm) var(--canon-spacing-md);
  background-color: rgba(255, 255, 255, 0.3);
  font-size: var(--size-step-00);
  line-height: 1.2;
  border-radius: 4px;
}

/* CTA Container */

.canon-secondary-overlay__cta-container {
  margin-top: 24px;
  padding-top: 20px;
  text-align: center;
}

.canon-secondary-overlay__cta-link {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
}

/* Mobile responsive */

@media (max-width: 768px) {
  .canon-secondary-overlay__offer-code {
    flex-direction: column;
    align-items: flex-start;
  }

  .canon-secondary-overlay__copy-code {
    margin-top: 8px;
  }

  .primary-hotspot-tooltip {
    padding: 6px 10px;
  }
}

/* Tour Launcher Button */

.canon-tour-launcher {
  position: fixed;
  bottom: var(--canon-spacing-xl);
  left: 50%;
  z-index: var(--canon-z-elevated);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(20px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.canon-interactive-active .canon-tour-launcher {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 1.5s;
}

body.canon-interactive-active .canon-tour-launcher:hover {
  transform: translateX(-50%) translateY(-3px);
  transition-delay: 0s;
}

body.canon-tour-active .canon-tour-launcher {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
  transition-delay: 0s;
}

/* Hide tour launcher when overlay/panel is open - slide off bottom */

body.canon-panel-active .canon-tour-launcher,
body.canon-secondary-overlay-active .canon-tour-launcher {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(calc(100% + var(--canon-spacing-xl)));
  transition-delay: 0s;
}

.tour-next-btn {
  background-color: var(--color-yellow);
  color: var(--color-clay);
}

.tour-exit-btn {
  background-color: var(--color-dark-green);
  color: var(--color-sand);
}

.tour-progress__circle {
  font-family: var(--font-base);
  font-weight: var(--font-semibold);
}

/* ==========================================================================
   Tour Panels - Minimal Structure
   ========================================================================== */

/* DEBUG: Force panel visible for styling - remove when done */

/* .canon-tour-panel {
  transform: translateX(0) !important;
} */

/* Base Panel - overflow visible so close button can extend outside */

.canon-tour-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 40%;
  height: var(--viewport-height, 100vh);
  transform: translateX(130%);
  transition: transform 0.4s ease;
  z-index: 1000;
  overflow: visible; /* Allow close button to extend outside */
  display: flex;
  /* position: relative; */
  flex-direction: column;
}

/* Inner container handles scrolling */

.canon-tour-panel-inner {
  margin: 1rem;
  /* padding: 2rem; */
  background-color: rgba(255, 255, 255, 0.9);
  overflow-y: auto; /* Scrolling happens here */
  flex: 1;
  min-height: 0; /* Required for flex child scrolling */
}

.canon-tour-panel__main-image * {
  aspect-ratio: 16/9;
}

.canon-tour-panel__copy {
  padding: 0 2rem 2rem;
}

/* Show panel */

body.canon-panel-active .canon-tour-panel,
.canon-tour-panel--visible {
  transform: translateX(0);
}

/* Mobile - slide from bottom */

@media (max-width: 768px) {
  .canon-tour-panel {
    width: 100%;
    height: 50%;
    top: auto;
    /* bottom: 0; */
    bottom: 6rem;
    transform: translateY(150%);
  }

  body.canon-panel-active .canon-tour-panel,
  .canon-tour-panel--visible {
    transform: translateY(0);
  }
}

/* Header */

.canon-tour-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.canon-tour-panel__title {
  margin: 0;
  margin-bottom: 0.5rem;
}

.canon-tour-panel__subtitle {
  margin: 0;
}

.canon-tour-panel__close {
  width: 44px;
  height: 44px;
  padding: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Align content to the right (icon stays right, text expands left) */
  flex-shrink: 0;
  background-color: var(--color-dark-green);
  color: var(--color-sand);
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.2s ease, padding 0.2s ease, left 0.2s ease;
  position: absolute;
  right: calc(100% - 1rem); /* Position button to the left of panel edge */
  top: 1rem;
  display: none;
}

.canon-tour-panel__close svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    order: 2; /* Icon appears after text (visually on the right) */
  }

@media (min-width: 769px) {
  .canon-tour-panel__close {
    display: flex;
  }
}

.canon-tour-panel__close:hover {
  width: auto;
  min-width: 44px;
  padding: 12px var(--canon-spacing);
}

/* Exit Tour text - hidden by default, shown on hover on desktop only */

.canon-tour-panel__close-text {
  opacity: 0;
  margin-right: var(--canon-spacing-sm); /* Text to left of icon */
  transition: opacity var(--canon-transition-duration) ease;
  pointer-events: none;
  display: none;
  order: 1; /* Text appears before icon (visually on the left) */
}

/* Desktop only: show text on hover */

@media (min-width: 769px) {
  .canon-tour-panel__close:hover .canon-tour-panel__close-text {
    opacity: 1;
    display: block;
  }
}

/* Mobile: never show text, keep button simple */

@media (max-width: 768px) {
  .canon-tour-panel__close-text {
    display: none !important;
  }
}

/* Content */

.canon-tour-panel__content {
  flex: 1;
  overflow-y: auto;
  /* * + * {
    margin-bottom: 1rem;
  } */
}

.canon-tour-panel__image {
  width: 100%;
  object-fit: cover;
}

.canon-tour-panel__features-title,
.canon-tour-panel__details-title {
  /* font-size: var(--size-step-0);
  font-family: var(--font-base);
  text-transform: uppercase;
  font-weight: var(--font-bold); */
      font-family: var(--font-base);
        font-weight: var(--font-semibold);
        font-size: 16px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
}

.canon-tour-panel__description {
  margin: 0;
}

/* Details */

.canon-tour-panel__details {
  /* display: grid; */
  /* grid-template-columns: 1fr 1fr; */
  /* margin: 1rem 0; */
}

.canon-tour-panel__detail-item {
  display: flex;
  flex-direction: column;
}

.canon-tour-panel__detail-label {
  /* text-transform: uppercase; */
  /* font-weight: var(--font-semibold); */
}

/* Features */

.canon-tour-panel__features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Stats */

.canon-tour-panel__stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.canon-tour-panel__stat-item {
  display: flex;
  flex-direction: column;
}

/* Gallery */

.canon-tour-panel__gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.canon-tour-panel__gallery-image {
  width: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* Panorama Embed */

.canon-tour-panel__panorama-embed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.canon-tour-panel__panorama-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.canon-tour-panel__panorama-title {
  font-weight: 600;
}

.canon-tour-panel__panorama-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: var(--color-dark-green);
  color: var(--color-sand);
  border: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.canon-tour-panel__panorama-fullscreen svg {
    width: 24px;
    height: 24px;
  }

.canon-tour-panel__panorama-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  position: relative;
  background: var(--color-dark-green);
  overflow: hidden;
}

/* Pannellum needs explicit dimensions */

.canon-tour-panel__panorama-container .pnlm-container {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.panorama-loading-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-sand);
}

.panorama-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sand);
  background: var(--color-dark-green);
}

/* Actions */

.canon-tour-panel__actions {
  display: flex;
}

.canon-tour-panel__action {
  border: none;
  cursor: pointer;
}

.canon-tour-panel__details-table {
  width: 100%;
}

/* ==========================================================================
   Tour System CSS - Structural Only
   ========================================================================== */

/* Tour Blocker - Blocks canvas interactions during tour */

.canon-tour-blocker {
  position: absolute;
  inset: 0;
  z-index: 5; /* Above canvas, below tour UI */
  pointer-events: none;
}

body.canon-tour-active .canon-tour-blocker {
  pointer-events: auto;
  cursor: default;
}

/* Tour Launcher Button */

.canon-tour-launcher {
  border: none;
}

.canon-tour-launcher__icon {
  display: none;
}

.canon-tour-launcher__text {
  white-space: nowrap;
}

/* Tour Controls Container */

.tour-controls-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: var(--canon-z-tooltip);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

/* @media screen(md) {
  .tour-controls-container {
    left: 20px;
  }
} */

/* Visible when tour is active */

body.canon-tour-active .tour-controls-container,
body.canon-tour-active .tour-controls-container.hidden {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.5s;
}

/* Tour Button Container */

.tour-button-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Tour Control Buttons */

.tour-control-btn {
  border: none;
  cursor: pointer;
}

/* Tour Progress Container */

.tour-progress-container {
  display: flex;
  align-items: center;
  /* gap: 8px; */
  gap: 0;
}

/* Tour Progress Steps */

.tour-progress__step {
  display: flex;
  align-items: center;
  position: relative;
}

.tour-progress__circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  
  background-color: var(--color-pink);
    color: var(--color-dark-green);
}

.tour-progress__circle:hover {
  transform: scale(1.1);
}

/* Progress circle states - structure only, theming via theme layer */

.tour-progress__circle--completed,
.tour-progress__circle--current,
.tour-progress__circle--future {
  /* Theme styles applied externally */
}

.tour-progress__circle--completed {
  
  background-color: var(--color-dark-green);
  color: var(--color-yellow);
}

.tour-progress__circle--current {
  background-color: var(--color-yellow);
    color: var(--color-clay);
}

.tour-progress__line {
  width: 16px;
  height: 2px;
  /* margin: 0 4px; */
  margin: 0;
  transition: background 0.3s ease;
}

/* Progress line states - structure only */

.tour-progress__line--completed,
.tour-progress__line--active,
.tour-progress__line--future {
  /* Theme styles applied externally */
  background-color: var(--color-dark-green);
}

/* Tour Panel Content Transitions */

.canon-tour-panel__content {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.canon-tour-panel__content.fading-out {
  opacity: 0;
}

.canon-tour-panel__content.fading-in {
  opacity: 1;
}

/* Content Section Animations */

.content-section,
.tour-panel-stats,
.tour-panel-gallery,
.tour-panel-description {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.content-section.hidden,
.tour-panel-stats.hidden,
.tour-panel-gallery.hidden,
.tour-panel-description.hidden {
  opacity: 0;
  transform: translateY(20px);
}

/* Mobile Responsive */

@media (max-width: 768px) {
  .tour-controls-container {
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    gap: 8px;
  }

  .tour-progress__circle {
    width: 20px;
    height: 20px;
  }

  .tour-progress__line {
    width: 12px;
    margin: 0 2px;
  }

  body.canon-tour-active .tour-controls-container {
transform: translateX(-50%);
  }
}

/* ==========================================================================
   Loading Placeholders
   Progressive image loading and skeleton placeholder styles
   ========================================================================== */

/* Progressive Image Container */

.progressive-image-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.progressive-image-container--16-9 {
	aspect-ratio: 16/9;
}

.progressive-image-container--4-3 {
	aspect-ratio: 4/3;
}

.progressive-image-container--1-1 {
	aspect-ratio: 1/1;
}

/* Progressive Image Placeholder */

.progressive-image-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.progressive-image-placeholder--hidden {
	opacity: 0;
}

/* Progressive Image */

.progressive-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s ease;
	z-index: 2;
}

.progressive-image--loaded {
	opacity: 1;
}

/* Gallery Placeholder */

.gallery-placeholder {
	display: grid;
	gap: 8px;
	width: 100%;
}

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

.gallery-placeholder--3-col {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-placeholder--4-col {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-placeholder__item {
	aspect-ratio: 1/1;
	overflow: hidden;
}

/* Content Skeleton */

.content-skeleton {
	padding: 16px;
}

.content-skeleton__image {
	width: 100%;
	height: 200px;
	margin-bottom: 16px;
	overflow: hidden;
}

.content-skeleton__title {
	height: 24px;
	margin-bottom: 8px;
	width: 70%;
	animation: skeleton-pulse 2s infinite;
}

.content-skeleton__line {
	height: 16px;
	margin-bottom: 4px;
	animation: skeleton-pulse 2s infinite;
}

.content-skeleton__line--full {
	width: 100%;
}

.content-skeleton__line--80 {
	width: 80%;
}

.content-skeleton__line--70 {
	width: 70%;
}

.content-skeleton__line--50 {
	width: 50%;
}

.content-skeleton__line--75 {
	width: 75%;
}

.content-skeleton__line--85 {
	width: 85%;
}

.content-skeleton__line--90 {
	width: 90%;
}

.content-skeleton__line--small {
	height: 14px;
}

.content-skeleton__text,
.content-skeleton__stats,
.content-skeleton__features {
	margin-bottom: 12px;
}

.content-skeleton__stats {
	margin-bottom: 16px;
}

.content-skeleton__stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.content-skeleton__stat-item {
	height: 40px;
	animation: skeleton-pulse 2s infinite;
}

/* Loading Error State */

.progressive-image-error {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* Skeleton Animation */

@keyframes skeleton-pulse {
	0% { opacity: 1; }
	50% { opacity: 0.6; }
	100% { opacity: 1; }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes canonFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes canonFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* LEGACY: canonToastPulseGlow - not used
@keyframes canonToastPulseGlow {
  0% { box-shadow: 0 0 5px rgba(255,255,255,0.5); }
  50% { box-shadow: 0 0 15px rgba(255,255,255,0.8); }
  100% { box-shadow: 0 0 5px rgba(255,255,255,0.5); }
}
*/

@keyframes canonToastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes canonToastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

@keyframes canonExploreButtonFadeIn {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.canon-hidden {
  display: none !important;
}

.canon-visible {
  display: block !important;
}

.canon-transparent {
  opacity: 0 !important;
}

.canon-opaque {
  opacity: 1 !important;
}

.canon-fade-in {
  animation: canonFadeIn 0.3s ease-out;
}

.canon-fade-out {
  animation: canonFadeOut 0.3s ease-out;
}

/* LEGACY: Utility Classes - not used
.curved-border {
  border-radius: var(--canon-radius);
}

.curved-border-small {
  border-radius: var(--canon-radius-small);
}

.curved-border-large {
  border-radius: var(--canon-radius-large);
}
*/

/* Button fade-in utility */

.canon-explore-button--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.canon-explore-button--fade-in {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: canonExploreButtonFadeIn var(--canon-transition-duration-slow) var(--canon-transition-easing);
}

/* LEGACY: Delayed hide utility - not used
.delayed-hide {
  transition: opacity var(--canon-transition-duration) var(--canon-transition-delay);
}
*/

/* ==========================================================================
   Display Utilities
   ========================================================================== */

.u-display-none {
  display: none !important;
}

.u-display-block {
  display: block !important;
}

.u-display-flex {
  display: flex !important;
}

.u-display-inline-block {
  display: inline-block !important;
}

/* ==========================================================================
   Visibility & Interaction Utilities
   ========================================================================== */

.u-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.u-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.u-interactive {
  pointer-events: auto !important;
  cursor: pointer;
}

.u-non-interactive {
  pointer-events: none !important;
}

.js-hidden {
  display: none !important;
}

.js-visible {
  display: block !important;
}

/* ==========================================================================
   Positioning Utilities
   ========================================================================== */

.u-absolute-cover {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.u-fixed-cover {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.u-pos-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* ==========================================================================
   Transform Utilities
   ========================================================================== */

.u-center-transform {
  transform: translate(-50%, -50%) !important;
}

.u-center-x {
  transform: translateX(-50%) !important;
}

.u-center-y {
  transform: translateY(-50%) !important;
}

.u-hover-scale:hover {
  transform: translate(-50%, -50%) scale(1.05) !important;
}

.u-scale-105 {
  transform: scale(1.05) !important;
}

/* ==========================================================================
   Transition Utilities
   ========================================================================== */

.no-transition {
  transition: none !important;
}

/* ==========================================================================
   Panorama 360° Viewer Styles
   Enhanced panorama viewer with fullscreen support
   ========================================================================== */

/* Panorama fullscreen container */

.panorama-360-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--viewport-height, 100vh);
  z-index: var(--canon-z-modal);
  display: flex;
  flex-direction: column;
}

/* Panorama UI overlay */

.panorama-360-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Panorama title */

.panorama-360-title {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
}

/* Panorama close button */

.panorama-360-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.panorama-360-close:hover {
  transform: scale(1.1);
}

/* Panorama instructions */

.panorama-360-instructions {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  opacity: 0.8;
}

/* Panorama embedded container display */

.panorama-360-container {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--viewport-height, 100vh);
  z-index: var(--canon-z-modal);
  visibility: visible;
  overflow: hidden;
}

.panorama-360-container.is-hidden {
  display: none;
}

/* Simple fullscreen container */

#simple-panorama-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--viewport-height, 100vh);
  /* z-index: var(--canon-z-modal); */
  display: flex;
  flex-direction: column;
  background: #000;
  z-index: 1000;
}

/* When launched from 3D viewer - simpler layout like panorama-360-block */

/* .panorama-360-fullscreen--from-3d {
  
} */

/* From 3D viewer: full height panorama container (no header) */

.panorama-360-fullscreen--from-3d .panorama-content-container {
  height: var(--viewport-height, 100vh);
  margin-top: 0;
}

/* From 3D viewer: round close button matching panorama-360-block */

.panorama-360-fullscreen__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--color-light, #fff);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.panorama-360-fullscreen__close:hover {
  transform: scale(1.1);
}

.panorama-360-fullscreen__close svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: var(--color-dark-green, #333);
}

@media (min-width: 48em) {
  .panorama-360-fullscreen__close {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    top: 1.5rem;
    right: 1.5rem;
  }

  .panorama-360-fullscreen__close svg {
    width: 24px;
    height: 24px;
  }
}

/* Fullscreen header */

.panorama-fullscreen-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: var(--canon-z-tooltip);
}

.panorama-fullscreen-title {
  margin: 0;
}

.panorama-fullscreen-close-btn {
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.panorama-fullscreen-close-btn:hover {}

/* Panorama content container */

.panorama-content-container {
  flex: 1;
  width: 100%;
  height: calc(var(--viewport-height, 100vh) - 60px);
  margin-top: 60px;
}

/* Canvas styles for panorama */

.panorama-360-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.panorama-360-canvas.is-dragging {
  cursor: grabbing;
}

/* ==========================================================================
   Unified Debug Panel - Live Camera and Intro Debug Controls
   ========================================================================== */

/* Main Debug Panel Container - Top Right */

.canon-debug-panel {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: var(--canon-z-debug);
    padding: 0;
    min-width: 280px;
    max-width: 320px;
    pointer-events: auto;
}

/* Section Headers */

.canon-debug-panel__section {
    padding: var(--canon-spacing-sm);
}

.canon-debug-panel__header {
    margin-bottom: var(--canon-spacing-xs);
    padding-bottom: var(--canon-spacing-xs);
}

/* Live Camera Section */

.canon-debug-panel__section--camera {}

.canon-debug-panel__section--camera .canon-debug-panel__header {}

.canon-debug-panel__camera-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.canon-debug-panel__camera-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.canon-debug-panel__camera-label {
    min-width: 60px;
}

.canon-debug-panel__camera-value {
    flex: 1;
    text-align: right;
}

/* Intro Debug Section */

.canon-debug-panel__section--intro {}

.canon-debug-panel__section--intro .canon-debug-panel__header {}

.canon-debug-panel__buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.canon-debug-btn {
    padding: 6px 8px;
    cursor: pointer;
    transition: all var(--canon-transition-fast);
    white-space: nowrap;
}

.canon-debug-btn:hover {}

.canon-debug-btn:active {}

.canon-debug-btn--full {
    grid-column: 1 / -1;
}

/* Debug Hover Tooltip */

.debug-hover-tooltip {
    position: fixed;
    padding: 8px 12px;
    pointer-events: none;
    z-index: 10000;
    display: none;
    max-width: 300px;
    word-wrap: break-word;
}

.debug-hover-tooltip--visible {
    display: block;
}

/* Tooltip Debug Panel */

.tooltip-debug-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    max-height: 80vh;
    padding: 16px;
    z-index: 1000000;
    overflow-y: auto;
}

/* Debug Toggle Button */

.canon-debug-toggle {
    position: fixed;
    bottom: 10px;
    right: 10px;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    z-index: 10000;
}

.canon-debug-toggle:hover {}

/* Responsive adjustments */

@media (max-width: 768px) {
    .canon-debug-panel {
        top: auto;
        bottom: 10px;
        right: 10px;
        min-width: 260px;
    }

    .canon-debug-btn {
        padding: 4px 6px;
    }
}

.visible{
  visibility: visible;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.col-span-1{
  grid-column: span 1 / span 1;
}

.col-span-12{
  grid-column: span 12 / span 12;
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.mb-l{
  margin-bottom: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.mb-m{
  margin-bottom: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
}

.mb-s{
  margin-bottom: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
}

.mb-xl{
  margin-bottom: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.mt-l{
  margin-top: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.mt-m{
  margin-top: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
}

.mt-s{
  margin-top: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.h-full{
  height: 100%;
}

.w-full{
  width: 100%;
}

.flex-shrink{
  flex-shrink: 1;
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize{
  resize: both;
}

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

.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

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

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

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

.items-center{
  align-items: center;
}

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

.gap-l{
  gap: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.gap-m{
  gap: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
}

.gap-xs{
  gap: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
}

.overflow-hidden{
  overflow: hidden;
}

.rounded{
  border-radius: 0.25rem;
}

.bg-clay{
  background-color: #ab4f42;
}

.bg-cream{
  background-color: #f0e9de;
}

.bg-dark{
  background-color: #000000;
}

.bg-dark-blue{
  background-color: #0f2b5e;
}

.bg-dark-green{
  background-color: #36544f;
}

.bg-gray{
  background-color: #D9D9D9;
}

.bg-gray-dark{
  background-color: #B9B9B9;
}

.bg-gray-light{
  background-color: #F1F1F1;
}

.bg-light{
  background-color: #FFFFFF;
}

.bg-light-blue{
  background-color: #cfebeb;
}

.bg-light-green{
  background-color: #a3ccab;
}

.bg-pink{
  background-color: #ff9487;
}

.bg-sand{
  background-color: #e5d9c7;
}

.bg-yellow{
  background-color: #ffd654;
}

.object-cover{
  object-fit: cover;
}

.object-bottom{
  object-position: bottom;
}

.p-l{
  padding: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.p-xl{
  padding: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.p-xs-s{
  padding: clamp(0.875rem, 0.65rem + 1.11vw, 1.5rem);
}

.py-l{
  padding-top: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
  padding-bottom: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.pb-l{
  padding-bottom: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
}

.pb-s{
  padding-bottom: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
}

.pb-xl{
  padding-bottom: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.pb-xs{
  padding-bottom: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
}

.pt-m{
  padding-top: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
}

.pt-xl{
  padding-top: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.font-heading{
  font-family: larken, sans-serif;
}

.text-step-1{
  font-size: clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem);
}

.text-step-4{
  font-size: clamp(2.5rem, 1.95rem + 2.67vw, 4rem);
}

.uppercase{
  text-transform: uppercase;
}

.no-underline{
  text-decoration-line: none;
}

.outline{
  outline-style: solid;
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

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

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.bg-dark{
  background-color: #000000;
}

.bg-gray-dark{
  background-color: #B9B9B9;
}

.bg-gray{
  background-color: #D9D9D9;
}

.bg-gray-light{
  background-color: #F1F1F1;
}

.bg-light{
  background-color: #FFFFFF;
}

.bg-dark-green{
  background-color: #36544f;
}

.bg-dark-blue{
  background-color: #0f2b5e;
}

.bg-clay{
  background-color: #ab4f42;
}

.bg-yellow{
  background-color: #ffd654;
}

.bg-pink{
  background-color: #ff9487;
}

.bg-light-blue{
  background-color: #cfebeb;
}

.bg-light-green{
  background-color: #a3ccab;
}

.bg-sand{
  background-color: #e5d9c7;
}

.bg-cream{
  background-color: #f0e9de;
}

.color-dark{
  color: #000000;
}

.color-gray-dark{
  color: #B9B9B9;
}

.color-gray{
  color: #D9D9D9;
}

.color-gray-light{
  color: #F1F1F1;
}

.color-light{
  color: #FFFFFF;
}

.color-dark-green{
  color: #36544f;
}

.color-dark-blue{
  color: #0f2b5e;
}

.color-clay{
  color: #ab4f42;
}

.color-yellow{
  color: #ffd654;
}

.color-pink{
  color: #ff9487;
}

.color-light-blue{
  color: #cfebeb;
}

.color-light-green{
  color: #a3ccab;
}

.color-sand{
  color: #e5d9c7;
}

.color-cream{
  color: #f0e9de;
}

/* Display heading (H0) */

/* Heading utilities with full styling */

.font-h1 {
    font-family: var(--font-heading);
    font-weight: var(--font-light);
    font-size: var(--size-step-4);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

.font-h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-light);
    font-size: var(--size-step-3);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

.font-h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-light);
    font-size: var(--size-step-2);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

/* Size utilities (just size, no other properties) */

.size-step-5 { font-size: var(--size-step-5); }

.size-step-4 { font-size: var(--size-step-4); }

.size-step-3 { font-size: var(--size-step-3); }

.size-step-0 { font-size: var(--size-step-0); }

.size-step-00 { font-size: var(--size-step-00); }

.size-step--1 { font-size: var(--size-step--1); }

/* Font family utilities */

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

/* Font weight utilities */

/* Text transform utilities */

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

/* Navigation & Button typography */

.font-navigation,
  .font-eyebrow {
    font-family: var(--font-base);
    font-weight: var(--font-semibold);
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

/* Navigation & Button typography */

.font-navigation.font-medium,
  .font-eyebrow.font-medium {
    /* font-family: var(--font-base); */
    font-weight: var(--font-regular);
    /* font-size: 16px; */
    /* letter-spacing: 0.1em; */
    /* text-transform: uppercase; */
  }

.font-big-eyebrow {
    font-family: var(--font-base);
    font-weight: var(--font-semibold);
    font-size: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

:where(.font-eyebrow) {
    margin-top: 0;
  }

/* Body text variants */

/* Block editor preview overrides (inert on the front end) */

/* ==========================================================================
   BLOCK EDITOR PREVIEW OVERRIDES
   Loaded into the Gutenberg editor iframe via add_editor_style( global.css ).
   These selectors only exist in the editor, so they are inert on the front end.
   ========================================================================== */

/* Blocks span the full editor width and stay responsive. The block's own
   .wrapper still constrains the content, matching the front end. */

.editor-styles-wrapper .wp-block {
	max-width: none;
}

/* The writing-surface colour fix lives in src/css/editor.css, which is a
   separate stylesheet loaded only into the editor. It cannot live here: this
   file compiles into global.css, which is also the front-end stylesheet, so a
   `body` rule would change the site itself. */

/* ACF block previews are non-interactive: clicking anywhere selects the block,
   and you edit its fields via the block toolbar pencil → the sidebar. Without
   this, links/buttons/sliders inside the preview swallow the click. */

.wp-block[data-type^="acf/"] * {
	pointer-events: none;
}

/* Debug styles - only in development */

/* @import '../css-utils/debug.css'; */

/* @import '../css-utils/a11y-check.css'; */

/* cookie yes banner should not be over model */

.cky-btn-revisit-wrapper {
    z-index: 10 !important;
}

@media (min-width: 330px){

  .sm\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 760px){

  .md\:sticky{
    position: sticky;
  }

  .md\:top-\[var\(--navTotalHeight\)\]{
    top: var(--navTotalHeight);
  }

  .md\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .md\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .md\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .md\:col-start-2{
    grid-column-start: 2;
  }

  .md\:col-start-6{
    grid-column-start: 6;
  }

  .md\:row-span-2{
    grid-row: span 2 / span 2;
  }

  .md\:mb-zero{
    margin-bottom: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem);
  }

  .md\:block{
    display: block;
  }

  .md\:flex{
    display: flex;
  }

  .md\:grid{
    display: grid;
  }

  .md\:hidden{
    display: none;
  }

  .md\:w-1\/2{
    width: 50%;
  }

  .md\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:flex-col{
    flex-direction: column;
  }

  .md\:items-center{
    align-items: center;
  }

  .md\:justify-center{
    justify-content: center;
  }

  .md\:gap-l{
    gap: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
  }

  .md\:pb-zero{
    padding-bottom: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem);
  }

  .md\:pr-m{
    padding-right: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
  }

  .md\:text-center{
    text-align: center;
  }
  .md\:font-h0 {
    font-family: var(--font-heading);
    font-weight: var(--font-light);
    font-size: var(--size-step-5);
    letter-spacing: -0.02em;
    line-height: 1;
    hyphens: auto;
  }
}

@media (min-width: 1230px){

  .lg\:order-2{
    order: 2;
  }

  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .lg\:col-start-2{
    grid-column-start: 2;
  }

  .lg\:col-start-3{
    grid-column-start: 3;
  }

  .lg\:col-start-6{
    grid-column-start: 6;
  }

  .lg\:col-start-7{
    grid-column-start: 7;
  }

  .lg\:row-span-1{
    grid-row: span 1 / span 1;
  }

  .lg\:row-span-2{
    grid-row: span 2 / span 2;
  }

  .lg\:ms-l{
    margin-inline-start: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
  }

  .lg\:mt-zero{
    margin-top: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem);
  }

  .lg\:block{
    display: block;
  }

  .lg\:inline-block{
    display: inline-block;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:grid{
    display: grid;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:w-1\/3{
    width: 33.333333%;
  }

  .lg\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .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\:flex-col{
    flex-direction: column;
  }

  .lg\:justify-center{
    justify-content: center;
  }

  .lg\:pr-xl{
    padding-right: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
  }
}