/* =========================================================
   Bird & Co — homepage sections + footer
   Ported verbatim from the WordPress build (birdandco.info/newbirdandco).
   Image URLs rewritten to /images/.
   ========================================================= */

/* ======================================================
   DESKTOP / TABLET PROMOTION SECTION
   Rebuilt 2026-09-30 to the client's desktop reference. The reference is
   1825px wide for this band, so every measurement is expressed in cqw
   (1cqw = 1% of the section width = 18.25 reference px) and the whole
   composition scales as one picture at every desktop width.
   ====================================================== */

.bird-promo-desktop {
  --bird-plum: #331e29; /* the approved dark aubergine */
  --bird-gold: #f5b335;

  position: relative;
  /* Above the hero and the Our Story band (z-10), which the phone
     breaks out into at the top and bottom. */
  z-index: 20;
  width: 100%;
  aspect-ratio: 1825 / 494;
  container-type: inline-size;
  background: #ffffff;
  font-family: "Metrosant", Arial, Helvetica, sans-serif;
  color: var(--bird-plum);
}

/* GET / R50 / OFF + YOUR FIRST / ONLINE ORDER, centred on x = 16.33cqw. */
.bird-promo-desktop__offer {
  position: absolute;
  z-index: 2;
  top: 3.62cqw;
  left: 16.33cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  text-transform: uppercase;
  text-align: center;
}

.bird-promo-desktop__big {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-size: 5.37cqw;
  /* A touch lighter than the synthesised bold (client, 2026-10-04).
     Metrosant has only a 400 master, so any weight >= 600 is the same
     faux-bold; the regular face plus a thin stroke sits in between. */
  font-weight: 400;
  -webkit-text-stroke: 0.005em currentColor;
  line-height: 5.07cqw;
}

.bird-promo-desktop__big span {
  display: block;
}

/* Each word is drawn the same width (13.04cqw) in the reference. */
.bird-promo-desktop__big span:nth-child(1) {
  letter-spacing: 0.087em;
  margin-right: -0.087em;
}
.bird-promo-desktop__big span:nth-child(2) {
  letter-spacing: 0.117em;
  margin-right: -0.117em;
}
.bird-promo-desktop__big span:nth-child(3) {
  letter-spacing: 0.053em;
  margin-right: -0.053em;
}

.bird-promo-desktop__small {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.57cqw 0 0;
  font-size: 1.57cqw;
  /* "A little" lighter than the old faux-bold 700 (client, 2026-09-30).
     Metrosant has one 400 master, so 700 -> 400 would be a big drop; the
     real 400 face plus a hair-thin outline lands ~5-11% lighter. */
  font-weight: 400;
  -webkit-text-stroke: 0.015em currentColor;
  line-height: 2.08cqw;
  /* Normal tracking (client, 2026-10-04); was 0.085em, too airy. */
  letter-spacing: 0.025em;
}

.bird-promo-desktop__small span {
  display: block;
  /* Cancels the trailing letter-space so each line stays centred. */
  margin-right: -0.025em;
}

/* The supplied phone mock-up, breaking out above and below the band. */
.bird-promo-desktop__phone {
  position: absolute;
  z-index: 3;
  top: -2.48cqw;
  left: 30cqw;
  width: 24.82cqw;
  max-width: none;
  height: auto;
  pointer-events: none;
}

/* Plum voucher card, over the phone. */
.bird-promo-desktop__voucher {
  position: absolute;
  z-index: 4;
  top: 17.86cqw;
  left: 27.07cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16.44cqw;
  height: 6.79cqw;
  margin: 0;
  border-radius: 1.2cqw;
  background: var(--bird-plum);
  color: #ffffff;
  font-size: 1.27cqw;
  /* "A little" lighter than the old faux-bold 700 (client, 2026-09-30).
     Metrosant has one 400 master, so 700 -> 400 would be a big drop; the
     real 400 face plus a hair-thin outline lands ~5-11% lighter. */
  font-weight: 400;
  -webkit-text-stroke: 0.015em currentColor;
  line-height: 1.62cqw;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.bird-promo-desktop__voucher strong {
  color: var(--bird-gold);
  font-weight: 400;
}

/* "See our promos & faves" - button Type 1 on the photo. */
.bird-promo-desktop__faves {
  position: absolute;
  z-index: 5;
  right: 3.12cqw;
  bottom: 1.15cqw;
  /* Size comes from .btn-lg, like every other button. */
  color: var(--bird-plum);
}

/* Right carousel, with the slanted left edge from the reference. */
.bird-promo-carousel {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 47.23cqw;
  width: 52.77cqw;
  height: 100%;
  overflow: hidden;
  background: #351826;
  clip-path: polygon(0.4% 0, 100% 0, 100% 100%, 7.8% 100%);
}

.bird-promo-carousel__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bird-promo-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 550ms ease, visibility 550ms ease;
}

