@charset "UTF-8";
/* Tokens */
:root {
  /*Variable Variables*/
  --color-primary: red;
  --color-secondary: blue;
  --color-alert: #C73501;
  --color-primary-text: var(--color-primary);
  --color-secondary-text: var(--color-secondary);
  --text-color-dark: black;
  --text-color-light: white;
  --text-color: var(--text-color-dark);
  --color-background: white;
  --color-overlay: #2E271A90;
  --color-detail: #ddd;
  --color-accent: #aaa;
  --pad--xl: 48px;
  --pad--lg: 32px;
  --pad--md: 16px;
  --pad--sm: 8px;
  --pad--btn: .2em 1.2em;
  --radius--xs: 10px;
  --radius--md: 14px;
  --radius--lg: 18px;
  --radius--sm: 10px;
  --radius--xl: 22px;
  --fixed-width: calc(100vw - calc(var(--pad--lg) * 2));
  --fixed-max-width-large: 1200px;
  --fixed-max-width-medium: 1000px;
  --fixed-max-width-small: 800px;
  --fixed-max-width-tiny: 450px;
  --font-display: sans-serif;
  --font-body: sans-serif;
  --header-background-color: var(--color-primary);
  --header-background-image: none;
  --mobile-header-background-color: var(--header-background-color);
  --mobile-nav-background-color: var(--header-background-color);
  font-size: 18px;
  color: var(--text-color);
  font-family: var(--font-body), sans-serif;
  --header-size: 80px;
  --font-size-body: 1rem;
  --font-size-h1: 4rem;
  --font-size-h2: 3rem;
  --font-size-h3: 2.5rem;
  --font-size-h4: 2rem;
}

@media (max-width: 799px) {
  :root {
    --fixed-width: calc(100vw - calc(var(--pad--md) * 2));
  }
}
/* Universal Resets */
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  background-color: var(--color-background);
}

/* Typography */
strong {
  font-weight: 700;
}

@font-face {
  font-family: "icons";
  src: url("/guillemet/library/fonts/icons.eot");
  src: url("/guillemet/library/fonts/icons.woff") format("woff"), url("/guillemet/library/fonts/icons.ttf") format("truetype"), url("/guillemet/library/fonts/icons.svg#filename") format("svg");
}
a {
  text-decoration: none;
  color: var(--color-secondary);
}

p {
  margin: 0;
}

p a:hover {
  text-decoration: underline;
}

p,
ul,
li {
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: 1.1;
  font-family: var(--font-display), "sans-serif";
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

.sup {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary-text);
  font-family: var(--font-display), "sans-serif";
  font-size: 0.85em;
}

ul {
  margin: 0;
}

address {
  font-style: normal;
}

.inline-label {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.85em;
}

/* General */
main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pad--xl);
  margin-top: var(--header-size);
}

