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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1619 {
    padding: var(--sectionPadding);
    /* Clears the fixed nav (~90-110px) plus breathing room above the topper.
       CodeStitch's stock value assumed a transparent overlay nav and was ~3x
       too tall for a solid bar. */
    padding-top: clamp(7.5rem, 17vw, 13rem);
    /* The photo covers the top 87%; the strip below it must match the section
       that follows, or the boundary reads as a line across the cards. */
    background-color: #ffffff;
    position: relative;
    z-index: 1;
  }
  /* The background is sized as a % of this section, so the section's own
     height decides how much of the photo shows. Left to content alone that
     varies with viewport height and the crop drifts — anchoring it to the
     viewport keeps the framing consistent across screens. */
  #hero-1619 {
    min-height: 92vh;
  }
  /* dvh accounts for mobile browser chrome collapsing on scroll */
  @supports (height: 100dvh) {
    #hero-1619 {
      min-height: 92dvh;
    }
  }
  #hero-1619 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 40px on mobile (the cards sit right under the copy) - 180px on desktop */
    gap: clamp(2.5rem, 13vw, 11.25rem);
  }
  #hero-1619 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 48.75rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #hero-1619 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: var(--primary);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  /* Chevrons are decorative — on narrow screens they push the topper onto two
     lines and strand themselves, so they only appear once there's room. */
  #hero-1619 .cs-chevron {
    --chevronColor: var(--primary);
    width: 3rem;
    height: auto;
    flex-shrink: 0;
    display: none;
  }
  #hero-1619 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 100%;
    margin: 0 0 1.5rem 0;
    color: #fff;
    position: relative;
  }
  #hero-1619 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 0 2.5rem 0;
    color: #fff;
    opacity: 0.9;
  }
  #hero-1619 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    /* always dark-on-gold — the gold never changes, so this stays readable */
    color: #1a1a1a;
    padding: 0 1.75rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  #hero-1619 .cs-button-solid:hover {
    transform: scale(1.05);
    box-shadow: 0 0 24px 4px rgba(255, 186, 25, 0.45);
  }
  #hero-1619 .cs-button-solid:active {
    transform: scale(1.02);
    box-shadow: 0 0 16px 2px rgba(255, 186, 25, 0.35);
  }
  #hero-1619 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-1619 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    margin: 0;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #fff;
    border-radius: 0.5rem;
    /* Tight shadow. The stock 80px blur bled onto the photo behind the cards
       and stopped dead at the image's bottom edge, reading as a hard line. */
    box-shadow: 0 6px 20px rgba(26, 26, 26, 0.14);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      background-color 0.3s;
  }
  #hero-1619 .cs-item:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 12px 28px rgba(26, 26, 26, 0.2);
  }
  #hero-1619 .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.5rem 0;
  }
  /* sits under its heading, matching the other cards' heading-first order */
  #hero-1619 .cs-number {
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.1em;
    font-weight: 900;
    margin: 0 0 0.75rem 0;
    color: var(--primary);
    display: block;
  }
  #hero-1619 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #hero-1619 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
  /* Mobile: the photo backs ONLY the copy block. The cards sit fully below it
     on the section background, so nothing covers the roof. A taller band shows
     more of the photo, which reads as zoomed out. */
  #hero-1619 .cs-background {
    width: 100%;
    height: 70%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1619 .cs-background:before {
    /* Dark enough at the top for the headline, clearing toward the roofline */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(17, 25, 38, 0.85) 0%,
      rgba(17, 25, 38, 0.6) 60%,
      rgba(17, 25, 38, 0.35) 100%
    );
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-1619 .cs-background {
    overflow: hidden;
  }
  #hero-1619 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1619 {
    /* Stock is 0, which clips the cards' shadow against the section boundary.
       Enough room here for the shadow to fall. */
    padding-bottom: 2.5rem;
  }
  #hero-1619 .cs-container {
    align-items: flex-start;
  }
  #hero-1619 .cs-content {
    text-align: left;
    margin-left: 0;
    align-items: flex-start;
  }
  /* enough width now for the decorative chevrons to sit on one line */
  #hero-1619 .cs-chevron {
    display: block;
  }
  #hero-1619 .cs-item {
    grid-column: span 6;
  }
  /* Cards are a 2x2 grid here (span 6), so the card block is twice as tall as
     it is at 1300px+. A tall background would run down behind them and show
     the bottom of the photo through the gaps. */
  #hero-1619 .cs-background {
    height: 62%;
  }
  #hero-1619 .cs-background:before {
    background: linear-gradient(
      90deg,
      #111926 21.41%,
      rgba(17, 25, 38, 0.72) 34.98%,
      rgba(17, 25, 38, 0.25) 62.53%
    );
    opacity: 1;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  /* single row of four — the card block is half the height it was, so the
     background can run further down without reaching behind them */
  #hero-1619 .cs-item {
    grid-column: span 3;
  }
  #hero-1619 .cs-background {
    height: 92%;
  }
}
/* Large Desktop Parallax Effect - 1600px */
@media only screen and (min-width: 100rem) {
  #hero-1619 .cs-background {
    background: url("/images/roofing/aerial-grey-roof.webp");
    background-size: cover;
    /* matches the object-position crop used below this breakpoint */
    background-position: center;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1619 .cs-background img {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  /* match the section below so the photo's bottom edge doesn't read as a line */
  body.dark-mode #hero-1619 {
    background-color: var(--dark);
  }
  body.dark-mode #hero-1619 .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #hero-1619 .cs-h3 {
    color: #fff;
  }
  body.dark-mode #hero-1619 .cs-item-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.9;
  }
  /* the button is gold in both themes, so its label stays dark — no override */
}

