@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900");
@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* Import base LOI styles */
/* Dependencies */
/*
* CSS Reset by Andy Bell
* Sourced and adapted from https://piccalil.li/blog/a-more-modern-css-reset/
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Prevent font size inflation */
html {
   -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
           text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: var(--line-height, 1.5);
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentcolor;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
/* Custom Media Queries - Standard Breakpoint System */
/* Orientation */
/* Standard Breakpoints (min-width) - above variants */
/* 480px */
/* 640px */
/* 768px */
/* 1024px */
/* 1280px */
/* 1536px */
/* 1920px */
/* Below variants (max-width) */
/* < 480px */
/* < 640px */
/* < 768px */
/* < 1024px */
/* < 1280px */
/* < 1536px */
/* < 1920px */
/* Only variants (exclusive ranges) */
/* 480px-639px */
/* 640px-767px */
/* 768px-1023px */
/* 1024px-1279px */
/* 1280px-1535px */
/* 1536px-1919px */
/* 1920px+ */
/* Simplified aliases for common use */
/* Same as --xs-above */
/* Same as --sm-above */
/* Same as --md-above */
/* Same as --lg-above */
/* Same as --xl-above */
/* Same as --xxl-above */
/* Same as --3xl-above */
/* Max-width aliases for backward compatibility */
/* Same as --xs-below */
/* Same as --sm-below */
/* Same as --md-below */
/* Same as --lg-below */
/* Same as --xl-below */
/* Same as --xxl-below */
/* Same as --3xl-below */
:root {
  /* Breakpoint Variables - Easily adjustable */
  --xs: 30rem; /* 480px */
  --sm: 40rem; /* 640px */
  --md: 48rem; /* 768px */
  --lg: 64rem; /* 1024px */
  --xl: 80rem; /* 1280px */
  --xxl: 96rem; /* 1536px */
  --3xl: 120rem; /* 1920px */

  /* Container Width Variables */
  --container-3xs: 16rem; /* 256px */
  --container-2xs: 18rem; /* 288px */
  --container-xs: 20rem; /* 320px */
  --container-sm: 24rem; /* 384px */
  --container-md: 28rem; /* 448px */
  --container-lg: 32rem; /* 512px */
  --container-xl: 36rem; /* 576px */
  --container-2xl: 42rem; /* 672px */
  --container-3xl: 48rem; /* 768px */
  --container-4xl: 56rem; /* 896px */
  --container-5xl: 64rem; /* 1024px */
  --container-6xl: 72rem; /* 1152px */
  --container-7xl: 80rem; /* 1280px */

  /* Spacing base unit */
  --mini-spacing: 4px;
  --tiny-spacing: 6px;
  --small-spacing: 10px;
  --spacing: 1rem;
  --big-spacing: 2rem;
  --huge-spacing: 3rem;
  --mega-spacing: 4rem;

  /* Colors */
  --red: oklch(0.5915 0.202 21.24); /* #dc3545; */
  --orange: oklch(74.16% 0.1718 50.83deg); /* #FE8633FF */
  --green: oklch(68.08% 0.231665 142.4953deg); /* #00B900FF*/
  --blue: oklch(66.67% 0.1473 237.8deg); /* blue 009FE3FF */
  --white: oklch(100% 0 0deg); /* FFFFFFFF */
  --grey: oklch(95.81% 0 0deg); /* F1F1F1FF */
  --black: oklch(32.11% 0 0deg); /* #333333FF*/
  --brown: oklch(50.98% 0.0471 45.56deg); /* brown 7D5E4FFF */
  --ghost: oklch(0.9867 0.0084 225.08); /* ghost F5FCFFFF */

  --dark-blue: oklch(0.4292 0.1171 248.56); /* #00528c */
  --brand-color: var(--blue);
  --brand-color-mid: oklch(74.36% 0.1231 229.43deg); /* sky 46BAEAFF */
  --brand-color-light: oklch(93.85% 0.0227 229.08deg); /* ice DCEEF7FF */
  --brand-color-faint: oklch(97.54% 0.0134 226.56deg); /* mist EEF9FEFF */
  --brand-color-ghost: var(--ghost);
  --text-color: var(--black);
  --text-color-light: oklch(50.32% 0 0deg); /* #646464FF */
  --text-color-lighter: #8D8C8E;
  --text-color-faint: oklch(76.47% 0.0018 325.59deg); /* #B3B2B3FF */
  --cta-blue: var(--blue); /* #009FE3 */
  --cta-orange: var(--orange); /* #FE8633 */
  --cta-green: var(--green); /* #00B900 */
  --cta-white: var(--white); /* #FFFFFF */
  --subtle-grey: oklch(from var(--text-color) l c h / 25%); /* #333340 */
  --light-grey: oklch(0.8408 0.0026 228.79); /* #c9cbcc */

  --surface-light: oklch(97.63% 0.0029 84.56deg); /* cream F8F7F5FF */
  --surface-mid: oklch(96.35% 0.0108 95.16deg); /* bone F5F3EBFF */
  --surface-dark: oklch(93.43% 0.0131 71.33deg); /* sand EFE8E0FF */


  /* Sizes */
  --padding-small: 10px;
  --padding-medium: 15px;

  --corner-size-small: 5px;
  --corner-size-medium: 0.625rem; /* 10px */
  --corner-size-large: 1.25rem; /* 20px */
  --icon-size: 1.5rem;
  --root-size: 16px;
  --font-size: 15px;
  --header-height: 4rem; /* 64px */
  --navbar-height: 3.25rem; /* 52px */
  --breadcrumbs-height: 3rem; /* 48px */
  --footer-height: 46rem;
  --footer-height-checkout: 24rem;
  --menu-height: 3.25rem;
  --hero-height: 28rem;
  --aside-width: 13.75rem;
  --aside-content-gap: 6rem;
  --form-element-size: 2.5rem;
  --large-form-element-size: calc(var(--form-element-size) + var(--root-size));
  --floating-header-height: 4.5rem;
  --result-row-height: 5rem;
  --below-header: calc(var(--header-height) + var(--breadcrumbs-height));

  --pagination-height: 44px;

  /* Grid System Variables with Responsive Values */
  --gutter: var(--col-gap);
  --col-gap: 15px;
  --row-gap: 30px;

  --col-count: 8;
  --columns: var(--default-columns); /* Default to tablet-m */

  --inner-col-padding-x: 15px;
  --inner-col-padding-y: 20px;

  /* this is the result of 5 items min-width 250px + 4 gaps of 20px */
  --max-container-width: 1330px;
  --desktop-safezone: 960px;
  --col-size: min(
    /* viewport-sized middle */ calc((100% - (var(--col-count) - 1) * var(--col-gap)) / var(--col-count)),
            /* 1260px-capped middle */ calc((var(--max-container-width) - (var(--col-count) - 1) * var(--col-gap)) / var(--col-count))
  );
  --desktop-columns: [full-start] 1fr [content-start] repeat(var(--col-count), minmax(0, var(--col-size))) [content-end] 1fr [full-end];
  --default-columns: 0 repeat(var(--col-count), 1fr) 0;

  /* Mobile S, 3 columns */
  --mobile-safezone: 480px;

  /* Typography */
  --line-height: 1.5;
  --text-copy-xxs: 0.625rem; /* 10px */
  --text-copy-xs: 0.75rem; /* 12px */
  --text-copy-s: 0.875rem; /* 14px */
  --text-copy-m: 1rem; /* 16px */
  --text-copy-l: 1.125rem; /* 18px */
  --text-subheading-size: 1.25rem; /* 20px */
  --text-heading-size: 1.625rem; /* 26px */
  --text-title-size: 1.875rem; /* 30px */
  --text-coursename-size: 2.25rem; /* 40px */
  --text-hero-size: 2.7rem; /* 43.2 */
  --text-giant-size: 4.6875rem; /* 75px */
  --brand-typeface: "Roboto", arial, "Helvetica Neue", helvetica;
  --brand-bold-typeface: "Roboto Bold", "Roboto", arial, "Helvetica Neue", helvetica;
  --brand-regular-typeface: "Roboto Regular", "Roboto", arial, "Helvetica Neue", helvetica;
  --brand-medium-typeface: "Roboto Medium", "Roboto", arial, "Helvetica Neue", helvetica;
  --brand-light-typeface: "Roboto Light", "Roboto", arial, "Helvetica Neue", helvetica;
  --button-typeface: var(--brand-regular-typeface);
  --heading-typeface: "Barlow", "Roboto", arial;

  /* Animations */
  --quick-transition: all 0.05s ease-out;
  --standard-transition: all 0.3s ease-out;
  --slow-transition: all 3s ease-out;
  --box-shadow: 0px 3px 10px oklch(0% 0 0deg);
  --subtle-shadow: 0px 3px 6px oklch(from currentcolor l c h / 30%);
  --faint-shadow: 0px 0px 5px oklch(from currentcolor l c h / 15%);

  @media (width >= 48rem) {
    --header-height: 4rem;
    --col-count: 20;
    --inner-col-padding-x: 30px;
    --inner-col-padding-y: 25px;
  }

  @media (width >= 64rem) {
    --columns: var(--desktop-columns);
    --below-header: calc(var(--header-height) + var(--navbar-height) + var(--breadcrumbs-height));
  }

  @media (width >= 80rem) {
    --col-gap: 20px;
    --row-gap: 50px;
  }

}
/**
  --tiny-spacing: 6px;
  --spacing: 1rem;
  --big-spacing: 2rem;
 */
.mt-0 {
  margin-top: 0 !important;
}
.mt-tiny {
  margin-top: var(--tiny-spacing);
}
.mt-small {
  margin-top: var(--small-spacing);
}
.mt-normal,
.mt-regular {
  margin-top: var(--spacing);
}
.mt-big {
  margin-top: var(--big-spacing);
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-tiny {
  margin-bottom: var(--tiny-spacing);
}
.mb-small {
  margin-bottom: var(--small-spacing);
}
.mb-regular {
  margin-bottom: var(--spacing);
}
.mb-big {
  margin-bottom: var(--big-spacing);
}
.ml-tiny {
  margin-left: var(--tiny-spacing);
}
.ml-small {
  margin-left: var(--small-spacing);
}
.ml-regular {
  margin-left: var(--spacing);
}
.ml-big {
  margin-left: var(--big-spacing);
}
.mr-tiny {
  margin-right: var(--tiny-spacing);
}
.mr-small {
  margin-right: var(--small-spacing);
}
.mr-regular {
  margin-right: var(--spacing);
}
.mr-big {
  margin-right: var(--big-spacing);
}
.pt-tiny {
  padding-top: var(--tiny-spacing);
}
.pt-small {
  padding-top: var(--small-spacing);
}
.pt-normal,
.pt-regular {
  padding-top: var(--spacing);
}
.pt-big {
  padding-top: var(--big-spacing);
}
.pb-tiny {
  padding-bottom: var(--tiny-spacing);
}
.pb-small {
  padding-bottom: var(--small-spacing);
}
.pb-regular {
  padding-bottom: var(--spacing);
}
.pb-big {
  padding-bottom: var(--big-spacing);
}
.pl-tiny {
  padding-left: var(--tiny-spacing);
}
.pl-small {
  padding-left: var(--small-spacing);
}
.pl-regular {
  padding-left: var(--spacing);
}
.pl-big {
  padding-left: var(--big-spacing);
}
.pr-tiny {
  padding-right: var(--tiny-spacing);
}
.pr-small {
  padding-right: var(--small-spacing);
}
.pr-regular {
  padding-right: var(--spacing);
}
.pr-big {
  padding-right: var(--big-spacing);
}
.flex_row {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;
}
.flex_grow {
  flex-grow: 1;
}
.tooltip {
  opacity: 0;
  background: var(--cta-orange);
  color: var(--white);
  border-radius: var(--corner-size-small);
  padding-inline: 8px;
  padding-block: 6px;
  font-size: var(--text-copy-xs);
  position: absolute;
  top: -8px;
  left: 50%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  transform: translateX(-100%);
  margin-left: 11px;
  z-index: 30;

  &::before {
    display: block;
    content: "";
    position: absolute;
    background: var(--cta-orange);
    right: 8px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    rotate: 45deg;
  }

  &.shown {
    display: block; /* zichtbaar zodra popover geopend is */
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }

}
.chevron_right_icon {
  position: relative;

  &::after {
    content: "";
    -webkit-mask: url(../img/icons/chevron-right.svg) no-repeat 50% 50%;
            mask: url(../img/icons/chevron-right.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
            mask-size: cover;
    background-color: currentColor;
    width: 24px;
    height: 24px;
    float: right;
    white-space: nowrap;
    position: absolute;
    right: 0;
    /*top: 2px;*/
  }
}
.chevron_left_icon {
  position: relative;

  &::after {
    content: "";
    -webkit-mask: url(../img/icons/chevron-left.svg) no-repeat 50% 50%;
            mask: url(../img/icons/chevron-left.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
            mask-size: cover;
    background-color: currentColor;
    width: 24px;
    height: 24px;
    float: right;
    white-space: nowrap;
    position: absolute;
    left: 0;
    /*top: 2px;*/
  }
}
.has-bg-focus-point {
  /**
   * FocusX: Decimal number between -1 & 1, where -1 is far left, 0 is center, 1 is far right.
   * FocusY: Decimal number between -1 & 1, where -1 is top, 0 is center, 1 is bottom.
   */
  background-position: calc((var(--focus-point-x, 0) + 1) * 50%) calc((var(--focus-point-y, 0) + 1) * 50%) !important;
}
.has-focus-point {
  /**
   * FocusX: Decimal number between -1 & 1, where -1 is far left, 0 is center, 1 is far right.
   * FocusY: Decimal number between -1 & 1, where -1 is top, 0 is center, 1 is bottom.
   */

  .image-with-focus-point {
    -o-object-position: calc((var(--focus-point-x, 0) + 1) * 50%) calc((var(--focus-point-y, 0) + 1) * 50%) !important;
       object-position: calc((var(--focus-point-x, 0) + 1) * 50%) calc((var(--focus-point-y, 0) + 1) * 50%) !important;
  }
}
.has-mobile-bg-focus-point {
  @media (width < 48rem) {
    background-position: calc((var(--mobile-focus-point-x, var(--tablet-focus-point-x, var(--focus-point-x, 0))) + 1) * 50%) calc((var(--mobile-focus-point-y, var(--tablet-focus-point-y, var(--focus-point-y, 0))) + 1) * 50%) !important;
  }
}
.has-tablet-bg-focus-point {
  @media (48rem <= width < 64rem) {
    background-position: calc((var(--tablet-focus-point-x, var(--focus-point-x, 0)) + 1) * 50%) calc((var(--tablet-focus-point-y, var(--focus-point-y, 0)) + 1) * 50%) !important;
  }
}
/* Background color utility classes */
.bg-blue {
  background-color: var(--blue);
}
.bg-dark-blue {
  background-color: var(--dark-blue);
}
.bg-orange {
  background-color: var(--orange);
}
.bg-green {
  background-color: var(--green);
}
.bg-white {
  background-color: var(--white);
}
.bg-grey {
  background-color: var(--grey);
}
.bg-black {
  background-color: var(--black);
}
.bg-brown {
  background-color: var(--brown);
}
.bg-ghost {
  background-color: var(--ghost);
}
.bg-brand-light {
  background-color: var(--brand-color-light);
}
.bg-brand-faint {
  background-color: var(--brand-color-faint);
}
.barlow-thin {
  font-family: Barlow, serif;
  font-weight: 100;
  font-style: normal;
}
.barlow-extralight {
  font-family: Barlow, serif;
  font-weight: 200;
  font-style: normal;
}
.barlow-light {
  font-family: Barlow, serif;
  font-weight: 300;
  font-style: normal;
}
.barlow-regular {
  font-family: Barlow, serif;
  font-weight: 400;
  font-style: normal;
}
.barlow-medium {
  font-family: Barlow, serif;
  font-weight: 500;
  font-style: normal;
}
.barlow-semibold {
  font-family: Barlow, serif;
  font-weight: 600;
  font-style: normal;
}
.barlow-bold {
  font-family: Barlow, serif;
  font-weight: 700;
  font-style: normal;
}
.barlow-extrabold {
  font-family: Barlow, serif;
  font-weight: 800;
  font-style: normal;
}
.barlow-black {
  font-family: Barlow, serif;
  font-weight: 900;
  font-style: normal;
}
.barlow-thin-italic {
  font-family: Barlow, serif;
  font-weight: 100;
  font-style: italic;
}
.barlow-extralight-italic {
  font-family: Barlow, serif;
  font-weight: 200;
  font-style: italic;
}
.barlow-light-italic {
  font-family: Barlow, serif;
  font-weight: 300;
  font-style: italic;
}
.barlow-regular-italic {
  font-family: Barlow, serif;
  font-weight: 400;
  font-style: italic;
}
.barlow-medium-italic {
  font-family: Barlow, serif;
  font-weight: 500;
  font-style: italic;
}
.barlow-semibold-italic {
  font-family: Barlow, serif;
  font-weight: 600;
  font-style: italic;
}
.barlow-bold-italic {
  font-family: Barlow, serif;
  font-weight: 700;
  font-style: italic;
}
.barlow-extrabold-italic {
  font-family: Barlow, serif;
  font-weight: 800;
  font-style: italic;
}
.barlow-black-italic {
  font-family: Barlow, serif;
  font-weight: 900;
  font-style: italic;
}
.kalam-light {
  font-family: Kalam, serif;
  font-weight: 300;
  font-style: normal;
}
.kalam-regular {
  font-family: Kalam, serif;
  font-weight: 400;
  font-style: normal;
}
.kalam-bold {
  font-family: Kalam, serif;
  font-weight: 700;
  font-style: normal;
}
/* Definitions */
html, body {
  scroll-behavior: smooth;
}
body {
  background: var(--white);
  display: grid;
  grid-template-columns: var(--columns);
  grid-template-rows:
    var(--header-height)
    var(--menu-height)
    var(--breadcrumbs-height)
    var(--hero-height)
    auto
    var(--footer-height);
  grid-column-gap: var(--col-gap);

  &.checkout {
    grid-template-rows:
    var(--header-height)
    var(--menu-height)
    var(--breadcrumbs-height)
    var(--hero-height)
    auto
    var(--footer-height-checkout);
  }
}
body > header {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  padding-block: var(--root-size);
  background: var(--header-background-color);

  .inner {
    grid-column: 2 / -2;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 100px 1fr -webkit-max-content;
    grid-template-columns: 100px 1fr max-content;
    grid-template-rows: 100%;
  }

  #menu_icon {
    display: none;
  }

  & #header_logo {
    display: flex;
    justify-content: start;
    align-items: center;

    & a {
      display: flex;
      align-items: center;

      & svg {
        height: calc(var(--root-size) * 2);
        overflow: hidden;
        color: var(--white);
      }
    }
  }

  & #header_search {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;

    & label {
      visibility: hidden;
    }

    & > input {
      outline: none;
      border: none;
      flex-grow: 1;
    }

    & > img {
      justify-self: end;
      position: relative;
      right: var(--text-title-size);
      height: var(--text-copy-m);
      aspect-ratio: 1;

      &#clear_search_icon {
        right: calc(2.5 * var(--text-copy-m));
      }
    }

    & > #header_search_results {
      position: absolute;
      top: calc(100% + var(--root-size));
      width: 100%;
      height: 0;
      max-height: 0;
      padding-block: 0;
      padding-inline: var(--text-subheading-size);
      overflow: hidden;
      background: var(--white);
      font-size: var(--text-copy-s);
    }
  }

  & #header_links {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 6px;
    font-size: var(--text-copy-xs);
    color: var(--white);

    & > a {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;

      &.hidden {
        display: none;
      }

      &:not(:last-of-type) {
        border-right: 1px solid var(--brand-color-mid);
        padding-right: 12px;
        margin-left: 3px;
      }

      &:first-of-type {
        margin-left: -12px;
      }

      & > img {
        height: var(--root-size);
        aspect-ratio: 1;
        display: inline-block;
        filter: brightness(100); /* Force white */
      }
    }


  }
}
body #menu_container {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-height);
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  z-index: 1;

  &:is(:focus, :focus-within) > #menu_drawer {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding-block: var(--breadcrumbs-height) var(--header-height);
  }

  & > :is(menu, #menu_drawer) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
  }

  & #menu_header {
    grid-row: 2 / 3;
    top: var(--header-height);
    align-items: center;
    background: var(--brand-color-light);
    z-index: 2;

    & li {
      height: 100%;
      display: grid;
      align-items: center;
      cursor: pointer;

      &:first-of-type {
        grid-column: 2 / -7;

        & > menu {
          position: relative;
          inset: 0 calc(var(--root-size) * -1);
          height: 100%;
          display: flex;
          align-items: center;

          & > li {
            padding-inline: var(--root-size);

            &:is(:hover, :focus, .active) {
              background: var(--white);
            }
          }
        }
      }

      &:not(:first-of-type) {
        grid-column: auto/ span 5;
        justify-items: end;
        white-space: nowrap;

        & > menu {
          position: relative;
          /*inset: 0 calc(var(--root-size) * -1);*/
          height: 100%;
          display: flex;
          align-items: center;
          align-content: flex-end;

          & > li:not(:last-of-type) {
            margin-right: var(--root-size);
          }

          /*& > li {*/
          /*  padding-inline: calc(var(--root-size) / 2);*/
          /*}*/
        }
      }
    }
  }

  & #menu_drawer {
    position: relative;
    top: var(--menu-height);
    z-index: 1;
    display: grid;
    grid-template-columns: subgrid;
    height: 0;
    overflow: hidden;
    background: var(--white);

    & > div.menu_lists_container {
      display: none;

      &.active {
        display: contents;
      }

      & > div {
        grid-column: auto / span 5;
        font-size: var(--text-copy-s);
        line-height: 160%;

        & > a.fallback_link {
          display: block;
          margin-top: var(--root-size);
        }

        & h4 {
          margin-bottom: var(--root-size);
        }

        &:nth-of-type(1) {
          grid-column-start: 2;
        }
      }
    }
  }
}
body > main {
  grid-column: 1 / -1;
  grid-row: 3 / 6;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto;
  grid-auto-rows: auto;
  width: 100vw;
  padding-bottom: var(--header-height);
  background: var(--white);
  isolation: isolate;

  /*make sure any floating nav-items dont trigger scrollbars in certain resolutions*/
  overflow-x: clip;

  & > nav {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    height: var(--breadcrumbs-height);
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--header-height) + var(--menu-height));
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr;
    z-index: 2;
    background: oklch(from var(--white) l c h / 95%);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);

    & > #crumbtrail {
      grid-column: 2 / span 10;
      grid-row: 1 / -1;

      & img {
        height: var(--root-size);
      }
    }

    & > .ticks_list {
      grid-column: 10 / -2;
      grid-row: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: var(--text-copy-xs);

      & li {
        white-space: nowrap;
      }
    }
  }

  & > section#hero {
    grid-column: 1 / -1;
    grid-row: 1 / span 1;
    aspect-ratio: 2.75/1;
    max-height: var(--desktop-bg-height, -webkit-fit-content);
    max-height: var(--desktop-bg-height, -moz-fit-content);
    max-height: var(--desktop-bg-height, fit-content);
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(5, 1fr);
    background-image: url("https://media.loi.nl/-/media/images/headers/niveaus/home/q3-2024-dagdromen/home_q3_2024_32x9.jpg");

    &.smaller {
      aspect-ratio: 4/1;
    }

    .hero_alignment {
      z-index: 2;
      grid-column: 2 / 12;
      grid-row: 2 / 3;
    }

    & .cta {
      --cta-color: var(--cta-green);
      grid-column: 2 / auto;
      grid-row: 4 / 5;
      place-self: start;
      white-space: nowrap;
      font-size: var(--text-subheading-size);
    }
  }

  & > .container {
    display: block;
    grid-column: 1 / -1;

    > .page_title_block {
      grid-column: 2 / -2;
    }

    > .element, > .content_block {
      grid-column: 2 / -2;

      /* Make breakouts possible */
      &:has(.breakout) {
        @media (width < 80rem) {
          grid-column: 2 / -1;
          > :not(.breakout) {
            grid-column: 1 / -2;
          }
        }
      }

      &.element_content_card {
        grid-column: 1 / -1;

        @media (width >= 48rem) {
          grid-column: 2 / -2;
        }

      }
    }
  }

  & > .container--regular {
    grid-column: 2 / -2;
  }

  & > .container--grid {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;
    row-gap: var(--row-gap);

    &:not(:first-of-type) {
      padding-top: var(--menu-height);
    }

    > .span_grid {
      width: 100%;
      display: grid;
      grid-column: 1 / -1;
    }

  }

  & > section.checkout {
    grid-column: 2 / -2;
    grid-row: 2 / 3;
    padding-top: var(--menu-height);
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto;

    & > div#checkout_form_container {
      grid-row: 1 / 2;
      grid-column: 1 / 14;
      height: 50dvh;
    }

    & > div#checkout_cost_summary {
      --heading-color: var(--brand-color-mid);

      grid-row: 1 / 2;
      grid-column: 14 / -1;
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
      border-radius: var(--corner-size-medium);
      padding: var(--form-element-size);
      box-shadow: var(--subtle-shadow);
      display: flex;
      flex-direction: column;
      gap: var(--root-size);
      color: var(--brand-color-mid);
      position: relative;

      & h3 {
        display: flex;
        align-items: center;
      }

      & .flex_row {
        gap: var(--root-size);

        & label {
          flex: 1;
        }
      }

      & .cost_breakdown {
        font-size: var(--text-copy-s);

        & p {
          color: var(--text-color-faint);
          display: flex;
          justify-content: space-between;

          & span {
            color: var(--text-color);
          }
        }

        & hr {
          border: none;
          margin-block: var(--root-size);
          height: 1px;
          background: var(--subtle-grey);
        }

        & small {
          color: var(--text-color-faint);
          font-size: var(--text-copy-xxs);
          font-style: italic;
        }

        & hr ~ small:first-of-type {
          display: block;
          margin-top: var(--root-size);
        }
      }
    }

    & h4 {
      --heading-color: var(--text-color);

      font-size: var(--text-copy-s);
    }
  }

  &:not(:has(section#hero)) {
    & > .container--grid {
      grid-row: 1 / 3;
      margin-top: calc(var(--breadcrumbs-height) + 10px);

      &.no-breadcrumb {
        margin-top: 0;
      }
    }

    & > nav {
      grid-row: 1 / 2;
    }
  }
}
body.width-small > main {
  & > .container--grid {
    @media (width >= 48rem) {
      grid-column: 5 / -5;
    }
  }
}
body.with_sidebar {
  & section#hero h1 {
    grid-column: 7 / -5;
  }

  & .container--grid {
    grid-column: 7 / -2;
  }
}
body aside {
  --sidebar-offset: calc(var(--header-height) + var(--menu-height));

  grid-column: 2 / 6;
  grid-row: 1 / -1;
  position: relative;
  translate: 0 var(--breadcrumbs-height);

  & > div#sidebar {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    padding-inline: var(--root-size);
    padding-bottom: var(--root-size);
    background: var(--grey);
    position: -webkit-sticky;
    position: sticky;
    top: var(--sidebar-offset);

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100dvh;
      background: var(--grey);
    }
  }
}
body > footer {
  grid-column: 1 / -1;
  grid-row: -2 / span 1;
  width: 100dvw;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 55% 30% 15%;
  z-index: 0;
  background: var(--white);
  border-top: var(--breadcrumbs-height) solid var(--white);
  overflow: hidden;

  & div#footer_nav {
    grid-column: 1 / -1;
    grid-row: 1 / span 1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(2, 50%);
    row-gap: var(--text-title-size);
    background: var(--brand-color);

    & > div {
      grid-column: 2 / -2;
      grid-row: 1 / 2;
      display: grid;
      grid-template-columns: subgrid;
      border-bottom: 1px solid var(--brand-color-mid);

      & > div {
        &:nth-of-type(1) {
          grid-column: 1 / 11;
          display: grid;
          grid-template-columns: repeat(2, 50%);
          grid-template-rows: repeat(2, 1fr);
          row-gap: var(--root-size);
          overflow: hidden;

          & img {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
            height: 85%;
            align-self: end;
          }

          & h3 {
            align-self: end;
          }
        }

        &:nth-of-type(2) {
          grid-column: 11 / -1;
        }
      }
    }

    & > nav {
      grid-column: 2 / -2;
      grid-row: 2 / 3;
      display: grid;
      grid-template-columns: subgrid;

      & > details {
        grid-column: auto / span 5;

        & summary {
          display: block;
          pointer-events: none;
        }

        &:nth-of-type(4) {
          & ul {
            display: flex;
            gap: var(--root-size);

            & img {
              height: var(--text-title-size);
              aspect-ratio: 1;
            }
          }
        }
      }
    }
  }

  & div#signoff {
    grid-column: 1 / -1;
    grid-row: 2 / span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--text-heading-size);
    border-top: 1px solid var(--grey);

    & svg {
      width: 171px;
      height: auto;
    }

    & #signoff_links {
      display: flex;
      align-items: center;
      gap: var(--text-subheading-size);
    }
  }

  & div#footer_nav + div#signoff {
    border-top: none;
  }

  & div#reviews {
    grid-column: 1 / -1;
    grid-row: 3 / span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--grey);

    & > p {
      display: flex;
      align-items: center;

      & svg {
        --empty-color: var(--grey);
        --filled-color: gold;

        position: relative;
        height: var(--text-title-size);
        aspect-ratio: 5/ 1;
      }
    }
  }
}
body.checkout > footer {
  grid-template-rows: 55% 45%;

  & div#signoff,
  & div#reviews {
    grid-row: auto;
  }
}
/* Grid is based on divisors of 20, so 2, 4, 5 and 10   */
[class*="subgrid"] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;

  &[class*='-2cols'] > * {
    grid-column: auto / span 10;
  }

  &[class*='-4cols'] > * {
    grid-column: auto / span 5;
  }

  &[class*='-5cols'] {
    & > * {
      grid-template-rows: repeat(3, auto);

      @media (width >= 48rem) {
        grid-template-rows: auto;
      }
    }

    &:has( .min-w-\[250px\]) {
      /*grid-auto-flow: row dense;*/
      grid-template-columns: repeat(5, minmax(250px, 1fr));
    }

  }

  &[class*='-10cols'] > * {
    grid-column: auto / span 2;
  }

  /* add the media breakpoints for the subgrid */


  &[class*='-cardrow'] {
    grid-template-rows: 1fr auto;
  }

  &.one_third {
    grid-column: auto / span round(up, calc(var(--col-count) * 0.33), 1);
  }

  &.two_thirds {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.66), 1);
  }

  &.half {
    grid-column: auto / span calc(var(--col-count) / 2);
  }

  &.one_fifth {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.2), 1);
  }

  &.two_fifth {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.4), 1);
  }

  &.three_fifth {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.6), 1);
  }

  &.four_fifth {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.8), 1);
  }

  &.one_fourth {
    grid-column: auto / span calc(var(--col-count) / 4);
  }

  &.three_fourth {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.75), 1);
  }

  /*
  In some cases, like a content block with three one-thirds, using subgrid just doesn't play out nicely
  So, instead, let's use flex as a fallback
   */

  .flexed_grid {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--col-gap);

    & > * {
      flex: 1;
    }
  }
}
/* Grid wrapper */
.row {
  /* fit it into grid setup from main site */
  grid-column: 2 / -2;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  display: flex;
  gap: var(--col-gap);
  flex-direction: column;

  @media (width >= 48rem) {
    flex-direction: row;
  }

  > * {
    white-space: normal; /* this is otherwise inheriting the nowrap */
  }

  /* Ensure full width in content blocks */

  .element & {
    grid-column: 1 / -1;
  }

  &.breakout {
    grid-auto-columns: 1fr !important;

    &:has( > .w-1\/5) {
      grid-template-columns: repeat(5, 1fr);
    }

    &:has( > .w-1\/4) {
      grid-template-columns: repeat(4, 1fr);
    }

    &:has( > .w-1\/3) {
      grid-template-columns: repeat(3, 1fr);
    }

    &:has( > .w-1\/2) {
      grid-template-columns: repeat(2, 1fr);
    }

    .w-1\/5 {
      width: 100%;
    }

    .w-1\/4 {
      width: 100%;
      min-width: 200px;
    }

    .w-1\/3 {
      width: 100%;
      min-width: 150px;
    }

    .w-1\/2 {
      width: 100%;
      min-width: 100px;
    }


  }

  .row {
    display: block;
  }
}
/* Font variants */
.font-bold {
  font-weight: 700;
}
.font-normal {
  font-weight: 400;
}
.font-light {
  font-weight: 300;
}
.font-thin {
  font-weight: 200;
}
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.text-xs {
  font-size: var(--text-copy-xs);
}
.text-sm {
  font-size: var(--text-copy-s);
}
.text-base {
  font-size: var(--text-copy-m);
}
.text-lg {
  font-size: var(--text-copy-l);
}
.text-xl {
  font-size: var(--text-heading-size);
}
.text-2xl {
  font-size: var(--text-title-size);
}
/* Tailwind-style fractional widths */
.min-w-\[250px\] {
  min-width: 250px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[150px\] {
  min-width: 150px;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.w-\[50px\] {
  width: 50px;
}
.w-\[75px\] {
  width: 75px;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[150px\] {
  width: 150px;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[250px\] {
  width: 250px;
}
.w-\[300px\] {
  width: 300px;
}
/* Full width */
.w-full {
  width: 100%;
}
/* Halves */
.w-1\/2 {
  width: 50%;
}
/* Thirds */
.w-1\/3 {
  width: 33.333333%;
}
.w-2\/3 {
  width: 66.666667%;
}
/* Quarters */
.w-1\/4 {
  width: 25%;
}
.w-2\/4 {
  width: 50%;
}
.w-3\/4 {
  width: 75%;
}
/* Fifths */
.w-1\/5 {
  width: 20%;
}
.w-2\/5 {
  width: 40%;
}
.w-3\/5 {
  width: 60%;
}
.w-4\/5 {
  width: 80%;
}
/* Sixths */
.w-1\/6 {
  width: 16.666667%;
}
.w-2\/6 {
  width: 33.333333%;
}
.w-3\/6 {
  width: 50%;
}
.w-4\/6 {
  width: 66.666667%;
}
.w-5\/6 {
  width: 83.333333%;
}
/* Twelfths (preserving compatibility) */
.w-1\/12 {
  width: 8.333333%;
}
.w-2\/12 {
  width: 16.666667%;
}
.w-3\/12 {
  width: 25%;
}
.w-4\/12 {
  width: 33.333333%;
}
.w-5\/12 {
  width: 41.666667%;
}
.w-6\/12 {
  width: 50%;
}
.w-7\/12 {
  width: 58.333333%;
}
.w-8\/12 {
  width: 66.666667%;
}
.w-9\/12 {
  width: 75%;
}
.w-10\/12 {
  width: 83.333333%;
}
.w-11\/12 {
  width: 91.666667%;
}
.w-12\/12 {
  width: 100%;
}
/* Auto sizing */
.w-auto {
  width: auto;
}
/* Container-based widths */
.w-3xs {
  width: var(--container-3xs);
}
.w-2xs {
  width: var(--container-2xs);
}
.w-xs {
  width: var(--container-xs);
}
.w-sm {
  width: var(--container-sm);
}
.w-md {
  width: var(--container-md);
}
.w-lg {
  width: var(--container-lg);
}
.w-xl {
  width: var(--container-xl);
}
.w-2xl {
  width: var(--container-2xl);
}
.w-3xl {
  width: var(--container-3xl);
}
.w-4xl {
  width: var(--container-4xl);
}
.w-5xl {
  width: var(--container-5xl);
}
.w-6xl {
  width: var(--container-6xl);
}
.w-7xl {
  width: var(--container-7xl);
}
/* Special width utilities */
.w-px {
  width: 1px;
}
.w-screen {
  width: 100vw;
}
.w-dvw {
  width: 100dvw;
}
.w-dvh {
  width: 100dvh;
}
.w-lvw {
  width: 100lvw;
}
.w-lvh {
  width: 100lvh;
}
.w-svw {
  width: 100svw;
}
.w-svh {
  width: 100svh;
}
.w-min {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.w-max {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.w-fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
/* Size utilities (width and height) */
.size-auto {
  width: auto;
  height: auto;
}
.size-px {
  width: 1px;
  height: 1px;
}
.size-full {
  width: 100%;
  height: 100%;
}
.size-dvw {
  width: 100dvw;
  height: 100dvw;
}
.size-dvh {
  width: 100dvh;
  height: 100dvh;
}
.size-lvw {
  width: 100lvw;
  height: 100lvw;
}
.size-lvh {
  width: 100lvh;
  height: 100lvh;
}
.size-svw {
  width: 100svw;
  height: 100svw;
}
.size-svh {
  width: 100svh;
  height: 100svh;
}
.size-min {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
}
.size-max {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}
.size-fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
/* Size utilities with spacing multipliers */
.size-0 {
  width: 0;
  height: 0;
}
.size-1 {
  width: calc(var(--spacing) * 1);
  height: calc(var(--spacing) * 1);
}
.size-2 {
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
}
.size-3 {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
}
.size-4 {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}
.size-5 {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}
.size-6 {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
.size-8 {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
}
.size-10 {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
}
.size-12 {
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12);
}
.size-16 {
  width: calc(var(--spacing) * 16);
  height: calc(var(--spacing) * 16);
}
.size-20 {
  width: calc(var(--spacing) * 20);
  height: calc(var(--spacing) * 20);
}
.size-24 {
  width: calc(var(--spacing) * 24);
  height: calc(var(--spacing) * 24);
}
.size-32 {
  width: calc(var(--spacing) * 32);
  height: calc(var(--spacing) * 32);
}
.size-40 {
  width: calc(var(--spacing) * 40);
  height: calc(var(--spacing) * 40);
}
.size-48 {
  width: calc(var(--spacing) * 48);
  height: calc(var(--spacing) * 48);
}
.size-56 {
  width: calc(var(--spacing) * 56);
  height: calc(var(--spacing) * 56);
}
.size-64 {
  width: calc(var(--spacing) * 64);
  height: calc(var(--spacing) * 64);
}
/* Size utilities with fractions */
.size-1\/2 {
  width: 50%;
  height: 50%;
}
.size-1\/3 {
  width: 33.333333%;
  height: 33.333333%;
}
.size-2\/3 {
  width: 66.666667%;
  height: 66.666667%;
}
.size-1\/4 {
  width: 25%;
  height: 25%;
}
.size-3\/4 {
  width: 75%;
  height: 75%;
}
.size-1\/5 {
  width: 20%;
  height: 20%;
}
.size-2\/5 {
  width: 40%;
  height: 40%;
}
.size-3\/5 {
  width: 60%;
  height: 60%;
}
.size-4\/5 {
  width: 80%;
  height: 80%;
}
.size-1\/6 {
  width: 16.666667%;
  height: 16.666667%;
}
.size-5\/6 {
  width: 83.333333%;
  height: 83.333333%;
}
/* Border radius utilities */
.rounded-none {
  border-radius: 0;
}
.rounded-sm {
  border-radius: var(--corner-size-small);
}
.rounded-md {
  border-radius: var(--corner-size-medium);
}
.rounded-lg {
  border-radius: var(--corner-size-large);
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
/* Background position utilities */
.bg-top-left {
  background-position: top left;
}
.bg-top {
  background-position: top;
}
.bg-top-right {
  background-position: top right;
}
.bg-left {
  background-position: left;
}
.bg-center {
  background-position: center;
}
.bg-right {
  background-position: right;
}
.bg-bottom-left {
  background-position: bottom left;
}
.bg-bottom {
  background-position: bottom;
}
.bg-bottom-right {
  background-position: bottom right;
}
/* Responsive border radius utilities - Small */
@media (width >= 40rem) {
  .sm\:rounded-none {
    border-radius: 0;
  }

  .sm\:rounded-sm {
    border-radius: var(--corner-size-small);
  }

  .sm\:rounded-md {
    border-radius: var(--corner-size-medium);
  }

  .sm\:rounded-lg {
    border-radius: var(--corner-size-large);
  }

  .sm\:rounded {
    border-radius: 0.25rem;
  }

  .sm\:rounded-full {
    border-radius: 9999px;
  }
}
/* Responsive border radius utilities - Medium */
@media (width >= 48rem) {
  .md\:rounded-none {
    border-radius: 0;
  }

  .md\:rounded-sm {
    border-radius: var(--corner-size-small);
  }

  .md\:rounded-md {
    border-radius: var(--corner-size-medium);
  }

  .md\:rounded-lg {
    border-radius: var(--corner-size-large);
  }

  .md\:rounded {
    border-radius: 0.25rem;
  }

  .md\:rounded-full {
    border-radius: 9999px;
  }
}
/* Responsive border radius utilities - Large */
@media (width >= 64rem) {
  .lg\:rounded-none {
    border-radius: 0;
  }

  .lg\:rounded-sm {
    border-radius: var(--corner-size-small);
  }

  .lg\:rounded-md {
    border-radius: var(--corner-size-medium);
  }

  .lg\:rounded-lg {
    border-radius: var(--corner-size-large);
  }

  .lg\:rounded {
    border-radius: 0.25rem;
  }

  .lg\:rounded-full {
    border-radius: 9999px;
  }
}
/* Responsive border radius utilities - Extra Large */
@media (width >= 80rem) {
  .xl\:rounded-none {
    border-radius: 0;
  }

  .xl\:rounded-sm {
    border-radius: var(--corner-size-small);
  }

  .xl\:rounded-md {
    border-radius: var(--corner-size-medium);
  }

  .xl\:rounded-lg {
    border-radius: var(--corner-size-large);
  }

  .xl\:rounded {
    border-radius: 0.25rem;
  }

  .xl\:rounded-full {
    border-radius: 9999px;
  }
}
/* Responsive border radius utilities - Extra Extra Large */
@media (width >= 96rem) {
  .xxl\:rounded-none {
    border-radius: 0;
  }

  .xxl\:rounded-sm {
    border-radius: var(--corner-size-small);
  }

  .xxl\:rounded-md {
    border-radius: var(--corner-size-medium);
  }

  .xxl\:rounded-lg {
    border-radius: var(--corner-size-large);
  }

  .xxl\:rounded {
    border-radius: 0.25rem;
  }

  .xxl\:rounded-full {
    border-radius: 9999px;
  }
}
/* Responsive variants - Small */
@media (width >= 40rem) {
  .sm\:w-full {
    width: 100%;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-1\/3 {
    width: 33.333333%;
  }

  .sm\:w-2\/3 {
    width: 66.666667%;
  }

  .sm\:w-1\/4 {
    width: 25%;
  }

  .sm\:w-2\/4 {
    width: 50%;
  }

  .sm\:w-3\/4 {
    width: 75%;
  }

  .sm\:w-1\/5 {
    width: 20%;
  }

  .sm\:w-2\/5 {
    width: 40%;
  }

  .sm\:w-3\/5 {
    width: 60%;
  }

  .sm\:w-4\/5 {
    width: 80%;
  }

  .sm\:w-1\/6 {
    width: 16.666667%;
  }

  .sm\:w-2\/6 {
    width: 33.333333%;
  }

  .sm\:w-3\/6 {
    width: 50%;
  }

  .sm\:w-4\/6 {
    width: 66.666667%;
  }

  .sm\:w-5\/6 {
    width: 83.333333%;
  }

  .sm\:w-1\/12 {
    width: 8.333333%;
  }

  .sm\:w-2\/12 {
    width: 16.666667%;
  }

  .sm\:w-3\/12 {
    width: 25%;
  }

  .sm\:w-4\/12 {
    width: 33.333333%;
  }

  .sm\:w-5\/12 {
    width: 41.666667%;
  }

  .sm\:w-6\/12 {
    width: 50%;
  }

  .sm\:w-7\/12 {
    width: 58.333333%;
  }

  .sm\:w-8\/12 {
    width: 66.666667%;
  }

  .sm\:w-9\/12 {
    width: 75%;
  }

  .sm\:w-10\/12 {
    width: 83.333333%;
  }

  .sm\:w-11\/12 {
    width: 91.666667%;
  }

  .sm\:w-12\/12 {
    width: 100%;
  }

  .sm\:w-auto {
    width: auto;
  }
}
/* Responsive variants - Medium */
@media (width >= 48rem) {
  .md\:w-full {
    width: 100%;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-2\/4 {
    width: 50%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-1\/5 {
    width: 20%;
  }

  .md\:w-2\/5 {
    width: 40%;
  }

  .md\:w-3\/5 {
    width: 60%;
  }

  .md\:w-4\/5 {
    width: 80%;
  }

  .md\:w-1\/6 {
    width: 16.666667%;
  }

  .md\:w-2\/6 {
    width: 33.333333%;
  }

  .md\:w-3\/6 {
    width: 50%;
  }

  .md\:w-4\/6 {
    width: 66.666667%;
  }

  .md\:w-5\/6 {
    width: 83.333333%;
  }

  .md\:w-1\/12 {
    width: 8.333333%;
  }

  .md\:w-2\/12 {
    width: 16.666667%;
  }

  .md\:w-3\/12 {
    width: 25%;
  }

  .md\:w-4\/12 {
    width: 33.333333%;
  }

  .md\:w-5\/12 {
    width: 41.666667%;
  }

  .md\:w-6\/12 {
    width: 50%;
  }

  .md\:w-7\/12 {
    width: 58.333333%;
  }

  .md\:w-8\/12 {
    width: 66.666667%;
  }

  .md\:w-9\/12 {
    width: 75%;
  }

  .md\:w-10\/12 {
    width: 83.333333%;
  }

  .md\:w-11\/12 {
    width: 91.666667%;
  }

  .md\:w-12\/12 {
    width: 100%;
  }

  .md\:w-auto {
    width: auto;
  }
}
/* Responsive variants - Large */
@media (width >= 64rem) {
  .lg\:w-full {
    width: 100%;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:w-2\/3 {
    width: 66.666667%;
  }

  .lg\:w-1\/4 {
    width: 25%;
  }

  .lg\:w-2\/4 {
    width: 50%;
  }

  .lg\:w-3\/4 {
    width: 75%;
  }

  .lg\:w-1\/5 {
    width: 20%;
  }

  .lg\:w-2\/5 {
    width: 40%;
  }

  .lg\:w-3\/5 {
    width: 60%;
  }

  .lg\:w-4\/5 {
    width: 80%;
  }

  .lg\:w-1\/6 {
    width: 16.666667%;
  }

  .lg\:w-2\/6 {
    width: 33.333333%;
  }

  .lg\:w-3\/6 {
    width: 50%;
  }

  .lg\:w-4\/6 {
    width: 66.666667%;
  }

  .lg\:w-5\/6 {
    width: 83.333333%;
  }

  .lg\:w-1\/12 {
    width: 8.333333%;
  }

  .lg\:w-2\/12 {
    width: 16.666667%;
  }

  .lg\:w-3\/12 {
    width: 25%;
  }

  .lg\:w-4\/12 {
    width: 33.333333%;
  }

  .lg\:w-5\/12 {
    width: 41.666667%;
  }

  .lg\:w-6\/12 {
    width: 50%;
  }

  .lg\:w-7\/12 {
    width: 58.333333%;
  }

  .lg\:w-8\/12 {
    width: 66.666667%;
  }

  .lg\:w-9\/12 {
    width: 75%;
  }

  .lg\:w-10\/12 {
    width: 83.333333%;
  }

  .lg\:w-11\/12 {
    width: 91.666667%;
  }

  .lg\:w-12\/12 {
    width: 100%;
  }

  .lg\:w-auto {
    width: auto;
  }
}
/* Responsive variants - Extra Large */
@media (width >= 80rem) {
  .xl\:w-full {
    width: 100%;
  }

  .xl\:w-1\/2 {
    width: 50%;
  }

  .xl\:w-1\/3 {
    width: 33.333333%;
  }

  .xl\:w-2\/3 {
    width: 66.666667%;
  }

  .xl\:w-1\/4 {
    width: 25%;
  }

  .xl\:w-2\/4 {
    width: 50%;
  }

  .xl\:w-3\/4 {
    width: 75%;
  }

  .xl\:w-1\/5 {
    width: 20%;
  }

  .xl\:w-2\/5 {
    width: 40%;
  }

  .xl\:w-3\/5 {
    width: 60%;
  }

  .xl\:w-4\/5 {
    width: 80%;
  }

  .xl\:w-1\/6 {
    width: 16.666667%;
  }

  .xl\:w-2\/6 {
    width: 33.333333%;
  }

  .xl\:w-3\/6 {
    width: 50%;
  }

  .xl\:w-4\/6 {
    width: 66.666667%;
  }

  .xl\:w-5\/6 {
    width: 83.333333%;
  }

  .xl\:w-1\/12 {
    width: 8.333333%;
  }

  .xl\:w-2\/12 {
    width: 16.666667%;
  }

  .xl\:w-3\/12 {
    width: 25%;
  }

  .xl\:w-4\/12 {
    width: 33.333333%;
  }

  .xl\:w-5\/12 {
    width: 41.666667%;
  }

  .xl\:w-6\/12 {
    width: 50%;
  }

  .xl\:w-7\/12 {
    width: 58.333333%;
  }

  .xl\:w-8\/12 {
    width: 66.666667%;
  }

  .xl\:w-9\/12 {
    width: 75%;
  }

  .xl\:w-10\/12 {
    width: 83.333333%;
  }

  .xl\:w-11\/12 {
    width: 91.666667%;
  }

  .xl\:w-12\/12 {
    width: 100%;
  }

  .xl\:w-auto {
    width: auto;
  }
}
/* Responsive variants - Extra Extra Large */
@media (width >= 96rem) {
  .xxl\:w-full {
    width: 100%;
  }

  .xxl\:w-1\/2 {
    width: 50%;
  }

  .xxl\:w-1\/3 {
    width: 33.333333%;
  }

  .xxl\:w-2\/3 {
    width: 66.666667%;
  }

  .xxl\:w-1\/4 {
    width: 25%;
  }

  .xxl\:w-2\/4 {
    width: 50%;
  }

  .xxl\:w-3\/4 {
    width: 75%;
  }

  .xxl\:w-1\/5 {
    width: 20%;
  }

  .xxl\:w-2\/5 {
    width: 40%;
  }

  .xxl\:w-3\/5 {
    width: 60%;
  }

  .xxl\:w-4\/5 {
    width: 80%;
  }

  .xxl\:w-1\/6 {
    width: 16.666667%;
  }

  .xxl\:w-2\/6 {
    width: 33.333333%;
  }

  .xxl\:w-3\/6 {
    width: 50%;
  }

  .xxl\:w-4\/6 {
    width: 66.666667%;
  }

  .xxl\:w-5\/6 {
    width: 83.333333%;
  }

  .xxl\:w-1\/12 {
    width: 8.333333%;
  }

  .xxl\:w-2\/12 {
    width: 16.666667%;
  }

  .xxl\:w-3\/12 {
    width: 25%;
  }

  .xxl\:w-4\/12 {
    width: 33.333333%;
  }

  .xxl\:w-5\/12 {
    width: 41.666667%;
  }

  .xxl\:w-6\/12 {
    width: 50%;
  }

  .xxl\:w-7\/12 {
    width: 58.333333%;
  }

  .xxl\:w-8\/12 {
    width: 66.666667%;
  }

  .xxl\:w-9\/12 {
    width: 75%;
  }

  .xxl\:w-10\/12 {
    width: 83.333333%;
  }

  .xxl\:w-11\/12 {
    width: 91.666667%;
  }

  .xxl\:w-12\/12 {
    width: 100%;
  }

  .xxl\:w-auto {
    width: auto;
  }
}
/* Responsive variants - 3XL */
@media (width >= 120rem) {
  .\33xl\:w-full {
    width: 100%;
  }

  .\33xl\:w-1\/2 {
    width: 50%;
  }

  .\33xl\:w-1\/3 {
    width: 33.333333%;
  }

  .\33xl\:w-2\/3 {
    width: 66.666667%;
  }

  .\33xl\:w-1\/4 {
    width: 25%;
  }

  .\33xl\:w-2\/4 {
    width: 50%;
  }

  .\33xl\:w-3\/4 {
    width: 75%;
  }

  .\33xl\:w-1\/5 {
    width: 20%;
  }

  .\33xl\:w-2\/5 {
    width: 40%;
  }

  .\33xl\:w-3\/5 {
    width: 60%;
  }

  .\33xl\:w-4\/5 {
    width: 80%;
  }

  .\33xl\:w-1\/6 {
    width: 16.666667%;
  }

  .\33xl\:w-2\/6 {
    width: 33.333333%;
  }

  .\33xl\:w-3\/6 {
    width: 50%;
  }

  .\33xl\:w-4\/6 {
    width: 66.666667%;
  }

  .\33xl\:w-5\/6 {
    width: 83.333333%;
  }

  .\33xl\:w-1\/12 {
    width: 8.333333%;
  }

  .\33xl\:w-2\/12 {
    width: 16.666667%;
  }

  .\33xl\:w-3\/12 {
    width: 25%;
  }

  .\33xl\:w-4\/12 {
    width: 33.333333%;
  }

  .\33xl\:w-5\/12 {
    width: 41.666667%;
  }

  .\33xl\:w-6\/12 {
    width: 50%;
  }

  .\33xl\:w-7\/12 {
    width: 58.333333%;
  }

  .\33xl\:w-8\/12 {
    width: 66.666667%;
  }

  .\33xl\:w-9\/12 {
    width: 75%;
  }

  .\33xl\:w-10\/12 {
    width: 83.333333%;
  }

  .\33xl\:w-11\/12 {
    width: 91.666667%;
  }

  .\33xl\:w-12\/12 {
    width: 100%;
  }

  .\33xl\:w-auto {
    width: auto;
  }
}
/* Responsive width utilities - XS */
@media (width >= 30rem) {
  .xs\:w-full {
    width: 100%;
  }

  .xs\:w-1\/2 {
    width: 50%;
  }

  .xs\:w-1\/3 {
    width: 33.333333%;
  }

  .xs\:w-2\/3 {
    width: 66.666667%;
  }

  .xs\:w-1\/4 {
    width: 25%;
  }

  .xs\:w-2\/4 {
    width: 50%;
  }

  .xs\:w-3\/4 {
    width: 75%;
  }

  .xs\:w-1\/5 {
    width: 20%;
  }

  .xs\:w-2\/5 {
    width: 40%;
  }

  .xs\:w-3\/5 {
    width: 60%;
  }

  .xs\:w-4\/5 {
    width: 80%;
  }

  .xs\:w-1\/6 {
    width: 16.666667%;
  }

  .xs\:w-2\/6 {
    width: 33.333333%;
  }

  .xs\:w-3\/6 {
    width: 50%;
  }

  .xs\:w-4\/6 {
    width: 66.666667%;
  }

  .xs\:w-5\/6 {
    width: 83.333333%;
  }

  .xs\:w-1\/12 {
    width: 8.333333%;
  }

  .xs\:w-2\/12 {
    width: 16.666667%;
  }

  .xs\:w-3\/12 {
    width: 25%;
  }

  .xs\:w-4\/12 {
    width: 33.333333%;
  }

  .xs\:w-5\/12 {
    width: 41.666667%;
  }

  .xs\:w-6\/12 {
    width: 50%;
  }

  .xs\:w-7\/12 {
    width: 58.333333%;
  }

  .xs\:w-8\/12 {
    width: 66.666667%;
  }

  .xs\:w-9\/12 {
    width: 75%;
  }

  .xs\:w-10\/12 {
    width: 83.333333%;
  }

  .xs\:w-11\/12 {
    width: 91.666667%;
  }

  .xs\:w-12\/12 {
    width: 100%;
  }

  .xs\:w-auto {
    width: auto;
  }
}
/* Responsive container widths and special widths */
@media (width >= 30rem) {
  .xs\:w-3xs {
    width: var(--container-3xs);
  }

  .xs\:w-2xs {
    width: var(--container-2xs);
  }

  .xs\:w-xs {
    width: var(--container-xs);
  }

  .xs\:w-sm {
    width: var(--container-sm);
  }

  .xs\:w-md {
    width: var(--container-md);
  }

  .xs\:w-lg {
    width: var(--container-lg);
  }

  .xs\:w-xl {
    width: var(--container-xl);
  }

  .xs\:w-2xl {
    width: var(--container-2xl);
  }

  .xs\:w-3xl {
    width: var(--container-3xl);
  }

  .xs\:w-4xl {
    width: var(--container-4xl);
  }

  .xs\:w-5xl {
    width: var(--container-5xl);
  }

  .xs\:w-6xl {
    width: var(--container-6xl);
  }

  .xs\:w-7xl {
    width: var(--container-7xl);
  }

  .xs\:w-px {
    width: 1px;
  }

  .xs\:w-screen {
    width: 100vw;
  }

  .xs\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .xs\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .xs\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 40rem) {
  .sm\:w-3xs {
    width: var(--container-3xs);
  }

  .sm\:w-2xs {
    width: var(--container-2xs);
  }

  .sm\:w-xs {
    width: var(--container-xs);
  }

  .sm\:w-sm {
    width: var(--container-sm);
  }

  .sm\:w-md {
    width: var(--container-md);
  }

  .sm\:w-lg {
    width: var(--container-lg);
  }

  .sm\:w-xl {
    width: var(--container-xl);
  }

  .sm\:w-2xl {
    width: var(--container-2xl);
  }

  .sm\:w-3xl {
    width: var(--container-3xl);
  }

  .sm\:w-4xl {
    width: var(--container-4xl);
  }

  .sm\:w-5xl {
    width: var(--container-5xl);
  }

  .sm\:w-6xl {
    width: var(--container-6xl);
  }

  .sm\:w-7xl {
    width: var(--container-7xl);
  }

  .sm\:w-px {
    width: 1px;
  }

  .sm\:w-screen {
    width: 100vw;
  }

  .sm\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .sm\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .sm\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 48rem) {
  .md\:w-3xs {
    width: var(--container-3xs);
  }

  .md\:w-2xs {
    width: var(--container-2xs);
  }

  .md\:w-xs {
    width: var(--container-xs);
  }

  .md\:w-sm {
    width: var(--container-sm);
  }

  .md\:w-md {
    width: var(--container-md);
  }

  .md\:w-lg {
    width: var(--container-lg);
  }

  .md\:w-xl {
    width: var(--container-xl);
  }

  .md\:w-2xl {
    width: var(--container-2xl);
  }

  .md\:w-3xl {
    width: var(--container-3xl);
  }

  .md\:w-4xl {
    width: var(--container-4xl);
  }

  .md\:w-5xl {
    width: var(--container-5xl);
  }

  .md\:w-6xl {
    width: var(--container-6xl);
  }

  .md\:w-7xl {
    width: var(--container-7xl);
  }

  .md\:w-px {
    width: 1px;
  }

  .md\:w-screen {
    width: 100vw;
  }

  .md\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .md\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .md\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 64rem) {
  .lg\:w-3xs {
    width: var(--container-3xs);
  }

  .lg\:w-2xs {
    width: var(--container-2xs);
  }

  .lg\:w-xs {
    width: var(--container-xs);
  }

  .lg\:w-sm {
    width: var(--container-sm);
  }

  .lg\:w-md {
    width: var(--container-md);
  }

  .lg\:w-lg {
    width: var(--container-lg);
  }

  .lg\:w-xl {
    width: var(--container-xl);
  }

  .lg\:w-2xl {
    width: var(--container-2xl);
  }

  .lg\:w-3xl {
    width: var(--container-3xl);
  }

  .lg\:w-4xl {
    width: var(--container-4xl);
  }

  .lg\:w-5xl {
    width: var(--container-5xl);
  }

  .lg\:w-6xl {
    width: var(--container-6xl);
  }

  .lg\:w-7xl {
    width: var(--container-7xl);
  }

  .lg\:w-px {
    width: 1px;
  }

  .lg\:w-screen {
    width: 100vw;
  }

  .lg\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .lg\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .lg\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 80rem) {
  .xl\:w-3xs {
    width: var(--container-3xs);
  }

  .xl\:w-2xs {
    width: var(--container-2xs);
  }

  .xl\:w-xs {
    width: var(--container-xs);
  }

  .xl\:w-sm {
    width: var(--container-sm);
  }

  .xl\:w-md {
    width: var(--container-md);
  }

  .xl\:w-lg {
    width: var(--container-lg);
  }

  .xl\:w-xl {
    width: var(--container-xl);
  }

  .xl\:w-2xl {
    width: var(--container-2xl);
  }

  .xl\:w-3xl {
    width: var(--container-3xl);
  }

  .xl\:w-4xl {
    width: var(--container-4xl);
  }

  .xl\:w-5xl {
    width: var(--container-5xl);
  }

  .xl\:w-6xl {
    width: var(--container-6xl);
  }

  .xl\:w-7xl {
    width: var(--container-7xl);
  }

  .xl\:w-px {
    width: 1px;
  }

  .xl\:w-screen {
    width: 100vw;
  }

  .xl\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .xl\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .xl\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 96rem) {
  .xxl\:w-3xs {
    width: var(--container-3xs);
  }

  .xxl\:w-2xs {
    width: var(--container-2xs);
  }

  .xxl\:w-xs {
    width: var(--container-xs);
  }

  .xxl\:w-sm {
    width: var(--container-sm);
  }

  .xxl\:w-md {
    width: var(--container-md);
  }

  .xxl\:w-lg {
    width: var(--container-lg);
  }

  .xxl\:w-xl {
    width: var(--container-xl);
  }

  .xxl\:w-2xl {
    width: var(--container-2xl);
  }

  .xxl\:w-3xl {
    width: var(--container-3xl);
  }

  .xxl\:w-4xl {
    width: var(--container-4xl);
  }

  .xxl\:w-5xl {
    width: var(--container-5xl);
  }

  .xxl\:w-6xl {
    width: var(--container-6xl);
  }

  .xxl\:w-7xl {
    width: var(--container-7xl);
  }

  .xxl\:w-px {
    width: 1px;
  }

  .xxl\:w-screen {
    width: 100vw;
  }

  .xxl\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .xxl\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .xxl\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 120rem) {
  .\33xl\:w-3xs {
    width: var(--container-3xs);
  }

  .\33xl\:w-2xs {
    width: var(--container-2xs);
  }

  .\33xl\:w-xs {
    width: var(--container-xs);
  }

  .\33xl\:w-sm {
    width: var(--container-sm);
  }

  .\33xl\:w-md {
    width: var(--container-md);
  }

  .\33xl\:w-lg {
    width: var(--container-lg);
  }

  .\33xl\:w-xl {
    width: var(--container-xl);
  }

  .\33xl\:w-2xl {
    width: var(--container-2xl);
  }

  .\33xl\:w-3xl {
    width: var(--container-3xl);
  }

  .\33xl\:w-4xl {
    width: var(--container-4xl);
  }

  .\33xl\:w-5xl {
    width: var(--container-5xl);
  }

  .\33xl\:w-6xl {
    width: var(--container-6xl);
  }

  .\33xl\:w-7xl {
    width: var(--container-7xl);
  }

  .\33xl\:w-px {
    width: 1px;
  }

  .\33xl\:w-screen {
    width: 100vw;
  }

  .\33xl\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .\33xl\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .\33xl\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
/* Visibility utilities */
/* Display utilities - Base */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.contents {
  display: contents;
}
.list-item {
  display: list-item;
}
.hidden {
  display: none;
}
.hidden\! {
  display: none !important;
}
.text-nowrap {
  white-space: nowrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
/* Flex direction utilities - Base */
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
/* Responsive flex direction utilities - Extra Small */
@media (width >= 30rem) {
  .xs\:flex-row {
    flex-direction: row;
  }

  .xs\:flex-col {
    flex-direction: column;
  }

  .xs\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive flex direction utilities - Small */
@media (width >= 40rem) {
  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive flex direction utilities - Medium */
@media (width >= 48rem) {
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

}
/* Responsive flex direction utilities - Large */
@media (width >= 64rem) {
  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive flex direction utilities - Extra Large */
@media (width >= 80rem) {
  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:flex-col {
    flex-direction: column;
  }

  .xl\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive flex direction utilities - Extra Extra Large */
@media (width >= 96rem) {
  .xxl\:flex-row {
    flex-direction: row;
  }

  .xxl\:flex-col {
    flex-direction: column;
  }

  .xxl\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive flex direction utilities - 3XL */
@media (width >= 120rem) {
  .\33xl\:flex-row {
    flex-direction: row;
  }

  .\33xl\:flex-col {
    flex-direction: column;
  }

  .\33xl\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive display utilities - Extra Small */
@media (width >= 30rem) {
  .xs\:block {
    display: block;
  }

  .xs\:inline-block {
    display: inline-block;
  }

  .xs\:inline {
    display: inline;
  }

  .xs\:flex {
    display: flex;
  }

  .xs\:inline-flex {
    display: inline-flex;
  }

  .xs\:grid {
    display: grid;
  }

  .xs\:inline-grid {
    display: inline-grid;
  }

  .xs\:contents {
    display: contents;
  }

  .xs\:list-item {
    display: list-item;
  }

  .xs\:hidden {
    display: none;
  }

  .xs\:table {
    display: table;
  }

  .xs\:table-caption {
    display: table-caption;
  }

  .xs\:table-cell {
    display: table-cell;
  }

  .xs\:table-column {
    display: table-column;
  }

  .xs\:table-column-group {
    display: table-column-group;
  }

  .xs\:table-footer-group {
    display: table-footer-group;
  }

  .xs\:table-header-group {
    display: table-header-group;
  }

  .xs\:table-row-group {
    display: table-row-group;
  }

  .xs\:table-row {
    display: table-row;
  }

  .xs\:flow-root {
    display: flow-root;
  }
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-column {
  display: table-column;
}
.table-column-group {
  display: table-column-group;
}
.table-footer-group {
  display: table-footer-group;
}
.table-header-group {
  display: table-header-group;
}
.table-row-group {
  display: table-row-group;
}
.table-row {
  display: table-row;
}
.flow-root { /* never use a clearfix again... */
  display: flow-root;
}
.tiny-spacing {
  gap: var(--tiny-spacing);
}
.spacing {
  gap: var(--spacing);
}
.big-spacing {
  gap: var(--big-spacing);
}
.huge-spacing {
  gap: var(--huge-spacing);
}
.mega-spacing {
  gap: var(--mega-spacing);
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
/* Responsive display utilities - Small */
@media (width >= 40rem) {
  .sm\:block {
    display: block;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:inline-grid {
    display: inline-grid;
  }

  .sm\:contents {
    display: contents;
  }

  .sm\:list-item {
    display: list-item;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:table {
    display: table;
  }

  .sm\:table-caption {
    display: table-caption;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:table-column {
    display: table-column;
  }

  .sm\:table-column-group {
    display: table-column-group;
  }

  .sm\:table-footer-group {
    display: table-footer-group;
  }

  .sm\:table-header-group {
    display: table-header-group;
  }

  .sm\:table-row-group {
    display: table-row-group;
  }

  .sm\:table-row {
    display: table-row;
  }

  .sm\:flow-root {
    display: flow-root;
  }
}
/* Responsive display utilities - Medium */
@media (width >= 48rem) {
  .md\:block {
    display: block;
  }

  .md\:inline-block {
    display: inline-block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:inline-grid {
    display: inline-grid;
  }

  .md\:contents {
    display: contents;
  }

  .md\:list-item {
    display: list-item;
  }

  .md\:hidden {
    display: none;
  }

  .md\:table {
    display: table;
  }

  .md\:table-caption {
    display: table-caption;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:table-column {
    display: table-column;
  }

  .md\:table-column-group {
    display: table-column-group;
  }

  .md\:table-footer-group {
    display: table-footer-group;
  }

  .md\:table-header-group {
    display: table-header-group;
  }

  .md\:table-row-group {
    display: table-row-group;
  }

  .md\:table-row {
    display: table-row;
  }

  .md\:flow-root {
    display: flow-root;
  }
}
/* Responsive display utilities - Large */
@media (width >= 64rem) {
  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:inline-grid {
    display: inline-grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:list-item {
    display: list-item;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:table {
    display: table;
  }

  .lg\:table-caption {
    display: table-caption;
  }

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:table-column {
    display: table-column;
  }

  .lg\:table-column-group {
    display: table-column-group;
  }

  .lg\:table-footer-group {
    display: table-footer-group;
  }

  .lg\:table-header-group {
    display: table-header-group;
  }

  .lg\:table-row-group {
    display: table-row-group;
  }

  .lg\:table-row {
    display: table-row;
  }

  .lg\:flow-root {
    display: flow-root;
  }
}
/* Responsive display utilities - Extra Large */
@media (width >= 80rem) {
  .xl\:block {
    display: block;
  }

  .xl\:inline-block {
    display: inline-block;
  }

  .xl\:inline {
    display: inline;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:inline-flex {
    display: inline-flex;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:inline-grid {
    display: inline-grid;
  }

  .xl\:contents {
    display: contents;
  }

  .xl\:list-item {
    display: list-item;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:table {
    display: table;
  }

  .xl\:table-caption {
    display: table-caption;
  }

  .xl\:table-cell {
    display: table-cell;
  }

  .xl\:table-column {
    display: table-column;
  }

  .xl\:table-column-group {
    display: table-column-group;
  }

  .xl\:table-footer-group {
    display: table-footer-group;
  }

  .xl\:table-header-group {
    display: table-header-group;
  }

  .xl\:table-row-group {
    display: table-row-group;
  }

  .xl\:table-row {
    display: table-row;
  }

  .xl\:flow-root {
    display: flow-root;
  }
}
/* Responsive display utilities - Extra Extra Large */
@media (width >= 96rem) {
  .xxl\:block {
    display: block;
  }

  .xxl\:inline-block {
    display: inline-block;
  }

  .xxl\:inline {
    display: inline;
  }

  .xxl\:flex {
    display: flex;
  }

  .xxl\:inline-flex {
    display: inline-flex;
  }

  .xxl\:grid {
    display: grid;
  }

  .xxl\:inline-grid {
    display: inline-grid;
  }

  .xxl\:contents {
    display: contents;
  }

  .xxl\:list-item {
    display: list-item;
  }

  .xxl\:hidden {
    display: none;
  }

  .xxl\:table {
    display: table;
  }

  .xxl\:table-caption {
    display: table-caption;
  }

  .xxl\:table-cell {
    display: table-cell;
  }

  .xxl\:table-column {
    display: table-column;
  }

  .xxl\:table-column-group {
    display: table-column-group;
  }

  .xxl\:table-footer-group {
    display: table-footer-group;
  }

  .xxl\:table-header-group {
    display: table-header-group;
  }

  .xxl\:table-row-group {
    display: table-row-group;
  }

  .xxl\:table-row {
    display: table-row;
  }

  .xxl\:flow-root {
    display: flow-root;
  }
}
/* Responsive display utilities - 3XL */
@media (width >= 120rem) {
  .\33xl\:block {
    display: block;
  }

  .\33xl\:inline-block {
    display: inline-block;
  }

  .\33xl\:inline {
    display: inline;
  }

  .\33xl\:flex {
    display: flex;
  }

  .\33xl\:inline-flex {
    display: inline-flex;
  }

  .\33xl\:grid {
    display: grid;
  }

  .\33xl\:inline-grid {
    display: inline-grid;
  }

  .\33xl\:contents {
    display: contents;
  }

  .\33xl\:list-item {
    display: list-item;
  }

  .\33xl\:hidden {
    display: none;
  }

  .\33xl\:table {
    display: table;
  }

  .\33xl\:table-caption {
    display: table-caption;
  }

  .\33xl\:table-cell {
    display: table-cell;
  }

  .\33xl\:table-column {
    display: table-column;
  }

  .\33xl\:table-column-group {
    display: table-column-group;
  }

  .\33xl\:table-footer-group {
    display: table-footer-group;
  }

  .\33xl\:table-header-group {
    display: table-header-group;
  }

  .\33xl\:table-row-group {
    display: table-row-group;
  }

  .\33xl\:table-row {
    display: table-row;
  }

  .\33xl\:flow-root {
    display: flow-root;
  }
}
/* Visibility helpers - Show/Hide at specific breakpoints */
.sm-only {
  @media (width >= 40rem) {
    display: none;
  }
}
.md-only {
  @media (width < 40rem),(width >= 48rem) {
    display: none;
  }
}
.lg-only {
  @media (width < 48rem),(width >= 64rem) {
    display: none;
  }
}
.xl-only {
  @media (width < 64rem),(width >= 80rem) {
    display: none;
  }
}
.xxl-only {
  @media (width < 80rem) {
    display: none;
  }
}
/* Hide below specific breakpoints */
.hide-below-sm {
  @media (width < 40rem) {
    display: none;
  }
}
.hide-below-md {
  @media (width < 48rem) {
    display: none;
  }
}
.hide-below-lg {
  @media (width < 64rem) {
    display: none;
  }
}
.hide-below-xl {
  @media (width < 80rem) {
    display: none;
  }
}
.hide-below-xxl {
  @media (width < 96rem) {
    display: none;
  }
}
/* Hide above specific breakpoints */
.hide-above-sm {
  @media (width >= 40rem) {
    display: none;
  }
}
.hide-above-md {
  @media (width >= 48rem) {
    display: none;
  }
}
.hide-above-lg {
  @media (width >= 64rem) {
    display: none;
  }
}
.hide-above-xl {
  @media (width >= 80rem) {
    display: none;
  }
}
.hide-above-xxl {
  @media (width >= 96rem) {
    display: none;
  }
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.top-0 {
  top: 0;
}
.top-below-header {
  top: var(--below-header);
}
.bg-white {
  background-color: var(--white);
}
/* Utility for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
/* Float utilities - Tailwind style */
/* Base float utilities */
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-none {
  float: none;
}
/* xs breakpoint (≥480px) */
@media (width >= 30rem) {
  .xs\:float-left {
    float: left;
  }

  .xs\:float-right {
    float: right;
  }

  .xs\:float-none {
    float: none;
  }
}
/* sm breakpoint (≥640px) */
@media (width >= 40rem) {
  .sm\:float-left {
    float: left;
  }

  .sm\:float-right {
    float: right;
  }

  .sm\:float-none {
    float: none;
  }
}
/* md breakpoint (≥768px) */
@media (width >= 48rem) {
  .md\:float-left {
    float: left;
  }

  .md\:float-right {
    float: right;
  }

  .md\:float-none {
    float: none;
  }
}
/* lg breakpoint (≥1024px) */
@media (width >= 64rem) {
  .lg\:float-left {
    float: left;
  }

  .lg\:float-right {
    float: right;
  }

  .lg\:float-none {
    float: none;
  }
}
/* xl breakpoint (≥1280px) */
@media (width >= 80rem) {
  .xl\:float-left {
    float: left;
  }

  .xl\:float-right {
    float: right;
  }

  .xl\:float-none {
    float: none;
  }
}
/* xxl breakpoint (≥1536px) */
@media (width >= 96rem) {
  .xxl\:float-left {
    float: left;
  }

  .xxl\:float-right {
    float: right;
  }

  .xxl\:float-none {
    float: none;
  }
}
/* 3xl breakpoint (≥1920px) */
@media (width >= 120rem) {
  .\33xl\:float-left {
    float: left;
  }

  .\33xl\:float-right {
    float: right;
  }

  .\33xl\:float-none {
    float: none;
  }
}
:root {
  font-family: var(--brand-regular-typeface), sans-serif;
  font-size: var(--root-size);
  color: var(--text-color);
}
body {
  font-size: var(--font-size);
}
h1, h2, h3 {
  font-family: var(--heading-typeface), sans-serif;
  color: var(--heading-color);
}
h4, h5, h6 {
  font-family: var(--brand-typeface), sans-serif;
  color: var(--heading-color);
}
h5, h6 {
  font-size: var(--text-copy-s);
  font-weight: 300;
}
h1 {
  font-size: var(--text-title-size);
}
h2 {
  font-size: var(--text-heading-size);
}
h3 {
  font-size: var(--text-subheading-size);
}
h4 {
  font-size: var(--root-size);
  font-weight: 700;
}
/* Heading classes - allows styling as a heading while using semantic tags */
.h1, .h2, .h3 {
  font-family: var(--heading-typeface), sans-serif;
  color: var(--heading-color);
}
.h4, .h5, .h6 {
  font-family: var(--brand-typeface), sans-serif;
  color: var(--heading-color);
}
.h5, .h6 {
  font-size: var(--text-copy-s);
  font-weight: 300;
}
.h1 {
  font-size: var(--text-title-size);
}
.h2 {
  font-size: var(--text-heading-size);
}
.h3 {
  font-size: var(--text-subheading-size);
}
.h4 {
  font-size: var(--root-size);
  font-weight: 700;
}
p {
  color: var(--text-color);
}
.font-regular {
  font-weight: 400;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
/* Color utility classes */
.text-dark-blue {
  color: var(--dark-blue);
}
.text-orange {
  color: var(--orange);
}
.text-green {
  color: var(--green);
}
.text-white {
  color: var(--white);
}
.text-grey {
  color: var(--grey);
}
.text-subtle-grey {
  color: var(--subtle-grey);
}
.text-black {
  color: var(--black);
}
.text-brown {
  color: var(--brown);
}
.text-brand {
  color: var(--brand-color);
}
.text-blue {
  color: var(--blue);
}
.text-brand-mid {
  color: var(--brand-color-mid);
}
.text-brand-light {
  color: var(--brand-color-light);
}
.text-brand-faint {
  color: var(--brand-color-faint);
}
.text-regular {
  color: var(--text-color);
}
.text-light {
  color: var(--text-color-light);
}
.text-faint {
  color: var(--text-color-faint);
}
nav ul.ticks_list {
  font-size: var(--text-copy-xs);
  color: var(--text-color-faint);
}
section#hero {
  --heading-color: var(--white);
  --text-color: var(--white);

  & .hero_title {
    font-family: var(--brand-bold-typeface), system-ui, sans-serif;
    line-height: 125%;

    & strong {
      line-height: 125%;
      font-weight: 700;
      font-size: var(--text-hero-size);
    }
  }

  & > .button.cta {
    font-size: var(--text-subheading-size);
  }
}
.page_subtitle {
  color: var(--blue);
  font-weight: 300;
  font-size: var(--text-subheading-size);
  margin-bottom: var(--tiny-spacing);
}
.page_title {
  font-weight: 700;
  font-size: var(--text-coursename-size);
}
#footer_nav {
  --heading-color: var(--white);
  --text-color: var(--white);

  color: var(--text-color);

  & h3 {
    font-weight: 300;
  }

  & h5 {
    font-weight: 700;
    font-size: var(--text-copy-l);
  }

  & li {
    font-size: var(--text-copy-s);
    padding-block: 0.25rem;
  }
}
#signoff {
  color: var(--brand-color);
  font-size: var(--text-copy-xs);

  & #signoff_links span {
    color: var(--text-color-light);
  }
}
#reviews {
  font-size: var(--text-copy-xxs);

  & > p:nth-of-type(2) {
    color: var(--text-color-light);
  }
}
#menu_drawer h4 {
  color: var(--text-color);
}
/* Typography for content */
.typography {

  .smaller {
    font-size: calc(var(--root-size) * 0.9);
  }

  p:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  ul:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  ol:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  h2:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  h3:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  h4:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  h5:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  h6:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6) {
    margin-bottom: var(--root-size);

    &.smaller {
      margin-bottom: calc(var(--root-size) * 0.5);
    }
  }

  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem;
  }

  p, ul, li {
    a:not(.button):not(.cta) {
      color: var(--brand-color);
    }
  }

  ul {
    list-style-type: disc;
  }

  ol, ul {
    /* ticks_list defined in components.css */
    list-style-position: outside;
    padding-left: 16px;
    line-height: var(--line-height);

    li {
      padding-left: var(--text-copy-xxs);

      + li {
        margin-top: var(--tiny-spacing);
      }
    }
  }

  .left {
    float: left;
    margin: 0 1em 1em 0;
  }

  .right {
    float: right;
    margin: 0 0 1em 1em;
  }

  .center {
    display: block;
    margin: 0 auto 0 auto;
    text-align: center;
  }

  .leftAlone {
    float: left;
    margin-right: 100%;
  }

  .rightAlone {
    float: right;
    margin-left: 100%;
  }

  img {
    -o-object-fit: contain;
       object-fit: contain;
    height: auto;

    &.w-\[50px\] {
      width: 50px;
    }

    &.w-\[75px\] {
      width: 75px;
    }

    &.w-\[100px\] {
      width: 100px;
    }

    &.w-\[150px\] {
      width: 150px;
    }

    &.w-\[200px\] {
      width: 200px;
    }

    &.w-\[250px\] {
      width: 250px;
    }

    &.w-\[300px\] {
      width: 300px;
    }

    &.w-full {
      width: 100%;
    }

    &.w-half {
      width: 50%;
    }

    &.w-one_third {
      width: 33%;
    }

    &.w-two_thirds {
      width: 66%;
    }

    &.w-one_fourth {
      width: 25%;
    }

    &.w-two_fourths {
      width: 50%;
    }

    &.w-three_fourths {
      width: 75%;
    }

    &.w-one_fifth {
      width: 20%;
    }

    &.w-two_fifths {
      width: 40%;
    }

    &.w-three_fifths {
      width: 60%;
    }

    &.w-four_fifths {
      width: 80%;
    }

  }

}
/* / Typography for content */
/*
* Generic HTML tag styling first
*/
/* Hyperlinks */
a {
  --chevron-color: var(--brand-color);
  --cta-color: var(--cta-blue);

  padding-block: 0.2rem;
  color: currentcolor;
  text-decoration: none;

  &:visited {
    color: currentcolor;
  }

  &:hover {
    color: var(--brand-color);
  }

  &.classic {
    color: var(--brand-color);
  }

  &.underline {
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }

  &.monotone {
    --chevron-color: currentcolor;

    &:hover {
      color: currentcolor;
      text-decoration: underline;
    }
  }

  &.chevron::before,
  &.action_teaser p::after {
    content: "⟩";
    margin-inline: var(--text-copy-xxs);
    font-weight: 900;
    color: var(--chevron-color);
  }

  &.fallback_link:not(:hover) {
    text-decoration: underline;
  }

  &.action_teaser {
    --chevron-color: var(--cta-orange);

    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: var(--text-title-size) auto;
    -moz-column-gap: var(--text-copy-m);
         column-gap: var(--text-copy-m);
    position: relative;
    max-width: 100%;
    padding: var(--text-copy-xxs);
    overflow: hidden;
    background: oklch(from var(--subtle-grey) l c h / 7.5%);

    & h5 {
      grid-column: 1 / -1;
      grid-row: 1 / 2;
      color: var(--cta-orange);
      font-weight: 700;
    }

    & p {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }

    & img {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }

    &:not(:has(h5)) :is(p, img) {
      grid-row: 1 / -1;
    }

    &:not(:has(img)) p {
      grid-column: 1 / -1;
    }
  }

  &.with_chevron_dot {
    display: flex;
    align-items: center;
    position: relative;
    gap: var(--text-copy-xxs);

    &::before {
      content: '⟩';
      width: var(--text-copy-l);
      height: var(--text-copy-l);
      font-size: var(--text-copy-xs);
      font-weight: 900;
      color: var(--brand-color);
      background: var(--brand-color-light);
      border-radius: 999px;
      display: grid;
      place-items: center;
    }
  }

  &.small {
    font-size: var(--text-copy-s);
  }
}
:is(.button, .cta, button:not(.regular), input[type="submit"]) {

  &:is(a.button, .cta) {
    display: inline-grid;
  }
  &.green {
    --cta-color: var(--cta-green);
  }
  &.blue {
    --cta-color: var(--cta-blue);
  }
  &.white {
    --cta-color: var(--cta-white);
  }
  &.orange {
    --cta-color: var(--cta-orange);
  }

  &:not(.react-international-phone-country-selector-button) {
    --button-shadow-color: oklch(from var(--brand-color) 50% c h / 100%);
    --button-pressed-color: oklch(from var(--brand-color) 60% c h / 100%);

    place-items: center;
    border-radius: var(--corner-size-small);
    background: var(--brand-color);
    color: var(--grey);
    text-decoration: none;
    transition: var(--quick-transition);
  }

  min-height: var(--form-element-size);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 8px 15px 8px 15px;

  &:not(:is(.ghost, .cta, .secondary, .square, .round)) {
    font-weight: 700;
    font-size: var(--text-copy-l);
    box-shadow: 0 calc(0px - var(--corner-size-small)) var(--button-shadow-color) inset;

    &:hover:not(.react-international-phone-country-selector-button) {
      background-color: var(--button-pressed-color);
      color: var(--grey);
      transform: translateY(2px);
      box-shadow: 0 -1px var(--text-color) inset;
    }
  }

  &.secondary {
    place-items: unset;
    align-items: center;
    justify-content: space-between;
    gap: var(--root-size);
    padding: calc(var(--root-size) * 0.5);
    position: relative;
    background: var(--brand-color-light);
    border: 1px solid var(--brand-color-mid);
    color: var(--brand-color);
    font-size: var(--text-copy-s);
    box-shadow: none;
    font-family: Roboto, Arial, system-ui, sans-serif;
    text-align: left;
    font-weight: 700;

    &.center {
      justify-content: center;
    }

    & > span {
      flex: 1;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &::after {
      width: 20px;
      height: 20px;
      right: 2px;
      top: 0.65em;
    }

    &.faint {
      background: var(--brand-color-faint);
    }
  }

  &.cta {
    padding-bottom: calc(var(--root-size) * .5);
    background: var(--cta-color);
    font-size: var(--text-copy-m);
    min-width: calc(var(--root-size) * 2.5);

    &::after {
      width: 22px;
      height: 22px;
      right: 8px;
    }

    &.full {
      width: 100%;
      justify-content: center;
    }
  }

  &.ghost {
    --ghost-button-padding: calc(var(--root-size) * 0.5);

    min-height: unset;
    padding: var(--ghost-button-padding);
    border: 1px solid var(--brand-color-light);
    background: transparent;
    color: var(--brand-color-mid);
    font-size: var(--text-copy-xxs);
    font-weight: unset;
    box-shadow: none;
    transition: all 0.4s ease-in-out;

    &:hover {
      background: oklch(100% 0 0deg);
      transform: none;
      border-color: var(--brand-color);
    }

    &.large {
      padding-inline: var(--root-size);
      background: oklch(100% 0 0deg);
      font-size: var(--text-copy-s);
    }
  }

  &.white {
    background: var(--cta-white); /* already defined above as --cta-color */
    color: var(--dark-blue);
    border: 1px solid var(--subtle-grey);
    box-shadow: var(--faint-shadow);

    &:hover {
      background: var(--brand-color-light);
      border-color: var(--brand-color);
      color: var(--dark-blue);
      transform: none;
    }
  }

  &.big {
    font-family: var(--heading-typeface);
    font-size: var(--text-hero-size);
  }

  &.shadow {
    border: 0;
    box-shadow: 0 -3px rgba(0, 0, 0, .25) inset;

    &:hover {
      box-shadow: 0 -1px rgba(0, 0, 0, .25) inset;
      margin-top: 2px;
    }
  }
}
button:has( > [data-show-on="active"]) {
  [data-show-on="active"] {
    display: none;
  }

  [data-hide-on="active"] {
    display: inline-flex;
  }

  &.active {
    [data-show-on="active"] {
      display: inline-flex;
    }

    [data-hide-on="active"] {
      display: none;
    }
  }
}
button, input[type="submit"], a.button {
  &.square {
    text-align: center;
    place-items: center;
    min-width: var(--form-element-size);
    border: 1px solid var(--grey);
    border-radius: var(--corner-size-small);
    /*padding-inline: var(--text-copy-xs);*/
    background: transparent;
    color: var(--text-color-light);
    font-size: var(--text-copy-s);

    &.classic {
      color: var(--brand-color);
    }

    &.active {
      color: var(--brand-color);
      font-weight: 700;
      border-color: var(--brand-color-light);
    }
  }
}
button, input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  cursor: pointer;

  &.round {
    display: grid;
    place-items: center;
    width: var(--form-element-size);
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--white);
    color: var(--brand-color);
    box-shadow: var(--subtle-shadow);
    transition: scale 0.2s ease-in-out;
    transform-origin: center;

    &:hover {
      scale: 1.05;
    }

    &:active {
      scale: 0.95;
    }
  }

  &[disabled] {
    color: var(--subtle-grey);
  }

  &.fixed-height {
    height: var(--form-element-size);
  }

  &.cta {
    color: var(--white);
    border-radius: var(--corner-size-small);
    box-shadow: 0 3px var(--text-copy-xs) var(--text-color-faint);
    padding-inline: var(--root-size);
    height: var(--form-element-size);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--root-size);
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    white-space: nowrap;

    &.green {
      --cta-color: var(--cta-green);
    }
    &.blue {
      --cta-color: var(--cta-blue);
    }
    &.white {
      --cta-color: var(--cta-white);
    }
    &.orange {
      --cta-color: var(--cta-orange);
    }

    & img {
      width: var(--root-size);
      aspect-ratio: 1;
    }
  }

  &.large {
    padding: var(--root-size);
    height: var(--large-form-element-size);
  }

  &.chevron_left_icon::after {
    width: 22px;
    height: 22px;
    left: 0.5em;
  }

  &.chevron_right_icon::after {
    width: 22px;
    height: 22px;
    right: 0.5em;
  }
}
input:is([type="search"], [type="email"], [type="number"]) {
  min-width: 0;
  min-height: var(--form-element-size);
  padding-inline: var(--text-copy-s);
  border-radius: var(--corner-size-small);
  border: 1px solid var(--subtle-grey);
  font-size: var(--text-copy-s);

  &::-moz-placeholder {
    opacity: 0.6;
  }

  &::placeholder {
    opacity: 0.6;
  }
}
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  min-width: 0;
  height: var(--form-element-size);
  padding-inline: var(--text-copy-s);
  font-size: var(--text-copy-s);
  border-radius: var(--corner-size-small);
  transition: border 300ms;

  &.blue {
    background-color: var(--brand-color);
    color: var(--brand-color-light);
    border: 1px solid var(--brand-color-mid);
  }

  &.small {
    height: auto;
    padding: 4px 8px;
  }

  &.ghost {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-color: var(--grey);
    color: var(--text-color-faint);
    padding-right: var(--form-element-size);
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5' stroke-linecap='round' stroke-linejoin='round' stroke='deepskyblue' stroke-width='2px'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
  }
}
ul, menu {
  list-style-type: none;
  list-style-position: outside;

  &.classic {
    list-style-position: inside;
    list-style-type: disc;
  }

  &.ticks_list {
    list-style-type: "✓";
    padding-left: var(--root-size);

    li {
      padding-left: var(--text-copy-xxs);

      &::marker {
        color: var(--cta-green);
        font-weight: 900;
      }
    }
  }
}
ul.zebra, ul.zebra_columns {
  padding: 0;
  list-style-type: none;

  & li {
    display: block;
    min-height: var(--form-element-size);
    padding: var(--text-copy-xxs) var(--text-copy-s);
    font-size: var(--text-copy-s);
  }

  & > li:is(:nth-of-type(even)) {
    background: var(--grey);
    border-radius: var(--corner-size-small);
  }

}
ul.zebra_columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: var(--form-element-size);
  grid-column-gap: var(--root-size);

  /* Target ever other set of 3 list items */

  & > li:is(:nth-of-type(even)) {
    background: unset;
  }

  & > li:is(:nth-of-type(6n+1), :nth-of-type(6n+2), :nth-of-type(6n+3)) {
    background: var(--grey);
    border-radius: var(--corner-size-small);
  }
}
ul.ecs {
  & .study_programme_phase_header {
    position: relative;

    & .ecs_header {
      position: absolute;
      right: var(--form-element-size);
      top: 50%;
      translate: 0 -50%;
      text-align: right;
      font-size: var(--text-copy-s);
      font-weight: bold;
    }
  }

  & summary {
    position: relative;

    & > span {
      font-size: var(--text-copy-s);
      font-weight: normal;
      max-width: 75%;
      display: inline-block;

    }

    &::after {
      content: attr(data-ecs);
      position: absolute;
      right: var(--form-element-size);
      top: 50%;
      translate: 0 -50%;
      text-align: right;
      display: block;
    }
  }

  & li > h4 {
    font-size: var(--text-copy-s);
    margin-top: 0;
  }
}
.hero_title {
  display: block;
  margin-bottom: var(--text-title-size);
}
.hero_content {
  font-family: var(--brand-light-typeface), system-ui, sans-serif;
  font-size: var(--text-copy-l);
}
& .cta {
  grid-column: 2 / auto;
  grid-row: 4 / 5;
  place-self: start;
  white-space: nowrap;
  font-size: var(--text-subheading-size);
}
.app__elements__elementbuttongrid {
  &:has( + .element), &:has( + .content_block) {
    /* only border-bottom when next element is .element */
    border-bottom: 1px solid oklch(from var(--text-color-light) l c h / 25%);
    padding-bottom: var(--form-element-size);
  }
}
.link_wall {
  gap: var(--text-copy-xs) var(--text-subheading-size);

  .link_wall_item {
  }
}
body #menu_container > #menu_header {
  font-family: var(--brand-medium-typeface), system-ui, sans-serif;
  color: var(--brand-color);
  font-weight: 600;
  font-size: var(--text-copy-s);
  box-shadow: 0 4px 0 0 oklch(0% 0 0deg / 10%);
}
article ul.classic {
  padding-left: 24px;
}
.price_indication {
  font-weight: bold;
  font-family: var(--heading-typeface), system-ui, sans-serif;
  font-size: var(--text-copy-l);

  & span {
    font-size: var(--text-copy-s);
  }

  &.block {
    font-size: var(--text-coursename-size);

    & span {
      font-size: var(--text-copy-s);
      font-weight: normal;
    }

    & small {
      display: block;
      text-align: right;
      font-size: var(--text-copy-xs);
      font-weight: normal;

      &::after {
        content: "🛈";
        color: var(--brand-color);
      }
    }
  }
}
details {
  list-style: none;

  & summary {
    list-style: none;
    position: relative;

    &[class*="with_chevron"]::before {
      content: '⟩';
      position: absolute;
      top: 50%;
      right: 0;
      translate: 0 -50%;
      width: var(--text-title-size);
      height: var(--text-title-size);
      display: grid;
      place-items: center;
      rotate: -270deg;
      font-weight: 900;
      transition: rotate 0.2s ease-out;
    }

    &.with_chevron_dot::before {
      background: var(--brand-color-light);
      border-radius: 999px;
      color: var(--brand-color);
    }

    &::-webkit-details-marker,
    &::marker {
      display: none;
    }
  }

  &[open] > summary[class*="with_chevron"]::before {
    transform: rotate(180deg);
    color: var(--brand-color);
  }
}
fieldset {
  display: grid;
  grid-template-columns: var(--text-subheading-size) 1fr;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  grid-row-gap: var(--text-copy-xxs);
  padding-bottom: var(--root-size);
  border: none;

  &:not(form.userform fieldset):not(:last-of-type) {
    border-bottom: 1px solid var(--grey);
  }

  & legend {
    margin-block: var(--root-size);

    & h4 {
      grid-column: 1 / -1;
      grid-row: 1 / 2;
      display: flex;
      align-items: center;
      gap: var(--text-copy-xxs);
      width: 100%;
      font-size: var(--text-copy-s);
      font-weight: 700;

      &::after {
        content: url("../img/info.svg");
        display: inline-block;
        width: var(--root-size);
        aspect-ratio: 1;
      }
    }
  }

  & > label {
    grid-column: 1 / 3;
    grid-row: auto / span 1;
    display: flex;
    align-items: center;
    gap: var(--text-copy-xxs);
    justify-content: flex-start;
    position: relative;
    justify-self: flex-start;
    width: 100%;
    font-size: var(--text-copy-s);

    & span {
      display: block;
      position: relative;
      flex: 1;

      &::after {
        content: attr(data-count);
        display: grid;
        place-items: center;
        width: var(--root-size);
        aspect-ratio: 1;
        background: var(--brand-color-light);
        border-radius: var(--corner-size-large);
        font-size: var(--text-copy-xxs);
        color: var(--brand-color);
        font-weight: 700;
        position: absolute;
        right: 0;
        top: 50%;
        translate: 0 -50%;
      }
    }
  }

  & > div.span_grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto var(--form-element-size) auto;
    grid-template-rows: 1fr 1fr;
    gap: var(--text-title-size) var(--root-size);
    position: relative;

    & > :is(input, span) {
      grid-column: auto / span 1;
      grid-row: 1 / 2;
    }

    & > input[type="number"] {
      padding-left: var(--text-heading-size);
    }

    & > span {
      display: flex;
      align-items: center;
      color: var(--text-color-light);

      &::before, &::after {
        content: "€";
      }

      &::before {
        position: absolute;
        left: var(--text-copy-xxs);
      }

      &::after {
        position: relative;
        left: calc(100% + var(--text-copy-xxs));
      }
    }

    & > tc-range-slider {
      grid-row: 2 / 3;
      grid-column: 1 / -1;
      padding-inline: var(--root-size);
    }
  }

  & :is(div, li):has( > input[type="radio"]) {
    grid-column: 1 / -1;
    /*height: var(--form-element-size);*/
    border-radius: var(--corner-size-small);
    border: 1px solid var(--brand-color-mid);
    background: var(--brand-color-faint);
    padding-left: var(--text-copy-xs);
    display: flex;
    align-items: center;
    gap: var(--text-copy-xxs);
    font-size: var(--text-copy-s);

    &:not(.use-utility-width) {
      width: -webkit-min-content;
      width: -moz-min-content;
      width: min-content;
    }

    > label {
      padding-top: var(--text-copy-xxs);
      padding-bottom: var(--text-copy-xxs);
      padding-right: var(--root-size) !important;
    }
  }
}
small.incentive {
  color: var(--cta-green);
  font-size: var(--text-copy-xs);
  padding: 4px 6px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
/* -------------------------
  Then the "components"
------------------------- */
#crumbtrail {
  display: flex;
  gap: var(--text-copy-xxs);
  align-items: center;
  font-size: var(--text-copy-xs);
  color: var(--text-color-faint);
  overflow: hidden;

  & a, & span {
    --chevron-color: currentcolor;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:hover {
      color: currentcolor;
      text-decoration: underline;
    }

    &:not(:has(img#home)) {
      position: relative;
      padding-left: var(--root-size);

      &::before {
        content: "";
        -webkit-mask: url(../img/icons/chevron-right.svg) no-repeat 50% 50%;
                mask: url(../img/icons/chevron-right.svg) no-repeat 50% 50%;
        -webkit-mask-size: cover;
                mask-size: cover;
        background-color: var(--brand-color);
        width: 17px;
        height: 17px;
        left: -6px;
        white-space: nowrap;
        position: absolute;
      }
    }
  }
}
div.element, div.content_block {
  position: relative;

  & > h2, > h3, .content_card_block_title {
    /*--heading-color: var(--text-color);*/
    color: var(--heading-color);
    margin-bottom: var(--root-size);
  }

  & > h3 {
    --heading-color: var(--text-color);
  }

  & > img {
    width: 100%;

    /*
    Enabling this rule caused a grid  blowout on Safari.
    Let's keep it around to see if we run into other issues without it
    height: 100%;
    */

    -o-object-fit: cover;

       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    overflow: hidden;
    max-width: 100%;

  }

  /*
  & > .content_block_inner {
    & > * {
      margin-bottom: var(--root-size);
    }
  }
  */

  &.backdrop {
    padding: calc(var(--root-size) * 2);
    border-radius: var(--corner-size-large);
    background-color: var(--brand-color-light);

    &.surface {
      background-color: var(--surface-light);
    }
  }

  &:first-of-type {
    border-top: none;
  }

  .breakout {
    display: grid;

    /*grid-auto-flow: column;*/
    grid-template-rows: auto;
    grid-template-columns: -webkit-min-content;
    grid-template-columns: min-content;
    grid-auto-columns: -webkit-min-content;
    grid-auto-columns: min-content;
    /*width: fit-content;*/
    grid-column-gap: var(--col-gap);
    padding-right: var(--root-size);

    &[class*="cols"] > * {
      grid-column: auto / span 1;
    }

    &[data-mobile-grid-row="3"] {
      @media (40rem <= width < 48rem) {
        grid-template-rows: repeat(3, auto);
        -moz-column-gap: var(--col-gap);
             column-gap: var(--col-gap);
      }
    }

    &[class*='-cardrow'] {
      -moz-column-gap: var(--col-gap);
           column-gap: var(--col-gap);
      grid-template-rows: 1fr auto;

      > * {
        width: 240px;
      }
    }
  }
}
div.element_cards,
div.element_button_grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: var(--text-title-size) auto;
  grid-auto-flow: row;
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
  row-gap: 0;

  @media (width >= 48rem) {
    row-gap: 7px;
  }
}
div.subgrid,
div.element_cards,
div.element_button_grid {
  > .element_intro {
    grid-column: 1 / -1;
    grid-row: 1 / -1;

    + .row {
      grid-row: 3 / -1;
    }
  }

  .row:first-child {
    /* without the intro, the first row needs to span the entire block */
    grid-row: 1 / -1;
  }
}
div.element_content_card {
  .element_intro {
    /* not part of the grid, add custom padding to align gutter with the grid */
    padding-inline: var(--gutter);
  }

  div.content_card_blocks {
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    gap: 0; /* in vertical mode, we want no gap */

    @media (width >= 48rem) {
      gap: var(--col-gap);
    }

    div.content_card_block {
      flex: 1 1 100%;

      &.one_third {
        @media (width >= 48rem) {
          flex: 1 1 calc(33.333% - var(--col-gap));
        }
      }

      &.two_thirds {
        @media (width >= 48rem) {
          flex: 2 1 calc(66.666% - var(--col-gap));
        }
      }

      &.half {
        flex: 1 1 100%;

        @media (width >= 48rem) {
          flex: 1 1 calc(50% - var(--col-gap));
        }
      }

      &.one_fourth {
        flex: 1 1 100%;

        @media (width >= 48rem) {
          flex: 1 1 calc(25% - var(--col-gap));
        }
      }

      &.three_fourth {
        flex: 1 1 100%;

        @media (width >= 48rem) {
          flex: 3 1 calc(75% - var(--col-gap));
        }
      }
    }
  }
}
.element_intro {

  .element_title {
    position: relative;

    > h2, > h3 {
      display: block;
      color: var(--heading-color);
      margin-bottom: var(--root-size);
    }

    > h2 {
      --heading-color: var(--brand-color);
    }

    > h3 {
      --heading-color: var(--text-color);
    }

    > .absolute_right {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .intro_line {
    grid-column: 1 / -1;
    margin-bottom: var(--root-size);
  }

}
.product_teaser_blocks {
  display: flex;
  gap: var(--col-gap);
}
.container--grid div.element, .container--grid div.content_block {

  /* Outer title with option intro */

  & > img {
    grid-column: 1 / span 6;
    grid-row: 2 / 3;
    width: 100%;

    /*
    Enabling this rule caused a grid  blowout on Safari.
    Let's keep it around to see if we run into other issues without it
    height: 100%;
    */

    -o-object-fit: cover;

       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    overflow: hidden;
    max-width: 100%;

  }

  & > :is(article) {
    grid-column: 7 / -1;
    grid-row: auto / span 2;

    &:has(.content_block.nested),
    &.fullwidth.subgrid {
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: auto;

      & > *:not([class*="subgrid"] ) {
        grid-column: 1 / -1;
        margin-block: var(--root-size);
      }
    }

    &.fullwidth.minwidth {
      min-width: 100%;
    }
  }

  & article > h3 ~ a {
    position: absolute;
    top: var(--text-title-size);
    right: var(--text-title-size);
    font-size: var(--text-copy-s);
  }

  &.nested {
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
  }

  &.backdrop {
    padding: calc(var(--root-size) * 2);
    border-radius: var(--corner-size-large);
    background-color: var(--brand-color-light);

    &.surface {
      background-color: var(--surface-light);
    }

  }

  &:nth-of-type(odd) {
    & > h2 {
      grid-column: 1 / -2;
    }

    & > img {
      grid-column: 11 / -1;
      grid-row: 2 / -1;
    }

    & > :is(article) {
      grid-column: 1 / span 13;
      grid-row: 2 / -1;

      &:not(.fullwidth) {
        padding-right: var(--menu-height);
      }
    }
  }

  &:first-of-type {
    border-top: none;

    & > img {
      grid-row: 2 / -1;
      grid-column: 11 / -1;
    }
  }

  &:is(:nth-of-type(even),
  :not(.blog_post_summary),
  :nth-of-type(odd)):not(:has( > img)) > :not(.course_blurb) {
    grid-column: 1 / -1;
  }

  &:has(.content_card_block) {
    grid-template-rows: auto;
  }

  &.backdrop > a {
    top: var(--text-copy-l);
    right: var(--text-title-size);
  }
}
.container--grid div.additional_content {
  grid-column: 2 / -2;
  display: grid;
  grid-auto-flow: row;
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
}
div.element article:has(ul.zebra_columns),
div.content_block article:has(ul.zebra_columns) {
  grid-column: 1 / -1;
  padding: 0;
}
div.element:has(article ul.link_wall),
div.content_block:has(article ul.link_wall) {
  --heading-color: var(--text-color);
}
div.contactbar {
  grid-column: 2 / -2;
  background: var(--brand-color);
  border-radius: var(--corner-size-medium);
  height: var(--large-form-element-size);
  display: flex;
  color: var(--white);
  font-size: var(--text-copy-s);

  & > img {
    height: 150%;
    scale: -1 1;
    position: relative;
    top: -50%;
  }

  & ul {
    flex: 1;
    display: flex;
    align-items: center;

    & li {
      flex: 1;

      & a {
        display: flex;
        gap: var(--text-copy-xxs);
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-size: var(--text-copy-xs);
      }

      &:first-child {
        font-weight: 900;
      }
    }
  }
}
.serp_course_details {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  font-size: var(--text-copy-xs);
  color: var(--text-color-light);

  & li {
    display: block;
    padding-right: var(--tiny-spacing);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    + li {
      padding-left: var(--tiny-spacing);
    }

    &:not(:last-of-type) {
      border-right: 1px solid var(--brand-color-mid);
    }
  }
}
/* -------------------------------------------- */
div.header_search_section {
  font-size: var(--text-copy-s);
  display: flex;
  flex-direction: column;
  gap: var(--text-copy-xxs);
  padding-top: var(--root-size);
  list-style-type: none;

  & > h4 {
    border-top: 2px dotted var(--brand-color);
    display: inline-block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: bold;
    padding-top: 0.6rem;
  }

  & > ul {
    padding-left: 0;
  }
}
.mini_card {
  --text-color: var(--white);
  --heading-color: var(--white);

  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  /*aspect-ratio: 1;*/
  overflow: hidden;
  border-radius: var(--corner-size-small);
  background-color: var(--brand-color);

  & > img {
    /*grid-column: 1 / -1;*/
    /*grid-row: 1 / -1;*/
    width: 100%;
    aspect-ratio: 1.75;

    -o-object-fit: cover;

       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    z-index: 1;
  }

  & > .mini_card_content {
    /*grid-column: 1 / -1;*/
    /*grid-row: 2 / 3;*/
    /*padding-top: 120px;*/
    width: 100%;
    height: 100%;

    /*
    display: -webkit-box; !* Keep this as it's a non-standard value *!
    -webkit-box-orient: vertical; !* Keep this as it's a non-standard property *!
    -webkit-line-clamp: 3; !* Keep this as it's a non-standard property *!
    overflow: hidden;
    */

    padding: var(--padding-small) var(--padding-medium);
    font-size: var(--text-copy-xs);

    @media (width >= 48rem) {
      font-size: var(--text-copy-s);
    }

    &:has( > a) {
      padding: 0;

      > a {
        padding: var(--padding-small) var(--padding-medium);
      }
    }

    & > a {
      display: block;
      height: 100%;
    }

    & h5 {
      margin-bottom: calc(var(--text-copy-xxs) * 0.5);
      font-weight: bold;
      font-family: Barlow, system-ui, sans-serif;

      font-size: var(--text-copy-m);
      @media (width >= 48rem) {
        font-size: var(--text-copy-l);
      }


      &::after {
        right: -9px;
        top: 2px;
      }
    }
  }
}
figure.promo {
  display: flex;
  gap: var(--root-size);

  & img {
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center top;
       object-position: center top;
    flex: 1;
    overflow: hidden;
  }

  & figcaption {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: start;

    & p {
      font-size: var(--text-copy-s);
    }
  }
}
.element_content_card {
  /* the row-holder of the content_card_block */

  + .element_content_card:not(:has(.element_intro)) {
    margin-top: calc(0px - var(--row-gap));

    @media (width >= 48rem) {
      margin-top: 0;
    }

  }

}
.content_card_block {
  --backdrop-color: var(--surface-light);
  --content-padding: var(--inner-col-padding-y) var(--inner-col-padding-x);

  display: flex;
  position: relative;
  /*min-height: fit-content;*/
  /*height: auto;*/
  /*border-radius: var(--corner-size-large);*/
  background-color: var(--backdrop-color);
  background-repeat: no-repeat;
  background-size: cover;
  padding: var(--content-padding);
  overflow: hidden; /* for border-radius */
  gap: var(--inner-col-padding-x) var(--inner-col-padding-y);

  > .content_card_block_image {
    width: 100%;
  }

  &.bg_color_blue {
    --backdrop-color: var(--brand-color);
  }

  /*             "blue"  => "Blue",
            "sky"  => "Sky",
            "ice" => "Ice",
            "mist" => "Mist",
            "cream" => "Cream",
            "bone" => "Bone",
            "sand" => "Sand",
            "gray"  => "Gray",
            "orange" => "Orange",
            "green" => "Green",
            "white" => "White",
            "black" => "Black",
*/

  &.bg_color_sky {
    --backdrop-color: var(--brand-color-mid);
  }

  &.bg_color_ice {
    --backdrop-color: var(--brand-color-light);
  }

  &.bg_color_mist {
    --backdrop-color: var(--brand-color-faint);
  }

  &.bg_color_cream {
    --backdrop-color: var(--surface-light);
  }

  &.bg_color_bone {
    --backdrop-color: var(--surface-mid);
  }

  &.bg_color_sand {
    --backdrop-color: var(--surface-dark);
  }

  &.bg_color_gray {
    --backdrop-color: var(--grey);
  }

  &.bg_color_orange {
    --backdrop-color: var(--cta-orange);
  }

  &.bg_color_green {
    --backdrop-color: var(--cta-green);
  }

  &.bg_color_white {
    --backdrop-color: var(--white);
  }

  &.bg_color_black {
    --backdrop-color: var(--black);
  }

  &.text_color_green .content_card_block_content {
    --text-color: var(--cta-green);
    color: var(--cta-green);
  }

  &.text_color_orange .content_card_block_content {
    --text-color: var(--cta-orange);
    color: var(--cta-orange);
  }

  &.text_color_blue .content_card_block_content {
    --text-color: var(--brand-color);
    color: var(--brand-color);
  }

  &.text_color_brown .content_card_block_content {
    --text-color: var(--brown);
    color: var(--brown);
  }

  &.text_color_white .content_card_block_content {
    --text-color: var(--white);
    color: var(--white);
  }

  &.text_color_black .content_card_block_content {
    --text-color: var(--black);
    color: var(--black);
  }

  &.title_color_green .content_card_block_title {
    --heading-color: var(--cta-green);
  }

  &.title_color_orange .content_card_block_title {
    --heading-color: var(--cta-orange);
  }

  &.title_color_blue .content_card_block_title {
    --heading-color: var(--brand-color);
  }

  &.title_color_brown .content_card_block_title {
    --heading-color: var(--brown);
  }

  &.title_color_white .content_card_block_title {
    --heading-color: var(--white);
  }

  &.title_color_black .content_card_block_title {
    --heading-color: var(--black);
  }

  &.link_color_green a.block_button {
    color: var(--white);
    --cta-color: var(--cta-green);
  }

  &.link_color_orange a.block_button {
    color: var(--white);
    --cta-color: var(--cta-orange);
  }

  &.link_color_blue a.block_button {
    color: var(--white);
    --cta-color: var(--brand-color);
  }

  &.link_color_white a.block_button {
    background: var(--cta-white);
    color: var(--dark-blue);
    border: 1px solid var(--subtle-grey);
    box-shadow: var(--faint-shadow);
  }

  & .content_card_block_inner {
    grid-column: 1 / -1;
    height: 100%;
    width: inherit;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: var(--text-subheading-size);
    z-index: 1;

    &:has(.button.cta) {
      & > *:nth-last-child(2) {
        flex: 1;
      }

      .button.cta {
        margin-top: auto;
        align-self: flex-start;
      }
    }

    &.content_padding {
      padding: var(--content-padding);
    }
  }

  /* image very small in three_fourth */

  &.three_fourth {
    .content_card_block_image {
      grid-column: 1/-1;
    }
  }

  /* / image very small in three_fourth */

  &.img_position_background {
    min-height: 200px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%), var(--mobile-bg);

    @media (width >= 48rem) {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%), var(--tablet-bg);
    }
    @media (width >= 64rem) {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%), var(--desktop-bg);
    }
  }

  &.half:not(.custom_img_position),
  &.custom_img_position.img_position_top,
  &.custom_img_position.img_position_bottom {
    flex-direction: column;
    padding: 0;

    &:has(.content_card_block_image) {
      gap: 0;
    }

    & .content_card_block_inner {
      --backdrop-color: var(--surface-dark);
      padding: var(--content-padding);

      & > p, h2 {
        mix-blend-mode: luminosity;
      }
    }

    &.blue {
      & .content_card_block_inner {
        --backdrop-color: var(--brand-color-light);
      }
    }

    &:not(:has(.content_card_block_image)) {
      aspect-ratio: unset;
    }

    & > .content_card_block_image {

      img {
        -o-object-fit: cover;
           object-fit: cover;
        z-index: 0;
        width: 100%;
        height: 150px;

        @media (width >= 48rem) {
          height: 300px;
        }

        @media (width >= 64rem) {
          height: 420px;
        }
      }
    }

  }

  &.custom_img_position.img_position_top {
    & > .content_card_block_image {
      order: 1;
    }

    & > .content_card_block_inner {
      order: 2;
    }
  }

  &.custom_img_position.img_position_bottom {
    & > .content_card_block_image {
      order: 2
    }

    & > .content_card_block_inner {
      order: 1;
    }
  }

  &.custom_img_position.img_position_background,
  &.one_third:not(.custom_img_position) {
    --heading-color: var(--white);
    --text-color: var(--white);

    position: relative;
    overflow: hidden;

    & .content_card_block_inner {
      background-color: transparent;
    }

    &:has(> .content_card_block_image) {
      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent linear-gradient(135deg, rgba(0, 0, 0, .5) 0, rgba(128, 128, 128, .1) 100%) 0 0 no-repeat padding-box;
      }
    }

    & .content_card_block_image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      z-index: 0;
    }
  }

  &.custom_img_position.img_position_right,
  &.custom_img_position.img_position_left,
  &.two_thirds:not(.custom_img_position),
  &.full:not(.custom_img_position) {

    & .content_card_block_inner {
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      grid-row: auto / span 1;

      &:first-child {
        grid-row-start: 1;
      }
    }

    & .content_card_block_image {
      flex-basis: 120px;

      img, video {
        border-radius: var(--corner-size-medium);
        width: 100%;
        height: 150px;
        -o-object-fit: cover;
           object-fit: cover;

        @media (width >= 48rem) {
          height: 100%;
          /*object-fit: contain;*/
        }
      }
    }
  }

  &.full:not(.custom_img_position) {
    & .content_card_block_image {
      width: 27%;
    }
  }

  &.custom_img_position.img_position_right,
  &.custom_img_position.img_position_left,
  &.two_thirds:not(.custom_img_position) {
    flex-direction: column;
    @media (width >= 48rem) {
      flex-direction: row;
    }

    & .content_card_block_image {
      @media (width >= 48rem) {
        width: 40%;
        flex-basis: 332px;
      }
    }
  }

  /* position right  */

  &.custom_img_position.img_position_right,
  &.two_thirds:not(.custom_img_position) {

    & .content_card_block_inner {
      order: 1;
    }

    & .content_card_block_image {
      order: 2;
    }

  }

  &.card_listing {
    grid-template-rows: -webkit-max-content;
    grid-template-rows: max-content;
    border-radius: var(--corner-size-large);

    /*> img {*/
    /*  border-radius: var(--corner-size-large) var(--corner-size-large) 0 0 ;*/
    /*  grid-row: 1 / 1;*/
    /*}*/

    > .img {
      border-radius: var(--corner-size-large) var(--corner-size-large) 0 0;
      grid-row: 1 / 1;
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 200px;

      &.with-bg-image {
        background-image: var(--image-bg);
        height: var(--image-bg-height, 200);
      }
    }

    > article {
      grid-row: 2 / 2;
      border-radius: 0 0 var(--corner-size-large) var(--corner-size-large);
    }
  }
}
section#hero,
.element_image_banner .content_block_inner {
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 150px;

  @media (width >= 48rem) {
    height: 320px;
  }

  body.HomePage & {
    height: 320px;

    @media (width >= 48rem) {
      height: 462px;
    }
  }

  &.with-bg-image {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.0) 65%), var(--desktop-bg);

    &.with-mobile-bg-image {
      @media (width < 48rem) {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%), var(--mobile-bg);
      }
    }

    &.with-tablet-bg-image {
      @media (48rem <= width < 64rem) {
        background-image: var(--tablet-bg);
      }
    }

    &.bg-position-left {
      background-position: left center;
    }

    &.bg-position-left-top {
      background-position: left top;
    }

    &.bg-position-left-bottom {
      background-position: left bottom;
    }

    &.bg-position-right {
      background-position: right center;
    }

    &.bg-position-right-top {
      background-position: right top;
    }

    &.bg-position-right-bottom {
      background-position: right bottom;
    }

    &.bg-position-center {
      background-position: center center;
    }

    &.bg-position-center-top {
      background-position: center top;
    }

    &.bg-position-center-bottom {
      background-position: center bottom;
    }
  }
}
.element_image_banner {
  .content_block_inner {
    min-height: 250px;
    padding-top: var(--header-height);
    padding-bottom: var(--header-height);

    padding-inline: var(--gutter);

    &.with-bg-image {
      min-height: var(--desktop-bg-height);

      &.with-mobile-bg-image {
        min-height: var(--mobile-bg-height);

        @media (width >= 80rem) {
          min-height: var(--desktop-bg-height);
        }
      }

      &.with-tablet-bg-image {
        @media (width >= 48rem) {
          min-height: var(--tablet-bg-height);
        }

        @media (width >= 64rem) {
          min-height: var(--desktop-bg-height);
        }
      }
    }

    .element_image_banner_inner {
      --heading-color: var(--white);
      --text-color: var(--white);
      color: var(--text-color);
      grid-column: 2 / -2;

      @media (width < 64rem) {
        grid-column: 2 / -2;
      }

      &:has(blockquote) {
        &:before {
          content: " ";
          position: absolute;
          top: calc(var(--header-height) - 10px);
          left: var(--gutter);
          width: 100px;
          border-top: 2px solid #fff;
        }
      }

      h2 {
        font-family: var(--brand-typeface), sans-serif;
        font-weight: 500;
        line-height: 125%;
        font-size: var(--text-hero-size);
        margin-bottom: var(--text-title-size);

        & strong {
          line-height: 125%;
          font-weight: 700;
        }
      }

      blockquote {
        position: relative;
        display: block;
        font-size: var(--text-coursename-size);
        font-style: italic;
        width: 50%;
        padding-bottom: var(--root-size);

        &::before {
          content: "“";
          top: 0;
          left: 0;
          font-size: var(--text-coursename-size);
        }

        &::after {
          content: "”";
          bottom: 0;
          right: 0;
          font-size: var(--text-coursename-size);
        }

        p {
          display: inline;
        }
      }

      & > a {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        color: var(--white);
        text-decoration: underline;
      }

    }
  }

  &.banner-breakout, &:has(.banner-breakout) {
    grid-column: 1 / -1 !important;

    .content_block_inner {
      .content {
        grid-column: 2 / -2;

        @media (width < 64rem) {
          grid-column: 3 / -3;
        }
      }
    }
  }

}
.figure_strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: var(--root-size);

  figure {
    flex: 1 1 180px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: calc(3 * var(--header-height)) var(--header-height);

    & img {
      grid-row: 1 / 2;
      width: 90%;
      height: 90%;
      place-self: center;
      aspect-ratio: 1;
      padding: var(--text-copy-l);
      -o-object-position: center;
         object-position: center;
      -o-object-fit: contain;
         object-fit: contain;
    }

    & figcaption {
      text-align: center;
      white-space: wrap;

      & *:is(a, em) {
        font-weight: normal;
      }

      & em {
        display: block;
        font-size: var(--text-copy-m);
        font-style: normal;
        color: var(--text-color-light);
      }
    }
  }

  &.squares {
    & figure {
      flex-grow: 0;

      & img {
        background-color: var(--surface-dark);
        border-radius: var(--corner-size-small);
      }
    }
  }

  &.circles {
    & figure {
      flex-grow: 0;

      & img {
        background-color: var(--surface-dark);
        border-radius: 999px;
      }
    }
  }
}
.course_card, .blog_card {
  --heading-color: var(--brand-color);


  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr auto;
  row-gap: var(--root-size);
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
  padding: var(--text-copy-l);
  outline: 2px solid oklch(from var(--brand-color) l c h / 30%);
  border-radius: var(--corner-size-small);
  background-color: var(--brand-color-faint);

  & h3, h4 {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    font-size: var(--text-copy-l);
  }

  & h4 {
    font-size: var(--text-copy-m);
  }

  & a {
    --cta-color: var(--cta-green);

    grid-column: 2 / 3;
    grid-row: 3 / 4;
    place-self: end;
    white-space: nowrap;
  }
}
*:has(.course_draw) {
  counter-reset: drawCount;
}
.course_draw {
  --heading-color: var(--brand-color);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  row-gap: var(--text-copy-l);
  outline: 1px solid var(--brand-color-light);
  padding: var(--text-subheading-size);
  border-radius: var(--corner-size-small);
  box-shadow: var(--subtle-shadow);
  color: var(--text-color-faint);

  ul.ticks_list {
    font-size: var(--text-copy-xs);
    line-height: 1.75;
  }

  & .course_draw_title {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--grey);
    padding-bottom: var(--text-copy-l);
    counter-increment: drawCount;
    font-size: var(--text-copy-l);

    &::before {
      content: counter(drawCount);
      display: inline-grid;
      place-items: center;
      width: var(--text-subheading-size);
      aspect-ratio: 1;
      margin-right: var(--text-copy-xxs);
      border-radius: 999px;
      background: var(--cta-orange);
      font-size: var(--text-copy-xxs);
      color: var(--white);
    }
  }
}
.blog_card {
  --heading-color: var(--text-color-light);
  --cta-color: var(--cta-orange);

  background-color: var(--surface-mid);
  outline: none;

  & p {
    grid-column: 1 / -1;
  }

  & a {
    --cta-color: var(--cta-orange);
  }
}
.jobopening_card {
  --heading-color: var(--brand-color);

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: var(--form-element-size) auto var(--form-element-size);
  gap: var(--root-size);

  & :not(ul) {
    grid-column: 1 / 2;
    grid-row: auto / span 1;
  }

  & h2 {
    font-weight: normal;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: calc(var(--root-size) * -1);
      width: calc(var(--large-form-element-size) * 2);
      height: 2px;
      background-color: var(--brand-color);
    }
  }

  & ul {
    grid-column: 2 / 3;
    grid-row: 1 / -1;

    & li {
      background: var(--grey);
      padding: 6px var(--root-size);
      display: flex;

      & strong {
        font-weight: bold;
        flex: 1;
        margin-right: var(--root-size);
      }

      &:last-child {
        background: var(--subtle-grey);
      }
    }
  }
}
.review_carousel {
  display: flex;
  flex-direction: column;
  gap: var(--header-height);
  position: relative;

  & .scrollable {
    --gap: var(--header-height);

    display: grid;
    grid-template-columns: 50%;
    grid-auto-columns: 50%;
    grid-template-rows: -webkit-min-content;
    grid-template-rows: min-content;
    grid-auto-flow: column;
    overflow: hidden;
    transition: all 2s ease-out;

    & .review {
      grid-column: auto / span 1;
      display: grid;
      grid-template-columns: 1fr 1fr var(--gap);
      grid-template-rows: 50% 50%;
      margin-left: calc(var(--gap) / 2);

      &:nth-of-type(odd) {
        border-right: 1px solid oklch(from var(--subtle-grey) l c h / 10%);
      }

      & img {
        grid-column: 1 / 2;
        grid-row: 1 / -2;
        max-width: 80%;
        max-height: 150%;
        -o-object-position: center;
           object-position: center;
        -o-object-fit: cover;
           object-fit: cover;
        overflow: hidden;
        border-radius: 999px;
        translate: 0 12.5%;
      }

      & .inner {
        & blockquote {
          display: inline-block;
          position: relative;
          height: -webkit-fit-content;
          height: -moz-fit-content;
          height: fit-content;
          margin-top: var(--root-size);
          font-family: Kalam, var(--heading-typeface), system-ui;
          font-size: var(--text-title-size);

          & svg {
            display: block;
            position: absolute;
            height: var(--menu-height);
            aspect-ratio: 7/8;
            color: var(--subtle-grey);
            opacity: 0.3;

            &:nth-of-type(1) {
              right: 100%;
              top: 0;
              translate: -25% 0;
            }

            &:nth-of-type(2) {
              bottom: 0;
              left: 100%;
              translate: 0 50%;
            }
          }
        }

        & cite {
          display: inline-block;
          font-style: normal;
          margin-top: var(--root-size);

          & strong {
            display: block;
          }
        }
      }
    }
  }

  & div.carousel_controls {
    width: 100%;
  }
}
div.carousel_controls {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--breadcrumbs-height);

  & .progress_dot {
    height: var(--text-copy-s);
    aspect-ratio: 1;
    border-radius: 999px;
    transition: box-shadow 200ms ease-out;
  }
}
.carousel {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  flex-direction: column;
  position: relative;


  & .scrollable {
    grid-column: 1/-1;
    grid-row: 1/-1;
    display: flex;
    position: relative;
    padding: var(--root-size) 0 var(--root-size) 2px;
    gap: var(--col-gap);
    overflow: hidden;

    & > .course_card, & > .blog_card {
      min-width: calc(25% - var(--col-gap) + 3px);
    }
  }

  & > .carousel_controls {
    grid-column: 1/-1;
    grid-row: 1/-1;
    height: 100%;
    width: calc(100% + var(--root-size) * 3);
    position: relative;
    left: calc(0px - (var(--root-size) * 1.5));
    display: flex;
    justify-content: space-between;
    align-items: center;

    & > button {
      text-align: center;
      padding: 0;

      &[disabled] {
        background: var(--grey);
      }
    }
  }
}
div.course_categories_banner {
  grid-column: 1 / -1;
  /*grid-row: 1 / -1;*/
  height: var(--form-element-size);
  display: flex;
  align-items: center;
  gap: var(--root-size);
  padding-inline: var(--root-size);
  background: var(--brand-color-faint);
  border-radius: var(--corner-size-small);
  font-size: var(--text-copy-xs);
}
div.course_finder {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: var(--form-element-size) 0 auto;
  grid-auto-rows: minmax(var(--result-row-height), auto);
  row-gap: var(--text-subheading-size);

  & > form {
    grid-column: 1 / span 5;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--root-size);
    position: relative;

    & > button.cta {
      position: -webkit-sticky;
      position: sticky;
      bottom: var(--form-element-size);
      margin-block: var(--root-size);
      width: 100%;
      z-index: 25;
    }
  }

  & > .course_finder_results {
    grid-column: 7 / -1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--text-subheading-size);

    &.global {
      grid-column: 3 / 19;
      grid-row: 1 / -1;
    }

    & > .metadata {
      --gap: var(--text-copy-xxs);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: var(--text-color-faint);
      gap: var(--gap);

      & small:first-of-type {
        flex: 1;
      }
    }

    /* Top level "course cards" */

    & > li, /* legacy */
    & > .search_row {
      --gap: var(--text-copy-xxs);
      --heading-color: var(--brand-color);

      display: flex;
      border: 1px solid oklch(from var(--subtle-grey) l c h / 12.5%);
      border-radius: var(--corner-size-small);
      box-shadow: var(--faint-shadow);

      & input[type="checkbox"] {
        grid-column: 1 / 2;
        grid-row: 1 / -1;
        width: var(--root-size);
      }

      & label {
        /* for the compare checkbox */
        display: none;
        font-size: var(--text-copy-s);
        translate: var(--text-copy-xxs) 25%;
        color: var(--text-color-light);
      }

      .search_product_link {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--gap);
        width: 100%;
        min-width: 0;
        color: inherit;
        padding: var(--root-size);
      }

      .search_product_compare {
        padding: var(--root-size);
        padding-right: 0;
        flex: 0 0 50px;
        display: flex;
        position: relative;
        place-items: center;
        height: 100%;
      }

      .search_product_left {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1 1 0;
      }

      .search_product_right {
        display: flex;
        flex: 0 0 auto;
        min-width: 0;
        white-space: nowrap;
        margin-left: auto;
        height: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--root-size);
      }

      .sticker_container {
        display: flex;
        height: 100%;
        place-items: center;
      }

      .search_product_title {
        font-size: var(--text-copy-l);
        color: var(--heading-color);
        font-weight: bold;
        font-family: var(--heading-typeface), system-ui, sans-serif;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .description {
        display: none;
      }

      & ul.course_details {
        display: flex;
        font-size: var(--text-copy-xs);
        color: var(--text-color-light);
      }

      & > .price_indication {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        justify-self: end;
      }

      & .ghost {
        height: 40px;
      }

      & .favorite { /* the fav button */
        & img {
          width: 18px;
          margin-top: -10px;
        }
      }

      & details {
        grid-column: 2 / -1;
        max-height: calc(1.5 * var(--form-element-size));
        margin-top: var(--root-size);
        padding-bottom: var(--root-size);
        border-top: 1px solid var(--subtle-grey);
        overflow: hidden;
        transition: max-height 2s ease-out;

        & summary {
          display: block;
          position: relative;
          margin-top: var(--root-size);
          color: var(--text-color-light);
          font-size: var(--text-copy-s);
          cursor: pointer;

          &::before {
            content: '⟩';
            position: absolute;
            right: 0;
            width: var(--text-title-size);
            height: var(--text-title-size);
            display: grid;
            place-items: center;
            rotate: -270deg;
            color: var(--brand-color);
            font-weight: 900;
            transition: rotate 0.2s ease-out;
          }
        }

        &[open] {
          max-height: 100dvh;
          overflow: visible;

          summary {
            margin-bottom: var(--root-size);

            &::before {
              rotate: -90deg;
            }
          }
        }

        & > p {
          margin-bottom: var(--text-copy-s);
          padding-block: var(--text-copy-xs);
          border-radius: var(--corner-size-small);
          font-size: var(--text-copy-s);
          outline: 1px solid var(--grey);

          &::before {
            content: '⟩';
            margin-inline: var(--root-size);
            color: var(--brand-color);
            font-weight: 900;
          }
        }
      }

      &:nth-of-type(4n):not(:last-child) {
        position: relative;
        margin-bottom: var(--menu-height);
        padding-bottom: 6px; /* the margin-bottom property screws with the row's height */
        overflow: visible;

        &::after {
          content: "✔︎ Flexibel studeren   ✔︎ Je docent is 24/7 bereikbaar   ✔︎ Erkende diploma's en certificaten";
          position: absolute;
          bottom: calc(0px - var(--menu-height));
          width: 100%;
          translate: 0 -50%;
          font-size: var(--text-copy-xs);
          text-align: center;
          color: var(--text-color-faint);
        }
      }
    }
  }

  & .pagination_controls,
  & .bottom_content {
    grid-column: 7 / -1;
  }

  & > .course_finder_results.global + .pagination_controls {
    grid-column: 3 / 19;
  }

  &.with_banner {
    & > form,
    & > .course_finder_results {
      grid-row: 3 / -1;
    }
  }

  & > button#course_compare_cta {
    --cta-color: var(--cta-orange);

    grid-row: 2 / 3;
    position: -webkit-sticky;
    position: sticky;
    top: 100%;
    transform: translateY(-200%);
    z-index: 2;
    width: 160px;
    min-height: calc(var(--form-element-size) * 1);
    grid-column: 12 / span 4;

    &.hidden {
      display: none;
    }
  }

  & > button#course_form_cta {
    display: none;
    grid-row: 2 / 3;
    position: -webkit-sticky;
    position: sticky;
    top: 100%;
    transform: translateY(-200%);
    z-index: 2;
    width: 160px;
    min-height: calc(var(--form-element-size) * 1);
    grid-column: 7 / span 4;
  }
}
div.pagination_controls {
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  gap: var(--root-size);


  .button {
    height: var(--pagination-height);
  }

  & > .browse_button {
    display: flex;
    place-items: center;
  }

  /* Pagination number containers */

  & .pagination_numbers {
    gap: calc(var(--root-size) / 2);
    align-items: center;
    height: var(--pagination-height);

    a, button {
      flex-grow: 1;
      height: 100%;
    }
  }

  /* Style for dots between page numbers */

  & .dots {
    padding: 0 calc(var(--root-size) / 2);
    color: var(--text-color-muted, #666);
  }
}
section.locations {
  display: flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
  padding-top: var(--root-size);

  & > div {
    flex: 1;

    & > details {
      padding: var(--text-copy-xs) var(--text-copy-s);
      border-radius: var(--corner-size-small);

      &[open] {
        summary {
          font-weight: 900;
          color: var(--brand-color);
        }
      }

      &:nth-child(odd) {
        background: var(--grey);
      }

      & > p {
        &.guaranteed::after {
          content: "Start gegarandeerd";
          display: inline-block;
          margin-left: var(--root-size);
          padding: 1px 3px;
          border-radius: var(--corner-size-small);
          background-color: var(--cta-green);
          transform: translateY(-2px);
          color: var(--white);
          font-size: var(--text-copy-xxs);
          font-weight: 600;
        }
      }
    }
  }

  & svg, img {
    flex: 2;
    aspect-ratio: 6 / 7;
    height: 16rem;
  }

}
.review_stars {
  --empty-color: var(--grey);
  --filled-color: gold;

  position: relative;
  height: var(--text-subheading-size);
  aspect-ratio: 5/ 1;
}
.review_stars.aspect-auto {
  aspect-ratio: auto;
}
.form_progress_bar {
  --stage-dot-size: var(--text-subheading-size);

  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 60%;
  margin: 0 auto;
  margin-bottom: var(--header-height); /* TEMPORARY */;

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--stage-dot-size);
    translate: 0 -50%;
    width: calc(100% - (2 * var(--stage-dot-size)));
    height: 2px;
    background: var(--brand-color-light);
  }

  & div.stage {
    --stage-glyph: "";
    --text-color: var(--text-color-faint);

    width: var(--stage-dot-size);
    height: var(--stage-dot-size);
    border-radius: 999px;
    border: 2px solid var(--brand-color-light);
    background: var(--brand-color-light);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    & span {
      translate: 0 150%;
      text-align: center;
      font-size: var(--text-copy-s);
      color: var(--text-color);
      white-space: nowrap;
    }

    &::after {
      content: var(--stage-glyph);
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      color: var(--brand-color);
      font-size: var(--text-copy-xxs);

    }

    &.completed {
      --stage-glyph: "✔︎";
    }

    &.in_progress {
      --text-color: var(--text-color-light);
      --stage-glyph: "●";
    }

    &.upcoming {
      background: none;
    }
  }
}
/* -------------------------
Finally specifically targeted elements
------------------------- */
#newsletter_signup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--root-size);
  font-size: var(--text-copy-s);

  #newsletter_signup_form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--text-copy-s);

    & label {
      display: none;
    }

    & input {
      flex: 2;
    }

    & select {
      flex: 1;
    }
  }
}
#sidebar.link_list {
  & > h4 {
    border-top: none;
  }

  & li {
    padding-block: var(--text-copy-xxs);
    border-top: 2px dotted var(--subtle-grey);

    & a.chevron::before {
      margin-left: 0;
    }
  }
}
#course_compare_cta {
  anchor-name: --course-compare-anchor;
}
@keyframes slide-in-from-bottom {
  from {
    translate: 0 100vh;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}
@keyframes slide-out-to-bottom {
  from {
    translate: 0 0;
    opacity: 1;
  }

  to {
    translate: 0 100vh;
    opacity: 0;
  }
}
@keyframes slide-in-from-right {
  from {
    translate: 100vw 0;
    opacity: 0;
  }

  to {
    translate: 100vw 0;
    opacity: 1;
  }
}
@keyframes slide-out-to-right {
  from {
    translate: 0 0;
    opacity: 1;
  }

  to {
    translate: 100vw 0;
    opacity: 0;
  }
}
#course_compare_dialog {
  margin: auto;
  border: none;
  border-radius: var(--corner-size-small);
  box-shadow: var(--subtle-shadow);
  place-self: center;
  width: 60dvw;
  padding: var(--form-element-size);
  padding-bottom: calc(var(--form-element-size) * 2);
  animation: slide-in-from-bottom 0.16s ease-out;

  & p {
    margin-bottom: var(--root-size);
  }

  & #close_course_compare {
    position: absolute;
    right: var(--root-size);
    top: var(--root-size);
    box-shadow: none;
    color: var(--text-color);
  }

  & #compare_courses_submit {
    position: absolute;
    bottom: var(--form-element-size);
    right: var(--form-element-size);
  }

  & ul.course_compare_list {
    display: flex;
    flex-direction: column;
    gap: var(--root-size);
    counter-reset: course_compare_counter;
    margin-bottom: var(--root-size);

    & li.course_compare_candidate {
      height: var(--form-element-size);
      display: flex;
      align-items: center;
      padding-inline: var(--root-size);
      counter-increment: course_compare_counter;
      position: relative;
      font-size: var(--text-copy-s);
      border-radius: var(--corner-size-small);

      &.unassigned {
        border: 1px dashed var(--grey);
      }

      &.assigned {
        background: var(--brand-color-faint);
        gap: var(--root-size);
        color: var(--brand-color);

        &::before {
          content: counter(course_compare_counter);
          width: var(--root-size);
          height: var(--root-size);
          background: var(--brand-color);
          color: var(--white);
          border-radius: 999px;
          font-size: var(--text-copy-xxs);
          display: grid;
          place-items: center;
        }

        & span {
          flex: 1;
        }

        & img {
          width: var(--root-size);
          aspect-ratio: 1;
        }
      }
    }
  }

  &::backdrop {
    background: oklch(from var(--text-color) l c h / 50%);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
  }

  /* Add display */
  transition: opacity 0.16s ease-in, transform 0.16s ease-in, display 0.16s ease-in;

  /* Add transition-behavior */
  transition-behavior: allow-discrete;
}
#cost_overview_dialog {
  border: none;
  border-radius: var(--corner-size-small);
  box-shadow: var(--subtle-shadow);
  place-self: center end;
  width: 480px;
  height: 100vh;
  padding: var(--form-element-size);
  padding-bottom: calc(var(--form-element-size) * 2);
  animation: slide-in-from-right 0.16s ease-out;
  margin-right: var(--root-size);

  /* Add display */
  transition: opacity 0.16s ease-in, transform 0.16s ease-in, display 0.16s ease-in;

  /* Add transition-behavior */
  transition-behavior: allow-discrete;

  &::backdrop {
    background: oklch(from var(--text-color) l c h / 50%);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
  }
}
/* The style when closed */
/*
@starting-style {
  #course_compare_dialog {
    opacity: 0;
    transform: translateY(0);
  }

  #cost_overview_dialog {
    opacity: 0;
    transform: translateX(100vw);
  }
}
*/
/* The style when closed */
#course_compare_dialog:not([open]) {
  opacity: 0;
  transform: translateY(100vh);
}
/* The style when closed */
#cost_overview_dialog:not([open]) {
  opacity: 0;
  transform: translateX(100vw);
}
.embed-html {
  position: relative;
  width: 100%;
  height: 0;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}
