:root {
  --primary-base: hsl(24 71% 48%);
  --secondary-base: hsl(4 54% 85%);
  --neutral-base: hsl(45 22% 89%);
  --grey-base: hsl(0 0 6%);

  --primary-100: hsl(from var(--primary-base) calc(h - 6) calc(s + 10) calc(l + 45));
  --primary-200: hsl(from var(--primary-base) calc(h - 4) calc(s + 7) calc(l + 30));
  --primary-300: hsl(from var(--primary-base) calc(h - 2) calc(s + 3) calc(l + 15));
  --primary-400: hsl(from var(--primary-base) h s l); /* Exact Base Color */
  --primary-500: hsl(from var(--primary-base) calc(h + 2) calc(s - 3) calc(l - 10));
  --primary-600: hsl(from var(--primary-base) calc(h + 4) calc(s - 6) calc(l - 20));
  --primary-700: hsl(from var(--primary-base) calc(h + 6) calc(s - 10) calc(l - 28));
  --primary-800: hsl(from var(--primary-base) calc(h + 8) calc(s - 15) calc(l - 35));
  --primary-900: hsl(from var(--primary-base) calc(h + 10) calc(s - 20) calc(l - 40));

  --secondary-100: hsl(from var(--secondary-base) calc(h - 6) calc(s + 10) calc(l + 45));
  --secondary-200: hsl(from var(--secondary-base) calc(h - 4) calc(s + 7) calc(l + 30));
  --secondary-300: hsl(from var(--secondary-base) calc(h - 2) calc(s + 3) calc(l + 15));
  --secondary-400: hsl(from var(--secondary-base) h s l); /* Exact Base Color */
  --secondary-500: hsl(from var(--secondary-base) calc(h + 2) calc(s - 3) calc(l - 10));
  --secondary-600: hsl(from var(--secondary-base) calc(h + 4) calc(s - 6) calc(l - 20));
  --secondary-700: hsl(from var(--secondary-base) calc(h + 6) calc(s - 10) calc(l - 28));
  --secondary-800: hsl(from var(--secondary-base) calc(h + 8) calc(s - 15) calc(l - 35));
  --secondary-900: hsl(from var(--secondary-base) calc(h + 10) calc(s - 20) calc(l - 40));

  --neutral-100: hsl(from var(--neutral-base) calc(h - 6) calc(s + 10) calc(l + 45));
  --neutral-200: hsl(from var(--neutral-base) calc(h - 4) calc(s + 7) calc(l + 30));
  --neutral-300: hsl(from var(--neutral-base) calc(h - 2) calc(s + 3) calc(l + 15));
  --neutral-400: hsl(from var(--neutral-base) h s l); /* Exact Base Color */
  --neutral-500: hsl(from var(--neutral-base) calc(h + 2) calc(s - 3) calc(l - 10));
  --neutral-600: hsl(from var(--neutral-base) calc(h + 4) calc(s - 6) calc(l - 20));
  --neutral-700: hsl(from var(--neutral-base) calc(h + 6) calc(s - 10) calc(l - 28));
  --neutral-800: hsl(from var(--neutral-base) calc(h + 8) calc(s - 15) calc(l - 35));
  --neutral-900: hsl(from var(--neutral-base) calc(h + 10) calc(s - 20) calc(l - 40));

  --grey-100: hsl(from var(--grey-base) calc(h - 6) calc(s + 10) calc(l + 45));
  --grey-200: hsl(from var(--grey-base) calc(h - 4) calc(s + 7) calc(l + 30));
  --grey-300: hsl(from var(--grey-base) calc(h - 2) calc(s + 3) calc(l + 15));
  --grey-400: hsl(from var(--grey-base) h s l); /* Exact Base Color */
  --grey-500: hsl(from var(--grey-base) h calc(s - 3) calc(l - 10));
  --grey-600: hsl(from var(--grey-base) h calc(s - 6) calc(l - 20));
  --grey-700: hsl(from var(--grey-base) h calc(s - 10) calc(l - 28));
  --grey-800: hsl(from var(--grey-base) h calc(s - 15) calc(l - 35));
  --grey-900: hsl(from var(--grey-base) h calc(s - 20) calc(l - 40));

/*Typography Tokens*/

--ff-primary: 'Roboto Flex', sans-serif;

--ff-body: var(--ff-primary);
--ff-heading: var(--ff-primary);

--fw-thin: 100;
--fw-extralight: 200;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fw-black: 900;

--fs-200: clamp(0.75rem, 0.7273rem + 0.1136vw, 0.8125rem);
--fs-300: clamp(0.8125rem, 0.7898rem + 0.1136vw, 0.875rem);
--fs-400: clamp(0.9375rem, 0.9148rem + 0.1136vw, 1rem);
--fs-500: clamp(1.125rem, 1.0795rem + 0.2273vw, 1.25rem);
--fs-600: clamp(1.25rem, 1.1591rem + 0.4545vw, 1.5rem);
--fs-650: clamp(1.5rem, 1.3182rem + 0.9091vw, 2rem);
--fs-700: clamp(1.75rem, 1.4773rem + 1.3636vw, 2.5rem);
--fs-800: clamp(2rem, 1.6364rem + 1.8182vw, 3rem);
--fs-900: clamp(2.5rem, 1.9545rem + 2.7273vw, 4rem);

--roboto-axis-settings:
  "slnt" 0,
  "wdth" 100,
  "GRAD" 0,
  "XOPQ" 88,
  "XTRA" 400,
  "YOPQ" 116,
  "YTAS" 750,
  "YTDE" -250,
  "YTFI" 600,
  "YTLC" 500,
  "YTUC" 725
;

interpolate-size: allow-keywords;

/*Spacing Tokens*/

--sp-none: 0;
--sp-1: 0.125rem;
--sp-2: 0.25rem;
--sp-3: 0.5rem;
--sp-4: 0.75rem;
--sp-5: 1rem;
--sp-6: 1.5rem;
--sp-7: 2rem;
--sp-8: 2.5rem;
--sp-9: 4rem;

/*Radius & Border Tokens*/

--rd-none: 0;
--rd-4: 4px;
--rd-8: 8px;
--rd-12: 12px;
--rd-16: 16px;
--rd-24: 24px;
--rd-32: 32px;
--rd-40: 40px;
--rd-50: 50px;
--rd-64: 64px;
--rd-full: 100%;

--br-none: 0;
--br-1: 1px;
--br-2: 2px;

/*Semantic Tokens*/

--clr-text-main: var(--grey-900);
--clr-text-muted: var(--grey-600);
--clr-text-on-accent: var(--primary-400);

--clr-bg-body: var(--neutral-100);
--clr-bg-heading: var(--grey-900);
--clr-bg-surface: var(--neutral-200);
--clr-bg-bento: var(--primary-400);

--clr-accent: var(--primary-500);
--clr-accent-hover: var(--primary-400);

--clr-btn-surface: var(--grey-100);
--clr-tag--primary-surface: var(--primary-400);
--clr-tag-secondary-surface: var(--grey-100);
--clr-hero-surface: var(--primary-700);
--clr-footer-top-surface: var(--neutral-400);

--fw-body: var(--fw-regular);
--fw-primary-heading: var(--fw-extrabold);

--fs-body: var(--fs-00);
--fs-primary-heading: var(--fs-900);
--fs-secondary-heading: var(--fs-700);
--fs-nav: var(--fs-500);
--fs-button: var(--fs-500);
--fs-tag: var(--fs-300);

--card-rd: var(--rd-12);
--btn-rd: var(--rd-50);


accent-color: var(--clr-accent);
caret-color: var(--primary-400);
::selection {
  background-color: var(--primary-300);
}
}

