/* Open Sans 400 */
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Open Sans 700 */
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Playfair Display 700 */
@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/PlayfairDisplay-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Playfair Display 900 */
@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/PlayfairDisplay-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #1a1a1a;
  --primaryLight: #3b3f99;
  --secondary: #cba135;
  --secondaryLight: #f9f9f9;
  --headerColor: #333444;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #ffffff;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display", serif;
}

*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}
.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

/*Smooth scrolling*/
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Hide scrollbars in Firefox */
* {
  scrollbar-width: none;
}

/* Hide scrollbars in IE/Edge Legacy */
* {
  -ms-overflow-style: none;
}

/*-- END OF CORE STYLES --*/

/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/

/* Mobile -360px */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    transform: translate(-50%, -150%);
    opacity: 0;
    fill: #fff;
  }
  #dark-mode-toggle {
    display: block;
    position: absolute;
    top: 0.625rem;
    right: 4.375rem;
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
    z-index: 1000;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s;
  }
  #dark-mode-toggle .cs-sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    position: relative;
    transform: none;
    top: auto;
    right: auto;
    margin: 0;
  }
  #dark-mode-toggle:hover {
    cursor: pointer;
  }
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/

/* Mobile - 1023px */
/*@media only screen and (max-width: 63.9375rem)*/

/* Mobile - 1023.5px */
@media only screen and (max-width: 63.96875rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    width: 100%;
    padding: 0.75rem 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /*background-color: #fff;*/
    background-color: transparent;
    /*box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;*/
    box-shadow: none;
    position: absolute;
    z-index: 10000;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
  }
  #cs-navigation.cs-active .cs-li {
    transform: translateY(0);
    opacity: 1;
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent !important;
  }

  /*Clamp the icon height so it never gets too big */
  #cs-navigation .cs-logo .logo-icon {
    height: clamp(2.5rem, 6vw, 3.5rem);
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) !important;
    transition: filter 0.3s;
  }

  /*Scale or truncate the text so it never forces a wrap/overflow */
  #cs-navigation .cs-logo .logo-text {
    font-family: Georgia, "Playfair Display", serif; /* or whatever your heading font is */
    font-size: clamp(0.9rem, 4.5vw, 1.4rem);
    line-height: 1.2;
    color: #ffffff;
    transition: color 0.3s;
    white-space: normal; /* allow wrapping */
    overflow: visible;
  }

  /* Make the logo a flex‐box so icon+text sit together */
  #cs-navigation .cs-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space between your goat icon and the text */
    flex-shrink: 0; /* prevent it from collapsing under the menu button */
    text-decoration: none !important;
  }

  #cs-navigation .cs-toggle {
    /* 44px - 48px */
    width: clamp(3.5rem, 8vw, 4rem);
    height: clamp(3.5rem, 8vw, 4rem);
    margin: 0 0 0 auto;
    border-radius: 0.25rem;
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
  }
  #cs-navigation .cs-active .cs-line3 {
    bottom: 100%;
    opacity: 0;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(2rem, 5vw, 3rem);
    /* 14px - 16px */
    height: clamp(1.5rem, 4vw, 1.5rem);
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    /*background-color: #1a1a1a;*/
    background-color: #ffffff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transform-origin: center;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: 100vh;
    padding-bottom: 2.4em;
    opacity: 0;
    /*background-color: #fff;*/
    /*background-color: transparent;*/
    background-color: rgba(0, 0, 0, 0.951) !important;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    /*overflow: hidden;*/
    overflow-y: auto; /* allow vertical scroll */
    overflow-x: hidden; /* kill horizontal scroll */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s, opacity 0.3s;

    /* Firefox */
    scrollbar-width: none;
    /* IE 10+ */
    -ms-overflow-style: none;
  }
  #cs-navigation .cs-ul {
    margin: 0;
    padding: 3rem 0 0 0;
    width: 100%;
    height: auto;
    max-height: 65vh;
    /*overflow: scroll;*/
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;

    /* Firefox */
    scrollbar-width: none;
    /* IE 10+ */
    -ms-overflow-style: none;
  }

  /* WebKit browsers */
  #cs-navigation .cs-ul-wrapper::-webkit-scrollbar,
  #cs-navigation .cs-ul::-webkit-scrollbar {
    display: none;
  }

  #cs-navigation .cs-li {
    list-style: none;
    margin-right: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    opacity: 0;
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 3vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    /*color: var(--headerColor);*/
    color: white;
    display: inline-block;
    padding-bottom: 0.125rem; /* <-- make room under the text */
    position: relative;
  }

  #cs-navigation .cs-li-link::before {
    content: "";
    position: absolute;
    bottom: 0; /* adjust as needed */
    left: 0;
    width: 0;
    height: 2px;
    background: #cba130;
    transition: width 0.3s;
  }
  #cs-navigation .cs-li-link:hover::before {
    width: 100%;
  }

  #cs-navigation .cs-button-solid {
    display: none;
  }
}

