/*
 * Theme Name: RMJ 
 * Description: 2025
 * Author: Chris at P4P
*/
 
:root {
  --white: #FFFBF3;
  --lilac: #E0DFFF;
  --red: #ED1C2B;
  --dark-blue: #160E3F;

  --font-scale--2: clamp(0.7378rem, 0.7223rem + 0.0777vw, 0.8rem);
  --font-scale--1: clamp(0.8854rem, 0.8568rem + 0.1432vw, 1rem);
  --font-scale-0: clamp(1.0625rem, 1.0156rem + 0.2344vw, 1.25rem);
  --font-scale-1: clamp(1.275rem, 1.2031rem + 0.3594vw, 1.5625rem);
  --font-scale-2: clamp(1.53rem, 1.4242rem + 0.5289vw, 1.9531rem);
  --font-scale-3: clamp(1.836rem, 1.6846rem + 0.7568vw, 2.4414rem);
  --font-scale-4: clamp(2.2032rem, 1.9911rem + 1.0607vw, 3.0518rem);
  --font-scale-5: clamp(2.6438rem, 2.3511rem + 1.4636vw, 3.8147rem);
  --font-scale-6: clamp(3.1726rem, 2.7737rem + 1.9947vw, 4.7684rem);
  --font-scale-7: clamp(3.8071rem, 3.2688rem + 2.6917vw, 5.9605rem);

  --width-full: 1600px;
  --width-laptop: 1280px;
  --width-ipad: 1024px;
  --width-ipad-mini: 720px;
  --width-iphone-large: 600px;
  --width-iphone: 415px;

  --width-reading: 64ch;
  --width-heading: 80ch;
  
  --button-line-height: 1.3;

  --transition-time: 0.25s;
  --transition-time-button: 0.25s;
  --transition-time-splash: 0.5s;

  --padding-section: 6rem;
  --padding-small: 1.75rem;
  --padding-smallest: 1rem;
  --padding-standard: 3rem;
  --padding-standard-plus: 4rem;
  
  --padding-screen: 1rem;

  --gap-smallest: 0.75rem;
  --gap-small: 2rem;
  --gap: 3.5rem;
  --gap-large: 5rem;
  --gap-largest: 8rem;

  --nav-pos: 100px;
  --nav-height: 70px;
  --portfolio-start: calc(var(--nav-height) + var(--padding-standard));

  --border-radius-smallest: 0.5rem;
  --border-radius-small: 0.75rem;
  --border-radius: 1.5rem;
  --border-radius-large: 2.25rem;

  /* Duotone variables */
  --base: #584F81;
  --bg-blend: multiply;
  --fg-blend: screen;
  --foreground: #160E41;
  /* #60578C; */
}

@media screen and (max-width: 960px) {
  :root {
  --padding-section: 5rem;
  --padding-small: 1.5rem;
  --padding-smallest: 0.75rem;
  --padding-standard: 2.5rem;
  --padding-standard-plus: 3.25rem;
  
  --gap-smallest: 0.75rem;
  --gap-small: 1.5rem;
  --gap: 3rem;
  --gap-large: 4rem;
  --gap-largest: 6rem;
  }
}

@media screen and (max-width: 800px) {
  :root {
  --padding-section: 4.5rem;
  --padding-small: 1.4rem;
  --padding-smallest: 0.75rem;
  --padding-standard: 2.25rem;
  --padding-standard-plus: 3rem;
  
  --gap-smallest: 0.65rem;
  --gap-small: 1.25rem;
  --gap: 2.5rem;
  --gap-large: 3.5rem;
  --gap-largest: 5.5rem;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --padding-section: 4rem;
    --padding-small: 1.25rem;
    --padding-smallest: 0.75rem;
    --padding-standard: 2rem;
    --padding-standard-plus: 2.75rem;
    
    --gap-smallest: 0.5rem;
    --gap-small: 1rem;
    --gap: 2rem;
    --gap-large: 3rem;
    --gap-largest: 5rem;
  }
}

@media screen and (max-width: 375px) {
  :root {
    --padding-section: 3rem;
    --padding-small: 1rem;
    --padding-smallest: 0.5rem;
    --padding-standard: 1.5rem;
    --padding-standard-plus: 2rem;
    
    --gap: 1.5rem;
    --gap-large: 2.25rem;
    --gap-largest: 3.5rem;
  }
}

.darken {
  filter: brightness(0.75);
}

/* Duotone effect */
.duotone {
  background-color: var(--base);
  display: flex;
  /* flex:                1 1 100%; */
  /* height:              100%; */
  overflow: hidden;
  position: relative;
}

.duotone img,
.duotone video {
  filter: grayscale(100%) brightness(1) contrast(1) saturate(1);
  /* flex:                1 0 100%; */
  height: 100%;
  max-width: 100%;
  mix-blend-mode: var(--bg-blend);
  object-fit: cover;
  opacity: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.duotone.brighten img,
.duotone.brighten video {
  mix-blend-mode: unset;
}

.duotone::before {
  background-color: var(--foreground);
  bottom: 0;
  content: '';
  height: 100%;
  left: 0;
  mix-blend-mode: var(--fg-blend);
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  overflow: hidden;
}

.bg-lilac {
  background-color: var(--lilac);
  color: var(--dark-blue);

  svg {
    color: var(--dark-blue);
    width: 100%;
    height: 100%;
  }
}

.bg-dark-blue {
  background-color: var(--dark-blue);
  color: var(--lilac);

  svg {
    color: var(--lilac);
    width: 100%;
    height: 100%;
  }
}

.square {
  aspect-ratio: 1 !important;
}



body {
  color: var(--dark-blue);
  font-family: "tenon", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-scale--1);

  background-color: var(--white);
  background-image: url('static/images/x_pattern.svg');

  
  /* Hide horizontal scrollbars when using full-bleed */
  width: 100%;
  /* max-width:100%; */
  overflow-x: hidden;
}


@view-transition {
  navigation: auto;
}