/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1666 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  #services-1666 .cs-container {
    width: 100%;
    /* changes to 1280px at small desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 3.9vw, 4rem);
  }
  #services-1666 .cs-image-group {
    width: 100%;
    height: auto;
    margin: 0;
    position: relative;
  }
  #services-1666 .cs-picture {
    width: 100%;
    min-height: 20.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    display: block;
    position: relative;
  }
  #services-1666 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #services-1666 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 40.625rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: none;
  }
  /* typography comes from the shared .cs-topper/.cs-title/.cs-text base —
     only the spacing differs here */
  #services-1666 .cs-title,
  #services-1666 .cs-text {
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 1.96vw, 1.5rem) 0;
  }
  #services-1666 .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);
  }
  #services-1666 .cs-faq-item {
    list-style: none;
    width: 100%;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 0.5rem;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    transition:
      border-color 0.3s,
      box-shadow 0.3s;
  }
  #services-1666 .cs-faq-item:hover {
    border-color: var(--primary);
  }
  /* open state */
  #services-1666 .cs-faq-item.active {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08);
  }
  #services-1666 .cs-faq-item.active .cs-indicator:before {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  #services-1666 .cs-faq-item.active .cs-indicator:after {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  #services-1666 .cs-faq-item.active .cs-item-p {
    grid-template-rows: 1fr;
    padding-top: 0.25rem;
    padding-bottom: 1.25rem;
    opacity: 1;
  }
  #services-1666 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-family: inherit;
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    width: 100%;
    padding: 1rem;
    border: none;
    background: transparent;
    color: var(--headerColor);
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 16px - 24px */
    gap: clamp(1rem, 2.5vw, 1.5rem);
    position: relative;
    cursor: pointer;
    transition: color 0.3s;
  }
  #services-1666 .cs-faq-item.active .cs-button,
  #services-1666 .cs-button:hover {
    color: var(--primary);
  }
  #services-1666 .cs-indicator {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }
  #services-1666 .cs-indicator:before {
    /* left line */
    content: "";
    width: 1rem;
    height: 0.125rem;
    background-color: var(--primary);
    opacity: 1;
    border-radius: 2px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.5s;
  }
  #services-1666 .cs-indicator:after {
    /* right line — rotates to form the + / - toggle */
    content: "";
    width: 1rem;
    height: 0.125rem;
    background-color: var(--primary);
    opacity: 1;
    border-radius: 2px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 0.5s;
  }
  #services-1666 .cs-button-text {
    padding: 0;
    display: block;
  }
  /* Animates via grid-template-rows 0fr -> 1fr. `height: auto` is not an
     animatable value, so the stock version snapped open instantly. */
  #services-1666 .cs-item-p {
    font-size: 1rem;
    line-height: 1.5em;
    width: 100%;
    max-width: none;
    margin: 0;
    /* no vertical padding while collapsed, or closed rows keep a dead gap */
    padding: 0 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    opacity: 0;
    color: var(--bodyTextColor);
    display: grid;
    grid-template-rows: 0fr;
    /* clips the text so it doesn't show up */
    overflow: hidden;
    position: relative;
    transition:
      grid-template-rows 0.35s ease,
      opacity 0.3s,
      padding 0.3s;
  }
  /* the grid row collapses only if its child clips its own overflow */
  #services-1666 .cs-item-p-inner {
    min-height: 0;
    overflow: hidden;
    display: block;
  }
  #services-1666 .cs-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: block;
  }
  /* "More about X" link inside an open panel (services hub only) — sits on its
     own line beneath the paragraph rather than running on from it */
  #services-1666 .cs-item-link {
    font-weight: 700;
    text-decoration: none;
    color: var(--primary);
    white-space: nowrap;
    display: block;
    margin-top: 0.75rem;
    transition: opacity 0.3s;
  }
  #services-1666 .cs-item-link:hover {
    opacity: 0.75;
    text-decoration: underline;
  }
  #services-1666 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    width: clamp(11.625rem, 23vw, 13.625rem);
    /* 28px - 40px */
    margin: clamp(1.75rem, 3.9vw, 2.5rem) 0 0 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    border-radius: 0.25rem;
    color: #1a1a1a;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  #services-1666 .cs-button-solid:hover {
    transform: scale(1.05);
    box-shadow: 0 0 24px 4px rgba(255, 186, 25, 0.45);
  }
  #services-1666 .cs-button-solid:active {
    transform: scale(1.02);
    box-shadow: 0 0 16px 2px rgba(255, 186, 25, 0.35);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1666 .cs-picture {
    height: 100%;
    min-width: 36.5rem;
    width: 48vw;
    right: 0;
    top: 0;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1666 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    /* NOT stretch — the accordion changes height as panels open and close,
       and a stretched image column would resize on every click. */
    align-items: flex-start;
    gap: clamp(2.5rem, 4vw, 4rem);
  }
  #services-1666 .cs-content {
    width: 55%;
  }
  #services-1666 .cs-image-group {
    width: 100%;
    max-width: 33.875rem;
    /* fixed height so the photo is stable regardless of which panel is open */
    height: 40rem;
    position: sticky;
    top: 8rem;
  }
  #services-1666 .cs-picture {
    width: 100%;
    min-width: 100%;
    height: 100%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1666 .cs-faq-item {
    background-color: var(--medium);
    border-color: var(--accent);
  }
  body.dark-mode #services-1666 .cs-faq-item:hover,
  body.dark-mode #services-1666 .cs-faq-item.active {
    border-color: var(--primary);
  }
  body.dark-mode #services-1666 .cs-button {
    color: #fff;
  }
  body.dark-mode #services-1666 .cs-faq-item.active .cs-button,
  body.dark-mode #services-1666 .cs-button:hover {
    color: var(--primary);
  }
  body.dark-mode #services-1666 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
}