:root {
  &:has(.PopupIframePage) {
    --text-color: var(--white);
  }
}
body.PopupIframePage {
  > main {
    --root-size: var(--text-heading-size);
    --heading-color: var(--white);
    --text-title-size: var(--text-giant-size);
    --text-color: var(--white);

    background: radial-gradient(circle farthest-corner at bottom left, #019ce0 0%, #000650 100%);

    h2 {
      font-size: var(--text-hero-size);
    }

    div.typography {
      --text-color: var(--white);
      font-size: var(--text-heading-size);

      ul.ticks_list {
        ::marker {
          color: var(--white);
        }
      }
    }
  }
}
.quote_carousel {
  --swiper-navigation-top-offset: calc(50% - 30px);
  --swiper-pagination-bottom: -6px;
  --swiper-theme-color: var(--white);
  --swiper-pagination-bullet-inactive-color: var(--white);

  width: 100%;

  @media (width >= 48rem) {
    margin-top: -60px;
    width: 400px;
    flex-grow: 1;
  }

  .quote_carousel_item {
    padding-left: var(--root-size);
    padding-right: var(--root-size);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
  }


  .swiper-button-prev,
  .swiper-button-next {
    color: var(--white);

    svg {
      height: 50%;
    }
  }

  .swiper-button-next {
    top: 138px
  }

  @media (max-width: 767px) {
    .swiper-button-next {
      top: 65px
    }
  }

  .swiper-button-next:after {
    font-family: Arial, sans-serif;
    font-size: 15px
  }

  .swiper-button-prev {
    top: 138px
  }

  @media (max-width: 767px) {
    .swiper-button-prev {
      top: 65px
    }
  }

  .swiper-button-prev:after {
    font-family: Arial, sans-serif;
    font-size: 15px
  }

  .quote_carousel_image_container {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;

    img {
      width: 130px;
      height: 130px;
      border: 4px solid #fff;
      -o-object-fit: cover;
         object-fit: cover;
      border-radius: 65px;
      flex-grow: 0;

      @media (width >= 48rem) {
        width: 270px;
        height: 270px;
        border-radius: 135px;
        border: 6px solid #fff;
      }
    }
  }

  .quote_carousel_text {
    text-align: center;
    font-size: var(--text-subheading-size);
  }

  @media (max-width: 767px) {
    .quote_carousel-text {
      margin-bottom: 32px;
      font-size: 15px
    }
  }


}
.blog_posts {
  display: grid;
  /* two per columns, multiple rows */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;

  gap: var(--root-size);

  > .blog_post_summary {
    grid-column: auto / span 1 !important;

    > .img {
      border-radius: var(--corner-size-medium);
      width: 50%;
      flex: 1;
    }

    > article {
      display: flex;
      flex-direction: column;
      flex: 1;

      > :last-child {
        margin-top: auto;
        flex-grow: 0;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
      }
    }
  }
}
.swipeable {
  display: flex;
  scroll-snap-type: x mandatory;
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;

  /* use mouse drag to scroll */
  cursor: grab;
  gap: var(--root-size);
  padding-bottom: var(--root-size);
  margin-bottom: calc(0px - var(--root-size));

  .swipe_item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-behavior: smooth;
  }

}
.product_title {

  color: var(--brand-color);
  font-size: var(--text-coursename-size);
  display: flex;
  align-items: start;
  gap: var(--root-size);
  margin-bottom: var(--spacing);

  &[data-tag]:after {
    content: attr(data-tag);
    background: var(--heading-color);
    padding: 2px 6px;
    border-radius: var(--corner-size-small);
    font-size: var(--text-copy-xs);
    font-weight: normal;
    color: var(--white);
  }
}
.sticker_container {
  display: inline-flex;
  gap: var(--tiny-spacing);

  .sticker {
    --sticker-color: var(--brand-color);
    background: var(--sticker-color);
    padding: 2px 6px;
    border: 1px solid var(--sticker-color);
    border-radius: var(--corner-size-small);
    font-size: var(--text-copy-xs);
    font-weight: normal;
    color: var(--white);

    &.ghost {
      background: var(--brand-color-ghost);
      color: var(--brand-color);
      border: 1px solid var(--brand-color);
    }

    &.orange {
      --sticker-color: var(--orange);
    }

    &.blue {
      --sticker-color: var(--blue);
    }

    &.green {
      --sticker-color: var(--green);
    }
  }

}
.fixed_course_header {
  --heading-color: var(--brand-color);

  height: var(--floating-header-height);
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  grid-template-columns: var(--columns);
  grid-column-gap: var(--col-gap);
  align-items: center;
  background-color: var(--white);
  z-index: 2;
  box-shadow: var(--faint-shadow);
  color: var(--text-color-light);
  white-space: nowrap;
  transform: translateY(-200%);
  transition: var(--standard-transition);

  @media (width >= 48rem) {
    display: grid;

    .aboveViewport + & {
      transform: translateY(0);
    }
  }

  .title_group {
    display: flex;
    align-items: center;
    gap: 3rem;

    .course_header_title {

    }

    ul {
      font-size: var(--text-copy-xs);
      gap: var(--root-size);
    }

  }

  .cta_group {
    display: flex;
    flex: 1;
    justify-content: end;
    align-items: center;
    gap: 1.5rem;

    & p.price_indication {
      font-size: var(--text-subheading-size);
    }
  }
}
.pills_details_holder {
  grid-column: 1 / -1;
  grid-row: 2 / 3;

  .pills_details_summary {
    margin-bottom: var(--spacing);
  }

  .pills_details_title {
    align-self: center;
    font-weight: bold;
    margin-bottom: var(--spacing);
  }

  .button.pill.ghost {
    gap: var(--tiny-spacing);

    @media (width < 48rem) {
      white-space: nowrap;
      font-size: 12px;
      padding: var(--mini-spacing) var(--tiny-spacing);
      color: #8d8c8e;
      /* f5fcff*/
      background-color: var(--brand-color-ghost);

    }

  }

  .pills_details {
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    flex-wrap: nowrap;
    gap: var(--spacing);
    font-size: var(--text-copy-xs);
    padding-bottom: var(--tiny-spacing); /* for the mobile scrollbar */

    @media (width >= 48rem) {
      overflow: hidden;
      flex-wrap: wrap;
      height: -webkit-min-content;
      height: -moz-min-content;
      height: min-content;
      padding-bottom: 0;
    }

    & li {
      border: none;
      display: flex;
      flex-direction: row;
      text-overflow: ellipsis;
    }
  }
}
div.pdp_block {
  display: flex;
  flex-direction: column;
  /*grid-template-rows: var(--text-coursename-size);*/
  /*grid-template-columns: subgrid;*/
  /*grid-auto-rows: min-content;*/
  /*row-gap: var(--form-element-size);*/

  & .course_blurb {
    /*grid-column: 1 / 14;*/
    /*grid-row: auto / span 1;*/
    /*display: grid;*/
    /*grid-template-columns: repeat(2, 1fr);*/
    /*grid-auto-rows: auto;*/
    /*grid-auto-flow: row;*/

    @media (width >= 48rem) {
      width: 75%;
    }

  }

  .trustbuilders_group {
    display: flex;
    flex-direction: column;
    gap: var(--big-spacing);

    @media (width >= 48rem) {
      flex-direction: row;
    }

    .course_vid {
      flex: 1;
      min-height: 20px;
    }
  }

  .usps_group {
    width: 100%;

    @media (width >= 48rem) {
      flex: 1;
      max-width: 400px;
    }

    div.trustbuilders {
      border-top: 1px solid var(--grey);
      padding-top: var(--root-size);
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: var(--text-copy-xs), auto;
      row-gap: var(--root-size);

      .course_usps + & {
        margin-top: var(--spacing);
      }

      & h5 {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        font-size: var(--text-copy-xs);
      }

      .logos {
        display: flex;
        place-items: center;
        gap: var(--col-gap);
        grid-column: 1 / -1;
        grid-row: 2 / 3;

        & img {
          -o-object-fit: contain;
             object-fit: contain;
          height: 75px;
          filter: grayscale(1);
          opacity: 0.5;
        }
      }

    }
  }

  .course_vid {
  }

  & .pills_details_holder {
    margin-bottom: var(--big-spacing);
  }

  & .course_signup {
    display: flex;
    flex-direction: column;
    gap: var(--root-size);

    @media (width >= 48rem) {
      width: 25%;
    }

    & .flex_row {
      align-items: stretch;
      gap: var(--root-size);
      height: var(--large-form-element-size);
    }

    & small {
      color: var(--cta-green);
    }
  }
}
.video_thumbnail_wrapper,
.video_wrapper {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: none;
  border-radius: var(--corner-size-medium);

  img, video, iframe {
    width: 100%;
    height: 100%;
  }
}
.video_thumbnail_wrapper {
  /* add play_button overlay */
  position: relative;
  cursor: pointer;
  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: url('../img/icons/play_button.png') no-repeat center center;
    background-size: contain;
    pointer-events: none;
  }
}
.acronica_video {
  .initially_hidden {
    display: none;
  }
}
ul.course_usps {
  grid-column: 2 / 3;
  grid-row: auto / span 1;
  font-size: var(--text-copy-s);
  line-height: var(--text-title-size);

  li {
    display: flex;
    align-items: center;
    gap: var(--tiny-spacing);
  }
}
.course_variants {
  .course_variants_title {
    margin-bottom: var(--tiny-spacing);
  }

  .course_variants_options {
    display: flex;
    gap: var(--spacing);

    + .flex_row {
      margin-top: var(--big-spacing);
    }
  }

  .course_variant {
    display: flex;
    flex-grow: 1;
    gap: var(--tiny-spacing);
    font-size: var(--text-copy-xs);
    align-items: center;
    background: var(--brand-color-faint);
    padding: var(--padding-small) var(--padding-medium);
    border: 1px solid var(--brand-color-light);
    border-radius: var(--corner-size-small);


    .variant-price {
      font-size: 85%;
      color: var(--text-color-light);
    }
  }

}
.course_price {
  p.price_indication {
    font-size: var(--text-title-size);
  }
}
.link_list {
  a {
  }
}
details {
  --heading-color: var(--brand-color);

  summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--root-size);
    position: relative;
    cursor: pointer;

    .icon_dot {
      width: var(--text-title-size);
      height: var(--text-title-size);
      transition: rotate 0.2s ease-out;
      rotate: 0;
    }
  }

  &[open] {
    > summary {

      .icon_dot {
        rotate: -180deg;
      }
    }
  }

  &.accordion {
    summary {
      border-top: 1px solid var(--grey);
      border-bottom: 1px solid var(--grey);
      padding-block: var(--small-spacing);
      padding-inline: 0;

      h1, h2, h3, h4 {
        --heading-typeface: var(--brand-typeface);
        font-size: var(--text-copy-m);
        font-weight: normal;
        margin: 0;
      }

    }

    &[open] {
      border-bottom: 1px solid var(--grey);

      > summary {
        border-bottom: none;
      }

    }

    ::details-content,
    .details_content /* fallback */
    {
      padding-block: var(--spacing);
    }

    + .accordion {
      summary {
        border-top: none;
      }
    }
  }
}
.element_accordion,
.product_element_accordion {
  + .element_accordion,
  + .product_element_accordion {
    margin-top: 0 !important;

    details {
      &.accordion {
        summary {
          border-top: 0;
        }
      }
    }
  }
}
.content_section_container {
  .content_block_inner.typography {
    h2 {
      font-size: var(--text-copy-l);
      font-weight: 700;
      margin-bottom: var(--root-size);
    }
  }
}
.course_info_accordion {
  grid-column: 2 / -2;
  border-radius: var(--corner-size-large);
  background: var(--brand-color-faint);
  padding: var(--root-size);
  display: flex;
  flex-direction: column;
  gap: var(--root-size);
  overflow: hidden;

  .element {
    + .element {
      margin-top: var(--spacing);
    }
  }

  & details:has(:last-child:is(section.backdrop)) {
    padding-bottom: 0;
  }

  & > details {
    --heading-color: var(--brand-color);

    min-height: var(--large-form-element-size);
    background: var(--white);
    border: 1px solid var(--grey);
    border-radius: var(--corner-size-small);

    & > summary {
      height: var(--large-form-element-size);
    }


    & > section, > details {
      --heading-color: var(--text-color);
      padding-block: var(--root-size);

      .element {
        margin-inline: var(--root-size);

        &:has(> .banner-breakout) {
          margin-inline: 0;
        }
      }

      &.backdrop {
        color: var(--white);
        margin-inline: 0;
        padding-block: 0;
        display: grid;
        grid-template-columns: var(--large-form-element-size) 2fr 1fr;
        grid-template-rows: 1fr auto var(--large-form-element-size) var(--form-element-size) 1fr;
        grid-auto-flow: row;
        grid-auto-rows: auto;
        row-gap: var(--root-size);
        overflow: hidden;
        border-radius: 0 0 var(--corner-size-small) var(--corner-size-small);

        & > img {
          grid-column: 1 / -1;
          grid-row: 1 / -1;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
        }

        & > blockquote {
          grid-column: 2 / 3;
          grid-row: 2 / 3;
          font-size: calc(var(--text-title-size) * 1.25);
          font-weight: 700;
          font-style: oblique;
          position: relative;

          &::before {
            content: '';
            display: block;
            width: 16%;
            height: 2px;
            background-color: var(--white);
            position: absolute;
            top: calc(var(--form-element-size) * -1);
          }
        }

        & > cite {
          grid-column: 2 / 3;
          grid-row: 3 / 4;
          font-style: normal;

          & span {
            display: block;

            &.name {
              font-weight: 700;
            }
          }
        }

        & > a {
          grid-column: 2 / 3;
          grid-row: 4 / 5;
          color: var(--white);
          text-decoration: underline;
        }
      }
    }

    & div.course_reviews {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      position: relative;
      -moz-column-gap: var(--form-element-size);
           column-gap: var(--form-element-size);

      & > p {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
      }

      & > img {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        max-height: var(--form-element-size);
        justify-self: end;
      }

      & .review {
        display: flex;
        flex-direction: column;
        gap: var(--text-copy-xs);
        align-items: start;
        padding-top: var(--form-element-size);
        position: relative;

        &::after {
          position: absolute;
          right: 0;
          translate: 0 50%;
          content: attr(data-score) "/10";
          font-size: var(--text-copy-s);
        }

        & blockquote {
          font-style: oblique;
        }

        & cite {
          font-style: normal;
        }

        & svg {
          --empty-color: var(--grey);
          --filled-color: gold;

          height: var(--form-element-size);
          position: relative;
        }
      }
    }

    & .leadgen {
      display: grid;
      grid-template-rows: var(--text-subheading-size) auto var(--form-element-size);
      grid-template-columns: auto;
      grid-column-gap: var(--root-size);
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
      background-color: var(--brand-color-faint);

      & h3, button.cta {
        grid-column: 1 / -1;
      }

      &:has(img) {
        grid-template-columns: repeat(2, auto);

        & h3 {
          grid-column: 1 / 2;
        }

        & img {
          grid-column: 2 / 3;
          grid-row: 1 / -1;
        }
      }
    }

    & h4 + :is(p, ul) {
      margin-top: 0;
    }

    & table td {
      padding-right: var(--root-size);
    }

    &[open] {
      & > *:not(:first-child) {
        border-top: 1px solid var(--grey);
      }

      > :last-child:not(.backdrop) {
        padding-bottom: var(--form-element-size);
      }
    }
  }
}
.leadgenerator_holder {
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);

  &[class*='float-'] {
    @media (width >= 48rem) {
      margin: 0 0 var(--small-spacing) var(--spacing);
      width: 409px;
    }
  }
}
.leadgenerator {
  background-color: var(--brand-color-faint);
  padding: var(--big-spacing);
  border-radius: var(--corner-size-large);

  .leadgenerator_inner {
    display: flex;
    gap: var(--spacing);

    + * {
      margin-top: var(--spacing);
    }
  }

  .leadgenerator_content {
    > h2 {
      font-size: var(--text-copy-l);
    }
  }

  .leadgenerator_image {
    order: 2;
    max-width: 40%;
  }
}
.cost-table-footer {
  font-size: var(--text-copy-xs);
  color: var(--text-color-light);
  margin-top: var(--tiny-spacing);
}
.study_programme_module {

  details {
    font-size: var(--text-copy-xs);
  }

  summary {
    padding: 0;
  }

  .lucide-chevron-down {
    transition: transform 0.2s ease-out;
  }


  details[open] {
    summary {
      margin-bottom: var(--spacing);
    }

    .lucide-chevron-down {
      transform: rotate(180deg);
      color: var(--brand-color);
    }
  }
}
body.has-open-mobile-menu {
  overflow: hidden;
  height: 100vh;

  .mobile-menu-container {
    transform: translate3d(0, 0, 0);
  }
}
.mobile-menu-container {
  overflow: hidden;
  z-index: 100;
  position: fixed;
  top: 0;
  background-color: #fff;
  width: 100%;
  height: 100%;
  transform: translate3d(100%, 0, 0);
  transition: transform 200ms ease-out;

  &[data-active-level="1"] {
    .menu-level[data-level="0"] {
      transform: translateX(-100%);
    }
    .menu-level[data-level="1"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="2"] {
    .menu-level:is([data-level="0"],[data-level="1"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="2"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="3"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="3"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="4"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="4"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="5"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"],[data-level="4"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="5"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="6"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"],[data-level="4"],[data-level="5"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="6"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="7"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"],[data-level="4"],[data-level="5"],[data-level="6"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="7"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="8"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"],[data-level="4"],[data-level="5"],[data-level="6"],[data-level="7"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="8"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="9"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"],[data-level="4"],[data-level="5"],[data-level="6"],[data-level="7"],[data-level="8"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="9"]:not(.is-active) {
      display: none;
    }
  }

  .menu-level {
    overflow-y: auto;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    transform: translateX(100%);
    transition: transform 200ms ease-in-out;

    &.is-active {
      transform: translateX(0%);
    }

    .mobile-menu-back {
      position: relative;
      background-color: #009fe3;
      padding: 17px 16px;
      margin: 0 16px 0 -16px;
      color: #eaf7fc;
      font-size: 10px;
      border-right: 1px solid #35b6ee;

      &::before {
        font-size: calc(var(--root-size) * 1.25);
        line-height: calc(var(--root-size) * 1);
        content: "⟨";
        text-align: center;
        padding: 0;
      }
    }

    .mobile-menu-title {
      margin-top: 0;
      margin-bottom: 0;
      height: 50px;
      padding: 17px 16px;
      font-size: 14px;
      background-color: #009fe3;
      color: #fff;
      overflow-y: hidden;
    }

    .mobile-menu-title-big {
      padding-top: 14px;
      font-size: 20px;
    }

    .mobile-menu-list {
      list-style: none;
      padding: 0 0 126px 0;
    }

    .mobile-menu-item {
      border-top: solid 1px #ebebeb;
      padding: 0 16px;

      &:last-child {
        border-bottom: solid 1px #ebebeb
      }
    }

    .mobile-menu-item-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding-top: 17px;
      padding-bottom: 17px;
      color: #333;
    }

    .mobile-menu-item-link::before {
      order: 1;
      margin-left: 1em;
      font-size: calc(var(--root-size) * 0.6);
      color: #009fe3;
      background-color: #dceef7;
      border: 5px solid #dceef7;
      border-radius: 999px;
      content: "⟩";
      width: calc(var(--root-size) * 1.5);
      height: calc(var(--root-size) * 1.5);
      text-align: center;
      padding: 0;
    }

    .mobile-menu-item-link[href]::before {
      display: none;
    }

    .mobile-menu-item-link .sticker {
      position: relative;
      left: 5px;
      background-color: #009fe3;
      color: #fff;
      font-family: "Roboto", sans-serif;
      font-size: 11px;
      font-weight: bold;
      padding: 1px 6px;
      vertical-align: 2px;
    }
  }

  .menu-list-bottom {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    padding: 16px;
  }

  .menu-item-bottom {
    padding-top: 4px;

    a {
      color: #333;

      &::before {
        color: #009fe3;
        display: inline-block;
        min-width: 16px;
        margin-right: 4px;
        text-align: center
      }

      &.icon.handshake::before {
        font-size: 12px
      }
    }
  }
}
@media (width >= 64rem) {
  .mobile-menu-container {
    display: none
  }
}
.mobile-menu-close {
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 4px;
  width: 40px;
  height: 40px;
  font-size: 12px;
  color: #eaf7fc;

  &::before {
    color: var(--white);
    font-size: calc(var(--root-size) * 1.25);
    position: absolute;
    content: "✕";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
  }
}
.mobile-nav-sidebar-close-button,
.mobile-nav-close {
  display: none;
  z-index: 21;
  position: fixed;
  top: 106px;
  right: 20px;
  border-radius: 50%;
  padding: 4px;
  width: 18px;
  height: 18px;
  background: #333;
  color: #fff;
}
@media (width < 48rem) {
  .mobile-nav-sidebar-close-button.is-open.is-visible,
  .mobile-nav-close.is-open.is-visible {
    display: block;
  }
}
.mobile-nav-sidebar-close-button::before,
.mobile-nav-close::before {
  display: block;
  font-size: 10px;
  line-height: 1;
}
.nav-sidebar {
  position: relative;
  width: 100%;
  top: 0;
  transition: opacity 500ms;
}
form {
  --form-span: calc(var(--col-count) + 2);

  padding: var(--root-size);
  grid-column: 2 / calc(var(--form-span));

  /* First, establish some utilities from sizing the form as a whole */

  &.one_fourth {
    --form-span: round(down, calc(var(--col-count) * 0.25));
  }

  &.half, &.two_fourths {
    --form-span: calc(var(--col-count) * 0.5);
  }

  &.three_fourths {
    --form-span: round(down, calc(var(--col-count) * 0.75));
  }

  &.one_third {
    --form-span: round(down, calc(var(--col-count) * 0.33));
  }

  &.two_thirds {
    --form-span: round(down, calc(var(--col-count) * 0.66));
  }

  &.one_fifth {
    --form-span: round(down, calc(var(--col-count) * 0.2));
  }

  &.two_fifths {
    --form-span: round(down, calc(var(--col-count) * 0.4));
  }

  &.three_fifths {
    --form-span: round(down, calc(var(--col-count) * 0.6));
  }

  &.four_fifths {
    --form-span: round(down, calc(var(--col-count) * 0.8));
  }

  &.filter {
    padding: 0;
  }
}
/* Vacancy filter styles */
.filter_option_disabled {
  opacity: 0.5;
  pointer-events: none;
  color: var(--subtle-grey);

  input {
    cursor: not-allowed;
  }
}
/* Add the proper icons to the inputs that should have one */
div.middleColumn:has( > :is(select, input)) {
  --input-icon: "";
  position: relative;

  & ::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16%203V7M8%203V7M4%2011H20M4%207C4%206.46957%204.21071%205.96086%204.58579%205.58579C4.96086%205.21071%205.46957%205%206%205H18C18.5304%205%2019.0391%205.21071%2019.4142%205.58579C19.7893%205.96086%2020%206.46957%2020%207V19C20%2019.5304%2019.7893%2020.0391%2019.4142%2020.4142C19.0391%2020.7893%2018.5304%2021%2018%2021H6C5.46957%2021%204.96086%2020.7893%204.58579%2020.4142C4.21071%2020.0391%204%2019.5304%204%2019V7Z%22%20stroke%3D%22oklch(66.67%25%200.1473%20237.8deg)%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');

  }

  &:has( > input[type="date"], > input[type="datetime-local"]) {
    --input-icon: url("../img/icons/calendar.svg")
  }

  &:has( > input[type="time"]) {
    --input-icon: url("../img/icons/clock.svg")
  }

  &:has( > select) {
    --input-icon: url("../img/icons/chevron-down.svg");

    &::after {
      translate: 0 -40%;
    }
  }
}
input[type="checkbox"] {
  &:has(+ .lucide_checkbox_empty + .lucide_checkbox_checked) {
    position: relative;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    z-index: 2;
    width: 14px;
    height: 14px;
  }

  + .lucide_checkbox_empty {
    display: inline;
    color: var(--light-grey);
    position: relative;
    z-index: 1;
    transform: translateX(-17px);

    + .lucide_checkbox_checked {
      display: none;
      color: var(--brand-color);
      transform: translateX(-17px);
    }
  }

  &:checked + .lucide_checkbox_empty {
    display: none;

    & + .lucide_checkbox_checked {
      display: inline;
    }
  }
}
fieldset.filter_fieldset {
  > div:not(.range) {
    grid-column: 1 / 3;
    grid-row: auto / span 1;
    display: flex;
    align-items: center;
    gap: var(--text-copy-xxs);
    justify-content: flex-start;
    position: relative;
    justify-self: flex-start;
    width: 100%;
    font-size: var(--text-copy-s);
    color: var(--text-color-lighter);

    label + label {
      margin-left: -15px;
    }
  }
}
span.filter_count {
  display: grid;
  place-items: center;
  width: var(--root-size);
  aspect-ratio: 1;
  background: var(--brand-color-light);
  border-radius: var(--corner-size-large);
  font-size: var(--text-copy-xxs);
  color: var(--brand-color);
  font-weight: 700;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}
