:root {

  --fc-orange:
    #f7a522;

  --fc-orange-deep:
    #ed8c19;

  --fc-red:
    #e8452b;

  --fc-yellow:
    #ffc247;

  --fc-cream:
    #fff5dc;

  --fc-soft:
    #f9e8bd;

  --fc-black:
    #111111;

  --fc-white:
    #ffffff;

  --fc-muted:
    #6d6256;

  --fc-display:
    "Anton",
    Impact,
    "Arial Narrow",
    sans-serif;

}


/* =========================================
   IMPORTANT
   HEADER / SEARCH / MOBILE MENU
   COME FROM styles.css
========================================= */


/* =========================================
   PAGE
========================================= */

.fc-page {
  width:
    100%;

  overflow-x:
    hidden;

  background:
    var(--fc-cream);
}


/* =========================================
   HERO
========================================= */

.fc-hero {
  position:
    relative;

  min-height:
    auto;

  padding:
    94px 18px
    58px;

  display:
    block;

  overflow:
    hidden;

  background:
    linear-gradient(
      145deg,
      #ffc247 0%,
      #f7a522 48%,
      #ed8c19 100%
    );
}


.fc-hero::before {
  content:
    "";

  position:
    absolute;

  width:
    330px;

  height:
    330px;

  top:
    -190px;

  right:
    -180px;

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, 0.11);
}


.fc-hero::after {
  content:
    "";

  position:
    absolute;

  width:
    260px;

  height:
    260px;

  left:
    -160px;

  bottom:
    -140px;

  border:
    45px solid
    rgba(255, 255, 255, 0.08);

  border-radius:
    50%;
}


.fc-hero-circle {
  position:
    absolute;

  border-radius:
    50%;

  pointer-events:
    none;
}


.fc-circle-one {
  width:
    130px;

  height:
    130px;

  right:
    -75px;

  bottom:
    14%;

  background:
    var(--fc-red);

  opacity:
    0.88;
}


.fc-circle-two {
  width:
    70px;

  height:
    70px;

  left:
    -38px;

  top:
    30%;

  background:
    #ffffff;

  opacity:
    0.22;
}


.fc-hero-inner {
  position:
    relative;

  z-index:
    4;

  width:
    100%;

  max-width:
    100%;

  margin:
    0;
}


/* =========================================
   HERO LOGO
========================================= */

.fc-hero-logo-wrap {
  width:
    100%;

  max-width:
    250px;

  margin:
    0 auto
    38px;
}


.fc-hero-logo {
  display:
    block;

  width:
    100%;

  height:
    auto;

  max-height:
    250px;

  object-fit:
    contain;
}


/* =========================================
   HERO TYPOGRAPHY
========================================= */

.fc-eyebrow {
  margin:
    0 0
    12px;

  color:
    #ffffff;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.14em;

  line-height:
    1.4;

  text-transform:
    uppercase;
}


.fc-hero h1 {
  margin:
    0;

  max-width:
    100%;

  color:
    #ffffff;

  font-family:
    var(--fc-display);

  font-size:
    clamp(
      52px,
      15vw,
      70px
    );

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.02em;

  text-transform:
    uppercase;

  overflow-wrap:
    normal;

  word-break:
    normal;
}


.fc-hero-copy {
  max-width:
    360px;

  margin:
    22px 0
    0;

  color:
    rgba(255, 255, 255, 0.94);

  font-size:
    15px;

  font-weight:
    500;

  line-height:
    1.6;
}