svg {
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

*[id]:target {
  scroll-margin-top: var(--header-size);
}

/* Layout Utilities */
:root {
  --space-nn: 0;
  --space-xs: 0.2rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --container-pad-inline: clamp(var(--space-sm), 3vw, var(--space-lg));
  --container-max-xs: 600px;
  --container-max-sm: 800px;
  --container-max-md: 1000px;
  --container-max-lg: 1200px;
  --container-max-xl: 1500px;
  --container-max: var(--container-max-lg);
  --switch-xs: 22rem;
  --switch-sm: 30rem;
  --switch-md: 40rem;
  --switch-lg: 52rem;
  --switch-xl: 64rem;
}

.v-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.stretch {
  align-items: stretch;
}

.h-stack {
  display: flex;
  flex-direction: row;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}

.h-stack.switch--md {
  flex-wrap: wrap;
  --switch: var(--switch-md);
}

.h-stack.switch--md > * {
  flex-grow: 1;
  flex-basis: calc((var(--switch, var(--switch-md)) - 100%) * 999);
  min-inline-size: 0;
}

.full-width {
  width: 100%;
}

.container,
.container--xs,
.container--sm,
.container--md,
.container--lg {
  inline-size: min(100% - 2 * var(--container-pad-inline), var(--container-max));
  margin-inline: auto;
}

/* Container width variants (xs through lg, double-dash only) */
.container--xs {
  --container-max: var(--container-max-xs);
}

.container--sm {
  --container-max: var(--container-max-sm);
}

.container--md {
  --container-max: var(--container-max-md);
}

/* .container (no suffix) and .container--lg both use the lg max width */
.container,
.container--lg {
  --container-max: var(--container-max-lg);
}

.gap--nn {
  gap: var(--space-nn);
}

.gap--xs {
  gap: var(--space-xs);
}

.gap--sm {
  gap: var(--space-sm);
}

.gap--md {
  gap: var(--space-md);
}

.gap--lg {
  gap: var(--space-lg);
}

.gap--xl {
  gap: var(--space-xl);
}

/* Gap utilities: row/column (top/bottom vs left/right) combinations */
/* Naming: .gap--ROW-COL where ROW = row-gap, COL = column-gap */
.gap--nn-nn {
  row-gap: var(--space-nn);
  column-gap: var(--space-nn);
}

.gap--nn-xs {
  row-gap: var(--space-nn);
  column-gap: var(--space-xs);
}

.gap--nn-sm {
  row-gap: var(--space-nn);
  column-gap: var(--space-sm);
}

.gap--nn-md {
  row-gap: var(--space-nn);
  column-gap: var(--space-md);
}

.gap--nn-lg {
  row-gap: var(--space-nn);
  column-gap: var(--space-lg);
}

.gap--nn-xl {
  row-gap: var(--space-nn);
  column-gap: var(--space-xl);
}

.gap--xs-nn {
  row-gap: var(--space-xs);
  column-gap: var(--space-nn);
}

.gap--xs-xs {
  row-gap: var(--space-xs);
  column-gap: var(--space-xs);
}

.gap--xs-sm {
  row-gap: var(--space-xs);
  column-gap: var(--space-sm);
}

.gap--xs-md {
  row-gap: var(--space-xs);
  column-gap: var(--space-md);
}

.gap--xs-lg {
  row-gap: var(--space-xs);
  column-gap: var(--space-lg);
}

.gap--xs-xl {
  row-gap: var(--space-xs);
  column-gap: var(--space-xl);
}

.gap--sm-nn {
  row-gap: var(--space-sm);
  column-gap: var(--space-nn);
}

.gap--sm-xs {
  row-gap: var(--space-sm);
  column-gap: var(--space-xs);
}

.gap--sm-sm {
  row-gap: var(--space-sm);
  column-gap: var(--space-sm);
}

.gap--sm-md {
  row-gap: var(--space-sm);
  column-gap: var(--space-md);
}

.gap--sm-lg {
  row-gap: var(--space-sm);
  column-gap: var(--space-lg);
}

.gap--sm-xl {
  row-gap: var(--space-sm);
  column-gap: var(--space-xl);
}

.gap--md-nn {
  row-gap: var(--space-md);
  column-gap: var(--space-nn);
}

.gap--md-xs {
  row-gap: var(--space-md);
  column-gap: var(--space-xs);
}

.gap--md-sm {
  row-gap: var(--space-md);
  column-gap: var(--space-sm);
}

.gap--md-md {
  row-gap: var(--space-md);
  column-gap: var(--space-md);
}

.gap--md-lg {
  row-gap: var(--space-md);
  column-gap: var(--space-lg);
}

.gap--md-xl {
  row-gap: var(--space-md);
  column-gap: var(--space-xl);
}

.gap--lg-nn {
  row-gap: var(--space-lg);
  column-gap: var(--space-nn);
}

.gap--lg-xs {
  row-gap: var(--space-lg);
  column-gap: var(--space-xs);
}

.gap--lg-sm {
  row-gap: var(--space-lg);
  column-gap: var(--space-sm);
}

.gap--lg-md {
  row-gap: var(--space-lg);
  column-gap: var(--space-md);
}

.gap--lg-lg {
  row-gap: var(--space-lg);
  column-gap: var(--space-lg);
}

.gap--lg-xl {
  row-gap: var(--space-lg);
  column-gap: var(--space-xl);
}

.gap--xl-nn {
  row-gap: var(--space-xl);
  column-gap: var(--space-nn);
}

.gap--xl-xs {
  row-gap: var(--space-xl);
  column-gap: var(--space-xs);
}

.gap--xl-sm {
  row-gap: var(--space-xl);
  column-gap: var(--space-sm);
}

.gap--xl-md {
  row-gap: var(--space-xl);
  column-gap: var(--space-md);
}

.gap--xl-lg {
  row-gap: var(--space-xl);
  column-gap: var(--space-lg);
}

.gap--xl-xl {
  row-gap: var(--space-xl);
  column-gap: var(--space-xl);
}

/* Padding utilities: single size (all sides) */
.pad--nn {
  padding: var(--space-nn);
}

.pad--xs {
  padding: var(--space-xs);
}

.pad--sm {
  padding: var(--space-sm);
}

.pad--md {
  padding: var(--space-md);
}

.pad--lg {
  padding: var(--space-lg);
}

.pad--xl {
  padding: var(--space-xl);
}

/* Padding utilities: block (top/bottom) and inline (left/right) combinations */
/* Naming: .pad--VERT-HORIZ where VERT = top/bottom, HORIZ = left/right */
.pad--nn-nn {
  padding-block: var(--space-nn);
  padding-inline: var(--space-nn);
}

.pad--nn-xs {
  padding-block: var(--space-nn);
  padding-inline: var(--space-xs);
}

.pad--nn-sm {
  padding-block: var(--space-nn);
  padding-inline: var(--space-sm);
}

.pad--nn-md {
  padding-block: var(--space-nn);
  padding-inline: var(--space-md);
}

.pad--nn-lg {
  padding-block: var(--space-nn);
  padding-inline: var(--space-lg);
}

.pad--nn-xl {
  padding-block: var(--space-nn);
  padding-inline: var(--space-xl);
}

.pad--xs-nn {
  padding-block: var(--space-xs);
  padding-inline: var(--space-nn);
}

.pad--xs-xs {
  padding-block: var(--space-xs);
  padding-inline: var(--space-xs);
}

.pad--xs-sm {
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
}

.pad--xs-md {
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
}

.pad--xs-lg {
  padding-block: var(--space-xs);
  padding-inline: var(--space-lg);
}

.pad--xs-xl {
  padding-block: var(--space-xs);
  padding-inline: var(--space-xl);
}

.pad--sm-nn {
  padding-block: var(--space-sm);
  padding-inline: var(--space-nn);
}

.pad--sm-xs {
  padding-block: var(--space-sm);
  padding-inline: var(--space-xs);
}

.pad--sm-sm {
  padding-block: var(--space-sm);
  padding-inline: var(--space-sm);
}

.pad--sm-md {
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
}

.pad--sm-lg {
  padding-block: var(--space-sm);
  padding-inline: var(--space-lg);
}

.pad--sm-xl {
  padding-block: var(--space-sm);
  padding-inline: var(--space-xl);
}

.pad--md-nn {
  padding-block: var(--space-md);
  padding-inline: var(--space-nn);
}

.pad--md-xs {
  padding-block: var(--space-md);
  padding-inline: var(--space-xs);
}

.pad--md-sm {
  padding-block: var(--space-md);
  padding-inline: var(--space-sm);
}

.pad--md-md {
  padding-block: var(--space-md);
  padding-inline: var(--space-md);
}

.pad--md-lg {
  padding-block: var(--space-md);
  padding-inline: var(--space-lg);
}

.pad--md-xl {
  padding-block: var(--space-md);
  padding-inline: var(--space-xl);
}

.pad--lg-nn {
  padding-block: var(--space-lg);
  padding-inline: var(--space-nn);
}

.pad--lg-xs {
  padding-block: var(--space-lg);
  padding-inline: var(--space-xs);
}

.pad--lg-sm {
  padding-block: var(--space-lg);
  padding-inline: var(--space-sm);
}

.pad--lg-md {
  padding-block: var(--space-lg);
  padding-inline: var(--space-md);
}

.pad--lg-lg {
  padding-block: var(--space-lg);
  padding-inline: var(--space-lg);
}

.pad--lg-xl {
  padding-block: var(--space-lg);
  padding-inline: var(--space-xl);
}

.pad--xl-nn {
  padding-block: var(--space-xl);
  padding-inline: var(--space-nn);
}

.pad--xl-xs {
  padding-block: var(--space-xl);
  padding-inline: var(--space-xs);
}

.pad--xl-sm {
  padding-block: var(--space-xl);
  padding-inline: var(--space-sm);
}

.pad--xl-md {
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
}

.pad--xl-lg {
  padding-block: var(--space-xl);
  padding-inline: var(--space-lg);
}

.pad--xl-xl {
  padding-block: var(--space-xl);
  padding-inline: var(--space-xl);
}

.align-start {
  align-items: start;
}

.align-center {
  align-items: center;
}

.text-align-center {
  text-align: center;
}

.justify-center {
  justify-content: center;
}

.mini-heading {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.85em;
}

.wrap {
  flex-wrap: wrap !important;
}

/* Grid system */
.grid,
[class^=grid--],
[class*=" grid--"] {
  display: grid;
}

/* Fixed column grids: same column count at all viewport sizes */
.grid--fixed-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--fixed-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--fixed-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--fixed-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid--fixed-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Responsive stepped grids: more columns as the screen gets larger */
/* 4 → 3 → 2 → 1 */
.grid--cols-4 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
  .grid--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .grid--cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* 3 → 2 → 1 */
.grid--cols-3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
  .grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* 2 → 1 */
.grid--cols-2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
  .grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Auto-fit grids based on desired minimum card width */
/* Uses existing --switch-* tokens as min-widths for items */
.grid--auto-xs {
  grid-template-columns: repeat(auto-fit, minmax(var(--switch-xs), 1fr));
}

.grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(var(--switch-sm), 1fr));
}