/* Dark Mode */
@media only screen and (max-width: 63.9375rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* makes it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-line {
    background-color: #fff;
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
}

/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    width: 100%;
    padding: 0 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /*background-color: #fff;*/
    background-color: transparent;
    /*box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;*/
    box-shadow: none;
    position: absolute;
    z-index: 10000;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    background-color: transparent !important;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  /* make .cs-logo a flexible container */
  #cs-navigation .cs-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space between icon & text */
    text-decoration: none; /* remove any underlines */
    margin-right: auto !important;
  }

  /* constrain the icon to a reasonable height */
  #cs-navigation .cs-logo .logo-icon {
    height: clamp(1.5rem, 4vw, 3rem);
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) !important;
    transition: filter 0.3s;
  }

  /* style the text so it scales and can wrap */
  #cs-navigation .cs-logo .logo-text {
    font-family: Georgia, "Playfair Display", serif; /* or whatever your heading font is */
    font-size: clamp(0.75rem, 2.7vw, 1.15rem);
    line-height: 1.2;
    color: #ffffff;
    transition: color 0.3s;
    white-space: normal; /* allow wrapping */
  }

  #cs-navigation .cs-logo .logo-text br {
    display: none;
  }

  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    /*color: var(--bodyTextColor);*/
    color: white;
    display: block;
    position: relative;
  }
  #cs-navigation .cs-li-link:hover::before {
    width: 100%;
  }
  /*#cs-navigation .cs-li-link.cs-active:before {
      width: 100%;
  }*/
  #cs-navigation .cs-li-link::before {
    /* active state underline */
    content: "";
    width: 0%;
    height: 2px;
    /*background: var(--primary);*/
    background: #cba130;
    /*opacity: 1;*/
    position: absolute;
    /*display: block;*/
    bottom: 0;
    left: 0;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    /*background-color: var(--primary);*/
    background-color: #000000;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #cba130;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 64rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* makes it turn white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-li-link:before {
    background-color: var(--primaryLight);
  }
}

#cs-navigation .cs-li-link {
  /* Set a new base size */
  font-size: 1.125rem;
  line-height: 1.4; /* optional: improve readability */
}

#cs-navigation {
  background-color: transparent !important;
  box-shadow: none !important;
}

#cs-navigation .cs-logo,
#cs-navigation .cs-logo .logo-icon,
#cs-navigation .cs-logo .logo-text {
  transition: filter 0.3s, color 0.3s;
}

/*#cs-navigation .cs-logo:hover .logo-text {
  color: #cba130 !important;
}

#cs-navigation .cs-logo:hover .logo-icon {
  /* same gold‐tint filter you used in the footer */ /*
  filter:
    invert(65%)
    sepia(83%)
    saturate(400%)
    hue-rotate(3deg)
    brightness(87%)
    contrast(86%) !important;
}*/

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-996 {
    /* 200px - 300px - leaving extra space for the navigation */
    padding: clamp(12.5rem, 25.95vw, 18.75rem) 1rem 0;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
    /* prevents overflow from the lines extending past the screen width */
    overflow: hidden;
  }
  #hero-996 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 100px - 200px */
    gap: clamp(6.25rem, 25vw, 12.5rem);
  }
  #hero-996 .cs-content {
    width: 100%;
    max-width: 59.6875rem;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
  }
  #hero-996 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.6vw, 1rem);
    line-height: 1.2em;
    white-space: nowrap;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.1rem;
    font-weight: 700;
    width: 100%;
    color: var(--bodyTextColorWhite);
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
    position: relative;
  }
  #hero-996 .cs-topper:after {
    /* white line */
    content: "";
    width: 50%;
    max-width: 7.5rem;
    height: 1px;
    background: currentColor;
    opacity: 1;
    position: relative;
    display: block;
  }
  #hero-996 .cs-title {
    /* 39px - 80px */
    font-size: clamp(2.4375rem, 6.4vw, 5rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: left;
    width: 100%;
    max-width: 20ch;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #hero-996 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColorWhite);
  }
  #hero-996 .cs-button-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
  }
  #hero-996 .cs-button-solid {
    text-align: center;
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #000000;
    padding: 0;
    background-color: #cba130;
    border: 1px solid transparent;
    box-sizing: border-box; /* ensure border is included in its box */
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-996 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-996 .cs-button-solid:hover {
    color: #1a1a1a;
  }
  #hero-996 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-996 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #fff;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--bodyTextColorWhite);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: color / 3s;
  }
  #hero-996 .cs-button-transparent:before {
    content: "";
    position: absolute;
    display: block;
    background: #cba130;
    opacity: 1;
    /* so it sits on top of the border */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    transform-origin: left;
    /* this is what creates the grow affect on hover */
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  #hero-996 .cs-button-transparent:hover {
    color: #000000;
  }
  #hero-996 .cs-button-transparent:hover:before {
    transform: scaleX(1);
  }
  #hero-996 .cs-card-group {
    margin: 0;
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    position: relative;
  }
  #hero-996 .cs-card-group:before {
    /* glass blur background */
    content: "";
    width: 100vw;
    height: 100%;
    /*border-top: 2px solid rgba(255, 255, 255, 0.5);*/
    background: rgba(26, 26, 26, 0.5);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #hero-996 .cs-item {
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background-color: rgba(255, 255, 255, 0.06);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
    justify-content: flex-start;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s;
  }
  #hero-996 .cs-item:before {
    /* backgorund color */
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.6s;
  }
  #hero-996 .cs-item:hover {
    border-color: var(--primary);
  }
  #hero-996 .cs-item:hover:before {
    opacity: 1;
  }
  #hero-996 .cs-item:hover .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  #hero-996 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.9;
  }
  #hero-996 .cs-item:hover .cs-background {
    opacity: 1;
  }
  #hero-996 .cs-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #hero-996 .cs-icon {
    /* 36px - 60px */
    width: clamp(2.25rem, 6vw, 4rem);
    height: auto;
    margin: 0 0 1rem 0;
  }
  #hero-996 .cs-h3 {
    /* 20px - 25px */
    /*font-size: clamp(1.25rem, 2.5vw, 1.5625rem);*/
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    min-height: calc(1.2em * 2);
    line-height: 1.2em;
    font-weight: bold;
    margin: 0 0 0.5rem 0;
    color: var(--bodyTextColorWhite);
  }
  #hero-996 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 18.75rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #hero-996 .cs-background {
    /* Background Image */
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-996 .cs-background:before {
    /* Black Color Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(
      41deg,
      rgba(26, 26, 26, 0.9) 30%,
      rgba(26, 26, 26, 0.3) 100%
    );
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-996 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes image act like a background-image */
    object-fit: cover;
  }
}