.fc-primary-btn {
  min-height:
    54px;

  margin-top:
    26px;

  padding:
    0 24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px;

  background:
    var(--fc-black);

  color:
    #ffffff;

  font-size:
    14px;

  font-weight:
    800;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.fc-background-word {
  position:
    absolute;

  z-index:
    1;

  left:
    50%;

  bottom:
    -4px;

  transform:
    translateX(-50%);

  color:
    rgba(255, 255, 255, 0.075);

  font-family:
    var(--fc-display);

  font-size:
    31vw;

  line-height:
    0.7;

  white-space:
    nowrap;

  pointer-events:
    none;
}


/* =========================================
   COMMON SECTIONS
========================================= */

.fc-section-tag {
  display:
    inline-block;

  color:
    var(--fc-red);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.fc-story,
.fc-faves,
.fc-more,
.fc-social,
.fc-brands {
  padding:
    72px 18px;
}


.fc-story h2,
.fc-section-intro h2,
.fc-more h2,
.fc-social h2,
.fc-brands h2 {
  margin:
    0;

  font-family:
    var(--fc-display);

  font-size:
    clamp(
      50px,
      14vw,
      68px
    );

  font-weight:
    400;

  line-height:
    0.95;

  letter-spacing:
    -0.02em;

  text-transform:
    uppercase;
}


/* =========================================
   STORY
========================================= */

.fc-story {
  background:
    var(--fc-cream);
}


.fc-story-grid {
  margin-top:
    18px;

  display:
    grid;

  gap:
    26px;
}


.fc-story-text {
  color:
    var(--fc-muted);

  font-size:
    15px;

  line-height:
    1.7;
}


.fc-story-text p {
  margin:
    0 0
    16px;
}


.fc-text-link {
  display:
    inline-flex;

  margin-top:
    4px;

  color:
    var(--fc-red);

  font-weight:
    800;
}


/* =========================================
   BENTO
========================================= */

.fc-bento {
  padding:
    0 18px
    76px;

  background:
    var(--fc-cream);
}


.fc-bento-grid {
  display:
    grid;

  gap:
    12px;
}


.fc-bento-card {
  position:
    relative;

  min-height:
    235px;

  padding:
    22px;

  overflow:
    hidden;

  border-radius:
    24px;
}


.fc-card-tag {
  position:
    relative;

  z-index:
    3;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.fc-bento-card h3 {
  position:
    relative;

  z-index:
    3;

  margin:
    16px 0
    0;

  font-family:
    var(--fc-display);

  font-size:
    44px;

  font-weight:
    400;

  line-height:
    0.94;

  text-transform:
    uppercase;
}


.fc-bento-dark {
  min-height:
    360px;

  background:
    var(--fc-black);

  color:
    #ffffff;
}


.fc-bento-dark::before {
  content:
    "";

  position:
    absolute;

  width:
    230px;

  height:
    230px;

  right:
    -100px;

  bottom:
    -100px;

  border-radius:
    50%;

  background:
    var(--fc-orange);
}


.fc-big-circle {
  position:
    absolute;

  z-index:
    3;

  right:
    20px;

  bottom:
    20px;

  width:
    92px;

  height:
    92px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--fc-red);

  color:
    #ffffff;

  transform:
    rotate(-8deg);
}


.fc-big-circle span {
  font-family:
    var(--fc-display);

  font-size:
    45px;
}


.fc-bento-orange {
  background:
    var(--fc-orange);

  color:
    #ffffff;
}


.fc-bento-white {
  background:
    #ffffff;

  color:
    var(--fc-black);
}


.fc-year-circle {
  width:
    68px;

  height:
    68px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--fc-red);

  color:
    #ffffff;

  font-size:
    13px;

  font-weight:
    900;
}


/* =========================================
   FAVES
========================================= */

.fc-faves {
  background:
    #ffffff;
}


.fc-section-intro {
  max-width:
    620px;

  margin:
    0 auto;

  text-align:
    center;
}


.fc-section-intro h2 {
  margin-top:
    16px;
}


.fc-section-intro p {
  max-width:
    460px;

  margin:
    20px auto
    0;

  color:
    var(--fc-muted);

  font-size:
    15px;

  line-height:
    1.65;
}


.fc-food-grid {
  margin-top:
    38px;

  display:
    grid;

  gap:
    12px;
}


.fc-food-card {
  position:
    relative;

  min-height:
    245px;

  padding:
    22px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  overflow:
    hidden;

  border-radius:
    24px;
}


.fc-food-number {
  position:
    absolute;

  top:
    18px;

  left:
    18px;

  font-size:
    10px;

  font-weight:
    900;

  opacity:
    0.72;
}


.fc-food-emoji {
  position:
    absolute;

  top:
    20px;

  right:
    18px;

  font-size:
    58px;

  transform:
    rotate(7deg);
}


.fc-food-card h3 {
  margin:
    0 0
    9px;

  font-family:
    var(--fc-display);

  font-size:
    34px;

  font-weight:
    400;

  line-height:
    1;

  text-transform:
    uppercase;
}


.fc-food-card p {
  max-width:
    280px;

  margin:
    0;

  font-size:
    12px;

  line-height:
    1.5;

  opacity:
    0.76;
}


.fc-food-cream {
  background:
    var(--fc-cream);
}


.fc-food-orange {
  background:
    var(--fc-orange);

  color:
    #ffffff;
}


.fc-food-black {
  background:
    var(--fc-black);

  color:
    #ffffff;
}


.fc-food-soft {
  background:
    #ffe2bc;
}


/* =========================================
   MARQUEE
========================================= */

.fc-marquee {
  width:
    100%;

  overflow:
    hidden;

  background:
    var(--fc-red);
}


.fc-marquee-track {
  width:
    max-content;

  padding:
    24px 0
    28px;

  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  animation:
    friChicksMarquee
    25s
    linear
    infinite;
}


.fc-marquee-track span {
  flex:
    0 0 auto;

  color:
    #ffffff;

  font-family:
    var(--fc-display);

  font-size:
    clamp(
      60px,
      17vw,
      100px
    );

  line-height:
    0.9;

  white-space:
    nowrap;
}


.fc-marquee-track
.fc-marquee-star {
  color:
    var(--fc-orange);

  font-size:
    28px;
}


@keyframes friChicksMarquee {

  from {
    transform:
      translateX(0);
  }

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

}


/* =========================================
   MORE
========================================= */

.fc-more {
  background:
    var(--fc-black);

  color:
    #ffffff;
}


.fc-more .fc-section-tag {
  color:
    var(--fc-orange);
}


.fc-more h2 {
  margin-top:
    16px;
}


.fc-more-heading p {
  max-width:
    450px;

  margin:
    22px 0
    0;

  color:
    rgba(255, 255, 255, 0.62);

  font-size:
    14px;

  line-height:
    1.7;
}


.fc-more-links {
  margin-top:
    40px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.16);
}