.grid--auto-md {
  grid-template-columns: repeat(auto-fit, minmax(var(--switch-md), 1fr));
}

.grid--auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(var(--switch-lg), 1fr));
}

.grid--auto-xl {
  grid-template-columns: repeat(auto-fit, minmax(var(--switch-xl), 1fr));
}

/* Legacy fixed-grid alias (defaults to a 3-column grid on large screens) */
.fixed-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 1000px) {
  .fixed-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .fixed-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .mobile-center-align {
    align-items: center;
  }
  .mobile-center-align > * {
    text-align: center;
    align-items: center;
  }
  .h-list.mobile-center-align {
    justify-content: center;
  }
}
/* Header #header-swipe */
#header-swipe {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1000;
  pointer-events: none;
}

#header-swipe .header-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#header-swipe .header-top-wrapper {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--mobile-header-background-color);
  height: var(--header-size);
  pointer-events: all;
}

#header-swipe .logo-image-container {
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#header-swipe .logo-image-container > img {
  height: 100%;
}

#header-swipe .nav-wrapper {
  flex-grow: 1;
  transition: transform 250ms;
  transform: translateX(100%);
  position: relative;
  align-self: flex-end;
  pointer-events: all;
  display: flex;
  flex-direction: column;
}

#header-swipe nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: calc(var(--pad--lg) / 2) 0;
  background-color: var(--mobile-nav-background-color);
  flex-grow: 1;
  min-width: 200px;
}

