/***** BEGIN RESET *****/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}
td {
  vertical-align: top;
}

/* Make HTML 5 elements display block-level for consistent styling */
header,
nav,
article,
footer,
address {
  display: block;
}

/*-------- COLORS --------*/

/* Highlight Styles */
::-moz-selection {
  background: #000;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #000;
  color: #fff;
  text-shadow: none;
}

/*-------- BODY STYLES --------*/

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  --colour-primary: var(--light-green-1);
  --colour-primary-hover: var(--green);
  --colour-black: var(--black);
  --colour-white: var(--background);
  --colour-dark-charcoal: var(--neutral);
  --colour-light-charcoal: var(--neutral-5);
  --colour-animated-text: var(--dark-green-5);

  --colour-secondary: var(--white);
  --colour-secondary-state: var(--white-active);

  --nav-menu-lv1: var(--body-m-bold);
  --nav-menu-lv2: var(--body-s-reg);
  --nav-menu-lv3: var(--body-xs-reg);

  --page-edge: var(--spacing-4);

  --section-gap-xl: var(--spacing-7);
  --section-gap-lg: var(--spacing-6);
  --section-gap-md: var(--spacing-5);
  --section-gap-sm: var(--spacing-4);

  --page-h1: var(--heading-h1);

  --section-label: var(--body-xs-bold);
  --section-display: var(--heading-h2);

  --section-main-heading: var(--heading-h3);
  --section-main-text: var(--body-s-reg);

  --section-secondary-heading: var(--heading-h4);
  --section-secondary-text: var(--body-xs-reg);

  --section-tertiary-heading: var(--body-l-bold);
  --section-tertiary-text: var(--body-xxs-reg);

  --section-quatenary-heading: var(--body-m-bold);
  --section-quatenary-text: var(--body-xxxs-reg);
}

main {
  flex: 1;
}

p {
  font: var(--section-main-text);
}

footer {
  margin-top: auto;
  flex-shrink: 0;
}

/***** Global text link style *****/

a:link,
a:visited,
a:active {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

/* ------------------ Global Components ------------------ */
.flex-wrap-h {
  display: flex;
  gap: var(--spacing-4);
  padding: 0 var(--page-edge);
  width: 100%;
}

.flex-wrap-v {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: 0 var(--page-edge);
  width: 100%;
}

.uppercase {
  text-transform: uppercase;
}

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

.contact-page-map {
  display: flex;
  position: relative;
  overflow: hidden;
  width: var(100% + var(--spacing-3));
  min-height: 13rem;
  border-radius: var(--border-radius-s);
  border: 1px solid var(--colour-primary);

  iframe {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

.linear-gradient-left {
  mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 2%,
    rgba(0, 0, 0, 0.2) 6%,
    rgba(0, 0, 0, 0.45) 12%,
    rgba(0, 0, 0, 0.75) 18%,
    rgba(0, 0, 0, 0.95) 24%,
    black 30%,
    black 100%
  );
}

.linear-gradient-both {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 3%,
    black 97%,
    transparent 100%
  );
}

.btns {
  display: flex;
  gap: var(--spacing-2);
}

.text-break {
  width: min-content;
  word-spacing: 100vw;
  line-height: 0.9 !important;
}

.highlight {
  display: flex;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: var(--pos-bot, -1.5rem);
    top: var(--pos-top, auto);
    left: var(--pos-left, 0);
    right: var(--pos-right, auto);
    width: var(--highlight-width, 80%);
    height: var(--highlight-height, 4rem);
    z-index: -1;
    background-color: var(--colour-primary);
    border-radius: var(--highlight-border-radius, var(--border-radius-xxs));
  }
}

.subpage {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.subpage-hero {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--spacing-5);
  padding: var(--spacing-6) var(--page-edge);
  background-color: var(--white-active);
  min-height: 200px;

  h1 {
    display: flex;
    font: var(--heading-h1);
    position: relative;
    z-index: 2;
  }

  p {
    font: var(--body-l-reg);
  }

  span {
    --padding-herospan: 0 var(--spacing-2) 0 0;
    padding: var(--padding-herospan);
  }
}

.subpage-hero.highlight::after {
  --highlight-width: 10%;
  --highlight-height: 10rem;
  --pos-left: auto;
  --pos-right: 0;
  --pos-top: 0;
  --highlight-border-radius: 0 0 0 var(--border-radius-xxs);
  z-index: 1;
}

.subpage-hero span.highlight::after {
  --highlight-width: 100%;
  --highlight-height: 3.5rem;
  --pos-top: auto;
  --pos-left: 0;
  --pos-right: auto;
  z-index: -1;
}

.subpage-bottom {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-6) var(--page-edge);
  background-color: var(--colour-dark-charcoal);
  align-items: center;
  min-height: 200px;

  .subpage-bottom-top {
    display: flex;
    flex-direction: column;
    color: var(--white);

    h4 {
      font: var(--heading-h4);
    }

    span {
      font: var(--body-s-reg);
    }
  }

  .subpage-btns {
    display: flex;
  }
}

