/* ----------------------------------------------------------------------------
DO NOT EDIT DIRECTLY

This is nativestartCSS by Sanico Software.

Please override global values in a file called base.css, refer to the docs.

Version: v1.0.1

All code and all related items are the intellectual property
of Diribulous PTY LTD - Sanico Software

---------------------------------------------------------------------------- */
@layer reset, theme, base, components;

/* ----------------------------------------------------------------------------
Recommended Media Queries
break-sm-x1: 40rem (640px) - @media (width >= 40rem) { ... }
break-md: 48rem (768px) - @media (width >= 48rem) { ... }
break-lg-x1: 64rem (1024px) - @media (width >= 64rem) { ... }
break-lg-x2: 80rem (1280px) - @media (width >= 80rem) { ... }
---------------------------------------------------------------------------- */

@layer theme {
  :root {
    /* --------------------------------------------------
    Fonts and Typography
    ----------------------------------------------------- */
    /* font family */
    --default-font-header:
      system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto",
      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
      "Helvetica Neue", arial, sans-serif;
    --default-font-body:
      system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto",
      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
      "Helvetica Neue", arial, sans-serif;

    --default-font-size: clamp(1rem, calc(15px + 0.390625vw), 1.8rem);
    --font-size-sm-x3: 70%;
    --font-size-sm-x2: 80%;
    --font-size-sm-x1: 90%;
    --font-size-md: 100%;
    --font-size-lg-x1: 115%;
    --font-size-lg-x2: 130%;
    --font-size-lg-x3: 145%;
    --font-size-lg-x4: 160%;
    --font-size-lg-x5: 175%;

    --default-font-weight: var(--font-weight-normal);
    --font-weight-lighter: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-semi-bold: 500;
    --font-weight-bold: 700;
    --font-weight-bolder: 800;
    --font-weight-boldest: 900;
    --font-weight-full: 1000;

    --default-line-height: var(--line-height-normal);
    --line-height-tightest: 1.1;
    --line-height-tighter: 1.25;
    --line-height-tight: 1.375;
    --line-height-normal: 1.5;
    --line-height-loose: 1.65;
    --line-height-looser: 1.7;
    --line-height-loosest: 2;

    --letter-spacing-tightest: -0.1em;
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;

    --underline-offset-0: 0px;
    --underline-offset-1: 1px;
    --underline-offset-2: 2px;
    --underline-offset-3: 4px;
    --underline-offset-4: 8px;

    /* --------------------------------------------------
    Colors
    ----------------------------------------------------- */
    /* shades with lch values */
    --shade-0: 97% calc(c / 16) h;
    --shade-1: 94% calc(c / 4) h;
    --shade-2: 88% c h;
    --shade-3: 70% c h;
    --shade-4: 60% c h;
    --shade-5: 50% c h;
    --shade-6: 40% c h;
    --shade-7: 30% c h;
    --shade-8: 22% calc(c / 1.5) h;
    --shade-9: 18% calc(c / 2) h;

    /* source colors */
    --default-color-neutral: oklch(80% 0.01 300deg);
    --default-color-primary: oklch(0.5754 0.0574 244.63);
    --default-color-secondary: oklch(0.7986 0.0581 92.91);

    /* common colors */
    --color-white: oklch(1 0 0);
    --color-black: oklch(0 0 0);

    --color-neutral-0: oklch(from var(--default-color-neutral) var(--shade-0));
    --color-neutral-1: oklch(from var(--default-color-neutral) var(--shade-1));
    --color-neutral-2: oklch(from var(--default-color-neutral) var(--shade-2));
    --color-neutral-3: oklch(from var(--default-color-neutral) var(--shade-3));
    --color-neutral-4: oklch(from var(--default-color-neutral) var(--shade-4));
    --color-neutral-5: oklch(from var(--default-color-neutral) var(--shade-5));
    --color-neutral-6: oklch(from var(--default-color-neutral) var(--shade-6));
    --color-neutral-7: oklch(from var(--default-color-neutral) var(--shade-7));
    --color-neutral-8: oklch(from var(--default-color-neutral) var(--shade-8));
    --color-neutral-9: oklch(from var(--default-color-neutral) var(--shade-9));

    --color-primary-0: oklch(from var(--default-color-primary) var(--shade-0));
    --color-primary-1: oklch(from var(--default-color-primary) var(--shade-1));
    --color-primary-2: oklch(from var(--default-color-primary) var(--shade-2));
    --color-primary-3: oklch(from var(--default-color-primary) var(--shade-3));
    --color-primary-4: oklch(from var(--default-color-primary) var(--shade-4));
    --color-primary-5: oklch(from var(--default-color-primary) var(--shade-5));
    --color-primary-6: oklch(from var(--default-color-primary) var(--shade-6));
    --color-primary-7: oklch(from var(--default-color-primary) var(--shade-7));
    --color-primary-8: oklch(from var(--default-color-primary) var(--shade-8));
    --color-primary-9: oklch(from var(--default-color-primary) var(--shade-9));

    --color-secondary-0: oklch(from var(--default-color-secondary) var(--shade-0));
    --color-secondary-1: oklch(from var(--default-color-secondary) var(--shade-1));
    --color-secondary-2: oklch(from var(--default-color-secondary) var(--shade-2));
    --color-secondary-3: oklch(from var(--default-color-secondary) var(--shade-3));
    --color-secondary-4: oklch(from var(--default-color-secondary) var(--shade-4));
    --color-secondary-5: oklch(from var(--default-color-secondary) var(--shade-5));
    --color-secondary-6: oklch(from var(--default-color-secondary) var(--shade-6));
    --color-secondary-7: oklch(from var(--default-color-secondary) var(--shade-7));
    --color-secondary-8: oklch(from var(--default-color-secondary) var(--shade-8));
    --color-secondary-9: oklch(from var(--default-color-secondary) var(--shade-9));

    /* default colors used in website */
    --default-color-text: var(--color-black);
    --default-color-bg: var(--color-white);
    --default-color-bg-dark: var(--color-neutral-8);
    --default-lch-shadow: 0.2679 0.003 264.51;

  /* ---------------------------------------------------------------------------
  borders
  --------------------------------------------------------------------------- */
    --border-radius-1: 2px;
    --border-radius-2: 5px;
    --border-radius-3: 1rem;
    --border-radius-4: 2rem;
    --border-radius-5: 4rem;
    --border-radius-round: 9999px;

    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-3: 5px;
    --border-width-4: 10px;
    --border-width-5: 25px;

    /* --------------------------------------------------
    Shadows
    ----------------------------------------------------- */
    --default-shadow-strength: 1%;
    --default-shadow-strength-3: calc(var(--default-shadow-strength) + 2%);
    --default-shadow-strength-4: calc(var(--default-shadow-strength) + 3%);
    --default-shadow-strength-5: calc(var(--default-shadow-strength) + 4%);
    --default-shadow-strength-6: calc(var(--default-shadow-strength) + 5%);
    --default-shadow-strength-7: calc(var(--default-shadow-strength) + 6%);
    --default-shadow-strength-8: calc(var(--default-shadow-strength) + 7%);
    --default-shadow-strength-10: calc(var(--default-shadow-strength) + 9%);

    --shadow-1: 0 1px 2px -1px
      oklch(var(--default-lch-shadow) / var(--default-shadow-strength-10));
    --shadow-2:
      0 3px 5px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 7px 14px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6));
    --shadow-3:
      0 -1px 3px 0
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 1px 2px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 2px 5px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)),
      0 4px 12px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)),
      0 12px 15px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8));
    --shadow-4:
      0 -2px 5px 0
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 1px 1px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 2px 2px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 5px 5px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)),
      0 9px 9px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)),
      0 16px 16px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-7));
    --shadow-5:
      0 -1px 2px 0
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 2px 1px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 5px 5px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 10px 10px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)),
      0 20px 20px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)),
      0 40px 40px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8));
    --shadow-6:
      0 -1px 2px 0
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 3px 2px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 7px 5px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 12px 10px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)),
      0 22px 18px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)),
      0 41px 33px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-7)),
      0 100px 80px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8));

    /* --------------------------------------------------
    Lengths and Containers
    ----------------------------------------------------- */
    --length-0: 0rem;
    --length-0-5: 0.125rem;
    --length-1: 0.25rem;
    --length-1-5: 0.375rem;
    --length-2: 0.5rem;
    --length-2-5: 0.625rem;
    --length-3: 0.75rem;
    --length-3-5: 0.875rem;
    --length-4: 1rem;
    --length-5: 1.25rem;
    --length-6: 1.5rem;
    --length-7: 1.75rem;
    --length-8: 2rem;
    --length-9: 2.25rem;
    --length-10: 2.5rem;
    --length-11: 2.75rem;
    --length-12: 3rem;
    --length-14: 3.5rem;
    --length-16: 4rem;
    --length-20: 5rem;
    --length-24: 6rem;
    --length-28: 7rem;
    --length-32: 8rem;
    --length-36: 9rem;
    --length-40: 10rem;
    --length-44: 11rem;
    --length-48: 12rem;
    --length-52: 13rem;
    --length-56: 14rem;
    --length-60: 15rem;
    --length-64: 16rem;
    --length-72: 18rem;
    --length-80: 20rem;
    --length-96: 24rem;

    --max-reach-sm-x4: 16rem;
    --max-reach-sm-x3: 18rem;
    --max-reach-sm-x2: 20rem;
    --max-reach-sm-x1: 24rem;
    --max-reach-md: 28rem;
    --max-reach-lg-x1: 32rem;
    --max-reach-lg-x2: 36rem;
    --max-reach-lg-x3: 42rem;
    --max-reach-lg-x4: 48rem;
    --max-reach-lg-x5: 56rem;
    --max-reach-lg-x6: 64rem;
    --max-reach-lg-x7: 72rem;
    --max-reach-lg-x8: 80rem;

    /* --------------------------------------------------
    General
    ----------------------------------------------------- */
    --space-sm-x4: 0.2em;
    --space-sm-x3: 0.4em;
    --space-sm-x2: 0.6em;
    --space-sm-x1: 0.8em;
    --space-md: 1em;
    --space-lg-x1: 1.5em;
    --space-lg-x2: 2em;
    --space-lg-x3: 3em;
    --space-lg-x4: 4em;
    --space-lg-x5: 5em;

    --z-0: 0;
    --z-1: 1;
    --z-2: 2;
    --z-3: 3;
    --z-4: 4;
    --z-5: 5;
    --z-important: 2147483647;

    /* --------------------------------------------------
    Animations
    ----------------------------------------------------- */
    --ease-1: cubic-bezier(.25, 0, .5, 1);
    --ease-2: cubic-bezier(.25, 0, .4, 1);
    --ease-3: cubic-bezier(.25, 0, .3, 1);
    --ease-4: cubic-bezier(.25, 0, .2, 1);
    --ease-5: cubic-bezier(.25, 0, .1, 1);
    --ease-in-1: cubic-bezier(.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(.50, 0, 1, 1);
    --ease-in-3: cubic-bezier(.70, 0, 1, 1);
    --ease-in-4: cubic-bezier(.90, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, .75, 1);
    --ease-out-2: cubic-bezier(0, 0, .50, 1);
    --ease-out-3: cubic-bezier(0, 0, .3, 1);
    --ease-out-4: cubic-bezier(0, 0, .1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
    --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
    --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
    --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
    --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
    --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
    --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
    --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
    --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
    --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);

    --animation-fade-in: fade-in .5s var(--ease-3);
    --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
    --animation-fade-out: fade-out .5s var(--ease-3);
    --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
    --animation-scale-up: scale-up .5s var(--ease-3);
    --animation-scale-down: scale-down .5s var(--ease-3);
    --animation-slide-out-up: slide-out-up .5s var(--ease-3);
    --animation-slide-out-down: slide-out-down .5s var(--ease-3);
    --animation-slide-out-right: slide-out-right .5s var(--ease-3);
    --animation-slide-out-left: slide-out-left .5s var(--ease-3);
    --animation-slide-in-up: slide-in-up .5s var(--ease-3);
    --animation-slide-in-down: slide-in-down .5s var(--ease-3);
    --animation-slide-in-right: slide-in-right .5s var(--ease-3);
    --animation-slide-in-left: slide-in-left .5s var(--ease-3);
    --animation-shake-x: shake-x .75s var(--ease-out-5);
    --animation-shake-y: shake-y .75s var(--ease-out-5);
    --animation-shake-z: shake-z 1s var(--ease-in-out-3);
    --animation-spin: spin 2s linear infinite;
    --animation-ping: ping 5s var(--ease-out-3) infinite;
    --animation-blink: blink 1s var(--ease-out-3) infinite;
    --animation-float: float 3s var(--ease-in-out-3) infinite;
    --animation-bounce: bounce 2s var(--ease-elastic-in-out-2) infinite;
    --animation-pulse: pulse 2s var(--ease-out-3) infinite;
  }

  @media (min-width: 48em) {
    :root {
      --font-size-lg-x2: 175%;
      --font-size-lg-x3: 200%;
      --font-size-lg-x4: 225%;
      --font-size-lg-x5: 250%;
    }
  }

  @keyframes fade-in {
    to { opacity: 1 }
  }

  @keyframes fade-in-bloom {
    0% { opacity: 0; filter: brightness(1) blur(20px) }
    10% { opacity: 1; filter: brightness(2) blur(10px) }
    100% { opacity: 1; filter: brightness(1) blur(0) }
  }
  @keyframes fade-out {
    to { opacity: 0 }
  }

  @keyframes fade-out-bloom {
    100% { opacity: 0; filter: brightness(1) blur(20px) }
    10% { opacity: 1; filter: brightness(2) blur(10px) }
      0% { opacity: 1; filter: brightness(1) blur(0) }
    }

  @keyframes scale-up {
    to { transform: scale(1.25) }
  }
  @keyframes scale-down {
    to { transform: scale(.75) }
  }
  @keyframes slide-out-up {
    to { transform: translateY(-100%) }
  }
  @keyframes slide-out-down {
    to { transform: translateY(100%) }
  }
  @keyframes slide-out-right {
    to { transform: translateX(100%) }
  }
  @keyframes slide-out-left {
    to { transform: translateX(-100%) }
  }
  @keyframes slide-in-up {
    from { transform: translateY(100%) }
  }
  @keyframes slide-in-down {
    from { transform: translateY(-100%) }
  }
  @keyframes slide-in-right {
    from { transform: translateX(-100%) }
  }
  @keyframes slide-in-left {
    from { transform: translateX(100%) }
  }
  @keyframes shake-x {
    0%, 100% { transform: translateX(0%) }
    20% { transform: translateX(-5%) }
    40% { transform: translateX(5%) }
    60% { transform: translateX(-5%) }
    80% { transform: translateX(5%) }
  }
  @keyframes shake-y {
    0%, 100% { transform: translateY(0%) }
    20% { transform: translateY(-5%) }
    40% { transform: translateY(5%) }
    60% { transform: translateY(-5%) }
    80% { transform: translateY(5%) }
  }
  @keyframes shake-z {
    0%, 100% { transform: rotate(0deg) }
    20% { transform: rotate(-2deg) }
    40% { transform: rotate(2deg) }
    60% { transform: rotate(-2deg) }
    80% { transform: rotate(2deg) }
  }
  @keyframes spin {
    to { transform: rotate(1turn) }
  }
  @keyframes ping {
    90%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }
  @keyframes blink {
    0%, 100% {
      opacity: 1
    }
    50% {
      opacity: .5
    }
  }
  @keyframes float {
    50% { transform: translateY(-25%) }
  }
  @keyframes bounce {
    25% { transform: translateY(-20%) }
    40% { transform: translateY(-3%) }
    0%, 60%, 100% { transform: translateY(0) }
  }
  @keyframes pulse {
    50% { transform: scale(.9,.9) }
  }
}


