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

font-family: 'Canela Text', serif;
font-family: 'Source Sans Pro', sans-serif;
*/

@font-face{
  font-family: 'Canela Text';
    src: url("fonts/CanelaText-Regular.woff")format("woff"),
    url("fonts/CanelaText-Regular.otf")format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}

@font-face{
  font-family: 'Source Sans Pro';
    src: url("fonts/SourceSansPro-Regular.woff2")format("woff2"),
    url("fonts/SourceSansPro-Regular.woff")format("woff"),
    url("fonts/SourceSansPro-Regular.otf")format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}

@font-face{
  font-family: 'Source Sans Pro';
    src: url("fonts/SourceSansPro-Bold.woff2")format("woff2"),
    url("fonts/SourceSansPro-Bold.woff")format("woff"),
    url("fonts/SourceSansPro-Bold.otf")format("opentype");
  font-weight: bold; font-style: normal; font-display: swap;
}

:root {
  --black: #000000;
  --white: #FFFFFF;
  --bgwhite: #FEFCF8;
  --cream: #F8F1E9;
  --darkcream: #F4EAE1;
  --green: #50ACAE;
  --darkgreen: #2F4F4A;
  --brightgreen: #0B8D00;
  --gray: #B7B7B7;
  --red: #DE1515;

  --site-width: 1146px;
  --toggle-width: 3rem;
  --toggle-height: 0.3rem;
  --toggle-color: var(--black);

  --instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");

  --facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z'%3E%3C/path%3E%3C/svg%3E");

  --star: url("data:image/svg+xml,%3Csvg viewBox='0 0 1533 1533' xmlns='http://www.w3.org/2000/svg' fill='%2350ACAE'%3E%3Cg transform='matrix(1,0,0,1,-381.925,-396.285)'%3E%3Cpath d='M1148.28,396.285C1067.66,1016.67 1002.31,1082.02 381.925,1162.64C1002.31,1243.26 1067.66,1308.62 1148.28,1929C1228.9,1308.62 1294.26,1243.26 1914.64,1162.64C1294.26,1082.02 1228.9,1016.67 1148.28,396.285Z'/%3E%3C/g%3E%3C/svg%3E");

  --starwhite: url("data:image/svg+xml,%3Csvg viewBox='0 0 1533 1533' xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF'%3E%3Cg transform='matrix(1,0,0,1,-381.925,-396.285)'%3E%3Cpath d='M1148.28,396.285C1067.66,1016.67 1002.31,1082.02 381.925,1162.64C1002.31,1243.26 1067.66,1308.62 1148.28,1929C1228.9,1308.62 1294.26,1243.26 1914.64,1162.64C1294.26,1082.02 1228.9,1016.67 1148.28,396.285Z'/%3E%3C/g%3E%3C/svg%3E");

  --download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 17l4-4l-1.4-1.4l-1.6 1.55V9h-2v4.15L9.4 11.6L8 13zm-6 5q-.825 0-1.412-.587T4 20V8l6-6h8q.825 0 1.413.588T20 4v16q0 .825-.587 1.413T18 22zm0-2h12V4h-7.15L6 8.85zm0 0h12z'/%3E%3C/svg%3E");

  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m304-82-56-57 343-343-343-343 56-57 400 400L304-82Z'/%3E%3C/svg%3E");
}

BODY {
  margin: 0; padding: 0; background: var(--bgwhite); color: var(--black);
  font-family: 'Source Sans Pro'; font-weight: normal;
  font-size: 1rem; line-height: 1.2;
}

IMG { border: 0; }

.site-width {
  width: var(--site-width); margin: 0 auto;

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

A {
  color: var(--green); text-decoration: none;
  &:hover { color: var(--darkgreen); }
}

.button {
  display: inline-block; min-width: 224px; box-sizing: border-box; margin: 0;
  outline: 0; border: 0.125rem solid transparent; border-radius: 0.3rem;
  padding: 0.66em; background: var(--green); color: var(--white);
  text-align: center; font-family: 'Source Sans Pro', sans-serif; font-weight: bold;
  font-size: 1.125rem; line-height: 1; text-transform: uppercase;
  -webkit-appearance: none; appearance: none; cursor: pointer;

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

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

  &.outline {
    border-color: var(--green); background: transparent; color: var(--black);
    &:hover {
      border-color: var(--darkgreen); background: var(--darkgreen);
      color: var(--white);
    }
  }

  &.transparent {
    background: transparent; color: var(--black);
    &:hover { background: transparent; color: var(--green); }
  }
}

H1, H2, H3, H4 {
  margin: 0; font-family: 'Canela Text', serif; font-weight: normal;
  font-size: 1.875rem; line-height: 1.1;
}

H3 { font-size: 1.25rem; }

H4 { font-size: 1rem; }

UL, OL { margin-left: 0.5em; padding-left: 0.5em; }

/* HEADER */
HEADER {
  position: fixed; top: 0; left: 0; z-index: 9999; width: 100%;
  background: rgba(255,255,255,0.9);

  @media (max-width: 800px) { & { position: absolute; background: var(--white); } }
}

.scrolling HEADER { background: var(--white); }

.menu-top-container {
  display: flex; justify-content: flex-end; align-items: center;
  background: var(--darkgreen);
  padding: 0 calc((100% - var(--site-width)) / 2);

  @media (max-width: 1200px) { & { padding: 0 2%; } }
  @media (max-width: 800px) { & { display: none; } }
}

.social { display: flex; gap: 1rem; }

@media (max-width: 1000px) {
  FOOTER .social { justify-content: center; margin-bottom: 2rem; }
}

.menu-top-container .social { margin-right: 1.5rem; }

.social A { display: flex; width: 2.75rem; aspect-ratio: 1 / 1; }

.menu-top-container .social A { width: 1.5rem; }

.social A:before {
  content: ''; width: 100%; background-color: var(--black); margin: 0 auto;
  mask-repeat: no-repeat; mask-position: center;
}

.social A:hover:before { background-color: var(--darkgreen); }

.menu-top-container A:before { background-color: var(--white); }
.menu-top-container A:hover:before { background-color: var(--gray); }

.social A.instagram:before { mask-image: var(--instagram); width: 88%; }
.social A.facebook:before { mask-image: var(--facebook); }

#menu-top {
  display: flex; justify-content: flex-end; align-items: center; gap: 1.5em;
  margin: 0; padding: 0; list-style-type: none; width: auto;
  font-weight: 700; font-size: 1.25rem; line-height: 1; text-transform: uppercase;
}