/* ============ Splide Overrides ============*/
.splide {
  visibility: visible !important;
  width: 100% !important;
  position: relative;
  overflow: hidden;

  .splide__track {
    max-width: 100dvw;
    width: 100%;
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    flex: 1;

    .splide__list {
      display: flex;
      gap: 0;
      min-height: 300px;
      max-height: 40dvh;

      .splide__slide {
        display: flex;
        max-width: 100%;
      }
    }
  }
}

.splide .splide__arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;

  .splide__arrow {
    /* position: absolute; */
    top: 0;
    bottom: 0;
    transform: none;
    /* margin: 0; */
    /* width: var(--spacing-4);
    height: var(--spacing-4);
    border: 1px solid var(--grey); */
    width: var(--spacing-2);
    height: 100%;
    opacity: 1;
    color: var(--black);
    background-color: transparent !important;
    pointer-events: auto;
    /* border: 1px solid var(--grey); */
  }
}

.splide .splide__arrow--prev {
  left: 0;
}

.splide .splide__arrow--next {
  right: 0;
}

.splide .splide__arrow:hover {
  color: var(--dark-green-5);
  /* border-color: var(--colour-primary); */
  /* box-shadow: 0 0 5px var(--colour-primary); */
}

.splide .splide__arrow svg {
  fill: currentColor;
}

.splide .splide__arrow:disabled,
.splide .splide__arrow.is-disabled {
  color: var(--colour-light-charcoal);
  cursor: auto !important;

  &:hover {
    box-shadow: none;
  }
}

.splide.is-not-overflow .splide__arrows {
  display: none;
}

.splide__pagination {
  display: none !important;
}

/* ----- Captcha Overrides ----- */
#captcha.include-captcha {
  display: none;
  flex-direction: column;
  color: var(--black) !important;
  align-items: flex-start !important;
  margin-top: var(--spacing-4) !important;

  .CaptchaPanel {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-2) !important;
    width: 100% !important;
    margin: 0 0 var(--spacing-2) 0 !important;
    text-align: left !important;
    padding: 0 !important;
  }
}

.CaptchaImagePanel,
.CaptchaMessagePanel,
.CaptchaWhatsThisPanel,
.CaptchaAnswerPanel {
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
}

#CaptchaImage {
  border-radius: var(--border-radius-s) !important;
  max-width: 200px;
}

#CaptchaAnswer {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-s);
  font: var(--body-xs-reg);
  background-color: var(--white-active);
  color: var(--black);

  &:focus {
    outline: none;
    border-color: var(--colour-primary);
    box-shadow: 0 0 0.25rem var(--colour-primary);
  }
}

.CaptchaMessagePanel,
.CaptchaWhatsThisPanel a {
  color: var(--black) !important;
  font: var(--body-xs-reg) !important;
  transition: var(--transition);
}

.CaptchaWhatsThisPanel a {
  text-decoration: underline;
  text-underline-offset: 0.15rem;

  &:hover {
    color: var(--dark-green-5) !important;
  }
}

.captcha-button {
  display: none;
  width: 100%;
}

#submit-btn {
  width: 100% !important;
}

/* ------------------ Hero ------------------ */

.hero {
  --hero-img: url(/siteart/hero-img-desktop.webp);
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  background-image: var(--hero-img);
  background-color: var(--white);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center left calc(60% + 5rem);
  height: clamp(50dvh, calc(80dvh - 2.5rem), 100dvh);
  /* height: clamp(50vh, calc(80vh - 2.5rem), 80vh); */
  max-height: 700px;
}

/* hero overlay */
/* .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
} */

.hero-left {
  --highlight-width: 80%;
  --highlight-height: 4rem;

  display: flex;
  flex-direction: column;
  padding: var(--spacing-6) var(--page-edge);
  gap: var(--spacing-5);
  z-index: 10;
  width: calc(55% + 5rem);
  /* width: 50%; */

  h1 {
    flex-direction: column;
    font: var(--heading-h1);
    color: var(--black);
  }

  p {
    font: var(--body-l-reg);
  }
}

/* ------------------ Home - Quick Links (default.htm) ------------------ */
.home-quick-links {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
  align-items: center;
  gap: var(--spacing-8);
}

.home-ql-left {
  display: flex;
  order: 1;
}

.card {
  --card-img: url(/siteart/quick-links/ql-water-tank-1.png);

  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  padding-top: var(--spacing-4);
  border-radius: var(--border-radius-s);
  border: 1px solid var(--colour-primary);
  transition: var(--transition);
  overflow: hidden;
  justify-content: space-between;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    right: 0;
    background-color: var(--white);
    opacity: 0.3;
    background-image: var(--card-img);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom -2rem right -1rem;
    z-index: -1;
  }

  .card-top {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }

  h3 {
    font: var(--heading-h5);
    color: var(--black);
    z-index: 1;
  }

  p {
    font: var(--body-s-reg);
    color: var(--black);
    z-index: 1;
  }

  .icon {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6rem;
    height: 3rem;
    border-top-left-radius: var(--border-radius-l);
    background-color: var(--colour-primary);
    color: var(--black);
    z-index: 1;
    align-items: center;
    justify-content: center;
  }

  .fa-arrow-right {
    transition: var(--transition);
  }

  &:hover {
    box-shadow: var(--box-shadow);

    .fa-arrow-right {
      transform: translate(0.2rem, 0);
    }

    &::before {
      opacity: 0.6;
    }
  }
}

