/*
 * Theme Name: Framework Redesign 2026
 * Author: Chris at P4P
*/


:root {
  --green: #6E7C3C;
  --green-circle: #99cc69;
  --navy: #0D213B;
  --pale-pink: #FFF0EE;
  --pink: #FAE4DD;
  --cameo: #DDB1A9;
  --nutmeg: #8E5728;
  --mischka: #E2E2EA;
  --rust: #EF7B62;

  /* @link https://utopia.fyi/type/calculator?c=360,16,1.25,2560,22,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --font-size--2: clamp(0.64rem, 0.6007rem + 0.1745vw, 0.88rem);
  --font-size--1: clamp(0.8rem, 0.7509rem + 0.2182vw, 1.1rem);
  --font-size-0: clamp(1rem, 0.9386rem + 0.2727vw, 1.375rem);
  --font-size-1: clamp(1.25rem, 1.1733rem + 0.3409vw, 1.7188rem);
  --font-size-2: clamp(1.5625rem, 1.4666rem + 0.4261vw, 2.1484rem);
  --font-size-3: clamp(1.9531rem, 1.8333rem + 0.5327vw, 2.6855rem);
  --font-size-4: clamp(2.4414rem, 2.2916rem + 0.6658vw, 3.3569rem);
  --font-size-5: clamp(3.0518rem, 2.8645rem + 0.8323vw, 4.1962rem);
  --font-size-6: clamp(3.8147rem, 3.5806rem + 1.0404vw, 5.2452rem);
  --font-size-7: clamp(4.1684rem, 4.1758rem + 1.3005vw, 6.5565rem);

  /* @link https://utopia.fyi/space/calculator?c=360,16,1.2,1600,18,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-3xs: clamp(0.25rem, 0.2319rem + 0.0806vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4819rem + 0.0806vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7137rem + 0.1613vw, 0.875rem);
  --space-s: clamp(1rem, 0.9637rem + 0.1613vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4456rem + 0.2419vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9274rem + 0.3226vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8911rem + 0.4839vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8548rem + 0.6452vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.7823rem + 0.9677vw, 6.75rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1593rem + 0.4032vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3911rem + 0.4839vw, 0.875rem);
  --space-xs-s: clamp(0.75rem, 0.6411rem + 0.4839vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.8004rem + 0.8871vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.2823rem + 0.9677vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.6008rem + 1.7742vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.5645rem + 1.9355vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 3.2016rem + 3.5484vw, 6.75rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.6371rem + 1.6129vw, 2.25rem);

  --transition-time: 0.25s;
  --transition-time-anim: 1s;
  --anim-gap: 0.125s;

  --aspect-video: 16/9;

  --forma-adjust: -0.15em;

  /* Helps animate accordions in Chrome, not in Safari yet */
  /* @link https://caniuse.com/?search=interpolate-size%3A+allow-keywords */
  @supports (interpolate-size: allow-keywords) {
    interpolate-size: allow-keywords;
  }

}

* {
  /* outline: red 1px solid; */
}

h1,
h3 {
  font-family: forma-djr-banner, sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1;
}

h2 {
  font-family: forma-djr-banner, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1;
}

h1,
.h1 {
  font-size: var(--font-size-7);
  margin-top: var(--forma-adjust);
  @media screen and (max-width: 600px) {
    font-size: var(--font-size-5);
  }
}

h2,
.h2 {
  font-size: var(--font-size-6);
  margin-top: var(--forma-adjust);
  
  @media screen and (max-width: 600px) {
    font-size: var(--font-size-4);
  }
}

h3,
.h3 {
  font-size: var(--font-size-4);
  margin-top: var(--forma-adjust);
  @media screen and (max-width: 600px) {
    font-size: var(--font-size-3);
  }
}

h4,
.h4 {
  font-size: var(--font-size-2);
  margin-top: var(--forma-adjust);
  line-height: 1.33;
}

h5,
.h5 {
  font-size: var(--font-size-1);
  margin-top: var(--forma-adjust);
}



.eyebrow {
  font-size: var(--font-size--1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
}

.forma-banner-regular {
  font-family: forma-djr-banner, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em;
}

.forma-banner-medium {
  font-family: forma-djr-banner, sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.04em;
}

.forma-deck {
  font-family: forma-djr-deck, sans-serif;
  font-weight: 500;
  font-style: normal;
}


.fifty-fifty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;

  @media screen and (max-width: 1280px) {
    &:not(.header-wrapper) {
      display: flex;
      flex-direction: column;
      gap: var(--space-m);

      &.reverse {
        flex-direction: column-reverse;
      }
    }
  }
}

