@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  line-height: calc(0.5rem + 1em);
}

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

*:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat;
}

html {
  block-size: 100%;
  -webkit-text-size-adjust: none;
}

@media (prefers-reduced-motion: no-preference) {
  html,
  html:focus-within {
    scroll-behavior: smooth;
  }
}
body {
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeSpeed;
  min-block-size: 100%;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
}

:where(img) {
  inline-size: 100%;
}

:where(svg) {
  stroke: none;
  fill: currentColor;
}

:where(svg):where(:not([fill])) {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

:where(textarea) {
  resize: vertical;
}

@supports (resize: block) {
  :where(textarea) {
    resize: block;
  }
}
:where(ul, ol)[role=list] {
  list-style: none;
}

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

:where(a[href], area, button, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  cursor: pointer;
  touch-action: manipulation;
}

:where(input[type=file]) {
  cursor: auto;
}

:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  cursor: pointer;
}

:where(:focus-visible) {
  outline-style: dotted;
  outline-width: 0.1875rem;
  outline-color: currentColor;
}

:where(:focus-visible):not(:active) {
  outline-offset: 0.125rem;
  transition-duration: 0.25s;
}

@media (prefers-reduced-motion: no-preference) {
  :where(:focus-visible) {
    transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
  }
}
:where(button, button[type], input[type=button], input[type=submit], input[type=reset]),
:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  text-align: center;
}

:where(button, button[type], input[type=button], input[type=submit], input[type=reset])[disabled] {
  cursor: not-allowed;
}

:where(button) {
  background: none;
}

@property --gradient-light {
  syntax: "<color>";
  inherits: false;
  initial-value: #f86202;
}
@property --gradient-dark {
  syntax: "<color>";
  inherits: false;
  initial-value: #cd47a4;
}
:root {
  --rtl: 1;
  /* *COLOURS */
  --mouse-x: 0.5;
  --mouse-y: 0;
  /* BACKGROUNDS */
  --bg-main: rgb(2, 18, 30);
  --bg-main-rgb: 2 18 30;
  --bg-main-hover: var(--bg-main);
  --bg-inverse-rgb: 226 241 253;
  --bg-footer: #e7ebed;
  --bg-menu: #e7ebed;
  --bg-menu-mobile: white;
  --bg-popup: rgb(247 248 250 / 0.9);
  --bg-soft: hsl(209deg 57% 14%);
  --bg-black: black;
  --bg-white: white;
  --grey-lightest: #f3f4f6;
  --grey-lighter: #e4e9eb;
  --grey-light: #cbd4d8;
  --grey-medium: #b3b9c8;
  --grey-dark: #919fa9;
  --grey-darker: #7d8a91;
  /* TEXT */
  --text-white: white;
  /* when text should be inverted on lightswitch */
  --text-black: black;
  --text-subdued: var(--grey-dark);
  --text-dark: #444;
  /* consistent use of dark text on white backgrounds that don't change */
  --text-link-hover: var(--theme-light-blue);
  --text-link-visited: var(--theme-magenta);
  /* applied when call to action button is :active */
  --cta-pressed: var(--grey-medium);
  /* THEME COLOURS */
  --theme-blue: #22517b;
  --theme-blue-rgb: 37 81 123;
  --theme-grey: #7e8493;
  --theme-green: #00856c;
  --theme-green-blue: #045c64;
  --theme-orange: #f86202;
  /* --theme-purple: #6d5ba3; */
  --theme-magenta: #cd47a4;
  --theme-alt-blue: #5289b4;
  --theme-dark-blue: #001d32;
  /* DARKER COLOURS */
  --theme-blue-darker: #12324f;
  --theme-green-darker: #008f74;
  --theme-dark-orange: #f86202;
  --theme-orange-darker: #de9109;
  --theme-purple-darker: #60508f;
  --theme-magenta-darker: #8c276f;
  --theme-alt-blue-darker: #12589e;
  --theme-dark-blue-darker: #0c192d;
  --theme-light-blue-darker: #318eb3;
  --theme-light-green-darker: #82b542;
  /* LIGHTER COLOURS */
  --theme-blue-lighter: #2a5e8a;
  --theme-green-lighter: #14c1a0;
  --theme-orange-lighter: #f8d402;
  --theme-purple-lighter: #8977c1;
  --theme-magenta-lighter: #9d2c7c;
  --theme-alt-blue-lighter: #1c82e7;
  --theme-dark-blue-lighter: #243d62;
  --theme-light-blue-lighter: #44a2c7;
  --theme-light-green-lighter: #b7e252;
  /* THEME GENERICS */
  --theme: var(--theme-orange);
  --theme-not-blue: var(--bg-inverse-rgb);
  /* ! need to clean out this theme not blue */
  --gradient-light: var(--theme-orange);
  --gradient-dark: var(--theme-magenta);
  /* default gradients */
  --angle: 0deg;
  /* *LAYOUT */
  /* OVERALL MAX SIZE OF WEBSITE */
  --max-container-width: 85rem;
  /* full width for desktop */
  --container-padding: clamp(2rem, 3vw, 3rem);
  /* PADDING and MARGIN where they need to extend beyond the mainContainer (for carousel, hero, etc)
  calculates excess up to 2 x section gap */
  --inline-reverse-padding: clamp(
      var(--container-padding),
      var(--container-padding) + 0.5 * (100vw - var(--max-container-width)),
      2 * 18rem
  );
  --inline-reverse-margin: calc(-1 * var(--inline-reverse-padding));
  /* container excess is the full amount of space beyond 100rem */
  --inline-container-excess: max(var(--container-padding), (100vw - var(--max-container-width)) / 2 + 3rem);
  /* FONT SIZES */
  --letter-spacing: 0.05ch;
  --text-size-h1: clamp(2.7rem, 1.54rem + 3.16vw, 5rem);
  --text-size-h2: clamp(2.4rem, 1rem + 3vw, 3.5rem);
  --text-size-h3: clamp(1.4rem, 1.2rem + 1.4vw, 2.1rem);
  --text-size-h3-dynamic: var(--text-size-h3);
  --text-size-tiny: 0.8rem;
  --text-size-small: 0.9rem;
  --text-size-standard: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
  --text-size-testimonial: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  --text-size-larger: clamp(1.2rem, 1rem + 0.7vw, 1.4rem);
  --text-size-large: clamp(1.5rem, 1.25rem + 1.2vw, 1.7rem);
  --text-size-menu: 1rem;
  --text-size-label: 1rem;
  --text-size-tag: 0.75rem;
  --text-size-cta: var(--text-size-standard);
  --text-size-icon: 1.125rem;
  --text-size-callout: clamp(2rem, 5vw, 5rem);
  --text-size-micro: 0.75rem;
  --text-size-lang: clamp(0.5rem, 0.75vw, 0.75rem);
  --max-text-width: 52rem;
  /* * can’t use 70ch as won't work for headings; */
  /* FONT WEIGHTS */
  --text-weight-bold: 700;
  --text-weight-medium: 500;
  --text-weight-regular: 300;
  /* SPACING */
  --gap-tiny: 0.5rem;
  --gap-small: 1rem;
  /* used for gaps between text like after headings, between paragraphs, etc */
  --gap: 2rem;
  /* standard gap, default for column spacing */
  --gap-large: 4rem;
  --gap-larger: 6rem;
  --gap-section: 8rem;
  /* static vertical spacing between sections */
  --gap-dynamic-small: clamp(1rem, 2vw, 2rem);
  --gap-dynamic: clamp(1rem, 2vw, 2rem);
  --gap-dynamic-large: clamp(1rem, 6vw, 4rem);
  --gap-section-collapsible: clamp(0rem, 8vw, 8rem);
  /* PADDING */
  --box-padding: 0.8rem;
  --box-padding-shallow: 0.4rem 0.8rem;
  --box-padding-small: 0.4rem;
  /* box-padding-large maintains a gradual shift from 1.25 to 2rem as the screen size reduces.
  2.5vw instead of 2vw to keep the larger size until a small desktop size */
  --box-padding-large: clamp(1.25rem, 2.5vw, 2rem);
  --box-padding-xlarge: calc(2 * var(--box-padding-large));
  /* padding for buttons */
  --btn-padding-block: 0.75rem;
  --btn-padding-inline: 1.4rem;
  --padding-ch: 0.35ch 1ch;
  /* BORDERS and THICKNESS */
  --border-soft: 1px solid rgb(var(--bg-inverse-rgb) / 0.25);
  --border-medium: 1px solid rgb(var(--bg-inverse-rgb) / 0.5);
  --border-hard: 1px solid rgb(var(--bg-inverse-rgb) / 1);
  --border-blue-thick: 5px solid rgb(var(--theme-blue-rgb) / 0.5);
  /* --theme-not-blue is the target theme colour with the exception of blue, which reverts to white */
  --border-theme-hard: 1px solid var(--theme-not-blue, rgb(var(--bg-inverse-rgb) / 0.25));
  --border-theme-medium: 1px solid rgb(var(--theme-not-blue, var(--bg-inverse-rgb)) / 0.5);
  --border-theme-soft: 1px solid rgb(var(--theme-not-blue, var(--bg-inverse-rgb)) / 0.25);
  --arrow-width: 0.125rem;
  --arrow-width-large: 0.25rem;
  --border-width-tiny: 1px;
  --border-width-thin: 0.25rem;
  --border-width-thinner: 0.375rem;
  --border-width: 0.75rem;
  --border-width-large: 1.5rem;
  --border-width-testimonial: 0.1875rem;
  --border-width-button: 0.0625rem;
  --icon-border-width: 0.25rem;
  --border-radius-small: 0.25rem;
  --border-radius-standard: 0.4rem;
  --border-radius-large: 1rem;
  --border-radius-huge: 2rem;
  /* SHADOWS */
  --s: 0.25rem;
  --m: 0.5rem;
  --l: 0.75rem;
  --shadow-opacity: 0.05;
  --shadow-color: rgb(0 0 0 / 0.1);
  --shadow-outline: 0 0 var(--s) var(--shadow-color);
  --shadow-standard: var(--s) var(--s) var(--m) var(--shadow-color);
  --shadow-large: var(--m) var(--m) var(--l) var(--shadow-color);
  --shadow-extra-top: 0 -1px 0px rgb(0 0 0 / 0.3);
  /* see below for dynamic shadows that take into account mouse position */
  --shadow-inset-light: inset 0 0 var(--s) var(--shadow-color);
  --shadow-emboss: inset 0px 1px 0px rgb(255 255 255 / 0.2), inset 0px -1px 0px rgb(0 0 0 / 0.5);
  --bg-white-glow: radial-gradient(ellipse at bottom center, rgb(255 255 255 / 0.8) 0%, rgb(255 255 255 / 0) 75%);
  --bg-blue-glow: radial-gradient(ellipse at bottom center, rgb(23 110 199 / 0.1) 0%, rgb(23 110 199 / 0) 75%);
  /* SIZES OF ICONS IN COMPONENTS */
  --icon-upper-header: clamp(1.25rem, 1.5vw, 1.5rem);
  --icon-size-tiny: 1.5rem;
  --icon-size-small: 2rem;
  --icon-size-standard: 4rem;
  --icon-size-larger: 6rem;
  --icon-size-large: 8rem;
  --icon-size-huge: 16rem;
  /* *UTILITIES */
  /* TRANSITION SPEEDS */
  /* --speed variables defined under animations.scss with prefers motion */
  --transition-out-quadratic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-out-quartic: cubic-bezier(0.165, 0.84, 0.44, 1);
  --transition-in-out-quadratic: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --transition-bounce: cubic-bezier(0.45, 0.04, 0.37, 1.74);
  /* BACKDROP-FILTER effects */
  --blur-small: 3px;
  --blur-medium: 6px;
  --blur-large: 15px;
  --blur-very-large: 25px;
  --blend-default: normal;
  --blur-underlay-opacity: 0.4;
  /* SCROLL BAR FOR SCROLLERS */
  --scrollbar-width: 0.5rem;
  --bg-scrollbar-track: rgb(from var(--theme-orange) r g b / 20%);
  --bg-scrollbar-thumb: var(--theme-orange);
  --bg-scrollbar-thumb-outline: transparent;
  /* amount to dim disabled objects by */
  --disabled-opacity: 0.24;
}

@supports (container-type: inline-size) {
  :root {
    --text-size-h3: clamp(1.4rem, 1.2rem + 5cqi, 2.1rem);
    --text-size-large: clamp(1.4rem, 0.5rem + 5cqi, 1.7rem);
  }
}
/* only applies on mouse interfaces, as hover effects are not viable on mobiles */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root {
    --distance-x: calc(-2 * (var(--mouse-x, 0.5) - 0.5));
    --distance-y: calc(-2 * (var(--mouse-y, 0.25) - 0.5));
    --shadow-standard: calc(var(--distance-x) * var(--s)) calc(var(--distance-y) * var(--s)) var(--m) var(--shadow-color);
    --shadow-large: calc(var(--distance-x) * var(--m)) calc(var(--distance-y) * var(--m)) var(--l) var(--shadow-color);
  }
}
@media (prefers-contrast: more) {
  :root {
    --bg-main: black;
    --bg-main-rgb: 0 0 0;
    --bg-main-hover: rgb(0 18 40);
    --bg-inverse-rgb: 255 255 255;
    --bg-footer: white;
    --bg-menu: black;
    --bg-menu-mobile: black;
    --bg-menu-shade: 0 0 0;
    --bg-soft: transparent;
    --bg-popup: white;
    --bg-black: black;
    --bg-white: white;
    --grey-lightest: white;
    --grey-lighter: white;
    --grey-light: white;
    --grey-medium: white;
    --grey-dark: white;
    --grey-darker: white;
    --text-white: white;
    --text-black: black;
    --text-subdued: white;
    --text-dark: black;
    --blur-underlay-opacity: 0;
    --contrast: 50%;
  }
}
:root,
:where(.blue,
.blue-alt,
.blue-lighter,
.blue-green,
.green,
.orange,
.orange-alt,
.gradient,
.purple,
.magenta,
.call-to-action,
.news-showcase__cta,
.hero-container-image-wrapper,
.news-summary-categories > li) {
  /* re-inherit the themes into the colour classes */
  --theme-gradient: linear-gradient(in srgb, var(--gradient-light) 0%, var(--gradient-dark) 100%);
  /* --gradient-light-lighter: lch(from var(--gradient-light) calc(l + 10) c h);
  --gradient-dark-lighter: lch(from var(--gradient-dark) calc(l + 10) c h); */
  --theme-gradient-lighter: linear-gradient(
      in srgb,
      lch(from var(--gradient-light) calc(l + 10) c h) 0%,
      lch(from var(--gradient-dark) calc(l + 10) c h) 100%
  );
  --theme-gradient-triple: linear-gradient(
      in srgb,
      var(--gradient-light) 0%,
      rgb(var(--bg-main-rgb) / 0) 45%,
      var(--gradient-light) 100%
  );
  --border-theme-hard: 1px solid var(--theme-not-blue, rgb(var(--bg-inverse-rgb) / 0.25));
  --border-theme-medium: 1px solid rgb(var(--theme-not-blue, var(--bg-inverse-rgb)) / 0.5);
  --border-theme-soft: 1px solid rgb(var(--theme-not-blue, var(--bg-inverse-rgb)) / 0.25);
  --gradient-border: linear-gradient(var(--bg-main-hover), var(--bg-main-hover)) padding-box, var(--theme-gradient) border-box;
}

/* problem with inheriting the blur on short headers */
:where(.shortHeader) {
  --blur-small: 3px;
}

:root {
  /* //clip paths that can be leverages to create CSS icons */
  --icon-down: polygon(16% 36%, 84% 36%, 50% 70%);
  --icon-arrow-down: polygon(44% 12%, 56% 12%, 56% 64%, 74% 46%, 83% 54%, 50% 88%, 16% 54%, 25% 46%, 44% 64%);
  --icon-cross: polygon(
    28% 19%,
    19% 28%,
    41% 50%,
    19% 71%,
    28% 81%,
    50% 59%,
    72% 81%,
    81% 72%,
    59% 50%,
    81% 28%,
    72% 19%,
    50% 41%
  );
  --icon-tick: polygon(13% 41%, 38% 66%, 88% 16%, 97% 25%, 38% 84%, 4% 50%);
  --icon-external: polygon(
    88% 11%,
    88% 43%,
    77% 43%,
    78% 29%,
    47% 60%,
    47% 60%,
    72% 53%,
    83% 53%,
    83% 84%,
    16% 84%,
    16% 17%,
    47% 17%,
    47% 27%,
    27% 27%,
    27% 73%,
    73% 73%,
    72% 53%,
    47% 60%,
    47% 60%,
    39% 53%,
    70% 22%,
    57% 22%,
    57% 12%
  );
  --icon-download: polygon(
    50% 74%,
    63% 62%,
    87% 61%,
    87% 85%,
    14% 85%,
    14% 62%,
    37% 61%,
    50% 74%,
    50% 68%,
    75% 43%,
    68% 37%,
    55% 51%,
    55% 12%,
    45% 12%,
    45% 50%,
    32% 37%,
    25% 44%,
    50% 68%
  );
  --icon-video: polygon(88% 50%, 20% 14%, 20% 86%);
  --icon-power-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='opacity:0.3' viewBox='0 0 512 512'%3E%3Cpath d='M280 264C280 277.3 269.3 288 256 288C242.7 288 232 277.3 232 264V24C232 10.75 242.7 0 256 0C269.3 0 280 10.75 280 24V264zM56 262C56 368 141.1 454 248 454C354 454 440 368 440 262C440 198.6 409.3 142.3 361.8 107.3C351.1 99.46 348.8 84.43 356.7 73.76C364.5 63.09 379.6 60.82 390.2 68.68C449.5 112.3 488 182.7 488 262C488 394.6 380.5 502 248 502C115.5 502 8 394.6 8 262C8 182.7 46.52 112.3 105.8 68.68C116.4 60.82 131.5 63.09 139.3 73.76C147.2 84.43 144.9 99.46 134.2 107.3C86.74 142.3 55.1 198.6 55.1 262H56z'/%3E%3C/svg%3E");
  --icon-power-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2300a082' d='M147.7 75.54C158.1 89.13 157.1 109.3 143.5 120.6C104.7 152.9 80 201.6 80 256C80 353.2 158.8 432 256 432C353.2 432 432 353.2 432 256C432 201.6 407.3 152.9 368.5 120.6C354.9 109.3 353 89.13 364.3 75.54C375.6 61.95 395.8 60.1 409.4 71.4C462.2 115.4 496 181.8 496 256C496 388.6 388.5 496 256 496C123.5 496 16 388.6 16 256C16 181.8 49.75 115.4 102.6 71.4C116.2 60.1 136.4 61.95 147.7 75.54V75.54z'/%3E%3Cpath fill='RGB(0,160,130,0.6)' d='M256 0C273.7 0 288 14.33 288 32V256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256V32C224 14.33 238.3 0 256 0z'/%3E%3C/svg%3E");
  /* // --icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'  xml:space='preserve'%3E%3Cpath d='M356.5 235.5c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.2.4-7.6-4.2-12.3-12.2-12.3-20.9V167.1c0-7.8 4.7-15.8 12.3-20 7.5-4.3 16.8-5 24.2.4l144 88zM0 256C0 114.6 114.6 0 256 0s256 114.6 256 256-114.6 256-256 256S0 397.4 0 256zm256 240c132.5 0 240-107.5 240-240S388.5 16 256 16 16 123.5 16 256s107.5 240 240 240z'/%3E%3C/svg%3E"); */
  /* // --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M280 80C266.7 80 256 69.25 256 56C256 42.75 266.7 32 280 32H424C437.3 32 448 42.75 448 56V200C448 213.3 437.3 224 424 224C410.7 224 400 213.3 400 200V113.9L200.1 312.1C191.6 322.3 176.4 322.3 167 312.1C157.7 303.6 157.7 288.4 167 279L366.1 80H280zM0 120C0 89.07 25.07 64 56 64H168C181.3 64 192 74.75 192 88C192 101.3 181.3 112 168 112H56C51.58 112 48 115.6 48 120V424C48 428.4 51.58 432 56 432H360C364.4 432 368 428.4 368 424V312C368 298.7 378.7 288 392 288C405.3 288 416 298.7 416 312V424C416 454.9 390.9 480 360 480H56C25.07 480 0 454.9 0 424V120z'/%3E%3C/svg%3E"); */
  /* // --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M344 240h-56L287.1 152c0-13.25-10.75-24-24-24h-16C234.7 128 223.1 138.8 223.1 152L224 240h-56c-9.531 0-18.16 5.656-22 14.38C142.2 263.1 143.9 273.3 150.4 280.3l88.75 96C243.7 381.2 250.1 384 256.8 384c7.781-.3125 13.25-2.875 17.75-7.844l87.25-96c6.406-7.031 8.031-17.19 4.188-25.88S353.5 240 344 240zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z'/%3E%3C/svg%3E"); */
  --icon-magnify: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L486.6 441.4 509.3 464 464 509.3l-22.6-22.6L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z'/%3E%3C/svg%3E");
  /* // --icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M493.3,128l-22.6,22.6L214.7,406.6l-22.7,22.7-22.6-22.6L41.4,278.7l-22.7-22.7,45.3-45.3,22.6,22.6,105.4,105.4L425.4,105.4l22.6-22.7,45.3,45.3Z'/%3E%3C/svg%3E"); */
  /* // --icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M390.6,166.6l22.7-22.6-45.3-45.3-22.6,22.6-89.4,89.4-89.4-89.3-22.6-22.7-45.3,45.3,22.6,22.6,89.4,89.4-89.3,89.4-22.7,22.6,45.3,45.3,22.6-22.6,89.4-89.4,89.4,89.4,22.6,22.6,45.3-45.3-22.6-22.6-89.4-89.4,89.4-89.4h-.1Z'/%3E%3C/svg%3E"); */
  --icon-email: polygon(
    19% 21%,
    18% 21%,
    15% 22%,
    13% 23%,
    12% 26%,
    12% 27%,
    12% 29%,
    13% 33%,
    14% 34%,
    50% 61%,
    86% 34%,
    87% 33%,
    89% 29%,
    88% 27%,
    88% 26%,
    87% 23%,
    85% 22%,
    82% 21%,
    81% 21%,
    19% 21%,
    19% 21%,
    11% 38%,
    11% 69%,
    12% 71%,
    13% 75%,
    16% 77%,
    19% 79%,
    21% 79%,
    79% 79%,
    81% 79%,
    84% 77%,
    87% 75%,
    88% 71%,
    89% 69%,
    89% 38%,
    50% 67%,
    11% 38%,
    11% 38%
  );
  --icon-phone: polygon(
    36.8% 13.4%,
    36.3% 12.4%,
    34.8% 10.9%,
    32.9% 9.9%,
    30.8% 9.7%,
    29.7% 9.9%,
    16.4% 13.6%,
    14.6% 14.4%,
    12.3% 17.4%,
    11.9% 19.4%,
    12.3% 26.3%,
    15% 39.5%,
    20.1% 51.6%,
    27.4% 62.4%,
    36.5% 71.5%,
    47.3% 78.8%,
    59.4% 83.9%,
    72.6% 86.6%,
    79.5% 87%,
    81.5% 86.6%,
    84.5% 84.3%,
    85.3% 82.5%,
    89% 69.2%,
    89.1% 68.1%,
    88.9% 66%,
    88% 64.1%,
    86.4% 62.6%,
    85.5% 62.1%,
    71% 56%,
    69.1% 55.6%,
    65.4% 56.5%,
    64% 57.8%,
    57.9% 65.2%,
    54% 63.2%,
    46.9% 58.2%,
    40.7% 52%,
    35.7% 44.9%,
    33.7% 41%,
    41.1% 34.9%,
    42.4% 33.5%,
    43.3% 29.8%,
    42.9% 27.9%,
    36.8% 13.5%,
    36.8% 13.4%,
    36.8% 13.4%,
    0% 0%
  );
  --icon-list: polygon(
    16% 22%,
    29% 22%,
    29% 24%,
    84% 24%,
    84% 33%,
    35% 33%,
    35% 24%,
    29% 24%,
    29% 42%,
    29% 35%,
    16% 35%,
    16% 30%,
    16% 43%,
    29% 43%,
    29% 45%,
    84% 45%,
    84% 54%,
    35% 54%,
    35% 45%,
    29% 45%,
    29% 63%,
    29% 56%,
    16% 56%,
    16% 64%,
    29% 64%,
    29% 66%,
    84% 66%,
    84% 75%,
    35% 75%,
    35% 66%,
    29% 66%,
    29% 84%,
    29% 77%,
    16% 77%
  );
}

.magnifying-glass {
  /* //apply transparent background so that the mouse can interact and respond to a hover */
  background-color: rgba(0, 0, 0, 0);
  display: grid;
  position: relative;
  aspect-ratio: 1;
  /* //before is the ring part of the CSS shape of the mag glass */
  /* //after is the handle part of the CSS shape of the mag glass */
}
.magnifying-glass::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  inline-size: calc(var(--icon-size) - var(--thickness, 0.1875rem));
  block-size: calc(var(--icon-size) - var(--thickness, 0.1875rem));
  border-radius: 100vmax;
  border: var(--thickness, 0.1875rem) solid currentColor;
  transition: all var(--speed-standard) var(--transition-out-quadratic);
  cursor: pointer;
}
.magnifying-glass::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  border-width: 0;
  background: currentColor;
  inline-size: clamp(var(--handle, 0.25rem) * 2, 0.1vw + var(--handle, 0.25rem) * 1.9, var(--handle, 0.25rem) * 2.3);
  height: var(--thickness, 0.1875rem);
  rotate: 53deg;
  transition: all var(--speed-standard) var(--transition-out-quadratic);
  cursor: pointer;
}
.magnifying-glass:hover::before {
  scale: 1.25;
}
.magnifying-glass:hover::after {
  scale: 1.25;
  right: calc(var(--thickness, 0.1875rem) * -0.5);
  bottom: calc(var(--thickness, 0.1875rem) * -0.5);
}

@font-face {
  font-family: "Montserrat";
  src: url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Medium/Montserrat-Medium.woff2") format("woff2"), url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Medium/Montserrat-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Bold/Montserrat-Bold.woff2") format("woff2"), url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Bold/Montserrat-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Light/Montserrat-Light.woff2") format("woff2"), url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Light/Montserrat-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Light/Montserrat-LightItalic.woff2") format("woff2"), url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Light/Montserrat-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Bold/Montserrat-BoldItalic.woff2") format("woff2"), url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Bold/Montserrat-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Medium/Montserrat-MediumItalic.woff2") format("woff2"), url("/etc/designs/westcon-wcgcom/clientlib-site/assets/fonts/Montserrat%20Medium/Montserrat-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
:where(select, textarea, input:not([type=checkbox]):not([type=radio])) {
  /* //expected to target input[type='text'], input[type='search'], input[type='date'], input[type='tel'], input[type='number'] */
  color: black;
  border-radius: var(--border-radius-small);
  display: block;
  font-weight: var(--text-weight-medium);
  margin-block: var(--gap-tiny) var(--gap-small);
  padding: var(--padding-ch);
  text-overflow: ellipsis;
  box-shadow: var(--shadow-outline);
  inline-size: min(100%, 30ch);
  /* //slightly thinner outline than defined in the :focus style */
  outline-width: 0.125rem;
  /* // the forms are always white, so make the outline the inverse of the background instead */
  /* //needs exception when the item is inside a pop-up though as that is always a light background */
  /* //that is defined in the popups.scss */
  outline-color: RGB(var(--bg-inverse-rgb));
  border: var(--border-soft);
}
:where(select, textarea, input:not([type=checkbox]):not([type=radio]))::placeholder {
  font-weight: var(--text-weight-regular);
}

select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  --arrow: 0.3125rem;
  --arrow-size: 1.25rem;
  --line: 1px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dark) 50%), linear-gradient(135deg, var(--text-dark) 50%, transparent 50%), linear-gradient(to right, var(--grey-light), var(--grey-light));
  --select-start: 50% + 50% * var(--rtl, 1) - var(--rtl, 1) * var(--arrow-size);
  background-position: calc(var(--select-start)) 50%, calc(var(--select-start) + var(--arrow)) 50%, calc(var(--select-start) - var(--rtl, 1) * var(--arrow-size)) 0;
  background-size: var(--arrow) var(--arrow), var(--arrow) var(--arrow), var(--line) 100%;
  background-repeat: no-repeat;
}