h1 {
  font-family: "tenon", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: var(--font-scale-7);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

h2 {
  font-family: "tenon", sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-size: var(--font-scale-4);
}

.h1 {
  font-size: var(--font-scale-7);
}

.h2 {
  font-size: var(--font-scale-4);
}

h3 {
  font-family: "tenon", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-size: var(--font-scale-2);
}

.h3 {

  font-size: var(--font-scale-2);
}

h4 {
  font-family: "tenon", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: 0.02em;
  font-size: var(--font-scale-1);
}

.h4 {
  font-size: var(--font-scale-1);
}

@media screen and (max-width: 960px) {
  h1,
  .h1 {
    font-size: var(--font-scale-5);
  }
  
  h2,
  .h2 {
    font-size: var(--font-scale-4);
  }
  
  h3,
  .h3 {
    font-size: var(--font-scale-2);
  }
  
  h4,
  .h4 {
    font-size: var(--font-scale-0);
  }
}

@media screen and (max-width: 375px) {
  h1,
  .h1 {
    font-size: var(--font-scale-3);
  }
  
  h2,
  .h2 {
    font-size: var(--font-scale-2);
  }
  
  h3,
  .h3 {
    font-size: var(--font-scale-1);
  }
  
  h4,
  .h4 {
    font-size: var(--font-scale-0);
  }
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.tighten {
  letter-spacing: -0.02em;
}

.loosen {
  letter-spacing: 0.02em;
}



.bg-red {
  color: var(--white);
  background-color: var(--red);
}

.red {
  color: var(--red);
}

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

.curved-corner {
  border-radius: var(--border-radius);
}

.wrapper {
  padding: 0;
}

a {
  text-decoration: none;
}

.stratos {
  font-family: "stratos", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.button {
  font-family: "stratos", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  line-height: var(--button-line-height);
  letter-spacing: 0.02em;

  border-radius: var(--border-radius-smallest);

  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  padding: 0.5em 0.65em;
  color: var(--white);
  background-color: var(--red);
  transition: background-color var(--transition-time) ease-in-out;

  width: auto;

  &:hover {
    background-color: var(--dark-blue);
    cursor: pointer;
  }

  &.button-arrow-right {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    gap: var(--gap-smallest);

    &:after {
      content: '';
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.96546 17.4066L18.1687 9.20337L9.96545 1.00012' stroke='%23FFFAF3' stroke-width='2'/%3E%3Cpath d='M18 9.20337L0 9.20337' stroke='%23FFFAF3' stroke-width='2'/%3E%3C/svg%3E%0A");
      background-repeat: no-repeat;
      background-position: center right;
      background-size: cover;
      display: inline-flex;
      align-self: center;
      height: 1em;
      width: 1em;
    }
  }
  
  &.transparent.red {
    color: var(--red);
    background-color: transparent;
    border: 1px var(--red) solid;
    
    transition: all var(--transition-time-button) ease-in-out;
    
    &:hover {
      color: var(--dark-blue);
      border: 1px var(--dark-blue) solid;
    }
  }
  
  &.button-arrow-right-input {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    padding: 0.5em 2.75em 0.5em 0.75em !important;
    

    background-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.96546 17.4066L18.1687 9.20337L9.96545 1.00012' stroke='%23FFFAF3' stroke-width='2'/%3E%3Cpath d='M18 9.20337L0 9.20337' stroke='%23FFFAF3' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 88% 50%;
    background-size: 1em;
    display: inline-flex;
    align-self: center;
    
    &:hover {
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.96546 17.4066L18.1687 9.20337L9.96545 1.00012' stroke='%23ED1C2B' stroke-width='2'/%3E%3Cpath d='M18 9.20337L0 9.20337' stroke='%23ED1C2B' stroke-width='2'/%3E%3C/svg%3E%0A");
    }
    

  }

  &.button-download {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    gap: var(--gap-smallest);

    &:after {
      content: '';
      background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.0106163 9.33214C-0.0630983 8.85857 0.254928 8.41286 0.720383 8.33786C1.18584 8.26286 1.62391 8.58643 1.69763 9.06C2.02197 11.1064 3.06872 12.9171 4.56197 14.2136C6.02783 15.4843 7.92967 16.2557 10 16.2557C12.0703 16.2557 13.9722 15.4864 15.438 14.2136C16.9313 12.9171 17.9801 11.1064 18.3024 9.06C18.3761 8.58643 18.8142 8.26286 19.2796 8.33786C19.7451 8.41286 20.0631 8.85857 19.9894 9.33214C19.5976 11.8007 18.3403 13.98 16.548 15.5357C14.7767 17.07 12.4873 18 9.99579 18C7.50423 18 5.21487 17.07 3.44361 15.5357C1.65761 13.98 0.398145 11.8007 0.00851014 9.33214H0.0106163ZM9.14702 0.872143V10.2814L7.837 8.64857C7.54004 8.27571 7.00087 8.22 6.6344 8.52214C6.26793 8.82429 6.21317 9.37286 6.51014 9.74571L9.29866 13.2236C9.45241 13.4507 9.71146 13.6007 10.0042 13.6007C10.297 13.6007 10.556 13.4507 10.7098 13.2236L13.4983 9.74571C13.7952 9.37286 13.7405 8.82429 13.374 8.52214C13.0076 8.22 12.4684 8.27571 12.1714 8.64857L10.8614 10.2814V0.872143C10.8614 0.39 10.4781 0 10.0042 0C9.53033 0 9.14702 0.39 9.14702 0.872143Z" fill="%23FFFBF3"/></svg>');
      background-repeat: no-repeat;
      background-position: center right;
      background-size: cover;
      display: inline-flex;
      align-self: center;
      height: 1em;
      width: 1.15em !important;
    }
  }

  &.button-video {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    gap: var(--gap-smallest);

    &:after {
      content: '';
      background-image: url('data:image/svg+xml,<svg viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 0.5C4.69875 0.5 0 5.19875 0 11C0 16.8012 4.69875 21.5 10.5 21.5C16.3012 21.5 21 16.8012 21 11C21 5.19875 16.3012 0.5 10.5 0.5ZM10.5 20.03C5.5125 20.03 1.47 15.9875 1.47 11C1.47 6.0125 5.5125 1.97 10.5 1.97C15.4875 1.97 19.53 6.0125 19.53 11C19.53 15.9875 15.4875 20.03 10.5 20.03Z" fill="%23FFFBF3"/><path d="M15.605 10.8415L8.18495 6.60453C7.93103 6.46516 7.6489 6.46516 7.39498 6.60453C7.14107 6.7439 7 6.99477 7 7.27352V15.7195C7 15.9983 7.14107 16.2491 7.39498 16.3885C7.50784 16.4443 7.6489 16.5 7.78997 16.5C7.93103 16.5 8.0721 16.4721 8.18495 16.3885L15.605 12.1794C15.8589 12.0401 16 11.7892 16 11.5105C16 11.2317 15.8307 10.9808 15.605 10.8415ZM8.57994 14.3815V8.63937L13.6301 11.5105L8.57994 14.3815Z" fill="%23FFFBF3"/></svg>');
      background-repeat: no-repeat;
      background-position: center right;
      background-size: cover;
      display: inline-flex;
      align-self: center;
      height: 1em;
      width: 1em;
    }
  }

  &.button-search {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    gap: var(--gap-smallest);
    line-height: var(--button-line-height);

    &:after {
      content: '';
      background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.82812" cy="7.82843" r="4.53554" transform="rotate(45 7.82812 7.82843)" stroke="%23ED1C2B" stroke-width="2"/><line x1="10.4923" y1="11.0351" x2="15.385" y2="15.9278" stroke="%23ED1C2B" stroke-width="2"/></svg>');
      background-repeat: no-repeat;
      background-position: center right;
      background-size: cover;
      display: inline-flex;
      align-self: center;
      height: 1.25em;
      width: 1.25em;
    }
  }

  &.button-email {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    gap: var(--gap-smallest);
    line-height: var(--button-line-height);

    &:after {
      content: '';
      background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.4409 0.324707H2.55809C1.32525 0.326893 0.326288 1.32476 0.325195 2.5576V13.5724C0.327381 14.8052 1.32525 15.8042 2.55809 15.8053H19.442C20.6748 15.8031 21.6738 14.8052 21.6749 13.5724V2.5587C21.6727 1.32585 20.6748 0.326893 19.442 0.3258L19.4409 0.324707ZM1.21814 3.88445L6.68726 8.09121L1.21814 13.2368V3.88445ZM19.4409 14.9134H2.55809C2.09359 14.9134 1.66187 14.6719 1.41815 14.2751L7.40533 8.64206L9.4404 10.2083C10.4098 10.9657 11.7695 10.9657 12.7378 10.2083L14.762 8.6202L20.5852 14.2718C20.3415 14.6708 19.9087 14.9134 19.442 14.9134H19.4409ZM20.7809 13.2182L15.4702 8.0628L20.7809 3.89428V13.2182ZM20.7809 2.75871L12.187 9.5044C11.54 10.0093 10.6328 10.0082 9.98688 9.50221L1.21814 2.75761V2.5587C1.21923 1.81986 1.81926 1.21983 2.55809 1.21874H19.442C20.1819 1.21983 20.7809 1.81986 20.7819 2.5587V2.7598L20.7809 2.75871Z" fill="white" stroke="white" stroke-width="0.650306" stroke-miterlimit="10"/></svg>');
      background-repeat: no-repeat;
      background-position: center right;
      /* background-size: cover; */
      display: inline-flex;
      align-self: center;
      height: 0.825em;
      width: 1.25em;
    }
  }
}

nav {
  /* Take 2rem off the width if narrower than 1280+2rem to ensure nav is same width as all other boxed elements */
  width: 100%;

  /* max-width: var(--width-laptop); */
  height: var(--nav-height);

  top: 0;
  left: 50%;

  position: fixed;
  transform: translate(-50%, 0);
  /* border-radius: var(--border-radius-small); */
  z-index: 25;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  background-color: var(--white);

  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

  font-family: "stratos", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: 0.02em;
  
  font-size: var(--font-scale--1);
  
  
  @media screen and (max-width: 375px) {
    font-size: var(--font-scale--2);
  }

  .logo-wrapper {
    padding: var(--border-radius-small);
    height: 100%;

    display: flex;
    flex-direction: row;
    gap: var(--gap);

    align-items: center;

    img,
    .logo {
      height: 100%;
      width: auto;
      padding: 0;
    }

    .grow {
      flex-grow: 1;
    }

    .phone-number {
      white-space: nowrap;
      color: var(--dark-blue);
      transition: color var(--transition-time-button) ease-in-out;
      &:hover {
        color: var(--red);
      }

      @media screen and (max-width: 640px) {
        display: none;
      }
    }
  }

  .menu-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    gap: var(--padding-small);
    padding: 0 var(--padding-small);
    


    li {
      margin: 0;
      padding: 0;

      a {
        transition: color var(--transition-time) ease-in-out;

        &:hover {
          color: var(--red);
        }

      }

      &.current-menu-item a {
        color: var(--red);
      }
    }
  }

  .header-button {
    padding: 0 var(--padding-small);
    
    @media screen and (max-width: 480px) {
      padding: 0 var(--padding-smallest);
    }
    
    background-color: var(--red);
    color: var(--white);
    height: var(--nav-height);
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* border-top-right-radius: var(--border-radius-small);
        border-bottom-right-radius: var(--border-radius-small); */

    transition: background-color var(--transition-time) ease-in-out;

    &:hover {
      background-color: var(--dark-blue);
    }

  }

}

/* Shift the nav down if the admin bar is visible */
body.admin-bar {
  nav {
    top: 32px;
  }
}

/* PAGE Home */

#hero {
  position: relative;
  margin-top: var(--nav-height);

  h1 {
    color: var(--white);
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 100%;
    max-width: 20ch;
    line-height: 1.15;

    @media screen and (max-width: 1280px) {
      font-size: var(--font-scale-6);
    }

    @media screen and (max-width: 960px) {
      font-size: var(--font-scale-5);
    }

    @media screen and (max-width: 800px) {
      font-size: var(--font-scale-4);
    }

    @media screen and (max-width: 720px) {
      top: 50%;
    }
    
    @media screen and (max-width: 500px) {
      font-size: var(--font-scale-3);
    }
    
    @media screen and (max-width: 375px) {
    }
  }

  video {
    width: 100%;
    
    &::-webkit-media-controls-start-playback-button {
        display: none;
    }

    @media screen and (max-width: 960px) {
      object-fit: cover;
      aspect-ratio: 3/2;
    }

    @media screen and (max-width: 800px) {
      aspect-ratio: 4/3;
    }

    @media screen and (max-width: 720px) {
      aspect-ratio: 5/4;
    }

    @media screen and (max-width: 600px) {
      aspect-ratio: 1;
    }
  }

}

.home article#search_bar {
  position: absolute;
  top: 75%;
  left: 50%;
  /* Lots of fudge here, may need rewritten */
  transform: translate(calc(-50% - 3rem), -50%);
  z-index: 15;

  max-width: 1280px;

  width: 90vw;

  @media screen and (max-width: 640px) {
    top: unset;
    bottom: 0%;
    transform: unset;
    transform: translate(calc(-50% - var(--padding-standard)), 0%);
    border-radius: 0;
    width: 100%;
  }

  color: var(--white);
  background-color: var(--dark-blue);

  margin: 0 var(--padding-standard);

  #location_filter,
  #size_filter {
    background-color: var(--dark-blue);
  }

  .button {
    color: var(--white);
    background-color: var(--red);
    
    &:hover {
      background-color: var(--white);  
      color: var(--red);
    }
    &.button-search-home {
      justify-content: space-between;
      display: flex;
      flex-direction: row;
      gap: var(--gap-smallest);
      line-height: var(--button-line-height);

      &:after {
        content: '';
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.82812" cy="7.82843" r="4.53554" transform="rotate(45 7.82812 7.82843)" stroke="%23FFFBF3" stroke-width="2"/><line x1="10.4923" y1="11.0351" x2="15.385" y2="15.9278" stroke="%23FFFBF3" stroke-width="2"/></svg>');
        background-repeat: no-repeat;
        background-position: center right;
        background-size: cover;
        display: inline-flex;
        align-self: center;
        height: 1.25em;
        width: 1.25em;
      }
      
      &:hover:after {
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.82812" cy="7.82843" r="4.53554" transform="rotate(45 7.82812 7.82843)" stroke="%23ED1C2B" stroke-width="2"/><line x1="10.4923" y1="11.0351" x2="15.385" y2="15.9278" stroke="%23ED1C2B" stroke-width="2"/></svg>');
      }
      
    }
  }
}