#menu-top A {
  display: inline-block; padding: 0.5em 0; color: var(--white);

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

#header-logo {
  display: none; width: 15.8125rem; aspect-ratio: 500 / 155; margin: 1rem 0 1rem 2%;
  background: url(images/logo.webp) no-repeat center; background-size: contain;

  @media (max-width: 800px) { & { display: block; } }
}

#toggle-menu { display: none; }

LABEL[for="toggle-menu"] {
  position: absolute; right: 2%;
  top: calc(var(--toggle-width) - var(--toggle-height));
  display: none; margin: 0; padding: calc(var(--toggle-height) * 2) 0;
  width: var(--toggle-width); height: var(--toggle-height); cursor: pointer;
  background: linear-gradient(transparent, transparent calc(var(--toggle-height) * 2), var(--toggle-color) calc(var(--toggle-height) * 2), var(--toggle-color) calc(var(--toggle-height) * 3), transparent calc(var(--toggle-height) * 3), transparent ); transition: all 0.3s ease-in-out;

  @media (max-width: 800px) { & { display: inline-block; } }
}

LABEL[for="toggle-menu"]:before,
LABEL[for="toggle-menu"]:after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: var(--toggle-height); background: var(--toggle-color);
  transition: all 0.15s ease-in-out; transform-origin: 0% 0%;
}

LABEL[for="toggle-menu"]:after { top: auto; bottom: 0; }

#toggle-menu:checked + LABEL[for="toggle-menu"] { background: transparent; }

#toggle-menu:checked + LABEL[for="toggle-menu"]:before,
#toggle-menu:checked + LABEL[for="toggle-menu"]:after {
  top: 50%; left: 50%; transform: rotate(45deg) translate(-50%,-50%); width: 130%;
}

#toggle-menu:checked + LABEL[for="toggle-menu"]:after {
  transform: rotate(-45deg) translate(-50%,-50%);
}

#toggle-menu + LABEL[for="toggle-menu"] + NAV {
  @media (max-width: 800px) { & {
    display: block; position: absolute; top: 100%; left: -9999999px; z-index: 5000;
    width: 100%; background: var(--white);
  } }
}

#toggle-menu:checked + LABEL[for="toggle-menu"] + NAV { left: 0; }

#menu-main {
  display: flex; justify-content: center; gap: 0 4.25rem;
  margin: 0 auto; padding: 0; list-style-type: none; width: var(--site-width);
  font-weight: bold; font-size: 1.25rem; line-height: 1; text-transform: uppercase;
  
  @media (max-width: 1170px) { & { width: 100%; } }
  @media (max-width: 1000px) { & { gap: 0 6vw; } }
  @media (max-width: 800px) { & { flex-direction: column; font-size: 2rem; } }
}

#menu-main A {
  display: flex; align-items: center; height: 100%; color: var(--black);
  box-sizing: border-box;
  
  @media (max-width: 800px) { & { justify-content: center; padding: 0.25em 2%; } }
}

#menu-main > LI.mobile {
  display: none;

  @media (max-width: 800px) { & { display: list-item; } }
}

#menu-main > LI > A { white-space: nowrap; }

#menu-main > LI:hover > A { color: var(--darkgreen); }

#menu-main .nav-logo {
  padding: 0.890625rem 3.25rem;

  @media (max-width: 1000px) { & { padding-left: 2.8vw; padding-right: 2.8vw; } }
  @media (max-width: 900px) { & { padding-left: 0; padding-right: 0; } }
  @media (max-width: 800px) { & { display: none; } }
}

#menu-main .nav-logo A {
  width: 192px; aspect-ratio: 500 / 155; font-size: 0;
  background: url(images/logo.webp) no-repeat center; background-size: contain;
}

#menu-main LI UL {
  display: none; position: absolute; background: rgba(255,255,255,0.9);
  margin: 0 auto; padding: 0; list-style-type: none;

  @media (max-width: 800px) { & { display: block; position: static; background: var(--white); } }
}

.scrolling #menu-main LI UL { background: var(--white); }

#menu-main LI:hover UL { display: block; }

#menu-main LI UL A {
  padding: 0.5em 1em; color: var(--black);

  @media (max-width: 800px) { & { padding: 0.25em 2%; } }
}

#menu-main LI UL A:hover { color: var(--darkgreen); }

/* FOOTER */
#prefooter {
  box-sizing: border-box; padding: 3.125rem 2%; background: var(--darkgreen);
  color: var(--white); text-align: center; position: relative;
}

#prefooter:before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3.125rem;
  transform: translateY(-50%);
  background: url(images/star-border.webp) no-repeat center; background-size: cover;
}

#prefooter:after {
  content: ''; position: absolute; top: 0; left: 50%; width: 2.5rem; height: 2.5rem;
  transform: translate(-50%,-50%); filter: blur(0.1875rem); opacity: 0;
  background: var(--starwhite) no-repeat center; background-size: cover;
}

#prefooter.twinkle:after { animation: twinkle 1s ease-in-out; }

@keyframes twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

#prefooter H2 { margin: 0 0 1em; font-size: 2.5rem; }

#prefooter .buttons {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 2em;
}

