/*
Theme Name: Peyton Group
Author: Foresite Group
Author URI: https://foresitegrp.com
Version: 1.0

font-family: "Inter", sans-serif;
font-family: "Poppins", sans-serif;
[ExtraLight: 200, Regular: 400, Medium: 500, SemiBold: 600, Bold: 700]
*/

:root {
  --black: #000000;
  --white: #FFFFFF;
  --cream: #F7F5EF;
  --beige: #CBC4A6;
  --gold: #B89B5E;
  --lightgreen: #A9BFA8;
  --green: #295235;
  --darkgreen: #1F2A24;
  --olive: #7A8F6A;
  --orange: #C26D4F;
  --gray: #BCBFBD;
  --lightgray: #D9D9D9;

  --site-width-wide: 1340px;
  --site-width: 1120px;
  --toggle-width: 44px;
  --toggle-height: 44px;
  --toggle-bar-height: 0.3rem;
  --toggle-color: var(--darkgreen);

  --download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21l-8-9h6v-12h4v12h6l-8 9zm9-1v2h-18v-2h-2v4h22v-4h-2z'/%3E%3C/svg%3E");

  --email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m-.4 4.25l-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25a.85.85 0 1 1 .9-1.44L12 11l6.7-4.19a.85.85 0 1 1 .9 1.44'/%3E%3C/svg%3E");

  --phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
}

HTML { scroll-behavior: smooth; }

BODY {
  margin: 0; padding: 0; background-color: var(--white); color: var(--black);
  font-family: "Inter", sans-serif; font-weight: 400; font-size: 1rem;
  line-height: 1;
}

IMG { border: 0; max-width: 100%; height: auto; }

A {
  color: var(--green); text-decoration: none; transition: all 0.2s;
  overflow-wrap: anywhere;

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

  &.button {
    display: inline-block; border-radius: 1.2em; padding: 0.7em 1.2em;
    box-sizing: border-box; background-color: var(--green); color: var(--white);
    font-size: 1.25rem; line-height: 1; font-weight: 700; text-align: center;
    min-width: 10em;

    &:hover { background-color: var(--orange); color: var(--white); }

    &.white {
      background-color: var(--cream); color: var(--darkgreen);
      &:hover { background-color: var(--orange); color: var(--cream); }
    }

    &.outline {
      border: 3px solid var(--cream); background-color: rgba(255,255,255,0.1);
      backdrop-filter: blur(20px); padding: calc(0.7em - 3px) calc(1.2em - 3px);
      color: var(--cream);

      &:hover { background-color: var(--cream); color: var(--darkgreen);}
    }
  }
}

H1, H2, H3, H4 {
  margin: 0; font-family: "Poppins", sans-serif; font-weight: 400; line-height: 1;

  &:is(H2) { font-size: 2.5rem; }
  &:is(H3) { font-size: 1.875rem; font-weight: 500; }
  &:is(H4) { font-size: 1.25rem; }

  SPAN { display: inline-block; color: var(--gold); font-weight: 600; }
}

UL, OL { margin: 0 0 0 0.5em; padding: 0 0 0 0.5em; }

.site-width-wide {
  width: var(--site-width-wide); margin: 0 auto;
  @media (max-width: 1415px) { & { width: 96%; } }
}

.site-width {
  width: var(--site-width); margin: 0 auto;
  @media (max-width: 1150px) { & { width: 96%; } }
}

/* HEADER */
HEADER {
  position: sticky; top: 0; z-index: 9999; background: var(--white);

  BODY.scroll & { box-shadow: 0 0 1.5rem 0 rgba(0,0,0,0.25); }

  SECTION { display: flex; justify-content: space-between; align-items: center; }
}

#logo {
  margin: 24.62px 0;

  @media (max-width: 750px) { & { margin: 0.75rem 0; } }

  IMG { width: 168px; }
}

