.mobile-ui {
  display: none;
}

@media (max-width: 767px) {
  .frame {
    --mu: calc(100cqw / 440);
  }

  .mobile-ui {
    display: block;
    position: absolute;
    z-index: 5;
    font-family: "Figtree", system-ui, sans-serif;
    line-height: 1.25;
  }

  .mobile-menu-button {
    left: calc(368 * var(--mu));
    top: calc(16 * var(--mu));
    z-index: 7;
    width: calc(56 * var(--mu));
    height: calc(44 * var(--mu));
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .mobile-menu {
    left: 0;
    top: calc(70 * var(--mu));
    z-index: 6;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: calc(10 * var(--mu)) calc(30 * var(--mu)) calc(18 * var(--mu));
    background: #000;
  }

  .mobile-menu[hidden] { display: none; }

  .mobile-menu a {
    padding: calc(10 * var(--mu)) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: calc(18 * var(--mu));
    text-decoration: none;
  }

  .mobile-menu a:last-child { border-bottom: 0; }
  .mobile-menu a[aria-current="page"] { font-weight: 700; }

  .mobile-flavour {
    left: calc(30 * var(--mu));
    top: calc(1472 * var(--mu));
    width: calc(380 * var(--mu));
    height: calc(416 * var(--mu));
    overflow: visible;
    border-radius: 0 0 calc(20 * var(--mu)) calc(20 * var(--mu));
    background: var(--flavour-colour, #e34e34);
    color: #fff;
    text-align: center;
  }

  .mobile-flavour-jar {
    position: absolute;
    z-index: 2;
    /* Slightly oversized so the orange jar baked into the image never peeks out. */
    left: calc(109 * var(--mu));
    top: calc(-228 * var(--mu));
    width: calc(161 * var(--mu));
    height: calc(290 * var(--mu));
    object-fit: fill;
  }

  .mobile-flavour-copy h2 {
    margin: 0;
    padding-top: calc(104 * var(--mu));
    font-size: calc(24.5 * var(--mu));
    line-height: 1.1;
    text-transform: uppercase;
  }

  .mobile-flavour-copy p {
    width: calc(320 * var(--mu));
    margin: calc(16 * var(--mu)) auto 0;
    font-size: calc(14 * var(--mu));
    line-height: calc(18.6 * var(--mu));
    text-transform: capitalize;
  }

  .mobile-flavour-copy a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(140 * var(--mu));
    height: calc(49 * var(--mu));
    margin-top: calc(23 * var(--mu));
    border-radius: calc(25 * var(--mu));
    background: #ffe500;
    color: #111;
    font-size: calc(15 * var(--mu));
    font-weight: 500;
    text-decoration: none;
  }

  .mobile-flavour-arrow {
    position: absolute;
    bottom: calc(44 * var(--mu));
    width: calc(49 * var(--mu));
    height: calc(49 * var(--mu));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #111;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 46% 46%;
    color: transparent;
    font-size: 0;
    cursor: pointer;
  }

  .mobile-flavour-arrow.is-prev {
    left: calc(133 * var(--mu));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.5 12H5.5M5.5 12l5-5M5.5 12l5 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .mobile-flavour-arrow.is-next {
    left: calc(197 * var(--mu));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12H18.5M18.5 12l-5-5M18.5 12l-5 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .mobile-insights-head {
    left: 0;
    top: calc(5896 * var(--mu));
    width: 100%;
    padding: 0 calc(20 * var(--mu));
    box-sizing: border-box;
    text-align: center;
    color: #111;
  }

  .mobile-insights-head h2,
  .mobile-insights-head p {
    margin: 0;
  }

  .mobile-insights-head h2 {
    font-size: calc(26 * var(--mu));
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  .mobile-insights-head p {
    margin-top: calc(8 * var(--mu));
    font-size: calc(12 * var(--mu));
    font-weight: 400;
    line-height: 1.3;
  }

  .mobile-blogs {
    left: calc(29 * var(--mu));
    top: calc(5987 * var(--mu));
    width: calc(381 * var(--mu));
    height: calc(706 * var(--mu));
    overflow: hidden;
    border-radius: calc(18 * var(--mu));
    background: #fff8b3;
    color: #111;
    touch-action: pan-y;
  }

  .mobile-blog-viewport {
    height: 100%;
    overflow: hidden;
  }

  .mobile-blog-track,
  .mobile-blog {
    height: 100%;
  }

  .mobile-blog-track {
    display: flex;
    width: 100%;
  }

  .mobile-blog {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    background: #fff8b3;
  }

  .mobile-blog img {
    display: block;
    width: 100%;
    height: calc(513 * var(--mu));
    object-fit: cover;
  }

  .mobile-blog-copy {
    flex: 1;
    padding: calc(22 * var(--mu)) calc(27 * var(--mu)) 0;
  }

  .mobile-blog-copy p,
  .mobile-blog-copy h2 {
    margin: 0;
    text-transform: uppercase;
  }

  .mobile-blog-copy p {
    font-size: calc(11 * var(--mu));
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  .mobile-blog-copy h2 {
    max-width: calc(310 * var(--mu));
    margin-top: calc(7 * var(--mu));
    font-size: calc(19 * var(--mu));
    line-height: 1.15;
  }

  .mobile-blog-copy a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(80 * var(--mu));
    height: calc(39 * var(--mu));
    margin-top: calc(15 * var(--mu));
    border-radius: calc(22 * var(--mu));
    background: #000;
    color: #fff;
    font-size: calc(14 * var(--mu));
    text-decoration: none;
  }

  .mobile-testimonials {
    left: calc(29 * var(--mu));
    top: 0;
    width: calc(382 * var(--mu));
    height: calc(8772 * var(--mu));
    pointer-events: none;
  }

  .mobile-loved-head {
    left: 0;
    top: calc(7940 * var(--mu));
    width: 100%;
    margin: 0;
    color: #111;
    text-align: center;
  }

  .mobile-loved-head h2,
  .mobile-loved-head p {
    margin: 0;
  }

  .mobile-loved-head h2 {
    font-size: calc(32 * var(--mu));
    font-weight: 800;
    line-height: calc(36 * var(--mu));
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  .mobile-loved-head p {
    margin-top: calc(12 * var(--mu));
    font-size: calc(14 * var(--mu));
    line-height: calc(18 * var(--mu));
  }

  .mobile-testi-card {
    position: absolute;
    top: calc(8055 * var(--mu));
    left: 0;
    width: 100%;
    height: calc(714 * var(--mu));
    margin: 0;
    overflow: hidden;
    border-radius: calc(16 * var(--mu));
    background: linear-gradient(180deg, #e9622f, #ff9119);
    color: #fff;
    pointer-events: auto;
  }

  .mobile-testi-card img {
    display: block;
    width: 100%;
    height: calc(270 * var(--mu));
    object-fit: cover;
  }

  .mobile-testi-content blockquote,
  .mobile-testi-content p,
  .mobile-testi-content > * {
    position: absolute;
    left: calc(27 * var(--mu));
    right: calc(27 * var(--mu));
    margin: 0;
  }

  .mobile-testi-content blockquote {
    top: calc(301 * var(--mu));
    font-size: calc(33 * var(--mu));
    line-height: calc(45.5 * var(--mu));
  }

  .mobile-testi-content p {
    top: calc(456 * var(--mu));
    right: calc(75 * var(--mu));
    font-size: calc(15.5 * var(--mu));
    line-height: calc(21.4 * var(--mu));
  }

  .mobile-testi-content::before {
    content: "";
    position: absolute;
    top: calc(583 * var(--mu));
    left: calc(27 * var(--mu));
    right: calc(27 * var(--mu));
    border-top: 1px dashed rgba(255, 255, 255, 0.55);
  }

  .mobile-testi-name {
    top: calc(607 * var(--mu));
    font-size: calc(19 * var(--mu));
    line-height: calc(22 * var(--mu));
    text-transform: uppercase;
  }

  .mobile-testi-role {
    top: calc(635 * var(--mu));
    font-size: calc(12 * var(--mu));
    line-height: calc(14 * var(--mu));
  }

  .mobile-testi-stars {
    top: calc(670 * var(--mu));
    color: #ffe500;
    font-size: calc(15 * var(--mu));
    line-height: calc(16 * var(--mu));
    letter-spacing: 0.16em;
  }

  /* Covers the old contact text; the black wedge follows the footer curve. */
  .mobile-contact {
    left: calc(18 * var(--mu));
    top: calc(9825.7 * var(--mu));
    width: calc(285 * var(--mu));
    height: calc(222 * var(--mu));
    padding: calc(19 * var(--mu)) 0 0 calc(12 * var(--mu));
    box-sizing: border-box;
    color: #fff;
    font-size: calc(13 * var(--mu));
    font-style: normal;
    isolation: isolate;
  }

  /* Grey and black halves are both clipped so every box edge matches the image. */
  .mobile-contact::before,
  .mobile-contact::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .mobile-contact::after {
    background: #000;
    clip-path: polygon(0 1.3%, 8.4% 4.9%, 18.6% 10.2%, 27.7% 15.1%, 35.4% 20.4%,
      42.8% 25.3%, 49.5% 30.7%, 56.1% 35.6%, 61.8% 40.4%, 67.4% 45.8%,
      72.6% 50.7%, 77.5% 56%, 82.1% 60.9%, 86.3% 66.2%, 90.5% 71.1%,
      94.4% 76%, 98.2% 81.3%, 100% 83.1%, 100% 100%, 0 100%);
  }

  .mobile-contact::before {
    background: #333;
    clip-path: polygon(0 0, 100% 0, 100% 83.1%, 98.2% 81.3%, 94.4% 76%,
      90.5% 71.1%, 86.3% 66.2%, 82.1% 60.9%, 77.5% 56%, 72.6% 50.7%,
      67.4% 45.8%, 61.8% 40.4%, 56.1% 35.6%, 49.5% 30.7%, 42.8% 25.3%,
      35.4% 20.4%, 27.7% 15.1%, 18.6% 10.2%, 8.4% 4.9%, 0 1.3%);
  }

  .mobile-contact strong,
  .mobile-contact a {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .mobile-contact strong {
    margin-bottom: calc(10 * var(--mu));
    font-size: calc(15 * var(--mu));
  }

  .mobile-contact a {
    min-height: calc(30 * var(--mu));
    line-height: calc(30 * var(--mu));
  }

  .mobile-ui :focus-visible {
    outline: calc(2 * var(--mu)) solid #fff;
    outline-offset: calc(2 * var(--mu));
  }
}