:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #25605C;
    --primaryLight: #37b886;
    --secondary: #37b886; 
    --secondaryLight: #4ad49f;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1.2rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}


  /* playfair-display-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/playfair-display-v37-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }


  /* roboto-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  

body {
    margin: 0;
    padding: 0;
    font-family:'Roboto', sans-serif;
 
}

.cs-h3,
.cs-faq-item .cs-button-text {
    font-family: 'Playfair Display', sans-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: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-family: 'Playfair Display', sans-serif;
    font-weight: 700;
    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);
}









body {
    margin: 0;
    padding: 0;
  }
  
  /* Add this as it's own dark.css file and linked on all pages */
  /*-- -------------------------- -->
  <---      Core Dark Styles      -->
  <--- -------------------------- -*/
  /* Mobile */
  @media only screen and (min-width: 0rem) {
    :root {
      --dark: #121212;
      --medium: #282828;
      --accent: #404040;
      --bodyTextColorWhite: #fafbfc;
    }
    body.dark-mode {
      background-color: var(--dark);
    }
    body.dark-mode p,
    body.dark-mode li,
    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode h5,
    body.dark-mode h6,
    body.dark-mode .cs-title,
    body.dark-mode .cs-text,
    body.dark-mode .cs-li {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode .light {
      display: none;
    }
    body.dark-mode .dark {
      display: block !important;
    }
    .dark {
      /* class used to hide elements that only need to be seen when dark mode is enabled */
      display: none;
    }
  }
  /*-- -------------------------- -->
  <---      Dark Mode Toggle      -->
  <--- -------------------------- -*/
  /* Mobile */
  @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;
    }
    #dark-mode-toggle {
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 3.75rem;
      width: 3rem;
      height: 3rem;
      background: transparent;
      border: none;
      overflow: hidden;
      padding: 0;
    }
    #dark-mode-toggle img,
    #dark-mode-toggle svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1.5625rem;
      height: 1.5625rem;
      pointer-events: none;
    }
    #dark-mode-toggle .cs-moon {
      z-index: 2;
      transition: transform 0.3s,
                  opacity 0.3s,
                  fill 0.3s;
      fill: #000;
    }
    #dark-mode-toggle .cs-sun {
      z-index: 1;
      transform: translate(-50%, 100%);
      opacity: 0;
      transition: transform 0.3s,
                  opacity 0.3s;
    }
  }
  /* Desktop */
  @media only screen and (min-width: 64rem) {
    #dark-mode-toggle {
      position: relative;
      top: auto;
      right: auto;
      transform: none;
      margin-left: 1.875rem;
      margin-bottom: 0rem;
    }
    #dark-mode-toggle .cs-moon {
      /* change to whatever you need it to be */
      /* fill: #fff; */
    }
  }
                

  /*-- -------------------------- -->
<---      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;
    }
    #dark-mode-toggle {
      display: block;
      position: absolute;
      top: 50%; /* Vertical center */
      right: 3.75rem; /* Adjust as needed */
      width: 3rem;
      height: 3rem;
      background: transparent;
      border: none;
      overflow: hidden;
      padding: 0;
      transform: translateY(-50%); /* Centers it vertically */
      z-index: 1000; /* Ensure it’s above other elements */
    }
    #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 .3s, opacity .3s;
      fill: #1a1a1a;
    }
    #dark-mode-toggle .cs-sun {
      z-index: 1;
      transform: translate(-50%, 100%);
      opacity: 0;
      transition: transform .3s, opacity .3s;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #dark-mode-toggle {
      margin-left: 1rem;
      position: relative; /* Overrides absolute positioning */
      top: auto;
      bottom: auto;
      right: auto;
      transform: none; /* Remove transform if it's not needed */
      order: 3;
  }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #dark-mode-toggle {
      position: relative;
      transform: none;
      bottom: auto;
      right: auto;
      margin: 0;
    }
    #dark-mode-toggle:hover {
      cursor: pointer;
    }
  }
  
  /*-- -------------------------- -->
  <---     Mobile Navigation      -->
  <--- -------------------------- -*/
  
  /* Mobile - 1023px */
  @media only screen and (max-width: 1024px) {
    body.cs-open {
      overflow: hidden;
    }
    body.scroll #cs-navigation {
      /* 53px, same height as the cs-top-container */
      transform: translateY(-3.3125rem);
    }
    #cs-navigation {
      width: 100%;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
      transition: transform .3s;
    }
    #cs-navigation:before {
      content: '';
      width: 100%;
      height: 0vh;
      background: rgba(0, 0, 0, 0.6);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      position: absolute;
      display: block;
      top: 100%;
      right: 0;
      z-index: -1100;
      opacity: 0;
      transition: height .5s, opacity .5s;
    }
    #cs-navigation.cs-active:before {
      height: 150vh;
      opacity: 1;
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
      opacity: 1;
      transform: scaleY(1);
      transition-delay: .15s;
    }
    #cs-navigation.cs-active .cs-li {
      transform: translateY(0);
      opacity: 1;
    }
    #cs-navigation .cs-top-bar {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #cs-navigation .cs-top-container {
      width: 100%;
      padding: 1rem 1.5rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #f7f7f7;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    #cs-navigation .cs-top-contact {
      width: auto;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      /* 16px - 24px */
      gap: clamp(1rem, 2vw, 1.5rem);
    }
    #cs-navigation .cs-top-link {
      font-size: 0.875rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    #cs-navigation .cs-top-link:nth-of-type(2) {
      display: none;
    }
    #cs-navigation .cs-link-icon {
      width: 1rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-top-social {
      visibility: visible;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      transition: opacity .3s, visibility .3s, height .3s;
    }
    #cs-navigation .cs-social-link {
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    #cs-navigation .cs-social-icon {
      width: 1.25rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-container {
      width: 100%;
      padding: 1.25rem 1rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
    }
    #cs-navigation .cs-logo {
      width: auto;
      height: 2.5rem;
      margin: 0 auto 0 0;
      padding: 0;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      order: 1;
      z-index: 10;
    }
    #cs-navigation .cs-logo img {
      width: auto;
      height: 100%;
      /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
      object-fit: contain;
    }
    #cs-navigation .cs-nav {
      order: 2;
    }
    #cs-navigation .cs-toggle {
      width: 2.875rem;
      height: 2.875rem;
      margin: 0 0 0 auto;
      background-color: var(--primary);
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform .6s;
    }
    #cs-navigation .cs-toggle.cs-active {
      transform: rotate(180deg);
    }
    #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(1.5rem, 2vw, 1.75rem);
      height: 0.75rem;
      position: relative;
    }
    #cs-navigation .cs-line {
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background-color: #FAFBFC;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
      top: 0;
      transform-origin: center;
      transition: transform .5s, top .3S, left .3S;
      animation-duration: .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 .3s, left .3s, transform .5s;
      animation-duration: .7s;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      animation-direction: normal;
    }
    #cs-navigation .cs-line3 {
      bottom: 0;
      transition: bottom .3s, opacity .3s;
    }
    #cs-navigation .cs-ul-wrapper {
      width: 100%;
      height: auto;
      padding-bottom: 3rem;
      opacity: 0;
      background-color: #fff;
      box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
      overflow: hidden;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: -1;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .4s, opacity .3s;
    }
    #cs-navigation .cs-ul {
      margin: 0;
      padding: 3rem 0 0 0;
      width: 100%;
      height: auto;
      max-height: 65vh;
      overflow: scroll;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
    }
    #cs-navigation .cs-li {
      width: 100%;
      text-align: center;
      list-style: none;
      margin-right: 0;
      /* transition from these values */
      transform: translateY(-4.375rem);
      opacity: 0;
      transition: transform .6s, opacity .9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
      transition-delay: .05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
      transition-delay: .1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
      transition-delay: .15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
      transition-delay: .2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
      transition-delay: .25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
      transition-delay: .3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
      transition-delay: .35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
      transition-delay: .4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
      transition-delay: .45s;
    }
    #cs-navigation .cs-li:nth-of-type(10) {
      transition-delay: .5s;
    }
    #cs-navigation .cs-li:nth-of-type(11) {
      transition-delay: .55s;
    }
    #cs-navigation .cs-li:nth-of-type(12) {
      transition-delay: .6s;
    }
    #cs-navigation .cs-li:nth-of-type(13) {
      transition-delay: .65s;
    }
    #cs-navigation .cs-li-link {
      /* 16px - 24px */
      font-size: clamp(1rem, 2.5vw, 1.5rem);
      line-height: 1.2em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: inline-block;
      position: relative;
    }
    #cs-navigation .cs-li-link.cs-active {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link:hover {
      color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
      display: none;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #cs-navigation .cs-top-link:nth-of-type(2) {
      display: flex;
    }
  }
  /* Dark Mode */
  @media only screen and (max-width: 1024px) {
    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-top-container {
      background-color: rgba(0, 0, 0, 0.2);
    }
    body.dark-mode #cs-navigation .cs-top-link,
    body.dark-mode #cs-navigation .cs-desc {
      color: var(--bodyTextColorWhite);
      opacity: .8;
    }
    body.dark-mode #cs-navigation .cs-link-icon {
      filter: grayscale(1) brightness(1000%);
    }
    body.dark-mode #cs-navigation .cs-ul-wrapper {
      background-color: var(--medium);
    }
    body.dark-mode #cs-navigation .cs-li-link,
    body.dark-mode #cs-navigation .cs-header {
      color: var(--bodyTextColorWhite);
    }
  }
  
  /*-- -------------------------- -->
  <---     Navigation Dropdown    -->
  <--- -------------------------- -*/
  
  /* Mobile - 1023px */
  @media only screen and (max-width: 1024px) {
    #cs-navigation .cs-li {
      text-align: center;
      width: 100%;
      display: block;
    }
    #cs-navigation .cs-dropdown {
      position: relative;
      color: var(--bodyTextColorWhite);
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
      height: auto;
      opacity: 1;
      visibility: visible;
      margin: 0.75rem 0 0 0;
      padding: 0.75rem 0;
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
      opacity: 1;
    }
    #cs-navigation .cs-dropdown .cs-li-link {
      position: relative;
      transition: opacity .3s;
    }
    #cs-navigation .cs-drop-icon {
      width: 0.9375rem;
      height: auto;
      position: absolute;
      top: 50%;
      right: -1.25rem;
      transform: translateY(-50%);
    }
    #cs-navigation .cs-drop-ul {
      width: 100%;
      height: 0;
      margin: 0;
      padding: 0;
      background-color: var(--primary);
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      transition: padding .3s, margin .3s, height .3s, opacity .3s, visibility .3s;
    }
    #cs-navigation .cs-drop-li {
      list-style: none;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 2vw, 1.25rem);
      color: #fff;
    }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cs-navigation .cs-dropdown {
      position: relative;
    }
    #cs-navigation .cs-dropdown:hover {
      cursor: pointer;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-ul {
      transform: scaleY(1);
      opacity: 1;
      visibility: visible;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-li {
      opacity: 1;
      transform: translateY(0);
    }
    #cs-navigation .cs-drop-icon {
      width: 0.75rem;
      height: auto;
      margin-left: 0.25rem;
      display: inline-block;
    }
    #cs-navigation .cs-drop-ul {
      min-width: 12.5rem;
      margin: 0;
      padding: 0;
      background-color: #fff;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
      border-bottom: 5px solid var(--primary);
      /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
      position: absolute;
      top: 100%;
      z-index: -100;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .3s, visibility .3s, opacity .3s;
    }
    #cs-navigation .cs-drop-li {
      list-style: none;
      font-size: 1rem;
      text-decoration: none;
      opacity: 0;
      width: 100%;
      height: auto;
      display: block;
      transform: translateY(-0.625rem);
      transition: opacity .6s, transform .6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(1) {
      transition-delay: .05s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(2) {
      transition-delay: .1s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(3) {
      transition-delay: .15s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(4) {
      transition-delay: .2s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(5) {
      transition-delay: .25s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(6) {
      transition-delay: .3s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(7) {
      transition-delay: .35s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(8) {
      transition-delay: .4s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(9) {
      transition-delay: .45s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(10) {
      transition-delay: .5s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(11) {
      transition-delay: .55s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(12) {
      transition-delay: .6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(13) {
      transition-delay: .65s;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      font-size: 1rem;
      white-space: nowrap;
      line-height: 1.5em;
      text-decoration: none;
      width: 100%;
      padding: 0.75rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      color: var(--bodyTextColor);
      display: block;
      transition: color 0.3s, background-color 0.3s;
    }
    #cs-navigation .cs-li-link.cs-drop-link:hover {
      color: var(--primary);
      background-color: #f7f7f7;
    }
    #cs-navigation .cs-li-link.cs-drop-link:before {
      display: none;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #cs-navigation .cs-drop-ul {
      background-color: var(--dark);
    }
    body.dark-mode #cs-navigation .cs-drop-icon {
      filter: grayscale(1) brightness(1000%);
    }
    body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover {
      color: var(--bodyTextColorWhite);
      background-color: rgba(255, 255, 255, 0.2);
    }
    body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:before {
      display: none;
    }
  }
  
  /*-- -------------------------- -->
  <---     Desktop Navigation     -->
  <--- -------------------------- -*/
  
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    body.scroll #cs-navigation {
      /* 53px, the ssme height as the cs-top-container */
      transform: translateY(-3.3125rem);
    }
    #cs-navigation {
      width: 100%;
      padding: 0;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
      transition: transform .3s;
    }
    #cs-navigation .cs-top-bar {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #cs-navigation .cs-top-container {
      width: 100%;
      max-width: 80rem;
      padding: 1rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 3.125rem;
      position: relative;
      z-index: 1;
    }
    #cs-navigation .cs-top-container:before {
      /* grey background */
      content: '';
      width: 100vw;
      height: 100%;
      background: #f7f7f7;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 50%;
      z-index: -1;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-top-contact {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-top-link {
      font-size: 0.875rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    #cs-navigation .cs-top-link:hover {
      text-decoration: underline;
    }
    #cs-navigation .cs-link-icon {
      width: 1rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-top-social {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    #cs-navigation .cs-social-link {
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform .3s;
    }
    #cs-navigation .cs-social-link:hover {
      transform: scale(1.1);
    }
    #cs-navigation .cs-social-icon {
      width: 1.25rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      padding: 0 1rem;
      /* prevents padding from affectin gheight */
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 1.5rem;
      position: relative;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }
    #cs-navigation .cs-logo {
      /* 40px - 44px */
      height: clamp(2.5rem, 4vw, 2.75rem);
      /* margin-right auto pushes everything away from it to the right */
      margin: 0 auto 0 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 100;
    }
    #cs-navigation .cs-logo img {
      width: auto;
      height: 100%;
      /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
      object-fit: contain;
    }
    #cs-navigation .cs-ul {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 3rem;
    }
    #cs-navigation .cs-li {
      list-style: none;
      padding: 1.9375rem 0;
      /* prevent flexbox from squishing it */
      flex: none;
    }
    #cs-navigation .cs-li-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.3vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: block;
      position: relative;
      transition: color .3s;
    }
    #cs-navigation .cs-li-link:hover {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-active {
      font-weight: 700;
      color: var(--headerColor);
    }
    #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;
      padding: 0 2rem;
      background-color: var(--primary);
      overflow: hidden;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition: color .3s;
    }
    #cs-navigation .cs-button-solid:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 0%;
      background: #1a1a1a;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width .3s;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }
    #cs-navigation .cs-nav-button {
      line-height: 2.875rem;
      margin-left: 1.5rem;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 64rem) {
    body.dark-mode #cs-navigation {
      background-color: var(--dark);
    }
    body.dark-mode #cs-navigation .cs-top-container:before {
      background-color: rgba(0, 0, 0, 0.2);
    }
    body.dark-mode #cs-navigation .cs-li-link,
    body.dark-mode #cs-navigation .cs-top-link {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode #cs-navigation .cs-li-link:hover,
    body.dark-mode #cs-navigation .cs-top-link:hover {
      color: var(--secondary);
    }
    body.dark-mode #cs-navigation .cs-top-link {
      opacity: .8;
    }
    body.dark-mode #cs-navigation .cs-logo,
    body.dark-mode #cs-navigation .cs-link-icon {
      /* turns it white */
      filter: grayscale(1) brightness(1000%);
    }
  }