.bird-promo-carousel__slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bird-promo-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Next arrow: 0.82 x 2.41cqw white triangle, 1.1cqw from the right,
   centred 59% down, as drawn. */
.bird-promo-carousel__next {
  position: absolute;
  z-index: 5;
  top: 59%;
  right: 0.6cqw;
  width: 1.8cqw;
  height: 3.2cqw;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.bird-promo-carousel__next::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 1.2cqw solid transparent;
  border-bottom: 1.2cqw solid transparent;
  border-left: 0.82cqw solid #ffffff;
  /* Button guide, Type 1 (on images): white -> hover yellow -> pressed
     gold, with the guide's hard aubergine shadow. */
  filter: drop-shadow(3px 3px 0 #331e29);
  transition: border-color 150ms ease;
}

.bird-promo-carousel__next:hover::before,
.bird-promo-carousel__next:focus-visible::before {
  border-left-color: #f5b335;
}

.bird-promo-carousel__next:active::before {
  border-left-color: #b2700f;
}

@media (max-width: 1279px) {
  .bird-promo-desktop {
    display: none;
  }
}

/* ======================================================
   MOBILE PROMOTION SECTION
   ====================================================== */

.bird-mobile-promo {
  --bird-plum: #351826;
  --bird-gold: #f9b928;

  display: none;
  width: 100%;
  overflow: visible;
  overflow-x: clip;
  background: var(--bird-plum);
  font-family: "Metrosant", Arial, Helvetica, sans-serif;
}

.bird-mobile-promo__app {
  position: relative;
  z-index: 20;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 729 / 406;
  background: #ffffff;
}

.bird-mobile-promo__app .bird-mobile-promo__phone {
  position: absolute;
  z-index: 3;
  top: -8cqw;
  left: 46cqw;
  display: block;
  width: 52cqw;
  max-width: none;
  height: auto;
  margin: 0;
  transform: rotate(20deg);
  pointer-events: none;
  filter: drop-shadow(3cqw 1cqw 3cqw rgb(51 30 41 / 0.25));
}

.bird-mobile-promo__offer {
  position: absolute;
  top: 9cqw;
  left: 26.5cqw;
  transform: translateX(-50%);
  color: #331e29;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.bird-mobile-promo__big,
.bird-mobile-promo__small {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-weight: 800;
}

.bird-mobile-promo__big {
  font-size: 11cqw;
  line-height: 10.3cqw;
  letter-spacing: 0.035em;
}

.bird-mobile-promo__small {
  margin-top: 1.2cqw;
  font-size: 3.3cqw;
  font-weight: 400;
  line-height: 4cqw;
}

.bird-mobile-promo__voucher {
  position: absolute;
  z-index: 4;
  top: 12cqw;
  left: 45.4cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29.5cqw;
  height: 12.2cqw;
  margin: 0;
  border-radius: 3cqw;
  background: #331e29;
  color: white;
  font-size: 2.55cqw;
  font-weight: 800;
  line-height: 2.9cqw;
  text-align: center;
  text-transform: uppercase;
}

.bird-mobile-promo__voucher strong {
  color: #f5b335;
}

.bird-mobile-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bird-plum);
}

.bird-mobile-carousel__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 661;
  overflow: hidden;
}

.bird-mobile-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms ease, visibility 500ms ease;
}