#toggle-menu {
  display: none;

  + LABEL {
    position: relative; display: none; cursor: pointer;
    width: var(--toggle-width); height: var(--toggle-height);
    background: linear-gradient(transparent, transparent calc(var(--toggle-height) / 2 - (var(--toggle-bar-height) / 2)), var(--toggle-color) var(--toggle-bar-height), var(--toggle-color) calc(var(--toggle-height) / 2 + (var(--toggle-bar-height) / 2)), transparent calc(var(--toggle-height) / 2 + (var(--toggle-bar-height) / 2)), transparent); transition: all 0.3s ease-in-out;

    @media (max-width: 750px) { & { display: block; margin-left: auto; } }

    &:before, &:after {
      content: ""; width: 100%; height: var(--toggle-bar-height);
      background: var(--toggle-color); position: absolute;
      top: calc(50% - (var(--toggle-bar-height) * 2.5)); left: 0;
      transition: all 0.15s ease-in-out;
    }

    &:after { top: calc(50% + (var(--toggle-bar-height) * 1.5)); }

    + NAV {
      @media (max-width: 750px) { & {
        position: absolute; top: -9999999px; left: 0; width: 100%;
        background: rgba(255,255,255,0.9); padding-bottom: 1rem;
        box-shadow: 0 0.75rem 0.75rem 0 rgba(0,0,0,0.1);
      } }

      UL {
        display: flex; justify-content: flex-end; gap: 0 2em; margin: 0; padding: 0;
        list-style-type: none; font-weight: 700; font-size: 1.25rem; line-height: 1;

        LI {
          position: relative;
          &:hover A { color: var(--orange); }
        }

        @media (max-width: 1000px) { & { gap: 0 3.5vw; font-size: 2vw; } }
        @media (max-width: 750px) { & {
          flex-direction: column; font-size: 1.75rem; line-height: 1;
          text-align: center;
          
          A { display: block; padding: 0.25em 2%; }
        } }

        UL {
          position: absolute; top: 100%; left: 0; flex-direction: column;
          display: none; font-size: 80%; padding: 0.25em 0;

          @media (max-width: 750px) { & {
            display: flex; position: static; padding: 0; font-size: 100%;
            background: transparent; box-shadow: none;
          } }

          LI:hover & { display: block; }

          A {
            display: block; padding: 0.25em 0; white-space: nowrap;

            LI:hover UL & {
              color: var(--darkgreen);
              &:hover { color: var(--orange); }
            }
          }
        }
      }
    }
  }

  &:checked + LABEL {
    background: transparent;

    &:before, &:after { top: 50%; translate: 0 -50%; rotate: 45deg; }

    &:after { rotate: -45deg; }

    + NAV { top: 100%; }
  }
}

.menu-buttons-container {
  UL {
    display: flex; justify-content: flex-end; align-items: center; gap: 0 2em;
    margin: 0; padding: 0; list-style-type: none; font-weight: 700;
    font-size: 1.25rem; line-height: 1;

    A {
      display: block; border-radius: 1.2em; padding: 0.7em 1.2em;
      background: var(--orange); color: var(--white);

      &:hover { background: var(--darkgreen); }
    }

    @media (max-width: 1000px) { & { font-size: 1.6vw; } }
  }

  @media (max-width: 750px) { & { display: none; } }
}

/* FOOTER */
#prefooter {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 1.75rem 2.375rem; margin-top: 2.75rem; border-radius: 2.375rem 2.375rem 0 0;
  padding: 3.5rem 2%; color: var(--white); position: relative;
  background: #BFBFBF url(images/prefooter.webp) no-repeat center;
  background-size: cover;

  BODY.design-and-build & .white {
    display: none;
  }

  BODY.pleasant-corners & {
    background-image: url(images/prefooter-pleasant-corners.webp);
  }

  BODY.northern-lights & {
    background-image: url(images/prefooter-northern-lights.webp);
  }
  
  &:before {
    content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit;
    background: rgba(0, 0, 0, 0.3);
  }

  > * { position: relative; z-index: 2; }

  H2 {
    width: 100%; font-weight: 600; text-align: center;
    text-shadow: 0 0.025em 0.075em var(--black);
  }
}