FOOTER { padding: 3.125rem 0 1.25rem; background: var(--cream); font-size: 1.25rem; }

FOOTER .footer-content {
  display: flex; justify-content: space-between; align-items: flex-start;

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

@media (max-width: 1000px) { #footer-logo-col { width: 100%; text-align: center; } }

#footer-logo {
  display: inline-block; width: 15.5rem; aspect-ratio: 253 / 78; margin: 0 0 3.5rem;
  background: url(images/logo.webp) no-repeat center; background-size: contain;

  @media (max-width: 1000px) { & { margin-bottom: 2rem; } }
}

@media (max-width: 800px) { FOOTER NAV { margin: 0 auto 1rem; } }

#menu-footer {
  margin: 0; padding: 0; list-style-type: none; font-weight: bold; line-height: 1;
  text-transform: uppercase; columns: 2; column-gap: 5.25em;

  @media (max-width: 375px) { & { column-gap: 3em; } }
}

#menu-footer A { display: inline-block; margin-bottom: 0.75em; color: var(--black); }
#menu-footer A:hover { color: var(--darkgreen); }

#subscribe {
  width: 31.5881%; box-sizing: border-box;
  font-weight: bold; text-transform: uppercase;

  @media (max-width: 1000px) { & { width: 362px; } }
  @media (max-width: 800px) { & { margin: 0 auto; text-align: center; } }
  @media (max-width: 375px) { & { width: 100%; } }
}

#subscribe INPUT[type="email"] { font-size: 1.25rem; margin: 0.25em 0 0.75em; }

FOOTER .copyright {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  margin-top: 5rem;

  @media (max-width: 1000px) { & { flex-direction: column-reverse; } }
  
  > DIV {
    @media (max-width: 1000px) { & { text-align: center; } }

    A { color: var(--black); font-size: 50%; text-transform: uppercase; }
  }
}

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

  @media (max-width: 1000px) { & { justify-content: center; } }
}

FOOTER .copyright .footer-logos IMG { max-height: 100%; width: auto; }

/* MULTIPLE PAGES */
#page-header {
  color: var(--white); position: relative; background-repeat: no-repeat;
  background-position: center; background-size: cover; height: 422px;
}

#page-header H1 {
  position: absolute; top: 50%; left: 0; width: 100%; box-sizing: border-box;
  padding: 1em 0 1em calc((100% - var(--site-width)) / 2); font-size: 2.5rem;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(4,4,4,0.5) 35%, rgba(84,84,84,0) 65%);
  
  @media (max-width: 1190px) { & { padding-left: 2%; } }
  @media (max-width: 800px) { & { background-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(4,4,4,0.5) 50%, rgba(84,84,84,0) 80%); } }
}

.property-tickler > DIV {
  display: flex; justify-content: space-between; margin-bottom: 3.125rem;
  background: var(--white); box-shadow: 0 0 0.375rem 0 rgba(0,0,0,0.16);

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

.property-tickler > DIV:last-of-type { margin-bottom: 0; }

.property-tickler .text {
  width: 45%; box-sizing: border-box; padding: 2rem 0 2rem 1.5rem;

  @media (max-width: 800px) { & { width: 100%; padding-right: 1.5rem; } }
}

.property-tickler .text H2 { margin: 0 0 0.5em; font-size: 1.5em; }

.property-tickler .text P {
  width: 93%; margin: 0 0 1.5em; line-height: 1.25;

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

.property-tickler .text .overview {
  display: flex; gap: 0 0.5em; margin: 0 0 1.5em;
}

.property-tickler .text .overview > DIV {
  border-right: 2px solid var(--gray); padding-right: 0.5em; line-height: 1;
}

.property-tickler .text .overview > DIV:last-of-type {
  border-right: 0; padding-right: 0;
}

.property-tickler .text .buttons {
  display: flex; flex-wrap: wrap; gap: 1em; padding-top: 0.5em;
}

.property-tickler .image {
  width: 54.6247%; position: relative; background-repeat: no-repeat;
  background-position: center; background-size: cover;

  @media (max-width: 800px) { & { width: 100%; aspect-ratio: 626 / 248; } }
}

.property-tickler .image:before, .property-tickler .image:after {
  content: ''; position: absolute; inset: 0 calc(100% - 3.3rem) 0 0;
  background-image: linear-gradient(to right, var(--white), transparent);
}

@media (max-width: 800px) {
  .property-tickler .image:before, .property-tickler .image:after { display: none; }
}

.border {
  display: block; max-width: 638px; height: auto; margin: 1.5rem auto;

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

FORM INPUT:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
FORM TEXTAREA,
FORM SELECT {
  width: 100%; box-sizing: border-box; margin: 0.75em 0 1.5em; outline: 0;
  border: 0.0625rem solid var(--gray); padding: 0.37em 0.5em;
  background: var(--white); color: var(--black);
  font-family: 'Source Sans Pro', sans-serif; font-size: 1rem; line-height: 1;
  -webkit-appearance: none; appearance: none;
}

FORM TEXTAREA { height: 5.5rem; }

FORM SELECT {
  line-height: 1.25; cursor: pointer;
  -webkit-appearance: menulist-button; appearance: menulist-button;
}

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

FORM INPUT:-ms-input-placeholder,
FORM TEXTAREA:-ms-input-placeholder { color: var(--gray); }
FORM INPUT::placeholder,
FORM TEXTAREA::placeholder { color: var(--gray); opacity: 1; }
FORM INPUT:focus:-ms-input-placeholder,
FORM TEXTAREA:focus:-ms-input-placeholder { color: transparent; }
FORM INPUT:focus::placeholder,
FORM TEXTAREA:focus::placeholder { color: transparent; opacity: 0; }

FORM .alert:-ms-input-placeholder { color: var(--red); }
FORM .alert::placeholder { color: var(--red); opacity: 1; }
FORM .alert:focus:-ms-input-placeholder { color: transparent; }
FORM .alert:focus::placeholder { color: transparent; opacity: 0; }
FORM .alert { border-color: var(--red) !important; }

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

FORM .col2 LABEL, FORM .col2 .radio { width: 46%; }

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

FORM .radio { padding-bottom: 1.5em; }

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

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

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

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

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

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

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%; } }
}