.bird-mobile-carousel__slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bird-mobile-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
}

.bird-mobile-carousel__next {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 12px;
  width: 34px;
  height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.bird-mobile-carousel__next::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 14px solid #ffffff;
  /* Button guide, Type 1 (on images) - same as the desktop arrow. */
  filter: drop-shadow(3px 3px 0 #331e29);
  transition: border-color 150ms ease;
}

.bird-mobile-carousel__next:hover::before,
.bird-mobile-carousel__next:focus-visible::before {
  border-left-color: #f5b335;
}

.bird-mobile-carousel__next:active::before {
  border-left-color: #b2700f;
}

@media (max-width: 1279px) {
  .bird-mobile-promo {
    display: block;
  }
}

@media (max-width: 480px) {
  .bird-mobile-carousel__viewport {
    aspect-ratio: 1200 / 661;
  }

  .bird-mobile-carousel__next {
    right: 8px;
    width: 28px;
    height: 48px;
  }

  .bird-mobile-carousel__next::before {
    border-top-width: 18px;
    border-bottom-width: 18px;
    border-left-width: 12px;
  }
}

/* ======================================================
   STORY — TOP
   ====================================================== */

#bird-story-top,
#bird-story-top * {
  box-sizing: border-box;
}

#bird-story-top {
  position: relative;
  width: 100%;
  aspect-ratio: 950 / 410;
  /* The food art reaches UP into the yellow Our Story band, so only the
     sides are clipped (no sideways scroll). No isolation here: the food
     image's z-index must compete with Our Story's z-10 in the page's own
     stacking context, while this section's background stays beneath it
     so Our Story's white arrow still shows. */
  overflow-x: clip;
  overflow-y: visible;
  background-image: url("/images/story-top-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Food rolls in on scroll (client, 2026-10-04, after panarottis.com/za):
   slides 20% in from its side while turning 10deg flat and fading in,
   1s ease-out. /app.js adds .is-out while the image is off screen, so it
   replays each time it comes back, and without JS the food just shows.
   Uses the individual translate / rotate properties so it never fights a
   `transform` set elsewhere. */
.food-roll {
  transition:
    translate 1s cubic-bezier(0.4, 0, 0.2, 1),
    rotate 1s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.food-roll.is-out {
  opacity: 0;
  translate: -20% 0;
  rotate: -10deg;
}
.food-roll--right.is-out {
  translate: 20% 0;
  rotate: 10deg;
}
@media (prefers-reduced-motion: reduce) {
  .food-roll,
  .food-roll.is-out {
    transition: none;
    opacity: 1;
    translate: none;
    rotate: none;
  }
}

/* ------------------------------------------------------------------
   Story copy (client, 2026-10-04): the long story copy. On desktop
   (>=1280px) the artwork stays exactly where the reference put it and
   each text panel widens into the free space beside the food, with the
   type scaled in vw so every panel holds the same lines at any width.
   Below 1280px the panels are too narrow, so each section
   becomes a column: the food, then its copy underneath.
   ------------------------------------------------------------------ */

/* Matched to the client's reference by template-matching the artwork into
   it (scale 0.593): 1.54% of the width off the left edge, 2.66% of the
   WIDTH above the top (= 6.16% of this 950:410 section's height), 80.93%
   wide. */
#bird-story-top .bird-top-food {
  position: absolute;
  z-index: 12;
  top: -6.16%;
  /* Reference had -1.54%; nudged left twice on request. */
  left: -5.5%;
  width: 80.93%;
  height: auto;
  display: block;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain;
  object-position: top left;
}

.bird-top-picture,
.bird-bottom-pizza-picture {
  display: contents;
}

@media (min-width: 1280px) {
  #bird-story-top .bird-top-picture .bird-top-food {
    left: 0;
    width: 58%;
  }
}

/* Shared type for the three story blocks. Headings: Metrosant caps,
   lighter than faux-bold (400 + a thin stroke, as on GET R50 OFF).
   Copy: Poppins Medium, as in the Our Story paragraph. */
