/* ===== Base & Resets ===== */
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: sans-serif; }
body { margin: 0; color: #333; background-color: #fff; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500; }
img, video { max-width: 100%; display: inline-block; vertical-align: middle; }
a { text-decoration: underline; transition: opacity .35s; background: transparent; }
a:hover { opacity: .86; }
h1, h2, h3 { margin: 20px 0 10px; font-weight: 700; font-family: Anton, Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; }
h1 { font-size: 38px; line-height: 44px; }
h2 { font-size: 32px; line-height: 36px; margin-top: 0; margin-bottom: 0; }
h3 { font-size: 24px; line-height: 30px; }
p { margin: 0 0 1.5rem; }
button { border: 0; background: none; cursor: pointer; }

/* ===== Variables ===== */
:root {
  --white: #fff;
  --red: #ff2222;
  --black: #000;
  --dark-red: #ca0000;
  --transparent: #0000;
}

/* ===== Webflow layout helpers kept ===== */
.w-inline-block { display: inline-block; max-width: 100%; }
.w-container { max-width: 940px; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 991px) { .w-container { max-width: 728px; } }
@media screen and (max-width: 479px) { .w-container { max-width: none; } }

.w-layout-grid { display: grid; grid-row-gap: 16px; grid-column-gap: 16px; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; }
.w-layout-blockcontainer { display: block; max-width: 940px; margin: 0 auto; }
.w-layout-vflex { display: flex; flex-direction: column; align-items: flex-start; }

/* ===== Generic ===== */
.section { position: relative; }
.section.red { background-color: var(--red); }
.section.footer { background-color: var(--red); }

.container { max-width: 77.5rem; padding: 10rem 2rem; }
.container.small-bottom-padding { padding-bottom: 5rem; }
.container.small-top-padding { padding-top: 5rem; }
.container.about-us-03-hero { padding-top: 8.7rem; padding-bottom: 1.7rem; }
.container.about-03-intro { padding-top: 26.3rem; }
.container.about-03-founder { padding-top: 5rem; }

.grid-block { position: relative; }
.grid-block.center-aligned { text-align: center; }
.grid-block.auto-right { margin-right: auto; }

.h1-heading { text-transform: uppercase; margin: 0 0 .8rem; font-size: 4rem; line-height: 1.1; }
.h1-heading.about-us-03 { color: var(--white); text-align: center; margin-top: -15px; font-size: 15rem; line-height: .9; }

.h2-heading { text-transform: uppercase; margin: 0 0 1rem; font-size: 4rem; line-height: 1.1; }
.h2-heading.white { color: var(--white); }
.h2-heading.red { color: var(--red); }
.h2-heading.red.larger { font-size: 5rem; }

.text-box.center-aligned { text-align: center; }
.text-box._33rem { max-width: 33rem; }
.text-box._22rem { max-width: 22rem; }
.text-box.white { color: var(--white); }
.text-box.flex-center-aligned { display: flex; justify-content: center; align-items: center; text-align: center; }
.text-box.flex-center-aligned.vertical { flex-flow: column; }
.text-box.flip-card-back-heading { max-width: 80%; }

.paragraph { color: var(--black); }
.paragraph.white { color: #fff; }
.paragraph.no-margin { margin-bottom: 0; }

.overflow-hidden { width: 100%; overflow: hidden; }

.image-wrapper.fast-food-scene { position: relative; }
.image-wrapper.red-background-gif { height: 42rem; margin-bottom: 1rem; overflow: hidden; border-radius: 8px; }
.image-wrapper.french-fry-with-hand { max-width: 30rem; position: absolute; inset: -4% auto auto 0%; }
.image-wrapper.french-fry-01 { max-width: 16rem; position: absolute; inset: 7% 11% auto auto; }
.image-wrapper.french-fry-02 { max-width: 16rem; position: absolute; inset: auto auto 5% 16%; }
.image-wrapper.flip-cards { height: 24rem; margin-bottom: 3rem; overflow: hidden; border-radius: 12px; }
.image-wrapper.about-us-accordion { border-radius: 8px; margin: 4rem auto 0; overflow: hidden; }

.content-image._100-full-width-height { width: 100%; height: 100%; }
.content-image._100-full-width-height.cover { object-fit: cover; }
.content-image.minus-icon { width: 22px; }

/* ===== Header & Menu ===== */
.header-nav { position: absolute; inset: 0 0 auto; z-index: 1000; }
.navigation-block { display: flex; align-items: center; justify-content: center; padding: 0 1.5rem; border-radius: 150px; gap: 47px; background: var(--white); }
.navigation-block.red { background: var(--red); }
.header-logo-link-block { max-width: 10rem; }
.logo-svg { color: #fff; max-width: 100%; }
.hamburger-icon { filter: invert(); width: 2rem; height: 2rem; }
.menu-wrapper { position: relative; z-index: 9999; width: 100%; max-width: 100em; margin: 0 auto; padding: 5em 6em; }
.menu-wrapper.header { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 100svh; padding-top: 8.6em; }
.menu-wrapper.nav { display: flex; justify-content: center; align-items: center; max-width: 100%; padding: .5em 2.2em 1em; }

.menu-container { background: var(--red); width: 100%; height: 0; position: fixed; inset: 0 0 auto auto; overflow: hidden; transition: height .35s ease; }
.menu-container.is-open { height: 100vh; }
.menu-overlay { position: fixed; inset: 0; background: #0006; border: 0; display: none; }
.menu-container.is-open + .menu-overlay,
.menu-container.is-open .menu-overlay { display: block; }

.header-nav-link-grid { width: 90%; grid-template-columns: repeat(5,1fr); }
.navigation-sub-heading { color: var(--white); text-transform: uppercase; font-family: Anton, sans-serif; font-size: 2rem; line-height: 1.2; margin: 0; }
.link-list-wrapper { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.navigation-link { color: #f7f7ee; font-size: 14px; text-decoration: none; }
.navigation-link.white { color: var(--white); font-size: 16px; }
.cart-button { color: #201916; background: transparent; max-width: 3rem; padding: 0; }
.cart-icon { width: 100%; }

/* ===== Hero eyebrow ===== */
.eyebrow-text-box.about-us-03-hero { display: inline-block; padding: .8rem; background: var(--dark-red); color: var(--white); text-transform: uppercase; border-radius: 10px; font-family: Anton, sans-serif; font-size: 2.2rem; transform: rotate(-7deg); }

/* ===== Gradient overlay ===== */
.gradient-overlay.about-us-03-hero { position: absolute; inset: auto 0 -6% 0; padding-bottom: 21%; background-image: linear-gradient(#e7e7e700, #fff); }

/* ===== Headings layout ===== */
.heading-grid { width: 100%; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; grid-template-rows: auto; }
.heading-grid.single-column { grid-template-columns: 2fr; grid-template-rows: auto auto; gap: 4px; }
.heading-grid.multiple-columns { grid-template-columns: 2fr 1fr 1fr 1fr 2.25fr; }

.content-grid { align-items: start; grid-template-columns: 2.5fr 1.5fr; grid-template-rows: auto; column-gap: 88px; }
.content-grid.about-us-03-intro { column-gap: 56px; grid-template-columns: 1fr 1fr; }

.content-wrapper.about-us-accordion { max-width: 70%; margin: 0 auto; }

/* ===== Slider ===== */
.slider { position: relative; text-align: center; background: transparent; height: auto; }
.slider.flip-cards { margin-top: 4rem; padding-bottom: 8px; }
.slider-mask { position: relative;  height: 100%; }
.slider-track { display: flex; will-change: transform; transition: transform 500ms ease; }
.w-slide, .slide { flex: 0 0 100%; width: 100%; }
.w-slider-nav { position: static; margin-top: 1rem; display: flex; justify-content: center; align-items: center; gap: .5rem; }
.w-slider-nav.w-round > button { border-radius: 999px; }
.w-slider-dot { width: 10px; height: 10px; background: #fff6; border: 0; }
.w-slider-dot[aria-current="true"] { background: #fff; box-shadow: 0 0 0 2px #fff; }

.w-slider-arrow-left, .w-slider-arrow-right { position: absolute; inset: -25% 0 auto auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 99px; border: 1px solid #eaedf0; color: var(--white); background: var(--red); }
.w-slider-arrow-left:hover, .w-slider-arrow-right:hover { background: var(--white); color: var(--red); border-color: var(--red); }
.flip-cards-slider-left-arrow { right: 6rem; }
.flip-cards-slider-right-arrow { right: 1.5rem; }

/* ===== Flip cards ===== */
.flip-card-wrapper { position: relative; perspective: 1200px; }
.flip-card-front,
.flip-card-back { position: absolute; inset: 0; border-radius: 11px; backface-visibility: hidden; transform-style: preserve-3d; box-shadow: 7px 7px 40px 6px #00000017; }
.flip-card-front { height: 43rem; padding: 2rem; color: #fff; background: #f3f3f3; overflow: hidden; }
.flip-card-back { height: 43rem; padding: 2rem; background: var(--red); transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; }
.flip-cards-content-wrapper { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; }
.flip-cards-content-wrapper.flex-box-vertical { flex-direction: column; align-items: center; justify-content: center; }
.open-close-circle-plus { width: 2.7rem; height: 2.7rem; display: flex; align-items: center; justify-content: center; border-radius: 180px; background: #fff; }
.open-close-circle-plus.flip-cards { width: 3.5rem; height: 3.5rem; position: absolute; inset: 3% auto auto 3%; }
.open-close-circle-plus.flip-cards.light-gray { background: var(--red); }
.open-close-circle-plus.flip-cards.close { background: var(--red); inset: 3% 3% auto auto; }
.flip-card-title { color: var(--red); font-family: Anton, sans-serif; text-transform: uppercase; font-size: 2.7rem; font-weight: 400; line-height: 1; }
.back-of-flip-card-title { color: var(--white); text-transform: uppercase; font-family: Anton, sans-serif; font-size: 2.4rem; }

/* Flip state */
.flip-card-wrapper:not(.is-flipped) .flip-card-front { transform: rotateY(0); }
.flip-card-wrapper:not(.is-flipped) .flip-card-back { transform: rotateY(180deg); }
.flip-card-wrapper.is-flipped .flip-card-front { transform: rotateY(-180deg); }
.flip-card-wrapper.is-flipped .flip-card-back { transform: rotateY(0); }

/* ===== Accordion ===== */
.accordion-content-contaner { display: flex; flex-direction: column; gap: 12px; }
.faq-outline { width: 100%; overflow: hidden; border: 1px solid #fff; border-radius: 12px; }
.faq-toggle { width: 100%; padding: 20px; display: inline-block; text-align: left; }
.faq-title-wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.faq-title { color: var(--white); text-transform: uppercase; font-family: Anton, sans-serif; font-size: 1.2rem; line-height: 1.3; }
.faq-icon { background: var(--white); border: 1px solid var(--white); border-radius: 80px; min-width: 35px; max-width: 35px; min-height: 35px; max-height: 35px; display: flex; align-items: center; justify-content: center; position: relative; }
.faq-list { background: transparent; position: static; display: block; }
.faq-tab { position: relative; top: -12px; padding: 0 44px 8px 20px; }
.faq-outline .minus { opacity: 0; position: absolute; }
.faq-outline[open] .minus { opacity: 1; }
.faq-outline[open] .plus { opacity: 0; }
.faq-list[hidden] { display: none; }

/* ===== Founder ===== */
.founder-quote-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 48px; margin-top: 4rem; }
.testimonial-founder-quote-image { width: 150px; position: absolute; right: 0; bottom: -22%; }
.founder-quote { position: relative; z-index: 10; color: var(--white); font-size: 24px; font-weight: 500; line-height: 1.2; }
.founder-nae { text-transform: uppercase; font-family: Anton, sans-serif; margin: 0; font-size: 1.6rem; line-height: 1.8; }
.founder-image-wrapper { background: var(--white); border-radius: 16px; max-width: 85%; transform: rotate(6deg); }
.founder-title { letter-spacing: -.02em; font-size: 16px; line-height: 1.8; margin: 0; }

/* ===== Team ===== */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 5rem; }
.team-card { background: var(--red); border-radius: 20px; display: flex; flex-direction: column; padding: 8px; font-weight: 500; }
.team-card-photo { width: 100%; object-fit: cover; border-radius: 16px; }
.team-member-image-wrapper { max-width: 70%; margin: 0 auto; }
.team-card-name { color: #fff; text-align: center; text-transform: uppercase; margin: 8px 0 19px; font-size: 1.4rem; font-weight: 400; line-height: 1; }
.team-card-description { background: #fff; border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 16px; margin-bottom: 1px; }

/* ===== Footer ===== */
.footer-container { position: relative; max-width: 77.5rem; padding: 11rem 2rem; }
.footer-container.new-footer { padding-top: 0; padding-bottom: 0; }
.footer-bottom { border-top: 1px solid #ffffff33; display: flex; align-items: center; justify-content: space-between; padding: 24px 0; font-size: 16px; line-height: 24px; }
.bottom-copyright-text-box { display: flex; align-items: center; justify-content: space-between; gap: 13px; flex: 1; }
.copyright-text { color: #fff; line-height: 1; }
.footer-logo-image-link-block { width: 100%; margin-top: 3.7rem; }
.footer-nav-link-grid { width: 100%; grid-template-columns: repeat(5, 1fr); }

/* ===== Reveal animations ===== */
.reveal, .reveal-delay, .first-animation-reveal, .second-animation-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: .2s; }

/* ===== Responsive ===== */
@media screen and (min-width: 1440px) {
  .container { max-width: 87.5rem; }
  .h1-heading { font-size: 5rem; }
  .h2-heading { font-size: 4.5rem; }
  .heading-grid.multiple-columns { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
  .footer-container { max-width: 86rem; }
  .header-nav-link-grid { width: 80%; }
}

@media screen and (min-width: 1920px) {
  .container { max-width: 120rem; }
  .h1-heading { font-size: 6rem; }
  .image-wrapper.red-background-gif { height: 38rem; }
  .image-wrapper.french-fry-with-hand { max-width: 35rem; }
  .h2-heading { font-size: 5.5rem; }
  .h2-heading.red.larger { font-size: 6rem; }
  .content-grid { column-gap: 364px; }
  .content-grid.about-us-03-intro { max-width: 80%; margin: 0 auto; }
  .footer-container { max-width: 120rem; }
  .header-nav-link-grid { width: 70%; }
}

@media screen and (max-width: 991px) {
  .container { max-width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }
  .container.small-top-padding.small-bottom-padding-tablet { padding-bottom: 5rem; }
  .h1-heading.about-us-03 { font-size: 10.5rem; }
  .image-wrapper.french-fry-with-hand { max-width: 24rem; top: 2%; }
  .image-wrapper.french-fry-01 { max-width: 12rem; top: 18%; right: 7%; }
  .h2-heading.red.larger { font-size: 4rem; }
  .heading-grid.single-column { grid-template-columns: 1fr; }
  .content-grid { grid-template-columns: 1fr; row-gap: 0; }
  .content-wrapper.about-us-accordion { max-width: 95%; }
  .slider.flip-cards { margin-top: 8.2rem; }
  .about-us-accordion-outer-grid, .founder-quote-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-container { padding: 8rem 1rem; }
  .menu-wrapper { padding-left: 6vw; padding-right: 6vw; }
  .menu-wrapper.header { padding-left: 3vw; padding-right: 3vw; }
  .header-nav-link-grid { width: 70%; grid-template-columns: repeat(3,1fr); grid-row-gap: 35px; }
  .footer-nav-link-grid { grid-template-columns: repeat(3,1fr); grid-row-gap: 35px; }
}

@media screen and (max-width: 767px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .container.about-us-03-hero { padding-bottom: 3.8rem; }
  .container.about-03-intro { padding-bottom: 2.6rem; }
  .h1-heading.about-us-03 { font-size: 8rem; }
  .text-box.eyebrow-title { font-size: 1.7rem; }
  .image-wrapper.french-fry-with-hand { max-width: 25rem; }
  .image-wrapper.french-fry-01 { max-width: 11rem; top: 29%; }
  .image-wrapper.french-fry-02 { max-width: 12rem; bottom: 0; left: 35%; display: none; }
  .image-wrapper.flip-cards { height: 18rem; }
  .h2-heading { font-size: 3.2rem; }
  .heading-grid.multiple-columns { display: flex; flex-direction: column; align-items: flex-start; }
  .content-grid.about-us-03-intro { grid-template-columns: 1fr; }
  .faq-title { font-size: 1.8rem; }
  .flip-card-front, .flip-card-back { height: 35rem; }
  .new-footer-newsletter { flex-direction: column; align-items: flex-start; margin-bottom: 1rem; }
  .footer-logo-image-link-block { margin-top: 2.6rem; }
  .menu-wrapper.nav { padding-left: 1em; padding-right: 1em; }
  .header-nav-link-grid { width: 90%; }
}

@media screen and (max-width: 479px) {
  .grid-block.center-aligned { max-width: 95%; margin: 0 auto; }
  .container.small-bottom-padding { padding-top: 4rem; }
  .container.about-03-intro { padding-top: 19.5rem; }
  .container.about-03-founder { padding-top: 1.6rem; }
  .h1-heading.about-us-03 { margin-top: 3px; font-size: 4.8rem; }
  .text-box._33rem.center-aligned { max-width: none; }
  .text-box.eyebrow-title { font-size: 1.4rem; }
  .image-wrapper.french-fry-01 { inset: auto 17% -5% auto; transform: rotate(23deg); }
  .image-wrapper.flip-cards { height: 14rem; }
  .h2-heading, .h2-heading.red { font-size: 3rem; }
  .slider.flip-cards { margin-top: 48%; }
  .faq-title { font-size: 1.3rem; }
  .eyebrow-text-box.about-us-03-hero { transform: rotate(-4deg); }
  .open-close-circle-plus.flip-cards { width: 3rem; height: 3rem; }
  .flip-card-back { height: 28rem; padding: 1.4rem; }
  .flip-card-front { height: 28rem; padding: 1rem; }
  .flip-cards-slider-left-arrow { right: 6rem; }
  .flip-cards-slider-right-arrow { right: 1.5rem; }
  .flip-card-title { font-size: 2.3rem; }
  .back-of-flip-card-title { font-size: 2rem; }
  .faq-tab { padding-left: 8px; }
  .faq-toggle { padding: 22px 8px; }
  .about-us-accordion-outer-grid { display: flex; flex-direction: column; }
  .testimonial-founder-quote-image { width: 115px; }
  .founder-quote { font-size: 20px; }
  .team-grid { grid-template-columns: 1fr; }
  .bottom-copyright-text-box { flex-direction: column; text-align: center; }
  .cart-button { min-width: 2.5rem; }
  .navigation-block { gap: 28px; }
  .header-logo-link-block { min-width: 7rem; }
  .menu-wrapper.header { padding-top: 6.6em; padding-bottom: 0; }
  .navigation-sub-heading { font-size: 1.5rem; }
  .link-list-wrapper { gap: 8px; margin-top: 8px; }
  .header-nav-link-grid { width: 90%; grid-template-columns: 1fr 1fr; gap: 23px; place-items: stretch; }
  .footer-nav-link-grid { grid-template-columns: 1fr 1fr; gap: 23px; place-items: stretch; }
}