.fc-more-links a {
  min-height:
    72px;

  padding:
    0 2px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.16);

  font-size:
    15px;

  font-weight:
    700;
}


.fc-more-links strong {
  color:
    var(--fc-orange);

  font-size:
    22px;
}


/* =========================================
   SOCIAL
========================================= */

.fc-social {
  text-align:
    center;

  background:
    var(--fc-orange);
}


.fc-social .fc-section-tag {
  color:
    var(--fc-black);
}


.fc-social h2 {
  margin-top:
    16px;

  color:
    #ffffff;
}


.fc-social p {
  max-width:
    420px;

  margin:
    22px auto
    0;

  color:
    rgba(255, 255, 255, 0.85);

  font-size:
    14px;

  line-height:
    1.65;
}


.fc-social-icons {
  margin-top:
    28px;

  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;
}


.fc-social-icons a {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--fc-black);

  color:
    #ffffff;

  font-size:
    18px;

  font-weight:
    800;
}


/* =========================================
   MORE BRANDS
========================================= */

.fc-brands {
  background:
    var(--fc-cream);
}


.fc-brands-heading h2 {
  margin-top:
    16px;
}


.fc-brands-grid {
  margin-top:
    34px;

  display:
    grid;

  gap:
    12px;
}


.fc-brand-card {
  min-height:
    210px;

  padding:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    24px;

  background:
    #ffffff;
}


.fc-brand-card img {
  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    80%;

  max-height:
    120px;

  object-fit:
    contain;
}


