/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
 * SIZE SCALE
 * This is a Major Third scale that powers all the utilities that
 * it is relevant for (font-size, margin, padding). All items are
 * calcuated off the base size, so change that and cascade across
 * your whole project.
 */
/**
 * COLORS
 * Colors are shablue between backgrounds and text by default. 
 * You can also use them to power borders, fills or shadows, for example.
 */
/**
 * CORE CONFIG
 * This powers everything from utility class generation to breakpoints
 * to enabling/disabling pre-built components/utilities.
 */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue: #2a1b54;
  --color-blue-mid-1: #31337c;
  --color-blue-mid-2: #4d5da2;
  --color-blue-mid-3: #748ac5;
  --color-blue-light-1: #98a6d5;
  --color-blue-light-2: #bbc1e2;
  --color-blue-light-3: #e1e5f4;
  --color-grey-light: #f8f6f5;
  --color-grey-mid: #f2f2f2;
  --color-grey-dark: #333333;
  --color-custom-purple-tint: #57487f;
  --font-base: 'Montserrat', sans-serif;
  --size-100: 0.4rem;
  --size-200: 0.6rem;
  --size-300: 0.8rem;
  --size-400: 1rem;
  --size-500: 1.33rem;
  --size-600: 1.77rem;
  --size-700: 2.4rem;
  --size-800: 3.1rem;
  --size-900: 4.1rem;
  --size-rel-100: 0.4em;
  --size-rel-200: 0.6em;
  --size-rel-300: 0.8em;
  --size-rel-400: 1em;
  --size-rel-500: 1.33em;
  --size-rel-600: 1.77em;
  --size-rel-700: 2.4em;
  --size-rel-800: 3.1em;
  --size-rel-900: 4.1em;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --width-full: 100%;
  --width-half: 50%;
  --width-quarter: 25%;
  --width-third: 33.33%;
  --width-card-small: 10em;
  --width-card: 15em;
  --width-card-wide: 20em;
  --width-card-carousel: 40em;
  --width-aside: 25em;
  --width-aside-narrow: 18em;
  --width-content: 80ch;
  --width-accent-border: 3px;
  --width-mid: 60em;
  --width-max: 90em;
  --box-shadow-default: 0 0.375rem 0.75rem var(--color-dropshadow-main-default), -0.125rem -0.125rem 0.25rem var(--color-dropshadow-base);
  --box-shadow-drop: 0.125rem 0.125rem 0.25rem var(--color-dropshadow-main-drop), -0.25rem -0.25rem 0.5rem var(--color-dropshadow-base);
  --transition-default: 0.2s ease;
  --transition-linear: 0.2s linear;
  --transition-long: 0.7s ease;
  --line-height-400: 1.2;
  --line-height-300: 1;
  --line-height-500: 1.5;
  --line-height-700: 1.8;
  --z-index-100: 100;
  --z-index-200: 200;
  --z-index-300: 300;
  --z-index-400: 400;
  --z-index-500: 500;
  --z-index-600: 600;
  --z-index-700: 700;
  --z-index-800: 800;
  --z-index-900: 900;
}

:root {
  --color-text: #2a1b54;
  --color-bg: #ffffff;
  --color-border: #2a1b54;
  --color-tint: #e1e5f4;
  --color-accent: #31337c;
}

[data-theme=default] {
  --color-text: #2a1b54;
  --color-bg: #ffffff;
  --color-border: #2a1b54;
  --color-tint: #e1e5f4;
  --color-accent: #31337c;
}

[data-mode=light], [data-mode=light][data-theme=default], [data-mode=light] [data-theme=default] {
  --color-text: #2a1b54;
  --color-bg: #ffffff;
  --color-border: #2a1b54;
  --color-tint: #e1e5f4;
  --color-accent: #31337c;
}

[data-theme=alternative], [data-mode=light][data-theme=alternative], [data-mode=light] [data-theme=alternative] {
  --color-text: #ffffff;
  --color-bg: #2a1b54;
  --color-border: #ffffff;
  --color-tint: #57487f;
  --color-accent: #e1e5f4;
}

[data-theme=grey], [data-mode=light][data-theme=grey], [data-mode=light] [data-theme=grey] {
  --color-text: #ffffff;
  --color-bg: #333333;
  --color-border: #ffffff;
  --color-tint: #f2f2f2;
  --color-accent: #e1e5f4;
}

/* GORKO: auto-generated utility classes start */
.bg-black {
  background: var(--color-black);
}

.bg-white {
  background: var(--color-white);
}

.bg-blue {
  background: var(--color-blue);
}

.bg-blue-mid-1 {
  background: var(--color-blue-mid-1);
}

.bg-blue-mid-2 {
  background: var(--color-blue-mid-2);
}

.bg-blue-mid-3 {
  background: var(--color-blue-mid-3);
}

.bg-blue-light-1 {
  background: var(--color-blue-light-1);
}

.bg-blue-light-2 {
  background: var(--color-blue-light-2);
}

.bg-blue-light-3 {
  background: var(--color-blue-light-3);
}

.bg-grey-light {
  background: var(--color-grey-light);
}

.bg-grey-mid {
  background: var(--color-grey-mid);
}

.bg-grey-dark {
  background: var(--color-grey-dark);
}

.bg-custom-purple-tint {
  background: var(--color-custom-purple-tint);
}

.color-black {
  color: var(--color-black);
}

.color-white {
  color: var(--color-white);
}

.color-blue {
  color: var(--color-blue);
}

.color-blue-mid-1 {
  color: var(--color-blue-mid-1);
}

.color-blue-mid-2 {
  color: var(--color-blue-mid-2);
}

.color-blue-mid-3 {
  color: var(--color-blue-mid-3);
}

.color-blue-light-1 {
  color: var(--color-blue-light-1);
}

.color-blue-light-2 {
  color: var(--color-blue-light-2);
}

.color-blue-light-3 {
  color: var(--color-blue-light-3);
}

.color-grey-light {
  color: var(--color-grey-light);
}

.color-grey-mid {
  color: var(--color-grey-mid);
}

.color-grey-dark {
  color: var(--color-grey-dark);
}

.color-custom-purple-tint {
  color: var(--color-custom-purple-tint);
}

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

.text-100 {
  font-size: var(--size-100);
}

.text-200 {
  font-size: var(--size-200);
}

.text-300 {
  font-size: var(--size-300);
}

.text-400 {
  font-size: var(--size-400);
}

.text-500 {
  font-size: var(--size-500);
}

.text-600 {
  font-size: var(--size-600);
}

.text-700 {
  font-size: var(--size-700);
}

.text-800 {
  font-size: var(--size-800);
}

.text-900 {
  font-size: var(--size-900);
}

.weight-light {
  font-weight: var(--weight-light);
}

.weight-regular {
  font-weight: var(--weight-regular);
}

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

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

.box-shadow-default {
  box-shadow: var(--box-shadow-default);
}

.box-shadow-drop {
  box-shadow: var(--box-shadow-drop);
}

.line-height-400 {
  line-height: var(--line-height-400);
}

.line-height-300 {
  line-height: var(--line-height-300);
}

.line-height-500 {
  line-height: var(--line-height-500);
}

.line-height-700 {
  line-height: var(--line-height-700);
}

.z-index-100 {
  z-index: var(--z-index-100);
}

.z-index-200 {
  z-index: var(--z-index-200);
}

.z-index-300 {
  z-index: var(--z-index-300);
}

.z-index-400 {
  z-index: var(--z-index-400);
}

.z-index-500 {
  z-index: var(--z-index-500);
}

.z-index-600 {
  z-index: var(--z-index-600);
}

.z-index-700 {
  z-index: var(--z-index-700);
}

.z-index-800 {
  z-index: var(--z-index-800);
}

.z-index-900 {
  z-index: var(--z-index-900);
}

.width-full {
  width: var(--width-full);
}

.width-half {
  width: var(--width-half);
}

.width-quarter {
  width: var(--width-quarter);
}

.width-third {
  width: var(--width-third);
}

.width-card-small {
  width: var(--width-card-small);
}

.width-card {
  width: var(--width-card);
}

.width-card-wide {
  width: var(--width-card-wide);
}

.width-card-carousel {
  width: var(--width-card-carousel);
}

.width-aside {
  width: var(--width-aside);
}

.width-aside-narrow {
  width: var(--width-aside-narrow);
}

.width-content {
  width: var(--width-content);
}

.width-accent-border {
  width: var(--width-accent-border);
}

.width-mid {
  width: var(--width-mid);
}

.width-max {
  width: var(--width-max);
}

@media (min-width: 36em) {
  .sm\:text-100 {
    font-size: var(--size-100);
  }
  .sm\:text-200 {
    font-size: var(--size-200);
  }
  .sm\:text-300 {
    font-size: var(--size-300);
  }
  .sm\:text-400 {
    font-size: var(--size-400);
  }
  .sm\:text-500 {
    font-size: var(--size-500);
  }
  .sm\:text-600 {
    font-size: var(--size-600);
  }
  .sm\:text-700 {
    font-size: var(--size-700);
  }
  .sm\:text-800 {
    font-size: var(--size-800);
  }
  .sm\:text-900 {
    font-size: var(--size-900);
  }
  .sm\:width-full {
    width: var(--width-full);
  }
  .sm\:width-half {
    width: var(--width-half);
  }
  .sm\:width-quarter {
    width: var(--width-quarter);
  }
  .sm\:width-third {
    width: var(--width-third);
  }
  .sm\:width-card-small {
    width: var(--width-card-small);
  }
  .sm\:width-card {
    width: var(--width-card);
  }
  .sm\:width-card-wide {
    width: var(--width-card-wide);
  }
  .sm\:width-card-carousel {
    width: var(--width-card-carousel);
  }
  .sm\:width-aside {
    width: var(--width-aside);
  }
  .sm\:width-aside-narrow {
    width: var(--width-aside-narrow);
  }
  .sm\:width-content {
    width: var(--width-content);
  }
  .sm\:width-accent-border {
    width: var(--width-accent-border);
  }
  .sm\:width-mid {
    width: var(--width-mid);
  }
  .sm\:width-max {
    width: var(--width-max);
  }
}
@media (min-width: 48em) {
  .md\:text-100 {
    font-size: var(--size-100);
  }
  .md\:text-200 {
    font-size: var(--size-200);
  }
  .md\:text-300 {
    font-size: var(--size-300);
  }
  .md\:text-400 {
    font-size: var(--size-400);
  }
  .md\:text-500 {
    font-size: var(--size-500);
  }
  .md\:text-600 {
    font-size: var(--size-600);
  }
  .md\:text-700 {
    font-size: var(--size-700);
  }
  .md\:text-800 {
    font-size: var(--size-800);
  }
  .md\:text-900 {
    font-size: var(--size-900);
  }
  .md\:width-full {
    width: var(--width-full);
  }
  .md\:width-half {
    width: var(--width-half);
  }
  .md\:width-quarter {
    width: var(--width-quarter);
  }
  .md\:width-third {
    width: var(--width-third);
  }
  .md\:width-card-small {
    width: var(--width-card-small);
  }
  .md\:width-card {
    width: var(--width-card);
  }
  .md\:width-card-wide {
    width: var(--width-card-wide);
  }
  .md\:width-card-carousel {
    width: var(--width-card-carousel);
  }
  .md\:width-aside {
    width: var(--width-aside);
  }
  .md\:width-aside-narrow {
    width: var(--width-aside-narrow);
  }
  .md\:width-content {
    width: var(--width-content);
  }
  .md\:width-accent-border {
    width: var(--width-accent-border);
  }
  .md\:width-mid {
    width: var(--width-mid);
  }
  .md\:width-max {
    width: var(--width-max);
  }
}
@media (min-width: 62em) {
  .lg\:text-100 {
    font-size: var(--size-100);
  }
  .lg\:text-200 {
    font-size: var(--size-200);
  }
  .lg\:text-300 {
    font-size: var(--size-300);
  }
  .lg\:text-400 {
    font-size: var(--size-400);
  }
  .lg\:text-500 {
    font-size: var(--size-500);
  }
  .lg\:text-600 {
    font-size: var(--size-600);
  }
  .lg\:text-700 {
    font-size: var(--size-700);
  }
  .lg\:text-800 {
    font-size: var(--size-800);
  }
  .lg\:text-900 {
    font-size: var(--size-900);
  }
  .lg\:width-full {
    width: var(--width-full);
  }
  .lg\:width-half {
    width: var(--width-half);
  }
  .lg\:width-quarter {
    width: var(--width-quarter);
  }
  .lg\:width-third {
    width: var(--width-third);
  }
  .lg\:width-card-small {
    width: var(--width-card-small);
  }
  .lg\:width-card {
    width: var(--width-card);
  }
  .lg\:width-card-wide {
    width: var(--width-card-wide);
  }
  .lg\:width-card-carousel {
    width: var(--width-card-carousel);
  }
  .lg\:width-aside {
    width: var(--width-aside);
  }
  .lg\:width-aside-narrow {
    width: var(--width-aside-narrow);
  }
  .lg\:width-content {
    width: var(--width-content);
  }
  .lg\:width-accent-border {
    width: var(--width-accent-border);
  }
  .lg\:width-mid {
    width: var(--width-mid);
  }
  .lg\:width-max {
    width: var(--width-max);
  }
}
@media (min-width: 75em) {
  .xl\:text-100 {
    font-size: var(--size-100);
  }
  .xl\:text-200 {
    font-size: var(--size-200);
  }
  .xl\:text-300 {
    font-size: var(--size-300);
  }
  .xl\:text-400 {
    font-size: var(--size-400);
  }
  .xl\:text-500 {
    font-size: var(--size-500);
  }
  .xl\:text-600 {
    font-size: var(--size-600);
  }
  .xl\:text-700 {
    font-size: var(--size-700);
  }
  .xl\:text-800 {
    font-size: var(--size-800);
  }
  .xl\:text-900 {
    font-size: var(--size-900);
  }
  .xl\:width-full {
    width: var(--width-full);
  }
  .xl\:width-half {
    width: var(--width-half);
  }
  .xl\:width-quarter {
    width: var(--width-quarter);
  }
  .xl\:width-third {
    width: var(--width-third);
  }
  .xl\:width-card-small {
    width: var(--width-card-small);
  }
  .xl\:width-card {
    width: var(--width-card);
  }
  .xl\:width-card-wide {
    width: var(--width-card-wide);
  }
  .xl\:width-card-carousel {
    width: var(--width-card-carousel);
  }
  .xl\:width-aside {
    width: var(--width-aside);
  }
  .xl\:width-aside-narrow {
    width: var(--width-aside-narrow);
  }
  .xl\:width-content {
    width: var(--width-content);
  }
  .xl\:width-accent-border {
    width: var(--width-accent-border);
  }
  .xl\:width-mid {
    width: var(--width-mid);
  }
  .xl\:width-max {
    width: var(--width-max);
  }
}
/* GORKO: auto-generated utility classes end */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.visually-hidden:not(:focus):not(:active) + * {
  margin-top: 0;
}

:root,
[data-theme],
[data-mode] {
  --color-focus-outline: var(--color-text);
}

*:focus-visible {
  outline: 1px solid var(--color-focus-outline);
}

.animate-fade {
  transition: opacity var(--transition-default);
}
.animate-fade:hover {
  opacity: 0;
}

.animate-move {
  transition: all var(--transition-long);
}
.animate-move:hover {
  opacity: 0;
}

/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
.content > * + *, .content > * + ul[class], .content > * + ol[class] {
  margin-block-start: var(--flow-spacing, 1em);
}
.content iframe[src^="https://www.youtube.com"] {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}
.content a {
  overflow-wrap: break-word;
}

.content[data-justify=left] {
  text-align: left;
}

.content[data-justify=center] {
  text-align: center;
}
.content[data-justify=center] > * {
  margin-inline: auto;
}

:root {
  --flow-spacing: 1em;
  --flow-spacing-horizontal: calc(2 * var(--flow-spacing));
}

.flow > * + *, .flow > * + ul[class], .flow > * + ol[class] {
  margin-block-start: var(--flow-spacing, 1em);
}

.flow-large > * + *, .flow-large > * + ul[class], .flow-large > * + ol[class] {
  margin-block-start: var(--flow-spacing-horizontal, 1em);
}

script + * {
  --flow-spacing: 0;
}
script + * > * {
  --flow-spacing: 1em;
}

fieldset {
  border: 0px none;
  padding: 0;
  border-inline-start: 1px solid var(--color-text);
  padding-inline-start: var(--size-400);
  min-inline-size: 0;
}
fieldset > * + *, fieldset > * + ul[class], fieldset > * + ol[class] {
  margin-block-start: var(--flow-spacing, 1em);
}
fieldset legend {
  letter-spacing: 0.16em;
  line-height: var(--line-height-700);
  display: block;
  text-transform: uppercase;
  display: block;
  position: relative;
}

.field-container > * + *, .field-container > * + ul[class], .field-container > * + ol[class] {
  margin-block-start: var(--flow-spacing, 1em);
}

label {
  letter-spacing: 0.16em;
  line-height: var(--line-height-700);
  display: block;
  text-transform: uppercase;
  line-height: var(--lineheight-400);
  text-wrap: balance;
}
label:has(input) {
  cursor: pointer;
}
label:has(input[type=checkbox]), label:has(input[type=radio]) {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: var(--line-height-400);
}

input,
textarea,
select {
  font-family: var(--font-base);
  font-size: var(--size-400);
  padding: var(--size-200) var(--size-400);
  border-radius: var(--size-300);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  display: block;
  width: 100%;
  max-width: var(--width-content);
  color: var(--color-text);
  outline-offset: 2px;
  outline-width: 2px;
  min-height: 100%;
}
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--color-border);
}

form label:has(input[type=checkbox], input[type=radio]) {
  display: inline-flex;
  gap: var(--size-rel-300);
  align-items: flex-start;
  padding-inline: var(--size-200);
}

form label:has(input[type=radio]) {
  border: 1px solid currentColor;
  border-radius: var(--size-300);
  padding: var(--size-300) var(--size-400);
}

input[type=radio],
input[type=checkbox] {
  width: auto;
  display: inline-block;
  transition: var(--transition-default) background, var(--transition-default) color, var(--transition-default) border-color;
  appearance: none;
  border-radius: 0.2em;
  padding: 0;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
  flex-shrink: 0;
}
input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: var(--color-text);
  border-color: var(--color-text);
}
form ul:has(input[type=radio],
input[type=checkbox]) {
  --flow-spacing: 0;
  margin-block-end: 0;
}
form ul:has(input[type=radio],
input[type=checkbox]) li {
  padding-inline: 0;
  padding-block: 0;
}
form ul:has(input[type=radio],
input[type=checkbox]) li + li {
  border-block-start: 1px solid var(--color-border);
  margin-block-start: 0;
}
form ul label:has(input[type=radio],
input[type=checkbox]) {
  padding-block: var(--size-100);
  transition: var(--transition-default) background-color, var(--transition-default) color;
  display: flex;
  border: 0px none;
  border-radius: 0;
  padding-inline: var(--size-200);
}
form ul label:has(input[type=radio],
input[type=checkbox]) input {
  margin-top: 0.01em;
}
form ul label:has(input[type=radio],
input[type=checkbox]):hover {
  background-color: var(--color-tint);
}
form ul label:has(input[type=radio],
input[type=checkbox]):has(input:checked) {
  background-color: var(--color-text);
  color: var(--color-bg);
}
form ul label:has(input[type=radio],
input[type=checkbox]):has(input:checked) input {
  outline-color: var(--color-bg);
  border-color: var(--color-bg);
}

input[type=checkbox]:checked:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --%3E%3Cpath d='M443.3 100.7c6.2 6.2 6.2 16.4 0 22.6l-272 272c-6.2 6.2-16.4 6.2-22.6 0l-144-144c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L160 361.4 420.7 100.7c6.2-6.2 16.4-6.2 22.6 0z' fill='%23fff'/%3E%3C/svg%3E");
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z' fill='%23fff'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  input[type=checkbox]:checked:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --%3E%3Cpath d='M443.3 100.7c6.2 6.2 6.2 16.4 0 22.6l-272 272c-6.2 6.2-16.4 6.2-22.6 0l-144-144c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L160 361.4 420.7 100.7c6.2-6.2 16.4-6.2 22.6 0z'  fill='%23313132' /%3E%3C/svg%3E");
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z' fill='%23313132'/%3E%3C/svg%3E");
  }
}
[data-mode=dark] input[type=checkbox]:checked:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --%3E%3Cpath d='M443.3 100.7c6.2 6.2 6.2 16.4 0 22.6l-272 272c-6.2 6.2-16.4 6.2-22.6 0l-144-144c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L160 361.4 420.7 100.7c6.2-6.2 16.4-6.2 22.6 0z'  fill='%23313132' /%3E%3C/svg%3E");
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z' fill='%23313132'/%3E%3C/svg%3E");
}