/* Start styling the basic building blocks of the form, regardless of its nesting or parent */
div.field, fieldset:not(.filter_fieldset), [class*="fieldgroup"], [class*="fieldholder"] {
  --form-input-border: 1px solid var(--subtle-grey);
  --form-transition: all 0.3s ease-out;
  --label-offset-multiplier: 1;
  --padding-size: var(--text-copy-xxs);
  --control-width: 100%;

  position: relative;
  width: var(--control-width);
  display: flex;
  flex-direction: column;
  gap: var(--text-copy-xxs);

  /*
  Some inputs have a node extra, to be placed on the right of the input.
  If this is the case, assume a 1:1 flex arrangement for now
  */

  &:has( > .left, > .right) > *:not(input[type="checkbox"]) {
    flex: 1;

    &.middleColumn {
      display: unset;
    }
  }

  /* Radio buttons have some unique styling that require selecting the input's parent as well */

  & div.middleColumn > div:has( > input[type="radio"]) {
    position: relative;
    display: flex;
    gap: var(--padding-size);

    & > label {
      --label-offset-multiplier: 3;
      left: calc(var(--padding-size) * var(--label-offset-multiplier));
    }
  }

  /*
  If we're dealing with a checkbox, the label needs no fancy treatment or transition,
  so we can simply place it inline
   */

  &:has( > input[type="checkbox"], > div.middleColumn > input[type="checkbox"]) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  /*
  Now, set up the labels so that the transitions may work. However, we need to target the nodes that house the labels,
  not the labels themselves. Regular styles in common first
  */

  &:not(:has(.form__fieldgroup)) label, div > label {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 1;
    padding-inline: 2px;
    background: var(--white);
    color: var(--text-color-faint);
    font-size: var(--text-copy-s);

    /* Only target those inputs whose labels need transition by filtering out labels that need no transition */

    &:not(
      :is(li, .optionset) > label,
      input[type="checkbox"] + label,
      input[type="radio"] + label,
      .checkboxset > label,
      .right,
      :has(.middleColumn > div.form__fieldgroup) > label
    ) {
      position: absolute;
      top: calc(var(--form-element-size) / 2);
      left: calc(var(--padding-size) * var(--label-offset-multiplier));
      translate: 0 -50%;
      pointer-events: none;

      &.with_prefix {
        left: calc(var(--padding-size) * var(--label-offset-multiplier) + 50px);
      }
    }

    /*  Those same filtered out labels? Add their own styling here. */

    &:is(input[type="checkbox"] + label, .checkboxset > label, .optionset > label) {
      font-size: var(--text-copy-s);
      color: inherit;
    }
  }

  /* If the container has a right item as well, neatly align it all  */

  &:has( > label.right) {
    flex-direction: row;
    align-items: center;

    & label {
      white-space: nowrap;
    }
  }

  /* Now, to style the actual (normal) inputs themselves */

  & input:not([type="checkbox"]):not([type="radio"]), select, textarea, sl-select {
    min-height: var(--form-element-size);
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: var(--padding-size);
    outline: none;
    border: var(--form-input-border);
    border-radius: var(--corner-size-small);
    background: var(--white);
  }

  /* If the input is a radio button, style the container & label to make it appear as one component */

  & :is( div, li ):has( > input[type="radio"]) {
    --outline-color: var(--subtle-grey);

    /*min-height: var(--form-element-size);*/
    /*margin-bottom: var(--text-copy-xs);*/
    border: none;
    border-radius: var(--corner-size-small);
    outline: 1px solid var(--outline-color);
    background: transparent;

    &.odd, &.even {
      margin-bottom: var(--text-copy-xs);
    }

    &:not(.use-utility-width) {
      width: calc(100% - (var(--padding-size) / 2));
    }

    & label {
      left: unset;
      background: none;
      white-space: nowrap;
      color: var(--text-color);
    }

    &:has( > input:checked) {
      --outline-color: var(--brand-color-mid);
      background: var(--brand-color-faint);
    }
  }

  /* Align checkboxes in an optionset (instead of singular instances) */

  ul.optionset.horizontal {
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    flex-direction: row;
    gap: var(--text-copy-xs);
  }

  & .optionset li {
    display: flex;
    align-items: center;
    gap: var(--text-copy-xxs);
    margin-bottom: var(--text-copy-xs);

    & label {
      font-size: unset;
      color: unset;
    }
  }

  /* When the CompositeField class is used, we want inputs laid out as a row, now as the default column */

  &.CompositeField:not(.userform-fields > .CompositeField) {
    flex-direction: row;

    & > [class*="compositefield-child"] {
      flex: 1;
    }
  }

  /* Hide some specific classes to bait bad actors */

  & :is([id*="_Url_Holder"], [id*="_Comment_Holder"], [class*="uploadfield-holder"]) {
    display: none;
  }

  /* This div usually serves us no purpose, and is more of a hindrance */

  & .middleColumn {
    display: contents;
  }

  /* fieldgroups should be rendered as columns */

  & .fieldgroup {
    display: flex;
    flex-direction: column;
    gap: var(--text-copy-xs);
  }

  /*
  Similar to the .right selector? Same, but different
  Reinstate the middleColumn div so we make room for additional clarifying text.
  Add some special cases for when radio or checkboxes are used
  */

  & > :has(.right-title ) {
    flex-direction: row;
    align-items: center;

    & div.middleColumn {
      flex: 1;
      display: flex;
      flex-direction: column;

      &:has(div > input[type="radio"]) {
        gap: calc(var(--padding-size));
      }

      &:has(> input[type="checkbox"]) {
        flex-direction: row;
        gap: calc(var(--padding-size));
      }
    }

    & .right-title {
      flex: 1;
    }
  }

  /*---------------*/

  /* Finally, offer some utilities to set the width of the inputs, regardless of the form's own sizing */

  &.one_fourth {
    --control-width: 25%;
  }

  &.half, .two_fourths {
    --control-width: 50%;
  }

  &.three_fourths {
    --control-width: 75%;
  }

  &.one_third {
    --control-width: 33%;
  }

  &.two_thirds {
    --control-width: 66%;
  }

  &.one_fifth {
    --control-width: 20%;
  }

  &.two_fifths {
    --control-width: 40%;
  }

  &.three_fifths {
    --control-width: 60%;
  }

  &.four_fifths {
    --control-width: 80%;
  }
}
div.field {
  padding-bottom: var(--root-size);
}
fieldset div.field, [class*="fieldgroup"] div.field, [class*="fieldholder"] div.field {
  padding-bottom: inherit;
}
/*
For clarity's sake, add the label interactivity as a separate CSS section;
in this case, developer comprehension outweighs CSS brevity :)

Again, target the basic form blocks
*/
div.field, fieldset:not(.filter_fieldset), [class*="fieldgroup"], [class*="fieldholder"] {

  /*
  The design repurposes labels as label _and_ placeholder: in other words, the actual placeholder "nodes" are useless.
  Make them invisible
  */

  & ::-moz-placeholder {
    opacity: 0;
  }

  & ::placeholder {
    opacity: 0;
  }

  /* Set the transition speed and the likes*/

  & label {
    transition: var(--form-transition);
  }

  /*
  If the naughty inputs have no (valid) entry yet, hide the "value" text browsers add themselves
  otherwise, it'd interface with the label
  */

  &:has(input:is([type="date"], [type="time"], [type="datetime-local"]):invalid) > div.middleColumn > input {
    color: transparent;
  }

  /* Ah, but _do_ show the default value whenever the input has focus  */

  &:has(input:is([type="date"], [type="time"], [type="datetime-local"])):focus-within > div.middleColumn > input {
    color: inherit;
  }

  /*
  Prepare for some complex selectors :)
  In a nutshell: we target .fields that have either focus or user-entered values
  Unfortunately, not all inputs are created equal, so we need to target each differently.

  Basic <inputs /> (text, number, password, textarea) when focused, user input detected
  More exotic <inputs /> (date, time, datetime) need the :required attribute as well
  <Selects> need their first option to be disabled so we can detect when the user has made a conscious selection
  */

  select:invalid {
    color: var(--text-color-faint);

    option:not([value=""]):not(:disabled) {
      color: var(--text-color);
    }
  }

  select:valid {
    option[value=""], option:disabled {
      color: var(--text-color-faint);
    }
  }

  select:disabled,
  input:disabled {
    opacity: 1;
    color: var(--text-color-light);
  }

  &:not(:has(.form__fieldgroup)) {
    &:has( :is(input:not([type="date"], [type="time"], [type="datetime-local"]), textarea):is(:focus, :not(:placeholder-shown), :-webkit-autofill)),
    &:has( input:is([type="date"], [type="time"], [type="datetime-local"]):is(:valid, :focus-within, :active)), /* Date inputs need the required attribute for the selector to work*/
    &:has( select option:disabled:not(:checked)), /* Requires an option with the disabled attribute set (commonly the first one) */
    &:has( select option:checked:not(:disabled)) /* For any preselected selects */
    {
      & > :is(label, div.middleColumn > label):not(
        input[type="checkbox"] + label,
        .optionset > label,
        .checkboxset > label
        ) {
        top: 0;
        background: var(--white);
        font-size: var(--text-copy-xs);

        &.with_prefix {
          left: calc(var(--padding-size) * var(--label-offset-multiplier));
        }
      }
    }
  }
}
.userform {
  .userform-progress {
    .page-progress {
      text-align: center;
      padding-bottom: var(--root-size);
    }

    .progress {
      .progress-bar {
      }
    }
  }

  nav {
    ul.step-buttons {
      display: flex;
      justify-content: center;
      -moz-column-gap: calc(var(--col-gap) / 2);
           column-gap: calc(var(--col-gap) / 2);
      padding-bottom: var(--root-size);

      li.step-button-wrapper {
        &.current {
        }

        &.viewed {
        }

        .step-button-jump {
          margin-left: inherit !important;
        }

        &:has(button[style*='display: none']) {
          display: none !important;
        }
      }
    }

    &.step-navigation {
      ul.step-buttons {
        display: flex;
        justify-content: flex-start;

        li.step-button-wrapper {
          &.current {
          }

          &.viewed {
          }

          .step-button-jump {

          }
        }
      }
    }
  }

  .hide {
    display: none;
  }

  .progress-title {

  }

  .userform-fields {
    padding-top: var(--root-size);
  }
}
body > :is(main, footer) {
  transition: var(--standard-transition);
}
/*
The selector commented below _used_ to work, but somewhere the combo of :has() and :not() broke in Gecko engines.
Resort to using focus in the meantime until w get to implementing the search functionality
 */