.home-ql-right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  order: 2;

  .home-ql-top {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }

  h2 {
    font: var(--heading-h2);
  }

  .highlight {
    --highlight-width: 110%;
    --highlight-height: 2rem;
    --pos-bot: -0.25rem;
    display: inline;
  }

  .btns {
    width: 100%;

    button,
    a {
      width: stretch;
    }
  }
}

.home-search {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-between;
  align-items: flex-start;
  /* padding: var(--spacing-2); */
  gap: var(--spacing-2);
  width: 100%;

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

    .main-btn {
      width: 100%;
    }
  }

  .search-bar {
    display: flex;
    align-items: center;
    /* gap: var(--spacing-1); */
    border: 1px solid var(--grey);
    border-radius: var(--border-radius-l);
    background-color: var(--background);
    padding: var(--spacing-1) var(--spacing-2);
    width: 100%;
    height: 3.5rem;

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active,
    input:autofill {
      -webkit-box-shadow: 0 0 0 1000px var(--colour-secondary) inset !important;
      box-shadow: 0 0 0 1000px var(--colour-secondary) inset !important;
      -webkit-text-fill-color: var(--black) !important;
    }

    input[type="search"]::-webkit-search-cancel-button {
      /* filter: invert(0.5); */
      display: none;
    }
  }

  .search-bar .search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
  }

  .search-bar .search-icon i {
    color: var(--grey);
  }

  .search-bar input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font: var(--body-s-reg);
    color: var(--black);
    width: 100%;
    outline: none;
  }

  .search-bar input::placeholder {
    color: var(--grey);
  }

  .search-bar:focus-within {
    border-color: var(--colour-primary);
    box-shadow: 0 0 0.25rem var(--colour-primary);
  }

  /* .search-bar .mobile-active {
    display: none;
  } */

  .search-form-optionals {
    display: none;
    width: 100%;
    transform: translateY(0.25rem);
    transition-property: opacity, transform, display;
    transition-duration: 0.2s;
    transition-behavior: allow-discrete;

    select {
      flex: 1;
      min-width: 0;
      width: 100%;
      height: 3.5rem;
      border: none;
      background-color: var(--background);
      padding-left: var(--spacing-2);
      padding: var(--spacing-2);
      font: var(--body-s-reg);
      outline: none;
      appearance: none;
      color: var(--black);
      border: 1px solid var(--grey);
      border-radius: var(--border-radius-l);

      background-image: var(--chevron-icon);
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 1.5rem auto;

      &:has(option[value=""]:checked) {
        color: var(--grey);
      }

      &:first-child {
        border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);
        border-right: none;
        background-image:
          var(--chevron-icon), linear-gradient(var(--grey), var(--grey));
        background-repeat: no-repeat, no-repeat;
        background-position:
          right 5% center,
          right center;
        background-size:
          1.5rem auto,
          1.5px 50%;
      }

      &:last-child {
        border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;
        border-left: none;
      }

      &:hover {
        cursor: pointer;
      }

      /* &:focus {
        border-color: var(--colour-primary);
        box-shadow: 0 0 0.25rem var(--colour-primary);
      } */
    }

    select option {
      color: var(--black);
    }

    select option[value=""] {
      color: var(--grey);
    }

    input {
      flex: 1;
      min-width: 0;
      border: none;
      background: var(--background);
      font: var(--body-s-reg);
      color: var(--black);
      width: 100%;
      height: 3.5rem;
      outline: none;
      padding: var(--spacing-2);

      border-radius: var(--border-radius-l);
      border: 1px solid var(--grey);

      &:focus {
        border-color: var(--colour-primary);
        box-shadow: 0 0 0.25rem var(--colour-primary);
      }
    }

    input::placeholder {
      color: var(--grey);
    }

    .optionals-btm {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacing-2);
      width: 100%;
    }
  }

  .search-form-optionals.active {
    display: flex;
    opacity: 1;
    transform: translateY(0.5rem);
  }

  @starting-style {
    .search-form-optionals.active {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }
}

.search-top {
  display: flex;
  gap: var(--spacing-2);
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.filter-btn {
  border: 1px solid var(--grey);
  outline: none;
  display: flex;
  color: var(--colour-light-charcoal);
  background-color: var(--white);
  min-width: 3.5rem;
  min-height: 3.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--border-radius-l);
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  padding: 0;
  cursor: pointer;

  &:hover {
    background-color: var(--colour-secondary-state);
  }
}

