/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #sbs {
    padding: var(--sectionPadding);
  }
  #sbs .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 2.5rem;
  }
  #sbs .cs-left {
    /* scaling the font size with the view width */
    font-size: min(2.31vw, 0.7em);
    /* using ems so we can use font size to scale the whole section */
    width: 39.4375em;
    height: 39.75em;
    position: relative;
  }
  #sbs .cs-picture {
    border-radius: 1.5em;
    /* clips img tag corners */
    overflow: hidden;
    position: absolute;
    display: block;
  }
  #sbs .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act like a background image */
    object-fit: cover;
  }
  #sbs .cs-picture1 {
    width: 32.625em;
    height: 36.3125em;
    left: 0;
    top: 0;
  }
  #sbs .cs-picture2 {
    width: 25.875em;
    height: 25em;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid #ffffff;
    right: 0;
    bottom: 0;
  }
  #sbs .cs-right {
    margin: auto;
    max-width: 33.875rem;
  }
  #sbs .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #sbs .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: left;
    max-width: 50rem;
    margin: 0 auto 1rem;
    color: var(--headerColor);
    position: relative;
  }
  #sbs .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: left;
    width: 100%;
    max-width: 46.875rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    color: var(--bodyTextColor);
  }
  #sbs .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs .cs-flex-group {
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
    background-color: #f7f7f7;
    border-radius: 1rem;
    position: relative;
  }
  #sbs .cs-flex-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0 0 1rem;
    color: #767676;
  }
  #sbs .cs-name {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
    display: block;
  }
  #sbs .cs-job {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: #767676;
    display: block;
  }
  #sbs .cs-quote-icon {
    /* 60px - 136px */
    width: clamp(3.75rem, 10vw, 8.5rem);
    height: auto;
    position: absolute;
    bottom: 0rem;
    /* 16px - 32px */
    right: clamp(1rem, 4vw, 2rem);
  }
  #sbs .button-solid {
    margin-top: 2rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64em) {
  #sbs .cs-container {
    flex-flow: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #sbs .cs-left {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
  #sbs .cs-right {
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #sbs .cs-left:before,
  body.dark-mode #sbs .cs-left:after {
    background: var(--accent);
  }
  body.dark-mode #sbs .cs-picture2 {
    background-color: var(--dark);
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid var(--dark);
  }
  body.dark-mode #sbs .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #sbs .cs-title,
  body.dark-mode #sbs .cs-text,
  body.dark-mode #sbs .cs-h3,
  body.dark-mode #sbs .cs-flex-p,
  body.dark-mode #sbs .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs .cs-flex-group {
    background-color: var(--accent);
  }
  body.dark-mode #sbs .cs-job {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #sbs .cs-quote-icon {
    opacity: 0.2;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #sbs-r {
    padding: var(--sectionPadding);
  }
  #sbs-r .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 2.5rem;
  }
  #sbs-r .cs-left {
    /* scaling the font size with the view width */
    font-size: min(2.31vw, 0.7em);
    /* using ems so we can use font size to scale the whole section */
    width: 39.4375em;
    height: 39.75em;
    position: relative;
  }
  #sbs-r .cs-picture {
    border-radius: 1.5em;
    /* clips img tag corners */
    overflow: hidden;
    position: absolute;
    display: block;
  }
  #sbs-r .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act like a background image */
    object-fit: cover;
  }
  #sbs-r .cs-picture1 {
    width: 32.625em;
    height: 36.3125em;
    right: 0;
    top: 0;
  }
  #sbs-r .cs-picture2 {
    width: 25.875em;
    height: 25em;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid #ffffff;
    left: 0;
    bottom: 0;
  }
  #sbs-r .cs-right {
    margin: auto;
    max-width: 33.875rem;
  }
  #sbs-r .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #sbs-r .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: left;
    max-width: 50rem;
    margin: 0 auto 1rem;
    color: var(--headerColor);
    position: relative;
  }
  #sbs-r .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: left;
    width: 100%;
    max-width: 46.875rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    color: var(--bodyTextColor);
  }
  #sbs-r .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-r .cs-flex-group {
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
    background-color: #f7f7f7;
    border-radius: 1rem;
    position: relative;
  }
  #sbs-r .cs-flex-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0 0 1rem;
    color: #767676;
  }
  #sbs-r .cs-name {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
    display: block;
  }
  #sbs-r .cs-job {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: #767676;
    display: block;
  }
  #sbs-r .cs-quote-icon {
    /* 60px - 136px */
    width: clamp(3.75rem, 10vw, 8.5rem);
    height: auto;
    position: absolute;
    bottom: 0rem;
    /* 16px - 32px */
    right: clamp(1rem, 4vw, 2rem);
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64em) {
  #sbs-r .cs-container {
    flex-flow: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #sbs-r .cs-left {
    font-size: min(1.2vw, 1em);
    flex: none;
    /* sends it to the right */
    order: 2;
  }
  #sbs-r .cs-right {
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #sbs-r .cs-left:before,
  body.dark-mode #sbs-r .cs-left:after {
    background: var(--accent);
  }
  body.dark-mode #sbs-r .cs-picture2 {
    background-color: var(--dark);
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid var(--dark);
  }
  body.dark-mode #sbs-r .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #sbs-r .cs-title,
  body.dark-mode #sbs-r .cs-text,
  body.dark-mode #sbs-r .cs-h3,
  body.dark-mode #sbs-r .cs-flex-p,
  body.dark-mode #sbs-r .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-r .cs-flex-group {
    background-color: var(--accent);
  }
  body.dark-mode #sbs-r .cs-job {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #sbs-r .cs-quote-icon {
    opacity: 0.2;
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
/* Mobile - 360px - Contains hover animation */
@media only screen and (min-width: 0em) {
  #gallery {
    /* Centers button */
    text-align: center;
    padding: var(--sectionPadding);
    position: relative;
    /* Prevents overflow from the image going off screen */
    overflow: hidden;
  }
  #gallery .cs-container {
    width: 100%;
    max-width: 82.625em;
    margin: auto;
  }
  #gallery .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    display: block;
  }
  #gallery .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 38.8125rem;
    margin: 0 auto;
    margin-bottom: 2.5rem;
    color: var(--headerColor);
    position: relative;
  }
  #gallery .cs-image-group {
    /* used rem so it doesn't scale with the font size of on parent */
    font-size: min(1.1vw, 1em);
    width: 100%;
    max-width: 82.625em;
    padding: 0;
    margin: 0 auto 3.75rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.875em;
  }
  #gallery .cs-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.875em;
  }
  #gallery .cs-picture {
    position: relative;
    display: block;
  }
  #gallery .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #gallery .cs-row-1 .cs-picture-1 {
    width: 26.25em;
    height: 35.4375em;
  }
  #gallery .cs-row-1 .cs-picture-2 {
    width: 26.25em;
    height: 39.3125em;
  }
  #gallery .cs-row-1 .cs-picture-3 {
    width: 26.25em;
    height: 32em;
  }
  #gallery .cs-row-2 .cs-picture-1 {
    width: 26.25em;
    height: 30.75em;
  }
  #gallery .cs-row-2 .cs-picture-2 {
    width: 26.25em;
    height: 32.3125em;
  }
  #gallery .cs-row-2 .cs-picture-3 {
    width: 26.25em;
    height: 39.3125em;
  }
  #gallery .cs-row-3 .cs-picture-1 {
    width: 26.25em;
    height: 39.0625em;
  }
  #gallery .cs-row-3 .cs-picture-2 {
    width: 26.25em;
    height: 28.25em;
  }
  #gallery .cs-row-3 .cs-picture-3 {
    width: 26.25em;
    height: 39.3125em;
  }
}
/* Dark mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #gallery .cs-title {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #reviews {
    /* Centers the button */
    text-align: center;
    padding: var(--sectionPadding);
  }
  #reviews .cs-container {
    width: 100%;
    max-width: 69rem;
    margin: auto;
  }
  #reviews .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    display: block;
  }
  #reviews .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    max-width: 43.75rem;
    margin: 0 auto 1rem;
    color: var(--headerColor);
    position: relative;
  }
  #reviews .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5rem;
    text-align: center;
    width: 100%;
    max-width: 40.625rem;
    margin: 0 auto;
    /* 88px - 104px */
    margin-bottom: clamp(5.5em, 10.2vw, 6.5em);
    color: var(--bodyTextColor);
  }
  #reviews .cs-card-group {
    padding: 0;
    /* 48px - 64px */
    margin: 0 auto clamp(3rem, 5vw, 4rem);
  }
  #reviews .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    max-width: 33.875rem;
    margin: 0 auto 4rem;
    /* Padding L & R - 16px - 32px */
    padding: 3.75rem clamp(1rem, 3.2vw, 2rem) 0;
    /* 32px - 40px */
    padding-bottom: clamp(2rem, 5.4vw, 2.5rem);
    box-shadow: 0px 20px 39px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0.25rem;
    background: #fff;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    /* Prevents padding from affecting height & width */
    box-sizing: border-box;
  }
  #reviews .cs-item:last-of-type {
    margin-bottom: 0;
  }
  #reviews .cs-item-img {
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: -2.5rem;
  }
  #reviews .cs-item-p {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    color: var(--bodyTextColor);
    border-bottom: 1px solid #e8e9ec;
  }
  #reviews .cs-reviewer {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    width: 40%;
    margin: 0 auto 0 0;
    display: block;
    color: var(--headerColor);
  }
  #reviews .cs-desc {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--label);
    display: block;
  }
  #reviews .cs-item-stars {
    width: 6rem;
    height: 1rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
  #reviews .cs-card-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  #reviews .cs-item {
    /* reset margin so it won't interfere with flexbox */
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #reviews .cs-title,
  body.dark-mode #reviews .cs-text,
  body.dark-mode #reviews .cs-item-p,
  body.dark-mode #reviews .cs-reviewer {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews .cs-item {
    background: var(--medium);
  }
  body.dark-mode #reviews .cs-desc {
    color: var(--primaryLight);
  }
}
/*-- -------------------------- -->
<---    Final Call To Action    -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #cta {
    position: relative;
    padding: 3.125rem 0;
  }
  #cta:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta .container {
    text-align: center;
  }
  #cta picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
  }
  #cta picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #cta .title {
    font-weight: 900;
    font-size: min(9vw, 3rem);
    line-height: 1.20833333;
    color: #fff;
    position: relative;
    margin-bottom: 2.25rem;
    text-align: center;
  }
  #cta p {
    color: #fff;
    text-align: center;
    opacity: 1;
    margin: auto;
    margin-bottom: 2.25rem;
    width: 96%;
    max-width: 37.375rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #cta {
    padding: 10.5rem 0;
  }
}
/* Large Desktop */
@media only screen and (min-width: 1300px) {
  #cta {
    position: relative;
    margin-top: 6.25rem;
  }
  #cta:before {
    display: none;
  }
  #cta:after {
    content: "";
    position: absolute;
    display: block;
    height: 69.25rem;
    width: 125rem;
    background: url("/assets/svgs/cta-squares.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -3;
  }
  #cta .container {
    width: 90.0625%;
    margin: auto;
  }
  #cta picture {
    width: 90.0625%;
    left: 50%;
    transform: translateX(-50%);
  }
  #cta picture:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  /* The stitch is #cta-51; the starter's plain #cta never existed here. */
  body.dark-mode #cta-51:after {
    display: none;
  }
}

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