FOOTER {
  background: var(--white); padding-top: 3.25rem;

  .site-width-wide {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 3em;

    @media (max-width: 1150px) { & { flex-wrap: wrap; } }
    @media (max-width: 600px) { & {
      flex-direction: column; align-items: center; text-align: center;
    } }

    #footer-logo { width: 12.375rem; }

    NAV {
      display: flex; justify-content: center; width: calc(100% - 40rem);

      @media (max-width: 1150px) { & { width: 100%; order: -1; } }
      @media (max-width: 600px) { & { order: 0; } }

      UL {
        display: flex; gap: 0.75em 2.5em; margin: 0; padding: 0;
        list-style-type: none; font-weight: 700; font-size: 1.25rem;
        white-space: nowrap;

        @media (max-width: 1380px) { & { font-size: 1.4vw; } }
        @media (max-width: 1150px) { & { font-size: 1.25rem; gap: 0.75em 3.6em; } }
        @media (max-width: 800px) { & { font-size: 2.5vw; } }
        @media (max-width: 600px) { & {
          flex-direction: column; font-size: 1.25rem;
        } }

        UL { flex-direction: column; margin-top: 0.75em; }
      }
    }

    #subscribe {
      width: 19.5rem; color: var(--darkgreen);
      font-weight: 700; font-size: 1.25rem;

      @media (max-width: 1450px) { & { width: 17.2rem; } }

      #mce-EMAIL {
        border: 0; font-weight: 700;
        box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,0,0.25);
      }
    }
  }

  #copyright {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3em 2% 1em; font-weight: 700; text-align: center;

    @media (max-width: 600px) { & { flex-direction: column-reverse; } }

    .footer-logos {
      display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 1rem;
      height: 3.375rem;

      IMG { max-height: 100%; width: auto; }
    }
  }
}

/* MULTIPLE PAGES */
#page-title {
  border-radius: 2.375rem 2.375rem 0 0; background: var(--cream);
  color: var(--darkgreen);

  H1 { padding: 1em 0; font-weight: 500; font-size: 3.75rem; }
}

.alignleft { float: left; margin-right: 2.8rem; }
.alignright { float: right; margin-left: 2.8rem; }
:has(> .alignleft, > .alignright) { display: flow-root; }

FORM {
  INPUT[name="username"] { position: absolute; left: -999999999px; }

  LABEL { font-family: "Poppins", sans-serif; font-weight: 500; }

  INPUT:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
  TEXTAREA, SELECT {
    width: 100%; box-sizing: border-box; margin: 0.625em 0 1.875em; outline: 0;
    border: 0.0625rem solid var(--gray); border-radius: 0.3125rem;
    padding: 0.546875em; background: var(--white); color: var(--black);
    font-family: "Inter", sans-serif; font-size: 1rem; line-height: 1;
    -webkit-appearance: none; appearance: none;

    &:is(TEXTAREA) { height: 7rem; }

    &:is(SELECT) {
      line-height: 1.25; cursor: pointer;
      -webkit-appearance: menulist-button; appearance: menulist-button;
    }

    &:-ms-input-placeholder { color: var(--gray); }
    &::placeholder { color: var(--gray); opacity: 1; }
    &:focus:-ms-input-placeholder { color: transparent; }
    &:focus::placeholder { color: transparent; opacity: 0; }

    &.alert {
      border-color: var(--orange) !important;

      &:-ms-input-placeholder { color: var(--orange); }
      &::placeholder { color: var(--orange); opacity: 1; }
      &:focus:-ms-input-placeholder { color: transparent; }
      &:focus::placeholder { color: transparent; opacity: 0; }
    }
  }

  INPUT[type="checkbox"],
  INPUT[type="radio"] { accent-color: var(--black); margin: 0.2em 0.25em 0 0; }

  .checkbox {
    display: flex; align-items: flex-start; gap: 0.25em; padding-bottom: 1.5em;
  }

  .radio {
    padding-bottom: 1.5em; font-family: "Poppins", sans-serif; font-weight: 500;

    .col2 & {
      width: 48%;

      @media (max-width: 650px) { & { width: 100%; } }
    }

    LABEL { display: inline-block; padding-top: 0.5em; }
  }

  .col2 {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap;

    LABEL {
      width: 48%;

      @media (max-width: 650px) { & { width: 100%; } }
    }
  }

  BUTTON, INPUT[type="submit"] {
    display: inline-block; min-width: 10em; box-sizing: border-box; outline: 0;
    border: 0; border-radius: 1.2em; padding: 0.7em 1.2em; background: var(--green);
    color: var(--white); font-size: 1.25rem; line-height: 1; font-weight: 700;
    text-align: center; cursor: pointer;
    
    &:hover { background: var(--orange); color: var(--white); }

    &.loader {
      border-color: #A0A0A0; background: #A0A0A0; color: #D8D8D8;
      pointer-events: none; position: relative;

      &:before {
        --loader-size: 2.5rem; animation: spin 1s linear infinite;
        content: ""; position: absolute; top: 0.25rem; box-sizing: border-box;
        left: calc(50% - (var(--loader-size) / 2)); width: var(--loader-size);
        height: var(--loader-size); border-radius: 50%;
        border: 0.1875rem solid var(--white); border-top-color: var(--darkgreen);
      }
    }
  }
}