.home article#search_bar_mobile {
  display: none;
  color: var(--white);
  background-color: var(--dark-blue);
    
  #location_filter_mobile,
  #size_filter_mobile {
    color: var(--white);
    background-color: var(--dark-blue);
  }
  
  #location_filter_mobile option,
  #size_filter_mobile option {
    color: var(--white);
    text-align: left;
    background-color: var(--dark-blue);
  }
  
  .button {
    color: var(--white);
    background-color: var(--red);
    
    &:hover {
      background-color: var(--white);  
      color: var(--red);
    }
    &.button-search-home {
      justify-content: space-between;
      display: flex;
      flex-direction: row;
      gap: var(--gap-smallest);
      line-height: var(--button-line-height);
  
      &:after {
        content: '';
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.82812" cy="7.82843" r="4.53554" transform="rotate(45 7.82812 7.82843)" stroke="%23FFFBF3" stroke-width="2"/><line x1="10.4923" y1="11.0351" x2="15.385" y2="15.9278" stroke="%23FFFBF3" stroke-width="2"/></svg>');
        background-repeat: no-repeat;
        background-position: center right;
        background-size: cover;
        display: inline-flex;
        align-self: center;
        height: 1.25em;
        width: 1.25em;
      }
      
      &:hover:after {
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.82812" cy="7.82843" r="4.53554" transform="rotate(45 7.82812 7.82843)" stroke="%23ED1C2B" stroke-width="2"/><line x1="10.4923" y1="11.0351" x2="15.385" y2="15.9278" stroke="%23ED1C2B" stroke-width="2"/></svg>');
      }
      
    }
  }
}

