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

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(0.25, 0, 0.5, 1);
    --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
    --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
    --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
    --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
    --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
    --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
    --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
    --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
    --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
    --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
    --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
    --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
    --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
    --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
    --ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
    --ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
    --ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
    --ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
    --ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);

    --animation-fade-in: fade-in 0.5s var(--ease-3);
    --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
    --animation-fade-out: fade-out 0.5s var(--ease-3);
    --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
    --animation-scale-up: scale-up 0.5s var(--ease-3);
    --animation-scale-down: scale-down 0.5s var(--ease-3);
    --animation-slide-out-up: slide-out-up 0.5s var(--ease-3);
    --animation-slide-out-down: slide-out-down 0.5s var(--ease-3);
    --animation-slide-out-right: slide-out-right 0.5s var(--ease-3);
    --animation-slide-out-left: slide-out-left 0.5s var(--ease-3);
    --animation-slide-in-up: slide-in-up 0.5s var(--ease-3);
    --animation-slide-in-down: slide-in-down 0.5s var(--ease-3);
    --animation-slide-in-right: slide-in-right 0.5s var(--ease-3);
    --animation-slide-in-left: slide-in-left 0.5s var(--ease-3);
    --animation-shake-x: shake-x 0.75s var(--ease-out-5);
    --animation-shake-y: shake-y 0.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 (width >= 48rem) {
    :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(0.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: 0.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(0.9, 0.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: oklch(0.585 0.2395 29.31);
    --default-color-secondary: var(--color-black);
    --default-color-bg: var(--color-white);

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

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

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

  /* For Webkit-based browsers (Chrome, Safari and Opera) */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* For IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

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

  @keyframes slowzoom {
    0% {
      scale: 1;
    }
    100% {
      scale: 1.25;
    }
  }

  @keyframes attention-shake {
    0% {
      translate: 0;
    }
    2% {
      translate: 5px;
    }
    4% {
      translate: -5px;
    }
    6% {
      translate: 5px;
    }
    8%,
    100% {
      translate: 0;
    }
  }

  @keyframes xshift {
    0% {
      transform: translateX(0%);
      transform: scale(1);
    }

    100% {
      transform: translateX(-15%);
      transform: scale(1.1);
    }
  }

  @keyframes pulsating {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
@layer components {
  .about-header {
    position: relative;
    z-index: var(--z-0);
    height: 80vh;
    max-height: 400px;
    background: var(--color-black);
  }

  .about-header__container {
    position: relative;
    display: flex;
    align-items: end;
    height: 100%;
    padding-bottom: var(--space-lg-x1);
  }

  .about-header__content {
    position: relative;
    z-index: var(--z-2);
    margin-inline: auto;
    display: grid;
    width: 100%;
    max-width: var(--max-reach-sm-x3);
    gap: var(--space-md);
    color: var(--color-white);
  }

  .about-header__title {
    display: grid;
    gap: var(--space-sm-x3);
    text-align: center;
    font-size: var(--font-size-lg-x5);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-white);
    text-shadow: 1px 1px 2px var(--color-black);
  }

  .about-header__breadcrumb {
    display: flex;
    justify-content: center;
    gap: var(--space-sm-x3);
    font-size: var(--font-size-sm-x3);
  }

  .about-header__breadcrumb-current {
    font-weight: var(--font-weight-bold);
  }

  .about-header__image-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    height: 66.667%;
    width: 100%;
    overflow: hidden;
  }

  .about-header__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
    filter: brightness(0.95) contrast(1.1);
    animation: xshift 10s ease-in-out alternate infinite;
  }

  .about-header__overlay {
    position: absolute;
    left: 0;
    top: 0;
    z-index: var(--z-1);
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to top,
      var(--color-black),
      var(--color-black),
      transparent 50%
    );
  }

  @media (width >= 40em) {
    .about-header__content {
      max-width: var(--max-reach-sm-x2);
    }

    .about-header__title {
      margin-inline: auto;
    }
  }

  @media (width >= 48em) {
    .about-header__content {
      max-width: var(--max-reach-lg-x8);
      gap: var(--space-lg-x1);
    }
  }

  @media (width >= 64em) {
    .about-header {
      margin-block-start: var(--space-lg-x5);
    }

    .about-header__container {
      align-items: center;
      padding: var(--space-lg-x1);
      padding-inline: 3.5rem;
    }

    .about-header__content {
      margin-inline: auto;
    }

    .about-header__title {
      margin: 0;
      max-width: none;
      gap: var(--space-sm-x2);
      text-align: start;
    }

    .about-header__breadcrumb {
      order: -1;
      justify-content: start;
    }

    .about-header__image-wrapper {
      height: 100%;
      width: 60%;
    }

    .about-header__image {
      object-position: center 55%;
    }

    .about-header__overlay {
      background: linear-gradient(
        to right,
        var(--color-black),
        var(--color-black),
        transparent 50%
      );
    }
  }

  @media (width >= 80em) {
    .about-header__breadcrumb {
      font-size: var(--font-size-sm-x2);
    }

    .about-header__overlay {
      background: linear-gradient(
        to right,
        var(--color-black),
        var(--color-black) 45%,
        transparent 60%
      );
    }
  }

  @media (width >= 96em) {
    .about-header__title {
      font-size: 300%;
    }
  }
}
@layer components {
  .about-innovation {
    position: relative;
    overflow: hidden;
    background: var(--color-black);
    color: var(--color-white);
    padding-block: 8rem;
  }

  .about-innovation__background {
    position: absolute;
    inset: 0;
    filter: brightness(0.3);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-innovation__container {
    position: relative;
    margin-inline: auto;
    display: grid;
    max-width: var(--max-reach-lg-x8);
    gap: var(--space-md);
  }

  .about-innovation__content {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 65ch;
    padding-inline: var(--space-lg-x2);
  }

  .about-innovation__decorative-image {
    position: absolute;
    width: 33.333%;
    aspect-ratio: 1;
    min-width: var(--length-40);
    max-width: var(--length-52);
    top: var(--length-12);
    left: var(--length-2);
    rotate: -12deg;
    object-fit: contain;
    opacity: 0.5;
    height: auto;
  }

  .about-innovation__content-inner {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: var(--space-md);
  }

  .about-innovation__title {
    height: min-content;
    text-align: center;
    font-size: var(--font-size-lg-x4);

    & span {
      color: var(--color-primary-7);
    }
  }

  .about-innovation__gallery {
    position: relative;
    margin-inline: auto;
    display: grid;
    height: var(--length-72);
    max-height: var(--max-reach-lg-x3);
    width: 100%;
    gap: var(--space-sm-x1);

    & img {
      position: absolute;
      height: fit-content;
      width: 75%;
      min-width: var(--length-60);
      max-width: var(--length-72);
      border-radius: var(--border-radius-3);
      object-fit: contain;
      box-shadow: var(--shadow-4);
    }
  }

  .about-innovation__gallery-image--top {
    top: 0;
    right: 0;
    border-left: var(--border-width-1) solid var(--color-primary-7);
    border-right: var(--border-width-1) solid var(--color-primary-7);
    border-top: var(--border-width-1) solid var(--color-primary-7);
    box-shadow:
      0 10px 15px -3px oklch(from var(--color-primary-7) l c h / 50%),
      0 4px 6px -4px oklch(from var(--color-primary-7) l c h / 50%);
  }

  .about-innovation__gallery-image--center {
    display: none;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-right: var(--border-width-1) solid var(--color-primary-7);
    box-shadow:
      0 10px 15px -3px oklch(from var(--color-primary-7) l c h / 50%),
      0 4px 6px -4px oklch(from var(--color-primary-7) l c h / 50%);
  }

  .about-innovation__gallery-image--bottom {
    bottom: 0;
    left: 0;
  }

  .about-innovation__details {
    margin-inline: auto;
    display: flex;
    width: fit-content;
    flex-direction: column;
    gap: var(--space-lg-x1);
    padding-inline: var(--space-lg-x2);
  }

  .about-innovation__details-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x2);
  }

  .about-innovation__details-description {
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-loose);
    color: var(--color-neutral-1);
  }

  .about-innovation__checklist {
    margin-inline: auto;
    display: flex;
    width: 100%;
    max-width: 65ch;
    flex-direction: column;
    gap: var(--space-sm-x1);
  }

  .about-innovation__checklist-title {
    font-size: var(--font-size-lg-x2);
    font-weight: var(--font-weight-bold);
  }

  .about-innovation__checklist-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x1);
    overflow: hidden;
  }

  .about-innovation__checklist-item {
    display: flex;
    gap: var(--space-sm-x3);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-loose);
    color: var(--color-neutral-1);
  }

  .about-innovation__checklist-icon {
    width: var(--length-7);
    height: var(--length-7);
    fill: var(--color-primary-6);
    flex-shrink: 0;
    margin-block-start: 0.125rem;
  }

  .about-innovation__checklist-item-enter {
    transition: all 1s ease-in-out;
  }

  .about-innovation__checklist-item-enter--from {
    translate: var(--length-10) 0;
    opacity: 0;
  }

  .about-innovation__checklist-item-enter--to {
    translate: 0 0;
    opacity: 1;
  }

  @media (width >= 48em) {
    .about-innovation__container {
      gap: var(--space-lg-x2);
      padding-inline: var(--space-lg-x3);
      padding-block-end: 3.5rem;
      padding-block-start: var(--space-lg-x5);
    }

    .about-innovation__content {
      padding: 0;
    }

    .about-innovation__content-inner {
      gap: var(--space-lg-x2);
    }

    .about-innovation__decorative-image {
      width: var(--length-64);
      max-width: none;
      top: calc(-1 * var(--length-4));
      left: calc(-1 * var(--length-12));
    }

    .about-innovation__gallery {
      & img {
        max-width: var(--length-80);
      }
    }

    .about-innovation__details {
      gap: var(--space-lg-x4);
    }

    .about-innovation__checklist {
      gap: var(--space-md);
    }

    .about-innovation__checklist-list {
      gap: var(--space-md);
    }

    .about-innovation__checklist-item {
      gap: var(--space-sm-x2);
    }
  }

  @media (width >= 64em) {
    .about-innovation__container {
      grid-template-columns: 6fr 5fr;
      padding-block: 6rem;
    }

    .about-innovation__content {
      max-width: none;
    }

    .about-innovation__content-inner {
      gap: 7rem;
    }

    .about-innovation__title {
      text-align: start;
    }

    .about-innovation__gallery {
      height: 100%;

      & img {
        width: 100%;
        max-width: var(--length-96);
        border-radius: 1.5rem;
      }
    }

    .about-innovation__gallery-image--center {
      display: block;
    }

    .about-innovation__details {
      padding-inline: 0;
      padding-block-end: 0;
    }

    .about-innovation__details-inner {
      gap: var(--space-md);
    }

    .about-innovation__decorative-image {
      left: calc(-1 * var(--length-8));
      top: calc(-1 * var(--length-12));
    }

    .about-innovation__checklist {
      gap: var(--space-sm-x1);
    }

    .about-innovation__checklist-list {
      gap: var(--space-sm-x1);
    }

    .about-innovation__checklist-item {
      gap: var(--space-sm-x3);
    }
  }

  @media (width >= 80em) {
    .about-innovation__container {
      grid-template-columns: 5fr 6fr;
      gap: var(--space-lg-x4);
    }

    .about-innovation__content-inner {
      gap: 9rem;
    }

    .about-innovation__gallery {
      & img {
        max-width: 26rem;
      }
    }

    .about-innovation__details-inner {
      gap: var(--space-lg-x2);
    }

    .about-innovation__decorative-image {
      top: calc(-1 * var(--length-6));
    }

    .about-innovation__checklist {
      gap: var(--space-md);
    }

    .about-innovation__checklist-list {
      gap: var(--space-md);
    }

    .about-innovation__checklist-item {
      gap: var(--space-sm-x2);
    }
  }
}
@layer components {
  .about-videos {
    display: grid;
    gap: var(--space-lg-x2);
    overflow: hidden;
    border-start-start-radius: 1.5rem;
    border-start-end-radius: 1.5rem;
    border-block-start: var(--border-width-1) solid var(--color-neutral-3);
    background: linear-gradient(to bottom, var(--color-neutral-6), var(--color-neutral-9) 25%);
    padding-block-start: 7rem;
    padding-block-end: 9rem;
  }

  .about-videos__heading {
    padding-inline: var(--space-lg-x1);
    text-align: center;
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-white);

    & span {
      color: var(--color-primary-4);
    }
  }

  .about-videos__list {
    display: grid;
    justify-items: center;
    gap: var(--space-lg-x1);
    margin-inline: auto;
  }

  .about-videos__item {
    width: 100%;
  }

  .about-videos__card {
    margin-inline: auto;
    width: 75%;
    flex-shrink: 0;
    transform-origin: top;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--border-radius-3);
    border: var(--border-width-1) solid var(--color-neutral-6);
    background: var(--color-white);
    transition: all 0.3s ease;
  }

  .about-videos__card-inner {
    position: relative;
    margin-inline: auto;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
  }

  .about-videos__player-wrapper {
    position: relative;
  }

  .about-videos__player-overlay {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }

  @keyframes about-videos-colour-pulse {
    0% {
      background: var(--color-primary-7);
    }
    20% {
      background: var(--color-primary-8);
    }
    40% {
      background: var(--color-primary-7);
    }
    100% {
      background: var(--color-primary-7);
    }
  }

  .about-videos__play-button {
    animation: about-videos-colour-pulse 3s ease-in-out infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm-x4);
    border-radius: 0.75rem;
    background: var(--color-primary-7);
    padding-inline: var(--space-md);
    padding-block: var(--space-sm-x3);
    font-size: var(--font-size-sm-x2);
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    box-shadow: 0 1px 2px 0 var(--color-neutral-9);
    transition: all 0.3s ease;

    &:hover {
      animation: none;
      color: var(--color-white);
    }

    & svg {
      width: var(--length-6);
      height: var(--length-6);
      fill: transparent;
      stroke: var(--color-white);
    }
  }

  .about-videos__play-label {
    font-size: inherit;
  }

  .about-videos__duration {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    border-radius: var(--border-radius-2);
    background: oklch(from var(--color-neutral-9) l c h / 50%);
    padding-inline: var(--space-sm-x3);
    padding-block: var(--space-sm-x4);
    font-size: var(--font-size-sm-x2);
    color: var(--color-white);
  }

  .about-videos__youtube-icon {
    position: absolute;
    bottom: 0.5rem;
    left: 0.75rem;
    z-index: 1;
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
      drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));

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

  .about-videos__cover-image {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    cursor: pointer;
    object-fit: cover;
    height: auto;
  }

  .about-videos__title {
    margin: auto;
    display: block;
    width: 100%;
    height: min-content;
    padding: var(--space-sm-x1);
    text-align: center;
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
    transition: all 0.3s ease;
  }

  .about-videos__card-enter {
    transition: all 1s ease-in-out;
  }

  .about-videos__card-enter-from {
    translate: 50%;
    rotate: 0deg;
    opacity: 0;
  }

  @media (width >= 40em) {
    .about-videos {
      padding-inline: var(--space-lg-x1);
    }

    .about-videos__list {
      max-width: var(--max-reach-lg-x6);
      grid-template-columns: repeat(2, 1fr);
    }

    .about-videos__card {
      height: auto;
      width: 100%;
    }

    .about-videos__card-enter-from {
      scale: 0.9;
      translate: 0;
    }
  }

  @media (width >= 48em) {
    .about-videos__play-button {
      & svg {
        width: var(--length-10);
        height: var(--length-10);
      }
    }

    .about-videos__play-label {
      font-size: var(--font-size-md);
    }

    .about-videos__duration {
      font-size: var(--font-size-sm-x1);
    }

    .about-videos__youtube-icon {
      & svg {
        width: var(--length-10);
        height: var(--length-10);
      }
    }

    .about-videos__title {
      padding: var(--space-md);
    }
  }

  @media (width >= 64em) {
    .about-videos {
      gap: var(--space-lg-x3);
    }

    .about-videos__list {
      padding-inline: var(--space-sm-x1);
    }

    .about-videos__card {
      height: 100%;

      &:hover {
        scale: 1.05;
      }
    }

    .about-videos__card-inner {
      max-width: var(--max-reach-lg-x5);
    }

    .about-videos__play-button {
      font-size: var(--font-size-md);

      &:hover {
        translate: -50% calc(-50% - 0.5rem);
        text-decoration-color: var(--color-white);
      }
    }

    .about-videos__card:hover .about-videos__title {
      background: var(--color-primary-7);
      color: var(--color-white);
    }

    .about-videos__card-enter {
      transition-duration: 0.7s;
    }
  }
}
@layer components {
  .accepted-payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm-x3);
  }

  .accepted-payments__item {
    width: var(--length-14);
    height: var(--length-14);
  }

  .accepted-payments__icon {
    width: 100%;
    height: 100%;
  }

  @media (width >= 64em) {
    .accepted-payments {
      justify-content: start;
    }
  }
}
@layer components {
  .brands-associated {
    width: 100%;
    background: linear-gradient(to bottom, var(--color-neutral-8), var(--color-neutral-9));
    padding-block: var(--space-lg-x5);
  }

  .brands-associated__container {
    position: relative;
    margin-inline: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-lg-x1);
    overflow: hidden;
  }

  .brands-associated__header {
    padding-inline: var(--space-sm-x1);
    text-align: center;
  }

  .brands-associated__scroll-area {
    overflow-x: auto;
  }

  .brands-associated__list {
    display: flex;
    gap: var(--space-sm-x1);
    padding-block-end: var(--space-sm-x2);
    animation: marquee 30s linear infinite;

    &:hover,
    &:has(:hover) {
      animation-play-state: paused;
    }
  }

  .brands-associated__item {
    aspect-ratio: 16 / 9;
    width: var(--length-60);
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-white);
    padding: var(--space-lg-x2);
    border-radius: var(--border-radius-2);
    box-shadow: var(--shadow-3);
    transition: all 150ms ease;

    &:active {
      scale: 0.9;
    }
  }

  .brands-associated__link {
    width: var(--length-40);
    height: var(--length-40);
  }

  .brands-associated__image {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 700ms ease;
  }

  .brands-associated__item:hover .brands-associated__image {
    scale: 1.1;
  }

  @media (width >= 48em) {
    .brands-associated {
      padding-block: 8em;
    }

    .brands-associated__list {
      gap: var(--space-lg-x1);
    }
  }

  @media (width >= 64em) {
    .brands-associated {
      padding-block: 9em;
    }
  }
}
@layer components {
  .button {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm-x1);
    gap: var(--button-gap, var(--length-2));
    color: var(--button-color, var(--color-primary-0));
    width: var(--button-width, fit-content);
    border: var(--border-width-1) solid var(--button-color-border);
    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: 300ms 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__circle {
          scale: 12;
        }
      }
    }

    &:active {
      scale: 0.9;
    }
  }

  .button__icon-wrapper {
    position: relative;
    z-index: var(--z-1);
    height: fit-content;
    transition: translate 300ms ease-out;
  }

  .button__icon {
    position: relative;
    z-index: var(--z-1);
    width: var(--button-icon-size, var(--length-6));
    height: var(--button-icon-size, var(--length-6));
  }

  .button__circle {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: var(--button-circle-size, var(--length-9));
    height: var(--button-circle-size, var(--length-9));
    border-radius: var(--button-circle-radius, 0.75rem);
    background-color: var(--button-circle-background, var(--color-primary-6));
    transition: 500ms ease-in-out;
    transition-property: scale, border-radius, background-color;
  }

  .button__label {
    position: relative;
    z-index: var(--z-1);
  }

  /* Dark variant
  /* ------------------------------------------------------------------------ */

  .button--dark {
    --button-background: var(--color-neutral-9);
    --button-color: var(--color-white);
    --button-border-radius: var(--border-radius-3);
    --button-box-shadow: var(--shadow-2);
    --button-padding: var(--space-sm-x2) var(--space-sm-x1);
    --button-gap: var(--length-5);
    --button-circle-background: var(--color-primary-6);
    --button-color-border: var(--color-neutral-3);

    @media (any-hover: hover) {
      &:hover {
        --button-hover: var(--color-neutral-9);
      }

      &:hover .button__icon-wrapper {
        translate: 0.125rem;
      }

      &:hover .button__circle {
        scale: 10;
        border-radius: 0.5rem;
        background-color: var(--color-primary-5);
      }
    }
  }

  /* Media queries (smallest → largest)
  /* ------------------------------------------------------------------------ */

  @media (width >= 64em) {
    .button--dark {
      &:hover .button__circle {
        scale: 12;
      }
    }
  }
}
@layer components {
  .client-success-stories {
    width: 100%;
    height: 100%;
    background: var(--color-neutral-0);
    padding-block: var(--space-lg-x5);
  }

  .client-success-stories__container {
    margin-inline: auto;
    display: grid;
    gap: var(--space-sm-x1);
  }

  .client-success-stories__header {
    margin-inline: auto;
    display: grid;
    width: 100%;
    max-width: var(--max-reach-lg-x8);
    gap: var(--space-md);
    padding-inline: var(--space-lg-x1);
    text-align: center;
    margin-inline: auto;
    text-align: center;
  }

  .client-success-stories__scroll-wrapper {
    display: grid;
    gap: var(--space-lg-x1);
    padding-block: var(--space-md);
  }

  .client-success-stories__scroll-track {
    position: relative;
    display: grid;
    width: 100%;
  }

  .client-success-stories__scroll-inner {
    position: relative;
    display: grid;
  }

  .client-success-stories__fade {
    position: absolute;
    z-index: var(--z-1);
    display: none;
    height: 100%;
    width: var(--length-3);
    flex-shrink: 0;
  }

  .client-success-stories__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--color-neutral-0), transparent);
  }

  .client-success-stories__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--color-neutral-0), transparent);
  }

  .client-success-stories__list {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    padding-block-end: var(--space-lg-x1);
  }

  .client-success-stories__item {
    display: flex;
    width: 80%;
    max-width: var(--max-reach-sm-x3);
    flex-shrink: 0;
    padding-inline: var(--space-sm-x3);

    &:first-child {
      margin-inline-start: var(--space-sm-x1);
    }

    &:last-child {
      margin-inline-end: var(--space-sm-x1);
    }
  }

  .client-success-stories__card {
    position: relative;
    display: grid;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    overflow: hidden;
    border-radius: var(--border-radius-3);
    border-block-start: var(--border-width-1) solid var(--color-primary-1);
    border-block-end: var(--border-width-1) solid var(--color-primary-1);
    border-inline-end: var(--border-width-1) solid var(--color-primary-1);
    background: var(--color-white);
    padding: var(--space-sm-x1);
    box-shadow: var(--shadow-3);
  }

  .client-success-stories__card--with-logo {
    gap: var(--space-sm-x1);
    align-content: space-between;
  }

  .client-success-stories__card--without-logo {
    gap: 0;
  }

  .client-success-stories__card-content {
    display: grid;
    gap: var(--space-sm-x1);
  }

  .client-success-stories__quote-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x1);
  }

  .client-success-stories__quote-icon {
    width: var(--length-12);
    height: var(--length-12);
    border-radius: var(--border-radius-round);
    background: var(--color-primary-6);
    padding: var(--space-sm-x1);

    & svg {
      width: 100%;
      height: 100%;
      color: var(--color-white);
    }
  }

  .client-success-stories__quote-svg {
    width: var(--length-6);
    height: var(--length-6);
  }

  .client-success-stories__story-title {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
  }

  .client-success-stories__story-body {
  }

  .client-success-stories__story-description {
    padding-inline: var(--space-sm-x4);
    font-weight: var(--font-weight-light);
  }

  .client-success-stories__story-divider {
    display: none;
    height: var(--length-0-5);
    width: 50%;
    background: var(--color-primary-7);
  }

  .client-success-stories__reviewer {
    display: grid;
    width: 100%;
    gap: var(--space-sm-x1);
    padding-block-end: var(--space-sm-x1);
  }

  .client-success-stories__reviewer-name {
    display: flex;
    width: 66.667%;
    padding-inline: var(--space-sm-x4);
    font-weight: var(--font-weight-bold);
  }

  .client-success-stories__company-logo-mobile {
    height: var(--length-24);
    width: 50%;
    max-width: var(--length-44);
    padding-block: var(--space-sm-x2);
    padding-inline-start: var(--space-sm-x4);
    padding-inline-end: var(--space-sm-x1);
  }

  .client-success-stories__media {
    margin-block-start: auto;
    height: fit-content;
  }

  .client-success-stories__reviewer-image--with-logo {
    position: absolute;
    bottom: var(--length-0-5);
    right: var(--length-0-5);
    aspect-ratio: 1;
    border-bottom-right-radius: var(--border-radius-3);
    height: var(--length-44);
    width: 50%;
    overflow: hidden;
    border-start-start-radius: 100px;
    border: var(--border-width-1) solid var(--color-neutral-1);
  }

  .client-success-stories__reviewer-image--without-logo {
    margin-block-start: -1.25rem;
    margin-inline-start: auto;
    aspect-ratio: 1;
    max-height: var(--length-52);
    width: 100%;
    max-width: var(--length-72);
    translate: 1.25rem 1.25rem;
    overflow: hidden;
    border-start-start-radius: 100px;
    border: var(--border-width-1) solid var(--color-neutral-1);
    border-block-end: 0;
    border-inline-end: 0;
    box-shadow: var(--shadow-3);
  }

  .client-success-stories__company-logo-desktop {
    display: none;
    padding-inline: var(--space-sm-x1);
  }

  .client-success-stories__image--cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .client-success-stories__image--contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    height: auto;
  }

  .client-success-stories__scroll-button {
    position: absolute;
    top: 50%;
    z-index: var(--z-2);
    display: none;
    width: var(--length-14);
    height: var(--length-14);
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-round);
    border: var(--border-width-1) solid var(--color-white);
    background: var(--color-primary-6);
    cursor: pointer;
    color: var(--color-black);
    opacity: 0;
    box-shadow: var(--shadow-4);
    transition: all 150ms;

    &:hover {
      scale: 1.05;
      background: var(--color-primary-6);
    }

    &:active {
      scale: 0.9;
    }
  }

  .client-success-stories__scroll-button--left {
    left: 1rem;
  }

  .client-success-stories__scroll-button--right {
    right: 1rem;
  }

  .client-success-stories__scroll-button-icon {
    width: var(--length-6);
    height: var(--length-6);
    color: var(--color-white);
  }

  .client-success-stories__footer {
    margin-inline: auto;
  }

  /* ============================================
     Responsive: sm (≥40em)
     ============================================ */
  @media (width >= 40em) {
    .client-success-stories__item {
      max-width: none;
      padding-inline: var(--space-sm-x1);
    }

    .client-success-stories__card {
      grid-template-columns: repeat(3, 1fr);
      padding: var(--space-lg-x1);
    }

    .client-success-stories__card--without-logo {
      gap: var(--space-sm-x1);
    }

    .client-success-stories__card-content {
      grid-column: span 2;
    }

    .client-success-stories__quote-icon {
      width: var(--length-14);
      height: var(--length-14);
    }

    .client-success-stories__story-body {
      display: grid;
      gap: var(--space-sm-x3);
    }

    .client-success-stories__story-description {
      padding-inline: 0;
    }

    .client-success-stories__story-divider {
      display: block;
    }

    .client-success-stories__reviewer {
      padding-block-end: 0;
    }

    .client-success-stories__company-logo-mobile {
      display: none;
    }

    .client-success-stories__media {
      display: grid;
      width: 100%;
      height: 100%;
      place-content: center;
      gap: var(--space-sm-x2);
    }

    .client-success-stories__reviewer-image--with-logo {
      position: static;
      width: 100%;
      height: 100%;
      border-radius: var(--border-radius-round);
    }

    .client-success-stories__reviewer-image--without-logo {
      position: static;
      margin-block-start: 0;
      width: 100%;
      height: 100%;
      translate: 0 0;
      border-radius: var(--border-radius-round);
    }

    .client-success-stories__company-logo-desktop {
      display: flex;
      max-height: var(--length-20);
    }
  }

  /* ============================================
     Responsive: md (≥48em)
     ============================================ */
  @media (width >= 48em) {
    .client-success-stories__reviewer-name {
      font-size: var(--font-size-lg-x1);
    }
  }

  /* ============================================
     Responsive: lg (≥64em)
     ============================================ */
  @media (width >= 64em) {
    .client-success-stories__scroll-wrapper {
      gap: var(--space-lg-x3);
    }

    .client-success-stories__scroll-track {
      margin-inline: auto;
      max-width: var(--max-reach-lg-x6);
    }

    .client-success-stories__scroll-inner {
      margin-inline: auto;
      max-width: var(--max-reach-lg-x4);
    }

    .client-success-stories__fade {
      display: block;
    }

    .client-success-stories__item {
      width: 100%;
      padding-inline: var(--space-lg-x2);

      &:first-child {
        margin-inline-start: var(--space-lg-x2);
      }

      &:last-child {
        margin-inline-end: var(--space-lg-x2);
      }
    }

    .client-success-stories__card {
      margin-inline-start: auto;
      gap: var(--space-lg-x5);
      padding: var(--space-lg-x2);
    }

    .client-success-stories__scroll-button {
      display: flex;
    }

    .client-success-stories__scroll-track:hover
      .client-success-stories__scroll-button {
      translate: 0 -50%;
      opacity: 1;
    }
  }

  /* ============================================
     Responsive: xl (≥80em)
     ============================================ */
  @media (width >= 80em) {
    .client-success-stories__scroll-track {
      max-width: var(--max-reach-lg-x8);
    }

    .client-success-stories__scroll-inner {
      max-width: var(--max-reach-lg-x6);
    }

    .client-success-stories__scroll-button {
      width: var(--length-16);
      height: var(--length-16);
    }

    .client-success-stories__scroll-button-icon {
      width: var(--length-8);
      height: var(--length-8);
    }
  }

  /* ============================================
     Responsive: 2xl (≥96em)
     ============================================ */
  @media (width >= 96em) {
    .client-success-stories__scroll-track {
      max-width: 90rem;
    }

    .client-success-stories__scroll-inner {
      max-width: var(--max-reach-lg-x7);
    }
  }
}
@layer components {
  .comparison-table {
    display: grid;
    gap: var(--space-lg-x1);
    border-radius: 0.5rem;
    border: var(--border-width-1) solid var(--color-neutral-0);
    background: var(--color-white);
    padding: var(--space-sm-x1);
    box-shadow: var(--shadow-3);
  }

  .comparison-table__header {
    position: relative;
  }

  .comparison-table__badge {
    position: absolute;
    bottom: -0.75rem;
    left: 50%;
    translate: -50%;
    display: flex;
    width: var(--length-8);
    height: var(--length-8);
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-round);
    background: var(--color-black);
    font-size: var(--font-size-sm-x2);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }

  .comparison-table__company-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm-x1);
  }

  .comparison-table__company {
    border-radius: 0.5rem;
    background: var(--color-neutral-6);
    padding-inline: var(--space-sm-x1);
    padding-block: var(--space-sm-x2);
    color: var(--color-white);

    &:first-child {
      background: var(--color-primary-6);
    }
  }

  .comparison-table__company-title {
    font-size: var(--font-size-sm-x1);
    text-align: center;
    text-transform: uppercase;
  }

  .comparison-table__comparison-list {
    display: grid;
  }

  .comparison-table__comparison {
    display: grid;
    gap: var(--space-sm-x3);
    border-bottom: var(--border-width-1) solid var(--color-neutral-0);
    padding-block: var(--space-sm-x1);

    &:first-child {
      border-top: var(--border-width-1) solid var(--color-neutral-0);
    }
  }

  .comparison-table__comparison-title {
    text-align: center;
    font-size: var(--font-size-sm-x2);
    font-weight: var(--font-weight-light);
  }

  .comparison-table__answer-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm-x1);
  }

  .comparison-table__answer {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding-block: var(--space-sm-x2);
  }

  .comparison-table__answer--jetwave {
    background: var(--color-primary-1);
    color: var(--color-primary-6);
  }

  .comparison-table__answer--others {
    background: var(--color-neutral-1);
    color: var(--color-neutral-6);
  }

  .comparison-table__icon {
    width: var(--length-7);
    height: var(--length-7);
  }

  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    .comparison-table__answer {
      animation: comparison-table-answer-enter ease-in-out 600ms both;
      animation-timeline: view();
      animation-range: entry 0 cover 40%;
    }

    @keyframes comparison-table-answer-enter {
      0% {
        scale: 0.7;
        opacity: 0;
      }
      100% {
        scale: 1;
        opacity: 1;
      }
    }
  }

  @media (width >= 64em) {
    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
      .comparison-table__answer {
        animation-range: entry 0 cover 10%;
      }
    }
    .comparison-table__badge {
      left: 33.2%;
      width: var(--length-9);
      height: var(--length-9);
      font-size: var(--font-size-sm-x1);
    }

    .comparison-table__company-list {
      grid-template-columns: repeat(3, 1fr);
    }

    .comparison-table__company:first-child {
      grid-column-start: 1;
    }

    .comparison-table__comparison {
      grid-template-columns: repeat(3, 1fr);
    }

    .comparison-table__comparison-title {
      order: 2;
      margin-block: auto;
      padding-inline: var(--space-sm-x1);
      text-align: start;
    }

    .comparison-table__answer-list {
      grid-column: span 2;
    }
  }

  @media (width >= 80em) {
    .comparison-table {
      padding: var(--space-md);
    }

    .comparison-table__badge {
      left: 24.7%;
    }

    .comparison-table__company-list {
      grid-template-columns: repeat(4, 1fr);
    }

    .comparison-table__comparison {
      grid-template-columns: repeat(4, 1fr);
      padding-block: var(--space-sm-x2);
    }

    .comparison-table__comparison-title {
      grid-column: span 2;
    }
  }
}
@layer components {
  .contact-location {
    display: grid;
    gap: var(--space-sm-x3);
  }

  .contact-location__office {
    text-align: center;
    font-size: var(--font-size-sm-x3);
    line-height: var(--line-height-tightest);
    color: var(--color-white);
  }

  .contact-location__link {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm-x4);
    font-size: var(--font-size-sm-x3);
    font-weight: var(--font-weight-light);
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: all 0.3s ease;

    &:hover {
      translate: 0 -0.125rem;
    }
  }

  .contact-location__link--address {
    text-align: center;
  }

  .contact-location__icon {
    width: var(--length-4);
    height: var(--length-4);
    color: var(--color-primary-4);
  }

  @media (width >= 64em) {
    .contact-location {
      gap: var(--space-sm-x1);
    }

    .contact-location__office {
      text-align: start;
    }

    .contact-location__link {
      flex-direction: row;
      gap: var(--space-sm-x3);
    }

    .contact-location__link--address {
      text-align: start;
    }
  }
}
@layer components {
  .contact {
    background: linear-gradient(
      to bottom,
      var(--color-neutral-7),
      var(--color-neutral-8)
    );
  }

  .contact__container {
    margin-inline: auto;
    max-width: var(--max-reach-lg-x2);
    overflow: hidden;
    padding-inline: var(--space-md);
    padding-block: var(--space-lg-x5);
  }

  .contact__card {
    display: grid;
    overflow: hidden;
    border-radius: 0.75rem;
    border: var(--border-width-1) solid var(--color-primary-9);
    border-block-end-color: var(--color-primary-6);
    box-shadow: var(--shadow-3);
  }

  .contact__form-panel {
    display: grid;
    gap: var(--space-md);
    background: var(--color-neutral-0);
  }

  .contact__form-content {
    display: grid;
    gap: var(--space-md);
    padding-inline: var(--space-md);
    padding-block: var(--space-lg-x3);
  }

  .contact__header {
    display: grid;
    text-align: center;
  }

  .contact__title {
    font-size: var(--font-size-lg-x4);
    color: var(--color-neutral-8);
  }

  .contact__description {
    font-size: var(--font-size-sm-x2);
    color: var(--color-neutral-6);
  }

  .contact__form {
    display: grid;
    width: 100%;
    gap: var(--space-md);
    transition: all 0.3s ease;

    & > * {
      display: grid;
      width: 100%;
      transition: all 0.3s ease;
    }

    & input {
      height: var(--length-10);
      width: 100%;
      border-radius: var(--border-radius-2);
      background: var(--color-neutral-2);
      box-shadow: var(--shadow-2);
      padding-inline: var(--space-sm-x3);
      font-size: var(--font-size-sm-x2);
      color: var(--color-black);
      -webkit-appearance: none;
      appearance: none;
      transition: all 0.3s ease;

      &::placeholder {
        color: oklch(from var(--color-neutral-6) l c h / 75%);
      }

      &:hover {
        &::placeholder {
          color: var(--color-primary-6);
        }
      }

      &:focus {
        outline: 1px solid var(--color-primary-4);
      }

      &:active {
        outline: none;
      }
    }

    & label {
      text-transform: uppercase;
    }

    & textarea {
      height: var(--length-48);
      width: 100%;
      border-radius: var(--border-radius-2);
      background: var(--color-neutral-2);
      padding-inline: var(--space-sm-x3);
      padding-block-start: var(--space-sm-x3);
      font-size: var(--font-size-sm-x2);
      color: var(--color-black);
      -webkit-appearance: none;
      appearance: none;

      &::placeholder {
        color: oklch(from var(--color-neutral-6) l c h / 75%);
      }

      &:hover {
        &::placeholder {
          color: var(--color-primary-6);
        }
      }

      &:focus {
        outline: none;
      }

      &:active {
        outline: none;
      }
    }
  }

  .contact__sections {
    display: grid;
    gap: var(--space-lg-x3);
  }

  .contact__section {
    display: grid;
    gap: var(--space-sm-x2);
  }

  .contact__section-title {
    border-block-end: var(--border-width-2) solid var(--color-primary-6);
    padding-block-end: var(--space-sm-x4);
    font-size: var(--font-size-sm-x2);
    font-weight: var(--font-weight-bold);
  }

  .contact__section-title--enquiry {
    border-block-end-color: var(--color-primary-6);
  }

  .contact__fields {
    display: grid;
    gap: var(--space-sm-x1);
  }

  .contact__select {
    margin-block-start: var(--space-sm-x3);
    height: var(--length-10);
    width: 100%;
    cursor: pointer;
    border-radius: var(--border-radius-2);
    border: var(--border-width-1) solid var(--color-neutral-7);
    background: oklch(from var(--color-white) l c h / 20%);
    padding-inline: 0.125rem;
    font-size: var(--font-size-sm-x2);

    & option {
      color: var(--color-black);
    }
  }

  .contact__button-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact__sidebar {
    margin-inline: auto;
    display: grid;
    width: 100%;
    gap: var(--space-lg-x2);
    background: var(--color-black);
    padding-inline: var(--space-sm-x1);
    padding-block: var(--space-lg-x1);
  }

  .contact__locations {
    display: grid;
    gap: var(--space-lg-x3);
  }

  .contact__locations-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm-x4);
    font-size: var(--font-size-sm-x2);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: all 0.3s ease;

    &:hover {
      color: var(--color-primary-4);
    }

    & a {
      font-size: var(--font-size-md);
    }
  }

  .contact__locations-link-icon {
    width: var(--length-5);
    height: var(--length-5);
    color: var(--color-white);
  }

  /* Media Queries */

  @media (width >= 40em) {
    .contact__container {
      max-width: var(--max-reach-lg-x3);
    }

    .contact__locations {
      gap: var(--space-lg-x4);
    }
  }

  @media (width >= 48em) {
    .contact__form-content {
      padding-inline: var(--space-lg-x1);
    }

    .contact__sidebar {
      padding-inline: var(--space-lg-x1);
      padding-block: var(--space-lg-x3);
    }
  }

  @media (width >= 64em) {
    .contact__container {
      max-width: var(--max-reach-lg-x6);
      padding-inline: var(--space-lg-x1);
      padding-block: 8rem;
    }

    .contact__card {
      grid-template-columns: repeat(3, 1fr);
      border-inline-end-color: var(--color-primary-6);
    }

    .contact__form-panel {
      position: relative;
      grid-column: span 2;
    }

    .contact__form-content {
      gap: var(--space-lg-x1);
    }

    .contact__header {
      text-align: start;
    }

    .contact__sections {
      grid-template-columns: repeat(2, 1fr);
    }

    .contact__section {
      grid-column: span 2;
    }

    .contact__fields--columns {
      grid-template-columns: repeat(2, 1fr);
    }

    .contact__field--name {
      order: 1;
    }

    .contact__field--phone {
      order: 2;
    }

    .contact__field--company {
      order: 3;
      grid-column: span 1;
    }

    .contact__field--email {
      order: 3;
      grid-column: span 1;
    }

    .contact__field--country {
      grid-column: span 2;
    }

    .contact__field--message {
      order: 4;
      grid-column: span 2;
    }

    .contact__section-title {
      font-size: var(--font-size-sm-x1);
    }

    .contact__button {
      font-size: var(--font-size-md);
    }

    .contact__button:hover .contact__button-circle {
      scale: 12;
    }

    .contact__form textarea {
      height: var(--length-40);
    }

    .contact__sidebar {
      place-content: start;
    }

    .contact__locations {
      gap: var(--space-lg-x1);
    }

    .contact__locations-link {
      justify-content: start;
    }
  }

  @media (width >= 80em) {
    .contact__container {
      max-width: var(--max-reach-lg-x8);
    }

    .contact__locations {
      gap: var(--space-lg-x3);
    }
  }

  @media (width >= 96em) {
    .contact__button {
      font-size: var(--font-size-lg-x1);
    }
  }
}
@layer components {
  .feature-collections {
    background: linear-gradient(
      to bottom,
      var(--color-neutral-9),
      var(--color-neutral-8)
    );
    padding-block-start: var(--space-lg-x3);
    text-align: center;
  }

  .feature-collections__inner {
    display: grid;
    gap: var(--space-lg-x2);
    padding-block-end: var(--space-lg-x5);
  }

  .feature-collections__container {
    position: relative;
    display: grid;
    gap: var(--space-lg-x2);
    padding-block: var(--space-md);
  }

  .feature-collections__scroll {
    position: relative;
    display: grid;
    text-align: center;
  }

  .feature-collections__list {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
  }

  .feature-collections__buttons {
  }

  .feature-collections__button {
    position: absolute;
    top: 50%;
    z-index: var(--z-2);
    display: none;
    width: var(--length-14);
    height: var(--length-14);
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-round);
    border: var(--border-width-1) solid var(--color-white);
    background: oklch(from var(--color-primary-8) l c h / 60%);
    color: var(--color-black);
    opacity: 0;
    box-shadow: var(--shadow-4);
    transition: all 150ms ease;

    &:hover {
      scale: 1.05;
      background: var(--color-primary-6);
    }

    &:active {
      scale: 0.9;
    }
  }

  .feature-collections__button--left {
    left: var(--length-4);
  }

  .feature-collections__button--right {
    right: var(--length-4);
  }

  .feature-collections__button-icon {
    width: var(--length-6);
    height: var(--length-6);
    color: var(--color-white);
  }

  .feature-collections__actions {
    margin-inline: auto;
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .feature-collections__container {
      padding-block: var(--space-lg-x2);
    }
  }

  @media (width >= 64em) {
    .feature-collections__container {
      gap: var(--space-lg-x4);
      padding-block: var(--space-lg-x4);
      padding-inline-start: var(--space-lg-x1);
    }

    .feature-collections__button {
      display: flex;
    }

    .feature-collections__scroll:hover .feature-collections__button {
      translate: 0 -50%;
      opacity: 1;
    }
  }

  @media (width >= 80em) {
    .feature-collections__button {
      width: var(--length-16);
      height: var(--length-16);
    }

    .feature-collections__button-icon {
      width: var(--length-8);
      height: var(--length-8);
    }
  }

  @media (width >= 96em) {
    .feature-collections__container {
      padding-inline: var(--space-lg-x1);
    }

    .feature-collections__list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--space-md);
    }

    .feature-collections__buttons {
      display: none;
    }
  }
}
@layer components {
  .feature-comparisons {
    width: 100%;
    height: 100%;
    background: var(--color-neutral-0);
    padding-block: 8rem;
  }

  .feature-comparisons__container {
    display: grid;
    gap: var(--space-sm-x1);
    padding-inline: var(--space-lg-x1);
    margin-inline: auto;
  }

  .feature-comparisons__header {
    display: grid;
    width: 100%;
    gap: var(--space-md);
    text-align: left;
  }

  .feature-comparisons__description {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-light);
    color: var(--color-neutral-9);
  }

  @media (width >= 64em) {
    .feature-comparisons__container {
      max-width: var(--max-reach-lg-x8);
      gap: var(--space-lg-x2);
      padding-inline: var(--space-lg-x2);
    }

    .feature-comparisons__title {
      max-width: var(--max-reach-lg-x5);
      padding-inline-start: 0;
    }
  }

  @media (width >= 96em) {
    .feature-comparisons__container {
      max-width: 90rem;
    }
  }
}
@layer components {
  .find-a-dealer-feature {
    position: relative;
    background: linear-gradient(
      to top right,
      var(--color-primary-6) 40%,
      var(--color-primary-4)
    );
    padding-block-start: var(--space-lg-x5);
    overflow: clip;
  }

  .find-a-dealer-feature__container {
    margin-inline: auto;
    display: grid;
    gap: var(--space-lg-x3);
  }

  .find-a-dealer-feature__content {
    display: grid;
    gap: var(--space-lg-x1);
    padding-inline: var(--space-lg-x2);
  }

  .find-a-dealer-feature__title-group {
    display: grid;
    gap: var(--space-sm-x3);
  }

  .find-a-dealer-feature__title {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-white);
  }

  .find-a-dealer-feature__subtitle {
    color: var(--color-primary-4);
  }

  .find-a-dealer-feature__description {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-light);
    color: var(--color-white);

    & strong {
      font-weight: var(--font-weight-bold);
    }
  }

  .find-a-dealer-feature__form {
    display: grid;
    gap: var(--space-sm-x2);
  }

  .find-a-dealer-feature__input {
    border-radius: var(--border-radius-2);
    background: var(--color-white);
    padding: var(--space-sm-x2);
    width: 100%;
  }

  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    .find-a-dealer-feature__map-animation {
      animation: find-a-dealer-feature-enter linear both;
      animation-timeline: view();
      animation-range: entry 0vh exit -60vh;
    }

    @keyframes find-a-dealer-feature-enter {
      0% {
        translate: 0 25%;
        opacity: 0;
      }
      100% {
        translate: 0;
        opacity: 1;
      }
    }
  }

  .find-a-dealer-feature__image {
    width: 100%;
    height: 100%;
  }

  @media (width >= 48em) {
    .find-a-dealer-feature {
      padding-block: 8rem;
    }

    .find-a-dealer-feature__container {
      /* display: flex; */
      max-width: none;
      align-items: center;
      justify-content: space-between;
      padding-inline: var(--space-lg-x2);
    }

    .find-a-dealer-feature__content {
      padding-inline: var(--space-lg-x4);
      z-index: var(--z-1);
    }

    .find-a-dealer-feature__form {
      display: flex;
      align-items: center;
    }

    .find-a-dealer-feature__input {
      width: var(--length-64);
    }
  }

  @media (width >= 64em) {
    .find-a-dealer-feature {
      padding-block: 11rem;
    }

    .find-a-dealer-feature__container {
      display: flex;
    }
    .find-a-dealer-feature__map-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: 100%;
      padding-inline: var(--space-lg-x2);
      opacity: 0.45;
    }

    .find-a-dealer-feature__container {
      max-width: var(--max-reach-lg-x8);
    }

    .find-a-dealer-feature__content {
      max-width: var(--max-reach-lg-x6);
    }

    .find-a-dealer-feature__input {
      width: var(--length-96);
    }
  }

  @media (width >= 96em) {
    .find-a-dealer-feature {
      padding-block: 14rem;
    }

    .find-a-dealer-feature__container {
      max-width: 90rem;
    }

    .find-a-dealer-feature__content {
      max-width: var(--max-reach-lg-x7);
    }

    .find-a-dealer-feature__map-wrapper {
      max-width: 105rem;
    }
  }
}
@layer components {
  .footer {
    position: relative;
    display: grid;
    background: var(--color-black);
  }

  .footer__container {
    position: relative;
    z-index: var(--z-1);
    margin-inline: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-lg-x4);
    padding-inline: var(--space-lg-x1);
    padding-block-start: 8rem;
    padding-block-end: 7rem;
  }

  .footer__categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg-x1);
  }

  .footer__category {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-sm-x4);
    color: var(--color-primary-4);
  }

  .footer__category-title {
    width: 100%;
    padding-block-end: var(--space-sm-x3);
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
  }

  .footer__category-link {
    width: fit-content;
    font-size: var(--font-size-sm-x2);
    color: var(--color-white);

    &:hover {
      text-decoration: underline;
    }
  }

  .footer__generation {
    display: grid;
    gap: var(--space-sm-x1);
  }

  .footer__generation-image {
    width: var(--length-32);
    height: var(--length-32);
    margin-inline: auto;
    flex-shrink: 0;
  }

  .footer__generation-description {
    font-weight: var(--font-weight-light);
    color: var(--color-white);
    font-size: var(--font-size-sm-x1);

    & strong {
      font-weight: var(--font-weight-bold);
    }
  }

  .footer__payments {
    display: grid;
    gap: var(--space-sm-x1);
  }

  .footer__copyright {
    text-align: center;
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-sm-x2);
    color: var(--color-white);
  }

  .footer__bottom {
    display: none;
    width: 100%;
    background: var(--color-primary-6);
  }

  .footer__bottom-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-inline: var(--space-lg-x1);
    padding-block: var(--space-lg-x1);
  }

  .footer__logo {
    display: flex;
    height: var(--length-8);
    width: auto;
  }

  .footer__logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .footer__links {
    display: flex;
    gap: var(--space-sm-x1);
    align-items: center;
    font-size: var(--font-size-sm-x3);
  }

  .footer__link-item {
    color: var(--color-white);
  }

  .footer__link {
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: all 0.3s ease;

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

  .footer__socials {
    display: flex;
    gap: var(--space-sm-x3);
  }

  .footer__social-link {
    display: flex;
    width: var(--length-8);
    height: var(--length-8);
    border-radius: var(--border-radius-round);
    border: var(--border-width-1) solid var(--color-white);
    padding: var(--space-sm-x3);
    color: var(--color-white);
    transition: all 0.3s ease;

    &:hover {
      background: var(--color-black);
    }
  }

  /* Media queries — smallest to largest */

  @media (width >= 40em) {
    .footer__container {
      padding-inline: var(--space-lg-x4);
    }

    .footer__bottom-inner {
      padding-inline: var(--space-lg-x4);
    }
  }

  @media (width >= 48em) {
    .footer__categories {
      grid-template-columns: repeat(4, 1fr);
    }

    .footer__generation {
      display: flex;
      align-items: center;
      gap: var(--space-lg-x1);
    }

    .footer__payments {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  @media (width >= 64em) {
    .footer__container {
      max-width: var(--max-reach-lg-x6);
      margin-inline: auto;
      padding-block-end: var(--space-lg-x3);
    }

    .footer__bottom {
      display: flex;
    }

    .footer__bottom-inner {
      margin-inline: auto;
      max-width: var(--max-reach-lg-x6);
    }
  }

  @media (width >= 80em) {
    .footer__container {
      padding-inline: var(--space-lg-x1);
    }

    .footer__categories {
      gap: var(--space-lg-x5);
    }

    .footer__links {
      gap: var(--space-lg-x2);
    }

    .footer__bottom-inner {
      padding-inline: var(--space-lg-x1);
    }

    .footer__social-link {
      width: var(--length-9);
      height: var(--length-9);
    }
  }
}
@layer components {
  .header-section {
    --color-main: var(--color-white);
    --color-accent: var(--color-primary-4);

    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-bold);
    color: var(--color-main);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-tightest);
    text-transform: uppercase;

    & span {
      color: var(--color-accent);
    }
  }

  .header-section--dark {
    --color-main: var(--color-black);
    --color-accent: var(--color-primary-6);
  }
}
@layer components {
  .hero {
    position: relative;
  }

  .hero__background-wrapper {
    z-index: var(--z-0);
    height: 100vh;
  }

  .hero__clip-container {
    position: relative;
    height: 100vh;
    clip-path: inset(0);
  }

  .hero__overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, transparent, black 60%);
  }

  .hero__scroll-indicator {
    display: none;
    position: fixed;
    bottom: var(--length-24);
    left: 50%;
    margin-inline: auto;
    translate: -50%;
    transition: all 500ms ease;

    & > span:nth-child(1) {
      animation-delay: 0s;
    }

    & > span:nth-child(2) {
      animation-delay: 0.15s;
    }

    & > span:nth-child(3) {
      animation-delay: 0.3s;
    }

    &:hover {
      scale: 1.1;
    }
  }

  .hero__scroll-arrow {
    margin-block-start: calc(-1 * var(--space-sm-x1));
    box-sizing: border-box;
    display: flex;
    width: var(--length-8);
    height: var(--length-8);
    rotate: -45deg;
    border-bottom: var(--border-width-2) solid;
    border-bottom-color: var(--color-white);
    border-left: var(--border-width-2) solid;
    border-left-color: var(--color-white);
    opacity: 0;
    animation: pulsating 2.5s infinite;
  }

  .hero__content {
    position: fixed;
    left: 50%;
    top: 66.667%;
    z-index: var(--z-1);
    display: grid;
    width: 100%;
    max-width: var(--max-reach-lg-x2);
    translate: -50% -50%;
    gap: var(--space-sm-x1);
    padding-inline: var(--space-sm-x1);
    padding-block-end: var(--space-lg-x1);
  }

  .hero__heading-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x3);
    text-align: center;
  }

  .hero__heading {
    display: grid;
    gap: var(--space-sm-x3);
    font-size: var(--font-size-lg-x2);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    line-height: var(--line-height-tightest);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-white);
    text-shadow: 1px 1px 2px #000;
    text-wrap: balance;
  }

  .hero__subtitle {
    color: var(--color-white);
    display: flex;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-wide);
    text-align: center;
    justify-content: center;
    text-shadow: 1px 1px 2px #000;
    text-wrap: balance;
    text-transform: uppercase;
  }

  .hero__button-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
  }

  .hero__button-item {
    margin-inline: auto;
  }

  .hero__button {
    font-size: var(--font-size-sm-x3);
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    overflow: hidden;
    border-radius: var(--border-radius-3);
    border: var(--border-width-1) solid var(--color-neutral-3);
    background: var(--color-neutral-9);
    padding-inline: var(--space-md);
    padding-block: var(--space-sm-x1);
    color: var(--color-white);
    transition: all 300ms ease;

    &:hover {
      scale: 0.95;
    }

    &:active {
      scale: 0.9;
    }
  }

  .hero__button-icon-wrapper {
    position: relative;
    z-index: 1;
    height: fit-content;
    transition: all 300ms ease;

    .hero__button:hover & {
      translate: 0.125rem;
    }
  }

  .hero__button-icon {
    animation: attention-shake 6s linear 1s infinite;
    position: relative;
    z-index: var(--z-1);
    width: var(--length-6);
    height: var(--length-6);
  }

  .hero__button-expand {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--length-9);
    height: var(--length-9);
    translate: -50% -50%;
    border-radius: 0.75rem;
    background: var(--color-primary-6);
    transition: all 700ms ease-in-out;

    .hero__button:hover & {
      scale: 14;
      border-radius: 0.5rem;
      background: var(--color-primary-5);
    }
  }

  .hero__button-label {
    position: relative;
    z-index: 1;
    text-transform: uppercase;
  }

  .hero__slider-wrapper {
    animation: slowzoom 20s linear infinite alternate;
    position: fixed;
    height: 60vh;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
  }

  .hero__slider {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--color-black);
  }

  .hero__slide-container {
    position: absolute;
    left: 0;
    top: 0;
    z-index: var(--z-1);
    width: 100%;
    height: 100%;
  }

  .hero__slide {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;

    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: 1;

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

    @starting-style {
      opacity: 0;
    }
  }

  .hero__slide-content {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .hero__image {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .hero__content {
      padding-block-end: 0;
    }

    .hero__heading {
      margin-inline: auto;
    }

    .hero__subtitle {
      margin-inline: auto;
    }

    .hero__button-list {
      margin-inline: auto;
      flex-direction: row;
    }

    .hero__button {
      width: fit-content;
      justify-content: flex-start;
    }

    .hero__button-expand {
      transition-duration: 500ms;

      .hero__button:hover & {
        scale: 10;
      }
    }

    .hero__scroll-indicator {
      display: grid;
    }
  }

  @media (width >= 48em) {
    .hero__content {
      max-width: var(--max-reach-lg-x7);
    }
    .hero__slider-wrapper {
      height: 65vh;
    }

    .hero__image {
      object-position: center;
    }
  }

  @media (width >= 64em) {
    .hero__overlay {
      top: var(--length-28);
      background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0) 25%,
        rgba(0, 0, 0, 1) 100%
      );
    }

    .hero__scroll-indicator {
      bottom: var(--length-20);
    }

    .hero__scroll-indicator:hover .hero__scroll-arrow {
      animation: none;
      opacity: 1;
    }

    .hero__content {
      left: 33.333%;
      top: 50%;
      translate: -50% -50%;
      gap: var(--space-md);
      max-width: var(--max-reach-lg-x1);
      padding-block-end: 0;
      padding-block-start: var(--space-lg-x3);
    }

    .hero__heading-wrapper {
      max-width: none;
      text-align: start;
    }

    .hero__heading {
      max-width: none;
      gap: var(--space-sm-x2);
    }

    .hero__subtitle {
      margin-left: 0;
      text-align: left;
    }

    .hero__button-list {
      margin-left: 0;
    }

    .hero__button-expand {
      .hero__button:hover & {
        scale: 12;
      }
    }

    .hero__slider-wrapper {
      height: 100vh;
    }

    .hero__image {
      height: 100vh;
    }
  }

  @media (width >= 80em) {
    .hero__scroll-indicator {
      bottom: var(--length-20);
    }

    .hero__content {
      translate: -75% -50%;
    }
  }

  @media (width >= 96em) {
    .hero__scroll-indicator {
      bottom: var(--length-24);
    }

    .hero__heading-wrapper {
      gap: var(--space-sm-x1);
    }

    .hero__content {
      max-width: var(--max-reach-lg-x3);
    }

    .hero__heading {
      font-size: 300%;
    }
  }
}
@layer components {
  .horizontal-card-scroll {
    padding-block: 8rem;
  }

  .horizontal-card-scroll__container {
    margin-inline: auto;
    display: grid;
    gap: var(--space-lg-x2);
    padding-inline: var(--space-lg-x1);
  }

  .horizontal-card-scroll__header {
    margin-inline: auto;
    display: grid;
    width: 100%;
    max-width: var(--max-reach-lg-x4);
    gap: var(--space-md);
    padding-inline: var(--space-lg-x1);
    text-align: center;
  }

  .horizontal-card-scroll__description {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-light);
    color: var(--color-neutral-9);
  }

  .horizontal-card-scroll__list {
    display: grid;
    gap: var(--space-lg-x2);
  }

  .horizontal-card-scroll__card {
    position: sticky;
    border-radius: 1.5rem;
    background: linear-gradient(
      to bottom,
      var(--color-neutral-9),
      var(--color-neutral-7)
    );
    border: var(--border-width-1) solid var(--color-neutral-6);
    padding: var(--space-sm-x1);
    padding-inline: var(--space-sm-x1);
    padding-block: 3.5rem;
    box-shadow: var(--shadow-4);

    &:nth-child(1) {
      top: 3rem;
    }

    &:nth-child(2) {
      top: 5rem;
    }

    &:nth-child(3) {
      top: 7rem;
    }
  }

  .horizontal-card-scroll__card-content {
    display: grid;
    place-content: start;
    gap: var(--space-lg-x1);
    text-align: center;
    color: var(--color-white);
  }

  .horizontal-card-scroll__number {
    margin-inline: auto;
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
    background: var(--color-primary-4);
    color: var(--color-white);
    border-radius: var(--border-radius-round);
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--length-14);
    height: var(--length-14);
    text-align: center;
  }

  .horizontal-card-scroll__card-title {
    font-size: var(--font-size-lg-x1);
  }

  .horizontal-card-scroll__card-description {
    margin-inline: auto;
    padding-inline: var(--space-sm-x1);
    font-size: var(--font-size-md);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .horizontal-card-scroll__header {
      padding-inline: var(--space-lg-x1);
    }

    .horizontal-card-scroll__list {
      padding-inline: var(--space-lg-x1);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .horizontal-card-scroll {
      padding-block-end: 10rem;
    }

    .horizontal-card-scroll__container {
      gap: var(--space-lg-x2);
    }

    .horizontal-card-scroll__header {
      max-width: 90rem;
      text-align: start;
    }

    .horizontal-card-scroll__title {
      max-width: var(--max-reach-lg-x5);
      padding-inline-start: 0;
    }

    .horizontal-card-scroll__list {
      max-width: 90rem;
      margin-inline: auto;
    }

    .horizontal-card-scroll__card {
      max-width: var(--max-reach-lg-x3);
      height: var(--length-96);
      background: linear-gradient(
        to right,
        var(--color-neutral-9),
        var(--color-neutral-7)
      );
      box-shadow: var(--shadow-5);
      padding: var(--space-lg-x2);

      &:nth-child(1) {
        top: 15rem;
      }

      &:nth-child(2) {
        top: 18rem;
        margin-inline-start: 7rem;
      }

      &:nth-child(3) {
        top: 21rem;
        margin-inline-start: 14rem;
      }

      &:nth-child(4) {
        top: 24rem;
        margin-inline-start: 21rem;
      }
    }

    .horizontal-card-scroll__card-content {
      text-align: start;
    }

    .horizontal-card-scroll__number {
      margin-inline-start: 0;
      font-weight: var(--font-weight-bold);
    }

    .horizontal-card-scroll__card-description {
      padding-inline: 0;
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .horizontal-card-scroll__container {
      gap: var(--space-lg-x5);
    }

    .horizontal-card-scroll__card {
      max-width: var(--max-reach-lg-x4);
    }
  }
}
@layer components {
  .industry-card {
    position: relative;
    display: flex;
    height: 100%;
    flex-shrink: 0;
    transform-origin: top;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border-radius: var(--border-radius-3);
    border: var(--border-width-1) solid var(--color-neutral-6);
    padding-block-end: var(--space-md);
    transition: all 0.2s ease;
  }

  .industry-card__overlay {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 1;
    height: 50%;
    width: 100%;
    background: linear-gradient(
      to bottom,
      oklch(from var(--color-black) l c h / 70%),
      oklch(from var(--color-black) l c h / 40%),
      transparent
    );
    transition: opacity 500ms ease;
  }

  .industry-card__content {
    position: relative;
    z-index: 1;
    display: flex;
    height: 60%;
    width: 100%;
    flex-direction: column;
    gap: var(--space-sm-x1);
    padding: 1.25rem;
    text-align: start;
    color: var(--color-white);
    transition: all 500ms ease;
  }

  .industry-card__title {
    font-size: var(--font-size-lg-x1);
  }

  .industry-card__subtitle-group {
    display: grid;
    gap: var(--space-sm-x4);
  }

  .industry-card__subtitle {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
  }

  .industry-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm-x4);
  }

  .industry-card__category {
    width: fit-content;
    border-radius: var(--border-radius-2);
    background: var(--color-primary-5);
    transition: all 700ms ease;
    padding-inline: var(--space-sm-x3);
    padding-block: var(--space-sm-x4);
    font-size: var(--font-size-sm-x3);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }

  .industry-card__link {
    display: flex;
    cursor: pointer;
    align-items: center;
    text-underline-offset: 4px;

    &:hover {
      text-decoration: underline;
    }
  }

  .industry-card__link-icon {
    width: var(--length-4);
    height: var(--length-4);
  }

  .industry-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9);
    transition: all 300ms ease;
  }

  .industry-card__button-wrapper {
    z-index: var(--z-2);
    display: flex;
    width: 100%;
    justify-content: center;
    place-self: center;
  }

  .industry-card__button {
    pointer-events: auto;
    width: 66.667%;
    border-radius: 0.75rem;
    background: var(--color-white);
    padding-inline: var(--space-md);
    padding-block: var(--space-sm-x3);
    font-size: var(--font-size-sm-x2);
    box-shadow: var(--shadow-3);
    transition: all 300ms ease;

    &:hover {
      background: var(--color-primary-5);
      color: var(--color-white);
    }
  }

  .industry-card__description-overlay {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    display: none;
    width: 100%;
    height: 100%;
    translate: 0 100%;
    border-radius: var(--border-radius-3);
    background: var(--color-primary-6);
    transition: all 500ms ease;
  }

  .industry-card__description {
    display: flex;
    padding-inline: var(--space-md);
    padding-block-end: var(--space-lg-x1);
    padding-block-start: 12rem;
    text-align: justify;
    font-size: var(--font-size-sm-x1);
    font-weight: var(--font-weight-light);
    color: var(--color-white);
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .industry-card {
      aspect-ratio: 4/5;
      height: 500px;
    }
  }

  @media (width >= 64em) {
    .industry-card {
      aspect-ratio: 3/4;
      height: 575px;
      scroll-snap-align: start;
    }

    .industry-card__content {
      padding: var(--space-md);
    }

    .industry-card:hover .industry-card__overlay {
      opacity: 0;
    }

    .industry-card:hover .industry-card__category {
      background: var(--color-neutral-9);
    }

    .industry-card:hover .industry-card__image {
      filter: brightness(1.1);
    }

    .industry-card__button {
      &:hover {
        background: var(--color-neutral-9);
      }
    }

    .industry-card__description-overlay {
      display: flex;
    }

    .industry-card:hover .industry-card__description-overlay {
      translate: 0 0;
    }
  }
}
@layer components {
  .industry-header {
    position: relative;
    z-index: var(--z-0);
    height: 80vh;
    max-height: 550px;
  }

  .industry-header__container {
    position: relative;
    display: flex;
    height: 100%;
    padding: var(--space-lg-x1);
  }

  .industry-header__content {
    position: relative;
    z-index: var(--z-2);
    margin-inline: auto;
    margin-inline-end: auto;
    display: grid;
    max-width: var(--max-reach-sm-x1);
    gap: var(--space-md);
    place-self: end;
    color: var(--color-white);
  }

  .industry-header__title {
    display: grid;
    gap: var(--space-sm-x3);
    text-align: center;
    font-size: var(--font-size-lg-x5);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-white);
    text-shadow: 1px 1px 2px #000;
  }

  .industry-header__description-group {
    display: grid;
  }

  .industry-header__description {
    text-align: center;
    font-size: var(--font-size-sm-x2);
  }

  .industry-header__description--secondary {
    display: none;
    font-size: var(--font-size-sm-x2);
  }

  .industry-header__breadcrumb {
    display: flex;
    justify-content: center;
    gap: var(--space-sm-x3);
    font-size: var(--font-size-sm-x3);
  }

  .industry-header__breadcrumb-current {
    font-weight: var(--font-weight-bold);
  }

  .industry-header__image-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    height: 66.667%;
    width: 100%;
    overflow: hidden;
  }

  .industry-header__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    filter: brightness(0.95) contrast(1.1);
    animation: xshift 10s ease-in-out alternate infinite;
  }

  .industry-header__overlay {
    position: absolute;
    left: 0;
    top: 0;
    z-index: var(--z-1);
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to top,
      var(--color-black),
      var(--color-black) 30%,
      transparent 70%
    );
  }

  @media (width >= 40em) {
    .industry-header__content {
      max-width: var(--max-reach-md);
    }

    .industry-header__title {
      margin-inline: auto;
    }
  }

  @media (width >= 48em) {
    .industry-header__content {
      max-width: var(--max-reach-lg-x3);
      gap: var(--space-lg-x1);
    }

    .industry-header__title {
      line-height: var(--line-height-looser);
    }
  }

  @media (width >= 64em) {
    .industry-header {
      height: auto;
      max-height: none;
      padding-block-end: var(--space-lg-x4);
      padding-block-start: var(--space-lg-x5);
      margin-block-start: var(--space-lg-x5);
    }

    .industry-header__content {
      margin-inline: auto;
      max-width: var(--max-reach-md);
      translate: -50%;
      place-self: center;
    }

    .industry-header__title {
      margin: 0;
      max-width: none;
      gap: var(--space-sm-x2);
      text-align: start;
      line-height: 45px;
    }

    .industry-header__description-group {
      gap: var(--space-sm-x1);
    }

    .industry-header__description {
      text-align: start;
      font-size: var(--font-size-sm-x1);
    }

    .industry-header__description--secondary {
      display: block;
      font-size: var(--font-size-sm-x1);
    }

    .industry-header__breadcrumb {
      order: -1;
      justify-content: start;
    }

    .industry-header__image-wrapper {
      top: 0;
      height: 100%;
      width: 60%;
    }

    .industry-header__overlay {
      background: linear-gradient(
        to right,
        var(--color-black),
        var(--color-black),
        transparent 80%
      );
    }
  }

  @media (width >= 80em) {
    .industry-header {
      padding-block-end: var(--space-lg-x5);
      padding-block-start: 7em;
      margin-block-start: var(--space-lg-x5);
    }

    .industry-header__content {
      translate: -66.667%;
    }

    .industry-header__breadcrumb {
      font-size: var(--font-size-sm-x2);
    }

    .industry-header__overlay {
      background: linear-gradient(
        to right,
        var(--color-black),
        var(--color-black) 45%,
        transparent 60%
      );
    }
  }

  @media (width >= 96em) {
    .industry-header__content {
      max-width: var(--max-reach-lg-x2);
    }

    .industry-header__title {
      font-size: 300%;
      line-height: 60px;
    }
  }
}
@layer components {
  .industry-infographics {
    background: var(--color-neutral-0);
    padding-block: 8rem;
  }

  .industry-infographics__container {
    margin-inline: auto;
    display: grid;
    max-width: var(--max-reach-lg-x8);
    gap: var(--space-lg-x1);
    padding-inline: var(--space-lg-x1);
  }

  .industry-infographics__header {
    display: grid;
    gap: var(--space-sm-x1);
  }

  .industry-infographics__title {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--color-neutral-9);
  }

  .industry-infographics__description {
    line-height: var(--line-height-loose);
    font-weight: var(--font-weight-light);
    color: var(--color-neutral-6);
  }

  .industry-infographics__list {
    display: grid;
    align-items: center;
    gap: var(--space-lg-x4);
  }

  .industry-infographics__card {
    display: grid;
    align-content: center;
    height: 100%;
    gap: var(--space-sm-x4);
    border-radius: 0.75rem;
    background: var(--color-white);
    padding: var(--space-lg-x2);
    text-align: center;
    box-shadow: var(--shadow-3);
  }

  .industry-infographics__image-wrapper {
    display: flex;
  }

  .industry-infographics__image {
    margin-inline: auto;
    margin-block: auto;
    width: var(--length-32);
    height: var(--length-32);
    object-fit: contain;
  }

  .industry-infographics__card-title {
    margin-block-start: var(--space-sm-x1);
    flex-grow: 0;
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
  }

  .industry-infographics__card-description {
    flex-grow: 0;
    font-weight: var(--font-weight-lighter);
  }

  /* Stimulus transition classes */
  .industry-infographics__card--enter {
    transition: all 1350ms ease-in-out 200ms;
  }

  .industry-infographics__card--enter-from {
    opacity: 0;
    translate: 0 4rem;
  }

  .industry-infographics__card--enter-to {
    opacity: 1;
    translate: 0 0;
  }

  /* --- Media queries (smallest → largest) --- */

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

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .industry-infographics__list {
      grid-template-columns: repeat(3, 1fr);
      justify-content: space-between;
      gap: var(--space-sm-x1);
    }

    .industry-infographics__card {
      padding: var(--space-md);
    }

    .industry-infographics__image {
      width: var(--length-28);
      height: var(--length-28);
    }
  }

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

    .industry-infographics__container {
      gap: var(--space-lg-x2);
    }

    .industry-infographics__title {
      max-width: var(--max-reach-lg-x5);
      padding-inline-start: 0;
    }

    .industry-infographics__list {
      gap: var(--space-lg-x1);
    }

    .industry-infographics__card {
      padding: var(--space-lg-x1);
    }

    .industry-infographics__item:nth-child(1) .industry-infographics__card {
      transition-delay: 200ms;
    }

    .industry-infographics__item:nth-child(2) .industry-infographics__card {
      transition-delay: 400ms;
    }

    .industry-infographics__item:nth-child(3) .industry-infographics__card {
      transition-delay: 600ms;
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .industry-infographics__list {
      gap: var(--space-lg-x2);
    }
  }
}
@layer components {
  .industry-product-showcase {
    background: var(--color-white);
    padding-block: var(--space-lg-x4);
  }

  .industry-product-showcase--grey {
    background: var(--color-neutral-0);
  }

  .industry-product-showcase__header {
    display: grid;
    width: 100%;
    max-width: var(--max-reach-lg-x4);
    gap: var(--space-md);
    padding-inline: var(--space-lg-x1);
    text-align: center;
    margin-inline: auto;
  }

  .industry-product-showcase__description {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-light);
    color: var(--color-neutral-9);
  }

  .industry-product-showcase__scroll-wrapper {
    position: relative;
    display: grid;
    gap: var(--space-lg-x1);
    padding-block-start: var(--space-lg-x2);
  }

  .industry-product-showcase__scroll-group {
    position: relative;
    display: grid;
    gap: var(--space-sm-x1);
  }

  .industry-product-showcase__list {
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--space-lg-x2);
    gap: var(--space-md);
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
  }

  .industry-product-showcase__item {
    z-index: var(--z-0);
    width: 75%;
    max-width: var(--max-reach-sm-x1);
    flex-shrink: 0;
    transform-origin: top;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: all 0.15s ease;

    &:first-child {
      margin-inline-start: var(--space-lg-x1);
    }

    &:last-child {
      margin-inline-end: var(--space-sm-x3);
    }
  }

  .industry-product-showcase__link {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }

  .industry-product-showcase__image-wrapper {
    position: relative;
    z-index: var(--z-1);
    overflow: hidden;
    border-radius: var(--border-radius-3);
    border: var(--border-width-2) solid var(--color-primary-5);
  }

  .industry-product-showcase__features {
    position: absolute;
    left: var(--space-sm-x3);
    top: var(--space-sm-x3);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm-x4);
  }

  .industry-product-showcase__feature {
    border-radius: 0.5rem;
    background: var(--color-primary-5);
    padding-inline: var(--space-sm-x3);
    padding-block: var(--space-sm-x4);
    font-size: var(--font-size-sm-x3);
    color: var(--color-white);
  }

  .industry-product-showcase__image {
    width: 100%;
    height: 100%;
    opacity: 1;
    aspect-ratio: 1;
    object-fit: cover;
    transition: all 300ms ease;
  }

  .industry-product-showcase__item:hover .industry-product-showcase__image {
    scale: 1.05;
  }

  .industry-product-showcase__content {
    position: relative;
    display: flex;
    width: 100%;
    flex-grow: 1;
    translate: 0 -0.75rem;
    flex-direction: column;
    gap: var(--space-sm-x3);
    border-end-start-radius: 0.75rem;
    border-end-end-radius: 0.75rem;
    border: var(--border-width-2) solid var(--color-black);
    border-block-start-width: 0;
    padding-inline: var(--space-sm-x2);
    padding-block-end: var(--space-sm-x2);
    padding-block-start: var(--space-md);
  }

  .industry-product-showcase__name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    text-decoration-color: var(--color-primary-5);
    text-decoration-style: double;
    text-underline-offset: 4px;
  }

  .industry-product-showcase__item:hover .industry-product-showcase__name {
    text-decoration: underline;
    text-decoration-color: var(--color-primary-5);
    text-decoration-style: double;
  }

  .industry-product-showcase__product-description {
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-sm-x1);
  }

  .industry-product-showcase__action {
    position: relative;
    z-index: var(--z-0);
    margin-inline: auto;
    margin-block-start: var(--space-sm-x1);
  }

  .industry-product-showcase__navigation {
    /* Scroll buttons container — visible by default, hidden at 2xl */
  }

  .industry-product-showcase__scroll-button {
    position: absolute;
    top: 50%;
    display: none;
    width: var(--length-14);
    height: var(--length-14);
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-round);
    border: var(--border-width-1) solid var(--color-neutral-8);
    background: var(--color-white);
    color: var(--color-black);
    opacity: 0;
    box-shadow: var(--shadow-4);
    transition: all 150ms ease;

    &:hover {
      scale: 1.05;
    }

    &:active {
      scale: 0.9;
      border-width: var(--border-width-2);
    }
  }

  .industry-product-showcase__scroll-button--left {
    left: var(--space-sm-x1);

    &:active {
      border-color: var(--color-neutral-6);
    }
  }

  .industry-product-showcase__scroll-button--right {
    right: var(--space-sm-x1);

    &:active {
      border-color: var(--color-neutral-7);
    }
  }

  .industry-product-showcase__scroll-group:hover
    .industry-product-showcase__scroll-button {
    opacity: 1;
    translate: 0 -50%;
  }

  .industry-product-showcase__scroll-icon {
    width: var(--length-6);
    height: var(--length-6);
    color: var(--color-neutral-7);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .industry-product-showcase__item {
      height: auto;
      padding: 0;
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .industry-product-showcase__item {
      scroll-snap-align: start;
      scroll-margin-inline-start: var(--space-lg-x1);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .industry-product-showcase__header {
      max-width: 90rem;
      text-align: start;
    }

    .industry-product-showcase__title {
      max-width: var(--max-reach-lg-x5);
      padding-inline-start: 0;
    }

    .industry-product-showcase__scroll-wrapper {
      gap: var(--space-lg-x3);
      padding-block-start: var(--space-lg-x4);
    }

    .industry-product-showcase__list {
      margin-inline: auto;
    }

    .industry-product-showcase__item {
      height: 100%;
    }

    .industry-product-showcase__scroll-button {
      display: flex;
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .industry-product-showcase__list {
      display: grid;
      max-width: 90rem;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-sm-x1);
      padding-inline: var(--space-lg-x1);
    }

    .industry-product-showcase__item {
      width: 100%;
      max-width: none;

      &:first-child {
        margin: 0;
      }
    }

    .industry-product-showcase__navigation {
      display: none;
    }
  }
}
@layer components {
  .industry {
    position: relative;
    z-index: 1;
    margin-block-start: calc(-1 * var(--space-lg-x1));
    height: 100%;
    max-height: max-content;
    min-height: max-content;
    align-items: center;
    gap: var(--space-lg-x1);
    overflow: hidden;
    border-start-start-radius: 1.5rem;
    border-start-end-radius: 1.5rem;
    border-block-start: var(--border-width-1) solid var(--color-neutral-3);
    background: linear-gradient(
      to bottom,
      var(--color-neutral-6) 0%,
      var(--color-neutral-9) 25%
    );
    padding-block-end: var(--space-lg-x2);
    padding-block-start: var(--space-lg-x5);
  }

  .industry__container {
    position: relative;
    display: grid;
    gap: var(--space-lg-x2);
    padding-block: var(--space-md);
  }

  .industry__header {
    text-align: center;
  }

  .industry__carousel {
    position: relative;
    display: grid;
    text-align: center;
  }

  .industry__list {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
  }

  .industry__item {
    height: 475px;
    width: 83.333%;
    flex-shrink: 0;
    padding-inline: var(--space-sm-x2);

    &:first-child {
      margin-inline-start: var(--space-sm-x1);
    }

    &:last-child {
      margin-inline-end: var(--space-sm-x1);
    }
  }

  .industry__scroll-button {
    position: absolute;
    top: 50%;
    z-index: var(--z-2);
    display: none;
    width: var(--length-14);
    height: var(--length-14);
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-round);
    border: var(--border-width-1) solid var(--color-white);
    background: oklch(from var(--color-primary-8) l c h / 60%);
    cursor: pointer;

    color: var(--color-black);
    opacity: 0;
    box-shadow: var(--shadow-4);
    transition: all 150ms ease;

    &:hover {
      scale: 1.05;
      background: var(--color-primary-6);
    }

    &:active {
      scale: 0.9;
    }
  }

  .industry__scroll-button--left {
    inset-inline-start: var(--length-4);
  }

  .industry__scroll-button--right {
    inset-inline-end: var(--length-4);
  }

  .industry__scroll-icon {
    width: var(--length-6);
    height: var(--length-6);
    color: var(--color-white);
  }

  .industry__footer {
    margin-inline: auto;
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .industry__container {
      padding-block: var(--space-lg-x2);
    }

    .industry__item {
      height: 100%;
      width: auto;
    }
  }

  @media (width >= 48em) {
    .industry {
      height: 90vh;
    }
  }

  @media (width >= 64em) {
    .industry__container {
      gap: 3.5rem;
      padding-block: 3.5rem;
      padding-inline-start: var(--space-lg-x1);
    }

    .industry__item {
      &:first-child {
        margin-inline-start: var(--space-lg-x1);
      }

      &:last-child {
        margin-inline-end: var(--space-lg-x1);
      }
    }

    .industry__scroll-button {
      display: flex;
    }

    .industry__carousel:hover .industry__scroll-button {
      translate: 0 -50%;
      opacity: 1;
    }
  }

  @media (width >= 80em) {
    .industry {
      padding-block-start: var(--space-lg-x4);
    }

    .industry__scroll-button {
      width: var(--length-16);
      height: var(--length-16);
    }

    .industry__scroll-icon {
      width: var(--length-8);
      height: var(--length-8);
    }
  }
}
@layer components {
  .instagram-preview {
    padding-block: var(--space-lg-x5);
    background: var(--color-white);
  }

  .instagram-preview__container {
    max-width: var(--max-reach-lg-x8);
    margin-inline: auto;
    display: grid;
    gap: var(--space-md);
  }

  .instagram-preview__header {
    padding-inline: var(--space-lg-x1);
    text-align: center;
  }

  .instagram-preview__list {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    padding-block-end: var(--space-md);
  }

  .instagram-preview__item {
    width: 75%;
    flex-shrink: 0;
    transform-origin: top;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding-inline-end: var(--space-md);
    transition: all 0.3s ease;

    &:first-child {
      margin-inline-start: var(--space-md);
    }
  }

  .instagram-preview__link {
    display: block;
  }

  .instagram-preview__card {
    position: relative;
    isolation: isolate;
    display: flex;
    aspect-ratio: 1;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
  }

  .instagram-preview__image {
    margin-inline: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 500ms ease;

    .instagram-preview__link:hover & {
      scale: 1.1;
    }
  }

  .instagram-preview__icon {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: var(--length-8);
    height: var(--length-8);
    z-index: var(--z-1);
  }

  .instagram-preview__icon-svg {
    width: 100%;
    height: 100%;
    color: var(--color-white);
  }

  .instagram-preview__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top left,
      var(--color-neutral-9),
      oklch(from var(--color-neutral-9) l c h / 10%) 30%
    );
  }

  .instagram-preview__indicators {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .instagram-preview__indicator {
    margin-inline: var(--space-sm-x3);
    width: var(--length-5);
    height: var(--length-5);
    cursor: pointer;
    border-radius: var(--border-radius-round);
    background: var(--color-white);
    box-shadow: var(--shadow-1);
    border: 1px solid oklch(from var(--color-black) l c h / 25%);
    transition: all 0.3s ease;
  }

  .instagram-preview__action {
    padding-inline: var(--space-lg-x1);
    margin-inline: auto;
    margin-block-start: var(--space-sm-x1);
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .instagram-preview {
      padding-inline: var(--space-lg-x1);
    }

    .instagram-preview__list {
      margin-inline: auto;
      display: grid;
      max-width: var(--max-reach-md);
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-lg-x1);
    }

    .instagram-preview__item {
      height: auto;
      width: 100%;
      padding: 0;

      &:first-child {
        margin-inline-start: 0;
      }
    }

    .instagram-preview__indicators {
      display: none;
    }
  }

  @media (width >= 64em) {
    .instagram-preview {
      padding-block: 8em;
    }

    .instagram-preview__list {
      max-width: var(--max-reach-lg-x6);
      grid-template-columns: repeat(3, 1fr);
    }

    .instagram-preview__item {
      height: 100%;
    }
  }

  @media (width >= 80em) {
    .instagram-preview {
      padding-block: 9em;
    }

    .instagram-preview__list {
      grid-template-columns: repeat(5, 1fr);
      gap: var(--space-sm-x2);
      max-width: var(--max-reach-lg-x8);
    }

    .instagram-preview__card {
      aspect-ratio: 3 / 4;
    }

    .instagram-preview__item:last-child {
      display: none;
    }
  }

  @media (width >= 96em) {
    .instagram-preview__list {
      max-width: 90rem;
    }
  }
}
@layer components {
  .jetwave-advantages {
    position: relative;
    padding-inline: var(--space-md);
    padding-block: var(--space-lg-x4);
    background-color: var(--color-primary-4);
    background-image: url(https://alpha-components.syd1.cdn.digitaloceanspaces.com/pattern-topography-white.svg);
  }

  .jetwave-advantages__container {
    margin-inline: auto;
    display: grid;
    gap: var(--space-md);
    border-radius: 1.5rem;
    background-color: var(--color-primary-6);
    padding-inline: var(--space-md);
    padding-block: var(--space-lg-x1);
    color: var(--color-white);
  }

  .jetwave-advantages__content {
    display: grid;
    width: 100%;
    gap: var(--space-md);
    padding-inline: var(--space-sm-x1);
  }

  .jetwave-advantages__heading {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--color-white);
  }

  .jetwave-advantages__subtitle {
    color: var(--color-primary-7);
  }

  .jetwave-advantages__description {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-light);
    color: var(--color-neutral-9);
  }

  .jetwave-advantages__benefits {
    display: grid;
    gap: var(--space-sm-x1);
  }

  .jetwave-advantages__benefit {
    display: flex;
    place-items: center;
    gap: var(--space-sm-x1);
  }

  .jetwave-advantages__benefit-icon-wrapper {
    padding: var(--space-sm-x2);
  }

  .jetwave-advantages__benefit-icon {
    color: var(--color-white);
    width: var(--length-20);
    height: var(--length-20);
  }

  .jetwave-advantages__benefit-title {
    font-weight: var(--font-weight-light);
  }

  .jetwave-advantages__container--enter {
    transition: all 1350ms ease-in-out;
    transition-delay: 250ms;
  }

  .jetwave-advantages__container--enter-from {
    opacity: 0;
    scale: 0.9;
  }

  .jetwave-advantages__container--enter-to {
    opacity: 1;
    scale: 1;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .jetwave-advantages__container {
      padding-inline: var(--space-lg-x1);
    }

    .jetwave-advantages__content {
      padding-inline: var(--space-lg-x1);
    }

    .jetwave-advantages__benefits {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .jetwave-advantages {
      padding-inline: var(--space-lg-x1);
    }

    .jetwave-advantages__container {
      max-width: var(--max-reach-lg-x5);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .jetwave-advantages__container {
      max-width: var(--max-reach-lg-x6);
      padding-inline: var(--space-lg-x4);
    }

    .jetwave-advantages__content {
      padding-inline: var(--space-md);
    }

    .jetwave-advantages__heading {
      max-width: var(--max-reach-lg-x5);
      padding-inline-start: 0;
    }

    .jetwave-advantages__benefit-icon {
      width: var(--length-16);
      height: var(--length-16);
    }

    .jetwave-advantages__benefits {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .jetwave-advantages {
      padding-block: 8rem;
    }

    .jetwave-advantages__container {
      max-width: var(--max-reach-lg-x8);
    }

    .jetwave-advantages__benefits {
      gap: var(--space-lg-x1);
    }

    .jetwave-advantages__benefit {
      gap: var(--space-sm-x3);
    }

    .jetwave-advantages__benefit-icon {
      width: var(--length-20);
      height: var(--length-20);
    }
  }
}
@layer components {
  .language-translate {
    position: relative;
  }

  .language-translate__trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm-x3);

    &:hover {
      cursor: pointer;
    }
  }

  .language-translate__label {
    font-size: var(--font-size-sm-x2);
  }

  .language-translate__chevron {
    width: var(--length-5);
    height: var(--length-5);
    color: var(--color-white);
    transition: all 0.2s ease;

    .language-translate:hover & {
      rotate: 180deg;
    }
  }

  .language-translate__dropdown {
    position: absolute;
    right: 0;
    top: 0;
    z-index: var(--z-5);
    margin-block-start: var(--space-sm-x3);
    display: none;
    width: var(--length-56);
    transform-origin: top right;
    padding-block-start: var(--space-lg-x1);

    .language-translate:hover & {
      display: block;
    }
  }

  .language-translate__menu {
    border-radius: var(--border-radius-3);
    background: var(--color-white);
    box-shadow: var(--shadow-4);
    border: var(--border-width-1) solid
      oklch(from var(--color-black) l c h / 5%);

    &:focus {
      outline: none;
    }
  }

  .language-translate__item {
    cursor: pointer;
    transition: all 300ms ease;

    &:first-child {
      border-start-start-radius: var(--border-radius-3);
      border-start-end-radius: var(--border-radius-3);
    }

    &:last-child {
      border-end-start-radius: var(--border-radius-3);
      border-end-end-radius: var(--border-radius-3);
    }

    & + & {
      border-block-start: var(--border-width-1) solid var(--color-neutral-2);
    }

    &:hover {
      background: var(--color-neutral-1);
    }
  }

  .language-translate__link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: var(--space-sm-x3);
    padding-inline: var(--space-sm-x2);
    padding-block: 0.375rem;
  }

  .language-translate__flag-icon {
    width: var(--length-6);
    height: var(--length-6);
  }

  .language-translate__flag-icon--large {
    width: var(--length-8);
    height: var(--length-8);
  }

  .language-translate__name {
    color: var(--color-black);
  }
}
@layer components {
  .navbar-desktop {
    position: absolute;
    top: var(--length-12);
    z-index: var(--z-4);
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .navbar-desktop__container {
    position: relative;
    display: grid;
    align-items: center;
    gap: var(--space-sm-x1);
    padding-inline: 3.5rem;
  }

  .navbar-desktop__logo--mobile {
    height: 50px;
    width: auto;
    object-fit: contain;
    margin-inline: auto;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
  }

  .navbar-desktop__logo--desktop {
    display: none;
    width: auto;
    object-fit: contain;
    margin-inline: auto;
  }

  .navbar-desktop__menu {
    z-index: var(--z-1);
    display: none;
    width: 100%;
    flex-direction: column;
  }

  .navbar-desktop__menu-list {
    position: relative;
    z-index: var(--z-1);
    margin-inline: auto;
    display: flex;
    width: fit-content;
    height: fit-content;
  }

  .navbar-desktop__menu-item {
    z-index: var(--z-1);
    border-block-end: var(--border-width-2) solid transparent;
    transition: all 150ms ease;

    &:hover {
      border-color: var(--color-primary-4);
    }
  }

  .navbar-desktop__menu-link {
    display: flex;
    align-items: center;
    padding-inline: var(--space-sm-x1);
    padding-block: var(--space-sm-x3);
  }

  .navbar-desktop__menu-text {
    z-index: var(--z-1);
    cursor: pointer;
    text-transform: none;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-white);
    background: transparent;
    /* peer-has hover: background: var(--color-neutral-1); */
  }

  .navbar-desktop__menu-chevron {
    width: var(--length-5);
    height: var(--length-5);
    color: var(--color-white);
    transition: all 150ms ease;
  }

  .navbar-desktop__menu-item:hover .navbar-desktop__menu-chevron {
    rotate: 180deg;
  }

  .navbar-desktop__submenu {
    position: absolute;
    left: 50%;
    top: var(--length-9);
    z-index: var(--z-1);
    display: none;
    width: 95vw;
    translate: -50%;
    padding-inline: var(--space-md);
    padding-block-start: var(--space-md);
  }

  .navbar-desktop__menu-item:hover .navbar-desktop__submenu {
    display: block;
  }

  .navbar-desktop__submenu-container {
    display: flex;
    height: fit-content;
    overflow: hidden;
    border-radius: var(--border-radius-3);
    border: var(--border-width-2) solid var(--color-neutral-0);
  }

  .navbar-desktop__submenu-column {
    display: grid;
    width: 100%;
    place-content: start;
    gap: var(--space-sm-x2);
    transition: all 300ms ease;

    &:first-child {
      background: var(--color-white);
    }

    &:nth-child(2) {
      background: var(--color-primary-0);
    }

    &:nth-child(3) {
      background: var(--color-primary-1);
    }

    &:last-child {
      background: var(--color-primary-0);
    }

    &:has(img):has(:hover) {
      background: var(--color-primary-7);
      color: var(--color-white);
    }

    &:has(img):has(p) {
      background: var(--color-white);
    }

    &:has(img) {
      padding: var(--space-sm-x2);
    }
  }

  .navbar-desktop__submenu-column-title {
    padding-block-end: var(--space-sm-x4);
    font-size: var(--font-size-sm-x2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
  }

  .navbar-desktop__submenu-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1.25rem;
  }

  .navbar-desktop__submenu-link {
    display: flex;
    gap: var(--space-sm-x3);
  }

  .navbar-desktop__submenu-icon {
    flex-shrink: 0;
    padding-block-start: var(--length-0-5);

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

  .navbar-desktop__submenu-item-content {
    display: grid;
  }

  .navbar-desktop__submenu-title {
    font-size: var(--font-size-sm-x2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-8);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: all 150ms ease;
  }

  .navbar-desktop__submenu-link:hover .navbar-desktop__submenu-title {
    color: var(--color-primary-4);
    text-decoration-color: var(--color-primary-6);
  }

  .navbar-desktop__submenu-description {
    font-size: var(--font-size-sm-x3);
    color: var(--color-neutral-6);
  }

  .navbar-desktop__image-card {
    display: grid;
    gap: var(--space-sm-x3);
  }

  .navbar-desktop__image-link {
    position: relative;
  }

  .navbar-desktop__image {
    max-height: var(--length-40);
    width: 100%;
    border-radius: 1.5rem;
    object-fit: cover;
    transition: all 300ms ease;
    height: auto;
  }

  .navbar-desktop__image-link:hover .navbar-desktop__image {
    filter: brightness(0.75);
  }

  .navbar-desktop__image-arrow {
    position: absolute;
    bottom: var(--length-2);
    right: var(--length-2);
    z-index: var(--z-1);
    width: var(--length-8);
    height: var(--length-8);
    border-radius: var(--border-radius-round);
    background: var(--color-white);
    padding: var(--space-sm-x3);
    color: var(--color-primary-8);
    transition: all 300ms ease;
  }

  .navbar-desktop__image-link:hover .navbar-desktop__image-arrow {
    width: var(--length-9);
    height: var(--length-9);
    rotate: -45deg;
  }

  .navbar-desktop__image-arrow-icon {
    width: 100%;
    height: 100%;
  }

  .navbar-desktop__image-title {
    margin-inline-end: auto;
    transform-origin: left;
    font-size: var(--font-size-sm-x2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    transition: scale 300ms ease;

    &:hover {
      scale: 0.95;
    }
  }

  .navbar-desktop__image-description {
    font-size: var(--font-size-sm-x3);
  }

  .navbar-desktop__actions {
    display: none;
    justify-content: flex-end;
    gap: var(--space-sm-x3);
  }

  .navbar-desktop__action-button {
    display: grid;
    height: 100%;
    place-items: center;
    border-radius: 0.75rem;
    background: transparent;
    text-align: center;
    font-size: var(--font-size-sm-x2);
    transition: all 150ms ease;

    &:hover {
      cursor: pointer;
      background: var(--color-primary-6);
    }
  }

  .navbar-desktop__action-icon {
    margin-inline: auto;
    width: var(--length-10);
    height: var(--length-10);
    border-radius: var(--border-radius-round);
    padding: var(--space-sm-x3);
    color: var(--color-white);
    transition: all 300ms ease;
  }

  .navbar-desktop__action-button:hover .navbar-desktop__action-icon {
    padding: 0.625rem;
  }

  .navbar-desktop__action-icon-svg {
    width: 100%;
    height: 100%;
  }

  .navbar-desktop__overlay {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    display: none;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    opacity: 0.25;
  }

  .navbar-desktop__container:has(ul:hover) ~ .navbar-desktop__overlay {
    display: block;
  }

  @media (width >= 40em) {
    .navbar-desktop__logo--mobile {
      height: var(--length-16);
    }
  }

  @media (width >= 48em) {
    .navbar-desktop__container {
      display: flex;
      flex-direction: column;
    }
  }

  @media (width >= 64em) {
    .navbar-desktop {
      position: fixed;
      top: var(--length-12);
      background: var(--color-black);
      box-shadow: 0 1px 2px 0 oklch(from var(--color-white) l c h / 10%);
    }

    .navbar-desktop__container {
      flex-direction: row;
      justify-content: space-between;
      padding-inline: var(--space-lg-x1);
      padding-block: var(--space-sm-x1);
    }

    .navbar-desktop__logo-link {
      flex-grow: 1;
    }

    .navbar-desktop__logo--mobile {
      display: none;
    }

    .navbar-desktop__logo--desktop {
      display: block;
      height: auto;
      width: var(--length-64);
      margin: 0;
    }

    .navbar-desktop__menu {
      display: flex;
    }

    .navbar-desktop__menu-link {
      padding-inline: var(--space-sm-x2);
    }

    .navbar-desktop__menu-text {
      font-size: var(--font-size-sm-x2);
    }

    .navbar-desktop__submenu-column {
      padding: var(--space-lg-x2);
    }

    .navbar-desktop__submenu-column:has(img) {
      padding: var(--space-sm-x1);
    }

    .navbar-desktop__actions {
      display: flex;
      width: var(--length-64);
    }
  }

  @media (width >= 80em) {
    .navbar-desktop__logo-link {
      flex-grow: 0;
    }

    .navbar-desktop__logo--desktop {
      width: var(--length-72);
    }

    .navbar-desktop__container {
      padding-inline: 3.5rem;
    }

    .navbar-desktop__menu-link {
      padding-inline: var(--space-sm-x1);
    }

    .navbar-desktop__submenu {
      width: 100vw;
      max-width: var(--max-reach-lg-x8);
    }

    .navbar-desktop__action-icon {
      width: var(--length-11);
      height: var(--length-11);
    }

    .navbar-desktop__actions {
      width: var(--length-72);
    }
  }

  @media (width >= 96em) {
    .navbar-desktop {
      padding-inline: var(--space-lg-x4);
    }

    .navbar-desktop__container {
      margin-inline: auto;
      max-width: 2000px;
      padding-inline: 0;
    }

    .navbar-desktop__logo--desktop {
      width: 500px;
    }

    .navbar-desktop__actions {
      width: 500px;
    }
  }
}
@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 0 / 0);
      backdrop-filter: blur(15px);
    }

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

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

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

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

  .navbar-dialog__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    display: grid;
    height: 85vh;
    width: 100%;
    gap: var(--space-lg-x2);
    overflow-x: hidden;
    border-start-start-radius: var(--border-radius-4);
    border-start-end-radius: var(--border-radius-4);
    padding-inline: var(--space-md);
    padding-block-end: var(--space-lg-x4);
    padding-block-start: var(--space-md);
    background: var(--color-neutral-0);
  }

  .navbar-dialog__close-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--z-2);
    display: flex;
    height: var(--length-12);
    width: 100%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      to top right,
      var(--color-primary-7),
      var(--color-primary-6),
      var(--color-primary-5)
    );
  }

  .navbar-dialog__close-text {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x4);
    text-transform: uppercase;
    color: var(--color-white);
  }

  .navbar-dialog__close-icon {
    width: var(--length-5);
    height: var(--length-5);
  }

  .navbar-dialog__section {
    display: grid;
    gap: var(--space-sm-x1);
  }

  .navbar-dialog__section--gap-sm {
    gap: var(--space-sm-x2);
  }

  .navbar-dialog__heading {
    border-block-end: var(--border-width-2) solid var(--color-primary-6);
    padding-block-end: var(--space-sm-x4);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
  }

  .navbar-dialog__heading--menu {
    font-size: var(--font-size-sm-x1);
  }

  .navbar-dialog__quicklinks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm-x3);
  }

  .navbar-dialog__quicklink {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm-x3);
    border-radius: var(--border-radius-2);
    padding-inline: var(--space-sm-x2);
    padding-block: var(--space-sm-x2);
    background: var(--color-neutral-7);
    color: var(--color-neutral-0);

    &:hover .navbar-dialog__quicklink-text {
      text-decoration-color: var(--color-primary-4);
    }
  }

  .navbar-dialog__quicklink-icon {
    width: var(--length-5);
    height: var(--length-5);
  }

  .navbar-dialog__quicklink-text {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 300ms;
    color: var(--color-neutral-2);
    font-size: var(--font-size-sm-x3);
  }

  .navbar-dialog__products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm-x1);
  }

  .navbar-dialog__product {
    display: grid;
    gap: var(--space-sm-x3);
  }

  .navbar-dialog__product-link {
    position: relative;

    &:hover .navbar-dialog__product-image {
      filter: brightness(0.75);
    }

    &:hover .navbar-dialog__product-arrow {
      width: var(--length-7);
      height: var(--length-7);
      transform: rotate(-45deg);
    }
  }

  .navbar-dialog__product-image {
    width: 100%;
    height: var(--length-28);
    border-radius: var(--border-radius-3);
    object-fit: cover;
    transition: filter 300ms;
  }

  .navbar-dialog__product-arrow {
    position: absolute;
    bottom: var(--length-2);
    right: var(--length-2);
    z-index: var(--z-1);
    width: var(--length-5);
    height: var(--length-5);
    border-radius: var(--border-radius-round);
    background: var(--color-white);
    padding: var(--space-sm-x4);
    color: var(--color-primary-9);
    transition: all 300ms;
  }

  .navbar-dialog__product-arrow-svg {
    width: 100%;
    height: 100%;
  }

  .navbar-dialog__product-title {
    margin-right: auto;
    transform-origin: left;
    font-size: var(--font-size-sm-x2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tightest);
    transition: transform 300ms;

    &:hover {
      transform: scale(0.95);
    }
  }

  .navbar-dialog__menu {
    display: grid;
    text-align: center;
    font-size: var(--font-size-lg-x1);
  }

  .navbar-dialog__menu-item {
    border-block-end: var(--border-width-1) solid var(--color-neutral-3);
    font-size: var(--font-size-sm-x2);
  }

  .navbar-dialog__menu-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-sm-x4);
    padding-block: var(--space-sm-x1);
    transition: background 500ms;

    &:active {
      background: var(--color-primary-2);
    }
  }

  .navbar-dialog__menu-text {
    flex-grow: 1;
    text-align: start;
  }

  .navbar-dialog__menu-chevron {
    color: var(--color-black);
  }

  .navbar-dialog__menu-chevron-svg {
    width: var(--length-5);
    height: var(--length-5);
  }

  .navbar-dialog__social-section {
    display: grid;
    width: 100%;
    gap: var(--space-sm-x1);
    padding-block-end: var(--space-md);
    padding-block-start: var(--space-sm-x3);
  }

  .navbar-dialog__socials {
    display: flex;
    margin-inline: auto;
    gap: var(--space-sm-x1);
  }

  .navbar-dialog__social-link {
    display: flex;
    width: var(--length-10);
    height: var(--length-10);
    border-radius: var(--border-radius-round);
    border: var(--border-width-1) solid var(--color-primary-7);
    padding: var(--space-sm-x2);
    color: var(--color-primary-6);
    transition: all 300ms;

    &:hover {
      background: var(--color-primary-8);
      color: var(--color-white);
    }
  }

  .navbar-dialog__social-handle {
    margin-inline: auto;
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: transform 0.2s;

    &:active {
      transform: scale(0.9);
    }
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .navbar-dialog__quicklink {
      padding-block: var(--space-sm-x2);
    }

    .navbar-dialog__product-image {
      height: var(--length-36);
    }

    .navbar-dialog__product-title {
      font-size: var(--font-size-sm-x1);
      line-height: var(--line-height-tight);
    }
  }

  @media (width >= 48em) {
    .navbar-dialog__products {
      grid-template-columns: repeat(4, 1fr);
    }

    .navbar-dialog__product {
      gap: var(--space-sm-x4);
    }

    .navbar-dialog__product-title {
      font-size: var(--font-size-sm-x2);
    }
  }

  @media (width >= 80em) {
    .navbar-dialog__quicklink-text {
      font-size: var(--font-size-sm-x2);
    }

    .navbar-dialog__social-link {
      width: var(--length-9);
      height: var(--length-9);
    }
  }
}
@layer components {
  .navbar-information {
    display: none;
    height: var(--length-12);
    background: var(--color-neutral-7);
    padding-inline: var(--space-lg-x4);
    padding-block: var(--space-sm-x2);
    text-align: center;
    font-size: var(--font-size-sm-x3);
    color: var(--color-neutral-1);
  }

  .navbar-information__container {
    position: relative;
    display: flex;
    margin-block: auto;
    width: 100%;
  }

  .navbar-information__list {
    display: flex;
    flex-grow: 1;
    gap: var(--space-lg-x1);
  }

  .navbar-information__link {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x3);
    transition: all 300ms ease;
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-underline-offset: 4px;
    color: var(--color-neutral-2);

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

  .navbar-information__icon {
    width: var(--length-6);
    height: var(--length-6);
    transition: all 0.2s ease;
  }

  .navbar-information__title {
    font-size: var(--font-size-sm-x3);
    color: var(--color-neutral-0);

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

  .navbar-information__actions {
    display: flex;
    gap: var(--space-lg-x1);
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 64em) {
    .navbar-information {
      position: fixed;
      left: 0;
      top: 0;
      z-index: var(--z-5);
      display: flex;
      align-items: center;
      width: 100%;
    }
  }

  @media (width >= 96em) {
    .navbar-information__container {
      margin-inline: auto;
      max-width: 2000px;
    }
  }
}
@layer components {
  .navbar-mobile {
    background: var(--color-primary-6);
    position: fixed;
    bottom: 0;
    z-index: var(--z-4);
    width: 100%;
    padding: 0 env(safe-area-inset-right) calc(env(safe-area-inset-bottom))
      env(safe-area-inset-left);
    color: var(--color-white);
  }

  .navbar-mobile__section {
    position: relative;
    width: 100%;
    height: 100%;
    padding-inline: var(--space-sm-x3);
  }

  .navbar-mobile__list {
    margin-inline: auto;
    display: grid;
    width: 100%;
    height: 100%;
    max-width: var(--max-reach-md);
    grid-template-columns: repeat(5, 1fr);
    place-items: center;
  }

  .navbar-mobile__item {
    width: 100%;
    height: 100%;
  }

  .navbar-mobile__link {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm-x4);
    border-radius: var(--border-radius-2);
    padding-inline: var(--space-sm-x3);
    padding-block: var(--space-sm-x1);
    text-align: center;
    font-size: var(--font-size-sm-x3);
    color: var(--color-white);
  }

  .navbar-mobile__link:hover {
    background: oklch(1 0 0 / 0.15);
  }

  .navbar-mobile__icon {
    width: var(--length-6);
    height: var(--length-6);
  }

  .navbar-mobile__icon-svg {
    width: 100%;
    height: 100%;
  }

  @media (width >= 64em) {
    .navbar-mobile {
      display: none;
    }
  }
}
@layer components {
  .navbar-search {
    max-height: none;
    max-width: none;
    background: none;
    border: none;
    display: none;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--z-5);
    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 0 / 0);
      backdrop-filter: blur(2px);
    }

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

    &[open] {
      display: flex;
      flex-direction: column;
      opacity: 1;
      transform: translateY(0);
    }

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

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

  .navbar-search__content {
    position: relative;
    margin-inline: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-sm-x4);
  }

  .navbar-search__bar-section {
    position: relative;
    height: var(--length-14);
    width: 100%;
    flex-shrink: 0;
    border-radius: var(--border-radius-5);
    padding-inline: var(--space-sm-x3);
    padding-block-start: var(--space-sm-x3);
  }

  .navbar-search__bar {
    display: flex;
    width: 100%;
    height: 100%;
    gap: var(--space-sm-x4);
    border-radius: var(--border-radius-3);
    border: var(--border-width-2) solid var(--color-black);
    background: var(--color-white);
    padding-inline: var(--space-sm-x3);
  }

  .navbar-search__back-icon {
    margin-block: auto;
  }

  .navbar-search__back-svg {
    margin-block: auto;
    width: var(--length-7);
    height: var(--length-7);
    color: var(--color-primary-7);
  }

  .navbar-search__input {
    width: 100%;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;

    &:focus {
      outline: none;
    }

    &:active {
      outline: none;
    }
  }

  .navbar-search__predictive {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    padding-inline: 0.625rem;
    padding-block-end: var(--space-sm-x3);
    padding-block-start: var(--space-sm-x4);
  }

  .navbar-search__results {
    display: flex;
    flex-direction: column;
    overflow: auto;
    border-radius: var(--border-radius-3);
    background: var(--color-neutral-1);
  }

  .navbar-search__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-sm-x1);
    padding: var(--space-sm-x1);
  }

  .navbar-search__view-all {
    display: flex;
    height: var(--length-20);
    width: 100%;
    align-items: center;
    border-top-left-radius: var(--border-radius-3);
    border-top-right-radius: var(--border-radius-3);
    background: var(--color-white);
  }

  .navbar-search__view-all-inner {
    margin-block: auto;
    height: var(--length-10);
    width: 100%;
    padding-inline: var(--space-sm-x1);
  }

  .navbar-search__view-all-btn {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-3);
    background: var(--color-primary-6);
    padding-inline: var(--space-sm-x2);
    padding-block: var(--space-sm-x3);
    text-align: center;
    color: var(--color-white);
    transition: all 300ms;

    &:hover {
      background: var(--color-black);
    }
  }

  /* Product Card */
  .navbar-search__product-link {
    display: flex;
    margin-inline: auto;
    width: 100%;
    max-width: var(--max-reach-md);
    height: var(--length-36);
    overflow: hidden;
    border-radius: var(--border-radius-3);
    background: var(--color-white);
    box-shadow: var(--shadow-3);
    transition:
      background 300ms,
      color 300ms;

    &:hover {
      background: var(--color-primary-6);
      color: var(--color-white);
    }

    &:hover .navbar-search__product-description {
      color: var(--color-white);
    }
  }

  .navbar-search__product-image {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    object-fit: cover;
    flex-shrink: 0;
  }

  .navbar-search__product-content {
    display: grid;
    grid-auto-rows: min-content;
    gap: var(--space-sm-x4);
    margin-block: auto;
    padding-inline: var(--space-sm-x1);
    padding-block: var(--space-sm-x3);
  }

  .navbar-search__product-title {
    font-size: var(--font-size-sm-x2);
  }

  .navbar-search__product-description {
    font-size: var(--font-size-sm-x3);
    color: var(--color-neutral-7);
    transition: color 300ms;
  }

  .navbar-search__product-price {
    font-weight: var(--font-weight-bold);
  }

  /* Collection */
  .navbar-search__collection {
    display: flex;
    margin-inline: auto;
    width: 100%;
    max-width: var(--max-reach-md);
    overflow: hidden;
    border-radius: var(--border-radius-3);
    background: var(--color-secondary-9);
    padding-inline: var(--space-sm-x1);
    padding-block: var(--space-sm-x3);
    box-shadow: var(--shadow-3);
  }

  .navbar-search__collection-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm-x4);
    margin-block: auto;
    padding-inline: var(--space-sm-x1);
    padding-block: var(--space-sm-x3);
    width: 100%;
    color: var(--color-white);
    transform-origin: left;
    transition: scale 300ms;

    &:hover {
      scale: 0.95;
    }
  }

  .navbar-search__collection-title {
    flex-grow: 1;
    font-size: var(--font-size-sm-x1);
    line-height: var(--line-height-tight);
  }

  .navbar-search__collection-icon {
    width: var(--length-6);
    height: var(--length-6);
    color: var(--color-primary-4);
  }

  .navbar-search__collection-icon svg {
    width: 100%;
    height: 100%;
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 48em) {
    .navbar-search__content {
      max-width: var(--max-reach-lg-x2);
      padding-block: var(--space-lg-x3);
    }

    .navbar-search__bar-section {
      font-size: var(--font-size-md);
    }

    .navbar-search__predictive {
      margin-block-start: var(--space-sm-x3);
      max-height: none;
    }

    .navbar-search__list {
      display: grid;
    }
  }

  @media (width >= 64em) {
    .navbar-search__content {
      max-width: var(--max-reach-lg-x5);
    }

    .navbar-search__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
@layer components {
  .product-feature-card {
    max-height: var(--max-reach-lg-x1);
    width: 80%;
    aspect-ratio: 9/12;
    flex-shrink: 0;
    padding-inline: var(--space-sm-x2);

    &:first-child {
      margin-inline-start: var(--space-sm-x1);
    }

    &:last-child {
      margin-inline-end: var(--space-sm-x1);
    }
  }

  .product-feature-card__link {
    position: relative;
    display: flex;
    height: 100%;
    flex-shrink: 0;
    transform-origin: top;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border-radius: var(--border-radius-3);
    border: var(--border-width-1) solid var(--color-neutral-6);
    transition: border-color 700ms ease;
  }

  .product-feature-card__image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    & img:last-child {
      animation-delay: 3s;
    }

    & img:nth-child(even) {
      animation-delay: 6s;
    }
  }

  .product-feature-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* animation: slowzoom 20s ease infinite alternate; */
    transition: all 300ms ease;
  }

  .product-feature-card__overlay {
    pointer-events: none;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    gap: var(--space-sm-x3);
    padding-block: var(--space-md);
    padding-block-end: var(--space-sm-x1);
    justify-content: space-between;
  }

  .product-feature-card__title {
    text-align: center;
    padding-inline: var(--space-sm-x3);
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
    transition: all 700ms ease;
  }

  .product-feature-card__button {
    pointer-events: auto;
    width: 66.667%;
    place-self: center;
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-underline-offset: 2px;
    border-radius: 0.75rem;
    background: var(--color-primary-5);
    color: var(--color-white);
    padding-inline: var(--space-md);
    padding-block: var(--space-sm-x3);
    font-size: var(--font-size-sm-x2);
    box-shadow: var(--shadow-3);
    transition: all 300ms ease;

    &:hover {
      text-decoration-color: var(--color-black);
      background: var(--color-primary-6);
      color: var(--color-white);
    }
  }

  .product-feature-card__slide-up {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    display: none;
    width: 100%;
    height: 100%;
    translate: 0 100%;
    border-radius: 0.5rem;
    background: var(--color-primary-6);
    transition: all 500ms ease;
  }

  .product-feature-card__description {
    max-width: var(--max-reach-lg-x2);
    margin-inline: auto;
    display: flex;
    color: var(--color-white);
    font-size: 16px;
    font-weight: var(--font-weight-light);
    padding-inline: var(--space-lg-x3);
    padding-block-end: var(--space-lg-x1);
    padding-block-start: var(--space-lg-x5);
    text-align: justify;
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .product-feature-card {
      aspect-ratio: 4 / 5;
      width: auto;
    }
  }

  @media (width >= 64em) {
    .product-feature-card {
      &:first-child {
        margin-inline-start: var(--space-lg-x1);
      }

      &:last-child {
        margin-inline-end: var(--space-lg-x1);
      }
    }

    .product-feature-card__link {
      scroll-snap-align: start;
    }

    .product-feature-card__overlay {
      z-index: var(--z-1);
    }

    .product-feature-card:hover .product-feature-card__link {
      border-color: var(--color-primary-8);
    }

    .product-feature-card:hover .product-feature-card__title {
      color: var(--color-white);
    }

    .product-feature-card:hover .product-feature-card__button {
      background: var(--color-white);
      color: var(--color-black);
    }

    .product-feature-card__button {
      &:hover {
        background: var(--color-neutral-9);
        color: var(--color-white);
      }
    }

    .product-feature-card__slide-up {
      display: flex;
    }

    .product-feature-card:hover .product-feature-card__slide-up {
      translate: 0 0;
    }
  }

  @media (width >= 96em) {
    .product-feature-card {
      max-height: var(--max-reach-lg-x2);
      aspect-ratio: 9/16;
      width: 100%;
      padding: 0;

      &:first-child {
        margin-inline-start: 0;
      }

      &:last-child {
        margin-inline-end: 0;
      }
    }

    .product-feature-card__description {
      text-align: center;
      padding-inline: var(--space-lg-x1);
    }
  }
}
@layer components {
  .timeline {
    background: var(--color-neutral-9);
  }

  .timeline__slide {
    position: relative;
    overflow: clip;
  }

  .timeline__line {
    position: absolute;
    right: 50%;
    z-index: var(--z-1);
    height: 100%;
    width: var(--length-1);
    border-right: var(--border-width-4) dashed
      oklch(from var(--color-neutral-2) l c h / 70%);
  }

  .timeline__circle {
    position: absolute;
    left: calc(-1 * var(--length-5));
    top: var(--length-14);
    width: var(--length-12);
    height: var(--length-12);
    border-radius: var(--border-radius-round);
    background: var(--color-neutral-0);
  }

  .timeline__year {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    background: oklch(from var(--color-neutral-9) l c h / 50%);
    padding-inline: var(--space-sm-x1);
    padding-block: var(--space-sm-x3);
  }

  .timeline__year--right {
    left: calc(100% + 1rem);
  }

  .timeline__year--left {
    right: calc(100% + 1rem);
  }

  .timeline__year-text {
    line-height: var(--line-height-tightest);
    text-align: center;
    font-size: var(--font-size-lg-x3);
    color: var(--color-primary-4);
  }

  .timeline__background-anchor {
    position: sticky;
    top: 0;
    height: var(--length-1);
    width: 100%;
  }

  .timeline__background {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100%;
  }

  .timeline__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .timeline__background-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom right,
      var(--color-neutral-9),
      oklch(from var(--color-neutral-4) l c h / 50%)
    );
    backdrop-filter: blur(4px);
  }

  .timeline__content-container {
    position: relative;
    z-index: var(--z-2);
    margin-inline: auto;
    max-width: var(--max-reach-lg-x8);
    padding-inline: var(--space-sm-x1);
    padding-block: 10rem;
  }

  .timeline__content {
    align-items: start;
    display: flex;
    max-width: 65ch;
    flex-direction: column;
    gap: var(--space-sm-x1);
    background: var(--color-neutral-9);
    padding: var(--space-sm-x1);
    color: var(--color-white);
  }

  .timeline__title {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-tightest);
    color: var(--color-white);
  }

  .timeline__logo {
    max-height: var(--length-16);
    max-width: var(--length-40);
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left;
  }

  .timeline__description {
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-sm-x1);
    line-height: var(--line-height-loose);
    color: var(--color-white);
  }

  .timeline__images {
    margin-block-start: var(--space-sm-x1);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }

  .timeline__image-item {
    margin-block: auto;
    display: flex;
    height: fit-content;
    width: fit-content;
    flex-shrink: 1;
    flex-direction: column;
    gap: var(--space-sm-x3);
  }

  .timeline__area-size {
    width: fit-content;
    font-size: var(--font-size-lg-x2);
  }

  .timeline__area-size--right {
    align-self: end;
  }

  .timeline__area-size--left {
    align-self: start;
  }

  .timeline__area-unit {
    margin-inline-start: var(--space-sm-x4);
    color: var(--color-primary-4);
    font-size: var(--font-size-sm-x3);
    vertical-align: super;
  }

  .timeline__image-frame {
    position: relative;
  }

  .timeline__image {
    width: 100%;
    height: 100%;
    max-width: var(--length-96);
    max-height: var(--length-96);
    object-fit: contain;
    object-position: left;
  }

  .timeline__tape {
    /* hardcoded - when implementing dark mode, should be addressed */
    fill: rgb(254, 243, 199);

    position: absolute;
    width: var(--length-28);
  }

  .timeline__tape--bottom-left {
    bottom: calc(-1 * var(--length-4));
    left: calc(-1 * var(--length-2));
  }

  .timeline__tape--bottom-right {
    rotate: -30deg;
    right: calc(-1 * var(--length-2));
    bottom: calc(-1 * var(--length-4));
  }

  .timeline__tape--top-left {
    top: var(--length-4);
    left: calc(-1 * var(--length-9));
    rotate: -80deg;
  }

  .timeline__tape--top-right {
    rotate: 12deg;
    top: 0;
    right: calc(-1 * var(--length-3));
  }

  .timeline__image-caption {
    font-family: "Vampiro One";
    width: fit-content;
  }

  .timeline__image-caption--right {
    text-align: right;
    align-self: end;
  }

  .timeline__image-caption--left {
    text-align: start;
    align-self: start;
  }

  /* --- ID-specific overrides --- */

  #timeline-textbox-0 {
    gap: var(--space-sm-x3);
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .timeline__content {
      padding: var(--space-lg-x1);
    }

    .timeline__tape--bottom-left {
      left: calc(-1 * var(--length-4));
    }

    .timeline__tape--top-left {
      left: calc(-1 * var(--length-12));
    }

    .timeline__tape--top-right {
      right: calc(-1 * var(--length-5));
    }
  }

  @media (width >= 48em) {
    .timeline__line {
      right: 33.333%;
    }

    .timeline__content-container {
      padding-inline: 0;
    }

    .timeline__content {
      max-width: var(--max-reach-lg-x2);
    }

    .timeline__images {
      flex-direction: row;
      gap: var(--space-lg-x3);
    }
  }

  @media (width >= 64em) {
    .timeline__circle {
      top: var(--length-28);
    }

    .timeline__background-anchor {
      top: calc(72px + 3rem);
    }

    .timeline__content-container {
      padding-block: 13rem;
    }

    .timeline__content {
      gap: var(--space-md);
      padding: var(--space-lg-x2);
    }

    .timeline__title {
      max-width: var(--max-reach-lg-x5);
    }

    .timeline__logo {
      max-height: var(--length-20);
      max-width: var(--length-64);
    }

    .timeline__images {
      position: absolute;
      right: var(--length-6);
      top: 50%;
      max-width: calc(100% - var(--max-reach-lg-x3));
      translate: 0 -50%;
      flex-direction: column;
      align-items: end;
    }

    .timeline__area-size {
      background: oklch(from var(--color-neutral-9) l c h / 50%);
      padding-inline: var(--space-sm-x1);
      padding-block: var(--space-sm-x3);
    }

    .timeline__tape--bottom-left {
      left: calc(-1 * var(--length-8));
    }

    .timeline__tape--bottom-right {
      right: calc(-1 * var(--length-4));
    }

    .timeline__tape--top-left {
      left: calc(-1 * var(--length-16));
    }

    .timeline__tape--top-right {
      top: calc(-1 * var(--length-4));
      right: calc(-1 * var(--length-4));
    }

    .timeline__image-frame svg {
      width: var(--length-32);
    }

    .timeline__image {
      max-width: 36rem;
      max-height: 36rem;
    }

    .timeline__image-caption {
      background: oklch(from var(--color-neutral-9) l c h / 50%);
      padding-inline: var(--space-sm-x1);
      padding-block: var(--space-sm-x3);
    }

    #timeline-circle-2 {
      top: var(--length-16);
    }

    #timeline-circle-3 {
      top: var(--length-20);
    }

    #timeline-textbox-0 {
      gap: var(--space-sm-x1);
    }

    #timeline-textbox-container-3 {
      padding-block: 20rem;
    }
  }

  @media (width >= 80em) {
    .timeline__title {
      max-width: var(--max-reach-lg-x7);
    }

    .timeline__year-text {
      width: max-content;
    }
  }

  @media (width >= 96em) {
    .timeline__tape--bottom-right {
      right: calc(-1 * var(--length-16));
    }

    .timeline__tape--top-left {
      left: calc(-1 * var(--length-20));
    }

    .timeline__tape--top-right {
      right: calc(-1 * var(--length-8));
    }

    .timeline__image-frame svg {
      width: var(--length-40);
    }
  }
}
@layer components {
  .who-we-are {
    background: var(--color-white);
    padding-block: 8rem;
  }

  .who-we-are__container {
    margin-inline: auto;
    display: grid;
    max-width: var(--max-reach-lg-x8);
    gap: var(--space-lg-x1);
  }

  .who-we-are__content {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 65ch;
    padding-inline: var(--space-lg-x2);
  }

  .who-we-are__decorative-image {
    position: absolute;
    width: 33.333%;
    aspect-ratio: 1;
    min-width: var(--length-40);
    max-width: var(--length-52);
    top: var(--length-12);
    left: var(--length-8);
    rotate: -12deg;
    object-fit: contain;
    opacity: 0.1;
    height: auto;
  }

  .who-we-are__content-inner {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: var(--space-md);
  }

  .who-we-are__gallery {
    position: relative;
    margin-inline: auto;
    display: grid;
    height: var(--length-72);
    width: 100%;
    gap: var(--space-sm-x1);
    max-height: var(--max-reach-md);

    & img {
      position: absolute;
      height: fit-content;
      width: 75%;
      min-width: var(--length-60);
      max-width: var(--length-72);
      border-radius: var(--border-radius-3);
      object-fit: contain;
      box-shadow: var(--shadow-4);
    }
  }

  .who-we-are__gallery-image--bottom {
    bottom: 0;
    left: 0;
  }

  .who-we-are__gallery-image--top {
    top: 0;
    right: 0;
  }

  .who-we-are__description {
    margin-inline: auto;
    padding-inline: var(--space-lg-x2);
    line-height: var(--line-height-loose);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-sm-x1);
    color: var(--color-neutral-5);

    & p {
      margin-block-start: var(--space-md);
    }

    & p:first-child {
      margin-block-start: 0;
    }
  }

  @media (width >= 48em) {
    .who-we-are__container {
      gap: var(--space-lg-x2);
      padding-inline: var(--space-lg-x3);
    }

    .who-we-are__content {
      padding: 0;
    }

    .who-we-are__content-inner {
      gap: var(--space-lg-x2);
    }

    .who-we-are__decorative-image {
      width: var(--length-64);
      max-width: none;
      top: calc(-1 * var(--length-4));
      left: calc(-1 * var(--length-4));
    }

    .who-we-are__gallery {
      & img {
        max-width: var(--length-80);
      }
    }

    .who-we-are__description {
      padding: 0;
    }
  }

  @media (width >= 64em) {
    .who-we-are__container {
      grid-template-columns: 3fr 2fr;
    }

    .who-we-are__content {
      max-width: none;
    }

    .who-we-are__title {
      text-align: start;
    }

    .who-we-are__decorative-image {
      left: var(--length-2);
      top: calc(-1 * var(--length-12));
    }

    .who-we-are__gallery {
      height: 100%;

      & img {
        width: 100%;
        max-width: var(--length-96);
        border-radius: 1.5rem;
      }
    }
  }

  @media (width >= 80em) {
    .who-we-are__container {
      grid-template-columns: 5fr 4fr;
      gap: var(--space-lg-x4);
    }
  }
}
@layer components {
  .why-choose-jetwave {
    position: relative;
    overflow: clip;
    background: var(--color-black);
  }

  .why-choose-jetwave__container {
    position: relative;
    z-index: var(--z-1);
    display: grid;
    margin-inline: auto;
    gap: var(--space-lg-x4);
    padding-block-start: var(--space-lg-x4);
  }

  .why-choose-jetwave__content {
    display: grid;
    gap: var(--space-lg-x1);
    padding-inline: var(--space-lg-x2);
  }

  .why-choose-jetwave__header {
    display: grid;
    gap: var(--space-sm-x3);
  }

  .why-choose-jetwave__title {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--color-white);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-tightest);
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  .why-choose-jetwave__subtitle {
    color: var(--color-primary-4);
  }

  .why-choose-jetwave__description {
    font-weight: var(--font-weight-light);
    color: var(--color-white);
  }

  .why-choose-jetwave__actions {
    display: grid;
    gap: var(--space-sm-x2);
  }

  .why-choose-jetwave__image-grid {
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-sm-x4);
    width: 100%;
    height: 100%;
    max-height: var(--length-96);
  }

  .why-choose-jetwave__grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .why-choose-jetwave__badge {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: var(--length-36);
    height: var(--length-36);
    border-radius: var(--border-radius-round);
    padding: 0.625rem;
    color: var(--color-primary-6);
  }

  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    .why-choose-jetwave__badge-inner {
      animation: why-choose-jetwave-badge-enter linear both;
      animation-timeline: view();
      animation-range: entry 0vh exit -70vh;
    }

    @keyframes why-choose-jetwave-badge-enter {
      0% {
        translate: 50%;
        opacity: 0;
      }
      100% {
        translate: 0;
        opacity: 1;
      }
    }
  }

  .why-choose-jetwave__badge-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .why-choose-jetwave__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .why-choose-jetwave__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.25);
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .why-choose-jetwave__container {
      gap: 7rem;
      padding-block-start: 7rem;
    }

    .why-choose-jetwave__content {
      margin-inline: auto;
    }
  }

  @media (width >= 64em) {
    .why-choose-jetwave__container {
      margin-inline: 0;
      gap: var(--space-lg-x4);
      grid-template-columns: repeat(5, 1fr);
      max-width: none;
      align-items: center;
      justify-content: space-between;
      padding-inline-end: 0;
      padding-block: 0;
    }

    .why-choose-jetwave__content {
      grid-column: span 3;
      padding-block: 7rem;
      padding-inline-end: 0;
    }

    .why-choose-jetwave__title {
      max-width: var(--max-reach-lg-x5);
      padding-inline-start: 0;
    }

    .why-choose-jetwave__actions {
      display: flex;
      align-items: center;
    }

    .why-choose-jetwave__image-grid {
      grid-column: span 2;
      max-height: none;
    }

    .why-choose-jetwave__badge {
      display: flex;
      margin-inline-start: auto;
      width: var(--length-44);
      height: var(--length-44);
      flex-shrink: 0;
      background: transparent;
      padding: var(--space-lg-x2);
      color: var(--color-black);
    }
  }

  @media (width >= 80em) {
    .why-choose-jetwave__container {
      gap: var(--space-lg-x2);
    }

    .why-choose-jetwave__title {
      max-width: var(--max-reach-lg-x7);
    }

    .why-choose-jetwave__content {
      max-width: var(--max-reach-lg-x7);
    }
  }

  @media (width >= 96em) {
    .why-choose-jetwave__content {
      padding-block: 8rem;
    }
  }
}
@layer components {
  .why-choose-values {
    overflow: clip;
  }

  .why-choose-values__container {
    margin-inline: auto;
    padding-inline: var(--space-lg-x2);
    padding-block: 7rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x3);
  }

  .why-choose-values__title {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-bolder);
    text-transform: uppercase;
    color: var(--color-neutral-9);
  }

  .why-choose-values__highlight {
    text-decoration: underline;
    text-decoration-color: var(--color-primary-4);
    text-underline-offset: 8px;
  }

  .why-choose-values__list {
    display: grid;
    gap: var(--space-lg-x2);
    justify-content: start;
  }

  .why-choose-values__card {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    place-content: space-between;
    align-items: start;
    gap: var(--space-sm-x1);
    place-self: center;
  }

  .why-choose-values__icon {
    width: var(--length-20);
    height: var(--length-20);
    flex-grow: 0;
    color: var(--color-white);
    background: var(--color-primary-4);
    border-radius: var(--border-radius-round);
    padding: var(--space-sm-x3);
  }

  .why-choose-values__value {
    flex-grow: 0;
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    line-height: var(--line-height-tight);
  }

  .why-choose-values__description {
    flex-grow: 1;
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-sm-x1);
  }

  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    .why-choose-values__card {
      animation: why-choose-values-card-enter linear both;
      animation-timeline: view();
      animation-range: entry 0vh exit -70vh;
    }

    @keyframes why-choose-values-card-enter {
      0% {
        translate: 50% 0;
        opacity: 0;
      }
      100% {
        translate: 0;
        opacity: 1;
      }
    }

    @media (width >= 64em) {
      .why-choose-values__card {
        animation-name: why-choose-values-card-enter-lg;
      }

      @keyframes why-choose-values-card-enter-lg {
        0% {
          scale: 0.9;
          opacity: 0;
        }
        100% {
          scale: 1;
          opacity: 1;
        }
      }
    }
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .why-choose-values__title {
      text-align: center;
    }

    .why-choose-values__list {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-lg-x4);
    }

    .why-choose-values__card {
      align-items: center;
      max-width: 100%;
    }

    .why-choose-values__value {
      text-align: center;
    }

    .why-choose-values__description {
      text-align: center;
    }
  }

  @media (width >= 48em) {
    .why-choose-values__list {
      margin-inline: auto;
    }
  }

  @media (width >= 64em) {
    .why-choose-values__container {
      max-width: none;
      padding-block: var(--space-lg-x5);
      gap: var(--space-lg-x4);
    }

    .why-choose-values__title {
      padding-inline-start: 0;
      text-align: start;
    }

    .why-choose-values__list {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-md);
    }
  }

  @media (width >= 80em) {
    .why-choose-values__container {
      max-width: var(--max-reach-lg-x8);
      padding-block: 8rem;
    }

    .why-choose-values__icon {
      width: var(--length-24);
      height: var(--length-24);
    }
  }

  @media (width >= 96em) {
    .why-choose-values__container {
      max-width: 90rem;
    }
  }
}
@layer components {
  .why-jetwave-about {
    background: var(--color-white);
    padding-block: var(--space-lg-x5);
  }

  .why-jetwave-about__container {
    margin-inline: auto;
    display: grid;
    max-width: var(--max-reach-lg-x8);
    gap: var(--space-md);
  }

  .why-jetwave-about__media-column {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 65ch;
    padding-inline: var(--space-lg-x2);
  }

  .why-jetwave-about__decorative-badge {
    position: absolute;
    right: var(--length-8);
    top: var(--length-12);
    display: none;
    width: 33.333%;
    min-width: var(--length-40);
    max-width: var(--length-52);
    rotate: 12deg;
    border-radius: var(--border-radius-round);
    background: var(--color-primary-6);
    object-fit: contain;
    padding: var(--space-sm-x1);
    opacity: 0.1;

    & svg {
      width: 100%;
      height: 100%;
      color: var(--color-white);
    }
  }

  .why-jetwave-about__media-content {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: var(--space-md);
  }

  .why-jetwave-about__heading {
    height: min-content;
    text-align: center;
    font-size: var(--font-size-lg-x4);

    & span {
      color: var(--color-primary-7);
    }
  }

  .why-jetwave-about__image-grid {
    position: relative;
    margin-inline: auto;
    display: none;
    width: 100%;
    gap: var(--space-sm-x1);

    & img {
      position: absolute;
      height: fit-content;
      width: 75%;
      object-fit: contain;
      box-shadow: var(--shadow-4);
    }
  }

  .why-jetwave-about__image--first {
    top: 0;
    left: 0;
  }

  .why-jetwave-about__image--second {
    top: 50%;
    translate: 0 -50%;
    right: 0;
  }

  .why-jetwave-about__image--third {
    bottom: 0;
    left: var(--length-6);
  }

  .why-jetwave-about__content-column {
    margin-inline: auto;
    display: flex;
    width: fit-content;
    flex-direction: column;
    gap: var(--space-lg-x1);
    padding-inline: var(--space-lg-x2);
  }

  .why-jetwave-about__content-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .why-jetwave-about__description {
    margin-inline: auto;
    width: 100%;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-loose);
    color: var(--color-neutral-5);

    & p {
      margin-block-start: var(--space-md);
    }

    & p:first-child {
      margin-block-start: 0;
    }
  }

  .why-jetwave-about__checklist-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg-x1);
  }

  .why-jetwave-about__checklist {
    margin-inline: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-sm-x1);
  }

  .why-jetwave-about__checklist-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x1);
    overflow: hidden;
  }

  .why-jetwave-about__checklist-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x3);
    font-weight: var(--font-weight-light);
    color: var(--color-neutral-5);
  }

  .why-jetwave-about__check-icon {
    width: var(--length-7);
    height: var(--length-7);
    fill: var(--color-primary-4);
  }

  /* Stimulus transition classes */

  .why-jetwave-about__checklist-item--enter {
    transition: all 1s ease-in-out;
  }

  .why-jetwave-about__checklist-item--enter-from {
    translate: var(--length-10);
    opacity: 0;
  }

  .why-jetwave-about__checklist-item--enter-to {
    translate: 0;
    opacity: 1;
  }

  .why-jetwave-about__mobile-images {
    position: relative;
    margin-inline: auto;
    display: grid;
    height: 26rem;
    width: 100%;
    max-width: 65ch;
    gap: var(--space-sm-x1);

    & img {
      position: absolute;
      height: fit-content;
      border-radius: var(--border-radius-3);
      object-fit: contain;
      box-shadow: var(--shadow-4);
    }
  }

  .why-jetwave-about__mobile-decorative-badge {
    position: absolute;
    right: calc(-1 * var(--length-4));
    top: calc(-1 * var(--length-24));
    width: 33.333%;
    min-width: var(--length-40);
    max-width: var(--length-52);
    rotate: 12deg;
    border-radius: var(--border-radius-round);
    background: var(--color-primary-6);
    object-fit: contain;
    padding: var(--space-sm-x1);
    opacity: 0.1;

    & svg {
      width: 100%;
      height: 100%;
      color: var(--color-white);
    }
  }

  .why-jetwave-about__mobile-image-wrapper {
    & img {
      width: 75%;
      min-width: var(--length-60);
      max-width: var(--length-72);
    }
  }

  /* --- Media queries (smallest → largest) --- */

  @media (width >= 40em) {
    .why-jetwave-about__mobile-images {
      height: 30rem;
    }

    .why-jetwave-about__mobile-decorative-badge {
      top: calc(-1 * var(--length-12));
      right: var(--length-4);
    }

    .why-jetwave-about__mobile-image-wrapper {
      & img {
        max-width: var(--length-80);
      }
    }

    .why-jetwave-about__image--third {
      left: var(--length-12);
    }
  }

  @media (width >= 48em) {
    .why-jetwave-about__container {
      gap: var(--space-lg-x2);
      padding-inline: var(--space-lg-x3);
    }

    .why-jetwave-about__media-column {
      padding: 0;
    }

    .why-jetwave-about__decorative-badge {
      right: calc(-1 * var(--length-4));
      top: 0;
      width: var(--length-64);
      max-width: none;
    }

    .why-jetwave-about__media-content {
      gap: var(--space-lg-x2);
    }

    .why-jetwave-about__image-grid {
      height: 30rem;
    }

    .why-jetwave-about__content-column {
      gap: var(--space-lg-x4);
    }

    .why-jetwave-about__content-inner {
      gap: var(--space-lg-x2);
    }

    .why-jetwave-about__checklist {
      gap: var(--space-md);
      font-size: var(--font-size-md);
    }

    .why-jetwave-about__checklist-list {
      gap: var(--space-md);
    }

    .why-jetwave-about__checklist-item {
      gap: var(--space-sm-x2);
    }

    .why-jetwave-about__mobile-decorative-badge {
      right: calc(-1 * var(--length-4));
      top: calc(-1 * var(--length-20));
      width: var(--length-64);
      max-width: none;
    }
  }

  @media (width >= 64em) {
    .why-jetwave-about__container {
      grid-template-columns: 2fr 3fr;
    }

    .why-jetwave-about__media-column {
      order: 999;
      max-width: none;
    }

    .why-jetwave-about__decorative-badge {
      display: block;
      top: calc(-1 * var(--length-12));
      right: var(--length-2);
    }

    .why-jetwave-about__heading {
      text-align: right;
    }

    .why-jetwave-about__image-grid {
      display: grid;
      height: 100%;
      max-height: var(--max-reach-lg-x3);

      & img {
        width: 100%;
        max-width: var(--length-96);
        border-radius: 1.5rem;
      }
    }

    .why-jetwave-about__content-column {
      padding-inline: 0;
      padding-block-end: 0;
    }

    .why-jetwave-about__content-inner {
      gap: var(--space-md);
    }

    .why-jetwave-about__checklist {
      gap: var(--space-sm-x1);
      font-size: var(--font-size-sm-x1);
    }

    .why-jetwave-about__checklist-list {
      gap: var(--space-sm-x1);
    }

    .why-jetwave-about__checklist-item {
      gap: var(--space-sm-x3);
    }

    .why-jetwave-about__mobile-images {
      display: none;
    }
  }

  @media (width >= 80em) {
    .why-jetwave-about__container {
      grid-template-columns: 4fr 5fr;
      gap: var(--space-lg-x4);
    }

    .why-jetwave-about__content-inner {
      gap: var(--space-lg-x2);
    }

    .why-jetwave-about__checklist {
      gap: var(--space-md);
      font-size: var(--font-size-md);
    }

    .why-jetwave-about__checklist-list {
      gap: var(--space-md);
    }

    .why-jetwave-about__checklist-item {
      gap: var(--space-sm-x2);
    }
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .hover-effect {
    @apply transition-transform duration-200 hover:-translate-y-1;
  }

  .hidden-underline {
    @apply underline decoration-transparent underline-offset-4 transition duration-300;
  }
}

