@font-face {
  font-family: ITCClearfaceReg;
  src: url("assets/fonts/ClearfaceStd-Regular.otf") format("opentype");
}

@font-face {
  font-family: ITCClearfaceIta;
  font-weight: italic;
  src: url("assets/fonts/ClearfaceStd-Italic.otf") format("opentype");
}

@font-face {
  font-family: DrawingRoom;
  src: url("assets/fonts/DrawingRoomSans-Regular.otf") format("opentype");
}

:root {
  --large: clamp(1px, 3.8vw, 60px);
  --heading: clamp(1px, 2.3vw, 35px);
  --subheading: clamp(1px, 1.4vw, 25px);
  --body: clamp(1px, 1.5vw, 24px);
  --caption: clamp(1px, 1vw, 14px);
}

html,
body {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;

}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

body {
  background-color: black;
  transition: background-color 1s ease;
  margin: 0;
  padding: 0;
  /* padding-bottom: 20vh; */
}

p,
a {
  color: white;
  font-family: ITCClearfaceReg;
  margin: 0;
}

span {
  font-family: ITCClearfaceIta;
}

.wrapper {
  max-width: 1728px;
  margin: 0 auto;
  position: relative;
  font-size: calc(100vw / 1728 * 16);
}


/* === PAGE TRANSITIONS === */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  z-index: 998;
  /* Below menu (999), above everything else */
}

.page-transition.active {
  opacity: 1;
  pointer-events: auto;
}

/* === AGE VERIFICATION === */
#age-overlay {
  transition: opacity 1s ease;
  opacity: 1;
}

#age-overlay.fade-out {
  opacity: 0;
}

.age_wrapper {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  padding: 2rem;
  box-sizing: border-box;
  font-family: ITCClearfaceReg;
  text-align: center;
  overflow: hidden;
  transition: opacity 2s ease, visibility 2s ease;

  .fade-out {
    opacity: 0;
    visibility: hidden;
  }

  .text {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0;
    z-index: 2;

    .home-link {
      display: flex;
      text-decoration: none;
      color: inherit;
      z-index: 9999;

      .left,
      .right {
        letter-spacing: 0.15em;
        color: white;
        font-family: ITCClearfaceReg;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      .left {
        font-size: 1.2rem;
        margin-right: 18px;
      }

      .right {
        font-size: 1.2rem;
        margin-left: 18px;
      }
    }
  }

  .question {
    font-family: DrawingRoom;
    letter-spacing: 15%;
    font-size: var(--large);
    margin-bottom: 1.5rem;
  }

  .clarification {
    font-size: var(--body);
    width: 30%;
    margin: 3% auto 5%;
    line-height: 1.6;
  }

  .options {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;

    p {
      border: 1px solid white;
      padding: 0.9% 0.5% 0.5% 0.5%;
      width: 5%;
      cursor: pointer;
      letter-spacing: 10%;
      font-size: clamp(1px, 0.8vw, 28px);
      transition: background-color 0.5s, color;

      &:hover {
        background-color: white;
        color: black;
      }

    }
  }
}



/* === FIXED MENU === */
.fixed-menu {
  position: fixed;
  z-index: 999;
  width: 100%;
  max-width: 1728px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 2rem 1rem;
  box-sizing: border-box;
  justify-content: space-between;

  .menu-trigger-left,
  .menu-trigger-right {
    .menu-icon {
      width: 48px;
      height: 150px;
      cursor: pointer;
    }
  }
}


/* === OVERLAY MENU === */

.menu-open .wrapper .text {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 990;
  pointer-events: none;

  &.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .menu-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .menu-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 2rem 0;
    z-index: 9999999999;

    .home-link {
      display: flex;
      text-decoration: none;
      color: inherit;
      z-index: 9999999999;

      .left,
      .right {
        letter-spacing: 0.15em;
        color: white;
        font-family: ITCClearfaceReg;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
        z-index: 9999999999;
      }

      .left {
        font-size: 1.2rem;
        margin-right: 18px;
      }

      .right {
        font-size: 1.2rem;
        margin-left: 18px;
      }
    }
  }

  .gradient-top {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    top: 0;
    left: 0;
    height: 30vh;
    width: 100vw;
    position: absolute;
    z-index: 1;
  }

  .gradient-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 30vh;
    width: 100vw;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 1;
  }

  .menu-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1728px;
    height: 100%;
    margin: auto;
    position: relative;
    z-index: 2;

    .menu-content-upper,
    .menu-content-lower {
      color: white;
      width: 100vw;
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      text-transform: uppercase;

      li {
        margin-bottom: 1rem;

        a {
          color: white;
          text-decoration: none;
          font-size: var(--heading);
          letter-spacing: 0.15em;
        }
      }
    }

    .menu-content-upper {
      margin-top: 15vh;

      a {
        font-family: DrawingRoom;
        letter-spacing: 0.15em;
        text-align: center;
        font-size: var(--heading);
      }

      .left {
        margin-left: 11.5%;
      }

      .right {
        margin-right: 11.5%;
      }
    }

    .menu-content-lower {
      align-items: end;
      margin-bottom: 10vh;
      font-family: ITCClearfaceReg;
      text-align: center;

      .left {
        margin-left: 30%;

        a {
          color: white;
          text-decoration: none;
          font-size: var(--subheading);
        }
      }

      .right {
        margin-right: 30%;

        a {
          color: white;
          text-decoration: none;
          font-size: var(--subheading);
        }
      }
    }
  }
}


