@charset "UTF-8";
:root {
  color-scheme: light dark;
  --color-ci-1-50: #0A60A3;
  --color-ci-1-60: #0c7dd3;
  --color-ci-1-90: #cee8fc;
  --color-neutral-bg: var(--color-ci-1-90);
  --color-error: #C9450D;
  --color-error-bg: #fbd8cf;
  --color-success: #128242;
  --color-success-bg: #d2f8e2;
  --color-decorations: color-mix(in oklab, var(--color-ci-1-50) 20%, transparent);
  --color-text: black;
  --color-text-ci-1: var(--color-ci-1-50);
  --color-text-on-ci-1-50: white;
  --color-text-large: #3F4040;
  --color-text-extra-large: #4C4D4D;
  --color-page: white;
  --color-input-surface: #F0F0F0;
  --color-text-input-placeholder: #6F6D6E;
  --color-group-background: #F0F0F0;
  --color-text-dimmed: #6F6D6E;
  --dominant-color: oklch(0 0 249.68);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-ci-1-10: #001c33;
    --color-ci-1-50: #005FA8;
    --color-ci-1-60: #1579c5;
    --color-neutral-bg: var(--color-ci-1-10);
    --color-error: #B84600;
    --color-error-bg: #331300;
    --color-success: #176D3D;
    --color-success-bg: #082a17;
    --color-text: #F0F0F0;
    --color-text-ci-1: var(--color-ci-1-60);
    --color-text-large: #E3E3E3;
    --color-text-extra-large: #C7C7C7;
    --color-page: black;
    --color-input-surface: #191A1A;
    --color-text-input-placeholder: #6F6D6E;
    --color-group-background: #191A1A;
    --color-text-dimmed: #6F6D6E;
  }
}
:root {
  --font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-weight: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 500;
  --font-size-h1: clamp(2rem, 0.2857rem + 7.1429vw, 4rem);
  --font-size-h2: clamp(1.5rem, 1.0714rem + 1.7857vw, 2rem);
  --font-size-h3: clamp(1rem, 0.7429rem + 1.0714vw, 1.3rem);
  --font-size-S: .9rem;
  --line-height: 1.5rem;
  --line-height-h2: calc(1em + .5rem);
  --line-height-h1: calc(1em + .5rem);
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}

article, div, fieldset, figcaption, footer, header, li, main, nav, noscript, section, table, tfoot {
  margin: 0;
}

address, aside, audio, blockquote, canvas, dd, dl, dt, figure, form, h1, h2, h3, h4, h5, h6, hr, ol, p, picture, pre, ul, video, .image-container {
  margin-block: var(--line-height);
  margin-inline: 0;
}

h1 {
  max-width: var(--headline-max-width);
  margin-block-start: 0;
}

h2 {
  margin-block-start: var(--section-gap);
}

@media (min-width: 38rem) {
  address > :first-child:not(h1, h2), article > :first-child:not(h1, h2), aside > :first-child:not(h1, h2), blockquote > :first-child:not(h1, h2), div > :first-child:not(h1, h2), dl > :first-child:not(h1, h2), fieldset > :first-child:not(h1, h2), figcaption > :first-child:not(h1, h2), footer > :first-child:not(h1, h2), header > :first-child:not(h1, h2), main > :first-child:not(h1, h2), nav > :first-child:not(h1, h2), ol > :first-child:not(h1, h2), ul > :first-child:not(h1, h2) {
    margin-block-start: 0;
  }
  address > :last-child, article > :last-child, aside > :last-child, blockquote > :last-child, div > :last-child, dl > :last-child, fieldset > :last-child, figcaption > :last-child, footer > :last-child, header > :last-child, main > :last-child, nav > :last-child, ol > :last-child, ul > :last-child {
    margin-block-end: 0;
  }
}
@media (width < 38rem) {
  address h1, address h2, article h1, article h2, aside h1, aside h2, blockquote h1, blockquote h2, div h1, div h2, dl h1, dl h2, fieldset h1, fieldset h2, figcaption h1, figcaption h2, footer h1, footer h2, header h1, header h2, main h1, main h2, nav h1, nav h2, ol h1, ol h2, ul h1, ul h2 {
    max-width: 100%;
  }
  address h3, address h4, address h5, address h6, article h3, article h4, article h5, article h6, aside h3, aside h4, aside h5, aside h6, blockquote h3, blockquote h4, blockquote h5, blockquote h6, div h3, div h4, div h5, div h6, dl h3, dl h4, dl h5, dl h6, fieldset h3, fieldset h4, fieldset h5, fieldset h6, figcaption h3, figcaption h4, figcaption h5, figcaption h6, footer h3, footer h4, footer h5, footer h6, header h3, header h4, header h5, header h6, main h3, main h4, main h5, main h6, nav h3, nav h4, nav h5, nav h6, ol h3, ol h4, ol h5, ol h6, ul h3, ul h4, ul h5, ul h6 {
    margin-block-end: calc(var(--line-height) / 2);
  }
  img {
    margin-block: var(--line-height);
  }
  p {
    margin-block: calc(var(--line-height) / 3);
  }
  picture, img {
    margin-block: 0;
  }
}
a, a:link, a:active, a:visited {
  color: var(--color-text);
  text-decoration-color: var(--color-text-ci-1);
  text-decoration-thickness: 0.1875rem;
  text-underline-offset: 0.125rem;
}