/* ------------------ Home - About (default.htm) ------------------ */
.home-about {
  padding-bottom: var(--spacing-10);

  .highlight.home-about-left {
    --highlight-width: 33%;
    --highlight-height: 10rem;
    --pos-bot: -15%;
    --pos-left: calc(var(--page-edge) * -1);
    --highlight-border-radius: 0 var(--border-radius-xxs)
      var(--border-radius-xxs) 0;
  }

  .home-about-right .highlight {
    --highlight-width: 7rem;
    --highlight-height: 50%;
    --pos-bot: -25%;
  }
}

.home-about-left {
  display: flex;
  position: relative;
  width: 40%;
  align-items: flex-end;

  h2 {
    font: var(--heading-h1);
    font-size: calc(var(--font-size-h1) * 1.5);
  }

  span.highlight:after {
    display: none;
  }
}

.home-about-right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  width: 60%;

  h3 {
    font: var(--heading-h4);
  }

  .home-about-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);

    .main-btn {
      width: fit-content;
    }
  }

  .home-about-brands {
    display: flex;
    gap: var(--spacing-12);
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-6) 0;
    padding-bottom: 0;
    border-top: 1px solid var(--colour-primary);

    .brand-icons {
      display: flex;
      gap: var(--spacing-5);
      justify-content: space-between;
      align-items: center;
      width: 100%;

      .img-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }
  }
}

/* ------------------ Home - Benefits (default.htm) ------------------ */
.benefits {
  padding: var(--spacing-10) var(--page-edge);
  padding-top: var(--spacing-6);
  gap: var(--spacing-6);
  justify-content: space-between;
  align-items: center;

  h2 {
    font: var(--heading-h1);
    font-size: calc(var(--font-size-h1) * 1.5);
    text-align: right;
    order: 2;
  }

  .highlight {
    --highlight-width: 80%;
    --highlight-height: 7.5rem;
    --pos-bot: -20%;
    --pos-left: auto;
    --pos-right: calc(var(--page-edge) * -1);
    --highlight-border-radius: var(--border-radius-xxs) 0 0
      var(--border-radius-xxs);
  }
}

.benefits-left {
  display: flex;
  order: 1;
  gap: var(--spacing-3);
}

.info-card {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--spacing-4);
  border-radius: var(--border-radius-s);
  border: 1px solid var(--colour-primary);
  padding: var(--spacing-3);
  padding-top: var(--spacing-8);
  overflow: hidden;
  min-height: 200px;
  width: stretch;
  align-items: flex-start;
  justify-content: space-between;

  h3 {
    font: var(--heading-h3);
    color: var(--black);
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3rem;
    height: 3rem;
    z-index: -1;
    background-color: var(--colour-primary);
    border-bottom-right-radius: var(--border-radius-xxs);
  }
}

/* ------------------ Home - Reviews (default.htm) ------------------ */

.home-reviews {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--colour-dark-charcoal);
  padding: var(--spacing-10) var(--page-edge);
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);

  .fa-quote-left {
    display: flex;
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    font-size: 3rem;
    color: var(--colour-primary);
  }

  .fa-quote-right {
    display: flex;
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 3rem;
    color: var(--colour-primary);
  }

  .review-cards {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: var(--spacing-6);
  }

  .splide__arrows {
    display: none;
  }
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-left: var(--spacing-4);
  justify-content: space-between;
  color: var(--white);
  max-width: 300px;
  min-height: 200px;
  border-left: 1px solid var(--colour-primary);

  .fa-star {
    color: var(--colour-primary);
  }

  .review-top {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
  }

  .review-name {
    font: var(--body-xs-bold);
  }
}

/* ------------------ Footer ------------------ */
.footer {
  display: flex;
  position: relative;
  padding: var(--spacing-8) 0;
  justify-content: space-between;
  border-top: 1px solid var(--white);
  background-color: var(--black);
  color: var(--white);

  .footer-left {
    display: flex;
    flex-direction: column;
    width: 20%;
    gap: var(--spacing-4);
    padding: 0 var(--page-edge);

    .footer-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 250px;

      img {
        display: block;
        width: 100%;
        height: auto;
      }
    }

    p {
      font: var(--section-main-text);
      color: var(--white);
    }
  }

  .footer-right {
    display: flex;
    gap: var(--spacing-10);
    padding: 0 var(--page-edge);

    .footer-right-left,
    .footer-right-right {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-3);
    }

    p {
      font: var(--section-label);
      color: var(--colour-light-charcoal);
      text-transform: uppercase;
    }

    li {
      display: flex;
      align-items: center;
      gap: var(--spacing-1);
      padding-bottom: var(--spacing-1);
      font: var(--section-main-text);

      a {
        color: var(--white);
      }
    }
  }
}

.footer-right-left {
  li {
    display: flex;

    a:hover {
      color: var(--colour-primary);
    }
  }
}

.footer-right-right {
  .social {
    padding: 0;
  }

  .footer-contact {
    display: flex;
    flex-direction: column;

    .phone {
      display: flex;
      gap: var(--spacing-2);
    }

    /* span {
      display: block;
    } */

    li:nth-child(n + 3) {
      align-items: flex-start;
    }

    li:hover,
    a:hover {
      color: var(--colour-primary);
    }
  }
}