#header-swipe nav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--pad--lg) / 2) var(--pad--lg);
  text-align: center;
}

#header-swipe *:has(#nav-toggle-checkbox:checked) ~ .nav-wrapper {
  transform: none;
}

#header-swipe #nav-toggle-checkbox {
  display: none;
}

#header-swipe .nav-toggle {
  position: relative;
  width: 28px;
  height: 18px;
  --hamburger-color: var(--color-primary);
}

#header-swipe .nav-toggle-wrapper {
  grid-area: b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  padding: 0 30px;
  --hamburger-size-y: 5px;
}

#header-swipe .nav-toggle:before,
#header-swipe .nav-toggle:after {
  content: "";
  background-color: var(--hamburger-color);
  width: 100%;
  height: var(--hamburger-size-y);
  border-radius: 2px;
  position: absolute;
  transition: top 100ms 100ms ease-out, bottom 100ms 100ms ease-out, transform 100ms ease-out;
}

#header-swipe .nav-toggle-wrapper:has(> #nav-toggle-checkbox:checked) .nav-toggle:before,
.nav-toggle-wrapper:has(> #nav-toggle-checkbox:checked) .nav-toggle:after {
  position: absolute;
  transition: top 100ms ease-out, bottom 100ms ease-out, transform 100ms 100ms ease-out;
}