/*-- -------------------------- -->
<---      Layout Hardening      -->
<--- -------------------------- -*/

/*
  The nav is declared `position: fixed` in several places but never sets `top`
  or `left`. A fixed element with auto offsets is painted at its STATIC
  position, so anything that shifts where the header would have sat in normal
  flow drags the fixed bar sideways with it -- and because it is also
  `width: 100%`, it then overflows off the right edge of the screen.

  Anchoring it to the viewport makes the header immune to whatever the page
  below it is doing. `header#cs-navigation` is used so this outranks the plain
  `#cs-navigation` rules in the inline <style> blocks of the header partials,
  which would otherwise win by source order.
*/
header#cs-navigation {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
}

/*
  When an admin is logged in, WordPress pins its 32px toolbar to the top of the
  viewport. Our header is also fixed at top: 0, so the two stack on top of each
  other. Push the header down by the toolbar's height whenever WordPress adds
  the .admin-bar class to <body>.
*/
body.admin-bar header#cs-navigation {
  top: 32px;
}
/* WordPress grows the toolbar to 46px on narrow screens. */
@media screen and (max-width: 782px) {
  body.admin-bar header#cs-navigation {
    top: 46px;
  }
}
/* Below 600px the toolbar switches to position: absolute and scrolls away with
   the page, so the header goes back to the top of the viewport. */