/*-- -------------------------- -->
<---        Side By Side        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-2295 {
    padding: var(--sectionPadding);
    background-color: #fefcf4;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-2295 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 4vw, 4rem);
  }
  #sbs-2295 .cs-image-group {
    /* scales the whole section down and ties the font size to the vw and stops at 75% of the vale of 1em, changes at desktop */
    font-size: min(1.98vw, 0.826rem);
    /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
    width: 46.125em;
    height: 36.125em;
    order: -1;
    position: relative;
    z-index: 1;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #sbs-2295 .cs-picture {
    width: 100%;
    height: 100%;
    border: 1em solid var(--bodyTextColorWhite);
    display: block;
  }
  #sbs-2295 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
  }
  #sbs-2295 .cs-picture-wrapper1 {
    width: 25.75em;
    height: 28.5625em;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-2295 .cs-picture-wrapper2 {
    width: 25.8125em;
    height: 29.625em;
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #sbs-2295 .cs-tag {
    /* 14px - 24px */
    font-size: clamp(0.875rem, 1.4vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    color: var(--headerColor);
  }
  #sbs-2295 .cs-arrow {
    width: 9.25em;
    height: 3.375em;
    position: absolute;
    top: 15.125em;
    left: 15.9375em;
    transform: rotate(30deg);
  }
  #sbs-2295 .cs-content {
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    width: 100%;
    max-width: 36.625rem;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
  }
  #sbs-2295 .cs-title {
    max-width: 30ch;
  }
  #sbs-2295 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-2295 .cs-text:last-of-type {
    margin-bottom: 1.5rem;
  }
  #sbs-2295 .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: 9.375rem;
    margin: 0;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: var(--headerColor);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #sbs-2295 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-2295 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-2295 .cs-h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0;
    color: var(--headerColor);
  }
  #sbs-2295 .cs-ul {
    margin: 0.75rem 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #sbs-2295 .cs-li {
    font-size: 1rem;
    line-height: 1.5em;
    list-style: none;
    /* 20px - 24px */
    padding-left: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--bodyTextColor);
    position: relative;
  }
  #sbs-2295 .cs-li strong {
    color: #1a1a1a;
  }
  #sbs-2295 .cs-li::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background-color: var(--secondary);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(45deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-2295 .cs-container {
    max-width: 80rem;
  }
  #sbs-2295 .cs-image-group {
    order: initial;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-2295 .cs-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 4vw, 4rem);
  }
  /* Sized in ems off its own font-size (46.125em wide). Don't cap it with
     max-width — the wrappers inside are absolutely positioned in ems and would
     spill out of a narrowed box and get clipped. Scale via font-size only. */
  #sbs-2295 .cs-image-group {
    font-size: min(0.95vw, 0.92rem);
    /* MUST keep an explicit height — every child is absolutely positioned, so
       height:auto collapses the box to zero and the images vanish. */
    height: 36.125em;
    /* never let flex shrink it — its children are absolutely positioned */
    flex: none;
  }
  /* The text column must yield: image group + gap + text has to fit inside the
     80rem container, or the group overflows and overflow:hidden clips it. */
  #sbs-2295 .cs-content {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }
  #sbs-2295 .cs-picture-wrapper1 {
    bottom: 7.5625em;
  }
  #sbs-2295 .cs-picture-wrapper2 {
    top: 6.5em;
  }
}

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-889 {
    padding: var(--sectionPadding);
  }
  #steps-889 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-889 .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;
  }

  #steps-889 .cs-text {
    max-width: 66.5rem;
  }
  #steps-889 .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;
    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;
  }
  #steps-889 .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;
  }
  #steps-889 .cs-button-solid:hover:before {
    width: 100%;
  }
  #steps-889 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 20px - 40px */
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  /* Centred: these are a connected sequence, not a card grid. The arrows read
     as a flow between them, which left-aligned columns would fight. */
  #steps-889 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    max-width: 20.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #steps-889 .cs-picture {
    margin-bottom: 1.5rem;
    width: 4.5rem;
    height: 4.5rem;
    /* was CodeStitch's leftover orange tint — now a faint brand gold */
    background-color: rgba(255, 186, 25, 0.12);
    border-radius: 1rem 0 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #steps-889 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #steps-889 .cs-item-p {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #steps-889 .cs-arrow {
    /* 48px - 80px */
    width: clamp(3rem, 6vw, 5rem);
    height: auto;
    display: block;
    flex: none;
    transform: rotate(120deg);
  }
  #steps-889 .cs-arrow-img {
    width: 100%;
    display: block;
  }
  /* line icons read smaller than the solid glyph they replaced */
  #steps-889 .cs-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-889 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #steps-889 .cs-arrow {
    align-self: center;
    transform: rotate(40deg);
  }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-43 {
    padding: var(--sectionPadding);
    position: relative;
    /* Prevents overflow from the image going off screen */
    overflow: hidden;
  }
  #gallery-43 .cs-container {
    width: 100%;
    max-width: 69rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-43 .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;
  }

  #gallery-43 .cs-image-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #gallery-43 .cs-item {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    margin: 0;
    position: relative;
    display: block;
  }
  #gallery-43 .cs-item:hover .cs-hover-box {
    opacity: 1;
  }
  #gallery-43 .cs-item:hover .cs-icon {
    /* return to original position */
    transform: rotateY(0);
  }
  #gallery-43 .cs-item:hover .cs-h3 {
    opacity: 1;
    /* Return to original position */
    transform: translateY(0);
  }
  #gallery-43 .cs-item:hover .cs-hover-box-text {
    opacity: 1;
    /* Return to original position */
    transform: translateY(0);
  }
  #gallery-43 .cs-picture {
    margin: auto;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
  }
  #gallery-43 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #gallery-43 .cs-hover-box {
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 1em;
    background-color: rgba(229, 87, 44, 0.9);
    opacity: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Prevents padding from contributing to height & width */
    box-sizing: border-box;
    /* Sets stage for 3d transform animation */
    perspective: 700px;
    top: 0;
    left: 0;
    z-index: 10;
    /* prevents mouse from being able to interact with these elements */
    pointer-events: none;
    transition: opacity 0.3s;
  }
  #gallery-43 .cs-icon {
    /* 50px - 60px */
    width: clamp(3.125rem, 5vw, 3.75rem);
    height: clamp(3.125rem, 5vw, 3.75rem);
    /* 16px - 32px */
    margin-bottom: clamp(1rem, 5vw, 2rem);
    border-radius: 50%;
    background-color: #fff;
    outline: 0.5rem solid rgba(255, 255, 255, 0.7);
    /* Start with the icon box rotated 90deg */
    transform: rotateY(90deg);
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: none;
    transition: transform 0.5s;
  }
  #gallery-43 .cs-icon img {
    width: 1.25rem;
    height: 1.25rem;
  }
  #gallery-43 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 auto;
    max-width: 16.875rem;
    color: #fff;
    /* make starting position down 10px and invisible */
    opacity: 0;
    transform: translateY(0.625rem);
    margin-bottom: 0.5rem;
    transition:
      opacity 0.3s,
      transform 0.3s ease-out;
    transition-delay: 0.1s;
  }
  #gallery-43 .cs-hover-box-text {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1vw, 1rem);
    line-height: 1.5em;
    margin: 0 auto;
    max-width: 16.875rem;
    color: #fff;
    /* make starting position down 10px and invisible */
    opacity: 0;
    transform: translateY(0.625rem);
    transition:
      opacity 0.3s,
      transform 0.3s ease-out;
    transition-delay: 0.2s;
  }
}
/* In Between - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-43 .cs-image-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
  }
  #gallery-43 .cs-item {
    grid-column: span 6;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-43 .cs-item {
    grid-column: span 4;
  }
}

/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-355 {
    padding: var(--sectionPadding);
  }
  #reviews-355 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  /* wider than the shared .cs-title cap so the heading holds one line */
  #reviews-355 .cs-title {
    max-width: 55rem;
  }
  #reviews-355 .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;
  }

  #reviews-355 .cs-card-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
  }
  #reviews-355 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    /* 24px - 32px top & bottom */
    /* 16px - 40px left & right */
    padding: clamp(1.5rem, 3.15vw, 2rem) clamp(1rem, 3.15vw, 2.5rem);
    background-color: #ffffff;
    border-radius: 1rem;
    /* the section is white too, so the card needs an edge of its own */
    border: 1px solid #e8e8e8;
    box-shadow: 0 10px 30px rgba(16, 33, 60, 0.06);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  #reviews-355 .cs-quote {
    width: 2.5rem;
    height: auto;
    margin-bottom: 2rem;
    display: block;
  }
  #reviews-355 .cs-review {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    /* 20px - 40px */
    margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
    color: var(--bodyTextColor);
  }
  /* Star rating. The source SVG is CodeStitch orange, so recolor to brand gold
     with the same filter used on the other icons. */
  #reviews-355 .cs-stars {
    width: 5.6875rem;
    height: auto;
    margin: 0 0 1rem 0;
    display: block;
    filter: brightness(0) saturate(100%) invert(72%) sepia(63%) saturate(1000%)
      hue-rotate(358deg) brightness(103%) contrast(103%);
  }
  #reviews-355 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    color: var(--headerColor);
    display: block;
  }
  #reviews-355 .cs-job {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-355 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #reviews-355 .cs-item {
    width: clamp(31.5%, 30vw, 32.3%);
  }
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #locations-1697 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #locations-1697 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 31.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #locations-1697 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  #locations-1697 .cs-item {
    list-style: none;
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 24px - 60px top & bottom*/
    /* 16px - 40px left & right*/
    padding: clamp(1.5rem, 5vw, 3.75rem) clamp(1rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    grid-column: span 12;
    grid-row: span 1;
    position: relative;
    z-index: 1;
    /* bottom border */
  }
  #locations-1697 .cs-item::after {
    content: "";
    width: 100%;
    height: 1px;
    /* to change the color of the bottom border, adjust the second color (at 50%). the first and third will blend the color to transparent */
    /* note you'll also have to change the color in the tablet media query when the lines go vertical */
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      #bababa 50%,
      rgba(255, 255, 255, 0) 100%
    );
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #locations-1697 .cs-item:last-of-type::after {
    content: none;
  }
  #locations-1697 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: bold;
    line-height: 1.2em;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #locations-1697 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    max-width: 18.75rem;
    padding: 0;
    color: var(--bodyTextColor);
  }
  #locations-1697 .cs-address {
    max-width: 18ch;
    margin-bottom: 1rem;
  }
  #locations-1697 .cs-link {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    text-decoration: none;
    margin-top: auto;
    /* setting minimum top spacing with padding and using margin-top: auto; to ensure the link is always at the bottom of the item */
    /* 24px - 32px */
    padding-top: clamp(1.5rem, 1vw, 2rem);
    color: var(--secondary);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.625rem;
    transition: color 0.3s;
  }
  #locations-1697 .cs-link:hover .cs-arrow {
    transform: translateX(0.25rem);
  }
  #locations-1697 .cs-link-text {
    width: fit-content;
  }
  #locations-1697 .cs-arrow {
    width: 1.25rem;
    height: auto;
    display: block;
    transition:
      filter 0.3s,
      transform 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #locations-1697 .cs-container {
    max-width: 80rem;
  }
  #locations-1697 .cs-item {
    grid-column: span 3;
  }
  #locations-1697 .cs-item:nth-of-type(4)::after {
    display: none;
  }
  #locations-1697 .cs-item::after {
    width: 1px;
    height: 100%;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0) 0%,
      #bababa 50%,
      rgba(255, 255, 255, 0) 100%
    );
    right: 0;
    left: initial;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-51 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #cta-51 .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-51 .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;
  }

  #cta-51 .cs-topper {
    /* gold brand accent, readable on the dark image overlay */
    color: var(--primary);
    margin-bottom: 0.25rem;
  }
  #cta-51 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #cta-51 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #cta-51 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-51 .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;
    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;
  }
  #cta-51 .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;
  }
  #cta-51 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-51 .cs-picture {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-51 .cs-picture:before {
    /* black color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-51 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

/*-- -------------------------- -->
<---   Dark Mode (Home page)    -->
<--- -------------------------- -*/
/* The pasted CodeStitch sections ship no dark-mode rules, so their hardcoded
   light backgrounds and span/anchor text don't flip. Recolor them here. */