/* Custom full-bleed hero. The site nav is position:fixed with a white bar, so
   it gets a transparent treatment over this hero only (see the nav overrides
   at the end of this block) and the scrim underneath has to carry the nav
   links as well as the headline. */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1946 {
    /* The nav is no longer fixed over this — the topbar scrolls away and only
       the green bar sticks — so the hero only needs its own breathing space. */
    /* Bottom padding is the white band the lower half of the cards sits on;
       the photo above it is a fixed height, so this is what the cards cross
       into. */
    /* No background-color here: the photo is a z-index:-2 child, so a
       background on the section would paint over it. */
    padding: clamp(3rem, 8vw, 5.5rem) 1rem clamp(3rem, 6vw, 5rem);
    position: relative;
    z-index: 1;
  }
  /* The photo is sized independently of the content, so the boundary between
     it and the section below stays put no matter how tall the cards are. The
     card row then simply overhangs it. Previously the photo's height came
     from the content, so every overlap change moved the boundary too — which
     made the two impossible to tune against each other. */
  #hero-1946 .cs-background {
    width: 100%;
    /* The card row starts at a near-constant y — the copy above it is a fixed
       block and its padding clamps out quickly — so the photo is a near-fixed
       height too. Tying it to vw made the overlap drift from 52% to 83% across
       desktop widths. */
    height: clamp(49rem, 49rem + 2vw, 54rem);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1946 .cs-background .cs-picture,
  #hero-1946 .cs-background picture {
    width: 100%;
    height: 100%;
    display: block;
  }
  #hero-1946 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* Three-stop scrim: heavier at the top so the nav reads, lighter through the
     middle so the room stays visible behind the copy. */
  #hero-1946 .cs-background:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(12, 26, 19, 0.82) 0%,
      rgba(12, 26, 19, 0.6) 40%,
      rgba(12, 26, 19, 0.72) 100%
    );
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-1946 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    /* Distance from the buttons down to the card row. Sized so the row starts
       partway up the photo, leaving roughly half a card below its bottom
       edge. */
    padding-bottom: clamp(4rem, 8vw, 5.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-1946 .cs-content {
    text-align: center;
    width: 100%;
    max-width: 46.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #hero-1946 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    /* Over the photo, so it needs the palest green — see the token's note. */
    color: var(--primaryOnPhoto);
    margin-bottom: 0.5rem;
    display: block;
  }
  #hero-1946 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.438rem, 5vw, 3.813rem);
    font-weight: 900;
    line-height: 1.15em;
    max-width: 20ch;
    margin: 0 0 1rem;
    color: #fff;
    text-wrap: balance;
  }
  #hero-1946 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.6em;
    max-width: 42rem;
    margin: 0 0 2rem;
    color: #e6ece8;
  }
  #hero-1946 .cs-button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  #hero-1946 .cs-button-solid,
  #hero-1946 .cs-button-ghost {
    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;
    box-sizing: border-box;
    /* 24px - 40px */
    padding: 0 clamp(1.5rem, 3.5vw, 2.5rem);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition:
      background-color 0.3s,
      color 0.3s,
      border-color 0.3s,
      transform 0.25s ease;
  }
  #hero-1946 .cs-button-solid {
    background-color: var(--primary);
    border: 2px solid var(--primary);
    color: #fff;
  }
  #hero-1946 .cs-button-solid:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.45);
  }
  #hero-1946 .cs-button-ghost {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
  }
  #hero-1946 .cs-button-ghost:hover {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    transform: translateY(-3px);
  }

  /* --- Card row, straddling the bottom edge of the photo ---
     The cards are a fixed height (set below), so pulling the row down by
     exactly half that height centres it on the boundary: top half over the
     photo, bottom half on the white section. */
  #hero-1946 .cs-card-group {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    position: relative;
    z-index: 2;
  }
  #hero-1946 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    /* No fixed height: the grid stretches every card to match the tallest, so
       they stay equal without being padded out to a guessed size. */
    margin: 0;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 1.25rem;
    box-shadow: 0 8px 28px rgba(12, 26, 19, 0.14);
    grid-column: span 12;
    position: relative;
    z-index: 1;
    transition:
      border-color 0.3s,
      box-shadow 0.3s,
      transform 0.3s;
  }
  /* Whole card is the tap target, so the padding lives on the link. */
  #hero-1946 .cs-item-link {
    text-decoration: none;
    height: 100%;
    box-sizing: border-box;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Headings vary between one and two lines. Reserving two lines' worth keeps
     every card's body text starting on the same line, so the row reads as a
     set rather than five independently flowing boxes. */
  #hero-1946 .cs-text-group {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #hero-1946 .cs-h3 {
    min-height: calc(2 * 1.4em);
  }
  #hero-1946 .cs-item:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 32px rgba(var(--primaryRGB), 0.22);
    transform: translateY(-3px);
  }
  #hero-1946 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #hero-1946 .cs-item:hover .cs-icon {
    transform: rotateY(360deg);
  }
  #hero-1946 .cs-icon-picture {
    margin-bottom: 1.25rem;
    perspective: 700px;
    transform-style: preserve-3d;
  }
  #hero-1946 .cs-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: block;
    transition: transform 0.5s;
  }
  #hero-1946 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.4em;
    text-align: inherit;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #hero-1946 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1946 .cs-text {
    font-size: 1.125rem;
  }
  #hero-1946 .cs-item {
    text-align: left;
    grid-column: span 6;
  }
  #hero-1946 .cs-item-link {
    align-items: flex-start;
  }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-1946 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  /* Five cards on a 6-col grid: three across, then two centred underneath,
     rather than leaving an orphan alone on the second row. */
  #hero-1946 .cs-card-group {
    grid-template-columns: repeat(6, 1fr);
  }
  #hero-1946 .cs-item {
    grid-column: span 2;
  }
  #hero-1946 .cs-item:nth-of-type(4) {
    grid-column: 2 / span 2;
  }
  #hero-1946 .cs-item:nth-of-type(5) {
    grid-column: 4 / span 2;
  }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  /* All five fit on one row at full width. */
  #hero-1946 .cs-card-group {
    grid-template-columns: repeat(5, 1fr);
  }
  #hero-1946 .cs-item,
  #hero-1946 .cs-item:nth-of-type(4),
  #hero-1946 .cs-item:nth-of-type(5) {
    grid-column: span 1;
  }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero-1946 .cs-item {
    background-color: var(--medium);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
  body.dark-mode #hero-1946 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #hero-1946 .cs-item-text {
    color: #a9b0ac;
  }
  body.dark-mode #hero-1946 .cs-item:hover {
    border-color: var(--primaryShade);
  }
  body.dark-mode #hero-1946 .cs-item:hover .cs-h3 {
    color: var(--primaryShade);
  }
}

/* Logo over the transparent hero nav.
   The anti-flicker block in base.html shows .light and hides .dark by default.
   Over the dark hero photo we need the reverse, until the user scrolls and the
   bar turns solid again. Desktop only — the mobile bar is always solid. */
/* Superseded by the two-tier header: the topbar is white in light mode, so the
   green logo is correct there and the theme rules in base.html handle the
   rest. Kept only the dark-mode case. */
@media only screen and (min-width: 64rem) {
  [data-theme="dark"] #cs-navigation .cs-logo .light {
    display: none;
  }
  [data-theme="dark"] #cs-navigation .cs-logo .dark {
    display: block;
  }
}

/*-- -------------------------- -->
<---      Nav: shared layout    -->
<--- -------------------------- -*/

/* Both bars use ONE container rule, so their left edges cannot drift apart.
   Each bar's row is: [column 1] [content] [right-hand item].

     top bar:    logo    | contact blocks | quote button
     bottom bar: spacer  | nav links      | phone

   Column 1 is the same width in both, so the logo and HOME share a left edge.
   Everything below is per-bar content styling; the geometry lives here. */