/*https://piccalil.li/blog/a-modern-css-reset*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

html {
  color-scheme: light;
  min-height: 100%;
  scrollbar-gutter: stable;
}

body {
  min-height: 100svh;
  min-width: 320px;
}

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

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

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

*:focus-visible {
  outline: 3px solid var(--primary-500);
  outline-offset: 3px;
  border-radius: 2px;
}

.btn:focus-visible {
  border-radius: var(--rd-50);
}

/*Cascade Classes*/

header {
  position: sticky;
  top: 0;
  z-index: 1;
}

body {
  font-family: var(--ff-body);
  font-optical-sizing: auto;
  font-size: var(--fs-body);
  font-style: normal;
  font-variation-settings: var(--roboto-axis-settings);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--grey-900);
  background-color: var(--grey-400);
}

html:has(.menu-checkbox:checked) {
  overflow: hidden; 
  overscroll-behavior: none;
}

section {
  margin: var(--sp-5);
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}


form {
  display: grid;
}

details {
  background: hsl(from var(--grey-400) h s 20%);
  border: 1px solid transparent;
  padding: var(--sp-5) var(--sp-5);
  border-radius: var(--rd-8);
  overflow: hidden;
  transition: 0.2s linear;
}

details:hover {
  background: hsl(from var(--grey-400) h s 25%);
  cursor:pointer;
}

details[open] {
  background: hsl(from var(--grey-400) h s 35%);
}