/* === HOME PAGE === */
.home-content-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;

  .text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    padding: 2rem 0;

    .home-link {
      display: flex;
      text-decoration: none;
      color: inherit;
      z-index: 9999;

      .left,
      .right {
        letter-spacing: 0.15em;
        color: white;
        font-family: ITCClearfaceReg;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      .left {
        font-size: 1.2rem;
        margin-right: 18px;
      }

      .right {
        font-size: 1.2rem;
        margin-left: 18px;
      }
    }
  }

  .home-backgrounds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1;

    .gradient-top {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
      top: 0;
      left: 0;
      height: 30vh;
      width: 100vw;
      position: fixed;
      z-index: 2;
    }

    img,
    .slide-two,
    .slide-six {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      opacity: 0;
      transition: opacity 2s ease;
    }

    .slide-four {
      position: absolute;
      top: 0;
      left: 50%;
      width: 60vw;
      height: 100vh;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 1s ease;
      z-index: 2;

      .left,
      .right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 4rem;
        font-family: DrawingRoom, sans-serif;
        color: white;
        margin: 0;
        line-height: 1;
        white-space: nowrap;
      }

      .left {
        left: 0;
        text-align: left;
      }

      .right {
        right: 0;
        text-align: right;
      }
    }

    p {
      font-size: 4rem;
      color: white;
      text-align: center;
      font-family: DrawingRoom, sans-serif;
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .slideshow-progress {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 4px;
    background: rgba(244, 216, 152, 0.15);
    z-index: 99;
    overflow: hidden;
    pointer-events: none;
  }

  .progress-bar {
    height: 100%;
    width: 0%;
    background: #F4D898;
    transition:
      width linear,
      opacity 1s ease;
    opacity: 0;
  }
}


/* === CABINET, GALLER & PAVILION PAGES === */
.section-info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.5rem;
  background-color: transparent;
  color: white;
  opacity: 0;
  visibility: hidden;
  transition: background-color 1s ease, opacity 1s ease, visibility 0s linear 1s;
  border-bottom: 2px solid var(--section-border-color, transparent);
  z-index: 980;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  &.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .section-info:not(.visible) {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s, 0s, 1s;
  }

  .wrapper {
    max-width: 1728px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: auto;
  }

  .info-col {
    flex: 1;
    text-align: center;
    padding-bottom: 18px;

    p {
      margin: 0;
      font-family: DrawingRoom, sans-serif;
      font-size: var(--body);
      line-height: 1.4;
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    &.fade-out p {
      opacity: 0;
    }
  }

  .left {
    text-align: center;
    margin-left: 60px;

    .line1 {
      font-family: ITCClearfaceReg;
      text-transform: uppercase;
      font-size: var(--caption);
      letter-spacing: 0.15em;
      line-height: 80%;
    }

    .line2 {
      letter-spacing: 0.15em;
    }
  }

  .middle {
    text-align: center;

    .line1 {
      line-height: 80%;
      letter-spacing: 0.15em;
    }

    .line2 {
      letter-spacing: 0.15em;
    }
  }

  .right {
    text-align: center;
    margin-right: 60px;

    .line1 {
      font-family: ITCClearfaceReg;
      text-transform: uppercase;
      font-size: var(--caption);
      letter-spacing: 0.15em;
      line-height: 80%;
    }

    .line2 {
      letter-spacing: 0.15em;
    }
  }
}