@media only screen and (min-width: 0rem) {
  /* Fixed to the viewport. On scroll the top bar collapses to nothing, which
     leaves the green bar sitting at the very top. */
  #cs-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(26, 26, 26, 0.08);
    display: block;
    z-index: 10000;
    /* aliases of the page-level values so the nav and sections share edges */
    --navGutter: var(--pageGutter);
    --navMax: var(--pageMax);
    --barHeight: clamp(2.75rem, 5.5vw, 3.25rem);
  }

  /* THE shared container rule — both bars, identical. */
  #cs-navigation .cs-top-container,
  #cs-navigation .cs-bottom-bar .cs-container {
    width: 100%;
    max-width: var(--navMax);
    margin-inline: auto;
    padding-inline: var(--navGutter);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* Column 1: logo above, spacer below — same width, no padding. */
  #cs-navigation .cs-logo {
    height: clamp(2.375rem, 4.4vw, 2.75rem);
    flex: none;
    /* Shrink to the image, so the anchor is not a click target across the
       empty half of the bar. */
    width: fit-content;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  #cs-navigation .cs-logo img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  /* Slides up and collapses as you start scrolling, leaving the green bar. */
  #cs-navigation .cs-top-bar {
    padding: 0.5rem 0;
    background-color: #fff;
    max-height: 12.5rem;
    opacity: 1;
    overflow: hidden;
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease,
      padding 0.35s ease;
  }
  body.scroll #cs-navigation .cs-top-bar {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  #cs-navigation .cs-bottom-bar {
    width: 100%;
    background-color: var(--primary);
    box-sizing: border-box;
  }
  #cs-navigation .cs-bottom-bar .cs-container {
    min-height: var(--barHeight);
  }
  #cs-navigation .cs-bottom-bar .cs-line {
    background-color: #fff;
  }

  /* Contact blocks / phone share one presentation. */
  #cs-navigation .cs-contact-link,
  #cs-navigation .cs-call {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  #cs-navigation .cs-contact-link .cs-wrapper,
  #cs-navigation .cs-call .cs-wrapper {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  #cs-navigation .cs-contact-link .cs-wrapper {
    background-color: #f4f6f5;
  }
  #cs-navigation .cs-call .cs-wrapper {
    background-color: #fff;
  }
  #cs-navigation .cs-contact-link .cs-icon,
  #cs-navigation .cs-call .cs-icon {
    width: 1.0625rem;
    height: auto;
  }
  #cs-navigation .cs-contact-link .cs-info,
  #cs-navigation .cs-call .cs-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }
  #cs-navigation .cs-contact-link .cs-header {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--headerColor);
  }
  #cs-navigation .cs-contact-link .cs-link-content {
    font-size: 0.78125rem;
    color: #6b7280;
  }
  #cs-navigation .cs-call {
    color: #fff;
  }
  #cs-navigation .cs-call .cs-header {
    font-size: 0.78125rem;
    opacity: 0.9;
  }
  #cs-navigation .cs-call .cs-link-content {
    font-size: 1rem;
    font-weight: 700;
  }

  /* Mobile: contact blocks hidden, phone keeps only its icon. */
  #cs-navigation .cs-contact-group {
    display: none;
  }
}

/* ---------- Desktop ---------- */
@media only screen and (min-width: 64rem) {
  /* Top bar content: contact blocks then the quote button, pushed right. */
  #cs-navigation .cs-contact-group {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2rem);
    margin-left: auto;
    margin-right: clamp(2rem, 5vw, 5rem);
    flex: none;
  }
  #cs-navigation .cs-top-bar .cs-button-solid {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    padding: 0.875rem 1.5rem;
    border-radius: 0.25rem;
    background-color: var(--primary);
    color: #fff;
    white-space: nowrap;
    min-width: 0;
    transition:
      background-color 0.3s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  #cs-navigation .cs-top-bar .cs-button-solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -6px rgba(var(--primaryRGB), 0.5);
  }
  #cs-navigation .cs-top-bar .cs-button-solid:before {
    display: none;
  }

  /* Bottom bar content: nav flush against the spacer, phone right. */
  #cs-navigation .cs-bottom-bar .cs-nav {
    margin: 0;
    padding: 0;
    flex: 1;
  }
  #cs-navigation .cs-bottom-bar .cs-ul-wrapper,
  #cs-navigation .cs-bottom-bar .cs-ul {
    margin: 0;
    padding: 0;
  }
  #cs-navigation .cs-bottom-bar .cs-ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.8vw, 2.75rem);
  }
  #cs-navigation .cs-bottom-bar .cs-li {
    margin: 0;
    padding: 0;
  }
  #cs-navigation .cs-bottom-bar .cs-li-link,
  #cs-navigation .cs-bottom-bar .cs-dropdown-toggle {
    line-height: var(--barHeight);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
  }
  /* The Services toggle is a <button>, so it needs the browser defaults
     stripped to match the anchor links beside it. root.css only does this
     inside the mobile query, where the dropdown becomes an accordion. */
  #cs-navigation .cs-bottom-bar .cs-dropdown-toggle {
    width: auto;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  #cs-navigation .cs-bottom-bar .cs-li-link:hover,
  #cs-navigation .cs-bottom-bar .cs-dropdown-toggle:hover,
  #cs-navigation .cs-bottom-bar .cs-li-link.cs-active {
    color: var(--navAccent);
  }
  #cs-navigation .cs-bottom-bar .cs-drop-ul .cs-li-link,
  #cs-navigation .cs-bottom-bar .cs-drop-link {
    line-height: 1.5em;
    font-size: 1rem;
    text-transform: none;
    color: var(--headerColor);
  }
  #cs-navigation .cs-bottom-bar .cs-drop-link:hover {
    color: var(--primary);
  }
  /* Dark mode: the dropdown panel is dark, so its links need light text.
     root.css sets this but is out-specified by the selectors above. */
  body.dark-mode #cs-navigation .cs-bottom-bar .cs-drop-ul .cs-li-link,
  body.dark-mode #cs-navigation .cs-bottom-bar .cs-drop-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-bottom-bar .cs-drop-link:hover {
    color: var(--navAccent);
  }
  #cs-navigation .cs-bottom-bar .cs-call {
    margin: 0 0 0 auto;
    flex: none;
  }
  /* The quote button above stops short of the gutter by the contact group's
     right margin, so the toggle takes the same inset to line up with it. */
  #cs-navigation .cs-bottom-bar #dark-mode-toggle {
    margin-right: clamp(2rem, 5vw, 5rem);
  }
}

/* ---------- Theme toggle: travels between the bars ---------- */
@media only screen and (min-width: 0rem) {
  /* Sits in the green bar, which is the tier that stays visible on scroll.
     dark.css owns the sun/moon slide animation and positions them absolutely
     against this button, so only the box is styled here — the icons are left
     alone deliberately. */
  #cs-navigation #dark-mode-toggle {
    /* dark.css pins this absolutely with top/right for the single-bar layout;
       reset that so it flows as a normal child of the green bar. */
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    /* Box sized to the glyph so its edges are the button's edges — no dead
       space to compensate for, so it lines up on the shared gutter. */
    width: 1.5625rem;
    height: 1.5625rem;
    flex: none;
    margin: 0 0 0 1.75rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: block;
    overflow: visible;
  }
  /* The moon sits on the green bar, so it needs to be white rather than the
     dark fill dark.css gives it. Everything else about the icons is left to
     dark.css. */
  #cs-navigation #dark-mode-toggle .moon {
    fill: #fff;
  }
}

/* ---------- Dark mode ---------- */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cs-navigation,
  body.dark-mode #cs-navigation .cs-top-bar {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-contact-link .cs-header {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-contact-link .cs-link-content {
    color: #a9b0ac;
  }
  body.dark-mode #cs-navigation .cs-contact-link .cs-wrapper {
    background-color: rgba(255, 255, 255, 0.08);
  }
  /* The bar keeps --primary in dark mode. Darkening it to --primaryDark put a
     second green next to the top bar's --primary button, and it separated from
     the near-black page worse (1.75 vs 2.94 contrast), not better. */
}

/* Hero clears the fixed header at rest: top bar + green bar, plus space. */
@media only screen and (min-width: 0rem) {
  #hero-1946 {
    /* Clears the fixed header with room to spare, so the copy sits lower in a
       shorter photo rather than being tight under the nav. */
    padding-top: clamp(12rem, 21vw, 13rem);
  }
}

/* Interior pages sit under the same fixed header as the hero. */
@media only screen and (min-width: 0rem) {
  #int-hero {
    padding-top: clamp(9rem, 17vw, 13rem);
  }
}