details::details-content {
  color: var(--neutral-400);
  font-size: var(--fs-body);
  block-size: 0;
  transition:
    block-size 1s,
    content-visibility 1s;
  transition-behavior: allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

details > p {
  padding-block: var(--sp-5);  
  margin-inline: var(--sp-5);
}

summary {
    color: var(--neutral-400);
    font-size: var(--fs-500);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    margin-inline-start: 1rem;
    list-style-position: inside;
}

summary::marker {
    font-size: var(--fs-button);
    color: var(--primary-400);
}

/*Layout Selectors*/

.bento-grid,
.hero-grid,
.faq-wrapper,
.catering-grid,
.event-wrapper,
.testimonial-grid,
.event-wrapper.bento-grid,
.callout-banner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-7);
}

@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bento-item,
.product-card,
.newsletter {
  border-radius: var(--rd-16);
  overflow: hidden;
  background-color: var(--clr-bg-bento);
  color: var(--neutral-100);
}

.bento-grid.menu-conveyor > .bento-item,
.bento-grid.faq-wrapper > .bento-item,
.catering-grid .feature-card,
.event-wrapper .bento-item {
  background-color: hsl(from var(--grey-400) h s 12%);
  padding: var(--sp-7);
  gap: var(--sp-7);
}

.bento-grid.testimonial-grid .bento-item {
  background-color: transparent;
  padding: var(--sp-7);
  gap: var(--sp-7);
}

.hero-grid .bento-item,
.product-card,
.main-banner {
  display: grid;
  grid-template-areas: "stack";
  grid-template-rows: minmax(0, 1fr); 
  grid-template-columns: minmax(0, 1fr);
}

.hero-grid img,
.hero-grid .text-container,
.product-card img,
.product-card .card-overlay,
.catering-grid .main-banner img,
.catering-grid .main-banner .text-container,
.callout-banner .main-banner > * {
  grid-area: stack;
}

/*Component Classes*/

/*General*/

/*feature-section*/

.bento-item:has(.feature-left, .feature-right) {
  background-color: transparent;
  display: grid;
  place-items: center;
  gap: var(--sp-9);
  margin: var(--sp-9) 0;

  @media screen and (min-width: 768px) {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 768px) {
  .bento-item:has(.feature-left, .feature-right) {
    grid-template-areas: "text image";
  }

  .bento-item:has(.feature-right) {
    grid-template-areas: "image text";
  }
  
  .bento-item:has(.feature-left, .feature-right) .text-container {
    grid-area: text;
  }
  
  .bento-item:has(.feature-left, .feature-right) .feature-img {
    grid-area: image;
  }
}

.bento-item:has(.feature-left, .feature-right).text-container {
  padding: var(--sp-4);
  margin: var(--sp-7) 0;
}

.bento-item:has(.feature-left, .feature-right) .text-container h2 {
  font-size: var(--fs-900);
}

.bento-item:has(.feature-left, .feature-right) .text-container ol {
  list-style: none;
}

.bento-item:has(.feature-left, .feature-right) .text-container li {
  list-style: none;
  border-radius: var(--rd-16);
  padding: var(--sp-6) var(--sp-8);
  margin: var(--sp-5) 0;
  background-color: hsl(from var(--grey-400) h s 12%);
}

.bento-item:has(.feature-left, .feature-right) .text-container ol h3 {
  font-size: var(--fs-600);
  font-weight: var(--fw-extrabold);
}

.bento-item:has(.feature-left, .feature-right) .text-container p {
  font-size: var(--fs-500);
  padding: var(--sp-7) var(--sp-4);
}

.bento-item:has(.feature-left, .feature-right) .feature-img img {
  border-radius: var(--rd-16);
}

.reveal {
  animation: reveal linear both;
  animation-timeline: view(50% 20%);
}

@keyframes reveal {
  from {
  opacity: 0;
  scale: 85%;
  }

  to {
    opacity: 1;
    scale: 100%;
  }
}

.bento-item > .main-banner {
  display: grid;
  place-items: center;
  height: clamp(150px, 33svh, 300px);
}

/*gallery*/

.image-gallery {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 70rem;
  margin-inline: auto;
  margin: 0 var(--sp-5);
  gap: var(--sp-4);
}

.image-gallery > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  transition: scale 350ms ease, opacity 350ms linear;
}

.image-gallery:has(img:hover) img:not(:hover) {
  scale: 0.8;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .image-gallery {
  grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .image-gallery {
  grid-template-columns: repeat(3, 1fr);
  }
}

/*bento-column*/

.column-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  max-width: 70rem;
  margin-inline: auto;

  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr;
  }
}

.column-wrapper > * {
  display: grid;
  gap: var(--sp-4);
}
.column-wrapper .bento-grid {
  grid-template-rows: auto 1fr;
}

.column-wrapper .bento-grid .text-container {
  padding: var(--sp-6);
}