@media only screen and (min-width: 0em) {
  /* --- Section + card backgrounds --- */
  body.dark-mode #reviews-355 .cs-item {
    background-color: var(--medium);
  }

  /* --- Text that is a <span>/<a> (not caught by dark.css's p/li/h rules) --- */
  body.dark-mode #services-1666 .cs-item-p,
  body.dark-mode #steps-889 .cs-item-p,
  body.dark-mode #reviews-355 .cs-name,
  body.dark-mode #locations-1697 .cs-item-text,
  body.dark-mode #locations-1697 .cs-address,
  body.dark-mode #locations-1697 .cs-link-text,
  body.dark-mode #gallery-43 .cs-hover-box-text {
    color: var(--bodyTextColorWhite);
  }

  /* --- Review job title / muted subtext stays slightly dimmed but visible --- */
  body.dark-mode #reviews-355 .cs-job {
    color: #b6bcc4;
  }

  /* --- SBS process list bullets/text --- */
  body.dark-mode #sbs-2295 .cs-li {
    color: var(--bodyTextColorWhite);
  }
  /* Bold labels in the SBS process list are hardcoded #1a1a1a (dark) */
  body.dark-mode #sbs-2295 .cs-li strong {
    color: #ffffff;
  }
}
/*-- -------------------------- -->
<---   Brand Consistency        -->
<--- -------------------------- -*/
/* CodeStitch ships these icon SVGs in red/orange/blue. Recolor them to the
   brand gold (#ffba19) with a filter so the whole page reads as one brand.
   Filter tuned to hit #ffba19 from a solid-black starting point. */