/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
  #hero-996 .cs-card-group .cs-item {
    grid-column: span 6;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-996 .cs-card-group .cs-item {
    grid-column: span 3;
  }
}
/* Large Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-996 {
    background: url("images/hero-fb.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates parallax effect on background image */
    background-attachment: fixed;
    /* remove img tag so we can make parallax work */
  }
  #hero-996 .cs-background img {
    display: none;
  }
}

.cs-icon {
  width: clamp(2.25rem, 6vw, 4rem);
  height: auto;
  margin: 0 0 1rem 0;

  /* tuned filter chain for #cba130 */
  filter: invert(65%) /* shift toward yellow */ sepia(83%)
    /* warm up into gold tones */ saturate(400%) /* boost the color intensity */
    hue-rotate(3deg) /* subtle hue tweak */ brightness(87%)
    /* fine-tune luminance */ contrast(86%); /* crisp up the edges */
}

/* make solid button behave like transparent on hover */
#hero-996 .cs-button-solid:hover {
  background-color: transparent !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}
/* suppress the sliding white “fill” pseudo-element */
#hero-996 .cs-button-solid:hover::before {
  width: 0 !important;
}

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-1235 {
    /*background-color: #191919;*/
    background-color: #cba130;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }
  #cta-1235 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-1235 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 39.375rem;
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    z-index: 20;
  }

  #cta-1235 .cs-topper {
    color: var(--primary);
  }
  #cta-1235 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColor);
  }
  #cta-1235 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-1235 .cs-button-solid {
    text-align: center;
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    padding: 0;
    background-color: #000000;
    display: inline-block;
    position: relative;
    z-index: 100;
    transition: color 0.3s;
  }
  #cta-1235 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    background: #cba130;
    border: 1px solid #000000;
    opacity: 1;
    /* so it sits on top of the border */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    transform-origin: left;
    /* this is what creates the grow affect on hover */
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  #cta-1235 .cs-button-solid:hover {
    color: #000000;
  }
  #cta-1235 .cs-button-solid:hover:before {
    transform: scaleX(1);
  }
  #cta-1235 .cs-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #cta-1235 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    margin: 0;
    padding: 0;
    padding-left: 1.25rem;
    border: none;
    /* prevents padding from adding to width and height */
    box-sizing: border-box;
    display: block;
  }
  #cta-1235 .cs-input::placeholder {
    color: #767676;
  }
  #cta-1235 .cs-submit {
    width: 100%;
    padding: 0 2rem;
    border: none;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #cta-1235 .cs-background {
    width: 100%;
    height: 23.75rem;
    overflow: hidden;
    display: block;
    position: relative;
  }
  #cta-1235 .cs-background:before {
    /* yellow slants */
    content: "";
    width: 21.875rem;
    height: 300%;
    /*background: var(--primary);*/
    background: #cba130;
    opacity: 1;
    position: absolute;
    display: block;
    top: -12.5rem;
    left: -11.875rem;
    z-index: 10;
    transform: rotate(-30deg);
    outline: 3.125rem solid rgba(5, 75, 239, 0.4);
  }
  #cta-1235 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
  #cta-1235 .cs-floater {
    width: 70%;
    max-width: 40.75rem;
    height: auto;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-1235 {
    /* moved padding back to the section container */
    padding: var(--sectionPadding);
  }
  #cta-1235 .cs-container {
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
  }
  #cta-1235 .cs-content {
    text-align: left;
    width: 57%;
    padding: 0;
    align-items: flex-start;
    position: relative;
    z-index: initial;
  }
  #cta-1235 .cs-content:before {
    /* yellow slants, adjust the rotate degree and right value if you add more content to account for the extra height of the cs-content container */
    content: "";
    width: 21.875rem;
    height: 400%;
    /*background: #191919;*/
    background: #cba130;
    opacity: 1;
    position: absolute;
    display: block;
    top: -31.25rem;
    right: 1.875rem;
    z-index: 1;
    transform: rotate(-30deg);
    outline: 3.125rem solid rgba(237, 167, 8, 0.4);
  }

  #cta-1235 .cs-topper,
  #cta-1235 .cs-title,
  #cta-1235 .cs-text {
    position: relative;
    z-index: 20;
  }
  #cta-1235 .cs-form {
    flex-direction: row;
    justify-content: flex-start;
    position: relative;
    z-index: 20;
  }
  #cta-1235 .cs-input {
    width: 100%;
  }
  #cta-1235 .cs-submit {
    width: auto;
  }
  #cta-1235 .cs-background {
    width: 60%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
  }
  #cta-1235 .cs-background:before {
    /* moved it to the cs-content for easier positioning */
    display: none;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cta-1235 {
    min-height: 37.5rem;
    display: flex;
    align-items: center;
  }
}

#cta-1235 .cs-background:before,
#cta-1235 .cs-content:before {
  outline: none !important;
}

/*#cta-1235 .cs-topper,
#cta-1235 .cs-title,
#cta-1235 .cs-text {
  color: #000000 !important;
}*/