.column-wrapper .bento-grid ul {
  padding: var(--sp-4);
}

.column-wrapper .bento-grid h4 {
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
}

.column-wrapper .bento-grid p {
  padding: var(--sp-4);
}


.bento-item:has(.bento-minimal) {
  background-color: transparent;
}

.text-center {
  text-align: center;
}

.bento-item.secondary {
  background-color: var(--grey-300);
}

.secondary {
  background-color: var(--grey-300);
}

.primary {
  background-color: oklch(from var(--primary-400) calc(l - .2) calc(c - .05) h);
}

.secondary-banner {
  padding: var(--sp-4);

  h3 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-600);
    text-transform: uppercase;
  }

  p {
    font-weight: var(--fw-extralight);
    font-size: var(--fs-300);
  }
}

.two-column {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--rd-16);
  padding: var(--sp-4);
}

.column-item {  
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
}

.column-item:not(.column-item:last-child) {
  padding-bottom: var(--sp-4);
}

.column-item > * {
  border-radius: var(--rd-12);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.two-column.secondary .column-item > * {
  background-color: hsl(from var(--grey-300) h s calc(l + 10));  
}

.two-column.primary .column-item > * {
  background-color: oklch(from var(--primary-400) calc(l - .3) calc(c - .1) h);
}

.column-item span {  
  color: var(--neutral-400);
  font-weight: var(--fw-light);
  font-size: var(--fs-200);
}

.column-item span:first-child {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-600);
}

/*forms*/

.form-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 70rem;
  gap: var(--sp-4);  
  background-color: hsl(from var(--grey-400) h s calc(l + 10));
  border-radius: var(--sp-4);
  padding: var(--sp-6) var(--sp-6);

  @media (min-width: 1024px) {
    grid-template-columns: 1fr 1fr;

    .form-group:has(textarea),
    button {
      grid-column: 1 / -1;
    }
  }
}

.bento-item:has(.form-wrapper) {
  display: grid;
  gap: var(--sp-6);
  border-radius: 0;
}

.form-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sp-2);
  gap: var(--sp-2);
  align-items: center;
  
  label {
    font-weight: var(--fw-bold);
    font-size: var(--fs-500);
  }

  input, select, textarea {
    border-radius: var(--sp-4);
    background-color: var(--neutral-400);
    padding: var(--sp-2) var(--sp-4);
  }

  select {
    border-radius: var(--sp-2);
  }

  textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 15ch;
  }

  @media (min-width: 768px) {
    grid-template-columns: 200px 1fr;
  }
}

/*--Navigation--*/

.nav-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background-color: var(--clr-bg-heading);
  padding: var(--sp-none) var(--sp-5);
  border-bottom: var(--br-1) solid var(--neutral-400);
}

.nav-main > a {
  justify-self: center;
}

.nav-main > a img {
  height: var(--sp-8);
  min-width: var(--sp-9);
}

.nav-main > button svg,
.menu-btn svg {
  height: 1rem;
  width: auto;
  display: block;
  justify-self: start;
}

.close-btn svg {
  height: var(--sp-7);
  width: var(--sp-7);
  display: block;
  justify-self: center;
}

.nav-main > button:last-of-type svg {
  height: 1.5rem;
  justify-self: end;
}

.nav-main button,
.menu-btn,
.close-btn {
  background: transparent;
  border: none;
  padding: var(--sp-3);
  cursor: pointer;
  width: var(--sp-9);
  height: var(--sp-9);
  display: grid;
  place-items: center;
  transition: color 0.2s ease; 
  color: var(--neutral-400);
}

.nav-main button:hover,
.menu-btn:hover,
.close-btn:hover {
  color: var(--primary-400);
}

.menu-checkbox {
  display: none;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100svh;
  height: 100dvh;
  background-color: var(--grey-900);
  color: var(--neutral-100);
  padding: var(--sp-none) var(--sp-5);
  z-index: 2;
  transform: translateX(-100%); 
  transition: transform 0.3s ease-in-out;
}

.menu-checkbox:checked ~ .sidebar {
  transform: translateX(0);
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: hsl(from var(--grey-900) h s l / 0.6);
  z-index: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-checkbox:checked ~ .menu-overlay {
  opacity: 1;
  visibility: visible;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-7);
  padding: var(--sp-none) var(--sp-7);
}

.sidebar-nav a {
  width: fit-content;
  color: var(--neutral-100);
  text-decoration: none;
  font-size: var(--fs-600);
  font-weight: var(--fw-semibold);
  margin: 0 0;
  transition: margin 500ms;
}

.sidebar-nav a:hover {
  color: var(--primary-400);
  margin: var(--sp-2) 0;
}

