@charset "UTF-8";
/**
 * MAIN
 * Entry point. Import order matters:
 *
 * 0. Layers       — declares cascade layer priority (must be first CSS output)
 * 1. Reset         — strip browser defaults
 * 2. Defs          — design tokens (unlayered — :root custom properties)
 * 3. Tools         — mixins/functions (no CSS output)
 * 4. Vendor        — third-party plugin styles
 * 5. Base          — bare HTML element defaults
 * 6. Layout        — structural primitives (wrapper, row, column, grid)
 * 7. Primitives    — rendering atoms (defer-image, embed, contentblock)
 * 8. Components    — auto-imported from components/ directory
 * 9. Sections      — header, footer
 * 10. Utilities    — single-purpose overrides (highest layer priority)
 */
/**
 * LAYERS
 * Declares cascade layer order. Must be the first CSS output.
 * Layers listed first have LOWEST priority.
 * Layers listed last have HIGHEST priority.
 *
 * This means utilities will always beat components,
 * components will always beat layout, etc. —
 * regardless of selector specificity.
 */
@layer reset, vendor, base, layout, primitives, components, sections, utilities;
/**
 * RESET
 * Modern cross-browser reset. Strips inconsistencies,
 * preserves useful defaults, establishes sane baselines.
 */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  html {
    -webkit-text-size-adjust: none;
       -moz-text-size-adjust: none;
            text-size-adjust: none;
    scroll-behavior: smooth;
  }
  ol, ul, menu {
    list-style: none;
  }
  body {
    min-height: 100dvh;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }
  button {
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 0;
  }
  input, textarea, select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: none;
    border: none;
    border-radius: 0;
  }
  input[type=checkbox],
  input[type=radio] {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
    cursor: pointer;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
            appearance: none;
    margin: 0;
  }
  input[type=number] {
    -moz-appearance: textfield;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  textarea {
    resize: vertical;
  }
  blockquote, q {
    quotes: none;
  }
  summary {
    cursor: pointer;
  }
  summary::marker,
  summary::-webkit-details-marker {
    display: none;
  }
  dialog {
    padding: 0;
    border: none;
  }
}
/* Reduced motion — outside all layers so it overrides everything unconditionally */
@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;
  }
}
/**
 * DEFINITIONS
 * Single source of truth for all design tokens.
 * SCSS variables for compile-time values (breakpoints).
 * CSS custom properties for everything else.
 */
:root {
  --c-text: #000;
  --c-primary: #26bfb4;
  --font-body: sans-serif;
  --font-heading: sans-serif;
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  --sp-xl: 8rem;
  --wrap-width: 1380px;
  --content-narrow: 60rem;
  --ease-default: 250ms ease-in-out;
}

/**
 * TOOLS
 * Mixins and functions. Nothing here outputs CSS directly —
 * these are called by other files to generate styles.
 */
@keyframes _spin {
  to {
    transform: rotate(360deg);
  }
}
/**
 * VENDOR
 * Third-party plugin styles.
 * Loaded early so your component and utility styles can override.
 * Wrap all vendor imports/styles inside @layer vendor.
 */
/**
 * BASE
 * Default styles for bare HTML elements.
 * No classes — just element selectors.
 * These establish what unstyled content looks like
 * before any component styles are applied.
 */
@layer base {
  html {
    font-size: 62.5%;
  }
  body {
    font-family: var(--font-body);
    font-size: 1.6rem;
    color: var(--c-text);
    overflow-x: hidden;
    font-optical-sizing: auto;
  }
  *, *::before, *::after {
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    font-variant-numeric: lining-nums;
    font-feature-settings: "kern", "liga", "clig", "calt", "lnum", "salt";
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
  }
  a {
    color: var(--c-primary);
    transition: color var(--ease-default);
  }
  a:hover, a:focus {
    outline: none;
    border: 0;
  }
  strong, b {
    font-weight: 700;
  }
  em, i {
    font-style: italic;
  }
  sup {
    font-size: 75%;
    position: relative;
    top: -0.4em;
  }
  sub {
    font-size: 75%;
    position: relative;
    bottom: -0.4em;
  }
  big {
    font-size: 130%;
  }
  small {
    font-size: 80%;
  }
  svg {
    fill: currentColor;
  }
  input, textarea {
    font-family: var(--font-body);
    padding: var(--sp-xs) var(--sp-sm);
  }
}
/**
 * LAYOUT
 * Structural layout primitives. These map directly to
 * the markup generated by the ACF layout engine:
 * <section> → _wrapper → _column / _grid
 *
 * No visual styling here — just positioning, sizing, and flow.
 */