input:where([type=checkbox], [type=radio]) {
  display: grid;
  place-items: center;
  grid-template-areas: "stack";
  width: 1.5rem;
  height: 1.5rem;
  aspect-ratio: 1;
  position: relative;
  border: 1px solid currentColor;
  border-radius: var(--border-radius-small);
  vertical-align: middle;
  appearance: none;
  outline: none;
  color: var(--text-white);
  transition: background-color var(--speed-standard) var(--transition-in-out-quadratic);
}
input:where([type=checkbox], [type=radio]):where(:focus, :focus-visible) {
  outline-style: dotted;
}
input:where([type=checkbox], [type=radio]):where(:active, :hover, :focus, :focus-visible) {
  background-color: rgb(var(--bg-inverse-rgb)/0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
input:where([type=checkbox], [type=radio]):where(:active) {
  background-color: rgb(var(--bg-inverse-rgb)/0.2);
}
input:where([type=checkbox], [type=radio])::after {
  grid-area: stack;
  background-color: currentColor;
  animation-timing-function: var(--transition-bounce);
  animation-duration: var(--speed-standard);
  animation-name: zoomIn;
  animation-fill-mode: both;
}
input:where([type=checkbox], [type=radio]):checked::after {
  content: "";
  clip-path: var(--icon-tick);
  width: 80%;
  height: 80%;
}

input[type=radio] {
  border-radius: 100vmax;
}
input[type=radio]:not(:checked):hover::before {
  clip-path: circle(50%);
  content: "";
  opacity: 0.5;
  width: 30%;
  height: 30%;
  grid-area: stack;
  background-color: currentColor;
  animation-timing-function: var(--transition-bounce);
  animation-duration: var(--speed-standard);
  animation-name: zoomIn;
  animation-fill-mode: both;
}
input[type=radio]:checked::after {
  content: "";
  clip-path: circle(50%);
  width: 70%;
  height: 70%;
}

/* //can be used for general search fields that require the magnifying glass */
.search-section {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon search reset";
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: var(--border-radius-small);
  padding-inline: 0.5ch;
  align-items: center;
  color: var(--text-dark);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
.search-section .magnifying-glass {
  --icon-size: var(--icon-upper-header);
  grid-area: icon;
  margin: 0.1875rem;
  pointer-events: none;
  inline-size: var(--icon-upper-header);
}
.search-section input[type=search] {
  grid-area: search;
  inline-size: 100%;
  padding-block: var(--box-padding);
  padding-inline: 0.5ch;
  margin: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}
.search-section input[type=search]:focus::placeholder {
  color: transparent;
}
.search-section input[type=search]::placeholder {
  transition: color var(--speed-standard) var(--transition-out-quartic);
}
.search-section input[type=search]:focus-visible {
  color: #172b49;
  outline: 0;
}
.search-section input[type=search]:invalid + :is(input[type=reset], .reset) {
  opacity: 0;
  pointer-events: none;
}
.search-section input[type=search]::-webkit-search-cancel-button {
  appearance: none;
}
.search-section :is(input[type=reset], .reset) {
  grid-area: reset;
  height: 1.25rem;
  width: 1.25rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity var(--speed-standard) var(--transition-out-quartic);
  background-color: currentColor;
  clip-path: var(--icon-cross);
}

/* // Marketo Styling */
.mktoForm {
  font-family: unset !important;
  font-size: unset !important;
  color: unset !important;
  width: unset !important;
  columns: 3 17.5rem;
  column-gap: var(--gap-large);
  padding-block: var(--gap);
  column-rule: var(--border-soft);
}
.mktoForm :where(select, textarea, input:not([type=checkbox]:not([type=radio]))) {
  margin-block-start: 0.125rem;
}

.mktoFormRow {
  break-inside: avoid;
  margin-block-end: var(--gap-small);
}
.mktoFormRow label {
  width: unset;
}

.mktoFieldWrap {
  position: relative;
  display: grid;
  max-inline-size: 100%;
}
.mktoFieldWrap :where(input, select, textarea, .mktoLogicalField, .mktoLabel, .mktoHasWidth) {
  width: unset !important;
}

select.mktoHasWidth {
  width: 100% !important;
}

.mktoRequiredField::before {
  content: "⊚";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -1.4ch;
  color: tomato;
}

/* // :optional or :not(.mktoRequiredField) */
:where(.mktoCheckboxList, .mktoRadioList) {
  margin-block-start: var(--gap-tiny);
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--gap-tiny);
  align-items: start;
}

:is(.mktoOffset, .mktoClear, .mktoGutter, .mktoAsterix, .mktoRangeValueArrowWrap) {
  display: none;
}

.mktoFieldDescriptor {
  margin-bottom: unset !important;
}

.mktoRangeField {
  display: grid;
}

.mktoRangeValue {
  margin: unset !important;
}

.mktoRangeValueText {
  text-align: center;
}

/* //!if all radio buttons are unselected
// .mktoRadioList:has(:indeterminate) {
//* come back to this for future deployment
// }

//!required field handling
// .mktoFieldWrap:has(input:where([type="text"],[text="textarea"]):where(:placeholder-shown,[value=""],:not([value])))
// .mktoFieldWrap:has(input:where([type="text"],[text="textarea"]):placeholder-shown)

//embedded forms on wistia videos */
.wistiaMarketoFormWrapper :is([type=radio], [type=checkbox]) {
  appearance: revert;
}
.wistiaMarketoFormWrapper .mktoLogicalField:has([name=adminGDPRConsentReceived]) {
  display: flex;
}
.wistiaMarketoFormWrapper .mktoLogicalField:has([name=adminGDPRConsentReceived]) label {
  margin: 0;
}

html {
  /* dynamic font-sizing, so that the font shrinks as the screen becomes smaller. This also affects all the spacing. */
  font-size: clamp(0.875rem, 0.875rem + 0.125 * (100vw - 37.5em) / 25, 1rem);
  scroll-padding-block-start: 5rem;
  /* min size is 0.875rem where 18px text size becomes 15.75px */
  /* dynamic text shrinks between mobile-large and desktop-small viewports */
  /* max size is 1rem (no modification) */
  /*  font-size: calc([font-min] + ([font-max] - [font-min]) * ((100vw - [viewport-min]) / ([viewport-max] - [viewport-min])) ); */
}

/* hide any empty headings, lists and paragraphs, etc */
body:not([data-edit-mode]) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a):empty {
  display: none;
}

h1 {
  font-size: var(--text-size-h1);
  font-weight: var(--text-weight-regular);
  line-height: 1;
}

h2,
.visual-h2 {
  font-size: var(--text-size-h2);
  font-weight: var(--text-weight-regular);
  line-height: 1.15;
}

h3,
.visual-h3 {
  font-size: var(--text-size-h3);
  font-weight: var(--text-weight-bold);
  line-height: 1.3;
}
h3:is(.large, .larger),
.visual-h3:is(.large, .larger) {
  font-size: var(--text-size-h2);
}

h4 {
  font-size: var(--text-size-h4);
  font-weight: var(--text-weight-bold);
  line-height: 1.7;
}

/* max width applied to paragraphs */
p,
li {
  line-height: 1.7;
  max-width: var(--max-text-width);
}

/* text-wrap automatically balances lines to avoid orphans. Enabling by default on all  */
/*titles here and anticipate future updates to components to allow the effect to be turned OFF if required */
:where(h1, h2, h3, h4, h5, h6, .visual-h3, .visual-h3, .large, .larger) {
  text-wrap: pretty;
}

[data-no-balancing] :where(h1, h2, h3, h4, h5, h6) {
  text-wrap: revert;
}

.unbalance-lines {
  overflow-wrap: normal;
}

/* spacing between ordinary titles and paragraphs */
:where(p, h1, h2, h3, h4, h5, h6) + :where(p, ul, ol, img, h4, h5, h6) {
  margin-block-start: var(--gap-small);
}

/* greater gap for a large header following a paragraph or list */
:where(p, ul, ol) + :where(h1, h2, h3) {
  margin-block-start: var(--gap);
}

/* remove margin between sub-heading and a real heading */
:where(.sub-heading) + :where(h2, h3, h4, h5, h6) {
  margin-block-start: unset;
}

:where(a) {
  color: inherit;
}
:where(a):where(:hover, :focus-visible) {
  text-decoration-color: var(--text-link-hover);
  text-decoration-thickness: 2px;
}
:where(a):visited {
  text-decoration-color: var(--text-link-visited);
}

/* exception where a paragraph that has a floated image inside is going to become full width */
p:has(img[style*=float]) {
  max-width: unset;
}

p.large {
  font-size: var(--text-size-large);
  line-height: 1.3;
}
p.larger {
  font-size: var(--text-size-larger);
  line-height: 1.2;
}
p.bold {
  font-weight: var(--text-weight-bold);
}

.size1 {
  font-size: clamp(1.063rem, 1.9vw, 1.186rem);
}

.size2 {
  font-size: clamp(1.125rem, 2.04vw, 1.275rem);
}

.size3 {
  font-size: clamp(1.188rem, 2.19vw, 1.366rem);
}

.size4 {
  font-size: clamp(1.25rem, 2.33vw, 1.458rem);
}

.size5 {
  font-size: clamp(1.313rem, 2.49vw, 1.553rem);
}

.size6 {
  font-size: clamp(1.375rem, 2.64vw, 1.65rem);
}

.size7 {
  font-size: clamp(1.438rem, 2.8vw, 1.749rem);
}

.size8 {
  font-size: clamp(1.5rem, 2.96vw, 1.85rem);
}

.size9 {
  font-size: clamp(1.563rem, 3.13vw, 1.953rem);
}

.size10 {
  font-size: clamp(1.625rem, 3.29vw, 2.058rem);
}

.size11 {
  font-size: clamp(1.688rem, 3.47vw, 2.166rem);
}

.size12 {
  font-size: clamp(1.75rem, 3.64vw, 2.275rem);
}

.size13 {
  font-size: clamp(1.813rem, 3.82vw, 2.386rem);
}

.size14 {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
}

/* UL and LI lists */
/* in the reset, padding and margins are removed but need to restore for lists in appropriate places */
:where(.text-content,
.text-container,
.feature-item__text,
.news-showcase__content,
.text,
.accordion,
.featuresv2,
.blog-our-picks__sidebar,
.blogcontent,
.contentcarouselslide,
.intro__content,
.copy-container) :where(ul, ol) {
  padding-inline-start: 2ch;
}
:where(.text-content,
.text-container,
.feature-item__text,
.news-showcase__content,
.text,
.accordion,
.featuresv2,
.blog-our-picks__sidebar,
.blogcontent,
.contentcarouselslide,
.intro__content,
.copy-container) :where(ul, ol) li {
  padding-inline-start: 0.5ch;
  padding-block-end: 1ch;
}

:where(blockquote) {
  padding: var(--gap-small) var(--gap);
  margin: var(--gap) 0;
  border-inline-start: 0.3rem solid var(--theme);
}

/* sometimes, when pasting in from word or using */
/* AEM's content editor, a font-weight:normal can */
/* be applied to span inside a heading. This */
/* forcefully undoes that and relies on use of */
/* font-weight:var(--text-weight-regular) or 300 */
span[style*="font-weight: normal"] {
  font-weight: inherit !important;
}

details[open] summary {
  border-block-end: var(--border-soft);
  margin-block-end: var(--gap-tiny);
}

/* =–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=– */
/*    Utility classes */
/* =–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=– */
/* useful for responsively sizing images within a container */
.object-fit-cover {
  overflow: hidden;
}
.object-fit-cover > * {
  object-fit: cover;
  block-size: 100%;
  inline-size: 100%;
}

.hidden-overflow {
  overflow: hidden;
}

.scroll-y {
  overflow-y: scroll;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* class to be able to apply the gradient to text. Class should be applied directly to element */
.gradient,
.heading-ruled,
.component-short-header .content-holder h1,
.hero-slide h2,
.blog-entry-header__title,
.stickyPanel section > :is(h2, h3, .visual-h2, .visual-h3) {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: var(--theme-gradient);
}

/* =–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=– */
/*    Text modifiers */
/* =–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=– */
:where(span.quotes)::before {
  content: open-quote;
}
:where(span.quotes)::after {
  content: close-quote;
}

/* apply to a paragraph that has been width limited by default */
.allow-full-width {
  max-width: unset;
}

/* standard paragraphs have limited widths and this class would allow other elements or */
/* containers to be set to the same restriction if placed alongside paragraphs */
:where(.limit-width) {
  max-inline-size: var(--max-text-width);
}

/* for tables or number presentations, applied ad-hoc */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

:where(.medium) {
  font-weight: var(--text-weight-medium);
}

:where(.bold) {
  font-weight: var(--text-weight-bold);
}

.balance-lines {
  text-wrap: balance;
}

/* lesser caps text as sub heading before larger heading */
:where(.sub-heading) {
  text-transform: uppercase;
  font-size: var(--text-size-small);
}

/* when we want a condensed ul or ol of short items */
.compact-list li {
  padding-block: 0;
}

/* for when line clamps are needed, with ability to control number of lines */
.line-clamp {
  --lines: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 3);
  text-overflow: ellipsis;
  overflow: hidden;
}

.clamp-2 {
  --lines: 2;
}

.clamp-4 {
  --lines: 4;
}

.clamp-5 {
  --lines: 5;
}

/* allows text to split into auto columns, approx 460px wide */
.multi-column {
  columns: auto 27rem;
  column-gap: var(--gap-large);
}

/* can be set around elements that shouldn't break within a column */
.no-break :where(h3, li, ol, p) {
  break-inside: avoid-column;
}

.float-right {
  max-inline-size: unset;
}
.float-right img {
  float: right;
  float: inline-end;
  margin-inline-start: var(--gap);
  inline-size: clamp(250px, 50vw, 40rem);
}
.float-right + * {
  margin-block-start: unset;
}

@container (max-width: 50rem) {
  .float-right img {
    float: unset;
    margin-inline: unset;
    margin-block-end: var(--gap);
    inline-size: 100%;
  }
}
/* =–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=– */
/*    Display, margin and padding */
/* =–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=– */
:where(.flex) {
  display: flex;
}

:where(.space-evenly) {
  justify-content: space-evenly;
}

:where(.space-around) {
  justify-content: space-around;
}

:where(.space-between) {
  justify-content: space-between;
}

:where(.margin-top) {
  margin-block-start: var(--gap-small);
}

:where(.margin-bottom) {
  margin-block-end: var(--gap-small);
}

:where(.margin-top-large) {
  margin-block-start: var(--gap);
}

:where(.margin-bottom-large) {
  margin-block-end: var(--gap);
}

.margin-section-bottom {
  margin-block-end: var(--gap-section);
}

:where(.padding-small) {
  padding: var(--gap-tiny);
}

:where(.padding-standard) {
  padding: var(--gap-small);
}

:where(.padding-bottom) {
  padding-block-end: var(--gap-small);
}

:where(.block-padding) {
  padding-block: var(--box-padding);
}
:where(.block-padding):where(.large) {
  padding-block: var(--box-padding-large);
}

/* .grid has already been in use on the content on the site, so continue to support this particular configuration */
:where(.grid) {
  display: grid;
  --cols: 1;
  grid-template-columns: repeat(var(--cols), 1fr);
}

:where(.grid-auto-columns) {
  display: grid;
  grid-auto-flow: column;
}

:where(.grid-fixed-columns) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-width, 25rem), 1fr));
}

:where(.gap) {
  gap: var(--gap);
}

:where(.nogap) {
  gap: unset;
}

.col2 {
  --cols: 2;
}

.col3 {
  --cols: 3;
}

.col-fixed-7 {
  --col-width: 8rem;
}

.col-fixed-6 {
  --col-width: 9rem;
}

.col-fixed-5 {
  --col-width: 12rem;
}

.col-fixed-4 {
  --col-width: 15rem;
}

.col-fixed-3 {
  --col-width: 20rem;
}

:where(.fit-content, .fit-width) {
  width: fit-content;
}

/* --bg-img is leveraged on several components so this class would allow the image to be utilised on some custom element if ever required */
.use-bg {
  background-image: var(--bg-img);
}

:where(.bg-img-cover) {
  background-size: cover;
}

/* for when vendor logos need to be manually added to a component */
/* works in conjunction with "grid-auto-columns gap" */
.vendor-logo-sizing img {
  max-inline-size: 10rem;
}
.vendor-logo-sizing.grid-auto-columns img {
  margin-inline: auto;
}

/* special new type of small box, presented similar to the feature/text+image */
.mini-features > * {
  background-color: var(--bg-white-if-light, rgb(var(--bg-inverse-rgb)/0.08));
  border: var(--is-light, var(--border-theme-hard));
  padding: var(--box-padding);
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-standard);
}

:where(.border-soft) {
  border: var(--border-soft);
}

:where(.border-medium) {
  border: var(--border-medium);
}

:where(.border-hard) {
  border: var(--border-hard);
}

:where(.border-separator) {
  border-block-end: var(--border-medium);
}

/* =–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=– */
/*    Tables */
/* =–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=– */
.alternating-rows tr:nth-child(even) {
  background-color: var(--bg-white-if-light, rgb(var(--bg-inverse-rgb)/0.08));
}
.alternating-rows.extended {
  margin: 0 -0.5rem;
}

.padded-cells td,
.padded-cells th {
  padding: 0.3rem 0.5rem;
}

.vertical-align-top,
.vertical-align-top :where(td, th) {
  vertical-align: top;
}

.vertical-align-middle,
.vertical-align-middle :where(td, th) {
  vertical-align: middle;
}

.vertical-align-bottom,
.vertical-align-bottom :where(td, th) {
  vertical-align: bottom;
}

.vertical-align-middle,
.vertical-align-middle :where(td, th) {
  vertical-align: middle;
}

.table-padding-standard,
.table-padding-standard :where(td, th) {
  padding: var(--gap-tiny);
}

.table-left-headings th {
  text-align: left;
}

/* =–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=– */
/*     Ghosts are when items hierarchy items */
/*     removed from the AEM page. Important */
/*     to remove them from the DOM */
/* =–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=–=– */
.ghost {
  display: none;
}

[data-edit-mode] .ghost {
  display: unset;
}

/* A script adds error attribute to images on failure to load */
img[data-error=true] {
  visibility: hidden;
}

.blue-alt {
  /* to allow for westcon stuff */
  --theme: var(--theme-blue);
  --gradient-light: #3f9bbf;
  --gradient-dark: #0f3448;
}

.blue-green,
.green {
  --theme: var(--theme-green);
  --gradient-light: #00a082;
  --gradient-dark: #9e2b7c;
}

.blue,
.orange,
.heading-ruled,
.gradient {
  --theme: var(--theme-orange);
  --gradient-light: #f86202;
  --gradient-dark: #cd47a4;
}

.blue-lighter,
.purple {
  --theme: var(--theme-purple);
  --gradient-light: #9e2b7c;
  --gradient-dark: #172b49;
}

.magenta {
  --theme: var(--theme-magenta);
  --gradient-light: #f86202;
  --gradient-dark: #9e2b7c;
}

:where(.call-to-action, .news-showcase__cta, .partnerCentralLink a, .textimagewithcta .cta-with-arrow) {
  display: inline-block;
  position: relative;
  background: white;
  border: var(--border-width-button) solid transparent;
  border-radius: var(--border-radius-standard);
  font-weight: var(--text-weight-bold);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  appearance: none;
  text-decoration: none;
  text-transform: none;
  user-select: none;
  touch-action: manipulation;
  cursor: pointer;
  word-break: keep-all;
  z-index: 0;
  transition: all var(--speed-slow) var(--transition-out-quadratic);
  /* //the break character is disabled inside buttons */
}
:where(.call-to-action, .news-showcase__cta, .partnerCentralLink a, .textimagewithcta .cta-with-arrow):not(:disabled):hover {
  scale: 1.015;
  background-color: transparent;
  color: white;
  border-color: white;
  filter: brightness(1.2);
}
:where(.call-to-action, .news-showcase__cta, .partnerCentralLink a, .textimagewithcta .cta-with-arrow):not(:disabled):active {
  scale: 1;
  transition-duration: 0;
  color: var(--cta-pressed);
}
:where(.call-to-action, .news-showcase__cta, .partnerCentralLink a, .textimagewithcta .cta-with-arrow):disabled {
  cursor: default;
  opacity: var(--disabled-opacity);
}
:where(.call-to-action, .news-showcase__cta, .partnerCentralLink a, .textimagewithcta .cta-with-arrow) br {
  display: none;
}

:is(.call-to-action, .news-showcase__cta) {
  color: black;
}

:where(.call-to-action.reduced-padding) {
  padding-block: calc(0.5 * var(--btn-padding-block));
}

.primary-link {
  background: var(--theme-gradient);
  border-color: var(--bg-main);
  color: white;
  text-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.5), 0px 0px 0.25rem rgba(0, 0, 0, 0.5);
}
.primary-link:is(:hover, :active, :focus-visible) {
  border-color: var(--theme, white);
}

:is(.secondary-link, .textimagewithcta .cta-with-arrow) {
  background-color: transparent;
  color: white;
  border-color: white;
}
:is(.secondary-link, .textimagewithcta .cta-with-arrow):is(:hover, :active, :focus-visible) {
  background-color: white;
  color: black;
}

:where(.icon-video, .icon-external, .icon-download, .icon-email, .icon-phone, .icon-down) {
  display: grid;
  /*  ! something funny going on with a rem value for the icon size when resizing screen... */
  /*  ? putting px for instead of 1.5rem */
  grid-template: "a b"/24px 1fr;
  align-items: center;
  padding-left: calc(var(--btn-padding-inline) - 12px);
  gap: 1ch;
  inline-size: fit-content;
}
:where(.icon-video, .icon-external, .icon-download, .icon-email, .icon-phone, .icon-down)::before {
  grid-area: a;
  content: "";
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 100vmax;
}
:where(.icon-video, .icon-external, .icon-download, .icon-email, .icon-phone, .icon-down)::after {
  grid-area: a;
  content: "";
  background-color: currentColor;
  width: 60%;
  aspect-ratio: 1;
  margin: auto;
  clip-path: var(--icon);
}

.icon-video {
  --icon: var(--icon-video);
}

.icon-external {
  --icon: var(--icon-external);
}

.icon-download {
  --icon: var(--icon-download);
}

.icon-email {
  --icon: var(--icon-email);
}

.icon-phone {
  --icon: var(--icon-phone);
}

.icon-down {
  --icon: var(--icon-down);
}

/* 
//apply new formatting to paragraphs that have two or more buttons inside, typically coded in manually
//to ensure adequate spacing between them */
p:has(:is(.call-to-action, .news-showcase__cta):nth-child(2)) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-small) var(--gap);
}

/* //in case there are two buttons next to each other, sometimes used when manually adding buttons */
p > :is(.call-to-action, .news-showcase__cta) {
  margin-block-start: var(--gap-small) var(--gap);
}

/* //the carousel button is an outlined button with no fill
//exception for .news-showcase__cta because that was often manually inserted into the carousel */
.carousel-slide__cta a:not(.news-showcase__cta) {
  border-radius: 100vmax;
  /* //text is always white as it's on the gradient */
  color: white;
  border: var(--border-width-button) solid currentColor;
  font-weight: var(--text-weight-bold);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  text-decoration: none;
  text-transform: none;
  user-select: none;
  touch-action: manipulation;
  display: inline-block;
  transition: all var(--speed-slow) var(--transition-out-quadratic);
}
.carousel-slide__cta a:not(.news-showcase__cta):hover {
  scale: 1.025;
  background-color: rgba(255, 255, 255, 0.1);
}

/* popups are used for things like the search box, country selector, etc. */
/* appearance is a light menu that appears over the top of the underlying elements */
:where(.popup, .search-ux-list) {
  position: absolute;
  color: var(--text-dark);
  font-weight: var(--text-weight-medium);
  top: calc(var(--icon-upper-header) + var(--gap-small));
  inset-inline-end: var(--menu-shift-right, calc(-1 * var(--box-padding) - var(--border-radius-standard)));
  inset-inline-start: var(--menu-shift-left, auto);
  /* ! backdrop filter doesn't apply to position:absolute elements */
  /* backdrop-filter: blur(var(--blur-medium)); */
  /* -webkit-backdrop-filter: blur(var(--blur-medium)); */
  border-radius: var(--border-radius-standard);
  padding: var(--box-padding);
  background: var(--bg-popup);
  border: var(--border-soft);
  flex-direction: column;
  transform-origin: top right;
  animation-name: zoomIn, fadeIn;
  animation-duration: var(--speed-standard);
  animation-fill-mode: forwards;
  animation-timing-function: var(--transition-out-quadratic);
  /* filter instead of box-shadow to encompass the ::before triangle */
  filter: drop-shadow(var(--shadow-large));
}
:where(.popup, .search-ux-list)::before {
  --triangle: calc(0.5 * var(--icon-upper-header));
  content: "";
  position: absolute;
  inset-inline-end: var(--menu-shift-right, calc(var(--box-padding) + var(--border-radius-standard)));
  inset-inline-start: var(--menu-shift-left-triangle, auto);
  top: calc(-1 * var(--triangle));
  inline-size: 0;
  height: 0;
  border-left: var(--triangle) solid transparent;
  border-right: var(--triangle) solid transparent;
  border-bottom: var(--triangle) solid var(--bg-popup);
  filter: drop-shadow(var(--shadow-extra-top));
}
:where(.popup, .search-ux-list) :is(select, textarea, input) {
  color: var(--text-dark);
  outline-color: currentColor;
}

/* dialog initially used for YouTube but plan is to also leverage for future Marketo form integration */
/* with native HTML support for backdrop, etc */
dialog {
  padding: var(--box-padding-large);
  inline-size: calc(100vw - 2 * var(--container-padding));
  position: fixed;
  margin: auto;
  border: var(--border-hard);
  background: var(--bg-main);
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(var(--blur-medium));
  backdrop-filter: blur(var(--blur-medium));
}
dialog iframe {
  inline-size: 100%;
}
dialog .close-dialog {
  width: 1.25rem;
  height: 1.25rem;
  translate: -50% 50%;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  cursor: pointer;
  background-color: rgb(var(--bg-inverse-rgb));
  clip-path: var(--icon-cross);
}