.range-content-wrapper {
  .text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    padding: 2rem 0;

    .home-link {
      display: flex;
      text-decoration: none;
      color: inherit;
      z-index: 9999;

      .left,
      .right {
        letter-spacing: 0.15em;
        color: white;
        font-family: ITCClearfaceReg;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      .left {
        font-size: 1.2rem;
        margin-right: 18px;
      }

      .right {
        font-size: 1.2rem;
        margin-left: 18px;
      }
    }
  }

  .range-opener {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* max-width: 1446px; */
    margin: auto;

    .opener-one,
    .opener-two {
      width: 85%;
      margin-bottom: 15%;
    }

    .opener-svg {
      width: 60%;
      margin-bottom: 12%;
    }

    .description {
      width: 46%;
      line-height: 150%;
      font-size: var(--heading);
      text-align: center;
      font-family: ITCClearfaceReg;
      margin-bottom: 12%;
    }
  }

  .section-one,
  .section-two {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* max-width: 1446px; */
    margin: auto;

    .sub-heading {
      font-family: ITCClearfaceReg;
      text-transform: uppercase;
      font-size: var(--subheading);
      letter-spacing: 0.15em;
      line-height: 80%;
      text-align: center;
      width: 100%;
    }

    .heading {
      font-family: DrawingRoom, sans-serif;
      line-height: 1.2;
      letter-spacing: 10%;
      text-align: center;
      width: 100%;
      margin-top: 15px;
      font-size: var(--heading);
    }

    .bottle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin: 12% auto;

      .bottle-middle {
        width: 28%;
        margin-left: 8%;
        margin-right: 8%;
        max-height: 775px;
        object-fit: contain;
      }

      .bottle-left,
      .bottle-right {
        text-align: center;
        width: 18%;

        .line-one,
        .line-three {
          font-family: ITCClearfaceIta;
          font-size: var(--body);
          padding-bottom: 1.5%;
        }

        .line-four {
          font-size: var(--body);
        }

        .line-two {
          margin-bottom: 55%;
          font-size: var(--body);
        }
      }
    }

    .blurb {
      margin-top: 6%;
      width: 75%;
      font-size: var(--heading);
      text-align: center;
      margin-bottom: 18%;
      line-height: 150%;
    }

    .collage {
      position: relative;
      margin-bottom: 20%;

      .background {
        width: 85%;
        margin: auto;
        display: block;
      }

      .foreground {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        letter-spacing: 0.15em;
        font-size: var(--heading);
        font-family: DrawingRoom;
        text-align: center;
        color: white;
        width: 100%;
        max-width: 70%;
      }
    }

    .location {
      display: flex;
      justify-content: space-between;
      width: 85%;
      /* max-width: 1446px; */
      margin: 12% auto;
      margin-bottom: 20%;

      .location-left,
      .location-right {
        width: 33%;
        font-size: var(--body);
        line-height: 150%;
      }

      .location-middle {
        width: 33%;
        padding: 0 50px;

        img {
          width: 100%;
        }

        .img-caption {
          padding: 20px 0 0 0;
          font-size: var(--caption);
        }
      }
    }

    .distillery-description {
      font-size: var(--body);
      line-height: 150%;
      width: 55%;
      text-align: center;
      margin: 115px auto;
    }

    .distillery-image {
      margin: auto;
      margin-bottom: 20%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      img {
        width: 40%;
        margin: auto;
      }

      .img-caption {
        padding-top: 20px;
        font-size: var(--caption);
        width: 40%;
        margin: auto;
      }
    }
  }

  .catWrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .cat {
      width: 10%;
      margin: 20% auto;
    }
  }
}