@layer base {
  html {
    font-size: 16px;
  }

  body {
    background-color: var(--default-color-bg);
    color: var(--default-color-text);
    display: flex;
    flex-direction: column;
    font-style: normal;
    font-family: var(--default-font-body);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--default-font-header);
  }
}

@layer reset {
  /* 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;
  }

  html, body, div, span, applet, button, input, select, textarea, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    min-width: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
  }

  article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    display: block;
  }

  body {
    line-height: 1;
  }

  ol, ul, menu {
    list-style: none;
  }

  blockquote, q {
    quotes: none;
  }

  blockquote:before, blockquote:after, q:before, q:after {
    content: none;
  }

  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role="list"], ol[role="list"] {
    list-style: none;
  }

  img, svg {
    display: block;
  }

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

  video {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  /* Balance text wrapping on headings */
  h1, h2, h3, h4 {
    text-wrap: balance;
  }

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

  /* Reset link */
  a {
    color: inherit;
    text-decoration: inherit;
  }

  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }
}
@layer base {
  :root {
    --default-font-header: var(--sanico-font-header);
    --default-font-body: var(--sanico-font-body);
    /* reduce clamp maximum */
    --default-font-size: clamp(1rem, calc(15px + 0.390625vw), 1.4rem);

    --default-color-primary: #27213b;
    --default-color-secondary: #9f2e5a;
    --default-color-bg: var(--color-primary-0);

    --default-transition: all 200ms ease-in-out;
    --default-hover-translate: 0 calc(-1 * var(--space-sm-x4));
    --default-hover-scale: 103%;
    --default-active-translate: 0 0;
    --default-active-scale: 97%;
  }

  /* Taken from Tailwind CSS */
  .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;
  }

  /* Theme specific edit */
  #nav-header {
    display: contents;
  }

  @keyframes card-slide-in-mobile {
    0% {
      opacity: 0.5;
      translate: 0 5%;
    }

    15% {
      opacity: 1;
    }

    20% {
      translate: 0 0%;
    }
  }
  @keyframes card-slide-in-desktop {
    0% {
      opacity: 0.5;
      translate: 0 20%;
    }

    20% {
      opacity: 1;
    }

    35% {
      translate: 0 0%;
    }
  }
}
@layer components {
  .button {
    padding: var(--space-sm-x1) var(--space-md);
    width: fit-content;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        translate: var(--default-hover-translate);
        scale: var(--default-hover-scale);
      }
    }

    &:active {
      translate: var(--default-active-translate);
      scale: var(--default-active-scale);
    }
  }

  .button--light {
    --button-color: var(--color-primary-1);
    --secondary-color: var(--color-primary-9);

    @media (any-hover: hover) {
      &:hover {
        --button-color: var(--color-secondary-1);
      }
    }

    &:active {
      --button-color: var(--color-secondary-2);
    }
  }
  .button--medium {
    --button-color: var(--color-secondary-5);
    --secondary-color: var(--color-secondary-0);

    @media (any-hover: hover) {
      &:hover {
        --button-color: var(--color-secondary-4);
      }
    }

    &:active {
      --button-color: var(--color-secondary-6);
    }
  }
  .button--dark {
    --button-color: var(--color-primary-8);
    --secondary-color: var(--color-primary-0);

    @media (any-hover: hover) {
      &:hover {
        --button-color: var(--color-secondary-7);
      }
    }

    &:active {
      --button-color: var(--color-secondary-9);
    }
  }

  .button--primary {
    background-color: var(--button-color);
    color: var(--secondary-color);
    font-weight: var(--font-weight-semi-bold);
  }
  .button--secondary {
    border: var(--border-width-2) solid var(--button-color);
    color: var(--button-color);
  }
}
@layer components {
  .contact-form {
    padding: var(--space-md);
    background-color: var(--color-primary-1);

    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .contact-form__element {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x4);

    width: 100%;

    input,
    textarea {
      padding: var(--space-sm-x1) var(--space-md);
      background-color: var(--color-white);
    }

    &:has([required]) > span::after {
      content: "*";
      color: var(--color-secondary-4);
      display: inline-block;
      margin-left: var(--space-sm-x4);
    }
  }

  .contact-form__turnstile {
    width: 100%;
    max-width: 100%;
    overflow: scroll;
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .contact-form {
      padding: var(--space-lg-x1);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .contact-info {
    padding: var(--space-md);

    background-color: var(--color-primary-8);
    color: var(--color-primary-0);
  }

  .contact-info__title {
    text-transform: uppercase;
    font-size: var(--font-size-sm-x2);
    margin-bottom: var(--space-md);
  }

  .contact-info__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x1);
  }

  .contact-info__detail {
    display: flex;
    gap: var(--space-sm-x2);
    align-items: center;
    word-break: break-word;

    svg {
      width: var(--length-4);
      height: var(--length-4);
      flex-shrink: 0;
    }
  }

  .contact-info__note {
    color: var(--color-primary-3);
    font-style: italic;
    font-size: var(--font-size-sm-x1);

    margin-left: var(--space-sm-x3);
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .contact-info {
      padding: var(--space-lg-x1);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .contact {
    width: 100%;
    display: grid;

    animation: card-slide-in-mobile linear;
    animation-timeline: view();
    animation-range-start: cover 10%;
    animation-range-end: cover 50%;
    animation-fill-mode: backwards;
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .contact {
      grid-template-columns: 1fr 2fr;
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .contact {
      animation: card-slide-in-desktop linear;
      animation-timeline: view();
      animation-range-start: cover 0%;
      animation-range-end: cover 100%;
    }
  }
}
@layer components {
  .footer {
    width: 100%;

    background-color: var(--color-primary-9);
    color: var(--color-primary-0);
  }

  .footer__logo {
    display: block;
    width: var(--length-52);
    margin-block-end: var(--space-sm-x1);

    img {
      width: 100%;
      height: auto;
    }
  }

  .footer__info-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .footer__description {
    font-size: var(--font-size-sm-x1);
  }
  .footer__tagline {
    font-size: var(--font-size-sm-x1);
    font-style: italic;
  }

  .footer__container {
    width: 100%;
    max-width: var(--max-reach-lg-x8);
    margin-inline: auto;
    padding: var(--space-lg-x2) var(--space-md);
    padding-bottom: calc(var(--space-lg-x2) + 80px);

    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);

    position: relative;
    overflow: clip;
  }

  .footer__navigation-container {
    display: grid;
    column-gap: var(--space-md);
    row-gap: var(--space-lg-x1);
  }

  .footer__header-text {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
    margin-block-end: var(--space-sm-x2);
  }
  .footer__header-text--with-icon {
    display: flex;
    gap: var(--space-sm-x3);
    align-items: center;

    svg {
      width: var(--length-6);
      height: var(--length-6);
      flex-shrink: 0;
    }
  }

  .footer__list {
    font-size: var(--font-size-sm-x1);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
  }
  .footer__list-item--with-icon {
    display: flex;
    gap: var(--space-sm-x3);
    align-items: center;
    word-break: break-word;

    svg {
      width: var(--length-4);
      height: var(--length-4);
      flex-shrink: 0;
    }
  }
  .footer__list-item--navigation {
    text-decoration: underline;
    text-decoration-thickness: var(--length-0-5);
    text-decoration-color: transparent;
    text-underline-offset: var(--underline-offset-3);

    &:hover {
      text-decoration-color: var(--color-secondary-4);
    }
    &:active {
      text-decoration-color: var(--color-secondary-6);
    }

    span {
      color: var(--color-primary-3);
      font-style: italic;
      font-size: var(--font-size-sm-x1);
    }
  }
  .footer__list-item--navigation-view-all {
    font-style: italic;
    font-weight: var(--font-weight-bold);
  }

  .footer__note {
    color: var(--color-primary-3);
    font-style: italic;
    font-size: var(--font-size-sm-x1);

    margin-left: var(--space-sm-x3);
  }

  .footer__copyright {
    margin-block-start: var(--space-md);

    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);

    font-size: var(--font-size-sm-x2);
    text-align: center;
  }

  .footer__logo-decoration {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    display: block;
    bottom: 0%;
    right: calc(-40% + 20vw);
    width: 75%;
    height: auto;
    opacity: 0.1;
    rotate: 25deg;
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .footer__navigation-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .footer__container {
      display: grid;
      grid-template-columns: 2fr 2fr 2fr 3fr;
      padding-block-end: var(--space-lg-x2);
    }
    .footer__navigation-container {
      grid-template-columns: 3fr 2fr;
      grid-column: span 2;
    }
    .footer__copyright {
      grid-column: span 4;
    }
    .footer__logo-decoration {
      width: auto;
      height: 100%;
      right: 0;
      bottom: -25%;
    }
  }
}
@layer components {
  .home-about {
    width: 100%;
    position: relative;

    background-color: var(--color-secondary-7);
    color: var(--color-white);

    &::before {
      content: "";
      display: block;
      position: absolute;
      overflow: hidden;
      top: var(--length-12);

      width: 100%;
      height: var(--length-36);
      background: url("/images/decoration/soundwave-decoration.webp");
      background-repeat: repeat-x;
      background-size: cover;
      opacity: 0.3;
    }
  }
  .home-about__content-container {
    position: relative;
    width: 100%;
    max-width: var(--max-reach-lg-x8);
    margin-inline: auto;

    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    padding: var(--space-lg-x1) var(--space-md);
  }

  .home-about__content-section {
    animation: card-slide-in-mobile linear;
    animation-timeline: view();
    animation-range-start: cover 10%;
    animation-fill-mode: backwards;
  }

  .home-about__header {
    h2 {
      text-transform: uppercase;
      margin-bottom: var(--space-sm-x2);
    }
    p {
      font-size: var(--font-size-lg-x2);
      font-weight: var(--font-weight-boldest);
    }
  }
  .home-about__text-content {
    background-color: var(--color-white);
    color: var(--color-black);

    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x1);
    padding: var(--space-md);

    h3 {
      font-size: var(--font-size-lg-x1);
      font-weight: var(--font-weight-bold);
    }
  }
  .home-about__image-content {
    width: 100%;
    height: auto;
    max-height: var(--length-64);
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .home-about__image-content--bottom {
    object-position: 55% 20%;
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .home-about__content-container {
      padding: var(--space-lg-x3) var(--space-lg-x2);
      gap: var(--space-lg-x1);
    }

    .home-about__content-section {
      display: grid;
      grid-template-columns: 2fr 3fr;
    }
    .home-about__content-section--reversed {
      grid-template-columns: 3fr 2fr;
    }

    .home-about__image-content {
      height: 100%;
      max-height: unset;
      aspect-ratio: unset;
    }
    .home-about__image-content--reversed {
      order: 2;
    }
    .home-about__image-content--right {
      object-position: 80% 50%;
    }

    .home-about__text-content {
      gap: var(--space-md);
      padding: var(--space-lg-x1);
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .home-about {
      &::before {
        top: var(--length-24);
        background-size: contain;
      }
    }
    .home-about__content-section {
      animation: card-slide-in-desktop linear;
      animation-timeline: view();
      animation-range-start: cover 0%;
    }
  }
}
@layer components {
  .home-assessments {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }

  .home-assessments__header-decoration {
    position: absolute;
    display: block;
    top: -20%;
    right: -5%;
    width: 45%;
    height: auto;
    opacity: 0.1;
  }

  .home-assessments__list {
    position: relative;

    display: grid;
    gap: var(--space-md);
  }

  .home-assessments__assessment {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
    padding: var(--space-md) var(--space-md) var(--space-lg-x1) var(--space-md);
    height: 100%;

    background-color: var(--color-primary-8);
    color: var(--color-primary-0);

    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-primary-7);
        translate: var(--default-hover-translate);
        scale: var(--default-hover-scale);
      }
    }

    &:active {
      background-color: var(--color-primary-9);
      translate: var(--default-active-translate);
      scale: var(--default-active-scale);
    }

    h3 {
      font-size: var(--font-size-lg-x1);
      font-weight: var(--font-weight-bold);
    }

    p {
      font-size: var(--font-size-sm-x2);
    }
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .home-assessments__header-decoration {
      width: 40%;
      right: -3%;
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .home-assessments__list {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
@layer components {
  .home-consultations {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }

  .home-consultations__header-decoration {
    position: absolute;
    display: block;
    top: -15%;
    right: 0%;
    width: 40%;
    height: auto;
    opacity: 0.1;
  }

  .home-consultations__list {
    position: relative;

    display: grid;
    gap: var(--space-md);
  }

  .home-consultations__assessment {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
    padding: var(--space-md) var(--space-md) var(--space-lg-x1) var(--space-md);
    height: 100%;

    background-color: var(--color-primary-8);
    color: var(--color-primary-0);

    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-primary-7);
        translate: var(--default-hover-translate);
        scale: var(--default-hover-scale);
      }
    }

    &:active {
      background-color: var(--color-primary-9);
      translate: var(--default-active-translate);
      scale: var(--default-active-scale);
    }

    h3 {
      font-size: var(--font-size-sm-x1);
      font-weight: var(--font-weight-bold);
    }
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .home-consultations__header-decoration {
      top: -30%;
      right: 0%;
      width: 35%;
    }
    .home-consultations__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .home-consultations__list {
      grid-template-columns: repeat(5, 1fr);
    }
  }
}
@layer components {
  .home-courses {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }
  .home-courses__header-decoration {
    position: absolute;
    display: block;
    top: -10%;
    right: 0;
    width: 40%;
    height: auto;
    opacity: 0.1;
    rotate: -35deg;
    object-fit: contain;
    object-position: bottom;
  }
  .home-courses__cta-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .home-courses__list {
    position: relative;

    display: grid;
    gap: var(--space-md);
  }
  .home-courses__course {
    display: flex;
    flex-direction: column;
    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        translate: var(--default-hover-translate);
        scale: var(--default-hover-scale);
      }
    }

    &:active {
      translate: var(--default-active-translate);
      scale: var(--default-active-scale);
    }
  }

  .home-courses__course-image {
    width: 100%;
    height: auto;
    max-height: var(--length-64);
    object-fit: cover;
    aspect-ratio: 16 / 9;
  }

  .home-courses__course-text-container {
    background-color: var(--color-primary-8);
    color: var(--color-primary-0);

    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
    padding: var(--space-md) var(--space-md) var(--space-lg-x1) var(--space-md);

    transition: var(--default-transition);
  }
  @media (any-hover: hover) {
    .home-courses__course:hover .home-courses__course-text-container {
      background-color: var(--color-primary-7);
    }
  }
  .home-courses__course:active .home-courses__course-text-container {
    background-color: var(--color-primary-9);
  }
  .home-courses__course-text-name {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
  }
  .home-courses__course-text-description {
    font-size: var(--font-size-sm-x2);
  }
  .home-courses__course-text-duration {
    color: var(--color-primary-3);
    font-style: italic;
    font-size: var(--font-size-sm-x1);
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .home-courses__list {
      grid-template-columns: repeat(2, 1fr);
    }
    .home-courses__course {
      height: 100%;
    }
    .home-courses__course-text-container {
      flex-grow: 1;
    }

    .home-courses__header-decoration {
      top: -20%;
      width: 30%;
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .home-courses__course {
      flex-direction: row;
    }
    .home-courses__course-image {
      width: var(--length-44);
      height: 100%;
      max-height: unset;
      aspect-ratio: 1 / 1;
      flex-shrink: 0;
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80rem) {
    .home-courses__list {
      grid-template-columns: repeat(4, 1fr);
    }
    .home-courses__course {
      flex-direction: column;
    }
    .home-courses__course-image {
      width: 100%;
      height: auto;
      max-height: var(--length-64);
    }
  }
}
@layer components {
  .home-equipment {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }

  .home-equipment__header-decoration {
    position: absolute;
    display: block;
    top: -20%;
    right: -5%;
    width: 45%;
    height: auto;
    opacity: 0.1;
    rotate: 10deg;
  }

  .home-equipment__list {
    position: relative;

    display: grid;
    gap: var(--space-md);
  }

  .home-equipment__equipment-category {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: var(--length-40);

    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        translate: var(--default-hover-translate);
        scale: var(--default-hover-scale);
      }
    }

    &:active {
      translate: var(--default-active-translate);
      scale: var(--default-active-scale);
    }

    > * {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transition: var(--default-transition);
    }
  }
  .home-equipment__equipment-category-image {
    object-fit: cover;
  }
  .home-equipment__equipment-category-text-container {
    display: grid;
    grid-template-columns: 1fr var(--length-7);
    gap: var(--space-sm-x1);
    padding: var(--space-md);
    justify-content: center;
    align-items: center;
    gap: var(--space-sm-x2);

    background-color: oklch(from var(--color-primary-7) l c h / 75%);
    color: var(--color-primary-0);

    transition: var(--default-transition);

    h3 {
      font-size: var(--font-size-lg-x2);
      font-weight: var(--font-weight-bold);
    }

    svg {
      width: var(--length-6);
      height: var(--length-6);
    }

    @media (any-hover: hover) {
      &:hover {
        text-decoration-color: var(--color-secondary-4);
      }
    }

    &:active {
      background-color: oklch(from var(--color-secondary-7) l c h / 60%);
    }
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .home-equipment__header-decoration {
      top: -35%;
    }
    .home-equipment__list {
      grid-template-columns: repeat(2, 1fr);
    }
    .home-equipment__equipment-category-text-container {
      h3 {
        font-size: var(--font-size-lg-x1);
      }
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 64rem) {
    .home-equipment__list {
      grid-template-columns: repeat(4, 1fr);
    }
    .home-equipment__equipment-category-text-container {
      h3 {
        font-size: var(--font-size-md);
      }
    }
    .home-equipment__equipment-category {
      aspect-ratio: 6 / 5;
      max-height: var(--length-64);
    }
  }
}
@layer components {
  .home-faqs {
    width: 100%;
    max-width: var(--max-reach-lg-x5);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .home-faqs__faq {
    display: flex;
    flex-direction: column;

    background-color: var(--color-primary-1);
  }
  .home-faqs__question {
    padding: var(--space-md);

    background-color: var(--color-primary-8);
    color: var(--color-white);

    display: flex;
    justify-content: space-between;
    align-items: center;

    cursor: pointer;

    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-primary-7);
        translate: var(--default-hover-translate);
        scale: var(--default-hover-scale);
      }
    }

    &:active {
      background-color: var(--color-primary-9);
      translate: var(--default-active-translate);
      scale: var(--default-active-scale);
    }

    svg {
      width: var(--length-6);
      height: var(--length-6);
    }
  }
  .home-faqs__faq[open] {
    svg {
      rotate: 90deg;
    }
  }
  .home-faqs__answer {
    padding: var(--space-md);
  }
}
@layer components {
  .home-hero {
    position: relative;
    width: 100%;

    background: linear-gradient(
      -45deg,
      var(--color-primary-8) 0%,
      var(--color-secondary-8) 70%,
      var(--color-primary-5) 100%
    );
  }

  .home-hero__outer-content-container {
    width: 100%;
    max-width: var(--max-reach-lg-x8);
    margin-inline: auto;
  }

  .home-hero__content-container {
    position: relative;
    z-index: var(--z-1);

    padding: var(--space-lg-x4) var(--space-md);
    width: 100%;
    max-width: var(--max-reach-lg-x2);

    display: grid;
    gap: var(--space-lg-x1);
  }

  .home-hero__text-content-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }

  .home-hero__text-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x1);

    color: var(--color-white);

    h1 {
      font-weight: var(--font-weight-boldest);
      font-size: var(--font-size-lg-x5);
      line-height: 1.25;
    }
  }
  .home-hero__tagline {
    font-style: italic;
  }

  .home-hero__cta-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm-x1);
  }

  .home-hero__image {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .home-hero__content-container {
      padding-inline: var(--space-lg-x2);
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .home-hero__content-container {
      max-width: unset;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      gap: var(--space-lg-x2);
    }
  }
}
@layer components {
  .home-our-clients {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
  }
  .home-our-clients__client {
    display: flex;
    justify-content: center;
    align-items: center;

    height: var(--length-24);
    width: auto;
    max-width: var(--length-32);

    padding: var(--space-sm-x2);

    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        background-color: oklch(from var(--color-primary-2) l c h / 40%);
        translate: var(--default-hover-translate);
        scale: var(--default-hover-scale);
      }
    }

    &:active {
      background-color: oklch(from var(--color-secondary-4) l c h / 50%);
      translate: var(--default-active-translate);
      scale: var(--default-active-scale);
    }

    & > * {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .home-our-clients {
      column-gap: var(--space-lg-x2);
      row-gap: var(--space-md);
      padding-inline: var(--space-lg-x2);
    }

    .home-our-clients__client {
      height: var(--length-32);
      width: auto;
      max-width: var(--length-48);
    }
  }
}
@layer components {
  .home-team {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
  }

  .home-team__member {
    display: block;
    width: var(--length-52);

    animation: card-slide-in-mobile linear;
    animation-timeline: view();
    animation-range-start: cover 10%;
    animation-fill-mode: backwards;

    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-primary-2);
        translate: var(--default-hover-translate);
        scale: var(--default-hover-scale);
      }
    }

    &:active {
      color: var(--color-primary-3);
      translate: var(--default-active-translate);
      scale: var(--default-active-scale);
    }
  }

  .home-team__member-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .home-team__member-name {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
  }

  .home-team__member-role {
    font-size: var(--font-size-sm-x1);
  }

  .home-team__member-text-container {
    padding-block-start: var(--space-sm-x1);
    padding-block-end: var(--space-md);

    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x3);
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .home-team__member {
      animation: card-slide-in-desktop linear;
      animation-timeline: view();
      animation-range-start: cover 0%;
    }
  }
}
@layer components {
  .home-testimonials {
    width: 100%;
    position: relative;
  }

  .home-testimonials__background-image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 30%;
  }
  .home-testimonials__background-colour {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-color: oklch(from var(--color-primary-7) l c h / 75%);
  }

  .home-testimonials__content-container {
    position: relative;
    width: 100%;
    max-width: var(--max-reach-lg-x8);
    margin-inline: auto;
    padding: var(--space-lg-x4) var(--space-md);

    max-height: calc(65rem - 15vw);
    overflow-y: clip;

    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);

    color: var(--color-primary-0);
  }

  .home-testimonials__list {
    position: relative;

    display: grid;
    gap: var(--space-md);
  }

  .home-testimonials__testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
    padding: var(--space-md);

    background-color: oklch(from var(--color-primary-9) l c h / 90%);

    animation: card-slide-in-mobile linear;
    animation-timeline: view();
    animation-range-start: cover 10%;
    animation-fill-mode: backwards;
  }
  .home-testimonials__testimonial-name {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
  }
  .home-testimonials__testimonial-date-location {
    color: var(--color-primary-3);
    font-style: italic;
    font-size: var(--font-size-sm-x1);
  }
  .home-testimonials__testimonial-content {
    font-size: var(--font-size-sm-x1);
  }

  .home-testimonials__more-testimonials {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    display: flex;
    justify-content: center;
    padding: var(--space-lg-x3) var(--space-md);

    background: linear-gradient(
      oklch(from var(--color-primary-9) l c h / 0%) 0%,
      oklch(from var(--color-primary-9) l c h / 60%) 50%,
      oklch(from var(--color-primary-9) l c h / 90%) 100%
    );
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .home-testimonials__list {
      grid-template-columns: repeat(2, 1fr);
    }
    .home-testimonials__content-container {
      max-height: calc(60rem + 10vw);
    }
    .home-testimonials__testimonial {
      animation: card-slide-in-desktop linear;
      animation-timeline: view();
      animation-range-start: cover 0%;
    }
  }
}
@layer components {
  .link {
    --link-decoration-thickness: var(--length-0-5);
    --link-underline-offset: var(--underline-offset-3);

    text-decoration: underline;
    text-decoration-thickness: var(--link-decoration-thickness);
    text-decoration-color: var(--color-primary-5);
    text-underline-offset: var(--link-underline-offset);

    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        text-decoration-color: var(--color-secondary-4);
      }
    }
    &:active {
      text-decoration-color: var(--color-secondary-6);
    }
  }

  .link--with-arrow {
    --link-decoration-thickness: var(--length-1);
    --link-underline-offset: var(--length-2);

    display: flex;
    align-items: center;
    gap: var(--space-sm-x3);

    svg {
      width: var(--length-4);
      height: var(--length-4);
    }
  }

  .link--small {
    color: var(--color-primary-2);
    font-style: italic;
    font-size: var(--font-size-sm-x2);
  }
}
@layer components {
  .navbar-desktop {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: var(--z-5);

    background-color: oklch(from var(--color-primary-0) l c h / 80%);
    backdrop-filter: blur(var(--space-md));
    padding: var(--space-md);
  }
  .navbar-desktop__container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: var(--max-reach-lg-x8);
    margin-inline: auto;
  }
  .navbar-desktop__logo {
    display: block;
    width: var(--length-32);

    img {
      width: 100%;
      height: auto;
    }
  }

  .navbar-desktop__menu {
    display: none;
  }
  .navbar-desktop__menu-item {
    position: relative;
    padding: var(--space-sm-x1) var(--space-md);
    cursor: default;
    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-primary-8);
        color: var(--color-primary-0);
      }
    }
  }
  .navbar-desktop__menu-item-text-and-icon {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x3);
    font-weight: var(--font-weight-bold);

    svg {
      width: var(--length-5);
      height: var(--length-5);

      flex-shrink: 0;
    }
  }
  .navbar-desktop__menu-item-children-list-wrapper {
    display: none;
    opacity: 0;
    transition: var(--default-transition);
    transition-behavior: allow-discrete;

    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100%;
    max-width: var(--length-80);
    width: max-content;

    overflow: clip;
  }
  .navbar-desktop__menu-item-children-list {
    display: flex;
    flex-direction: column;

    background-color: var(--color-primary-8);
    color: var(--color-primary-0);
  }
  @media (any-hover: hover) {
    .navbar-desktop__menu-item:hover
      .navbar-desktop__menu-item-children-list-wrapper {
      display: block;
      opacity: 1;
      @starting-style {
        opacity: 0;
      }
    }
  }
  .navbar-desktop__menu-item-child {
    display: block;
    padding: var(--space-sm-x1) var(--space-md);
    transition: var(--default-transition);

    span {
      color: var(--color-primary-3);
      font-style: italic;
      font-size: var(--font-size-sm-x1);
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-secondary-7);
      }
    }

    &:active {
      background-color: var(--color-secondary-8);
    }
  }
  .navbar-desktop__menu-item-child--link {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);
    font-style: italic;
    font-weight: var(--font-weight-bold);

    svg {
      width: var(--length-5);
      height: var(--length-5);
    }
  }
  .navbar-desktop__menu-item--no-children {
    text-decoration: underline;
    text-decoration-thickness: var(--length-1);
    text-decoration-color: transparent;
    text-underline-offset: var(--length-2);
    transition: var(--default-transition);

    @media (any-hover: hover) {
      &:hover {
        background-color: transparent;
        color: var(--color-black);

        text-decoration-color: var(--color-secondary-5);
      }
    }
    &:active {
      background-color: transparent;
      color: var(--color-black);

      text-decoration-color: var(--color-secondary-7);
    }
  }

  .navbar-desktop__logo-decoration {
    position: absolute;
    pointer-events: none;
    bottom: -10%;
    right: -5%;
    width: 75%;
    height: auto;
    opacity: 0.1;
    rotate: 25deg;
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .navbar-desktop__menu {
      display: flex;
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80rem) {
    .navbar-desktop__logo {
      width: var(--length-44);
    }
  }
}
@layer components {
  .navbar-dialog {
    position: fixed;
    bottom: 0;
    z-index: var(--z-important);

    width: 100%;
    height: 100%;
    max-height: none;
    max-width: none;

    margin: 0;
    padding: 0;
    border: none;

    background: none;

    &::backdrop {
      background-color: oklch(from var(--color-primary-9) l c h / 70%);
      backdrop-filter: blur(var(--space-md));
    }
  }

  .navbar-dialog__click-away-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: calc(-1 * var(--z-5));
    background-color: transparent;
  }

  .navbar-dialog__container {
    position: absolute;
    bottom: 0;
    height: 60vh;
    overflow-y: scroll;
    width: 100%;

    background-color: var(--color-primary-9);
    color: var(--color-primary-0);
  }

  .navbar-dialog__logo-decoration-container {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .navbar-dialog__logo-decoration {
    position: absolute;
    bottom: 22%;
    right: 0;
    width: 75%;
    height: auto;
    opacity: 0.1;
    rotate: 25deg;
  }

  .navbar-dialog__menu {
    position: relative;
    padding-block: var(--space-sm-x2);
    z-index: var(--z-1);
  }

  .navbar-dialog__menu-item {
    &[open] .navbar-dialog__menu-item-button-arrow svg {
      rotate: 90deg;
    }
  }

  .navbar-dialog__menu-item-button {
    display: flex;
    padding: var(--space-md);
    gap: var(--space-sm-x2);

    font-weight: var(--font-weight-bold);

    &:active {
      background-color: var(--color-secondary-7);
    }
  }
  .navbar-dialog__menu-item-button--no-children {
    padding: var(--space-md);
  }

  .navbar-dialog__menu-item-button-icon {
    width: var(--length-6);
    height: var(--length-6);
  }
  .navbar-dialog__menu-item-button-arrow {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;

    width: var(--length-5);
    height: var(--length-5);
  }

  .navbar-dialog__menu-item-content {
    display: flex;
    flex-direction: column;
    padding-inline: var(--space-md);
  }

  .navbar-dialog__menu-item-content-item {
    display: block;
    padding: var(--space-sm-x1);

    span {
      color: var(--color-primary-3);
      font-style: italic;
      font-size: var(--font-size-sm-x1);
    }

    &:active {
      background-color: var(--color-secondary-7);
    }
  }
  .navbar-dialog__menu-item-content-item--link {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);
    font-style: italic;
    font-weight: var(--font-weight-bold);

    svg {
      width: var(--length-5);
      height: var(--length-5);
    }
  }
}
@layer components {
  .navbar-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-primary-8);
    z-index: var(--z-important);
  }

  .navbar-mobile__menu {
    display: flex;
    justify-content: space-around;
  }

  .navbar-mobile__menu-item {
    padding-inline: var(--space-sm-x1);
    padding-block: var(--space-md);

    &:active {
      background-color: var(--color-secondary-7);
    }
  }

  .navbar-moible__menu-item-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

    color: var(--color-primary-0);
    font-size: var(--font-size-sm-x2);

    svg {
      width: var(--length-6);
      height: var(--length-6);
      flex-shrink: 0;
    }
  }

  .navbar-mobile__menu-item--last {
    order: 4; /* there are 4 items so this is the last */
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .navbar-mobile {
      display: none;
    }
  }
}
@layer components {
  .prose {
    p:not(:first-child),
    ul:not(:first-child) {
      margin-block-start: var(--space-sm-x2);
    }
    p:not(:last-child),
    ul:not(:last-child) {
      margin-block-end: var(--space-sm-x2);
    }

    a {
      text-decoration: underline;
      text-decoration-thickness: var(--length-0-5);
      text-decoration-color: var(--color-primary-5);
      text-underline-offset: var(--underline-offset-3);
      transition: var(--default-transition);

      @media (any-hover: hover) {
        &:hover {
          text-decoration-color: var(--color-secondary-4);
        }
      }
      &:active {
        text-decoration-color: var(--color-secondary-6);
      }
    }

    ul {
      list-style: disc;
      margin-left: var(--space-md);
    }
  }
}
@layer components {
  .section-header {
    color: var(--header-text-color);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .section-header--light {
    --header-text-color: var(--color-white);
  }

  .section-header--dark {
    --header-text-color: var(--color-black);
  }

  .section-header--relative {
    position: relative;
  }

  .section-header--center .section-header__title-description-container {
    margin-inline: auto;
  }

  .section-header__title-container {
    overflow-y: clip;
    padding-block-end: var(--space-sm-x4);
  }

  .section-header__title {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-boldest);
    line-height: var(--line-height-tighter);

    animation: header-slide-in linear;
    animation-timeline: view();
  }

  .section-header--center .section-header__title {
    text-align: center;
  }

  .section-header__title-description-container {
    text-wrap: pretty;
    max-width: var(--max-reach-lg-x6);
  }

  /* Only add a bit more padding if it's the last child */
  .section-header__title-description-container:last-child {
    margin-block-end: var(--space-sm-x2);
  }

  @keyframes header-slide-in {
    0% {
      opacity: 0.5;
      translate: 0 150%;
    }

    35% {
      translate: 0 0%;
    }

    50% {
      opacity: 1;
    }
  }
}
@layer components {
  .section {
    width: 100%;
  }

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

  .section--medium {
    background-color: var(--color-secondary-7);
    color: var(--color-white);
  }

  .section--dark {
    background-color: var(--color-primary-7);
    color: var(--color-white);
  }

  .section--relative {
    position: relative;
  }

  .section--overflow-clip {
    overflow: clip;
  }

  .section__container {
    --section-padding-inline: var(--space-md);

    width: 100%;
    max-width: var(--max-reach-lg-x8);
    margin-inline: auto;
    padding: var(--space-lg-x4) var(--section-padding-inline);
  }

  .section__container--with-spacing {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }
}