@media screen and (prefers-reduced-motion: no-preference) {
  :root {
    --speed-gradual: 3s;
    --speed-snail: 1s;
    --speed-slower: 0.75s;
    --speed-slow: 0.5s;
    --speed-standard: 0.25s;
    --speed-fast: 0.1s;
    --pending: fadeIn var(--speed-slow) var(--transition-bounce) infinite alternate-reverse;
    /* animation for pending flash in out */
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInShallow {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@keyframes riseUp {
  from {
    translate: 0% 100%;
  }
  to {
    translate: 0% 0%;
  }
}
@keyframes zoomIn {
  from {
    scale: 0.8;
  }
  to {
    scale: 1;
  }
}
@keyframes zoomInShallow {
  from {
    scale: 0.95;
    opacity: 0.7;
  }
}
@keyframes slideRight {
  from {
    transform: translateX(-4rem);
  }
  to {
    transform: translateX(0rem);
  }
}
@keyframes slideLeft {
  from {
    transform: translateX(4rem);
  }
  to {
    transform: translateX(0rem);
  }
}
@keyframes menuOpensUp {
  from {
    opacity: 0;
    scale: 0.5 0.9;
  }
  to {
    opacity: 1;
    scale: 1 1;
  }
}
@keyframes caretPulsingDown {
  from {
    translate: 0rem -0.125rem;
  }
  to {
    translate: 0rem 0rem;
  }
}
@keyframes placeHolderShimmer {
  from {
    background-position: -30rem 0;
  }
  to {
    background-position: 30rem 0;
  }
}
body {
  /*  ? considered adding color-scheme: dark but affects all form elements, which want to stay white */
  /*  ? want to revisit after extensive mobile testing */
  color: var(--text-white);
  font-family: "Montserrat", sans-serif;
  font-size: var(--text-size-standard);
  font-weight: var(--text-weight-regular);
  /* letter-spacing: -0.0125em; */
  letter-spacing: var(--letter-spacing);
  overflow-x: clip;
  max-width: 100vw;
  background: var(--bg-main);
  /* &.menu-open also styled inside mega-menu.scss */
}
body.menu-open {
  /*  when the menu is open, prevent further user scrolling so they focus on the menu */
  /* * can cause user issues if they try to scroll up and down while the fixed menu is open */
  overflow-y: hidden;
  margin-right: 14px;
  /*  ? compensate for scrollbar-gutter */
  /*  scrollbar-gutter: stable both-edges;  ! not currently working as expected but revisit later */
}

.mainContainer {
  inline-size: min(100%, var(--max-container-width));
  padding-inline: var(--container-padding);
  margin: 0 auto;
  position: relative;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIwMTQgMjAxNCI+CiAgPHBhdGggZD0iTTEwMDcsNy42TDcuNiwxMDA3bDk5OS40LDk5OS40LDk5OS40LTk5OS40TDEwMDcsNy42Wk01MDcuMywxMDA3bDQ5OS43LTQ5OS43LDQ5OS43LDQ5OS43LTQ5OS43LDQ5OS43LTQ5OS43LTQ5OS43WiIgZmlsbD0iIzAzMTcyNyIgc3Ryb2tlLXdpZHRoPSIwIi8+Cjwvc3ZnPg==");
  background-position: 150% 0%;
  background-size: 90%;
  background-repeat: no-repeat;
}

/* exception to limit the width of a general content component if it's used first after a Hero for primary page */
body:has(.hero-slide-v2) .content-wrapper > .oneColumnContent:first-child {
  inline-size: min(100%, 40rem);
}

/* disable background image if not less contrast and reduced data not set */
@media (prefers-reduced-data: reduced), (prefers-contrast: more) {
  .mainContainer {
    background-image: unset;
  }
}
body[dir=rtl] {
  --rtl: -1;
}
body[dir=rtl] .mainContainer {
  background-position: 0% 0%;
}
body[dir=rtl] .carousel-slide__content-container::before, body[dir=rtl] .carousel-slide__content-container::after {
  display: none;
}

.skip-nav-link {
  position: absolute;
  transform: translateY(-120%);
  transition: transform var(--speed-standard) ease;
  background: var(--bg-main);
  color: var(--text-white);
  padding: 2ch;
  left: 0.5rem;
  z-index: 10;
}
.skip-nav-link:focus-visible {
  transform: translateY(0);
}

/* when there are no search results, show the warning as large text */
[data-no-results] > p {
  text-align: center;
  font-size: var(--text-size-h2);
}

/* data-selected added to the currently selected (single) item */
/* which is used inside dropdown popup lists */
[data-option-selected] {
  position: relative;
}
[data-option-selected]::before {
  content: "";
  position: absolute;
  translate: -1.25ch 0.5ch;
  clip-path: var(--icon-tick);
  background: var(--theme-green);
  width: 1ch;
  height: 1ch;
  display: block;
}

@supports not (scrollbar-color: auto) {
  .scrollbar-h::-webkit-scrollbar {
    height: var(--scrollbar-width);
  }
  .scrollbar-h::-webkit-scrollbar-track {
    background: var(--bg-scrollbar-track);
    border-radius: var(--scrollbar-width);
  }
  .scrollbar-h::-webkit-scrollbar-thumb {
    background-color: var(--bg-scrollbar-thumb);
    border-radius: 6px;
  }
}
.scrollbar-h {
  scrollbar-color: var(--bg-scrollbar-thumb) var(--bg-scrollbar-track);
  scrollbar-width: var(--scrollbar-width);
  scrollbar-gutter: stable;
}

/*
–––––––––––––––––––––––––––––––––––––––––––
 pagination used on vendor list and search
––––––––––––––––––––––––––––––––––––––––––– */
.pagination-container {
  margin-block: var(--gap-large);
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-small);
  touch-action: none;
}

.pagination {
  /* some light differentiation between next and previous */
}
.pagination a {
  display: grid;
  place-items: center;
  block-size: 100%;
  aspect-ratio: 1;
  border: var(--border-medium);
  text-decoration: none;
  transition: background-color var(--speed-standard) ease;
  border-radius: var(--border-radius-small);
  touch-action: none;
}
.pagination a:hover {
  background-color: var(--theme);
  color: white;
}
.pagination a:hover::after {
  border-color: white;
}
.pagination .selected {
  border-color: var(--theme-green);
  border-width: 2px;
  font-weight: var(--text-weight-bold);
}
.pagination :where(.next, .last, .prev) {
  background-color: rgb(var(--bg-inverse-rgb)/0.08);
}
.pagination :where(.next, .last, .prev) button {
  border-color: rgb(var(--bg-inverse-rgb)/0.25);
}

:where(.pagination-next, .pagination-previous)::after {
  position: relative;
  content: "";
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border: solid var(--text-subdued);
  border-width: 0 0.125rem 0.125rem 0;
  padding: 0.125rem;
  transform: rotate(-45deg) translate(-0.1rem, -0.1rem);
}

.pagination-previous::after {
  transform: rotate(135deg) translate(-0.1rem, -0.1rem);
}

.disabled {
  opacity: var(--disabled-opacity);
}

/* 
--------------------------------
    Call to action button
    (used on textimagewithcta and partnercentralapplication)
    Should be applied directly to the element that should contain the arrow
-------------------------------- */
a.cta-with-arrow {
  display: block;
  text-decoration: none;
}

.cta-with-arrow {
  position: relative;
}
.cta-with-arrow::after {
  display: block;
  position: absolute;
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  bottom: 0;
  right: 0;
  border: solid currentColor;
  border-width: 0 var(--arrow-width, 0.125rem) var(--arrow-width, 0.125rem) 0;
  transform: translate(0, -100%) rotate(-45deg);
  transition: transform var(--speed-standard) var(--transition-out-quadratic);
}
.cta-with-arrow:is(:hover, :focus-visible) span {
  background-size: 100% var(--arrow-width, 0.125rem);
}
.cta-with-arrow:is(:hover, :focus-visible)::after {
  transform: translate(0.25rem, -100%) rotate(-45deg);
}
.cta-with-arrow span {
  background-size: 0% var(--arrow-width, 0.125rem);
  background-position: calc(var(--rtl, 0) * -100%) 100%;
  background-repeat: no-repeat;
  background-image: var(--theme-gradient-lighter);
  transition: background var(--speed-slow) var(--transition-out-quadratic);
}

/*
------------------------------------------------------
     Search filters, used on VendorList and Blog Search
 ------------------------------------------------------ */
.search-ux {
  -wekbit-backdrop-filter: invert(0.1) blur(var(--blur-medium));
  backdrop-filter: invert(0.1) blur(var(--blur-medium));
  margin-block: var(--gap-large);
  position: relative;
  z-index: 1;
}

/* exception for when the menu is open, especially for news site when the search overlaps */
.menu-open .search-ux {
  z-index: unset;
}

.search-ux > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  padding: var(--box-padding-large) var(--box-padding);
}
.search-ux > div:has(.search-ux-clear:hover) :is([data-filter] span, input) {
  text-decoration: line-through;
}

.search-ux-search {
  display: flex;
  gap: var(--gap-tiny);
  inline-size: clamp(20ch, 100%, 35ch);
}
.search-ux-search input {
  flex-grow: 1;
  margin: 0;
}

.search-ux-button {
  height: var(--icon-size);
  width: var(--icon-size);
  --icon-size: 1.75rem;
  --handle: 0.3rem;
}
.search-ux-button svg {
  display: none;
}

.search-ux-dropdown {
  z-index: 1;
  position: relative;
}

.search-ux-dropdown button {
  background: none;
  padding: var(--padding-ch);
  border-radius: var(--border-radius-standard);
  border: 1px solid transparent;
}
.search-ux-dropdown button:hover {
  border: var(--border-medium);
}
.search-ux-dropdown button[aria-expanded=true] + .search-ux-list {
  clip-path: unset;
}
.search-ux-dropdown button label {
  pointer-events: none;
}
.search-ux-dropdown button label span {
  margin-right: var(--gap-tiny);
}
.search-ux-dropdown button label::after {
  display: inline-block;
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border: solid currentColor;
  border-width: 0 0.125rem 0.125rem 0;
  padding: 0.125rem;
  transform: translateY(-0.1875rem) rotate(45deg);
}
.search-ux-dropdown button svg {
  display: none;
}

.search-ux-list {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  position: absolute;
  inset-inline: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  /* allows maximum of 11 items to be shown, or up to 70% dynamic screen height */
  max-block-size: min(70dvh, 2 * var(--box-padding) + 11lh + var(--gap-small) * 10);
  overflow-y: auto;
}

/* filter is the ul>li>a */
.search-ux-filter {
  text-decoration: none;
  position: relative;
  display: block;
  inline-size: fit-content;
  /* the animated underline */
}
.search-ux-filter::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 0.125rem;
  background-size: 0% 0.125rem;
  background-position: calc(var(--rtl, 0) * -100%) 100%;
  background-repeat: no-repeat;
  background-image: var(--theme-gradient-lighter);
  transition: background var(--speed-slow) ease;
}
.search-ux-filter:where(:focus-visible, :hover)::after {
  background-size: 100% 0.125rem;
}

.search-ux-clear {
  background: none;
  margin-left: auto;
  display: flex;
  gap: var(--gap-tiny);
  align-items: center;
}
.search-ux-clear::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: rgb(var(--bg-inverse-rgb));
  clip-path: var(--icon-cross);
}

.filter-close-tokens a {
  display: flex;
  align-items: center;
  padding: 1ch 2ch;
  gap: 1ch;
}
.filter-close-tokens .token {
  padding-inline-end: 1.5ch;
  background-color: var(--bg-soft);
  border-color: rgb(var(--bg-inverse-rgb)/0.3);
}
.filter-close-tokens .token:is(:hover, :focus-visible) {
  border-color: currentColor;
}
.filter-close-tokens .icon-cross {
  height: 1rem;
  width: 1rem;
  background-color: currentColor;
  clip-path: var(--icon-cross);
}
.filter-close-tokens:has(.reset:only-child) {
  display: none;
}
/* .blogCallToAction.callToAction
   .blog-call-to-action
     div
       p
         | {{content}}
       p(style='padding-top: 0.5rem;')
         a.action-link(href='#' target='_self' role='button') {{button label}}
     img */
.blogCallToAction.callToAction:not(.cq-Editable-dom) {
  display: contents;
}

.blog-call-to-action {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: var(--gap) 1fr var(--gap);
  margin-block: var(--gap-large);
  align-items: center;
  color: white;
  max-inline-size: var(--max-text-width);
}
.blog-call-to-action::before {
  content: "";
  grid-column: 2/-1;
  grid-row: 1/-1;
  background: var(--theme-gradient);
  block-size: 100%;
}
.blog-call-to-action div {
  grid-column: 3/-1;
  grid-row: 2;
  padding: 0 var(--gap);
}
.blog-call-to-action img {
  display: block;
  grid-column: 1/3;
  grid-row: 2;
  border-radius: var(--border-radius-standard);
  box-shadow: var(--shadow-large);
  background-color: white;
  inline-size: 100%;
}
@charset "UTF-8";
/* .blog-featured-articles
   .blog-featured-articles__top.rule
     h2.blog-featured-articles__top-title {{MAIN TITLE}}
   .blog-featured-articles__main
     .blog-featured-articles__super-featured
       a.blog-featured-articles__card
         figure.blog-featured-articles__card-image-container
           img.blog-featured-articles__card-image
         .blog-featured-articles__card-details
           span
             | Russell Blackburn
           span Insights
           span 1 MONTH AGO
         h3.blog-featured-articles__card-title
           span {{title}}
         .blog-featured-articles__card-description
           {{description}}
     .blog-featured-articles__featured-list
       a.blog-featured-articles__card
         figure.blog-featured-articles__card-image-container
           img.blog-featured-articles__card-image
         .blog-featured-articles__card-details
           span 2 MONTHS AGO
           span Insights
         h3.blog-featured-articles__card-title
           span {{title}}
       a.blog-featured-articles__card
         figure.blog-featured-articles__card-image-container
           img.blog-featured-articles__card-image
         .blog-featured-articles__card-details
           span 4 MONTHS AGO
           span Insights
         h3.blog-featured-articles__card-title
           span {{title}} */
/* many class definitions set inside blogRecentEntries.scss */
.blog-featured-articles__top-link {
  align-self: flex-end;
}
.blog-featured-articles__top-link:after {
  content: " »";
}

.blog-featured-articles__main {
  /* first breakpoint*/
  --w1: 50em;
  --n: 3;
  /* second breakpoint*/
  --w2: 37em;
  --m: 2;
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(clamp(clamp(100% / (var(--n) + 1) + 0.1%, (var(--w1) - 100vw) * 1000, 100% / (var(--m) + 1) + 0.1%), (var(--w2) - 100vw) * 1000, 100%), 1fr));
  gap: var(--gap);
}

.blog-featured-articles__super-featured {
  grid-column: span 2;
  grid-row: span 2;
}

@media only screen and (max-width: 38em) {
  .blog-featured-articles__super-featured {
    grid-column: 1/-1;
  }
}
.blog-featured-articles__featured-list {
  display: contents;
}

.blog-featured-articles__card-description {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-block-start: var(--gap-small);
}
/* .blogOurPicksModule
   .blog-our-picks
     .blog-our-picks__top
       h2.blog-our-picks__top-title {{MAIN TITLE}}
     .blog-our-picks__main
       .blog-our-picks__list

         a.blog-our-picks__card
           figure.blog-our-picks__card-image-container
             img.blog-our-picks__card-image
           .blog-our-picks__card-info
             .blog-our-picks__card-details
               span Insights
               span 4 MONTHS AGO
             h3.blog-our-picks__card-title
               span {{title}}

       .blog-our-picks__sidebar
         img.blog-our-picks__sidebar-image
         .blog-our-picks__sidebar-rtf
           {{content}}
         a.blog-our-picks__sidebar-cta */
.blog-our-picks__main {
  --w1: 55em;
  --n: 3;
  --m: 1;
  display: grid;
  align-items: start;
  gap: var(--gap);
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(clamp(100% / (var(--n) + 1) + 0.1%, (var(--w1) - 100vw) * 1000, 100% / (var(--m) + 1) + 0.1%), 1fr));
}

.blog-our-picks__list {
  grid-column: 1/-2;
  display: grid;
  gap: var(--gap-small);
}

.blog-our-picks__card {
  display: flex;
  flex-direction: row;
  gap: var(--gap-small);
}
.blog-our-picks__card + .blog-our-picks__card {
  border-block-start: var(--border-soft);
  padding-block-start: var(--gap);
  margin-block-start: var(--gap-small);
}

.blog-our-picks__card-image-container {
  aspect-ratio: 2;
  inline-size: clamp(10rem, 28%, 20rem);
  flex-shrink: 0;
}

.blog-our-picks__card-details {
  margin-block-start: 0;
}

.blog-our-picks__sidebar {
  border-radius: var(--border-radius-large);
  background-color: RGB(var(--bg-inverse-rgb)/0.08);
  border: var(--border-soft);
  padding: var(--box-padding);
}

.blog-our-picks__sidebar-image {
  margin-block-end: var(--gap-small);
}

.blog-our-picks__sidebar-cta {
  margin-block-start: var(--gap);
}

@supports (container-type: inline-size) {
  .blog-our-picks__sidebar {
    container-type: inline-size;
    container-name: our-picks-sidecar;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
@container our-picks-sidecar (min-width: 53ch) {
  .blog-our-picks__sidebar-image {
    inline-size: 40%;
  }
  .blog-our-picks__sidebar-rtf {
    padding-inline: var(--gap-small);
    inline-size: 40%;
  }
  .blog-our-picks__sidebar-cta {
    inline-size: 20%;
  }
}
/* .blogMagazineBody
     .text-image
         figure
             img
             figcaption */
.blog-entry-body figure {
  margin-block-end: var(--gap);
}
.blog-entry-body figcaption {
  margin-block-start: var(--gap-small);
  margin-block-end: var(--gap);
  font-size: var(--text-size-small);
}

.blogMagazineBody ~ .blogMagazineBody {
  margin-block-start: var(--gap);
}

@media only screen and (min-width: 44em) {
  .blog-entry-body figure {
    float: right;
    float: inline-end;
    margin-inline-start: var(--gap-dynamic-large);
    inline-size: clamp(25rem, 50%, (var(--max-container-width) - var(--container-padding)) / 2);
    display: grid;
    grid-template-columns: var(--gap) 1fr var(--gap-small);
    grid-template-rows: 1fr var(--gap) auto;
  }
  .blog-entry-body figure img {
    grid-column: 1/-1;
    grid-row: 1/-2;
  }
  .blog-entry-body figcaption {
    margin: 0;
    padding: var(--box-padding);
    grid-column: 2/-2;
    grid-row: 2/-1;
    background-color: RGB(var(--bg-main-rgb)/0.85);
    -webkit-backdrop-filter: blur(var(--blur-medium));
    backdrop-filter: blur(var(--blur-medium));
    border-block-end: var(--border-soft);
    border-inline-end: var(--border-soft);
  }
}
@charset "UTF-8";
/* div.blogRecentEntries parbase
   div.blog-recent-entries
     div.blog-recent-entries__top rule
       h2.blog-recent-entries__top-title
     div.blog-recent-entries__list
       a.blog-recent-entries__card
         figure.blog-recent-entries__card-image-container
           img.blog-recent-entries__card-image
         div.blog-recent-entries__card-details
           span {{date}}
           span {{category}}
         h3.blog-recent-entries__card-title
           span */
:where(.blogRecentEntries, .blog-featured-articles, .blog-our-picks) {
  margin-block-end: var(--gap-section);
}

:where(.blog-recent-entries__top,
.related-blog-posts .angled-container__content > h3,
.blog-featured-articles__top,
.blog-our-picks__top-title) {
  margin-block-end: var(--gap-dynamic-large);
  padding-block-end: var(--gap-small);
  border-block-end: var(--border-blue-thick);
  background: var(--bg-blue-glow);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:where(.blog h3, .blog-recent-entries__card-title, .blog-featured-articles__card-title, .blog-our-picks__card-title) {
  margin-block-start: 0;
  /* margin-block-end: var(--gap); */
}
:where(.blog h3, .blog-recent-entries__card-title, .blog-featured-articles__card-title, .blog-our-picks__card-title) span {
  background-size: 0% 0.125rem;
  background-position: calc(var(--rtl, 0) * -100%) 100%;
  background-repeat: no-repeat;
  background-image: var(--theme-gradient-lighter);
  transition: background var(--speed-slow) var(--transition-out-quadratic);
}

:where(.blog-recent-entries__list) {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  overflow: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: var(--scrollbar-width);
  scrollbar-color: var(--bg-scrollbar-track) var(--bg-scrollbar-thumb);
}

/* the <a> inside the list */
:where(.blog-recent-entries__card, .blog-featured-articles__card, .blog-our-picks__card, .blog > a) {
  color: inherit;
  display: block;
  text-decoration: none;
  scroll-snap-align: start;
  --scroller-item-width: 100%;
  flex: 0 0 var(--scroller-item-width);
  transition: all var(--speed-slow) ease;
}

:where(.blog, .blog-recent-entries, .blog-featured-articles, .blog-our-picks__card) figure {
  aspect-ratio: 2;
  display: flex;
  overflow: hidden;
}
:where(.blog, .blog-recent-entries, .blog-featured-articles, .blog-our-picks__card) figure img {
  margin: 0;
  object-fit: cover;
  object-position: center;
  padding: 0;
  inline-size: 100%;
}
:where(.blog, .blog-recent-entries, .blog-featured-articles, .blog-our-picks__card) figure:not(:has(img[data-ready=true])) {
  /* * place holder animations while images are lazy loading */
  animation-duration: var(--speed-snail);
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  will-change: background-position;
  background: rgb(var(--bg-inverse-rgb)/0.2);
  background: linear-gradient(to right, rgb(var(--bg-inverse-rgb)/0.1) 10%, rgb(var(--bg-inverse-rgb)/0.2) 18%, rgb(var(--bg-inverse-rgb)/0.1) 33%);
  background-size: 60rem 100%;
}

:where(.card-details,
.blog-recent-entries__card-details,
.blog-featured-articles__card-details,
.blog-our-picks__card-details) {
  display: flex;
  margin: var(--gap-small) 0 var(--gap-tiny) 0;
}
:where(.card-details,
.blog-recent-entries__card-details,
.blog-featured-articles__card-details,
.blog-our-picks__card-details) :where(span, time) {
  display: inline-block;
  color: var(--text-subdued);
  font-size: var(--text-size-tag);
  font-weight: var(--text-weight-bold);
  text-transform: uppercase;
}
:where(.card-details,
.blog-recent-entries__card-details,
.blog-featured-articles__card-details,
.blog-our-picks__card-details) :where(span, time):not(:last-child):after {
  content: "•";
  margin-inline: var(--gap-tiny);
}

:where(.blog, .blog-recent-entries__card, .blog-featured-articles__card, .blog-our-picks__card):is(:hover,
:focus-visible) h3 span {
  background-size: 100% 0.125rem;
}

@media only screen and (max-width: 44em) {
  :where(.blog-recent-entries__card, .blog > a) {
    --scroller-item-width: 100%;
  }
}
@media only screen and (max-width: 62.5em) {
  .blog-recent-entries__list {
    margin-block-end: var(--gap-large);
    padding-block: var(--gap);
    margin-inline: calc(-1 * var(--container-padding));
    padding-inline: var(--container-padding);
    scroll-padding-inline: var(--container-padding);
  }
}
@media only screen and (min-width: 44em) {
  :where(.blog-recent-entries__card, .blog > a) {
    --scroller-item-width: calc(50% - 0.5 * var(--gap));
  }
}
@media only screen and (min-width: 62.5em) {
  :where(.blog-recent-entries__card, .blog > a) {
    --scroller-item-width: calc(33.3333333% - 0.666666 * var(--gap));
  }
}
/* .blogTestimonial.testimonial
   blockquote
     p   {{content}}
     p
       | &mdash; {{author anme}}
       br
       em {{author title}} */
.blogTestimonial {
  margin-block-end: var(--gap);
}
.blogTestimonial blockquote {
  border: unset;
  padding: unset;
  margin: unset;
}
.blogTestimonial [data-no-author] {
  margin-block-end: var(--gap-large);
}

.blog-testimonial-content {
  margin-block: var(--gap);
  position: relative;
  border: var(--border-width-testimonial) solid var(--theme);
  border-radius: var(--border-radius-huge);
  font-size: var(--text-size-large);
  padding: var(--box-padding-large);
  /* thicker line to cover up part of the quote bubble */
  /* the curved border that appears like the quote */
}
.blog-testimonial-content::before {
  content: "";
  position: absolute;
  border: calc(var(--border-width-testimonial) * 1.25) solid var(--bg-main);
  bottom: calc(-1 * var(--border-width-testimonial));
  left: 3rem;
  inline-size: 3.5rem;
  z-index: 2;
}
.blog-testimonial-content::after {
  content: "";
  position: absolute;
  border: var(--border-width-testimonial) solid var(--theme);
  border-block-end: none;
  border-inline-start: none;
  border-radius: 0 3rem 0 0;
  bottom: -3rem;
  inline-size: 3rem;
  block-size: 3rem;
  left: 3rem;
  z-index: 3;
}

.blog-testimonial-author {
  margin-inline-start: 8rem;
  /* 3 from left + 3 wide + 2 for gap */
}
/* 
 .blogcontent
   .blog-entry-body
     .blog-container__content
       .regular-body
*/
.blogcontent {
  inline-size: calc(min(var(--box-padding-large), 3vw) + min(100%, var(--max-text-width)));
  padding: var(--box-padding-large);
  margin-inline: auto;
  backdrop-filter: blur(80px);
}
.blogcontent a {
  font-weight: var(--text-weight-medium);
}

.blog-entry-body :where(p, blockquote, ul, ol, .blogCallToAction, h2, h3, h4) {
  max-inline-size: var(--max-text-width);
}
.blog-entry-body .regular-body :is(blockquote, img, figure) {
  clear: both;
}
.blog-entry-body :where(h2, h3):not(blockquote > :where(h2, h3)) {
  margin-block-start: var(--gap-large);
  margin-block-end: var(--gap);
}
/* 
.blog-entry-header
  .blog-entry-header__info.blogtitle
    figure.blog-entry-header__image
      img width='500' height='250' 
    .blog-entry-header__text.text
      h1.blog-entry-header__title(style='--length: 103')
        {{title}}
      .blog-entry-header__details
        time.blog-entry-header__details-item
          | 13 DAYS AGO
        span.blog-entry-header__details-item  1 MINUTE READ 
      .blog-entry-header__tokens.tokens
        a {{label}}
      .blog-entry-header__author-container.news-showcase__author(itemscope='' itemtype='http://schema.org/Person')
        .news-showcase__author-image
          img height='200' width='200
        .news-showcase__author-info
          p.news-showcase__author-name(itemprop='name') Westcon-Comstor news
          p.news-showcase__author-title(itemprop='jobTitle')

*/
.blog-entry-header {
  margin-block-start: var(--gap);
}
.blog-entry-header section {
  display: contents;
}

.blog-entry-header__info {
  display: grid;
  grid-template: "title img" "author img" "tokens img" "time img" auto/1.2fr 1fr;
  gap: var(--gap-small);
  margin-block-end: var(--gap-large);
}
.blog-entry-header__info p {
  margin: 0;
}

.blog-entry-header__image {
  grid-area: img;
}

.blog-entry-header__text {
  display: contents;
}

.blog-entry-header__title {
  grid-area: title;
  position: relative;
  inline-size: min(100%, 56rem);
  /* a script adds an inline length to the h1 but as a fall back, set a length here */
  --length: 34;
  /* the variable for length is taken into account where more than 50 characters starts to shrink the text size up to 75 characters where 0.75 factor is applied */
  font-size: calc(var(--text-size-h1) * clamp(0.8, (100 - (var(--length) - 34)) / 100 + 0.1, 1));
  padding-block-end: 0.25lh;
}

.blog-entry-header__author-container {
  grid-area: author;
  display: flex;
  align-items: center;
  gap: 2ch;
}
.blog-entry-header__author-container img {
  inline-size: 4rem;
}

.blog-entry-header__details {
  grid-area: time;
  display: flex;
  gap: var(--gap-small);
  height: fit-content;
}

.blog-entry-header__details-item {
  color: var(--text-subdued);
  display: inline-block;
  font-size: var(--text-size-tag);
  font-weight: var(--text-weight-medium);
  text-transform: uppercase;
}
.blog-entry-header__details-item:not(:last-child) {
  border-right: var(--border-medium);
  padding-right: var(--gap-small);
}

:where(.blog-entry-header__tokens) {
  grid-area: tokens;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tiny);
}
:where(.blog-entry-header__tokens) a {
  background-color: rgb(var(--bg-main-rgb)/0.5);
  border: var(--border-soft);
  border-radius: 100vmax;
  font-size: var(--text-size-tag);
  font-weight: var(--text-weight-medium);
  block-size: min-content;
  text-decoration: none;
  padding: var(--padding-ch);
  text-transform: uppercase;
  inline-size: fit-content;
}
:where(.blog-entry-header__tokens) a:hover {
  border: currentColor 1px solid;
}

.blog-entry-header__description {
  margin-inline-start: var(--blog-indent, 0rem);
  margin-block-end: var(--gap);
}

@media only screen and (max-width: 50em) {
  .blog-entry-header__info {
    gap: var(--gap-small);
  }
  .blog-entry-header__image {
    grid-area: img;
  }
  .news-showcase__author {
    padding-block-end: 0;
    margin-block-end: 0;
  }
  .blog-entry-header__text {
    display: contents;
  }
}
@media only screen and (max-width: 37.5em) {
  .blog-entry-header__info {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "title" "author" "tokens" "time";
  }
  .blog-entry-header__title {
    padding-inline-end: var(--box-padding);
  }
}
@charset "UTF-8";
/* Main page structure and navigation */
.news-search-page {
  display: grid;
  gap: var(--gap);
}
.news-search-page nav {
  display: grid;
  gap: var(--gap-small);
  padding: 1.5rem;
  background-color: var(--bg-soft);
}
.news-search-page nav .skip-nav-link {
  padding: 1ch 2ch;
}
.news-search-page nav .skip-nav-link:not(:focus-visible) {
  scale: 0;
}

/* hide the breadcrumbs just on the news page */
.mainContainer:has(.news-search-page) .component-breadcrumb {
  display: none;
}
.mainContainer:has(.news-search-page) .component-short-header .wrapper {
  padding-block-end: 0;
}

.news-summary-categories {
  list-style: none;
  position: relative;
}
.news-summary-categories button[aria-controls^=news-popup] {
  padding-block: 0.5rem;
  text-align: start;
  position: relative;
}
.news-summary-categories > li {
  border-bottom: var(--border-soft);
  display: grid;
}
.news-summary-categories > li:nth-of-type(6n + 1) {
  --gradient-light: var(--theme-green);
  --gradient-dark: var(--theme-magenta);
}
.news-summary-categories > li:nth-of-type(6n + 2) {
  --gradient-light: var(--theme-magenta);
  --gradient-dark: var(--theme-blue);
}
.news-summary-categories > li:nth-of-type(6n + 3) {
  --gradient-light: var(--theme-blue);
  --gradient-dark: var(--theme-green-blue);
}
.news-summary-categories > li:nth-of-type(6n + 4) {
  --gradient-light: var(--theme-green-blue);
  --gradient-dark: var(--theme-orange);
}
.news-summary-categories > li:nth-of-type(6n + 5) {
  --gradient-light: var(--theme-orange);
  --gradient-dark: var(--theme-magenta);
}
.news-summary-categories > li:nth-of-type(6n + 6) {
  --gradient-light: var(--theme-magenta);
  --gradient-dark: var(--theme-green);
}

/* hide the popup by default */
button[aria-controls^=news-popup]:where([aria-expanded=false]) + .news-pop-up {
  display: none;
}

.news-pop-up {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  padding: var(--box-padding-large);
  border-radius: var(--border-radius-standard);
  border-end-start-radius: calc(var(--border-radius-standard) + var(--box-padding-large));
  transition: all var(--speed-standard) var(--transition-out-quartic);
  background: var(--theme-gradient);
  color: white;
  z-index: 3;
}
.news-pop-up h2 {
  font-size: var(--text-size-h3);
  line-height: 80%;
}
.news-pop-up a span {
  background-size: 0% 0.125rem;
  background-position: calc(var(--rtl, 0) * -100%) 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(currentColor, currentColor);
  transition: background var(--speed-slow) var(--transition-out-quadratic);
}
.news-pop-up a:is(:hover, :focus-visible) span {
  background-size: 100% 0.125rem;
}
.news-pop-up hr {
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.5);
}
.news-pop-up hr + hr {
  display: none;
}
.news-pop-up :is(button, [data-id=see-all]) {
  color: white;
  inline-size: fit-content;
}

.news-popup-articles {
  display: grid;
  grid-template-areas: "stack";
  overflow-y: auto;
  flex: 1;
}
.news-popup-articles::-webkit-scrollbar {
  width: 0.5rem;
}
.news-popup-articles::-webkit-scrollbar-track {
  background-color: transparent;
}
.news-popup-articles::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
}
.news-popup-articles ul {
  grid-area: stack;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: 1lh;
  list-style: none;
  text-decoration: underline;
  padding-inline: 0.25rem var(--box-padding);
  padding-block: 0.25rem;
  margin-block-end: 1rem;
}