#header-swipe .nav-toggle:before {
  top: 0;
}

#header-swipe .nav-toggle:after {
  bottom: 0;
}

#header-swipe .nav-toggle-wrapper:has(> #nav-toggle-checkbox:checked) .nav-toggle:before {
  top: calc(50% - var(--hamburger-size-y) / 2);
  transform: rotate(45deg);
}

#header-swipe .nav-toggle-wrapper:has(> #nav-toggle-checkbox:checked) .nav-toggle:after {
  bottom: calc(50% - var(--hamburger-size-y) / 2);
  transform: rotate(-45deg);
}

#header-swipe .floating-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: all;
  display: flex;
  flex-direction: row;
  padding: var(--pad--md);
  gap: var(--pad--md);
}

#header-swipe .floating-phone {
  width: 70px;
  height: 70px;
  border-radius: 40px;
  background-color: var(--color-secondary);
  padding: var(--pad--md);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5019607843), 0 3px 5px 0 rgba(0, 0, 0, 0.2509803922);
}

#header-swipe .floating-book {
  min-width: 120px;
  height: 70px;
  border-radius: 40px;
  background-color: var(--color-primary);
  padding: var(--pad--md);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5019607843), 0 3px 5px 0 rgba(0, 0, 0, 0.2509803922);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#header-swipe .floating-phone svg {
  fill: var(--text-color);
}

@media (min-width: 1000px) {
  header#header-swipe {
    background-color: var(--header-background-color);
    background-image: var(--header-background-image);
    overflow: unset;
    bottom: unset;
  }
  #header-swipe .header-wrapper {
    max-width: var(--fixed-max-width-large);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: var(--fixed-width);
  }
  #header-swipe .header-top-wrapper {
    background: unset;
    flex-grow: 0;
  }
  #header-swipe .nav-wrapper {
    transition: unset;
    transform: unset;
    align-self: unset;
    margin: unset;
    padding: var(--pad--sm) 0;
  }
  #header-swipe .nav-toggle-wrapper {
    display: none;
  }
  #header-swipe nav {
    height: 100%;
    padding: 0;
    flex-grow: 1;
    background: unset;
    position: unset;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    gap: var(--pad--sm);
    min-width: unset;
  }
  #header-swipe nav a {
    padding: 0 var(--pad--sm);
  }
  #header-swipe .floating-wrapper {
    display: none;
  }
}
/* Footer */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-color-light);
  min-height: 200px;
  background-color: var(--color-secondary);
  padding: var(--pad--xl) 0;
  margin-top: var(--pad--xl);
  gap: var(--pad--md);
  font-size: var(--font-size--xs);
}

footer .mini-heading {
  color: var(--text-color-light);
}

footer a {
  color: var(--text-color-light);
}

.footer-logo {
  height: 80px;
}

/* Alerts */
.alert-box {
  --color-alert-1: #EBD636;
  --color-alert-2: #F6ECA2;
}

.alert-box.failure {
  --color-alert-1: #DA4C3C;
  --color-alert-2: #F2C0BA;
}

.alert-box.success {
  --color-alert-1: #5ACE30;
  --color-alert-2: #CAF0BC;
}

.alert-box {
  display: flex;
  flex-direction: row;
  border: 2px solid var(--color-alert-1);
  background-color: var(--color-alert-1);
  border-radius: var(--radius--md);
  color: black;
}