/* ---------- Mobile: below 1024px ----------
   Top bar:   logo left, theme toggle right.
   Green bar: full phone block left (icon + label + number), boxed hamburger
              right — the phone number stays readable rather than collapsing
              to an icon, since calling is the likely action on a phone.
   Panel:     nav links, with the quote CTA as a full-width button at the top
              so the primary action is never lost at narrow widths. */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-top-container,
  #cs-navigation .cs-bottom-bar .cs-container {
    padding-inline: 1rem;
    gap: 0.75rem;
  }

  /* --- Top bar --- */
  #cs-navigation .cs-top-bar {
    padding: 0.625rem 0;
  }
  #cs-navigation .cs-logo {
    height: 2.375rem;
  }
  /* The contact detail blocks are too wide for a phone, but the quote button
     inside the same group is the primary action and fills the otherwise empty
     right of the top bar. Keep the group, hide only the detail blocks. */
  #cs-navigation .cs-contact-group {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0;
    gap: 0;
    flex: none;
  }
  #cs-navigation .cs-contact-group .cs-contact-link {
    display: none;
  }
  #cs-navigation .cs-top-bar .cs-button-solid {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    padding: 0.8125rem 1.125rem;
    border-radius: 0.25rem;
    background-color: var(--primary);
    color: #fff;
    white-space: nowrap;
    min-width: 0;
    display: inline-block;
    transition:
      background-color 0.3s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  #cs-navigation .cs-top-bar .cs-button-solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -6px rgba(var(--primaryRGB), 0.5);
  }
  #cs-navigation .cs-top-bar .cs-button-solid:before {
    display: none;
  }
  /* Stays in the green bar, ordered between the phone and the hamburger.
     Absolute positioning into the top bar was fragile — it depended on the
     top bar's exact height and overlapped the hamburger when that changed. */
  #cs-navigation #dark-mode-toggle {
    position: relative;
    top: auto;
    right: auto;
    order: 2;
    width: 1.5625rem;
    height: 1.5625rem;
    margin: 0 1.25rem 0 0;
    flex: none;
  }

  /* --- Green bar --- */
  #cs-navigation .cs-bottom-bar .cs-container {
    min-height: 3.75rem;
  }
  /* Phone left; the auto margin pushes the toggle and hamburger to the right
     as a pair, rather than space-between spreading all three evenly. */
  #cs-navigation .cs-call {
    order: 1;
    margin: 0 auto 0 0;
    flex: none;
  }
  #cs-navigation .cs-call .cs-info {
    /* keep the number visible at rest */
    display: flex;
  }
  #cs-navigation .cs-call .cs-wrapper {
    width: 2.5rem;
    height: 2.5rem;
  }
  #cs-navigation .cs-call .cs-link-content {
    font-size: 1.0625rem;
  }
  /* Scrolled: the top bar has collapsed and this bar is all that is left. Drop
     the "Call Us" label to keep the row compact, but keep the number itself —
     on a phone it is the highest-intent thing in the bar. */
  body.scroll #cs-navigation .cs-call .cs-header {
    display: none;
  }
  body.scroll #cs-navigation .cs-bottom-bar .cs-container {
    min-height: 3.25rem;
  }
  #cs-navigation .cs-nav {
    order: 3;
    flex: none;
    margin: 0;
    display: flex;
    align-items: center;
  }
  /* Hamburger as a filled box: a bigger, more obvious tap target than bare
     lines on a coloured bar. */
  #cs-navigation .cs-toggle {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.16);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
  }
  #cs-navigation .cs-toggle:hover,
  #cs-navigation .cs-toggle.cs-active {
    background-color: rgba(255, 255, 255, 0.26);
  }
  #cs-navigation .cs-box {
    width: 1.25rem;
    height: 0.875rem;
    position: relative;
    display: block;
  }
  #cs-navigation .cs-line {
    background-color: #fff;
  }

  /* --- Slide-down panel --- */
  #cs-navigation .cs-bottom-bar {
    position: relative;
  }
  #cs-navigation .cs-ul-wrapper {
    top: 100%;
  }
  /* Panel sits on white, so its links need dark text rather than the white
     used on the green bar. */
  #cs-navigation .cs-ul-wrapper .cs-li-link,
  #cs-navigation .cs-ul-wrapper .cs-dropdown-toggle {
    color: var(--headerColor);
    text-transform: none;
    font-size: 1rem;
    line-height: 1.5;
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper .cs-li-link,
  body.dark-mode #cs-navigation .cs-ul-wrapper .cs-dropdown-toggle {
    color: var(--bodyTextColorWhite);
  }
  /* Chevron is yellow for the green bar; on the white panel it needs to read
     as dark. */
  #cs-navigation .cs-ul-wrapper .cs-drop-icon {
    filter: brightness(0) saturate(100%);
    opacity: 0.5;
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper .cs-drop-icon {
    filter: brightness(0) invert(1);
  }

  /* Quote CTA in the panel. Hidden while the top bar is visible, since the
     button is already there; shown once the top bar collapses on scroll so
     the action is never more than one tap away. */
  #cs-navigation .cs-li-cta {
    order: -1;
    border-bottom: none;
    /* 1rem above matches the half-gap the links use at the panel edges; the
       button is the same green as the bar, so it needs that clearance to read
       as a button rather than part of the bar. */
    padding: 1rem 0;
    display: none;
  }
  body.scroll #cs-navigation .cs-li-cta {
    display: block;
  }
  #cs-navigation .cs-panel-cta {
    width: 100%;
    box-sizing: border-box;
    padding: 0.9375rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    background-color: var(--primary);
    color: #fff;
    border-radius: 0.25rem;
    display: block;
    /* Lifts it off the panel so it does not merge with the green bar above.
       Two layers: a tight neutral shadow for the edge, a wider green one for
       the glow. */
    box-shadow:
      0 4px 10px rgba(26, 26, 26, 0.28),
      0 8px 24px rgba(var(--primaryRGB), 0.45);
    transition:
      background-color 0.3s,
      box-shadow 0.3s;
  }
  #cs-navigation .cs-panel-cta:hover {
    box-shadow:
      0 6px 14px rgba(26, 26, 26, 0.32),
      0 12px 30px rgba(var(--primaryRGB), 0.55);
  }
  /* On the dark panel a dark shadow is invisible, so lead with a light edge
     and keep a green glow under it. */
  body.dark-mode #cs-navigation .cs-panel-cta {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.28),
      0 8px 24px rgba(0, 0, 0, 0.55);
  }
  /* the panel list is a column, so order:-1 lifts the CTA to the top */
  #cs-navigation .cs-ul {
    display: flex;
    flex-direction: column;
  }
}

/* Desktop: the panel CTA is redundant — the top bar has its own button. */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-li-cta {
    display: none;
  }
}

/* Narrow phones: trim the label, keep the number, and shrink the logo and
   quote button so they do not collide. */
@media only screen and (max-width: 26.25rem) {
  #cs-navigation .cs-call .cs-header {
    display: none;
  }
  #cs-navigation .cs-call .cs-link-content {
    font-size: 1rem;
  }
  #cs-navigation .cs-logo {
    height: 2.125rem;
  }
  #cs-navigation .cs-top-bar .cs-button-solid {
    font-size: 0.8125rem;
    padding: 0.6875rem 0.875rem;
  }
}

/* The hero cards sit in normal flow with no overhang, so #sbs takes the same
   --sectionY as every other section. (This used to compensate for cards that
   hung past the hero's bottom edge.) */

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-284 {
    padding: var(--sectionPadding);
  }
  #steps-284 .cs-container {
    width: 100%;
    /* changes to 1104px on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-284 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 27.125rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #steps-284 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #steps-284 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    max-width: 43.75rem;
    margin: 0 0 1rem;
    color: var(--headerColor);
  }
  #steps-284 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    margin-bottom: 1rem;
    color: var(--bodyTextColor);
  }
  #steps-284 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #steps-284 .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;
    box-sizing: border-box;
    transition:
      background-color 0.3s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  #steps-284 .cs-button-solid:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -6px rgba(var(--primaryRGB), 0.55);
  }
  #steps-284 .cs-right-section {
    margin: 0;
    padding: 0;
    max-width: 35.125rem;
  }
  #steps-284 .cs-item {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #steps-284 .cs-item:nth-of-type(1) .cs-item-text:before {
    height: 50%;
    top: auto;
    bottom: -1px;
  }
  #steps-284 .cs-item:nth-of-type(2),
  #steps-284 .cs-item:nth-of-type(4) {
    justify-content: flex-end;
    text-align: right;
  }
  #steps-284 .cs-item:nth-of-type(2) .cs-number,
  #steps-284 .cs-item:nth-of-type(4) .cs-number {
    order: 2;
    margin: 0;
    /* 15px - 24px */
    margin-left: clamp(0.9375rem, 3vw, 1.5rem);
  }
  #steps-284 .cs-item:nth-of-type(2) .cs-item-text,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text {
    padding-left: 0;
    /* 15px - 24px */
    padding-right: clamp(0.9375rem, 3vw, 1.5rem);
  }
  #steps-284 .cs-item:nth-of-type(2) .cs-item-text:before,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
    border-top: 1px solid var(--primary);
    border-left: none;
    border-right: 1px solid var(--primary);
    left: auto;
    right: 0;
    bottom: 0;
    border-radius: 0 0.5rem 0.5rem 0;
  }
  #steps-284 .cs-item:nth-of-type(2) .cs-item-text:after,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:after {
    left: auto;
    right: -0.9375rem;
  }
  #steps-284 .cs-item:nth-of-type(3) .cs-item-text:before {
    height: auto;
    border-top: 1px solid var(--primary);
    border-radius: 0.5rem 0 0 0.5rem;
    top: 1px;
    bottom: 0px;
  }
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
    height: 50%;
    border-radius: 0 0.5rem 0 0;
    border-bottom: none;
    top: -1px;
  }
  #steps-284 .cs-number {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    /* 15px - 24px */
    margin-right: clamp(0.9375rem, 3vw, 1.5rem);
    /* 40px - 52px */
    width: clamp(2.5rem, 5.1vw, 3.25rem);
    height: clamp(2.5rem, 5.1vw, 3.25rem);
    border-radius: 50%;
    border: 2px solid var(--primary);
    color: var(--headerColor);
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    position: relative;
  }
  #steps-284 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    max-width: 18.75rem;
    /* 22px - 32px */
    padding: clamp(1.375rem, 3vw, 2rem) 0;
    box-sizing: content-box;
    /* 15px - 24px */
    padding-left: clamp(0.9375rem, 3vw, 1.5rem);
    color: var(--bodyTextColor);
    position: relative;
  }
  #steps-284 .cs-item-text strong {
    color: var(--headerColor);
  }
  #steps-284 .cs-item-text:before {
    /* connector line */
    content: "";
    width: 70%;
    height: 100%;
    border-radius: 0 0 0 0.5rem;
    border-left: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
    box-sizing: content-box;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #steps-284 .cs-item-text:after {
    /* dot on the connector. The thick border masks the line behind it, so it
       has to match the page background — hence the variable. */
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--primary);
    border-radius: 50%;
    border: 12px solid var(--stepsDotMask, #fff);
    box-sizing: content-box;
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    left: -0.9375rem;
    transform: translateY(-50%);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-284 .cs-container {
    max-width: 69rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 2.75rem;
  }
  #steps-284 .cs-content {
    width: 50%;
    margin: 0;
  }
  #steps-284 .cs-right-section {
    width: 57%;
    /* pulls the list flush with the top of the left column */
    margin-top: calc(clamp(1.25rem, 2vw, 1.5625rem) * -1);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps-284 {
    --stepsDotMask: var(--dark);
  }
  body.dark-mode #steps-284 .cs-title,
  body.dark-mode #steps-284 .cs-number,
  body.dark-mode #steps-284 .cs-item-text strong {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-284 .cs-text,
  body.dark-mode #steps-284 .cs-item-text {
    color: #a9b0ac;
  }
  body.dark-mode #steps-284 .cs-topper {
    color: var(--primaryLight);
  }
}