@keyframes spin { 0% { rotate: 0deg; } 100% { rotate: 360deg; } }

DIALOG {
  border: 0; width: 31.25rem; padding: 0; box-sizing: border-box;
  font-size: 1.5rem; line-height: 1.2; overflow: visible;

  @media (max-width: 550px) { & { width: 96%; } }

  &::backdrop { background: rgba(0,0,0,0.8); }

  > BUTTON {
    position: absolute; top: -1rem; right: -1rem; width: 2rem; height: 2rem;
    padding: 0; border-radius: 50%; border: 0.125rem solid var(--white);
    background: var(--green); color: var(--white);font-size: 1rem; line-height: 1;

    &:hover { background: var(--darkgreen); }
  }

  > DIV { padding: 1.75rem 2rem; }
}

/* HOME */
#home-slider {
  margin: 0; overflow: hidden; height: auto;

  .f-carousel__slide {
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; gap: 3.5rem 0; height: 666px; position: relative;
    border-radius: 2.375rem 2.375rem 0 0; background-repeat: no-repeat;
    background-position: center; background-size: cover; color: var(--white);
    box-sizing: border-box;

    @media (max-width: 880px) { & { padding: 0 70px; } }

    &:before {
      content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit;
      background: rgba(0, 0, 0, 0.3);
    }

    > * { position: relative; z-index: 2; }

    H1 {
      margin: 0; font-weight: 600; font-size: 3.75rem; line-height: 1.25;
      text-align: center; text-wrap: balance; max-width: 24ch;
      text-shadow: 0 0.025em 0.075em var(--black);

      @media (max-width: 540px) { & { font-size: 11vw; } }

      P { margin: 0; }
    }

    .buttons {
      display: flex; gap: 1.5em 2em;

      @media (max-width: 650px) { & { flex-direction: column; } }

      A {
        background-color: var(--green);

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

        &:nth-of-type(2) {
          border: 3px solid var(--green); background-color: rgba(255,255,255,0.1);
          backdrop-filter: blur(20px); padding: calc(0.7em - 3px) calc(1.2em - 3px);
          color: var(--white);

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

  .f-button {
    &.is-arrow {
      --f-button-width: 55px; --f-button-height: 55px; --f-button-border-radius: 50%;
      --f-button-bg: rgba(217,217,217,0.2); backdrop-filter: blur(20px);
      --f-button-hover-bg: rgba(217,217,217,0.4); --f-button-svg-stroke-width: 4.5px;
      --f-button-color: var(--cream); --f-button-hover-color: var(--black);

      &.is-prev {
        left: calc((100% - var(--site-width-wide)) / 2);
        @media (max-width: 1400px) { & { left: 1%; } }
      }

      &.is-next {
        right: calc((100% - var(--site-width-wide)) / 2);
        @media (max-width: 1400px) { & { right: 1%; } }
      }
    }

    svg { stroke-linecap: butt; stroke-linejoin: miter; }
  }

  .f-carousel__dots {
    top: auto; bottom: 30px; height: 30px; --f-carousel-dots-gap: 16px;
    
    .f-carousel__dot {
      --f-carousel-dot-width: 13px; --f-carousel-dot-height: 13px;
      --f-carousel-dot-bg: var(--lightgray); --f-carousel-dot-hover-bg: var(--green);
      --f-carousel-dot-selected-bg: var(--green);
      --f-carousel-dot-opacity: 1; --f-carousel-dot-hover-opacity: 1;
    }
  }
}

#home-content {
  background: url(images/background-icon.webp) no-repeat top -125px left -175px;

  .content {
    width: 1120px; margin: 0 auto; padding: 5rem 0; line-height: 1.3;

    @media (max-width: 1180px) { & { width: 96%; } }
    @media (max-width: 1000px) { & { display: flex; flex-direction: column; } }

    H2 {
      line-height: 1.2;
      SPAN { display: inline-block; }
    }

    H3 {
      margin: 1.5em 0 0.5em; font-size: 1rem;
      EM { font-weight: 600; }
    }

    UL {
      columns: 2; column-gap: 2em;

      @media (max-width: 550px) { & { columns: 1; } }

      LI { padding: 0.25em 0; break-inside: avoid; }
    }

    .alignright {
      display: inline-block; width: 540px;

      @media (max-width: 1000px) { & {
        float: none; order: 10; width: auto; margin: 2rem auto 0;
      } }
    }
  }

  #explore {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 2rem; padding: 3rem 0 120px; scroll-margin-top: 144px;

    H2 { width: 100%; margin: 0 0 0.25em; text-align: center; }

    A {
      width: 313px; aspect-ratio: 313 / 325; border-radius: 1.125rem;
      background-repeat: no-repeat; background-position: center;
      background-size: cover; color: var(--white); position: relative;

      > DIV {
        position: absolute; z-index: 4; left: 1.5rem; top: calc(100% - 1.5rem);
        translate: 0 -100%; transition: all 0.4s;
      }

      &:before {
        content: ''; position: absolute; inset: calc(100% - 125px) 0 0 0;
        z-index: 2; border-radius: inherit;
        background: linear-gradient(transparent, var(--black));
      }

      &:after {
        content: ''; position: absolute; inset: 0; z-index: 3;
        border-radius: inherit; background: transparent; transition: all 0.4s;
      }

      &:hover {
        &:after { background: var(--gold); }
        > DIV { top: 1.5rem; translate: 0; }
      }

      H3 { margin-bottom: 0.5em; font-size: 1.625rem; }
    }
  }
}

#home-purpose {
  background: url(images/background-elevation.webp) no-repeat center;
  background-size: cover; padding: 6.25rem 0; text-align: center;

  .site-width-wide {
    display: flex; justify-content: center; align-items: flex-start; gap: 6rem;
    padding: 3.4375rem 0 6.875rem;

    @media (max-width: 1100px) { & { gap: 8vw; } }
    @media (max-width: 750px) { & { flex-wrap: wrap; } }


    > DIV {
      width: 11.875rem; line-height: 1.2;

      @media (max-width: 750px) { & { width: 12.5rem; } }

      .icon {
        display: flex; justify-content: center; align-items: center;
        width: 5.625rem; aspect-ratio: 1 / 1; border-radius: 50%;
        margin: 0 auto 1.625rem; background: var(--gold);
        box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,0,0.25);

        &:before {
          content: ''; display: block; width: 50%; aspect-ratio: 1 / 1;
          background: var(--white); mask-repeat: no-repeat; mask-position: center;
        }

        &.plan:before { mask-image: url(images/plan.svg); }
        &.design:before { mask-image: url(images/design.svg); }
        &.build:before { mask-image: url(images/build.svg); }
        &.deliver:before { mask-image: url(images/deliver.svg); }
      }

      H3 { margin-bottom: 0.65em; font-size: 1.625rem; }
    }
  }
}