@layer layout {
  section {
    position: relative;
  }
  ._wrapper {
    --col-gap: 3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: var(--wrap-width);
    max-width: 100%;
    margin: 0 auto;
    padding: var(--sp-xl) 0;
    gap: var(--col-gap);
    justify-content: space-between;
    align-items: center;
    transition: padding var(--ease-default);
  }
  ._wrapper.-left {
    justify-content: flex-start;
  }
  ._wrapper.-center {
    justify-content: center;
  }
  ._wrapper.-right {
    justify-content: flex-end;
  }
  ._wrapper.-space {
    justify-content: space-between;
  }
  ._wrapper.-stretch {
    justify-content: stretch;
  }
  ._wrapper.-top {
    align-items: flex-start;
  }
  ._wrapper.-middle {
    align-items: center;
  }
  ._wrapper.-bottom {
    align-items: flex-end;
  }
  ._wrapper.-stretch-v {
    align-items: stretch;
  }
  ._wrapper.-nopadding {
    padding: 0;
  }
  @media screen and (max-width: 1380px) {
    ._wrapper {
      padding-left: var(--sp-md);
      padding-right: var(--sp-md);
    }
  }
  ._row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  ._row.-left {
    justify-content: flex-start;
  }
  ._row.-center {
    justify-content: center;
  }
  ._row.-right {
    justify-content: flex-end;
  }
  ._row.-space {
    justify-content: space-between;
  }
  ._row.-stretch {
    justify-content: stretch;
  }
  ._row.-top {
    align-items: flex-start;
  }
  ._row.-middle {
    align-items: center;
  }
  ._row.-bottom {
    align-items: flex-end;
  }
  ._row.-stretch-v {
    align-items: stretch;
  }
  ._column {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    position: relative;
    gap: var(--col-gap);
  }
  ._column.-w-5 {
    width: calc(5% - var(--col-gap));
  }
  @media screen and (max-width: 540px) {
    ._column.-w-5 {
      width: 100%;
    }
  }
  ._column.-w-10 {
    width: calc(10% - var(--col-gap));
  }
  @media screen and (max-width: 540px) {
    ._column.-w-10 {
      width: 100%;
    }
  }
  ._column.-w-20 {
    width: calc(20% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-20 {
      width: 100%;
    }
  }
  ._column.-w-25 {
    width: calc(25% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-25 {
      width: 100%;
    }
  }
  ._column.-w-30 {
    width: calc(30% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-30 {
      width: 100%;
    }
  }
  ._column.-w-33 {
    width: calc(33.333333% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-33 {
      width: 100%;
    }
  }
  ._column.-w-40 {
    width: calc(40% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-40 {
      width: 100%;
    }
  }
  ._column.-w-45 {
    width: calc(45% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-45 {
      width: 100%;
    }
  }
  ._column.-w-50 {
    width: calc(50% - var(--col-gap));
  }
  @media screen and (max-width: 1024px) {
    ._column.-w-50 {
      width: 100%;
    }
  }
  ._column.-w-55 {
    width: calc(55% - var(--col-gap));
  }
  @media screen and (max-width: 1024px) {
    ._column.-w-55 {
      width: 100%;
    }
  }
  ._column.-w-60 {
    width: calc(60% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-60 {
      width: 100%;
    }
  }
  ._column.-w-65 {
    width: calc(65% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-65 {
      width: 100%;
    }
  }
  ._column.-w-66 {
    width: calc(66.666666% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-66 {
      width: 100%;
    }
  }
  ._column.-w-70 {
    width: calc(70% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-70 {
      width: 100%;
    }
  }
  ._column.-w-75 {
    width: calc(75% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-75 {
      width: 100%;
    }
  }
  ._column.-w-80 {
    width: calc(80% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-80 {
      width: 100%;
    }
  }
  ._column.-w-85 {
    width: calc(85% - var(--col-gap));
  }
  @media screen and (max-width: 840px) {
    ._column.-w-85 {
      width: 100%;
    }
  }
  ._column.-w-90 {
    width: calc(90% - var(--col-gap));
  }
  ._column.-w-95 {
    width: calc(95% - var(--col-gap));
  }
  ._column.-w-100 {
    width: 100%;
  }
  ._grid {
    --grid-gap: var(--sp-md);
    display: grid;
    gap: var(--grid-gap);
  }
  ._grid.-gap-no {
    --grid-gap: 0;
  }
  ._grid.-gap-sm {
    --grid-gap: var(--sp-sm);
  }
  ._grid.-gap-md {
    --grid-gap: var(--sp-md);
  }
  ._grid.-gap-lg {
    --grid-gap: var(--sp-lg);
  }
  ._grid.-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  ._grid.-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  ._grid.-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  ._grid.-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  ._grid.-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  @media screen and (max-width: 840px) {
    ._grid.-col-5, ._grid.-col-6 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media screen and (max-width: 540px) {
    ._grid.-col-5, ._grid.-col-6 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 840px) {
    ._grid.-col-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media screen and (max-width: 540px) {
    ._grid.-col-4 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 540px) {
    ._grid.-col-3 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 540px) {
    ._grid.-col-2 {
      grid-template-columns: 1fr;
    }
  }
  ._grid.-center-orphans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  ._grid.-center-orphans.-col-2 > * {
    width: calc(50% - var(--grid-gap));
  }
  ._grid.-center-orphans.-col-3 > * {
    width: calc(33.333% - var(--grid-gap));
  }
  ._grid.-center-orphans.-col-4 > * {
    width: calc(25% - var(--grid-gap));
  }
  ._grid.-center-orphans.-col-5 > * {
    width: calc(20% - var(--grid-gap));
  }
  ._grid.-center-orphans.-col-6 > * {
    width: calc(16.666% - var(--grid-gap));
  }
  @media screen and (max-width: 840px) {
    ._grid.-center-orphans.-col-5 > *, ._grid.-center-orphans.-col-6 > * {
      width: calc(33.333% - var(--grid-gap));
    }
  }
  @media screen and (max-width: 540px) {
    ._grid.-center-orphans.-col-5 > *, ._grid.-center-orphans.-col-6 > * {
      width: 100%;
    }
  }
  @media screen and (max-width: 840px) {
    ._grid.-center-orphans.-col-4 > * {
      width: calc(50% - var(--grid-gap));
    }
  }
  @media screen and (max-width: 540px) {
    ._grid.-center-orphans.-col-4 > * {
      width: 100%;
    }
  }
  @media screen and (max-width: 540px) {
    ._grid.-center-orphans.-col-3 > * {
      width: 100%;
    }
  }
  @media screen and (max-width: 540px) {
    ._grid.-center-orphans.-col-2 > * {
      width: 100%;
    }
  }
}
/**
 * PRIMITIVES
 * Low-level rendering atoms. Too structural to be utilities,
 * too simple to be components. These are building blocks
 * that components use — they don't compose other things.
 */
@layer primitives {
  defer-image {
    display: block;
    width: 100%;
    height: auto;
  }
  defer-image img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity var(--ease-default);
  }
  defer-image[type=background] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--ease-default);
    transition-delay: 350ms;
  }
  defer-image[type=background][loaded] {
    opacity: 1;
  }
  defer-image[type=background] picture, defer-image[type=background] img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  defer-image[loading] {
    background-color: rgba(0, 0, 0, 0.05);
  }
  ._embed {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  ._embed iframe,
  ._embed object,
  ._embed embed,
  ._embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  ._embed.-vertical {
    aspect-ratio: 9/16;
  }
  ._embed.-square {
    aspect-ratio: 1/1;
  }
  ._embed.-cinematic {
    aspect-ratio: 21/9;
  }
  ._embed.-classic {
    aspect-ratio: 4/3;
  }
  ._contentblock {
    display: block;
    width: 100%;
    line-height: 1.5;
  }
  ._contentblock.-narrow {
    max-width: var(--content-narrow);
  }
  ._contentblock p:not(:last-child) {
    margin-bottom: var(--sp-sm);
  }
  ._contentblock strong, ._contentblock b {
    font-weight: 800;
  }
  ._contentblock em, ._contentblock i {
    font-style: italic;
  }
  ._contentblock ul, ._contentblock ol {
    margin-bottom: var(--sp-sm);
    padding-left: var(--sp-md);
  }
  ._contentblock ul {
    list-style-type: disc;
  }
  ._contentblock ol {
    list-style-type: decimal;
  }
  ._contentblock li:not(:last-child) {
    margin-bottom: var(--sp-xs);
  }
  ._contentblock h1, ._contentblock h2, ._contentblock h3, ._contentblock h4, ._contentblock h5, ._contentblock h6 {
    margin-bottom: var(--sp-sm);
  }
  ._contentblock h1:not(:first-child), ._contentblock h2:not(:first-child), ._contentblock h3:not(:first-child), ._contentblock h4:not(:first-child), ._contentblock h5:not(:first-child), ._contentblock h6:not(:first-child) {
    margin-top: var(--sp-lg);
  }
  ._contentblock img {
    margin: var(--sp-md) 0;
  }
  ._contentblock a {
    text-decoration: underline;
  }
  ._contentblock a:hover, ._contentblock a:focus {
    text-decoration: none;
  }
  ._contentblock blockquote {
    padding-left: var(--sp-md);
    border-left: 3px solid var(--c-primary);
    margin: var(--sp-md) 0;
    font-style: italic;
  }
}
/**
 * COMPONENT: Burger
 * Description: Hamburger toggle button for mobile nav.
 * Animates between hamburger and X on -active modifier.
 *
 * Usage:
 *   <button class="_burger" aria-label="Toggle menu">
 *     <span class="_srOnly">Menu</span>
 *   </button>
 *
 *   Active state (toggled via JS):
 *   <button class="_burger -active">
 */
@layer components {
  ._burger {
    display: none;
    width: 19px;
    aspect-ratio: 1/0.8;
    position: relative;
    cursor: pointer;
    font-size: 0;
    margin-left: var(--sp-md);
  }
  @media screen and (max-width: 1024px) {
    ._burger {
      display: flex;
    }
  }
  @media screen and (max-width: 540px) {
    ._burger {
      margin-left: 0;
    }
  }
  ._burger::before, ._burger::after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    left: 50%;
    background: currentColor;
    transition: transform var(--ease-default);
  }
  ._burger::before {
    top: 0;
    transform: translateX(-50%);
  }
  ._burger::after {
    bottom: 0;
    transform: translateX(-50%);
  }
  ._burger.-active::before {
    transform: translateX(-50%) translateY(260%) rotate(45deg);
  }
  ._burger.-active::after {
    transform: translateX(-50%) translateY(-260%) rotate(-45deg);
  }
}
/**
 * UTILITIES
 * Single-purpose classes prefixed with _u-.
 * These are overrides and helpers, not components.
 * Applied directly in HTML for quick, reusable tweaks.
 *
 * No !important needed — the utilities @layer has the
 * highest priority in the cascade, so these always win
 * over component and layout styles regardless of specificity.
 */
@layer utilities {
  ._u-block {
    display: block;
  }
  ._u-flex {
    display: flex;
  }
  ._u-inline {
    display: inline;
  }
  ._u-inlineBlock {
    display: inline-block;
  }
  ._u-hidden {
    display: none;
  }
  ._u-visHidden {
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  ._u-srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  ._u-textLeft {
    text-align: left;
  }
  ._u-textCenter {
    text-align: center;
  }
  ._u-textRight {
    text-align: right;
  }
  ._u-pad-no {
    padding: 0;
  }
  ._u-padT-no {
    padding-top: 0;
  }
  ._u-padR-no {
    padding-right: 0;
  }
  ._u-padB-no {
    padding-bottom: 0;
  }
  ._u-padL-no {
    padding-left: 0;
  }
  ._u-padX-no {
    padding-left: 0;
    padding-right: 0;
  }
  ._u-padY-no {
    padding-top: 0;
    padding-bottom: 0;
  }
  ._u-mar-no {
    margin: 0;
  }
  ._u-marT-no {
    margin-top: 0;
  }
  ._u-marR-no {
    margin-right: 0;
  }
  ._u-marB-no {
    margin-bottom: 0;
  }
  ._u-marL-no {
    margin-left: 0;
  }
  ._u-marX-no {
    margin-left: 0;
    margin-right: 0;
  }
  ._u-marY-no {
    margin-top: 0;
    margin-bottom: 0;
  }
  ._u-pad-xs {
    padding: var(--sp-xs);
  }
  ._u-padT-xs {
    padding-top: var(--sp-xs);
  }
  ._u-padR-xs {
    padding-right: var(--sp-xs);
  }
  ._u-padB-xs {
    padding-bottom: var(--sp-xs);
  }
  ._u-padL-xs {
    padding-left: var(--sp-xs);
  }
  ._u-padX-xs {
    padding-left: var(--sp-xs);
    padding-right: var(--sp-xs);
  }
  ._u-padY-xs {
    padding-top: var(--sp-xs);
    padding-bottom: var(--sp-xs);
  }
  ._u-mar-xs {
    margin: var(--sp-xs);
  }
  ._u-marT-xs {
    margin-top: var(--sp-xs);
  }
  ._u-marR-xs {
    margin-right: var(--sp-xs);
  }
  ._u-marB-xs {
    margin-bottom: var(--sp-xs);
  }
  ._u-marL-xs {
    margin-left: var(--sp-xs);
  }
  ._u-marX-xs {
    margin-left: var(--sp-xs);
    margin-right: var(--sp-xs);
  }
  ._u-marY-xs {
    margin-top: var(--sp-xs);
    margin-bottom: var(--sp-xs);
  }
  ._u-pad-sm {
    padding: var(--sp-sm);
  }
  ._u-padT-sm {
    padding-top: var(--sp-sm);
  }
  ._u-padR-sm {
    padding-right: var(--sp-sm);
  }
  ._u-padB-sm {
    padding-bottom: var(--sp-sm);
  }
  ._u-padL-sm {
    padding-left: var(--sp-sm);
  }
  ._u-padX-sm {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
  }
  ._u-padY-sm {
    padding-top: var(--sp-sm);
    padding-bottom: var(--sp-sm);
  }
  ._u-mar-sm {
    margin: var(--sp-sm);
  }
  ._u-marT-sm {
    margin-top: var(--sp-sm);
  }
  ._u-marR-sm {
    margin-right: var(--sp-sm);
  }
  ._u-marB-sm {
    margin-bottom: var(--sp-sm);
  }
  ._u-marL-sm {
    margin-left: var(--sp-sm);
  }
  ._u-marX-sm {
    margin-left: var(--sp-sm);
    margin-right: var(--sp-sm);
  }
  ._u-marY-sm {
    margin-top: var(--sp-sm);
    margin-bottom: var(--sp-sm);
  }
  ._u-pad-md {
    padding: var(--sp-md);
  }
  ._u-padT-md {
    padding-top: var(--sp-md);
  }
  ._u-padR-md {
    padding-right: var(--sp-md);
  }
  ._u-padB-md {
    padding-bottom: var(--sp-md);
  }
  ._u-padL-md {
    padding-left: var(--sp-md);
  }
  ._u-padX-md {
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
  }
  ._u-padY-md {
    padding-top: var(--sp-md);
    padding-bottom: var(--sp-md);
  }
  ._u-mar-md {
    margin: var(--sp-md);
  }
  ._u-marT-md {
    margin-top: var(--sp-md);
  }
  ._u-marR-md {
    margin-right: var(--sp-md);
  }
  ._u-marB-md {
    margin-bottom: var(--sp-md);
  }
  ._u-marL-md {
    margin-left: var(--sp-md);
  }
  ._u-marX-md {
    margin-left: var(--sp-md);
    margin-right: var(--sp-md);
  }
  ._u-marY-md {
    margin-top: var(--sp-md);
    margin-bottom: var(--sp-md);
  }
  ._u-pad-lg {
    padding: var(--sp-lg);
  }
  ._u-padT-lg {
    padding-top: var(--sp-lg);
  }
  ._u-padR-lg {
    padding-right: var(--sp-lg);
  }
  ._u-padB-lg {
    padding-bottom: var(--sp-lg);
  }
  ._u-padL-lg {
    padding-left: var(--sp-lg);
  }
  ._u-padX-lg {
    padding-left: var(--sp-lg);
    padding-right: var(--sp-lg);
  }
  ._u-padY-lg {
    padding-top: var(--sp-lg);
    padding-bottom: var(--sp-lg);
  }
  ._u-mar-lg {
    margin: var(--sp-lg);
  }
  ._u-marT-lg {
    margin-top: var(--sp-lg);
  }
  ._u-marR-lg {
    margin-right: var(--sp-lg);
  }
  ._u-marB-lg {
    margin-bottom: var(--sp-lg);
  }
  ._u-marL-lg {
    margin-left: var(--sp-lg);
  }
  ._u-marX-lg {
    margin-left: var(--sp-lg);
    margin-right: var(--sp-lg);
  }
  ._u-marY-lg {
    margin-top: var(--sp-lg);
    margin-bottom: var(--sp-lg);
  }
  ._u-pad-xl {
    padding: var(--sp-xl);
  }
  ._u-padT-xl {
    padding-top: var(--sp-xl);
  }
  ._u-padR-xl {
    padding-right: var(--sp-xl);
  }
  ._u-padB-xl {
    padding-bottom: var(--sp-xl);
  }
  ._u-padL-xl {
    padding-left: var(--sp-xl);
  }
  ._u-padX-xl {
    padding-left: var(--sp-xl);
    padding-right: var(--sp-xl);
  }
  ._u-padY-xl {
    padding-top: var(--sp-xl);
    padding-bottom: var(--sp-xl);
  }
  ._u-mar-xl {
    margin: var(--sp-xl);
  }
  ._u-marT-xl {
    margin-top: var(--sp-xl);
  }
  ._u-marR-xl {
    margin-right: var(--sp-xl);
  }
  ._u-marB-xl {
    margin-bottom: var(--sp-xl);
  }
  ._u-marL-xl {
    margin-left: var(--sp-xl);
  }
  ._u-marX-xl {
    margin-left: var(--sp-xl);
    margin-right: var(--sp-xl);
  }
  ._u-marY-xl {
    margin-top: var(--sp-xl);
    margin-bottom: var(--sp-xl);
  }
  ._u-fullWidth {
    width: 100%;
  }
  ._u-autoWidth {
    width: auto;
  }
  ._u-z-1 {
    position: relative;
    z-index: 1;
  }
  ._u-z-2 {
    position: relative;
    z-index: 2;
  }
  ._u-z-3 {
    position: relative;
    z-index: 3;
  }
  ._u-z-4 {
    position: relative;
    z-index: 4;
  }
  ._u-z-5 {
    position: relative;
    z-index: 5;
  }
  ._u-z-6 {
    position: relative;
    z-index: 6;
  }
  ._u-z-7 {
    position: relative;
    z-index: 7;
  }
  ._u-z-8 {
    position: relative;
    z-index: 8;
  }
  ._u-z-9 {
    position: relative;
    z-index: 9;
  }
  ._u-z-10 {
    position: relative;
    z-index: 10;
  }
  ._u-overflowHidden {
    overflow: hidden;
  }
  ._u-overflowAuto {
    overflow: auto;
  }
  ._u-spinner {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border: 4px solid rgba(0, 0, 0, 0.15);
    border-left-color: var(--c-primary);
    border-radius: 50%;
    animation: _spin 1s linear infinite;
  }
  @media screen and (max-width: 540px) {
    ._u-hideAt-sm {
      display: none;
    }
  }
  @media screen and (max-width: 840px) {
    ._u-hideAt-md {
      display: none;
    }
  }
  @media screen and (max-width: 1024px) {
    ._u-hideAt-lg {
      display: none;
    }
  }
  ._u-showAt-sm {
    display: none;
  }
  @media screen and (max-width: 540px) {
    ._u-showAt-sm {
      display: block;
    }
  }
  ._u-showAt-md {
    display: none;
  }
  @media screen and (max-width: 840px) {
    ._u-showAt-md {
      display: block;
    }
  }
  ._u-showAt-lg {
    display: none;
  }
  @media screen and (max-width: 1024px) {
    ._u-showAt-lg {
      display: block;
    }
  }
}