DIALOG > 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;
}

DIALOG > BUTTON:hover { background: var(--darkgreen); }

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

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

#page-header.home-slider .f-carousel__slide {
  height: 810px; color: var(--white); position: relative;
  background-repeat: no-repeat; background-position: center; background-size: cover;

  @media (max-width: 900px) { & { height: 600px; } }
  @media (max-width: 500px) { & { height: 500px; } }
}

#page-header.home-slider .f-carousel__slide .content {
  width: 100%; position: absolute; top: 505px; left: 0;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(4,4,4,0.5) 35%, rgba(84,84,84,0) 65%);

  @media (max-width: 900px) { & { top: 60%; } }
  @media (max-width: 500px) { & { top: 50%; } }
}

#page-header.home-slider .f-carousel__slide .content .text {
  width: 40%; margin-left: calc((100% - var(--site-width)) / 2);
  padding: 2em 0; box-sizing: border-box;

  @media (max-width: 1190px) { & { width: 98%; margin-left: 2%; } }
}

#page-header.home-slider .f-carousel__slide .content .text H1 {
  position: static; padding: 0; background: none; margin: 0 0 0.5em;
}

#page-header.home-slider .f-carousel__slide .content .text P {
  margin: 0 0 1.5em;

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

#page-header.home-slider .f-carousel__slide .content .text P:last-of-type { margin: 0; }

#page-header.home-slider .f-carousel__dots { top: auto; bottom: 1.5rem; z-index: 10; }

#page-header.home-slider .f-carousel__dot { opacity: 1; width: 2rem; height: 2rem; }

#page-header.home-slider .f-carousel__dot:after {
  height: 0.75rem; width: 0.75rem; background-color: var(--gray);
}

#page-header.home-slider .f-carousel__dot.is-selected { pointer-events: none; }

#page-header.home-slider .f-carousel__dot:hover:after,
#page-header.home-slider .f-carousel__dot.is-selected:after { background-color: var(--green); }

#page-header.home-slider .f-button {
  border-radius: 50%; border: 0.0625rem solid var(--white); box-sizing: border-box;
  color: var(--white);
  --f-button-width: var(--f-arrow-width, 8.375rem);
  --f-button-height: var(--f-arrow-height, 8.375rem);
  --f-button-svg-width: var(--f-arrow-svg-width, 1.56875rem);
  --f-button-svg-height: var(--f-arrow-svg-height, 1.56875rem);

  @media (max-width: 900px) { & { top: 40%; } }
  @media (max-width: 700px) { & { display: none; } }
}

#page-header.home-slider .f-button.is-prev {
  justify-content: flex-end; padding-right: 1.375rem;
  transform: translate(-50%, -50%);
}

#page-header.home-slider .f-button.is-next {
  justify-content: flex-start; padding-left: 1.375rem;
  transform: translate(50%, -50%);
}

#page-header.home-slider .f-button:hover { opacity: 0.5; }

#page-header.home-slider .f-button svg { fill: var(--white); }

#home-content { padding: 3.125rem 0; text-align: center; }

#home-content .site-width { overflow-x: hidden; }

#home-content H2 {
  display: inline-block; margin: 0 0 0.5em; padding: 0 72px; box-sizing: border-box;
  background: var(--star) no-repeat left center, var(--star) no-repeat right center;
  background-size: 19px; position: relative; font-size: 2.5rem;

  @media (max-width: 750px) { & { padding: 0 8vw; } }
}

#home-content H2:before, #home-content H2:after {
  content: ''; width: 100%; height: 1px; background-color: var(--green);
  position: absolute; top: calc(50% - 0.5px); left: calc(-100% - 1rem);
}

#home-content H2:after { left: calc(100% + 1rem); }

#home-content P {
  margin: 0 auto 1.5em; width: 762px; line-height: 1.4;

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

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

#home-properties { background: var(--cream); padding: 4.3125rem 0; }

#home-spaces { padding: 6.25rem 0; text-align: center; }

#home-spaces H2 { display: inline-block; margin: 0 0 1em; font-size: 2.5rem; }

#home-spaces H2:after {
  content: ''; display: block; width: 95%; aspect-ratio: 1440 / 50;
  margin: 0.5em auto 0; background: url(images/star-border.webp) no-repeat center;
  background-size: contain;
}

#home-spaces .spaces {
  display: flex; justify-content: space-between;

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

#home-spaces .spaces > DIV {
  width: 32%; opacity: 0;

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

#home-spaces.fade-in .spaces > DIV {
  animation: fade-in 0.7s ease-in forwards;

  @media (max-width: 650px) { & { animation-delay: 0.7s; } }
}

#home-spaces.fade-in .spaces > DIV:nth-of-type(1) {
  animation-delay: 0.7s;

  @media (max-width: 650px) { & { animation-delay: 0s; } }
}

#home-spaces.fade-in .spaces > DIV:nth-of-type(3) { animation-delay: 1.4s; }

@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }

#home-spaces .spaces > DIV .image { object-fit: cover; width: 100%; height: auto; }

#home-spaces .spaces > DIV .text {
  margin: 0.8rem auto 0; text-wrap: balance; max-width: 30ch;

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

#home-community {
  display: flex; justify-content: space-between; gap: 2em 0; padding: 0 0 6.25rem;

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

#home-community .image {
  object-fit: cover; width: 47%; height: auto; aspect-ratio: 539 / 318;

  @media (max-width: 1200px) { & { aspect-ratio: auto; } }
  @media (max-width: 800px) { & { width: 100%; } }
}