/* ------------------ About Page (about.htm) ------------------ */
.about-page {
  .subpage-hero {
    align-items: center;
    justify-content: center;
    min-height: 500px;
    height: 80vh;
    flex-direction: row;
    overflow: hidden;
    background-image: var(--about-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .img-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      max-height: 400px;
      max-width: 550px;
      overflow: hidden;
      border-radius: var(--border-radius-s);
    }

    .img-wrap:first-child {
      margin-left: calc(var(--spacing-6) * -4);
    }

    .img-wrap:last-child {
      margin-right: calc(var(--spacing-6) * -4);
    }

    p {
      text-align: center;
      font: var(--body-m-reg);
    }
  }

  .subpage-hero.highlight:after {
    display: none;
  }

  h1 {
    flex-direction: column;
    text-align: center;
    width: max-content;

    span {
      display: block;
      width: max-content;
    }
  }

  h1 .highlight:after {
    --highlight-width: 105%;
    --highlight-height: 4rem;
    --pos-top: auto;
    --pos-left: 0;
    --pos-right: auto;
  }

  .benefits {
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-6);

    .highlight {
      --highlight-height: 8rem;
      --pos-bot: -15%;
    }
  }

  .benefits-left {
    p {
      min-height: 4rem;
    }
  }

  .info-card::after {
    left: auto;
    right: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--border-radius-xxs);
  }
}

.about-hero-mid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  align-items: center;
  justify-content: center;
}

.about-page-content {
  display: flex;
  align-items: stretch;
  --product-anchor-height: 85vh;
  min-height: calc(var(--product-count, 1) * var(--product-anchor-height));

  .content-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    width: 30%;
    height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    padding-top: var(--spacing-2);
    /* justify-content: center; */

    .highlight {
      --highlight-width: 65%;
      --highlight-height: 2rem;
      --pos-right: -0.5rem;
      --pos-left: auto;
      --pos-top: auto;
      --pos-bot: -0.25rem;
    }

    h2 {
      font: var(--heading-h2);
      width: fit-content;
    }

    p {
      text-align: left;
    }

    .main-btn {
      width: fit-content;
    }
  }

  .content-right {
    display: block;
    gap: var(--spacing-4);
    width: 70%;
    height: auto;
    position: relative;
    overflow: visible;

    .product-panel-inner {
      display: flex;
      gap: var(--spacing-4);
      padding-top: var(--spacing-10);
      position: sticky;
      top: 0;
      height: 100vh;
      max-height: 800px;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
    }

    .product-images {
      position: relative;
      width: 70%;
      height: 100%;
    }

    .img-wrap {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateY(1rem);
      transition:
        opacity 0.35s ease,
        transform 0.35s ease;
    }

    /* only active image can show */
    .img-wrap.is-active {
      opacity: 1;
      transform: translateY(0);
      z-index: 1;
    }

    .img-wrap img {
      object-fit: contain;
      object-position: center;
    }

    .products {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-2);
      /* width: 30%; */
      height: 100%;
      justify-content: center;
      align-self: flex-end;

      .product-name {
        display: flex;
        width: 100%;
        align-items: center;
        gap: var(--spacing-2);
        cursor: pointer;
        opacity: 0.45;
        transition: var(--transition);

        i {
          width: 1rem;
          flex-shrink: 0;
          opacity: 0;
          transform: scale(0.75);
          transition: var(--transition);
        }

        &.is-active {
          opacity: 1;

          i {
            opacity: 1;
            transform: scale(1);
            color: var(--dark-green-5);
          }

          h3 {
            color: var(--dark-green-5);
          }
        }
      }

      .product-name:not(:has(.is-active)) h3:hover {
        color: var(--dark-green-4);
      }

      h3 {
        font: var(--heading-h4);
        width: 100%;
        color: var(--colour-black);
        transition: var(--transition);
      }
    }

    .product-scroll-anchors {
      width: 100%;
      pointer-events: none;
    }

    .product-anchor {
      width: 100%;
      height: var(--product-anchor-height);
    }
  }
}

/* ------------------ Contact Page (contact.htm) ------------------ */
.contact-page-content {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-6);
  padding: var(--spacing-6) var(--page-edge);

  a {
    color: var(--black);
    font: var(--section-main-text);
  }

  h2 {
    font: var(--heading-h2);
  }

  .highlight::after {
    --highlight-width: 105%;
    --highlight-height: 2rem;
    --pos-top: auto;
    --pos-left: 0;
    --pos-bot: -0.25rem;
    --pos-right: auto;
  }

  span {
    display: inline;
  }
}

.contact-page-left {
  display: grid;
  width: 30%;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-3);

  .contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);

    .phone,
    .location {
      display: flex;
      flex-direction: column;
    }

    .location {
      gap: var(--spacing-2);
    }

    &:last-child {
      grid-column: span 2;
    }

    a:hover {
      color: var(--dark-green-5);
    }
  }
}