/* PROPERTIES */
BODY.pleasant-corners {
  background: var(--white) url(images/background-pleasant-corners.webp) no-repeat top 450px left -55px;
  background-size: 75% auto;
}

BODY.northern-lights {
  background: var(--white) url(images/background-northern-lights.webp) no-repeat top 540px center;
  background-size: 75% auto;
}

#property-header {
  display: flex; justify-content: center; align-items: center; position: relative;
  height: 399px; border-radius: 2.375rem 2.375rem 0 0; padding: 0 2%;
  background-repeat: no-repeat; background-position: center; background-size: cover;

  &:before {
    content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6);
    border-radius: inherit;
  }

  IMG { z-index: 2; }
}

#property-content {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 2.75rem 0; padding: 5rem 0 3rem; line-height: 1.5;

  .text {
    width: 48.3035%;

    @media (max-width: 750px) { & { width: 100%; } }

    H1 { font-size: 2.5rem; line-height: 1.2; }

    .button { margin-top: 1.25rem; min-width: 315px; }
  }

  .image {
    width: 48.5637%;

    @media (max-width: 750px) { & { width: 100%; } }

    .slide {
      width: 100%; aspect-ratio: 541 / 351; border-radius: 1.25rem;
      background-repeat: no-repeat; background-position: center;
      background-size: cover;

      @media (max-width: 500px) { & {
        display: block; margin-bottom: 1.5rem;
        &:last-of-type { margin-bottom: 0; }
      } }
    }

    &:after { content: 'flickity'; display: none; }

    @media (max-width: 500px) { &:after { content: ''; } }
  }

  .gallery {
    width: 100%; display: flex; flex-wrap: wrap; gap: 1.5rem 2.33%;

    @media (max-width: 500px) { & { display: none; } }

    .slide-link {
      width: 23.25%; aspect-ratio: 259 / 152; border-radius: 1.25rem;
      background-repeat: no-repeat; background-position: center;
      background-size: cover; cursor: pointer;

      @media (max-width: 900px) { & { width: 31.78%; } }
      @media (max-width: 700px) { & { width: 48.835%; } }
      @media (max-width: 500px) { & { width: 100%; } }

      &.is-selected { display: none; }
    }
  }
}

