@font-face {
  font-family: "GarageGothicBold";
  src: url("/DigitUp/Minus196/assets/fonts/garage-gothic.woff2") format("woff2"), url("/DigitUp/Minus196/assets/fonts/garage-gothic.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BarlowSemiCondensed";
  src: url("/DigitUp/Minus196/assets/fonts/BarlowSemiCondensed-ExtraBold.woff2") format("woff2"), url("/DigitUp/Minus196/assets/fonts/BarlowSemiCondensed-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BarlowSemiCondensedLight";
  src: local("Barlow Semi Condensed Light"), local("BarlowSemiCondensed-Light"), local("Barlow Semi Condensed");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenSansLight";
  src: url("/fonts/OpenSans-Light.woff2") format("woff2"), url("/fonts/OpenSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
.sectionFlavours {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #000;
  z-index: 0;
  display: block;
}
.sectionFlavours::before, .sectionFlavours::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;
}
.sectionFlavours::before {
  top: 0;
  height: 48%;
  background: radial-gradient(120% 90% at 50% 0%, rgba(182, 190, 202, 0.2) 0%, rgba(68, 74, 88, 0.08) 46%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.28;
}
.sectionFlavours::after {
  bottom: -2%;
  height: 34%;
  background: linear-gradient(to top, rgba(246, 246, 246, 0.92) 0%, rgba(228, 228, 228, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
}
.sectionFlavours .flavourMain {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  width: 90%;
}
.sectionFlavours .flavoursTopBar {
  display: flex;
  justify-content: flex-end;
}
.sectionFlavours .flavoursLogo {
  width: 108px;
}
.sectionFlavours .flavoursBottomBg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
}
.sectionFlavours .flavoursVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 116%;
  min-height: 116%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  opacity: 1;
  mix-blend-mode: screen;
  filter: grayscale(1) brightness(0.78) contrast(1.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform, opacity, filter;
  transform: translate(-50%, -50%) translateZ(0);
}
.sectionFlavours .flavoursVideo--mirror {
  transform: translate(-50%, -50%) scaleX(-1);
  opacity: 0.85;
}
.sectionFlavours .flavoursBg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.sectionFlavours .flavoursBg .fog {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  opacity: 0.44;
  filter: grayscale(1) saturate(0) brightness(1.35) contrast(1.05) blur(0.0625rem);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
}
.sectionFlavours .flavoursBg .fog1 {
  opacity: 0.48;
}
.sectionFlavours .flavoursBg .fog2 {
  opacity: 0.32;
}
.sectionFlavours .flavoursInner {
  position: relative;
  z-index: 3;
  max-width: 1440px;
  margin: 0 auto;
  width: min(96%, 1440px);
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(30rem, 38rem) minmax(13rem, 1fr);
  align-items: start;
  column-gap: 1.25rem;
  height: auto;
  padding: 1.25rem 0;
}
@media (min-width: 1023.9px) {
  .sectionFlavours .flavoursInner {
    grid-template-columns: minmax(13rem, 1fr) minmax(31rem, 40rem) minmax(13rem, 1fr);
  }
}
.sectionFlavours .flavourPanel {
  position: relative;
  z-index: 9;
  color: #fff;
  max-width: 48.375rem;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 800ms ease, transform 800ms ease;
  font-family: "Barlow Semi Condensed", sans-serif;
}
.sectionFlavours .flavourPanel.is-in {
  opacity: 1;
  transform: translateY(0);
}
.sectionFlavours .flavourPanel .panelTop {
  margin-bottom: 1rem;
}
.sectionFlavours .flavourPanel .panelTop .jp {
  margin: 0;
  font-weight: 800;
  font-size: 1.375rem;
  opacity: 1;
  color: #fff;
}
.sectionFlavours .flavourPanel .panelTop .title {
  margin: 0.5rem 0 0;
  font-weight: 900;
  line-height: 0.95;
  font-size: 3.5rem;
  text-transform: uppercase;
}
.sectionFlavours .flavourPanel .panelTop .title.lemon {
  color: #FEDD00;
}
.sectionFlavours .flavourPanel .panelTop .title.grapefruit {
  color: #ff4a4a;
  font-size: 3.5rem;
}
.sectionFlavours .flavourPanel .desc {
  margin: 0 0 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  font-size: 1rem;
}
.sectionFlavours .flavourPanel .meta {
  margin: 0 0 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
}
.sectionFlavours .flavourPanel .iconsRow {
  margin-top: 2rem;
}
.sectionFlavours .flavourPanel .iconsRow img {
  width: 183px;
  height: 69px;
  position: relative;
  z-index: 20;
}
.sectionFlavours .flavourPanel--left {
  justify-self: end;
  text-align: right;
}
.sectionFlavours .flavourPanel--right {
  justify-self: start;
  text-align: left;
}
.sectionFlavours .flavourPanel--left {
  padding-right: 1.25rem;
}
.sectionFlavours .flavourPanel--right {
  padding-left: 1.25rem;
}
.sectionFlavours .flavourPanel--left .iconsRow img {
  margin-left: auto;
}
@media (min-width: 1023.9px) {
  .sectionFlavours .flavoursInner {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(8.5rem, 1fr) minmax(31rem, 40rem) minmax(8.5rem, 1fr);
    column-gap: 0.75rem;
    padding: 0 1.5rem;
  }
  .sectionFlavours .flavourPanel .panelTop .title {
    font-size: 3.5rem;
  }
  .sectionFlavours .flavourPanel .panelTop .title.grapefruit {
    font-size: 3.5rem;
  }
  .sectionFlavours .flavourPanel .desc {
    font-size: 1rem;
  }
  .sectionFlavours .flavourPanel--left {
    justify-self: start;
    text-align: right;
    padding-right: 0;
    transform: none;
  }
  .sectionFlavours .flavourPanel--right {
    justify-self: end;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    transform: none;
  }
  .sectionFlavours .flavourCans {
    height: 20rem;
  }
  .sectionFlavours .flavourCans .can {
    width: 13rem;
  }
  .sectionFlavours .flavourCans .can--lemon {
    transform: translateX(-78%) translateY(0);
  }
  .sectionFlavours .flavourCans .can--grapefruit {
    transform: translateX(-20%) translateY(1rem);
  }
}
@media (min-width: 1279.9px) {
  .sectionFlavours .flavoursInner {
    grid-template-columns: minmax(13rem, 1fr) minmax(31rem, 40rem) minmax(13rem, 1fr);
    column-gap: 1rem;
    width: 94%;
  }
  .sectionFlavours .flavourPanel .panelTop .title {
    font-size: 3.5rem;
  }
  .sectionFlavours .flavourPanel .desc {
    font-size: 1rem;
  }
}
.sectionFlavours .flavourCans {
  position: relative;
  z-index: 6;
  height: 80rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 900ms ease, transform 900ms ease;
}
.sectionFlavours .flavourCans.is-in {
  opacity: 1;
  transform: scale(1);
}
.sectionFlavours .flavourCans .cansInner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.sectionFlavours .flavourCans .canSmokeVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 140%;
  min-height: 130%;
  transform: translate(-50%, -46%);
  object-fit: cover;
  object-position: center center;
  mix-blend-mode: screen;
  opacity: 0.5;
  filter: grayscale(1) brightness(0.76) contrast(1.24);
  pointer-events: none;
  z-index: 4;
  will-change: transform, opacity, filter;
  transform: translate(-50%, -46%) translateZ(0);
}
.sectionFlavours .flavourCans .canSmokeVideo--mirror {
  transform: translate(-50%, -46%) scaleX(-1);
  opacity: 0.45;
}
.sectionFlavours .flavourCans .can {
  position: relative;
  width: min(100%, 32rem);
  filter: drop-shadow(0 1.25rem 5rem rgba(0, 0, 0, 0.6));
  top: 0;
  transition: transform 0.5s, z-index 0.5s;
}
.sectionFlavours .flavourCans .can--lemon {
  z-index: 9;
  position: absolute;
  left: 0;
  width: 255px;
  transform: translateY(-0.375rem);
}
@media (min-width: 1300px) {
  .sectionFlavours .flavourCans .can--lemon {
    width: 345px;
    height: 649px;
    left: 0;
  }
}
@media (min-width: 1100px) and (max-width: 1299px) {
  .sectionFlavours .flavourCans .can--lemon {
    width: 290px;
    left: 0;
  }
}
@media (max-width: 1100px) and (min-width: 904px) {
  .sectionFlavours .flavourCans .can--lemon {
    width: 255px;
    left: 0;
  }
}
@media (max-width: 903px) and (min-width: 768px) {
  .sectionFlavours .flavourCans .can--lemon {
    width: 363px;
    left: -23px;
  }
}
@media (max-width: 767px) and (min-width: 600px) {
  .sectionFlavours .flavourCans .can--lemon {
    width: 310px;
    left: 22px;
  }
}
@media (max-width: 599px) and (min-width: 480px) {
  .sectionFlavours .flavourCans .can--lemon {
    width: 275px;
    left: 7px;
  }
}
@media (max-width: 479px) and (min-width: 400px) {
  .sectionFlavours .flavourCans .can--lemon {
    width: 217px;
    left: -34px;
  }
}
@media (max-width: 399px) {
  .sectionFlavours .flavourCans .can--lemon {
    width: 184px;
    left: -15px;
  }
}
.sectionFlavours .flavourCans .can--grapefruit {
  z-index: 8;
  position: absolute;
  left: 221px;
  width: 229px;
  margin-top: 48px;
  transform: none;
}
@media (min-width: 1300px) {
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 298px;
    width: 315px;
    height: 593px;
    margin-top: 60px;
  }
}
@media (min-width: 1100px) and (max-width: 1299px) {
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 251px;
    width: 260px;
    margin-top: 51px;
  }
}
@media (max-width: 1100px) and (min-width: 904px) {
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 221px;
    width: 229px;
    margin-top: 48px;
  }
}
@media (max-width: 903px) and (min-width: 768px) {
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 290px;
    width: 325px;
    margin-top: 0;
  }
}
@media (max-width: 767px) and (min-width: 600px) {
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 290px;
    width: 281px;
    margin-top: 58px;
  }
}
@media (max-width: 599px) and (min-width: 480px) {
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 245px;
    width: 247px;
    margin-top: 51px;
  }
}
@media (max-width: 479px) and (min-width: 400px) {
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 154px;
    width: 195px;
    margin-top: 39px;
  }
}
@media (max-width: 399px) {
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 145px;
    width: 157px;
    margin-top: 47px;
  }
}
.sectionFlavours .flavourCans {
  /* Increase specificity to ensure styles apply */
}
.sectionFlavours .flavourCans .flavourCans .can--lemon {
  z-index: 9 !important;
  transform: translateY(-0.375rem) translateX(-10%) !important;
}
.sectionFlavours .flavourCans .flavourCans .can--grapefruit {
  z-index: 8 !important;
  transform: translateY(1.25rem) translateX(10%) !important;
}
@media (min-width: 0) and (max-width: 899.9px) {
  .sectionFlavours .flavoursInner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "cans cans" "left right";
    gap: 1.5rem;
    padding: 0 0.75rem 1.875rem;
  }
  .sectionFlavours .flavourCans {
    grid-area: cans;
    width: 100%;
    height: 26.25rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }
  .sectionFlavours .flavourCans .can {
    width: min(46vw, 15rem);
  }
  .sectionFlavours .flavourCans .can--lemon {
    left: 50%;
    transform: translateX(-88%) translateY(0);
  }
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 50%;
    transform: translateX(-12%) translateY(0.625rem);
  }
  .sectionFlavours .flavourPanel {
    max-width: 100%;
    opacity: 1;
    transform: none;
  }
  .sectionFlavours .flavourPanel .panelTop .title {
    font-size: 4rem;
  }
  .sectionFlavours .flavourPanel .desc {
    font-size: 1rem;
  }
  .sectionFlavours .flavourCans {
    grid-area: cans;
    width: 100%;
    height: 26.25rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }
  .sectionFlavours .flavourCans .can {
    width: min(46vw, 15rem);
  }
  .sectionFlavours .flavourCans .can--lemon {
    left: 50%;
    transform: translateX(-88%) translateY(0);
  }
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 50%;
    transform: translateX(-12%) translateY(0.625rem);
  }
  .sectionFlavours .flavourPanel {
    max-width: 100%;
    opacity: 1;
    transform: none;
  }
  .sectionFlavours .flavourPanel .panelTop .title {
    font-size: 4rem;
  }
  .sectionFlavours .flavourPanel .desc {
    font-size: 1rem;
  }
  .sectionFlavours .flavourPanel--left,
  .sectionFlavours .flavourPanel--right {
    justify-self: stretch;
    padding-left: 0;
    padding-right: 0;
  }
  .sectionFlavours .flavourPanel--left {
    grid-area: left;
    text-align: right;
  }
  .sectionFlavours .flavourPanel--left .desc {
    margin-left: auto;
  }
  .sectionFlavours .flavourPanel--right {
    grid-area: right;
    text-align: left;
  }
}
@media (min-width: 599.9px) and (max-width: 899.9px) {
  .sectionFlavours .flavourCans {
    height: 37.5rem;
  }
  .sectionFlavours .flavourCans .can {
    width: min(52vw, 20rem);
  }
  .sectionFlavours .flavourCans .can--lemon {
    transform: translateX(-90%) translateY(0);
  }
  .sectionFlavours .flavourCans .can--grapefruit {
    transform: translateX(-10%) translateY(0.75rem);
  }
  .sectionFlavours .flavourPanel {
    max-width: 100%;
    opacity: 1;
    transform: none;
  }
  .sectionFlavours .flavourPanel .panelTop .title {
    font-size: 3rem;
  }
  .sectionFlavours .flavourPanel .desc {
    font-size: 1rem;
  }
  .sectionFlavours .flavourPanel--left,
  .sectionFlavours .flavourPanel--right {
    justify-self: stretch;
    padding-left: 0;
    padding-right: 0;
  }
  .sectionFlavours .flavourPanel--left {
    grid-area: left;
    justify-self: end;
    text-align: right;
    max-width: 13rem;
    padding-right: 1rem;
  }
  .sectionFlavours .flavourPanel--left .desc {
    margin-left: auto;
  }
  .sectionFlavours .flavourPanel--right {
    grid-area: right;
    justify-self: start;
    text-align: left;
    max-width: 13rem;
    padding-left: 1rem;
  }
}
@media (min-width: 899.9px) and (max-width: 1023.9px) {
  .sectionFlavours .flavoursInner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    grid-template-columns: minmax(15rem, 1fr) minmax(13rem, 7rem) minmax(15rem, 1fr);
    grid-template-areas: "left cans right";
    gap: 1.25rem;
    padding: 0 1.5rem 1.25rem;
  }
  .sectionFlavours .flavourCans {
    grid-area: cans;
    width: 100%;
    height: 15rem;
    margin-bottom: 0;
    overflow: visible;
  }
  .sectionFlavours .flavourCans .can {
    width: min(34vw, 13rem);
  }
  .sectionFlavours .flavourCans .can--lemon {
    left: 50%;
    transform: translateX(-78%) translateY(0);
  }
  .sectionFlavours .flavourCans .can--grapefruit {
    left: 50%;
    transform: translateX(-20%) translateY(0.625rem);
  }
  .sectionFlavours .flavourPanel {
    max-width: 100%;
    opacity: 1;
    transform: none;
  }
  .sectionFlavours .flavourPanel .panelTop .title {
    font-size: 4rem;
  }
  .sectionFlavours .flavourPanel .desc {
    font-size: 1rem;
  }
  .sectionFlavours .flavourPanel--left,
  .sectionFlavours .flavourPanel--right {
    justify-self: stretch;
    padding-left: 0;
    padding-right: 0;
  }
  .sectionFlavours .flavourPanel--left {
    grid-area: left;
    justify-self: end;
    text-align: right;
    max-width: 13rem;
    padding-right: 1rem;
  }
  .sectionFlavours .flavourPanel--left .desc {
    margin-left: auto;
  }
  .sectionFlavours .flavourPanel--right {
    grid-area: right;
    justify-self: start;
    text-align: left;
    max-width: 13rem;
    padding-left: 1rem;
  }
}
@media (min-width: 0) and (max-width: 599.9px) {
  .sectionFlavours .flavoursInner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "cans cans" "left right";
    gap: 1rem;
    padding: 0 0.5rem 1.5rem;
  }
  .sectionFlavours .flavourCans {
    height: 25rem;
  }
  .sectionFlavours .flavourCans .can {
    width: min(44vw, 11.25rem);
  }
}
@keyframes fogFloat1 {
  0%, 100% {
    transform: scale(1.1) translate(0, 0);
  }
  50% {
    transform: scale(1.15) translate(-0.625rem, -0.3125rem);
  }
}