.contact-page-right {
  display: flex;
  flex-direction: column;
  width: 70%;

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    width: 100%;
    flex: 1;
    min-height: 0;

    input,
    textarea {
      border: none;
      font: var(--section-main-text);
      background-color: var(--white-active);
      color: var(--black);

      &:focus {
        outline: none;
        border: none;
        background-color: var(--white-active);
      }
    }

    textarea {
      flex: 1;
      min-height: 20dvh;
      padding: 0;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active,
    input:autofill {
      -webkit-box-shadow: 0 0 0 1000px var(--white-active) inset !important;
      box-shadow: 0 0 0 1000px var(--white-active) inset !important;
      -webkit-text-fill-color: var(--black) !important;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-1);
      background-color: var(--white-active);
      padding: var(--spacing-2) var(--spacing-3);
      border-radius: var(--border-radius-s);
      flex-grow: 1;
    }
  }

  .contact-form input::placeholder,
  .contact-form textarea::placeholder,
  .contact-form label {
    color: var(--black);
    font: var(--section-label);
  }

  .contact-form .form-group:focus-within {
    outline: none;
    border-color: var(--colour-primary);
    box-shadow: 0 0 0.25rem var(--colour-primary);
  }

  .contact-form button {
    margin: 0;
  }
}

/* ------------------ Thank You Page (thankyou.htm) ------------------ */
#thank-you {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.thank-you {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);

  h1.highlight::after {
    --highlight-width: 25%;
  }

  .thank-you-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--page-edge);
    flex-grow: 1;
    min-height: 300px;

    .main-btn {
      width: fit-content;
    }
  }
}

/* ------------------ News Page (news.htm) ------------------ */
.news-page {
  .subpage-hero span {
    --padding-herospan: 0 0 0 var(--spacing-2) !important;
  }

  .subpage-hero span.highlight::after {
    --highlight-width: 105% !important;
  }
}

.news-page {
  display: flex;
  flex-direction: column;
}

.news-wrap {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-6) var(--page-edge);

  .underline-btn {
    text-align: left;
    width: fit-content;
  }

  .news-page-left.news-card {
    position: relative;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--spacing-3);
    width: 40%;
    background-image: var(--news-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--black);
    padding: var(--spacing-6) var(--page-edge);
    border-radius: var(--border-radius-s);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      border-radius: var(--border-radius-s);
      transition: var(--transition);
    }

    &:hover {
      box-shadow: var(--box-shadow);
      transform: none;

      .card-text {
        transform: translateY(-0.15rem);

        h3,
        p,
        span {
          color: var(--white);
        }
      }

      &::after {
        background: rgba(0, 0, 0, 0.35);
      }
    }

    .heading-wrap {
      display: flex;
      flex-direction: column;
    }

    h2 {
      font: var(--section-main-heading);
      color: var(--white);
      z-index: 1;
    }

    p,
    span {
      font: var(--section-main-text);
      color: var(--white);
      z-index: 1;
    }
  }

  .news-page-right {
    display: flex;
    flex-direction: column;
    width: 60%;
    gap: var(--spacing-4);
    overflow: scroll;
    overflow-x: hidden;
    padding-right: var(--spacing-2);
    max-height: 80vh;

    h3 {
      font: var(--section-secondary-heading);
      color: var(--black);
    }

    p,
    span {
      font: var(--section-secondary-text);
      color: var(--black);
    }

    .news-card {
      border: 1px solid var(--colour-secondary);
      /* padding: var(--spacing-4) var(--spacing-3); */
      border-radius: var(--border-radius-s);
      align-items: center;
    }

    .underline-btn {
      font-size: var(--body-m-reg) !important;
    }

    .card-text {
      width: 60%;
    }

    .img-wrap {
      width: 40%;
    }
  }

  .img-wrap {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius-s);
    overflow: hidden;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.3);
      transition: var(--transition);
    }
  }

  .news-card {
    display: flex;
    gap: var(--spacing-3);
    justify-content: space-between;
    flex-grow: 1;
    transition: var(--transition);

    .card-text {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-3);
      justify-content: space-between;
      transition: var(--transition);
      z-index: 1;

      .news-content p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }

    &:hover {
      transform: translateX(0.1rem);

      h3,
      p,
      span {
        color: var(--dark-green-5);
      }

      .img-wrap::after {
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }

  .news-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    color: var(--black);
  }
}

/* ------------------ Gallery Page (gallery.htm) ------------------ */

.gallery-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-6);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--spacing-3);
  align-items: stretch;
  padding: 0 var(--page-edge);
}

.gallery-grid-item {
  min-width: 0;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-s);
  aspect-ratio: 3 / 2;
  margin: 0;
  min-width: 0;
  opacity: 0.9;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

.gallery-card:hover {
  cursor: pointer;
  border: 2px solid var(--colour-primary);
  box-shadow: 0 0 0.5rem var(--colour-primary);
  opacity: 1;
}