/*-- -------------------------- -->
<---   Side By Side  - Om Oss   -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-290 {
    padding: var(--sectionPadding);
    background-color: #f4f4f4;
    background: linear-gradient(
      45deg,
      #909090 0%,
      #f4f4f4 25%,
      #fafafa 50%,
      #f4f4f4 75%,
      #909090 100%
    );
  }
  #sbs-290 .cs-container {
    width: 100%;
    padding-top: 0;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-290 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #sbs-290 .cs-title {
    text-align: center;
  }
  #sbs-290 .cs-text {
    margin-bottom: 1rem;
    text-align: center;
  }
  #sbs-290 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-290 .cs-ul {
    width: 100%;
    margin: 0 0 2rem 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 2.2rem;
  }
  #sbs-290 .cs-li {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    list-style: none;
    text-align: left;
    width: 100%;
    max-width: 28.125rem;
    margin: 0;
    color: var(--bodyTextColor);
    position: relative;
  }
  #sbs-290 .cs-li:before {
    /* bullet */
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.9375rem;
  }

  #sbs-290 .link-inline {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    color: #cba130;
    font-weight: bold;
  }

  #sbs-290 .link-inline:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    color: var(--primary);
  }

  #sbs-290 .cs-button-solid {
    text-align: center;
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #000000;
    padding: 0;
    background-color: #cba130;
    display: inline-block;
    position: relative;
    z-index: 1000;
    transition: color 0.3s;
  }
  #sbs-290 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #000000;
    border: 1px solid #cba130;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
    transition: width 0.3s;
  }

  #sbs-290 .cs-button-solid:hover {
    color: #cba130;
  }

  #sbs-290 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-290 .cs-image-group {
    /* scaling entire section down. font-size starts at a min in vw, and stops when that value reaches 1em (16px). Since we want the picture elements to base their font size on the parent and not the root, we use ems for this entire section  */
    font-size: min(1.978vw, 0.791em);
    width: 46.0625em;
    height: 45.9375em;
    position: relative;
  }
  #sbs-290 .cs-picture {
    border-radius: 0.5rem;
    /* clips the img tag corners */
    overflow: hidden;
    position: absolute;
    display: block;
  }
  #sbs-290 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #sbs-290 .cs-picture1 {
    width: 24.875em;
    height: 24.5625em;
    top: 0;
    left: 0;
  }
  #sbs-290 .cs-picture2 {
    width: 20em;
    height: 19.875em;
    top: 4.6875em;
    right: 0;
  }
  #sbs-290 .cs-picture3 {
    width: 20.3125em;
    height: 20.125em;
    bottom: 0;
    left: 4.4375em;
  }
  #sbs-290 .cs-picture4 {
    width: 16.5em;
    height: 16.375em;
    bottom: 3.75em;
    right: 3.5625em;
  }
  #sbs-290 .cs-play-link {
    width: 6.3125em;
    height: 6.3125em;
    border-radius: 50%;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid #fff;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-15%, -15%);
    transition: background-color 0.3s, filter 0.3s, box-shadow 0.3s,
      transform 0.3s;
  }
  #sbs-290 .cs-play-link:hover {
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 24px;
    transform: translate(-15%, -15%) scale(1.1);
  }
  #sbs-290 .cs-play-link:hover img {
    transform: rotate(120deg) translate(15%, 5%);
  }
  #sbs-290 .cs-play-link img {
    width: 2em;
    height: auto;
    margin-left: 0.3125em;
    display: block;
    transition: transform 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-290 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: flex-start;
    padding-top: 0;
  }

  #sbs-290 .cs-content {
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #sbs-290 .cs-topper {
    padding-top: 5rem;
  }

  #sbs-290 .cs-title {
    text-align: left;
  }

  #sbs-290 .cs-text {
    margin-bottom: 1.5rem;
    text-align: left;
  }

  #sbs-290 .cs-image-group {
    /* reset the scale */
    font-size: min(1.1vw, 1em);
    /* prevent flexbox from squishing it */
    flex: none;
  }

  #sbs-290 .cs-content .cs-button-solid {
    /* flex item: absorb extra space on both sides → center */
    margin: 0 auto;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-290 .cs-picture:before,
  body.dark-mode #sbs-290 .cs-picture:after {
    background: var(--accent);
  }
  body.dark-mode #sbs-290 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #sbs-290 .cs-title,
  body.dark-mode #sbs-290 .cs-text,
  body.dark-mode #sbs-290 .cs-li {
    color: var(--bodyTextColorWhite);
  }
}