.threequarters-onequarter {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

.forty-sixty {
  display: grid;
  grid-template-columns: 4fr 6fr;
}

.sixty-forty {
  display: grid;
  grid-template-columns: 6fr 4fr;

  @media screen and (max-width: 960px) {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    &.reverse {
      flex-direction: column-reverse;
    }
  }
}

.thirty-seventy {
  display: grid;
  grid-template-columns: 3fr 7fr;
}

.seventy-thirty {
  display: grid;
  grid-template-columns: 7fr 3fr;

  @media screen and (max-width: 960px) {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    &.reverse {
      flex-direction: column-reverse;
    }
  }
}

.quarters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.gap-3xl {
  gap: var(--space-3xl);
}

.gap-2xl {
  gap: var(--space-2xl);
}

.gap-xl {
  gap: var(--space-xl);
}

.gap-l {
  gap: var(--space-l);
}

.gap-m {
  gap: var(--space-m);
}

.pad-l {
  padding: var(--space-l);
}

.pad-m {
  padding: var(--space-m);
}

.gap-s {
  gap: var(--space-s);
}

.eyebrow-gap {
  gap: var(--space-m);
}

.pad-s {
  padding: var(--space-s);
}

.gap-xs {
  gap: var(--space-xs);
}

.pad-xs {
  padding: var(--space-xs);
}

.balance {
  text-wrap: balance;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.circle {
  border-radius: 50%;
}

.split {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* align-items: center; */
  width: 100%;

  &.column {
    justify-content: space-between;
    display: flex;
    flex-direction: column;
  }
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.justify-end {
  justify-content: end;
}

.grow {
  flex-grow: 1;
}

.reading-width {
  max-width: 44ch;
}

.row {
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
}

body {
  font-family: forma-djr-deck, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-style: normal;
  color: var(--navy);
  background-color: var(--pink);
  font-size: var(--font-size-0);
}

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

header {
  padding: var(--space-s) var(--space-l);
  @media screen and (max-width: 800px) {
    padding: var(--space-s) var(--space-m);
  }
  
  @media screen and (max-width: 500px) {
    padding: var(--space-s) var(--space-s);
  }
  position: relative;

  .wrapper {
    .wordmark {
      img {
        height: 72px;
      }
      
      @media screen and (max-width: 800px) {
        z-index: 25;
      }
    }

    nav {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: var(--space-l);
      
      .button-wrapper {
        @media screen and (max-width: 800px) {
          margin-top: var(--space-s);
        }
        
        @media screen and (min-width: 801px) {
          margin-left: var(--space-xl);
          
          
        }
        .button {
          white-space: nowrap;
          
        }
      }

      

      ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-l);
        list-style-type: none;
        justify-content: space-between;
        width: 100%;
        max-width: 480px;
        
        .nav-button {
          @media screen and (max-width: 440px) {
            font-size: var(--font-size-2);
          }
          
          @media screen and (max-width: 440px) {
            font-size: var(--font-size-1);
          }
        }
        

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

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

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

          &.menu-locations {
            position: relative;

            #menu_locations {

              opacity: 0;
              position: absolute;
              top: 0.5em;
              left: calc(-1 * var(--space-xs));
              padding: var(--space-xs) var(--space-xs) 0;
              display: flex;
              flex-direction: column;
              width: 38ch;
              pointer-events: none;
              z-index: 15;
              transition: all var(--transition-time) ease-in-out;

              &.is-visible {
                opacity: 1;
                pointer-events: all;
                top: var(--space-xl);
              }

              article {
                a {
                  color: var(--pink);
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  border-top: 1px solid currentcolor;
                  padding: var(--space-xs) 0;
                  gap: var(--space-xs);
                  transition: all var(--transition-time) ease-in-out;

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

                  img {
                    margin: 0;
                    width: 140px
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

a.button,
input.wpcf7-form-control[type='submit'] {
  background: unset;
  text-decoration: none;
  padding: var(--space-xs) var(--space-xl);
  display: inline-block;
  width: auto;
  border: 1px solid currentcolor;
  transition: all var(--transition-time) ease-in-out;
  color: currentcolor;
  text-align: center;
  line-height: 1;

  &:hover {
    cursor: pointer;
  }
}

.bg-pink {
  color: var(--navy);
  background-color: var(--pink);

  >a.button,
  input.wpcf7-form-control[type='submit'] {
    color: var(--navy);
    border-color: var(--navy);

    &:hover {
      color: var(--pink);
      background-color: var(--navy);
      border-color: var(--navy);
    }

    &.filled {
      color: var(--pink);
      border-color: var(--navy);
      background-color: var(--navy);

      &:hover {
        color: var(--navy);
        border-color: var(--navy);
        background-color: var(--pink);
      }
    }
  }
}

.bg-pale-pink,
.bg-Occupied {
  color: var(--navy);
  background-color: var(--pale-pink);

  >a.button {
    color: var(--navy);
    border-color: var(--navy);

    &:hover {
      color: var(--pale-pink);
      background-color: var(--navy);
      border-color: var(--navy);
    }

    &.filled {
      color: var(--pale-pink);
      border-color: var(--navy);
      background-color: var(--navy);

      &:hover {
        color: var(--navy);
        border-color: var(--navy);
        background-color: var(--pale-pink);
      }
    }
  }


}

.bg-navy {
  color: var(--pink);
  background-color: var(--navy);

  >a.button {
    color: var(--pink);
    border-color: var(--pink);

    &:hover {
      color: var(--navy);
      border-color: var(--navy);
      background-color: var(--pink);
    }

    &.filled {
      color: var(--navy);
      border-color: var(--pink);
      background-color: var(--pink);

      &:hover {
        color: var(--pink);
        border-color: var(--pink);
        background-color: var(--navy);
      }
    }
  }
}



.bg-nutmeg {
  color: var(--pink);
  background-color: var(--nutmeg);

  a.button {
    color: var(--pink);
    border-color: var(--pink);

    &:hover {
      color: var(--nutmeg);
      border-color: var(--pink);
      background-color: var(--pink);
    }

    &.filled {
      color: var(--nutmeg);
      border-color: var(--pink);
      background-color: var(--pink);

      &:hover {
        color: var(--pink);
        border-color: var(--pink);
        background-color: var(--nutmeg);
      }
    }
  }
}

.bg-green {
  color: var(--pink);
  background-color: var(--green);

  a.button {
    color: var(--pink);
    border-color: var(--pink);

    &.nav-button {
      border-color: var(--green);
    }

    &:hover {
      color: var(--green);
      border-color: var(--pink);
      background-color: var(--pink);
    }

    &.filled {
      color: var(--green);
      border-color: var(--pink);
      background-color: var(--pink);

      &:hover {
        color: var(--pink);
        border-color: var(--pink);
        background-color: var(--green);
      }
    }
  }
}

.bg-cameo,
.bg-Available {
  color: var(--navy);
  background-color: var(--cameo);

  a.button:nth-of-type(odd) {
    color: var(--pink);
    border-color: var(--pink);

    &:hover {
      color: var(--cameo);
      background-color: var(--navy);
      border-color: var(--navy);
    }

    &.filled {
      color: var(--navy);
      border-color: var(--pink);
      background-color: var(--pink);

      &:hover {
        color: var(--pink);
        border-color: var(--green);
        background-color: var(--green);
      }
    }
  }

  a.button:nth-of-type(even) {
    color: var(--navy);
    border-color: var(--navy);

    &:hover {
      color: var(--cameo);
      background-color: var(--navy);
      border-color: var(--navy);
    }

    &.filled {
      color: var(--pale-pink);
      border-color: var(--navy);
      background-color: var(--navy);

      &:hover {
        color: var(--pale-pink);
        border-color: var(--green);
        background-color: var(--green);
      }
    }
  }


}

section,
footer {
  padding: var(--space-xl) var(--space-l);
  
  @media screen and (max-width: 720px) {
    padding: var(--space-l) var(--space-m);
  }
  
  @media screen and (max-width: 500px) {
    padding: var(--space-m) var(--space-s);
  }
}

footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);

  .fifty-fifty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    
    img.eye-upper {
      display: none;
    }
    
    .eye {
      .button {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
        &:hover {
          color: var(--pink);
          background-color: var(--navy);
          border-color: var(--navy);
        }
      }
    }
    
    @media screen and (max-width: 600px) {
      div.align-start.eyebrow-gap.column:has(.eye-upper) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        
        img.eye-upper {
          display: block;
          max-width: 90px;
        }
      }
      .eye {
        flex-direction: column-reverse;
        gap: var(--space-m);
        align-items: flex-start;
        
        img.eye-lower {
          display: none;
        }
        
        .button {
          width: 100%;
        }
      }
    }
  }

  .linkedin-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);

    &::after {
      content: url('data:image/svg+xml,<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22328 22V7.15615H0.289695V22H5.21889H5.22328ZM2.75649 5.13099C4.4771 5.13099 5.5437 3.98882 5.5437 2.5655C5.51298 1.11142 4.47271 0 2.78721 0C1.10172 0 0 1.10703 0 2.5655C0 4.02396 1.07099 5.13099 2.72576 5.13099H2.75649Z" fill="%23FAE4DD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.94873 22H12.8779V13.7104C12.8779 13.2667 12.9086 12.8231 13.0403 12.5068C13.3959 11.6194 14.2079 10.7013 15.5686 10.7013C17.355 10.7013 18.0661 12.0631 18.0661 14.0575V22H22.9953V13.4864C22.9953 8.92649 20.5636 6.80469 17.3199 6.80469C14.66 6.80469 13.4924 8.2939 12.8428 9.30429H12.8735V7.15173H7.94434C8.01018 8.5443 7.94434 21.9956 7.94434 21.9956L7.94873 22Z" fill="%23FAE4DD"/></g></svg>');
      margin-bottom: -0.2em;
    }
  }
  
  .subheading {
    line-height: 1.25;
    @media screen and (max-width: 600px) {
      span {
        display: block;
        
        br {
          display: none;
        }
      }
    }
  }

  .footer-logo {
    max-width: 240px;
    @media screen and (max-width: 600px) {
      max-width: 90px;
    }
  }
  
  
}

.inner {
  padding: var(--space-l) var(--space-l);
  
  @media screen and (max-width: 500px) {
    padding: var(--space-m) var(--space-m);
  }
}

.text {
  padding-top: var(--space-s);
}

section.boxed+section.boxed {
  padding-top: 0;
}

ul {
  list-style-position: outside;
  list-style-type: ">    ";
  margin-left: 1.25em;
}

ul.content {
  list-style-type: none;
}

ol {
  list-style-position: inside;
}



.availability-table {
  table {
    width: 100%;
    border-collapse: collapse;

    tr {
      border-top: 1px solid currentColor;
      border-collapse: collapse;
      /* display: grid;
         grid-template-columns: repeat(7, 1fr);
          */


      td.message {
        text-align: center;
      }

      &.bg-Occupied {

        td {
          &.workstations {
            opacity: 0;
            pointer-events: none;
          }

          &.layout {
            opacity: 0;
            pointer-events: none;
          }

          &.buttons {
            opacity: 0;
            pointer-events: none;
          }
        }
      }
    }

    th {
      /* background-color: rgba(0, 0, 0, 0.5); */
      vertical-align: bottom;
      text-align: center;
    }

    td {
      vertical-align: middle;
      /* line-height: 0.5; */
      white-space: nowrap;

      &::before {
        display: none;
      }



      &.floor-name {
        font-size: var(--font-size-1);
      }

      &.space-name {}

      &.space-name {
        line-height: 1;

        .space-name-wrapper,
        .floor-name-wrapper {
          /* font-size: var(--font-size-1); */
          display: flex;
          flex-direction: column;
          gap: var(--space-2xs);
          justify-content: flex-end;
          
        }

        .location-name:not(:empty) {
          display: none;
          @media screen and (max-width: 720px) {
            display: block;
          }
          
          text-transform: uppercase;
          letter-spacing: 0.03em;
          line-height: 1.3;

          /* @media screen and (min-width: 721px) { */
            padding-top: var(--space-2xs);
            line-height: inherit;
          /* } */
        }
        
        .location-name-desktop:not(:empty) {
          display: none;
          @media screen and (min-width: 721px) {
            display: block;
          }
        }
      }

      &.workstations {
        @media screen and (max-width: 960px) and (min-width: 721px) {
          display: none;
        }
      }

      &.availability {


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

      &.buttons {
        .buttons-inner {
          display: flex;
          flex-direction: row;
          align-items: center;
          @media screen and (min-width: 721px ) {
            justify-content: flex-end;
          }
          gap: var(--space-3xs);
          padding: 0;
        }
      }
    }

    th,
    td {
      text-align: left;
      min-width: 2rem;
      padding: var(--space-xs) var(--space-2xs);

      @media screen and (min-width: 721px ) {
        &:first-of-type {
          padding-left: var(--space-m);
        }
  
        &:last-of-type {
          padding-right: var(--space-m);
        }
  
        &::not(:first-of-type) {
          text-align: right;
        }
      }

      &.workstations {
        /* max-width: 4ch; */
      }
    }
  }
}


/* Width should be discerned by the table itself - find its breakpoint */
@media all and (max-width: 720px) {

  /* Turn table into blocks */
  .availability-table table {
    display: block;
    width: 100%;

    caption {
      font-style: normal;
      font-weight: bold;

      background-color: rgba(0, 0, 0, 0.35);
      color: #fff;
    }

    tbody,
    tr:not(.screen-reader-text),
    td {
      display: block;
      width: 100%;
    }

    tr {
      padding: var(--space-s);

      &.bg-Occupied {

        td {

          &.workstations {
            display: none;
          }

          &.layout {
            display: none;
          }

          &.buttons {
            display: none;
          }
        }
      }
    }

    th,
    td {
      padding: 0;

      &:not(:first-of-type) {
        text-align: left;
      }
      
      &:first-of-type {
        padding-bottom: var(--space-s);
      }
      &:last-of-type {
        padding-top: var(--space-s);
      }
    }

    th {}

    td {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: var(--space-xs) 0;
      inset: calc(-1 * var(--space-2xs));

      &.floor-name {
        &::before {
          /* content: ""; */
        }
      }

      &.space-name::before {
        
      }

      &.area-sqft::before {
        content: "Area: ";
      }

      &.workstations::before {
        content: "Workstations: ";
      }

      &.layout::before {
        content: "Deal Type: ";
      }

      &.availability::before {
        content: "Availability: ";
        text-transform: none;
      }

      &.message {
        text-align: left;

        &::before {
          content: "";
        }
      }
      
      &.buttons {
        display: flex;
        flex-direction: row;
        width: 100%;
        
        .buttons-inner {
          display: flex;
          flex-direction: row;
          width: 100%;
          justify-content: space-between;
          
          .button {
            /* font-weight: 700;
            letter-spacing: 0.02em; */
          }
          /* one item */
          .button:first-child:nth-last-child(1) {
          /* -or- li:only-child { */
              width: 100%;
          }
          
          /* two items */
          .button:first-child:nth-last-child(2),
          .button:first-child:nth-last-child(2) ~ .button {
              width: calc( calc( 100% - var(--space-m)) / 2 ) ;
          }
        }
      }

      &::before {
        display: inline;
        font-weight: 700;
        letter-spacing: 0.02em;
      }
    }
  }
}

.page.home {
  #hero {
    padding: 0;
    position: relative;
    margin-top: -1px;

    height: calc(100dvh - 90px);

    img {
      position: absolute;
      /* height: 100%; */
      max-height: calc(100dvh - 90px);
      bottom: 0;
      right: 0;
      z-index: 10;
    }
  }

  #intro {
    .content {
      display: flex;
      flex-direction: column;
      gap: calc( var(--space-3xl) + var(--space-3xl));

      @media screen and (max-width: 1280px) {
        gap: var(--space-3xl);
      }
      
      @media screen and (max-width: 720px) {
        gap: var(--space-l);
      }

      .upper {
        @media screen and (min-width: 600px) and (max-width: 1280px) {
          .column {
            flex-direction: row;
          }
        }
        @media screen and (max-width: 600px) {
          .align-end {
            align-items: unset;
          }
          .buttons {
            width: 100%;
            
            .button {
              width: 100%;
            }
          }
        }

        .buttons {
          .button {
            min-width: 26ch;
          }
        }
      }

      .facts {
        @media screen and (max-width: 500px) {
          grid-template-columns: 1fr 1fr;
        }
        
        .fact {
          display: flex;
          flex-direction: column;
          gap: var(--space-s);
          align-items: flex-start;

          span {
            width: 100%;
          }

          >span:first-of-type {
            border-bottom: 1px currentColor solid;
            padding-bottom: var(--space-s);

          }
        }
      }
    }
  }

  #locations {
    h2 {
      margin-bottom: var(--space-2xl);
      @media screen and (min-width: 500px) {
        margin-bottom: var(--space-l);
      }
    }

    span.h4 {
      white-space: nowrap;
    }
  }

  #spaces {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    @media screen and (max-width: 720px) {
      padding-top: var(--space-l);
      padding-bottom: var(--space-l);
    }
    @media screen and (max-width: 500px) {
      padding-top: var(--space-m);
      padding-bottom: var(--space-m);
    }
    
    .availability-table {
      table {
        .floor-name,
        .space-name-text {
          font-size: var(--font-size-1);
        }
        
        @media screen and (min-width: 721px) {
          .floor-name {
            display: none;
          }
          .space-id-full-floor {
            .floor-name {
              display: inline-block;
            }
            .space-name-text {
              display: none;
            }
          }
        }

        tr {
          padding: var(--space-s) 0;
        }
        th,
        td {

          &:first-of-type {
            padding-left: 0;
          }

          &:last-of-type {
            padding-right: 0;
          }

          .buttons-inner .button {
            
            
            &:not(.enquiry) {
              color: var(--navy);
              background-color: var(--pink);
              border-color: var(--pink);
            }

            &.enquiry {
              color: var(--pink);
              background-color: var(--navy);
              border-color: var(--navy);
            }

            &:hover {
              color: var(--pink);
              background-color: var(--green);
              border-color: var(--green);
            }
          }
        }
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xl);
      @media screen and (max-width: 720px) {
        gap: var(--space-xl);
      }
      @media screen and (max-width: 500px) {
        gap: var(--space-l);
      }
      justify-content: space-between;
      align-items: flex-start;
      padding-bottom: var(--space-xs);

      .button {
        min-width: 32ch;
        
        @media screen and (max-width: 720px) {
          width: 100%;
        }

        &:hover {
          color: var(--pink);
          background-color: var(--green);
          border-color: var(--green);
        }
      }
    }

    @media screen and (max-width: 1280px) {
      &.thirty-seventy {
        grid-template-columns: 1fr;
      }

      .content {
        flex-direction: row;
        align-items: flex-end;
      }
    }
    
    @media screen and (max-width: 720px) {
      .content {
        flex-direction: column;
        align-items: flex-start;
      }
    }

  }

  #flex {

    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    @media screen and (max-width: 720px) {
      gap: var(--space-l);
    }

    .workspaces {

      .workspace {
        
        row-gap: 0;

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

        .content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: var(--space-3xl);
          padding: var(--space-m);

          @media screen and (max-width: 1280px) {
            gap: var(--space-m);
          }
          
          @media screen and (max-width: 720px) {
            padding: var(--space-s);
          }

          .button {
            &:hover {
              color: var(--pink);
              background-color: var(--green);
              border-color: var(--green);
            }
          }

        }
      }
    }
  }


}