@media screen and (max-width: 720px) {
  .home article#search_bar {
    display: none;
  }
  .home article#search_bar_mobile {
    display: grid;
  }
}

@media screen and (max-width: 550px) {
  .home article#search_bar_mobile {
    display: flex;
  }
}

.home #intro {
  display: flex;
  flex-direction: column;
  gap: var(--padding-standard);
  align-items: flex-start;
  max-width: var(--width-laptop);
  padding: var(--padding-standard) var(--padding-standard);
  text-align: center;
  margin: 0 auto;

}

.home #managing {
  max-width: var(--width-laptop);
  margin: 0 auto;

  padding: var(--padding-section) 1rem;


  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-small);

  h3 {
    text-align: center;
    max-width: var(--width-ipad-mini);
  }

  .thumbnail {
    display: none;
  }

  .property-tease {
    transition: all var(--transition-time) ease-in-out;
    background-color: var(--lilac);
    color: var(--dark-blue);

    &:hover {
      background-color: var(--dark-blue);
      color: var(--lilac);
    }

    svg {
      color: var(--dark-blue);
      width: 100%;
      height: 100%;
    }

    &:hover svg {
      color: var(--lilac);
    }
  }
}

.full-width-image {
  margin: 0 auto;
  aspect-ratio: 16/9;

  @media screen and (max-width: 960px) {
    object-fit: cover;
    aspect-ratio: 3/2;
  }

  @media screen and (max-width: 800px) {
    aspect-ratio: 4/3;
  }

  @media screen and (max-width: 720px) {
    aspect-ratio: 5/4;
  }

  @media screen and (max-width: 600px) {
    aspect-ratio: 1;
  }

  img {
    width: 100%;
    height: 100%;
    /* border-radius: var(--border-radius-large); */
    object-fit: cover;
  }
}

.home #counters {
  max-width: var(--width-laptop);
  margin: 0 auto;

  padding: var(--padding-section) 1rem;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;

  font-family: "tenon", sans-serif;
  font-weight: 700;
  font-style: normal;


  .count-up {
    padding: 1.5rem 3rem;
    border-left: var(--red) 1px solid;

    .number {
      font-weight: 500;
      font-size: var(--font-scale-6);
      color: var(--red);
    }
  }
}


.home #spotlight {
  max-width: var(--width-laptop);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: var(--gap-small);

  padding: var(--padding-section) 1rem;
  
  @media screen and (max-width: 720px) {
      padding: 1rem 1rem var(--padding-section);
      
      h2 {
        padding-top: var(--padding-standard);
      }
  }

  .tease-unit-featured {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--gap-small);
    border-radius: var(--border-radius);
    padding: var(--padding-small);

    @media screen and (max-width: 800px) {
      display: flex;
      flex-direction: column-reverse;
    }

    .meta {
      
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      
      max-width: 100%;
      gap: var(--gap-small);
      
      
      
      @media screen and (max-width: 800px) {
        aspect-ratio: unset;
        gap: var(--gap);
      }
      
      .button-arrow-right:hover {
        color: var(--red);
        background-color: var(--white);
        &:after {
          background-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.96546 17.4066L18.1687 9.20337L9.96545 1.00012' stroke='%23ED1C2B' stroke-width='2'/%3E%3Cpath d='M18 9.20337L0 9.20337' stroke='%23ED1C2B' stroke-width='2'/%3E%3C/svg%3E%0A");
        }
      }

      .inner-wrapper {

        display: flex;
        flex-direction: column;
        gap: var(--gap-small);
        /* padding-bottom: var(--padding-section); */
        width: 100%;
      }

      img.logo {
        max-width: 200px;
        width: -webkit-fit-content;
        width: fit-content;
        
        @media screen and (max-width: 960px) {
          max-width: 180px;
        }
        
        @media screen and (max-width: 500px) {
          max-width: 120px;
        }

      }

      .shopping-centre {
        color: var(--white);
        transition: color var(--transition-time-button) ease-in-out;
        
        &:hover {
          color: var(--red);
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        width: 100%;

        span {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: var(--gap-smallest);
          padding: 0.25em 0;
          border-top: 1px white solid;
          width: 100%;
          color: var(--white);

          svg {
            height: 1.1em;
            width: 1.1em;
          }
        }
      }

      .media {
        display: flex;
        flex-direction: column;
        gap: var(--gap-smallest);
      }

    }

    .image-wrapper {
      position: relative;
      aspect-ratio: 4/3;
      container-type: inline-size;
      width: 100%;

      @media screen and (max-width: 800px) {
        aspect-ratio: 3/2;
      }

      @media screen and (max-width: 500px) {
        aspect-ratio: 1;
      }

      width: 100%;
      max-width: 100%;

      img {
        border-radius: var(--border-radius-small);
        height: 100%;
        object-fit: cover;
        width: 100%;
        /* aspect-ratio: 1; */
      }
    }
  }
}

