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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-3312 {
    padding: var(--sectionPadding);
    background-color: var(--cream);
    position: relative;
    overflow: hidden;
  }
  /* Decorative blob, top-right corner, behind everything in the section.
     z-index:-1 (not the img itself lacking a stacking context) is what
     keeps it under the in-flow content despite coming first in the DOM. */
  #services-3312 .cs-blob {
    width: clamp(16rem, 40vw, 26rem);
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    pointer-events: none;
  }
  #services-3312 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  #services-3312 .cs-content {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Short accent rule above the eyebrow (centred), eyebrow recoloured to
     the terracotta accent */
  #services-3312 .cs-topper {
    margin: 0 0 1rem;
    padding-top: 1rem;
    color: var(--accentText);
    position: relative;
  }
  #services-3312 .cs-topper:before {
    content: "";
    width: 3rem;
    height: 2px;
    background-color: var(--accentText);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  #services-3312 .cs-title {
    font-weight: 400;
    margin: 0;
    color: var(--navy);
  }
  #services-3312 .cs-card-group {
    width: 100%;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  /* overflow:hidden clips the art to the card, so it reads as emerging
     from the left border rather than spilling into the next card */
  #services-3312 .cs-item {
    text-align: left;
    padding: clamp(2rem, 4vw, 2.75rem);
    background-color: #fff;
    border: 1px solid rgba(104, 115, 107, 0.18);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  }
  /* Lift + soft shadow + accent border on hover. Shadow uses the heading
     navy rather than plain black, so it reads warm rather than harsh. */
  #services-3312 .cs-item:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 1.75rem 3rem rgba(34, 58, 77, 0.14);
    border-color: var(--accentText);
  }
  /* The artwork: pinned to the card's left edge, full height, behind the
     copy. Each source file already fades to transparent on its right
     side, so it blends into the white card rather than hard-cutting.
     On hover it fades in slightly and drifts, like the card is coming
     into focus rather than snapping. */
  #services-3312 .cs-item-art {
    width: auto;
    height: 100%;
    max-width: 65%;
    object-fit: cover;
    object-position: left center;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #services-3312 .cs-item:hover .cs-item-art {
    opacity: 0.32;
    transform: scale(1.05);
  }
  #services-3312 .cs-item-number {
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1em;
    margin-bottom: 0.5rem;
    color: var(--accentText);
    position: relative;
    z-index: 1;
    display: block;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #services-3312 .cs-item:hover .cs-item-number {
    transform: translateX(0.25rem);
  }
  #services-3312 .cs-h3 {
    font-family: var(--headingFont);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.3em;
    margin: 0 0 0.75rem;
    color: var(--navy);
    position: relative;
    z-index: 1;
  }
  #services-3312 .cs-item-text {
    font-family: var(--bodyFont);
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1.5rem;
    color: var(--navy);
    position: relative;
    z-index: 1;
  }
  /* "Learn More" link -- uppercase, tracked, underlined, arrow. This is a
     distinct style from About's .cs-text-link (that one is normal-case);
     scoped to this section so the two don't collide. */
  #services-3312 .cs-text-link {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--accentText);
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 4px;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #services-3312 .cs-text-link:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.4;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: opacity 0.3s;
  }
  #services-3312 .cs-text-link:hover {
    color: var(--accentTextDark);
  }
  #services-3312 .cs-text-link:hover:after {
    opacity: 1;
  }
  #services-3312 .cs-text-link-arrow {
    width: 1rem;
    height: 1rem;
    flex: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Hovering anywhere on the card previews the link's motion, not just a
     hover directly on the "Learn More" text itself */
  #services-3312 .cs-item:hover .cs-text-link-arrow {
    transform: translateX(0.2rem);
  }
}

/* Tablet - 768px: 2x2, wide horizontal cards rather than narrow columns */
@media only screen and (min-width: 48rem) {
  #services-3312 .cs-card-group {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Desktop - 64rem: stays 2x2 (not 4-across) so cards keep their wide,
   horizontal proportions instead of narrowing into tall columns */
@media only screen and (min-width: 64rem) {
  #services-3312 .cs-card-group {
    gap: 2rem;
  }
  #services-3312 .cs-item {
    padding: 3rem;
  }
}