input[type=radio] {
  border-radius: 50%;
}
input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Ccircle r='150' cx='250' cy='250' fill='%23fff' /%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  input[type=radio]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Ccircle r='150' cx='250' cy='250' fill='%23313132' /%3E%3C/svg%3E");
  }
}
[data-mode=dark] input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Ccircle r='150' cx='250' cy='250' fill='%23313132' /%3E%3C/svg%3E");
}

input[type=color] {
  padding: 0;
  border: 0;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(../assets/images/custom-icons/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  input[type=search]::-webkit-search-cancel-button {
    filter: invert(1);
  }
}
[data-mode=dark] input[type=search]::-webkit-search-cancel-button {
  filter: invert(1);
}

input[type=search]:focus::-webkit-search-cancel-button {
  opacity: 0.7;
  pointer-events: all;
}

select {
  appearance: none;
  background-image: url(../assets/images/custom-icons/dropdown.svg);
  background-repeat: no-repeat;
  background-size: 1em auto;
  background-position: center right 1em;
}

input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0px none;
  padding: 0;
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  background: var(--color-text);
  height: 0.5rem;
  border-radius: 0.25rem;
}
input[type=range]::-moz-range-track {
  background: var(--color-text);
  height: 0.5rem;
  border-radius: 0.25rem;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -0.75rem; /* Centers thumb on the track */
  background-color: var(--color-bg);
  border: 2px solid var(--color-text);
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
  border: none; /*Removes extra border that FF applies*/
  border-radius: 50%; /*Removes default border-radius that FF applies*/
  background-color: var(--color-bg);
  border: 2px solid var(--color-text);
  height: 2rem;
  width: 2rem;
}
input[type=range]:focus-visible {
  outline: none;
  /***** Chrome, Safari, Opera, and Edge Chromium *****/
}
input[type=range]:focus-visible::-webkit-slider-thumb {
  border: 1px solid var(--color-text);
  outline: 3px solid var(--color-text);
  outline-offset: 0.125rem;
}
input[type=range]:focus-visible {
  /******** Firefox ********/
}
input[type=range]:focus-visible::-moz-range-thumb {
  border: 1px solid var(--color-text);
  outline: 3px solid var(--color-text);
  outline-offset: 0.125rem;
}

/*------------------------------------*\
    $GLOBAL CLASSES
\*------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-base);
  text-wrap: balance;
  font-weight: var(--weight-regular);
  line-height: var(--line-height-400);
}
h1 .preheading,
h2 .preheading,
h3 .preheading,
h4 .preheading,
h5 .preheading,
h6 .preheading,
.h1 .preheading,
.h2 .preheading,
.h3 .preheading,
.h4 .preheading,
.h5 .preheading,
.h6 .preheading {
  font-size: max(0.75rem, var(--size-rel-100));
}

h1,
.h1,
h2,
.h2 {
  letter-spacing: 0.08em;
  line-height: var(--line-height-500);
}

h1,
.h1 {
  font-size: var(--size-900);
  font-size: clamp(var(--size-700), 7vw, var(--size-800));
}

h2,
.h2 {
  font-size: var(--size-800);
  font-size: clamp(var(--size-600), 6vw, var(--size-700));
}

h3,
.h3 {
  font-size: var(--size-700);
  font-size: clamp(var(--size-500), 4vw, var(--size-600));
}

h4,
.h4 {
  font-size: var(--size-600);
  font-size: clamp(var(--size-400), 3vw, var(--size-500));
}

h5,
.h5 {
  font-size: var(--size-500);
  font-size: max(1rem, clamp(var(--size-300), 2vw, var(--size-400)));
}

h6,
.h6 {
  font-size: var(--size-400);
  font-size: max(0.875rem, clamp(var(--size-200), 1vw, var(--size-300)));
}

.h-upper {
  text-transform: uppercase;
}

.preheading {
  letter-spacing: 0.16em;
  line-height: var(--line-height-700);
  display: block;
  text-transform: uppercase;
  padding-bottom: var(--size-400);
}

.spacer:before {
  content: " ";
}

/* Links */
a {
  color: var(--color-text);
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.1em;
  transition: var(--transition-default) color;
}
a[href]:hover {
  color: inherit;
}
a[href]:visited, a[href].a-visited {
  text-decoration-style: dotted;
}
a[href]:not([class]):active {
  transform: scale(98%);
}

a.link-inherit {
  color: inherit;
  text-decoration: inherit;
  transition: inherit;
}
a.link-inherit:hover {
  color: inherit;
}

ol:not([class]),
ul:not([class]),
dl:not([class]) {
  max-width: var(--width-content);
}
ol:not([class]) ol,
ol:not([class]) ul,
ol:not([class]) dl,
ul:not([class]) ol,
ul:not([class]) ul,
ul:not([class]) dl,
dl:not([class]) ol,
dl:not([class]) ul,
dl:not([class]) dl {
  padding-top: var(--size-300);
}
ol:not([class]) li,
ul:not([class]) li,
dl:not([class]) li {
  --flow-spacing: var(--size-300);
  padding-inline-start: var(--size-200);
}
ol:not([class]) li::marker,
ul:not([class]) li::marker,
dl:not([class]) li::marker {
  color: var(--color-text);
}
ol:not([class]) dt,
ul:not([class]) dt,
dl:not([class]) dt {
  --flow-spacing: 1em;
  font-size: var(--size-500);
}
ol:not([class]) > * + *, ol:not([class]) > * + ul[class], ol:not([class]) > * + ol[class],
ul:not([class]) > * + *,
ul:not([class]) > * + ul[class],
ul:not([class]) > * + ol[class],
dl:not([class]) > * + *,
dl:not([class]) > * + ul[class],
dl:not([class]) > * + ol[class] {
  margin-block-start: var(--flow-spacing, 1em);
}
ol[role=list]:not([class]), ol[role=group]:not([class]),
ul[role=list]:not([class]),
ul[role=group]:not([class]),
dl[role=list]:not([class]),
dl[role=group]:not([class]) {
  list-style: none;
  padding-inline: 0;
  margin-inline: 0;
}

:root {
  color-scheme: light dark;
}

body,
[data-theme] {
  background: var(--color-bg);
  color: var(--color-text);
}

#main {
  position: relative;
  z-index: var(--z-index-400);
}

/*------------------------------------*\
    $MEDIA ELEMENTS
\*------------------------------------*/
/* Flexible Media */
img,
video,
object {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

figure img {
  width: 100%;
  height: auto;
}
figure video,
figure iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
figure > * {
  --flow-spacing: var(--size-100);
}
figure > * + *, figure > * + ul[class], figure > * + ol[class] {
  margin-block-start: var(--flow-spacing, 1em);
}

figcaption {
  font-style: italic;
}

* {
  scrollbar-color: var(--color-accent) var(--color-bg);
  scroll-behavior: smooth;
}

/*------------------------------------*\
    $Table
\*------------------------------------*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  width: 100%;
}

th {
  text-align: left;
  border: 1px solid var(--color-border);
  padding: var(--size-100);
}

td {
  border: 1px solid var(--color-border);
  padding: var(--size-100);
}

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

/* Text-Related Elements */
body {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
}

p {
  max-width: var(--width-content);
}

/* Blockquote */
blockquote {
  font-size: var(--size-500);
  border-inline-start: var(--width-accent-border) solid var(--color-border);
  padding: var(--size-200) var(--size-700);
}
blockquote > * + *, blockquote > * + ul[class], blockquote > * + ol[class] {
  margin-block-start: var(--flow-spacing, 1em);
}
blockquote cite {
  font-size: var(--size-400);
  font-family: var(--font-base);
  font-style: normal;
  display: block;
}

/* Horizontal Rule */
hr {
  border: 1px solid var(--color-border);
  border-bottom: 0px none;
}

abbr {
  border-bottom: 1px dotted var(--color-border);
  cursor: help;
}

address {
  font-style: normal;
}

.hide-sm {
  display: none;
}
@media (min-width: 36em) {
  .hide-sm {
    display: block;
  }
}

@media (min-width: 36em) {
  .hide-md {
    display: none;
  }
}
@media (min-width: 48em) {
  .hide-md {
    display: block;
  }
}

@media (min-width: 48em) {
  .hide-lg {
    display: none;
  }
}
@media (min-width: 62em) {
  .hide-lg {
    display: block;
  }
}

@media (min-width: 62em) {
  .hide-vlg {
    display: none;
  }
}

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

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

img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

a img.alignright {
  float: right;
  margin: 0 0 1em 1em;
}

a img.alignleft {
  float: left;
  margin: 0 1em 1em 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figure.wp-caption {
  max-width: 100%;
}

.logo {
  --logo-text: var(--color-text);
  display: block;
  width: 30ch;
  max-width: 100%;
  text-decoration: none;
}
.logo svg {
  display: block;
}

.logo .svg-logo-text {
  fill: var(--logo-text);
}

.button,
button:not([class]),
input[type=button]:not([class]) {
  /* Configuration */
  --button-text-padding: 0;
  --button-outer-padding: var(--size-rel-300) var(--size-rel-400);
  --button-gap: var(--size-rel-100);
  --button-bg: var(--color-bg);
  --button-color: var(--color-text);
  --button-border-width: 0.125em;
  --button-border-style: solid;
  --button-border-color: var(--button-color);
  --button-border-radius: var(--size-rel-300);
  --button-box-shadow: none;
  --button-font-weight: var(--weight-normal);
  --button-font-size: 1rem;
  --button-hover-bg: var(--color-text);
  --button-hover-color: var(--color-bg);
  --button-hover-border-color: var(--button-border-color);
  --button-hover-box-shadow: none;
  --button-disabled-opacity: 0.7;
  --button-icon-color: currentColor;
  --button-icon-font-size: var(--size-rel-400);
  --button-icon-border-color: inherit;
  --button-icon-border-width: 0;
  --button-icon-border-style: none;
  --button-icon-padding: 0;
  --button-icon-bg: inherit;
  --button-icon-hover-bg: var(--button-icon-bg);
  --button-icon-hover-color: var(--button-icon-color);
  --button-icon-hover-border-color: var(--button-icon-border-color);
  /* Layout and spacing */
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
  overflow: hidden;
  margin: 0;
  padding: var(--button-outer-padding);
  /* Colours */
  background: var(--button-bg);
  color: var(--button-color);
  /* Stroke and radius */
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-radius: var(--button-border-radius);
  /* Box shadow */
  box-shadow: var(--button-box-shadow);
  /* Typography */
  text-decoration: none;
  font-weight: var(--button-font-weight, 400);
  font-size: var(--button-font-size, 1em);
  font-family: var(--font-base);
  line-height: 1.1;
  /* Interactive */
  transition: background var(--transition-default), color var(--transition-default), border var(--transition-default), box-shadow var(--transition-default), gap var(--transition-default), padding var(--transition-default);
}
.button:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):hover:not([data-hover=false]), .button:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--hover:not([data-hover=false]), a[href]:not(:disabled, .button--disabled):hover .button:not([data-hover=false]), a[href]:not(:disabled, .button--disabled) .button.button--hover:not([data-hover=false]), button:not(:disabled, .button--disabled):hover .button:not([data-hover=false]), button:not(:disabled, .button--disabled) .button.button--hover:not([data-hover=false]), summary:not(:disabled, .button--disabled):hover .button:not([data-hover=false]), summary:not(:disabled, .button--disabled) .button.button--hover:not([data-hover=false]),
button:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):hover:not([data-hover=false]),
button:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--hover:not([data-hover=false]),
a[href]:not(:disabled, .button--disabled):hover button:not([class]):not([data-hover=false]),
a[href]:not(:disabled, .button--disabled) button:not([class]).button--hover:not([data-hover=false]),
button:not(:disabled, .button--disabled):hover button:not([class]):not([data-hover=false]),
button:not(:disabled, .button--disabled) button:not([class]).button--hover:not([data-hover=false]),
summary:not(:disabled, .button--disabled):hover button:not([class]):not([data-hover=false]),
summary:not(:disabled, .button--disabled) button:not([class]).button--hover:not([data-hover=false]),
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):hover:not([data-hover=false]),
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--hover:not([data-hover=false]),
a[href]:not(:disabled, .button--disabled):hover input[type=button]:not([class]):not([data-hover=false]),
a[href]:not(:disabled, .button--disabled) input[type=button]:not([class]).button--hover:not([data-hover=false]),
button:not(:disabled, .button--disabled):hover input[type=button]:not([class]):not([data-hover=false]),
button:not(:disabled, .button--disabled) input[type=button]:not([class]).button--hover:not([data-hover=false]),
summary:not(:disabled, .button--disabled):hover input[type=button]:not([class]):not([data-hover=false]),
summary:not(:disabled, .button--disabled) input[type=button]:not([class]).button--hover:not([data-hover=false]) {
  background: var(--button-hover-bg);
  color: var(--button-hover-color);
  box-shadow: var(--button-hover-box-shadow);
  border-color: var(--button-hover-border-color);
  cursor: pointer;
}
.button:is(a[href],
button,
summary,
input[type=button]):focus-visible, .button:is(a[href],
button,
summary,
input[type=button]).button--focus-visible, a[href]:focus-visible .button, a[href] .button.button--focus-visible, button:focus-visible .button, button .button.button--focus-visible, summary:focus-visible .button, summary .button.button--focus-visible,
button:not([class]):is(a[href],
button,
summary,
input[type=button]):focus-visible,
button:not([class]):is(a[href],
button,
summary,
input[type=button]).button--focus-visible,
a[href]:focus-visible button:not([class]),
a[href] button:not([class]).button--focus-visible,
button:focus-visible button:not([class]),
button button:not([class]).button--focus-visible,
summary:focus-visible button:not([class]),
summary button:not([class]).button--focus-visible,
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]):focus-visible,
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]).button--focus-visible,
a[href]:focus-visible input[type=button]:not([class]),
a[href] input[type=button]:not([class]).button--focus-visible,
button:focus-visible input[type=button]:not([class]),
button input[type=button]:not([class]).button--focus-visible,
summary:focus-visible input[type=button]:not([class]),
summary input[type=button]:not([class]).button--focus-visible {
  outline-offset: 2px;
  outline-width: 2px;
}
.button:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):active:not(:has(.button__text)), .button:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--active:not(:has(.button__text)), a[href]:not(:disabled, .button--disabled):active .button:not(:has(.button__text)), a[href]:not(:disabled, .button--disabled) .button.button--active:not(:has(.button__text)), button:not(:disabled, .button--disabled):active .button:not(:has(.button__text)), button:not(:disabled, .button--disabled) .button.button--active:not(:has(.button__text)), summary:not(:disabled, .button--disabled):active .button:not(:has(.button__text)), summary:not(:disabled, .button--disabled) .button.button--active:not(:has(.button__text)),
button:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):active:not(:has(.button__text)),
button:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--active:not(:has(.button__text)),
a[href]:not(:disabled, .button--disabled):active button:not([class]):not(:has(.button__text)),
a[href]:not(:disabled, .button--disabled) button:not([class]).button--active:not(:has(.button__text)),
button:not(:disabled, .button--disabled):active button:not([class]):not(:has(.button__text)),
button:not(:disabled, .button--disabled) button:not([class]).button--active:not(:has(.button__text)),
summary:not(:disabled, .button--disabled):active button:not([class]):not(:has(.button__text)),
summary:not(:disabled, .button--disabled) button:not([class]).button--active:not(:has(.button__text)),
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):active:not(:has(.button__text)),
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--active:not(:has(.button__text)),
a[href]:not(:disabled, .button--disabled):active input[type=button]:not([class]):not(:has(.button__text)),
a[href]:not(:disabled, .button--disabled) input[type=button]:not([class]).button--active:not(:has(.button__text)),
button:not(:disabled, .button--disabled):active input[type=button]:not([class]):not(:has(.button__text)),
button:not(:disabled, .button--disabled) input[type=button]:not([class]).button--active:not(:has(.button__text)),
summary:not(:disabled, .button--disabled):active input[type=button]:not([class]):not(:has(.button__text)),
summary:not(:disabled, .button--disabled) input[type=button]:not([class]).button--active:not(:has(.button__text)) {
  transform: scale(98%);
}
.button:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):active:has(.button__text) .button__text, .button:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--active:has(.button__text) .button__text, a[href]:not(:disabled, .button--disabled):active .button:has(.button__text) .button__text, a[href]:not(:disabled, .button--disabled) .button.button--active:has(.button__text) .button__text, button:not(:disabled, .button--disabled):active .button:has(.button__text) .button__text, button:not(:disabled, .button--disabled) .button.button--active:has(.button__text) .button__text, summary:not(:disabled, .button--disabled):active .button:has(.button__text) .button__text, summary:not(:disabled, .button--disabled) .button.button--active:has(.button__text) .button__text,
button:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):active:has(.button__text) .button__text,
button:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--active:has(.button__text) .button__text,
a[href]:not(:disabled, .button--disabled):active button:not([class]):has(.button__text) .button__text,
a[href]:not(:disabled, .button--disabled) button:not([class]).button--active:has(.button__text) .button__text,
button:not(:disabled, .button--disabled):active button:not([class]):has(.button__text) .button__text,
button:not(:disabled, .button--disabled) button:not([class]).button--active:has(.button__text) .button__text,
summary:not(:disabled, .button--disabled):active button:not([class]):has(.button__text) .button__text,
summary:not(:disabled, .button--disabled) button:not([class]).button--active:has(.button__text) .button__text,
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):active:has(.button__text) .button__text,
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--active:has(.button__text) .button__text,
a[href]:not(:disabled, .button--disabled):active input[type=button]:not([class]):has(.button__text) .button__text,
a[href]:not(:disabled, .button--disabled) input[type=button]:not([class]).button--active:has(.button__text) .button__text,
button:not(:disabled, .button--disabled):active input[type=button]:not([class]):has(.button__text) .button__text,
button:not(:disabled, .button--disabled) input[type=button]:not([class]).button--active:has(.button__text) .button__text,
summary:not(:disabled, .button--disabled):active input[type=button]:not([class]):has(.button__text) .button__text,
summary:not(:disabled, .button--disabled) input[type=button]:not([class]).button--active:has(.button__text) .button__text {
  transform: scale(98%);
}
.button:is(a[href],
button,
summary,
input[type=button]):visited, .button:is(a[href],
button,
summary,
input[type=button]).button--visited, a[href]:visited .button, a[href] .button.button--visited, button:visited .button, button .button.button--visited, summary:visited .button, summary .button.button--visited,
button:not([class]):is(a[href],
button,
summary,
input[type=button]):visited,
button:not([class]):is(a[href],
button,
summary,
input[type=button]).button--visited,
a[href]:visited button:not([class]),
a[href] button:not([class]).button--visited,
button:visited button:not([class]),
button button:not([class]).button--visited,
summary:visited button:not([class]),
summary button:not([class]).button--visited,
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]):visited,
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]).button--visited,
a[href]:visited input[type=button]:not([class]),
a[href] input[type=button]:not([class]).button--visited,
button:visited input[type=button]:not([class]),
button input[type=button]:not([class]).button--visited,
summary:visited input[type=button]:not([class]),
summary input[type=button]:not([class]).button--visited {
  text-decoration: underline;
  text-decoration-style: dotted;
}
.button:is(a[href],
button,
summary,
input[type=button]):disabled, .button:is(a[href],
button,
summary,
input[type=button]).button--disabled, a[href]:disabled .button, a[href] .button.button--disabled, button:disabled .button, button .button.button--disabled, summary:disabled .button, summary .button.button--disabled,
button:not([class]):is(a[href],
button,
summary,
input[type=button]):disabled,
button:not([class]):is(a[href],
button,
summary,
input[type=button]).button--disabled,
a[href]:disabled button:not([class]),
a[href] button:not([class]).button--disabled,
button:disabled button:not([class]),
button button:not([class]).button--disabled,
summary:disabled button:not([class]),
summary button:not([class]).button--disabled,
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]):disabled,
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]).button--disabled,
a[href]:disabled input[type=button]:not([class]),
a[href] input[type=button]:not([class]).button--disabled,
button:disabled input[type=button]:not([class]),
button input[type=button]:not([class]).button--disabled,
summary:disabled input[type=button]:not([class]),
summary input[type=button]:not([class]).button--disabled {
  pointer-events: none;
  opacity: var(--button-disabled-opacity);
}
.button:is(a[href],
button,
summary,
input[type=button]):is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary), .button:is(a[href],
button,
summary,
input[type=button]).button--expanded, a[href]:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button, a[href] .button.button--expanded, button:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button, button .button.button--expanded, summary:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button, summary .button.button--expanded,
button:not([class]):is(a[href],
button,
summary,
input[type=button]):is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary),
button:not([class]):is(a[href],
button,
summary,
input[type=button]).button--expanded,
a[href]:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) button:not([class]),
a[href] button:not([class]).button--expanded,
button:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) button:not([class]),
button button:not([class]).button--expanded,
summary:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) button:not([class]),
summary button:not([class]).button--expanded,
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]):is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary),
input[type=button]:not([class]):is(a[href],
button,
summary,
input[type=button]).button--expanded,
a[href]:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) input[type=button]:not([class]),
a[href] input[type=button]:not([class]).button--expanded,
button:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) input[type=button]:not([class]),
button input[type=button]:not([class]).button--expanded,
summary:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) input[type=button]:not([class]),
summary input[type=button]:not([class]).button--expanded {
  --button-border-color: var(--color-text);
}
.button[hidden],
button:not([class])[hidden],
input[type=button]:not([class])[hidden] {
  display: none;
}