.unit-availability {
  position: absolute;
  top: var(--gap-smallest);
  right: var(--gap-smallest);
  font-weight: 600;
  padding: 0.25em 1.25em;
  border-radius: var(--border-radius-smallest);
  z-index: 10;
  font-size: clamp(var(--font-scale--1), 3cqw, var(--font-scale-3));
}

.unit-availability.under_offer {
  color: var(--dark-blue);
  background-color: var(--white);
}

.unit-availability.let_agreed {
  color: var(--white);
  background-color: var(--dark-blue);
}

.unit-availability.to_let {
  color: var(--red);
  background-color: var(--white);
}

.unit-availability.let {
  color: var(--white);
  background-color: var(--red);
}

.home #socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-section) var(--padding-standard);
  text-align: center;
  gap: var(--gap-small);

  max-width: var(--width-heading);
  margin: 0 auto;
  
  .h3 {
    line-height: 1.4;
    letter-spacing: -0.02em;
  }

  .socials-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-small);
    
    svg {
      color: var(--dark-blue);
      transition: color var(--transition-time-button) ease-in-out;
      width: 4rem;
      &:hover {
        color: var(--red);
      }
    }
  }
}

/* END PAGE Home */

/* PAGE About Us */

.about-us {
  #hero {

    margin-top: var(--nav-height);

    h1 {
      top: 50%;
    }

    img {
      object-fit: cover;
      width: 100%;

      aspect-ratio: 5/1;

      @media screen and (max-width: 960px) {
        aspect-ratio: 3/1;
      }

      @media screen and (max-width: 800px) {
        aspect-ratio: 3/2;
      }

      @media screen and (max-width: 640px) {
        aspect-ratio: 4/3;
      }

      @media screen and (max-width: 480px) {
        aspect-ratio: 5/4;
      }
    }
  }

  #intro {
    display: flex;
    flex-direction: row;
    max-width: var(--width-laptop);
    gap: var(--padding-standard);
    margin: 0 auto;
    padding: var(--padding-standard) 1rem;

    >* {
      width: 50%;
    }
  }

  #values {
    display: flex;
    flex-direction: column;
    max-width: var(--width-laptop);
    gap: var(--padding-standard);
    margin: 0 auto;
    padding: var(--padding-standard) 1rem;

    .gallery {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      gap: var(--gap-small);

      article {
        aspect-ratio: 1;
        border-radius: var(--border-radius-small);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--gap-smallest);
        text-align: center;

        h3 {
          font-size: var(--font-scale--1);
          font-weight: 400;
        }
      }
    }
  }

  #team {
    border-radius: var(--border-radius-large);
    display: flex;
    flex-direction: column;
    max-width: var(--width-laptop);
    gap: var(--padding-standard);
    margin: var(--padding-standard) auto;
    padding: var(--padding-standard);

    #team_members {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap);

      article {
        display: flex;
        flex-direction: column;
        gap: var(--padding-small);

        color: var(--white);

        h3 {
          color: var(--lilac);
        }

        .photo {
          aspect-ratio: 1;
          max-width: 100%;
          border-radius: var(--border-radius);
          flex-grow: 0;
        }

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

          a {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            gap: 0.5em;

            svg {
              height: 1.1em;
              width: 1.1em;
            }
          }
        }

        .bio {
          padding-top: 1em;
          border-top: 1px var(--red) solid;
        }
      }
    }
  }
}

/* END PAGE About Us */

/* PAGE Portfolio */

.properties #hero {
  margin-top: var(--nav-height);

  h1 {
    top: 50%;
  }


  img {
    object-fit: cover;
    width: 100%;

    aspect-ratio: 5/1;

    @media screen and (max-width: 960px) {
      aspect-ratio: 3/1;
    }

    @media screen and (max-width: 800px) {
      aspect-ratio: 3/2;
    }

    @media screen and (max-width: 640px) {
      aspect-ratio: 4/3;
    }

    @media screen and (max-width: 480px) {
      aspect-ratio: 5/4;
    }
  }
}

.properties #portfolio {
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: var(--width-laptop);
  margin: 0 auto;
  gap: var(--padding-standard);
  padding: var(--padding-section) 0;
  
  @media screen and (max-width: 500px) {
    gap: var(--gap-small);
    padding: var(--gap-small) 0;
  }
  
  h2 {
    padding: 0 var(--padding-small);
  }

  .properties {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--padding-small);
    align-items: center;
    
    @media screen and (max-width: 500px) {
      gap: var(--gap-small);
    }

    .tease-property {
      /* max-width: 240px; */
      width: 30%;
      
      border-radius: var(--border-radius-small);
      padding: 2.5em;
      
      @media screen and (max-width: 800px) {
        width: 45%;
        padding: 1.5em;
      }
      
      @media screen and (max-width: 500px) {
        width: 45%;
        padding: 0 0 var(--gap-small);
      }

      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--padding-small);
      position: relative;

      .tease-link {
        margin-top: -1em;
        font-weight: 400;
      }

      .thumbnail {
        object-fit: cover;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        height: 100%;
        z-index: 10;
        border-radius: var(--border-radius-small);
        /* pointer-events: none; */
        transition: opacity var(--transition-time) ease-in-out;

        &:hover {
          opacity: 1;
        }
      }

    }

    .tease-property:nth-of-type(even),
    .tease-property:last-of-type {
      background-color: var(--dark-blue);
      color: var(--lilac);

      svg {
        color: var(--lilac);
      }
    }
    
    @media screen and (max-width: 480px) {
      .tease-property:last-of-type {
        background-color: var(--lilac);
        color: var(--dark-blue);
      
        svg {
          color: var(--dark-blue);
        }
      }
    }
    
    @media screen and (max-width: 800px) and (min-width: 480px) {
      .tease-property:nth-of-type(1),
      .tease-property:nth-of-type(4),
      .tease-property:nth-of-type(5) {
        background-color: var(--lilac);
        color: var(--dark-blue);
      
        svg {
          color: var(--dark-blue);
        }
      }
      
      .tease-property:nth-of-type(2),
      .tease-property:nth-of-type(3),
      .tease-property:nth-of-type(6),
      .tease-property:last-of-type {
        background-color: var(--dark-blue);
        color: var(--lilac);
      
        svg {
          color: var(--lilac);
        }
      }
    }
    
  }
}

