@charset "UTF-8";
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

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

/* 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;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.c-row, .fl-row, .c-themed {
  --_theme-background-color: var( --theme-background-color );
  --_theme-color: var( --theme-color );
  --_theme-bright-color: var( --theme-bright-color );
  --_theme-muted-color: var( --theme-muted-color );
  --_theme-dim-color: var( --theme-dim-color );
  --_theme-faint-color: var( --theme-faint-color );
  background-color: var(--_theme-background-color, transparent);
  color: var(--_theme-color, canvastext);
}
.x-motif-01 {
  --button-background-color: #27cebc;
  --button-color: #000;
  --theme-background-color: #fff;
  --theme-color: #000;
}
body:has(#theme-mode input:checked) .x-motif-01 {
  --theme-background-color: #666;
  --theme-color: #eee;
}

.x-motif-02 {
  --button-background-color: #27cebc;
  --button-color: #000;
  --theme-background-color: #eee;
  --theme-color: #000;
}
body:has(#theme-mode input:checked) .x-motif-02 {
  --theme-background-color: #444;
  --theme-color: #ddd;
}

.x-motif-03 {
  --button-background-color: #fff;
  --button-color: #000;
  --theme-background-color: #27cebc;
  --theme-color: #fff;
}

.x-motif-04 {
  --button-background-color: #fff;
  --button-color: #000;
  --theme-background-color: #222;
  --theme-color: #ddd;
  --theme-bright-color: #27cebc;
  --theme-faint-color: #333;
  --theme-dim-color: #444;
  --theme-muted-color: #666;
}
body:has(#theme-mode input:checked) .x-motif-04 {
  --theme-background-color: #000;
  --theme-color: #bbb;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

a {
  background-color: var(--a-background-color, transparent);
  border: var(--a-border-width, 0) var(--a-border-style, solid) var(--a-border-color, transparent);
  border-radius: var(--a-border-radius, none);
  color: var(--a-color, inherit);
  display: var(--a-display, inline);
  padding: var(--a-padding);
  text-decoration: var(--a-text-decoration, underline);
}

button {
  background-color: var(--button-background-color, transparent);
  border: var(--button-border-width, 0) var(--button-border-style, solid) var(--button-border-color, transparent);
  border-radius: var(--button-border-radius, 3px);
  color: var(--button-color, inherit);
  cursor: pointer;
  display: var(--button-display, inline-block);
  padding: var(--button-padding, 0.5em 1em);
}

.c-header__wrap {
  z-index: 1;
}

.c-header {
  --is-open: initial; /* OFF */
  --theme-background-color: #27cebc;
  --theme-color: #fff;
  --nav-gap: .5em;
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 48.0625rem) {
  .c-header {
    position: relative;
  }
}
@media screen and (max-width: 48rem) {
  .c-header {
    --nav-flex-direction: column;
  }
}
.c-header .identity {
  --a-text-decoration: none;
  align-items: center;
  display: flex;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.c-header__nav {
  --button-display: inline-block;
  --button-padding: .5em .75em;
  --button-border-radius: 4px;
  --button-border-width: 1px;
  font-size: 0.875rem;
}
.c-header__nav > button {
  display: none;
}
.c-header__nav > ul {
  margin: 0;
  padding: 0;
}
.c-header__nav li:where(.--active) {
  --is-open: ; /* ON */
}
@media screen and (max-width: 48rem) {
  .c-header__nav > button {
    display: block;
  }
  .c-header__nav > ul {
    inset: 0 0 0 10%;
    overflow-y: auto;
    position: fixed;
    transform: translateX(100%);
    transition: transform 0.333s ease-in-out;
    z-index: -1;
  }
  .c-header__nav > ul:where(.--active) {
    transform: translateX(0%);
  }
}

.c-header__link {
  --a-border-color: var( --button-border-color );
  --a-border-radius: var( --button-border-radius );
  --a-border-width: var( --button-border-width );
  --a-display: var( --button-display );
  --a-padding: var( --button-padding );
  --a-text-decoration: none;
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.c-header__link:hover {
  --button-border-color: white;
}

:where(li:has(> .c-header__subnav)) {
  --_open-icon-transform: var( --is-open ) rotate( -90deg ) scaleX( 0.666 );
  --_open-button-border-color: var( --is-open ) white;
}
:where(li:has(> .c-header__subnav)) > button::after {
  content: "▶";
  color: black;
  transform: var(--_open-icon-transform, rotate(90deg) scaleX(0.666));
}

.c-header__subnav {
  --_open-subnav-display: var( --is-open ) grid;
  --_open-subnav-height: var( --is-open ) calc-size(auto);
  --_open-subnav-opacity: var( --is-open ) 1;
  --_open-subnav-translateY: var( --is-open ) translateY( 0 );
  --a-padding: 0;
  --a-text-decoration: none;
  --theme-background-color: #222;
  --theme-color: #fff;
  --row-padding-block: 3rem;
  background-color: #000;
  color: white;
  font-size: 0.875rem;
  gap: 2rem;
}
@media screen and (min-width: 48.0625rem) {
  .c-header__subnav {
    display: var(--_open-subnav-display, none);
    grid-template-columns: 1fr 1fr;
    inset: 100% 0px auto 0px;
    opacity: var(--_open-subnav-opacity, 0);
    overflow: hidden;
    position: absolute;
    transition: display 0.25s, height 0.25s, opacity 0.25s, transform 0.25s;
    transition-behavior: allow-discrete;
    z-index: -1;
  }
  @supports (height: calc-size(auto)) {
    .c-header__subnav {
      height: var(--_open-subnav-height, 0vh);
    }
  }
  @supports not (height: calc-size(auto)) {
    .c-header__subnav {
      transform: var(--_open-subnav-translateY, translateY(-2rem));
    }
  }
  @starting-style {
    .c-header__subnav {
      opacity: 0;
      transform: translateY(-2rem);
    }
  }
}

.c-header__feature {
  background-color: darkblue;
}

.c-main {
  flex: 1;
}

.c-nav {
  --_nav-flex-direction: var( --nav-flex-direction, row );
  --_nav-gap: var( --nav-gap, 1em );
}
.c-nav > ul {
  display: flex;
  flex-direction: var(--_nav-flex-direction);
  gap: var(--_nav-gap);
  list-style: none;
  padding-left: 0;
}
.c-nav > ul > li {
  display: flex;
}

.c-nav:where(.--vertical) {
  --nav-flex-direction: column;
  --nav-gap: .5em;
}

.fl-row, .c-row {
  --_row-padding-block: var( --row-padding-block );
  --_row-padding-inline: var( --row-padding-inline );
}

.c-row {
  padding: var(--_row-padding-block) var(--_row-padding-inline);
}

.fl-row-content-wrap {
  padding: var(--_row-padding-block) var(--_row-padding-inline);
}

:root {
  --row-padding-block: .75rem;
  --row-padding-inline: 1.5rem;
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Montserrat", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}