.page.availability {

  #intro {
    padding-bottom: 0;
    padding-top: calc(var(--space-xl) + var(--space-l));
    h1 {
      margin-bottom: var(--space-l);
    }
    
    @media screen and (max-width: 600px) {
      padding-top: calc(var(--space-l) + var(--space-m));
      h1 {
        margin-bottom: var(--space-m);
      }
    }
  }

  #search_bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--space-m);
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: var(--space-s);
    
    .button-search {
      
      &:hover {
        border-color: var(--green);
        background-color: var(--green);
        color: var(--pink);
      }
    }

    @media screen and (max-width: 720px) {
      margin-bottom: var(--space-m);
      grid-template-columns: 1fr;
      gap: var(--space-xs);
      
      .button-search {
        margin-top: var(--space-s);
      }
    }



    .drop-down {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);

      select,
      option {
        width: 100%;
        border: 0;
        min-height: var(--space-l);
        height: var(--space-l);
        border-radius: 0;
        padding: 0 var(--space-s);
        background-color: var(--pale-pink);
      }
    }
    

  }
  
  table {
    .floor-name,
    .space-name-text {
      font-size: var(--font-size-1);
    }
    
    @media screen and (min-width: 721px) {
      .floor-name {
        display: none;
      }
      .space-id-full-floor {
        .floor-name {
          display: inline-block;
        }
        .space-name-text {
          display: none;
        }
      }
    }
    
 
    
    
    
    .buttons-inner .button {
      &:not(.enquiry) {
        color: var(--navy);
        background-color: var(--pink);
        border-color: var(--pink);
      }
  
      &.enquiry {
        color: var(--pink);
        background-color: var(--navy);
        border-color: var(--navy);
      }
  
      &:hover {
        color: var(--pink);
        background-color: var(--green);
        border-color: var(--green);
      }
    }
  }
  /* Big image at bottom of page */
  #hero {
    padding: 0;
    height: 100dvh;
    
    @media screen and (max-width: 720px) {
        height: unset;
        aspect-ratio: 4/3;
    }
    
    img {
      width: 100%;
      height: 100%;
      
      object-fit: cover;
      object-position: 30% 80%;
    }
  }
  
  
}

