/* START - CLARITY THEME LEGACY STYLING */

/* Start - Old Clarity theme tpography.scss declarations */

/* Converted from SCSS to plain CSS.
   NOTE: Replace these CSS variables with your real values if needed:
   - $oe--aqua -> var(--oe--aqua)
   - $oe--blue -> var(--oe--blue)
   - $oe--body -> var(--oe--body)
*/

.heading,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  display: block;
  position: relative;
  font-style: normal;
  word-wrap: break-word;
}

.has-text-color .heading,
.has-text-color h1,
.has-text-color h2,
.has-text-color h3,
.has-text-color h4,
.has-text-color h5,
.has-text-color h6 {
  color: inherit;
}

.heading:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.heading--has-border {
  position: relative;
  padding: 0.54em;
}

.heading--has-border::after {
  content: "";
  height: 0.1em;
  width: 25%;
  background-color: var(--oe--aqua);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Border blue style */
.is-style-border-blue {
  position: relative;
  padding: 0.54em 0;
}

.is-style-border-blue::after {
  content: "";
  height: 0.1em;
  width: 25%;
  background-color: var(--oe--aqua);
  position: absolute;
  bottom: 0;
}

.is-style-border-blue.has-text-align-left::after {
  left: 0;
  transform: translateX(0%);
}

.is-style-border-blue.has-text-align-center::after {
  left: 50%;
  transform: translateX(-50%);
}

.is-style-border-blue.has-text-align-right::after {
  left: 100%;
  transform: translateX(-100%);
}

.is-style-border-blue.block-editor-block-list__block::after {
  top: unset;
}

/* Paragraph weights */
p {
  font-weight: 300;
}

p strong {
  font-weight: 500;
}

/* Heading sizes */
.heading--large,
.has-h-1-large-font-size {
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

@media (min-width: 600px) {
  .heading--large,
  .has-h-1-large-font-size {
    font-size: 3rem;
  }
}

@media (min-width: 968px) {
  .heading--large,
  .has-h-1-large-font-size {
    font-size: 3.75rem;
  }
}

h1,
.heading--1,
.has-h-1-font-size {
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: 0.2px;
  font-weight: 500;
}

@media (min-width: 968px) {
  h1,
  .heading--1,
  .has-h-1-font-size {
    font-size: 3rem;
  }
}

h2,
.heading--2,
.has-h-2-font-size {
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: 0.2px;
  font-weight: 500;
}

@media (min-width: 968px) {
  h2,
  .heading--2,
  .has-h-2-font-size {
    font-size: 2.5rem;
  }
}

h3,
.heading--3,
.has-h-3-font-size {
  font-size: 2rem;
  line-height: 1.23;
  letter-spacing: 0.2px;
}

@media (min-width: 968px) {
  h3,
  .heading--3,
  .has-h-3-font-size {
    font-size: 2.25rem;
  }
}

h4,
.heading--4,
.has-h-4-font-size {
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: 0.2px;
}

@media (min-width: 968px) {
  h4,
  .heading--4,
  .has-h-4-font-size {
    font-size: 1.75rem;
  }
}

h5,
.heading--5,
.has-h-5-font-size {
  font-size: 1.25rem;
  line-height: 1.34;
  letter-spacing: 0.1px;
}

@media (min-width: 968px) {
  h5,
  .heading--5,
  .has-h-5-font-size {
    font-size: 1.5rem;
  }
}

h6,
.heading--6,
.has-h-6-font-size {
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0.1px;
}

@media (min-width: 968px) {
  h6,
  .heading--6,
  .has-h-6-font-size {
    font-size: 1.25rem;
  }
}

/* Non-standard HTML element, kept as-is */
h7,
.heading--7,
.has-h-7-font-size {
  font-size: 1.115rem;
  line-height: 1.15;
}

@media (min-width: 968px) {
  h7,
  .heading--7,
  .has-h-7-font-size {
    font-size: 1.125rem;
  }
}

.extra-large-font-size,
.has-extra-large-font-size {
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0.1px;
}

@media (min-width: 968px) {
  .extra-large-font-size,
  .has-extra-large-font-size {
    font-size: 1.25rem;
  }
}

.large-font-size,
.has-large-font-size {
  font-size: 1.115rem;
  line-height: 1.6;
  letter-spacing: 0.1px;
}

@media (min-width: 968px) {
  .large-font-size,
  .has-large-font-size {
    font-size: 1.125rem;
  }
}

.eyebrow-font-size,
.has-eyebrow-font-size {
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.1px;
}

/* Alignment helpers */
.align-center,
.has-text-align-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

/* Text transforms */
.lowercase {
  text-transform: none;
}

.uppercase {
  text-transform: uppercase;
}

.underline {
  text-decoration: underline;
}

/* Font weight utility classes */
.font-weight--100 { font-weight: 100; }
.font-weight--200 { font-weight: 200; }
.font-weight--300 { font-weight: 300; }
.font-weight--400 { font-weight: 400; }
.font-weight--500 { font-weight: 500; }
.font-weight--600 { font-weight: 600; }
.font-weight--700 { font-weight: 700; }
.font-weight--800 { font-weight: 800; }
.font-weight--900 { font-weight: 900; }

/* HR styles */
.hr {
  width: 12rem;
  margin: 2rem 0 2.75rem;
  border: 2px solid var(--oe--body);
}

.hr--aqua {
  border-color: var(--oe--aqua);
}

.hr--blue {
  border-color: var(--oe--blue);
}

/* Aqua tick list style */
ul.is-style-aqua-tick {
  padding: 0.5rem 0 0.5rem 3.5rem;
  line-height: 2.5;
  list-style: none;
}

ul.is-style-aqua-tick li {
  position: relative;
  line-height: 1.4;
  padding: 10px 0;
  font-weight: 300;
  list-style: none;
}

ul.is-style-aqua-tick li::before,
ul.is-style-aqua-tick li::after {
  content: "";
    position: absolute;
    top: 25px;
    left: -1.8em;
    transform: translate(0, -52%);
    background-color: var(--oe-color-sky-blue);
    border-radius: var(--oe-border-radius-small);
    width: 1.2rem;
    height: 1.2rem;
}

ul.is-style-aqua-tick li::after {
  background-image: url(/wp-content/uploads/check.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/* End - Old Clarity theme tpography.scss declarations */

.wp-block-heading,
.entry-content .wp-block-heading {
	font-weight: 500;
	margin-bottom: var(--oe-spacing-medium);
}

/* Start - Old Clarity theme _container.scss declarations */
/* Converted from SCSS to plain CSS */

.container,
.wp-block-columns {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  max-width: 1272px;
}

.container--small,
.wp-block-columns--small {
  max-width: 840px;
}

.entry-content {
  width: 90%;
  max-width: 840px;
  margin: 0 auto;
}

.entry-content img.alignleft {
  float: left;
  margin: 0 2.5em 0.5em 0;
}

.entry-content img.alignright {
  float: right;
  margin: 0 0 0.5em 2.5em;
}

.break-out,
.wp-block-group {
  position: relative;
  margin-left: -50vw !important;
  max-width: 100vw !important;
  width: 100vw !important;
  left: 50% !important;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .break-out,
  .wp-block-group {
    max-width: calc(100vw - 12px) !important;
  }
}

/* .wp-block-column &  => when inside a .wp-block-column */
.wp-block-column .break-out,
.wp-block-column .wp-block-group {
  margin-left: auto !important;
  max-width: none !important;
  width: auto !important;
  left: auto !important;
}

.wp-block-columns {
  position: relative;
  padding: 0 5vw;
  max-width: 100vw;
  margin-left: -50vw;
  width: 100vw;
  left: 50%;
}

@media (min-width: 1320px) {
  .wp-block-columns {
    margin-left: -636px;
    max-width: 1272px;
    padding: 0;
  }
}

.position-relative {
  position: relative;
}
/* End - Old Clarity theme _container.scss declarations */

/* Start - Old Clarity theme _buttons.scss declarations - many have been removed as 
they were overwriting other css */
/* Converted from SCSS to plain CSS */


/* Arrow button */
.button--arrow,
.button.button--arrow {
  padding: 0;
  background-color: transparent;
  align-items: center;
  font-weight: bold;
}

.button--arrow::after {
  content: "";
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: right center;
  background-position: center;
  transition: transform 0.3s ease;
  width: 1em;
  height: 1em;
  right: -0.5em;
  background-image: url(assets/svg/icon-arrow.svg);
}

.button--arrow:hover,
.button--arrow:focus,
.button.button--arrow:hover,
.button.button--arrow:focus {
  color: var(--oe--aqua);
  background-color: transparent;
  text-decoration: underline;
}

.button--arrow:hover::after,
.button--arrow:focus::after {
  transform: translateX(0.8em);
}

/* Arrow back button */
.button--arrow-back::after {
  content: none;
  display: none;
}

.button--arrow-back::before {
  content: "";
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  background-position: center;
  transition: transform 0.3s ease;
  width: 1em;
  height: 1em;
  left: -0.5em;
  background-image: url(assets/svg/icon-arrow.svg);
}

.button--arrow-back:hover::before,
.button--arrow-back:focus::before {
  transform: rotate(180deg) translateX(0.8em);
}

/* End - Old Clarity theme _buttons.scss declarations */

/* END - CLARITY THEME LEGACY STYLING */



:root {
	/* Color palette START numbers match colours as per brand guidelines https://oxecon.sharepoint.com/sites/marketingmaterials/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2Fmarketingmaterials%2FShared%20Documents%2F7%2E%20Branding%2FOEF%5Fstyle%5Fguide%5FV5%2Epdf&parent=%2Fsites%2Fmarketingmaterials%2FShared%20Documents%2F7%2E%20Branding&p=true&ga=1 */
	--oe-color-primary-1: rgba(0,52,105,1); /* OE Dark Blue #003469 */
	--oe-color-primary-2: rgba(123,124,119,1); /* OE Grey #7b7c77 */
	--oe-color-primary-3: rgba(241,239,237,1); /* OE Light Grey #f1efed */
	--oe-color-primary-4: rgba(255,255,255,1); /* OE Pure White #ffffff */
	--oe-color-secondary-5: rgba(232,236,244,1); /* OE Light Blue #e8ecf4 */
	--oe-color-secondary-6: rgba(209,162,30,1); /* OE Gold #d1a21e */
	--oe-color-secondary-7: rgba(110,145,160,1); /* OE Grey Blue #6e91a0 */
	--oe-color-secondary-8: rgba(67,110,172,1); /* OE Royal Blue #436eac */
	--oe-color-secondary-9: rgba(0,173,220,1); /* OE Turquoise Blue #00addc */
	--oe-color-muted: rgba(244,247,250,1); /* OE Muted Grey #f4f7fa; */

	/* Shade Palette Primary 1 */
	--oe-color-primary-1-transparent: rgba(0,52,105,0);
	--oe-color-primary-1-50: #e9fbff;
	--oe-color-primary-1-100: #cef5ff;
	--oe-color-primary-1-200: #a7efff;
	--oe-color-primary-1-300: #6beaff;
	--oe-color-primary-1-400: #26d9ff;
	--oe-color-primary-1-500: #00b5ff;
	--oe-color-primary-1-600: #008bff;
	--oe-color-primary-1-700: #0070ff;
	--oe-color-primary-1-800: #0060e6;
	--oe-color-primary-1-900: #0056b3;
	--oe-color-primary-1-950: #003469; 

	/* Shade Palette Primary 2 */

	--oe-color-secondary-9-50: #ebfdff;
	--oe-color-secondary-9-100: #cef8ff;
	--oe-color-secondary-9-200: #a2efff;
	--oe-color-secondary-9-300: #63e1fd;
	--oe-color-secondary-9-400: #1cc8f4;
	--oe-color-secondary-9-500: #00addc;
	--oe-color-secondary-9-600: #0388b7;
	--oe-color-secondary-9-700: #0a6d94;
	--oe-color-secondary-9-800: #125878;
	--oe-color-secondary-9-900: #144965;
	--oe-color-secondary-9-950: #063046; 

    /* Color palette END */


    /* OE Color Palette START - Design System https://chatgpt.com/c/6899dfc4-42c8-8331-9a01-7db82dd2375e *?

	  /* Base colours */
	  --oe-color-primary: #00addc;
	  --oe-color-secondary: #003469;
	  --oe-color-secondary-muted: #E8ECF4;
	  --oe-color-muted: #f4f7fa;
	  --oe-color-trans-light-10: rgba(255,255,255,0.1);
	  --oe-color-trans-dark-10: rgba(0,0,0,0.1);
	  --oe-color-extra-dark: #001c38;
	  /* Neutral */
	  --oe-color-neutral: var(--oe-color-cool-grey);
	  .oe-dark, .oe-section-muted, .oe-background-muted, .oe-background-default {
		--oe-color-neutral: var(--oe-color-cool-grey);
	  }
	  .oe-light, .oe-section-primary, .oe-background-primary {
		--oe-color-neutral: rgba(255,255,255,0.8);
	  }
	  /* Base */
	  --oe-color-base: #222222;
	  .oe-dark, .oe-section-muted, .oe-background-muted, .oe-background-default {
		--oe-color-base: #222222;
	  }
	  .oe-light, .oe-section-primary, .oe-background-primary {
		--oe-color-base: #FFFFFF;
	  }
	  /* Border Outline */
	  .oe-light.oe-border-outline, .oe-light .oe-border-outline,
	  .oe-section-primary .oe-border-outline {
		border: 1px solid rgba(39,91,150,0.56);
	  }
	  /* Trans Overlay */
	  --oe-color-background-trans-overlay: rgba(0,0,0,0.05);
	  .oe-light, .oe-section.oe-section-primary {
		--oe-color-background-trans-overlay: rgba(255,255,255,0.05);
	  }
	  .oe-section.oe-section-muted, .oe-background-muted {
		--oe-color-background-trans-overlay: rgba(255,255,255,0.65);
	  }
	  .oe-section, .oe-background-default {
		--oe-color-background-trans-overlay: var(--oe-color-muted);
	  }
	  --oe-color-primary-5: #E8F3FA;

	  /* Component colours */
	  --oe-color-link: var(--oe-color-primary);
	  --oe-color-link-hover: var(--oe-color-heritage-blue);
 
	  /* Primary tints (light) */
	  --oe-color-primary-light-10: #19b5df;
	  --oe-color-primary-light-20: #33bde3;
	  --oe-color-primary-light-30: #4cc5e6;
	  --oe-color-primary-light-40: #66cdea;
	  --oe-color-primary-light-50: #7fd6ed;
	  --oe-color-primary-light-60: #99def1;
	  --oe-color-primary-light-70: #b2e6f4;
	  --oe-color-primary-light-80: #cceef8;
	  --oe-color-primary-light-90: #e5f6fb;

	  /* Primary shades (dark) */
	  --oe-color-primary-dark-10: #009bc6;
	  --oe-color-primary-dark-20: #008ab0;
	  --oe-color-primary-dark-30: #00799a;
	  --oe-color-primary-dark-40: #006784;
	  --oe-color-primary-dark-50: #00566e;
	  --oe-color-primary-dark-60: #004558;
	  --oe-color-primary-dark-70: #003342;
	  --oe-color-primary-dark-80: #00222b;
	  --oe-color-primary-dark-90: #001115;

	  /* Secondary tints (light) */
	  --oe-color-secondary-light-10: #194878;
	  --oe-color-secondary-light-20: #335c87;
	  --oe-color-secondary-light-30: #4c7096;
	  --oe-color-secondary-light-40: #6685a5;
	  --oe-color-secondary-light-50: #7f99b4;
	  --oe-color-secondary-light-60: #99adc3;
	  --oe-color-secondary-light-70: #b2c2d2;
	  --oe-color-secondary-light-80: #ccd6e1;
	  --oe-color-secondary-light-90: #e5eaf0;

	  /* Secondary shades (dark) */
	  --oe-color-secondary-dark-10: #002e5e;
	  --oe-color-secondary-dark-20: #002954;
	  --oe-color-secondary-dark-30: #002449;
	  --oe-color-secondary-dark-40: #001f3f;
	  --oe-color-secondary-dark-50: #001a34;
	  --oe-color-secondary-dark-60: #00142a;
	  --oe-color-secondary-dark-70: #000f1f;
	  --oe-color-secondary-dark-80: #000a14;
	  --oe-color-secondary-dark-90: #00050a;

	  /* Muted tints (light) */
	  --oe-color-muted-light-10: #f5f7fa;
	  --oe-color-muted-light-20: #f6f8fb;
	  --oe-color-muted-light-30: #f7f9fb;
	  --oe-color-muted-light-40: #f8fafc;
	  --oe-color-muted-light-50: #f9fbfc;
	  --oe-color-muted-light-60: #fafbfd;
	  --oe-color-muted-light-70: #fbfcfd;
	  --oe-color-muted-light-80: #fcfdfe;
	  --oe-color-muted-light-90: #fdfefe;

	  /* Muted shades (dark) */
	  --oe-color-muted-dark-10: #dbdee1;
	  --oe-color-muted-dark-20: #c3c5c8;
	  --oe-color-muted-dark-30: #aaacaf;
	  --oe-color-muted-dark-40: #929496;
	  --oe-color-muted-dark-50: #7a7b7d;
	  --oe-color-muted-dark-60: #616264;
	  --oe-color-muted-dark-70: #494a4b;
	  --oe-color-muted-dark-80: #303131;
	  --oe-color-muted-dark-90: #181818;

	  /* New Brand Palette 2025 */

	  --oe-color-heritage-blue: #003466 ;
	  --oe-color-sky-blue: #008AC8;
	  --oe-color-cool-grey: #455055;

	/* OE Color Palette END */

	/* Previous theme variables for transition from Luna to GenertePress START */
	--wp--preset--aspect-ratio--square: 1;
    --wp--preset--aspect-ratio--4-3: 4 / 3;
    --wp--preset--aspect-ratio--3-4: 3 / 4;
    --wp--preset--aspect-ratio--3-2: 3 / 2;
    --wp--preset--aspect-ratio--2-3: 2 / 3;
    --wp--preset--aspect-ratio--16-9: 16 / 9;
    --wp--preset--aspect-ratio--9-16: 9 / 16;
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--color--blue: #003469;
    --wp--preset--color--aqua: #00ADDC;
    --wp--preset--color--light-blue: #275A96;
    --wp--preset--color--lighter-blue: #F4F7FA;
    --wp--preset--color--green: #26C485;
    --wp--preset--color--light-grey: #F8F8F8;
    --wp--preset--color--lighter-grey: #FAFAFA;
    --wp--preset--color--body: #494949;
    --wp--preset--color--body-grey: #757575;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
    --wp--preset--gradient--gradient-1: linear-gradient(135deg, #00FFFF 0%, #FF1493 100%);
    --wp--preset--font-size--small: 13px;
    --wp--preset--font-size--medium: 20px;
    --wp--preset--font-size--large: 18px;
    --wp--preset--font-size--x-large: 42px;
    --wp--preset--font-size--h-1-large: 48px;
    --wp--preset--font-size--h-2: 40px;
    --wp--preset--font-size--h-3: 36px;
    --wp--preset--font-size--h-4: 28px;
    --wp--preset--font-size--h-5: 24px;
    --wp--preset--font-size--h-6: 20px;
    --wp--preset--font-size--extra-large: 20.1px;
    --wp--preset--font-size--eyebrow: 14px;
    --wp--preset--spacing--20: 0.44rem;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
	/* Previous theme variables for transition from Luna to GenertePress END */

    /* Width START */

    --oe-width-fixed-5xsmall: 50px;
    --oe-width-fixed-4xsmall: 75px;
    --oe-width-fixed-3xsmall: 100px;
    --oe-width-fixed-2xsmall: 150px;
    --oe-width-fixed-xsmall: 200px;
    --oe-width-fixed-small: 300px;
    --oe-width-fixed-medium: 450px;
    --oe-width-fixed-large: 650px;
    --oe-width-fixed-xlarge: 750px;
    --oe-width-fixed-100: 100%;

    /* Width END */

    /* Font Size START */

    --oe-font-size-2xsmall: 0.6rem;
    --oe-font-size-xsmall: 0.7rem;
    --oe-font-size-small: 0.8rem;
    --oe-font-size-base: 1rem;
    --oe-font-size-medium: 1.2rem;
    --oe-font-size-large: 1.4rem;
    --oe-font-size-xlarge: 2rem;
    --oe-font-size-2xlarge: 3rem;

    /* Font Size END */

    /* Line Height START */

    --oe-line-height-base: 1.05%;
    --oe-line-height-medium: 112%;
    --oe-line-height-medium-large: 125%;
    --oe-line-height-large: 140%;

    /* Line Height END */

    /* Border width START */

    --oe-border-width-medium: 4px;

    /* Border width END */

    /* Radius START */

    --oe-border-radius-none: 0;
    --oe-border-radius-xsmall: 2px;
    --oe-border-radius-small: 4px;
    --oe-border-radius-base: 8px;
    --oe-border-radius-large: 16px;
    --oe-border-radius-badge: 500px;

    /* Radius END */

    /* Spacing START */

    --oe-spacing-5xsmall: 0.0625rem;  /* 1px */
	--oe-spacing-4xsmall: 0.09375rem; /* 1.5px */
	--oe-spacing-3xsmall: 0.125rem;   /* 2px */
	--oe-spacing-2xsmall: 0.25rem;    /* 4px */
	--oe-spacing-xsmall:  0.5rem;     /* 8px */
	--oe-spacing-small:   0.75rem;    /* 12px */
	--oe-spacing-base:    1rem;       /* 16px */
	--oe-spacing-medium:  1.5rem;     /* 24px */
	--oe-spacing-large:   2rem;       /* 32px */
	--oe-spacing-xlarge:  3rem;       /* 48px */
	--oe-spacing-2xlarge: 4rem;       /* 64px */
	--oe-spacing-3xlarge: 6rem;       /* 96px */
	--oe-spacing-4xlarge: 8rem;       /* 128px */
	--oe-spacing-5xlarge: 12rem;      /* 192px */

    /* Spacing END */

    /* Sizing START */

	--oe-sizing-medium: 1.5rem;       /* 24px */
	--oe-sizing-large: 2rem;       /* 32px */
	--oe-sizing-xlarge: 3rem;       /* 48px */

    /* Sizing END */

	/* Component - Card START */

	.oe-card { padding:
	calc(var(--oe-card-padding) + var(--oe-card-trim-padding-top))
	calc(var(--oe-card-padding) + var(--oe-card-trim-padding-right))
	calc(var(--oe-card-padding) + var(--oe-card-trim-padding-bottom))
	calc(var(--oe-card-padding) + var(--oe-card-trim-padding-left)); }
	.oe-card-title { font-weight: var(--oe-card-title-font-weight); }
	.oe-card-content p { margin: var(--oe-card-title-margin); gap: var(--oe-card-content-gap); }
	.oe-card.oe-card-small { --oe-card-padding: var(--oe-spacing-base); --oe-card-title-font-size: var(--oe-font-size-base); }
	.oe-card.oe-card-presto-playlist { --oe-card-padding: 0; }
	.oe-card-small.oe-gap-card { gap: var(--oe-spacing-small); }
	.oe-card-small .oe-card-content,.oe-card-small .oe-card-content p { line-height: var(--oe-line-height-large); }
	.oe-card.oe-card-large { --oe-card-padding: var(--oe-spacing-xlarge); --oe-card-title-line-height: var(--oe-line-height-large); row-gap: calc(var(--oe-spacing-base)* 1.7); }
	.oe-card.oe-padding-remove { --oe-card-padding: 0!important; }
	

	--oe-card-hover-duration: 220ms;
	--oe-card-hover-ease: ease-out;
	--oe-card-hover-translate: 8px;
	--oe-card-title-font-weight: bold;
	--oe-card-title-font-size: var(--oe-font-size-medium);
	--oe-card-title-margin: 0;
	--oe-card-title-line-height: var(--oe-line-height-medium-large);
	--oe-card-content-margin: 0;
	--oe-card-content-gap: var(--oe-spacing-base);
	--oe-card-content-font-size: var(--oe-font-size-base);
	--oe-card-padding: var(--oe-spacing-large);
	--oe-card-border-radius: var(--oe-border-radius-base);

	/* Optional trim */
	--oe-card-trim-size: 0px;
	--oe-card-trim-color: transparent;

	--oe-card-trim-padding-top: 0px;
	--oe-card-trim-padding-right: 0px;
	--oe-card-trim-padding-bottom: 0px;
	--oe-card-trim-padding-left: 0px;

	/* Trim side modifiers */
	.oe-card.oe-card-trim-top,
	.oe-card.oe-card-trim-left,
	.oe-card.oe-card-trim-bottom {
		--oe-card-trim-size: 6px;
		--oe-card-trim-color: var(--oe-color-primary);
	}

	.oe-card.oe-card-trim-top {
		--oe-card-trim-padding-top: var(--oe-card-trim-size);
	}

	.oe-card.oe-card-trim-left {
		--oe-card-trim-padding-left: var(--oe-card-trim-size);
	}

	.oe-card.oe-card-trim-bottom {
		--oe-card-trim-padding-bottom: var(--oe-card-trim-size);
	}

	.oe-card.oe-card-trim-top::before,
	.oe-card.oe-card-trim-left::before,
	.oe-card.oe-card-trim-bottom::before {
		content: "";
		position: absolute;
		background: var(--oe-card-trim-color);
		pointer-events: none;
	}

	/* Top trim */
	.oe-card.oe-card-trim-top::before {
		inset-block-start: 0;
		inset-inline-start: 0;
		inline-size: 100%;
		block-size: var(--oe-card-trim-size);
	}

	/* Left trim */
	.oe-card.oe-card-trim-left::before {
		inset-block-start: 0;
		inset-inline-start: 0;
		inline-size: var(--oe-card-trim-size);
		block-size: 100%;
	}

	/* Bottom trim */
	.oe-card.oe-card-trim-bottom::before {
		inset-block-end: 0;
		inset-inline-start: 0;
		inline-size: 100%;
		block-size: var(--oe-card-trim-size);
	}

	/* Optional trim colour modifiers */
	.oe-card.oe-card-trim-primary {
		--oe-card-trim-color: var(--oe-color-primary);
	}

	.oe-card.oe-card-trim-secondary {
		--oe-card-trim-color: var(--oe-color-secondary);
	}

	.oe-card.oe-card-trim-accent {
		--oe-card-trim-color: var(--oe-color-accent);
	}

	/* Component - Card END */

	/* Component - Tab START */

	.oe-tab-vertical .gb-tabs__menu-item {
		width: auto;
		min-width: 120px;
	}

	@media (max-width: 767px) {
		.oe-tab-vertical .gb-tabs__menu-item {
			width: auto;
			min-width: 80px;
			text-align: center;
			border-radius: var(--oe-border-radius-base);
			padding: var(--oe-spacing-small);
		}
	}

	.gb-tabs__items .gb-tabs__item {
		padding: var(--oe-spacing-large);
	}

	.oe-tab-buttons-horizontal .gb-tabs__items .gb-tabs__item {
			background-color: var(--oe-color-background-trans-overlay);
			padding: var(--oe-spacing-medium);
			border-radius: var(--oe-border-radius-base);
			box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.08);
	}

	.oe-tab.oe-tab-items-blank .gb-tabs__items .gb-tabs__item {
		background-color: transparent;
		padding: 0;
		box-shadow: none;
	}

	.oe-tab-default.oe-tab-button-cards .gb-tabs__menu-item {
		border: 0;
		box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.08);
		height: 100%;
		line-height: var(--oe-line-height-large);
		border: 0px solid rgba(0,0,0,0.1);
	}

	.oe-tab-buttons-horizontal.oe-tab-button-cards .gb-tabs__menu {
		display: grid;
	}

	/* Component - Tab END */

	/* Component - Image START */

	--oe-image-border-radius: var(--oe-border-radius-base);

  	/* Component - Image END */

	/* Component - Button START */

	.oe-button {
		border: 3px solid transparent;
	}

	.oe-section-primary .oe-button-secondary { color: var(--oe-color-heritage-blue); background-color: var(--oe-color-base); }
	.oe-section-primary .oe-button-secondary:hover { color: var(--oe-color-base); background-color: #002b56; }

	.oe-section-primary .oe-button-outline, .oe-background-secondary .oe-button-outline { border: 3px solid rgba(255,255,255,0.5); background-color: transparent; color: #FFFFFF; }
	.oe-section-primary .oe-button-outline:hover, .oe-background-secondary .oe-button-outline:hover { border: 3px solid rgba(255,255,255,0.8); color: rgba(255,255,255,0.8); }

	.oe-button-outline { border: 3px solid var(--oe-color-heritage-blue); background-color: transparent; color: var(--oe-color-heritage-blue); }

  	/* Component - Button END */

	/* Component - Heading START */

	--oe-heading-eyebrow-color: var(--oe-color-primary);
	--oe-heading-eyebrow-font-size: var(--oe-font-size-small);
	--oe-heading-eyebrow-font-weight: 700;
	--oe-heading-eyebrow-text-decoration: uppercase;

		/* Heading line modifiers START */

		.oe-heading.oe-heading-line-left,
		.oe-heading.oe-heading-line-right {
			display: inline-flex;
			align-items: center;
			gap: var(--oe-heading-line-gap, 0.4em);
		}

		.oe-heading.oe-heading-line-left::before,
		.oe-heading.oe-heading-line-right::after {
			content: "";
			display: inline-block;
			inline-size: var(--oe-heading-line-width, 0.9em);
			block-size: var(--oe-heading-line-thickness, 2px);
			background-color: var(--oe-heading-line-color, currentColor);
			flex: 0 0 auto;
		}

		/* Heading line modifiers END */

  	/* Component - Heading END */

	/* Component - Accordion START */

	--oe-accordion-divider-color: rgba(0,0,0,0.1);
	.oe-light, .oe-section-primary {
		--oe-accordion-divider-color: rgba(255,255,255,0.1);
	}
	--oe-accordion-button-trigger-text-color: var(--oe-color-heritage-blue);
	.oe-light, .oe-section-primary, .oe-background-primary {
		--oe-accordion-button-trigger-text-color: rgba(255,255,255,1);
	}

  	/* Component - Accordion END */

	/* Component - Ordered List START */

	--oe-ol-item-number-color: var(--oe-color-heritage-blue);
	--oe-ol-item-number-background: var(--oe-color-secondary-5);
	--oe-ol-item-heading-color: var(--oe-color-heritage-blue);
	--oe-ol-item-heading-font-size: var(--oe-font-size-medium);
	--oe-ol-item-grid-gap: var(--oe-spacing-large);

	.oe-light, .oe-section-primary, .oe-background-primary {
		--oe-ol-item-number-color: var(--oe-color-base);
		--oe-ol-item-number-background: var(--oe-color-sky-blue);
		--oe-ol-item-heading-color: var(--oe-color-base);
	}

	.oe-list .oe-list-item-heading {
		color: var(--oe-ol-item-heading-color);
		font-size: var(--oe-ol-item-heading-font-size);
		margin-bottom: 0;
	}

	.oe-section-muted, .oe-background-muted {
		--oe-ol-item-number-background: var(--oe-color-heritage-blue);
		--oe-ol-item-number-color: #FFFFFF;
	}

	ol.oe-list {
		list-style: none;
		margin: 0;
		padding-inline-start: 0;
		counter-reset: oe-list-counter;
	}

	ol.oe-list > li {
		counter-increment: oe-list-counter;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: var(--oe-ol-item-grid-gap);
		align-items: start;
	}
	
	ol.oe-list > li::before {
        content: counter(oe-list-counter, decimal-leading-zero);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--oe-ol-item-number-background);
        color: var(--oe-ol-item-number-color);
        font-weight: 700;
        line-height: 1;
        border-radius: var(--oe-border-radius-base);
        aspect-ratio: 1 / 1;
        padding: calc(var(--oe-spacing-base) * 0.8);
        font-size: var(--oe-font-size-large);
		max-width: var(--oe-font-size-2xlarge);
        max-height: var(--oe-font-size-2xlarge);
    }

  	/* Component - Ordered List END */

	/* Component - Unordered List START */

	--oe-list-divider-gap: var(--oe-spacing-xsmall);

	.oe-list.oe-list-divider > li + li {
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		margin-top: var(--oe-list-divider-gap, 0.5rem);
		padding-top: var(--oe-list-divider-gap, 0.5rem);
	}

	.oe-section-primary .oe-list.oe-list-divider > li + li,
	.oe-background-secondary .oe-list.oe-list-divider > li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	/* Unordered list — bullet modifier */
	ul.oe-list.oe-list-bullet {
		--oe-ul-bullet-background: var(--oe-color-sky-blue);
		--oe-ul-bullet-size: 1.15rem;
		--oe-ul-bullet-icon-size: 85%;
	}

	ul.oe-list.oe-list-bullet > li {
		display: flex;
		align-items: flex-start;
		gap: var(--oe-spacing-small);
	}

	ul.oe-list.oe-list-bullet > li::before {
		content: "";
		display: block;
		flex: 0 0 var(--oe-ul-bullet-size);

		width: var(--oe-ul-bullet-size);
		height: var(--oe-ul-bullet-size);

		/* Aligns the bullet with the first line of text */
		margin-top: calc((1lh - var(--oe-ul-bullet-size)) / 2);

		background-color: var(--oe-ul-bullet-background);
		background-image: url("https://www.oxfordeconomics.com/wp-content/uploads/check.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: var(--oe-ul-bullet-icon-size);

		border-radius: var(--oe-border-radius-small);
		box-sizing: border-box;
	}

	.oe-list.oe-list-divider.oe-list-bullet > li + li {
		margin-top: var(--oe-spacing-base);
        padding-top: var(--oe-spacing-base);
	}

  	/* Component - Unordered List END */

	/* Component - Grid START */

	.oe-grid-column-divider {
		--oe-grid-column-divider-gap: var(--oe-spacing-xlarge);

		container-type: inline-size;
		column-gap: var(--oe-grid-column-divider-gap);
	}

	.oe-grid-column-divider > * {
		position: relative;
	}

	/* Vertical divider between columns */
	.oe-grid-column-divider > * + *::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: calc(var(--oe-grid-column-divider-gap) / -2);
		width: 1px;
		background-color: rgba(0, 0, 0, 0.08);
	}

	/* Use the width at which this grid becomes one column */
	@container (max-width: 767px) {
		.oe-grid-column-divider > * + *::before {
			content: none;
		}
	}

		/* Nested Component: Grid Inner Dividers START https://chatgpt.com/c/6a5e3c86-000c-83eb-bb9b-7d060c781587 */

		.oe-grid-inner-dividers {
			/* Responsive column configuration */
			--oe-grid-columns-desktop: 3;
			--oe-grid-columns-tablet: 2;
			--oe-grid-columns-mobile: 1;

			/* Active column count */
			--oe-grid-columns: var(--oe-grid-columns-desktop);

			/* Divider appearance */
			--oe-grid-divider-width: 1px;
			--oe-grid-divider-color: rgba(0, 0, 0, 0.08);

			/*
			* This should match the background behind the grid items.
			* It prevents the divider colour from appearing behind each item.
			*/
			--oe-grid-item-background: #ffffff;

			display: grid;
			grid-template-columns: repeat(
				var(--oe-grid-columns),
				minmax(0, 1fr)
			);

			/*
			* The grid gap exposes the wrapper background,
			* creating internal horizontal and vertical dividers.
			*/
			gap: var(--oe-grid-divider-width);
			background-color: var(--oe-grid-divider-color);
		}

		/* Cover the divider background within each grid item */
		.oe-grid-inner-dividers > * {
			min-width: 0;
			background-color: var(--oe-grid-item-background);
		}

		/*
		* Light modifier:
		* Use when the grid is placed on a dark background.
		*/
		.oe-grid-inner-dividers--light {
			--oe-grid-divider-color: rgba(39, 91, 150, 0.56);
			--oe-grid-item-background: var(--oe-color-primary-1);
		}

		/* Tablet */
		@media (max-width: 1024px) {
			.oe-grid-inner-dividers {
				--oe-grid-columns: var(--oe-grid-columns-tablet);
			}
		}

		/* Mobile */
		@media (max-width: 767px) {
			.oe-grid-inner-dividers {
				--oe-grid-columns: var(--oe-grid-columns-mobile);
			}
		}

		/* Nested Component: Grid Inner Dividers END */

	/* Component - Grid END */

	/* Component - Height START */

		[data-oe-height-match] .oe-height-match__item {
			box-sizing: border-box;
			min-height: var(--oe-height-match-size, auto);
		}

	/* Component - Height END */

	/* Component - Pointer Glow START */

		/*
		* Applied automatically by JavaScript when the pointer-glow element does not
		* already have relative, absolute, fixed or sticky positioning.
		*/
		.oe-pointer-glow--positioned {
			position: relative;
		}


		/*
		* Pointer Glow component.
		*
		* Default:
		* Light glow intended for dark backgrounds.
		*/
		.oe-pointer-glow {
			/*
			* Current pointer coordinates.
			* Updated automatically by JavaScript.
			*/
			--oe-pointer-glow-x: 50%;
			--oe-pointer-glow-y: 50%;

			/*
			* Visual configuration.
			*/
			--oe-pointer-glow-size: 28rem;
			--oe-pointer-glow-color: rgba(255, 255, 255, 0.04);

			/*
			* Keep the Pointer Glow stacking behaviour local to this component.
			*/
			isolation: isolate;
		}


		/*
		* Dark glow.
		*
		* Intended for light-coloured backgrounds.
		*/
		.oe-pointer-glow--dark {
			--oe-pointer-glow-color: rgba(0, 0, 0, 0.035);
		}


		/*
		* Blue glow.
		*/
		.oe-pointer-glow--blue {
			--oe-pointer-glow-color: rgba(60, 150, 220, 0.05);
		}


		/*
		* Dedicated Pointer Glow visual layer.
		*
		* This element is automatically created by the OE UI JavaScript.
		*/
		.oe-pointer-glow__layer {
			position: absolute;
			inset: 0;

			border-radius: inherit;

			pointer-events: none;

			opacity: 0;

			background: radial-gradient(
				circle var(--oe-pointer-glow-size)
				at var(--oe-pointer-glow-x) var(--oe-pointer-glow-y),
				var(--oe-pointer-glow-color) 0%,
				transparent 70%
			);

			transition: opacity 220ms ease;

			/*
			* Keep the glow above the section background.
			*/
			z-index: 1;
		}


		/*
		* Fade the glow in while the pointer is inside the component.
		*/
		.oe-pointer-glow--active > .oe-pointer-glow__layer {
			opacity: 1;
		}


	/* Component - Pointer Glow END */

	/* Component - Strike Through START */

	.oe-strike {
		text-decoration: line-through;
		text-decoration-thickness: 2px; /* optional — remove for the browser default */
	}

	/* Component - Strike Through END */
}

/* Design System - Classes - START */

/* + Colors */
/* ===================== PRIMARY ===================== */
/* Tints - Text */
.oe-color-primary-light-10 { color: var(--oe-color-primary-light-10); }
.oe-color-primary-light-20 { color: var(--oe-color-primary-light-20); }
.oe-color-primary-light-30 { color: var(--oe-color-primary-light-30); }
.oe-color-primary-light-40 { color: var(--oe-color-primary-light-40); }
.oe-color-primary-light-50 { color: var(--oe-color-primary-light-50); }
.oe-color-primary-light-60 { color: var(--oe-color-primary-light-60); }
.oe-color-primary-light-70 { color: var(--oe-color-primary-light-70); }
.oe-color-primary-light-80 { color: var(--oe-color-primary-light-80); }
.oe-color-primary-light-90 { color: var(--oe-color-primary-light-90); }

/* Tints - Background */
.oe-color-bg-primary-light-10 { background-color: var(--oe-color-primary-light-10); }
.oe-color-bg-primary-light-20 { background-color: var(--oe-color-primary-light-20); }
.oe-color-bg-primary-light-30 { background-color: var(--oe-color-primary-light-30); }
.oe-color-bg-primary-light-40 { background-color: var(--oe-color-primary-light-40); }
.oe-color-bg-primary-light-50 { background-color: var(--oe-color-primary-light-50); }
.oe-color-bg-primary-light-60 { background-color: var(--oe-color-primary-light-60); }
.oe-color-bg-primary-light-70 { background-color: var(--oe-color-primary-light-70); }
.oe-color-bg-primary-light-80 { background-color: var(--oe-color-primary-light-80); }
.oe-color-bg-primary-light-90 { background-color: var(--oe-color-primary-light-90); }

/* Shades - Text */
.oe-color-primary-dark-10 { color: var(--oe-color-primary-dark-10); }
.oe-color-primary-dark-20 { color: var(--oe-color-primary-dark-20); }
.oe-color-primary-dark-30 { color: var(--oe-color-primary-dark-30); }
.oe-color-primary-dark-40 { color: var(--oe-color-primary-dark-40); }
.oe-color-primary-dark-50 { color: var(--oe-color-primary-dark-50); }
.oe-color-primary-dark-60 { color: var(--oe-color-primary-dark-60); }
.oe-color-primary-dark-70 { color: var(--oe-color-primary-dark-70); }
.oe-color-primary-dark-80 { color: var(--oe-color-primary-dark-80); }
.oe-color-primary-dark-90 { color: var(--oe-color-primary-dark-90); }

/* Shades - Background */
.oe-color-bg-primary-dark-10 { background-color: var(--oe-color-primary-dark-10); }
.oe-color-bg-primary-dark-20 { background-color: var(--oe-color-primary-dark-20); }
.oe-color-bg-primary-dark-30 { background-color: var(--oe-color-primary-dark-30); }
.oe-color-bg-primary-dark-40 { background-color: var(--oe-color-primary-dark-40); }
.oe-color-bg-primary-dark-50 { background-color: var(--oe-color-primary-dark-50); }
.oe-color-bg-primary-dark-60 { background-color: var(--oe-color-primary-dark-60); }
.oe-color-bg-primary-dark-70 { background-color: var(--oe-color-primary-dark-70); }
.oe-color-bg-primary-dark-80 { background-color: var(--oe-color-primary-dark-80); }
.oe-color-bg-primary-dark-90 { background-color: var(--oe-color-primary-dark-90); }

/* ===================== SECONDARY ===================== */
/* Tints - Text */
.oe-color-secondary-light-10 { color: var(--oe-color-secondary-light-10); }
.oe-color-secondary-light-20 { color: var(--oe-color-secondary-light-20); }
.oe-color-secondary-light-30 { color: var(--oe-color-secondary-light-30); }
.oe-color-secondary-light-40 { color: var(--oe-color-secondary-light-40); }
.oe-color-secondary-light-50 { color: var(--oe-color-secondary-light-50); }
.oe-color-secondary-light-60 { color: var(--oe-color-secondary-light-60); }
.oe-color-secondary-light-70 { color: var(--oe-color-secondary-light-70); }
.oe-color-secondary-light-80 { color: var(--oe-color-secondary-light-80); }
.oe-color-secondary-light-90 { color: var(--oe-color-secondary-light-90); }

/* Tints - Background */
.oe-color-bg-secondary-light-10 { background-color: var(--oe-color-secondary-light-10); }
.oe-color-bg-secondary-light-20 { background-color: var(--oe-color-secondary-light-20); }
.oe-color-bg-secondary-light-30 { background-color: var(--oe-color-secondary-light-30); }
.oe-color-bg-secondary-light-40 { background-color: var(--oe-color-secondary-light-40); }
.oe-color-bg-secondary-light-50 { background-color: var(--oe-color-secondary-light-50); }
.oe-color-bg-secondary-light-60 { background-color: var(--oe-color-secondary-light-60); }
.oe-color-bg-secondary-light-70 { background-color: var(--oe-color-secondary-light-70); }
.oe-color-bg-secondary-light-80 { background-color: var(--oe-color-secondary-light-80); }
.oe-color-bg-secondary-light-90 { background-color: var(--oe-color-secondary-light-90); }

/* Shades - Text */
.oe-color-secondary-dark-10 { color: var(--oe-color-secondary-dark-10); }
.oe-color-secondary-dark-20 { color: var(--oe-color-secondary-dark-20); }
.oe-color-secondary-dark-30 { color: var(--oe-color-secondary-dark-30); }
.oe-color-secondary-dark-40 { color: var(--oe-color-secondary-dark-40); }
.oe-color-secondary-dark-50 { color: var(--oe-color-secondary-dark-50); }
.oe-color-secondary-dark-60 { color: var(--oe-color-secondary-dark-60); }
.oe-color-secondary-dark-70 { color: var(--oe-color-secondary-dark-70); }
.oe-color-secondary-dark-80 { color: var(--oe-color-secondary-dark-80); }
.oe-color-secondary-dark-90 { color: var(--oe-color-secondary-dark-90); }

/* Shades - Background */
.oe-color-bg-secondary-dark-10 { background-color: var(--oe-color-secondary-dark-10); }
.oe-color-bg-secondary-dark-20 { background-color: var(--oe-color-secondary-dark-20); }
.oe-color-bg-secondary-dark-30 { background-color: var(--oe-color-secondary-dark-30); }
.oe-color-bg-secondary-dark-40 { background-color: var(--oe-color-secondary-dark-40); }
.oe-color-bg-secondary-dark-50 { background-color: var(--oe-color-secondary-dark-50); }
.oe-color-bg-secondary-dark-60 { background-color: var(--oe-color-secondary-dark-60); }
.oe-color-bg-secondary-dark-70 { background-color: var(--oe-color-secondary-dark-70); }
.oe-color-bg-secondary-dark-80 { background-color: var(--oe-color-secondary-dark-80); }
.oe-color-bg-secondary-dark-90 { background-color: var(--oe-color-secondary-dark-90); }

/* ===================== MUTED ===================== */
/* Tints - Text */
.oe-color-muted-light-10 { color: var(--oe-color-muted-light-10); }
.oe-color-muted-light-20 { color: var(--oe-color-muted-light-20); }
.oe-color-muted-light-30 { color: var(--oe-color-muted-light-30); }
.oe-color-muted-light-40 { color: var(--oe-color-muted-light-40); }
.oe-color-muted-light-50 { color: var(--oe-color-muted-light-50); }
.oe-color-muted-light-60 { color: var(--oe-color-muted-light-60); }
.oe-color-muted-light-70 { color: var(--oe-color-muted-light-70); }
.oe-color-muted-light-80 { color: var(--oe-color-muted-light-80); }
.oe-color-muted-light-90 { color: var(--oe-color-muted-light-90); }

/* Tints - Background */
.oe-color-bg-muted-light-10 { background-color: var(--oe-color-muted-light-10); }
.oe-color-bg-muted-light-20 { background-color: var(--oe-color-muted-light-20); }
.oe-color-bg-muted-light-30 { background-color: var(--oe-color-muted-light-30); }
.oe-color-bg-muted-light-40 { background-color: var(--oe-color-muted-light-40); }
.oe-color-bg-muted-light-50 { background-color: var(--oe-color-muted-light-50); }
.oe-color-bg-muted-light-60 { background-color: var(--oe-color-muted-light-60); }
.oe-color-bg-muted-light-70 { background-color: var(--oe-color-muted-light-70); }
.oe-color-bg-muted-light-80 { background-color: var(--oe-color-muted-light-80); }
.oe-color-bg-muted-light-90 { background-color: var(--oe-color-muted-light-90); }

/* Shades - Text */
.oe-color-muted-dark-10 { color: var(--oe-color-muted-dark-10); }
.oe-color-muted-dark-20 { color: var(--oe-color-muted-dark-20); }
.oe-color-muted-dark-30 { color: var(--oe-color-muted-dark-30); }
.oe-color-muted-dark-40 { color: var(--oe-color-muted-dark-40); }
.oe-color-muted-dark-50 { color: var(--oe-color-muted-dark-50); }
.oe-color-muted-dark-60 { color: var(--oe-color-muted-dark-60); }
.oe-color-muted-dark-70 { color: var(--oe-color-muted-dark-70); }
.oe-color-muted-dark-80 { color: var(--oe-color-muted-dark-80); }
.oe-color-muted-dark-90 { color: var(--oe-color-muted-dark-90); }

/* Shades - Background */
.oe-color-bg-muted-dark-10 { background-color: var(--oe-color-muted-dark-10); }
.oe-color-bg-muted-dark-20 { background-color: var(--oe-color-muted-dark-20); }
.oe-color-bg-muted-dark-30 { background-color: var(--oe-color-muted-dark-30); }
.oe-color-bg-muted-dark-40 { background-color: var(--oe-color-muted-dark-40); }
.oe-color-bg-muted-dark-50 { background-color: var(--oe-color-muted-dark-50); }
.oe-color-bg-muted-dark-60 { background-color: var(--oe-color-muted-dark-60); }
.oe-color-bg-muted-dark-70 { background-color: var(--oe-color-muted-dark-70); }
.oe-color-bg-muted-dark-80 { background-color: var(--oe-color-muted-dark-80); }
.oe-color-bg-muted-dark-90 { background-color: var(--oe-color-muted-dark-90); }
/* - Colors */

/* Shades - Transparent light and dark */
.oe-color-trans-light-10 { color: var(--oe-color-trans-light-10); }
.oe-color-trans-dark-10 { color: var(--oe-color-trans-dark-10); }
.oe-color-bg-trans-light-10  { background-color: var(--oe-color-trans-light-10); }
.oe-color-bg-trans-dark-10 { background-color: var(--oe-color-trans-dark-10); }

/* Light Mode */
.oe-light {
  --accent: #ffffff;
}

/* Design System - Classes - END */

p {
	font-weight: 400;
}

p:first-of-type {
    margin-block-start: 0;
}

p:last-of-type {
    margin-block-end: 0;
}

iframe {
	min-height: 600px;
}

@media (min-width: 960px) {
	iframe.oe-iframe-rb {
		min-height: 1240px;
	}
	.oe-section-pillar-contact iframe.oe-iframe-rb {
		min-height: 980px;
	}
}

/* Screen Reader Accessibility focus styling for buttons */
[tabindex]:not([tabindex="-1"]):focus, a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 1px dashed currentColor;
    outline-offset: -1px;
    border-radius: inherit;
}

button.am-filter__pill:focus {
	border-radius: var(--am-pill-radius);
}

.m13__pardot-form.pardot-iframe iframe,
iframe.oe-iframe-newsletter {
	min-height: 70px;
}

.home .m01 {
	height: calc(100vh - 116px);
	margin-bottom: 50px;
}

.home .m01 .m01__container {
	margin-top: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

@media (max-width: 479px) {
	.home .m01 .m01__container {
		justify-content: start;
		padding-top: 40px;

	}
	.home .m01 {
		min-height: 300px!important;
	}

	.km-visible-s {
		display: block;
	}

	.home .m01__container .heading--large {
		font-size: 42px;
		line-height: 1.3;
	}
	h6.m01__text {
		font-size: 14px;
		padding-top: 20px;
	}
	.m01__scroll-to-view {
		bottom: 40px;
	}
}

@media (min-width: 480px) {
	.km-visible-s {
		display: none;
		visibility: hidden;
	}
}


@media (max-height: 580px) {
	.m01__scroll-to-view {
		display: none;
	}

}

.km-full-width-container {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0 5vw;
}

.km-small-container {
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

.km-container-expand-left {
	margin-left: 0;
}

.km-margin-remove-top {
	margin-top: 0;	
}

.km-padding-remove-top {
	padding-top: 0;	
}

.km-padding-2-em {
	padding: 2em;
}

.km-language-switcher {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 6px;
}

.km-divider-small, km-divider-xsmall {
	line-height: 0;
	overflow: visible;
	text-align: inherit;
	margin: 0 0 20px 0;
}

.km-divider-center {
	display: flex;
	justify-content: center;
}

.km-m32-remove-items .m32__back,
.km-m32-remove-items .m32__title,
.km-m32-remove-items .m29 {
	display:none;
	visibility: hidden;
}

.km-padding-top {
	padding-top: 4rem;
}

.km-text-uppercase {
	text-transform: uppercase;
}

.km-position-relative {
	position: relative;
}

.km-z-index-100 {
	z-index: 100;
}

.km-z-index-1 {
	z-index: 1;
}

.km-box-shadow-large {
	box-shadow: 0 14px 25px rgba(0,0,0,.16);
}

.km-accordion>:nth-child(n+2) {
	margin-top: 15px;
}

.km-accordion .uk-accordion-title::before {
	margin-top: 20px;
}

/*.km-accordion-remove-icon .uk-accordion-title:before {
	content: "";
	display:none;
}*/

.km-accordion .uk-open h3 {
	color: #00addc;
}


.km-accordion li:not(:last-child) {
	border-bottom: 1px solid rgba(0, 0, 0, 0.075);
	padding-bottom: 15px;
}

.uk-slidenav {
	color: rgba(0, 173, 220, 1);
}

.uk-slidenav:hover {
	color: rgba(0, 173, 220, 0.75);
}

.km-border-grey {
	border: 1px solid rgba(0,0,0,0.075);
}

.uk-accordion-title {
	text-decoration: none;
}

.uk-button {
	border-radius: 5px;
	font-weight: 500;
	text-transform: none;
}

.uk-button-primary {
	background: #00addc;
	color: #003469;
}

.uk-button-primary:hover {
	background: #003469;
	color: #ffffff;
}

.uk-button-secondary {
	background: #003469;
	color: #ffffff;
}

.uk-button-secondary:hover {
	background: #00addc;
	color: #003469;
}

.gb-headline-oe-heading-title-primary:before,
.gb-headline-oe-heading-title:before {
	content: "";
	height: 4px;
	background: #00addc;
	width: 194px;
	position: absolute;
	bottom: 0;
	left: 0;
}

.gb-headline-oe-heading-title-center {
  position: relative; /* Ensure the parent is positioned to anchor the pseudo-element */
}

.gb-headline-oe-heading-title-center:before {
  content: "";
  height: 4px;
  background: #00addc;
  width: 194px;
  position: absolute;
  bottom: 0;
  left: 50%; /* Center the element relative to its parent */
  transform: translateX(-50%); /* Offset by half its own width to center */
}


.uk-width-page {
	width: 800px;
}

.gb-button-oe-button-primary {
	line-height: 1;
}

iframe.km-iframe-home-china {
	padding-top: 20px;	
}

.km-iframe-home-china label.field-label {
	color: #FFFFFF!important;
}

.wp-block-video.presto-block-video {
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
}

.km-hero .wp-block-video.presto-block-video {
	transform: translateY(64px);
}

.splide__arrow[disabled] {
	display: none !important;
}

.splide__pagination {
	bottom: -2em;
}

.splide__pagination__page.is-active {
	background: #00addc;
}

.splide__pagination__page {
	height: 12px;
	width: 12px;
	margin: 4px;
}
.splide__arrow {
	border-radius: 4px;
	background: #00addc;
	top: 35px;
	width: 3em;
	height: 3em;
	position: relative;
}

.splide__arrow--prev {
	left: 0;
}

.splide__arrow--next {
	right: 0;
}

.splide__arrows {
	display: flex;
	gap: 12px;
}

.km-card-profile {
	background: #f8f8f8;
	border-radius: 4px;
	padding: 20px;
	text-align: center;
}

.km-card-profile .km-card-title {
	font-size: 1.2rem;
	margin-top: 20px;
}

.km-animate-fade-right {
	animation: fadeRight 1s forwards;
	animation-delay: 1s;
	opacity: 0;
}

.km-block-k1c .km-container-eyebrow .km-date-published {
	display: inline;
}

.km-block-k1c .km-container-eyebrow .km-date-published:before {
	display: inline;
	content: "|";
	margin-left: 5px;
	margin-right: 5px;
}

@keyframes fadeRight {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.km-floating-cta {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10;
}

.km-button-go-back {
	position: absolute;
	top: 0;
	left: 0;
	background: none;
	color: #FFFFFF;
}

.k1c__content {
	padding-top: 4em;
	padding-bottom: 0;
}



/* ========================================================================
Component: List
========================================================================== */
.km-list {
	padding: 0;
	list-style: none;
}
/*
* Avoid column break within the list item, when using `column-count`
*/
.km-list > * {
	break-inside: avoid-column;
}
/*
* Remove margin from the last-child
*/
.km-list > * > :last-child {
	margin-bottom: 0;
}
/*
* Style
*/
.km-list > :nth-child(n+2),
.km-list > * > ul {
	margin-top: 10px;
}
/* Marker modifiers
* Moving `::marker` inside `::before` to style it differently
* To style the `::marker` is currently only supported in Firefox and Safari
========================================================================== */
.km-list-disc > *,
.km-list-circle > *,
.km-list-square > *,
.km-list-decimal > *,
.km-list-hyphen > * {
	padding-left: 30px;
}
/*
* Type modifiers
*/
.km-list-decimal {
	counter-reset: decimal;
}
.km-list-decimal > * {
	counter-increment: decimal;
}
.km-list-disc > ::before,
.km-list-circle > ::before,
.km-list-square > ::before,
.km-list-decimal > ::before,
.km-list-hyphen > ::before {
	content: "";
	position: relative;
	left: -30px;
	width: 30px;
	height: 1.5em;
	margin-bottom: -1.5em;
	display: list-item;
	list-style-position: inside;
	text-align: right;
}
.km-list-disc > ::before {
	list-style-type: disc;
}
.km-list-circle > ::before {
	list-style-type: circle;
}
.km-list-square > ::before {
	list-style-type: square;
}
.km-list-decimal > ::before {
	content: counter(decimal, decimal) '\200A.\00A0';
}
.km-list-hyphen > ::before {
	content: '–\00A0\00A0';
}
/*
* Color modifiers
*/
.km-list-muted > ::before {
	color: #999 !important;
}
.km-list-emphasis > ::before {
	color: #333 !important;
}
.km-list-primary > ::before {
	color: #1e87f0 !important;
}
.km-list-secondary > ::before {
	color: #222 !important;
}
/* Image bullet modifier
========================================================================== */
.km-list-bullet > * {
	padding-left: 30px;
}
.km-list-bullet > ::before {
	content: "";
	display: list-item;
	position: relative;
	left: -30px;
	width: 30px;
	height: 1.5em;
	margin-bottom: -1.5em;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
/* Style modifiers
========================================================================== */
/*
* Divider
*/
.km-list-divider > :nth-child(n+2) {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e5e5e5;
}
/*
* Striped
*/
.km-list-striped > * {
	padding: 10px 10px;
}
.km-list-striped > *:nth-of-type(odd) {
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}
.km-list-striped > :nth-of-type(odd) {
	background: #f8f8f8;
}
.km-list-striped > :nth-child(n+2) {
	margin-top: 0;
}
/* Size modifier
========================================================================== */
.km-list-large > :nth-child(n+2),
.km-list-large > * > ul {
	margin-top: 20px;
}
.km-list-collapse > :nth-child(n+2),
.km-list-collapse > * > ul {
	margin-top: 0;
}
/*
* Divider
*/
.km-list-large.km-list-divider > :nth-child(n+2) {
	margin-top: 20px;
	padding-top: 20px;
}
.km-list-collapse.km-list-divider > :nth-child(n+2) {
	margin-top: 0;
	padding-top: 0;
}
/*
* Striped
*/
.km-list-large.km-list-striped > * {
	padding: 20px 10px;
}
.km-list-collapse.km-list-striped > * {
	padding-top: 0;
	padding-bottom: 0;
}
.km-list-large.km-list-striped > :nth-child(n+2),
.km-list-collapse.km-list-striped > :nth-child(n+2) {
	margin-top: 0;
}

.m13__container {
	align-items:center;
}

/* 2 */
.km-divider-small::after {
	content: "";
	display: inline-block;
	width: 194px;
	max-width: 100%;
	border-top: 4px solid #00addc;
	vertical-align: top;
}


.km-divider-xsmall::after {
	content: "";
	display: inline-block;
	width: 60px;
	max-width: 100%;
	border-top: 4px solid #00addc;
	vertical-align: top;
}

@media (min-width: 1320px) {
	.km-full-width-container {
		margin-left: -636px;
		max-width: 1272px;
		padding: 0;
	}
}

/*
@media all and (max-height:580px) and (max-width:479px) {
.home .m01 {
min-height: 300px!important;
}
}*/

@media (min-width: 1240px) {
	.gm01__primary-menu>.menu-item>.sub-menu {
		width: 100%;
		padding: 2rem;
		border-bottom: 1px solid rgba(0,0,0,0.05);
		box-shadow: 0 5px 21px 0 rgba(0,0,0,0.12);
	}
}

/* ========================================================================
Component: Flex
========================================================================== */
.km-flex {
	display: flex;
}
.km-flex-inline {
	display: inline-flex;
}
/* Alignment
========================================================================== */
/*
* Align items along the main axis of the current line of the flex container
* Row: Horizontal
*/
.km-flex-left {
	justify-content: flex-start;
}
.km-flex-center {
	justify-content: center;
}
.km-flex-right {
	justify-content: flex-end;
}
.km-flex-between {
	justify-content: space-between;
}
.km-flex-around {
	justify-content: space-around;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
	.km-flex-left\@s {
		justify-content: flex-start;
	}
	.km-flex-center\@s {
		justify-content: center;
	}
	.km-flex-right\@s {
		justify-content: flex-end;
	}
	.km-flex-between\@s {
		justify-content: space-between;
	}
	.km-flex-around\@s {
		justify-content: space-around;
	}
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
	.km-flex-left\@m {
		justify-content: flex-start;
	}
	.km-flex-center\@m {
		justify-content: center;
	}
	.km-flex-right\@m {
		justify-content: flex-end;
	}
	.km-flex-between\@m {
		justify-content: space-between;
	}
	.km-flex-around\@m {
		justify-content: space-around;
	}
}
/* Desktop and bigger */
@media (min-width: 1200px) {
	.km-flex-left\@l {
		justify-content: flex-start;
	}
	.km-flex-center\@l {
		justify-content: center;
	}
	.km-flex-right\@l {
		justify-content: flex-end;
	}
	.km-flex-between\@l {
		justify-content: space-between;
	}
	.km-flex-around\@l {
		justify-content: space-around;
	}
}
/* Large screen and bigger */
@media (min-width: 1600px) {
	.km-flex-left\@xl {
		justify-content: flex-start;
	}
	.km-flex-center\@xl {
		justify-content: center;
	}
	.km-flex-right\@xl {
		justify-content: flex-end;
	}
	.km-flex-between\@xl {
		justify-content: space-between;
	}
	.km-flex-around\@xl {
		justify-content: space-around;
	}
}
/*
* Align items in the cross axis of the current line of the flex container
* Row: Vertical
*/
.km-flex-stretch {
	align-items: stretch;
}
.km-flex-top {
	align-items: flex-start;
}
.km-flex-middle {
	align-items: center;
}
.km-flex-bottom {
	align-items: flex-end;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
	.km-flex-stretch\@s {
		align-items: stretch;
	}
	.km-flex-top\@s {
		align-items: flex-start;
	}
	.km-flex-middle\@s {
		align-items: center;
	}
	.km-flex-bottom\@s {
		align-items: flex-end;
	}
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
	.km-flex-stretch\@m {
		align-items: stretch;
	}
	.km-flex-top\@m {
		align-items: flex-start;
	}
	.km-flex-middle\@m {
		align-items: center;
	}
	.km-flex-bottom\@m {
		align-items: flex-end;
	}
}
/* Desktop and bigger */
@media (min-width: 1200px) {
	.km-flex-stretch\@l {
		align-items: stretch;
	}
	.km-flex-top\@l {
		align-items: flex-start;
	}
	.km-flex-middle\@l {
		align-items: center;
	}
	.km-flex-bottom\@l {
		align-items: flex-end;
	}
}
/* Large screen and bigger */
@media (min-width: 1600px) {
	.km-flex-stretch\@xl {
		align-items: stretch;
	}
	.km-flex-top\@xl {
		align-items: flex-start;
	}
	.km-flex-middle\@xl {
		align-items: center;
	}
	.km-flex-bottom\@xl {
		align-items: flex-end;
	}
}
/* Direction
========================================================================== */
.km-flex-row {
	flex-direction: row;
}
.km-flex-row-reverse {
	flex-direction: row-reverse;
}
.km-flex-column {
	flex-direction: column;
}
.km-flex-column-reverse {
	flex-direction: column-reverse;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
	.km-flex-row\@s {
		flex-direction: row;
	}
	.km-flex-column\@s {
		flex-direction: column;
	}
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
	.km-flex-row\@m {
		flex-direction: row;
	}
	.km-flex-column\@m {
		flex-direction: column;
	}
}
/* Desktop and bigger */
@media (min-width: 1200px) {
	.km-flex-row\@l {
		flex-direction: row;
	}
	.km-flex-column\@l {
		flex-direction: column;
	}
}
/* Large screen and bigger */
@media (min-width: 1600px) {
	.km-flex-row\@xl {
		flex-direction: row;
	}
	.km-flex-column\@xl {
		flex-direction: column;
	}
}
/* Wrap
========================================================================== */
.km-flex-nowrap {
	flex-wrap: nowrap;
}
.km-flex-wrap {
	flex-wrap: wrap;
}
.km-flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}
/*
* Aligns items within the flex container when there is extra space in the cross-axis
* Only works if there is more than one line of flex items
*/
.km-flex-wrap-stretch {
	align-content: stretch;
}
.km-flex-wrap-top {
	align-content: flex-start;
}
.km-flex-wrap-middle {
	align-content: center;
}
.km-flex-wrap-bottom {
	align-content: flex-end;
}
.km-flex-wrap-between {
	align-content: space-between;
}
.km-flex-wrap-around {
	align-content: space-around;
}
/* Item ordering
========================================================================== */
/*
* Default is 0
*/
.km-flex-first {
	order: -1;
}
.km-flex-last {
	order: 99;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
	.km-flex-first\@s {
		order: -1;
	}
	.km-flex-last\@s {
		order: 99;
	}
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
	.km-flex-first\@m {
		order: -1;
	}
	.km-flex-last\@m {
		order: 99;
	}
}
/* Desktop and bigger */
@media (min-width: 1200px) {
	.km-flex-first\@l {
		order: -1;
	}
	.km-flex-last\@l {
		order: 99;
	}
}
/* Large screen and bigger */
@media (min-width: 1600px) {
	.km-flex-first\@xl {
		order: -1;
	}
	.km-flex-last\@xl {
		order: 99;
	}
}
/* Item dimensions
========================================================================== */
/*
* Initial: 0 1 auto
* Content dimensions, but shrinks
*/
.km-flex-initial {
	flex: initial;
}
/*
* No Flex: 0 0 auto
* Content dimensions
*/
.km-flex-none {
	flex: none;
}
/*
* Relative Flex: 1 1 auto
* Space is allocated considering content
*/
.km-flex-auto {
	flex: auto;
}
/*
* Absolute Flex: 1 1 0%
* Space is allocated solely based on flex
*/
.km-flex-1 {
	flex: 1;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
	.km-flex-initial\@s {
		flex: initial;
	}
	.km-flex-none\@s {
		flex: none;
	}
	.km-flex-1\@s {
		flex: 1;
	}
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
	.km-flex-initial\@m {
		flex: initial;
	}
	.km-flex-none\@m {
		flex: none;
	}
	.km-flex-1\@m {
		flex: 1;
	}
}
/* Desktop and bigger */
@media (min-width: 1200px) {
	.km-flex-initial\@l {
		flex: initial;
	}
	.km-flex-none\@l {
		flex: none;
	}
	.km-flex-1\@l {
		flex: 1;
	}
}
/* Large screen and bigger */
@media (min-width: 1600px) {
	.km-flex-initial\@xl {
		flex: initial;
	}
	.km-flex-none\@xl {
		flex: none;
	}
	.km-flex-1\@xl {
		flex: 1;
	}
}

/* Desktop Styles */
@media (min-width: 969px) {
	.splide__slide.km-card {
		width: 25%;
	}
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 968px) {
	.splide__slide.km-card {
		width: 33.3333%;
	}
}

/* Phone / Small Screen Styles */
@media (max-width: 767px) {
	.splide__slide.km-card {
		width: 100%;
	}
}

.km-hero-featured .uk-overlay-primary {
	/*background: rgba(179, 25, 66,0.7);*/
	background: rgba(0, 173, 220,0.7);
}

.km-hero-featured .km-bg-secondary {
	background: #003469;
	color: #FFFFFF;
}

.km-hero-featured .km-overlay {
	position: absolute;
	max-width: calc(100% -(var(--uk-position-margin-offset)* 2));
	box-sizing: border-box;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 1.5em;
}

.km-hero-featured .km-overlay .uk-h2 {
	font-size: clamp(1.2rem, 0.9983rem + 1.0084vw, 1.8rem);
}

@media (max-width: 1049px) {
	.km-hero-featured .km-overlay {
		left: 0;
	}
}

@media (min-width: 1050px) and (max-width: 1289px) {
	.km-hero-featured .km-overlay {
		width: 60%;
	}
}

@media (min-width: 1290px) {
	.km-hero-featured .km-overlay {
		position: absolute !important;
		width: 50%;
	}
}


.km-slider-featured .uk-overlay-primary {
	background: rgba(0, 52, 105, 0.7);
}

.km-slider-featured {
	margin-bottom: 0px;
}

.km-white {
	color: #FFFFFF!important;
}

.km-primary-dark {
	color: #00addc!important;
}

.uk-dotnav>*>*,
/*.oe-slider-dotnav span.gb-carousel-dot*/ {
	width: 20px;
	height: 20px;
	border-color: var(--oe-color-primary);
	border-width: 2px;
	border-style: solid;
}


.gb-carousel-dot {
	width: 20px;
	height: 20px;
	border-color: var(--oe-color-primary);
	border-width: 1px;
	border-style: solid;
	background: none;
}

:where(.gb-carousel-pagination) .gb-carousel-dot.is-active {
    background-color: var(--oe-color-primary);
    transform: scale(1);
}

:where(.gb-carousel-pagination) .gb-carousel-dot[role=button]:hover {
    background-color: var(--oe-color-primary);
}

:where(.gb-carousel-pagination)[data-pagination-type=bullets] {
    gap: var(--oe-spacing-small);
}

.gb-carousel-dot:hover,
.gb-carousel-dot:active {
	background: var(--oe-color-primary);
}

.uk-dotnav.km-dotnav-small>*>*,
.km-dotnav-small span.gb-carousel-dot {
	width: 10px;
	height: 10px;
}

.uk-dotnav>*>:hover, .uk-dotnav>.uk-active>* {
	background-color: #00addc;
}

.gb-headline-oe-heading-title-center:before {
	content: "";
	height: 4px;
	background: #00addc;
	width: 194px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.km-grid-listing {
	display: flex;
	gap: 10px;
}

.km-grid-listing a {
	text-decoration: none;
}

.km-grid-listing:not(:last-child) {
	border-bottom: 1px solid #EEEEEE;
	padding-top: 10px;
	padding-bottom: 10px;
}

.km-grid-listing:not(:last-child) {
	margin-bottom: 20px;
}

.km-grid-listing .km-grid-column {
	box-sizing: border-box;
	padding: 5px;
}

.uk-width-auto {
	width: auto!important;
}

.uk-link-heading a:hover {
	color: #00addc;
}

.uk-background-primary {
	background: #00addc;
}

.uk-background-secondary {
	background: #003469;
}

.km-background-primary {
	background: #00addc!important;
	background-color: #00addc!important;
}

.km-background-secondary {
	background: #003469!important;
	background-color: #003469!important;
}


.km-transition {
	transition: 0.4s!important;
}

.gb-container-oe-container.uk-container-expand-right {
	max-width: calc(50% + (1272px / 2) - 40px);
	width: 94%;
	margin-right: 0;
}

@media (min-width: 1400px) {
	.gb-container-oe-container.uk-container-expand-right {
		max-width: calc(50% + (1272px / 2) - 0px);
		width: 100%;
	}
}


.km-slider-profile .km-card-profile img,
.km-card-profile img {
	max-width: 150px;
	max-height: 150px;
}

.km-card-profile .uk-card-footer {
	padding: 10px;
}

.km-card-profile .uk-card-footer .uk-link {
	text-decoration: none;
	font-size: 0.9rem;
}

.km-text-primary {
	color: #00addc!important;
}

.km-text-secondary {
	color: #003469!important;
}

.km-text-500 {
	font-weight: bold;
}

.km-text-no-decoration {
	text-decoration: none;
}

.km-card-badge-shadow-container {
	border-radius: 0 0 0 5px;
}

.km-card-badge-shadow-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 0 0 0 5px;
	/* box-shadow: inset 10px -10px 10px -10px rgba(0, 0, 0, 0.65); */
	pointer-events: none; /* Allows interaction with the image below */
}

.km-sticky-container {
	height: 100%;
}

.km-sticky-container .km-sticky-element {
    position: sticky;
    top: 160px;  /* Adjust this value based on your needs */
}

.km-sticky-container .simpletoc-list {
	margin-top: 0;
}

.km-toc .simpletoc-list {
	list-style: none;
	padding-left: 0;
}

.km-toc a {
	font-weight: 500;
	text-decoration: none;
	border-left: 2px solid rgba(0,0,0,0);
}

.km-toc a:hover {
	color: rgba(0,0,0,0.7);
	text-decoration: underline;
}

.km-toc li {
	padding-bottom: 1em;
	padding-left: 0;
	font-size: 0.8rem;
}

.km-toc li: hover {
	border-left: 2px solid rgba(0,0,0,0.7);
}

.km-tile-border {
	border: 1px solid rgba(0, 0, 0, 0.085);
}

.km-tile-border-light {
	border: 1px solid rgba(0, 0, 0, 0.03);
}

.km-hr {
    border-top: 1px solid var(--base);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.uk-button-link a:not([class]) {
	text-decoration: none;
}

.km-text-xsmall {
	font-size: 0.775rem;
}

.km-margin-xsmall-top {
	margin-top: 5px;
}

.km-overlay-secondary-faded {
	background: rgba(0, 21, 43, 0.65);
}

.km-anchor-offset {
    scroll-margin-top: 116px;  /* Height of your fixed header */
}

.km-background-hover-primary-offset:hover {
	background: #049cc5;
}

.uk-sticky {
	z-index: 98;
}

.uk-subnav-pill > * > :first-child {
	border-radius: 5px;
	text-transform: none;
	font-weight: 500;
	text-decoration: none;
}

.km-sticky-submenu {
	transition: 0.4s;
}

.km-sticky-submenu .uk-subnav-pill > a {
	background-color: var(--wp--preset--color--lighter-blue)
}

.km-sticky-submenu .uk-active .oe-heading-title {
	font-size: 1rem;
}

.km-sticky-submenu .uk-subnav-pill a {
	text-decoration: none;
}

.km-sticky-submenu .uk-sticky-fixed {
	padding-top: 5px;
	padding-bottom: 5px;
	background: #003469;
	border-radius: 0 0 5px 5px;
}

.km-sticky-submenu .uk-sticky-fixed .oe-heading-title {
	color: #FFFFFF;
	margin-left: 10px;
}

.km-sticky-submenu .uk-sticky-fixed .oe-heading-title:before {
	display: none;
}

.uk-sticky-fixed .uk-subnav-pill > * > :first-child {
	color: #FFFFFF;
}

.uk-sticky-fixed .uk-subnav-pill > * > a:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.uk-lightbox-items>.uk-active {
	background: #FFFFFF;
}

.oe-text-bullet:before {
	vertical-align: middle;
}

@media (max-width: 767px) {
	.cookiefirst-root svg {
		font-size: 10px!important;
	}
}

.admin-bar .oe-height-100-less-header {
	min-height: calc(100svh - 148px);
}

.oe-height-100-less-header {
	min-height: calc(100svh - 116px);
}

.gb-query-loop-item .gb-block-image:has(.oe-featured-image-fallback) + .gb-block-image {
    display: none;
}

.oe-list-divider .oe-list-element:not(:last-child) {
    border-bottom: 1px solid rgba(229, 231, 235, 1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/* START - Global Cities Index map */
.ol-attribution.ol-unselectable.ol-control.ol-uncollapsible,
.wpgmza_infowindow_address {
	display: none;
	visibility: hidden;
}

.ol-info-window-plain {
	border-radius: 5px;
}

.wpgmza_infowindow_title {
	margin-bottom: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue)
}

.uk-table.km-table-gci th,
.uk-table.km-table-gci td {
	padding: 5px 12px;
}

.uk-table.km-table-gci th {
	font-weight: bold;
	color: var(--wp--preset--color--aqua);
}

.uk-table.km-table-gci th:first-child,
.uk-table.km-table-gci td:first-child {
	padding-left: 0;
}

.uk-table.km-table-gci th:last-child,
.uk-table.km-table-gci td:last-child {
	padding-right: 0;
}

.uk-table.km-table-gci .km-score {
	font-weight: bold;
}

.wpgmza_map {
	border-radius: 5px;
}

.oe-gci-color-key-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 0 0 5px 5px;
    overflow: hidden;;
}
.oe-gci-color-box {
    flex: 1;
    height: 30px;
}
.oe-gci-key-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    font-weight: bold;
}
.oe-gci-key-labels div {
    flex-basis: 0;
}
.oe-gci-overall-score {
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
    width: 100%;
    min-width: 150px;
    position: relative;
    top: 0px;
}

/* END - Global Cities Index map */

/* NEW HERO START */

:root {
    --km-header-height: 116px; /* Header height */
    --km-admin-bar-height: 32px; /* Admin bar height */
    --km-hero-concept-overlay-height: 150px; /* Default overlay height */
    --km-hero-concept-content-max-height: calc(100svh - var(--km-hero-concept-overlay-height) - var(--km-header-height));
    --km-hero-concept-height: calc(100svh - var(--km-header-height));
    --oe-radius-s: 2px;
    --oe-border-radius-xsmall: 2px;
    --oe-border-radius-small: 4px;
    --oe-border-radius-base: 8px;
    --oe-xs: clamp(0.64rem, 0.05vi + 0.63rem, 0.67rem);
	--oe-sm: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
	--oe-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
	--oe-md: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
	--oe-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
	--oe-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
	--oe-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
	--oe-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);
	/* H1 text adapter https://chatgpt.com/c/79efee10-2088-48ff-afdb-8dbe815ebace */
	--oe-h1-min-size: 2.5rem;
    --oe-h1-max-size: 3.75rem;
    --oe-h1-screen-width-factor: calc(1.8827rem + 3.0864vw);
    --oe-h1-screen-height-factor: calc(1.5vh); /* Adjust this value as needed */
    --oe-h1-combined-factor: calc(var(--oe-h1-screen-width-factor) + var(--oe-h1-screen-height-factor));
    --oe-height-100-svh: 100svh;
    --oe-height-header: calc(116px + var(--km-admin-bar-height));
    --oe-height-100-less-header: calc(var(--oe-height-100-svh) - var(--oe-height-header));
    /* New Hero height START */
	--oe-hero-wrapper-height: calc(100svh - 116px);
	--oe-hero-content-height: calc(var(--oe-hero-wrapper-height) - var(--oe-hero-overlay-height));
    --oe-hero-overlay-height: 150px;
    /* New Hero height END */
}

.oe-hero-wrapper {

}

body.admin-bar .oe-hero-wrapper {
    min-height: calc(100svh - 116px - 32px); /* Adjusted height with admin bar */
}

.oe-hero-content {

}

.oe-hero-content-inner {
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
}

.oe-hero-overlay {

}

.oe-box-sizing-border-box {
	box-sizing: border-box;
}

.km-hero-concept {
    display: flex;
    flex-direction: column; /* Ensure the flex items stack vertically */
    justify-content: flex-start; /* Align items to the start */
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    height: var(--km-hero-concept-height); /* Original height setting */
}

.km-hero-concept-inner {
    flex: 1; /* Allow this div to grow and shrink */
}

.km-hero-concept-overlay {
    width: 100%; /* Ensure the overlay takes full width */
}

.km-hero-concept .oe-h1 {
    /*font-size: clamp(var(--oe-h1-min-size), var(--oe-h1-combined-factor), var(--oe-h1-max-size));*/
}

/*.km-hero-concept .oe-debug::before {
    content: "Width Factor: " var(--oe-h1-screen-width-factor) " | Height Factor: " var(--oe-h1-screen-height-factor);
    display: block;
    font-size: 12px;
    color: red;
}*/

.km-hero-concept .oe-debug::before {
    content: var(--oe-h1-screen-width-factor);
    display: block;
    font-size: 12px;
    color: red;
}


.oe-h4 {
	font-size: var(--oe-md);
}

.oe-h3 {
	font-size: var(--oe-lg);
}

/* Adjust for admin bar */
body.admin-bar {
    --km-header-height: calc(116px + var(--km-admin-bar-height));
    --km-hero-concept-content-max-height: calc(100svh - var(--km-hero-concept-overlay-height) - var(--km-header-height));
    --km-hero-concept-height: calc(100svh - var(--km-header-height));
    /* New Hero height START */
    --oe-hero-wrapper-height: calc(100svh - 148px);
    --oe-hero-content-height: calc(var(--oe-hero-wrapper-height) - var(--oe-hero-overlay-height));
    /* New Hero height END */
}

.km-hero-concept-content-container {
    box-sizing: border-box;
}

/* Two-column layout when content height exceeds inner container height */
.km-hero-concept-two-column-layout {
    grid-template-columns: 1fr 1fr; /* Two columns for side-by-side layout */
    grid-template-rows: auto auto; /* Adjust rows for side-by-side layout */
    align-items: center;
}

.km-hero-concept-two-column-layout h1 {
    grid-column: span 2; /* Heading spans both columns */
}

.km-hero-concept-two-column-layout p {
    grid-column: 1 / 2;
}

.km-hero-concept-two-column-layout .gb-container-d1ce0e40 {
    grid-column: 2 / 3;
    justify-self: start; /* Align the button to the start of its grid column */
    width: auto; /* Ensure the button is only as wide as its content */
}

/* moved into Generate Blocks global classes 
.km-hero-concept {
    position: relative;
    height: var(--km-hero-concept-height);
    background-size: cover;
    background-position: center;
}

.km-hero-concept-content-container {
    position: relative;
    z-index: 1;
    padding: 20px;
    max-height: var(--km-hero-concept-content-max-height);
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 20px;
    align-items: start; 
} 

.km-hero-concept-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--km-hero-concept-overlay-height);
    background: rgba(255, 255, 255, 0.1);
    z-index: 0; 
} */

/* Media queries for different aspect ratios */
@media (min-aspect-ratio: 3/2) {
    :root {
        --km-hero-concept-overlay-height: 150px; /* Adjust overlay height for wide screens */
        --km-hero-concept-content-max-height: calc(100svh - var(--km-hero-concept-overlay-height) - var(--km-header-height));
    }
}

@media (min-aspect-ratio: 16/9) {
    :root {
        --km-hero-concept-overlay-height: 150px; /* Adjust further for very wide screens */
        --km-hero-concept-content-max-height: calc(100svh - var(--km-hero-concept-overlay-height) - var(--km-header-height));
    }
}

/* Switch to side-by-side layout when content exceeds available height */
@media (max-height: var(--km-hero-concept-content-max-height)) {
    .km-hero-concept-content-container {
        grid-template-columns: 1fr 1fr; /* Two columns for side-by-side layout */
        grid-template-rows: auto auto; /* Adjust rows for side-by-side layout */
        align-items: center;
    }
    .km-hero-concept-content-container h1 {
        grid-column: span 2; /* Heading spans both columns */
    }
    .km-hero-concept-content-container p {
        grid-column: 1 / 2;
    }
    .km-hero-concept-content-container .gb-container-d1ce0e40 {
        grid-column: 2 / 3;
        justify-self: start;
        width: auto; /* Align the button to the start of its grid column */
    }
}

/* Additional media queries for other specific adjustments */
@media (max-aspect-ratio: 4/3) {
    :root {
        --km-hero-concept-overlay-height: 150px; /* Taller overlay for more square screens */
        --km-hero-concept-content-max-height: calc(100svh - var(--km-hero-concept-overlay-height) - var(--km-header-height));
    }
}



/* NEW HERO END */

@media (max-width: 439px) {
	.m15__stat-item {
		margin-bottom: 40px;
		text-align: center;
	}
	.m15__stat-item>* {
	    width: 80%;
	    max-width: 220px;
	    margin-left: auto;
	    margin-right: auto;
	}
}

@media (min-width: 768px) and (max-height: 750px) {
	.oe-hero-content .oe-h1 {
		font-size: 2.8rem;
		width: 65%;
	}
	.oe-hero-content .oe-hero-lead-text {
		width: 65%;
	}
	.oe-hero-home-v2 .oe-hero-content .oe-h1 {
		font-size: 3.5rem;
		width: 100%;
	}
	.oe-hero-home-v2 .oe-hero-content .oe-hero-lead-text {
		width: 100%;
	}
}


@media (min-width: 768px) and (max-height: 780px) {
	.oe-hero-content .oe-hero-lead-text {
		font-size: 0.95rem;
	}
	.oe-hero-home-v2 .oe-hero-content .oe-hero-lead-text {
		font-size: 1.1rem;
	}
}

.oe-border-remove-top {
	border-top: 0px solid rgba(0,0,0,0)!important;
}

.oe-padding-remove-top {
	padding-top: 0!important;
}

.oe-toc li a {
	color: var(--wp--preset--color--body);
}

.oe-toc li a:hover {
	color: var(--wp--preset--color--aqua);
}

.oe-toc li.uk-active a {
	color: #000000;
	font-weight: 500;
}

.oe-subnav-pill a,
.oe-subnav-pill.uk-subnav-pill > * > :first-child {
	text-decoration: none;
	background-color: var(--wp--preset--color--lighter-blue);
	transition: 0.4s;
	color: #555555;
}

.oe-home-subnav.oe-subnav-pill a,
.oe-home-subnav.oe-subnav-pill.uk-subnav-pill > * > :first-child {
	background-color: #FFFFFF;
	color: var(--oe-color-primary-1);
	/*box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.05);*/
	font-size: 0.8rem;
}

.oe-subnav-pill a:hover,
.oe-home-subnav.oe-subnav-pill li.uk-active a {
	color: #FFFFFF!important;
	background-color: var(--wp--preset--color--aqua)!important;
}

.oe-home-subnav.uk-subnav {
	margin-top: 3px;
	margin-bottom: 3px;
	gap: 8px;
}

.oe-home-subnav.uk-subnav > * { 
    padding-left: 0px;
}

.oe-home-subnav.uk-subnav {
	margin-left: 5px;
}


.uk-sticky.uk-active .oe-home-subnav.oe-subnav-pill li a span.oe-text-content {
	display: none;
	height: 14px;
	width: 14px;
	border-radius: 500px;
	transition: 0.3s;
}

.uk-sticky.uk-active .oe-home-subnav.oe-subnav-pill li a span.oe-text-content:hover {
	display: block;
	width: auto;
}

.uk-sticky.uk-active .oe-home-subnav.uk-subnav {
	position: fixed;
    right: 20px;
    top: 50%;
    flex-direction: column;
    align-items: end;
    gap: 10px;
}

.uk-sticky.uk-active .oe-home-subnav.oe-subnav-pill li a {
	height: 14px;
    width: 14px;
    border-radius: 500px;
    background-color: var(--oe-color-secondary-7);
    padding: 6px;
}

.uk-dotnav.oe-fixed-dotnav a {
	background-color: var(--oe-color-secondary-7);
	border: 0;
}

.uk-dotnav.oe-fixed-dotnav li.uk-active a,
.uk-dotnav.oe-fixed-dotnav a:hover {
	background-color: #00addc;
}

.oe-toc-link:target:before {
	display:none;
}

.oe-text-primary-on-sticky {
	transition: 0.4s;
}

.uk-sticky.uk-active .oe-text-primary-on-sticky {
	color: var(--wp--preset--color--aqua);
}

.oe-home-subnav .uk-tooltip.uk-active {
	display: none;
}

.uk-sticky.uk-active .oe-home-subnav .uk-tooltip.uk-active {
	display: block;
}

.oe-grid-home-industry .oe-panel {
	max-width: 160px;
}

.oe-grid-home-industry .oe-column-even .oe-panel {
	/*transform: translate3d(0, -40px, 0);*/
}

.oe-list-events.uk-list-divider > :nth-child(n+2) {
	border-top: 1px solid rgba(255,255,255,0.15);
}

.oe-list-events .oe-date-month {
	font-size: 0.8rem;
	line-height: 0.8rem;
	font-weight: bold;
	letter-spacing: 0.5px;
}

.oe-list-events .oe-date-date {
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1;
}

.oe-list-events .oe-date-year {
	font-size: 0.8rem;
	line-height: 1rem;
	font-weight: bold;
	color: var(--oe-color-secondary-9);
}

.oe-list-events .oe-date-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 3px;
}

.oe-section-primary .uk-subnav-pill > * > :first-child {
	color: var(--oe-color-primary-4);
}

.oe-section-primary .uk-subnav-pill > * > a:hover {
	color: var(--oe-color-primary-1);
}

.oe-card-profile {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	padding: 1em;
	border-radius: 0.5em;
	height: 100%;
}

.uk-badge {
	letter-spacing: 0.5px;
}

/*
.oe-hero-section-image-mask:after {
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    mask-image: linear-gradient(to right, rgba(0, 52, 105, 1) 50%, rgba(0, 52, 105, 0) 100%);
    mask-size: 100% 100%;
}*/

.oe-hero-section-image-mask:before {
	left: auto!important;
}

/*
#popmake-77080 .popmake-close:after {
    content: url('/wp-content/uploads/2024/11/close-white.svg');
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}*/

#popmake-77080 .popmake-close {
	color: #FFFFFF;
	font-weight: 400;
}

.oe-button-us-election {
	background: #e52941;
	color;
	border-radius: 500px;
	padding: 0 14px;
}

.oe-button-us-election:hover {
	background: #003469;
	color: #FFFFFF;
}

.gm01__primary-menu .oe-menu-heading-linkable>a 
{
	font-size: 1.25rem;
	color: #000!important;
	font-weight: 500;
	padding-bottom: 4px;
}

.gm01__primary-menu .menu-item.oe-menu-heading-linkable a:hover {
	text-decoration: none;
}

.oe-background-primary-1-transparent {
	background: var(--oe-color-primary-1-transparent);
}

.gm01__buttons .button {
	color: #FFFFFF!important;
}

.oe-case-studies-home-grid .uk-background-secondary {
	background-color: #275a96;
	transition: 0.4s;
}

.oe-case-studies-home-grid .uk-background-secondary:hover {
	background-color: #363636;
	transition: 0.4s;
	color: #00addc;
}

.oe-case-studies-home-grid .oe-grid-image {
	filter: saturate(0%);
}

.oe-case-studies-home-grid .uk-grid-small > .uk-grid-margin {
	margin-top: 20px;
}

.oe-case-studies-home-grid .uk-grid-small > *, .uk-grid-column-small > * {
	padding-left: 20px;
}

.gb-grid-column-09703221 {
	z-index: 100;
}



.oe-toc-dots-on-sticky .oe-tooltip span.oe-text-content {
	display: none;
}

.uk-sticky.uk-active .oe-toc-dots-on-sticky li:hover .oe-tooltip span.oe-text-content {
	display: block;
}

.oe-tooltip.uk-drop:hover {
	display: block;
}

.oe-tooltip .oe-text-content {
	box-sizing: border-box;
  	max-width: 200px!important;
  	padding: 3px 6px;
  	background: #666;
  	border-radius: 2px;
  	color: #fff;
  	font-size: 12px;
}

/*
.oe-tooltip.uk-drop {
	width: auto;
}*/

/* Brightedge Autopilot START */

.be-ix-link-block {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Brightedge Autopilot END */

.gm01__primary-menu .sub-menu .oe-menu-heading-parent .sub-menu .menu-item:not(.button) {
    margin-left: 1rem;
}

.oe-link-no-underline a:hover {
	text-decoration: none;
}

.gm01__primary-menu .oe-link-no-underline.menu-item a:hover {
	text-decoration: none;
}

.oe-toggle-content-hidden {
	display: none;
}

.oe-toggle-content-hidden.oe-toggle-open {
	display: block;
	padding-top: 1em;
	padding-bottom: 1em;
}

.oe-toggle-icon:before {
	content: "";
    width: 1.4em;
    height: 1.4em;
    margin-left: 10px;
    float: right;
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.oe-toggle-icon.oe-toggle-open:before {
	background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E);
}

.oe-box-shadow-small-on-sticky.uk-active {
	box-shadow: -5px 0px 8px -3px rgba(0,0,0,0.45);
}

.oe-border-bottom-on-sticky.uk-active {
	border-bottom: 2px solid rgba(0,0,0,0.3);
}

.oe-form-home-japan .field-label {
	color: #FFFFFF;
}

.oe-hero-section-image-mask .oe-panel-author-image-wrapper .oe-panel-author-image {
	width: 50px;
}

.oe-hero-section-image-mask .oe-panel-author-wrapper {
    gap: 1em;
    padding: 0.8em;
    border-radius: 0.7em;
    background: rgba(0, 0, 0, 0.065);
}

.oe-hero-section-image-mask .oe-panel-author-wrapper .oe-panel-author-position {
	color: var(--oe-color-primary-1-300);
}


.oe-video-tutorial-toc .presto-timestamp {
	text-decoration: none;
	color: #444;
}

.oe-video-tutorial-toc .presto-timestamp:hover {
	color: #00addc;
}

/* START - OE Card with blue Glow */

/* Outer container = border + rounded corners */
.oe-card-glow-blue-wrapper {
  position: relative;

  /* 4px border in semi-transparent white */
  border: 2px solid rgba(255, 255, 255, 0.11);
  border-radius: 1rem;

  /* Prevents content or background from spilling beyond rounded corners */
  overflow: hidden;
}

/* Inner container = background & glow */
.oe-card-glow-blue-content {
  padding: 1rem;

  /* Semi-transparent black base */
  background-color: rgba(0, 0, 0, 0.21);

  /* Optional inset highlight/glow on the inside */
  box-shadow: inset 0 -11px 20px 0px rgba(255, 255, 255, 0.25);
}

/* END - OE Card with blue Glow */

body.oe-lang-ja .m13__container {
	align-items: flex-start;
}

body.oe-lang-ja .m13__container .m13__heading {
	margin-top: 40px;
}

body.oe-lang-ja .oe-brightedge-autopilot,
body.oe-lang-ja .gm02__social-link--wechat {
	display: none;
	visibility: hidden;
}

.oe-hidden {
	display: none!important;
	visibility: hidden!important;
}


.oe-resource-hub-filters .wpgb-facet-title {
	font-size: 1rem !important;
    text-transform: uppercase;
    color: #003469;
    margin-bottom: 2px !important;
}

.oe-resource-hub-filters .wpgb-facet>fieldset:last-child,
.wpgb-facet-2.wpgb-facet>fieldset:last-child,
.wpgb-facet-10.wpgb-facet>fieldset:last-child {
	margin-bottom: 20px!important;
}

.wpgb-facet-10.wpgb-facet .wpgb-facet-title {
	margin-bottom: 8px !important;
	font-weight: 500;
}

.oe-hero-hook-lower-hero-wrapper {
	display: flex;
	gap: 2em;
}

.oe-hero-hook-upper-hero-wrapper {
	display: flex;
	gap: 2em;
}

.oe-hero-hook-lower-hero-wrapper .oe-partner-sponsor-image img {
}

.oe-hero-hook-lower-hero-wrapper .oe-partner-sponsor-text {
	font-size: 0.9rem;
	color: #F4F7FA;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.oe-hero-hook-upper-hero-wrapper .oe-partner-sponsor-text {
	font-size: 0.8rem;
	color: #F4F7FA;
	margin-bottom: 0;
	text-transform: uppercase;
}

.oe-hero-hook-lower-hero-wrapper .oe-partner-sponsor-wrapper,
.oe-hero-hook-upper-hero-wrapper .oe-partner-sponsor-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.oe-hero-hook-lower-hero-wrapper .oe-partner-sponsor-list,
.oe-hero-hook-upper-hero-wrapper .oe-partner-sponsor-list {
	display: flex;
	align-items: center;
	gap: 1em;
}

.oe-hero-hook-lower-hero-wrapper {
	margin-top: 2em;
	margin-bottom: 1em;
}

.oe-padding-remove-left {
	padding-left: 0;
}

.oe-padding-remove-bottom {
	padding-bottom: 0;
}

.oe-padding-remove-top {
	padding-top: 0;
}

.oe-padding-remove-right {
	padding-right: 0;
}

.oe-flex-column {
	flex-direction: column;
}

.oe-grid-remove-margin-top.uk-grid > .uk-grid-margin, * + .uk-grid-margin {
	margin-top: 0;
}

/* ==================================================
   STRETCHED CLICKABLE AREA
   ================================================== */

.oe-stretch-link {
	--oe-stretch-link-hover-background: rgba(0, 138, 200, 0.1);
	--oe-stretch-link-transition-duration: 0.4s;

	position: relative;
	overflow: hidden;
	isolation: isolate;
}


/* ==================================================
   STANDARD LINK CARDS
   ================================================== */

/*
 * Excludes accordion cards so links inside an expanded
 * accordion panel do not stretch across the whole card.
 */
.oe-stretch-link:not(:has(.gb-accordion__toggle)) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	transition:
		background-color var(--oe-stretch-link-transition-duration);
}

/* Tint the entire card when its primary link is hovered. */
.oe-stretch-link:not(:has(.gb-accordion__toggle)) a:hover::after {
	background-color: var(--oe-stretch-link-hover-background);
}

/* Display keyboard focus around the entire card. */
.oe-stretch-link:not(:has(.gb-accordion__toggle))
	a:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/*
 * Remove the link's normal outline because the stretched
 * pseudo-element provides the full-card focus indicator.
 */
.oe-stretch-link:not(:has(.gb-accordion__toggle))
	a:focus-visible {
	outline: none;
}


/* ==================================================
   ACCORDION CARDS
   ================================================== */

/*
 * Ensures the stretched pseudo-element is positioned
 * relative to the outer .oe-stretch-link card.
 */
.oe-stretch-link .gb-accordion__toggle {
	position: static;
}


/* --------------------------------------------------
   Closed accordion
   -------------------------------------------------- */

/*
 * When closed, stretch the accordion button across the
 * complete card so the whole card is clickable.
 */
.oe-stretch-link
	.gb-accordion__toggle[aria-expanded="false"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	transition:
		background-color var(--oe-stretch-link-transition-duration);
}

/* Tint the complete closed card on hover. */
.oe-stretch-link
	.gb-accordion__toggle[aria-expanded="false"]:hover::after {
	background-color: var(--oe-stretch-link-hover-background);
}

/* Full-card keyboard focus indicator while closed. */
.oe-stretch-link
	.gb-accordion__toggle[aria-expanded="false"]:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/*
 * Remove the button's normal outline because the stretched
 * pseudo-element provides the full-card focus indicator.
 */
.oe-stretch-link
	.gb-accordion__toggle[aria-expanded="false"]:focus-visible {
	outline: none;
}


/* --------------------------------------------------
   Open accordion
   -------------------------------------------------- */

/*
 * Creates a visual tint layer across the complete accordion
 * card. It cannot capture clicks or interfere with links,
 * buttons or selectable text inside the expanded content.
 */
.oe-stretch-link:has(.gb-accordion__toggle)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background-color: var(--oe-stretch-link-hover-background);
	opacity: 0;
	transition:
		opacity var(--oe-stretch-link-transition-duration);
}

/*
 * When the open accordion heading is hovered, reveal the
 * tint across the complete card rather than just the heading.
 */
.oe-stretch-link:has(
	.gb-accordion__toggle[aria-expanded="true"]:hover
)::after {
	opacity: 1;
}

/* Full-card keyboard focus indicator while open. */
.oe-stretch-link:has(
	.gb-accordion__toggle[aria-expanded="true"]:focus-visible
) {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.oe-stretch-link
	.gb-accordion__toggle[aria-expanded="true"]:focus-visible {
	outline: none;
}

.oe-button-au-popup {
	padding: 8px 8px;
	line-height: 18px;
}

.popmake-close {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    background: var(--oe-color-secondary-6);
    z-index: 1;
    color: #FFF;
    border-radius: 0px 3px 0 3px;
}

.oe-webinar-speaker-section {
	margin-top: 1em;
}

.oe-webinar-lower-hero-wrapper {
	display: flex;
	align-items: center;
	gap: 2em;
	margin-top: 1em;
}

.oe-webinar-lower-hero-wrapper .oe-webinar-date-output,
.oe-webinar-lower-hero-wrapper .oe-webinar-event-type {
	display: flex;
	align-items: center;
	gap: 5px;
}

.oe-webinar-select-session .uk-subnav-pill,
.oe-webinar-select-session .uk-subnav-pill li {
	width: 100%;
}

.oe-card-related-webinars {
	display: flex;
	gap: 1em;
	height: 100%;
}

.oe-card-related-webinars_featured-image {
	margin-top: 4px;
}

.oe-card-related-webinars_featured-image img {
	width: 60px;
	border-radius: 3px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.oe-related-webinars-section_title {

}

.oe-card-related-webinars_title {
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
}

.oe-card-related-webinars_excerpt {
	display: block;
	font-size: 0.7rem;
}

.oe-card-related-webinars_icon {

}

.oe-button-xsmall {
	padding-top: 0.206em;
	padding-bottom: 0.206em;
	padding-left: 0.412em;
	padding-right: 0.412em;
	font-size: 0.8rem;
}

.oe-webinar-speaker-wrapper {
    gap: 0.5em;
    /*padding: 0.8em;*/
    border-radius: 0.7em;
    /*background: rgba(0, 0, 0, 0.065);*/
}

.oe-webinar-speaker-wrapper .oe-webinar-speaker-name {
	color: #FFFFFF;
}

.oe-webinar-speaker-image {
    width: 36px;
}

.oe-webinar-speaker-position {
    color: var(--oe-color-primary-1-300);
}

.single-team-item__social-link:nth-child(2) {
	border-right: 0;
}

.single-team-modal__sidebar .heading--4 {
	margin-bottom: 10px;
}


/* Migrated from staging for webinars work */

.oe-card-related-webinars .oe-date-wrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3px;
}

.oe-card-related-webinars .oe-date-month {
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.oe-card-related-webinars .oe-date-date {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
}

.oe-card-related-webinars .oe-date-year {
    font-size: 0.8rem;
    line-height: 1rem;
    font-weight: bold;
    color: var(--oe-color-secondary-9);
}

.oe-stretch-link.oe-no-hover-background a:hover::after {
  background: rgba(0, 0, 0, 0);
}

.oe-background-hover-secondary:hover {
	background: #003469;
}

.oe-webinar-lower-hero-wrapper .oe-webinar-event-type {
	text-transform: capitalize;
}

.oe-grid-wrapper span.gb-text {
	line-height: 1.2;
}

.oe-menu-client-login {
	margin-left: 1em;
}


@media (max-width: 479px) {
	.gm01__secondary-menu.oe-menu-client-login {
		display: block;
		margin-left: 0;
	}
	nav.gm01__socket-container {
		justify-content: space-between;
	}
}


.oe-menu-heading-underline {
	border-bottom: 1px solid rgba(0,52,105,.15);
}

.oe-slider-related-items .oe-background-default .oe-related-item-date,
.oe-slider-related-items .oe-color-bg-trans-light-10 .oe-related-item-date {
	color: var(--oe-color-primary);
}

.oe-slider-related-items .oe-color-bg-trans-light-10 .oe-related-item-title {
	color: #FFFFFF;
}

.oe-slider-container-offset {
    margin: -11px -8px -39px -8px;
    padding: 11px 8px 39px 8px;
}

@media (min-width: 768px) {
	.oe-slider-related-items .oe-slider-dotnav {
		justify-content: flex-start;
	}
}

@media (max-width: 767px) {
	.oe-slider-related-items .oe-slider-dotnav {
		justify-content: center;
	}
}

.oe-slider-column-content {
	padding: var(--oe-spacing-xsmall) var(--oe-spacing-xsmall) var(--oe-spacing-xsmall) 0;
}


/* FLAG layer (bottom) — right strip, fills height */
.oe-hero-overlay-usa::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30%; /* default desktop/tablet */
  background: url("https://www.oxfordeconomics.com/wp-content/uploads/2025/08/usa-flag.png")
              right center / cover no-repeat;
  pointer-events: none;
  z-index: 0;

  /* Mask: left edge transparent ➜ fades into flag */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 300%);
  mask-image: linear-gradient(to right, transparent, #000 400%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Mobile: widen the strip */
@media (max-width: 767px) {
  .oe-hero-overlay-usa::before {
    width: 40%;
  }
}

/* WHITE TINT (top) — across whole overlay */
.oe-hero-overlay-usa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 1;
}

/* -------- Fallback (no CSS mask support) -------- */
@supports not ((mask-image: linear-gradient(to right, transparent, #000)) or
               (-webkit-mask-image: linear-gradient(to right, transparent, #000))) {
  .oe-hero-overlay-usa::before {
    /* Recreate the fade using a gradient overlay inside the same right strip */
    background-image:
      linear-gradient(to right, rgba(0, 52, 105, 1), rgba(0, 52, 105, 0) 40px),
      url("https://www.oxfordeconomics.com/wp-content/uploads/2025/08/usa-flag.png");
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
    background-size: 40px 100%, cover;
  }
}


#popmake-115884 .pum-content + .pum-close {
	color: #FFFFFF;
}

.oe-product-page-testimonials .uk-slidenav {
	background-color: var(--oe-color-secondary-light-90);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.oe-pillar-page-testimonials .uk-slidenav {
	background-color: #ffffff;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

@media (max-width: 767px) {
	.oe-product-page-testimonials {
		padding-right: 30px;
	}
	.oe-pillar-page-testimonials {
		padding-right: 30px;
	}
}

.oe-product-page-testimonials .oe-testimonial-text {
	font-size: 1.5rem;
}

.oe-pillar-page-testimonials .oe-testimonial-text {
	font-size: 1.5rem;
}

.oe-default-subnav.oe-subnav-pill a, .oe-default-subnav.oe-subnav-pill.uk-subnav-pill > * > :first-child {
    background-color: var(--oe-color-muted);
    color: #494949;
    /* box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.05); */
    font-size: 0.8rem;
}

.oe-default-subnav.uk-subnav {
	margin-top: 3px;
    margin-bottom: 3px;
    gap: 8px;
    margin-left: 5px;
}

.oe-default-subnav.uk-subnav > * {
    padding-left: 0px;
}

.oe-switcher-related-items .oe-color-bg-trans-light-10 .oe-related-item-title {
	color: #FFFFFF;
}

.oe-product-page-testimonials .oe-image-testimonial-company,
.oe-pillar-page-testimonials .oe-image-testimonial-company {
	bottom: 2px;
    right: 0px;
    border: 3px solid #FAFAFA;
    border-radius: 500px;
}

.oe-product-page-testimonials .oe-image-testimonial-profile,
.oe-pillar-page-testimonials .oe-image-testimonial-profile {
	height: 60px;
	width: auto;
}

.oe-product-page-testimonials .oe-image-testimonial-profile img, 
.oe-pillar-page-testimonials .oe-image-testimonial-profile img {
	height: 60px;
	width: auto;
	border-radius: 50%;
	border: 3px solid var(--oe-color-trans-dark-10);
}


.oe-product-page-testimonials .oe-image-testimonial-profile.oe-testimonial-type-company img,
.oe-pillar-page-testimonials .oe-image-testimonial-profile.oe-testimonial-type-company img {
	border-radius: 5px;
	padding: 0;
	box-shadow: none;
	border: 0;
}

.oe-product-page-testimonials .oe-testimonial-name-and-company,
.oe-pillar-page-testimonials .oe-testimonial-name-and-company {
	margin-left: 10px;
}

.oe-related-item-title {
	line-height: 1.2;
}

.wpgb-facet.wpgb-facet-3 > fieldset:last-child,
.wpgb-facet.wpgb-facet-19 > fieldset:last-child {
    margin-bottom: 0;
}

.oe-button-toggle:focus-visible {
  outline: 2px solid var(--oe-color-sky-blue);
  outline-offset: 3px;
  border-radius: 3px;
}


/* start - migrated from staging site 10-Nov-25 Unlock home hero */
.oe-dotnav {
	display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.oe-dotnav > * >:hover, .oe-dotnav>.uk-active>* {
	background-color: var(--oe-color-sky-blue);
}

.oe-dotnav > * > * {
	width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    border: 2px solid var(--oe-color-sky-blue);
}

.oe-dotnav a {
	text-decoration: none;
	color: #FFFFFF;
    align-content: center;
    flex-wrap: wrap;
    width: 26px;
    height: 26px;
    transition: 0.25s;
}

.oe-slidenav a {
	padding: 4px 12px;
}

.oe-slidenav {

}

.oe-hero-insights-ticker-wrapper {
	/*background: rgba(69, 80, 85, 0.6);*/
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding-left: 6px;
    margin-right: -1px;
}

section.oe-background-heritage-blue .oe-latest-insights-ticker-wrapper {
	background-color: rgba(255, 255, 255, 0.11);
}

.oe-hero-insights-ticker-wrapper .oe-hero-insights-slider-image {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
}

.oe-hero-insights-ticker-wrapper .oe-hero-insights-slider-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;  /* crop to square if needed */
	display: block;     /* avoid inline gaps */
}

@media (min-width: 968px) {
	.oe-hero-insights-ticker-wrapper .oe-hero-insights-slider-text {
		width: 80%;
	}
}

.oe-latest-insights-ticker-wrapper {

}

.oe-latest-insights-ticker-wrapper .oe-latest-insights-slider-image {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
}

.oe-latest-insights-ticker-wrapper .oe-latest-insights-slider-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;  /* crop to square if needed */
	display: block;     /* avoid inline gaps */
}

.oe-hero-insights-ticker-wrapper .oe-hero-insights-slider-text {
	padding-top: 6px;
	padding-left: 6px;
	padding-right: 10px;
	padding-bottom: 6px;
}

.oe-latest-insights-ticker-wrapper .oe-latest-insights-slider-text {
	padding-top: 6px;
	padding-left: 6px;
	padding-right: 10px;
	padding-bottom: 6px;
}

.oe-hero-insights-ticker-wrapper .oe-insights-item {
	position: relative;
}

.oe-latest-insights-ticker-wrapper .oe-insights-item {
	position: relative;
}

.oe-button-sky-blue {
	background: var(--oe-color-sky-blue);
	color: #FFFFFF;
}

.oe-button-sky-blue:hover {
	background-color: #037AB1;
}


@media (max-width: 967px) {
	.oe-home-hero-insights {
		/*position: relative;*/
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.oe-home-hero-insights {
		/*background: var(--oe-color-heritage-blue);*/
		background: none;
	}
	
	.oe-space-saver-home-hero-top {
		height: 180px;
	}
	.oe-hero-post-excerpt {
		display: none;
	}
}


@media (min-width: 968px) {
	.oe-home-hero-insights,
	.oe-home-hero-navigation {
		position: absolute;
		box-sizing: border-box;
	}
	.oe-home-hero-insights {
		top: 0;
	    left: 0;
	    right: 0;
	}
	.oe-home-hero-navigation {
		bottom: 0;
	    left: 0;
	    right: 0;
	}
	.oe-space-saver-home-hero-top {
		height: 100px;
	}
}

@media (max-width: 479px) {
	.oe-home-hero-navigation {
		position: absolute;
		box-sizing: border-box;
		bottom: 45px;
	    left: 0;
	    right: 0;
	}
}

@media (min-width: 480px) and (max-width: 967px) {
	.oe-home-hero-navigation {
		position: absolute;
		box-sizing: border-box;
		bottom: 0px;
	    left: 0;
	    right: 0;
	}
}

.oe-list-consulting-reports,
.oe-list-events-home-unlock {
	margin-bottom: var(--oe-spacing-base);
}


/* end - migrated from staging site 10-Nov-25 */

.oe-pillar-excerpt,
.oe-pillar-reveal-on-hover {
	transition: opacity 0.3s ease;
	opacity: 0;
}

.oe-pillar-card:hover .oe-pillar-excerpt, 
.oe-pillar-card:focus-within .oe-pillar-excerpt,
.oe-pillar-card:hover .oe-pillar-reveal-on-hover, 
.oe-pillar-card:focus-within .oe-pillar-reveal-on-hover {
	opacity: 1;
}

.oe-pillar-title {

}

.oe-pillar-card:hover .oe-pillar-title {
	color: var(--oe-color-sky-blue);
}

.oe-pillar-card:hover .oe-pillar-excerpt.oe-button, 
.oe-pillar-card:focus-within .oe-pillar-excerpt.oe-button,
.oe-pillar-card:hover .oe-pillar-reveal-on-hover.oe-button, 
.oe-pillar-card:focus-within .oe-pillar-reveal-on-hover.oe-button {
	display: inline-flex;
}

.oe-dotnav a:focus {
	border-radius: 500px;
	outline-offset: 1px;
}

.oe-list-events.oe-list-events-home-unlock {
	background: rgba(255,255,255,0.3);
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: var(--oe-border-radius-base);
}

.oe-list-events.oe-list-events-home-unlock.uk-list-divider > :nth-child(n+2) {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.oe-latest-insights-ticker .oe-slider-item {
	padding-left: 6px;
}

.oe-image-unlock-as-text {
	background-image: url(/wp-content/uploads/2025/11/UNLOCK-text-white.svg);
    background-size: 100%;
    display: inline-flex;
    height: 34px;
    width: 205px;
    background-repeat: no-repeat;
}

.oe-reduce-size .oe-image-unlock-as-text {
	height: 25px;
	width: 150px;
}

.oe-section-hero-pillar h1.oe-reduce-size {
	gap: 0;
}

.oe-section-hero-pillar h1.oe-reduce-size .oe-heading-partial-1 {
	font-size: var(--oe-font-size-medium);
}

.oe-section-hero-pillar h1 {
	display: flex;
	flex-direction: column;
	gap: var(--oe-spacing-small);
}

.oe-section-hero-pillar h1 .oe-heading-partial-1 {
	font-size: var(--oe-font-size-xlarge);
	color: var(--oe-color-sky-blue);
	font-weight: bold;
}

.oe-section-hero-pillar h1 .oe-heading-partial-2 .oe-text {
	display: inline-flex;
	font-weight: bold;
}

.oe-section-hero-pillar h1.oe-reduce-size .oe-heading-partial-2 .oe-text {
	font-size: var(--oe-font-size-xlarge);
}

.oe-section-hero-pillar h1 .oe-heading-partial-2 {
	text-transform: uppercase;
}

.oe-card-hover-parent .oe-card-image {
  display: block;
  width: 100%;
  height: auto;       /* modern browsers */
  object-fit: cover;          /* keeps image nicely cropped */
}

/* Base style for all hover-children */
.oe-card-hover-child {
  opacity: 0;
  pointer-events: none;       /* avoid blocking hover when hidden */
  transform: translateY(var(--oe-card-hover-translate));
  transition:
    opacity var(--oe-card-hover-duration) var(--oe-card-hover-ease),
    transform var(--oe-card-hover-duration) var(--oe-card-hover-ease);
}

/* When parent is hovered or focused, reveal children */
.oe-card-hover-parent:hover .oe-card-hover-child,
.oe-card-hover-parent:focus-within .oe-card-hover-child {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;       /* clickable once visible */
}

.oe-profile-card-modal > .uk-modal-dialog {
	max-width: 28rem!important;
}

/* The blue overlay */
.oe-card-hover-parent::after {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  pointer-events: none; /* don’t block clicks */
  
  /* Fallback color (tweak opacity to taste) */
  background-color: rgba(0, 173, 220, 0.16);

  /* If you want to tie into your token: 
     background-color: color-mix(in srgb, var(--oe-color-skyblue) 20%, transparent);
     (you can keep the rgba as a fallback above)
  */

  opacity: 0;
  transition:
    opacity var(--oe-card-hover-duration) var(--oe-card-hover-ease);
  
  /* Sit above the image but below the hover icons */
  z-index: 1;
}

/* Show overlay on hover or when any child is focused (keyboard) */
.oe-card-hover-parent:hover::after,
.oe-card-hover-parent:focus-within::after {
  opacity: 1;
}

.wpgb-facet.wpgb-facet-22>fieldset:last-child {
    margin-bottom: 0;
}

.wpgb-facet.wpgb-facet-22.wpgb-style-1 [role=button].wpgb-button {
	font-size: 0.775rem;
    font-weight: 500;
    padding: 2px 14px;
    border-radius: 5px;
    background-color: #f4f7fa;
    color: #494949;
    border-color: rgba(0,0,0,0.05);
}

.wpgb-facet.wpgb-facet-22 .wpgb-button[aria-pressed=true] {
    background-color: var(--wpgb-accent-scheme-1);
    border-color: var(--wpgb-accent-scheme-1);
    color: #fff;
}

.oe-home-hero .oe-flex-hero {
	align-items: flex-start;
	justify-content: center;
}

@media (max-width: 479px) {
	.oe-home-hero .oe-flex-hero {
		align-items: flex-start;
		padding-top: 0;
		justify-content: flex-start;
	}
}

.oe-home-hero .oe-hero-post-headline {
	font-size: var(--oe-font-size-xlarge);
}

@media (max-width: 479px) {
	.oe-home-hero .oe-hero-post-headline {
		font-size: var(--oe-font-size-large);
	}
}

a.oe-border-circle:focus {
	border-radius: 500px;
}

.post-type-archive-profile .oe-card-hover-parent {
	border: 1px solid rgba(0,0,0,0.1);
}

.oe-home-hero {
	min-height: var(--oe-height-100-less-header);
}

.oe-space-saver-home-hero {
	height: 132px;
}

@media (min-height: 676px) {
	.oe-space-saver-home-hero-top {
		height: 132px;
	}
}

.oe-space-saver-home-hero-bottom {
	height: 76px;
}

/* This fixes the default theme link style which adds a grey colour and an underline */
.oe-link-fix a:not([class]) {
	color: var(--oe-color-link);
    text-decoration: none;
}

.oe-link-fix a:not([class]):hover {
	color: var(--oe-color-link-hover);
	text-decoration: underline;
}

.oe-background-glass-light {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(8.4px);
	-webkit-backdrop-filter: blur(8.4px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.oe-text-heritage-blue a {
	color: var(--oe-color-heritage-blue);
}

.oe-text-primary a {
	color: var(--oe-color-primary);
}

.oe-text-secondary a {
	color: var(--oe-color-secondary);
}

a:hover {
	cursor: pointer;
}

ul, ol {
	margin: 0;
}

.oe-breadcrumb.uk-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

header {
	border-bottom: 1px solid rgba(0, 52, 105, .15);
}

/* Remove padding from main menus on new header */
#menu-site-header-main-menu > li:first-child > a {
  padding-left: 0;
}

#menu-site-header-extra-menu > li:last-child > a {
  padding-right: 0;
}

.oe-breadcrumb.uk-breadcrumb>*>* {
    font-size: var(--oe-font-size-xsmall);
    /*text-transform: uppercase;*/
    letter-spacing: 0.1px;
	color: var(--oe-color-base);
}

.oe-breadcrumb.uk-breadcrumb > :last-child > span, .oe-breadcrumb.uk-breadcrumb > :last-child > a:not([href]) {
	color: var(--oe-color-neutral);
}

.site-footer {
	border-top: 1px solid var(--base);
}

ul.wp-block-list {
	display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

.site-main>* {
    margin-bottom: 0;
}

.oe-wpml-toggle .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container {
	background-color: var(--base)!important;
	margin-top: 5px;
	margin-left: 6px;
	border-radius: var(--oe-border-radius-small);
	overflow: hidden;
	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
	border: 1px solid rgba(68, 79, 84, 0.2)!important;
}

@media (max-width: 979px) {
	header .oe-wpml-toggle .wp-block-navigation-item__label {
		display: none;
	}
}


.oe-wpml-toggle .wp-block-navigation-item.hasHoverBackgroundColor:hover {
	--hover-background-color: var(--oe-color-cool-grey)50!important;
}

.wpgb-facet .wpgb-facet-title
 {
    margin-bottom: var(--oe-spacing-small)!important;
	font-size: var(--oe-font-size-medium)!important;
	font-weight: 500!important;
}

.wpgb-facet>fieldset:last-child {
    margin-bottom: var(--oe-spacing-medium)!important;
}

.uk-dotnav > * > * {
	width: 20px;
	height: 20px;
}

.one-container .container {
	background-color: inherit;
}

.gb-menu-container--mobile.gb-menu-container--toggled {
	z-index: 10000;
}

.gb-menu-container--mobile.gb-menu-container--toggled .gb-menu-link {
	display: inline-flex;
}

button.oe-webinar-instance-tab,
button.oe-webinar-instance-tab:hover {
	color: var(--oe-color-base);
}

@media (max-width: 1400px) {
	.oe-mega-menu .oe-dropdown-full-width .oe-container {
		width: 100%;
		padding-left: 30px;
		padding-right: 30px;
	}
}

.oe-trigger-search {
	display: none;
	visibility: hidden;
}

.oe-hero-gbv2 .oe-flex.oe-flex-between.oe-width-1-1 {
	flex-wrap: wrap;
	gap: var(--oe-spacing-xsmall);
}

@media (max-width: 479px) {
	.oe-header-cta .oe-button-small {
		font-size: 0.7rem;
		padding-top: 0.65rem;
		padding-bottom: 0.65rem;
	}
}

.tax-industry .site-content,
.tax-region .site-content,
.tax-country .site-content {
	display: flex;
	flex-direction: column;
}

.site-content {
	word-wrap: normal ;
}



/* Clickable diagonal stripe */
/* Corner box that holds the stripe */
.oe-card-stripe-link {
	position: relative;
	width: clamp(72px, 24vw, 110px);
	height: clamp(72px, 24vw, 110px);
	overflow: hidden;
}

/* Draw the diagonal stripe inside the corner box */
.oe-card-stripe-link::before {
	content: "";
	position: absolute;
	right: -26%;
	bottom: 16%;
	width: 140%;
	height: clamp(16px, 4vw, 28px);
	background: rgba(20, 20, 20, 0.9);
	transform: rotate(-40deg);
	transform-origin: center;
	pointer-events: none;
}

/* Make the link fill the whole corner box */
.oe-card-stripe-link > a {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	z-index: 2;
}

/* Optional hover/focus */
.oe-card-stripe-link > a:hover + *,
.oe-card-stripe-link > a:focus-visible {
	outline: none;
}

.oe-card-stripe-link:has(> a:hover)::before,
.oe-card-stripe-link:has(> a:focus-visible)::before {
	background: rgba(0, 0, 0, 0.98);
}

/* =========================
   3 column PRODUCT GRID START
   ========================= */


/* =========================
   OUTER PRODUCT GRID
   ========================= */
.oe-product-page-feature-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 420px) minmax(0, 1fr);
	grid-template-areas: "left center right";
	align-items: center;
}

.oe-product-page-feature-grid-left {
	grid-area: left;
	display: grid;
	gap: 1.5rem;
	align-content: start;
}

.oe-product-page-feature-grid-center {
	grid-area: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oe-product-page-feature-grid-right {
	grid-area: right;
	display: grid;
	gap: 1.5rem;
	align-content: start;
}

/* =========================
   CENTER INNER GRID
   Desktop = stacked
   ========================= */
.oe-product-page-feature-grid-center-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
}

/* =========================
   FEATURE CARD EXAMPLE
   ========================= */
.oe-product-page-feature-card {
	height: 100%;
}

/* Optional: keep center image responsive */
.oe-product-page-feature-grid-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

/* Optional: center the text block in middle column */
.oe-product-page-feature-grid-text {
	text-align: center;
}

/* =========================
   DESKTOP ONLY
   ========================= */

@media (min-width: 1025px) {
	.oe-product-page-feature-grid {
		align-items: start;
	}

	.oe-product-page-feature-grid-center {
		align-self: center;
	}
}

/* =========================
   TABLET ONLY
   Center goes first, full width
   A and C sit below at 50/50
   ========================= */
@media (min-width: 769px) and (max-width: 1024px) {
	.oe-product-page-feature-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"center center"
			"left right";
		align-items: start;
	}

	.oe-product-page-feature-grid-center-inner {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		align-items: center;
	}

	.oe-product-page-feature-grid-text {
		text-align: left;
	}
}

/* =========================
   MOBILE ONLY
   Center first, then left, then right
   Center inner goes back to stacked
   ========================= */
@media (max-width: 768px) {
	.oe-product-page-feature-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"center"
			"left"
			"right";
		align-items: start;
	}

	.oe-product-page-feature-grid-center-inner {
		grid-template-columns: 1fr;
	}

	.oe-product-page-feature-grid-text {
		text-align: center;
	}
}

/* =========================
   3 column PRODUCT GRID END
   ========================= */

/* Fixes issue where the divider heading was adding bottom margin to containers which have their spacing sontrolled by flexbox and gap */
[class^="oe-gap-"] > h2.oe-heading.oe-underline-after-primary-small:first-child,
[class*=" oe-gap-"] > h2.oe-heading.oe-underline-after-primary-small:first-child {
    margin-bottom: 0;
}




/* fixes for old Clarity blocks after converting to static HTML START */

.m19, .m05, .inside-article .m14 .m14-inner, .m15 .m15__container {
	margin-left: auto;
    margin-right: auto;
    max-width: 1270px;
    width: 90%;
}

.inside-article .m14 .m14-inner {
	padding-left: 0;
	padding-right: 0;
}

.m31__tags {
    display: flex;
    flex-wrap: wrap;
}

.hs-form .m31__tags .hs-button, .m31__tags .button, .m31__tags .hs-form .hs-button {
	margin: 0 5px 10px;
}

.button, .hs-form .hs-button, a.button {
    position: relative;
    display: inline-flex;
    text-align: center;
    text-decoration: none;
    max-width: 100%;
    border: 0;
    background-color: #00addc;
    color: #003469;
    font-size: 1rem;
    white-space: normal;
    line-height: 1;
    padding: .813em 1.875em;
    border-radius: 5px;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    align-items: center;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.button--tag,
a.button--tag {
    padding: .563em 1em;
    font-size: .825em;
    font-weight: 700;
    background-color: rgba(0, 52, 105, .1);
    border-radius: 3px;
}

.button--tag:hover,
a.button--tag:hover {
    background-color: #003469;
    color: #fff;
}

@media (min-width: 960px) {
	.m14 .m14-inner .m14-content {
		padding-bottom: 60px;
	}
}

.m18-gb-items .single-page-item__content .button.button--arrow {
	margin-top: 1em;
}


/* fixes for old Clarity blocks after converting to static HTML END */

/* ==========================================================================
   OE Motion Library
   Version: 1.0.0

   Provides:
   - Subtle fade and slide entrance effects
   - Once-only and replay-on-scroll behaviour
   - Staggered groups
   - Manual entrance and exit states
   - Horizontal marquees
   - Reduced-motion accessibility support

   JavaScript dependency:
   - Requires the OE Motion JavaScript snippet for viewport detection.
   ========================================================================== */


/* ==========================================================================
   1. Global motion tokens
   ========================================================================== */

:root {
	/* Standard animation durations */
	--oe-motion-duration-base: 520ms;
	--oe-motion-duration-fast: 360ms;
	--oe-motion-duration-slow: 720ms;

	/* Standard movement distances */
	--oe-motion-distance-base: 14px;
	--oe-motion-distance-small: 8px;
	--oe-motion-distance-large: 24px;

	/* Entrance stagger intervals */
	--oe-motion-stagger-base: 70ms;
	--oe-motion-stagger-fast: 45ms;
	--oe-motion-stagger-slow: 110ms;

	/* Smooth, restrained easing */
	--oe-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);

	/* Marquee defaults */
	--oe-motion-marquee-duration-base: 36s;
	--oe-motion-marquee-duration-fast: 24s;
	--oe-motion-marquee-duration-slow: 52s;
	--oe-motion-marquee-gap: var(--oe-spacing-medium, 2rem);
}


/* ==========================================================================
   2. Base motion element
   ========================================================================== */

/*
 * The base .oe-motion class defaults to a simple fade.
 *
 * Content is only visually hidden when JavaScript has added
 * .oe-motion-is-ready to the root HTML element.
 *
 * This means content remains visible if JavaScript is unavailable.
 */

.oe-motion {
	--oe-motion-duration: var(--oe-motion-duration-base);
	--oe-motion-distance: var(--oe-motion-distance-base);
	--oe-motion-delay: 0ms;
	--oe-motion-stagger-delay: 0ms;

	/* Default effect: fade */
	--oe-motion-start-opacity: 0;
	--oe-motion-start-translate: 0 0;

	/*
	 * Exit values default to the same values as the entrance starting state.
	 * This makes the animation naturally reverse when exiting.
	 */
	--oe-motion-exit-opacity: var(--oe-motion-start-opacity);
	--oe-motion-exit-translate: var(--oe-motion-start-translate);
}


/*
 * Initial hidden state.
 *
 * The individual CSS translate property is used rather than transform.
 * This means the library is less likely to overwrite transforms applied
 * by another component.
 */

html.oe-motion-is-ready .oe-motion {
	opacity: var(--oe-motion-start-opacity);
	translate: var(--oe-motion-start-translate);

	transition-property:
		opacity,
		translate;

	transition-duration: var(--oe-motion-duration);
	transition-timing-function: var(--oe-motion-easing);

	transition-delay:
		calc(
			var(--oe-motion-delay) +
			var(--oe-motion-stagger-delay)
		);
}


/* Visible state */

html.oe-motion-is-ready .oe-motion.oe-motion-is-visible {
	opacity: 1;
	translate: 0 0;
}


/*
 * Explicit exit state.
 *
 * This class can be added manually or automatically by the replay logic.
 */

html.oe-motion-is-ready .oe-motion.oe-motion-is-exiting {
	opacity: var(--oe-motion-exit-opacity);
	translate: var(--oe-motion-exit-translate);
}


/* ==========================================================================
   3. Fade effects
   ========================================================================== */

/*
 * .oe-motion by itself already produces a standard fade.
 * .oe-motion-fade is included as a more explicit alternative.
 */

.oe-motion-fade {
	--oe-motion-start-opacity: 0;
	--oe-motion-start-translate: 0 0;
}


/*
 * Direction names describe the direction in which the element travels
 * while entering.
 *
 * Fade up:
 * Starts slightly below its final position and moves upward.
 */

.oe-motion-fade-up {
	--oe-motion-start-opacity: 0;
	--oe-motion-start-translate: 0 var(--oe-motion-distance);
}


/* Starts above and travels downward */

.oe-motion-fade-down {
	--oe-motion-start-opacity: 0;
	--oe-motion-start-translate: 0 calc(var(--oe-motion-distance) * -1);
}


/* Starts on the right and travels left */

.oe-motion-fade-left {
	--oe-motion-start-opacity: 0;
	--oe-motion-start-translate: var(--oe-motion-distance) 0;
}


/* Starts on the left and travels right */

.oe-motion-fade-right {
	--oe-motion-start-opacity: 0;
	--oe-motion-start-translate: calc(var(--oe-motion-distance) * -1) 0;
}


/* ==========================================================================
   4. Slide effects
   ========================================================================== */

/*
 * Slide effects retain full opacity.
 * Only the element's position changes.
 */

.oe-motion-slide-up {
	--oe-motion-start-opacity: 1;
	--oe-motion-start-translate: 0 var(--oe-motion-distance);
}


.oe-motion-slide-down {
	--oe-motion-start-opacity: 1;
	--oe-motion-start-translate: 0 calc(var(--oe-motion-distance) * -1);
}


.oe-motion-slide-left {
	--oe-motion-start-opacity: 1;
	--oe-motion-start-translate: var(--oe-motion-distance) 0;
}


.oe-motion-slide-right {
	--oe-motion-start-opacity: 1;
	--oe-motion-start-translate: calc(var(--oe-motion-distance) * -1) 0;
}


/* ==========================================================================
   5. Duration modifiers
   ========================================================================== */

.oe-motion-duration--fast {
	--oe-motion-duration: var(--oe-motion-duration-fast);
}


.oe-motion-duration--slow {
	--oe-motion-duration: var(--oe-motion-duration-slow);
}


/* ==========================================================================
   6. Movement-distance modifiers
   ========================================================================== */

.oe-motion-distance--small {
	--oe-motion-distance: var(--oe-motion-distance-small);
}


.oe-motion-distance--large {
	--oe-motion-distance: var(--oe-motion-distance-large);
}


/* ==========================================================================
   7. Delay modifiers
   ========================================================================== */

.oe-motion-delay--short {
	--oe-motion-delay: 80ms;
}


.oe-motion-delay--medium {
	--oe-motion-delay: 160ms;
}


.oe-motion-delay--long {
	--oe-motion-delay: 240ms;
}


/* ==========================================================================
   8. Staggered groups
   ========================================================================== */

/*
 * Add .oe-motion-stagger to a wrapper.
 *
 * Descendant elements with .oe-motion will be animated in sequence.
 * The JavaScript calculates and assigns the stagger delays.
 *
 * Do not add .oe-motion to the stagger wrapper itself.
 */

.oe-motion-stagger {
	--oe-motion-stagger-step: var(--oe-motion-stagger-base);

	/*
	 * Prevents unusually large groups from accumulating excessively
	 * long animation delays.
	 */
	--oe-motion-stagger-limit: 12;
}


.oe-motion-stagger--fast {
	--oe-motion-stagger-step: var(--oe-motion-stagger-fast);
}


.oe-motion-stagger--slow {
	--oe-motion-stagger-step: var(--oe-motion-stagger-slow);
}


/*
 * When a replaying stagger group leaves the viewport, remove stagger
 * delays so that the elements leave together rather than slowly
 * disappearing one at a time.
 */

.oe-motion-stagger.oe-motion-is-exiting .oe-motion {
	--oe-motion-stagger-delay: 0ms;
}


/* ==========================================================================
   9. Horizontal marquee
   ========================================================================== */

/*
 * Required structure:
 *
 * .oe-motion-marquee
 *   .oe-motion-marquee__track
 *     .oe-motion-marquee__group
 *     .oe-motion-marquee__group[aria-hidden="true"]
 *
 * The second group must duplicate the first group.
 */

.oe-motion-marquee {
	--oe-motion-marquee-duration:
		var(--oe-motion-marquee-duration-base);

	--oe-motion-marquee-group-gap:
		var(--oe-motion-marquee-gap);

	position: relative;
	overflow: hidden;
	max-width: 100%;
}


.oe-motion-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;

	animation-name: oe-motion-marquee-scroll;
	animation-duration: var(--oe-motion-marquee-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	transform: translate3d(0, 0, 0);
}


/*
 * Padding on each repeated group creates spacing at the join without
 * interfering with the exact -50% looping calculation.
 */

.oe-motion-marquee__group {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--oe-motion-marquee-group-gap);

	width: max-content;
	min-width: max-content;

	padding-inline-end: var(--oe-motion-marquee-group-gap);
}


/* Marquee speed modifiers */

.oe-motion-marquee--fast {
	--oe-motion-marquee-duration:
		var(--oe-motion-marquee-duration-fast);
}


.oe-motion-marquee--slow {
	--oe-motion-marquee-duration:
		var(--oe-motion-marquee-duration-slow);
}


/* Reverse direction */

.oe-motion-marquee--reverse .oe-motion-marquee__track {
	animation-direction: reverse;
}


/* JavaScript-controlled paused state */

.oe-motion-marquee.oe-motion-is-paused
	.oe-motion-marquee__track {
	animation-play-state: paused;
}


/* Optional pause-on-hover modifier */

@media (hover: hover) {
	.oe-motion-marquee--pause-on-hover:hover
		.oe-motion-marquee__track {
		animation-play-state: paused;
	}
}


/*
 * Pause while keyboard focus is within the marquee.
 * This is useful when marquee items contain links or buttons.
 */

.oe-motion-marquee:focus-within
	.oe-motion-marquee__track {
	animation-play-state: paused;
}


/*
 * Functional styling only.
 *
 * Add your normal OE button or icon-button classes to control the
 * appearance of the pause button.
 */

.oe-motion-marquee__toggle {
	cursor: pointer;
}


@keyframes oe-motion-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}


/* ==========================================================================
   10. Reduced-motion accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html.oe-motion-is-ready .oe-motion,
	html.oe-motion-is-ready .oe-motion.oe-motion-is-visible,
	html.oe-motion-is-ready .oe-motion.oe-motion-is-exiting {
		opacity: 1;
		translate: none;

		transition: none;
	}


	/*
	 * Stop the marquee and display only the original content group.
	 */

	.oe-motion-marquee__track {
		flex-wrap: wrap;
		width: auto;

		animation: none;
		transform: none;
	}


	.oe-motion-marquee__group {
		flex-wrap: wrap;
		width: auto;
		min-width: 0;
	}


	.oe-motion-marquee__group[aria-hidden="true"] {
		display: none;
	}
}