/* END PAGE Portfolio */

/* POST Portfolio */

#portfolio_header {
  margin: var(--portfolio-start) auto var(--padding-standard);
  max-width: var(--width-laptop);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

#portfolio_main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  max-width: var(--width-laptop);
  gap: var(--gap-small);
  margin: 0 auto;

  .portfolio-main-image {
    aspect-ratio: 16/9;
    
    img {
      border-radius: var(--border-radius);
      object-fit: cover;
      height: 100%;
      width: 100%;
    }
  }
  
  @media screen and (max-width: 1120px) {
    grid-template-columns: 1fr 1fr;
    
    .portfolio-main-image {
      aspect-ratio: 4/3;
    }
  }
  
  @media screen and (max-width: 720px) {
    display: flex;
    flex-direction: column;
    
    .portfolio-main-image {
      aspect-ratio: 4/3;
    }
  }
  
  @media screen and (max-width: 600px) {
    .portfolio-main-image {
      aspect-ratio: 5/4;
    }
  }
  
  @media screen and (max-width: 480px) {
    .portfolio-main-image {
      aspect-ratio: 1;
    }
  }

  #meta {
    border-radius: var(--border-radius);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    padding: var(--padding-small);

    .shopping-centre-logo {
      width: 50%;
      height: 100%;
      max-height: 80px;
      border-radius: 0;
      
      img {
        object-fit: contain;
        object-position: left;
        height: 100%;
        width: 100%;
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-top: 0.35rem;

      > span {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap-smallest);
        padding: 0.35em 0;
        border-top: 1px var(--dark-blue) solid;
        width: 100%;

        svg {
          height: 1.1em;
          width: 1.1em;
        }
      }
    }
    
    #media {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 0.5rem;
      width: 100%;
    }

  }

}

#portfolio_text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-small);

  max-width: var(--width-laptop);
  margin: var(--padding-standard) auto var(--padding-section);
  
  @media screen and (max-width: 720px) {
    margin: var(--padding-standard) auto var(--padding-standard);
  }
  
  @media screen and (max-width: 600px) {
    display: flex;
    flex-direction: column;
    
  }
}

#portfolio_occupiers {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  /* border-radius: var(--border-radius-large); */

  padding: var(--padding-standard);

  #occupiers {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: var(--width-full);
    margin: 0 auto;
    gap: var(--gap-small);
    
    @media screen and (max-width: 800px) {
        grid-template-columns: repeat(4, 1fr);
    }
    @media screen and (max-width: 600px) {
        grid-template-columns: repeat(2, 1fr);
    }
    
    img {
      border-radius: var(--border-radius-small);
    }
  }
}

/* END POST Portfolio */

/* POST Unit */
#unit {
  margin-bottom: var(--padding-standard);
}

#unit_header {
  margin: var(--portfolio-start) auto var(--padding-standard);
  max-width: var(--width-laptop);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;

  a.link {
    color: var(--red);
    font-size: var(--font-scale-0);
    font-weight: 600;
    transition: color var(--transition-time-button) ease-in-out;
    &:hover {
      color: var(--dark-blue);
    }
  }
}

#unit_main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  max-width: var(--width-laptop);
  gap: var(--gap-small);
  margin: 0 auto;

  .unit-main-image {
    position: relative;
    aspect-ratio: 16/9;
    container-type: inline-size;
    
    img {
      object-fit: cover;
      height: 100%;
      width: 100%;
      border-radius: var(--border-radius);
    }
    
  }
  
  @media screen and (max-width: 1120px) {
    grid-template-columns: 1fr 1fr;
    
    .unit-main-image {
      aspect-ratio: 4/3;
    }
  }
  
  @media screen and (max-width: 840px) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    
  }
  
  @media screen and (max-width: 600px) {
    .unit-main-image {
      aspect-ratio: 5/4;
    }
    
  }
  
  @media screen and (max-width: 480px) {
    .unit-main-image {
      aspect-ratio: 1;
    }
  }

  #meta {
    border-radius: var(--border-radius);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    padding: var(--padding-small);

    .shopping-centre-logo {
      width: 50%;
      height: 100%;
      max-height: 80px;
      border-radius: 0;
      
      img {
        object-fit: contain;
        object-position: left;
        height: 100%;
        width: 100%;
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-top: 0.25rem;
      
      > span {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap-smallest);
        padding: 0.25em 0;
        border-top: 1px var(--dark-blue) solid;
        width: 100%;

        svg {
          height: 1em;
          width: 1em;
        }

        &.multiline {
          align-items: flex-start;
          width: 100%;

          svg {
            padding-top: 0.125em;
            height: 1.2em;
            width: 1.2em;
          }
        }
      }
    }

    #media {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 0.5rem;
      width: 100%;
    }

  }

}


dialog {
  
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16/11;
  height: auto;
  
  &.misdescriptions {
    aspect-ratio: unset;
    height: fit-content;
  }
  
  &[open] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-smallest);
    align-items: flex-end;
    justify-content: center;
    border-radius: var(--border-radius);
    border-width: 0;
    overflow: hidden;
  }
  
  .video-header,
  .misdescriptions-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  
  .misdescriptions-container {
    width: 100%;
    height: auto;
  }
  
  .video-container {
    width: 100%;
    height: auto;
    container-type: inline-size;
    aspect-ratio: 16/9;
    
    iframe {
      width: 100%;
      height: 56.25cqw;
      aspect-ratio: 16/9;
    }
  }
  &::backdrop {
    background-color: black;
    opacity: 0.55;
  }
}

body:has(.video-modal[open]),
body:has(.misdescriptions[open]) {
  /* block scroll when a dialog is open */
  overflow: hidden;
}

.force-4-3 {
  object-fit: cover;
  aspect-ratio: 4/3;
}

.split-wrapper{
  width: 100%;
  .split-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
}

/* END POST Unit */



/* PAGE Contact */