.button__icon {
  color: var(--button-icon-color);
  align-self: stretch;
  padding: var(--button-icon-padding);
  background-color: var(--button-icon-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background var(--transition-default), color var(--transition-default), border var(--transition-default), box-shadow var(--transition-default), gap var(--transition-default), padding var(--transition-default);
}
.button__icon > *, .button__icon > .faicon {
  display: block;
  font-size: var(--button-icon-font-size);
}
.button__icon:first-child {
  border-right: var(--button-icon-border-width) var(--button-icon-border-style) var(--button-icon-border-color);
}
.button__icon:last-child {
  border-left: var(--button-icon-border-width) var(--button-icon-border-style) var(--button-icon-border-color);
}

.button:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):hover:not([data-hover=false]) .button__icon, .button:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--hover:not([data-hover=false]) .button__icon, a[href]:not(:disabled, .button--disabled):hover .button:not([data-hover=false]) .button__icon, a[href]:not(:disabled, .button--disabled) .button.button--hover:not([data-hover=false]) .button__icon, button:not(:disabled, .button--disabled):hover .button:not([data-hover=false]) .button__icon, button:not(:disabled, .button--disabled) .button.button--hover:not([data-hover=false]) .button__icon, summary:not(:disabled, .button--disabled):hover .button:not([data-hover=false]) .button__icon, summary:not(:disabled, .button--disabled) .button.button--hover:not([data-hover=false]) .button__icon {
  background-color: var(--button-icon-hover-bg);
  color: var(--button-icon-hover-color);
  border-color: var(--button-icon-hover-border-color);
}

.button__text {
  transform-origin: 0% 50%;
  transition: var(--transition-default) transform;
  padding: var(--button-text-padding);
}
.button__text strong {
  display: block;
}

/* Variants */
.button[data-button-variant=primary] {
  --button-outer-padding: 0;
  --button-gap: 0;
  --button-text-padding: var(--size-rel-300) var(--size-rel-400);
  --button-icon-color: var(--color-text);
  --button-icon-border-color: var(--color-text);
  --button-icon-border-width: var(--button-border-width);
  --button-icon-border-style: var(--button-border-style);
  --button-icon-padding: var(--button-text-padding);
  --button-icon-bg: var(--button-bg);
  --button-icon-hover-bg: var(--button-icon-bg);
  --button-icon-hover-color: var(--button-icon-color);
  --button-icon-hover-border-color: var(--button-icon-border-color);
}

.button[data-button-variant=secondary],
.button[data-button-variant=tertiary] {
  --button-outer-padding: 0;
  --button-gap: 0;
  --button-text-padding: var(--size-rel-300) var(--size-rel-400);
  --button-bg: var(--color-text);
  --button-color: var(--color-bg);
  --button-hover-bg: var(--color-accent);
  --button-icon-color: var(--color-bg);
  --button-icon-border-color: var(--color-bg);
  --button-icon-border-width: var(--button-border-width);
  --button-icon-border-style: var(--button-border-style);
  --button-icon-padding: var(--button-text-padding);
  --button-icon-bg: var(--button-bg);
  --button-icon-hover-bg: var(--button-icon-bg);
  --button-icon-hover-color: var(--button-icon-color);
  --button-icon-hover-border-color: var(--button-icon-border-color);
}

.button[data-button-variant=tertiary] {
  --button-text-padding: var(--size-rel-300) var(--size-rel-400);
  --button-font-size: var(--size-300);
  text-transform: uppercase;
}

.button[data-button-variant=tag] {
  --button-outer-padding: 0.35em 0.6em;
  --button-font-weight: var(--weight-regular);
  --button-font-size: var(--size-300);
}

.button[data-button-variant=tag]:is(a[href],
button,
summary,
input[type=button]):is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary), .button[data-button-variant=tag]:is(a[href],
button,
summary,
input[type=button]).button--expanded, a[href]:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button[data-button-variant=tag], a[href] .button[data-button-variant=tag].button--expanded, button:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button[data-button-variant=tag], button .button[data-button-variant=tag].button--expanded, summary:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button[data-button-variant=tag], summary .button[data-button-variant=tag].button--expanded {
  --button-bg: var(--color-bg);
  --button-color: var(--color-text);
}

.button[data-button-variant=icon] {
  --button-bg: var(--color-bg);
  --button-color: var(--color-text);
  --button-hover-bg: var(--color-text);
  --button-hover-color: var(--color-bg);
  --button-hover-box-shadow: none;
  --button-border-width: 0;
  --button-outer-padding: 0;
  --button-border-radius: 50%;
  width: 1.7em;
  height: 1.7em;
  justify-content: center;
}

.button[data-button-variant=nav] {
  --button-bg: transparent;
  --button-border-style: solid;
  --button-border-width: 0;
  --button-border-color: transparent;
  --button-color: currentColor;
  --button-icon-color: var(--color-text);
  --button-outer-padding: 0.5em 0.5em;
  --button-border-radius: 0;
  --button-font-weight: var(--weight-regular);
  --button-font-size: var(--size-300);
  --button-outer-padding: 0;
  --button-text-padding: var(--size-rel-300) var(--size-rel-200);
  --button-hover-bg: transparent;
  --button-hover-box-shadow: none;
  --button-hover-color: var(--color-accent);
  --button-disabled-opacity: 0.5;
  border-bottom-width: 1px;
  text-transform: uppercase;
}

.button[data-button-variant=tab] {
  --button-bg: var(--color-tint);
  --button-color: var(--color-text);
  --button-border-radius: 0;
  --button-border-width: 0;
  --button-hover-bg: var(--color-accent);
  --button-hover-color: var(--color-bg);
  --button-hover-box-shadow: none;
  --button-hover-border-color: currentColor;
  --button-disabled-opacity: 0.5;
  position: relative;
  text-align: left;
  text-wrap: balance;
}
.button[data-button-variant=tab]:is(a[href],
button,
summary,
input[type=button]):focus-visible, .button[data-button-variant=tab]:is(a[href],
button,
summary,
input[type=button]).button--focus-visible, a[href]:focus-visible .button[data-button-variant=tab], a[href] .button[data-button-variant=tab].button--focus-visible, button:focus-visible .button[data-button-variant=tab], button .button[data-button-variant=tab].button--focus-visible, summary:focus-visible .button[data-button-variant=tab], summary .button[data-button-variant=tab].button--focus-visible {
  outline-offset: -2px;
}
.button[data-button-variant=tab] .button__text {
  border-left: 2px solid transparent;
  padding-inline-end: var(--size-rel-200);
  transition: border-color var(--transition-default), padding var(--transition-default);
}
.button[data-button-variant=tab] strong,
.button[data-button-variant=tab] b {
  font-weight: var(--weight-medium);
  display: block;
  font-size: var(--size-500);
  margin-bottom: 0.3em;
}
.button[data-button-variant=tab] strong + br,
.button[data-button-variant=tab] b + br {
  display: none;
}
.button[data-button-variant=tab]:has(strong, b) {
  --button-font-weight: var(--weight-regular);
}
[data-tab-display=horizontal] .button[data-button-variant=tab] {
  border-top-left-radius: var(--size-200);
  border-top-right-radius: var(--size-200);
}
[data-tab-display=vertical] .button[data-button-variant=tab] {
  border-radius: 0;
  border-bottom-left-radius: var(--size-200);
  border-top-left-radius: var(--size-200);
}
[data-tab-display=mobile] .button[data-button-variant=tab] {
  padding: 0.5em;
}
.button[data-button-variant=tab]:is(a[href],
button,
summary,
input[type=button]):is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary), .button[data-button-variant=tab]:is(a[href],
button,
summary,
input[type=button]).button--expanded, a[href]:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button[data-button-variant=tab], a[href] .button[data-button-variant=tab].button--expanded, button:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button[data-button-variant=tab], button .button[data-button-variant=tab].button--expanded, summary:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button[data-button-variant=tab], summary .button[data-button-variant=tab].button--expanded {
  --button-color: var(--color-bg);
  --button-bg: var(--color-text);
}

.button[data-button-variant=dot] {
  --button-outer-padding: 0;
  --button-border-radius: 50%;
  --button-border-width: 1px;
  --button-font-weight: var(--weight-regular);
  --button-color: var(--color-text);
  --button-bg: var(--color-bg);
  --button-border-color: var(--color-text-light-lrg);
  --button-hover-border-color: var(--color-text);
  position: relative;
  width: 1em;
  height: 1em;
  justify-content: center;
  align-items: center;
}
.button[data-button-variant=dot] .button__icon {
  font-size: var(--size-rel-200);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.button[data-button-variant=dot] .button__text:not(.visually-hidden) {
  position: absolute;
  top: calc(100% + var(--size-rel-100));
  left: 50%;
  transform: translateX(-50%);
  max-width: 15ch;
  width: max-content;
  background-color: var(--color-text);
  color: var(--color-bg);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity var(--transition-default);
  padding: var(--size-rel-200);
  border-radius: var(--size-rel-200);
  word-break: break-word;
  font-size: var(--size-rel-300);
}
.button[data-button-variant=dot]:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):hover .button__text, .button[data-button-variant=dot]:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--hover .button__text, a[href]:not(:disabled, .button--disabled):hover .button[data-button-variant=dot] .button__text, a[href]:not(:disabled, .button--disabled) .button[data-button-variant=dot].button--hover .button__text, button:not(:disabled, .button--disabled):hover .button[data-button-variant=dot] .button__text, button:not(:disabled, .button--disabled) .button[data-button-variant=dot].button--hover .button__text, summary:not(:disabled, .button--disabled):hover .button[data-button-variant=dot] .button__text, summary:not(:disabled, .button--disabled) .button[data-button-variant=dot].button--hover .button__text {
  opacity: 1;
}
.button[data-button-variant=dot]:is(a[href],
button,
summary,
input[type=button]):focus-visible .button__text, .button[data-button-variant=dot]:is(a[href],
button,
summary,
input[type=button]).button--focus-visible .button__text, a[href]:focus-visible .button[data-button-variant=dot] .button__text, a[href] .button[data-button-variant=dot].button--focus-visible .button__text, button:focus-visible .button[data-button-variant=dot] .button__text, button .button[data-button-variant=dot].button--focus-visible .button__text, summary:focus-visible .button[data-button-variant=dot] .button__text, summary .button[data-button-variant=dot].button--focus-visible .button__text {
  opacity: 1;
}
.button[data-button-variant=dot]:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled):active .button__text, .button[data-button-variant=dot]:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .button--disabled).button--active .button__text, a[href]:not(:disabled, .button--disabled):active .button[data-button-variant=dot] .button__text, a[href]:not(:disabled, .button--disabled) .button[data-button-variant=dot].button--active .button__text, button:not(:disabled, .button--disabled):active .button[data-button-variant=dot] .button__text, button:not(:disabled, .button--disabled) .button[data-button-variant=dot].button--active .button__text, summary:not(:disabled, .button--disabled):active .button[data-button-variant=dot] .button__text, summary:not(:disabled, .button--disabled) .button[data-button-variant=dot].button--active .button__text {
  transform: translateX(-50%) scale(98%);
}
.button[data-button-variant=dot]:is(a[href],
button,
summary,
input[type=button]):is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary), .button[data-button-variant=dot]:is(a[href],
button,
summary,
input[type=button]).button--expanded, a[href]:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button[data-button-variant=dot], a[href] .button[data-button-variant=dot].button--expanded, button:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button[data-button-variant=dot], button .button[data-button-variant=dot].button--expanded, summary:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button[data-button-variant=dot], summary .button[data-button-variant=dot].button--expanded {
  --button-color: var(--color-bg);
  --button-bg: var(--color-text);
  --button-border-color: var(--color-text);
  --button-hover-border-color: var(--color-text);
}

/* Specific chevron-down icon with aria-expanded="true" */
.button .fa-chevron-down {
  transition: transform var(--transition-default);
}

.button:is(a[href],
button,
summary,
input[type=button]):is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .fa-chevron-down, .button:is(a[href],
button,
summary,
input[type=button]).button--expanded .fa-chevron-down, a[href]:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button .fa-chevron-down, a[href] .button.button--expanded .fa-chevron-down, button:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button .fa-chevron-down, button .button.button--expanded .fa-chevron-down, summary:is([aria-expanded=true], [aria-selected=true], [aria-current=page], [aria-current=true], details[open] > summary) .button .fa-chevron-down, summary .button.button--expanded .fa-chevron-down {
  transform: rotate(180deg);
}

.form-single-input {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--size-500);
  align-items: stretch;
  transition: border-color var(--transition-default);
}
.form-single-input:focus-within {
  border-color: var(--color-text);
}
.form-single-input .field-container {
  display: contents;
}
.form-single-input label {
  --flow-spacing: 0;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.form-single-input input {
  border: 0px none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  width: 100%;
  border-inline-end: 1px solid var(--color-border);
  max-width: initial;
}
.form-single-input .button[data-button-variant=icon] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex-grow: 0;
  height: auto;
  padding-inline: var(--size-400) var(--size-500);
}
.form-single-input input,
.form-single-input button {
  outline-offset: -1px !important;
  outline-width: 2px;
}

.multi-range {
  --range-track: var(--color-border);
  --range-fill: var(--color-text);
  --range-thumb: var(--color-text);
  --range-height: 0.25rem;
  --range-thumb-size: 1.15rem;
  --range-start: 0%;
  --range-end: 100%;
  display: block;
}

.multi-range__inputs {
  position: relative;
  height: var(--range-thumb-size);
}

/* The track, and the span between the handles drawn over it */
.multi-range__inputs__bar {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  height: var(--range-height);
  border-radius: var(--range-height);
  background-color: var(--range-track);
}

.multi-range__inputs__bar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--range-start);
  inline-size: calc(var(--range-end) - var(--range-start));
  border-radius: inherit;
  background-color: var(--range-fill);
}

.multi-range__inputs label:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.multi-range__inputs label:not(:focus):not(:active) + * {
  margin-top: 0;
}

/* Both inputs stack on the same track - only their thumbs take pointer events */
.multi-range__inputs input[type=range] {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  background: none;
  pointer-events: none;
}

.multi-range__inputs input[type=range]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  background-color: var(--range-thumb);
  cursor: grab;
}

.multi-range__inputs input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  background-color: var(--range-thumb);
  cursor: grab;
}

.multi-range__inputs input[type=range]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--range-thumb);
  outline-offset: 2px;
}

.multi-range__values {
  display: flex;
  justify-content: space-between;
  gap: var(--size-300);
  margin-block-start: var(--size-200);
  font-size: var(--size-300);
}

.select-group {
  position: relative;
  z-index: var(--z-index-400);
  display: block;
  max-width: var(--width-content);
}
*:has(> .select-group) {
  position: relative;
  z-index: var(--z-index-400);
}
.select-group:has([aria-expanded=true]), *:has(> .select-group [aria-expanded=true]) {
  z-index: var(--z-index-500);
}

.select-group__button[data-button-variant=primary] {
  --button-border-color: var(--color-border);
  --button-border-width: 1px;
  --button-font-weight: var(--weight-regular);
  --button-gap: 0.7em;
  --button-bg: var(--color-bg);
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: var(--z-index-400);
  text-align: left;
  width: 100%;
  transition: border var(--transition-default), border-radius var(--transition-default);
}
.select-group__button[data-button-variant=primary] .button__text {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-group__button[data-button-variant=primary] .button__text em {
  font-size: var(--size-300);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-group__button[data-button-variant=primary] .faicon {
  transition: var(--transition-default) transform;
}
.select-group__button[data-button-variant=primary][aria-expanded=true] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select-group__list {
  position: relative;
  z-index: var(--z-index-300);
  --width-content: 100%;
  border: 1px solid var(--color-border);
  border-block-start: 0px none;
  border-radius: 0 0 var(--size-100) var(--size-100);
}
.select-group__list fieldset {
  padding: 0;
  margin-inline: 0;
  border: 0px none;
}
@media (min-width: 62em) {
  .select-group__list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-bg);
    max-height: 10em;
    overflow: auto;
  }
}

.aircraft-icon {
  display: block;
  width: 600px;
  max-width: 100%;
  padding-bottom: 30%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}

.aircraft-icon[data-size=relative] {
  background-size: 100% auto;
}

.aircraft-icon--global {
  background-image: url("../assets/images/aircraft/global-dark.png");
}
[data-theme=alternative] .aircraft-icon--global, [data-theme=grey] .aircraft-icon--global {
  background-image: url("../assets/images/aircraft/global-light.png");
}
.aircraft-icon--global[data-size=relative] {
  background-size: calc(100% * 0.8823529412) auto;
}

.aircraft-icon--heavy {
  background-image: url("../assets/images/aircraft/heavy-dark.png");
}
[data-theme=alternative] .aircraft-icon--heavy, [data-theme=grey] .aircraft-icon--heavy {
  background-image: url("../assets/images/aircraft/heavy-light.png");
}
.aircraft-icon--heavy[data-size=relative] {
  background-size: calc(100% * 0.7941176471) auto;
}

.aircraft-icon--light {
  background-image: url("../assets/images/aircraft/light-dark.png");
}
[data-theme=alternative] .aircraft-icon--light, [data-theme=grey] .aircraft-icon--light {
  background-image: url("../assets/images/aircraft/light-light.png");
}
.aircraft-icon--light[data-size=relative] {
  background-size: calc(100% * 0.4411764706) auto;
}

.aircraft-icon--super-light {
  background-image: url("../assets/images/aircraft/super-light-dark.png");
}
[data-theme=alternative] .aircraft-icon--super-light, [data-theme=grey] .aircraft-icon--super-light {
  background-image: url("../assets/images/aircraft/super-light-light.png");
}
.aircraft-icon--super-light[data-size=relative] {
  background-size: calc(100% * 0.5) auto;
}

.aircraft-icon--super-midsized {
  background-image: url("../assets/images/aircraft/super-midsized-dark.png");
}
[data-theme=alternative] .aircraft-icon--super-midsized, [data-theme=grey] .aircraft-icon--super-midsized {
  background-image: url("../assets/images/aircraft/super-midsized-light.png");
}
.aircraft-icon--super-midsized[data-size=relative] {
  background-size: calc(100% * 0.6470588235) auto;
}

.aircraft-icon--turboprop {
  background-image: url("../assets/images/aircraft/turboprop-dark.png");
}
[data-theme=alternative] .aircraft-icon--turboprop, [data-theme=grey] .aircraft-icon--turboprop {
  background-image: url("../assets/images/aircraft/turboprop-light.png");
}
.aircraft-icon--turboprop[data-size=relative] {
  background-size: calc(100% * 0.4411764706) auto;
}

.aircraft-icon--vlj {
  background-image: url("../assets/images/aircraft/vlj-dark.png");
}
[data-theme=alternative] .aircraft-icon--vlj, [data-theme=grey] .aircraft-icon--vlj {
  background-image: url("../assets/images/aircraft/vlj-light.png");
}
.aircraft-icon--vlj[data-size=relative] {
  background-size: calc(100% * 0.3676470588) auto;
}