.bird-top-heading,
.bird-bottom-heading {
  display: block;
  margin: 0 0 0.3em;
  padding: 0;
  color: #f7b719;
  font-family: "Metrosant", Arial, sans-serif;
  font-size: 2.5vw;
  font-weight: 400;
  -webkit-text-stroke: 0.01em currentColor;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.bird-top-description,
.bird-bottom-description {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1.15vw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
}

.bird-top-description p,
.bird-bottom-description p {
  margin: 0;
}

.bird-top-description p + p,
.bird-bottom-description p + p {
  margin-top: 0.6em;
}

/* --- desktop panels (positions in % of each section) --- */

/* z-index above the food art (12) so a bread roll never sits on text. */
#bird-story-top .bird-top-copy {
  position: absolute;
  z-index: 13;
  top: 17.8%;
  left: 62.2%;
  width: 33%;
  margin: 0;
  padding: 0;
}

/* ======================================================
   STORY — BOTTOM
   ====================================================== */

#bird-story-bottom,
#bird-story-bottom * {
  box-sizing: border-box;
}

#bird-story-bottom {
  position: relative;
  width: 100%;
  aspect-ratio: 950 / 670;
  overflow: hidden;
  isolation: isolate;
  background-image: url("/images/story-bottom-bg.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  margin: -1px 0 0;
  padding: 0;
}

#bird-story-bottom .bird-bottom-food {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain;
  pointer-events: none;
}

#bird-story-bottom .bird-bottom-pizza {
  top: 1.5%;
  right: 1.5%;
  width: 49%;
}

#bird-story-bottom .bird-bottom-burger {
  left: -1.5%;
  bottom: -0.5%;
  width: 53%;
}

#bird-story-bottom .bird-bottom-copy {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0;
}

/* Raised and widened so the longer copy ends above the burger. */
#bird-story-bottom .bird-bottom-copy-middle {
  top: 7%;
  left: 22.2%;
  width: 29.5%;
}

/* Widened across the free space under the pizza. */
#bird-story-bottom .bird-bottom-copy-lower {
  top: 71.5%;
  left: 56.2%;
  width: 41%;
}