/* === BESPOKE PAGE === */
.bespoke-page {
  background-color: #301616;
}

.bespoke-content-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;

  .text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    padding: 2rem 0;

    .home-link {
      display: flex;
      text-decoration: none;
      color: inherit;
      z-index: 9999;

      .left,
      .right {
        letter-spacing: 0.15em;
        color: white;
        font-family: ITCClearfaceReg;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      .left {
        font-size: 1.2rem;
        margin-right: 18px;
      }

      .right {
        font-size: 1.2rem;
        margin-left: 18px;
      }
    }
  }

  .section-one {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* max-width: 1446px; */
    margin: auto;

    .bespoke-opener {
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
      width: 85%;
      /* max-width: 1446px; */
      margin: auto;

      .bespoke-svg {
        width: 58%;
        margin: 10% auto;
      }

      .description {
        width: 55%;
        line-height: 150%;
        font-size: var(--heading);
        text-align: center;
        font-family: ITCClearfaceReg;
        margin: auto;
        margin-bottom: 10%;
      }

      .barrels {
        width: 100%;
      }

      .img-caption {
        padding-top: 20px;
        font-size: var(--caption);
        width: 100%;
        margin: auto;
        text-align: left;
      }
    }

    .services {
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
      width: 85%;
      margin: auto;
      margin-bottom: 5.5%;

      .title {
        font-family: DrawingRoom;
        font-size: var(--heading);
        text-align: center;
        margin: 10% auto 8% auto;
      }

      .two-col {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5%;
        margin-bottom: 4%;

        p {
          line-height: 150%;
          font-size: var(--body);
        }

        .service {
          font-family: ITCClearfaceIta;
        }
      }
    }

    .contact-us {
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      width: 85%;
      margin: auto;
      margin-bottom: 20%;

      .title {
        font-family: DrawingRoom;
        font-size: var(--heading);
        letter-spacing: 8%;
        text-align: center;
        margin: 10% auto 8% auto;
      }

      .description {
        width: 80%;
        line-height: 150%;
        font-size: var(--heading);
        text-align: center;
        font-family: ITCClearfaceReg;
        margin: auto;
        margin-bottom: 9%;
      }

      .contact {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        a {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(244, 216, 152, 0.23);
          border: 1px solid #F4D898;
          color: #F4D898;
          width: 25%;
          padding: 1.4% 0 1% 0;
          letter-spacing: 15%;
          font-size: var(--subheading);
          text-decoration: none;
          margin: auto 5%;
          text-align: center;
          alignment-baseline: middle;
          transition: border-color 0.5s ease, color 0.5s ease;
        }

        a:hover {
          border: 1px solid white;
          color: white;
          transition: border-color 0.5s ease, color 0.5s ease;
        }

        p {
          font-size: var(--heading);
          padding-top: 0.6%;
        }
      }

      .privacy {
        text-align: center;
        margin: 5% auto 15% auto;
      }

      .moran-image {
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;

        img {
          width: 40%;
          margin: auto;
        }

        .img-caption {
          padding-top: 20px;
          font-size: var(--caption);
          width: 40%;
          margin: auto;
        }
      }
    }
  }

  .section-two {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* max-width: 1446px; */
    margin: auto;

    .opener-one {
      width: 85%;
      margin-bottom: 25%;
    }

    .opener-two {
      width: 85%;
      margin-bottom: 15%;
    }

    .opener-svg {
      width: 80%;
      margin-bottom: 8%;
    }

    .description {
      width: 46%;
      line-height: 150%;
      font-size: var(--heading);
      text-align: center;
      font-family: ITCClearfaceReg;
      margin-bottom: 157px;
    }
  }

  .section-three {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* max-width: 1446px; */
    margin: auto;

    .sub-heading {
      font-family: ITCClearfaceReg;
      text-transform: uppercase;
      font-size: var(--subheading);
      letter-spacing: 0.15em;
      line-height: 80%;
      text-align: center;
      width: 100%;
    }

    .heading {
      font-family: DrawingRoom, sans-serif;
      line-height: 1.2;
      letter-spacing: 10%;
      text-align: center;
      width: 100%;
      margin-top: 15px;
      font-size: var(--heading);
    }

    .bottle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin: 12% auto;

      .bottle-middle {
        width: 28%;
        margin-left: 8%;
        margin-right: 8%;
        max-height: 775px;
        object-fit: contain;
      }

      .bottle-left,
      .bottle-right {
        text-align: center;

        .line-one,
        .line-three {
          font-family: ITCClearfaceIta;
          font-size: var(--body);
        }

        .line-four {
          font-size: var(--body);
        }

        .line-two {
          margin-bottom: 55%;
          font-size: var(--body);
        }
      }
    }

    .blurb {
      margin-top: 6%;
      width: 75%;
      font-size: var(--heading);
      text-align: center;
      margin-bottom: 18%;
      line-height: 170%;
    }

    .collage {
      position: relative;
      margin-bottom: 20%;

      .background {
        width: 85%;
        margin: auto;
        display: block;
      }

      .foreground {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        letter-spacing: 0.15em;
        font-size: var(--heading);
        font-family: DrawingRoom;
        text-align: center;
        color: white;
        width: 100%;
        max-width: 70%;
      }
    }

    .location {
      display: flex;
      justify-content: space-between;
      width: 85%;
      /* max-width: 1446px; */
      margin: 20% auto;

      .location-left,
      .location-right {
        width: 33%;
        font-size: var(--body);
        line-height: 170%;
      }

      .location-middle {
        width: 33%;
        padding: 0 50px;

        img {
          width: 100%;
        }

        .img-caption {
          padding: 20px 0 0 0;
          font-size: var(--caption);
        }
      }
    }

    .distillery-description {
      font-size: var(--body);
      line-height: 170%;
      width: 55%;
      text-align: center;
      margin: 115px auto;
    }

    .distillery-image {
      margin: auto;
      margin-bottom: 23%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      img {
        width: 40%;
        margin: auto;
      }

      .img-caption {
        padding-top: 20px;
        font-size: var(--caption);
        width: 40%;
        margin: auto;
      }
    }
  }

  .catWrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .cat {
      width: 10%;
      margin: 20% auto;
    }
  }
}