.sidebar-nav a:active {
  color: var(--primary-200);
}

/*submit-banner*/

.submit-banner {
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  place-items: center;

  p {
    font-size: var(--fs-600);
    font-weight: var(--fw-light);
    max-width: 45ch;
  }

  @media (min-width: 768px) {
    grid-template-columns: auto auto;
    justify-content: space-between;

      p {
        text-align: start;
        max-width: 35ch;
      }
  }
}

/*callout-banner*/

.callout-banner .main-banner {
  height: 300px;

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

    p {
      max-width: 45ch;
    }

    .text-container {
      padding: var(--sp-5) var(--sp-7);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: var(--sp-4);
      background: linear-gradient(to right, hsl(from var(--grey-900) h s l / 0.8) 0%, var(--grey-400) 100%);
    }
}

.callout-banner .feature-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  align-items: center;
}

.callout-banner .feature-card img {
  width: var(--sp-7);
  min-height: var(--sp-7);
}

.callout-banner .feature-card span {
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  color: var(--primary-400);
}

@media screen and (min-width: 768px) {
  .callout-banner {
    grid-template-columns: repeat(3, 1fr);
  }

  .callout-banner .main-banner {
    grid-column: 1 / -1;
    min-height: 300px;
  }
}


/*--Hero Section--*/

.hero-grid {
  grid-template-rows: 70svh 200px;
  min-height: 400px;
  max-height: 115svh;
}

.hero-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-grid .text-container {
  padding: var(--sp-5) var(--sp-7);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;  
  min-height: 400px;
  max-height: 90svh;
  background: linear-gradient(
    to bottom,
    hsl(from var(--grey-900) h s l / 0.3) 0%,
    hsl(from var(--primary-900) h s l / 0.85) 100%
  );
}

.hero-grid .text-container:nth-child(2) {
  align-items: center;
  min-height: 0;
}

.hero-grid .text-container p {
  max-width: 28ch; margin-bottom: var(--sp-3);
}

.hero-grid .cta-group {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

@media (min-width: 768px) {
  .hero-grid {
    grid-template-rows: 1fr;
    max-height: 90svh;
  }
  .hero-grid .text-container {
    max-height: 100%; min-height: 400px;
  }

  .hero-grid .cta-group { 
  flex-direction: row;
  justify-content: flex-start;
  }
}

@media (min-width: 1024px) {
  .hero-grid {
    max-height: 80svh;
  }
}

/*--Product Carousel--*/

.product-carousel {
  width: 100%;
  overflow-x: auto;
  display: flex;
  gap: var(--sp-4);
  scroll-snap-type: x mandatory;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-carousel:active {
  cursor: grabbing;
}

.product-carousel::-webkit-scrollbar {
  display: none;
}

.product-card {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  align-content: center;
  scroll-snap-align: start;
}

.product-card img, .card-overlay {
  border-radius: var(--rd-16);
}

.product-card .card-overlay {
  padding: var(--sp-5) var(--sp-7);
  display: grid;
  grid-template-rows: auto 1fr;
  background: linear-gradient(
    to bottom,
    hsl(from var(--grey-900) h s l / 0.1) 0%,    
    hsl(from var(--grey-900) h s l / 0.7) 80%,
    hsl(from var(--grey-900) h s l) 100%
  );
}

.product-card .card-overlay:nth-child(2) {
  align-items: end; min-height: 0;
}

.product-card .card-overlay h2 {
  font-size: var(--fs-secondary-heading);
  font-weight: var(--fw-semibold);
}

.product-card .card-overlay p {
  font-size: var(--fs-body);
}

/*--Menu Conveyor--*/

.bento-grid.menu-conveyor > .bento-item {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  height: fit-content;
  min-height: 200px;
}

.menu-conveyor .bento-item .text-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-align: center;
  place-items: center;  
  line-height: 1;
}

.menu-conveyor .bento-item .text-container .tag {
  margin-top: 0;
}

.menu-conveyor .bento-item .text-container h2 {
  margin: 0;
}

.conveyor-carousel {
  display: flex;
  width: 100%; 
  overflow: hidden;
  position: relative;
}

.conveyor-carousel::-webkit-scrollbar {
  display: none;
}

.conveyor-carousel .group {
  display: flex;
  gap: var(--sp-4);
  padding-right: var(--sp-4);
  flex-shrink: 0; 
  min-width: 100%;
  width: max-content;  
  will-change: transform;
  animation: spin 60s infinite linear;
}

.conveyor-carousel:hover .group {
  animation-play-state: paused;
}

.conveyor-carousel .card {
  flex: 0 0 5em;
  height: 5em;
  width: 5em;
  padding: 1em;
  background-color: transparent;
  color: var(--primary-400);
  font-size: var(--fs-800);
  border-radius: var(--rd-16);
  text-align: center;
  align-content: center;
  transition: .2s ease;
}

.conveyor-carousel .card:hover {
  background-color: hsl(from var(--grey-400) h s 12%);
  cursor: pointer;
}

.conveyor-carousel .card img {
  transition: .2s ease;
}

.conveyor-carousel .card:hover img {
  transform: scale(1.5);
}

@keyframes spin {
   from {
    transform: translateX(0);
  }

   to {
    transform: translateX(-100%);
  }
}

@media screen and (min-width: 768px) {
  .menu-conveyor {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
  }

  .menu-conveyor .bento-item >  .text-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: start;
  place-items: center;
  line-height: 1;
  width: 100%;
  }

  .menu-conveyor .bento-item .tag {
    padding: 0;
  }

  .menu-conveyor .bento-item .btn {
    margin-top: var(--sp-5);
  }
}