:where(.scroll-indicators) {
  display: none;
}

@supports (animation-timeline: scroll(nearest)) {
  .scroll-indicators {
    grid-area: stack;
    display: grid;
    align-content: space-between;
  }
  .scroll-indicators .indicator {
    position: sticky;
    display: grid;
    place-items: center;
    --scroll-buffer: 3rem;
    height: 1.5rem;
    opacity: 0;
    animation: fadeIn both linear;
    animation-timeline: scroll(nearest);
    animation-range: 0 var(--scroll-buffer);
  }
  .scroll-indicators .indicator svg {
    inline-size: 1.5rem;
  }
  .scroll-indicators .indicator--top {
    top: 0;
  }
  .scroll-indicators .indicator--bottom {
    bottom: 0.5rem;
    animation-range: calc(100% - var(--scroll-buffer)) 100%;
    animation-direction: reverse;
  }
  .scroll-indicators .indicator--bottom svg {
    rotate: 180deg;
  }
}
.news-popup-featured-article {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1ch;
  text-decoration: none;
}
.news-popup-featured-article .visual-h3 {
  line-height: 100%;
  font-weight: var(--text-weight-medium);
  font-size: calc(var(--text-size-h3-dynamic) * clamp(0.8, (100 - (var(--length) - 34)) / 100 + 0.1, 1));
}
.news-popup-featured-article img {
  border-radius: var(--border-radius-standard);
  object-fit: cover;
  block-size: 100%;
  margin: 0;
}

.subscribe-section {
  display: contents;
}

body:has(.news-summary-categories [aria-expanded=true]) .overlay {
  opacity: 1;
  pointer-events: all;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  transition-duration: var(--speed-slow);
  transition-timing-function: ease-out;
}
body:has(.news-summary-categories [aria-expanded=true]) .news-search-page nav {
  z-index: 4;
}

/* SPECIFIC DESKTOP STYLING */
@media only screen and (min-width: 38.0625em) {
  .news-search-page {
    grid-template-columns: minmax(26ch, 20%) auto;
  }
  .news-search-page:not(:has(nav)) {
    /* in case an error in the JSON causes the nav not to appear */
    display: block;
  }
  .news-search-page nav {
    top: 6rem;
    position: sticky;
    border: var(--border-soft);
    border-start-start-radius: var(--border-radius-large);
    border-start-end-radius: var(--border-radius-large);
    border-end-start-radius: calc(var(--border-radius-large) + 1.5rem);
    border-end-end-radius: calc(var(--border-radius-large) + 1.5rem);
    z-index: 3;
  }
  .news-search-page nav .skip-nav-link {
    padding: 1ch 2ch;
  }
  .news-search-page nav .skip-nav-link:not(:focus-visible) {
    scale: 0;
  }
  .news-search-page .overlay {
    position: fixed;
    inset: -100vmax;
    z-index: 3;
    opacity: 0;
    background-color: rgb(var(--bg-main-rgb)/0.6);
    transition: all var(--speed-standard) ease-in;
    pointer-events: none;
  }
  .news-categories-accordion {
    display: contents;
  }
  #news-categories-button,
  .back {
    display: none;
  }
  .news-summary-categories {
    list-style: none;
    position: relative;
  }
  button[aria-controls^=news-popup] {
    margin-inline-start: calc(-1.5rem + 1ch);
    margin-inline-start: calc(-1lh + 1ch);
    margin-inline-end: -2rem;
    padding-inline-start: calc(1.5rem - 1ch);
    padding-inline-start: calc(1lh - 1ch);
    padding-inline-end: 2rem;
    margin-block: -1px;
  }
  button[aria-controls^=news-popup]::before {
    content: "";
    position: absolute;
    inset: 0;
    transform-origin: inline-start;
    scale: 0.95;
    transition: all var(--speed-standard) var(--transition-out-quartic);
    z-index: -1;
    border-end-start-radius: var(--border-radius-standard);
    border-start-start-radius: var(--border-radius-standard);
    clip-path: polygon(calc(100% - 2rem) calc(50% - 0.55em), calc(100% - 1.5rem) calc(50% - 0.55em), calc(100% - 1rem) 50%, calc(100% - 1.5rem) calc(50% + 0.55em), calc(100% - 2rem) calc(50% + 0.55em), calc(100% - 1.5rem) 50%);
  }
  button[aria-controls^=news-popup]:is(:hover, :focus-visible, [aria-expanded=true])::before {
    scale: 1;
    background-image: var(--theme-gradient);
  }
  button[aria-controls^=news-popup][aria-expanded=true] {
    color: white;
    font-weight: var(--text-weight-bold);
  }
  button[aria-controls^=news-popup][aria-expanded=true]::before {
    animation-name: expand-chevron;
    animation-duration: var(--speed-standard);
    animation-fill-mode: forwards;
    animation-timing-function: var(--transition-out-quadratic);
  }
  .news-pop-up {
    top: -10%;
    inset-inline-start: calc(100% + 1.5rem);
    height: 120%;
    inline-size: 25rem;
    animation: news-popup-expand var(--speed-slow) var(--transition-out-quartic) forwards;
    transform-origin: -2rem calc((var(--mouse-y) - 0.2) * 130%);
  }
  .news-popup-articles {
    overscroll-behavior: contain;
    mask-image: linear-gradient(180deg, rgb(0, 0, 0) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%);
  }
}
/* SPECIFIC MOBILE STYLING */
@media only screen and (max-width: 38em) {
  .news-nav-container {
    margin-inline: calc(-1 * var(--container-padding));
    margin-block: 0 1rem;
  }
  .news-nav-container nav {
    border-radius: 0;
  }
  .news-categories-accordion {
    --br: calc(var(--border-radius-standard) - 1px);
    border: var(--border-medium);
    border-radius: var(--border-radius-standard);
  }
  #news-categories-button {
    font-weight: var(--text-weight-bold);
    padding: 1ch 2ch;
    border-radius: var(--br) var(--br) 0 0;
    background: none;
    inline-size: 100%;
    text-align: start;
  }
  #news-categories-button::before {
    content: "►";
    rotate: 90deg;
    translate: -0.5ch 0;
    transition: rotate var(--speed-standard) var(--transition-out-quartic);
    display: inline-block;
    font-size: 0.8em;
  }
  #news-categories-button[aria-expanded=true] {
    background: var(--theme-gradient);
    color: white;
    margin: 0;
  }
  #news-categories-button[aria-expanded=true] + ul > li {
    padding-block: 0.5ch;
  }
  #news-categories-button[aria-expanded=false]::before {
    rotate: 0deg;
  }
  #news-categories-button[aria-expanded=false] + ul {
    display: none;
  }
  .overlay {
    display: none;
  }
  .news-summary-categories {
    display: grid;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .news-summary-categories > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline-start: 2ch;
    transition: padding var(--speed-standard) var(--transition-out-quartic);
  }
  .news-summary-categories > li::after {
    display: block;
    position: relative;
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    inset-block-end: -0.5rem;
    inset-inline-end: 1rem;
    border: solid currentColor;
    border-width: 0 var(--arrow-width, 0.125rem) var(--arrow-width, 0.125rem) 0;
    transform: translate(0, -100%) rotate(-45deg);
    transition: transform var(--speed-standard) var(--transition-out-quadratic);
  }
  button[aria-controls^=news-popup] {
    transition: padding var(--speed-standard) var(--transition-out-quartic);
    flex: 1;
    /* hide the popup by default */
  }
  button[aria-controls^=news-popup]:where([aria-expanded=false]) + .news-pop-up {
    display: none;
    translate: 100% 0;
  }
  .news-pop-up {
    inset: 0 0 auto 0;
    max-block-size: 100%;
    translate: 0% 0%;
    transition: translate var(--speed-standard) var(--transition-out-quartic), display var(--speed-standard) allow-discrete;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: calc(var(--border-radius-large) + 1.5rem);
    border-end-end-radius: var(--br);
  }
  .news-pop-up h2 {
    display: none;
  }
  .news-pop-up .back {
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.5ch 1ch;
    border-radius: var(--border-radius-standard);
  }
  @starting-style {
    .news-pop-up {
      translate: 100% 0%;
    }
    .news-summary-categories button[aria-controls^=news-popup] {
      padding-block: 0ch;
    }
  }
  /* hide the description on mobile */
  #subscribe-news-desc {
    display: none;
  }
  #subcribe-btn {
    padding: unset;
    background: unset;
    box-shadow: unset;
    width: fit-content;
    font-weight: var(--text-weight-regular);
    color: hsl(208.81deg, 47.14%, calc(58% - 10 * var(--is-light, 1%)));
  }
  #subcribe-btn::after {
    content: ">";
  }
}
/* For the main list of blogs in the centre of the page */
.blog-search-module__listing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--gap);
  grid-auto-flow: dense;
}
.blog-search-module__listing .extract {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 3);
  text-overflow: ellipsis;
  overflow: hidden;
}
.blog-search-module__listing :where(.extract):empty {
  display: none;
}
.blog-search-module__listing article {
  animation-name: zoomInShallow;
  animation-duration: var(--speed-standard);
  animation-fill-mode: both;
  animation-timing-function: var(--transition-out-quadratic);
  border-radius: var(--border-radius-small);
  border: var(--border-medium);
  -webkit-backdrop-filter: blur(3rem);
  backdrop-filter: blur(3rem);
  background-color: rgb(var(--bg-main-rgb)/0.8);
}
.blog-search-module__listing article .content {
  padding: var(--box-padding);
}
.blog-search-module__listing article .card-details {
  margin: 0 0 1ex 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch;
}
.blog-search-module__listing article .dot {
  content: "•";
  display: inline-block;
}
.blog-search-module__listing article figure {
  border-radius: calc(var(--border-radius-small) - 1px) calc(var(--border-radius-small) - 1px) 0 0;
}
.blog-search-module__listing article[data-featured] {
  grid-column: 1/-1;
}
.blog-search-module__listing article:nth-child(1 of [data-featured]) {
  order: -1000;
}
.blog-search-module__listing article {
  container-name: news-articles;
  container-type: inline-size;
}

@container news-articles (min-width: 31rem) {
  .blog-search-module__listing article a {
    display: grid;
    grid-template-columns: 50% 1fr;
    align-items: stretch;
    block-size: 100%;
    gap: calc(var(--gap) / 2 + var(--box-padding));
  }
  .blog-search-module__listing article .content {
    padding-inline-start: 0;
    padding-inline-end: var(--box-padding);
  }
  .blog-search-module__listing article figure {
    aspect-ratio: unset;
    border-radius: calc(var(--border-radius-small) - 1px) 0 0 calc(var(--border-radius-small) - 1px);
  }
}
/* styling for individual blogs handled in blogRecentEntries scss file */
/* load more button */
.load-more-button {
  margin-inline: auto;
  display: grid;
  margin-block: var(--gap-large) var(--gap-section);
  background: rgb(var(--bg-inverse-rgb)/0.05);
  padding: var(--box-padding);
  border: var(--border-soft);
  transition: scale var(--speed-standard) var(--transition-bounce);
}
.load-more-button:is(:hover, :focus-visible) {
  scale: 1.05;
}
.load-more-button[disabled] {
  display: none;
}
.load-more-button[loading=true] {
  animation: placeHolderShimmer var(--speed-slower) forwards infinite linear;
  will-change: background-position;
  background: linear-gradient(to right, rgb(var(--bg-inverse-rgb)/0.1) 10%, rgb(var(--bg-inverse-rgb)/0.2) 18%, rgb(var(--bg-inverse-rgb)/0.1) 33%);
  background-size: 60rem 100%;
}

/* Animations for the news popups */
@keyframes expand-chevron {
  from {
    clip-path: polygon(calc(100% - 2rem) calc(50% - 1cap), calc(100% - 1.5rem) calc(50% - 1cap), calc(100% - 1rem) 50%, calc(100% - 1.5rem) calc(50% + 1cap), calc(100% - 2rem) calc(50% + 1cap), calc(100% - 1.5rem) 50%);
  }
  to {
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%);
  }
}
@keyframes news-popup-expand {
  from {
    clip-path: circle(0% at 0% var(--y-offset, 50%));
    scale: 0.9 0.95;
    opacity: 0.8;
  }
  to {
    clip-path: circle(var(--circle-diameter, 134%) at 0% var(--y-offset, 50%));
  }
}
@charset "UTF-8";
.next-blog {
  display: flex;
  justify-content: space-between;
  margin: var(--gap) 0;
}
.next-blog a {
  text-decoration: none;
  background-size: 0% 0.125rem;
  background-position: calc(var(--rtl, 0) * -100%) 100%;
  background-repeat: no-repeat;
  background-image: var(--theme-gradient-lighter);
  transition: background var(--speed-slow) ease;
}
.next-blog a:is(:hover, :focus-visible) {
  background-size: 100% 0.125rem;
}
.next-blog .next::after {
  content: " »";
}
.next-blog .previous::before {
  content: "« ";
}
/* to compensate for the footer transition */
.blog-recent-entries {
  padding-block-end: 12rem;
}
.accordion-heading,
.accordion-description {
  margin-block-end: calc(0.5 * var(--gap-dynamic-large));
}

.accordion-container {
  display: grid;
  gap: var(--gap-small);
  margin-block-end: var(--gap-large);
  --bp: calc(1.5 * var(--box-padding));
  max-inline-size: calc(var(--max-text-width) + 2 * var(--bp));
}
.accordion-container details {
  border: var(--border-medium);
  border-radius: var(--border-radius-large);
}
.accordion-container details:not([open]) summary {
  border-radius: calc(var(--border-radius-large) - 1px);
}
.accordion-container details[open] summary {
  background-image: var(--theme-gradient);
  color: white;
}
.accordion-container details[open] summary > div span {
  transform: rotate(45deg);
}
.accordion-container details > div {
  max-inline-size: var(--max-text-width);
  margin-block: var(--gap);
  padding-inline: var(--bp);
}
.accordion-container details:has(summary:focus-visible) {
  outline-style: dotted;
  outline-width: 0.1875rem;
  outline-color: currentColor;
}
.accordion-container summary {
  display: block;
  padding: var(--bp);
  border-radius: calc(var(--border-radius-large) - 1px) calc(var(--border-radius-large) - 1px) 0 0;
  position: relative;
  font-weight: var(--text-weight-bold);
  transition: background-color var(--speed-standard) var(--transition-out-quadratic);
}
.accordion-container summary:is(:focus-visible, :hover) {
  background-color: rgb(var(--bg-inverse-rgb)/0.1);
}
.accordion-container summary > div {
  display: inline-flex;
  inline-size: calc(100% - 2rem);
  position: relative;
}
.accordion-container summary span {
  position: absolute;
  background-color: var(--theme);
  display: grid;
  place-items: center;
  right: -1.25lh;
  top: -0.125lh;
  inline-size: 1.25lh;
  block-size: 1.25lh;
  border-radius: 100vmax;
  transition: transform var(--speed-standard) var(--transition-out-quadratic);
  will-change: transform;
}
.accordion-container summary span::after, .accordion-container summary span::before {
  position: absolute;
  content: "";
  width: 0.8lh;
  border-radius: 0.2rem;
  height: 0.125rem;
  background-color: currentColor;
}
.accordion-container summary span::after {
  transform: rotate(90deg);
}

@supports (block-size: calc-size(auto, size)) {
  .accordion-container details > div {
    margin: 0;
  }
  details:not([data-lab-type]) {
    overflow: hidden;
  }
  details:not([data-lab-type]) summary {
    margin: 0;
  }
  details:not([data-lab-type])::details-content {
    transition: block-size var(--speed-slow), content-visibility var(--speed-slow), padding var(--speed-slow);
    transition-behavior: allow-discrete;
    block-size: 0;
    margin: 0;
    padding-block: 0;
  }
  details:not([data-lab-type])[open]::details-content {
    block-size: auto;
    padding-block: 1rem;
  }
  details:not([data-lab-type])[open]::details-content > div {
    margin-block: 0;
  }
}
@charset "UTF-8";
.angled-container {
  margin-block: var(--gap-section);
  /* these colours can be automatic, so turn off colours if they are these two defaults */
}
.angled-container:not([style*="#E8EDEF"], [style*="#FFF"]) {
  /* apply a background colour */
  background-color: var(--bg-color, transparent);
  margin-inline: var(--inline-reverse-margin);
  padding-inline: var(--inline-reverse-padding);
}
.angled-container:not([style*="#E8EDEF"], [style*="#FFF"]) .angled-container__content {
  /* correction to help add padding if there is a background applied */
  padding-block: var(--box-padding-large);
  /* scroller needed special exception for correct margins */
}
.angled-container:not([style*="#E8EDEF"], [style*="#FFF"]) .angled-container__content > .scroller:last-child {
  margin-block: 0;
}

.angled-container__title {
  margin-block-end: var(--gap-small);
}

/* normally, the title doesn’t have space after it but when used as a title for a section */
/* margin is applied unless it’s a oneColumnContent */
.angled-container__title:not(:has(+ .angled-container__content > .oneColumnContent:first-child)) {
  margin-block-end: var(--gap-dynamic);
}
.component-call-to-action {
  display: grid;
  background: var(--gradient-border);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--border-radius-standard);
  padding: var(--box-padding-large);
  gap: var(--gap);
  display: grid;
  grid-auto-rows: min-content min-content auto;
}
.component-call-to-action .text {
  display: contents;
}
.component-call-to-action .text > :is(h2, h3, h4, div:first-of-type:not(:only-child)) {
  grid-column: var(--stack);
}
.component-call-to-action .text > :is(div:last-of-type:not(:only-child), p) {
  grid-column: var(--stack);
}
.component-call-to-action .image img[alt*=icon] {
  inline-size: clamp(9rem, 50%, 20rem);
}
.component-call-to-action .action-link {
  /* touch screens don't require the button to help uncover additional information, as it's shown by default */
  display: none;
}

@media (pointer: fine) {
  .callToAction {
    --clip: circle(0% at center);
    --stack: 1/1;
    overflow: hidden;
    --hover-position: translateY(calc(100% + 2 * var(--box-padding)));
  }
  .callToAction .action-link {
    display: block;
    grid-row: 2;
    grid-column: 1;
    align-self: flex-end;
    padding: 0.75ch 2ch;
    border: var(--border-medium);
    inline-size: fit-content;
    border-radius: 100vmax;
    text-decoration: none;
    margin-block-start: auto;
    pointer-events: none;
  }
  .callToAction .image {
    grid-column: 1;
    grid-row: 3;
    z-index: 1;
  }
  .callToAction .image img {
    inline-size: 100%;
  }
  .callToAction .image + .text > :is(div:last-of-type:not(:only-child), p) {
    grid-row: 1/4;
  }
  .callToAction .text > :is(h2, h3, h4, div:first-of-type:not(:only-child)) {
    grid-row: 1;
    grid-column: 1;
  }
  .callToAction .text > :is(div:last-of-type:not(:only-child), p) {
    grid-row: 1/-1;
    grid-column: 1;
    background: var(--theme-gradient);
    color: white;
    padding: var(--box-padding-large);
    margin-block: calc(-1 * var(--box-padding-large));
    margin-inline: calc(-1 * var(--box-padding-large) - 1px);
    /*  extra 1px on inline to make sure no ugly gaps with border */
    clip-path: var(--clip, circle(0% at center));
    transition: all var(--speed-slower) var(--transition-out-quartic);
    will-change: clip-path;
    user-select: none;
    visibility: var(--visibility, hidden);
  }
  .callToAction:hover {
    --clip: circle(75% at center);
    --visibility: visible;
  }
  .component-call-to-action {
    grid-template-areas: "stack" "button";
    grid-template-rows: 1fr min-content;
  }
}
@supports (container-type: inline-size) {
  .callToAction {
    container-type: inline-size;
    container-name: callToAction;
  }
}
@container callToAction (min-width: 40em) {
  .callToAction .action-link {
    display: none;
  }
  .callToAction .text > :is(div:last-of-type:not(:only-child), p) {
    --clip: circle(75% at center);
    --visibility: visible;
    margin-inline: calc(-1 * var(--box-padding-large) - 1px);
    margin-inline-start: 0;
    background: var(--theme-gradient);
    color: white;
    padding: var(--box-padding-large);
    margin-block: calc(-1 * var(--box-padding-large));
  }
  .component-call-to-action {
    display: flex;
  }
}
.feature-slide-up {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
  background: var(--theme-gradient);
  container-type: inline-size;
  overflow: hidden;
}
.feature-slide-up .image {
  aspect-ratio: 1.2;
  overflow: hidden;
}
.feature-slide-up .image img {
  object-fit: cover;
  block-size: 100%;
  inline-size: 100%;
}
.feature-slide-up .visible-content {
  padding: var(--box-padding-large);
  line-height: 1.4;
}
.feature-slide-up .visible-title {
  margin: 0;
  font-size: var(--text-size-large);
  line-height: 1.4;
}
.feature-slide-up .description {
  padding-inline: var(--box-padding-large);
  padding-block-end: var(--box-padding-large);
  /* not sure if we should do it this way */
}
.feature-slide-up .description ul {
  margin-inline: 1.2rem;
}