.page.workspace {
  #intro {
    padding-top: calc(var(--space-xl) + var(--space-l));
    
    h1 {
      padding-right: var(--space-l);
    }
    
    @media screen and (max-width: 720px) {
      padding-bottom: unset;
    }
    
    @media screen and (max-width: 600px) {
      padding-top: calc(var(--space-l) + var(--space-m));
    }
  }

  #flex,
  #standard {
    .inner {
      padding: 0;


    }

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

  .workspace-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-l);
    height: 100%;
    
    @media screen and (max-width: 500px) {
      &.pad-l {
        padding: var(--space-m);
      }
    }

    .note {
      opacity: 0.65;
      font-style: italic;
      margin-top: var(--space-s);
      display: block;
    }

    .button-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xs);
      
      @media screen and (max-width: 500px) {
        grid-template-columns: 1fr;
      }
    }
    
    &:not(:has(.note)) {
      .button-wrapper {
        margin-top: var(--space-s);
      }
    }
  }

  #flex {
    .button {

      &:first-of-type {
        background-color: var(--navy);
        border-color: var(--navy);
        color: var(--pink);
      }

      &:last-of-type {
        background-color: var(--cameo);
        border-color: var(--navy);
        color: var(--navy);
      }

      &:hover {
        background-color: var(--green);
        border-color: var(--green);
        color: var(--pink);
      }
    }
  }

  #standard {
    .button {

      &:first-of-type {
        background-color: var(--pink);
        border-color: var(--pink);
        color: var(--navy);
      }

      &:last-of-type {
        background-color: var(--navy);
        border-color: var(--pink);
        color: var(--pink);
      }

      &:hover {
        background-color: var(--green);
        border-color: var(--green);
        color: var(--pink);
      }
    }
  }
}