/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/

/* Icons are inlined so their stroke follows currentColor, which lets the
   featured card and the hover state flip them to white without a filter. */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-289 {
    text-align: center;
    padding: var(--sectionPadding);
  }
  #why-choose-289 .cs-container {
    width: 100%;
    /* changes to 1280px on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #why-choose-289 .cs-content {
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #why-choose-289 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #why-choose-289 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #why-choose-289 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 32.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #why-choose-289 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  #why-choose-289 .cs-item {
    list-style: none;
    text-align: left;
    width: 100%;
    padding: 2rem;
    /* White, not the tint — the section behind it is #f4f6f5, so a tinted card
       would be invisible against its own band. */
    background-color: #fff;
    border-radius: 1rem;
    box-sizing: border-box;
    transition:
      background-color 0.3s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  /* One card carries the accent, as in the reference. */
  #why-choose-289 .cs-item-featured {
    background-color: var(--primary);
  }
  #why-choose-289 .cs-item-featured .cs-h3,
  #why-choose-289 .cs-item-featured .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #why-choose-289 .cs-item-featured .cs-icon {
    color: #fff;
  }
  #why-choose-289 .cs-item:hover {
    background-color: var(--primary);
  }
  #why-choose-289 .cs-item:hover .cs-h3,
  #why-choose-289 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #why-choose-289 .cs-item:hover .cs-icon {
    color: #fff;
  }
  #why-choose-289 .cs-icon {
    height: 3rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    display: block;
    transition: color 0.3s;
  }
  #why-choose-289 .cs-icon svg {
    width: 3rem;
    height: 3rem;
    display: block;
  }
  #why-choose-289 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.3em;
    margin: 0 0 1rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #why-choose-289 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-289 .cs-container {
    max-width: 80rem;
  }
  #why-choose-289 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    /* 32px - 64px */
    gap: clamp(2rem, 5vw, 4rem);
  }
  #why-choose-289 .cs-flex {
    /* the heading takes the larger share; the intro is only a line or two */
    width: 58%;
    flex: none;
  }
  #why-choose-289 .cs-text {
    width: auto;
    max-width: 26rem;
    /* sits on the heading baseline rather than floating mid-row */
    margin-bottom: 0.375rem;
  }
  #why-choose-289 .cs-title {
    margin: 0;
  }
  #why-choose-289 .cs-card-group {
    justify-content: space-between;
    /* every card matches the tallest */
    align-items: stretch;
    flex-direction: row;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #why-choose-289 .cs-item {
    width: auto;
    /* 16px - 32px */
    padding: 2rem clamp(1rem, 2.1vw, 2rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-289 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-289 .cs-text,
  body.dark-mode #why-choose-289 .cs-item-text {
    color: #a9b0ac;
  }
  /* The grey above is for text on the dark page; on a green card it drops to
     2.84:1, so the filled cards keep white text. */
  body.dark-mode #why-choose-289 .cs-item-featured .cs-item-text,
  body.dark-mode #why-choose-289 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-289 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #why-choose-289 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-289 .cs-item {
    background-color: rgba(255, 255, 255, 0.06);
  }
  body.dark-mode #why-choose-289 .cs-item-featured,
  body.dark-mode #why-choose-289 .cs-item:hover {
    background-color: var(--primary);
  }
  /* Brand green is too dark against the dark card, so plain icons lift to the
     lighter shade; featured and hovered stay white as in light mode. */
  body.dark-mode #why-choose-289 .cs-icon {
    color: var(--primaryShade);
  }
  body.dark-mode #why-choose-289 .cs-item-featured .cs-icon,
  body.dark-mode #why-choose-289 .cs-item:hover .cs-icon {
    color: #fff;
  }
}

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

/* Heading and CTA left, numbered accordion right, brand mark bleeding off the
   bottom-left. The section is tinted so the mark can sit lighter than the
   background rather than as a colour block on white. Uses the .cs-faq-item /
   .cs-button / .cs-item-p structure accordion.js already drives. */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-roza {
    padding: var(--sectionPadding);
    background-color: #f4f6f5;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #faq-roza .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* 40px - 56px */
    gap: clamp(2.5rem, 5vw, 3.5rem);
    position: relative;
    z-index: 1;
  }

  /* --- Brand mark --- */
  #faq-roza .cs-pattern {
    /* A long low curve sitting on the bottom-left corner, bleeding off the
       left edge. */
    width: clamp(20rem, 38vw, 32rem);
    aspect-ratio: 268 / 129;
    height: auto;
    background-color: var(--primary);
    mask-image: url("/assets/svgs/faq-shape.svg");
    mask-repeat: no-repeat;
    mask-position: left bottom;
    mask-size: contain;
    -webkit-mask-image: url("/assets/svgs/faq-shape.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left bottom;
    -webkit-mask-size: contain;
    opacity: 1;
    position: absolute;
    left: -4%;
    bottom: -2%;
    z-index: 0;
    pointer-events: none;
  }

  /* --- Left column --- */
  #faq-roza .cs-aside {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #faq-roza .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #faq-roza .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    max-width: 15ch;
    margin: 0 0 1.5rem;
    color: var(--headerColor);
  }
  #faq-roza .cs-faq-footer-title {
    font-size: clamp(1.125rem, 1.8vw, 1.25rem);
    font-weight: 700;
    line-height: 1.4em;
    margin: 0 0 0.375rem;
    color: var(--headerColor);
  }
  #faq-roza .cs-faq-footer-text {
    font-size: var(--bodyFontSize);
    line-height: 1.6em;
    max-width: 30rem;
    margin: 0 0 1.5rem;
    color: var(--bodyTextColor);
  }
  #faq-roza .cs-faq-button {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    padding: 0 2rem;
    box-sizing: border-box;
    background-color: var(--primary);
    border-radius: 0.25rem;
    color: #fff;
    display: inline-block;
    align-self: flex-start;
    transition:
      background-color 0.3s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  #faq-roza .cs-faq-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -6px rgba(var(--primaryRGB), 0.55);
  }

  /* --- Right column: numbered rows --- */
  #faq-roza .cs-content {
    width: 100%;
  }
  #faq-roza .cs-faq-group {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #faq-roza .cs-faq-item {
    list-style: none;
    width: 100%;
    background-color: #fff;
    border-radius: 0.375rem;
    overflow: hidden;
    transition: background-color 0.3s;
  }
  /* The open row inverts, as in the reference. */
  #faq-roza .cs-faq-item.active {
    background-color: var(--primary);
  }
  #faq-roza .cs-button {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-family: inherit;
    font-weight: 700;
    line-height: 1.4em;
    text-align: left;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--headerColor);
    display: flex;
    align-items: stretch;
    position: relative;
    transition: color 0.3s;
  }
  #faq-roza .cs-button-text {
    /* 16px - 24px */
    padding: clamp(1rem, 2vw, 1.25rem) 3rem clamp(1rem, 2vw, 1.25rem)
      clamp(1.25rem, 2.4vw, 1.75rem);
    flex: 1;
  }
  #faq-roza .cs-faq-item.active .cs-button {
    color: #fff;
  }
  #faq-roza .cs-faq-item:not(.active) .cs-button:hover {
    color: var(--primary);
  }
  /* chevron drawn in CSS, so there is no icon file to keep in sync */
  #faq-roza .cs-button:before,
  #faq-roza .cs-button:after {
    content: "";
    width: 0.5625rem;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transition: transform 0.3s;
  }
  #faq-roza .cs-button:before {
    transform: translateY(-50%) rotate(45deg);
    right: 1.625rem;
  }
  #faq-roza .cs-button:after {
    transform: translateY(-50%) rotate(-45deg);
  }
  #faq-roza .cs-faq-item.active .cs-button:before {
    transform: translateY(-50%) rotate(-45deg);
  }
  #faq-roza .cs-faq-item.active .cs-button:after {
    transform: translateY(-50%) rotate(45deg);
  }

  /* The wrapper animates its height; the paragraph keeps its padding so the
     text does not reflow as it opens. */
  #faq-roza .cs-item-p-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  #faq-roza .cs-faq-item.active .cs-item-p-wrap {
    grid-template-rows: 1fr;
  }
  #faq-roza .cs-item-p {
    font-size: var(--bodyFontSize);
    line-height: 1.6em;
    margin: 0;
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    overflow: hidden;
    color: rgba(255, 255, 255, 0.78);
    min-height: 0;
  }
  #faq-roza .cs-faq-item.active .cs-item-p {
    /* 16px - 24px bottom padding once open */
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #faq-roza .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    /* 40px - 88px */
    gap: clamp(2.5rem, 6vw, 5.5rem);
  }
  #faq-roza .cs-aside {
    width: 38%;
    max-width: 24rem;
  }
  #faq-roza .cs-content {
    width: 57%;
  }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-roza {
    background-color: rgba(255, 255, 255, 0.04);
  }
  /* The shape is a background-image, so it needs no fill of its own — a
     background-color here would paint a rectangle behind it. Just soften it
     against the darker surface. */
  body.dark-mode #faq-roza .cs-pattern {
    background-color: var(--primary);
    opacity: 0.9;
  }
  body.dark-mode #faq-roza .cs-title,
  body.dark-mode #faq-roza .cs-faq-footer-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-roza .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #faq-roza .cs-faq-footer-text {
    color: #a9b0ac;
  }
  body.dark-mode #faq-roza .cs-faq-item {
    background-color: rgba(255, 255, 255, 0.06);
  }
  body.dark-mode #faq-roza .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-roza .cs-number {
    background-color: rgba(255, 255, 255, 0.07);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-roza .cs-faq-item:not(.active) .cs-button:hover {
    color: var(--primaryShade);
  }
}