/*--Catering Section--*/

.catering-grid .main-banner {
  min-height: 300px;
  max-height: 33svh;
}

.catering-grid .main-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catering-grid .main-banner p {
  max-width: 45ch;
}

.catering-grid .main-banner .text-container {
  padding: var(--sp-5) var(--sp-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-4);
  background: linear-gradient(to right, hsl(from var(--grey-900) h s l / 0.8) 0%, var(--grey-400) 100%);
}

.catering-grid .feature-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  align-items: center;
}

.catering-grid .feature-card img {
  width: var(--sp-7);
  min-height: var(--sp-7);
}

.catering-grid .feature-card span {
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  color: var(--primary-400);
}

@media screen and (min-width: 768px) {
  .catering-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .catering-grid .main-banner {
    grid-column: 1 / -1;
    min-height: 500px;
  }
}

/*--Events Section--*/

.event-wrapper .bento-item .text-container {
  display: grid;
  gap: var(--sp-4);
  text-align: center;
  place-items: center;
  line-height: 1;
}

.event-wrapper .text-container p {
  line-height: 1.5;
  max-width: 45ch;
  margin: var(--sp-7) 0 var(--sp-4);
  margin-inline: auto
}

.event-wrapper .bento-item.event-grid {
  display: grid;
  grid-template-columns: 1fr;
  background-color: transparent;
  gap: var(--sp-5);
  padding: 0;
}

.bento-item.event-grid .event-card {  
  background-color: hsl(from var(--grey-400) h s 12%);
  padding: var(--sp-7);
  border-radius: var(--sp-5);
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: flex-start;
  flex-grow: 0;
}

.bento-item.event-grid .event-card p {
  flex-grow: 1;
}

.bento-item.event-grid .event-card:hover {
  transition: .2s linear;
  background-color: hsl(from var(--grey-400) h s 20%)
}

.bento-item.event-grid .event-card h3 {
  font-size: var(--fs-600);
  font-weight: var(--fw-medium);
  margin: var(--sp-4) 0;
}

.bento-item.event-grid .event-card p {
  font-weight: var(--fw-extralight);
  margin-bottom: var(--sp-7);
}

@media screen and (min-width: 768px) {
  .event-wrapper.bento-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .event-wrapper .main-banner {
    grid-column: 1 / -1;
  }

  .event-wrapper .bento-item.event-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

/*--Testimonial Section--*/


.bento-grid.testimonial-grid .bento-item {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  place-items: center;
  text-align: center;
  gap: var(--sp-5);
}

.bento-grid.testimonial-grid .bento-item.testimonial {  
  background-color: hsl(from var(--grey-400) h s 12%);
}

.testimonial-grid .bento-item .testimonial {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  place-items: center;
}

.testimonial-grid .bento-item .testimonial svg {
  width: var(--sp-9);
  height: var(--sp-7);
  color: var(--primary-400);
  margin: auto;
  margin-top: var(--sp-7);
}

.bento-grid.testimonial-grid .bento-item .testimonial p {
  margin: var(--sp-4) 0 var(--sp-7) 0;
  font-size: var(--fs-600);
  max-width: 35ch;
}

@media screen and (min-width: 768px) {
.bento-grid.testimonial-grid .bento-item {
    grid-column: 1 / -1;
  }
}

/*--FAQ Section--*/

.faq-list {
  display: grid;
  gap: var(--sp-5);
  width: 100%;
}

.bento-grid.faq-wrapper > .bento-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  place-items: center;
}

.faq-wrapper h2 {
  font-size: var(--fs-secondary-heading);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding-block: var(--sp-3);
}

.faq-wrapper .bento-item .text-container {
  padding: var(--sp-5) var(--sp-7);
  text-align: center;
}