/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-322 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    background-color: #6f5843;
    background: radial-gradient(
      circle at center,
      #4d4d4d 0%,
      #4a4949 30%,
      #383838 70%,
      #16110d 100%
    );
  }
  #contact-322 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3.25rem;
    padding-top: 2rem;
  }
  #contact-322 .cs-content {
    text-align: left;
  }

  #contact-322 .cs-topper {
    color: #ffffff;
  }

  #contact-322 .cs-title,
  #contact-322 .cs-text {
    color: white;
  }

  #contact-322 .cs-form {
    display: flex;
    /*justify-content: space-between;*/
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
  }
  #contact-322 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    width: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #contact-322 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding-left: 1.5rem;
    border-radius: 0.5rem;
    color: var(--headerColor);
    background-color: #f7f7f7;
    border: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #contact-322 .cs-input::placeholder {
    color: #7d799c;
    opacity: 0.6;
  }
  #contact-322 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
  }
  #contact-322 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    /*min-width: 9.375rem;*/
    width: clamp(12rem, 25vw, 18rem);
    min-width: auto;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #contact-322 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #contact-322 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-322 .cs-submit {
    text-transform: uppercase;
    width: 100%;
    color: #ffffff;
    background-color: #8c7131;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: color 0.3s;
    margin: 1rem auto 0; /* top-space, then auto left/right, then no bottom */
  }
  #contact-322 .cs-submit:hover {
    color: #8c7131;
    border: 1px solid #8c7131;
    cursor: pointer;
  }
  #contact-322 .cs-right {
    width: 100%;
    /* 16px - 24px */
    padding: clamp(1rem, 3.5vw, 1.5rem);
    border-radius: 0.5rem;
    background-color: var(--primary);
    display: flex;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 24px - 32px */
    gap: clamp(1.5rem, 4vw, 2rem);
  }

  #contact-322 .cs-map {
    width: 100%;
    /* 300px - 425px */
    height: clamp(18.75rem, 63.4vw, 26.5625rem);
    border-radius: 0.5rem;
    /* clips the corners of the img tag */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #contact-322 .cs-map:before {
    content: "";
    position: absolute;
    display: block;
    /* 32px - 48px */
    /*width: clamp(2rem, 4vw, 3rem);
        height: clamp(2rem, 4vw, 3rem);*/
    width: 2.5rem;
    height: 2.5rem;
    background: url("https://csimg.nyc3.digitaloceanspaces.com/Contact-Page/pin-red.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 1;
    /* 148px - 220px */
    /*top: clamp(9.25rem, 30.7vw, 13.75rem);*/
    /*top: clamp(5.75rem, 18vw, 9.5rem);*/
    top: 47%;
    /* push to the center line of the div */
    /*left: 50%;*/
    left: 47%;
    /* push X amount of pixels from it's current position off the center line */
    margin-left: 0.625rem;
    z-index: 10;
    transform: translate(-50%, -100%);
  }
  #contact-322 .cs-map img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  /*#contact-322 .cs-map {
        box-sizing: border-box;                 /* include padding in the height/width */ /*
        padding: clamp(1rem, 3.5vw, 1.5rem);     /* same gap top/right/bottom/left */ /*
        width: 100%;
        /* 300px - 425px */ /*
        height: clamp(18.75rem, 63.4vw, 26.5625rem);
        border-radius: 0.5rem;
        /* clips the corners of the img tag */ /*
        overflow: hidden;
        position: relative;
        /*display: block;*/ /*
    }

    #contact-322 .cs-map iframe {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;   /* fill the padded area */ /*
        width: 100%;
        height: 100%;
        border: 0;
    }*/

  #contact-322 .cs-contact-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  #contact-322 .cs-item {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  #contact-322 .cs-header {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #ffffff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.2rem;
  }
  #contact-322 .cs-link,
  #contact-322 .cs-hours {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    color: var(--bodyTextColorWhite);
    transition: color 0.3s;
  }
  #contact-322 .cs-link:hover {
    color: var(--secondaryLight);
  }
}

/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
  #contact-322 .cs-contact-group {
    /*width: 100%;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem; /* breathing room at the very edges */
    box-sizing: border-box; /* include that padding in the 100% width */
    gap: clamp(
      0.5rem,
      2vw,
      1rem
    ); /* smaller gap between items so they don’t run out of space */
  }

  #contact-322 .cs-contact-group .cs-link {
    white-space: nowrap; /* never wrap mid-string */
    overflow: hidden;
    text-overflow: ellipsis; /* graceful “…” if it really can’t fit */
  }

  #contact-322 .cs-title {
    white-space: nowrap; /* no breaks */
    overflow: hidden; /* hide any overflow */
    text-overflow: ellipsis; /* grace-fully truncate with “…” if it really can’t fit */
    max-width: none; /* let it use the full container width */
    color: white;
  }

  #contact-322 .cs-text {
    color: white;
  }

  #contact-322 .cs-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* ← center icon, heading & link */
    text-align: center; /* ← also center the text itself */
  }
  #contact-322 .cs-button-solid {
    margin: 1rem auto 0;
  }

  /*#contact-322 .cs-map {
        box-sizing: border-box;                 /* include padding in the height/width */ /*
        padding: clamp(1rem, 3.5vw, 1.5rem);     /* same gap top/right/bottom/left */ /*
        width: 100%;
        /* 300px - 425px */ /*
        height: clamp(18.75rem, 63.4vw, 26.5625rem);
        border-radius: 0.5rem;
        /* clips the corners of the img tag */ /*
        overflow: hidden;
        position: relative;
        /*display: block;*/ /*
    }

    /*#contact-322 .cs-map iframe {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;   /* fill the padded area */ /*
        width: 100%;
        height: 100%;
        border: 0;
    }*/
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-322 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #contact-322 .cs-content {
    max-width: 32.625rem;
  }

  #contact-322 .cs-topper {
    text-align: left;
    margin-left: 0;
    color: #ffffff;
  }
  #contact-322 .cs-title {
    max-width: 32.625rem;
  }

  #contact-322 .cs-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* match your design’s horizontal gap */
  }

  /* each half-width field takes up exactly half minus half the gap */
  #contact-322 .cs-email,
  #contact-322 .cs-phone {
    width: calc(50% - 0.5rem);
  }

  #contact-322 .cs-button-solid {
    margin: 1rem auto 0;
  }
  #contact-322 .cs-right {
    width: 51.6%;
    max-width: 41.125rem;
    /* prevent flexbox from squishing it */
    flex: none;
    align-self: stretch; /* makes the right panel fill the left panel’s height */
  }

  /*#contact-322 .cs-map {
        box-sizing: border-box;                 /* include padding in the height/width */ /*
        padding: clamp(1rem, 3.5vw, 1.5rem);     /* same gap top/right/bottom/left */ /*
        width: 100%;
        /* 300px - 425px */ /*
        height: clamp(18.75rem, 63.4vw, 26.5625rem);
        border-radius: 0.5rem;
        /* clips the corners of the img tag */ /*
        overflow: hidden;
        position: relative;
        /*display: block;*/ /*
    }

    /*#contact-322 .cs-map iframe {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;   /* fill the padded area */ /*
        width: 100%;
        height: 100%;
        border: 0;
    }*/
}