/* Animation for Success Page */
.animate-checkmark {
  animation:
    stroke 1s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards,
    scale 0.3s ease-in-out 1.2s both;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

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

  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
    fill: #98fa96;
  }
}

@keyframes slowzoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.25);
  }
}

.animate-slowzoom {
  animation: slowzoom 20s linear infinite alternate;
}

/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animate-shake {
  animation: attention-shake 6s linear 1s infinite;
}

@keyframes attention-shake {
  0% {
    transform: translate(0);
  }
  2% {
    transform: translate(5px);
  }
  4% {
    transform: translate(-5px);
  }
  6% {
    transform: translate(5px);
  }
  8% {
    transform: translate(0);
  }
  100% {
    transform: translate(0);
  }
}

@-webkit-keyframes pulsating {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pulsating {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes xshift {
  0% {
    transform: translateX(0%);
    transform: scale(1);
  }

  100% {
    transform: translateX(-15%);
    transform: scale(1.1);
  }
}

.font-header {
  font-family: var(--sanico-font-header);
}
.font-script {
  font-family: "Vampiro One";
}

@keyframes colour-pulse {
  0% {
    @apply bg-jetwave-red-800;
  }
  20% {
    @apply bg-jetwave-red-900;
  }
  40% {
    @apply bg-jetwave-red-800;
  }
  100% {
    @apply bg-jetwave-red-800;
  }
}

.animate-colour-pulse {
  animation: colour-pulse 3s ease-in-out infinite;
  &:hover {
    animation: none;
  }
}