a:hover, a:focus, a:focus-visible {
  color: var(--color-text-ci-1);
}

.logotype :first-child {
  font-weight: var(--font-weight-L);
  color: var(--color-text);
}
.logotype :last-child {
  font-weight: var(--font-weight);
  color: var(--color-text-ci-1);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-extra-large);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-large);
}

h3, h4, h5, h6 {
  line-height: var(--line-height);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-large);
}

h4 {
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

h5 {
  font-size: var(--font-size-S);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-large);
}

h6 {
  font-size: var(--font-size-S);
  font-weight: var(--font-weight);
  color: var(--color-text-large);
  text-decoration: underline;
}

p {
  margin-block: var(--line-height);
}

blockquote {
  padding: var(--line-height) var(--column-gap-S);
  border-left: solid var(--line-thickness) var(--color-ci-1-50);
  box-sizing: border-box;
  font-style: italic;
  background: var(--color-group-background);
}
blockquote footer {
  border-top: solid 0.5px var(--clor-text);
  font-size: var(--font-size-S);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dimmed);
}
blockquote footer::before {
  content: "— ";
}

body {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(22rem, 33rem) minmax(22rem, 33rem) auto;
  grid-template-areas: ". head head ." "main main main main" ". foot foot .";
  column-gap: var(--column-gap);
}

header {
  grid-area: head;
}

body > footer {
  grid-area: foot;
  margin-block: var(--row-gap);
  border-top: solid 1px var(--color-decorations);
  padding-top: var(--line-height);
}

main {
  grid-area: main;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: var(--column-gap);
  row-gap: var(--line-height);
  min-height: calc(100vh - var(--column-gap) - var(--line-height) * 6 - var(--section-gap));
}
main .grid-row {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
}
main .grid-row.splash {
  min-height: calc(100vh - var(--column-gap) - var(--line-height) * 10 - var(--section-gap));
  display: flex;
  align-items: center;
  justify-content: center;
}
main .grid-row .column {
  grid-column: 3/span var(--span);
}
main .grid-row .column:first-child {
  grid-column: 2/span var(--span);
}
main .grid-row .column.breakout {
  grid-column: 3/span calc(var(--span) + 1);
}
main .grid-row .column.breakout:first-child {
  grid-column: 1/span calc(var(--span) + 1);
}
main .grid-row .column.breakout:only-child {
  grid-column: 1/-1;
}

main.text {
  display: block;
  grid-column: 2/span 2;
}

footer {
  grid-area: foot;
}