/* accordion.js measures the tallest answer by opening each row in turn; this
   suppresses the transitions while it does so. */
@media only screen and (min-width: 0rem) {
  #faq-roza .cs-faq-group.cs-measuring .cs-item-p-wrap,
  #faq-roza .cs-faq-group.cs-measuring .cs-faq-item,
  #faq-roza .cs-faq-group.cs-measuring .cs-button {
    transition: none !important;
  }
}

/* Hover on the nav contact blocks and phone. The theme toggle is left alone —
   it is a control, not a link. */
@media only screen and (min-width: 0rem) {
  #cs-navigation .cs-contact-link .cs-wrapper,
  #cs-navigation .cs-call .cs-wrapper {
    transition:
      background-color 0.3s ease,
      transform 0.25s ease;
  }
  #cs-navigation .cs-contact-link .cs-info,
  #cs-navigation .cs-call .cs-info {
    transition: transform 0.25s ease;
  }
  #cs-navigation .cs-contact-link .cs-header,
  #cs-navigation .cs-contact-link .cs-link-content,
  #cs-navigation .cs-call .cs-header,
  #cs-navigation .cs-call .cs-link-content {
    transition: color 0.3s ease;
  }

  /* icon tile lifts, text nudges after it */
  #cs-navigation .cs-contact-link:hover .cs-wrapper,
  #cs-navigation .cs-call:hover .cs-wrapper {
    transform: translateY(-2px);
  }
  #cs-navigation .cs-contact-link:hover .cs-info,
  #cs-navigation .cs-call:hover .cs-info {
    transform: translateX(2px);
  }
  #cs-navigation .cs-contact-link:hover .cs-link-content {
    color: var(--primary);
  }
  #cs-navigation .cs-call:hover .cs-link-content {
    color: var(--navAccent);
  }
  body.dark-mode #cs-navigation .cs-contact-link:hover .cs-link-content {
    color: var(--primaryShade);
  }
}

/*-- -------------------------- -->
<---      Homepage System       -->
<--- -------------------------- -*/

/* The homepage sections came from different sources, so their containers,
   spacing and animations did not agree. This block normalises them.

   Loaded last so it wins on order rather than specificity — nothing here
   needs !important. */

:root {
  /* One page width and one gutter, shared by the nav and every section, so
     headings line up down the whole page. */
  --pageMax: 82.5rem;
  --pageGutter: clamp(1rem, 3vw, 2.5rem);
  /* 64px - 112px vertical rhythm */
  --sectionY: clamp(4rem, 8vw, 7rem);
}

/* ---------- 1. Matching edges ---------- */
@media only screen and (min-width: 0rem) {
  #hero-1946 .cs-container,
  #sbs .cs-container,
  #steps-284 .cs-container,
  #why-choose-289 .cs-container,
  #sbs-r .cs-container,
  #faq-roza .cs-container,
  #cta-51 .cs-container,
  #services-list .cs-container,
  #included .cs-container,
  #other-services .cs-container,
  #gallery .cs-container,
  #cs-contact .cs-container {
    width: 100%;
    max-width: var(--pageMax);
    margin-inline: auto;
    padding-inline: var(--pageGutter);
    box-sizing: border-box;
  }
  /* Prose measure, not page width — but the same gutter so the left edge still
     lines up with every other section. */
  #legal .cs-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--pageGutter);
    box-sizing: border-box;
  }

  /* Sections carry the vertical rhythm; the container only handles width. */
  #sbs,
  #steps-284,
  #why-choose-289,
  #sbs-r,
  #faq-roza,
  #cta-51,
  #services-list,
  #included,
  #other-services,
  #gallery,
  #legal,
  #cs-contact {
    padding-block: var(--sectionY);
    padding-inline: 0;
  }

  /* The interior banner has no .cs-container — its h1 is the only child — so
     it takes the shared width and gutter directly, matching the homepage. */
  #int-hero h1 {
    width: 100%;
    max-width: var(--pageMax);
    margin-inline: auto;
    padding-inline: var(--pageGutter);
    box-sizing: border-box;
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.15em;
    text-wrap: balance;
  }

  /* The hero's card row sits outside .cs-container, so it needs the same
     width treatment to line up with everything below it. */
  #hero-1946 .cs-card-group {
    max-width: var(--pageMax);
    margin-inline: auto;
    padding-inline: var(--pageGutter);
    box-sizing: border-box;
  }
  #hero-1946 {
    padding-inline: 0;
  }
}

/* ---------- 2. Consistent type scale ---------- */
@media only screen and (min-width: 0rem) {
  #sbs .cs-topper,
  #steps-284 .cs-topper,
  #why-choose-289 .cs-topper,
  #sbs-r .cs-topper,
  #faq-roza .cs-topper,
  #cta-51 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
  }
  #sbs .cs-title,
  #steps-284 .cs-title,
  #why-choose-289 .cs-title,
  #sbs-r .cs-title,
  #faq-roza .cs-title,
  #cta-51 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.15em;
    margin-block: 0 1.25rem;
    text-wrap: balance;
  }
  #sbs .cs-text,
  #steps-284 .cs-text,
  #why-choose-289 .cs-text,
  #sbs-r .cs-text,
  #cta-51 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.6em;
  }
}

/* ---------- 3. Scroll-in stagger ----------
   reveal.js and root.css already handle the fade-up. This only adds the
   stagger so a card row does not land all at once. */
@media only screen and (min-width: 0rem) {
  .cs-reveal .cs-item {
    opacity: 0;
    transform: translateY(1rem);
    transition:
      opacity 0.5s ease,
      transform 0.5s ease;
  }
  .cs-reveal.is-revealed .cs-item {
    opacity: 1;
    transform: none;
  }
  .cs-reveal.is-revealed .cs-item:nth-child(2) {
    transition-delay: 0.08s;
  }
  .cs-reveal.is-revealed .cs-item:nth-child(3) {
    transition-delay: 0.16s;
  }
  .cs-reveal.is-revealed .cs-item:nth-child(4) {
    transition-delay: 0.24s;
  }
  .cs-reveal.is-revealed .cs-item:nth-child(5) {
    transition-delay: 0.32s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-reveal .cs-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 4. Shared surfaces ---------- */
@media only screen and (min-width: 0rem) {
  /* Alternate tint, so sections read as a rhythm rather than random bands.
   */
  #why-choose-289,
  #faq-roza {
    background-color: var(--surfaceTint, #f4f6f5);
  }
  body.dark-mode #why-choose-289,
  body.dark-mode #faq-roza {
    background-color: rgba(255, 255, 255, 0.03);
  }

  /* One card treatment everywhere. */
  #why-choose-289 .cs-item,
  #hero-1946 .cs-item {
    border-radius: 1rem;
  }
}

/* ---------- 5. Mobile ---------- */
@media only screen and (max-width: 47.9375rem) {
  /* Side-by-side sections stack, so the images must not overflow. */
  #sbs .cs-container,
  #sbs-r .cs-container {
    flex-direction: column;
  }
  #sbs .cs-left,
  #sbs-r .cs-left {
    width: 100%;
    max-width: 33rem;
    /* the em-based scaling in the stitch overflows narrow screens */
    font-size: min(4.2vw, 0.62em);
  }
  #sbs .cs-right,
  #sbs-r .cs-right {
    width: 100%;
    max-width: none;
  }
  /* Long headings wrap rather than forcing horizontal scroll. */
  #sbs .cs-title,
  #steps-284 .cs-title,
  #why-choose-289 .cs-title,
  #sbs-r .cs-title,
  #faq-roza .cs-title,
  #hero-1946 .cs-title {
    overflow-wrap: break-word;
  }
  /* Buttons go full width so they are easy to hit. Block rather than
     inline-block so no baseline descender gap sits under them. */
  #sbs .button-solid,
  #sbs-r .button-solid,
  #steps-284 .cs-button-solid,
  #faq-roza .cs-faq-button {
    width: 100%;
    text-align: center;
    display: block;
  }
  #hero-1946 .cs-button-group {
    width: 100%;
    flex-direction: column;
  }
  #hero-1946 .cs-button-solid,
  #hero-1946 .cs-button-ghost {
    width: 100%;
  }
}

/* FAQ on mobile: the columns stack, so the shape has no column edge to bleed
   off and just crowds the answers. Hide it and give the questions room to
   breathe before the CTA below. */
@media only screen and (max-width: 47.9375rem) {
  #faq-roza .cs-pattern {
    display: none;
  }
  #faq-roza .cs-container {
    /* 40px - 56px between the heading block and the questions */
    gap: clamp(2.5rem, 7vw, 3.5rem);
  }
  #faq-roza .cs-faq-group {
    /* clears the section's bottom padding so the last answer is not tight
       against the next section */
    margin-bottom: 1rem;
  }
}