#home-community .text {
  width: 49%; display: flex; flex-direction: column; line-height: 1.4;

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

#home-community H2 { margin: 0 0 0.5em; font-size: 2.5rem; }
#home-community H3 { margin: 0 0 0.5em; }

#home-community P { margin: 0 0 1.5em; }

#home-community .text .col3 > DIV P:last-of-type { margin-bottom: 0; }

#home-community .text .col3 {
  display: flex; justify-content: space-between; gap: 1.5em 0; position: relative;
  margin-top: auto; border-top: 0.0625rem solid var(--green); padding-top: 1.5em;

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

#home-community .text .col3:before, #home-community .text .col3:after,
#home-community .text .col3 .star, #home-community .text .col3 > DIV:before {
  content: ''; position: absolute; top: 0; left: 15%;
  transform: translate(-50%,-50%); width: 1.1875rem; height: 1.1875rem;
  background: var(--star) no-repeat center; background-size: contain;
}

#home-community .text .col3:after { left: 85%; }

#home-community .text .col3 .star { left: 50%; }

#home-community .text .col3 > DIV:before { left: 50%; display: none; }

@media (max-width: 500px) {
  #home-community .text .col3 > DIV:before { display: block; }

  #home-community .text .col3:before, #home-community .text .col3:after,
  #home-community .text .col3 .star { display: none; }
}

#home-community .text .col3 > DIV {
  width: 30%; box-sizing: border-box; text-align: center; position: relative;
  translate: 100vw 0; opacity: 0;

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

#home-community .text .col3 > DIV:first-of-type {
  padding-right: 0.0625rem;

  @media (max-width: 500px) { & {
    border-top: 0.0625rem solid var(--green); padding: 1.5em 0 0;
  } }
}

#home-community .text .col3 > DIV:nth-of-type(2) {
  width: 35%; border-left: 0.0625rem solid var(--green);
  border-right: 0.0625rem solid var(--green); padding: 0 0.6875rem;

  @media (max-width: 500px) { & {
    width: 100%; border: 0; border-top: 0.0625rem solid var(--green);
    padding: 1.5em 0 0;
  } }
}

#home-community .text .col3 > DIV:last-of-type {
  padding-left: 0.0625rem;

  @media (max-width: 500px) { & {
    border-top: 0.0625rem solid var(--green); padding: 1.5em 0 0;
  } }
}

.home MAIN { overflow: hidden; }

#home-community.slide .text .col3 > DIV {
  animation: slide 0.4s ease-out forwards, fade-in 0.75s ease-in forwards;
}

#home-community.slide .text .col3 > DIV:nth-of-type(2) { animation-delay: 0.1s; }
#home-community.slide .text .col3 > DIV:nth-of-type(3) { animation-delay: 0.2s; }

@keyframes slide {
  from { translate: 100vw 0; }
  to { translate: 0 0; }
}

#home-instagram { padding: 0 0 6.25rem; text-align: center; }

#home-instagram H2 { margin: 0 0 0.4em; font-size: 2.5rem; }

#home-instagram P { margin: 0 0 1.5em; }

#home-instagram .links { color: var(--green); }

/* HOMES */
BODY.homes #page-header { margin-bottom: 4rem; }

BODY.homes #page-header:after {
  content: ''; position: absolute; inset: calc(100% - 3.5625rem) 0 0 0;
  background-image: linear-gradient(0deg, rgba(254,252,248,0.99) 0%, rgba(255,255,255,0) 100%);
}

BODY.homes .property-tickler { margin-top: 2.5rem; margin-bottom: 5rem; }

/* PROPERTIES */
BODY.properties #page-header:after {
  content: ''; position: absolute; inset: calc(100% - 3.5625rem) 0 0 0;
  background-image: linear-gradient(0deg, rgba(254,252,248,0.99) 0%, rgba(255,255,255,0) 100%);
}

#properties-content {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3.25rem 0;

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

#properties-content .text {
  width: calc(100% - 320px);

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

#properties-content .image { width: 250px; height: auto; }

#properties-available { padding: 3.125rem 0 5rem; background: var(--cream); }

#properties-available H2 { text-align: center; }

#properties-available .twocol {
  display: flex; justify-content: space-between; gap: 2.4rem;

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

#properties-available .twocol .image {
  object-fit: contain; width: 38.6561%; height: auto;

  @media (max-width: 880px) { & { width: 50%; } }
  @media (max-width: 660px) { & { width: 100%; } }
}

#properties-available .twocol .properties-column {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 57.5916%; box-sizing: border-box;

  @media (max-width: 880px) { & { width: 50%; } }
  @media (max-width: 660px) { & { width: 100%; } }
}

#properties-available .selectors {
  display: flex; align-items: center; gap: 1rem; padding: 0 4px;
  box-sizing: border-box;

  @media (max-width: 780px) { & { gap: 2vw; } }
  @media (max-width: 660px) { & { gap: 1rem; } }
}

#properties-available .selectors .button {
  min-width: 0; font-size: 1rem; padding: 0.3em 0.5em;
  background: var(--white); color: var(--black); outline: 1px solid #DDDDDD;
  
  &.on { background: var(--green); color: var(--white); outline: 0; }

  &:hover { background: var(--darkgreen); color: var(--white); outline: 0; }

  @media (max-width: 780px) { & { font-size: 2vw; } }
  @media (max-width: 660px) { & { font-size: 1rem; } }
}

#properties-scroll {
  width: 100%; height: 707px; box-sizing: border-box; margin: 0.75rem 0 1.5rem;

  @media (max-width: 1200px) { & { height: 55vw; } }
  @media (max-width: 880px) { & { height: 67vw; } }
  @media (max-width: 660px) { & { height: auto; } }
}

#properties-scroll .swiper-wrapper {
  align-items: flex-start; box-sizing: border-box; padding: 0.25em;
}