.contact #hero {
  margin-top: var(--nav-height);

  h1 {
    top: 50%;
  }

  img {
    object-fit: cover;
    width: 100%;

    aspect-ratio: 5/1;

    @media screen and (max-width: 960px) {
      aspect-ratio: 3/1;
    }

    @media screen and (max-width: 800px) {
      aspect-ratio: 3/2;
    }

    @media screen and (max-width: 640px) {
      aspect-ratio: 4/3;
    }

    @media screen and (max-width: 480px) {
      aspect-ratio: 5/4;
    }
  }
}

/* END PAGE Contact */

/* PAGE Available Units */

body.availability {
  
  #hero {

    margin-top: var(--nav-height);

    h1 {
      top: 50%;
    }

    img {
      aspect-ratio: 5/1;
      object-fit: cover;
      width: 100%;

      @media screen and (max-width: 960px) {
        aspect-ratio: 3/1;
      }

      @media screen and (max-width: 800px) {
        aspect-ratio: 3/2;
      }

      @media screen and (max-width: 640px) {
        aspect-ratio: 4/3;
      }

      @media screen and (max-width: 480px) {
        aspect-ratio: 5/4;
      }
    }
  }

}

#property_list {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  max-width: var(--width-laptop);
  margin: 0 auto;
  gap: var(--padding-standard);
  padding: var(--padding-standard) var(--padding-screen);

  .available-wrapper,
  .preview-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-small);
    width: 100%;

    @media screen and (max-width: 880px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (max-width: 540px) {
      grid-template-columns: repeat(1, 1fr);
    }

    .tease-unit {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: var(--gap-smallest);
      border-radius: var(--border-radius);
      /* Button is nested and has much smaller radius so manually accounting for that */
      border-bottom-left-radius: var(--border-radius-small);
      border-bottom-right-radius: var(--border-radius-small);
      padding: var(--padding-smallest);
      width: 100%;
      
      height: fit-content;

      .meta {
        border-radius: var(--border-radius);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;

        .inner-wrapper {
          display: flex;
          flex-direction: column;
          gap: var(--gap-smallest);
          padding-bottom: var(--padding-small);
          width: 100%;

          .name_info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .shopping-centre {
              color: var(--dark-blue);
              font-weight: 600;
              transition: color var(--transition-time-button) ease-in-out;
              
              &:hover {
                color: var(--red);
              }
            }
          }
        }

        img {
          width: auto;
          height: 100%;
          max-height: 80px;
          border-radius: 0;
        }



        .info {
          display: flex;
          flex-direction: column;
          width: 100%;

          > span {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--gap-smallest);
            padding: 0.35em 0;
            border-top: 1px var(--dark-blue) solid;
            width: 100%;
            color: var(--dark-blue);

            svg {
              height: 1.1em;
              width: 1.1em;
            }
          }
        }

        #media {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          margin-top: 0.5rem;
          width: 100%;
        }

      }

      .image-wrapper {
        position: relative;
        container-type: inline-size;
        height: 100%;
        
        img {
          border-radius: var(--border-radius-small);
        }
      }
    }
  }

  div.preview-wrapper {
    grid-template-columns: repeat(3, 1fr);
    
    @media screen and (max-width: 720px) {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      
      > * {
        max-width: 45%;
      }
    }
    
    @media screen and (max-width: 480px) {
      flex-direction: column;
      
      > * {
        max-width: 100%;
      }
    }

    
  }
}

#search_bar,
.search-bar {
  display: grid;
  grid-template-columns: 1fr 3fr 3fr 1fr;
  /* justify-content: space-between; */
  align-items: center;
  gap: 1rem;

  border-radius: var(--border-radius-small);

  color: var(--white);
  background-color: var(--red);
  padding: 1rem;

  width: 100%;

  > * {
    width: 100%;
  }

  @media screen and (max-width: 960px) {
    /* max-width: 800px; */
    gap: var(--gap-small);
    padding: var(--gap-small);
  }

  @media screen and (max-width: 800px) {
    /* max-width: 640px; */
    gap: var(--gap-smallest);
    padding: var(--gap-smallest);
  }

  @media screen and (max-width: 550px) {
    display: flex;
    flex-direction: column;
    height: unset;
    gap: var(--gap-small);
    padding: var(--gap-small);
    
  }



  .search-blurb {
    font-weight: 800;
    font-size: var(--font-scale-0);
    white-space: nowrap;
    display: flex;

    .hide-small {
      @media screen and (min-width: 550px) and (max-width: 840px) {
        display: none;
      }
    }
  }

  #location_query_arg {
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  #location_filter,
  #location_filter_mobile,
  #size_filter,
  #size_filter_mobile {
    appearance: none;
    padding: 0;
    letter-spacing: 3%;
    position: relative;
    text-align: center;
    z-index: 2;
    white-space: nowrap;
    color: var(--white);
    font-size: var(--font-size-0);
    cursor: pointer;
    border-radius: 0;
    border-width: 0;


    font-family: "tenon", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: var(--red);

    padding: 0.25em 1em;
    outline: 1px white solid;
    border-radius: var(--border-radius-smallest);

    background-image: url('./static/images/search-arrow.svg');
    background-position-x: calc(100% - 1em);
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: 15px;
  }

  #location_filter option,
  #size_filter option {
    text-align: left;
    background-color: var(--red);
  }

  .button-search {
    color: var(--red);
    background-color: var(--white);

    &:hover {
      color: var(--white);
      background-color: var(--dark-blue);

      &:after {
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.82812" cy="7.82843" r="4.53554" transform="rotate(45 7.82812 7.82843)" stroke="white" stroke-width="2"/><line x1="10.4923" y1="11.0351" x2="15.385" y2="15.9278" stroke="white" stroke-width="2"/></svg>');
        height: 1.25em;
        width: 1.25em;
      }
    }
  }
}



.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: var(--lilac);
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {

  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }

  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cubeGridScaleDelay {

  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }

  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

/* END PAGE Available Units */