/* --- below 1280px: food, then its copy, in a column --- */
@media (max-width: 1279px) {
  #bird-story-top,
  #bird-story-bottom {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    height: auto;
    padding: 0 0 44px;
  }

  #bird-story-top .bird-top-food,
  #bird-story-bottom .bird-bottom-food {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }

  /* Still reaches up into the yellow Our Story band, as on desktop. */
  #bird-story-top .bird-top-food {
    width: min(100%, 760px);
    margin: -5vw 0 0 -4% !important;
  }

  #bird-story-bottom .bird-bottom-pizza {
    order: 1;
    width: min(88%, 560px);
    margin: 24px -3% 0 auto !important;
  }

  #bird-story-bottom .bird-bottom-copy-middle {
    order: 2;
  }

  /* The burger artwork carries ~26% empty space across its top (about
     0.2 x its width), so pull it up by that much to keep the gaps even. */
  #bird-story-bottom .bird-bottom-burger {
    order: 3;
    width: min(92%, 600px);
    margin: calc(32px - 0.2 * min(92vw, 600px)) auto 0 -3% !important;
  }

  #bird-story-bottom .bird-bottom-copy-lower {
    order: 4;
  }

  #bird-story-top .bird-top-copy,
  #bird-story-bottom .bird-bottom-copy {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: 640px;
    margin: 20px 0 0;
    padding: 0 24px;
  }

  .bird-top-heading,
  .bird-bottom-heading {
    font-size: clamp(24px, 5vw, 34px);
  }

  .bird-top-description,
  .bird-bottom-description {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* ======================================================
   FOOTER
   ====================================================== */

/* Matched to the client's footer reference (2026-10-04), measured 1:1 in
   CSS px at a 1809px-wide window: plum #331e29, two columns 520px apart,
   three 71px app badges, CALL US / QUICK LINKS in Metrosant, Poppins copy. */
.bc-footer {
  background: #331e29;
  color: #ffffff;
  padding: 46px 30px 105px;
  font-family: "Metrosant", Arial, Helvetica, sans-serif;
}

.bc-footer__inner {
  width: min(100%, 934px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 106px;
  align-items: start;
}

.bc-footer__left {
  padding-top: 26px;
}

.bc-footer__apps {
  display: flex;
  gap: 8px;
  margin: 0 0 52px -1px;
  flex-wrap: wrap;
}

/* Supplied artwork. Uber Eats + Mr D arrive as one image with their own
   gap baked in (it scales to ~9px at this height, matching the gap to the
   app badge). Height is what lines them up - widths differ. */
.bc-footer__apps a {
  display: block;
  transition: transform 0.2s ease;
}

.bc-footer__apps a:hover {
  transform: translateY(-2px);
}

.bc-footer__apps {
  align-items: center;
}

.bc-footer__apps img {
  display: block;
  /* The Uber Eats + Mr D PNG has a 1px transparent rim; 73px gives the
     reference's 71px of badge. The app SVG is edge to edge. */
  height: 73px;
  width: auto;
}

.bc-footer__apps a img {
  height: 70px;
}

.bc-footer__title,
.bc-footer__heading {
  margin: 0;
  font-family: "Metrosant", Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: #f7b234;
  line-height: 1;
  text-transform: uppercase;
}

.bc-footer__title,
.bc-footer__heading {
  /* 37.6px matched the reference; made smaller on request (2026-10-04). */
  font-size: 32px;
  /* The reference sets both headings a few px in from their column. */
  margin-left: 4px;
}

.bc-footer__title {
  margin-bottom: 17px;
}

.bc-footer__right {
  padding-top: 6px;
}

.bc-footer__heading {
  margin-left: 6px;
  margin-bottom: 18px;
}

/* Poppins, like the body copy elsewhere on the site (Metrosant has only
   one 400 master and reads too heavy here). */
.bc-footer__text,
.bc-footer__phone,
.bc-footer__menu a {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  color: #ffffff;
}

.bc-footer__text {
  margin: 0 0 14px 2px;
  font-size: 19.2px;
}

.bc-footer__phone {
  display: inline-block;
  margin-left: 2px;
  font-size: 21px;
  text-decoration: none;
}

.bc-footer__phone:hover {
  color: #f7b234;
}

.bc-footer__menu {
  list-style: none;
  padding: 0 0 0 3px;
  margin: 0 0 37px;
}

.bc-footer__menu li + li {
  margin-top: 30px;
}

.bc-footer__menu a {
  font-size: 19.4px;
  text-decoration: none;
}

.bc-footer__menu a:hover {
  color: #f7b234;
}

.bc-footer__socials {
  display: flex;
  gap: 4.5px;
  align-items: center;
}

/* 47px discs 4.5px apart in #eaa13c; glyphs cut out in the footer plum. */
.bc-social {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: #eaa13c;
  color: #331e29;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.bc-social svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bc-social:hover {
  transform: translateY(-2px);
}

@media (max-width: 1279px) {
  /* Same layout as the reference, scaled down to fit two phone columns. */
  .bc-footer {
    padding: 34px 20px 50px;
  }

  .bc-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .bc-footer__left {
    padding-top: 14px;
  }

  .bc-footer__right {
    padding-top: 3px;
  }

  .bc-footer__apps {
    gap: 5px;
    margin: 0 0 26px;
  }

  .bc-footer__apps img {
    height: 40px;
  }

  .bc-footer__apps a img {
    height: 38px;
  }

  .bc-footer__title,
  .bc-footer__heading {
    font-size: 17px;
    margin-left: 2px;
  }

  .bc-footer__title {
    margin-bottom: 10px;
  }

  .bc-footer__heading {
    margin-bottom: 12px;
  }

  .bc-footer__text,
  .bc-footer__phone,
  .bc-footer__menu a {
    line-height: 1.3;
  }

  .bc-footer__text {
    font-size: 13px;
    margin: 0 0 6px 1px;
  }

  .bc-footer__phone {
    font-size: 15px;
    margin-left: 1px;
  }

  .bc-footer__menu {
    padding-left: 2px;
    margin-bottom: 22px;
  }

  .bc-footer__menu li + li {
    margin-top: 14px;
  }

  .bc-footer__menu a {
    font-size: 13px;
  }

  .bc-footer__socials {
    gap: 4px;
  }

  .bc-social {
    width: 34px;
    height: 34px;
  }
}



/* ======================================================
   PROMO LIVE TEXT (experiment, 2026-10-01)
   Each slide's artwork sits in a .promo-art box with the artwork's own
   2560:1409 proportions, sized and centred exactly like object-fit: cover
   inside the slide. Text inside is positioned in cqw of that box
   (1cqw = 25.6 artwork px), so it stays locked to the picture at every
   carousel size.
   ====================================================== */

.bird-promo-carousel__slide,
.bird-mobile-carousel__slide {
  container-type: size;
}

.promo-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, calc(100cqh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}

.bird-promo-carousel__slide .promo-art img,
.bird-mobile-carousel__slide .promo-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Show the complete supplied banners on mobile, including baked-in copy. */
.bird-mobile-carousel__slide .promo-art {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
}

.bird-mobile-carousel__faves {
  position: absolute;
  z-index: 5;
  left: 3%;
  bottom: 4%;
}

.promo-live {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.promo-live p {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  line-height: 1;
}

.promo-live--buddy .promo-live__script {
  left: 7.43cqw;
  top: 5.5cqw;
  font-family: "Katenila", cursive;
  font-size: 12.1cqw;
  color: #ffffff;
  transform: rotate(-6deg) scaleY(1.14);
  transform-origin: left bottom;
}

.promo-live--buddy .promo-live__price {
  left: 13.29cqw;
  top: 19.97cqw;
  font-family: "Metrosant", Arial, sans-serif;
  font-weight: 700;
  font-size: 10.3cqw;
  letter-spacing: 0;
  color: #ffffff;
}

.promo-live--buddy .promo-live__r {
  font-size: 0.5em;
  vertical-align: 0.69em;
  margin-right: 0.1em;
  color: #f2b23b;
}

.promo-live--buddy .promo-live__digits {
  display: inline-block;
  transform: scaleX(1.12);
  transform-origin: left;
}

.promo-live--buddy .promo-live__deal {
  left: 53.4cqw;
  top: 5.6cqw;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.375cqw;
  line-height: 1.03;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
}

.promo-live--buddy .promo-live__lower {
  text-transform: none;
}

/* PROMO-GEN START (generated by the promo fitter; do not hand-edit) */
.promo-live--burger .promo-live__bc {
  left: 50.859cqw;
  top: 2.684cqw;
  font-family: "Katenila", cursive;
  font-weight: 400;
  font-size: 10.377cqw;
  text-transform: none;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(0.920);
  transform-origin: 0 0;
}
.promo-live--burger .promo-live__battered {
  left: 55.547cqw;
  top: 12.676cqw;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.547cqw;
  text-transform: uppercase;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(0.940);
  transform-origin: 0 0;
}
.promo-live--burger .promo-live__burger {
  left: 57.422cqw;
  top: 15.910cqw;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 7.362cqw;
  text-transform: uppercase;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(0.940);
  transform-origin: 0 0;
}
.promo-live--burger .promo-live__aside {
  left: 76.875cqw;
  top: 22.312cqw;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.018cqw;
  text-transform: uppercase;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(0.910);
  transform-origin: 0 0;
}
.promo-live--burger .promo-live__r {
  left: 78.008cqw;
  top: 29.656cqw;
  font-family: "Metrosant", Arial, sans-serif;
  font-weight: 700;
  font-size: 4.492cqw;
  text-transform: none;
  color: #ffad40;
  transform: rotate(0.00deg) scaleY(0.830);
  transform-origin: 0 0;
}
.promo-live--burger .promo-live__n {
  left: 81.875cqw;
  top: 28.949cqw;
  font-family: "Metrosant", Arial, sans-serif;
  font-weight: 700;
  font-size: 7.884cqw;
  text-transform: none;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(1.000);
  transform-origin: 0 0;
}
.promo-live--burger .promo-live__tc {
  left: 1.328cqw;
  top: 52.879cqw;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.799cqw;
  text-transform: none;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(0.940);
  transform-origin: 0 0;
}
.promo-live--halfbird .promo-live__deboned {
  left: 4.844cqw;
  top: 13.477cqw;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 4.883cqw;
  text-transform: uppercase;
  color: #ffffff;
  transform: rotate(-17.00deg) scaleY(1.000);
  transform-origin: 0 0;
}
.promo-live--halfbird .promo-live__half {
  left: 5.078cqw;
  top: 18.359cqw;
  font-family: "Katenila", cursive;
  font-weight: 400;
  font-size: 7.227cqw;
  text-transform: none;
  color: #ffffff;
  transform: rotate(-17.00deg) scaleY(1.000);
  transform-origin: 0 0;
}
.promo-live--halfbird .promo-live__side {
  left: 28.281cqw;
  top: 14.062cqw;
  font-family: "Katenila", cursive;
  font-weight: 400;
  font-size: 5.859cqw;
  text-transform: none;
  color: #f8a93d;
  transform: rotate(-22.00deg) scaleY(1.000);
  transform-origin: 0 0;
}
.promo-live--halfbird .promo-live__r {
  left: 12.891cqw;
  top: 29.883cqw;
  font-family: "Metrosant", Arial, sans-serif;
  font-weight: 700;
  font-size: 5.859cqw;
  text-transform: none;
  color: #ffffff;
  transform: rotate(-6.00deg) scaleY(1.000);
  transform-origin: 0 0;
}
.promo-live--halfbird .promo-live__n {
  left: 18.359cqw;
  top: 25.000cqw;
  font-family: "Metrosant", Arial, sans-serif;
  font-weight: 700;
  font-size: 13.672cqw;
  text-transform: none;
  color: #f8a93d;
  transform: rotate(-6.00deg) scaleY(1.000);
  transform-origin: 0 0;
}
.promo-live--brownie .promo-live__new {
  left: 11.562cqw;
  top: 4.145cqw;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 4.572cqw;
  text-transform: uppercase;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(0.980);
  transform-origin: 0 0;
}
.promo-live--brownie .promo-live__double {
  left: 4.688cqw;
  top: 9.238cqw;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 5.021cqw;
  text-transform: uppercase;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(0.950);
  transform-origin: 0 0;
}
.promo-live--brownie .promo-live__choc {
  left: 1.680cqw;
  top: 12.508cqw;
  font-family: "Katenila", cursive;
  font-weight: 400;
  font-size: 9.662cqw;
  text-transform: none;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(0.960);
  transform-origin: 0 0;
}
.promo-live--brownie .promo-live__brownie {
  left: 6.250cqw;
  top: 21.441cqw;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 4.766cqw;
  text-transform: uppercase;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(0.970);
  transform-origin: 0 0;
}
.promo-live--brownie .promo-live__r {
  left: 7.031cqw;
  top: 30.879cqw;
  font-family: "Metrosant", Arial, sans-serif;
  font-weight: 700;
  font-size: 5.457cqw;
  text-transform: none;
  color: #ffaa3c;
  transform: rotate(0.00deg) scaleY(0.970);
  transform-origin: 0 0;
}
.promo-live--brownie .promo-live__n {
  left: 11.719cqw;
  top: 30.750cqw;
  font-family: "Metrosant", Arial, sans-serif;
  font-weight: 700;
  font-size: 9.507cqw;
  text-transform: none;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(1.000);
  transform-origin: 0 0;
}
.promo-live--brownie .promo-live__tc {
  left: 1.328cqw;
  top: 53.457cqw;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.845cqw;
  text-transform: none;
  color: #ffffff;
  transform: rotate(0.00deg) scaleY(0.960);
  transform-origin: 0 0;
}
/* PROMO-GEN END */

/* Phones: the mobile carousel crops ~3-6% off each side of the artwork,
   which cut the first letters of "DEBONED" and "Chocolate". Nudge those two
   slides' text in (cqw = % of the artwork's width). */
.bird-mobile-carousel .promo-live--halfbird,
.bird-mobile-carousel .promo-live--brownie {
  transform: translateX(7cqw);
}