.alert-box-icon {
  font-family: "icons", sans-serif;
  color: var(--text-color-light);
  font-size: 1.2rem;
  padding: 2px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.alert-box-content {
  padding: var(--pad--btn);
  background-color: var(--color-alert-2);
  flex-grow: 1;
  border-radius: calc(var(--radius--md) - 2px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.alert-title {
  font-weight: 600;
}

/* Animations */
@keyframes pop-in {
  0% {
    transform: scale(0.5) rotate(90deg);
    opacity: 90;
  }
  60% {
    transform: scale(0.9) rotate(20deg);
    opacity: 1;
  }
  61% {
    transform: scale(1.4) rotate(-20deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
/* Buttons */
.button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius--md);
  padding: var(--pad--btn);
  font-weight: 700;
  height: 100%;
  --button-background-color: var(--color-background);
  --button-foreground-color: var(--color-primary);
  background-color: var(--button-background-color);
  border: 2px solid var(--button-background-color);
  color: var(--button-foreground-color);
}

.button-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-primary {
  --button-background-color: var(--color-primary);
  --button-foreground-color: var(--color-background);
}

.button-secondary {
  --button-background-color: var(--color-secondary);
  --button-foreground-color: var(--color-background);
}

.button-tertiary {
  --button-background-color: var(--text-color-light);
  --button-foreground-color: transparent;
}

.button.inverted {
  background-color: var(--button-foreground-color);
  color: var(--button-background-color);
  border: 2px solid var(--button-background-color);
}

.button-tertiary:not(.inverted) {
  color: var(--text-color-dark);
}

.button-wrapper,
a:has(> .button) {
  min-width: 150px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}

.button-wrapper > .button {
  flex-grow: 1;
}

.button-wrapper:hover > .button,
a:hover > .button {
  background-color: var(--button-foreground-color);
  color: var(--button-background-color);
}

.button-wrapper:hover > .button.inverted,
a:hover > .button.inverted {
  background-color: var(--button-background-color);
  color: var(--button-foreground-color);
}

.button-wrapper:hover .button-tertiary.inverted {
  color: var(--text-color-dark);
}

.image-button {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius--lg);
  color: var(--text-color-light);
}

a.image-button:hover {
  text-decoration: none;
}

a.image-button .ib-content {
  transition: 150ms;
  padding: var(--pad--lg);
  z-index: 10;
}

a.image-button:hover .ib-content {
  transform: scale(1.05);
}

.image-button .background-media {
  filter: brightness(0.5);
  transition: 150ms;
}

a.image-button:hover .background-media {
  transform: scale(1.1);
  filter: brightness(0.65);
}

.button-list {
  display: flex;
  flex-direction: column;
  padding-top: var(--pad--sm);
  gap: var(--pad--sm);
  flex-wrap: wrap;
}

/* Button list and mobile grid behavior */
@media (min-width: 600px) {
  .button-list {
    flex-direction: row;
    justify-content: flex-start;
  }
  .center-align .button-list {
    align-self: center;
  }
  .center-align .button-list {
    justify-content: center;
  }
}
@media (max-width: 599px) {
  .button-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}
/* Forms */
form {
  display: flex;
  flex-direction: column;
}

label {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
}

input:not([type=radio]):not([type=checkbox]),
select,
textarea {
  border-radius: var(--radius--md);
  border: 1px solid var(--color-detail);
  padding: var(--pad--btn);
  font-size: 1rem;
  appearance: none;
  min-height: 44px;
  font-family: var(--font-body);
}

input[type=submit] {
  cursor: pointer;
}

input[type=checkbox] {
  appearance: none;
  border: 1px solid var(--color-detail);
  border-radius: var(--radius--md);
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

input[type=checkbox]:active {
  background-color: var(--color-detail);
}

input[type=checkbox]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

input[type=checkbox]:checked:after {
  content: "✓";
  font-family: "icons", sans-serif;
  color: var(--text-color-light);
  font-size: 1rem;
  animation: pop-in 80ms;
}

input[readonly] {
  color: var(--color-accent);
}

.radio-wrapper {
  border-radius: var(--radius--md);
  border: 1px solid var(--color-detail);
  font-weight: 600;
  font-size: 0.8rem;
  appearance: none;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 44px;
  align-items: stretch;
}

.checkboxes-wrapper {
  font-weight: 600;
  font-size: 0.8rem;
}

.radio-option {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
  border-right: 1px solid var(--color-detail);
}

.checkbox-option {
  display: flex;
  flex-direction: row;
  gap: var(--pad--sm);
  align-items: center;
}

.radio-option label {
  cursor: pointer;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--pad--btn);
  transition: 100ms;
}

.radio-option input:checked ~ label {
  background-color: var(--color-secondary);
  color: var(--text-color-light);
}

.radio-option input ~ label .radio-option-text {
  position: relative;
}

.radio-option:last-child {
  border-right: none;
}

.radio-option input {
  display: none;
}

.form-layout {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--pad--md);
}

.form-layout .form-component {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--pad--sm);
}

.form-component:has(.InputToggle) {
  flex-direction: row-reverse;
  gap: var(--pad--md);
}

@media (min-width: 600px) {
  .form-layout {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-layout .form-component-large {
    grid-column: span 2;
  }
  .form-layout .form-component-medium {
    grid-column: span 2;
  }
  .form-layout .form-component-small {
    grid-column: span 1;
  }
}
@media (min-width: 800px) {
  .form-layout {
    grid-template-columns: repeat(4, 1fr);
  }
  .form-layout .form-component-large {
    grid-column: span 4;
  }
  .form-layout .form-component-medium {
    grid-column: span 2;
  }
  .form-layout .form-component-small {
    grid-column: span 1;
  }
}
/* Hero Banner */
.hero-banner {
  --text-color: var(--text-color-light);
  color: var(--text-color);
  background-color: var(--color-secondary);
  display: flex;
  width: 100%;
  min-height: max(500px, 60vh);
  max-width: unset;
  background-size: cover;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--pad--xl) 0;
}

.hero-mega {
  min-height: 80vh;
}

.hero-banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 100;
  width: var(--fixed-width);
  max-width: var(--fixed-max-width-large);
}