footer {
  /* border-radius: var(--border-radius-large); */
  /* max-width: var(--width-full); */
  /* margin: var(--padding-small) auto 0; */
  padding: var(--padding-section) 0 0;
  background-color: var(--lilac);
  
  @media screen and (max-width: 720px) {
    padding: var(--padding-standard) 0 0;
  }

  #map_wrapper {
    display: none;
  }

  .contact-block {
    padding: var(--padding-small) var(--padding-standard);
  }
  
  #open-misdescriptions:hover {
    cursor: pointer;
  }

  #contact_wrapper {
    max-width: var(--width-laptop);
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--gap);

    >* {
      width: 50%;
    }

    @media screen and (max-width: 720px) {
      flex-direction: column;

      >* {
        width: 100%;
      }
    }



    .blurb {
      display: flex;
      flex-direction: column;
      gap: var(--gap-small);

      h2 {
        font-family: "tenon", sans-serif;
        font-weight: 500;
        font-style: normal;
        letter-spacing: -0.01;
      }

      a {
        transition: color var(--transition-time-button) ease-in-out;

        &:hover {
          color: var(--red);
        }
      }
    }

  }

  .content-block {

    #content_block_wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      column-gap: var(--gap);
      row-gap: var(--gap-largest);
      
      @media screen and (max-width: 720px) {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
      }

      max-width: var(--width-laptop);
      margin: 0 auto;
      

      .newsletter-wrapper {
        h2 {
          margin-bottom: 0.5em;
          font-size: var(--font-scale-0);
        }
                
        @media screen and (max-width: 720px) {
          grid-column: unset;
          grid-column-start: unset;
          grid-row-start: unset;
        }
        
        #sib_signup_form_2 {
          .sib_signup_box_inside_2 {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            width: 100%;
            
            .subscribe-wrapper {
              display: flex;
              flex-direction: row;
              width: 100%;
              
              p {
                margin: 0;
              }
              
              input.sib-email-area {
                border-radius: var(--border-radius-smallest);
                border: 1px solid var(--white);
                background-color: var(--white);
                padding: 0.25em 0.5em;
                width: 100%;
              }
              
              input.sib-default-btn {
                  font-family: "stratos", sans-serif;
                  font-weight: 500;
                  font-style: normal;
                  text-transform: uppercase;
                  line-height: var(--button-line-height);
                  letter-spacing: 0.02em;
                  
                  border-radius: var(--border-radius-smallest);
                  outline: none;
                  border-width: 0;
                  border-style: solid;
                  
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  align-self: flex-end;
                  
                  padding: 0.5rem 0.75rem;
                  color: var(--white);
                  transition: background-color var(--transition-time) ease-in-out, color var(--transition-time) ease-in-out;
                  width: auto;
                  
                  gap: var(--gap-smallest);
                  margin-left:  0.5rem;
                  
                  &:hover {
                    color: var(--red);
                    background-color: var(--white);
                  }
              }
              
              @media screen and (min-width: 721px) and (max-width: 960px) {
                flex-direction: column;
                gap: 0.5rem;
                
                input.sib-default-btn {
                  width: 100%;
                  margin-left: unset;
                }
                
              }
            }
          }
        }
      }
      
      .logo-wrapper {
        max-width: 110px;
        
        align-content: flex-end;
        
        @media screen and (max-width: 720px) {
          
          grid-column: unset;
          grid-column-start: 1;
          grid-row-start: 1;
        }
      }
      
      .details {
        display: flex;
        flex-direction: row;
        gap: var(--gap-small);
        width: 100%;
        justify-content: space-between;
        
        @media screen and (max-width: 375px) {
          flex-direction: column;
        }
      
        article {
          display: flex;
          flex-direction: column;
      
          h2 {
            margin-bottom: 0.5em;
            font-size: var(--font-scale-0);
          }
      
          a {
            text-decoration: none;
            white-space: nowrap;
            color: var(--white);
      
            &:hover {
              color: var(--lilac);
            }
          }
        }
      }

      .policies {
        display: flex;
        flex-direction: row;
        gap: var(--gap);
        align-items: flex-end;
        
        @media screen and (max-width: 720px) {

        }
      }
    }

    z-index: 5;
    /* max-width: var(--width-laptop); */


    padding: var(--padding-standard);



    

    @media screen and (max-width: 1080px) {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--gap-large);

      .details {
        justify-content: space-between;
        width: 353px;
      }
    }

    @media screen and (max-width: 500px) {
      align-items: center;

      .details {
        width: unset;
        gap: var(--gap-small);
        flex-direction: column;
        width: 236px;
      }
    }
  }

}

body.contact #map_wrapper {
  display: block;

  background-color: var(-lilac);
  max-width: var(--width-laptop);
  margin: 0 auto var(--padding-standard);

  #map {
    height: 0px;
    padding-bottom: 40%;
    width: 100%;
  }
}

/* Contact form styling */

.wpcf7 form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  p {
    width: 100%;
  }
}

.wpcf7 form label,
.wpcf7 form input,
.wpcf7 form textarea {
  width: 100%;
  min-height: 2rem;
}

.wpcf7 form input,
.wpcf7 form textarea {
  border-radius: var(--border-radius-smallest);
  border: 1px solid var(--dark-blue);
  background-color: var(--lilac);
  padding: 0.25em 0.5em;
}

span.wpcf7-not-valid-tip {
  font-family: 'Rational', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-weight: normal;
  font-size: var(--font-size--1);
  text-align: center;
  line-height: 1.6;
}

.wpcf7-list-item-label {
  font-family: 'Rational', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-weight: normal;
  font-size: var(--font-size--1);
}

input.wpcf7-submit.wpcf7-form-control {
  font-family: "stratos", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  line-height: var(--button-line-height);
  letter-spacing: 0.02em;

  border-radius: var(--border-radius-smallest);
  outline: none;
  border-width: 0;
  border-style: solid;

  display: flex;
  flex-direction: row;
  justify-content: space-between;

  align-self: flex-end;

  color: var(--white);
  background-color: var(--dark-blue);
  transition: background-color var(--transition-time) ease-in-out;

  width: auto;

  gap: var(--gap-smallest);
  margin-left: auto;

  justify-content: space-between;
  display: flex;
  flex-direction: row;
  padding: 0.5em 2.75em 0.5em 0.75em !important;
  
  
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.96546 17.4066L18.1687 9.20337L9.96545 1.00012' stroke='%23FFFAF3' stroke-width='2'/%3E%3Cpath d='M18 9.20337L0 9.20337' stroke='%23FFFAF3' stroke-width='2'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 88% 50%;
  background-size: 1em;
}

input.wpcf7-submit.wpcf7-form-control:hover {
  background-color: var(--red);
  cursor: pointer;
}

.wpcf7-checkbox {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.wpcf7-list-item label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2rem;
  color: var(--dark-blue);
}

.wpcf7-response-output {
  text-align: center;
  border-radius: 25px;
}

.wpcf7-text::placeholder,
.wpcf7-textarea::placeholder {
  color: darkgray;
  text-align: left;
  font-size: var(--font-size--2);
}

/* Default pages */

div.content-wrapper {
  max-width: var(--width-laptop);
  margin: var(--portfolio-start) auto var(--padding-standard);
  padding: 0 var(--padding-standard);
}

/* Hide recaptcha badge */
.grecaptcha-badge {
  display: none !important;
}