/* ================= MOBILE ================= */
@media (max-width: 0) {
  /* --- Fix video shifting right --- */
  .sectionFlavours .flavoursVideo,
  .sectionFlavours .flavoursVideo--mirror {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: none;
    object-fit: cover;
    object-position: center center;
  }
  /* --- Ensure clean stacking --- */
  .sectionFlavours .flavoursInner {
    grid-template-columns: 1fr;
    grid-template-areas: "cans" "left" "right";
  }
  /* --- Make sure panels are visible --- */
  .sectionFlavours .flavourPanel {
    opacity: 1;
    transform: none;
    max-width: 100%;
  }
  .sectionFlavours .flavourPanel--left,
  .sectionFlavours .flavourPanel--right {
    justify-self: stretch;
    padding-left: 0;
    padding-right: 0;
  }
  .sectionFlavours {
    max-height: none !important;
    overflow: visible !important;
  }
  .sectionFlavours .flavoursInner {
    max-height: none !important;
    grid-template-columns: 1fr;
    grid-template-areas: "cans" "left" "right";
  }
  .sectionFlavours .flavourPanel {
    top: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (max-width: 0) {
  .sectionFlavours .flavoursInner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    grid-gap: 0.5rem !important;
    align-items: start !important;
    width: 100% !important;
    padding: 1.5rem 0 !important;
  }
  .sectionFlavours .flavourCans {
    grid-column: 1/span 2 !important;
    grid-row: 1/2 !important;
    margin: 0 auto 1.5rem auto !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .sectionFlavours .flavourPanel--left {
    grid-column: 1/2 !important;
    grid-row: 2/3 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    padding: 0.5rem !important;
  }
  .sectionFlavours .flavourPanel--right {
    grid-column: 2/3 !important;
    grid-row: 2/3 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    padding: 0.5rem !important;
  }
}
@media (min-width: 899.9px) {
  .sectionFlavours {
    max-height: 800px;
  }
  .flavourPanel {
    top: 5rem !important;
  }
}
@media (min-width: 1023.9px) {
  .sectionFlavours {
    max-height: 800px;
  }
  .flavourPanel {
    top: 5rem !important;
  }
}
@media (min-width: 1279.9px) {
  .sectionFlavours {
    max-height: 800px;
  }
  .flavourPanel {
    top: 5rem !important;
  }
}