#property-plans {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  width: 1340px; margin: 0 auto; padding: 3rem 0;

  @media (max-width: 1360px) { & { width: 96%; } }

  H2 { width: 100%; text-align: center; margin-bottom: 1.25em; }

  A {
    width: 48%; aspect-ratio: 656 / 409; background-repeat: no-repeat;
    background-position: center; background-size: contain; color: var(--black);
    font-family: "Poppins", sans-serif; font-size: 1.5rem; text-align: center;

    @media (max-width: 650px) { & {
      width: 100%; margin-bottom: 2.5rem;
      &:last-of-type { margin-bottom: 0; }
    } }

    &[data-caption] { margin-top: 1em; }

    &:before { content: attr(data-caption); display: block; translate: 0 -1em; }
  }
}

#property-neighborhood {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  width: 1340px; margin: 0 auto; padding: 3rem 0;

  @media (max-width: 1360px) { & { width: 96%; } }

  H2 { width: 100%; text-align: center; margin-bottom: 1.25em; }

  .content {
    width: 48%; line-height: 1.4;

    @media (max-width: 700px) { & { width: 100%; } }

    P { margin: 0 0 1.5em; }

    IMG { margin-top: 1.625rem; }
  }

  .poi {
    width: 48%;

    @media (max-width: 700px) { & { width: 100%; margin-top: 3rem; } }
  }
}

DETAILS {
  interpolate-size: allow-keywords; border-bottom: 0.125rem solid var(--orange);
  padding: 0 1.25rem; line-height: 1.4;

  &:first-of-type { border-top: 0.125rem solid var(--orange); }

  &::details-content {
    opacity: 0; block-size: 0; overflow: clip;
    transition: all 0.4s, content-visibility 0.4s allow-discrete;
  }

  SUMMARY {
    display: flex; align-items: center; list-style: none; cursor: pointer;
    padding: 1.75rem 0; font-family: "Poppins", sans-serif; font-weight: 500;
    line-height: 1;

    &:after {
      content: '+'; margin-left: auto; font-weight: 200; font-size: 2.25rem;
    }
  }

  &[open] {
    padding-bottom: 1.75rem;

    &::details-content { opacity: 1; block-size: auto; }

    SUMMARY {
      padding-bottom: 1rem;

      &:after { content: '-'; }
    }
  }
}

#property-downloads {
  display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
  width: 1005px; margin: 0 auto; padding: 3rem 0;

  @media (max-width: 1024px) { & { width: 96%; } }

  H2 { width: 100%; text-align: center; margin-bottom: 20px; }

  A {
    width: 313px; aspect-ratio: 313 / 351; border-radius: 20px;
    background-repeat: no-repeat; background-position: top center;
    background-size: cover; color: var(--white); position: relative;

    &:before {
      content: ''; position: absolute; inset: calc(100% - 206px) 0 0;
      border-radius: inherit; background: linear-gradient(transparent, var(--black));
    }

    &:after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: transparent; transition: all 0.4s;
    }

    /*&:hover {
      &:after { background: var(--gold); }
      > DIV { top: 1.2rem; translate: 0; }
    }*/

    > DIV {
      position: absolute; z-index: 4; left: 1.875rem; top: calc(100% - 1.2rem);
      translate: 0 -100%; transition: all 0.4s;

      H3 { font-size: 1.625rem; margin-bottom: 0.5em; }

      SPAN {
        display: flex; align-items: center; gap: 0 0.5em;

        &:before {
          content: ''; width: 1em; aspect-ratio: 1; background: var(--white);
          mask-repeat: no-repeat; mask-position: center; mask-image: var(--download);
        }
      }
    }
  }
}