@media only screen and (min-width: 0em) {
  #hero-1619 .cs-icon,
  #services-1666 .cs-icon,
  #steps-889 .cs-icon,
  #steps-889 .cs-arrow-img,
  #gallery-43 .cs-hover-box .cs-icon img,
  #reviews-355 .cs-quote,
  #locations-1697 .cs-arrow,
  #sbs-2295 .cs-arrow {
    filter: brightness(0) saturate(100%) invert(72%) sepia(63%)
      saturate(1000%) hue-rotate(358deg) brightness(103%) contrast(103%);
  }
}

/*-- -------------------------- -->
<---   Section Rhythm           -->
<--- -------------------------- -*/
/* Alternate soft-grey bands so sections read as distinct, not one white wall.
   All sections already share var(--sectionPadding) for consistent spacing. */
@media only screen and (min-width: 0em) {
  /* Strict alternation in DOM order — every band set explicitly, since
     several sections otherwise fall through to white and merge:
       hero(grey) > services(white) > SBS(grey) > steps(white) >
       gallery(grey) > reviews(white) > locations(grey) > CTA(photo)
     Reviews' cards are white, so it gets a white section with the cards
     separated by their own border/shadow. */
  #sbs-2295,
  #gallery-43,
  #locations-1697 {
    background-color: #f6f8fa;
  }
  #services-1666,
  #steps-889,
  #reviews-355 {
    background-color: #ffffff;
  }
  /* Dark mode: same alternation, raised tone vs base dark */
  body.dark-mode #sbs-2295,
  body.dark-mode #gallery-43,
  body.dark-mode #locations-1697 {
    background-color: #0b2a3f;
  }
  body.dark-mode #services-1666,
  body.dark-mode #steps-889,
  body.dark-mode #reviews-355 {
    background-color: var(--dark);
  }
}
/*-- -------------------------- -->
<---     Polish (Home)          -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em) {
  /* Why-Choose-Us cards: subtle shadow + hover lift */
  #services-1666 .cs-item {
    box-shadow: 0 10px 30px rgba(16, 33, 60, 0.06);
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }
  #services-1666 .cs-item:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 18px 40px rgba(16, 33, 60, 0.12);
  }
  /* Review cards: hover lift */
  #reviews-355 .cs-item {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }
  #reviews-355 .cs-item:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 18px 40px rgba(16, 33, 60, 0.12);
  }
  /* Gallery items: gentle zoom on hover already handled by component;
     add a consistent rounded corner + shadow */
  #gallery-43 .cs-item {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(16, 33, 60, 0.08);
  }
  /* Service-area location cards: hover lift + gold border cue */
  #locations-1697 .cs-item {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      border-color 0.3s ease;
  }
  #locations-1697 .cs-item:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 14px 34px rgba(16, 33, 60, 0.1);
  }
}