#properties-scroll .swiper-slide {
  display: flex; background: var(--white); box-sizing: border-box;
  box-shadow: 0 0.1875rem 0.21875rem 0 rgba(0,0,0,0.16); height: auto !important;

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

#properties-scroll .swiper-slide .property-image {
  width: 49%; position: relative;
  background-repeat: no-repeat; background-position: center; background-size: cover;

  @media (max-width: 1000px) { & { width: 100%; height: 7rem; } }
  @media (max-width: 660px) { & { height: auto; aspect-ratio: 1 / 0.3333; } }
}

#properties-scroll .swiper-slide .property-image .status {
  position: absolute; top: 0.75rem; right: 0.75rem; min-width: 1.4375rem;
  border-radius: 0.25rem; box-sizing: border-box; padding: 0.25em 1em;
  color: var(--white); font-weight: 700; line-height: 1; text-align: center;
  text-transform: uppercase;

  &.now-showing { background: var(--brightgreen); }
  &.sold { background: var(--red); }
  &.coming-soon { background: var(--green); }
}

#properties-scroll .swiper-slide .text {
  width: 51%; box-sizing: border-box; padding: 1rem 1.375rem;

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

#properties-scroll .swiper-slide .text H3 { margin: 0 0 0.5em; }

#properties-scroll .swiper-slide .text .buttons {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding-top: 2rem;

  @media (max-width: 1000px) { & { padding-top: 1rem; } }
}

#properties-scroll .swiper-slide .text .buttons .button {
  min-width: 0; padding: 0.4em 1.5em;
  &.transparent { padding: 0; }
}

.properties-column .swiper-buttons {
  display: flex; justify-content: space-between; padding: 0 0.25rem;
}

.properties-column .swiper-buttons BUTTON {
  position: static; margin: 0; border: 0; width: 47%; height: 2.5625rem;
  background: var(--white); color: var(--green);
  box-shadow: 0 0.0625rem 0.21875rem 0 rgba(0,0,0,0.1);

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

  & .swiper-navigation-icon { rotate: 90deg; width: 28px; height: 28px; }

  &.swiper-button-disabled { opacity: 1; }

  &.swiper-button-disabled .swiper-navigation-icon { opacity: 0.5; }
}

#properties-community { padding-top: 5rem; }

#pois {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
  margin-top: 3rem;

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

#pois:has(.image) .text {
  width: 49%;

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

#pois DETAILS OL {
  columns: 2; column-gap: 4rem; font-size: 0.875rem; line-height: 1.1;

  @media (max-width: 900px) { & { columns: 1; } }
  @media (max-width: 750px) { & { columns: 2; column-gap: 3rem; } }
  @media (max-width: 500px) { & { columns: 1; } }
}

#pois DETAILS OL LI { break-inside: avoid; padding: 0.1em 0; }

#pois .image {
  width: 44%; height: auto;

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

#travel-times-header { margin: 2em 0 0.5em; font-size: 1.5rem; }

#travel-times {
  display: flex; gap: 0 30px; line-height: 1;

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

#travel-times .col {
  min-width: 264px;
  
  @media (max-width: 600px) { & { min-width: 0; width: 100%; } }
}

#travel-times .col > DIV {
  display: flex; justify-content: space-between; align-items: center; gap: 0 2em;
  padding: 0.5em 0; border-bottom: 1px solid var(--green);
}

#travel-times .col > DIV DIV:last-of-type { white-space: nowrap; }

#properties-explore { text-align: center; padding: 5rem 0; }

#properties-explore .map { display: flex; aspect-ratio: 573 / 177; margin: 2rem 0; }

#properties-explore .button { font-size: 1rem; }

/* PROPERTY */
BODY.single-property #page-header {
  color: var(--white); position: relative; background-repeat: no-repeat;
  background-position: center; background-size: cover;
}

BODY.single-property.has-thumbnail #page-header {
  height: 668px;

  @media (max-width: 900px) { & { height: 600px; } }
  @media (max-width: 500px) { & { height: 500px; } }
}

BODY.single-property.has-thumbnail #page-header H1 {
  position: absolute; top: 490px; left: 0;

  @media (max-width: 900px) { & { top: 60%; } }
  @media (max-width: 500px) { & { top: 50%; } }
}

#property-overview {
  display: flex; justify-content: center; align-items: center;
  margin: 2.0625rem auto 1.5rem;
}

#property-overview > DIV {
  min-width: 220px; box-sizing: border-box; border-left: 0.0625rem solid #DDDDDD;
  border-right: 0.0625rem solid #DDDDDD; font-size: 1.25rem; text-align: center;

  @media (max-width: 900px) { & { min-width: 0; width: 25%; } }
  @media (max-width: 600px) { & { font-size: 3.333vw; } }
}

#property-overview > DIV:first-of-type { border-left: 0; }

#property-overview > DIV:last-of-type { border-right: 0; }

#property-overview > DIV .icon {
  height: 2.6875rem; background-repeat: no-repeat; background-position: center;
  background-size: contain; margin-bottom: 0.5em;

  @media (max-width: 600px) { & { height: 7.167vw; } }
}

#property-overview-border IMG { max-width: 100%; height: auto; }

#property-content { padding: 1.75rem 0; }

#property-content H2 { margin: 0 0 0.5em; }

#property-content P { margin: 0 0 1.5em; }

#property-features { background: var(--cream); padding: 3.4375rem 0; }

#property-features .header {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem 0;
  margin-bottom: 1rem;

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

#property-features .header A {
  display: flex; align-items: center; color: var(--black); font-weight: bold;
  text-transform: uppercase;
}

#property-features .header A:before {
  content: ''; height: 1.5em; aspect-ratio: 1 / 1; background-color: var(--green);
  mask-repeat: no-repeat; mask-position: center; mask-image: var(--download);
  margin-right: 0.5em;
}

#property-features .header A:hover { color: var(--green); }