.custom-icon {
  --custom-icon-color: currentColor;
  --custom-icon-size: 1em;
  --custom-icon-bg: var(--color-bg);
  --custom-icon-accent: var(--color-text);
  height: var(--custom-icon-size);
  font-size: var(--custom-icon-size);
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.custom-icon svg {
  height: 100%;
  width: auto;
}
.custom-icon path,
.custom-icon polygon,
.custom-icon circle,
.custom-icon rectangle {
  transition: var(--transition-default) fill;
  fill: var(--custom-icon-color);
}
.custom-icon path.bg,
.custom-icon polygon.bg,
.custom-icon circle.bg,
.custom-icon rectangle.bg {
  fill: var(--custom-icon-bg);
}
.custom-icon path.accent,
.custom-icon polygon.accent,
.custom-icon circle.accent,
.custom-icon rectangle.accent {
  fill: var(--custom-icon-accent);
}

.faicon {
  --faicon-secondary-color: var(--color-bg);
  --fa-border-width: 0.5px;
  --fa-secondary-color: var(--faicon-secondary-color);
  --fa-secondary-opacity: 1;
}
.card:not([data-card-type=bullet]:not(:hover, :focus)) .faicon {
  --faicon-secondary-color: var(--color-bg);
}

.faicon[data-size=product] {
  font-size: var(--size-rel-200);
}

.icon-size[data-size="0.5"] {
  font-size: 0.5rem;
}

.icon-size[data-size="1"] {
  font-size: 1rem;
}

.icon-size[data-size="1.5"] {
  font-size: 1.5rem;
}

.icon-size[data-size="2"] {
  font-size: 2rem;
}

.icon-size[data-size="2.5"] {
  font-size: 2.5rem;
}

.icon-size[data-size="3"] {
  font-size: 3rem;
}

.icon-size[data-size="3.5"] {
  font-size: 3.5rem;
}

.icon-size[data-size="4"] {
  font-size: 4rem;
}

.icon-size[data-size="4.5"] {
  font-size: 4.5rem;
}

.icon-size[data-size="5"] {
  font-size: 5rem;
}

.icon-size[data-size="5.5"] {
  font-size: 5.5rem;
}

.icon-size[data-size="6"] {
  font-size: 6rem;
}

.icon-size[data-size="6.5"] {
  font-size: 6.5rem;
}

.icon-size[data-size="7"] {
  font-size: 7rem;
}

.icon-size[data-size="7.5"] {
  font-size: 7.5rem;
}

.icon-size[data-size="8"] {
  font-size: 8rem;
}

.icon-size[data-size="8.5"] {
  font-size: 8.5rem;
}

.icon-size[data-size="9"] {
  font-size: 9rem;
}

.icon-size[data-size="9.5"] {
  font-size: 9.5rem;
}

.icon-size[data-size="10"] {
  font-size: 10rem;
}

.service-icon {
  display: block;
  max-width: 10em;
}

.service-icon__icon {
  display: block;
  width: 100%;
  max-width: 100%;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.service-icon__text {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  max-width: 80%;
  margin-inline: auto;
  font-style: normal;
}

.service-icon--aircraft-choice .service-icon__icon {
  background-image: url("../assets/images/service-icons/aircraft-choice-dark.png");
}
[data-theme=alternative] .service-icon--aircraft-choice .service-icon__icon, [data-theme=grey] .service-icon--aircraft-choice .service-icon__icon {
  background-image: url("../assets/images/service-icons/aircraft-choice-light.png");
}

.service-icon--aircraft-sales .service-icon__icon {
  background-image: url("../assets/images/service-icons/aircraft-sales-dark.png");
}
[data-theme=alternative] .service-icon--aircraft-sales .service-icon__icon, [data-theme=grey] .service-icon--aircraft-sales .service-icon__icon {
  background-image: url("../assets/images/service-icons/aircraft-sales-light.png");
}

.service-icon--airport-information .service-icon__icon {
  background-image: url("../assets/images/service-icons/airport-information-dark.png");
}
[data-theme=alternative] .service-icon--airport-information .service-icon__icon, [data-theme=grey] .service-icon--airport-information .service-icon__icon {
  background-image: url("../assets/images/service-icons/airport-information-light.png");
}

.service-icon--buying-power .service-icon__icon {
  background-image: url("../assets/images/service-icons/buying-power-dark.png");
}
[data-theme=alternative] .service-icon--buying-power .service-icon__icon, [data-theme=grey] .service-icon--buying-power .service-icon__icon {
  background-image: url("../assets/images/service-icons/buying-power-light.png");
}

.service-icon--carbon-offset .service-icon__icon {
  background-image: url("../assets/images/service-icons/carbon-offset-dark.png");
}
[data-theme=alternative] .service-icon--carbon-offset .service-icon__icon, [data-theme=grey] .service-icon--carbon-offset .service-icon__icon {
  background-image: url("../assets/images/service-icons/carbon-offset-light.png");
}

.service-icon--deicing .service-icon__icon {
  background-image: url("../assets/images/service-icons/deicing-dark.png");
}
[data-theme=alternative] .service-icon--deicing .service-icon__icon, [data-theme=grey] .service-icon--deicing .service-icon__icon {
  background-image: url("../assets/images/service-icons/deicing-light.png");
}

.service-icon--empty-legs-listings .service-icon__icon {
  background-image: url("../assets/images/service-icons/empty-legs-listings-dark.png");
}
[data-theme=alternative] .service-icon--empty-legs-listings .service-icon__icon, [data-theme=grey] .service-icon--empty-legs-listings .service-icon__icon {
  background-image: url("../assets/images/service-icons/empty-legs-listings-light.png");
}

.service-icon--flexible-terms .service-icon__icon {
  background-image: url("../assets/images/service-icons/flexible-terms-dark.png");
}
[data-theme=alternative] .service-icon--flexible-terms .service-icon__icon, [data-theme=grey] .service-icon--flexible-terms .service-icon__icon {
  background-image: url("../assets/images/service-icons/flexible-terms-light.png");
}

.service-icon--fund-protection .service-icon__icon {
  background-image: url("../assets/images/service-icons/fund-protection-dark.png");
}
[data-theme=alternative] .service-icon--fund-protection .service-icon__icon, [data-theme=grey] .service-icon--fund-protection .service-icon__icon {
  background-image: url("../assets/images/service-icons/fund-protection-light.png");
}

.service-icon--market-intelligence .service-icon__icon {
  background-image: url("../assets/images/service-icons/market-intelligence-dark.png");
}
[data-theme=alternative] .service-icon--market-intelligence .service-icon__icon, [data-theme=grey] .service-icon--market-intelligence .service-icon__icon {
  background-image: url("../assets/images/service-icons/market-intelligence-light.png");
}

.service-icon--price-guarantee .service-icon__icon {
  background-image: url("../assets/images/service-icons/price-guarantee-dark.png");
}
[data-theme=alternative] .service-icon--price-guarantee .service-icon__icon, [data-theme=grey] .service-icon--price-guarantee .service-icon__icon {
  background-image: url("../assets/images/service-icons/price-guarantee-light.png");
}

.service-icon--recovery-protection .service-icon__icon {
  background-image: url("../assets/images/service-icons/recovery-protection-dark.png");
}
[data-theme=alternative] .service-icon--recovery-protection .service-icon__icon, [data-theme=grey] .service-icon--recovery-protection .service-icon__icon {
  background-image: url("../assets/images/service-icons/recovery-protection-light.png");
}

.service-icon--recovery-protection2 .service-icon__icon {
  background-image: url("../assets/images/service-icons/recovery-protection2-dark.png");
}
[data-theme=alternative] .service-icon--recovery-protection2 .service-icon__icon, [data-theme=grey] .service-icon--recovery-protection2 .service-icon__icon {
  background-image: url("../assets/images/service-icons/recovery-protection2-light.png");
}

.service-icon--rewards .service-icon__icon {
  background-image: url("../assets/images/service-icons/rewards-dark.png");
}
[data-theme=alternative] .service-icon--rewards .service-icon__icon, [data-theme=grey] .service-icon--rewards .service-icon__icon {
  background-image: url("../assets/images/service-icons/rewards-light.png");
}

.service-icon--tailored-terms .service-icon__icon {
  background-image: url("../assets/images/service-icons/tailored-terms-dark.png");
}
[data-theme=alternative] .service-icon--tailored-terms .service-icon__icon, [data-theme=grey] .service-icon--tailored-terms .service-icon__icon {
  background-image: url("../assets/images/service-icons/tailored-terms-light.png");
}

.img-link {
  position: relative;
  display: inline-block;
  transition: var(--transition-default) transform;
}

.img-link[href]:hover {
  transform: scale(1.05);
}

.img-link img {
  height: 8rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.img-strip {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  overflow: hidden;
}
.img-strip img {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  max-width: initial;
  object-fit: cover;
  object-position: 50% 50%;
  animation: img-strip-movement 120s linear infinite;
}
@media (min-width: 62em) {
  .img-strip {
    aspect-ratio: 16/5;
  }
}

@keyframes img-strip-movement {
  0% {
    transform: none;
  }
  25% {
    transform: scale(1.1) translateX(-5%) translateY(-2%);
  }
  50% {
    transform: none;
  }
  75% {
    transform: scale(1.3) translateX(5%) translateY(2%);
  }
  100% {
    transform: none;
  }
}
/* Sizing runs through custom properties so the macro can set them inline, and
   any component wrapping an embed can override them from CSS. Each one takes a
   per-breakpoint value (--iframe-ratio-md and so on) that falls back down the
   chain to --iframe-*-base, then to the default below. */
.iframe-embed {
  --iframe-ratio: var(--iframe-ratio-base, 16 / 9);
  --iframe-height: var(--iframe-height-base, auto);
  --iframe-min-height: var(--iframe-min-height-base, 0);
  --iframe-max-height: var(--iframe-max-height-base, none);
  position: relative;
  width: 100%;
}

@media (min-width: 36em) {
  .iframe-embed {
    --iframe-ratio: var(--iframe-ratio-sm, var(--iframe-ratio-base, 16 / 9));
    --iframe-height: var(--iframe-height-sm, var(--iframe-height-base, auto));
    --iframe-min-height: var(--iframe-min-height-sm, var(--iframe-min-height-base, 0));
    --iframe-max-height: var(--iframe-max-height-sm, var(--iframe-max-height-base, none));
  }
}
@media (min-width: 48em) {
  .iframe-embed {
    --iframe-ratio: var(--iframe-ratio-md, var(--iframe-ratio-sm, var(--iframe-ratio-base, 16 / 9)));
    --iframe-height: var(--iframe-height-md, var(--iframe-height-sm, var(--iframe-height-base, auto)));
    --iframe-min-height: var(--iframe-min-height-md, var(--iframe-min-height-sm, var(--iframe-min-height-base, 0)));
    --iframe-max-height: var(--iframe-max-height-md, var(--iframe-max-height-sm, var(--iframe-max-height-base, none)));
  }
}
@media (min-width: 62em) {
  .iframe-embed {
    --iframe-ratio: var(--iframe-ratio-lg, var(--iframe-ratio-md, var(--iframe-ratio-sm, var(--iframe-ratio-base, 16 / 9))));
    --iframe-height: var(--iframe-height-lg, var(--iframe-height-md, var(--iframe-height-sm, var(--iframe-height-base, auto))));
    --iframe-min-height: var(--iframe-min-height-lg, var(--iframe-min-height-md, var(--iframe-min-height-sm, var(--iframe-min-height-base, 0))));
    --iframe-max-height: var(--iframe-max-height-lg, var(--iframe-max-height-md, var(--iframe-max-height-sm, var(--iframe-max-height-base, none))));
  }
}
@media (min-width: 75em) {
  .iframe-embed {
    --iframe-ratio: var(--iframe-ratio-xl, var(--iframe-ratio-lg, var(--iframe-ratio-md, var(--iframe-ratio-sm, var(--iframe-ratio-base, 16 / 9)))));
    --iframe-height: var(--iframe-height-xl, var(--iframe-height-lg, var(--iframe-height-md, var(--iframe-height-sm, var(--iframe-height-base, auto)))));
    --iframe-min-height: var(--iframe-min-height-xl, var(--iframe-min-height-lg, var(--iframe-min-height-md, var(--iframe-min-height-sm, var(--iframe-min-height-base, 0)))));
    --iframe-max-height: var(--iframe-max-height-xl, var(--iframe-max-height-lg, var(--iframe-max-height-md, var(--iframe-max-height-sm, var(--iframe-max-height-base, none)))));
  }
}
.iframe-embed iframe {
  display: block;
  width: 100%;
  height: var(--iframe-height);
  min-height: var(--iframe-min-height);
  max-height: var(--iframe-max-height);
  aspect-ratio: var(--iframe-ratio);
  border: 0;
}

.iframe-embed figcaption {
  margin-block-start: var(--size-300);
}

/* Sizing comes from .iframe-embed - the YouTube wrapper carries both classes.
   This hook is here for anything YouTube-specific. */
table {
  position: relative;
  overflow: auto;
  border: 0px none;
  box-shadow: var(--color-boxshadow-default);
  max-width: 100%;
  font-size: var(--size-rel-300);
}
@media (min-width: 62em) {
  table {
    font-size: var(--size-rel-400);
  }
}
table table {
  border: 0px none;
}
table td, table th {
  border-color: var(--color-tint);
  padding: var(--size-300);
}
table th, table thead td {
  --row-color: var(--color-text);
  background-color: var(--color-text);
  color: var(--color-bg);
  font-weight: var(--weight-bold);
}
table tbody tr:nth-child(even) {
  --row-color: var(--color-bg);
  background-color: var(--color-bg);
}
table td:first-child, table th:first-child {
  position: sticky;
  left: 0;
  background-color: var(--row-color, var(--color-bg));
  z-index: var(--zindex-400);
}

.table-wrapper {
  overflow: auto;
  max-width: 100%;
}

.table-wrapper table {
  overflow: visible;
}

.heading__preheading + .heading__text {
  display: block;
  width: fit-content;
  max-width: 100%;
}

.heading__preheading {
  display: block;
  width: fit-content;
  max-width: 100%;
}

h1[data-justify=center],
.h1[data-justify=center],
h2[data-justify=center],
.h2[data-justify=center],
h3[data-justify=center],
.h3[data-justify=center],
h4[data-justify=center],
.h4[data-justify=center],
h5[data-justify=center],
.h5[data-justify=center],
h6[data-justify=center],
.h6[data-justify=center] {
  --heading-rule-origin: center;
  text-align: center;
  margin-inline: auto;
}
h1[data-justify=center] .heading__preheading,
h1[data-justify=center] .heading__text,
.h1[data-justify=center] .heading__preheading,
.h1[data-justify=center] .heading__text,
h2[data-justify=center] .heading__preheading,
h2[data-justify=center] .heading__text,
.h2[data-justify=center] .heading__preheading,
.h2[data-justify=center] .heading__text,
h3[data-justify=center] .heading__preheading,
h3[data-justify=center] .heading__text,
.h3[data-justify=center] .heading__preheading,
.h3[data-justify=center] .heading__text,
h4[data-justify=center] .heading__preheading,
h4[data-justify=center] .heading__text,
.h4[data-justify=center] .heading__preheading,
.h4[data-justify=center] .heading__text,
h5[data-justify=center] .heading__preheading,
h5[data-justify=center] .heading__text,
.h5[data-justify=center] .heading__preheading,
.h5[data-justify=center] .heading__text,
h6[data-justify=center] .heading__preheading,
h6[data-justify=center] .heading__text,
.h6[data-justify=center] .heading__preheading,
.h6[data-justify=center] .heading__text {
  margin-inline: auto;
}
h1[data-justify=right],
.h1[data-justify=right],
h2[data-justify=right],
.h2[data-justify=right],
h3[data-justify=right],
.h3[data-justify=right],
h4[data-justify=right],
.h4[data-justify=right],
h5[data-justify=right],
.h5[data-justify=right],
h6[data-justify=right],
.h6[data-justify=right] {
  --heading-rule-origin: right;
  text-align: right;
}
h1[data-justify=right] .heading__preheading,
h1[data-justify=right] .heading__text,
.h1[data-justify=right] .heading__preheading,
.h1[data-justify=right] .heading__text,
h2[data-justify=right] .heading__preheading,
h2[data-justify=right] .heading__text,
.h2[data-justify=right] .heading__preheading,
.h2[data-justify=right] .heading__text,
h3[data-justify=right] .heading__preheading,
h3[data-justify=right] .heading__text,
.h3[data-justify=right] .heading__preheading,
.h3[data-justify=right] .heading__text,
h4[data-justify=right] .heading__preheading,
h4[data-justify=right] .heading__text,
.h4[data-justify=right] .heading__preheading,
.h4[data-justify=right] .heading__text,
h5[data-justify=right] .heading__preheading,
h5[data-justify=right] .heading__text,
.h5[data-justify=right] .heading__preheading,
.h5[data-justify=right] .heading__text,
h6[data-justify=right] .heading__preheading,
h6[data-justify=right] .heading__text,
.h6[data-justify=right] .heading__preheading,
.h6[data-justify=right] .heading__text {
  margin-inline-start: auto;
  margin-inline-end: 0;
}
h1[data-border=preheading] .heading__preheading,
.h1[data-border=preheading] .heading__preheading,
h2[data-border=preheading] .heading__preheading,
.h2[data-border=preheading] .heading__preheading,
h3[data-border=preheading] .heading__preheading,
.h3[data-border=preheading] .heading__preheading,
h4[data-border=preheading] .heading__preheading,
.h4[data-border=preheading] .heading__preheading,
h5[data-border=preheading] .heading__preheading,
.h5[data-border=preheading] .heading__preheading,
h6[data-border=preheading] .heading__preheading,
.h6[data-border=preheading] .heading__preheading {
  position: relative;
  padding-bottom: calc(var(--size-300) + 2px);
}
h1[data-border=preheading] .heading__preheading:after,
.h1[data-border=preheading] .heading__preheading:after,
h2[data-border=preheading] .heading__preheading:after,
.h2[data-border=preheading] .heading__preheading:after,
h3[data-border=preheading] .heading__preheading:after,
.h3[data-border=preheading] .heading__preheading:after,
h4[data-border=preheading] .heading__preheading:after,
.h4[data-border=preheading] .heading__preheading:after,
h5[data-border=preheading] .heading__preheading:after,
.h5[data-border=preheading] .heading__preheading:after,
h6[data-border=preheading] .heading__preheading:after,
.h6[data-border=preheading] .heading__preheading:after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-text);
  transform-origin: var(--heading-rule-origin, left) center;
  transition: transform var(--transition-long);
}
h1[data-border=preheading] .heading__text,
.h1[data-border=preheading] .heading__text,
h2[data-border=preheading] .heading__text,
.h2[data-border=preheading] .heading__text,
h3[data-border=preheading] .heading__text,
.h3[data-border=preheading] .heading__text,
h4[data-border=preheading] .heading__text,
.h4[data-border=preheading] .heading__text,
h5[data-border=preheading] .heading__text,
.h5[data-border=preheading] .heading__text,
h6[data-border=preheading] .heading__text,
.h6[data-border=preheading] .heading__text {
  border-top: 1px solid var(--color-text);
  margin-top: 0;
  padding-top: var(--size-rel-100);
}
h1[data-border=heading] .heading__text,
.h1[data-border=heading] .heading__text,
h2[data-border=heading] .heading__text,
.h2[data-border=heading] .heading__text,
h3[data-border=heading] .heading__text,
.h3[data-border=heading] .heading__text,
h4[data-border=heading] .heading__text,
.h4[data-border=heading] .heading__text,
h5[data-border=heading] .heading__text,
.h5[data-border=heading] .heading__text,
h6[data-border=heading] .heading__text,
.h6[data-border=heading] .heading__text {
  border-bottom: 1px solid var(--color-text);
  padding-bottom: var(--size-rel-100);
}
h1[data-reveal-state=hidden] .heading__preheading:after,
.h1[data-reveal-state=hidden] .heading__preheading:after,
h2[data-reveal-state=hidden] .heading__preheading:after,
.h2[data-reveal-state=hidden] .heading__preheading:after,
h3[data-reveal-state=hidden] .heading__preheading:after,
.h3[data-reveal-state=hidden] .heading__preheading:after,
h4[data-reveal-state=hidden] .heading__preheading:after,
.h4[data-reveal-state=hidden] .heading__preheading:after,
h5[data-reveal-state=hidden] .heading__preheading:after,
.h5[data-reveal-state=hidden] .heading__preheading:after,
h6[data-reveal-state=hidden] .heading__preheading:after,
.h6[data-reveal-state=hidden] .heading__preheading:after {
  transform: scaleX(0);
}
h1[data-reveal-state=shown] .heading__preheading:after,
.h1[data-reveal-state=shown] .heading__preheading:after,
h2[data-reveal-state=shown] .heading__preheading:after,
.h2[data-reveal-state=shown] .heading__preheading:after,
h3[data-reveal-state=shown] .heading__preheading:after,
.h3[data-reveal-state=shown] .heading__preheading:after,
h4[data-reveal-state=shown] .heading__preheading:after,
.h4[data-reveal-state=shown] .heading__preheading:after,
h5[data-reveal-state=shown] .heading__preheading:after,
.h5[data-reveal-state=shown] .heading__preheading:after,
h6[data-reveal-state=shown] .heading__preheading:after,
.h6[data-reveal-state=shown] .heading__preheading:after {
  transform: scaleX(1);
}

.time-format {
  font-style: italic;
}

.card {
  --card-border: var(--color-tint);
  --bg: var(--color-bg);
  --text: var(--color-text);
  --card-hover-bg: var(--color-bg);
  --card-hover-color: var(--color-text);
  --card-hover-border: var(--color-text);
  --flow-spacing: var(--size-400);
  --card-padding: var(--flow-spacing);
  --card-border-radius: 0;
  --card-width: var(--width-card);
  --card-box-shadow: var(--color-boxshadow-default);
  --card-transition: var(--transition-default);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  max-width: 100%;
  width: var(--card-width);
  flex-grow: 1;
  flex-shrink: 1;
  text-align: left;
  container-name: card;
  container-type: inline-size;
}
.card:only-child {
  min-height: 100%;
}

.card__inner {
  position: relative;
  text-decoration: none;
  border: 1px solid var(--card-border);
  background-color: var(--bg);
  color: var(--text);
  text-align: inherit;
  border-radius: var(--card-border-radius);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: var(--card-box-shadow);
  overflow: hidden;
  transition: var(--card-transition) color, var(--card-transition) background-color, var(--card-transition) border, var(--card-transition) box-shadow;
}
.card__inner:is(button, a[href]) {
  cursor: pointer;
}
.card__inner:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .card--disabled):hover, .card__inner:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .card--disabled).card--hover, a[href]:not(:disabled, .card--disabled):hover .card__inner, a[href]:not(:disabled, .card--disabled) .card__inner.card--hover, button:not(:disabled, .card--disabled):hover .card__inner, button:not(:disabled, .card--disabled) .card__inner.card--hover, summary:not(:disabled, .card--disabled):hover .card__inner, summary:not(:disabled, .card--disabled) .card__inner.card--hover {
  color: var(--card-hover-color);
  background-color: var(--card-hover-bg);
}
.card__inner:has(.card__action) {
  justify-content: space-between;
}