.page.contact {
  #intro {
    padding-top: calc(var(--space-xl) + var(--space-l));
    
    .fifty-fifty {
      .h4 {
        max-width: 32ch;
      }
    }
    
    @media screen and (max-width: 600px) {
      padding-top: calc(var(--space-l) + var(--space-m));
    }
  }

  #contact.fifty-fifty {
    /* gap: var(--space-l); */

    @media screen and (max-width: 1280px) {
      padding-top: 0;
    }

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

    .contact-form {
      padding-right: var(--space-l);
      
      @media screen and (max-width: 1280px) {
        padding-right: unset;
      }

      .fifty-fifty {
        column-gap: var(--space-m);

        @media screen and (max-width: 1280px) {
          row-gap: 0;
        }
      }

      p {
        width: 100%;

        label {
          width: 100%;

          span {
            width: 100%;

            select:has(option[value="Select number of people"]:checked),
            select:has(option[value="Select building"]:checked) {
              color: #ADAEB7;
            }

            select.wpcf7-form-control.wpcf7-select,
            option,
            textarea,
            input {
              width: 100%;
              border: unset;
              min-height: var(--space-xl);
              background-color: var(--pale-pink);
              border-bottom: 1px solid var(--navy);
              /* doesn't apply to select or option */
              padding-left: var(--space-2xs); 
            }

            select.wpcf7-form-control.wpcf7-select,
            option {
              height: var(--space-xl);
              border-radius: 0;
            }

          }
        }
      }
    }
  }

  #agents {
    @media screen and (max-width: 1280px) {
      padding-top: 0;

      .fifty-fifty {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xl);
      
      @media screen and (max-width: 600px) {
        gap: var(--space-l);
      }
      
      @media screen and (max-width: 414px) {
        gap: var(--space-m);
        
        .fifty-fifty {
          grid-template-columns: 1fr;
          gap: var(--space-l);
        }
      }

      .agent {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: var(--space-s);
        align-items: flex-start;
        
        img {
          height: 72px;
          @media screen and (max-width: 600px) {
            height: 56px;
          }
        }

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

          .name {
            font-weight: 700;
          }
        }
      }
    }
  }

  #map_links {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);

    article.map-link {
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--space-l);

      position: relative;

      &.bg-nutmeg {
        h3 {
          text-shadow: 2px 2px 12px #523217;
        }
      }
      
      &.bg-navy {
        h3 {
          text-shadow: 2px 2px 12px #0D213B;
        }
      }

      a,
      h3 {
        z-index: 10;
        text-align: center;
      }
      
      @media screen and (max-width: 720px) {
        h3 {
          font-size: var(--font-size-3);
        }
      }

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        filter: grayscale(1) contrast(150%);
        transition: filter var(--transition-time) ease-in-out;
        position: absolute;
      }

      &:hover img {
        filter: grayscale(0) contrast(100%);
      }

      .color-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.75;

        transition: opacity var(--transition-time) ease-in-out;
        /* pointer-events: none; */
      }

      &:hover .color-overlay {
        opacity: 0;
      }
      
      &.bg-navy {
        .button {
          &:hover {
            border-color: var(--navy);
          }
        }
      }
      &.bg-nutmeg {
        .button {
          &:hover {
            border-color: var(--nutmeg);
          }
        }
      }
    }
  }
}