BODY.about {
  background: url(images/background-icon.webp) no-repeat top 240px left -75px;

  #prefooter { background-image: url(images/prefooter-about.webp); }
}

#about-content {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 4.375rem 0 1.875rem; line-height: 1.5;

  @media (max-width: 750px) { & { flex-direction: column; gap: 1rem; } }

  BODY.has-thumbnail & DIV {
    width: 46%;
    @media (max-width: 750px) { & { width: 100%; } }
  }

  > IMG {
    width: 48%;
    @media (max-width: 750px) { & { width: 100%; } }
  }
}

#team {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1.875rem;
  padding: 4.375rem 0 1.875rem; scroll-margin-top: 144px;

  H2 { width: 100%; margin-bottom: 0.5em; text-align: center; }

  H3 { margin-bottom: 1.375rem; font-size: 1.625rem; line-height: 1 }

  .full-size {
    width: 100%; display: flex; justify-content: space-between;
    align-items: flex-start; gap: 1rem 0;

    @media (max-width: 700px) { & { flex-direction: column; } }

    .expanded_about {
      width: calc(100% - 343px); line-height: 1.5;

      @media (max-width: 700px) { & { width: 100%; } }

      H3 { margin-bottom: 0.25em; }

      UL {
        margin: 1.5em; padding-left: 0; list-style: none;

        LI {
          display: flex; align-items: flex-start; gap: 0 0.4em; padding: 0.3em 0;

          &:before {
            content: ""; width: 1em; height: 1.5em; flex-shrink: 0;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23B89B5E' d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
          }
        }
      }
    }
    
    .small {
      pointer-events: none;

      @media (max-width: 700px) { & { margin: 0 auto; } }

      &:after { display: none; }
    }
  }

  .small {
    width: 313px; aspect-ratio: 313 / 351; border-radius: 2.375rem;
    background: #ECEDED url(images/person.webp) no-repeat bottom center;
    background-size: contain; position: relative;

    &:before {
      content: ''; position: absolute; inset: calc(100% - 206px) 0 0;
      border-radius: 0 0 2.375rem 2.375rem;
      background: linear-gradient(to top, #000000, #66666600);
    }

    &:after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: transparent; transition: all 0.4s;
    }

    .name {
      position: absolute; top: calc(100% - 1.375rem); left: 2rem; z-index: 4;
      translate: 0 -100%; color: var(--white); transition: all 0.4s;
    }

    .about {
      position: absolute; top: 7rem; left: 2rem; z-index: -1; opacity: 0;
      transition: all 0.4s; padding-right: 1.25rem; color: var(--white);
      line-height: 1.4;
    }

    &:hover, &.clicked {
      &:after { background: var(--gold); }
      .name { top: 1.375rem; translate: 0; }
      .about { z-index: 4; opacity: 1; }
    }
  }
}

#portfolio {
  padding: 4.375rem 0 1.875rem; scroll-margin-top: 144px;

  H2 { margin-bottom: 1.5em; text-align: center; }
  
  DETAILS {
    SUMMARY {
      gap: 1rem 2.75rem; padding: 1.25rem 0; font-size: 0.875rem;

      @media (max-width: 600px) { & {
        flex-direction: column; align-items: flex-start; position: relative;

        &:after {
          position: absolute; top: 50%; right: 0; translate: 0 -50%;
        }
      } }

      .logo {
        width: 157px; aspect-ratio: 157 / 66; background-repeat: no-repeat;
        background-position: center; background-size: contain;
      }

      H3 { font-size: 1.25rem; }
    }

    .image {
      width: 263px; margin-left: 3.75rem;
      
      @media (max-width: 800px) { & { margin-left: 7.5vw; } }
      @media (max-width: 600px) { & { float: none; width: 100%; margin: 0 0 1.5em; }}
    }

    &[open] { padding-bottom: 1.25rem; }
  }
}

BODY.contact {
  background: url(images/background-icon.webp) no-repeat top 240px right 2%;

  #prefooter { background-image: url(images/prefooter-about.webp); }
}

