/* ----------------------------------------------------------------------------
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.0

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.5rem);
    --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 {
  html {
    --default-color-primary: #f3df82;
    --default-color-secondary: var(--color-black);
    --default-color-bg: var(--color-primary-1);

    --default-font-size: clamp(1rem, calc(15px + 0.390625vw), 1.8rem);

    --default-color-red: oklch(0.6324 0.2144 25.84);
    --color-red-0: oklch(from var(--default-color-red) var(--shade-0));
    --color-red-1: oklch(from var(--default-color-red) var(--shade-1));
    --color-red-2: oklch(from var(--default-color-red) var(--shade-2));
    --color-red-3: oklch(from var(--default-color-red) var(--shade-3));
    --color-red-4: oklch(from var(--default-color-red) var(--shade-4));
    --color-red-5: oklch(from var(--default-color-red) var(--shade-5));
    --color-red-6: oklch(from var(--default-color-red) var(--shade-6));
    --color-red-7: oklch(from var(--default-color-red) var(--shade-7));
    --color-red-8: oklch(from var(--default-color-red) var(--shade-8));
    --color-red-9: oklch(from var(--default-color-red) var(--shade-9));
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-transform: uppercase;
  }

  html:has(dialog[open]) {
    overflow: hidden;
  }

  @media (prefers-color-scheme: dark) {
    /* :root { */
    /*   --color-text: var(--neutral-100); */
    /*   --color-bg: var(--neutral-800); */
    /*   --color-bg-dark: var(--neutral-900); */
    /*   --color-border: var(--neutral-600); */
    /* } */
  }

  /* 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;
  }
}
@layer components {
  .about {
    margin-inline: auto;
    margin-top: var(--space-lg-x5);
  }

  .about__title {
    width: min(90%, var(--max-reach-lg-x3));
    margin-inline: auto;
  }

  .about__awards {
    margin-top: var(--space-sm-x1);
    display: grid;
    gap: var(--space-lg-x1);
    width: fit-content;
    max-width: var(--max-reach-sm-x1);
    margin-inline: auto;
    padding-inline: var(--space-md);
    @media (width >= 48rem) {
      padding-inline: 0;
      max-width: var(--max-reach-md);
    }
  }

  .about__award {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x4);
    font-weight: var(--font-weight-semi-bold);

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

  .about__award-subtitle {
    font-size: var(--font-size-sm-x1);
    color: var(--color-neutral-6);
    font-style: italic;
    line-height: var(--line-height-tighter);
  }

  .about__img {
    margin-top: var(--space-lg-x1);
    width: min(90%, var(--max-reach-lg-x5));
    margin-inline: auto;

    img {
      width: min(100%, var(--max-reach-md));
      margin-inline: auto;
      height: auto;
      box-shadow: var(--shadow-4);
      aspect-ratio: 1 / 1;
      object-fit: cover;

      @media (width >= 64rem) {
        aspect-ratio: 16 / 9;
        width: 100%;
      }
    }
  }

  .about__text-area {
    margin-top: var(--space-lg-x3);
    background: var(--color-white);
    border: var(--border-width-1) solid var(--color-neutral-2);
    box-shadow: var(--shadow-4);
    padding-inline: var(--space-lg-x1);
    padding-block: var(--space-lg-x1);
    margin-inline: auto;
    line-height: var(--line-height-loosest);
    width: min(90%, var(--max-reach-lg-x6));

    p {
      margin-top: var(--space-sm-x2);
    }

    p:first-child {
      margin: 0;
    }

    @media (width >= 48rem) {
      container-type: inline-size;
      column-count: 2;
      width: min(95%, var(--max-reach-lg-x8));
      column-rule: 1px solid var(--color-primary-4);
      column-gap: var(--space-lg-x3);
      font-size: var(--font-size-sm-x1);
      padding-inline: var(--space-lg-x2);
      padding-block: var(--space-lg-x2);

      p {
        break-inside: auto;
      }
    }
  }

  .about__from {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x1);
    margin-top: var(--space-lg-x1);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semi-bold);

    img {
      width: var(--length-24);
      height: var(--length-24);
      border: var(--border-width-1) solid var(--color-neutral-2);
      box-shadow: var(--shadow-4);
      flex-shrink: 0;
    }
  }

  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    .about__scroll-effect {
      animation: slide-in-up linear both;
      animation-range: entry 0vh exit -30vh;
      animation-timeline: view();
    }
    .about__scroll-effect--slow {
      opacity: 0;
      animation:
        slide-in-up linear both,
        fade-in linear both;
      animation-range: entry -80vh exit -30vh;
      animation-timeline: view();
    }
  }
}
@layer components {
  .button {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap, var(--length-2));
    color: var(--button-color, var(--color-primary-0));
    width: var(--button-width, fit-content);
    border-radius: var(--button-border-radius, none);
    background-color: var(--button-background, var(--color-primary-7));
    padding: var(--button-padding, var(--space-sm-x3) var(--space-lg-x1));
    box-shadow: var(--button-box-shadow, var(--shadow-3));
    cursor: pointer;
    transition: 500ms ease-out;
    transition-property:
      background-color, border, box-shadow, color, filter, opacity, scale;

    @media (any-hover: hover) {
      &:hover {
        scale: 0.95;
        background: var(--button-hover, var(--color-primary-5));
        .button__icon--bell-shake {
          animation: var(--animation-shake-z) forwards;
          animation-timing-function: var(--ease-in-out-5);
        }
      }
    }
    &:active {
      scale: 0.9;
    }

    /* Variants
  /* ------------------------------------------------------------------------ */

    &.button--plain {
      --button-border-radius: none;
      --button-background: transparent;
      --button-hover: none;
      --button-color: none;
      --button-icon-size: 100%;
      --button-padding: 0;
      --button-box-shadow: none;
      --button-gap: 0;
    }

    &.button--light {
      --button-color: var(--color-primary-8);
      --button-background: var(--color-primary-1);
      --button-hover: var(--color-primary-2);
    }

    &.button--border-hollow {
      --button-color: var(--color-primary-1);
      --button-background: none;
      --button-hover: none;
      border: var(--color-white) solid var(--border-width-1);

      &:hover {
        --button-color: var(--color-primary-2);
        border-color: var(--border-width-1);
      }
    }

    &.button--link {
      --button-border-radius: none;
      --button-background: transparent;
      --button-hover: none;
      --button-color: var(--color-primary-8);
      --button-icon-size: 100%;
      --button-padding: 0;
      --button-box-shadow: none;
      text-decoration: underline;
      text-underline-offset: var(--underline-offset-4);
      text-decoration-color: var(--color-primary-4);

      &:hover {
        --button-color: var(--color-primary-6);
        text-decoration-color: var(--color-primary-3);
      }
    }

    &.button--close {
      --button-border-radius: none;
      --button-background: transparent;
      --button-hover: none;
      --button-color: var(--color-black);
      --button-icon-size: 100%;
      --button-padding: 0;
      --button-box-shadow: none;
      text-decoration: underline;

      &:hover {
        /* --button-color: var(--color-red-5); */
        --button-color: var(--color-red-7);
      }
    }

    &.button--success {
      --button-background: var(--color-green-600);
      --button-hover: var(--color-green-400);
    }

    &.button--error-link {
      --button-color: var(--color-red-600);
      &:hover {
        --button-color: var(--color-red-400);
      }
    }

    &.button--full-width {
      --button-width: 100%;
    }
  }

  .button__icon {
    width: var(--icon-size, var(--length-8));
    height: var(--icon-size, var(--length-8));
  }

  .button__icon--small {
    width: var(--icon-size, var(--length-6));
    height: var(--icon-size, var(--length-6));
  }
}
@layer components {
  .common-header {
    &:is(h2) {
      font-size: var(--font-size-lg-x3);
      font-weight: var(--font-weight-full);
      color: var(--color-primary-8);
      text-align: center;
    }
  }
  .common-subtitle {
    font-size: var(--font-size-md);
    color: var(--color-primary-6);
    width: min(95%, 70ch);
    text-align: center;
    text-wrap: pretty;
    margin-inline: auto;
  }
}
@layer components {
  .contact {
    margin-top: var(--space-lg-x5);
  }
  .contact__optional {
    color: var(--color-neutral-5);
    font-size: var(--font-size-sm-x2);
    font-style: italic;
  }

  .contact__form {
    background: var(--color-white);
    border: var(--border-width-1) solid var(--color-neutral-2);
    margin-top: var(--space-md);
    margin-inline: auto;
    max-width: min(90%, var(--max-reach-lg-x3));
    box-shadow: var(--shadow-4);
    padding-inline: var(--space-lg-x2);
    padding-block: var(--space-lg-x1);

    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
      animation: slide-in-up linear both;
      animation-timeline: view();
      animation-range: entry -80vh exit -30vh;
    }
  }
  .contact__form-element {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    :focus-visible {
      outline-color: none;
      border-color: var(--color-primary-6);
    }
  }

  .contact__label {
    display: flex;
    flex-direction: column;
    gap: var(--length-1);
  }

  .contact__select,
  .contact__input,
  .contact__textarea {
    padding: var(--space-sm-x3) var(--space-sm-x2);
    background: var(--color-white);
    border: var(--border-width-2) solid var(--color-neutral-2);
    outline: none;
    box-shadow: var(--shadow-2);
  }

  .contact__button {
    margin-top: var(--space-md);
    margin-inline: auto;

    & .contact__loading-icon {
      display: none;
    }
  }
  .contact__button[data-loading="true"] {
    animation: var(--animation-blink) forwards;
    background-color: var(--color-primary-5);

    & .contact__loading-icon {
      display: block;
      animation: var(--animation-spin) forwards;
    }
    & .contact__submit-icon {
      display: none;
    }
  }

  .contact__details {
    margin-top: var(--space-sm-x4);
    summary {
      font-size: var(--font-size-sm-x1);
      color: var(--color-neutral-5);
      cursor: pointer;
      font-style: italic;
    }
    @supports selector(::details-content) {
      &::details-content {
        max-height: 0;
        transition: 500ms ease-in-out;
        transition-behavior: allow-discrete;
        overflow: hidden;
        opacity: 0;
      }
      &[open]::details-content {
        max-height: var(--length-64);
        opacity: 1;
      }
    }
  }
}
@layer components {
  .explore-menu {
    margin-block: var(--space-lg-x5);
  }
  .explore-menu__food {
    margin-top: var(--space-lg-x4);
    margin-bottom: var(--space-lg-x4);
    width: min(100%, var(--max-reach-lg-x8));
    margin-inline: auto;

    display: grid;
    place-items: center;
    gap: var(--space-sm-x1);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-sm-x1);

      /* 
        *  We don't want uneven grids so we hide them on 
        *  desktop with this trick.
        */
      &:has(> :last-child:nth-child(4)) {
        > :last-child {
          display: none;
        }
      }
      &:has(> :last-child:nth-child(5)) {
        > :nth-last-child(-n + 2) {
          display: none;
        }
      }
    }
  }

  .explore-menu__img {
    width: 100%;
    height: 100%;
    box-shadow: var(--shadow-5);

    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
      opacity: 0;
      animation: fade-in linear both;
      animation-timeline: view();
      animation-range: entry 0vh exit -50vh;
    }
  }
}
@layer components {
  .faqs {
    margin-top: var(--space-lg-x5);
  }
  .faqs__all-questions {
    margin-top: var(--space-md);
    display: grid;
    gap: var(--space-lg-x1);
    width: min(90%, var(--max-reach-lg-x3));
    margin-inline: auto;
  }

  .faqs__detail {
    box-shadow: var(--shadow-3);
    border: var(--border-width-1) solid var(--color-neutral-1);
    background: var(--color-white);
    transition: 500ms ease-out;

    &[open] svg {
      color: var(--color-red-5);
      rotate: 0deg;
    }

    @media (any-hover: hover) {
      &[open] {
        scale: 1;
      }
      &:hover:not(&:open) {
        scale: 0.95;
      }
      &:active:not(&:open) {
        scale: 0.9;
      }
    }
  }

  .faqs__question {
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    padding-inline: var(--space-md);
    padding-block: var(--space-md);
    color: var(--color-primary-7);
    display: flex;
    align-items: center;

    svg {
      width: var(--length-5);
      height: var(--length-5);
      margin-left: auto;
      rotate: -45deg;
      transition: rotate 0.5s ease;
    }

    &::marker {
      content: none;
    }
  }

  .faqs__answer {
    padding-inline: var(--space-md);
    padding-block-end: var(--space-md);
  }
}
@layer components {
  .footer {
    margin-top: var(--space-lg-x5);
    background: var(--color-neutral-8);
    /* the height of the mobile navigation */
    padding-bottom: 100px;
    @media (width >= 64rem) {
      padding-bottom: 0;
    }
    color: var(--color-neutral-2);
    height: 100%;
  }

  .footer__content {
    width: min(95%, var(--max-reach-lg-x5));
    margin-inline: auto;
    height: 100%;
    padding-block: var(--space-lg-x3);
  }

  .footer__logo {
    margin-inline: auto;

    img {
      width: var(--length-14);
      height: var(--length-14);
      margin-inline: auto;
    }
  }

  .footer__link-container {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: auto;
  }

  .footer__link {
    display: flex;
    color: var(--color-neutral-2);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset-2);
    text-decoration-color: var(--color-primary-2);
    padding-bottom: var(--space-sm-x4);
    margin-inline: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--space-sm-x4);
    margin-top: var(--space-sm-x2);

    svg {
      display: inline;
      color: var(--color-primary-2);
      width: var(--length-5);
      height: var(--length-5);
    }

    &:hover {
      color: white;
      text-decoration-color: var(--color-primary-2);
    }
  }

  .footer__socials {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-lg-x2);
    margin-bottom: var(--space-lg-x1);
    gap: var(--space-md);
  }

  .footer__socials-link {
    display: block;
    padding: var(--space-sm-x1);
    border-radius: var(--border-radius-round);
    border: var(--border-width-1) solid var(--color-neutral-3);

    svg {
      width: var(--length-5);
      height: var(--length-5);
      fill: var(--color-white);
    }
  }

  .footer__awards {
    margin-top: var(--space-lg-x2);
    h2 {
      text-align: center;
      color: white;
      font-size: var(--font-size-lg-x1);
    }

    ul {
      margin-top: var(--space-sm-x1);
      display: grid;
      width: min(95%, var(--max-reach-lg-x5));
      margin-inline: auto;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: 1fr;
      gap: var(--space-sm-x1);

      @media (width >= 30rem) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
    }
  }

  .footer__award-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .footer__award-image--outer {
    padding: var(--space-sm-x3);
    background-color: var(--color-primary-1);
  }

  .footer__copyright {
    margin-top: var(--space-lg-x3);
    text-align: center;
  }

  .footer__sanico {
    width: 100%;
    margin-top: var(--space-sm-x3);
    color: var(--color-neutral-3);
    text-align: center;
    text-decoration: underline;
    font-size: var(--font-size-sm-x1);
  }
}
@layer components {
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--color-black);
    height: 100vh;
    height: 100svh;

    &.hero--short {
      height: 70vh;
      height: 70svh;
      @media (width >= 64rem) {
        /* account for the top desktop navigation */
        height: calc(60vh + 100px);
        height: calc(60svh + 100px);
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      :is(.hero__title, .hero__stars, .hero__review-text) {
        opacity: 0.01;
        animation:
          var(--animation-fade-in) forwards,
          var(--animation-slide-in-up) forwards;
        animation-timing-function: var(--ease-out-5);
        animation-delay: 0.6s;
      }

      & :is(.hero__title, .hero__description) {
        opacity: 0.01;
        animation:
          var(--animation-fade-in) forwards,
          var(--animation-slide-in-up) forwards;
        animation-timing-function: var(--ease-out-5);
        animation-delay: 0.6s;
      }

      & :is(.hero__image, .button) {
        opacity: 0.01;
        animation: var(--animation-fade-in) forwards;
        animation-timing-function: var(--ease-out-5);
        animation-delay: 0.9s;
      }
      & :is(.button) {
        animation-delay: 1.3s;
      }
    }
  }

  .hero__content {
    position: absolute;
    width: min(95%, var(--max-reach-lg-x8));
    height: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    z-index: var(--z-2);

    @media (width >= 48rem) {
      align-items: end;
    }
  }

  .hero__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x1);
    justify-items: center;
    align-items: center;
    flex-direction: column;

    @media (width >= 48rem) {
      flex-direction: row;
      a {
        width: fit-content;
      }
    }
  }

  .hero__title {
    max-width: var(--max-reach-lg-x4);
    h1 {
      color: var(--color-white);
      text-align: center;
      word-spacing: 100vw;
      font-size: 270%;
      line-height: var(--line-height-tightest);
      font-weight: var(--font-weight-boldest);
      @media (width >= 48rem) {
        text-align: end;
        word-spacing: normal;
        line-height: var(--line-height-tighter);
        font-size: 300%;
      }
    }
  }

  .hero__description {
    color: var(--color-neutral-2);
    text-align: center;
  }

  .hero__stars {
    margin-top: var(--space-sm-x3);
    display: flex;
    gap: var(--space-sm-x4);
    color: var(--color-primary-2);
    svg {
      width: var(--length-8);
      height: var(--length-8);

      @media (width >= 48rem) {
        width: var(--length-10);
        height: var(--length-10);
      }
    }
  }

  .hero__review-text {
    text-align: center;
    color: var(--color-neutral-1);
    margin-top: var(--space-sm-x4);
    margin-bottom: var(--space-lg-x1);
    max-width: 20ch;
    @media (width >= 48rem) {
      max-width: 40ch;
    }
  }

  .hero__image-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);

    background: linear-gradient(
      0deg,
      oklch(from var(--color-black) l c h / 0%) 0%,
      oklch(from var(--color-black) l c h / 60%) 15%,
      oklch(from var(--color-black) l c h / 70%) 50%,
      oklch(from var(--color-black) l c h / 60%) 85%,
      oklch(from var(--color-black) l c h / 0%) 100%
    );

    @media (width >= 48rem) {
      background: linear-gradient(
        90deg,
        oklch(from var(--color-black) l c h / 0%) 0%,
        oklch(from var(--color-black) l c h / 50%) 50%,
        oklch(from var(--color-black) l c h / 70%) 100%
      );
    }
  }

  .hero__slider {
    position: relative;
    /* this accounts for the top navigation */
    padding-top: 88px;
    width: 100%;
    height: 100%;

    overflow: hidden;
    box-shadow: var(--shadow-3);

    li {
      animation: impact-image-slowzoom 20s linear infinite alternate;
      &:nth-child(even) {
        transform-origin: bottom right;
      }
      &:nth-child(odd) {
        transform-origin: bottom left;
      }
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      object-fit: cover;
      opacity: 1;
      transition:
        opacity 1200ms ease-out,
        display 1200ms allow-discrete;

      @starting-style {
        opacity: 0;
      }

      picture,
      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }

      &[data-open="true"] {
        display: block;
      }

      &[data-open="false"] {
        opacity: 0;
        display: none;
      }
    }
  }
  .hero__image {
    margin-top: var(--space-lg-x3);
    img {
      height: var(--length-44);
      width: auto;
      object-fit: cover;
      width: min(100%, 200rem);
      margin-inline: auto;
    }
    @media (width >= 40rem) {
      img {
        height: var(--length-64);
        width: auto;
      }
    }
    @media (width >= 64rem) {
      img {
        width: 100%;
        height: auto;
        width: min(100%, 200rem);
      }
    }
  }

  @keyframes hero-slowzoom {
    0% {
      transform: scale(1);
    }

    100% {
      transform: scale(1.1);
    }
  }
}
@layer components {
  .impact-image {
    position: relative;
    margin-block: var(--space-lg-x5);
    overflow: hidden;
    height: 50vh;

    @media (width >= 64rem) {
      height: 60vh;
    }

    @media (any-hover: hover) {
      &:has(.impact-image__button:hover) {
        .impact-image__img {
          filter: brightness(50%) blur(10px);
          animation-play-state: paused;
        }
      }
    }

    &:has(.impact-image__overlay) {
      .impact-image__img {
        transition: filter 1.5s ease;
        filter: brightness(70%);
      }
    }
  }

  .impact-image__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .impact-image__button-container {
    @media (any-hover: hover) {
      &:hover {
        .impact-image__button {
          border-radius: var(--border-radius-round);
          border-color: var(--color-primary-2);
          background: oklch(from var(--color-black) l c h / 50%);
          text-decoration: underline;
          text-decoration-color: var(--color-primary-2);
          text-underline-offset: var(--underline-offset-4);
          width: var(--length-56);
          height: var(--length-56);

          @media (width >= 48rem) {
            width: var(--length-96);
            height: var(--length-96);
          }

          .impact-image__img {
            filter: brightness(50%);
          }
        }
      }
    }
  }

  .impact-image__button {
    color: var(--color-white);
    background: oklch(from var(--color-black) l c h / 20%);
    border: var(--border-width-3) solid var(--color-white);
    padding: var(--space-sm-x1) var(--space-lg-x1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-lg-x2);
    border-radius: 0;
    font-weight: var(--font-weight-semi-bold);
    text-transform: uppercase;
    width: var(--length-56);
    height: var(--length-28);
    text-decoration-color: rgba(0, 0, 0, 0);
    text-underline-offset: var(--underline-offset-2);

    @media (width >= 48rem) {
      width: var(--length-96);
      height: var(--length-48);
      border-width: var(--border-width-4);
    }

    text-align: center;
    transition:
      width 0.8s ease,
      background 0.8s ease,
      text-decoration-color 0.8s ease,
      text-underline-offset 0.8s ease,
      height 0.8s ease,
      border 0.8s ease,
      border-radius 1s ease;
  }

  .impact-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: impact-image-slowzoom 20s linear infinite alternate;
    transform-origin: bottom right;
  }

  @keyframes impact-image-slowzoom {
    0% {
      transform: scale(1);
    }

    100% {
      transform: scale(1.1);
    }
  }
}
@layer components {
  .message-box {
    width: min(100%, var(--max-reach-lg-x4));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--space-lg-x5) * -1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 var(--space-sm-x2);
    text-align: center;
    height: 80vh;
    /* take into account top nav */
    @media (width >= 64rem) {
      height: calc(80vh);
    }
  }

  .message-box__content {
    padding-block: var(--space-lg-x4);
    padding-inline: var(--space-lg-x1);
    background: var(--color-white);
    box-shadow: var(--shadow-5);
    border: solid var(--border-width-1) var(--color-neutral-2);
    min-height: fit-content;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    @media (width >= 64rem) {
      height: fit-content;
    }
  }

  .message-box__icon {
    width: var(--length-16);
    height: var(--length-16);
    color: var(--color-primary-7);
    margin-inline: auto;
    margin-bottom: var(--length-1);
  }

  .message-box__heading {
    font-size: var(--font-size-lg-x2);
    font-weight: var(--font-weight-bolder);
    color: var(--color-primary-7);
    margin-bottom: var(--length-0-5);
  }

  .message-box__text {
    width: min(95%, var(--max-reach-lg-x2));
    margin-inline: auto;
  }

  .message-box__link {
    margin-top: var(--space-md);
    color: var(--color-primary-6);
    text-decoration: underline;
    &:hover {
      color: var(--color-primary-5);
    }
  }
}
@layer components {
  .multiple-menus {
    margin-top: var(--space-lg-x5);
  }

  .multiple-menus__menu-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x4);
    max-width: min(90%, var(--max-reach-lg-x8));
    margin-inline: auto;
  }

  .multiple-menus__scroll-effect {
    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
      opacity: 0;
      animation:
        slide-in-up linear both,
        fade-in linear both;
      animation-timeline: view();
      animation-range: entry 0vh exit -50vh;
    }
  }

  .multiple-menus__menu-item {
    display: flex;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: var(--length-96);
    box-shadow: var(--shadow-5);

    h2 {
      margin-inline: auto;
      font-size: var(--font-size-lg-x2);
      z-index: var(--z-2);
      color: white;
      background: oklch(from var(--color-black) l c h / 50%);
      padding-inline: var(--space-sm-x3);
      padding-block: var(--space-sm-x3);
    }

    img {
      filter: brightness(60%);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
@layer components {
  .nav-dialog {
    max-height: none;
    max-width: none;
    align-items: center;
    background: none;
    border: none;
    display: none;
    height: 100%;
    left: 0;
    margin: 0;
    overflow: auto;
    padding: var(--space-md);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition:
      opacity 0.5s ease-in-out,
      transform 0.5s ease-in-out,
      overlay 0.5s ease-in-out allow-discrete,
      display 0.5s ease-in-out allow-discrete;
    opacity: 0;
    transform: translateY(1em);
    &::backdrop {
      transition:
        display 0.5s allow-discrete,
        overlay 0.5s allow-discrete,
        background-color 0.5s;
      background-color: hsl(0 0 100 / 0);
      backdrop-filter: blur(15px);
    }

    &[open]::backdrop {
      background-color: hsl(0 0 100 / 75%);
    }

    &[open] {
      display: grid;
      opacity: 1;
      transform: translateY(0);
    }

    @starting-style {
      &[open] {
        opacity: 0;
        transform: translateY(-1em);
      }

      &[open]::backdrop {
        background-color: hsl(0 0 100 / 0);
      }
    }
  }

  .nav-dialog__inner-dialog {
    border-radius: var(--border-radius-2);
    display: grid;
    gap: var(--space-md);
    place-items: center;
    height: max-content;
    a {
      padding-bottom: var(--space-sm-x2);
      font-size: var(--font-size-lg-x2);
    }
    button {
      font-size: var(--font-size-md);
    }
  }
}
@layer components {
  .nav-mobile {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: var(--z-5);
    margin-bottom: calc(env(safe-area-inset-bottom) + var(--space-sm-x2));

    @media (width >= 64rem) {
      top: 0;
      bottom: unset;
      width: 100%;
      z-index: var(--z-5);
      margin-top: calc(env(safe-area-inset-top) + var(--space-lg-x1));
      margin-bottom: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
      opacity: 0;
      animation:
        var(--animation-fade-in) forwards,
        var(--animation-slide-in-up) forwards;
      animation-timing-function: var(--ease-out-5);
      animation-delay: 0.2s;
    }
  }

  .nav-mobile__content {
    display: flex;
    align-items: center;
    height: var(--length-12);
    border: var(--color-neutral-3) solid var(--border-width-1);
    background: var(--color-primary-1);
    backdrop-filter: blur(15px);
    width: min(95%, var(--max-reach-lg-x8));
    margin-inline: auto;
    box-shadow: var(--shadow-3);
  }

  .nav-mobile__text {
    margin-left: var(--space-lg-x1);
    color: var(--color-neutral-7);
    font-size: var(--font-size-sm-x2);
    font-style: italic;
    @media (width >= 48rem) {
      font-size: var(--font-size-sm-x1);
    }
  }

  .nav-mobile__image {
    position: absolute;
    width: fit-content;
    height: fit-content;
    background: oklch(from var(--color-black) l c h / 0.8);
    backdrop-filter: blur(10px);
    top: calc(var(--length-12) * -1);
    @media (width >= 64rem) {
      top: unset;
      bottom: calc(var(--length-8) * -1);
    }
    left: calc(
      50% - (var(--length-20) / 2) - (var(--border-width-1) / 2) -
        (var(--space-sm-x3) * 2)
    );

    padding: var(--space-sm-x3);
    border-radius: var(--border-radius-round);
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadow-6);
    border: var(--border-width-1) solid var(--color-primary-1);

    img {
      width: var(--length-20);
      height: var(--length-20);
    }
  }

  .nav-mobile__menu-button {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x4);
    cursor: pointer;
    margin-right: var(--space-lg-x2);
    color: var(--color-neutral-7);
    font-size: var(--font-size-sm-x2);
    margin-left: auto;
    text-decoration: underline;
    svg {
      width: var(--length-5);
      height: var(--length-5);
      color: var(--color-primary-2);
      color: var(--color-primary-5);
    }

    @media (width >= 48rem) {
      font-size: var(--font-size-sm-x1);
      svg {
        width: var(--length-6);
        height: var(--length-6);
      }
    }
  }
}
@layer components {
  .our-team {
    margin-inline: auto;
    margin-top: var(--space-lg-x5);
  }

  .our-team__title {
    width: min(90%, var(--max-reach-lg-x3));
    margin-inline: auto;
  }

  .our-team__team-members {
    margin-top: var(--space-lg-x2);
    width: min(90%, var(--max-reach-lg-x3));
    margin-inline: auto;
    display: grid;
    gap: var(--space-lg-x3);
    @media (width >= 64rem) {
      width: min(90%, var(--max-reach-lg-x8));
    }
  }

  .our-team__team-member {
    padding: var(--space-lg-x1);
    background-color: var(--color-white);
    box-shadow: var(--shadow-4);
    border: var(--border-width-1) solid var(--color-neutral-2);

    img {
      margin-inline: auto;
      aspect-ratio: 1 / 1;
      width: var(--length-52);
      height: auto;
      box-shadow: var(--shadow-4);
      border: var(--border-width-1) solid var(--color-neutral-2);
    }

    @media (width >= 64rem) {
      display: flex;
      gap: var(--space-md);

      img {
        width: var(--length-96);
        margin-block: auto;
      }
    }

    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
      opacity: 0;
      animation:
        slide-in-up linear both,
        fade-in linear both;
      animation-timeline: view();
      animation-range: entry -30vh exit -40vh;
    }
  }

  .our-team__team-member-info {
    flex-shrink: 0;
  }

  .our-team__team-member-title {
    text-align: center;
    margin-top: var(--space-md);
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bolder);
    color: var(--color-primary-6);
    @media (width >= 64rem) {
      text-align: left;
    }
  }

  .our-team__team-member-subtitle {
    text-align: center;
    color: var(--color-neutral-5);
    @media (width >= 64rem) {
      text-align: left;
    }
  }
  .our-team__team-member-description {
    margin-top: var(--space-sm-x3);
    line-height: var(--line-height-loose);
  }
}
@layer components {
  .private-bookings {
    margin-block: var(--space-lg-x5);
    padding-inline: var(--space-sm-x1);
  }

  .private-booking__images {
    margin-top: var(--space-lg-x1);
    display: grid;
    gap: var(--space-lg-x1);
    width: min(95%, 90rem);
    margin-inline: auto;
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-sm-x2);
    }
  }

  .private-bookings__image {
    width: min(95%, var(--max-reach-lg-x6));
    height: auto;
    box-shadow: var(--shadow-4);
    margin-inline: auto;
  }

  .private-bookings__image--brighter {
    filter: brightness(1.3);
  }
}
@layer components {
  .reviews {
    margin-top: var(--space-lg-x5);
    width: min(90%, var(--max-reach-lg-x5));
    margin-inline: auto;

    ul {
      margin-top: var(--space-lg-x2);
      display: flex;
      flex-direction: column;
      gap: var(--space-lg-x3);
    }
  }

  .reviews__review {
    background: var(--color-white);
    padding: var(--space-lg-x1) var(--space-lg-x1);
    box-shadow: var(--shadow-4);
    border: var(--border-width-1) solid var(--color-neutral-2);
    border-radius: var(--border-radius-2);

    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
      opacity: 0;
      animation:
        slide-in-up linear both,
        fade-in linear both;
      animation-timeline: view();
      animation-range: entry 0vh exit -50vh;
    }
  }

  .reviews__review-text {
    margin-top: var(--space-sm-x1);
    line-height: var(--line-height-loosest);
  }

  .reviews__highlight {
    font-weight: var(--font-weight-semi-bold);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-color: var(--color-primary-1);
    color: var(--color-primary-6);
    padding-inline: var(--space-sm-x3);
    padding-block: var(--space-sm-x4);
    border-radius: var(--border-radius-2);
  }

  .reviews__hangbox {
    margin-top: var(--space-lg-x1);
    display: flex;
    place-items: center;
    gap: var(--space-sm-x2);
  }

  .reviews__review-name {
    font-weight: var(--font-weight-semi-bold);
  }

  .reviews__review-image {
    width: var(--length-12);
    height: var(--length-12);
    border-radius: var(--border-radius-round);
    box-shadow: var(--shadow-4);
  }

  .reviews__stars {
    margin-top: var(--space-sm-x3);
    display: flex;
    place-items: center;
    gap: var(--space-sm-x4);
    color: var(--color-primary-3);
    svg {
      width: var(--length-6);
      height: var(--length-6);

      @media (width >= 48rem) {
        width: var(--length-8);
        height: var(--length-8);
      }
    }
  }

  .reviews__link {
    margin-top: var(--space-md);
    display: block;
    width: fit-content;
    text-decoration: underline;
    color: var(--color-neutral-6);
    font-size: var(--font-size-sm-x2);
    svg {
      display: inline;
      vertical-align: text-bottom;
      width: var(--length-4);
      height: var(--length-4);
    }
  }

  .reviews__footer {
    margin-top: var(--space-lg-x2);
    padding-bottom: var(--space-sm-x1);
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-full);
    text-align: center;
    letter-spacing: var(--letter-spacing-tight);
    text-decoration: underline;
    text-decoration-color: var(--color-primary-5);
    max-width: 18ch;
    margin-inline: auto;

    @supports ((animation-timeline: view()) and (animation-range: 0% 100%)) {
      opacity: 0;
      animation:
        slide-in-up linear both,
        fade-in linear both;
      animation-timeline: view(block);
      animation-range: entry 0vh exit -50vh;
    }
  }
}
@layer components {
  .timeline {
    margin-top: var(--space-lg-x5);
    overflow: clip;
  }

  .timeline__timeslot {
    position: relative;
    color: var(--color-white);
  }

  .timeline__background-follow {
    position: sticky;
    top: 0;
    width: 100%;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      object-fit: cover;
      filter: brightness(60%) blur(4px);
    }
  }

  .timeline__dashed {
    height: 100%;
    position: absolute;
    right: 50%;
    width: var(--length-1);
    border-right-width: var(--border-width-4);
    border-style: dashed;
    border-color: oklch(from var(--color-primary-1) l c h / 80%);
    @media (width >= 48rem) {
      right: 33.3%;
    }
  }

  .timeline__yeardot {
    position: absolute;
    width: var(--length-8);
    height: var(--length-8);
    left: calc((var(--length-8) - var(--border-width-4)) * -0.5);
    top: var(--space-lg-x2);
    background-color: var(--color-primary-1);

    @media (width >= 48rem) {
      width: var(--length-12);
      height: var(--length-12);
      left: calc((var(--length-12) - var(--border-width-4)) * -0.5);
      top: var(--space-lg-x4);
    }
  }

  .timeline__year {
    background-color: oklch(from var(--color-primary-9) l c h / 80%);
    color: var(--color-primary-1);
    padding-inline: var(--space-sm-x3);
    position: absolute;
    right: calc(100% + 1rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-lg-x3);
    font-weight: var(--font-weight-bolder);
  }

  .timeline__details {
    position: relative;
    z-index: var(--z-2);
    padding-block: var(--length-44);
    height: fit-content;
    display: grid;
    gap: var(--space-md);
    width: min(90%, var(--max-reach-lg-x1));
    margin-inline: auto;
    place-content: center;

    @media (width >= 48rem) {
      width: min(95%, var(--max-reach-lg-x6));
      padding-block: var(--length-72);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .timeline__box {
    background-color: oklch(from var(--color-primary-9) l c h / 80%);
    padding-inline: var(--space-md);
    padding-block: var(--space-md);
    margin-block: auto;

    h2 {
      font-size: var(--font-size-lg-x1);
      font-weight: var(--font-weight-bolder);
      color: var(--color-primary-1);
    }
    p {
      margin-top: var(--space-sm-x3);
      line-height: var(--line-height-loosest);
      color: var(--color-neutral-1);
    }
  }

  .timeline__box-image {
    margin-block: auto;

    img {
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      box-shadow: var(--shadow-4);
      @media (width >= 48rem) {
        aspect-ratio: 4 / 3;
      }
    }
  }
}