.gallery-card:hover img,
.gallery-card:focus-within img {
  transform: scale(1.05);
  filter: saturate(1.05);
}

.medium-zoom-overlay {
  z-index: 2;
}

.medium-zoom-image--opened {
  z-index: 3;
}

/*================ MEDIA QUERY ================*/
/* Screen height */
@media only screen and (max-height: 800px) {
  .hero {
    min-height: 650px;
  }
}

/* General  Media Queries */
@media only screen and (max-height: 1000px) {
  /* .hero {
    background-size: auto 100%;
    background-position: center;
  } */
}

@media only screen and (max-width: 1275px) {
  .contact-page-left {
    width: 40%;
  }

  .contact-page-right {
    width: 60%;
  }
}

@media only screen and (max-width: 1000px) {
  .home-ql-right {
    .btns {
      flex-direction: column;
      gap: var(--spacing-2);
    }
  }
  .footer {
    /* --footer-main-text: var(--body-xs-reg); */
    flex-direction: column;
    gap: var(--spacing-8);

    .footer-left {
      width: 100%;
      order: 2;
      padding-top: var(--spacing-4);
      align-items: center;
      justify-content: center;
      text-align: center;
      border-top: 1px solid var(--white);
    }

    .footer-right {
      order: 1;

      /* .footer-right-right .footer-contact {
        span {
          display: inline-block;
        }
      } */
    }
  }

  .contact-page-left {
    width: 50%;
  }

  .contact-page-right {
    width: 50%;
  }

  .contact-page,
  .news-page,
  .gallery-page,
  .thank-you {
    .subpage-hero.highlight::after {
      --highlight-height: 5rem;
    }

    .subpage-hero span.highlight::after {
      --highlight-height: 3rem;
    }
  }
}

@media only screen and (max-width: 1024px) {
  .about-page {
    .subpage-hero {
      height: auto;
      max-height: 500px;
    }
  }

  .about-page-content {
    flex-direction: column;
    min-height: auto;

    .content-left {
      width: 100%;
      height: auto;
      position: relative;
      top: auto;

      .highlight {
        --highlight-height: 1.25rem;
      }
    }

    .content-right {
      width: 100%;
      height: auto;
      /* min-height: 80vh; */
      position: relative;
      overflow: visible;

      .product-panel-inner {
        position: relative;
        top: auto;
        height: auto;
        flex-direction: column;
      }

      .product-images {
        width: 100%;
        min-height: 300px;
      }

      .products {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        width: 100%;
        height: auto;
        gap: var(--spacing-2);

        h3 {
          font: var(--heading-h5);
          width: fit-content;
        }
        /* justify-content: flex-start; */

        .product-name {
          padding-right: var(--spacing-2);
          width: 100%;
          align-items: center;
          justify-content: center;
        }
      }

      .product-scroll-anchors {
        display: none;
      }
    }
  }

  .about-page {
    .benefits {
      flex-direction: column;

      h2 {
        order: 1;
        text-align: center;
        width: fit-content;
        word-spacing: normal;
      }

      h3 {
        width: 30% !important;
      }

      p {
        min-height: 0 !important;
        width: 70% !important;
      }

      .highlight {
        --highlight-width: 40%;
        --highlight-height: 2rem;
        --highlight-border-radius: var(--border-radius-xxs);
      }
    }
  }

  .subpage-bottom {
    flex-direction: column;
    gap: var(--spacing-6);
    text-align: center;

    .subpage-bottom-left,
    .subpage-bottom-right {
      width: 100%;
    }
  }
}