@media (width < 47rem) {
  body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "head head" "main main" "foot foot";
    margin: 0 1rem;
  }
  main > .grid-row .column, main > .grid-row .column.breakout {
    grid-column: 2/span var(--span);
  }
  main > .grid-row .column:first-child, main > .grid-row .column.breakout:first-child {
    grid-column: 1/span var(--span);
  }
  main.text {
    display: block;
    grid-column: unset;
  }
}
@media (width < 38rem) {
  body, main, main > .grid-row {
    display: block;
  }
}
:root {
  --border-radius-S: 4px;
  --border-radius: 8px;
  --transition-duration: 180ms;
  --transition-duration-L: 260ms;
  --transition-duration-XL: 480ms;
  --box-shadow: var(--line-height);
  --box-shadow-L: calc(var(--box-shadow) * 2);
  --box-shadow-XL: calc(var(--box-shadow-L) * 2);
  --box-shadow-XXL: calc(var(--box-shadow-XL) * 2);
  --gap: 2rem;
  --gap-S: calc(var(--gap) / 2);
  --column-gap: var(--gap);
  --row-gap: calc(var(--line-height) * 2);
  --section-gap: calc(var(--line-height) * 3);
  --vertical-gap-S: calc(var(--column-gap) / 2);
  --line-thickness: .125rem;
}
@media (width < 52rem) {
  :root {
    --section-gap: var(--line-height);
  }
}
@media (width < 38rem) {
  :root {
    --section-gap: var(--row-gap);
  }
}

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

img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}
img.shadow {
  box-shadow: 0 0 var(--box-shadow-XXL) oklch(from var(--dominant-color) l c h/20%), 0 0 var(--box-shadow) oklch(from var(--color-text) l c h/10%);
  outline: solid 1px oklch(from var(--dominant-color) 1 min(c, 0.2) h/14%);
  border-top: solid 1px oklch(100% 0 0deg / 0.4);
  border-bottom: solid 1px oklch(100% 0 0deg / 0.2);
  outline-offset: -0.5px;
}
@media screen and (prefers-color-scheme: dark) {
  img.shadow {
    box-shadow: 0 0 var(--box-shadow-XXL) oklch(from var(--dominant-color) clamp(0.6, l, 0.7) c h/50%), 0 0 var(--box-shadow) oklch(0% 0 0deg);
  }
}
img.shadow.noShadow {
  box-shadow: none !important;
  outline: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.image-container {
  position: relative;
}
.image-container.shadow::after {
  border-radius: var(--border-radius);
  position: absolute;
  inset: 0;
  content: "";
  box-shadow: 0 0 var(--box-shadow-XXL) oklch(from var(--dominant-color) l c h/20%), 0 0 var(--box-shadow) oklch(from var(--color-text) l c h/10%);
  outline: solid 1px oklch(from var(--dominant-color) 1 min(c, 0.2) h/14%);
  border-top: solid 1px oklch(100% 0 0deg / 0.4);
  border-bottom: solid 1px oklch(100% 0 0deg / 0.2);
  outline-offset: -0.5px;
  z-index: -1;
}
@media screen and (prefers-color-scheme: dark) {
  .image-container.shadow::after {
    box-shadow: 0 0 var(--box-shadow-XXL) oklch(from var(--dominant-color) clamp(0.6, l, 0.7) c h/50%), 0 0 var(--box-shadow) oklch(0% 0 0deg);
  }
}
.image-container.shadow::after.noShadow {
  box-shadow: none !important;
  outline: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

figure:has(img) {
  position: relative;
  z-index: 1;
}
figure:has(img) p {
  margin: calc(var(--line-height) / 2) var(--vertical-gap-S) !important;
  max-width: 33rem;
}

@media (pointer: fine) {
  figure:has(img) {
    border-radius: var(--border-radius);
    overflow-x: hidden;
    overflow-y: scroll;
  }
  figure:has(img) img {
    position: sticky;
    top: 0;
    box-shadow: none;
    border: none;
    outline: none;
  }
  figure:has(img) figcaption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    margin-block: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: oklch(from var(--color-page) l c h/80%);
    backdrop-filter: blur(25px);
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--transition-duration-L);
  }
  figure:has(img):focus figcaption, figure:has(img):focus-within figcaption, figure:has(img):hover figcaption {
    opacity: 1;
  }
}
@media (pointer: coarse) {
  figure:has(img) {
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--color-page);
  }
  figure:has(img) img {
    box-shadow: none;
    border: none;
    border-bottom: solid 0.5px var(--color-ci-1-50);
    border-radius: 0;
    outline: none;
  }
  figure:has(img) figcaption {
    font-size: var(--font-size-S);
    font-weight: var(--font-weight-regular);
  }
}
header {
  padding-block-start: calc(var(--line-height));
  margin-block-end: calc(var(--line-height) * 2);
}
header nav ol, header nav li {
  list-style: none;
}
header nav ol {
  display: flex;
  justify-items: flex-end;
  margin: 0;
  padding: 0;
}
header nav > ol {
  margin: 0 calc(var(--line-height) / -2);
}
header nav li a, header nav .menu-toggle label {
  padding-inline: calc(var(--line-height) / 2);
  padding-block: calc(var(--line-height) / 4);
  white-space: nowrap;
}
header nav > ol > li:first-child {
  justify-self: flex-start;
  margin-inline-end: auto;
}
header nav > ol > #menu-anchor {
  position: relative;
  z-index: 2;
}
header nav a, header nav a:link, header nav a:active, header nav a:visited {
  color: var(--color-text);
  text-decoration: none;
}
header nav a:hover, header nav a:focus, header nav a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}
header nav a:focus-visible {
  outline: var(--color-ci-1-50) solid 2px;
}
header nav #menu-check {
  position: absolute;
  left: -5000px;
}
@media (width >= 38rem) {
  header nav .menu-toggle {
    display: none;
  }
  header nav #toggle-menu {
    display: flex;
  }
}
@media (width < 38rem) {
  header nav .menu-toggle {
    display: inline;
  }
  header nav #toggle-menu {
    display: none;
    padding: var(--gap-S);
    background-color: var(--color-page);
    position: absolute;
    right: calc(var(--line-height) / 2);
    top: calc(100% + var(--line-height) / 2);
    box-shadow: 0 0 var(--box-shadow-XXL) oklch(from var(--dominant-color) l c h/20%), 0 0 var(--box-shadow) oklch(from var(--color-text) l c h/10%);
    outline: solid 1px oklch(from var(--dominant-color) 1 min(c, 0.2) h/14%);
    border-top: solid 1px oklch(100% 0 0deg / 0.4);
    border-bottom: solid 1px oklch(100% 0 0deg / 0.2);
    outline-offset: -0.5px;
  }
}
@media screen and (width < 38rem) and (prefers-color-scheme: dark) {
  header nav #toggle-menu {
    box-shadow: 0 0 var(--box-shadow-XXL) oklch(from var(--dominant-color) clamp(0.6, l, 0.7) c h/50%), 0 0 var(--box-shadow) oklch(0% 0 0deg);
  }
}
@media (width < 38rem) {
  header nav #toggle-menu.noShadow {
    box-shadow: none !important;
    outline: none !important;
    border-top: none !important;
    border-bottom: none !important;
  }
  header nav #toggle-menu li {
    position: static;
    display: block;
    margin: 0;
    padding-inline: calc(var(--line-height) / 2);
    padding-block: calc(var(--line-height) / 4);
  }
  header nav #toggle-menu a {
    padding-inline: 0;
    padding-block: calc(var(--line-height) / 2);
  }
  header nav ol:has(#menu-check:checked) #toggle-menu {
    display: block;
  }
}