/* --- Mobile corrections --- */
@media only screen and (max-width: 47.9375rem) {
  /* The decorative shape has no column edge to bleed off once the columns
     stack, so it just crowds the answers. */
  #faq-roza .cs-pattern {
    display: none;
  }
  #faq-roza .cs-container {
    /* 40px - 56px between the heading block and the questions */
    gap: clamp(2.5rem, 7vw, 3.5rem);
  }
  #faq-roza .cs-faq-group {
    /* keeps the last answer off the section edge */
    margin-bottom: 1rem;
  }

  /* The desktop gap is sized for the phone block beside it; on mobile the
     toggle and hamburger are a pair and should sit closer. */
  #cs-navigation #dark-mode-toggle {
    margin-right: 0.5rem;
  }
}

/* --- Tablet band: 768px to 1024px ---
   Four sections switch from stacked to side-by-side at 768px, but the columns
   are only ~230-270px there, which crams the text. Keep them stacked through
   the band and let them split at 1024px, where the nav also switches from
   hamburger to inline links. */
@media only screen and (min-width: 48rem) and (max-width: 63.9375rem) {
  /* Why Choose Us: three cards side by side are too narrow; two rows read
     better, with the featured card spanning the top. */
  #why-choose-289 .cs-card-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #why-choose-289 .cs-item {
    width: auto;
  }
  #why-choose-289 .cs-item-featured {
    grid-column: 1 / -1;
  }
  #why-choose-289 .cs-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  #why-choose-289 .cs-flex {
    width: 100%;
  }
  #why-choose-289 .cs-text {
    max-width: 42rem;
  }

  /* FAQ: the aside would be 274px, too narrow for the heading and CTA. */
  #faq-roza .cs-container {
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 3.5rem);
  }
  #faq-roza .cs-aside,
  #faq-roza .cs-content {
    width: 100%;
    max-width: none;
  }
  #faq-roza .cs-pattern {
    display: none;
  }

  /* Steps: the numbered list needs room for the connectors to read. */
  #steps-284 .cs-container {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2.5rem, 5vw, 3.5rem);
  }
  #steps-284 .cs-content,
  #steps-284 .cs-right-section {
    width: 100%;
    max-width: none;
    margin-top: 0;
  }

  /* Side-by-side sections: the stitch's em-based image scaling is sized for
     desktop and overflows at this width. */
  #sbs .cs-container,
  #sbs-r .cs-container {
    flex-direction: column;
    row-gap: 2.5rem;
  }
  #sbs .cs-left,
  #sbs-r .cs-left {
    font-size: min(2vw, 0.72em);
  }
  #sbs .cs-right,
  #sbs-r .cs-right {
    width: 100%;
    max-width: 42rem;
    margin: 0;
  }
}

/* Hero cards at tablet: five in a 2-up grid leaves the last one alone on its
   row, so it spans the full width instead. */
@media only screen and (min-width: 48rem) and (max-width: 63.9375rem) {
  #hero-1946 .cs-item:nth-of-type(5) {
    grid-column: span 12;
  }
}

/*-- -------------------------- -->
<---   Section consistency      -->
<--- -------------------------- -*/

/* Content column widths came from the individual stitches and ranged from
   384px to 750px, so text stopped at a different point in every section.
   One measure everywhere below desktop, where the columns are full width. */
@media only screen and (max-width: 63.9375rem) {
  #sbs .cs-right,
  #sbs-r .cs-right,
  #steps-284 .cs-content,
  #steps-284 .cs-right-section,
  #why-choose-289 .cs-text,
  #faq-roza .cs-aside,
  #faq-roza .cs-content {
    max-width: none;
    width: 100%;
  }
  /* Body copy still wraps at a readable measure rather than running the full
     width of a tablet. */
  #sbs .cs-text,
  #sbs-r .cs-text,
  #steps-284 .cs-text,
  #why-choose-289 .cs-text,
  #faq-roza .cs-faq-footer-text {
    max-width: 42rem;
  }
}

/* Both button classes are in use — .button-solid from the starter and
   .cs-button-solid from the stitches — and they disagreed on case, weight and
   height. Match them so buttons look the same wherever they appear. */
@media only screen and (min-width: 0rem) {
  #sbs .button-solid,
  #sbs-r .button-solid,
  #steps-284 .cs-button-solid,
  #faq-roza .cs-faq-button,
  #cta-51 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    height: auto;
    padding: 0 2rem;
    border-radius: 0.25rem;
  }
}

/* Steps between 600px and 1024px: the zigzag reads fine on a narrow phone,
   where the alternation is obvious, but once the column is wide enough for
   the text to sit short of the connector the boxes hang past it. */
@media only screen and (min-width: 37.5rem) and (max-width: 63.9375rem) {
  #steps-284 .cs-item,
  #steps-284 .cs-item:nth-of-type(2),
  #steps-284 .cs-item:nth-of-type(4) {
    justify-content: flex-start;
    text-align: left;
  }
  #steps-284 .cs-item:nth-of-type(2) .cs-number,
  #steps-284 .cs-item:nth-of-type(4) .cs-number {
    order: 0;
    margin-left: 0;
    margin-right: clamp(0.9375rem, 3vw, 1.5rem);
  }
  #steps-284 .cs-item-text,
  #steps-284 .cs-item:nth-of-type(2) .cs-item-text,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text {
    max-width: none;
    padding-left: clamp(0.9375rem, 3vw, 1.5rem);
    padding-right: 0;
  }
  /* A single vertical rule replaces the zigzag connectors. */
  #steps-284 .cs-item-text:before,
  #steps-284 .cs-item:nth-of-type(1) .cs-item-text:before,
  #steps-284 .cs-item:nth-of-type(2) .cs-item-text:before,
  #steps-284 .cs-item:nth-of-type(3) .cs-item-text:before,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
    width: 0;
    height: 100%;
    top: 0;
    bottom: auto;
    left: 0;
    right: auto;
    border: none;
    border-left: 1px solid var(--primary);
    border-radius: 0;
  }
  /* the last step has nothing below it to connect to */
  #steps-284 .cs-item:last-of-type .cs-item-text:before {
    height: 50%;
  }
  #steps-284 .cs-item-text:after,
  #steps-284 .cs-item:nth-of-type(2) .cs-item-text:after,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:after {
    left: -0.9375rem;
    right: auto;
  }
}

/* The side-by-side stitches centre their title and body with margin: 0 auto,
   which on a stacked layout leaves the topper, heading, text and button each
   starting at a different x. Align them all to the column's left edge. */
@media only screen and (max-width: 63.9375rem) {
  #sbs .cs-title,
  #sbs .cs-text,
  #sbs-r .cs-title,
  #sbs-r .cs-text {
    margin-inline: 0;
  }
  #sbs .cs-text,
  #sbs-r .cs-text {
    margin-bottom: 1rem;
  }
  #sbs .cs-text:last-of-type,
  #sbs-r .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  /* The container is a flex column with align-items: center, so children are
     centred whatever their own margin is — margin-inline alone does nothing
     here. Align the container instead. */
  #sbs .cs-container,
  #sbs-r .cs-container {
    align-items: flex-start;
  }
  #sbs .cs-left,
  #sbs-r .cs-left {
    margin-inline: 0;
  }
}

/* Side-by-side images below desktop: the stitch overlaps the pair, which is a
   deliberate offset at desktop but at narrower widths just hides most of the
   back image. Show them as two equal panels instead, filling the column. */
@media only screen and (max-width: 63.9375rem) {
  #sbs .cs-left,
  #sbs-r .cs-left {
    /* the em-based scaling only exists to drive the absolute positioning */
    font-size: 1rem;
    width: 100%;
    max-width: none;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  #sbs .cs-picture,
  #sbs-r .cs-picture,
  #sbs .cs-picture1,
  #sbs .cs-picture2,
  #sbs-r .cs-picture1,
  #sbs-r .cs-picture2 {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    position: relative;
    inset: auto;
    border: none;
    box-shadow: none;
    border-radius: 0.75rem;
  }
  #sbs .cs-picture img,
  #sbs-r .cs-picture img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Narrow phones: the two photos are both empty rooms, so the second adds no
   information and costs ~500px of scroll before the reader reaches the copy.
   Show one. */
@media only screen and (max-width: 30rem) {
  #sbs .cs-left,
  #sbs-r .cs-left {
    grid-template-columns: 1fr;
  }
  #sbs .cs-picture2,
  #sbs-r .cs-picture2 {
    display: none;
  }
}

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

/* The services grid on /services/. Cards are photo-led because every service
   has a representative image, unlike the icon cards on the homepage. */