#contact-322 .cs-title {
  font-size: 2.5rem;
  white-space: normal; /* default—allows wrapping */
  overflow: visible;
  text-overflow: clip;
}

#contact-322 .cs-icon {
  width: 1.8rem; /* shrink to matched */
  height: auto;
  margin: 0 0.5rem 0 0; /* spacing to the right of icon */
}

/* smooth transition */
#contact-322 .cs-link {
  transition: color 0.3s;
  text-decoration: none; /* ensure no underline */
}

/* on hover, turn gold */
#contact-322 .cs-link:hover {
  color: var(--secondary);
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #contact-322 .cs-topper {
    color: var(--secondaryLight);
  }
  body.dark-mode #contact-322 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-322 .cs-label {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-322 .cs-input {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-322 .cs-input::placeholder {
    color: #fff;
    opacity: 0.5;
  }
  body.dark-mode #contact-322 .cs-right {
    background-color: var(--medium);
  }
}

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1237 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #d7d4d4;
  }
  #faq-1237 .cs-container {
    width: 100%;
    /* chnages to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
    padding-top: 0;
  }
  #faq-1237 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    padding-top: 0;
  }

  #faq-1237 .cs-title {
    margin: 0;
  }
  #faq-1237 .cs-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 16px - 20px */
    gap: clamp(1rem, 2.4vw, 1.25rem);
  }
  #faq-1237 .cs-faq-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.4vw, 1.25rem);
  }
  #faq-1237 .cs-faq-item {
    list-style: none;
    width: 100%;
    background-color: #f7f7f7;
    padding: 0;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
  }
  #faq-1237 .cs-faq-item.active {
    background-color: #1a1a1a;
  }
  #faq-1237 .cs-faq-item.active .cs-button {
    /*color: var(--primary);*/
    color: #ffffff;
    background-color: var(--primary);
  }
  #faq-1237 .cs-faq-item.active .cs-button:before {
    background-color: var(--primary);
    transform: rotate(315deg);
  }
  #faq-1237 .cs-faq-item.active .cs-button:after {
    background-color: var(--primary);
    transform: rotate(-315deg);
  }
  #faq-1237 .cs-faq-item.active .cs-number {
    /*background-color: #1a1a1a;
      color: var(--primary);*/
    background-color: var(--primary);
    color: #ffffff;
  }
  #faq-1237 .cs-faq-item.active .cs-number:before {
    height: 100%;
    opacity: 0.3;
  }
  #faq-1237 .cs-faq-item.active .cs-number:after {
    width: 100vw;
    opacity: 0.3;
  }
  #faq-1237 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 16px - 24px */
    padding-top: clamp(1rem, 2.5vw, 1.5rem);
    padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
    /* ensure it still fills the container */
    width: auto;
    max-width: none;
  }
  #faq-1237 .cs-faq-item.active .cs-item-p2 {
    padding-top: 0;
  }

  #faq-1237 .link-inline {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    color: #cba130;
    font-weight: bold;
  }

  #faq-1237 .link-inline:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    color: #ffffff;
  }

  #faq-1237 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    width: 100%;
    padding: 0 2.5rem 0 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    /* 16px - 24px */
    gap: clamp(1rem, 2.5vw, 1.5rem);
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1237 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1237 .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 1.1875rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq-1237 .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 1rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq-1237 .cs-number {
    font-size: 1.25rem;
    line-height: 1.5em;
    /* 52px - 72px */
    width: clamp(3.25rem, 6vw, 4.5rem);
    color: var(--headerColor);
    background-color: #e8e8e8;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    transition: background-color 0.3s;
  }
  #faq-1237 .cs-number:before {
    /* yellow border right on active */
    content: "";
    width: 1px;
    height: 0;
    background: var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: -1px;
    right: 0;
    transition: opacity 0.3s, height 0.6s;
    transition-delay: 0.1s;
  }
  #faq-1237 .cs-number:after {
    /* yellow border bottom on active */
    content: "";
    width: 0;
    height: 1px;
    background: var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    transition: opacity 0.3s, width 1s;
  }
  #faq-1237 .cs-button-text {
    width: 90%;
    /* 16px - 24px */
    padding: clamp(1rem, 2.5vw, 1.5rem) 0;
    display: block;
  }
  #faq-1237 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    /*width: 90%;
      max-width: 33.8125rem;*/
    width: auto;
    max-width: none;
    height: 0;
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2.5vw, 1.5rem);
    box-sizing: border-box; /* include padding in the width */
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s, padding-top 0.3s;
  }
  #faq-1237 .cs-floater {
    display: none;
  }

  #faq-1237 .cs-cta {
    text-align: center;
    width: 100%;
    max-width: 90rem; /* clamp it at 90rem (1440px) */
    margin: 2rem auto 0; /* auto‐center it horizontally */
    /* 32px - 40px */
    padding: clamp(2rem, 4vw, 2.5rem);
    border: 1px solid var(--primary);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-color: #f7f7f7;
    overflow: hidden; /* 1) clip children at the rounded corners */
  }
  #faq-1237 .cs-cta:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
    border-radius: inherit; /* 2) give it the same border-radius so it matches exactly */
  }
  #faq-1237 .cs-flex {
    display: flex;
    flex-direction: column;
  }
  #faq-1237 .cs-cta-title {
    font-size: 1.9375rem;
    font-weight: 900;
    line-height: 1.2em;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #faq-1237 .cs-cta-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
  }
  #faq-1237 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    /*min-width: 13rem;*/
    width: clamp(12rem, 25vw, 18rem);
    min-width: auto;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 2rem;
    background-color: var(--primary);
    color: #fff;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #faq-1237 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #cba130;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #faq-1237 .cs-button-solid:hover:before {
    width: 100%;
  }
}