.fc-outline-btn {
  min-height:
    54px;

  width:
    fit-content;

  margin-top:
    28px;

  padding:
    0 24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    2px solid
    var(--fc-black);

  border-radius:
    999px;

  color:
    var(--fc-black);

  font-size:
    14px;

  font-weight:
    800;
}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 380px) {

  .fc-hero {
    padding:
      86px 14px
      48px;
  }


  .fc-hero-logo-wrap {
    max-width:
      220px;

    margin-bottom:
      30px;
  }


  .fc-hero h1 {
    font-size:
      50px;

    line-height:
      0.94;
  }


  .fc-hero-copy {
    font-size:
      14px;

    line-height:
      1.55;
  }


  .fc-story,
  .fc-faves,
  .fc-more,
  .fc-social,
  .fc-brands {
    padding:
      62px 14px;
  }


  .fc-bento {
    padding:
      0 14px
      66px;
  }


  .fc-story h2,
  .fc-section-intro h2,
  .fc-more h2,
  .fc-social h2,
  .fc-brands h2 {
    font-size:
      48px;
  }


  .fc-bento-card h3 {
    font-size:
      40px;
  }


  .fc-food-card h3 {
    font-size:
      31px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) {

  .fc-hero {
    min-height:
      780px;

    padding:
      125px 40px
      80px;

    display:
      flex;

    align-items:
      center;
  }


  .fc-hero-inner {
    max-width:
      760px;

    margin:
      0;
  }


  .fc-hero-logo-wrap {
    max-width:
      360px;

    margin:
      0 0
      34px;
  }


  .fc-hero h1 {
    font-size:
      clamp(
        88px,
        12vw,
        118px
      );

    line-height:
      0.89;
  }


  .fc-hero-copy {
    max-width:
      540px;

    font-size:
      17px;
  }


  .fc-story,
  .fc-faves,
  .fc-more,
  .fc-social,
  .fc-brands {
    padding:
      100px 40px;
  }


  .fc-bento {
    padding:
      0 40px
      100px;
  }


  .fc-story-grid {
    grid-template-columns:
      1fr 1fr;

    align-items:
      start;

    gap:
      60px;
  }


  .fc-story h2,
  .fc-section-intro h2,
  .fc-more h2,
  .fc-social h2,
  .fc-brands h2 {
    font-size:
      clamp(
        70px,
        10vw,
        92px
      );
  }


  .fc-bento-grid {
    grid-template-columns:
      1.4fr 1fr;

    grid-template-rows:
      1fr 1fr;
  }


  .fc-bento-dark {
    grid-row:
      1 / 3;

    min-height:
      520px;
  }


  .fc-food-grid {
    grid-template-columns:
      1fr 1fr;
  }


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

}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 1100px) {

  .fc-hero {
    min-height:
      100vh;

    padding:
      145px 70px
      90px;

    display:
      flex;

    align-items:
      center;
  }


  .fc-hero-inner {
    max-width:
      900px;

    margin:
      0;
  }


  .fc-hero-logo-wrap {
    max-width:
      440px;

    margin:
      0 0
      38px;
  }


  .fc-hero h1 {
    font-size:
      clamp(
        110px,
        8.5vw,
        160px
      );

    line-height:
      0.86;
  }


  .fc-hero-copy {
    max-width:
      600px;

    font-size:
      18px;
  }


  .fc-primary-btn:hover {
    transform:
      translateY(-3px);

    background:
      var(--fc-red);
  }


  .fc-story,
  .fc-faves,
  .fc-more,
  .fc-social,
  .fc-brands {
    padding:
      125px 70px;
  }


  .fc-bento {
    padding:
      0 70px
      125px;
  }


  .fc-story h2,
  .fc-section-intro h2,
  .fc-more h2,
  .fc-social h2,
  .fc-brands h2 {
    font-size:
      clamp(
        90px,
        7vw,
        124px
      );
  }


  .fc-story-grid {
    gap:
      100px;
  }


  .fc-story-text {
    max-width:
      540px;

    font-size:
      18px;
  }


  .fc-bento-grid {
    gap:
      18px;
  }


  .fc-bento-card {
    padding:
      34px;

    border-radius:
      34px;
  }


  .fc-bento-card h3 {
    font-size:
      68px;
  }


  .fc-food-grid {
    grid-template-columns:
      repeat(
        4,
        1fr
      );

    gap:
      18px;
  }


  .fc-food-card {
    min-height:
      370px;

    padding:
      28px;

    border-radius:
      32px;

    transition:
      transform 0.25s ease;
  }


  .fc-food-card:hover {
    transform:
      translateY(-8px);
  }


  .fc-food-emoji {
    font-size:
      86px;
  }


  .fc-food-card h3 {
    font-size:
      43px;
  }


  .fc-more {
    display:
      grid;

    grid-template-columns:
      0.9fr 1.1fr;

    gap:
      100px;

    align-items:
      start;
  }


  .fc-more-links {
    margin-top:
      0;
  }


  .fc-more-links a {
    min-height:
      90px;

    font-size:
      18px;

    transition:
      color 0.2s ease;
  }


  .fc-more-links a:hover {
    color:
      var(--fc-orange);
  }


  .fc-social-icons a {
    width:
      56px;

    height:
      56px;

    transition:
      transform 0.2s ease,
      background 0.2s ease;
  }


  .fc-social-icons a:hover {
    transform:
      translateY(-4px);

    background:
      var(--fc-red);
  }


  .fc-brands-grid {
    gap:
      18px;
  }


  .fc-brand-card {
    min-height:
      320px;

    border-radius:
      32px;

    transition:
      transform 0.25s ease;
  }


  .fc-brand-card:hover {
    transform:
      translateY(-7px);
  }


  .fc-brand-card img {
    max-height:
      175px;
  }


  .fc-outline-btn {
    transition:
      background 0.2s ease,
      color 0.2s ease;
  }


  .fc-outline-btn:hover {
    background:
      var(--fc-black);

    color:
      #ffffff;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

  .fc-marquee-track {
    animation:
      none;
  }

}