.hero-banner-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero-banner-background > img,
.hero-banner-background > video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  object-fit: cover;
}

.hero-banner-background-cover {
  background-color: var(--color-overlay);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

/* Image Text Banner */
.image-text-banner-wrapper {
  width: 100%;
  display: grid;
  grid-template-rows: 300px 1fr;
  background-color: black;
}

.itb-blank {
  background-color: var(--color-detail);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  grid-row: 2;
  grid-column: 1;
}

.itb-image {
  grid-row: 1;
  grid-column: 1;
}

.itb-content-wrapper {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 0 var(--pad--lg);
}

.itb-content {
  margin-top: calc(-1 * var(--pad--lg));
  background-color: var(--color-background);
  padding: var(--pad--md);
  position: relative;
  z-index: 1;
  width: var(--fixed-width);
}

@media (min-width: 600px) {
  .image-text-banner-wrapper {
    grid-template-columns: 1fr min(var(--fixed-width) * 0.5, var(--fixed-max-width-large) * 0.5) min(var(--fixed-width) * 0.5, var(--fixed-max-width-large) * 0.5) 1fr;
    grid-template-rows: unset;
    min-height: 350px;
  }
  .itb-blank {
    grid-row: 1;
    grid-column: 3/5;
  }
  .reverse .itb-blank {
    grid-column: 1/3;
  }
  .itb-image {
    grid-row: 1;
    grid-column: 1/3;
  }
  .reverse .itb-image {
    grid-column: 3/5;
  }
  .itb-content-wrapper {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    padding: var(--pad--xl) 0;
  }
  .reverse .itb-content-wrapper {
    grid-column: 2;
  }
  .itb-content {
    margin-top: unset;
    margin-left: calc(-1 * var(--pad--xl));
    width: unset;
  }
  .reverse .itb-content {
    margin-left: unset;
    margin-right: calc(-1 * var(--pad--xl));
  }
}
@media (min-width: 1000px) {
  .image-text-banner-wrapper {
    min-height: 450px;
  }
}
/* Media */
.media-cover {
  position: relative;
  overflow: hidden;
}

.media-cover > img,
.media-cover > video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-container,
.image-cover {
  position: relative;
  overflow: hidden;
}

.image-container > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-cover > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-image {
  min-height: 300px;
  position: relative;
  padding: var(--pad--lg) 0;
}

.background-media {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background-media img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-icon svg {
  --target-size: 44px;
  --icon-size: 32px;
  height: var(--icon-size);
  width: var(--icon-size);
  fill: white;
  display: block;
  margin: calc((var(--target-size) - var(--icon-size)) / 2);
}

/* Separators */
.separator {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--pad--sm);
}

.separator:before,
.separator:after {
  content: "";
  background-color: var(--color-primary-text);
  height: 2px;
  width: 80px;
}

.separator svg {
  width: 30px;
}

.separator svg path {
  fill: var(--color-primary-text) !important;
}

/*# sourceMappingURL=main.css.map */