/* tablet - 768px */
@media only screen and (min-width: 48rem) {
  #faq-1237 .cs-container {
    max-width: 90rem;
  }
  #faq-1237 .cs-wrapper {
    /*flex-direction: row;
      align-items: flex-start;*/
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(0.5rem, 1vw, 1rem);
  }

  #faq-1237 .cs-number {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: clamp(3rem, 5vw, 4rem);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e8e8e8;
  }

  #faq-1237 .cs-wrapper .cs-faq-group {
    flex: 1 1 49%; /* grow/shrink to exactly 50% */
    max-width: 49%;
    min-width: 0; /* allow it to shrink under flex */
  }

  #faq-1237 .cs-button-text {
    margin-left: clamp(3rem, 5vw, 4rem); /* number width + small gap */
    flex: 1;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 2) Clip overflow if it ever does exceed, so it won’t push the height */
  #faq-1237 .cs-button {
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(0.5rem, 1.5vw, 1rem) /* vertical */ clamp(0.5rem, 2vw, 1rem); /* horizontal */
    gap: clamp(0.5rem, 1vw, 1rem);
    overflow: hidden;
  }

  #faq-1237 .cs-cta {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
  }
  #faq-1237 .cs-cta-text {
    margin: 0;
  }
  #faq-1237 .cs-button-solid {
    flex-shrink: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-1237 .cs-title,
  body.dark-mode #faq-1237 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1237 .cs-item-p {
    opacity: 0.8;
  }
  body.dark-mode #faq-1237 .cs-faq-item {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #faq-1237 .cs-faq-item.active {
    background-color: rgba(0, 0, 0, 0.6);
  }
  body.dark-mode #faq-1237 .cs-faq-item.active .cs-button {
    color: var(--secondary);
  }
  body.dark-mode #faq-1237 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-1237 .cs-faq-item.active .cs-button:after {
    background-color: var(--secondary);
  }
  body.dark-mode #faq-1237 .cs-faq-item.active .cs-number {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #faq-1237 .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1237 .cs-button:before,
  body.dark-mode #faq-1237 .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1237 .cs-number {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--bodyTextColorWhite);
  }
}

/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-1104 {
    padding: var(--sectionPadding);
    position: relative;
    background-color: #1a1a1a;
    padding-bottom: 0.5rem;
  }
  #cs-footer-1104 .cs-container {
    width: 100%;
    /* reset on desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding-bottom: 2rem;
  }
  #cs-footer-1104 .cs-logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }
  #cs-footer-1104 .cs-logo {
    width: 100%;
    /*width: 4rem;*/
    max-width: 100%;
    height: auto;
    /*display: block;*/
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem; /* space between icon and words */
    text-decoration: none;
  }
  #cs-footer-1104 .cs-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.5em;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    /* changes to 305px at desktop */
    max-width: 26.25rem;
    color: #ffffff;
  }
  #cs-footer-1104 .cs-nav {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
  }
  #cs-footer-1104 .cs-nav-li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #cs-footer-1104 .cs-header {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: block;
  }
  #cs-footer-1104 .cs-nav-link {
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: inline-block;
    transition: color 0.3s;
  }
  #cs-footer-1104 .cs-nav-link:before {
    /* underline */
    content: "";
    width: 0%;
    height: 0.125rem;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.125rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-footer-1104 .cs-nav-link:hover {
    color: var(--secondary);
  }
  #cs-footer-1104 .cs-nav-link:hover:before {
    width: 100%;
  }
  #cs-footer-1104 .cs-icon {
    width: 1.5rem;
    height: auto;
    margin-right: 0.75rem;
  }

  #cs-footer-1104 .cs-bottom {
    display: flex; /* byt från grid */
    flex-direction: column; /* stapla vertikalt */
    align-items: center; /* mittenjustera */
    gap: 0.5rem; /* avstånd mellan länkarna */

    /* avaktivera grid-specarna */
    grid-template-columns: none;
    padding: 2rem 0 2rem 0;
  }
  /* se till att vänster/höger‐justeringen inte krockar */
  #cs-footer-1104 .cs-bottom-left,
  #cs-footer-1104 .cs-bottom-right {
    justify-self: auto;
    color: var(--bodyTextColorWhite);
  }

  #cs-footer-1104 .cs-bottom-link {
    font-size: 1rem;
    color: var(--bodyTextColorWhite);
    text-decoration: none;
    transition: color 0.3s;
  }

  #cs-footer-1104 .cs-bottom-link:hover {
    color: var(--secondary);
  }

  #cs-footer-1104 .cs-bottom-left {
    justify-self: start;
    padding-bottom: 1.5rem;
  }
  #cs-footer-1104 .cs-bottom-right {
    justify-self: end;
  }

  #cs-footer-1104 .cs-bottom-copyright {
    justify-self: center;
    font-size: 1rem;
    color: var(--bodyTextColorWhite);
  }

  #cs-footer-1104 .cs-copyright,
  #cs-footer-1104 .cs-copyright-link {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
  }
  #cs-footer-1104 .cs-copyright-link {
    text-decoration: none;
    transition: color 0.3s;
  }
  #cs-footer-1104 .cs-copyright-link:hover {
    color: var(--secondary);
  }
  #cs-footer-1104 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cs-footer-1104 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: -moz-linear-gradient(
      left,
      rgba(26, 26, 26, 0.94) 0%,
      #1a1a1a 100%
    );
    /* FF3.6-15 */
    background: -webkit-linear-gradient(
      left,
      rgba(26, 26, 26, 0.94) 0%,
      #1a1a1a 100%
    );
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right,
      rgba(26, 26, 26, 0.94) 0%,
      #1a1a1a 100%
    );
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    opacity: 0.97;
    top: 0;
    left: 0;
    z-index: 1;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-1104 .cs-container {
    row-gap: 0;
    flex-direction: row;
    justify-content: space-between;
    row-gap: 2.5rem;
  }

  #cs-footer-1104 .cs-bottom-left {
    padding-bottom: 0rem;
  }

  #cs-footer-1104 .cs-text {
    /* 14px - 16px */
    width: 78%;
    text-align: left;
  }

  #cs-footer-1104 .cs-nav {
    width: auto;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  #cs-footer-1104 .cs-bottom {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 1.5rem var(--sectionPadding);
    border-top: 1px solid #484848;
    background: transparent;
  }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-1104 .cs-container {
    max-width: 80rem;
    flex-wrap: nowrap;
    /* align everything to the right */
    justify-content: flex-end;
    column-gap: 5.25rem;
  }
  #cs-footer-1104 .cs-logo-group {
    width: 30%;
    max-width: 24.1875rem;
    /* pushes away from everything to the right */
    margin-right: auto;
  }
  #cs-footer-1104 .cs-text {
    width: 100%;
  }

  #cs-footer-1104 .cs-bottom {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 2rem 0 2rem 0;
    border-top: 1px solid #484848;
    background: transparent;

    /* ⇢ CAP THE WIDTH AND CENTER IT ⇢ */
    max-width: 80rem; /* same “container” cap you use elsewhere */
    margin: 0 auto; /* horizontally center within the viewport */
  }
}