.faq-wrapper .bento-item .text-container p {
  font-weight: var(--fw-thin);
  max-width: 30ch;
}

@media screen and (min-width: 768px) {
  .bento-grid.faq-wrapper > .bento-item {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    place-items: start;
    overflow: visible;
  }

  .faq-wrapper .bento-item .text-container {
    text-align: start;
    position: sticky;
    top: 6rem;
  }

  .faq-wrapper .bento-item .text-container .tag {
    margin: 0;
    padding: 0;
}
}

/*--Newsletter Section--*/

.newsletter {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center; 
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
}

.newsletter-form input[type="email"] {
  background-color: hsl(from var(--neutral-100) h s l / 0.2);
  color: var(--grey-900);
  padding: var(--sp-4) var(--sp-5);
  line-height: 0;
}

.newsletter-form input[type="email"]:focus {
  background-color: hsl(from var(--neutral-100) h s l);
}

.newsletter-form input[type="email"]::placeholder {
  color: var(--neutral-100);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 100%;
  max-width: 400px;
}

.bento-item.newsletter {
  height: fit-content;
  width: 100%;
}

.newsletter h2 {
  font-size: var(--fs-secondary-heading);
  font-weight: var(--fw-semibold);
  text-align: center;
  margin-top: var(--sp-5);
}

.newsletter form {
  margin-bottom: var(--sp-5);
}

.newsletter form input {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--rd-50);
  border: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  width: 100%;
}

.newsletter p {
  font-weight: var(--fw-thin);
  text-align: center;
  max-width: 35ch;
}

@media screen and (min-width: 768px) {
  .bento-grid:has(.newsletter) {
    grid-template-columns: 1fr;
  }

  .bento-item.newsletter {
    max-height: 33svh;
    min-height: 280px;
  }

  .newsletter-form {
    flex-direction: row;
    padding-bottom: var(--sp-2);
  }
}

@media screen and (min-width: 1024px) {
  .bento-item.newsletter {
    justify-self: center;
    max-width: 70rem;
  }  
}

/*--Footer Section--*/

.footer-grid {
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
}

.footer-top {
  background-color: var(--clr-footer-top-surface);
  padding: var(--sp-6) var(--sp-6);
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
}

.footer-link-grid a img {
  height: 3rem;
  min-width: 4rem;
}

.footer-link-grid a {
  color: var(--neutral-400);
  text-decoration: none;
}

.footer-top .footer-link-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: auto;
  gap: var(--sp-6);
  justify-items: center;
  width: 100%;
}

.footer-top .footer-link-grid a {
  color: var(--grey-900);
}

.footer-top .footer-link-grid a:hover {
  color: var(--grey-900);
  background-color: var(--primary-200);
}

.footer-bottom {
  background-color: var(--grey-900);  
  color: var(--neutral-400);
  padding: var(--sp-8);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  text-align: center;
}

.footer-bottom .footer-link-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer-bottom .footer-link-grid div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.footer-bottom .footer-link-grid small {  
  font-weight: 200;
  font-size: var(--fs-200);
  margin: var(--sp-4);
}

@media screen and (min-width: 768px) {
  .footer-top {
    display: grid;
    padding: var(--sp-9);
  }

  .footer-top .footer-link-grid {    
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-items: center;
    justify-self: center;
  }

  .footer-bottom .footer-link-grid {
    flex-direction: row; justify-content: space-between;
  }

  .footer-bottom .footer-link-grid div {
    flex-direction: row; gap: var(--sp-6);
  }
}

@media screen and (min-width: 1024px) {

  .footer-top .footer-link-grid {
    grid-template-columns: repeat(5, 1fr);  
    grid-template-rows: repeat(2, 1fr);
    max-width: 70rem;
  }

  .footer-grid { 
    max-width: 100%;
  }
}

/*Content & Utility Classes*/

.btn-scroll-top {
  position: fixed;  
  display: grid;
  place-items: center;
  right: var(--sp-6);
  bottom: var(--sp-7);
  width: var(--sp-8);
  height: var(--sp-8);
  background-color: var(--primary-400);
  color: var(--secondary-400);
  border-radius: var(--rd-full);
  padding: var(--sp-3);
  animation: appear linear both;
  animation-timeline: scroll(y);
}

.btn-scroll-top svg {
  height: var(--sp-6);
}

.btn-scroll-top:hover {
  background-color: var(--primary-300);
}

@keyframes appear {
  0% {
    transform: translateY(100px);
}

  25% {
    transform: translateY(100px);
}

  40% {
    transform: translateY(0);
  }

  90% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100px);
}
}