/*-- -------------------------- -->
<---     Button Treatment       -->
<--- -------------------------- -*/
/* Every CodeStitch section ships its own copy of a black wipe-across hover.
   That reads badly and goes near-black on dark backgrounds, so kill the wipe
   site-wide and use one gold deepen + lift instead. */
@media only screen and (min-width: 0em) {
  #services-1666 .cs-button-solid,
  #sbs-2295 .cs-button-solid,
  #steps-889 .cs-button-solid,
  #cta-51 .cs-button-solid {
    color: #1a1a1a;
    border-radius: 0.25rem;
    overflow: visible;
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  /* neutralize the sliding black panel */
  #services-1666 .cs-button-solid:before,
  #sbs-2295 .cs-button-solid:before,
  #steps-889 .cs-button-solid:before,
  #cta-51 .cs-button-solid:before,
  #services-1666 .cs-button-solid:hover:before,
  #sbs-2295 .cs-button-solid:hover:before,
  #steps-889 .cs-button-solid:hover:before,
  #cta-51 .cs-button-solid:hover:before {
    display: none;
  }
  #services-1666 .cs-button-solid:hover,
  #sbs-2295 .cs-button-solid:hover,
  #steps-889 .cs-button-solid:hover,
  #cta-51 .cs-button-solid:hover {
    transform: scale(1.05);
    box-shadow: 0 0 24px 4px rgba(255, 186, 25, 0.45);
  }
  #services-1666 .cs-button-solid:active,
  #sbs-2295 .cs-button-solid:active,
  #steps-889 .cs-button-solid:active,
  #cta-51 .cs-button-solid:active {
    transform: scale(1.02);
    box-shadow: 0 0 16px 2px rgba(255, 186, 25, 0.35);
  }
}