@media screen and (max-width: 600px) {
  body.admin-bar header#cs-navigation {
    top: 0;
  }
}

/* Never let a page scroll sideways. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/*-- -------------------------- -->
<---     Header Cart Button     -->
<--- -------------------------- -*/

/*
  These live here rather than in woocommerce.css because the cart button is
  part of the site header and therefore renders on EVERY page, while
  woocommerce.css only loads on store views. Keeping them there left the
  button unstyled everywhere except the shop.
*/
@media only screen and (min-width: 0rem) {
  .cs-cart-button {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--headerColor);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    /* Clears the dark-mode toggle, pinned at right: 4.375rem with a 3rem box. */
    right: 7.75rem;
    transform: translateY(-50%);
    z-index: 100;
    transition: color 0.3s;
  }
  .cs-cart-button:hover {
    color: var(--primary);
  }
  .cs-cart-icon {
    width: 1.375rem;
    height: 1.375rem;
    display: block;
  }
  .cs-cart-count {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    box-sizing: border-box;
    color: #fff;
    background-color: var(--primary);
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0.25rem;
    right: 0.125rem;
  }
  .cs-cart-count[hidden] {
    display: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  .cs-cart-button {
    margin: 0;
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    flex: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode .cs-cart-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode .cs-cart-button:hover {
    color: var(--secondaryLight);
  }
  body.dark-mode .cs-cart-count {
    color: var(--dark);
    background-color: var(--secondaryLight);
  }
}

/*-- -------------------------- -->
<---   Narrow Desktop Nav Fit   -->
<--- -------------------------- -*/

/*
  The desktop nav switches on at 1024px, but with Home + two long dropdown
  labels + Blog + Store + cart + Contact there isn't room for all of it until
  roughly 1200px. The nav <ul> is width:100% in a flex row, so it claimed the
  full container and the items after it (cart, Contact) ended up overlapped.
  Letting the list size to its content and tightening the run between 1024px
  and 1200px keeps everything on one line without collisions.
*/
/*
  NOTE ON SPECIFICITY: each header partial repeats these rules inside an inline
  <style> block, which renders in <body> and therefore AFTER this file. At equal
  specificity source order wins, so a plain `#cs-navigation .cs-ul` here would
  lose. Prefixing with the element (`header#cs-navigation`) adds one point and
  puts these back in charge.
*/
@media only screen and (min-width: 64rem) {
  header#cs-navigation .cs-ul {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
  }
  header#cs-navigation .cs-button-solid {
    flex: none;
  }
}
/*
  Shortening the two dropdown labels to "Cybersecurity" and "Engineering"
  recovered enough width that the nav links keep their normal size here. Only
  the surrounding spacing and the Contact button are trimmed; the link text
  itself is left on the theme's own clamp (which resolves to 14px across this
  range) so there is no visible shrink while resizing.
*/
@media only screen and (min-width: 64rem) and (max-width: 78rem) {
  header#cs-navigation .cs-container {
    gap: 0.875rem;
  }
  header#cs-navigation .cs-ul {
    gap: clamp(1rem, 1.6vw, 1.5rem);
  }
  header#cs-navigation .cs-button-solid {
    min-width: auto;
    padding: 0 1.125rem;
    font-size: 0.875rem;
  }
  header#cs-navigation .cs-logo {
    width: 15%;
  }
  header#cs-navigation .cs-drop-icon {
    margin-left: 0.125rem;
  }
}