article.tease-location {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  
  .eyebrow-gap {
    margin-top: calc( -1 * var(--space-xs));
  }

  .info {
    padding-top: var(--space-s);
    border-top: 1px solid currentcolor;

    &.fifty-fifty {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      
      @media screen and (max-width: 500px) {
        grid-template-columns: 1fr;
      }
    }

    .facts {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--space-m);

      .column {
        align-items: flex-start;
        text-align: left;
      }
    }

    .button {
      align-self: flex-end;

      &:hover {
        color: var(--pink);
        background-color: var(--green);
        border-color: var(--green);
      }
    }
  }
}

.post-124-st-vincent-street,
.post-58-waterloo-street {
  #intro {
    padding-top: calc(var(--space-xl) + var(--space-l));
    h1 {
      text-wrap: balance;
      margin-bottom: var(--space-3xl);
    }
    
    img {
      width: 100%;
    }
    
    @media screen and (max-width: 720px) {
      h1 {
        margin-bottom: var(--space-l);
      }
      
      .forty-sixty {
        display: flex;
        flex-direction: column-reverse;
      } 
    }
    
    @media screen and (max-width: 600px) {
      padding-top: calc(var(--space-l) + var(--space-m));
      h1 {
        margin-bottom: var(--space-m);
      }
    }

    .facts {
      margin-top: var(--space-xl);
      
      @media screen and (max-width: 550px) {
        grid-template-columns: 1fr 1fr;
      }

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

        .fact-heading {
          font-size: var(--font-size-3);
          padding-bottom: var(--space-s);
          border-bottom: 1px solid currentcolor;
          white-space: nowrap;
        }

        span:last-of-type {
          padding-top: var(--space-s);
        }

      }
    }
  }

  #the_building {

    .info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2xl);
      
      @media screen and (max-width: 600px) {
        gap: var(--space-l);
        
        .column {
          br {
            display: none;
          }
        }
      }

      h2 {
        /* margin-bottom: var(--space-l); */
      }
      
      > .building-text {
        max-width: 32ch;
      }

      .button.filled {
        background-color: var(--navy);
        border-color: var(--navy);
        color: var(--pink);
        
        @media screen and (max-width: 600px) {
          width: 100%;
        }

        &:hover {
          background-color: var(--green);
          border-color: var(--green);
        }
      }
    }

    .availability-table {
      @media screen and (min-width: 721px) {
          tr {
            .floor-name .space-name {
              display: none;
            }
            
            > .space-name {
              
            }
          }
      }
      
      @media screen and (max-width: 720px) {
          tr {
            .floor-name .space-name {
              
            }
            
            > .space-name {
              display: none;
            }
          }
      }
      
      
      .buttons-inner .button {
        &:not(.enquiry) {
          color: var(--navy);
          background-color: var(--pink);
          border-color: var(--pink);
        }

        &.enquiry {
          color: var(--pink);
          background-color: var(--navy);
          border-color: var(--navy);
        }

        &:hover {
          color: var(--pink);
          background-color: var(--green);
          border-color: var(--green);
        }
      }
    }

    @media screen and (max-width: 1280px) {
      &.thirty-seventy {
        grid-template-columns: 1fr;
        gap: var(--space-l);
      }

      .info {
        align-items: flex-start;
        
        h2 {
          margin-bottom: unset;
        }
      }
    }
  }

  #specification {
    .info {
      display: flex;
      flex-direction: column;
      gap: var(--space-m);

      h2 {
        margin-bottom: var(--space-m);
      }

      .specification-list {
        
        /* list-style-position: inside; */
        gap: var(--space-m);
        
        @media screen and (min-width: 721px) {
          columns: 2;
        }
      }
    }
  }

  #downloads {
    padding-top: 0;

    .inner {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--space-3xl);

      .upper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        
        @media screen and (max-width: 720px) {          
          img {
              height: var(--font-size-7);
            }
          }
      }

      .downloads {
        width: 50%;

        @media screen and (max-width: 960px) {
          width: 100%;
        }

        display: flex;
        flex-direction: column;
        /* gap: var(--space-s); */

        .download {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          border-top: 1px solid currentColor;
          padding: var(--space-xs) 0;
          align-items: flex-end;


          .button.filled {

            &:hover {
              background-color: var(--navy);
              border-color: var(--navy);
            }
          }
          
          @media screen and (max-width: 600px) {
            flex-direction: column;
            gap: var(--space-s);
            
            span {
              text-align: left;
              width: 100%;
            }
            
            .button.filled {
              width: 100%;
            }
            
          }
        }
      }
    }
  }

  #neighbourhood {

    .map {
      position: relative;

      svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1576/1078;
      }

      img {
        width: 100%;
      }
    }

    /* Accordions */
    .accordion-wrapper {
      width: 100%;
    }

    .accordion {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
      margin-top: var(--space-m);

      h3 {
        text-transform: capitalize;
        font-size: var(--font-size-0);
        margin-bottom: 0.1em;
      }
    }

    details>summary {
      color: var(--black);
      list-style: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-s);
      text-transform: uppercase;



      &:hover {
        cursor: pointer;
      }

      h3 {
        margin-top: unset;
        margin-bottom: var(--forma-adjust);
      }


      div.circle {
        /* background-color: white; */
        border-radius: 50%;
        height: 1em;
        width: 1em;
        aspect-ratio: 1;
        display: block;
        z-index: 5;
        margin-left: var(--space-3xs);

        &.green {
          background-color: var(--green-circle);
        }

        &.nutmeg {
          background-color: var(--nutmeg);
        }

        &.rust {
          background-color: var(--rust);
        }
      }

      .right {
        height: 1em;
        width: 1em;
        margin: var(--space-3xs) 0;

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

        transition: transform var(--transition-time) ease-in-out;

        svg {
          max-height: 0.6em;
          height: 100%;
        }
      }

    }

    /* Add border to bottom of all summary elements except the last one */
    details:not(:last-of-type) summary {
      border-bottom: 2px solid var(--black);
    }

    /* Remove border from bottom of any summary if details is open, or if the next details is open */
    details[open] summary,
    details:has(+ details[open]) summary {
      border-bottom: unset;
    }

    /* If the previous details is open add a border to the top of this summary.
      A top border to the first details if not open */
    details[open]+details summary,
    details:not([open]):first-of-type summary {
      border-top: 2px solid var(--black);
    }

    details::details-content {
      overflow: hidden;
      height: 0;
      transition: height var(--transition-time);

      /* Enable transitioning of `content-visibility` */
      transition: height var(--transition-time), content-visibility var(--transition-time);
      transition-behavior: allow-discrete;
    }

    details[open]::details-content {
      height: auto;
    }

    details[open] summary .right {
      transform: rotate(90deg);
    }

    details>summary::-webkit-details-marker {
      display: none;
    }

    details {
      border-top: 1px solid currentcolor;
      padding: var(--space-2xs) 0;

      ol.content {
        list-style-type: decimal-leading-zero;

        li {
          span.place {
            padding-left: var(--space-3xs);
          }
        }
      }

      .content {
        list-style-type: none;
        /* list-style-position: inside; */
        margin-left: unset;


        padding: var(--space-s) 0 var(--space-s) var(--space-m);

        font-size: var(--font-size--1);

        li {
          padding: 0 var(--space-3xs) 0 calc(var(--space-2xs) + var(--space-3xs));

          /* display: flex;
               flex-direction: row;
               justify-content: space-between; */
          .time {
            float: right;
          }

          &:not(:last-child) {
            /* margin-left: 1em; */

            border-bottom: 1px solid var(--black);
          }
        }

        li:before {
          /* content: ""; */
          /* margin-left: 1em; */
        }

        li::marker {
          width: 100%;
          min-width: 2ch;
          /* font-weight: bold; */
        }
      }
    }

    details[open] summary,
    details:hover summary {
      color: var(--oat);
      background-color: var(--black);
    }

    .map-wrapper #neighbourhood_map .map-marker {
      opacity: 0;
      transition: opacity var(--transition-time) ease-in-out;
    }

    .map-wrapper:has(details[open] summary.map-marker-eat) #neighbourhood_map .map-marker-eat,
    .map-wrapper:has(details:hover summary.map-marker-eat) #neighbourhood_map .map-marker-eat {
      opacity: 1;
    }

    .map-wrapper:has(details[open] summary.map-marker-transport) #neighbourhood_map .map-marker-transport,
    .map-wrapper:has(details:hover summary.map-marker-transport) #neighbourhood_map .map-marker-transport {
      opacity: 1;
    }

    .map-wrapper:has(details[open] summary.map-marker-stay) #neighbourhood_map .map-marker-stay,
    .map-wrapper:has(details:hover summary.map-marker-stay) #neighbourhood_map .map-marker-stay {
      opacity: 1;
    }
  }

  #owner {
    padding-top: 0;
    
    .button {
      &:hover {
        color: var(--pink);
        background-color: var(--green);
        border-color: var(--green);
      }
    }

    .column {
      width: 100%;
      
      @media screen and (max-width: 720px) {
        &.gap-2xl {
          gap: var(--space-l);
        }
      }
    }

    .fifty-fifty {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      
      @media screen and (max-width: 720px) {
        grid-template-columns: 1fr;
      }

      div.owner-description {
        width: 100%;

        span {
          display: block;
          max-width: 40ch;
          font-size: var(--font-size-0);
        }
      }
    }
  }
}