.card__main {
  width: 100%;
}

.card__content,
.card__action {
  padding: var(--card-padding);
}
.card__content + .card__content, .card__main:has(.card__content) + .card__content,
.card__content + .card__action,
.card__main:has(.card__content) + .card__action,
.card__action + .card__content,
.card__action + .card__action {
  padding-block-start: 0;
}

.card__content p {
  text-wrap: balance;
}

.card__content ul:not([class]) {
  list-style-type: disc;
  padding-inline-start: var(--size-500);
}

.card__action {
  display: flex;
  align-items: center;
  gap: var(--card-padding);
  flex-wrap: wrap;
  width: 100%;
}

.card__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flow-spacing);
}

.card__metadata__group {
  padding-inline-start: var(--card-padding);
  border-left: 2px solid var(--color-accent);
}

.card__metadata dt {
  font-weight: var(--weight-bold);
  font-size: var(--size-rel-300);
}

.card__image {
  position: relative;
  height: 10em;
  overflow: hidden;
}
.card__image > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-default) transform;
}

.card__inline-image {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__inline-image > img {
  max-width: 70%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--card-border-radius);
  object-fit: contain;
}

.card__tag {
  position: relative;
  text-align: right;
}
.card__tag .button {
  font-size: var(--size-300);
}

.card__image__tag {
  position: absolute;
  bottom: var(--size-200);
  right: var(--size-200);
}

.card__inner:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .card--disabled):hover, .card__inner:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .card--disabled).card--hover, a[href]:not(:disabled, .card--disabled):hover .card__inner, a[href]:not(:disabled, .card--disabled) .card__inner.card--hover, button:not(:disabled, .card--disabled):hover .card__inner, button:not(:disabled, .card--disabled) .card__inner.card--hover, summary:not(:disabled, .card--disabled):hover .card__inner, summary:not(:disabled, .card--disabled) .card__inner.card--hover {
  border-color: var(--card-hover-border);
}
.card__inner:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .card--disabled):hover .card__image > img, .card__inner:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .card--disabled).card--hover .card__image > img, a[href]:not(:disabled, .card--disabled):hover .card__inner .card__image > img, a[href]:not(:disabled, .card--disabled) .card__inner.card--hover .card__image > img, button:not(:disabled, .card--disabled):hover .card__inner .card__image > img, button:not(:disabled, .card--disabled) .card__inner.card--hover .card__image > img, summary:not(:disabled, .card--disabled):hover .card__inner .card__image > img, summary:not(:disabled, .card--disabled) .card__inner.card--hover .card__image > img {
  transform: scale(1.2);
}
.card__inner:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .card--disabled):active .card__content, .card__inner:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .card--disabled).card--active .card__content, a[href]:not(:disabled, .card--disabled):active .card__inner .card__content, a[href]:not(:disabled, .card--disabled) .card__inner.card--active .card__content, button:not(:disabled, .card--disabled):active .card__inner .card__content, button:not(:disabled, .card--disabled) .card__inner.card--active .card__content, summary:not(:disabled, .card--disabled):active .card__inner .card__content, summary:not(:disabled, .card--disabled) .card__inner.card--active .card__content {
  transform: scale(98%);
}

.card[data-card-type=bullet] {
  --bg: var(--color-bg);
  --text: var(--color-text);
  --card-hover-bg: var(--color-bg);
  --card-hover-color: var(--color-card-accent);
  --card-bullet-size: calc(1.5 * var(--card-padding));
}
.card[data-card-type=bullet] .card__bullet {
  font-size: var(--card-bullet-size);
  width: calc(2 * var(--card-padding) + var(--card-bullet-size));
  display: block;
  flex-grow: 0 !important;
}
.card[data-card-type=bullet] .card__bullet[data-color=accent] {
  color: var(--color-accent);
}
.card[data-card-type=bullet][data-textalign=center] .card__bullet {
  margin-inline: auto;
}
.card[data-card-type=bullet][data-textalign=center] p {
  margin-inline: auto;
}
.card[data-card-type=bullet] .card__inner:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .card--disabled):hover .card__bullet, .card[data-card-type=bullet] .card__inner:is(a[href],
button,
summary,
input[type=button]):not(:disabled, .card--disabled).card--hover .card__bullet, a[href]:not(:disabled, .card--disabled):hover .card[data-card-type=bullet] .card__inner .card__bullet, a[href]:not(:disabled, .card--disabled) .card[data-card-type=bullet] .card__inner.card--hover .card__bullet, button:not(:disabled, .card--disabled):hover .card[data-card-type=bullet] .card__inner .card__bullet, button:not(:disabled, .card--disabled) .card[data-card-type=bullet] .card__inner.card--hover .card__bullet, summary:not(:disabled, .card--disabled):hover .card[data-card-type=bullet] .card__inner .card__bullet, summary:not(:disabled, .card--disabled) .card[data-card-type=bullet] .card__inner.card--hover .card__bullet {
  color: var(--color-card-accent);
}

.card[data-card-type=feature] {
  --card-hover-color: var(--color-card-accent);
  --card-width: var(--width-card-wide);
  text-align: center;
}
.card[data-card-type=feature] .card__content p {
  margin-inline: auto;
}
.card[data-card-type=feature] .card__icon {
  font-size: var(--size-800);
  height: 1em;
  line-height: 1;
}
.card[data-card-type=feature] .card__icon[data-color=accent] {
  color: var(--color-card-accent);
}
.card[data-card-type=feature] .card__action {
  justify-content: center;
}

.card[data-card-type=article] {
  --card-width: var(--width-card-wide);
}

.card[data-card-type=image] .card__image {
  height: auto;
}
.card[data-card-type=image] .card__image > img {
  position: relative;
  left: auto;
  top: auto;
  height: auto;
  width: 100%;
}
.card[data-card-type=image] [data-card-fill] .card__image {
  aspect-ratio: 16/9;
}
.card[data-card-type=image] [data-card-fill] .card__image > img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.card[data-card-width=full] {
  --card-width: 100% !important;
}

.card[data-card-width=auto] {
  --card-width: auto;
}

.card[data-card-width=menu] {
  flex-grow: 1;
}
.card[data-card-width=menu][data-card-type=article], .card[data-card-width=menu][data-card-type=feature] {
  --card-width: var(--width-card);
}
@media (min-width: 75em) {
  .card[data-card-width=menu][data-card-type=article], .card[data-card-width=menu][data-card-type=feature] {
    --card-width: var(--width-card-wide);
  }
}

.card[data-card-height=tall] .card__image {
  height: 20em;
}

.card[data-card-border=none] {
  --card-border: transparent;
  --card-box-shadow: none;
}

.card[data-card-border=shadow] {
  --card-box-shadow: var(--color-boxshadow-drop);
}

.card[data-card-justify=center] {
  margin-inline: auto;
}

.card[data-textalign=center] {
  text-align: center;
}
.card[data-textalign=center] .card__action {
  justify-content: center;
}
.card[data-textalign=center] .icon-list__item {
  justify-content: center;
}

.card[data-card-type=profile] .card__image {
  height: 20em;
}

.card[data-card-type=aircraft] .definition-list,
.card[data-card-type=aircraft-model] .definition-list {
  --flow-spacing: var(--size-400);
  font-size: var(--size-400);
}

/* Split orientation - media on one side, content on the other. Stacked until
   the card itself is wide enough for two columns, then 50:50. */
.card[data-card-orientation=split] {
  --card-width: 100%;
  --card-split-image-height: 14em;
}
.card[data-card-orientation=split] .card__inner {
  justify-content: flex-start;
}
.card[data-card-orientation=split] .card__image {
  flex: 0 0 auto;
  height: var(--card-split-image-height);
}
.card[data-card-orientation=split] .card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.card[data-card-orientation=split] {
  /* Push the action and anything after it to the foot of the card */
}
.card[data-card-orientation=split] .card__body > .card__main {
  flex-grow: 1;
}
@container card (min-width: 48em) {
  .card[data-card-orientation=split] .card__inner {
    flex-direction: row;
    align-items: stretch;
  }
  .card[data-card-orientation=split] .card__image,
  .card[data-card-orientation=split] .card__body {
    flex: 0 0 50%;
    width: 50%;
  }
  .card[data-card-orientation=split] {
    /* The image column takes its height from the content column and the
       photo covers it - .card__image already positions its img absolutely
       with object-fit: cover */
  }
  .card[data-card-orientation=split] .card__image {
    height: auto;
    align-self: stretch;
  }
}

@container card (min-width: 48em) {
  .card[data-card-orientation=split][data-card-direction=reverse] .card__inner {
    flex-direction: row-reverse;
  }
}

.card[data-card-type=aircraft-model] {
  --card-padding: var(--size-600);
  /* The plane view spans the content column */
}
.card[data-card-type=aircraft-model] .card__plane-view > img {
  display: block;
  width: 100%;
  height: auto;
}
.card[data-card-type=aircraft-model] {
  /* The action sits bottom right */
}
.card[data-card-type=aircraft-model] .card__action {
  justify-content: flex-end;
}

accordion-item {
  display: block;
  border-radius: var(--size-200);
  border: 1px solid var(--color-tint);
}
accordion-item summary.button[data-button-variant=nav] {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1ch;
  --button-outer-padding: 0.5em var(--flow-spacing);
  text-transform: none;
}
accordion-item summary.button[data-button-variant=nav]::-webkit-details-marker {
  display: none;
}

.accordion__content {
  padding: var(--flow-spacing);
}

@media (min-width: 62em) {
  accordion-item[data-desktop] {
    border: 0px none;
  }
  accordion-item[data-desktop] details[open] summary {
    display: none;
  }
  accordion-item[data-desktop] details[open] summary + * {
    margin-top: 0;
  }
  accordion-item[data-desktop] .accordion__content {
    padding: 0;
  }
}

accordion-item[data-border=none] {
  border: 0px none;
}
accordion-item[data-border=none] summary.button[data-button-variant=nav] {
  --button-outer-padding: 0.5em 0;
  --button-border-color: var(--color-tint);
}
accordion-item[data-border=none] .accordion__content {
  padding: var(--flow-spacing) 0;
}

.social-share {
  --social-facebook: #4c77d8;
  --social-twitter: #000;
  --social-linkedin: #0077b5;
  --social-whatsapp: #25d366;
  --social-email: var(--color-grey-dark);
  font-size: var(--size-300);
  display: block;
}
@media (min-width: 62em) {
  .social-share {
    font-size: var(--size-500);
    width: 2em;
  }
}

.social-share__title {
  font-size: var(--size-200);
  text-align: center;
  border: 1px solid var(--color-border);
  display: none;
  background-color: var(--color-bg);
  color: var(--color-text);
}
@media (min-width: 62em) {
  .social-share__title {
    display: block;
  }
}

.social-share__list {
  display: flex;
  width: 100%;
}
@media (min-width: 62em) {
  .social-share__list {
    flex-direction: column;
  }
}
.social-share__list li {
  flex-grow: 1;
}

a.social-share__item {
  --social-item-background: var(--color-bg);
  background-color: var(--social-item-background);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2em;
}
a.social-share__item .custom-icon {
  transition: var(--transition-default) transform;
}
a.social-share__item:hover {
  color: var(--color-white);
}
a.social-share__item:hover .custom-icon {
  transform: scale(1.2);
}
a.social-share__item--facebook {
  --social-item-background: var(--social-facebook);
}
a.social-share__item--twitter {
  --social-item-background: var(--social-twitter);
}
a.social-share__item--linkedin {
  --social-item-background: var(--social-linkedin);
}
a.social-share__item--whatsapp {
  --social-item-background: var(--social-whatsapp);
}
a.social-share__item--email {
  --social-item-background: var(--social-email);
}

.social-share[data-socialshare-position=sticky] {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-index-500);
}
@media (min-width: 62em) {
  .social-share[data-socialshare-position=sticky] {
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    padding-top: var(--size-500);
    width: 2em;
    float: right;
  }
}

.social-share[data-socialshare-mode=desktop] {
  display: none;
}
@media (min-width: 62em) {
  .social-share[data-socialshare-mode=desktop] {
    display: block;
  }
}

.social-share[data-socialshare-mode=mobile] {
  display: block;
}
@media (min-width: 62em) {
  .social-share[data-socialshare-mode=mobile] {
    display: none;
  }
}

.layout-columns {
  --columns-gap: var(--flow-spacing);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--columns-gap);
}
@media (min-width: 62em) {
  .layout-columns {
    flex-direction: row;
  }
}

.layout-columns[data-columns-align=top] {
  align-items: flex-start;
}

.layout-columns[data-columns-align=center] {
  align-items: center;
}

.layout-columns[data-columns-align=bottom] {
  align-items: flex-end;
}

.layout-columns[data-columns-justify=left] {
  justify-content: flex-start;
}

.layout-columns[data-columns-justify=center] {
  justify-content: center;
}

.layout-columns[data-columns-justify=right] {
  justify-content: flex-end;
}

.layout-columns[data-columns-justify=space-between] {
  justify-content: space-between;
}

@media (min-width: 62em) {
  .layout-columns[data-columns-grow] .layout-columns__item {
    flex-grow: 1;
    width: 1px;
    max-width: max-content;
  }
}

.layout-content {
  --layout-gap: var(--flow-spacing, 1em);
  --layout-width-main: 1px;
  --layout-width-aside: var(--width-aside);
  display: flex;
  justify-content: space-between;
  max-width: var(--width-max);
  gap: var(--layout-gap);
  flex-wrap: wrap;
}
@media (min-width: 62em) {
  .layout-content {
    flex-wrap: nowrap;
    --layout-gap: var(--flow-spacing-horizontal);
  }
}

.layout-content__main {
  width: 100%;
}
@media (min-width: 62em) {
  .layout-content__main {
    width: var(--layout-width-main);
    flex-grow: 1;
  }
}

.layout-content__aside {
  width: 100%;
}
@media (min-width: 62em) {
  .layout-content__aside {
    width: var(--layout-width-aside);
    flex-grow: 0;
    flex-shrink: 0;
  }
}

.layout-content[data-layout-align=middle] {
  align-items: center;
}

.layout-content[data-layout-align=stretch] {
  align-items: stretch;
}

.layout-content[data-layout-align=end] {
  align-items: flex-end;
}

@media (min-width: 62em) {
  .layout-content[data-layout-aside-align=end] .layout-content__aside {
    align-self: flex-end;
  }
}

.layout-content[data-layout-justify=start] {
  justify-content: flex-start;
}

@media (min-width: 62em) {
  .layout-content[data-layout-direction=reverse] {
    flex-direction: row-reverse;
  }
}

@media (min-width: 62em) {
  .layout-content[data-layout-width=flip] {
    --layout-width-main: var(--width-aside);
    --layout-width-aside: 1px;
  }
  .layout-content[data-layout-width=flip] .layout-content__main {
    flex-grow: 0;
  }
  .layout-content[data-layout-width=flip] .layout-content__aside {
    flex-grow: 1;
  }
}

@media (min-width: 62em) {
  .layout-content[data-layout-width=equal] .layout-content__aside,
  .layout-content[data-layout-width=equal] .layout-content__main {
    width: 1px;
    flex-grow: 1;
    flex-shrink: 0;
    max-width: 100%;
  }
}

@media (min-width: 62em) {
  .layout-content[data-layout-width=narrow] .layout-content__aside {
    width: var(--width-aside-narrow);
  }
}

@media (min-width: 62em) {
  .layout-content[data-layout-width=full] .layout-content__main {
    width: 100%;
    flex-shrink: 0;
  }
}
.layout-content[data-layout-width=full] .layout-content__aside {
  display: none;
}

.layout-content[data-layout-gap="600"] {
  --layout-gap: var(--size-600);
}
@media (min-width: 62em) {
  .layout-content[data-layout-gap="600"] {
    --layout-gap: calc(var(--size-600) * 2);
  }
}

.layout-content[data-layout-minheight=full] {
  min-height: 100%;
}

.layout-grid {
  --grid-gap: var(--flow-spacing);
  --grid-columns: 1;
  --grid-item-width: calc(
    (100% / var(--grid-columns)) - var(--grid-gap) + (var(--grid-gap) / var(--grid-columns))
  );
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--grid-gap);
}

.layout-grid__item {
  flex-shrink: 0;
  flex-grow: 0;
  max-width: 100%;
}
.layout-grid__item--grow {
  flex-grow: 1;
}
.layout-grid__item--shrink {
  flex-shrink: 1;
}
[data-grid-columns] .layout-grid__item {
  width: var(--grid-item-width);
}
.layout-grid__item > * {
  width: 100%;
}

.layout-grid[data-grid-columns-min="2"] {
  --grid-columns: 2;
}

.layout-grid[data-grid-columns-min="3"] {
  --grid-columns: 3;
}

.layout-grid[data-grid-columns-min="4"] {
  --grid-columns: 4;
}

.layout-grid[data-grid-columns-min="5"] {
  --grid-columns: 5;
}

.layout-grid[data-grid-gap="500"] {
  --grid-gap: var(--size-500);
}

.layout-grid[data-grid-gap="600"] {
  --grid-gap: var(--size-600);
}

@media (min-width: 48em) {
  .layout-grid[data-grid-columns="2"] {
    --grid-columns: 2;
  }
}

@media (min-width: 48em) {
  .layout-grid[data-grid-columns="3"] {
    --grid-columns: 3;
  }
}

@media (min-width: 48em) {
  .layout-grid[data-grid-columns="4"] {
    --grid-columns: 2;
  }
}
@media (min-width: 62em) {
  .layout-grid[data-grid-columns="4"] {
    --grid-columns: 4;
  }
}

@media (min-width: 48em) {
  .layout-grid[data-grid-columns="5"] {
    --grid-columns: 3;
  }
}
@media (min-width: 62em) {
  .layout-grid[data-grid-columns="5"] {
    --grid-columns: 5;
  }
}

.layout-grid[data-grid-align=center] {
  align-items: center;
}

.layout-grid[data-grid-justify=center] {
  justify-content: center;
}

.layout-inline {
  --layout-gap: var(--size-100);
  --layout-justify: flex-start;
  --layout-align: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--layout-justify);
  align-items: var(--layout-align);
  gap: var(--layout-gap);
}

.layout-inline[data-layout-justify=center] {
  --layout-justify: center;
}

.layout-inline[data-layout-justify=right] {
  --layout-justify: flex-end;
}

.layout-inline[data-layout-justify=space-between] {
  --layout-justify: space-between;
}

.layout-inline[data-layout-align=center] {
  --layout-align: center;
}

.layout-inline[data-layout-align=end] {
  --layout-align: flex-end;
}

.layout-inline[data-layout-gap="100"] {
  --layout-gap: calc(var(--size-100) * 1);
}

.layout-inline[data-layout-gap-vertical="100"] {
  row-gap: calc(var(--size-100) * 1);
}

.layout-inline[data-layout-gap-horizontal="100"] {
  column-gap: calc(var(--size-100) * 1);
}

.layout-inline[data-layout-gap="200"] {
  --layout-gap: calc(var(--size-200) * 1);
}

.layout-inline[data-layout-gap-vertical="200"] {
  row-gap: calc(var(--size-200) * 1);
}

.layout-inline[data-layout-gap-horizontal="200"] {
  column-gap: calc(var(--size-200) * 1);
}

.layout-inline[data-layout-gap="300"] {
  --layout-gap: calc(var(--size-300) * 1);
}

.layout-inline[data-layout-gap-vertical="300"] {
  row-gap: calc(var(--size-300) * 1);
}

.layout-inline[data-layout-gap-horizontal="300"] {
  column-gap: calc(var(--size-300) * 1);
}

.layout-inline[data-layout-gap="400"] {
  --layout-gap: calc(var(--size-400) * 1);
}

.layout-inline[data-layout-gap-vertical="400"] {
  row-gap: calc(var(--size-400) * 1);
}