@media (pointer: fine) {
  .feature-slide-up {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    block-size: 100%;
    isolation: isolate;
    position: relative;
  }
  .feature-slide-up::before {
    content: "";
    inset: 0;
    position: absolute;
    background: var(--theme-gradient);
    opacity: 0.95;
    translate: 0 var(--ee, 100%);
    z-index: 0;
    transition: translate var(--speed-slow) var(--transition-in-out-quadratic);
  }
  .feature-slide-up .image {
    grid-column: 1;
    grid-row: 1/2;
    z-index: -1;
  }
  .feature-slide-up .visible-content {
    z-index: 1;
    grid-column: 1;
    grid-row: 2/-1;
    transition: translate var(--speed-slow) var(--transition-in-out-quadratic);
    box-shadow: 0 -3px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    padding-inline-end: calc(var(--box-padding-large) + 3rem);
  }
  .feature-slide-up .visible-content::after {
    content: "+";
    position: absolute;
    /* inset-inline-end: var(--box-padding-large); */
    inset-inline-end: var(--box-padding-large);
    inset-block-end: 50%;
    transform: translateY(-50%);
    line-height: 0;
    font-weight: var(--text-weight-regular);
    font-size: 3rem;
    transition: 0.5s ease-in-out;
  }
  .feature-slide-up .description {
    z-index: 1;
    translate: 0 150%;
    grid-column: 1;
    grid-row: 1/-1;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: translate var(--speed-slow) var(--transition-in-out-quadratic);
    padding-inline-end: var(--box-padding);
    overflow: auto;
    container-type: size;
  }
  .feature-slide-up .description > div {
    padding-bottom: var(--box-padding-large);
    max-block-size: calc(var(--box-padding-large) + var(--ee, 100%) - var(--border-width-thinner));
    overflow: auto;
  }
  .feature-slide-up:is(:hover, :focus-visible)::before {
    translate: 0 0;
  }
  .feature-slide-up:is(:hover, :focus-visible) .visible-content {
    translate: 0 calc(-1 * var(--ee, 0));
  }
  .feature-slide-up:is(:hover, :focus-visible) .visible-content::after {
    rotate: 45deg;
    color: transparent;
  }
  .feature-slide-up:is(:hover, :focus-visible) .description {
    translate: 0 calc(100% - var(--ee, 100%));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@supports (container-type: inline-size) {
  .careerProfileItem {
    --ee: 83.3333cqi;
  }
}
.carousel {
  position: relative;
  margin-block: var(--gap-large) calc(var(--gap-large) + 2rem);
  margin-inline: var(--inline-reverse-margin);
  border-radius: var(--border-radius-large);
}

.carousel__heading {
  block-size: 0px;
}

.carousel-slides {
  display: grid;
  grid-template: "stack" 1fr/1fr;
  width: unset !important;
  left: unset !important;
  inline-size: 100%;
  block-size: 100%;
  padding-inline: var(--inline-reverse-padding);
}
.carousel-slides .next-button {
  position: absolute;
  right: calc(var(--inline-reverse-padding) - 0.75 * var(--container-padding));
  top: 50%;
  z-index: 2;
  inline-size: calc(8 * var(--arrow-width-large, 2rem));
  block-size: calc(8 * var(--arrow-width-large, 2rem));
  padding: calc(2 * var(--arrow-width-large, 1rem));
}
.carousel-slides .next-button::after {
  content: "";
  border: solid currentColor;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-width: 0 var(--arrow-width-large, 0.25rem) var(--arrow-width-large, 0.25rem) 0;
  rotate: -45deg;
  transition: translate var(--speed-standard) var(--transition-in-out-quadratic);
}
.carousel-slides .next-button:hover::after {
  translate: var(--arrow-width-large) 0rem;
}
.carousel-slides .next-button:is(:focus-visible, :focus) {
  outline-style: dotted;
}

.carousel-controls {
  position: absolute;
  display: flex;
  inline-size: 100%;
  translate: 0 1rem;
  gap: var(--gap-small);
  justify-content: center;
  z-index: 2;
}
.carousel-controls > a {
  inline-size: 1rem;
  block-size: 1rem;
  aspect-ratio: 1;
  background-color: transparent;
  border: var(--border-medium);
  color: transparent;
  border-radius: 10rem;
  text-decoration: none;
}
.carousel-controls > a:hover {
  background-color: rgb(var(--bg-inverse-rgb)/1);
}
.carousel-controls > a.active {
  background-color: rgb(var(--bg-inverse-rgb)/1);
  pointer-events: none;
}

.carousel:not(:has(.contentcarouselslide[data-id])) .carousel-controls {
  display: none;
}

.carousel[data-activated]:not(:has(.contentcarouselslide:nth-child(2))) .contentcarouselslide {
  opacity: 1;
  visibility: visible;
  translate: unset;
}
:is(.carousel-hero-module, .hero-carousel-item) {
  display: contents;
}
.contentcarouselslide {
  /* ! float and width were applied by scripts, which are now removed */
  /* float: unset !important; */
  /* width: unset !important; */
  min-width: 100%;
  grid-area: stack;
  transition: all var(--speed-slow) ease-out;
  /* margin block is added here in case this component is used on its own */
  /* (not inside the carousel container) and this is unset later */
  /* the blur is added because of the blurred background excess - see above */
  margin-block: calc(var(--gap-section) + 4 * var(--blur-large));
}

.carousel[data-activated] {
  /* the script applied the class 'activated' to the scroller */
  /* so these should only be used if the script is running AND if the */
  /* slides exist within the carousel container */
}
.carousel[data-activated] .contentcarouselslide.active {
  z-index: 2;
  opacity: 1;
}
.carousel[data-activated] .contentcarouselslide:not(.active) {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}
.carousel[data-activated] .contentcarouselslide.outro {
  z-index: 1;
  visibility: visible;
  translate: -0.5rem 0rem;
}

/* !look at scroll snapping for small screens */
.carousel:not([data-activated]) .contentcarouselslide:nth-child(n+2) {
  display: none;
}

/* sometimes carousel slides are used on their own */
/* margin is applied to the slide and undone if it's inside a carousel container */
.carousel .contentcarouselslide {
  margin-block: unset;
}

/* the main carousel display */
.carousel-slide {
  background-color: unset !important;
  display: flex;
  position: relative;
  block-size: 100%;
}
.carousel-slide:where([data-will-expire], [data-warn-expired]) {
  outline: 0.31rem solid var(--warn);
  box-shadow: 0 0 0.5rem 0.5rem var(--warn);
  position: relative;
}
.carousel-slide:where([data-will-expire], [data-warn-expired])::after {
  position: absolute;
  top: -2rem;
  right: 0;
}
.carousel-slide[data-will-expire] {
  --warn: orange;
}
.carousel-slide[data-will-expire]::after {
  content: "WILL EXPIRE";
}
.carousel-slide[data-warn-expired] {
  --warn: darkred;
}
.carousel-slide[data-warn-expired]::after {
  content: "HAS EXPIRED";
}
.carousel-slide[data-image-align=background] {
  /* before and after are used to add a light/dark shade at the top and bottom of the carousel item */
}
.carousel-slide[data-image-align=background]::before {
  content: "";
  position: absolute;
  inline-size: 80%;
  inset-inline-start: 10%;
  block-size: 3rem;
  inset-block-start: 0;
  background-image: radial-gradient(ellipse at top center, RGB(255 255 255/0.1) 0%, RGB(255 255 255/0) 75%);
  z-index: 0;
}
.carousel-slide[data-image-align=background]::after {
  content: "";
  position: absolute;
  inline-size: 80%;
  inset-inline-start: 10%;
  block-size: 4rem;
  inset-block-end: 0;
  background-image: radial-gradient(ellipse at bottom center, RGB(0 0 0/0.1) 0%, RGB(0 0 0/0) 75%);
  z-index: 0;
}

/* attribute applied when the carousel slide has already expired and is on the public view */
[data-has-expired] {
  display: none;
}

.carousel-slide__inner {
  display: flex;
  flex-direction: row-reverse;
  flex: 1;
  min-block-size: calc(3.5 * var(--gap-section));
  background: var(--theme-gradient);
  border-radius: var(--border-radius-standard);
  box-shadow: var(--shadow-emboss);
}
.carousel-slide__inner > * {
  flex: 1;
}

/* .carousel-slide__image-container COULD be an anchor <a> */
.carousel-slide__image-container {
  position: relative;
  flex: 1;
  z-index: 1;
}

/* the background image will instead be applied to the overlay inside of the actual object, so clip path may be used */
.carousel-slide__image-overlay {
  position: absolute;
  box-shadow: var(--shadow-emboss);
  inset-block: 0;
  inset-inline-end: 0;
  inset-inline-start: calc(-0.5 * var(--gap-large));
  background-image: var(--bg-img);
  background-position: center;
  background-size: cover;
  border-start-start-radius: 0;
  border-start-end-radius: var(--border-radius-standard);
  border-end-start-radius: 0;
  border-end-end-radius: var(--border-radius-standard);
}

.carousel-slide__content-container {
  position: relative;
  padding: var(--gap-dynamic-large);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  /* always white as the background will be a gradient */
  color: white;
}

/* ? [icon-position] is available on the content container, although has no effect currently */
.carousel-slide__heading {
  /* !review the size of the text here */
  font-size: var(--text-size-h2);
  margin-bottom: var(--gap-small);
}

.carousel-slide__cta {
  padding-top: var(--gap);
}
.carousel-slide__cta:has(a:nth-child(2)) {
  display: flex;
  gap: var(--gap-small);
  flex-wrap: wrap;
}

.carousel-slide__description {
  /* if an image is being used in the content area, */
  /* it would most likely be an icon or logo, so limit the width */
  /* * .full-width is a manually added class that can override this restriction and needs to be added by the user */
}
.carousel-slide__description img:not(.full-width) {
  max-inline-size: 50%;
  margin-block: var(--gap-small);
}

.carousel-slide__icon {
  display: block;
  margin-block-end: var(--gap);
  --s: 2;
  max-block-size: calc(var(--s) * var(--icon-size-standard));
  inline-size: min(100%, var(--s) * var(--icon-size-standard));
}
.carousel-slide__icon[data-icon-size=small] {
  --s: 2;
}
.carousel-slide__icon[data-icon-size=medium] {
  --s: 3;
}
.carousel-slide__icon[data-icon-size=large] {
  --s: 5;
}

@media only screen and (min-width: 50.0625em) {
  :is([data-image-align=left], [data-image-align=right]) .carousel-slide__inner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: var(--gap) 1fr var(--gap);
    background: none;
    box-shadow: none;
  }
  :is([data-image-align=left], [data-image-align=right]) .carousel-slide__content-container {
    grid-column: 1/-3;
    grid-row: 2/-2;
    --shadow-large: calc(var(--distance-x) * var(--m)) calc(var(--distance-y) * var(--m)) var(--l) RGB(0 0 0 / 0.5);
    filter: drop-shadow(var(--shadow-large));
  }
  :is([data-image-align=left], [data-image-align=right]) .carousel-slide__content-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--border-radius-standard) 0 0 var(--border-radius-standard);
    background: var(--theme-gradient);
    clip-path: polygon(0% 0%, calc(100% - var(--gap-large)) 0, 100% 100%, 0% 100%);
  }
  :is([data-image-align=left], [data-image-align=right]) .carousel-slide__image-container {
    grid-column: 4/-1;
    grid-row: 1/-1;
  }
  :is([data-image-align=left], [data-image-align=right]) .carousel-slide__image-container::before {
    inset-block: calc(-1 * var(--gap-section) + var(--gap));
  }
  [data-image-align=left] .carousel-slide__content-container {
    grid-column: 3/-1;
    padding-left: clamp(2 * var(--gap-large), 16.667vw, 16.667rem);
  }
  [data-image-align=left] .carousel-slide__content-container::before {
    inset-inline-start: var(--gap-large);
    inset-inline-end: calc(-3 * var(--gap-section));
    transform: skewX(calc(7.5deg * var(--rtl, 1)));
  }
  [data-image-align=left] .carousel-slide__content-container::after {
    clip-path: polygon(0% 0%, 100% 0, 100% 100%, var(--gap-large) 100%);
    border-radius: 0 var(--border-radius-standard) var(--border-radius-standard) 0;
  }
  [data-image-align=left] .carousel-slide__image-container {
    grid-column: 1/4;
  }
  [data-image-align=left] .carousel-slide__image-container::before {
    inset-inline-end: 0;
    inset-inline-start: calc(-3 * var(--gap-section));
    transform: skewX(calc(7.5deg * var(--rtl, 1)));
  }
  [data-image-align=left] .carousel-slide__image-overlay {
    inset: 0;
    border-radius: var(--border-radius-standard) 0 0 var(--border-radius-standard);
    clip-path: polygon(0% 0%, calc(100% - var(--gap-large)) 0, 100% 100%, 0% 100%);
  }
}
@media only screen and (max-width: 50em) {
  .carousel-slide__inner {
    display: flex;
    min-block-size: calc(2.5 * var(--gap-section));
  }
  .carousel-slide__image-container {
    display: none;
  }
  .carousel-slide__content-container {
    border-radius: var(--border-radius-standard);
    /* before is the blurred background copy, and as the image disappears on small screens, this needs to update to fill the screen */
  }
  .carousel-slide__content-container::before {
    inset-inline: calc(-1 * var(--inline-reverse-padding));
    transform: skewX(0deg);
  }
}
.ctaImageBox {
  box-shadow: var(--shadow-standard);
}

.cta-image-box {
  display: grid;
  grid-template-areas: "stack";
  position: relative;
  align-items: end;
  justify-items: center;
  text-decoration: none;
  isolation: isolate;
  border-radius: var(--border-radius-small);
  block-size: 100%;
  overflow: hidden;
}
.cta-image-box :where(picture, img, div) {
  block-size: 100%;
}
.cta-image-box img {
  transition: transform var(--speed-standard) var(--transition-out-quartic);
}
.cta-image-box:hover img {
  transform: scale(1.04);
}
.cta-image-box button {
  grid-area: stack;
  margin-bottom: var(--gap);
  z-index: 2;
  /* update the colouring inside the button (always white buttons) */
  --bg-main-hover: white;
  --text-white: var(--text-dark);
}

.cta-image-box__image-container {
  grid-area: stack;
  position: relative;
}

.cta-image-box__image-overlay {
  /* /* background: linear-gradient(180deg, hsl(0deg 0% var(--is-light, 100%)  0) 50%, hsl(0deg 0% var(--is-light, 100%)  1) 100%); */
  z-index: 1;
  inline-size: 100%;
  position: absolute;
}
@property --dc-num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@property --dc-from {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@property --dc-delay {
  syntax: "<time>";
  initial-value: 0s;
  inherits: true;
}
@property --dc-duration {
  syntax: "<time>";
  initial-value: 3s;
  inherits: true;
}
.dynamic-counter {
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--border-radius-large);
  background: var(--theme-gradient);
  display: grid;
  place-content: center;
  font-size: var(--text-size-callout);
  font-weight: var(--text-weight-bold);
  inline-size: min(var(--icon-size-huge), 100%);
  color: white;
  box-shadow: var(--is-dark, var(--shadow-standard));
}
.dynamic-counter[data-size=smaller] {
  font-size: calc(0.75 * var(--text-size-callout));
}
.dynamic-counter + p {
  text-align: center;
}

@supports (counter-reset: num 0) {
  .dynamic-counter[data-type=integer] {
    transition-timing-function: cubic-bezier(0.46, 0.03, 0.25, 0.98);
    transition-duration: var(--dc-duration, 3s);
    transition-property: --dc-num;
    transition-delay: var(--dc-delay, 0s);
    counter-reset: dc-num var(--dc-num);
    will-change: counter-reset;
  }
  .dynamic-counter[data-type=integer] span::after {
    content: attr(data-before) counter(dc-num) attr(data-after);
  }
  .dynamic-counter[data-type=integer] span > span {
    display: none;
  }
  .dynamic-counter[data-type=integer][data-visible="0"] {
    transition-duration: var(--speed-standard);
    transition-delay: 0s;
    --dc-num: var(--dc-from, 0) !important;
    counter-reset: dc-num var(--dc-num);
  }
}
/* disable in safari */
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
  .dynamic-counter[data-type=integer] {
    transition-duration: unset !important;
    transition-delay: unset !important;
  }
}
@supports (container-type: inline-size) {
  .dynamicCounter {
    --text-size-callout: clamp(2rem, 22cqi, 5rem);
    container-type: inline-size;
  }
}
.featureItem {
  display: grid;
}

.feature-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-small);
  border-style: solid;
  border-width: var(--border-width-tiny);
  border-image-slice: 1;
  border-image-source: var(--theme-gradient);
  padding: var(--box-padding-large);
}
.feature-item[data-icon-position=top] {
  flex-direction: column;
  text-align: center;
}
.feature-item[data-icon-position=top] .feature-item__icon {
  inline-size: var(--icon-size-large);
  block-size: var(--icon-size-large);
  margin: 0 auto;
}
.feature-item[data-exclude-border] {
  border: unset;
  padding: 0;
}

.feature-item__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: var(--icon-size-larger);
  block-size: var(--icon-size-larger);
}

.feature-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
}

.feature-item__text {
  flex: 1;
}

.feature-item__link {
  padding-block-end: var(--gap);
  font-size: 87.5%;
  /* adjust the format of the links to be smaller than normal */
}
.feature-item__link .feature-item__link a {
  --btn-padding-block: 0.35rem;
  --btn-padding-inline: 1rem;
  --bg-main-hover: transparent;
}
.feature-item-v2 {
  padding: var(--gap-small);
  /* only have the hover state if the element is an anchor, rather than a div */
}
.feature-item-v2:hover a .feature-item-v2__image {
  background: linear-gradient(rgb(var(--bg-main-rgb)/0.5), rgb(var(--bg-main-rgb)/0.5)) padding-box, var(--theme-gradient) border-box;
}
.feature-item-v2:hover a span {
  background-size: 100% 0.125rem;
}

.feature-item-v2__content {
  text-decoration: none;
  margin: 0;
  position: relative;
  /* display:block allows the outline to appear on the :focus state */
  display: block;
}

.feature-item-v2__image {
  display: block;
  inline-size: var(--icon-size-larger);
  block-size: var(--icon-size-larger);
  margin: 0 auto var(--gap-tiny);
  background: var(--gradient-border);
  border: var(--icon-border-width) solid transparent;
  border-radius: 100vmax;
  /* added display grid to support fontawesome icons in future */
  display: grid;
  place-items: center;
}

.feature-item-v2__name {
  font-weight: var(--text-weight-medium);
  display: block;
  text-align: center;
  background-size: 0% 0.125rem;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-image: var(--theme-gradient-lighter);
  transition: background var(--speed-standard) var(--transition-out-quartic);
}
.component-features {
  container-type: inline-size;
  container-name: featurescontainer;
}
.component-features .text-container {
  margin-block-end: var(--gap-dynamic-large);
}

.features-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--gap) var(--gap-large);
}
.features-list .featureItem:nth-child(n+2) {
  border-block-start: var(--border-hard);
  padding-block-start: var(--gap);
}

/* width breakpoints are number of columns multiplied by 20rem + 4rem (gap-large) */
@container featurescontainer (min-width: 44rem) {
  .features-list .featureItem:nth-child(-n+2) {
    border-block-start: unset;
    padding-block-start: unset;
  }
}
@container featurescontainer (min-width: 68rem) {
  .features-list .featureItem:nth-child(-n+3) {
    border-block-start: unset;
    padding-block-start: unset;
  }
}
@container featurescontainer (min-width: 92rem) {
  .features-list .featureItem:nth-child(-n+4) {
    border-block-start: unset;
    padding-block-start: unset;
  }
}
.features-v2__list {
  display: flex;
  flex-wrap: wrap;
}

/* .features-v2__title defined in _multi-component-rules.scss */
.features-v2__description {
  margin-block-end: var(--gap-large);
}

.features-v2__image {
  display: none;
}

/* this is the sub component of the features list */
.featureItemv2 {
  padding: var(--box-padding);
  /* assume if it's not matching the below, then could be geater number of children than 12 */
  flex: 0 0 33.3333%;
}

/* automatic columns for sub items - depending on number of children, want to */
/* have evenly distributed columns where possible */
.featureItemv2:first-child:nth-last-child(1) {
  flex: 1;
}

.featureItemv2:first-child:nth-last-child(2), .featureItemv2:first-child:nth-last-child(2) ~ .featureItemv2 {
  flex: 0 0 50%;
}
.featureItemv2:first-child:nth-last-child(3), .featureItemv2:first-child:nth-last-child(3) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(6), .featureItemv2:first-child:nth-last-child(6) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(9), .featureItemv2:first-child:nth-last-child(9) ~ .featureItemv2 {
  flex: 0 0 33.3333%;
}
.featureItemv2:first-child:nth-last-child(4), .featureItemv2:first-child:nth-last-child(4) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(7), .featureItemv2:first-child:nth-last-child(7) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(8), .featureItemv2:first-child:nth-last-child(8) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(11), .featureItemv2:first-child:nth-last-child(11) ~ .featureItemv2 {
  flex: 0 0 25%;
}
.featureItemv2:first-child:nth-last-child(5), .featureItemv2:first-child:nth-last-child(5) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(10), .featureItemv2:first-child:nth-last-child(10) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(12), .featureItemv2:first-child:nth-last-child(12) ~ .featureItemv2 {
  flex: 0 0 20%;
}

@media only screen and (max-width: 87em) {
  /* just update the five-column items */
  .featureItemv2:first-child:nth-last-child(5), .featureItemv2:first-child:nth-last-child(5) ~ .featureItemv2 {
    flex: 0 0 33.3333333%;
  }
  .featureItemv2:first-child:nth-last-child(10), .featureItemv2:first-child:nth-last-child(10) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(12), .featureItemv2:first-child:nth-last-child(12) ~ .featureItemv2 {
    flex: 0 0 25%;
  }
}
@media only screen and (max-width: 62.5em) {
  /* max three columns */
  .featureItemv2:first-child:nth-last-child(4), .featureItemv2:first-child:nth-last-child(4) ~ .featureItemv2 {
    flex: 0 0 50%;
  }
  .featureItemv2:first-child:nth-last-child(7), .featureItemv2:first-child:nth-last-child(7) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(8), .featureItemv2:first-child:nth-last-child(8) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(10), .featureItemv2:first-child:nth-last-child(10) ~ .featureItemv2, .featureItemv2:first-child:nth-last-child(12), .featureItemv2:first-child:nth-last-child(12) ~ .featureItemv2 {
    flex: 0 0 33.3333%;
  }
}
@media only screen and (max-width: 44em) {
  /* max three columns */
  .featureItemv2 {
    flex: 1 0 50% !important;
  }
}
.gradient-border {
  display: block;
  color: var(--text-white);
  text-decoration: none;
  /* .scroller adds height 100% to this component */
  container-type: inline-size;
  /* added the block size in to ensure equal spacing */
  block-size: 100%;
}
.gradient-border:hover .gradient-border__content {
  border-image-source: var(--theme-gradient-lighter);
}
.gradient-border:hover .gradient-border__content:hover span {
  background-size: 100% var(--arrow-width, 0.125rem);
}
.gradient-border:hover .gradient-border__content:hover::after {
  transform: translate(0.25rem, -100%) rotate(-45deg);
}
.gradient-border u {
  text-decoration: underline;
}

.gradient-border__content {
  padding: var(--box-padding-large);
  block-size: 100%;
  background-color: var(--bg-white-if-light);
  border: var(--border-width) solid;
  border-image-slice: 1;
  border-image-source: var(--theme-gradient);
}

/* only apply this if the gradient border is a valid href, not a div */
/* gradient border reverts to a div if no HREF is specified in CMS */
a.gradient-border .gradient-border__content::after {
  display: block;
  position: absolute;
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  inset-block-end: calc(0.5rem + var(--border-width));
  inset-inline-end: calc(1rem + var(--border-width));
  border: solid currentColor;
  border-width: 0 var(--arrow-width, 0.125rem) var(--arrow-width, 0.125rem) 0;
  transform: translate(0, -100%) rotate(-45deg);
  transition: transform var(--speed-standard) var(--transition-out-quadratic);
}
.flexibleRowContainer {
  margin-block-end: var(--gap-large);
}

.flexible-row-container {
  display: grid;
  grid-auto-flow: dense;
  gap: var(--gap);
  --grid-columns: 1;
  grid-template-columns: repeat(var(--grid-columns, 1), 1fr);
}
.flexible-row-container > * {
  margin: 0;
}

[data-max-items="1"] {
  --grid-columns: 1 !important;
}

[data-max-items=flex] {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}
[data-max-items=flex] > .flexibleRowContainer {
  flex: 1;
}

[data-max-items="1-2"] > :nth-child(even) {
  grid-column: span min(2, var(--grid-columns) - 1);
}

[data-max-items="2-1"] > :nth-child(odd) {
  grid-column: span min(2, var(--grid-columns) - 1);
}

[data-max-items="1-3"] > :nth-child(even) {
  grid-column: span min(3, max(1, var(--grid-columns) - 1));
}

[data-max-items="3-1"] > :nth-child(odd) {
  grid-column: span min(3, max(1, var(--grid-columns) - 1));
}

/* ------------------------------------------------------ */
/* container queries are preferred, with browser support */
/* ------------------------------------------------------ */
@supports (container-type: inline-size) {
  .flexibleRowContainer {
    container-type: inline-size;
    container-name: flexcontainer;
  }
}
@container flexcontainer (min-width: 25em) {
  [data-max-items="5"],
  [data-max-items="4"],
  [data-max-items="4321"],
  [data-max-items="3"],
  [data-max-items="2"] {
    --grid-columns: 2;
  }
  :is([data-max-items="5"], [data-max-items="4"], [data-max-items="3"], [data-max-items="2"]):not(:has(> :nth-child(2))) {
    --grid-columns: 1;
  }
}
@container flexcontainer (min-width: 37em) {
  [data-max-items="5"],
  [data-max-items="4321"],
  [data-max-items="3"] {
    --grid-columns: 3;
  }
  :is([data-max-items="2"], [data-max-items="3"], [data-max-items="4"], [data-max-items="5"]):not(:has(> :nth-child(3))) {
    --grid-columns: 2;
  }
  [data-max-items="1-2"],
  [data-max-items="2-1"],
  [data-max-items="4"],
  [data-max-items="2"] {
    --grid-columns: 2;
  }
  [data-max-items]:not(:has(> :nth-child(2))) {
    --grid-columns: 1;
  }
  /* 3-1 would be the exception for reducing to 1 because the content that takes up 75% screen width would be large */
  /* already and will benefit from filling the screen at this breakpoint */
  [data-max-items="1-3"],
  [data-max-items="3-1"] {
    --grid-columns: 1;
  }
}
@container flexcontainer (min-width: 50em) {
  [data-max-items="1-3"],
  [data-max-items="3-1"],
  [data-max-items="1-2"],
  [data-max-items="2-1"] {
    --grid-columns: 3;
  }
  :is([data-max-items="4"], [data-max-items="3"], [data-max-items="2"]):not(:has(> :nth-child(2))) {
    --grid-columns: 1;
  }
}
@container flexcontainer (min-width: 62em) {
  [data-max-items="5"] {
    --grid-columns: 5;
  }
  :is([data-max-items="1-3"],
  [data-max-items="3-1"],
  [data-max-items="4"],
  [data-max-items="4321"],
  [data-max-items="5"]:not(:has(> :nth-child(5)))) {
    --grid-columns: 4;
  }
  [data-max-items="3"],
  :is([data-max-items="4"], [data-max-items="5"]):not(:has(> :nth-child(4))),
  :is([data-max-items="1-2"], [data-max-items="2-1"], [data-max-items="1-3"], [data-max-items="3-1"]):not(:has(> :nth-child(3))) {
    --grid-columns: 3;
  }
  :is([data-max-items="3"], [data-max-items="4"], [data-max-items="5"]):not(:has(> :nth-child(3))) {
    --grid-columns: 2;
  }
  [data-max-items]:not(:has(> :nth-child(2))) {
    --grid-columns: 1;
  }
}
/* ---------------------------------------------------- */
/* fall back if container queries are NOT supported */
/* ---------------------------------------------------- */
@supports not (container-type: inline-size) {
  @media only screen and (max-width: 44em) {
    /* only use five items for things like icons, when each item is small and we can have more columns on narrow widths */
    [data-max-items="5"] {
      --grid-columns: 2;
    }
  }
  @media only screen and (min-width: 44em) {
    [data-max-items="5"],
    [data-max-items="1-2"],
    [data-max-items="2-1"] {
      --grid-columns: 3;
    }
    [data-max-items="4"],
    [data-max-items="3"],
    [data-max-items="2"] {
      --grid-columns: 2;
    }
    /* the purpose of nested data-max-items is for when there are flex containers INSIDE other flex containers */
    [data-max-items] [data-max-items="5"] {
      --grid-columns: 5;
    }
    [data-max-items] [data-max-items="4"] {
      --grid-columns: 4;
    }
    [data-max-items] [data-max-items="3"],
    [data-max-items] [data-max-items="1-2"],
    [data-max-items] [data-max-items="2-1"] {
      --grid-columns: 3;
    }
    [data-max-items] [data-max-items="2"] {
      --grid-columns: 2;
    }
    [data-max-items="1-2"] > :nth-child(even) {
      grid-column: span min(2, var(--grid-columns));
    }
    [data-max-items="2-1"] > :nth-child(odd) {
      grid-column: span min(2, var(--grid-columns));
    }
  }
  @media only screen and (min-width: 71em) {
    [data-max-items="5"] {
      --grid-columns: 5;
    }
    [data-max-items="4"] {
      --grid-columns: 4;
    }
    [data-max-items="3"],
    [data-max-items="1-2"],
    [data-max-items="2-1"] {
      --grid-columns: 3;
    }
    [data-max-items="2"] {
      --grid-columns: 2;
    }
  }
  /* exception for when a wistia or youtube video is used inside flexible row containers, as is the case on many vendor pages */
  /* typically 2 columns as the introduction area */
  @media only screen and (max-width: 62.5em) {
    [data-max-items="2"]:has(.wistiaVideo, .video) {
      --grid-columns: 1;
    }
  }
}
.hero-banner {
  display: grid;
  grid-template: "content image" 1fr/1.5fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  background: var(--theme-gradient);
  --overlap-top: 8rem;
  margin-block: var(--gap-large) 0;
  margin-inline: var(--inline-reverse-margin);
  padding-inline: var(--inline-reverse-padding);
}
.hero-banner[data-align=right] {
  grid-template: "image content" 1fr/1fr 1.5fr;
}
.hero-banner[data-align=right] :is(.hero-banner__image__overlay, .hero-banner__image_bg) {
  margin-inline-end: 0;
  margin-inline-start: var(--inline-reverse-margin);
}
.hero-banner .sub-heading + h2 {
  margin-block-start: 0;
}

.hero-banner__image__overlay,
.hero-banner__image_bg {
  user-select: none;
  pointer-events: none;
  block-size: calc(100% + var(--overlap-top));
  margin-block-start: calc(-1 * var(--overlap-top));
  margin-inline-end: var(--inline-reverse-margin);
}

.hero-banner__image__overlay {
  grid-area: image;
  display: grid;
  place-items: center;
  position: relative;
}
.hero-banner__image__overlay div {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-banner__image__overlay img {
  margin-inline: auto;
  inline-size: clamp(10rem, 100%, 30rem);
  filter: drop-shadow(0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.5));
}

.hero-banner__image_bg {
  grid-area: image;
  overflow: hidden;
  position: relative;
}
.hero-banner__image_bg div {
  position: absolute;
  inset: 0;
}
.hero-banner__image_bg img {
  object-fit: cover;
  block-size: 100%;
  object-position: var(--bg-align);
}

.hero-banner-content {
  grid-area: content;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  color: white;
}
.hero-banner-content .sub-content {
  margin-block: 2rem;
}
.hero-banner-content .contents {
  margin-block-start: var(--gap-small);
}
.hero-banner-content .contents:not(:has(:nth-child(1))) {
  display: none;
}

@media only screen and (max-width: 40em) {
  .hero-banner {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr minmax(10rem, auto);
    grid-template-areas: "content" "image";
  }
  .hero-banner__image_bg {
    clip-path: none;
    grid-row: 2;
    grid-column: 1;
  }
  .hero-banner__image__overlay img {
    inline-size: clamp(10rem, 50%, 30rem);
  }
}
:is(.oneColumnContent):has(+ .hero) {
  inline-size: 66%;
}

:is(.angledContainer):has(+ .hero) {
  margin-block-end: 8rem;
}
/* 
.hero-slide
  .hero-feature(data-align='left' data-has-bg='')
    .hero-feature-bg
      picture
        img
    .hero-feature-content
      h2 Partner Central
      div
        {{richtext}}
      p.contents
        a.call-to-action
      .contents
        <<parsys>>
    .hero-feature-image
      picture
        img
*/
.hero-slide {
  margin-block-end: var(--gap-large);
}

.hero-feature-content .text-image-with-cta {
  --o: 100%;
}
.hero-feature-content div.contents {
  display: grid;
  gap: 2rem;
}
.hero-feature-content > :not(div.contents) {
  display: grid;
  gap: 1rem;
  margin-bottom: var(--gap);
}

