: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: #38527a;
    --primaryLight: #5b7bb0;
    --secondary: #c8963e; 
    --secondaryLight: #e0b45c;
    --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;
}


/*
  One self-hosted webfont: Playfair Display 700 (latin subset, 23 KB), used
  for every heading. It is preloaded from header.php so the first paint does
  not swap. Body text deliberately stays on the system sans stack -- it is
  zero-cost and indistinguishable from Roboto at body sizes.
*/
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/playfair-display-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
 
}

.cs-h3,
.cs-faq-item .cs-button-text {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', 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', Georgia, 'Times New Roman', 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;
    }
#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-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;
    }
  }
  /* 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 {
      /* The logo mark is keyed to transparency and carries the brand colours.
         Never reintroduce grayscale/brightness here -- it blows the whole mark
         out to a white blob. The wordmark beside it recolours via .cs-logo-name. */
      filter: none;
    }
    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) {#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-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-li-link {
      color: var(--bodyTextColorWhite);
    }
body.dark-mode #cs-navigation .cs-li-link:hover {
      color: var(--secondary);
    }
    body.dark-mode #cs-navigation .cs-logo {
      /* See the note above: the mark must keep its own colours. */
      filter: none;
    }
  }

/*-- -------------------------- -->
<---      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;
  }
}
/*
  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);
}
                                  


/*-- -------------------------- -->
<---         Skip Link          -->
<--- -------------------------- -*/
/* Off-screen until focused, then pinned top-left. Without this the link in
   header.php renders as loose text above every page. */
.cs-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background-color: var(--primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 0.375rem 0;
}

.cs-skip:focus {
    left: 0;
}

/*-- -------------------------- -->
<---    Screen Reader Utility   -->
<--- -------------------------- -*/
/*
  Visually hidden, still announced.

  Lives in style.css (always loaded) rather than blog.css, because
  `.screen-reader-text` is WordPress and WooCommerce core's own class name and
  their markup uses it on pages where blog.css is not enqueued.

  This matters specifically because crooz_dequeue_woocommerce_layout() removes
  `woocommerce-general`, which is the stylesheet that would normally define it.
  Without this rule, any Woo markup using the class -- and the product name
  inside the flagship "View the engagement" button -- renders as visible text.
*/
.screen-reader-text,
.cs-screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
  word-wrap: normal !important;
}

/* Standard exception: let it become visible when focused, so skip-style links
   remain reachable by keyboard. */
.screen-reader-text:focus,
.cs-screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  height: auto;
  width: auto;
  display: block;
  top: 5px;
  left: 5px;
  z-index: 100000;
  padding: 15px 23px 14px;
  font-size: 0.875rem;
  line-height: normal;
  color: #1a1a1a;
  background-color: #fff;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

/*-- -------------------------- -->
<---       Global Buttons       -->
<--- -------------------------- -*/
/*
  Every section links to the diagnostic with a .cs-button-solid, and the
  diagnostic app renders its own <button class="cs-button-solid"> elements,
  but the class was only ever defined inside #cs-navigation and #cs-footer.
  Anywhere else it fell back to browser defaults: a plain underlined link in
  the shop cross-sell, a grey 13px Arial <button> on the diagnostic itself.
  This is the CodeStitch base. Sections keep overriding colour per context
  (#svc-cta, #home-diagnostic, .cs-diag-cta) at higher specificity.
*/
.cs-button-solid {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: clamp(2.875em, 5.5vw, 3.5em);
  text-align: center;
  text-decoration: none;
  min-width: 9.375rem;
  margin: 0;
  box-sizing: border-box;
  padding: 0 1.5rem;
  color: #fff;
  background-color: var(--primary);
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  display: inline-block;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s;
}
.cs-button-solid:before {
  content: "";
  width: 0%;
  height: 100%;
  background: #1a1a1a;
  opacity: 1;
  border-radius: 0.25rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: width 0.3s;
}
.cs-button-solid:hover:before,
.cs-button-solid:focus-visible:before {
  width: 100%;
}
.cs-button-solid:hover,
.cs-button-solid:focus-visible {
  color: #fff;
}
.cs-button-solid:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
/* Dark Mode */
body.dark-mode .cs-button-solid {
  color: #1a1a1a;
  background-color: var(--secondaryLight);
}
body.dark-mode .cs-button-solid:before {
  background: #fff;
}
body.dark-mode .cs-button-solid:hover,
body.dark-mode .cs-button-solid:focus-visible {
  color: #1a1a1a;
}