.responsive-card {
  border-bottom: solid 1px var(--color-decorations);
  padding-bottom: var(--line-height);
}

@media (width > 38rem) {
  .responsive-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: max-content auto;
    grid-template-areas: "headline image" "text image";
    column-gap: var(--column-gap);
    padding-bottom: var(--section-gap);
    padding-top: calc(var(--section-gap) - var(--row-gap));
  }
  .responsive-card h3 {
    grid-area: headline;
  }
  .responsive-card .card-text {
    grid-area: text;
  }
  .responsive-card .image-container {
    grid-area: image;
    align-self: start;
  }
}
.grid-row:not(:has(+ .grid-row .responsive-card)) .responsive-card {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

@media (min-width: 38rem) {
  .form-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--column-gap);
    row-gap: var(--line-height);
  }
  .form-block > .big {
    grid-column: 1/-1;
  }
  .form-block > * {
    margin-block: 0;
  }
}
@media (width < 38rem) {
  .form-block div.input, .form-block fieldset.input {
    margin-block: var(--gap-S);
  }
}
.form-block .input.website {
  display: none;
  /* ⚱️ */
}
.form-block fieldset {
  border: none;
  padding: 0;
}
.form-block fieldset legend {
  display: block;
  margin: 0;
  padding: 0;
  font-weight: var(--font-weight);
}
.form-block label:has(input[type=radio]), .form-block label:has(input[type=checkbox]) {
  display: flex;
  align-items: baseline;
  column-gap: 0.25em;
}
.form-block label:has(input[type=radio]) *, .form-block label:has(input[type=checkbox]) * {
  margin-block: 0 !important;
}
.form-block fieldset.switch {
  font-weight: var(--font-weight-regular);
}
.form-block fieldset.switch > div {
  display: flex;
  column-gap: 0.5em;
}
.form-block fieldset.switch label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  flex-basis: 100%;
  flex-shrink: 1;
  text-align: center;
  background: var(--color-page);
  outline: solid 1px var(--color-text);
  border-radius: var(--border-radius-S);
  --padding-block-transform: .05em;
  padding-block: calc(0.05em + var(--padding-block-transform)) calc(0.05em - var(--padding-block-transform));
  padding-inline: 0.25em;
  text-align: center;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-S);
  transition-property: outline-color, background, color;
  transition-duration: 250ms;
  transition-timing-function: ease-out;
}
.form-block fieldset.switch label:has(input:checked) {
  background: var(--color-ci-1-50);
  outline-color: var(--color-ci-1-50);
  color: var(--color-text-on-ci-1-50);
}
.form-block fieldset.switch label:hover {
  outline-color: var(--color-ci-1-60);
  color: var(--color-ci-1-60);
}
.form-block fieldset.switch label input {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.form-block fieldset.switch label:focus-visible, .form-block fieldset.switch label:has(input:focus-visible) {
  outline: solid 2px var(--color-ci-1-50);
  outline-offset: 2px;
}
.form-block fieldset.switch label:focus-visible:has(input:checked), .form-block fieldset.switch label:has(input:checked:focus-visible) {
  outline-color: var(--color-text);
  outline-offset: 2px;
}
.form-block > div, .form-block fieldset {
  display: grid;
  grid-template-columns: 1fr;
}
.form-block input, .form-block textarea, .form-block fieldset > div {
  border-radius: var(--border-radius);
  border: none;
  font-size: 1rem;
  font-family: var(--font-family);
  color: var(--color-text);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}
.form-block input:placeholder, .form-block textarea:placeholder, .form-block fieldset > div:placeholder {
  color: var(--color-text-input-placeholder);
}
.form-block textarea {
  min-height: 20vh;
}
.form-block input[type=email], .form-block input[type=file], .form-block input[type=number], .form-block input[type=password], .form-block input[type=submit], .form-block input[type=tel], .form-block input[type=text], .form-block input[type=time], .form-block input[type=url], .form-block textarea, .form-block fieldset > div {
  background: var(--color-input-surface);
  border: solid 0.375rem var(--color-input-surface);
}
.form-block input[type=submit] {
  background: var(--color-ci-1-50);
  border-color: var(--color-ci-1-50);
  color: var(--color-text-on-ci-1-50);
  font-weight: var(--font-weight-regular);
}
.form-block input[type=submit]:hover, .form-block input[type=submit]:focus {
  background: var(--color-ci-1-60);
  border-color: var(--color-ci-1-60);
}
.form-block:has(input:user-invalid) input[type=submit] {
  background: var(--color-page);
  border-color: var(--color-page);
  outline: solid 2px var(--color-error);
  color: var(--color-text-input-placeholder);
  font-weight: var(--font-weight-regular);
  cursor: not-allowed;
}
.form-block .input:has(input:user-invalid) label {
  color: var(--color-error);
}
.form-block input:user-invalid {
  outline: solid 2px var(--color-error);
}
.form-block input, .form-block textarea {
  outline-offset: -2px;
}
.form-block input:focus-visible, .form-block textarea:focus-visible {
  outline: solid 2px var(--color-ci-1-50);
}

.alert {
  border: solid var(--line-thickness) var(--color-ci-1-50);
  border-radius: var(--border-radius);
  background: var(--color-neutral-bg);
  padding: var(--gap);
  margin-block: var(--line-height);
}
.alert:first-child {
  margin-block-start: 0;
}
.alert.positive {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}
.alert.negative {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

html {
  interpolate-size: allow-keywords;
  scroll-behavior: smooth;
}

body {
  background: var(--color-page);
}

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