.hero-feature-image {
  display: none;
}

@media (max-width: 40em) {
  .hero-feature-bg {
    display: none;
  }
}
@media (min-width: 40em) {
  .hero-feature {
    display: grid;
    --excess: clamp(0rem, 4vw, 4rem);
    grid-template-columns: var(--excess) 0.5fr 1fr var(--excess);
    align-items: start;
  }
  .hero-feature-content {
    grid-column: 2/4;
    grid-row: 1;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }
  .hero-feature-content > :not(div.contents) {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    /* to ensure it stays under the menu */
    inset-block-start: 6rem;
    block-size: fit-content;
    padding: var(--box-padding);
    margin-block-start: var(--gap-large);
    background-color: rgb(var(--bg-main-rgb)/0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .hero-feature-content div.contents {
    grid-column: 2;
    grid-row: 1;
    padding-block-start: calc(var(--gap-large) + var(--box-padding));
  }
  .hero-feature-bg {
    position: sticky;
    top: 0;
    grid-column: 3/-1;
    grid-row: 1;
  }
}
@property --a {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --b {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --offset1 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --offset2 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.3;
}
.hero-slide-v2 {
  display: grid;
  --overflow: clamp(4rem, 12vw, 12rem);
  padding-block-end: var(--overflow);
  margin-block-end: calc(-1 * var(--overflow) + 4rem);
  min-width: 100%;
}

:where(.hero-carousel-item) {
  --theme: rgb(141 31 154);
}

.hero-carousel-item {
  display: grid;
  align-items: center;
  grid-template: "content image" 1fr/1fr 1fr;
  margin-inline: var(--inline-reverse-margin);
  padding-inline: var(--inline-reverse-padding);
  --blue: 3 30 82;
  --orange: 248 98 2;
  --purple: 141 31 154;
  background: radial-gradient(calc(31vw - 4vw * var(--offset1)) 50% at calc(16% - 10% * var(--mouse-x) + var(--offset2) * 15%) calc(100% - var(--offset1) * 10%) in srgb, rgb(var(--blue)/58%) 20%, rgb(var(--blue)/0)), radial-gradient(calc(45vw + 10vw * (1 - var(--mouse-x)) + var(--offset1) * var(--offset2) * 27vw) calc(37% + 10% * (1 - var(--mouse-x))) at calc(10% - 5% * var(--mouse-x)) 0% in srgb, rgb(var(--blue)/60%) 0%, rgb(var(--blue)/0)), radial-gradient(23vw 60% at 41% 8% in srgb, rgb(var(--blue)/35%) 0%, rgb(var(--blue)/0)), radial-gradient(circle clamp(20rem, 33vw + var(--offset2) * 8vw, 41rem) at 90% 50% in srgb, rgb(var(--orange)) 20%, rgb(var(--orange)/0)), radial-gradient(circle 17vw at calc(60% - 10% * (0.5 - var(--mouse-x))) calc(10% + 5% * (var(--offset1) - var(--offset2))) in srgb, rgba(251, 31, 154, 0.5) 20%, rgb(var(--purple)/0)), radial-gradient(19vw at calc(90% - 10% * (0.5 - var(--mouse-x)) * var(--offset1)) calc(20% * var(--mouse-y)) in srgb, rgb(251, 31, 154) 50%, rgb(var(--purple)/0)), linear-gradient(in srgb, rgb(var(--purple)), rgb(var(--purple)));
  /* transition-property: shift-hero calc(var(--speed-snail) * 2) linear; */
}

@media only screen and (orientation: landscape) {
  .hero-carousel-item {
    min-block-size: calc(100vh - 4rem);
  }
}
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
  .hero-carousel-item {
    animation-name: unset;
  }
}
@keyframes shift-offset {
  0% {
    --offset1: 0;
    --offset2: 0.3;
  }
  25% {
    --offset1: 1;
    --offset2: 0;
  }
  50% {
    --offset1: 0.6;
    --offset2: 0.2;
  }
  75% {
    --offset1: 0.3;
    --offset2: 0.8;
  }
  100% {
    --offset1: 0;
    --offset2: 0.3;
  }
}
.hero-carousel-item__bg {
  grid-area: image;
  display: grid;
  position: relative;
  background-image: none !important;
  block-size: calc(100% + var(--overflow));
  margin-block-end: calc(var(--overflow) * -1);
  margin-inline-end: var(--inline-reverse-margin);
}
.hero-carousel-item__bg img {
  pointer-events: none;
  user-select: none;
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: left;
  mix-blend-mode: overlay;
}
.hero-carousel-item__bg > div {
  display: contents;
}
.hero-carousel-item__bg span {
  display: none;
}

.hero-container__video {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  /* background-color: black; always black as it's a video playing and better to choose black than a corporate colour */
}
.hero-container__video iframe {
  aspect-ratio: 16/9;
  block-size: 100%;
  object-fit: cover;
}

.hero-carousel-item__content-wrapper {
  grid-area: content;
  padding-block: clamp(4rem, 10vw, 8rem);
}
.hero-carousel-item__content-wrapper > div {
  max-width: 70ch;
  margin-right: auto;
}

.hero-carousel-item__title,
.vendor-header__title {
  /* a script adds an inline length to the h1 but as a fall back, set a length here */
  --length: 34;
  --cLength: var(--length);
  /* the variable for length is taken into account where more than 50 characters starts to shrink the text size up to 75 characters where 0.75 factor is applied */
  font-size: calc(var(--text-size-h1) * clamp(0.75, (100 - (var(--cLength) - 30)) / 100 + 0.1, 1.2));
}
.hero-carousel-item__title:has(strong),
.vendor-header__title:has(strong) {
  --cLength: calc(var(--length) - 17);
}

.hero-carousel-item__description {
  /* need to override the inline style on the component */
  font-size: var(--text-size-larger);
}

@media only screen and (max-width: 44em) {
  .hero-carousel-item {
    grid-template-columns: 2fr 1fr;
  }
}
.introAndQuicklinks {
  margin-block-end: var(--gap-large);
}

.intro__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap-large);
}

.intro__content {
  flex: 1;
  min-inline-size: 20ch;
}

.intro__quick-links {
  padding: var(--box-padding-large);
  border: 0.1875rem solid var(--theme-green);
  border-radius: var(--border-radius-large);
  background-color: rgb(var(--bg-main-rgb)/0.8);
  -webkit-backdrop-filter: blur(var(--blur-medium));
  backdrop-filter: blur(var(--blur-medium));
  margin-block-end: var(--gap);
}

.quick-links__title {
  font-size: var(--text-size-h3);
  margin-bottom: var(--gap-small);
}

.quick-links__list {
  min-inline-size: 1rem;
  display: grid;
  gap: var(--gap-small);
}
.quick-links__list .link:not(.partnerCentralLink) a {
  display: block;
  padding: var(--padding-ch);
  padding-left: 2ch;
  /* extra padding to the left to provide space for the caret down */
  background-color: rgb(var(--bg-inverse-rgb)/0.1);
  border-radius: var(--border-radius-small);
  text-decoration: none;
  overflow: hidden;
  position: relative;
  width: fit-content;
  max-width: 24ch;
  /* transition: box-shadow var(--speed-standard) var(--transition-out-quadratic); */
  /* before is used for the caret down arrow */
  /* after is used for the horizontal border hover effect */
}
.quick-links__list .link:not(.partnerCentralLink) a::before {
  display: block;
  position: absolute;
  content: "";
  inline-size: 0.5ch;
  block-size: 0.5ch;
  top: 1.125ch;
  left: 0.8ch;
  border: solid currentColor;
  border-width: 0 0.125rem 0.125rem 0;
  transform: rotate(45deg);
  transition: transform var(--speed-standard) var(--transition-out-quadratic);
}
.quick-links__list .link:not(.partnerCentralLink) a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  block-size: 0.125rem;
  background-size: 0% 0.125rem;
  background-position: calc(var(--rtl, 0) * -100%) 100%;
  background-repeat: no-repeat;
  background-image: var(--theme-gradient-lighter);
  transition: background var(--speed-slow) ease;
}
.quick-links__list .link:not(.partnerCentralLink) a:where(:hover, :focus-visible)::before {
  transform: translateY(0.125ch) scale(1.1) rotate(45deg);
}
.quick-links__list .link:not(.partnerCentralLink) a:where(:hover, :focus-visible)::after {
  background-size: 100% 0.125rem;
}

@media only screen and (max-width: 44em) {
  .intro__quick-links {
    inline-size: 100%;
  }
  .quick-links__list {
    display: block;
    columns: 2 18ch;
    column-gap: var(--gap-large);
    padding-block: var(--gap);
    column-rule: var(--border-soft);
  }
  .quick-links__list .link:not(:last-of-type) {
    margin-block-end: var(--gap-small);
  }
  .quick-links__list .link a {
    max-width: unset;
  }
}
/* * adds extra margin if the news showcase is part of the normal page flow */
:where(.oneColumnContent, .newsShowcase) + :where(.newsShowcase, .scroller, .flexibleRowContainer) {
  margin-block-start: var(--gap-large);
}

:is(.scroller, .flexibleRowContainer) :is(.newsShowcase, .news-showcase, .news-showcase__inner) {
  /* but unset extra margin if the showcase is inside a scroller or flex container */
  margin-block-start: unset;
}
:is(.scroller, .flexibleRowContainer) :is(.news-showcase, .news-showcase__inner) {
  /* also add fill-height sizing, but not on the direct child of the scroller */
  block-size: 100%;
}

:is(main, .content-container) > div > .newsShowcase .news-showcase__image-container {
  margin-inline-start: var(--inline-reverse-margin);
}
:is(main, .content-container) > div > .newsShowcase .news-showcase__content-container {
  flex: 0 1 calc(100% - var(--flex-ns));
}

.news-showcase__inner {
  display: flex;
  gap: var(--gap);
  --flex-ns: 50%;
  block-size: 100%;
}

@media only screen and (min-width: 50em) {
  [data-width="75"] .news-showcase__inner {
    --flex-ns: 75%;
  }
  [data-width="66"] .news-showcase__inner {
    --flex-ns: 66.66666%;
  }
  [data-width="50"] .news-showcase__inner {
    --flex-ns: 50%;
  }
  [data-width="33"] .news-showcase__inner {
    --flex-ns: 33.333%;
  }
  [data-width="25"] .news-showcase__inner {
    --flex-ns: 25%;
  }
  [data-width="20"] .news-showcase__inner {
    --flex-ns: 20%;
  }
  [data-width="12"] .news-showcase__inner {
    --flex-ns: 12%;
  }
}
[data-reduce-margin] .news-showcase__inner {
  gap: var(--gap-small);
}

[data-image-position=right] .news-showcase__inner {
  flex-direction: row-reverse;
}

.news-showcase__image-container {
  flex: 1 1 calc(var(--flex-ns));
}

[data-remove-border]:is([data-display-style=background], [data-display-style=inline]) .news-showcase__image-container {
  border-width: 0;
}
[data-remove-border]:is([data-display-style=background], [data-display-style=inline]) .news-showcase__image-container img {
  border-width: 0;
}

[data-display-style=inline] .news-showcase__image-container img {
  inline-size: 100%;
}

/* get rid of the image when the image should be the background style */
[data-display-style=background] .news-showcase__image-container {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: var(--bg-img);
  /* inherits --bg-img from inline style on component */
}
[data-display-style=background] .news-showcase__image-container img {
  display: none;
}

[data-vertically-center] .news-showcase__inner {
  align-items: center;
}
[data-vertically-center] .news-showcase__content-container {
  padding-block: var(--gap);
}

.news-showcase__content-container {
  flex: 1 1 calc(100% - var(--flex-ns) + var(--border-width-thinner));
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-small);
  align-items: flex-start;
  align-content: flex-start;
  /* add some additional margin above the buttons */
}
.news-showcase__content-container > *:not(a) {
  flex: 1 0 100%;
}
.news-showcase__content-container > a {
  height: fit-content;
}
.news-showcase__content-container .news-showcase__cta {
  margin-block-start: var(--gap-small);
}

.news-showcase__author {
  display: flex;
  align-items: center;
  padding-block-end: var(--gap-small);
}

h2 ~ .news-showcase__author {
  border-block-start: var(--border-soft);
  padding-block-start: var(--gap-small);
}

.news-showcase__author:has(~ h3) {
  border-block-end: var(--border-soft);
  padding-block-end: var(--gap-small);
}

.news-showcase__author-image {
  overflow: hidden;
  inline-size: var(--icon-size-standard);
  block-size: var(--icon-size-standard);
  border-radius: 50%;
  flex-shrink: 0;
  margin-inline-end: var(--gap-small);
}

.news-showcase__author-name {
  font-weight: var(--text-weight-bold);
  margin: 0;
}

.news-showcase__author-title {
  margin: 0;
}

@media only screen and (max-width: 31em) {
  [data-mobile-hide-image]:not([data-media-mode=video]) .news-showcase__image-container {
    display: none;
  }
}
@media only screen and (max-width: 50em) {
  .news-showcase:not([data-mobile-no-stack]) .news-showcase__inner {
    flex-direction: column;
  }
  [data-display-style=background] .news-showcase__image-container {
    /* keep a limited aspect ratio incase of portrait style images filling the screen */
    max-block-size: 50vmax;
  }
  [data-display-style=background] .news-showcase__image-container img {
    opacity: 0;
    display: block;
  }
}
.oneColumnContent {
  transform-origin: left center;
}

:dir(rtl) .oneColumnContent {
  transform-origin: right center;
}

/* add extra padding if one component follows another */
:where(.oneColumnContent + .oneColumnContent) {
  margin-block-start: var(--gap);
}

/* add consistent full height to elements if inside scroller */
.mainContainer:not(.editmode) .scroller :where(.oneColumnContent, .oneColumnContent .tile) {
  block-size: 100%;
}

.one-column-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  block-size: 100%;
  /* the component can have an optional background image applied */
}
.one-column-content[data-bg] {
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
}
.one-column-content[data-bg] > div {
  padding: var(--box-padding-large);
}
.one-column-content[data-separator-line] {
  margin-block: var(--gap-large);
  border-block-end: var(--border-medium);
}

/* avoid the top margin if the horizontal line is within flex container or scroller */
:is(.flexible-row-container, .scroller) > .oneColumnContent > [data-separator-line] {
  margin-block-start: 0;
}

/* ! css stored in introAndQuicklinks */
.download-resource {
  align-items: center;
  justify-content: space-between;
  block-size: 100%;
  gap: var(--gap-small);
  --icon: var(--icon-download);
}
.download-resource div {
  display: grid;
  grid-template: unset;
  grid-template-areas: "stack";
  place-items: center;
  gap: 0;
  padding: 0;
}
.download-resource div::before {
  content: "";
  aspect-ratio: 1;
  width: var(--icon-size-standard);
  height: var(--icon-size-standard);
  grid-area: stack;
  border: var(--border-width-thin) solid currentColor;
  border-radius: 100vmax;
}
.download-resource div::after {
  content: "";
  aspect-ratio: 1;
  width: var(--icon-size-small);
  height: var(--icon-size-small);
  grid-area: stack;
  background-color: currentColor;
  clip-path: var(--icon);
}
.download-resource p {
  text-align: center;
}
@charset "UTF-8";
.scroller {
  margin-block-end: var(--gap-large);
}

/* required to ensure sub items are 100% height */
.scroller-component {
  display: grid;
  margin-inline-end: var(--inline-reverse-margin);
  padding-inline-end: var(--inline-reverse-padding);
  container-type: inline-size;
  container-name: scroller;
  --s-item-width: 100%;
}

.scroller-component__slides {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(var(--s-item-width) - var(--peeking-adjust, 0%));
  gap: var(--gap);
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  overflow-y: clip;
  overscroll-behavior-x: contain;
  anchor-name: var(--anchor-name);
  /* the 0.5rem ensures the :focus outline is still visible */
  padding-block: 0.5rem var(--gap);
  padding-inline-end: calc(var(--container-padding) + var(--inline-container-excess));
  margin-inline-end: calc(-1 * (var(--container-padding) + var(--inline-container-excess)));
  scroll-padding-inline: var(--container-padding);
  --quarter: calc(25% - 0.75 * var(--gap));
  --third: calc(33.333333% - 0.666666 * var(--gap));
  --half: calc(50% - 0.5 * var(--gap));
  counter-reset: item;
}
@media (prefers-reduced-motion: no-preference) {
  .scroller-component__slides {
    scroll-behavior: smooth;
  }
}
.scroller-component__slides:focus-visible {
  outline-color: rgb(var(--bg-inverse-rgb)/0.4);
}
.scroller-component__slides[data-max-items="4"] {
  --peeking-adjust: calc(var(--gap) * 0.25);
}
.scroller-component__slides[data-max-items="3"] {
  --peeking-adjust: calc(var(--gap) * 0.3333333);
}
.scroller-component__slides[data-max-items="2"] {
  --peeking-adjust: calc(var(--gap) * 0.5);
}
.scroller-component__slides[data-max-items="1"] {
  --peeking-adjust: var(--gap);
}
.scroller-component__slides[data-max-items=auto] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(18rem, 1fr);
}
.scroller-component__slides > * {
  scroll-snap-align: start;
  margin-block: unset;
}
.scroller-component__slides > .tile {
  display: grid;
}

@supports (scroll-marker-group: after) {
  .scroller-component__slides {
    padding-inline: 5vmin;
    padding-block: var(--gap-small);
    margin-block-end: var(--gap-large);
    scroll-padding-inline-end: 5vmin;
    scrollbar-width: none;
    container-type: inline-size scroll-state;
  }
  .scroller-component__slides > :where(*:not(.flexibleRowContainer)) {
    container-type: scroll-state;
    animation: offscreen-inert linear both;
    animation-timeline: view(x);
  }
  .scroller-component__slides::scroll-button(left), .scroller-component__slides::scroll-button(right) {
    position-area: var(--_inner);
  }
  .scroll-markers {
    scroll-marker-group: after;
  }
  .scroll-markers::scroll-marker-group {
    position: absolute;
    position-anchor: var(--anchor-name);
    container: marker-group/inline-size;
    display: grid;
    gap: var(--gap-small);
    place-content: safe center;
    box-sizing: border-box;
    scrollbar-width: none;
    scroll-behavior: smooth;
    inline-size: 100%;
    max-inline-size: 80cqi;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: 0.3125rem 0.625rem;
    scroll-padding-inline: 0.625rem;
    top: anchor(bottom);
    left: calc(anchor(left) - 10%);
    right: calc(anchor(right) - 10%);
    margin-block: var(--gap-small);
    grid-auto-columns: var(--gap-small);
    grid-auto-flow: column;
    justify-self: center;
  }
  .scroll-markers > *::scroll-marker {
    content: " ";
    color: currentColor;
    scroll-snap-align: center;
    aspect-ratio: 1;
    border: var(--border-medium);
    border-radius: 100vmax;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--speed-standard) ease, outline-offset var(--speed-standard) ease;
    animation: scale-in-and-out linear both;
    animation-timeline: view(x);
    interactivity: auto;
  }
  .scroll-markers > *::scroll-marker:target-current {
    background: currentColor;
  }
  .scroll-markers > *::scroll-marker:not(:active):hover {
    transform: scale(1.25);
  }
  .scroll-markers > *::scroll-marker:focus-visible {
    outline-color: rgb(var(--bg-inverse-rgb)/0.4);
    outline-offset: 0.125rem;
    outline-style: dotted;
    outline-width: 0.1875rem;
  }
  @media (forced-colors: active) {
    .scroll-markers > *::scroll-marker:target-current {
      background: Highlight;
      border-color: Highlight;
    }
  }
  .scroll-buttons::scroll-button(*) {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    z-index: 1;
    position-anchor: var(--anchor-name);
    font-size: 130%;
    font-family: system-ui;
    inline-size: 2.5rem;
    line-height: 1;
    display: flex;
    place-items: center;
    place-content: center;
    aspect-ratio: 1;
    background: rgb(var(--bg-main-rgb)/0.6);
    border: var(--border-medium);
    border-radius: 100vmax;
    color: currentColor;
    transform-origin: center;
    transition: transform var(--speed-standard) ease, opacity var(--speed-standard) ease, background-color var(--speed-standard) ease, outline-offset var(--speed-standard) ease;
  }
  @media (forced-colors: active) {
    .scroll-buttons::scroll-button(*) {
      background: Canvas;
    }
  }
  .scroll-buttons:where(:not([data-vertical-mode=true]))::scroll-button(right) {
    --_inner: center span-inline-start;
    --_inner-under: block-end span-inline-start;
    --_inner-over: block-start span-inline-start;
    --_outer: inline-end center;
    --_outer-under: end;
    --_outer-over: block-start inline-end;
    position-area: var(--_outer-under);
    content: "→"/"Scroll Right";
  }
  .scroll-buttons:where(:not([data-vertical-mode=true]))::scroll-button(left) {
    --_inner: center span-inline-end;
    --_inner-under: block-end span-inline-end;
    --_inner-over: block-start span-inline-end;
    --_outer: inline-start center;
    --_outer-under: block-end inline-start;
    --_outer-over: start;
    position-area: var(--_outer-under);
    content: "←"/"Scroll Left";
  }
  @container (inline-size >= calc(100cqi - 120px)) {
    .scroll-buttons:where(:not([data-vertical-mode=true]))::scroll-button(right), .scroll-buttons:where(:not([data-vertical-mode=true]))::scroll-button(left) {
      position-area: var(--_inner-under);
    }
  }
  .scroll-buttons::scroll-button(*):not(:disabled):is(:hover, :focus-visible) {
    transform: scale(1.1);
  }
  .scroll-buttons::scroll-button(*):not(:active):focus-visible {
    outline-color: currentColor;
    outline-offset: 0.125rem;
    outline-style: dotted;
    outline-width: 0.1875rem;
  }
  .scroll-buttons::scroll-button(right):not(:disabled):active {
    transform: translate(0.3125rem) scale(0.95);
  }
  .scroll-buttons::scroll-button(left):not(:disabled):active {
    transform: translate(-0.3125rem) scale(0.95);
  }
  .scroll-buttons::scroll-button(up):not(:disabled):active {
    transform: translateY(-0.3125rem) scale(0.95);
  }
  .scroll-buttons::scroll-button(down):not(:disabled):active {
    transform: translateY(0.3125rem) scale(0.95);
  }
  .scroll-buttons::scroll-button(*):disabled {
    opacity: 25%;
    cursor: not-allowed;
  }
  .full-width {
    scroll-padding-inline-start: var(--inline-reverse-padding);
    margin-inline: var(--inline-reverse-margin);
    padding-inline: var(--inline-reverse-padding);
    inline-size: calc(100cqi + 2 * var(--inline-reverse-padding));
  }
  .full-width::scroll-button(left) {
    translate: var(--inline-reverse-padding) 0;
  }
  .full-width::scroll-button(right) {
    translate: var(--inline-reverse-margin) 0;
  }
  .panels .full-width {
    margin-inline-start: unset;
    padding-inline-start: unset;
    inline-size: calc(100% + var(--inline-reverse-padding));
    scroll-padding-inline-start: unset;
  }
  .panels .full-width::scroll-button(left) {
    translate: 0;
  }
  .panels .full-width::scroll-marker-group {
    translate: calc(0.5 * var(--inline-reverse-margin));
  }
  .card-carousel {
    padding-block: var(--gap) var(--gap-large);
    margin-block-end: var(--gap-section);
    scroll-padding-inline-end: 0;
    --bg-white-if-light: var(--bg-main);
    --card-container-range: cover -75cqi contain 10cqi;
  }
  .card-carousel::before, .card-carousel::after {
    content: "";
    display: block;
  }
  .card-carousel::before {
    order: 0;
  }
  .card-carousel::after {
    order: 21;
  }
  .card-carousel::scroll-button(*) {
    z-index: 21;
  }
  .card-carousel > * {
    scroll-snap-align: start;
    box-shadow: calc(var(--distance-x) * var(--m) + 0.5rem) calc(var(--distance-y) * var(--m)) var(--l) rgba(0, 0, 0, 0.2);
    transition: unset;
  }
  .card-carousel > *:nth-child(1) {
    z-index: 20;
  }
  .card-carousel > *:nth-child(2) {
    z-index: 19;
  }
  .card-carousel > *:nth-child(3) {
    z-index: 18;
  }
  .card-carousel > *:nth-child(4) {
    z-index: 17;
  }
  .card-carousel > *:nth-child(5) {
    z-index: 16;
  }
  .card-carousel > *:nth-child(6) {
    z-index: 15;
  }
  .card-carousel > *:nth-child(7) {
    z-index: 14;
  }
  .card-carousel > *:nth-child(8) {
    z-index: 13;
  }
  .card-carousel > *:nth-child(9) {
    z-index: 12;
  }
  .card-carousel > *:nth-child(10) {
    z-index: 11;
  }
  .card-carousel > *:nth-child(11) {
    z-index: 10;
  }
  .card-carousel > *:nth-child(12) {
    z-index: 9;
  }
  .card-carousel > *:nth-child(13) {
    z-index: 8;
  }
  .card-carousel > *:nth-child(14) {
    z-index: 7;
  }
  .card-carousel > *:nth-child(15) {
    z-index: 6;
  }
  .card-carousel > *:nth-child(16) {
    z-index: 5;
  }
  .card-carousel > *:nth-child(17) {
    z-index: 4;
  }
  .card-carousel > *:nth-child(18) {
    z-index: 3;
  }
  .card-carousel > *:nth-child(19) {
    z-index: 2;
  }
  .card-carousel > *:nth-child(20) {
    z-index: 1;
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .card-carousel > * {
        animation: card-slide-in linear both;
        animation-range: var(--card-container-range);
        animation-timeline: view(x);
      }
    }
  }
}
@container scroller (width >= 32em) {
  :is([data-max-items="4"], [data-max-items="3"], [data-max-items="2"]) {
    --card-container-range: cover -75cqi contain 20cqi;
    --s-item-width: var(--half);
  }
}
@container scroller (width >= 58em) {
  /* check if 3 or 4-item scroller is missing a third child, and adapt to half spacing */
  :is([data-max-items="4"], [data-max-items="3"]):not(:has(> *:nth-child(3))) {
    --s-item-width: var(--half);
  }
  :is([data-max-items="4"], [data-max-items="3"]) {
    --s-item-width: var(--third);
  }
  [data-max-items="2"] {
    --s-item-width: var(--half);
  }
}
@container scroller (width >= 71em) {
  /* check if a 4-item scroller doesn't have fourth child and adjust to third spacing */
  [data-max-items="4"]:not(:has(> *:nth-child(4))) {
    --s-item-width: var(--third);
  }
  /* check if 3 or 4-item scroller is missing a third child, and adapt to half spacing */
  :is([data-max-items="4"], [data-max-items="3"]):not(:has(> *:nth-child(3))) {
    --s-item-width: var(--half);
  }
  [data-max-items="4"] {
    --s-item-width: var(--quarter);
  }
  [data-max-items="3"] {
    --s-item-width: var(--third);
  }
  [data-max-items="2"] {
    --s-item-width: var(--half);
  }
}
/* fallback for no container queries */
@supports not (container-type: inline-size) {
  @media only screen and (min-width: 24em) {
    [data-max-items="4"],
    [data-max-items="3"],
    [data-max-items="2"] {
      --s-item-width: var(--half);
    }
  }
  @media only screen and (min-width: 62.5em) {
    [data-max-items="4"],
    [data-max-items="3"] {
      --s-item-width: var(--third);
    }
    [data-max-items="2"] {
      --s-item-width: var(--half);
    }
  }
  @media only screen and (min-width: 87em) {
    [data-max-items="4"] {
      --s-item-width: var(--quarter);
    }
    [data-max-items="3"] {
      --s-item-width: var(--third);
    }
    [data-max-items="2"] {
      --s-item-width: var(--half);
    }
  }
}
/* Header for PartnerCentral */
.secondary-header {
  min-block-size: clamp(20rem, 60vh, 35rem);
  margin-block: var(--gap-large);
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  gap: var(--gap);
  align-items: start;
  justify-items: start;
  position: relative;
}
.secondary-header.margin-top:not(:has(div, p)) {
  margin-block-start: 0;
}

.secondary-header-content {
  display: grid;
  gap: var(--gap-small);
  margin-inline-start: calc(-1 * var(--box-padding));
  padding: var(--box-padding-large);
  background-color: rgba(0, 10, 26, 0.7);
  color: white;
  -webkit-backdrop-filter: blur(var(--blur-medium));
  backdrop-filter: blur(var(--blur-medium));
}
.secondary-header-content h1 {
  margin: 0;
}