#app {

  .image-wrapper {
    position: relative;

    .badge {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}

#open-misdescriptions:hover {
  cursor: pointer;
}

dialog {
  transition: opacity 1s;
  opacity: 0;

  &[open] {
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }
}

dialog {

  width: 100%;
  max-width: 720px;
  aspect-ratio: 16/11;
  height: auto;

  background-color: var(--navy);
  color: var(--pink);
  padding: var(--space-l);

  &.misdescriptions {
    aspect-ratio: unset;
    height: fit-content;

  }

  &[open] {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: flex-end;
    justify-content: center;
    /* border-radius: var(--border-radius); */
    border-width: 0;
    overflow: hidden;
  }

  .misdescriptions-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    button:focus {
      outline: 0px solid var(--green);
    }
  }

  .misdescriptions-container {
    width: 100%;
    height: auto;
    overflow: auto;
    scrollbar-color: var(--rust);

    /* For Chrome, Edge, and Safari */
    &::-webkit-scrollbar {
      width: 12px;
      /* width of the scrollbar */
    }

    &::-webkit-scrollbar-track {
      background: var(--rust);
      /* track color */
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--nutmeg);
      /* thumb color */
    }
  }

  .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(.misdescriptions[open]) {
  /* block scroll when a dialog is open */
  overflow: hidden;
}