/* === ABOUT PAGE === */
.bg-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.5;
}

.bg-video__media {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.wrapper {
  position: relative;
  z-index: 1;
}

.about-content-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;

  .text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    padding: 2rem 0;

    .home-link {
      display: flex;
      text-decoration: none;
      color: inherit;
      z-index: 9999;

      .left,
      .right {
        letter-spacing: 0.15em;
        color: white;
        font-family: ITCClearfaceReg;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      .left {
        font-size: 1.2rem;
        margin-right: 18px;
      }

      .right {
        font-size: 1.2rem;
        margin-left: 18px;
      }
    }
  }

  .about {
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* max-width: 1446px; */
    width: 100%;
    margin: auto;

    .about-svg {
      width: 58%;
      margin: 10% auto;
    }

    .description {
      width: 46%;
      line-height: 150%;
      font-size: var(--heading);
      text-align: center;
      font-family: ITCClearfaceReg;
      margin: auto;
      margin-bottom: 9%;
    }

    .location-img {
      margin: auto;
      margin-bottom: 20%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      img {
        width: 40%;
        margin: auto;
      }

      .img-caption {
        padding-top: 20px;
        font-size: var(--caption);
        width: 40%;
        margin: auto;
      }
    }
  }

  .stockists {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    margin-bottom: 10%;

    .stockists-svg {
      width: 58%;
      margin: 10% auto;
    }

    .three-col {
      width: 80%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5%;
      margin-bottom: 10%;

      .col p {
        text-align: center;
      }

      .title {
        font-size: var(--heading);
        margin-bottom: 5%;
      }

      .locations {
        font-size: var(--subheading);
        color: white;
        text-align: center;
        list-style: none;
        padding: 0;
        font-family: ITCClearfaceReg;

        li {
          padding-bottom: 3%;
        }
      }
    }
  }

  .details {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;

    .contact {
      margin-bottom: 10%;
    }

    .credits {
      margin-bottom: 30%;
    }

    .contact,
    .credits {
      width: 100%;
      text-align: center;
      letter-spacing: 5%;
      line-height: 120%;

      a {
        color: white;
        text-decoration: none;
      }
    }

    .cat {
      width: 10%;
      margin: 10% auto;
    }

    .legal {
      width: 100%;
      text-align: center;
      padding-bottom: 20vh;
    }
  }
}