.secondary-header-bg {
  z-index: -1;
  position: absolute;
  inset-block: calc(-1 * var(--gap));
  inset-inline: var(--inline-reverse-margin);
  grid-column: 1/-1;
  overflow: hidden;
}
.secondary-header-bg div {
  block-size: 100%;
}
.secondary-header-bg img {
  object-fit: cover;
  block-size: 100%;
  object-position: var(--bg-align);
  pointer-events: none;
}

.secondary-header-cta-area {
  padding: clamp(1.25rem, 4vw, 4rem);
  border: 0.1875rem solid var(--theme);
  background-color: rgb(var(--bg-main-rgb)/0.8);
  -webkit-backdrop-filter: blur(var(--blur-medium));
  backdrop-filter: blur(var(--blur-medium));
  border-radius: var(--border-radius-large);
}
.secondary-header-cta-area .quick-links__list {
  padding: unset;
  display: grid;
}

@media only screen and (max-width: 34em) {
  .secondary-header {
    grid-template-columns: 1fr;
  }
}
.component-short-header {
  margin-inline-end: calc(-1 * var(--inline-container-excess));
  margin-block-end: var(--gap-large);
  position: relative;
  isolation: isolate;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr var(--inline-container-excess);
  grid-template-rows: auto;
  align-items: center;
  justify-content: space-between;
}
.hero-container .wrapper {
  grid-row: 1;
  grid-column: 1;
  padding-block-start: min(var(--gap) + 6vw, 6rem);
  color: white;
  font-weight: var(--text-weight-medium);
}
.hero-container .wrapper :is(h1, h2, .visual-h2) {
  overflow-wrap: break-word;
  hyphens: auto;
}
.hero-container .wrapper h1 {
  /* inherits styling from .ribbon-heading-inverse in _general.scss
  length helps to reduce long titles - threshold is 34 characters where more than that gets scaled down linearly */
  --cLength: var(--length, 34);
  font-size: calc(var(--text-size-h1) * clamp(0.75, (100 - (var(--cLength) - 30)) / 100 + 0.1, 1.2));
  margin-block-end: var(--gap);
  line-height: 1.2; /* fixes an issue where baseline characters are clipped (for instance the 'g' on a word) */
  filter: drop-shadow(0 0 0.5rem var(--bg-main));
}
.hero-container .wrapper h1:has(strong) {
  --cLength: calc(var(--length) - 17);
}
.hero-container .brand-logo {
  inline-size: clamp(8rem, 50%, 14rem);
}
.hero-container .brand-logo[src*="/short-hero"] {
  display: none;
}
.hero-container[data-full-width] {
  position: relative;
  display: grid;
  /* grid template designed to prioritize space for content, so the image almost completely disappears on mobiles. */
  grid-template-columns: var(--inline-container-excess) min(15rem + 30vw, 100%) 1fr var(--inline-container-excess);
  grid-template-rows: 1fr;
  gap: unset;
  padding: unset;
}
.hero-container[data-full-width] :is(.component-short-header, .hero-container) {
  display: contents;
}
.hero-container[data-full-width] .wrapper {
  grid-column: 2;
  grid-row: 1;
  padding-block: clamp(var(--gap), var(--gap-large) + 2vw, var(--gap-section));
  z-index: 0;
}
.hero-container[data-full-width] .hero-container-image-wrapper {
  grid-column: 3/-1;
  grid-row: 1;
  border: unset;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: var(--bg-align, center);
  clip-path: polygon(8rem 0%, 100% 0, 100% 100%, 0% 100%);
}
.hero-container[data-full-width] .hero-container-image-wrapper img {
  /* the image is displayed as background as it should be prioritised download
  anyway and more reliable way to  fill the space available */
  display: none;
}

.hero-container-image-wrapper {
  --gradient-light: var(--grey-lightest);
  --gradient-dark: var(--grey-light);
  user-select: none;
  pointer-events: none;
  inline-size: 100%;
  grid-column: 2;
  grid-row: 1;
  position: relative;
  block-size: 100%;
  z-index: -1;
}
.hero-container-image-wrapper img {
  position: absolute;
  inset: 0;
}
.hero-container-image-wrapper:empty {
  display: none;
}

@media only screen and (max-width: 40em) {
  .hero-container {
    grid-template-columns: 1fr 0 0 var(--inline-container-excess);
  }
  /* just hiding the image on small screens */
  .hero-container-image-wrapper {
    display: none;
  }
}
@charset "UTF-8";
.stickyContainer {
  container-type: inline-size;
  container-name: tabNav;
  position: relative;
}
.stickyContainer .skip-nav-link:not(:focus-visible) {
  scale: 0;
}
.stickyContainer .skip-nav-link {
  padding: 1ch 2ch;
}

.sticky-nav {
  display: flex;
  gap: clamp(var(--gap), 3vw, var(--gap-large));
  margin-block: var(--gap-large);
  --inline-reverse-margin: 0;
  --inline-reverse-padding: 0;
}
.sticky-nav .carousel {
  overflow: visible;
  --mi: 0;
}
.sticky-nav .carousel .next-button {
  right: -2rem;
}
.sticky-nav > nav {
  background-color: rgb(var(--bg-main-rgb)/0.7);
  /* border-image-slice: 1;
  border-image-source: var(--theme-gradient);
  border-radius: var(--border-radius-standard); */
  border: var(--border-width-tiny) solid transparent;
  border-radius: var(--border-radius-large) var(--border-radius-large) calc(var(--border-radius-standard) + var(--box-padding)) calc(var(--border-radius-standard) + var(--box-padding));
  background: var(--gradient-border);
  position: sticky;
  scroll-margin-block-start: var(--gap);
  top: 5rem;
  block-size: min-content;
  inline-size: clamp(16ch, 29%, 39ch);
  -webkit-backdrop-filter: blur(var(--blur-small));
  backdrop-filter: blur(var(--blur-small));
}
.sticky-nav > nav ul {
  display: grid;
  list-style-type: none;
  margin: 0;
}
.sticky-nav > nav p {
  margin: 0;
}
.sticky-nav > nav .call-to-action {
  inline-size: max-content;
  max-inline-size: calc(20ch - 2 * var(--box-padding));
  --btn-padding-block: 0.35rem;
  --btn-padding-inline: 1rem;
  border-radius: var(--border-radius-standard);
}
.sticky-nav :is(.outline-link, .nav-cta, .nav-heading) {
  padding: var(--box-padding);
  text-decoration: none;
  display: block;
}
.sticky-nav .outline-link[aria-current] {
  color: white;
  /* --theme: var(--theme-light-blue);
  --gradient-light: var(--theme-light-blue);
  --gradient-dark: var(--theme-green);
  --gradient-light-lighter: var(--theme-light-blue-lighter);
  --gradient-dark-lighter: var(--theme-green-lighter);
  --theme-gradient: linear-gradient(var(--angle), var(--gradient-dark) 0%, var(--gradient-light) 100%);
  --theme-gradient-lighter: linear-gradient(
    var(--angle),
    var(--gradient-dark-lighter) 0%,
    var(--gradient-light-lighter) 100%
  ); */
  background: var(--theme-gradient);
}
.sticky-nav .nav-heading {
  order: -1;
  color: white;
  font-weight: var(--text-weight-bold);
  background: var(--theme-gradient);
  border-start-end-radius: calc(var(--border-radius-large) - var(--border-width-tiny));
  border-start-start-radius: calc(var(--border-radius-large) - var(--border-width-tiny));
}
.sticky-nav .nav-cta {
  order: 100;
  padding-inline: auto;
}
.sticky-nav .panels {
  display: grid;
  grid-gap: var(--gap-large);
  flex-grow: 1;
}
.sticky-nav .margin-bottom-large {
  margin-block-end: var(--gap);
}
.sticky-nav .stickyPanel {
  padding-block-end: var(--gap);
}

/* corrections for use of carousel inside of stickyContainer*/
.stickyPanel .carousel-slide__content-container::before {
  content: unset;
}
.stickyPanel .carousel-slide__image-container::before {
  content: unset;
}
.stickyPanel .carousel-slides {
  padding-block: var(--gap-large);
}
.stickyPanel .carousel-controls {
  translate: 0 -2rem;
}
.stickyPanel :is(.carousel, .contentcarouselslide) {
  margin-block: 0;
}

.tabs-nav {
  display: grid;
  grid-template: 1fr/1fr;
}
.tabs-nav > nav {
  display: grid;
  /* A previous sibling is hovered */
  /* Any other sibling is hovered */
}
.tabs-nav > nav :is(.nav-cta, .nav-heading) {
  display: none;
}
.tabs-nav > nav ul {
  display: flex;
  overflow-x: auto;
  list-style: none;
  border-block-start: var(--border-blue-thick);
  border-block-end: var(--border-blue-thick);
  margin-block-end: var(--gap-large);
  padding-block-end: 3px;
  background: var(--bg-blue-glow);
}
.tabs-nav > nav li {
  display: flex;
}
.tabs-nav > nav button {
  background: none;
  display: block;
  color: inherit;
  text-decoration: none;
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-larger);
  padding: calc(var(--gap) / 2);
  inline-size: max-content;
  max-inline-size: 36ch;
  overflow: hidden;
  position: relative;
  opacity: 0.75;
}
.tabs-nav > nav button:is(:hover, :focus-visible, [aria-selected=true]) {
  opacity: 1;
}
.tabs-nav > nav button::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 0.2rem;
  background-color: var(--theme-magenta);
  translate: var(--_translate, 0);
  scale: var(--_scale, 0) 1;
  transition: scale var(--speed-fast) var(--_scale-delay, 0ms), translate var(--speed-standard);
}
.tabs-nav > nav li:hover ~ li {
  --_translate: -100%;
  --_scale-delay: var(--speed-standard);
}
.tabs-nav > nav:hover li {
  --_translate: 100%;
  --_scale-delay: var(--speed-standard);
}
.tabs-nav > nav li:is(:hover, :has([aria-selected=true])) {
  --_scale: 1;
  --_translate: 0;
  --_scale-delay: 0ms;
}
.tabs-nav > .panels:not(:has(section:not([hidden]))) section:first-of-type {
  display: block;
}
.tabs-nav > .panels :where(section) {
  display: none;
}
.tabs-nav > .panels section:not([hidden]) {
  display: block;
  transform-origin: top center;
  animation-name: zoomInShallow;
  animation-duration: var(--speed-fast);
  animation-fill-mode: both;
}
.tabs-nav .scrollbar-h::-webkit-scrollbar {
  height: 0.5rem;
}

.gallery-nav {
  display: grid;
  grid-template: 1fr/1fr;
}
.gallery-nav nav {
  grid-row: -1;
}
.gallery-nav ul {
  display: flex;
  max-inline-size: 80rem;
  margin-inline: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--gap-small);
  list-style: none;
}
.gallery-nav li {
  font-size: var(--text-size-h3);
  font-weight: var(--text-weight-medium);
}
.gallery-nav li:not(:last-of-type)::after {
  content: " / ";
  display: inline-block;
  margin-left: var(--gap-small);
}
.gallery-nav li a:not(:is(:hover, :focus-visible)) {
  text-decoration: none;
}
.gallery-nav button {
  background: none;
}
.gallery-nav button[aria-selected=false] {
  opacity: 0.6;
}
.gallery-nav .stickyPanel {
  display: contents;
}
.gallery-nav .panels {
  grid-row: 1;
  display: grid;
  grid-template: auto 1fr/1fr;
  margin-inline: auto;
  inline-size: min(100%, var(--width-control, 100%));
  text-align: center;
}
.gallery-nav .panels section {
  grid-column: 1;
  grid-row: 1/-1;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: 1fr;
}
.gallery-nav .panels section:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transform-origin: center;
  animation-name: fadeInShallow;
  animation-duration: var(--speed-fast);
  animation-fill-mode: both;
}
.gallery-nav .panels:not(:has(section[hidden])) section:first-of-type {
  opacity: 1;
  visibility: visible;
}
.gallery-nav .panels :where(section) {
  opacity: 0;
  visibility: hidden;
}
.gallery-nav .panels :where(h3, h2, .visual-h3, .visual-h2) {
  align-self: center;
}
.gallery-nav .nav-heading {
  display: none;
}

body[data-edit-mode] ¶ .gallery-nav .stickyPanel {
  display: revert;
}

@media screen and (max-width: 37em) {
  .sticky-nav nav {
    z-index: 5;
    transition: opacity var(--speed-standard) ease;
    transform-origin: bottom center;
    position: fixed;
    inset: auto 0 0 0;
    max-inline-size: unset;
    inline-size: 100vw;
    border-radius: unset;
    -webkit-backdrop-filter: blur(var(--blur-large));
    backdrop-filter: blur(var(--blur-large));
    visibility: inherit;
    opacity: 1;
    box-shadow: inset 0 0 2rem rgb(var(--bg-inverse-rgb)/0.5);
    background: rgb(var(--bg-main-rgb)/0.5);
  }
  .sticky-nav nav:not(:has(.outline-link[aria-current])) {
    visibility: hidden;
    opacity: 0;
  }
  .sticky-nav nav ul {
    padding: 0 var(--container-padding);
    scroll-padding-inline: var(--container-padding);
    display: flex;
    gap: var(--gap-small);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
  }
  .sticky-nav nav ul::-webkit-scrollbar {
    display: none;
  }
  .sticky-nav nav ul:not(:has(.snap)) > * {
    scroll-snap-align: start;
  }
  .sticky-nav nav ul .snap {
    scroll-snap-align: center;
  }
  .sticky-nav nav .nav-heading {
    display: none;
  }
  .sticky-nav nav .nav-cta {
    margin-inline: var(--container-padding);
    display: grid;
    justify-items: stretch;
    padding-block-end: 2rem;
  }
  .sticky-nav nav .call-to-action {
    inline-size: unset;
    max-inline-size: unset;
    text-align: center;
  }
  .sticky-nav .outline-link {
    inline-size: max-content;
  }
  .tabs-nav > nav {
    inline-size: calc(100% + var(--container-padding));
  }
  @supports (animation-timeline: view()) {
    .stickyContainer nav li {
      animation: scroll-lane-scale both linear, scroll-lane-scale both linear reverse;
      animation-timeline: view(inline);
      animation-range: entry, exit;
    }
    @keyframes scroll-lane-scale {
      0% {
        opacity: 0.5;
        scale: 0.9;
      }
    }
  }
}
/* 
.testimonial
  .testimonial-wrapper
    figure.testimonial-inner
      blockquote.testimonial-content
        p
      .testimonial-author
        .testimonial-author-image.object-fit-cover
          img
        figcaption.testimonial-author-info
          p.testimonial-author-name Rene Klein
          p.testimonial-author-title Senior Vice President, Westcon Europe 
*/
.testimonial-wrapper {
  --author-size: 12.5rem;
  --author-padding: calc(0.067 * var(--author-size));
  --quote-inline: calc(2.38 * var(--author-size));
  --testimonial-padding: calc(0.7 * var(--author-size));
  max-inline-size: calc(50ch + var(--author-size) + 2 * var(--author-padding) + var(--gap-dynamic-large));
  margin-inline: auto;
  position: relative;
  isolation: isolate;
  --quote: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDcyIDc5MyI+PHBhdGggaWQ9ImEiIGQ9Ik01MTEgNTQyLjhjMCAxNTAuMi0xMDcuOCAyNDYuNS0yNTQuMiAyNDYuNVMyMy40IDcxMC40IDUuNSA1ODQuMWMtMS45LTEzLjItMi44LTI3LTIuOC00MS4yUzMuNCA1MDggNiA0ODkuN2M2LjQtNDQgMjQuMi05Ny4xIDcxLjgtMTk5bDEzNC43LTI4N2gyNjkuNmwtOTYuMyAzMjUuNGM3NyAzNi42IDEyNS4yIDExMS43IDEyNS4yIDIxMy43aDBaIiBmaWxsPSJub25lIiBzdHJva2U9IiMxMDI4M2IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxMCIvPjx1c2UgaHJlZj0iI2EiIHg9IjU2MCIvPjwvc3ZnPg==");
}

@supports (container-type: inline-size) {
  .testimonial {
    container-type: inline-size;
    container-name: testimonial;
    --author-size: clamp(8rem, 25cqi, 12.5rem);
    --text-size-testimonial: clamp(1.25rem, 3cqi, 1.6rem);
  }
}
.testimonial-inner {
  display: grid;
  grid-template: "author quote" auto/calc(2 * var(--author-padding) + var(--author-size)) 1fr;
  align-items: start;
  gap: var(--gap-dynamic-large);
  padding-block-start: var(--testimonial-padding);
}
.testimonial-inner::before {
  content: "";
  background: var(--quote) no-repeat left top;
  position: absolute;
  inset: 0;
  inline-size: min(var(--quote-inline), 100%);
  z-index: -1;
}
.testimonial-inner:not(:has(.testimonial-author-image)) {
  display: block;
  --author-padding: 0;
}
.testimonial-inner:not(:has(.testimonial-author-image)) .testimonial-content {
  margin-block-end: var(--gap);
}

.testimonial-content {
  grid-area: quote;
  border: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-size-testimonial);
}
.testimonial-content p:first-child::before {
  content: open-quote;
}
.testimonial-content p:last-child::after {
  content: close-quote;
}

.testimonial-author {
  grid-area: author;
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  padding-inline: var(--author-padding);
}

.testimonial-author-image {
  inline-size: var(--author-size);
  aspect-ratio: 1;
  border-radius: 100vmax;
  overflow: hidden;
}

.testimonial-author-name {
  font-weight: var(--text-weight-bold);
}

.testimonial-author-title {
  font-size: var(--text-size-tiny);
  line-height: 1.2;
  max-inline-size: calc(var(--icon-size-large) + 1rem);
  margin-top: 0;
}

@container testimonial (max-width: 30em) {
  .testimonial-wrapper {
    --quote: unset;
  }
  .testimonial-inner {
    display: block;
    margin-block-start: var(--gap);
    --author-padding: 0;
    --testimonial-padding: 0;
  }
  .testimonial-inner .testimonial-content {
    margin-block-end: var(--gap);
  }
}
/* .textWistiaVideo
   .two-column-wistia
?     [video-align="left|right"]
     .two-column-wistia-col.two-column-wistia__video-container
       .component-wistiaVideo
         .wistia-content-container
           {{wistia video}}
     section.one-column-content.two-column-wistia-col.two-column-wistia__text-container
       h2 Partner Success built on trust
       {{content}} */
.textWistiaVideo {
  margin-block-end: var(--gap-large);
}

.two-column-wistia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--gap);
}
.two-column-wistia[data-video-align=right] .video-container {
  order: 2;
}

/* Styling for the following classes is stored in the wistiaVideo file
.wistia_responsive_padding , .wistia_responsive_wrapper, .wistia_embed */
/* ! notes on the HTML file */
/* ! the <img> tag has width="100" and height="50" which is better than having nothing. Without dimensions, */
/* ! the height is calculated at 0 and layout shift occurs. This way, the layout shift still occurs but the effect is lessened as 2x1 is */
/* ! closer to whatever the image would be. */
/* ! When the DAM attribute integration occurs, the estimated width/height can be replaced with actual values */
@property --o {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.textimagewithcta {
  display: grid;
  container-type: inline-size;
}

.text-image-with-cta {
  border-width: var(--border-width-tiny);
  border-style: solid;
  border-image-slice: 1;
  border-image-source: var(--theme-gradient);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  --o: 0%;
  background: linear-gradient(rgb(248, 98, 2, var(--o)), rgb(205, 71, 164, var(--o)));
  transition: --o var(--speed-standard) var(--transition-out-quadratic);
  /* Styling for the button held in _buttons.rebura.css */
}
.text-image-with-cta:has(a:is(:focus-within, :hover)) {
  --o: 100%;
}
.text-image-with-cta .text-container {
  padding: calc(0.5 * var(--box-padding));
  display: flex;
  flex-direction: column;
  gap: var(--gap-tiny);
  flex-grow: 1;
}
.text-image-with-cta .text-container p:last-of-type {
  margin-block-end: var(--gap-small);
}
.text-image-with-cta .cta-with-arrow {
  inline-size: fit-content;
  margin-top: auto;
  /* To disable to default hover text-deco for cta-with-arrow in multi-component-rules*/
}
.text-image-with-cta .cta-with-arrow span {
  background-size: 0%;
}
.text-image-with-cta .cta-with-arrow br {
  display: none;
}
.text-image-with-cta .cta-with-arrow::after {
  display: none;
}

@supports (color: rgb(from red r g b)) {
  .text-image-with-cta {
    background: linear-gradient(rgb(from var(--gradient-light) r g b/var(--o)), rgb(from var(--gradient-dark) r g b/var(--o)));
  }
}
.text-image-with-cta__image {
  margin-block-end: var(--gap-small);
  overflow: hidden;
  /* this exception targets any image blocks where we previously populated this component with a special colour decoration image that has */
  /* image-colour-block.jpg in the filename. It's specific enough that it shouldn't interfere with any other images */
}
.text-image-with-cta__image:empty {
  display: none;
}
.text-image-with-cta__image img {
  inline-size: 100%;
  inline-size: -webkit-fill-available;
}
.text-image-with-cta__image img[src*="/icons/"][src*=".svg"] {
  inline-size: var(--icon-size-large);
  block-size: var(--icon-size-large);
}
.tile:not(.cq-Editable-dom) {
  display: contents;
}

.tile-component {
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: inline-size;
  /* adapt font sizes */
  /* apply background colour but not when the bordered option is selected */
  /* gradient rounded border */
}
.tile-component .larger {
  font-size: min(var(--text-size-h2), 12cqw);
}
.tile-component[data-apply-padding] {
  --fitting: contain;
  --tile-block-padding: var(--box-padding-large);
  --tile-inline-padding: var(--box-padding-large);
}
.tile-component[data-apply-padding] .tile-vertical {
  --tile-block-padding: 0 var(--box-padding-large);
}
.tile-component[data-apply-padding] .tile-vertical.tile-picture-first {
  --tile-block-padding: var(--box-padding-large) 0;
}
.tile-component[data-apply-padding] .tile-horizontal {
  --tile-inline-padding: 0 var(--box-padding-large);
}
.tile-component[data-apply-padding] .tile-horizontal.tile-picture-first {
  --tile-inline-padding: var(--box-padding-large) 0;
}
.tile-component:not(.tile-theme-bordered) {
  background-color: rgb(var(--bg-inverse-rgb)/0.08);
}
.tile-component:not(.tile-theme-image) {
  border-radius: var(--border-radius-standard);
}
.tile-component:not(.tile-theme-image) .object-fit-cover {
  display: contents;
}
.tile-component.tile-theme-image {
  /* full bleed image background */
  isolation: isolate;
  /* overflow: hidden; */
  color: white;
}
.tile-component.tile-theme-image .object-fit-cover {
  position: absolute;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
}
.tile-component.tile-theme-image.tile-full-width {
  background: none;
  margin-inline: var(--inline-reverse-margin);
}
.tile-component.tile-theme-image .tile-content {
  display: grid;
  grid-template-areas: "stack";
  inline-size: 100%;
  position: relative;
}
.tile-component.tile-theme-image .tile-content > .media-container {
  grid-area: stack;
  padding: unset;
  margin: unset;
}
.tile-component.tile-theme-image .tile-content > .copy-container {
  grid-area: stack;
  margin-inline: auto;
  margin-block-start: var(--tile-padding, var(--gap-section-collapsible));
  -webkit-backdrop-filter: blur(var(--blur-very-large));
  backdrop-filter: blur(var(--blur-very-large));
  padding-inline: var(--box-padding-xlarge);
  flex: 1 0 50%;
  /* ! ideally want to have the theme here instead */
  background: rgba(0, 0, 0, 0.5);
  border-start-start-radius: var(--border-radius-huge);
  border-start-end-radius: var(--border-radius-huge);
  /* shadow to provide a better edge definition */
  box-shadow: 0 0 var(--border-radius-huge) rgba(255, 255, 255, 0.3), inset 0 0 var(--border-radius-huge) rgba(0, 0, 0, 0.3);
}
.tile-component.tile-theme-image .media-container img {
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
.tile-component.tile-theme-bordered {
  background: linear-gradient(var(--bg-main-hover), var(--bg-main-hover)) padding-box, var(--theme-gradient) border-box;
  border: var(--border-width-thin) solid transparent;
}
.tile-component .copy-container {
  padding-block: var(--box-padding-xlarge);
  padding-inline: var(--box-padding-xlarge);
  inline-size: min(var(--max-text-width), 100%);
  overflow-wrap: break-word;
  hyphens: auto;
  /* add the vertical margin to centre the text if there is no image set */
  margin-block: auto;
}
.tile-component .copy-container:has(.allow-full-width) {
  --max-text-width: 100rem;
}
.tile-component .copy-container:empty {
  display: none;
}
.tile-component .media-container {
  display: grid;
  place-items: center;
  padding-block: var(--tile-block-padding);
  padding-inline: var(--tile-inline-padding);
  /* ! change to figure? */
}
.tile-component .media-container img {
  inline-size: 100%;
  object-fit: var(--fitting, cover);
  object-position: bottom;
  block-size: 100%;
}
.tile-component .media-container:empty {
  display: none;
}

/* solid background gradient applied to the tile */
.tile-theme-dark {
  background-image: var(--theme-gradient);
  font-weight: var(--text-weight-medium);
  color: white;
}

/* forces the tile to cover all columns in a flexible row container. */
/* ignored in any other instance. */
.tile-full-width {
  grid-column: 1/-1;
}

/* allows the tile to span two columns */
.tile-double-width {
  grid-column: span min(2, var(--grid-columns, 1));
}

.tile-triple-width {
  grid-column: span min(3, var(--grid-columns, 1));
}

.tile-double-height {
  grid-row: span 2;
}

.tile-triple-height {
  grid-row: span 3;
}

.tile-full-height {
  grid-row: 1/-1;
}

/* contains all the content and possibly images */
.tile-content {
  display: flex;
  flex: 1;
  block-size: 100%;
  inline-size: 100%;
}

/* forces the picture to be shown before the content */
.tile-picture-first {
  flex-direction: row-reverse;
}

/* presents the tile as the picture and content side by side (default) */
.tile-horizontal {
  align-items: center;
  /* round the edges of the media-container in case lifestyle images are used */
  /* multiple exceptions made for vertical/horizontal and picture first/not first */
}
.tile-horizontal .media-container {
  flex: 1 0 50%;
  block-size: 100%;
}
.tile-horizontal .media-container img {
  object-position: right;
}
.tile-horizontal.tile-picture-first .media-container img {
  object-position: left;
}

/* picture is below the content for a multi-column view */
.tile-vertical {
  flex-direction: column;
}
.tile-vertical.tile-picture-first {
  flex-direction: column-reverse;
}
.tile-vertical.tile-picture-first .media-container img {
  object-position: top;
}
.tile-vertical .media-container img {
  object-position: bottom;
}

/* exception to allow tiles to function within the scroller element */
.scroller-component__slides > .tile {
  display: grid;
}

@container (max-width: 100rem) {
  .tile-component {
    --box-padding-large: clamp(1.25rem, 5cqw, 2rem);
  }
  .tile-component .copy-container {
    padding-inline: min(var(--box-padding-xlarge), 14cqw);
  }
  .tile-content {
    inline-size: 100cqw;
  }
}
@container (max-width: 31rem) {
  .tile-horizontal {
    flex-direction: column;
    inline-size: 100%;
  }
  .tile-horizontal.tile-picture-first {
    flex-direction: column-reverse;
  }
  .tile-horizontal .tile-component .copy-container {
    inline-size: 100%;
    text-align: center;
  }
}
/*  .timelineContainer
   .timeline-container (style='--bg-color:')
     .timeline-container__inner
       ul.timeline-container__listing
         li.timeline-container__item
           .timeline-container__item-inner
             {html} */
.timelineContainer {
  margin-block: var(--gap-section);
  isolation: isolate;
}

.timeline-container__title {
  margin-block-end: var(--gap-large);
}

.timeline-container__listing {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap);
  inline-size: fit-content;
  max-inline-size: var(--max-text-width);
  position: relative;
}

.timeline-container__item {
  display: contents;
}
.timeline-container__item::before {
  content: "";
  width: var(--icon-size-standard);
  height: var(--icon-size-standard);
  background: var(--theme-gradient);
  grid-column: 1;
  border-radius: 100vmax;
  z-index: 1;
}
.timeline-container__item::after {
  content: "";
  border: var(--border-width-tiny) solid;
  border-image-slice: 1;
  border-image-source: var(--theme-gradient);
  position: absolute;
  height: 100%;
  grid-column: 1;
  transform: translateX(calc(0.5 * var(--icon-size-standard) - 0.5 * var(--icon-border-width)));
  z-index: 0;
}

.timeline-container__item-inner {
  grid-column: 2;
  padding-bottom: var(--gap);
}
.timeline-container__item-inner h3 {
  font-weight: var(--text-weight-bold);
}
.twoColumnsContent {
  margin-block: var(--gap);
}
.twoColumnsContent + .twoColumnsContent {
  margin-block-start: var(--gap-large);
}

:is(.scroller-component__slides, .flexible-row-container) > .twoColumnsContent {
  margin-block-start: var(--gap);
}

.two-columns-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: var(--gap-large) 1fr var(--gap-large);
}
.two-columns-content .content-holder {
  grid-row: 1/3;
  grid-column: 1/4;
}
.two-columns-content .img-holder {
  grid-column: 3/-1;
  grid-row: 2/-1;
}
.two-columns-content[data-image-style=inline] .img-holder {
  background-image: var(--theme-gradient);
  block-size: fit-content;
}
.two-columns-content[data-image-style=background] .img-holder {
  background-image: var(--bg-img), var(--theme-gradient);
}
.two-columns-content[data-image-style=background] .img-holder img {
  display: none;
}
.two-columns-content[data-image-position=left] .content-holder {
  grid-column: 3/-1;
}
.two-columns-content[data-image-position=left] .img-holder {
  grid-column: 1/-3;
  background-position: right;
}
.two-columns-content .headline {
  margin-block-end: var(--gap-small);
}
.two-columns-content .call-to-action {
  margin-block-start: var(--gap-small);
}
.two-columns-content .content-holder {
  grid-column: 1/4;
  grid-row: 2;
  -webkit-backdrop-filter: blur(var(--blur-very-large));
  backdrop-filter: blur(var(--blur-very-large));
  padding: var(--box-padding-large) calc(2 * var(--gap-large)) var(--box-padding-large) var(--box-padding-large);
  border-left-width: var(--border-width-thin);
  border-left-style: solid;
  border-image-slice: 1;
  border-image-source: var(--theme-gradient);
  /* this applies a solid background colour to this element at an opacity that */
  /* varies for light and dark.  Light reverts to 20% + 60% but dark stays at 60% */
  background-color: rgb(var(--bg-main-rgb)/calc(var(--is-dark, 20%) + 60% + var(--contrast, 0%)));
  position: relative;
  /* before adds some colour behind the text */
}
.two-columns-content .content-holder::before {
  content: "";
  inset: 0;
  background: var(--theme-gradient);
  position: absolute;
  z-index: -1;
  opacity: 0.2;
  /* the mix blend only applies if it's light as the --is-dark isn't a valid */
  /* value, whereas when it's in light mode, the fallback 'color' is used */
  /* this setting allows for a brighter look on light version than on the dark */
  mix-blend-mode: color;
}
.two-columns-content .img-holder {
  grid-column: 3/-1;
  grid-row: 1/-1;
  background-position: left;
  background-size: cover;
}