/*-- -------------------------- -->
<---  Dark Toggle Centering     -->
<--- -------------------------- -*/

/*
  The header partials pin the toggle with a fixed `top: 0.625rem`, which sits
  it high rather than centred against the mobile bar. Same specificity trick as
  above so this actually applies.
*/
@media only screen and (max-width: 63.9375rem) {
  button#dark-mode-toggle {
    top: 50%;
    transform: translateY(-50%);
  }
}

/*-- -------------------------- -->
<---   Dark Mode Corrections    -->
<--- -------------------------- -*/

/*
  The eyebrow/topper text is var(--primary) (#25605C, a deep teal) which is far
  too dark to read against a dark background. Every section sets this on an
  id-scoped selector inside its own inline <style> block, and ID specificity
  can't be beaten by a class-based rule from this file, so !important is the
  one practical way to flip them all in dark mode without editing ~20 partials.
  Scoped strictly to body.dark-mode and to this single property.
*/
body.dark-mode .cs-topper,
body.dark-mode .cs-int-topper,
body.dark-mode .cs-category {
  color: var(--secondaryLight) !important;
}

/*
  Links with no class of their own inherit the browser's default #0000EE blue
  and #551A8B visited purple, which are close to unreadable on a dark
  background. Styling only :not([class]) leaves every themed link -- buttons,
  nav items, cards -- exactly as it was.
*/
a:not([class]) {
  color: var(--primary);
}
body.dark-mode a:not([class]),
body.dark-mode a:not([class]):visited {
  color: var(--secondaryLight);
}
body.dark-mode a:not([class]):hover {
  color: var(--bodyTextColorWhite);
}