#contact {
  display: flex; flex-wrap: wrap; gap: 2.5rem 2rem; padding: 5.5rem 0 2.5rem;

  H2 { width: 100%; font-weight: 700; }

  FORM {
    width: 68.66%; border: 1px solid var(--gray); border-radius: 20px;
    box-sizing: border-box; padding: 2.5rem 2rem; background: var(--white);

    @media (max-width: 890px) { & { width: 100%; } }

    .header {
      margin-bottom: 2rem; font-weight: 700;
      font-family: "Poppins", sans-serif;
    }
  }

  ASIDE {
    width: 230px; font-weight: 500; line-height: 1.5;

    @media (max-width: 890px) { & { width: 100%; } }

    H3 { margin-bottom: 0.5em; font-size: 1.25rem; font-weight: 600; }

    A {
      display: flex; color: var(--black); padding-bottom: 0.5em;

      &[href^="mailto:"]:before {
        content: ''; display: block; width: 1em; aspect-ratio: 1 / 1;
        background: var(--orange); mask: var(--email) no-repeat center;
        margin-right: 0.5rem;
      }

      &[href^="tel:"]:before {
        content: ''; display: block; width: 1em; aspect-ratio: 1 / 1;
        background: var(--orange); mask: var(--phone) no-repeat center;
        margin-right: 0.5rem;
      }
    }
  }
}


BODY.design-and-build {
  background: url(images/background-icon.webp) no-repeat top 240px left -75px;
}

#build-content {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 4.375rem 0 1.875rem; line-height: 1.5;

  @media (max-width: 750px) { & { flex-direction: column; gap: 1rem; } }

  BODY.has-thumbnail & DIV {
    width: 46%;
    @media (max-width: 750px) { & { width: 100%; } }
  }

  > IMG {
    width: 48%; border-radius: 20px;
    @media (max-width: 750px) { & { width: 100%; } }
  }
}

#build-process {
  padding: 5rem 0;

  H2 { margin-bottom: 2rem; text-align: center; }

  H3 {
    margin-bottom: 2.5rem; font-weight: 400; font-size: 1.5rem; text-align: center;
  }

  H4 { font-weight: 500; font-size: 2rem; }
  
  .step {
    display: flex; gap: 24px;

    .side {
      width: 90px; position: relative;

      &:before {
        content: ''; position: absolute; top: 0; left: calc(50% - 1px);
        width: 2px; height: 100%; background: var(--gold);
      }

      .icon {
        width: 100%; aspect-ratio: 1; font-size: 0; border-radius: 50%;
        background: var(--gold); box-sizing: border-box; padding: 25%;
        box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,0,0.25);

        IMG { filter: invert(1); }
      }
    }

    &:last-of-type .side:before { display: none; }

    .content {
      width: calc(100% - 114px); line-height: 1.5; padding: 30px 0 1em;

      .step:last-of-type & { padding-bottom: 0; }
    }
  }
}

#build-spaces {
  padding: 3rem 0;
  background: var(--cream) url(images/footprints.webp) no-repeat top center;
  background-size: 100% auto;

  @media (max-width: 1440px) { & { background-position: center; background-size: cover; } }
  @media (max-width: 750px) { & { background-image: none; } }

  .site-width {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem 0;

    @media (max-width: 750px) { & { flex-direction: column; } }
    
    .text {
      line-height: 1.5;

      &:has(+ IMG) {
        width: 47%;

        @media (max-width: 750px) { & { width: 100%; } }
      }
    }

    IMG {
      width: 48%;

      @media (max-width: 750px) { & { width: 100%; } }
    }
  }
}

#build-builder {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 2rem 0; padding: 5rem 0;

  .builder-logo {
    width: 28.6607%; margin: 0 auto;

    @media (max-width: 750px) { & { width: 53%; } }
    @media (max-width: 600px) { & { width: 66%; } }

    + DIV {
      width: 58%;

      @media (max-width: 750px) { & { width: 100%; order: -1; } }
    }
  }

  .text {
    line-height: 1.5;

    P:last-of-type { margin-bottom: 0; }
  }

  .builder-image {
    width: 48%; border-radius: 1.5rem;

    @media (max-width: 600px) { & { width: 100%; } }
  }
}