#property-features P { margin: 0 0 1.5em; }

#property-slider { margin-top: 2.3125rem; }

#property-slider.f-carousel {
  --f-carousel-gap: 30px;
  --f-carousel-slide-width: calc((100% - 60px) / 3);

  @media (max-width: 800px) { & {
    --f-carousel-slide-width: calc((100% - 30px) / 2);
  } }
  @media (max-width: 600px) { & {
    --f-carousel-slide-width: 100%; --f-carousel-gap: 0;
  } }
}

#property-slider .f-carousel__slide {
  aspect-ratio: 362 / 282;
  background-repeat: no-repeat; background-position: center; background-size: cover;
}

#property-slider .f-button, #property-floor-plans .f-button {
  border-radius: 50%; background: var(--green); color: var(--white);
}

#property-slider .f-button.is-prev {
  transform: translate(calc(-100% - 20px),-50%);

  @media (max-width: 1300px) { & { transform: translate(0,-50%); } }
}

#property-slider .f-button.is-next {
  transform: translate(calc(100% + 20px),-50%);

  @media (max-width: 1300px) { & { transform: translate(0,-50%); } }
}

#property-floor-plan { margin: 3.75rem auto; text-align: center; }

#property-floor-plans {
  width: 950px; margin: 2.6rem auto 0;

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

#property-floor-plans .f-carousel__slide { border: 1px solid #DDDDDD; }

#property-floor-plans .f-carousel__slide IMG { max-width: 100%; height: auto; }

#property-floor-plans .f-button.is-prev {
  transform: translate(calc(-100% - 20px),-50%);

  @media (max-width: 1100px) { & { transform: translate(0,-50%); } }
}

#property-floor-plans .f-button.is-next {
  transform: translate(calc(100% + 20px),-50%);

  @media (max-width: 1100px) { & { transform: translate(0,-50%); } }
}

#property-standard-inclusions { margin: 3.75rem auto; }

#property-standard-inclusions H2 { margin: 0 0 0.5em; }

#property-standard-inclusions .cols {
  display: flex; justify-content: space-between; flex-wrap: wrap; padding: 2rem 0 0;
}

#property-standard-inclusions .cols > DIV {
  width: 48.6910%;

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

#property-standard-inclusions .cols.onecol > DIV { width: 100%; }

DETAILS {
  border: 0.0625rem solid #DDDDDD; box-sizing: border-box; background: var(--white);
  overflow: hidden;
}

SUMMARY {
  cursor: pointer; list-style: none; padding: 1.375rem 1.5625rem; position: relative;
  background-color: var(--cream); font-size: 1.625rem; line-height: 1;
}

SUMMARY:after {
  content: ''; position: absolute; top: 50%; right: 1rem; width: 1rem; height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='rgba(0,0,0,0.7)'%3E%3Cpath d='m304-82-56-57 343-343-343-343 56-57 400 400L304-82Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain; transform: translateY(-50%);
  transition: all 0.2s ease-out;
}

DETAILS[open] SUMMARY { border-bottom: 0.0625rem solid #DDDDDD; }

DETAILS[open] SUMMARY:after { transform: translateY(-50%) rotate(-90deg); }

DETAILS DIV { padding: 1rem 2.5rem; opacity: 0; }

@keyframes openHeight { 0% { max-height: 0; } 100% { max-height: 1600px; } }
@keyframes openTransform { 0% { transform: translateY(50%); } 100% { transform: translateY(0); } }
@keyframes openOpacity { 0% { opacity: 0; } 100% { opacity: 1; } }

@keyframes closeHeight { 0% { max-height: 1600px; } 100% { max-height: 0; } }
@keyframes closeTransform { 0% { transform: translateY(0); } 100% { transform: translateY(50%); } }
@keyframes closeOpacity { 0% { opacity: 1; } 100% { opacity: 0; } }

DETAILS[open] DIV {
  animation-name: openHeight, openTransform, openOpacity;
  animation-duration: 0.4s, 0.4s, 0.5s;
  animation-timing-function: ease-out, ease, ease-out;
  animation-fill-mode: forwards;
}

DETAILS.closing DIV {
  animation-name: closeOpacity, closeTransform, closeHeight;
  animation-duration: 0.3s, 0.4s, 0.4s;
  animation-timing-function: ease-in, ease-in, ease-in;
}

/* COMMUNITY */
#community-content { padding: 2.8125rem 0; line-height: 1.5; }

#community-content .alignleft {
  float: left; margin-right: 2rem; max-width: 57%; height: auto;
}

#community-content .alignright {
  float: right; margin-left: 2rem; max-width: 57%; height: auto;
}

#community-section2 { background: var(--cream); position: relative; }

#community-section2 .image {
  position: absolute; inset: 0 50% 0 0;
  background-repeat: no-repeat; background-position: center; background-size: cover;

  @media (max-width: 700px) { & { position: static; width: 100%; aspect-ratio: 16 / 9; } }
}

#community-section2 .image:after {
  content: ''; position: absolute; inset: 0 0 0 calc(100% - 166px);
  background-image: linear-gradient(270deg, var(--cream) 0, rgba(249,244,238,0.7) 21%, transparent 100%);
}

@media (max-width: 700px) {
  #community-section2 .image:after { display: none; }
}

#community-section2 .text {
  width: 48%; margin-left: 52%; position: relative; z-index: 3; padding: 4.375rem 0;
  line-height: 1.5;

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

#community-section2 .text P:last-of-type { margin-bottom: 0; }

#community-section3 {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem 0;
  padding: 4.375rem 0;

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

#community-section3 .text {
  width: calc((48 * var(--site-width)) / 100);
  margin-left: calc((100% - var(--site-width)) / 2);
  line-height: 1.5;
  
  @media (max-width: 1200px) { & { width: 48%; margin-left: 2%; } }
  @media (max-width: 900px) { & { width: calc(100% - 30px); } }
}