.layout-inline[data-layout-gap-horizontal="400"] {
  column-gap: calc(var(--size-400) * 1);
}

.layout-inline[data-layout-gap="500"] {
  --layout-gap: calc(var(--size-500) * 1);
}

.layout-inline[data-layout-gap-vertical="500"] {
  row-gap: calc(var(--size-500) * 1);
}

.layout-inline[data-layout-gap-horizontal="500"] {
  column-gap: calc(var(--size-500) * 1);
}

.layout-inline[data-layout-gap="600"] {
  --layout-gap: calc(var(--size-600) * 1);
}

.layout-inline[data-layout-gap-vertical="600"] {
  row-gap: calc(var(--size-600) * 1);
}

.layout-inline[data-layout-gap-horizontal="600"] {
  column-gap: calc(var(--size-600) * 1);
}

.layout-inline[data-layout-gap="700"] {
  --layout-gap: calc(var(--size-700) * 1);
}

.layout-inline[data-layout-gap-vertical="700"] {
  row-gap: calc(var(--size-700) * 1);
}

.layout-inline[data-layout-gap-horizontal="700"] {
  column-gap: calc(var(--size-700) * 1);
}

.layout-inline[data-layout-gap="800"] {
  --layout-gap: calc(var(--size-800) * 1);
}

.layout-inline[data-layout-gap-vertical="800"] {
  row-gap: calc(var(--size-800) * 1);
}

.layout-inline[data-layout-gap-horizontal="800"] {
  column-gap: calc(var(--size-800) * 1);
}

.layout-inline[data-layout-gap="900"] {
  --layout-gap: calc(var(--size-900) * 1);
}

.layout-inline[data-layout-gap-vertical="900"] {
  row-gap: calc(var(--size-900) * 1);
}

.layout-inline[data-layout-gap-horizontal="900"] {
  column-gap: calc(var(--size-900) * 1);
}

.definition-list {
  font-size: var(--size-500);
  line-height: var(--line-height-500);
}

.definition-list__group {
  --flow-spacing: 1em;
  display: flex;
  gap: 1em;
}

.definition-list__icon {
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 1.2em;
  width: 1em;
  top: -0.1em;
  text-align: center;
}

.definition-list__content dt {
  font-weight: var(--weight-bold);
  font-size: 0.77em;
  line-height: var(--line-height-400);
}
.definition-list__content dd {
  color: var(--color-text);
  line-height: var(--line-height-400);
  margin-top: var(--size-100);
}
.definition-list__content dd + dd {
  margin-top: var(--size-200);
}

.icon-list {
  display: flex;
  flex-direction: column;
  align-items: justify;
  gap: var(--flow-spacing);
}

.icon-list__item {
  display: flex;
  gap: 1em;
  width: 100%;
}

.icon-list__icon {
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 1.2em;
  color: var(--color-text);
  width: 1em;
  top: -0.1em;
  text-align: center;
}

.number-list {
  counter-reset: number-list;
  list-style: none;
  margin-inline: 0;
  margin-block-end: 0;
  padding: 0;
}
.number-list li {
  position: relative;
  counter-increment: number-list;
  padding-block: var(--size-300);
  display: flex;
  gap: var(--size-700);
  align-items: center;
  text-wrap: balance;
}
.number-list li + li {
  border-top: 1px solid var(--color-border);
}
.number-list li:before {
  content: counter(number-list);
  font-size: max(1.5rem, clamp(1.5rem, 8vw, 5rem));
  width: 1ch;
  text-align: center;
}

.tick-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1em;
}

.tick-list[data-list-size=large] {
  font-size: var(--size-500);
  line-height: var(--line-height-500);
}

.tick-list li {
  position: relative;
  padding-left: 2.3em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.tick-list li:before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  content: "\f00c";
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 1.3em;
  top: -0.1em;
}

.world-map {
  /* Configuration */
  --map-ratio: 2 / 1;
  --map-sea: var(--color-blue);
  --map-land: var(--color-blue-mid-1);
  --map-border: var(--color-blue-mid-2);
  --map-k: 1;
  position: relative;
  display: block;
  background-color: var(--map-sea);
  overflow: hidden;
}

.world-map__svg {
  display: block;
  width: 100%;
  aspect-ratio: var(--map-ratio);
  touch-action: none;
  cursor: grab;
}

.world-map[data-panning] .world-map__svg {
  cursor: grabbing;
}

.world-map__land {
  fill: var(--map-land);
}

.world-map__borders {
  stroke: var(--map-border);
  stroke-width: 0.5;
  /* Keeps every stroke a constant width on screen, whatever the zoom */
  vector-effect: non-scaling-stroke;
}

/* Everything drawn on top holds its stroke width through zoom too */
.world-map [data-map-layer] :is(path, circle, line) {
  vector-effect: non-scaling-stroke;
}

.world-map__controls {
  position: absolute;
  inset-block-start: var(--size-400);
  inset-inline-end: var(--size-400);
  display: flex;
  flex-direction: column;
  gap: var(--size-200);
  z-index: var(--z-index-200);
}

.world-map__status {
  position: absolute;
  inset-block-end: var(--size-400);
  inset-inline-start: var(--size-400);
  margin: 0;
  padding: var(--size-200) var(--size-400);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--size-300);
}

.world-map__status:empty,
.world-map__status[hidden] {
  display: none;
}

.alert {
  display: flex;
  gap: var(--flow-spacing-horizontal);
  align-items: center;
}

.alert__icon {
  color: var(--color-text);
  font-size: var(--size-500);
}

.alert[data-alert-display=block] {
  padding: var(--flow-spacing);
  background-color: var(--color-bg);
}

.alert + .alert {
  border-top: 1px solid var(--color-border);
  padding-top: var(--flow-spacing);
}

@media (prefers-color-scheme: dark) {
  .alert:last-child {
    padding-bottom: var(--flow-spacing);
    border-bottom: 3px solid var(--color-text);
  }
}
[data-mode=dark] .alert:last-child {
  padding-bottom: var(--flow-spacing);
  border-bottom: 3px solid var(--color-text);
}

.site-modal {
  --modal-padding: var(--size-500) var(--size-600);
  --modal-footer-padding: var(--size-200) var(--size-600);
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
  min-height: 100%;
}

.site-modal__dialog {
  border: 0px none;
  border-radius: var(--size-400);
  padding: 0;
  box-shadow: var(--color-boxshadow-default);
  text-align: left;
  max-width: calc(100% - 2 * var(--size-200));
}
@media (min-width: 62em) {
  .site-modal__dialog {
    min-width: var(--width-content);
  }
}

.site-modal__dialog::backdrop {
  background-color: var(--color-tint);
}

.site-modal__dialog__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.site-modal__header {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background-color: var(--color-bg);
  padding: var(--modal-padding);
  gap: var(--size-200);
  z-index: var(--z-index-600);
}

.site-modal__content {
  position: relative;
  padding: var(--modal-padding);
  flex-grow: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.site-modal__content:has(.youtube-embed iframe, .iframe-embed iframe, video) {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
  color: var(--color-white);
}

.site-modal__content:has(.youtube-embed iframe,
video,
.iframe-embed iframe,
.img-embed img) {
  overflow: hidden;
}

.site-modal__content .youtube-embed iframe,
.site-modal__content .iframe-embed iframe,
.site-modal__content video {
  --video-unit: min(1vw, calc(1vh * 1.5));
  max-width: 100%;
  max-height: 100%;
  width: calc(var(--video-unit) * 80);
  height: calc(var(--video-unit) * 45);
}

.site-modal__content .img-embed > img {
  position: relative;
  max-width: 90vw;
  max-height: calc(90vh - 8em);
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-modal__content .img-embed .img-border {
  --img-unit: calc(
    min(
        calc(90vw - 2 * var(--size-500)),
        calc(90vh - 4em - 2 * var(--size-600))
      ) /
      90
  );
  position: relative;
  max-width: calc(var(--img-unit) * 90);
  max-height: calc(var(--img-unit) * 90);
  min-height: 0;
  min-width: 0;
  height: auto;
  margin: 0;
}

.site-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--flow-spacing, 1rem);
  align-items: center;
  border-top: 1px solid var(--color-bg);
  padding: var(--modal-footer-padding);
}

/* Animations */
/*   Open state of the dialog  */
.site-modal__dialog[open] {
  opacity: 1;
  transform: scaleY(1);
}

/*   Closed state of the dialog   */
.site-modal__dialog {
  opacity: 0;
  transition: opacity var(--transition-long), transform var(--transition-long), overlay var(--transition-long) allow-discrete, display var(--transition-long) allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

/*   Before-open state  */
/* Needs to be after the previous dialog[open] rule to take effect,
    as the specificity is the same */
@starting-style {
  .site-modal__dialog[open] {
    opacity: 0;
  }
}
.site-modal__dialog[open]::backdrop {
  opacity: 1;
}

.site-modal__dialog::backdrop {
  opacity: 0;
  transition: opacity var(--transition-long);
}

@starting-style {
  .site-modal__dialog::backdrop {
    opacity: 0;
  }
}
.site-modal[data-display=block] {
  display: flex;
}

.breadcrumbs {
  line-height: var(--line-height-500);
  font-size: var(--size-300);
}

.breadcrumbs span span {
  display: none;
}

.breadcrumbs > span span:nth-last-child(2) {
  display: inline-block;
}
.breadcrumbs > span span:nth-last-child(2) a:before {
  content: "< Back to ";
}
@media (min-width: 62em) {
  .breadcrumbs > span span:nth-last-child(2) a:before {
    content: "";
  }
}

@media (min-width: 62em) {
  .breadcrumbs > span span {
    display: inline-block;
    padding-inline-end: 1ch;
    line-height: var(--line-height-400);
  }
  .breadcrumbs > span span:before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    content: "\f054";
    color: var(--color-text);
    padding-inline-end: 2ch;
    font-size: var(--size-300);
  }
  .breadcrumbs > span span:first-child:before {
    content: "\f015";
    padding-inline-end: 1ch;
  }
  .breadcrumbs > span span a {
    text-decoration: none;
  }
}
.footer-nav .button {
  --button-text-padding: 0;
  text-transform: none;
}
.footer-nav h3 {
  font-size: var(--size-300);
  font-weight: var(--weight-bold);
  text-transform: none;
}

.footer-nav__list {
  --flow-spacing: var(--size-200);
}

.footer-nav__list li {
  --flow-spacing: var(--size-100);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--flow-spacing);
  flex-wrap: wrap;
}

.pagination__pages {
  display: flex;
  gap: var(--flow-spacing);
  flex-wrap: wrap;
}

.pagination__dir {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: var(--transition-default) border-color;
}
.pagination__dir .faicon {
  font-size: var(--size-300);
}
.pagination__dir[disabled] {
  opacity: 0.5;
  color: var(--color-text);
}

.pagination__link,
.pagination__current {
  min-width: 2ch;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  border-bottom: 2px solid transparent;
  transition: var(--transition-default) border-color;
}

.pagination__link:hover,
.pagination__dir:hover {
  border-bottom-color: var(--color-tint);
}

.pagination__current {
  border-bottom-color: currentColor;
}

.simple-nav {
  position: relative;
}

@media (min-width: 62em) {
  .simple-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .simple-nav__list > li + li {
    border-top: 0;
  }
}
.simple-nav__list .button[data-button-variant=tertiary] {
  display: flex;
  justify-content: center;
  text-align: center;
}

simple-nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--size-200) 0;
}
@media (min-width: 62em) {
  simple-nav-item {
    border-top-left-radius: var(--size-100);
    border-top-right-radius: var(--size-100);
    padding: var(--size-200) var(--size-100);
  }
}
simple-nav-item[data-menu-expanded=true] {
  background-color: var(--color-bg);
}
simple-nav-item .button[data-button-variant=nav] {
  flex-grow: 1;
}

.simple-nav-item__expander.button[data-button-variant=nav] {
  --button-icon-color: currentColor;
}

.simple-nav-item__expander.button[data-button-variant=icon] {
  --button-outer-padding: 0;
  --button-bg: transparent;
  --button-color: currentColor;
  --button-hover-bg: transparent;
  --button-hover-color: currentColor;
  --button-border-color: transparent;
  --button-border-radius: 0;
  --button-font-size: var(--size-300);
  width: auto;
  height: auto;
  transition: 0.2s transform, var(--transition-default) border, var(--transition-default) color, var(--transition-default) background-color;
  flex-grow: 0;
  border-bottom-width: 1px;
}

simple-nav-item[data-menu-expanded=true] > .button[data-button-variant=nav] {
  --button-border-color: var(--color-text);
}

simple-nav-item .button[aria-current=page] + .button[data-button-variant=icon] {
  --button-border-color: var(--color-text);
}

.simple-nav-item__expander {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

ul.simple-nav-item__submenu {
  width: 100%;
  min-width: max-content;
}
@media (min-width: 62em) {
  ul.simple-nav-item__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: var(--size-200);
    background: var(--color-bg);
    border-bottom-right-radius: var(--size-100);
    border-bottom-left-radius: var(--size-100);
  }
}

.table-of-contents {
  padding: var(--size-400);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--size-400);
  max-width: var(--width-content);
}

.table-of-contents ol {
  margin-block-end: 0;
}

.section {
  --section-width: var(--width-max);
  --section-padding: var(--size-600);
  --section-minheight: 0;
  position: relative;
  z-index: var(--z-index-400);
}
@media (min-width: 62em) {
  .section {
    --section-padding: var(--size-800);
  }
}
.section[data-sticky] {
  position: sticky;
  top: -1px;
  left: 0;
  z-index: var(--z-index-600);
}
.section[data-sticky=bottom] {
  top: auto;
  bottom: -1px;
}

.section[data-shadow] {
  box-shadow: var(--color-boxshadow-drop);
}

.section__inner {
  position: relative;
  margin-inline: auto;
  max-width: var(--section-width);
  width: 100%;
  padding: var(--section-padding);
  min-height: var(--section-minheight);
  z-index: var(--z-index-400);
}

.section[data-width=full] {
  --section-width: 100%;
}

.section[data-width=mid] {
  --section-width: var(--width-mid);
}

.section[data-width=thin] {
  --section-width: var(--width-content);
}

.section[data-padding=none] {
  --section-padding: 0;
}

.section[data-padding=notop] .section__inner {
  padding-block-start: 0;
}

.section[data-padding=nobottom] .section__inner {
  padding-block-end: 0;
}

.section[data-padding=noblock] .section__inner {
  padding-block-start: 0;
  padding-block-end: 0;
}

.section[data-padding=narrow] .section__inner {
  padding: calc(var(--section-padding) / 2) var(--section-padding);
}

.section[data-padding=narrowbottom] .section__inner {
  padding-bottom: calc(var(--section-padding) / 2);
}

.section[data-padding=narrow-nobottom] .section__inner {
  padding: calc(var(--section-padding) / 2) var(--section-padding);
}
.section[data-padding=narrow-nobottom] .section__inner {
  padding-block-end: 0;
}

.section[data-padding=equal-narrow] .section__inner {
  padding: calc(var(--section-padding) / 2);
}

.section[data-padding="400"] .section__inner {
  padding: var(--size-400) var(--section-padding);
}

@media (min-width: 62em) {
  .section[data-padding-desktop=notop] .section__inner {
    padding-block-start: 0;
  }
}

@media (min-width: 62em) {
  .section[data-padding-desktop=nobottom] .section__inner {
    padding-block-end: 0;
  }
}

@media (min-width: 62em) {
  .section[data-padding-desktop=noblock] .section__inner {
    padding-block-start: 0;
    padding-block-end: 0;
  }
}

@media (min-width: 62em) {
  .section[data-padding-desktop=narrow] .section__inner {
    padding: calc(var(--section-padding) / 2) var(--section-padding);
  }
}

@media (min-width: 62em) {
  .section[data-padding-desktop=narrowbottom] .section__inner {
    padding-bottom: calc(var(--section-padding) / 2);
  }
}

.section[data-height=full] {
  --section-minheight: 100vh;
}

.section[data-height=half] {
  --section-minheight: 50vh;
}

.section[data-height=third] {
  --section-minheight: 33.33vh;
}

.section[data-justify=center] .section__inner {
  text-align: center;
}

.section[data-callout] {
  border-block: 2px solid var(--color-text);
}

.section__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-100);
  overflow: hidden;
}
.section__background > *, .section__background img, .section__background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section__background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(42, 27, 84, 0.85) 0%, rgba(42, 27, 84, 0.25) 100%);
}

.section[data-theme=""]:not([data-padding=none], [data-callout], .mast) + .section[data-theme=""]:not([data-padding=none], [data-callout], .mast) > .section__inner,
.section[data-theme=default]:not([data-padding=none], [data-callout], .mast) + .section[data-theme=default]:not([data-padding=none],
[data-callout],
.mast) > .section__inner,
.section[data-theme=alternative]:not([data-padding=none],
[data-callout],
.mast) + .section[data-theme=alternative]:not([data-padding=none],
[data-callout]) > .section__inner,
.section[data-theme=grey]:not([data-padding=none], [data-callout], .mast) + .section[data-theme=grey]:not([data-padding=none],
[data-callout],
.mast) > .section__inner {
  padding-block-start: 0;
}

/* Zindex */
.section[data-zindex="100"] {
  z-index: var(--z-index-100);
}

.section[data-zindex="200"] {
  z-index: var(--z-index-200);
}

.section[data-zindex="300"] {
  z-index: var(--z-index-300);
}

.section[data-zindex="400"] {
  z-index: var(--z-index-400);
}

.section[data-zindex="500"] {
  z-index: var(--z-index-500);
}

.section[data-zindex="600"] {
  z-index: var(--z-index-600);
}

.section[data-zindex="700"] {
  z-index: var(--z-index-700);
}

.section[data-zindex="800"] {
  z-index: var(--z-index-800);
}

.section[data-zindex="900"] {
  z-index: var(--z-index-900);
}

.stat {
  /* Configuration */
  --stat-gap: var(--size-300);
  --stat-icon-size: 2.5rem;
  --stat-icon-color: currentColor;
  --stat-figure-size: clamp(var(--size-700), 5vw, var(--size-800));
  --stat-unit-size: 0.6em;
  display: block;
  text-align: inherit;
}

.stat > * + * {
  margin-block-start: var(--stat-gap);
}

.stat__icon {
  display: block;
  font-size: var(--stat-icon-size);
  line-height: var(--line-height-300);
  color: var(--stat-icon-color);
}

.stat__figure {
  font-size: var(--stat-figure-size);
  line-height: var(--line-height-400);
  letter-spacing: 0.04em;
  /* Digits keep an even width, so a counting number doesn't jog the layout */
  font-variant-numeric: tabular-nums;
}

.stat__prefix,
.stat__unit {
  font-size: var(--stat-unit-size);
}

.stat__text {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
  text-transform: none;
  max-width: 22ch;
  margin-inline: auto;
}

.stat:not([data-justify=center]) .stat__text {
  margin-inline: 0;
}

tab-carousel {
  display: block;
}

tab-carousel[data-ready=true] .tab-carousel__tablist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--size-300);
}

tab-carousel[data-ready=true] .tab-carousel__panels {
  position: relative;
  flex-grow: 1;
}

tab-carousel[data-ready=true] .tab-carousel__panel {
  transition: var(--transition-default) opacity, var(--transition-default) transform;
}

tab-carousel[data-ready=true] .tab-carousel__panel[aria-hidden=true] {
  visibility: hidden;
  height: 0px;
  opacity: 0;
  transform: translateY(-1em);
}

tab-group {
  display: block;
}

tab-group[data-ready=true] .tabs {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--flow-spacing);
}
@media (min-width: 48em) {
  tab-group[data-ready=true] .tabs {
    gap: 0;
  }
}

tab-group[data-ready=true] .tabs__tabs {
  position: relative;
  z-index: var(--z-index-400);
}

tab-group[data-ready=true] .tabs__tablist {
  display: flex;
  align-items: stretch;
  gap: var(--size-200);
  overflow: auto;
}
tab-group[data-ready=true] .tabs__tablist li {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}

tab-group[data-ready=true] .tabs__tab {
  min-width: 100%;
  min-height: 100%;
  flex-grow: 1;
}
@media (min-width: 48em) {
  tab-group[data-ready=true] .tabs__tab {
    min-width: 15ch;
  }
}

tab-group[data-ready=true] .tabs__panels {
  position: relative;
  flex-grow: 1;
  padding: var(--section-padding, var(--size-rel-400));
  border-radius: var(--size-200);
  z-index: var(--z-index-300);
  border: 1px solid var(--color-tint);
}

tab-group[data-ready=true] .tabs__panel {
  transition: var(--transition-default) opacity, var(--transition-default) transform;
}

tab-group[data-ready=true] .tabs__panel[aria-hidden=true] {
  visibility: hidden;
  height: 0px;
  opacity: 0;
  transform: translateY(-1em);
  overflow: hidden;
}