/* body:has(#header_search input:not(:placeholder-shown))  */
body:has(#menu_container:is(:focus, :focus-within), #header_search > input:focus) > :is(main, footer)
{
  filter: brightness(0.1);
  pointer-events: none;
}
body #menu_container:is(:focus, :focus-within) > #menu_drawer {
  padding-block: var(--menu-height);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
body:not(.checkout) > header,
body > div#menu_container,
body > main > nav {
  translate: 0 0;
  transition: translate 0.3s ease-out;

  &.aboveViewport {
    translate: 0 -160px;
  }
}
div.element:has(.review_carousel.as_strip) {
  background: unset;

  & .scrollable {
    overflow: visible;
  }

  & div.carousel_controls {
    display: none;
  }

  & div.review {
    background: var(--brand-color-faint);
    border: 2px solid var(--brand-color-light);
    border-radius: var(--corner-size-medium);
    width: 66dvw;
    margin-left: 0;

    & blockquote {
      padding: var(--form-element-size);
      margin-top: 0;
      border-bottom: 2px solid var(--brand-color-light);
      font-size: var(--text-subheading-size);
    }
  }

  &.backdrop {
    margin: 0;
  }
}
div.course_finder > form.filter.as_dialog {
  display: block;
}
body:has(dialog[open], .as_dialog) {
  overflow: hidden;
}
/* For dev only */
#header_search_results {
  transition: var(--standard-transition);
}
/* body:has(#header_search > input:not(:placeholder-shown)) #header_search_results { */
body:has(#header_search > input:focus) #header_search_results {
  height: auto;
  max-height: 100vh;
  overflow: scroll;
  padding-block: var(--text-subheading-size);
}
#header_search #clear_search_icon {
  opacity: 1;
  transition: var(--standard-transition);
}
#header_search:has(input:-moz-placeholder) #clear_search_icon{
  opacity: 0;
}
#header_search:has(input:placeholder-shown) #clear_search_icon{
  opacity: 0;
}
/* this is an unparsed icon */
i[data-lucide] {
  display: none;
}
/* this is a SVG */
.lucide {
  display: inline-flex;
  /* self align center */
  align-self: center;
  width: var(--text-copy-xs);
  height: var(--text-copy-xs);
}
.icon_dot {
  display: inline-grid;
  place-items: center;
  width: var(--text-copy-l);
  height: var(--text-copy-l);
  font-size: var(--text-copy-xs);
  font-weight: 900;
  color: var(--brand-color);
  background: var(--brand-color-light);
  border-radius: 100%;
}
.lucide-medium {
  width: var(--text-copy-m);
  height: var(--text-copy-m);
}
.lucide-large {
  width: var(--text-copy-l);
  height: var(--text-copy-l);
}
@media (width < 80rem) {

  /*
  the grid actually has 22 columns: 20 regular ones + 2 outer "auto" columns that
  are actually spacings to center the content in the viewport.
  These spacings don't exist on tablet or phone form factors, so we need to calculate our sizings
  with 22 instead of 20 in these cases.
  */
  /*[class*="subgrid"]{*/
  /*  --col-count: 22;*/
  /*}*/
  body.with_sidebar aside {
    display: none;
  }

  div.content_block {

    &.backdrop {
      margin: 0 calc(2 * var(--root-size));
    }
  }

  div.content_block:has(.breakout) {
    padding-bottom: var(--root-size); /* account for any scrollbar */
    overflow: hidden;
    overflow-x: auto;

    & > *:not(.breakout) {
      position: -webkit-sticky;
      position: sticky;
      left: 0;
      /*grid-column: inherit;*/
    }


  }

  div.review_carousel .scrollable {
    & .review {
      & blockquote {
        font-size: var(--text-heading-size);
      }
    }
  }

  div.figure_strip {
  }

  article.mobile_column {
    .subgrid.one_fourth {
      .course_details + p {
        grid-row: 3 / 4;
      }

      .button {
        grid-row: 4 / 5;
      }
    }
  }

  #course_compare_dialog {
    width: 90dvw;
  }

  div.course_finder {
    grid-template-rows: var(--form-element-size) 0 auto;
    grid-auto-rows: auto;
    position: relative;
    top: 0;

    & > form.filter {
      --offset: calc(var(--header-height));

      grid-column: 1 / -1;
      z-index: 2;
      background: var(--white);
      padding: var(--root-size);
      position: fixed;
      top: var(--offset);
      height: calc(100dvh - var(--offset));
      overflow: scroll;
      display: none;

      & > button.cta {
        bottom: 0;
        box-shadow: 0 0 0 var(--root-size) var(--white), 0 calc(var(--root-size) * -1) var(--root-size) var(--text-copy-xxs) var(--subtle-grey);
      }
    }

    & > ul, /* legacy */
    & > .course_finder_results {
      grid-column: 3 / -3;

      & > :not(.metadata), /* legacy */
      & > .serp_course_card
      {
        grid-template-columns: 1fr;
        grid-template-rows: var(--text-heading-size) var(--root-size) auto;
        -webkit-padding-after: var(--root-size);
                padding-block-end: var(--root-size);

        & h3 {
          grid-column: 1 / -1;
          grid-row: 1 / 2;
        }

        & input[type="checkbox"] {
          grid-column: 1 / -1;
          grid-row: 3 / 4;
          place-self: start;
        }

        & label {
          grid-column: 1 / -1;
          grid-row: 3 / 4;
          display: block;
          position: relative;
          left: var(--root-size);
        }

        & > p.price_indication {
          grid-column: 1 / -1;
          grid-row: 4 / 5;
          justify-self: start;
        }

        & > a.ghost {
          grid-column: 1 / -1;
          grid-row: 4 / 5;
          place-self: end;
          height: 100%;

          &:first-of-type { /* the info button */
            position: relative;
            right: var(--form-element-size);
          }

          &:last-of-type { /* the fav button */
            grid-column: 1 / -1;
            width: var(--root-size);
          }
        }

        & details {
          grid-column: 1 / -1;
        }
      }
    }

    & > button#course_form_cta {
      display: flex;
    }

    & .pagination_controls {
      grid-column: 3 / -3;
    }
  }

  ul.zebra_columns {
    grid-template-columns: repeat(auto-fit, minmax(200px, -webkit-max-content));
    grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
    grid-auto-flow: dense;
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;

    & li {
      white-space: nowrap;
    }

    & > li:is(:nth-of-type(6n+1), :nth-of-type(6n+2), :nth-of-type(6n+3)) {
      background: unset;
    }

    & > li:is(:nth-of-type(even)) {
      background: var(--grey);
    }
  }

  div.pdp_block {
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: var(--large-form-element-size);
         column-gap: var(--large-form-element-size);


    & > h2 {
      grid-column: 1 / -1;
      grid-row: 1 / span 1;
      font-size: var(--text-heading-size);
    }

    & > .course_signup {
      grid-column: 2 / 3;
    }
  }

  div.contactbar {
    display: flex;
    flex-direction: column;
    height: auto;
    position: relative;
    margin: var(--root-size);

    & > img {
      position: absolute;
      scale: unset;
      height: var(--large-form-element-size);
      translate: 0 calc(0px - var(--large-form-element-size) * 0.275);
      top: 0;
      right: 0;
    }

    & ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      grid-auto-flow: row;
      align-items: start;
      padding: var(--root-size);
      gap: var(--root-size);

      & li {
        & a {
          justify-content: start;
        }

        &:first-child {
          grid-column: 1 / -1;
          border-bottom: 1px solid var(--brand-color-mid);
        }
      }
    }
  }

}
@media (width < 64rem) {
  body:is(body, body.with_sidebar) > main > section#hero {
    -webkit-padding-start: calc(var(--root-size) * 2);
            padding-inline-start: calc(var(--root-size) * 2);
    aspect-ratio: 2/1;

    &.smaller {
      aspect-ratio: 3/1;
    }

    & h1, .cta {
      grid-column: 3 / -3;
    }
  }

  body > header {
    #menu_icon {
      z-index: 10;
      display: block;
      position: relative;
      padding: 0 var(--root-size) 0 0;
    }

    & #header_logo {
      position: relative;

      & svg#logo_mark {
        /*& text {*/
        /*  display: none;*/
        /*}*/
      }
    }

    & input {
      font-size: var(--root-size) !important;
    }
  }

  body:is(body, body.with_sidebar) > #menu_container {
    display: none;
  }

  body:is(body, body.with_sidebar) > main {
    > nav {
      top: var(--header-height);
      grid-row: 1 / span 1;

      & > #crumbtrail {
        -webkit-padding-start: var(--root-size);
                padding-inline-start: var(--root-size);
        font-size: var(--text-copy-xxs);
        grid-column: 2 / -2;
      }

      & > ul.ticks_list {
        display: none;
      }
    }

    > section#hero + nav {
      top: inherit;
      grid-row: inherit;
    }
  }

  body:is(body, body.with_sidebar) > main {
    grid-row: 2 / 6;
  }

  .content_card_block {

    &.two_thirds {
      grid-template-columns: 1fr;
      grid-auto-flow: column;

      & article {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
      }

      & img, video {
        grid-column: 1 / -1;
        aspect-ratio: 16/9;
        /*max-height: 150px;*/
        overflow: hidden;
        height: auto;
        margin-bottom: var(--root-size);
        border-radius: var(--corner-size-medium);
      }
    }

    &.half {
      grid-template-rows: 7fr 8fr;
    }
  }

  div.review_carousel .scrollable {
    grid-auto-columns: 100%;
    grid-template-columns: 100%;
  }

  div.content_block:has(article.mobile_column) > article.mobile_column {
    display: flex;
    flex-direction: column;

    & .carousel .scrollable {
      & > div {
        min-width: 100%;
      }
    }
  }

  article.mobile_column {
    .subgrid.one_fourth {
      .course_details + p {
        grid-row: inherit;
      }

      .button {
        grid-row: inherit;
      }
    }
  }

  body > footer {
    grid-template-rows: auto minmax(33dvh, auto) minmax(15dvh, auto);

    & div#footer_nav {
      padding: var(--text-title-size) var(--text-copy-xs);
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, auto);

      & > div {
        border: none
      }

      & > div > div:not(#newsletter_signup) {
        display: none;
      }

      & #newsletter_signup {
        & #newsletter_signup_form {
          display: flex;
          flex-direction: column;

          & input, select {
            width: 100%;
            min-height: var(--form-element-size);
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;
          }

        }
      }

      & nav {
        display: flex;
        flex-direction: column;

        & details {
          padding: var(--root-size);
          border-top: 1px solid var(--brand-color-mid);

          & summary {
            pointer-events: unset;
            position: relative;

            &::after {
              content: "⟩";
              position: absolute;
              right: 0;
              top: 50%;
              float: right;
              display: grid;
              place-items: center;
              width: var(--root-size);
              height: var(--root-size);
              font-size: var(--text-copy-xxs);
              background: var(--white);
              color: red;
              border-radius: 999px;
              translate: 0 -50%;
              rotate: 90deg;
            }

            & h5 {
              font-size: var(--text-copy-s);
              font-weight: 300;
            }
          }
        }
      }
    }

    & div#signoff > #signoff_links {
      display: grid;
      grid-template-columns: repeat(3, auto);
      grid-template-rows: repeat(2, var(--text-copy-xxs));
      place-items: center;

      & a {
        grid-column: auto / span 1;
        grid-row: 1 / 2;
        display: block;
      }

      & span {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        display: block;
      }
    }
  }
}
/*Phone width as used by NTI: (max-width: 767px)*/
@media (width < 64rem) {
  :root {
    --footer-height: auto;
  }

  div.content_block {

    &.element_image_banner {
      padding-inline: inherit;
      padding-right: inherit;
    }

    grid-template-rows: auto;

    & > [class*="subgrid"] {
      &.content_card_block {
        &.half {
          grid-template-rows: 5fr 8fr;
        }
      }
    }
  }

  div.pdp_block {
    grid-template-columns: 1fr;

    & > .course_signup {
      grid-column: 1 / -1;
      grid-row: 3 / span 1;
    }


    .fixed_course_header {
      top: unset;
      bottom: 0;

      & h3, ul, div.flex_row.rating {
        display: none;
      }

      & .flex_row > .flex_row:has(p.price_indication) {
        justify-content: unset;
        gap: var(--root-size);
        padding-inline: var(--root-size);
      }
    }
  }

  body:is(body, body.with_sidebar) > main > section#hero {
    aspect-ratio: 1.5/1;

    &.smaller {
      aspect-ratio: 2/1;
    }

  }

  body > header {
    > .inner {
      grid-template-columns: 45px 1fr -webkit-max-content;
      grid-template-columns: 45px 1fr max-content;
    }

    #header_logo {
      & svg#logo_mark {
        & text {
          display: none;
        }
      }
    }

    #header_links {
      a:not(.mobile) {
        display: none;
      }

      & span {
        display: none;
      }
    }
  }

  div.review_carousel .scrollable {
    & .review {
      overflow: hidden;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto 125px;

      img {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        width: 90px;
        margin-top: calc(.5 * var(--root-size));
        margin-left: calc(2 * var(--root-size));
      }

      .inner {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        padding-left: 0;
        grid-column: 1 / -1;
        grid-row: 1 / -1;

        & blockquote {
          display: grid;
          grid-column: 1 / -1;
          grid-row: 1 / 2;
          min-height: 175px;
          overflow: visible;
          height: 100%;
        }

        & cite {
          display: flex;
          flex-direction: column;
          grid-column: 1 / -1;
          grid-row: 2 / 3;
          align-self: center;
          margin: 0 0 0 140px;
          max-height: 100%;
          align-content: flex-start;
        }
      }
    }
  }

  .flexed_grid {
    flex-direction: column;
  }
}
@media (width < 48rem) {
  .container--grid div.content_block, /*make it more important without !important*/
  div.content_block {
    &:has(div[class*="_third"]) {
      & div.one_third,
      &.two_thirds {
        flex-basis: 100%;
      }
    }

    & > [class*="subgrid"] {
      &.content_card_block {
        &.half {
          grid-column: inherit;
          grid-template-rows: minmax(200px, 1fr) auto;
        }
      }
    }
  }

  .content_card_block {

    &.full {
      grid-template-columns: 1fr;
      grid-auto-flow: column;

      & article {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
      }

    }

    &.three_fourth {
      grid-column: 1 / -1;
    }

    &.sm-two_fourths {
      grid-column: auto / span calc(var(--col-count) / 2);
    }
  }
}
@media (width < 40rem) {
  body:is(body, body.with_sidebar) > main > section#hero {
    aspect-ratio: 1;

    &.smaller {
      aspect-ratio: 1.5/1;
    }

    & h1 {
      /*font-family: var(--brand-typeface), sans-serif;*/
      /*font-weight: 500;*/
      /*line-height: 125%;*/
      font-size: calc(0.85 * var(--text-title-size));

      & strong {
        /*line-height: 125%;*/
        /*font-weight: 700;*/
        font-size: calc(var(--text-title-size));
      }
    }
  }

}
/*
* {
  outline: 1px solid red;
}

iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  min-height: 400vh;
  opacity: 0.2;
  mix-blend-mode: difference;
}
*/
/* Open Props */
/*@import "open-props/style";*/
/**
 * above not working, bug in postcss in combination with open props,
 * see: https://github.com/postcss/postcss-import/issues/492 and https://github.com/argyleink/open-props/issues/545
 **/
:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem,min(2vw,1rem));--font-size-fluid-1:max(1rem,min(4vw,1.5rem));--font-size-fluid-2:max(1.5rem,min(6vw,2.5rem));--font-size-fluid-3:max(2rem,min(9vw,3.5rem));--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--ease-circ-in:cubic-bezier(.6,.04,.98,.335);--ease-circ-in-out:cubic-bezier(.785,.135,.15,.86);--ease-circ-out:cubic-bezier(.075,.82,.165,1);--ease-cubic-in:cubic-bezier(.55,.055,.675,.19);--ease-cubic-in-out:cubic-bezier(.645,.045,.355,1);--ease-cubic-out:cubic-bezier(.215,.61,.355,1);--ease-expo-in:cubic-bezier(.95,.05,.795,.035);--ease-expo-in-out:cubic-bezier(1,0,0,1);--ease-expo-out:cubic-bezier(.19,1,.22,1);--ease-quad-in:cubic-bezier(.55,.085,.68,.53);--ease-quad-in-out:cubic-bezier(.455,.03,.515,.955);--ease-quad-out:cubic-bezier(.25,.46,.45,.94);--ease-quart-in:cubic-bezier(.895,.03,.685,.22);--ease-quart-in-out:cubic-bezier(.77,0,.175,1);--ease-quart-out:cubic-bezier(.165,.84,.44,1);--ease-quint-in:cubic-bezier(.755,.05,.855,.06);--ease-quint-in-out:cubic-bezier(.86,0,.07,1);--ease-quint-out:cubic-bezier(.23,1,.32,1);--ease-sine-in:cubic-bezier(.47,0,.745,.715);--ease-sine-in-out:cubic-bezier(.445,.05,.55,.95);--ease-sine-out:cubic-bezier(.39,.575,.565,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--gradient-space: ;--gradient-1:linear-gradient(to bottom right var(--gradient-space),#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right var(--gradient-space),#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right var(--gradient-space),#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right var(--gradient-space),#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110% var(--gradient-space),#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left var(--gradient-space),#000,#fff);--gradient-7:linear-gradient(to bottom right var(--gradient-space),#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0% var(--gradient-space),#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center var(--gradient-space),#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25% var(--gradient-space),gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left var(--gradient-space),#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10% var(--gradient-space),#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200% var(--gradient-space),#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right var(--gradient-space),lime,cyan);--gradient-15:linear-gradient(to bottom right var(--gradient-space),#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250% var(--gradient-space),#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25% var(--gradient-space),blue,#8a2be2);--gradient-18:linear-gradient(0deg var(--gradient-space),rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg var(--gradient-space),rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg var(--gradient-space),rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg var(--gradient-space),rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg var(--gradient-space),rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg var(--gradient-space),rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right var(--gradient-space),#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center var(--gradient-space),orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115% var(--gradient-space),red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right var(--gradient-space),#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right var(--gradient-space),#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0% var(--gradient-space),#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50% var(--gradient-space),#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right var(--gradient-space),#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left var(--gradient-space),#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105% var(--gradient-space),#fff,orchid);--gradient-29:radial-gradient(circle at top right var(--gradient-space),#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right var(--gradient-space),#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left var(--gradient-space),#adffd6,rgba(173,255,214,0));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}
@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}
@supports (background:linear-gradient(to right in oklab,#000,#fff)){:where(html){--gradient-space:in oklab}}
@keyframes fade-in{to{opacity:1}}
@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}
@keyframes fade-out{to{opacity:0}}
@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}
@keyframes scale-up{to{transform:scale(1.25)}}
@keyframes scale-down{to{transform:scale(.75)}}
@keyframes slide-out-up{to{transform:translateY(-100%)}}
@keyframes slide-out-down{to{transform:translateY(100%)}}
@keyframes slide-out-right{to{transform:translateX(100%)}}
@keyframes slide-out-left{to{transform:translateX(-100%)}}
@keyframes slide-in-up{0%{transform:translateY(100%)}}
@keyframes slide-in-down{0%{transform:translateY(-100%)}}
@keyframes slide-in-right{0%{transform:translateX(-100%)}}
@keyframes slide-in-left{0%{transform:translateX(100%)}}
@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}
@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}
@keyframes shake-z{0%,to{transform:rotate(0deg)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes ping{90%,to{opacity:0;transform:scale(2)}}
@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}
@keyframes float{50%{transform:translateY(-25%)}}
@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}
@keyframes pulse{50%{transform:scale(.9)}}
@media (prefers-color-scheme:dark){@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}}
@media (prefers-color-scheme:dark){@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}}
/**
 * Swiper 12.0.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 21, 2025
 */