#cs-footer-1104 .cs-logo .logo-icon {
  height: clamp(1.5rem, 4vw, 3rem);
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: color 0.3s, filter 0.3s;
}

#cs-footer-1104 .cs-logo .logo-text {
  font-size: clamp(0.75rem, 2.7vw, 1.15rem);
  color: #fff !important;
  font-family: Georgia;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  transition: color 0.3s, filter 0.3s;
}

/*#cs-footer-1104 .cs-logo:hover .logo-text {
  color: #cba130 !important;
}

#cs-footer-1104 .cs-logo:hover .logo-icon {
  /* approximate the gold tint on your PNG */ /*
  filter:
    invert(65%)
    sepia(83%)
    saturate(400%)
    hue-rotate(3deg)
    brightness(87%)
    contrast(86%);
}*/

/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-850 {
    /* 175px - 260px top */
    padding: clamp(6.9375rem, 15vw, 13.25rem) 1rem clamp(4.25rem, 12vw, 10vw);
    /* clips svg wave from causing overflow issues */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #banner-850 .cs-container {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
  #banner-850 .cs-int-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #banner-850 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #banner-850 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.64;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #banner-850 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
  #banner-850 .cs-wave {
    /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
    width: 48rem;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    z-index: -1;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #banner-850 .cs-background:before {
    opacity: 1;
    background: linear-gradient(
      90.01deg,
      rgba(0, 0, 0, 0.9) 16.86%,
      rgba(0, 0, 0, 0) 100%
    );
  }
  #banner-850 .cs-wave {
    width: 100%;
    left: 0;
    transform: none;
  }
}

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #content-page-850 {
    padding: var(--sectionPadding);
    background-color: #fff;
    /* clips the wave background from causing overflow issues when it goes off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #content-page-850 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #content-page-850 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #content-page-850 h2,
  #content-page-850 h3,
  #content-page-850 h4,
  #content-page-850 h5,
  #content-page-850 h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #content-page-850 h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
  #content-page-850 h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }
  #content-page-850 h4,
  #content-page-850 h5,
  #content-page-850 h6 {
    font-size: 1.25rem;
  }
  #content-page-850 .cs-button-solid {
    margin-bottom: 2rem;
  }
  #content-page-850 .cs-no-margin {
    margin: 0;
  }
  #content-page-850 .cs-color {
    color: var(--primary);
  }
  #content-page-850 p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }
  #content-page-850 p:last-of-type {
    margin-bottom: 2rem;
  }
  #content-page-850 p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
  }
  #content-page-850 ol,
  #content-page-850 ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #content-page-850 ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }
  #content-page-850 ul li:before {
    /* custom list bullet */
    content: "";
    width: 3px;
    height: 3px;
    background: currentColor;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.75rem;
  }
  #content-page-850 img {
    width: 100%;
    height: auto;
    display: block;
  }
  #content-page-850 .cs-image-group {
    width: 50%;
    max-width: 33.875rem;
    display: none;
    position: relative;
    flex-direction: column;
    gap: 1.25rem;
  }
  #content-page-850 .cs-picture {
    width: 100%;
    /* 300px - 520px */
    height: clamp(18.75rem, 40vw, 32.5rem);
    box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
    /* 125px - 200px */
    border-radius: clamp(7.8125rem, 15vw, 12.5rem) 0
      clamp(7.8125rem, 15vw, 12.5rem) 0;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    /* clips img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #content-page-850 .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #content-page-850 .cs-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  #content-page-850 .cs-content {
    flex: none;
    width: 60%;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #content-page-850 .cs-image-group {
    display: flex;
  }
}