tab-group[data-ready=true] .tabs__controls {
  display: flex;
  justify-content: center;
  gap: var(--flow-spacing);
}

tab-group[data-ready=true][data-tab-display=vertical] .tabs {
  --layout-gap: var(--flow-spacing-horizontal);
  flex-direction: row;
}

tab-group[data-ready=true][data-tab-display=vertical] .tabs__tablist {
  flex-direction: column;
  max-width: 30ch;
}

tab-group[data-ready=true][data-tab-display=vertical] .tabs__tab {
  min-width: 100%;
}

tab-group[data-ready=true][data-tab-display=mobile] .tabs__tablist {
  flex-direction: column;
  gap: 0;
}

tab-group[data-ready=true][data-tab-display=horizontal] .tabs__panels {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

tab-group[data-ready=true][data-tab-display=vertical] .tabs__panels {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
@media (min-width: 48em) {
  tab-group[data-ready=true][data-tab-display=vertical] .tabs__panels {
    width: 1px;
  }
}

.blockquote-author {
  --blockquote-author-font-size: 1em;
  border: 0px none;
  padding: 0;
}

.blockquote-author__main {
  position: relative;
  padding-inline-start: 1.5em;
  line-height: var(--line-height-500);
  font-size: var(--blockquote-author-font-size);
  line-height: var(--line-height-500);
  order: 5;
  text-wrap: balance;
}

.blockquote-author__quote {
  position: relative;
  color: var(--color-text);
}

.blockquote-author__quote:first-child {
  position: absolute;
  top: -0.2em;
  left: 0;
}

.blockquote-author__quote:last-child {
  top: -0.3em;
  margin-left: 0.3em;
}

.blockquote-author__footer {
  display: flex;
  gap: var(--size-400);
  align-items: center;
}

.blockquote-author__image {
  width: var(--size-900);
  height: var(--size-900);
  overflow: hidden;
  border-radius: 50%;
  flex-shrink: 0;
}
.blockquote-author__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blockquote-author__citation {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  order: 10;
}

.blockquote-author__name,
.blockquote-author__title {
  display: block;
}

/* Large */
.blockquote-author[data-blockquoteauthor-size=large] {
  --blockquote-author-font-size: var(--size-600);
}

/* Center */
.blockquote-author[data-blockquoteauthor-align=center] {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-200);
}

.blockquote-author[data-blockquoteauthor-align=center] .blockquote-author__quote {
  position: relative;
  margin-inline: 0.3em;
}

.blockquote-author[data-blockquoteauthor-align=center] .blockquote-author__main {
  padding-inline-start: 0;
  padding-block-start: 0;
}

.blockquote-author[data-blockquoteauthor-align=center] .blockquote-author__footer {
  display: contents;
}

.blockquote-author[data-blockquoteauthor-align=center] .blockquote-author__image {
  order: 1;
}

.content--border {
  border-left: 1px solid var(--color-border);
  padding-inline-start: var(--size-600);
}

.content--border[data-reveal-state=hidden] {
  --content-bar-scale: 0;
}

.content--border[data-reveal-state=shown] {
  --content-bar-scale: 1;
}

.content--border[data-highlight="1"] > p:nth-child(1) {
  position: relative;
}
.content--border[data-highlight="1"] > p:nth-child(1):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="1"] > p:nth-child(1) {
  font-size: var(--size-600);
}
.content--border[data-highlight="1"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(1) .heading__text {
  position: relative;
}
.content--border[data-highlight="1"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(1) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="2"] > p:nth-child(2) {
  position: relative;
}
.content--border[data-highlight="2"] > p:nth-child(2):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="2"] > p:nth-child(2) {
  font-size: var(--size-600);
}
.content--border[data-highlight="2"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(2) .heading__text {
  position: relative;
}
.content--border[data-highlight="2"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(2) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="3"] > p:nth-child(3) {
  position: relative;
}
.content--border[data-highlight="3"] > p:nth-child(3):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="3"] > p:nth-child(3) {
  font-size: var(--size-600);
}
.content--border[data-highlight="3"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(3) .heading__text {
  position: relative;
}
.content--border[data-highlight="3"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(3) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="4"] > p:nth-child(4) {
  position: relative;
}
.content--border[data-highlight="4"] > p:nth-child(4):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="4"] > p:nth-child(4) {
  font-size: var(--size-600);
}
.content--border[data-highlight="4"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(4) .heading__text {
  position: relative;
}
.content--border[data-highlight="4"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(4) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="5"] > p:nth-child(5) {
  position: relative;
}
.content--border[data-highlight="5"] > p:nth-child(5):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="5"] > p:nth-child(5) {
  font-size: var(--size-600);
}
.content--border[data-highlight="5"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(5) .heading__text {
  position: relative;
}
.content--border[data-highlight="5"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(5) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="6"] > p:nth-child(6) {
  position: relative;
}
.content--border[data-highlight="6"] > p:nth-child(6):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="6"] > p:nth-child(6) {
  font-size: var(--size-600);
}
.content--border[data-highlight="6"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(6) .heading__text {
  position: relative;
}
.content--border[data-highlight="6"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(6) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="7"] > p:nth-child(7) {
  position: relative;
}
.content--border[data-highlight="7"] > p:nth-child(7):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="7"] > p:nth-child(7) {
  font-size: var(--size-600);
}
.content--border[data-highlight="7"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(7) .heading__text {
  position: relative;
}
.content--border[data-highlight="7"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(7) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="8"] > p:nth-child(8) {
  position: relative;
}
.content--border[data-highlight="8"] > p:nth-child(8):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="8"] > p:nth-child(8) {
  font-size: var(--size-600);
}
.content--border[data-highlight="8"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(8) .heading__text {
  position: relative;
}
.content--border[data-highlight="8"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(8) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="9"] > p:nth-child(9) {
  position: relative;
}
.content--border[data-highlight="9"] > p:nth-child(9):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="9"] > p:nth-child(9) {
  font-size: var(--size-600);
}
.content--border[data-highlight="9"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(9) .heading__text {
  position: relative;
}
.content--border[data-highlight="9"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(9) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="10"] > p:nth-child(10) {
  position: relative;
}
.content--border[data-highlight="10"] > p:nth-child(10):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="10"] > p:nth-child(10) {
  font-size: var(--size-600);
}
.content--border[data-highlight="10"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(10) .heading__text {
  position: relative;
}
.content--border[data-highlight="10"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(10) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="11"] > p:nth-child(11) {
  position: relative;
}
.content--border[data-highlight="11"] > p:nth-child(11):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="11"] > p:nth-child(11) {
  font-size: var(--size-600);
}
.content--border[data-highlight="11"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(11) .heading__text {
  position: relative;
}
.content--border[data-highlight="11"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(11) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="12"] > p:nth-child(12) {
  position: relative;
}
.content--border[data-highlight="12"] > p:nth-child(12):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="12"] > p:nth-child(12) {
  font-size: var(--size-600);
}
.content--border[data-highlight="12"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(12) .heading__text {
  position: relative;
}
.content--border[data-highlight="12"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(12) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="13"] > p:nth-child(13) {
  position: relative;
}
.content--border[data-highlight="13"] > p:nth-child(13):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="13"] > p:nth-child(13) {
  font-size: var(--size-600);
}
.content--border[data-highlight="13"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(13) .heading__text {
  position: relative;
}
.content--border[data-highlight="13"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(13) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="14"] > p:nth-child(14) {
  position: relative;
}
.content--border[data-highlight="14"] > p:nth-child(14):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="14"] > p:nth-child(14) {
  font-size: var(--size-600);
}
.content--border[data-highlight="14"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(14) .heading__text {
  position: relative;
}
.content--border[data-highlight="14"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(14) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="15"] > p:nth-child(15) {
  position: relative;
}
.content--border[data-highlight="15"] > p:nth-child(15):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="15"] > p:nth-child(15) {
  font-size: var(--size-600);
}
.content--border[data-highlight="15"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(15) .heading__text {
  position: relative;
}
.content--border[data-highlight="15"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(15) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="16"] > p:nth-child(16) {
  position: relative;
}
.content--border[data-highlight="16"] > p:nth-child(16):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="16"] > p:nth-child(16) {
  font-size: var(--size-600);
}
.content--border[data-highlight="16"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(16) .heading__text {
  position: relative;
}
.content--border[data-highlight="16"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(16) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="17"] > p:nth-child(17) {
  position: relative;
}
.content--border[data-highlight="17"] > p:nth-child(17):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="17"] > p:nth-child(17) {
  font-size: var(--size-600);
}
.content--border[data-highlight="17"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(17) .heading__text {
  position: relative;
}
.content--border[data-highlight="17"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(17) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="18"] > p:nth-child(18) {
  position: relative;
}
.content--border[data-highlight="18"] > p:nth-child(18):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="18"] > p:nth-child(18) {
  font-size: var(--size-600);
}
.content--border[data-highlight="18"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(18) .heading__text {
  position: relative;
}
.content--border[data-highlight="18"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(18) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="19"] > p:nth-child(19) {
  position: relative;
}
.content--border[data-highlight="19"] > p:nth-child(19):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="19"] > p:nth-child(19) {
  font-size: var(--size-600);
}
.content--border[data-highlight="19"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(19) .heading__text {
  position: relative;
}
.content--border[data-highlight="19"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(19) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content--border[data-highlight="20"] > p:nth-child(20) {
  position: relative;
}
.content--border[data-highlight="20"] > p:nth-child(20):before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}
.content--border[data-highlight="20"] > p:nth-child(20) {
  font-size: var(--size-600);
}
.content--border[data-highlight="20"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(20) .heading__text {
  position: relative;
}
.content--border[data-highlight="20"] > *:is(h1, h2, h3, h4, h5, h6):nth-child(20) .heading__text:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size-600));
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--color-border);
  transform: scaleY(var(--content-bar-scale, 1));
  transform-origin: center top;
  transition: transform var(--transition-long);
}

.content[data-justify=center] {
  text-align: center;
  margin-inline: auto;
}
.content[data-justify=center] p {
  margin-left: auto;
  margin-right: auto;
}
.content[data-justify=center] img,
.content[data-justify=center] picture {
  display: inline-block;
}

.content[data-width=content] {
  max-width: var(--width-content);
}

.content--intro {
  --flow-spacing: 1em;
}
.content--intro p:first-child {
  font-size: var(--size-600);
}

.content--small {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: var(--size-300);
  line-height: var(--line-height-500);
  --flow-spacing: var(--size-400);
}

.button-list {
  display: flex;
  flex-direction: column;
  gap: var(--flow-spacing);
  justify-content: space-between;
  align-items: stretch;
  min-height: 100%;
}

.button-list__list {
  position: relative;
}
.button-list__list .button {
  align-items: flex-start;
}
.button-list__list .card {
  --card-width: 100%;
}

.button-list[data-item-display=button] .button-list__list:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-bg);
  z-index: var(--z-index-500);
}
.button-list[data-item-display=button] .button-list__list li {
  position: relative;
  z-index: var(--z-index-400);
  border-top: 1px solid var(--color-tint);
}

.button-list[data-item-display=card] .button-list__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--flow-spacing);
}

@media (min-width: 62em) {
  .button-list[data-columns="2"] .button-list__list {
    columns: 2;
  }
}

@media (min-width: 48em) {
  .button-list[data-columns="3"] .button-list__list {
    columns: 2;
  }
}
@media (min-width: 62em) {
  .button-list[data-columns="3"] .button-list__list {
    columns: 3;
  }
}

.button-list .button[aria-current=page] {
  border-bottom: 0px;
  color: var(--color-text);
}

/* Styling for a classic WordPress sidebar. Selectors match what WordPress
   outputs - widget_search, widget_categories and so on - so a theme's
   dynamic_sidebar drops straight in. */
.widget-area {
  --widget-spacing: var(--size-600);
  display: flex;
  flex-direction: column;
  gap: var(--widget-spacing);
}

.widget {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
  text-transform: none;
}

.widget-title {
  margin-block-end: var(--size-300);
  font-size: var(--size-500);
  line-height: var(--line-height-400);
}

/* Lists - categories, archives, recent entries, menus, pages */
.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget ul li {
  padding-block: var(--size-200);
  border-bottom: 1px solid var(--color-border);
}

.widget ul li:last-child {
  border-bottom: 0;
}

.widget ul li a {
  text-decoration: none;
}

.widget ul li a:hover,
.widget ul li a:focus-visible {
  text-decoration: underline;
}

.widget .count {
  opacity: 0.6;
}

.widget .post-date {
  display: block;
  font-size: var(--size-300);
  opacity: 0.7;
}

/* Search */
/* Stacked, so the field stays usable in a narrow sidebar */
.widget_search .search-form {
  display: flex;
  align-items: flex-start;
  gap: var(--size-300);
}

.widget_search .search-form label {
  width: 80%;
}

.widget_search .search-field {
  width: auto;
}

.screen-reader-text:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.screen-reader-text:not(:focus):not(:active) + * {
  margin-top: 0;
}

/* Tag cloud */
.widget_tag_cloud .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-200);
}

a.tag-cloud-link {
  display: inline-block;
  padding: var(--size-100) var(--size-300);
  border: 1px solid var(--color-border);
  border-radius: var(--size-300);
  transition: var(--transition-default) background-color, var(--transition-default) color;
  text-decoration: none;
  line-height: var(--line-height-400);
}

a.tag-cloud-link:hover,
a.tag-cloud-link:focus-visible {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.tag-link-count {
  opacity: 0.6;
}

/* Recent comments */
.widget_recent_comments .comment-author-link {
  font-weight: var(--weight-bold);
}

.content-icon {
  --content-icon-size: 100%;
  width: 100%;
  max-width: var(--content-icon-size);
  margin-inline: auto;
  /* The aircraft icon sizes itself to a fixed width and the service icon caps
     itself at 10em - let the wrapper size them instead */
}
.content-icon .aircraft-icon {
  width: 100%;
}
.content-icon .service-icon {
  max-width: 100%;
}

.flexible-content.flow {
  --flow-spacing: var(--size-600);
}

.flexible-content .site-modal {
  min-height: 0;
}

.empty-legs {
  --el-gap: var(--size-500);
  --el-results-width: 24em;
  --el-outbound: #38bdf8;
  --el-return: #c084fc;
  --el-from: #22c55e;
  --el-to: #f59e0b;
  display: block;
}

/* ------------------------------------------------------------------ search */
.empty-legs__search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--el-gap);
  margin-block-end: var(--el-gap);
}

.empty-legs__field {
  position: relative;
  flex: 1 1 12em;
  min-width: 0;
}

.empty-legs__field label {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
  text-transform: none;
  display: block;
  margin-block-end: var(--size-200);
  font-weight: var(--weight-medium);
}

.empty-legs__field input[type=text],
.empty-legs__field input[type=date],
.empty-legs__field input[type=number] {
  width: 100%;
}

.empty-legs__hint {
  font-weight: var(--weight-regular);
  opacity: 0.7;
}

.empty-legs__field--slider {
  flex: 1 1 11em;
}

.empty-legs__slider {
  width: 100%;
  accent-color: var(--color-text);
}

.empty-legs__value {
  font-weight: var(--weight-regular);
  opacity: 0.8;
}

.empty-legs__unit {
  position: absolute;
  inset-inline-end: var(--size-400);
  inset-block-end: 0.75em;
  opacity: 0.7;
  pointer-events: none;
}

.empty-legs__field--check {
  flex: 0 1 auto;
}

.empty-legs__field--check label {
  display: flex;
  align-items: center;
  gap: var(--size-300);
  margin-block-end: 0;
  font-weight: var(--weight-regular);
}

.empty-legs__field--actions {
  flex: 0 0 auto;
}

.empty-legs__clear {
  position: absolute;
  inset-inline-end: var(--size-300);
  inset-block-end: 0.4em;
  padding: 0 var(--size-200);
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--size-500);
  line-height: 1;
  cursor: pointer;
}

/* Autocomplete */
.empty-legs__options {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--color-boxshadow-drop);
  max-height: 18em;
  overflow-y: auto;
  z-index: var(--z-index-600);
}

.empty-legs__option {
  padding: var(--size-300) var(--size-400);
  cursor: pointer;
}

.empty-legs__option:hover,
.empty-legs__option.is-highlighted {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.empty-legs__option-label {
  display: block;
}

.empty-legs__option-sub {
  display: block;
  font-size: var(--size-300);
  opacity: 0.7;
}

/* -------------------------------------------------------------------- body */
/* Map above, listings below */
.empty-legs__body {
  display: flex;
  flex-direction: column;
  gap: var(--el-gap);
  min-height: 0;
}

.empty-legs__map {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-index-300);
  /* Capped so the listings always have room, and the map stays in view while
     you read down them */
  max-height: 40vh;
  overflow: hidden;
  background-color: var(--color-bg);
}

.empty-legs__map .world-map,
.empty-legs__map .world-map__svg {
  max-height: 40vh;
}

.empty-legs__map .world-map__svg {
  height: 40vh;
  aspect-ratio: auto;
}

.empty-legs__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-400);
  margin: var(--size-300) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-300);
}

.empty-legs__legend li {
  display: flex;
  align-items: center;
  gap: var(--size-200);
}

.empty-legs__key {
  display: inline-block;
  width: 1.5em;
  height: 0.35em;
  border-radius: 0.35em;
}

.empty-legs__key[data-key=from] {
  background-color: var(--el-from);
}

.empty-legs__key[data-key=to] {
  background-color: var(--el-to);
}

.empty-legs__key[data-key=outbound] {
  background-color: var(--el-outbound);
}

.empty-legs__key[data-key=return] {
  background-color: var(--el-return);
}

/* ----------------------------------------------------------------- results */
.empty-legs__status {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
  text-transform: none;
  margin: 0 0 var(--size-300);
  font-weight: var(--weight-medium);
}

/* No scroll container here - it would trap the sticky header inside the table
   instead of letting it stick to the window */
.empty-legs__table-wrap {
  overflow: visible;
}

.empty-legs__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.empty-legs__table :is(th, td) {
  padding: var(--size-300) var(--size-400);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

/* Only the short columns hold their line - aircraft and operator names wrap,
   so the table fits its container rather than scrolling sideways */
.empty-legs__table :is(th, td):is(:nth-child(2), :nth-child(5), :nth-child(6), :nth-child(7)) {
  white-space: nowrap;
}

.empty-legs__table :is(thead th, tbody th) {
  background-color: transparent;
  color: var(--color-text);
}

.empty-legs__table thead th {
  position: sticky;
  /* Set from script - the map above is sticky too, so the header stops under
     it rather than at the top of the window */
  inset-block-start: var(--el-sticky-offset, 0px);
  background-color: var(--color-bg);
  font-size: var(--size-300);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: var(--z-index-200);
}

/* Sortable headings */
.empty-legs__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--size-200);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.empty-legs__sort:hover {
  text-decoration: underline;
}

.empty-legs__sort-icon::after {
  content: "↕";
  opacity: 0.4;
}

[aria-sort=ascending] .empty-legs__sort-icon::after {
  content: "↑";
  opacity: 1;
}

[aria-sort=descending] .empty-legs__sort-icon::after {
  content: "↓";
  opacity: 1;
}

.empty-legs__row {
  transition: var(--transition-default, 0.2s ease) background-color;
}

.empty-legs__row:hover,
.empty-legs__row.is-active {
  background-color: var(--color-grey-light, rgba(0, 0, 0, 0.04));
}

.empty-legs__row.is-active :is(th, td) {
  box-shadow: inset 0 -2px 0 var(--el-outbound);
}

.empty-legs__row[data-return].is-active :is(th, td) {
  box-shadow: inset 0 -2px 0 var(--el-return);
}

.empty-legs__cell-route {
  font-weight: var(--weight-regular);
}

.empty-legs__cell-route .empty-legs__code {
  font-size: var(--size-500);
  white-space: nowrap;
}

.empty-legs__cell-price {
  font-size: var(--size-500);
}

.empty-legs__cell-action {
  text-align: right;
}

/* Narrow screens keep the columns that matter - route, date, price and the
   way to enquire - and drop the rest rather than scrolling them out of reach */
.empty-legs__table :is(th, td):nth-child(3) {
  display: none;
}
@media (min-width: 48em) {
  .empty-legs__table :is(th, td):nth-child(3) {
    display: table-cell;
  }
}

.empty-legs__table :is(th, td):nth-child(4),
.empty-legs__table :is(th, td):nth-child(5) {
  display: none;
}
@media (min-width: 62em) {
  .empty-legs__table :is(th, td):nth-child(4),
  .empty-legs__table :is(th, td):nth-child(5) {
    display: table-cell;
  }
}

.empty-legs__places {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
  text-transform: none;
  display: block;
  margin-block-start: var(--size-100);
  font-size: var(--size-300);
  opacity: 0.8;
  white-space: normal;
}

.empty-legs__badge {
  margin-inline-start: var(--size-200);
  padding: 0 var(--size-200);
  border: 1px solid var(--el-return);
  border-radius: var(--size-200);
  font-size: var(--size-300);
}