:root{--swiper-theme-color:#007aff}
:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}
.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}
.swiper-vertical>.swiper-wrapper{flex-direction:column}
.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}
.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}
.swiper-horizontal{touch-action:pan-y}
.swiper-vertical{touch-action:pan-x}
.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}
.swiper-slide-invisible-blank{visibility:hidden}
.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}
.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}
.swiper-backface-hidden .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}
.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}
.swiper-3d .swiper-wrapper{transform-style:preserve-3d}
.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}
.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}
.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}
.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}
.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}
.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}
.swiper-lazy-preloader-black{--swiper-preloader-color:#000}
@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}
.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}
.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}
.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}
:root{--swiper-navigation-size:44px}
.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}svg{height:100%;-o-object-fit:contain;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}
.swiper-button-lock{display:none}
.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}
.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon{transform:rotate(180deg)}}
.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}
.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon{transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon{transform:rotate(0deg)}}}
.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon{transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon{transform:rotate(90deg)}}}
.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}
.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}
.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}
.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}
.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}
.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}
.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}
.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}
.swiper-pagination-lock{display:none}
.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}
.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}
.swiper-scrollbar-cursor-drag{cursor:move}
.swiper-scrollbar-lock{display:none}
.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}}
.swiper-slide-zoomed{cursor:move;touch-action:none}
.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}
.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}
.swiper-grid>.swiper-wrapper{flex-wrap:wrap}
.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}
.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}
.swiper.swiper-cube{overflow:visible}
.swiper-cube{.swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}
.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}
.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:0}}
.swiper.swiper-flip{overflow:visible}
.swiper-flip{.swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}
.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:0}}
.swiper-creative{.swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}
.swiper.swiper-cards{overflow:visible}
.swiper-cards{.swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}}
/* optional imports that use the props */
/*@import "../../node_modules/open-props/normalize.min.css";*/
/*@import "../../node_modules/open-props/buttons.min.css";*/
/* just light or dark themes */
/*@import "../../node_modules/open-props/normalize.dark.min.css";*/
/*@import "../../node_modules/open-props/buttons.dark.min.css";*/
/*@import "../../node_modules/open-props/normalize.light.min.css";*/
/*@import "../../node_modules/open-props/buttons.light.min.css";*/
/* individual imports */
/*@import "../../node_modules/open-props/indigo.min.css";*/
/*@import "../../node_modules/open-props/easings.min.css";*/
/*@import "../../node_modules/open-props/animations.min.css";*/
/*@import "../../node_modules/open-props/sizes.min.css";*/
/*@import "../../node_modules/open-props/gradients.min.css";*/
/* see PropPacks for the full list */
/* Dependencies */
:root {
  --kidzz-white: oklch(0.997 0 89.876);
  --kidzz-grey: oklch(0.839 0 89.876);
  --kidzz-blue-light: oklch(0.954 0.018 234.499);
  --kidzz-blue: oklch(0.6527 0.184 249.827);
  --kidzz-blue-dark: oklch(0.3805 0.2 264.7);
  --kidzz-orange-light: oklch(0.931 0.043 58.106);
  --kidzz-orange: oklch(0.6657 0.187 45.90);
  --kidzz-green: oklch(0.699 0.22 139.41);


  /*!* Color overrides *!*/
  --brand-color: var(--kidzz-blue);
  --brand-color-light: var(--kidzz-blue-light);
  --brand-color-faint: var(--kidzz-blue-light);
  --white: var(--kidzz-white);
  --grey: var(--kidzz-grey);
  --cta-orange: var(--kidzz-orange);
  --cta-green: var(--kidzz-green);


  /*!* Color assignments *!*/
  --header-background-color: var(--kidzz-white);
  --heading-color: var(--kidzz-orange);

  --header-height: 5.375rem;
  --footer-height: auto;

}
/* Overrides */
:root {
  --brand-typeface: "Open Sans", Roboto;
}
body > header {
  padding-block: unset;
}
#kiddz-header-page-nav {
  flex: 1;
  display: flex;

  & a.kidzz-header-page-link {
    color: var(--kidzz-orange);
    padding-inline: 25px;
    font-size: var(--text-subheading-size);
    font-weight: 700;
    display: flex;
    align-items: center;

    &.active, &:hover, &:focus, &:active {
      background: var(--kidzz-orange-light);
    }
  }
}
#logo_mark {
  height: 3.5rem;
}
body header #header_links {
  gap: 35px;
}
body header #header_links a,
body header #header_links a:not(:last-of-type) {
  color: var(--text-color);
  font-size: var(--root-size);
  border-right: none;
  padding-right: var(--ghost-button-padding);

  &.button {
    border: 1px solid var(--text-color);
  }
}
body > main {
  grid-row-start: 2;

  & nav:has(#crumbtrail) {
    display: none;
  }
}
/* Footer */
body > footer {
  background: var(--kidzz-orange);
  overflow: hidden;
  grid-template-rows: auto 3rem;

  & div#footer_nav {
    --text-color: var(--text-color);
    --heading-color: var(--kidzz-orange);

    padding-block: 50px 75px;
    background: #fff;
    border-top: 3px solid var(--kidzz-orange);

    & * {
      flex: 1;
      font-size: var(--root-size);
    }

    & > nav {
      grid-row-start: 1;
      display: flex;

      & > img {
        max-height: 75px;
        -o-object-fit: contain;
           object-fit: contain;
        -o-object-position: left;
           object-position: left;
      }
    }
  }

  & #socials {
    display: flex;
    align-items: center;
    gap: var(--icon-size);
    padding-top: 40px;

    & img {
      flex: unset;
      height: 30px;
    }
  }

  & div#payment_methods {
    grid-row: auto / span 1;
    grid-column: 1 / -1;
    height: 54px;
    background-color: var(--kidzz-orange-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--icon-size);

    & img {
      height: var(--icon-size);
      width: auto;
    }
  }

  & #disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    grid-column: 1 / -1;
    font-size: var(--text-copy-s);

    & a {
      position: relative;
      display: flex;

      &:after {
        position: relative;
        padding-inline: 25px;
        content: "-";
        display: block;
        width: var(--root-size);
        height: 1px;
      }
    }
  }
}
footer {
  details {
    summary {
      padding-left: 0;
      margin-bottom: var(--col-gap);

      h5 {
        color: var(--kidzz-orange);
      }
    }
  }
}
.element_intro {
  & .element_title {
    > h2 {
      --heading-color: var(--kidzz-orange);
    }
  }
}
.hero_alignment {
  padding: 35px;
  background-color: var(--white);
  border-radius: 10px;
  grid-row: 4/ 5 !important;

  h1, h2, h3, p {
    --heading-color: var(--kidzz-orange);
    --text-color: var(--black);
  }
}
:is(.button, .cta, button:not(.regular), input[type="submit"]) {
  &:not(.react-international-phone-country-selector-button) {
    color: var(--kidzz-white);
  }
}