/* MOBILE */
#toggle {
  display: none;
  z-index: 15;
}

#nav-mobile {
  display: none;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

#nav-mobile.is-visible {
  display: block;
  opacity: 1;
  pointer-events: all;

}

@media screen and (min-width: 801px) {
  #nav-mobile.is-visible {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
}

@media screen and (max-width: 800px) {
  #nav-main {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
}

.hide {
  opacity: 0;
  pointer-events: none;
  display: none;
}

.wrapper-mobile {
  display: none;
}

@media screen and (max-width: 800px) {
  .wrapper-header {
    display: none !important;
  }

  .wrapper-mobile {
    display: block;
    z-index: 15;
    position: absolute;
    top: 0;
    width: 100%;
    height: 4.5rem;

    .hdr-logo-link {
      position: absolute;
      max-width: 180px;
      width: 100%;
      z-index: 0;
      left: 50%;
      top: 4.5rem;
      transform: translate(-50%, -50%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      svg {
        width: 100%;
        max-width: 240px;
        z-index: 500;
      }
    }
  }

  #toggle,
  #toggle-close {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: var(--space-m);
    @media screen and (max-width: 500px) {
      right: var(--space-s);
    }
    /* top: calc(var(--header-half) + var(--padding-standard)); */
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    background-color: transparent;
    color: var(--off-white);
    transition: color var(--transition-time) ease-in-out;

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

  #toggle-close {
    z-index: 25;
  }

  #toggle:hover,
  #toggle-close:hover {
    cursor: pointer;
  }


  #nav-mobile {

    transition: opacity 0.125s ease-in-out;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-around;

    align-items: center;

    width: 100%;
    height: 102vh;

    z-index: 15;

    text-align: center;

    .hdr-logo-link {
      position: absolute;
      max-width: 180px;
      z-index: 500;
      left: 50%;
      top: 4.5rem;
      transform: translate(-50%, -50%);
      visibility: hidden;
      pointer-events: none;

      svg {
        width: 100%;
        max-width: 240px;
        z-index: 500;
        opacity: 0;
      }
    }

  }

  #nav-mobile ul {
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-large);
    align-items: center;
    left: 50%;
    top: 55dvh;
    transform: translate(-50%, -50%);
    position: absolute;
    margin: 0;

  }

  #nav-mobile ul li {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 32ch;
  }

  #nav-mobile ul li a {
    color: var(--off-white);
    width: 100%;

    padding: 0.5em 1.5em;
    line-height: 1.15;

    text-decoration: none;

    transition: color var(--transition-time) ease-in-out;
    white-space: nowrap;

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

    @media screen and (max-width: 440px) {
      font-size: var(--font-size-1);
    }

    font-weight: 500;
  }

  #nav-mobile ul li a:hover,
  #nav-mobile ul li.current-menu-item:not(.anchor) a {
    color: var(--cameo);
  }
  
  #nav-mobile .button-wrapper {
    position: absolute;
    /* width: 100%; */
    /* top: 90dvh; */
    top: calc( 100dvh - calc(var(--space-2xl) + var(--space-m)));
    left: var(--space-m);
    right: var(--space-m);
    @media screen and (max-width: 500px) {
    top: calc( 100dvh - calc(var(--space-2xl) + var(--space-s)));
      left: var(--space-s);
      right: var(--space-s);
    }
    .button {
      width: 100%;
      font-size: var(--font-size-2);
      
      @media screen and (max-width: 440px) {
        font-size: var(--font-size-1);
      }
    }
  }
}

/* END MOBILE */

/* Effects */

.fade-in {
  opacity: 0;
  transition: opacity var(--transition-time-anim) ease-in-out;
}

.fade-in.visible {
  opacity: 1;
}

.fade-in:nth-of-type(1) {
  transition-delay: calc(var(--anim-gap) * 1);
}

.fade-in:nth-of-type(2) {
  transition-delay: calc(var(--anim-gap) * 2);
}

.fade-in:nth-of-type(3) {
  transition-delay: calc(var(--anim-gap) * 3);
}

.fade-in:nth-of-type(4) {
  transition-delay: calc(var(--anim-gap) * 4);
}

.fade-in:nth-of-type(5) {
  transition-delay: calc(var(--anim-gap) * 5);
}

.fade-in:nth-of-type(6) {
  transition-delay: calc(var(--anim-gap) * 6);
}

.fade-in:nth-of-type(7) {
  transition-delay: calc(var(--anim-gap) * 7);
}

.fade-in:nth-of-type(8) {
  transition-delay: calc(var(--anim-gap) * 8);
}

.fade-in:nth-of-type(9) {
  transition-delay: calc(var(--anim-gap) * 9);
}

.fade-in:nth-of-type(10) {
  transition-delay: calc(var(--anim-gap) * 10);
}

.fade-in:nth-of-type(11) {
  transition-delay: calc(var(--anim-gap) * 11);
}

.fade-in:nth-of-type(12) {
  transition-delay: calc(var(--anim-gap) * 12);
}

.fade-in:nth-of-type(13) {
  transition-delay: calc(var(--anim-gap) * 13);
}

.fade-in:nth-of-type(14) {
  transition-delay: calc(var(--anim-gap) * 14);
}

.fade-in:nth-of-type(15) {
  transition-delay: calc(var(--anim-gap) * 15);
}

.fade-in:nth-of-type(16) {
  transition-delay: calc(var(--anim-gap) * 16);
}

.fade-in:nth-of-type(17) {
  transition-delay: calc(var(--anim-gap) * 17);
}

.fade-in:nth-of-type(18) {
  transition-delay: calc(var(--anim-gap) * 18);
}

.fade-in:nth-of-type(19) {
  transition-delay: calc(var(--anim-gap) * 19);
}

.fade-in:nth-of-type(20) {
  transition-delay: calc(var(--anim-gap) * 20);
}

.fade-in.not-visible {
  opacity: 0;
}