/*-- -------------------------- -->
<---   Dark Mode Card Depth     -->
<--- -------------------------- -*/
/* On dark backgrounds a black drop-shadow is invisible, so cards separate only
   by a slight tone shift. Swap in a light hairline border plus a deeper, wider
   shadow — the border does the separating, the shadow gives the lift. */
@media only screen and (min-width: 0em) {
  /* Steps are excluded — they're flat text blocks on the section background,
     not raised panels, so a border just draws a box around nothing. */
  body.dark-mode #hero-1619 .cs-item,
  body.dark-mode #services-1666 .cs-faq-item,
  body.dark-mode #reviews-355 .cs-item {
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
  body.dark-mode #hero-1619 .cs-item:hover,
  body.dark-mode #reviews-355 .cs-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  }
  /* the gold icon tint reads as murky olive on dark — use a light wash */
  body.dark-mode #steps-889 .cs-picture {
    background-color: rgba(255, 255, 255, 0.08);
  }
  /* the accordion already goes gold on hover/open — keep that as its accent */
  body.dark-mode #services-1666 .cs-faq-item:hover,
  body.dark-mode #services-1666 .cs-faq-item.active {
    border-color: var(--primary);
  }
}

/*-- -------------------------- -->
<---          404 Page          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #error-page {
    /* clears the fixed nav */
    padding: clamp(9rem, 20vw, 12rem) 1rem clamp(4rem, 10vw, 7rem);
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  #error-page .cs-container {
    width: 100%;
    max-width: 45rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #error-page .cs-code {
    /* 80px - 160px */
    font-size: clamp(5rem, 16vw, 10rem);
    font-weight: 900;
    line-height: 1em;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    color: var(--primary);
    display: block;
  }
  #error-page .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    max-width: 20ch;
    margin: 0 auto 1rem;
    color: #fff;
  }
  #error-page .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: center;
    max-width: 40ch;
    margin: 0 auto clamp(2rem, 4vw, 2.5rem);
    color: #fff;
    opacity: 0.85;
  }
  #error-page .cs-button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  #error-page .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 11rem;
    padding: 0 1.75rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    color: #1a1a1a;
    display: inline-block;
    box-sizing: border-box;
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  #error-page .cs-button-solid:hover {
    transform: scale(1.05);
    box-shadow: 0 0 24px 4px rgba(255, 186, 25, 0.45);
  }
  #error-page .cs-button-transparent {
    font-size: 1rem;
    font-weight: 700;
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 11rem;
    padding: 0 1.75rem;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.25rem;
    color: #fff;
    display: inline-block;
    box-sizing: border-box;
    transition:
      background-color 0.3s,
      border-color 0.3s;
  }
  #error-page .cs-button-transparent:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #fff;
  }
  #error-page .cs-links {
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
  }
  #error-page .cs-links-header {
    font-size: 0.9375rem;
    line-height: 1.5em;
    margin-bottom: 0.75rem;
    color: #fff;
    opacity: 0.7;
    display: block;
  }
  #error-page .cs-links-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
  }
  #error-page .cs-links-item {
    list-style: none;
  }
  #error-page .cs-links-item a {
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--primary);
    transition: opacity 0.3s;
  }
  #error-page .cs-links-item a:hover {
    opacity: 0.75;
    text-decoration: underline;
  }
  #error-page .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #error-page .cs-background:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(17, 25, 38, 0.82);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
  }
  #error-page .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}