#community-section3 .text P:last-of-type { margin-bottom: 0; }

#community_gallery {
  width: 48%; --f-carousel-gap: 27px;

  @media (max-width: 900px) { & { width: 100%; } }
  @media (max-width: 600px) { & { --f-carousel-gap: 15px; } }
}

#community_gallery .f-carousel__slide {
  width: 557px; aspect-ratio: 557 / 433; margin-bottom: 2em;
  background-repeat: no-repeat; background-position: center; background-size: cover;

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

#community_gallery .f-carousel__slide .f-caption {
  max-width: none; max-height: none; margin: 0; padding: 0.5em 0 0;
  overflow: hidden; position: absolute; top: 100%; width: 100%; color: var(--black);
}

#community_gallery .f-button {
  border-radius: 50%; background: var(--green); color: var(--white);
}

#community_gallery .f-button.is-prev {
  transform: translate(calc(-100% - 17px),-50%); top: 85%;

  @media (max-width: 1200px) { & { left: 2%; transform: translate(0,-50%); } }
}

#community_gallery .f-button.is-next { top: 85%; right: 2%; }

/* OUR TEAM */
#team-content { padding: 2.8125rem 0; }

#team-people .person { padding: 5.625rem 0; background: var(--cream); }

#team-people .person:nth-child(even) { background: var(--darkcream); }

#team-people .person .site-width {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem 0;

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

#team-people .person:nth-child(even) .site-width {
  flex-direction: row-reverse;

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

#team-people .person .image, #team-people .person .image-mobile {
  object-fit: cover; width: 362px; height: auto;
  
  @media (max-width: 800px) { & { display: none; } }
  @media (max-width: 600px) { & { width: 100%; } }
}

#team-people .person .image-mobile {
  display: none; float: right; margin: 0 0 1.5em 1.5em; translate: 0 1.3em;

  @media (max-width: 800px) { & { display: block; } }
  @media (max-width: 600px) { & { float: none; margin: 1em 0; translate: none; } }
}

#team-people .person .text {
  width: calc(100% - 362px - 2rem); line-height: 1.5;

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

#team-people .person .text H2 { margin-bottom: 0.125em; }

#team-people .person .text H3 { padding-bottom: 0.4em; }

#team-people .person .text UL { margin: 1.5em; padding-left: 0; list-style: none; }

#team-people .person .text UL LI {
  display: flex; align-items: flex-start; gap: 0 0.4em; padding: 0.3em 0;
}

#team-people .person .text UL LI: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='%231E595B' d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* CONTACT */
#contact-content { padding: 2.875rem 0 1.6875rem; }

#contact-columns {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 2rem 0; padding-bottom: 5.375rem;

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

#contact-columns FORM {
  width: 58%; box-sizing: border-box; border: 1px solid var(--gray);
  padding: 1.8125rem 3rem; background: var(--white);

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

#contact-columns FORM .col2.header { padding-bottom: 2em; gap: 1em; }
#contact-columns FORM .col2.header P { margin: 0; }

@media (max-width: 850px) {
  #contact-columns FORM .col2 LABEL,
  #contact-columns FORM .col2 .radio { width: 100%; }
}

#contact-columns ASIDE {
  width: 40%; box-sizing: border-box;
  padding: 0.6875rem 0.9375rem; background: var(--white);

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

#contact-columns ASIDE > IMG { max-width: 100%; height: auto; margin-bottom: 1rem; }

#contact-columns ASIDE > DIV {
  border-bottom: 1px solid var(--gray); padding: 1rem 0; line-height: 1.5;
}

#contact-columns ASIDE > DIV:last-of-type {
  border-bottom: 0; padding-bottom: 0;
}

#contact-columns ASIDE > DIV H3 { margin-bottom: 0.5em; }

#contact-columns ASIDE > DIV A {
  display: inline-flex; align-items: center; gap: 0 0.5em; color: var(--black);
  word-break: break-all;
}

#contact-columns ASIDE > DIV A[href^="mailto:"]:before {
  content: ''; width: 1.3em; aspect-ratio: 1 / 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%2350ACAE' 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-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

#contact-columns ASIDE > DIV A[href^="tel:"]:before {
  content: ''; width: 1.3em; aspect-ratio: 1 / 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2350ACAE' d='M160.2 25C152.3 6.1 131.7-3.9 112.1 1.4l-5.5 1.5c-64.6 17.6-119.8 80.2-103.7 156.4 37.1 175 174.8 312.7 349.8 349.8 76.3 16.2 138.8-39.1 156.4-103.7l1.5-5.5c5.4-19.7-4.7-40.3-23.5-48.1l-97.3-40.5c-16.5-6.9-35.6-2.1-47 11.8l-38.6 47.2C233.9 335.4 177.3 277 144.8 205.3L189 169.3c13.9-11.3 18.6-30.4 11.8-47L160.2 25z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 80% auto;
}

#contact-columns ASIDE > DIV A:hover { color: var(--green); }

/* DOCUMENTS */
#documents-content { padding: 2rem 0; }

#documents-downloads { padding-bottom: 4rem; }

#documents-downloads .document {
  display: flex; justify-content: space-between; align-items: center; gap: 2em;
  margin-bottom: 1.25rem; border: 1px solid #DDDDDD; background: var(--white);
  padding: 2rem;

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

#documents-downloads H2 { margin-bottom: 0.75em; font-size: 1.25rem; }

#documents-downloads .dl {
  display: flex; align-items: center; color: var(--black); font-weight: bold;
  text-transform: uppercase; white-space: nowrap;
}

#documents-downloads .dl:before {
  content: ''; height: 1.5em; aspect-ratio: 1 / 1; background-color: var(--green);
  mask-repeat: no-repeat; mask-position: center; mask-image: var(--download);
  margin-right: 0.5em;
}

#documents-downloads .dl:hover { color: var(--green); }