@media (min-width: 768px) {

    .btn-scroll-top {
    right: var(--sp-6);
    width: var(--sp-8);
    height: var(--sp-8);
}
}

/* --- Tags --- */

.tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--rd-50);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.tag-primary {
  background-color: var(--clr-tag--primary-surface);
  color: var(--neutral-100);
}

.tag-secondary {
  font-weight: var(--fw-medium);
  background-color: hsl(from var(--secondary-base) h s l / .2);  
  color: var(--neutral-100);
  backdrop-filter: blur(4px);
}

.tag-minimal {
  font-weight: var(--fw-medium);
  color: var(--primary-400);
  margin: var(--sp-3);
}

.tag-date {
  background-color: hsl(from var(--primary-400) h s l / 0.1 );
  color: var(--primary-400);
  border-radius: var(--rd-12);
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) var(--sp-4);
}

.tag-date span {
  font-size: var(--fs-700);
  font-weight: var(--fw-light);
  line-height: 1;
}

/*--Buttons--*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid transparent;
  border-radius: var(--rd-50);
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.btn-disabled, 
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--primary-500);
  outline-offset: 3px;
  border-radius: var(--rd-50);
}

.btn-primary {
  background-color: var(--primary-400);
  color: var(--neutral-400);
  border-color: var(--neutral-400);
}

.btn-primary:hover {
  background-color: var(--primary-300);
  border-color: var(--neutral-500);
}

.btn-secondary {
  background-color: transparent;
  color: var(--neutral-400);
  border-color: var(--neutral-400);
}

.btn-secondary:hover {
  background-color: var(--neutral-400);
  color: var(--grey-900);
}

.btn-ghost {
  background-color: transparent;
  color: hsl(from var(--neutral-200) h s l / 0.5);
}

.btn-ghost:hover {
  background-color: var(--neutral-400);
  color: var(--grey-900);
  border-color: var(--neutral-400);
}

.btn-submit {
  background-color: var(--primary-400);
  color: var(--neutral-400);
  border-color: var(--neutral-400);
}

.btn-submit:hover {
  background-color: var(--neutral-200);
  color: var(--primary-400);
  border-color: var(--neutral-200);
}

.btn-minimal {
  background-color: hsl(from var(--neutral-400) h s l / 0 );
  color: hsl(from var(--neutral-400) h s l / .5 );
  border-color: transparent;
}

.btn-minimal:hover {
  background-color: hsl(from var(--neutral-400) h s l / 1 );
  color: var(--primary-800);
}

.btn-inline {
  padding: 0 0;
  font-size: var(--fs-400);
  color: hsl(from var(--neutral-400) h s l / .5 );
}

.btn-inline:hover {
  translate: var(--sp-3);
  padding: 0 var(--sp-4);
  font-size: var(--fs-400);
  color: var(--neutral-400);
  background-color: var(--primary-400);
}

.btn-block {
  font-weight: var(--fw-medium);
  background-color: var(--neutral-500);
  border-radius: var(--rd-12);
  border: var(--br-2) solid var(--neutral-800);  
  color: var(--grey-400);
}

.btn-block:hover {
  background-color: var(--neutral-200);
}

.btn-block:active {
  background-color: var(--neutral-700);
}

/*Text Style*/

h1 {
  font-size: var(--fs-primary-heading);
  font-weight: var(--fw-semibold);
  line-height: 1;
  margin-bottom: var(--sp-4);
}

h2 {
  font-size: var(--fs-secondary-heading);
  font-weight: var(--fw-semibold);
  color: var(--neutral-100);
  line-height: 1;
  margin-bottom: var(--sp-4);
}

.accent,
.bento-item .accent {
  color: var(--clr-text-on-accent);
}

.ani-link {
  text-decoration: none;
  background-image:
   linear-gradient(90deg, currentColor);
  background-size: 0% 3px;
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .2rem);
  padding-block: var(--sp-2);
  transition: background-size 500ms;
}

.ani-link:hover,
.ani-link:focus {
  background-size: 100% 3px;
}

.link-group {
  display: grid;
  grid-template-areas: 
    "email"
    "instagram"
    "facebook"
    "tiktok";
  gap: var(--sp-4);
  margin: var(--sp-7) var(--sp-none);

  :first-child {
    grid-area: email;
  }

  :nth-child(2) {
    grid-area: instagram;
  }
  :nth-child(3) {
    grid-area: facebook;
  }
  :nth-child(4) {
    grid-area: tiktok;
  }

  svg {
    height: var(--sp-6);
    width: var(--sp-7);
    margin-right: var(--sp-4);
    margin-left: 0px;
  }

  @media (min-width: 768px) {
  grid-template-areas: 
    "email email email"
    "instagram facebook tiktok";
  }
}