@media only screen and (max-width: 71em) {
  .two-columns-content[data-image-position=left] .content-holder {
    grid-column: 2/-1;
  }
  .two-columns-content[data-image-position=left] .img-holder {
    grid-column: 1/-2;
  }
  .two-columns-content .content-holder {
    grid-column: 1/5;
    grid-row: 2;
  }
  .two-columns-content .img-holder {
    grid-column: 2/-1;
    grid-row: 1/-1;
  }
}
@media only screen and (max-width: 50em) {
  .two-columns-content {
    /* add another grid row in */
    grid-template-rows: var(--gap-section) auto var(--gap);
    grid-template-columns: var(--gap-section) auto var(--gap-section);
  }
  .two-columns-content[data-image-position=left] .content-holder {
    grid-column: 1/-2;
  }
  .two-columns-content[data-image-position=left] .img-holder {
    grid-column: 2/-1;
  }
  .two-columns-content .content-holder {
    grid-column: 1/-2;
    grid-row: 2/-1;
    border-width: 0;
    padding: var(--box-padding);
  }
  .two-columns-content .img-holder {
    grid-column: 2/-1;
    grid-row: 1/3;
  }
}
@media only screen and (max-width: 30em) {
  [data-mobile-hide-image] .img-holder {
    display: none;
  }
  .two-columns-content {
    display: block;
    gap: var(--gap);
  }
  .two-columns-content .content-holder {
    background: unset;
    padding: 0;
  }
  .two-columns-content .content-holder::before {
    display: none;
  }
  .two-columns-content .img-holder {
    margin-block-end: var(--gap);
  }
  .two-columns-content[data-image-style=background] .img-holder img {
    display: block;
  }
}

.component-video {
  display: grid;
  grid-template-areas: "stack";
}
.component-video > :where(img, figure) {
  grid-area: stack;
  inline-size: 100%;
  aspect-ratio: 16/9;
}
.component-video figcaption {
  aspect-ratio: 16/9;
  place-items: center;
  display: grid;
  font-weight: var(--text-weight-bold);
  backdrop-filter: invert(0.1);
}
.component-video .v-play {
  display: none;
}

.v-play-btn-container {
  color: white;
  grid-area: stack;
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  filter: drop-shadow(0px 0px 1rem black);
  cursor: pointer;
  opacity: 0.5;
  transition: all var(--speed-standard) var(--transition-out-quartic);
}
.v-play-btn-container::after, .v-play-btn-container::before {
  content: "";
  grid-area: stack;
  aspect-ratio: 1;
  inline-size: clamp(5rem, 33%, 10rem);
}
.v-play-btn-container::after {
  background-color: currentColor;
  clip-path: var(--icon-video);
  transform: translateX(5%) scale(0.7);
}
.v-play-btn-container::before {
  border: var(--border-width) solid currentColor;
  border-radius: 100vmax;
  opacity: 0.5;
}
.v-play-btn-container:hover {
  opacity: 1;
  scale: 1.05;
}

.wistiaVideo {
  max-inline-size: 100%;
  aspect-ratio: 16/9;
  background-color: rgb(var(--bg-inverse-rgb)/0.1);
}

.blogcontent .wistiaVideo {
  margin-block: var(--gap);
  max-inline-size: var(--max-text-width);
}

.wistia_responsive_padding {
  block-size: 100%;
  padding: 56.25% 0 0 0;
  position: relative;
}

.wistia_responsive_wrapper {
  inset: 0;
  position: absolute;
}

.wistia_embed {
  display: inline-block;
  height: 100%;
  width: 100%;
  position: relative;
}

/* part of the template for vendor pages, which displays Westcon or Comstor sub logos */
.component-brand-logo {
  margin-block-end: var(--gap);
  inline-size: min(100%, 11rem);
}
.breadcrumbs {
  display: none;
}
:where(footer) {
  background-color: var(--bg-footer);
  border-block-start: var(--border-medium);
  padding-block: var(--box-padding-large);
  color: black;
  /* always make sure there is a margin above the footer */
  /* margin-block-start: var(--gap-section); */
  /* the box shadow extends the background to full width */
  box-shadow: 0 0 0 100vmax var(--bg-footer);
  clip-path: inset(0 -100vmax);
  /* margin-inline: var(--inline-reverse-margin); */
  /* padding-inline: var(--inline-reverse-padding); */
  display: flex;
  flex-direction: column;
}
:where(footer) ul {
  list-style: none;
}
:where(footer) li {
  padding-block: 0.25rem;
}
:where(footer) li:empty {
  display: none;
}
:where(footer) li:has(a:empty) {
  display: none;
}
:where(footer) a {
  color: inherit;
  text-decoration: none;
  background-size: 0% 0.125rem;
  background-position: calc(var(--rtl, 0) * -100%) 100%;
  background-repeat: no-repeat;
  background-image: var(--theme-gradient-lighter);
  transition: background-size var(--speed-slow) var(--transition-out-quadratic);
}
:where(footer) a:is(:hover, :focus-visible) {
  background-size: 100% 0.125rem;
}
:where(footer) a:empty {
  display: none;
}
:where(footer) a[href="#top"] {
  color: var(--theme-orange);
  font-weight: var(--text-weight-bold);
}

:is(footer nav, .new-footer__inner) {
  display: contents;
}

.new-footer__row {
  grid-area: summary;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));
}

.new-footer__column--hidden {
  display: none;
}

.new-footer__copywrite {
  margin-block: var(--gap-large) var(--gap);
  padding-block: var(--gap);
  border-block: 1px solid rgb(var(--bg-main-rgb)/0.5);
  display: flex;
  gap: var(--gap);
}

.new-footer__copywrite-links {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: var(--gap-small) var(--gap);
}

@media only screen and (max-width: 37.5em) {
  .new-footer__copywrite {
    flex-direction: column;
  }
}
.mobile-burger-menu {
  display: none;
  align-items: center;
  position: absolute;
  top: 1rem;
  /* because .mainContainer has padding top of 1rem */
  right: var(--gap);
  inline-size: var(--icon-size-small);
  height: var(--icon-size-small);
  cursor: pointer;
  z-index: 1;
  /* set to block inside header-navigation-container.scss file, at mobile-large */
}
.mobile-burger-menu > img {
  display: none;
}
.mobile-burger-menu span, .mobile-burger-menu span::before, .mobile-burger-menu span::after {
  pointer-events: none;
  display: grid;
  position: absolute;
  inline-size: 100%;
  height: 0.125rem;
  background-color: var(--bg-white);
  transition-duration: var(--speed-standard);
}
.mobile-burger-menu span::before {
  content: "";
  top: -0.5rem;
}
.mobile-burger-menu span::after {
  content: "";
  top: 0.5rem;
}

.menu-open .mobile-burger-menu span {
  transform: rotate(45deg);
}
.menu-open .mobile-burger-menu span::before {
  top: 0;
  transform: rotate(0);
}
.menu-open .mobile-burger-menu span::after {
  top: 0;
  transform: rotate(90deg);
}

/* highest tier page header component */
.component-header {
  /* contains the logo, burger menu and entire sub menu structure */
  display: grid;
  grid-template-areas: "logo lower upper";
  grid-template-columns: 15vw 1fr auto;
  align-items: center;
  gap: 0 2rem;
  margin-inline: var(--inline-reverse-margin);
  padding-inline: var(--inline-reverse-padding);
  padding-bottom: 1rem;
  position: relative;
}
.component-header::after {
  /* border underneath */
  position: absolute;
  content: "";
  inset: 100% -50vmax -0.25rem -50vmax;
  /* inset vmax causes issues on iphone - disabled later */
  background: linear-gradient(-90deg in srgb, #f86202 calc(50% - 50vw), #cd47a4 calc(50% + 50vw));
}
.component-header .wrapper {
  display: contents;
  /* COMPANY logo is the "> a" element */
}
.component-header .wrapper > a {
  /* CORPORATE LOGO */
  grid-area: logo;
  inline-size: clamp(7rem, 10rem, 100%);
  z-index: 3;
  user-select: none;
  position: relative;
  touch-action: none;
}

@media only screen and (min-width: 71em) and (min-height: 500px) {
  .component-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bg-main);
    border-top: 0.5rem solid var(--bg-main);
  }
}
@media only screen and (max-width: 63em) {
  .component-header {
    grid-template-areas: "logo upper" "lower lower";
    grid-template-columns: minmax(13rem, 15vw) auto;
  }
  .header-lower-navigation {
    margin-top: var(--gap);
  }
}
/* sub menu container on top right of page */
/* that contains language selector, search, partnercentral, lightswitch and search */
.header-upper-navigation {
  grid-area: upper;
  display: flex;
  gap: var(--gap-small);
  background-color: var(--bg-black);
  border-radius: 2rem;
  padding: var(--box-padding-shallow);
  user-select: none;
  inline-size: fit-content;
  list-style-type: none;
  justify-self: flex-end;
  z-index: 3;
  box-shadow: var(--shadow-standard);
}
.header-upper-navigation .mobile-menu-item {
  max-inline-size: var(--icon-upper-header);
}
.header-upper-navigation a.mobile-menu-item:not(:hover) {
  text-decoration: none;
}

light-switch {
  display: none;
}

/* the ul element inside the lower nav container that contains mega menu */
.header-lower-navigation {
  grid-area: lower;
  padding-block-start: 0.25rem;
}
.header-lower-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  /* * adding wrap in as safeguard for not pushing the upper nav out the way, should the menu be too long */
  align-items: center;
  font-size: var(--text-size-menu);
  list-style-type: none;
}

.menu-open .header-lower-navigation {
  z-index: 1;
}
.menu-open .menu-open-overlay {
  background-color: RGB(var(--bg-main-rgb)/0.8);
  inset: 0;
}

.menu-open-overlay {
  position: fixed;
  -webkit-backdrop-filter: blur(var(--blur-small));
  backdrop-filter: blur(var(--blur-small));
  z-index: -1;
  transition: background-color var(--speed-slow) var(--transition-out-quadratic);
}

/* the li class that contains the entire menu item */
.header-lower-navigation-item {
  display: flex;
  position: relative;
}

/* this class is applied to menu anchor items */
/* a.primary-nav-link */
/* div.header-lower-navigation-item-text */
/* MENU ITEM */
/* span.caret-down */
.primary-nav-link {
  display: flex;
  text-decoration: none;
  color: var(--text-white);
  font-weight: var(--text-weight-medium);
  cursor: pointer;
  user-select: none;
  background: none;
}
.primary-nav-link[aria-expanded=false] div:hover .caret-down {
  animation-name: caretPulsingDown;
}
.primary-nav-link[aria-expanded=true] + .mega-menu {
  display: flex;
}
.primary-nav-link[aria-expanded=true] .caret-down {
  translate: 0rem 0rem;
  rotate: 225deg;
}
.primary-nav-link[aria-expanded=true] div::after {
  background-color: var(--theme);
  translate: 0 0.25rem;
}

.header-lower-navigation-item-text {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  inline-size: max-content;
  position: relative;
}
.header-lower-navigation-item-text .caret-down {
  display: block;
  inline-size: 0.5rem;
  height: 0.5rem;
  border: solid rgb(var(--bg-inverse-rgb));
  border-width: 0 0.125rem 0.125rem 0;
  display: inline-block;
  padding: 0.125rem;
  rotate: 45deg;
  translate: 0rem -0.125rem;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: var(--speed-slow);
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.header-lower-navigation-item-text::after {
  content: "";
  inline-size: 100%;
  position: absolute;
  bottom: 0;
  background-color: transparent;
  height: 0.125rem;
  pointer-events: none;
  transition: all var(--speed-fast) var(--transition-out-quadratic);
  translate: 0 0;
}

/* ! needs debugging */
@media only screen and (max-width: 37.5em), only screen and (max-height: 30em) and (max-width: 71em) {
  .mobile-burger-menu {
    display: grid;
  }
  body:not(.menu-open) :is(.header-lower-navigation, .header-upper-navigation) {
    display: none;
  }
  .component-header::after {
    /* disables the vmax inset on mobiles, due to issue on iphone */
    inset: 100% 0% -0.25rem 0%;
  }
  body.menu-open a:has(> .header-logo):not(:focus-visible) > .header-logo {
    translate: 0 -200%;
  }
  body.menu-open .header-upper-navigation {
    --icon-upper-header: 2rem;
    --text-size-lang: clamp(0.75rem, 2vw, 2rem);
    --menu-shift-right: auto;
    --menu-shift-left: calc(var(--border-radius-standard) - 2 * var(--box-padding));
    --menu-shift-left-triangle: calc(var(--border-radius-standard) + var(--box-padding));
    display: flex;
    grid-area: logo;
    justify-self: auto;
    translate: -1rem;
  }
  body.menu-open .search-container {
    position: fixed;
    --menu-shift-left: 0rem;
    translate: 0 1rem;
    inline-size: calc(100vw - var(--container-padding));
  }
  body.menu-open .search-container::before {
    inset-inline-start: 10rem;
  }
}
.mega-menu {
  display: none;
  position: fixed;
  inline-size: 100vw;
  top: 1rem;
  left: 0;
  translate: 0 3rem;
  justify-content: space-around;
  --bg-img: url("/content/dam/wcgcom/site-assets/rebura-menu-circles.svg");
  background: var(--bg-img) var(--bg-menu) no-repeat top right;
  background-size: 14rem;
  color: black;
  --bg-menu-shade: var(--bg-menu);
  -webkit-backdrop-filter: blur(var(--blur-medium));
  backdrop-filter: blur(var(--blur-medium));
  box-shadow: var(--shadow-large);
  transform-origin: top center;
  will-change: scale, transform, opacity;
  animation-fill-mode: forwards;
  animation-name: menuOpensUp;
  animation-duration: var(--speed-standard);
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mega-menu h3 {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: var(--theme-gradient);
  font-weight: var(--text-weight-light);
  font-size: calc(1.5 * var(--text-size-h3));
  margin-block-start: 0;
  grid-column: 1/-1;
}
.mega-menu a {
  cursor: pointer;
  color: inherit;
  transition: color var(--speed-standard) var(--transition-out-quadratic);
  text-decoration: none;
}
.mega-menu a:is(:hover, :focus-visible) > span {
  background-size: 100% 0.125rem;
}
.mega-menu a:is(:hover, :focus-visible) svg {
  color: var(--theme);
}
.mega-menu a > span {
  font-size: 150%;
  display: block;
  translate: 0 0.5ch;
  background-size: 0% 0.125rem;
  background-position: calc(var(--rtl, 0) * -100%) 100%;
  background-repeat: no-repeat;
  background-image: var(--theme-gradient-lighter);
  transition: background-size var(--speed-standard) var(--transition-out-quadratic);
  padding-block-end: 0.125rem;
}

.mega-menu__inner {
  margin-inline-start: var(--inline-reverse-padding);
  display: flex;
  flex: 1;
  z-index: 3;
}

.mega-menu__column {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--gap);
  padding-block: min(4rem, 8vh);
  padding-inline-end: var(--gap);
}
.mega-menu__column > a {
  max-inline-size: 30ch;
}
.mega-menu__column > a:not([href]) {
  display: none;
}
.mega-menu__column:not(.mega-menu__column-shaded) {
  /* special width control for standard columns (not shaded) */
  --menu-width: 30ch;
  flex-basis: var(--menu-width);
  /* ? was this before but looks like needs to be controlled */
  /* &:has(a:nth-of-type(4)) { */
  /* soft border between standard columns */
}
.mega-menu__column:not(.mega-menu__column-shaded)[data-width=expanded] {
  --menu-width: 82ch;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr));
  grid-auto-rows: min-content;
}
.mega-menu__column:not(.mega-menu__column-shaded):not(:first-child) {
  border-left: var(--border-soft);
}
.mega-menu__column.icons {
  /* inline-size: clamp(20ch + 2 * var(--box-padding), 100vw, 40ch); */
  flex-basis: 40ch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12ch, 1fr));
  grid-auto-rows: min-content;
  /* if there are more than five icons, then allow it even more space */
}
.mega-menu__column.icons:only-child {
  /* if it's the only child, then fill the space horizontally with flex only */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  flex-basis: auto;
}
.mega-menu__column.icons:not(:only-child):has(a:nth-last-of-type(5)) {
  flex-basis: 55ch;
}
.mega-menu__column.icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mega-menu__column.icons a svg {
  inline-size: 8ch;
  block-size: 100%;
  fill: currentColor;
  transition: all var(--speed-standard) var(--transition-out-quadratic);
}
.mega-menu__column.icons a > span {
  margin-block-start: var(--gap-tiny);
  font-weight: var(--text-weight-medium);
  background-position: 50% 100%;
  /* white-space: nowrap; */
}

/* applied to gain the shaded column background */
.mega-menu__column-shaded {
  box-shadow: var(--is-dark, inset 0 0 2rem rgba(0, 0, 0, 0.15));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* this is used inside the shaded columns for sub-grouping of multiple icons */
.mega-menu-sub-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
}
.mega-menu-sub-group + .mega-menu-sub-group {
  margin-block-start: var(--gap);
  border-block-start: var(--border-soft);
  padding-block-start: var(--gap-small);
}
.mega-menu-sub-group a {
  font-weight: var(--text-weight-bold);
}

/* --------------------------- */
/* Positioning for mobile */
/* --------------------------- */
@media only screen and (max-width: 37.5em), only screen and (max-height: 30em) and (max-width: 62.5em) {
  body.menu-open {
    overflow-y: auto;
    margin-right: unset;
  }
  .header-upper-navigation {
    display: none;
  }
  .menu-open .header-upper-navigation {
    animation-name: slideRight;
    animation-duration: var(--speed-snail);
    animation-fill-mode: both;
  }
  .mega-menu {
    display: none;
    color: black;
    position: relative;
    translate: unset;
    background: transparent;
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
    inline-size: 100%;
    box-shadow: unset;
  }
  .mega-menu__inner {
    padding-inline: 0;
    flex-wrap: wrap;
    inline-size: unset;
    margin-inline-start: var(--box-padding);
  }
  .mega-menu__column {
    flex-wrap: wrap;
    padding-block: 1ch;
  }
  .mega-menu__column:not(.mega-menu__column-shaded) {
    --menu-width: 50%;
  }
  .mega-menu__column.icons:only-child {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: revert;
  }
  .mega-menu__column > a {
    max-inline-size: 100%;
  }
  .mega-menu__column-shaded {
    background: var(--bg-menu-shade);
    flex-grow: 1;
    margin-block-end: var(--gap);
  }
  .mega-menu__column-shaded:only-child {
    min-inline-size: fit-content;
  }
  .mega-menu__column-shaded:only-child .icons {
    inline-size: unset;
  }
  .mega-menu .mega-menu-sub-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-small) 0;
  }
  .mega-menu .mega-menu-sub-group a {
    border-inline: var(--border-soft);
    padding-inline: var(--gap-small);
    margin-inline: -0.5px;
  }
  .menu-open-overlay {
    display: none;
  }
  .header-lower-navigation ul {
    outline-color: var(--theme);
    margin-inline: var(--inline-reverse-margin);
    inline-size: 100vw;
    flex-direction: column;
    background-color: var(--bg-menu-mobile);
  }
  .header-lower-navigation-item {
    flex-direction: column;
    gap: 0;
    inline-size: calc(100vw - 2rem);
  }
  .header-lower-navigation-item:last-of-type .primary-nav-link {
    border-block-end: unset;
  }
  .header-lower-navigation-item.open .mega-menu {
    display: block;
  }
  .primary-nav-link {
    outline-color: var(--theme);
  }
  .header-lower-navigation-item-text {
    padding: var(--box-padding);
    font-size: var(--text-size-h3);
    font-weight: var(--text-weight-bold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: var(--theme-gradient);
  }
  .header-lower-navigation-item-text::after {
    background-color: transparent !important;
  }
  .header-lower-navigation-item-text .caret-down {
    border-color: var(--theme);
  }
}
.four-o-four-container {
  display: grid;
  justify-items: center;
}
.four-o-four-container img {
  inline-size: clamp(10rem, 80%, 40rem);
  margin-block-end: var(--gap);
}
/* .search-bar is the icon in the upper menu */
.search-bar {
  display: none;
}

.search-suggestions {
  inline-size: min(29ch, 80vw);
}
.search-suggestions input {
  margin: unset;
}

.search-results-list {
  text-align: start;
}
.search-results-list li {
  list-style: none;
}
.search-results-list strong {
  display: block;
  margin-top: var(--gap-small);
  font-size: var(--text-size-small);
  font-weight: var(--text-weight-bold);
}
.search-results-list a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--padding-ch);
}
.search-field-container {
  margin-block: var(--gap-large) var(--gap);
  display: grid;
  grid-template-columns: 1fr 2.5rem 2.5rem;
  grid-template-areas: "search reset submit";
  gap: var(--gap-small);
  padding: var(--padding-ch);
  background: white;
  block-size: 3rem;
  border-radius: var(--border-radius-standard);
  box-shadow: var(--shadow-standard);
  overflow: hidden;
}
.search-field-container input {
  box-shadow: unset;
  padding: unset;
  margin: unset;
  border: unset;
  border-radius: unset;
}
.search-field-container input[type=search] {
  grid-area: search;
  color: var(--text-dark);
  font-weight: var(--text-weight-medium);
  font-size: var(--text-size-large);
  inline-size: max(10ch, 100%);
  /* hide reset button on empty search field */
}
.search-field-container input[type=search]::-webkit-search-cancel-button, .search-field-container input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.search-field-container input[type=search]:invalid + input[type=reset] {
  display: none;
}
.search-field-container input:not([type=search]) {
  inline-size: 100%;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}
.search-field-container input[type=submit] {
  /* magnifying glass */
  grid-area: submit;
  border-left: 1px solid var(--grey-light);
  background: var(--icon-magnify) right center/1.75rem 1.75rem no-repeat;
}
.search-field-container input[type=reset] {
  /*  cross to reset */
  clip-path: var(--icon-cross);
  aspect-ratio: 1;
  grid-area: reset;
  background-color: var(--grey-dark);
  transition: all var(--speed-standard) var(--transition-bounce);
}
.search-field-container input[type=reset]:hover {
  background-color: var(--grey-darker);
  scale: 1.1;
}

.search-results-info-bar {
  margin-block-end: var(--gap);
  text-align: end;
}
.search-results-info-bar .pagination {
  display: none;
}

.results-qty {
  padding: var(--padding-ch);
  background-color: var(--bg-main);
}

.articles-container article {
  padding-block-end: var(--gap);
  border-block-end: var(--border-soft);
  margin-block-end: var(--gap);
}
.articles-container article h2 {
  font-size: var(--text-size-h3);
}

.no-results {
  font-size: var(--text-size-h3);
}

.pagination {
  margin-block: var(--gap-large);
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(2rem, 1fr);
  justify-content: end;
  gap: var(--gap-tiny);
}
.pagination li {
  display: grid;
}
.pagination button {
  display: grid;
  grid-template: 1fr/1fr;
  place-items: center;
  block-size: 100%;
  aspect-ratio: 1;
  border: var(--border-medium);
  background-color: transparent;
  text-decoration: none;
  transition: all var(--speed-standard) ease;
  border-radius: var(--border-radius-small);
  touch-action: none;
}
.pagination button:hover {
  background-color: var(--theme);
  color: white;
}
.pagination button:hover .arrow {
  border-color: white;
}
.pagination button:active {
  scale: 1.05;
}
.pagination span {
  display: none;
}
.pagination .arrow {
  /*  display: block; */
  position: relative;
  content: "";
  grid-row: 1;
  grid-column: 1;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border: solid var(--text-subdued);
  border-width: 0 0.125rem 0.125rem 0;
  padding: 0.125rem;
  transform: rotate(-45deg) translate(-0.1rem, -0.1rem);
}
.pagination .arrow:has(~ .arrow) {
  translate: -0.1875rem;
}
.pagination .arrow ~ .arrow {
  translate: 0.1875rem;
}
.pagination .prev .arrow {
  transform: rotate(135deg) translate(-0.1rem, -0.1rem);
}
.pagination .current button {
  border-color: var(--theme-green);
  border-width: 2px;
  font-weight: var(--text-weight-bold);
}
.pagination .disabled {
  opacity: var(--disabled-opacity);
}
/* .sitemap
   section.component-sitemap
     h1 Site Map
     .sitemap-container
       div
         .sitemap-section
           .section-title
             h2
               a(href='/de/de/our-value.html') Unser Mehrwert
           div
             .links-container
               .link
                 a(href='/de/de/our-value/partner-success.html') Partner Success */
.component-sitemap {
  padding-top: var(--gap-large);
}

.sitemap-container {
  columns: 3 17.5rem;
  column-gap: var(--gap-large);
  padding-block: var(--gap);
  margin-block: var(--gap);
  column-rule: var(--border-soft);
  -webkit-backdrop-filter: blur(var(--blur-small));
  backdrop-filter: blur(var(--blur-small));
  background-color: RGB(var(--bg-main-rgb)/0.6);
}
.sitemap-container a:not(:hover) {
  text-decoration-color: transparent;
}

.sitemap-section {
  break-inside: avoid;
  margin-block-end: var(--gap-large);
}
.sitemap-section .link {
  padding-block: 0.5ch;
}
/* not required for rebura */
/*# sourceMappingURL=style.css.map */