@media only screen and (min-width: 0rem) {
  #services-list {
    padding: var(--sectionPadding);
  }
  /* width, gutter and centring come from the shared "Matching edges" rule */
  #services-list .cs-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-list .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: clamp(0.5rem, 1.4vw, 0.75rem);
    display: block;
  }
  #services-list .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #services-list .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    width: 100%;
    max-width: 42rem;
    margin: 0 0 clamp(2.5rem, 5vw, 3.5rem) 0;
    color: var(--bodyTextColor);
  }
  #services-list .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 1.5rem);
  }
  #services-list .cs-item {
    list-style: none;
    width: 100%;
  }
  /* The whole card is the link, so the hit area matches what looks clickable. */
  #services-list .cs-link {
    height: 100%;
    background-color: #fff;
    border: 1px solid #e3e8e5;
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
  }
  #services-list .cs-link:hover {
    transform: translateY(-0.25rem);
    border-color: var(--primary);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.1);
  }
  #services-list .cs-picture {
    width: 100%;
    aspect-ratio: 3 / 2;
    display: block;
    position: relative;
    overflow: hidden;
  }
  #services-list .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  #services-list .cs-link:hover .cs-picture img {
    transform: scale(1.04);
  }
  /* Wrapper so the card's padding lives in one place and .cs-more can be
     pushed to a common baseline across cards of unequal copy. */
  #services-list .cs-item-body {
    flex: 1;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    /* the icon tile is pulled up over the photo and carries its own gap */
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* White tile straddling the photo/copy boundary, so the icon bridges the two
     halves of the card. Negative margin lifts it over the image edge; the
     wrapper's padding-top is removed to compensate. */
  #services-list .cs-icon {
    width: 3.75rem;
    height: 3.75rem;
    padding: 0.8125rem;
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    /* half the tile's height, so it sits astride the photo/copy edge */
    margin-top: -1.875rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    display: block;
  }
  #services-list .cs-h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    line-height: 1.3em;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #services-list .cs-link:hover .cs-h3 {
    color: var(--primary);
  }
  #services-list .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    /* pushes .cs-more to the bottom so it aligns across cards of unequal copy */
    flex: 1;
    margin: 0 0 1.25rem;
    color: var(--bodyTextColor);
  }
  #services-list .cs-more {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    display: block;
  }
  #services-list .cs-more:after {
    content: "\2192";
    margin-left: 0.5rem;
    display: inline-block;
    transition: transform 0.25s ease;
  }
  #services-list .cs-link:hover .cs-more:after {
    transform: translateX(0.25rem);
  }
  body.dark-mode #services-list .cs-link {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
  }
  /* --headerColor / --bodyTextColor are not redefined for dark mode, so the
     section heading and copy have to be set explicitly or they stay near-black
     and purple-grey against the dark background. */
  body.dark-mode #services-list .cs-title,
  body.dark-mode #services-list .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-list .cs-text,
  body.dark-mode #services-list .cs-item-text {
    color: #a9b0ac;
    opacity: 1;
  }
  /* brand green is only 2.7:1 on the near-black card; --primaryLight is 8:1 */
  body.dark-mode #services-list .cs-more,
  body.dark-mode #services-list .cs-link:hover .cs-h3 {
    color: var(--primaryLight);
  }
  /* The tile stays light in dark mode so the green icon keeps its contrast —
     inverting the icon on a white tile would make it disappear. */
  body.dark-mode #services-list .cs-icon {
    background-color: #e8ece9;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-list .cs-card-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-list .cs-card-group {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*-- -------------------------- -->
<---    Service Features List   -->
<--- -------------------------- -*/

/* The `features[]` array on each service page. Ticks rather than bullets —
   the list is a scope of work, so each line reads as included. */
@media only screen and (min-width: 0rem) {
  .cs-ul-features {
    width: 100%;
    max-width: 42rem;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cs-li-feature {
    font-size: 1rem;
    line-height: 1.5em;
    list-style: none;
    color: var(--bodyTextColor);
    padding-left: 2rem;
    position: relative;
  }
  /* tick drawn from two borders so it needs no icon file */
  .cs-li-feature:before {
    content: "";
    width: 0.4375rem;
    height: 0.8125rem;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    position: absolute;
    display: block;
    top: 0.1875rem;
    left: 0.5rem;
    transform: rotate(45deg);
  }
  body.dark-mode .cs-li-feature {
    color: var(--bodyTextColorWhite);
    opacity: 0.85;
  }
}

/*-- -------------------------- -->
<---       What's Included      -->
<--- -------------------------- -*/

/* Scope-of-work band on each service page. Lifted out of the side-by-side
   column, which was carrying two paragraphs and six list items against a
   single image. */
@media only screen and (min-width: 0rem) {
  #included {
    padding: var(--sectionPadding);
  }
  /* width, gutter and centring come from the shared "Matching edges" rule */
  #included .cs-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2rem, 4vw, 3rem);
  }
  #included .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: clamp(0.5rem, 1.4vw, 0.75rem);
    display: block;
  }
  #included .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #included .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    max-width: 32.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #included .cs-ul-features {
    max-width: none;
    margin: 0;
  }
  body.dark-mode #included .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #included .cs-text {
    color: #a9b0ac;
  }
}

/* Tablet - 768px — six items read better in two columns than one long list */
@media only screen and (min-width: 48rem) {
  #included .cs-ul-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #included .cs-container {
    flex-direction: row;
    align-items: flex-start;
  }
  #included .cs-aside {
    width: 35%;
    flex: none;
    /* the list is the longer column; keep the heading beside its start */
    position: sticky;
    top: 7rem;
  }
  #included .cs-ul-features {
    flex: 1;
  }
}

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

/* Cross-links at the foot of a service page. Text-only by design — photo cards
   here would compete with the service's own imagery directly above. */
@media only screen and (min-width: 0rem) {
  #other-services {
    padding: var(--sectionPadding);
    /* literal tint, as on #why-choose-289 / #faq-roza — --medium is only
       defined in dark.css and is near-black in both themes */
    background-color: var(--surfaceTint, #f4f6f5);
  }
  /* width, gutter and centring come from the shared "Matching edges" rule */
  #other-services .cs-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #other-services .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: clamp(0.5rem, 1.4vw, 0.75rem);
    display: block;
  }
  #other-services .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    max-width: 43.75rem;
    margin: 0 0 clamp(2rem, 4vw, 3rem) 0;
    color: var(--headerColor);
  }
  #other-services .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  #other-services .cs-item {
    list-style: none;
  }
  #other-services .cs-link {
    height: 100%;
    background-color: #fff;
    /* transparent here so the dark-mode border doesn't change the card size */
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: clamp(1.25rem, 2.5vw, 1.5rem);
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition:
      background-color 0.3s ease,
      transform 0.25s ease;
  }
  #other-services .cs-link:hover {
    background-color: var(--primary);
    transform: translateY(-0.25rem);
  }
  #other-services .cs-icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
    display: block;
    transition: filter 0.3s ease;
  }
  /* the icons are brand green, which vanishes on the green hover fill */
  #other-services .cs-link:hover .cs-icon {
    filter: brightness(0) invert(1);
  }
  #other-services .cs-h3 {
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
    line-height: 1.3em;
    margin: 0 0 0.5rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #other-services .cs-item-text {
    font-size: 0.9375rem;
    line-height: 1.5em;
    /* holds .cs-more on a common baseline across the four cards */
    flex: 1;
    margin: 0 0 1rem;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
  #other-services .cs-more {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--primary);
    transition: color 0.3s;
  }
  #other-services .cs-link:hover .cs-h3,
  #other-services .cs-link:hover .cs-item-text,
  #other-services .cs-link:hover .cs-more {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #other-services {
    background-color: rgba(255, 255, 255, 0.03);
  }
  body.dark-mode #other-services .cs-link {
    background-color: var(--dark);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  /* --primary is 2.8:1 on the dark card; --primaryLight clears 8:1 */
  body.dark-mode #other-services .cs-more {
    color: var(--primaryLight);
  }
  body.dark-mode #other-services .cs-title,
  body.dark-mode #other-services .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #other-services .cs-item-text {
    color: #a9b0ac;
    opacity: 1;
  }
  /* dark icons on a dark card read as blank squares */
  body.dark-mode #other-services .cs-icon {
    filter: brightness(0) invert(1);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #other-services .cs-card-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop - 1024px — four cross-links, one row */
@media only screen and (min-width: 64rem) {
  #other-services .cs-card-group {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*-- -------------------------- -->
<---        Legal Pages         -->
<--- -------------------------- -*/

/* Privacy policy and anything else that is a single column of prose. Narrow
   measure — this is read, not scanned. */
@media only screen and (min-width: 0rem) {
  #legal {
    padding: var(--sectionPadding);
  }
  /* Narrow prose measure — this is read, not scanned. The gutter comes from
     the shared rule, so add it on top to keep 46rem of actual text. */
  #legal .cs-container {
    max-width: calc(46rem + var(--pageGutter) * 2);
  }
  #legal .cs-updated {
    font-size: 0.9375rem;
    line-height: 1.5em;
    margin: 0 0 2.5rem;
    color: var(--bodyTextColor);
    opacity: 0.75;
  }
  #legal .cs-h2 {
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    font-weight: 900;
    line-height: 1.3em;
    margin: 2.5rem 0 1rem;
    color: var(--headerColor);
  }
  #legal .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.6em;
    margin: 0 0 1.25rem;
    color: var(--bodyTextColor);
  }
  #legal a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.125rem;
  }
  body.dark-mode #legal .cs-h2 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #legal .cs-text,
  body.dark-mode #legal .cs-updated {
    color: #a9b0ac;
    opacity: 1;
  }
}

/*-- -------------------------- -->
<---        Section Seams       -->
<--- -------------------------- -*/

/* Every section carries a full --sectionPadding top AND bottom (~88px each at
   desktop), so two untinted sections meeting produce ~176px of empty page with
   no colour change to justify it. Drop the top padding on the second one.
   A tinted section (#why-choose-289, #faq-roza, #other-services) is never
   listed here on either side — its padding sits inside a visible block and is
   doing real work, and stripping it would collapse the band's top edge. */
@media only screen and (min-width: 0rem) {
  #sbs + #services-list,
  #sbs + #included,
  #sbs + #gallery,
  #included + #gallery,
  #services-list + #gallery {
    padding-top: 0;
  }
}

/* ---------- Dark mode: green text on dark surfaces ----------
   --primary only reaches 2.7-2.9:1 on the dark surfaces, short of the 3.0
   toppers need and the 4.5 links need. Sections that already set
   --primaryLight keep working; this catches the ones that never did. */
@media only screen and (min-width: 0rem) {
  /* Section rules are #id .cs-topper, so match that weight to win. */
  body.dark-mode #services-list .cs-topper,
  body.dark-mode #included .cs-topper,
  body.dark-mode #other-services .cs-topper,
  body.dark-mode #gallery .cs-topper,
  body.dark-mode #cs-contact .cs-topper,
  body.dark-mode #hero-service .cs-topper,
  body.dark-mode .cs-topper,
  body.dark-mode .cs-more,
  body.dark-mode #legal a,
  body.dark-mode #blog-content a {
    color: var(--primaryLight);
  }
}