/* === Mobile === */
@media only screen and (max-width: 1000px) {


  :root {
    --large: clamp(1px, 6vw, 60px);
    --heading: clamp(1px, 6vw, 40px);
    --subheading: clamp(1px, 5vw, 28px);
    --body: clamp(1px, 4vw, 24px);
    --caption: clamp(1px, 2.5vw, 16px);

  }

  .fixed-menu {

    .menu-trigger-left,
    .menu-trigger-right {
      width: 40px;

      .menu-icon {
        width: auto;
        height: 120px;
        cursor: pointer;
      }
    }
  }

  .range-content-wrapper .text .home-link,
  .menu-overlay .menu-content-wrapper .menu-text {
    .right {
      display: none;
    }

    .left {
      margin-right: 0;
      font-size: var(--subheading);
    }
  }

  .section-info {
    height: 90px;
  }

  .menu-overlay {
    .menu-content-wrapper {
      .menu-content-upper {
        margin-top: 10vh;
        flex-direction: column;
        align-items: center;
        justify-content: unset;


        .left,
        .middle,
        .right {
          margin: 8% auto;
        }
      }

      .menu-content-lower {
        .left,
        .right {
          width: 100%;
          margin: 0;

          a {
            font-size: var(--subheading);
          }
        }
      }
    }
  }


  .age_wrapper {
    .text {
      .home-link {
        .left {
          margin-right: 0;
        }

        .right {
          display: none;
        }
      }
    }

    .restriction {
      position: absolute;

      .clarification {
        font-size: var(--body);
        width: 60%;
        margin: 10% auto 15% auto;
        line-height: 1.6;
      }

      .options {
        display: flex;
        justify-content: center;
        gap: 3rem;
        margin-bottom: 2rem;

        p {
          border: 1px solid white;
          padding: 2% 0.5% 0.5% 0.5%;
          width: 15%;
          cursor: pointer;
          font-size: var(--subheading);
        }
      }
    }
  }



  /* === HOME PAGE === */
  .home-content-wrapper {
    height: 100vh;

    .text .home-link {
      .left {
        margin-right: 0;
        font-size: var(--subheading);
      }

      .right {
        display: none;
      }
    }

    .home-backgrounds {

      .slide-two p,
      .slide-four .left,
      .slide-four .right,
      .slide-six p {
        font-size: 3rem;
      }

      .slide-four {
        width: 92%;

        .left {
          top: 30vh;
          text-align: center;
        }

        .right {
          top: 70vh;
          text-align: center;
        }
      }
    }
  }


  /* === ABOUT PAGE === */
  .about-content-wrapper {
    .text .home-link {
      .left {
        font-size: var(--subheading);
        margin-right: 0;
      }

      .right {
        display: none;
      }
    }

    .about {
      width: 92%;
      margin: auto;

      .about-svg {
        width: auto;
        max-width: 100%;
        height: 7.5vh;
        margin: 30% auto;
      }

      .description {
        width: 100%;
        font-size: var(--body);
        margin-bottom: 20%;
      }

      .location-img {
        margin-bottom: 20%;

        img,
        .img-caption {
          width: 100%;
        }
      }
    }

    .stockists {
      width: 92%;
      margin: auto;

      .stockists-svg {
        width: auto;
        max-width: 100%;
        height: 7.5vh;
        margin-bottom: 15%;
      }

      .three-col {
        display: flex;
        flex-wrap: wrap;

        .col {
          width: 100%;
          margin-bottom: 20%;

          .title {
            text-align: center;
            font-size: var(--large);
            margin-bottom: 5%;
          }

          .locations {
            text-align: center;
            font-size: var(--subheading);
          }
        }
      }
    }

    .details {
      width: 92%;
      margin: auto;

      .contact,
      .credits {
        line-height: 150%;
        font-size: var(--body);
        margin-top: 3vh;
      }

      .cat {
        width: 30%;
        margin: 20% auto;
      }

      .legal {
        font-size: var(--body);
      }
    }
  }


  /* === BESPOKE PAGE === */
  .bespoke-content-wrapper {
    .text .home-link {
      .left {
        font-size: var(--subheading);
        margin-right: 0;
      }

      .right {
        display: none;
      }
    }

    .section-one {
      .bespoke-opener {
        width: 92%;

        .bespoke-svg {
          width: auto;
          height: 7.5vh;
          margin: 30% auto;
        }

        .description {
          width: 80%;
          font-size: var(--large);
        }

        .barrels {
          aspect-ratio: 4/6;
          object-fit: cover;
        }
      }

      .services {
        width: 92%;

        .title {
          font-size: var(--large);
          margin: 20% auto;
        }

        .two-col {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 0;


          .col {
            width: 100%;
            margin-bottom: 15%;

            .service {
              text-align: center;
            }
          }
        }
      }

      .contact-us {
        width: 92%;

        .description {
          width: 100%;
          font-size: var(--subheading);
          margin-bottom: 15%;
        }

        .contact {
          flex-wrap: wrap;

          a {
            font-size: var(--subheading);
            width: 60%;
            padding-top: 2%;
          }

          p {
            width: 100%;
            text-align: center;
            margin: 3% auto;
          }
        }

        .privacy {
          margin-top: 20%;
          margin-bottom: 5%;
          font-size: var(--body);
        }

        .moran-image {
          margin-bottom: 20vh;

          .img-caption {
            width: 100%;
          }

          img {
            width: 100%;
            aspect-ratio: 4/6;
            object-fit: cover;
          }
        }
      }
    }

    .section-two {
      width: 92%;

      .collage .foreground {
        max-width: 70%;
      }

      .opener-one,
      .opener-two {
        width: 100%;
        aspect-ratio: 4/6;
        object-fit: cover;
        margin-bottom: 30%;
      }

      .description {
        width: 85%;
        font-size: var(--large);
        margin-bottom: 30%;
      }
    }

    .section-three {
      .bottle {
        flex-wrap: wrap;
        margin-top: 30%;

        .bottle-left {
          order: 1;
          width: 40%;
          margin-left: 10%;

          .line-one,
          .line-two,
          .line-three,
          .line-four {
            line-height: 150%;
          }

          .line-two {
            margin-bottom: 15%;
          }
        }

        .bottle-right {
          order: 2;
          width: 40%;
          margin-right: 10%;

          .line-one,
          .line-two,
          .line-three,
          .line-four {
            line-height: 150%;
          }

          .line-two {
            margin-bottom: 15%;
          }
        }

        .bottle-middle {
          order: 3;
          margin-top: 15%;
          margin-bottom: 15%;
          width: 50%;
        }
      }

      .blurb {
        width: 85%;
        font-size: var(--subheading);
        margin-bottom: 30%;
      }

      .collage {
        margin-bottom: 30%;
      }


      .location {
        flex-wrap: wrap;
        width: 92%;

        .location-left {
          order: 1;
          width: 47%;
          margin-right: 3%;
        }

        .location-right {
          order: 2;
          width: 47%;
          margin-left: 3%;
        }

        .location-middle {
          order: 3;
          width: 100%;
          margin-top: 10%;
          margin-bottom: 20%;
          padding: 0;

          img {
            width: 100%;
          }
        }
      }

      .distillery-description {
        width: 92%;
        margin: 15% auto;
        text-align: left;
      }

      .distillery-image {
        width: 92%;
        margin: auto;
        margin-bottom: 10vh;

        img,
        .img-caption {
          width: 100%;
        }
      }
    }

    .catWrap {
      .cat {
        width: 30%;
      }
    }
  }


  /* === CABINET/GALLERY/PAVILION PAGE === */

  .section-info {
    height: 90px;

    .left,
    .right {
      display: none;
    }
  }

  .range-content-wrapper {
    .range-opener {
      width: 92%;
      margin: auto;
      margin-bottom: 20%;

      .opener-one,
      .opener-two {
        width: 100%;
        margin: auto;
      }

      .opener-two {
        margin-bottom: 30%;
        margin-top: 10%;
      }

      .opener-svg {
        width: auto;
        height: 5vh;
        margin: 20% auto;
      }

      .description {
        width: 80%;
        font-size: var(--large);
        margin-bottom: 10%;
      }
    }

    .section-one {
      margin-bottom: 40%;

      .bottle {
        flex-wrap: wrap;
        margin-top: 15%;

        .bottle-left {
          order: 1;
          width: 40%;
          margin-left: 10%;

          .line-one,
          .line-two,
          .line-three,
          .line-four {
            line-height: 150%;
          }

          .line-two {
            margin-bottom: 15%;
          }
        }

        .bottle-right {
          order: 2;
          width: 40%;
          margin-right: 10%;

          .line-one,
          .line-two,
          .line-three,
          .line-four {
            line-height: 150%;
          }

          .line-two {
            margin-bottom: 15%;
          }
        }

        .bottle-middle {
          order: 3;
          margin-top: 15%;
          margin-bottom: 15%;
          width: 50%;
        }
      }

      .blurb {
        width: 85%;
        font-size: var(--subheading);
        margin-bottom: 30%;
      }

      .collage {
        margin-bottom: 30%;
      }

      .location {
        flex-wrap: wrap;
        width: 92%;

        .location-left {
          order: 1;
          width: 47%;
          margin-right: 3%;
        }

        .location-right {
          order: 2;
          width: 47%;
          margin-left: 3%;
        }

        .location-middle {
          order: 3;
          width: 100%;
          margin-top: 10%;
          margin-bottom: 20%;
          padding: 0;

          img {
            width: 100%;
          }
        }
      }

      .distillery-description {
        width: 92%;
        margin: 15% auto;
        text-align: left;
      }

      .distillery-image {
        width: 92%;
        margin: auto;
        margin-bottom: 10vh;

        img,
        .img-caption {
          width: 100%;
        }
      }
    }

    .section-two {
      .collage .foreground {
        max-width: 70%;
      }

      .bottle {
        flex-wrap: wrap;
        margin-top: 15%;

        .bottle-left {
          order: 1;
          width: 40%;
          margin-left: 10%;

          .line-one,
          .line-two,
          .line-three,
          .line-four {
            line-height: 150%;
          }

          .line-two {
            margin-bottom: 15%;
          }
        }

        .bottle-right {
          order: 2;
          width: 40%;
          margin-right: 10%;

          .line-one,
          .line-two,
          .line-three,
          .line-four {
            line-height: 150%;
          }

          .line-two {
            margin-bottom: 15%;
          }
        }

        .bottle-middle {
          order: 3;
          margin-top: 15%;
          margin-bottom: 15%;
          width: 50%;
        }
      }

      .blurb {
        width: 85%;
        font-size: var(--subheading);
        margin-bottom: 30%;
      }

      .collage {
        margin-bottom: 30%;
      }

      .location {
        flex-wrap: wrap;
        width: 92%;

        .location-left {
          order: 1;
          width: 47%;
          margin-right: 3%;
        }

        .location-right {
          order: 2;
          width: 47%;
          margin-left: 3%;
        }

        .location-middle {
          order: 3;
          width: 100%;
          margin-top: 10%;
          margin-bottom: 20%;
          padding: 0;

          img {
            width: 100%;
          }
        }
      }

      .distillery-description {
        width: 92%;
        margin: 15% auto;
        text-align: left;
      }

      .distillery-image {
        width: 92%;
        margin: auto;
        margin-bottom: 20vh;

        img,
        .img-caption {
          width: 100%;
        }
      }
    }

    .catWrap {
      .cat {
        width: 30%;
      }
    }
  }




















}