/* --------------------------------------------------------------------- map */
.empty-legs__route {
  cursor: pointer;
}

.empty-legs__airport {
  fill: var(--color-white);
  stroke: var(--color-blue);
  stroke-width: 1;
  cursor: pointer;
}

.empty-legs__airport:hover {
  fill: var(--el-to);
}

/* ---------------------------------------------------------------- popovers */
.empty-legs__popover {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: max-content;
  max-width: min(22rem, 100vw - var(--size-600));
  padding: var(--size-400);
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--color-boxshadow-drop);
  z-index: var(--z-index-800);
}

.empty-legs__popover[hidden] {
  display: none;
}

.empty-legs__pop-route {
  display: flex;
  align-items: center;
  gap: var(--size-200);
  margin: 0 0 var(--size-300);
  font-size: var(--size-500);
}

.empty-legs__pop-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--size-100) var(--size-300);
  margin: 0;
  font-size: var(--size-300);
}

.empty-legs__pop-details dt {
  opacity: 0.7;
}

.empty-legs__pop-details dd {
  margin: 0;
}

.empty-legs__pop-price {
  margin: var(--size-300) 0 0;
  font-size: var(--size-600);
}

.empty-legs__pop-cta {
  margin-block-start: var(--size-300);
}

.empty-legs__pop-name {
  margin: 0;
  font-size: var(--size-500);
}

.empty-legs__pop-sub {
  margin: var(--size-100) 0 0;
  font-size: var(--size-300);
  opacity: 0.7;
}

.empty-legs__pop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-200);
  margin-block-start: var(--size-400);
}

/* ------------------------------------------------------- full window layout */
/* ----------------------------------------------------------- enquiry modal */
.empty-legs__enquiry-flight {
  padding: var(--size-400);
  margin-block-end: var(--size-500);
  background-color: var(--color-grey-light, rgba(0, 0, 0, 0.04));
}

.empty-legs__enquiry-route {
  margin: 0 0 var(--size-300);
  font-size: var(--size-600);
}

.empty-legs__enquiry-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--size-100) var(--size-400);
  margin: 0;
  font-size: var(--size-300);
}

.empty-legs__enquiry-details dt {
  opacity: 0.7;
}

.empty-legs__enquiry-details dd {
  margin: 0;
}

/* The intro sits above the finder and takes its share of the window - the
   finder measures what is left rather than assuming a fixed height */
.empty-legs-intro .content {
  max-width: var(--width-mid);
}

/* WordPress's default comment_form() markup */
.comment-respond {
  --comment-spacing: var(--size-500);
}

.comment-reply-title {
  margin-block-end: var(--comment-spacing);
}

.comment-reply-title small {
  font-size: var(--size-400);
  margin-inline-start: var(--size-300);
}

.comment-form > p {
  margin-block-end: var(--comment-spacing);
}

.comment-form label {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
  text-transform: none;
  display: block;
  margin-block-end: var(--size-200);
  font-weight: var(--weight-medium);
}

.comment-form :is(input[type=text], input[type=email], input[type=url], textarea) {
  width: 100%;
}

.comment-notes {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.7;
}

.comment-form .required {
  color: var(--color-text);
}

/* Consent checkbox sits inline with its label */
.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--size-300);
}

.comment-form-cookies-consent input {
  margin-block-start: 0.25em;
  flex-shrink: 0;
}

.comment-form-cookies-consent label {
  margin-block-end: 0;
  font-weight: var(--weight-regular);
}

.comment-form .submit {
  cursor: pointer;
}

/* Contact Form 7 output. Selectors follow the plugin's own markup so a real
   CF7 shortcode inherits this without a wrapper class of ours. */
.wpcf7-form {
  --cf7-spacing: var(--size-500);
}

.wpcf7-form > p {
  margin-block-end: var(--cf7-spacing);
}

.wpcf7-form label {
  font-family: var(--font-base);
  font-size: var(--size-400);
  line-height: var(--line-height-700);
  letter-spacing: 0.04em;
  text-transform: none;
  display: block;
  font-weight: var(--weight-medium);
}

.wpcf7-form-control-wrap {
  display: block;
  margin-block-start: var(--size-200);
  font-weight: var(--weight-regular);
}

.wpcf7-form-control:is(.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-url,
.wpcf7-number,
.wpcf7-textarea,
.wpcf7-select) {
  width: 100%;
}

.wpcf7-required-mark {
  color: var(--color-text);
  opacity: 0.7;
}

/* Acceptance checkbox sits inline with its label */
.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: var(--size-300);
  font-weight: var(--weight-regular);
}

.wpcf7-acceptance input[type=checkbox] {
  margin-block-start: 0.25em;
  flex-shrink: 0;
}

/* Submit, styled as a primary button without needing the button macro */
.wpcf7-submit {
  cursor: pointer;
}

.wpcf7-spinner {
  display: none;
  margin-inline-start: var(--size-300);
}

.wpcf7-form.submitting .wpcf7-spinner {
  display: inline-block;
}

/* Plugin messaging - hidden until CF7 fills it in */
.wpcf7-response-output {
  margin-block-start: var(--cf7-spacing);
  padding: var(--size-400);
  border: 2px solid var(--color-border);
}

.wpcf7-response-output[aria-hidden=true] {
  display: none;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-block-start: var(--size-200);
  font-size: var(--size-300);
}

.wpcf7-recaptcha-notice {
  font-size: var(--size-300);
  opacity: 0.7;
}

.filter-grid__layout {
  display: flex;
  flex-direction: column;
  gap: var(--flow-spacing);
}

@media (min-width: 62em) {
  filter-grid[data-layout=horizontal] .filter-grid__layout {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
  }
  filter-grid[data-layout=horizontal] .filter-grid__layout .field-container,
  filter-grid[data-layout=horizontal] .filter-grid__layout select-group {
    flex-grow: 1;
    flex-shrink: 1;
    width: 1px;
  }
}
.footer {
  position: relative;
  z-index: var(--z-index-300);
}
@media (prefers-color-scheme: dark) {
  .footer {
    border-top: 1px solid var(--color-border);
  }
}
[data-mode=dark] .footer {
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  --flow-spacing: 2em;
}
.footer__inner address {
  font-size: var(--size-300);
  line-height: var(--line-height-700);
}
@media (min-width: 62em) {
  .footer__inner .layout-grid__item:last-child {
    border-left: 1px solid var(--color-border);
    padding-inline-start: var(--size-700);
  }
}

.footer__content {
  font-size: var(--size-300);
  line-height: var(--lineheight-400);
}
.footer__content p {
  max-width: initial;
}

.footer__social .button {
  font-size: var(--size-700);
  --button-border-radius: var(--size-200);
  width: 1.25em;
  height: 1.25em;
}

site-header {
  position: relative;
  z-index: var(--z-index-700);
  display: block;
}

.header {
  position: relative;
}

.header__inner {
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--size-100);
  flex-wrap: wrap;
}
@media (min-width: 62em) {
  .header__inner {
    padding-block: var(--size-600) var(--size-400);
    padding-block-start: var(--size-400);
  }
}

.header__logo {
  width: 12em;
  max-width: 60%;
}
@media (min-width: 62em) {
  .header__logo {
    width: 16em;
    max-width: 20%;
    transition: width var(--transition-default);
  }
  [data-stuck] .header__logo {
    width: 8em;
  }
}

.header__nav {
  color: inherit;
}
.header__nav[open] {
  position: fixed;
  top: 0;
  right: 0;
  width: 30em;
  max-width: 100%;
  background-color: var(--color-bg);
  z-index: var(--z-index-900);
  height: 100%;
  box-shadow: var(--color-boxshadow-default);
  padding: var(--section-padding);
  max-height: 100%;
  border: 0px none;
  margin: 0;
  margin-inline-start: auto;
  overflow: visible;
  transition: transform var(--transition-default);
}
@starting-style {
  .header__nav[open] {
    transform: translateX(100%);
  }
}
.header__nav[open]:backdrop {
  background-color: var(--color-tint);
  transition: background-color var(--transition-default);
}
@starting-style {
  .header__nav[open]:backdrop {
    background-color: transparent;
  }
}
@media (min-width: 62em) {
  .header__nav {
    display: contents;
  }
}

.header__nav__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--flow-spacing);
  height: 100%;
}
@media (min-width: 62em) {
  .header__nav__inner {
    display: contents;
  }
}

.header__nav__row {
  display: contents;
}
@media (min-width: 62em) {
  .header__nav__row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: var(--flow-spacing);
    order: 3;
  }
}

.header__nav simple-nav {
  order: 4;
  flex-grow: 1;
}
@media (min-width: 62em) {
  .header__nav simple-nav {
    order: 11;
    flex-grow: initial;
  }
}

.header-nav__button[data-button-variant=icon] {
  font-size: var(--size-600);
  --button-outer-padding: 0;
  --button-hover-bg: transparent;
  --button-hover-color: var(--color-text);
}
@media (min-width: 62em) {
  .header-nav__button[data-button-variant=icon] {
    display: none;
  }
}

.header-nav__close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--size-500);
  --button-border-radius: 0;
}
@media (min-width: 62em) {
  .header-nav__close {
    display: none;
  }
}

.mast {
  --mast-slide-transition: 1000ms;
  --mast-toggle-offset: var(--size-400);
}

.mast > .section__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* The background sits behind the content, so let clicks through to the
   play/pause control - only the mast content itself should catch them. */
.mast > .section__inner {
  pointer-events: none;
}

.mast[data-prepadding=true] > .section__inner {
  padding-block-start: 10vh;
}

.mast > .section__inner > * {
  pointer-events: auto;
}

.mast > .section__background::after {
  pointer-events: none;
}

.mast .mast__media {
  display: block;
  position: absolute;
  inset: 0;
}

.mast .mast__slides {
  position: absolute;
  inset: 0;
}

.mast .mast__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--mast-slide-transition) ease-in-out;
}

.mast .mast__slide[data-active] {
  opacity: 1;
}

.mast .mast__toggle {
  /* Hidden until the custom element reports itself ready */
  display: none;
  position: absolute;
  inset-block-end: var(--mast-toggle-offset);
  inset-inline-end: var(--mast-toggle-offset);
  z-index: var(--z-index-200);
}

.mast .mast__media[data-ready] .mast__toggle {
  display: inline-flex;
}

.mast .mast__toggle .mast__toggle-icon[data-toggle-icon=pause] {
  display: none;
}

.mast .mast__media[data-playing] .mast__toggle .mast__toggle-icon[data-toggle-icon=play] {
  display: none;
}

.mast .mast__media[data-playing] .mast__toggle .mast__toggle-icon[data-toggle-icon=pause] {
  display: inline-flex;
}

.section-split {
  /* Configuration */
  --split-min-height: 32rem;
  --split-media-min-height: 16rem;
  /* Half the content container, so the text column's outer edge lands on the
     same line as a normal section's content - see __content-inner below */
  --split-content-width: calc(var(--width-max) / 2);
}

/* The columns carry their own padding so the media can run to the page edge */
.section-split > .section__inner {
  padding: 0;
}

.section-split__layout {
  display: flex;
  flex-direction: column;
}
@media (min-width: 62em) {
  .section-split__layout {
    flex-direction: row;
    align-items: stretch;
    /* Tall enough to show the media, and grows with whichever column is
       taller */
    min-height: var(--split-min-height);
  }
}

@media (min-width: 62em) {
  .section-split__layout[data-direction=reverse] {
    flex-direction: row-reverse;
  }
}

@media (min-width: 62em) {
  .section-split__content,
  .section-split__media {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
  }
}

.section-split__content {
  display: flex;
  align-items: center;
  padding-block: var(--section-padding);
}

.section-split__content-inner {
  width: 100%;
  max-width: var(--width-max);
  margin-inline: auto;
  padding-inline: var(--section-padding);
}

/* The inner block is half the container wide and sits against the centre line
   of the page, which puts its outer edge exactly on the container edge - the
   same place a full width section starts its content */
@media (min-width: 62em) {
  .section-split__content {
    justify-content: flex-end;
  }
  .section-split__content-inner {
    max-width: var(--split-content-width);
    margin-inline: 0;
  }
  .section-split__layout[data-direction=reverse] .section-split__content {
    justify-content: flex-start;
  }
}
.section-split__icon {
  --split-icon-size: 6em;
  max-width: var(--split-icon-size);
  margin-block-end: var(--size-500);
  /* The service icon caps itself at 10em - let the wrapper size it instead */
}
.section-split__icon .service-icon {
  max-width: 100%;
}

/* The icon sits outside the content block, so when that block carries its
   border the icon indents by the same amount to stay level with the heading */
.section-split__content-inner:has(.content--border) .section-split__icon {
  margin-inline-start: calc(var(--size-600) + 1px);
}

.section-split__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-tint);
}
.section-split__media:has(.content-icon) {
  background-color: transparent;
}

/* Stacked, media keeps its own proportions. Side by side it fills the column
   edge to edge instead. */
.section-split__media[data-fill=true] {
  /* Full bleed at every size - the media column has no padding */
}
.section-split__media[data-fill=true] .flexible-content,
.section-split__media[data-fill=true] .flexible-content > *,
.section-split__media[data-fill=true] figure,
.section-split__media[data-fill=true] .img-link {
  width: 100%;
}
.section-split__media[data-fill=true] img,
.section-split__media[data-fill=true] video {
  display: block;
  width: 100%;
}
@media (min-width: 62em) {
  .section-split__media[data-fill=true] {
    min-height: var(--split-media-min-height);
  }
  .section-split__media[data-fill=true] .flexible-content,
  .section-split__media[data-fill=true] .flexible-content > *,
  .section-split__media[data-fill=true] figure,
  .section-split__media[data-fill=true] .img-link {
    height: 100%;
  }
  .section-split__media[data-fill=true] img,
  .section-split__media[data-fill=true] video {
    height: 100%;
    object-fit: cover;
  }
  .section-split__media[data-fill=true] {
    /* The iframe atom sizes from custom properties, so filling the column is a
       matter of handing it a height instead of a ratio */
  }
  .section-split__media[data-fill=true] .iframe-embed {
    --iframe-ratio: auto;
    --iframe-height: 100%;
    height: 100%;
  }
}

/* Anything that isn't media - lists, blockquotes - centres in the column */
.section-split__media[data-fill=false] {
  padding: var(--section-padding);
}
.section-split__media[data-fill=false] .flexible-content {
  width: 100%;
  max-width: var(--split-content-width);
}

.section-specs__stats .definition-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-700);
  align-items: flex-start;
  justify-content: flex-start;
  --flow-spacing: 0;
}
.section-specs__stats .definition-list__group {
  --flow-spacing: 0;
  flex-basis: 100%;
}
@media (min-width: 48em) {
  .section-specs__stats .definition-list__group {
    flex-basis: 40%;
  }
}
@media (min-width: 62em) {
  .section-specs__stats .definition-list__group {
    flex-basis: 20%;
  }
}
.section-specs__stats .content--small p {
  max-width: initial;
}

/* Cabin gallery - a grid of captioned images with matching proportions */
.section-specs__gallery {
  --grid-gap: var(--size-600);
}
.section-specs__gallery figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.section-specs__gallery figure figcaption {
  margin-block-start: var(--size-300);
  font-size: var(--size-300);
}

/*
  Narrow screens stack the table rather than scroll it sideways: the tier
  banner stays at the top, and every feature becomes a block with its name on
  one line and the tier values in a row beneath, aligned under the banner.
  From "md" it is a table again.
*/
.comparison-table {
  --comparison-cell-padding: var(--size-400);
  --comparison-icon-size: 3em;
  --comparison-columns: 1;
  overflow: visible;
}
@media (min-width: 48em) {
  .comparison-table {
    overflow: auto;
  }
}

.comparison-table table {
  position: relative;
  display: block;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
@media (min-width: 48em) {
  .comparison-table table {
    display: table;
  }
}

.comparison-table thead {
  position: sticky;
  top: 0;
  left: 0;
  display: block;
  z-index: var(--z-index-700);
}
@media (min-width: 48em) {
  .comparison-table thead {
    display: table-header-group;
    position: relative;
  }
}

.comparison-table tbody {
  display: block;
}
@media (min-width: 48em) {
  .comparison-table tbody {
    display: table-row-group;
  }
}

.comparison-table tfoot {
  display: block;
}
@media (min-width: 48em) {
  .comparison-table tfoot {
    display: table-footer-group;
  }
}

/* One track per tier, so the values always line up under the banner above */
.comparison-table[data-columns="2"] {
  --comparison-columns: 2;
}

.comparison-table[data-columns="3"] {
  --comparison-columns: 3;
}

.comparison-table[data-columns="4"] {
  --comparison-columns: 4;
}

.comparison-table[data-columns="5"] {
  --comparison-columns: 5;
}

.comparison-table[data-columns="6"] {
  --comparison-columns: 6;
}

/* Stacked, each row is its own grid; the tier cells share the width evenly */
.comparison-table tr {
  display: grid;
  grid-template-columns: repeat(var(--comparison-columns), minmax(0, 1fr));
}
@media (min-width: 48em) {
  .comparison-table tr {
    display: table-row;
    padding: 0;
  }
}

.comparison-table :is(th, td) {
  display: block;
  padding: var(--comparison-cell-padding);
  vertical-align: middle;
}
@media (min-width: 48em) {
  .comparison-table :is(th, td) {
    display: table-cell;
    padding: var(--comparison-cell-padding);
    border: 1px solid var(--color-border);
  }
}

/* The empty corner cells only exist to line the table up */
.comparison-table :is(thead, tfoot) tr > td:first-child {
  display: none;
}
@media (min-width: 48em) {
  .comparison-table :is(thead, tfoot) tr > td:first-child {
    display: table-cell;
    border: 0px none;
  }
}

.comparison-table thead {
  background-color: var(--color-text);
}
.comparison-table thead th,
.comparison-table thead td {
  text-align: center;
  vertical-align: bottom;
  border: 0;
  border-inline: 1px solid var(--color-bg);
}

.comparison-table thead td {
  background-color: var(--color-bg);
}

.comparison-table__icon {
  display: block;
  max-width: var(--comparison-icon-size);
  margin-inline: auto;
  margin-block-end: var(--size-300);
}
.comparison-table__icon .service-icon {
  max-width: 100%;
}

.comparison-table__title {
  display: block;
  font-size: var(--size-400);
}
@media (min-width: 48em) {
  .comparison-table__title {
    font-size: var(--size-500);
  }
}

.comparison-table__excerpt {
  display: block;
  font-size: var(--size-300);
  font-weight: var(--weight-regular);
}

/* The feature name takes a line of its own, then its values sit beneath it */
.comparison-table tbody th {
  grid-column: 1/-1;
  font-weight: var(--weight-bold);
  background-color: transparent;
  color: currentColor;
  text-align: center;
  padding-bottom: 0;
}
@media (min-width: 48em) {
  .comparison-table tbody th {
    width: 40%;
    font-weight: var(--weight-regular);
    text-align: left;
    padding-bottom: var(--comparison-cell-padding);
  }
}

.comparison-table tbody td,
.comparison-table tfoot td {
  text-align: center;
}

.comparison-table tbody td,
.comparison-table tbody th {
  border: 0px none;
}
@media (min-width: 48em) {
  .comparison-table tbody td,
  .comparison-table tbody th {
    border-inline: 1px solid var(--color-bg);
  }
  .comparison-table tbody td:first-child,
  .comparison-table tbody th:first-child {
    border-left: 0;
  }
  .comparison-table tbody td:last-child,
  .comparison-table tbody th:last-child {
    border-right: 0;
  }
}

.comparison-table tbody tr:nth-child(odd) {
  background-color: var(--color-tint);
}
@media (min-width: 48em) {
  .comparison-table tbody tr:nth-child(odd) td,
  .comparison-table tbody tr:nth-child(odd) th {
    border-inline-color: var(--color-bg);
  }
}

@media (min-width: 48em) {
  .comparison-table tbody tr:nth-child(even) td,
  .comparison-table tbody tr:nth-child(even) th {
    border-inline-color: var(--color-tint);
  }
}

.comparison-table td[data-value=no] {
  color: var(--color-text-muted, currentColor);
  opacity: 0.5;
}

.comparison-table td[data-value=yes] .faicon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: var(--size-rel-600);
  height: var(--size-rel-600);
  border: 1px solid currentColor;
  border-radius: 50%;
}

/* Stacked, the buttons go full width and each one names its own tier */
.comparison-table tfoot td {
  border: 0;
}

.comparison-table tfoot .button {
  font-size: var(--size-300);
}
@media (min-width: 48em) {
  .comparison-table tfoot .button {
    font-size: var(--size-400);
  }
}
.comparison-table tfoot .button .button__icon {
  display: none;
}
@media (min-width: 48em) {
  .comparison-table tfoot .button .button__icon {
    display: flex;
  }
}