@media only screen and (max-width: 768px) {
  .subpage-hero {
    gap: var(--spacing-3);

    h1 {
      text-align: center;
      font-size: calc(var(--font-size-h1) * 1.25);
      line-height: 3rem;
    }

    h1::after,
    span::after {
      display: none;
    }

    p {
      font: var(--body-s-reg) !important;
      text-align: center;
    }
  }

  .hero {
    --hero-img: url(/siteart/hero-img-mobile.webp);

    background-position: center center;
    background-size: cover;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    height: clamp(70dvh, 100vw, 100dvh);
    padding-bottom: calc(var(--spacing-12) * 1.5);
  }

  .hero-left {
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);

    h1 {
      text-align: center;
      font-size: calc(var(--font-size-h1) * 1.25);
      line-height: 3rem;
    }

    h1::after {
      display: none;
    }

    p {
      font: var(--body-s-reg);
      text-align: center;
    }
  }

  .hero h1 {
    justify-content: center;
  }

  .home-quick-links {
    flex-direction: column;
    gap: var(--spacing-4);

    .home-ql-right {
      order: 1;
      width: 100%;
      align-items: center;
      justify-content: center;
      text-align: center;

      .highlight {
        --highlight-height: 1.5rem;
      }
    }
  }

  .home-about {
    flex-direction: column;
    border-left: 1rem solid var(--colour-primary);

    .home-about-left {
      width: 100%;

      .text-break {
        width: 100%;
        word-spacing: normal;
      }

      span {
        display: inline;
      }

      span.highlight:after {
        display: flex;

        --highlight-width: 110%;
        --highlight-height: 2rem;
        --pos-bot: -0.25rem;
        --highlight-border-radius: var(--border-radius-xxs);
      }
    }

    .highlight.home-about-left:after {
      display: none;
    }

    .home-about-right {
      width: 100%;

      .home-about-brands {
        gap: var(--spacing-6);
      }

      .highlight {
        --highlight-width: 6rem;
      }
    }
  }

  .benefits {
    flex-direction: column;

    h2 {
      order: 1;
      text-align: center;
      width: fit-content;
      word-spacing: normal;
    }

    .highlight {
      --highlight-width: 55%;
      --highlight-height: 2rem;
      --highlight-border-radius: var(--border-radius-xxs);
    }
  }

  .benefits-left {
    order: 2;
    width: 100%;
    gap: var(--spacing-2);
    flex-wrap: wrap;

    .info-card {
      flex-direction: row;
      width: 100%;
      align-items: center;
      min-height: 150px;
      padding-top: var(--spacing-4);
      justify-content: flex-start;

      h3 {
        order: 1;
        min-width: 110px;
      }
      p {
        order: 2;
      }

      &::after {
        width: 2rem;
        height: 2rem;
        left: auto;
        top: auto;
        bottom: 0;
        right: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: var(--border-radius-xxs);
      }
    }
  }

  .about-page {
    --about-img: url(/siteart/subpage/about-hero-1.jpg);

    .subpage-hero {
      color: var(--white);
      position: relative;

      .img-wrap {
        display: none;
      }

      .about-hero-mid {
        z-index: 1;
        gap: var(--spacing-3);
      }
    }

    .subpage-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
    }
  }

  .contact-page,
  .news-page,
  .gallery-page,
  .thank-you {
    .subpage-hero {
      align-items: center;
      justify-content: center;
    }

    h1 {
      text-align: center;
    }
  }

  .contact-page-content {
    flex-direction: column;
    gap: var(--spacing-6);
  }

  .contact-page-left {
    width: 100%;
  }

  .contact-page-right {
    width: 100%;
  }

  .thank-you-content {
    align-items: center !important;
    text-align: center;
  }

  .news-wrap {
    flex-direction: column;
    gap: var(--spacing-4);

    .news-page-left.news-card {
      width: 100%;
      min-height: 300px;
    }

    .news-page-right {
      width: 100%;
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }
  }
}

@media only screen and (max-width: 640px) {
  .about-page .benefits {
    h2 {
      font-size: calc(var(--font-size-h1) * 1);
    }

    h3 {
      width: 30% !important;
      min-width: 120px !important;
    }

    p {
      min-height: 0 !important;
      width: 70% !important;
    }

    .highlight {
      --highlight-width: 35%;
      --highlight-height: 1.5rem;
      --pos-bot: -0.5rem;
      --pos-right: 0;
      --pos-left: auto;
    }
  }
}

@media only screen and (max-width: 500px) {
  .news-wrap {
    padding-top: var(--page-edge);
  }

  .news-card:not(.news-page-left.news-card) {
    flex-direction: column;
    width: 100%;

    .img-wrap {
      order: 2;
    }

    .card-text {
      order: 1;
      margin-top: var(--spacing-2);
      border-top: 2px solid var(--white-active);
      padding-top: var(--spacing-2);
    }

    .img-wrap,
    .card-text {
      width: 100% !important;
    }
  }
}

@media only screen and (max-width: 485px) {
  .home-about {
    .home-about-left {
      span.highlight:after {
        display: none;
      }
    }

    .home-about-brands {
      gap: var(--spacing-4) !important;
    }

    .brand-icons {
      gap: var(--spacing-2) !important;
    }
  }

  .home-reviews {
    .fa-quote-left {
      display: none;
    }
  }
}

@media only screen and (max-width: 450px) {
  .footer {
    .footer-right {
      flex-direction: column;
      gap: var(--spacing-4);
    }
  }

  .about-page {
    .subpage-hero h1 {
      width: auto;

      span {
        width: auto;
      }
    }
  }

  .contact-page-left {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    justify-content: space-between;

    .highlight::after {
      --highlight-height: 1.25rem;
    }

    .contact-info:last-child {
      width: 100%;
    }
  }
}

@media only screen and (max-width: 441px) {
  .about-page .benefits {
    .highlight {
      --highlight-width: 45%;
      --pos-right: 25%;
    }
  }
}

@media only screen and (max-width: 400px) {
  .hero {
    --hero-img: url(/siteart/hero-img-mobile-sm.png);
    min-height: 700px;

    .btns {
      flex-direction: column;
      gap: var(--spacing-3);
      width: 100%;
    }
  }
}

@media only screen and (max-width: 385px) {
  .hero {
    height: clamp(70dvh, 100vw, 100dvh);
  }

  .hero h1 {
    margin: var(--spacing-2) 0;
    line-height: 2.5rem;
  }
}