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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-3312 {
    padding: var(--sectionPadding);
    background-color: #f2ead5;
    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: #cc7c46;
    position: relative;
  }
  #services-3312 .cs-topper:before {
    content: "";
    width: 3rem;
    height: 2px;
    background-color: #cc7c46;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  #services-3312 .cs-title {
    font-weight: 400;
    margin: 0;
    color: #223a4d;
  }
  /* Last word of the heading -- same navy as the rest of the heading, sat
     over a two-layer highlighter mark (two rotated, clipped ellipses in
     Peach Citrus) instead of an italic/colour change or a static image. */
  #services-3312 .cs-title span {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding: 0 0.2rem;
    white-space: nowrap;
  }
  #services-3312 .cs-title span:before {
    content: "";
    position: absolute;
    left: -0.4rem;
    right: -0.2rem;
    bottom: -0.05rem;
    height: 25%;
    background: var(--secondary);
    opacity: 0.85;
    z-index: -2;
    border-radius: 4px 8px 4px 12px;
    clip-path: ellipse(60% 100% at 50% 0%);
    transform: rotate(-1deg);
  }
  #services-3312 .cs-title span:after {
    content: "";
    position: absolute;
    left: -0.1rem;
    right: -0.5rem;
    bottom: 0.05rem;
    height: 38%;
    background: var(--secondary);
    opacity: 0.5;
    z-index: -1;
    border-radius: 6px 12px 4px 8px;
    clip-path: ellipse(55% 100% at 48% 0%);
    transform: rotate(0.5deg);
  }
  #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: #cc7c46;
  }
  /* 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: #cc7c46;
    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: 'Self Modern', serif;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.3em;
    margin: 0 0 0.75rem;
    color: #223a4d;
    position: relative;
    z-index: 1;
  }
  #services-3312 .cs-item-text {
    font-family: 'Gotham', sans-serif;
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1.5rem;
    color: #223a4d;
    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: #cc7c46;
    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: #995d34;
  }
  #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;
  }
}