/*-- -------------------------- -->
<---      Button Variants       -->
<--- -------------------------- -*/
/*
  Gold is reserved for the one action a page most wants: the free diagnostic.
  Navy stays the default so the gold button is the brightest thing in view.
*/
.cs-button-solid.cs-button-gold {
  color: #1a1a1a;
  background-color: var(--secondary);
}
.cs-button-solid.cs-button-gold:before {
  background: var(--secondaryLight);
}
.cs-button-solid.cs-button-gold:hover,
.cs-button-solid.cs-button-gold:focus-visible {
  color: #1a1a1a;
}
body.dark-mode .cs-button-solid.cs-button-gold {
  color: #1a1a1a;
  background-color: var(--secondary);
}
body.dark-mode .cs-button-solid.cs-button-gold:before {
  background: var(--secondaryLight);
}

/* Secondary, outlined action that sits beside a solid button. */
.cs-button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  line-height: clamp(2.875rem, 5.5vw, 3.5rem);
  min-width: 9.375rem;
  box-sizing: border-box;
  padding: 0 1.5rem;
  color: var(--primary);
  background-color: transparent;
  border: 1px solid var(--primary);
  border-radius: 0.25rem;
  transition: background-color 0.3s, color 0.3s;
}
.cs-button-ghost:hover,
.cs-button-ghost:focus-visible {
  background-color: var(--primary);
  color: #fff;
}
body.dark-mode .cs-button-ghost {
  color: var(--bodyTextColorWhite);
  border-color: rgba(250, 251, 252, 0.55);
}
body.dark-mode .cs-button-ghost:hover,
body.dark-mode .cs-button-ghost:focus-visible {
  background-color: var(--bodyTextColorWhite);
  color: #1a1a1a;
}

/*-- -------------------------- -->
<---        Trust Line          -->
<--- -------------------------- -*/
/* The three facts under a diagnostic CTA: free, short, no email up front. */
.cs-trust {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
}
.cs-trust li {
  font-size: 0.875rem;
  line-height: 1.4em;
  /* 5.35:1 on the #eef1f6 hero ground. #6b7280 was 4.27:1 and this is 14px,
     so the large-text allowance does not apply. */
  color: #5c6270;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.cs-trust li:before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  /* gold disc with a white check, inline SVG so it costs no request */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23c8963e'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.dark-mode .cs-trust li {
  color: #9aa0ab;
}

/*-- -------------------------- -->
<---          Wordmark          -->
<--- -------------------------- -*/
/*
  The logo is the mark alone (assets/img/logo-mark.png, transparent). The
  company name is set in text beside it so it stays crisp at any size and can
  change colour for dark mode, which a flat bitmap could not. The old
  grayscale-and-blow-out filter that turned the whole logo white is gone.
*/
.cs-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  white-space: nowrap;
}
.cs-logo-name {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
}
.cs-logo-sub {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-top: 0.25rem;
}
body.dark-mode .cs-logo-name {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #cs-navigation .cs-logo,
  body.dark-mode #cs-navigation .cs-logo img,
  body.dark-mode #cs-footer .cs-logo-mark {
  filter: none;
}
/* Navy reads a little dull on near-black; lift the mark slightly in dark mode. */
body.dark-mode .cs-logo-mark {
  filter: brightness(1.18) saturate(1.05);
}