.cvss {
  --cv-bg:#fbf7e9;
  --cv-purple:#9682d3;
  --cv-green:#8bd146;
  --cv-height:560px;
  --cv-text:#171717;
  position:relative;
  width:100%;
  background:var(--cv-bg);
  overflow:visible;
}

/*
 * The section itself becomes taller only to provide scroll distance.
 * The visible services row stays sticky, so visitors never see a blank gap.
 */
.cvss__viewport {
  position:sticky;
  top:0;
  z-index:2;
  width:100%;
  height:var(--cv-height);
  background:var(--cv-bg);
  overflow:hidden;
}

.cvss__grid {
  width:min(1160px, calc(100% - 60px));
  height:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.22fr .92fr;
  gap:48px;
  align-items:center;
}

.cvss__left {
  position:relative;
  height:min(330px, calc(var(--cv-height) - 100px));
  overflow:hidden;
}

.cvss__content {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

.cvss__content h2 {
  margin:0 0 18px;
  color:var(--cv-text);
  font-size:clamp(30px, 2.7vw, 42px);
  line-height:1.05;
  font-weight:500;
}

.cvss__copy {
  color:var(--cv-text);
  font-size:17px;
  line-height:1.52;
}

.cvss__copy p { margin:0 0 18px; }

.cvss__learn {
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:8px;
  padding:13px 21px;
  border:1px solid var(--cv-purple);
  border-radius:999px;
  color:var(--cv-purple);
  text-decoration:none;
  transition:background .25s ease,color .25s ease;
}
.cvss__learn:hover { background:var(--cv-purple); color:#fff; }
.cvss__arrow { font-size:18px; }

.cvss__center {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.cvss__stack {
  position:relative;
  width:100%;
  height:min(390px, calc(var(--cv-height) - 100px));
  perspective:1400px;
}

.cvss__image-card {
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:26px;
  background:#ece8dc;
  box-shadow:0 18px 40px rgba(39,31,16,.12);
  transform-origin:50% 50%;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

.cvss__image-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* No opaque title overlay: the image remains visible and only the area behind the title is blurred. */
.cvss__image-card::after {
  display:none;
}

.cvss__image-title {
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  min-height:84px;
  display:flex;
  align-items:center;
  padding:18px 22px;
  box-sizing:border-box;
  font-size:clamp(22px, 2vw, 30px);
  line-height:1.05;
  font-weight:500;
  color:var(--cv-text);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  border-top:1px solid rgba(255,255,255,.24);
}

.cvss__right { position:relative; }
.cvss__right-copy { color:var(--cv-text); font-size:18px; line-height:1.45; }
.cvss__right-copy p { margin:0 0 30px; }
.cvss__all {
  display:inline-flex;
  align-items:center;
  gap:13px;
  padding:12px 14px 12px 21px;
  border-radius:999px;
  background:var(--cv-green);
  color:#fff;
  text-decoration:none;
  font-weight:500;
}
.cvss__all-icon {
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--cv-purple);
}
.cv-services-empty { padding:16px; border:1px solid #ddd; background:#fff; }

@media (max-width:1024px) {
  .cvss__grid {
    width:calc(100% - 40px);
    grid-template-columns:.95fr 1.1fr .8fr;
    gap:28px;
  }
  .cvss__copy,
  .cvss__right-copy { font-size:15px; }
}

@media (max-width:767px) {
  .cvss { --cv-height:620px !important; }
  @supports (height: 100svh) {
    .cvss { --cv-height:min(620px, calc(100svh - 20px)) !important; }
  }
  .cvss__viewport { top:0; }
  .cvss__grid {
    width:calc(100% - 30px);
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:16px;
    align-content:center;
  }
  .cvss__center { order:1; }
  .cvss__left { order:2; height:210px; }
  .cvss__right { display:none; }
  .cvss__stack { height:min(330px, calc(var(--cv-height) - 250px)); }
  .cvss__content { justify-content:flex-start; }
  .cvss__content h2 { font-size:28px; margin-bottom:10px; }
  .cvss__copy { font-size:14px; line-height:1.42; }
  .cvss__learn { margin-top:4px; padding:11px 17px; }
  .cvss__image-title { min-height:68px; padding:14px 17px; font-size:22px; }
}


/* v1.2 text-writing and fade-down animation helpers */
.cvss__char {
  display:inline-block;
  opacity:0;
  transform:translate3d(0,12px,0);
  will-change:transform,opacity;
}

.cvss__word {
  display:inline-block;
  opacity:0;
  transform:translate3d(0,10px,0);
  will-change:transform,opacity;
}

.cvss__content h2,
.cvss__image-title {
  overflow:hidden;
}

.cvss__copy,
.cvss__learn {
  will-change:transform,opacity;
}

@media (prefers-reduced-motion: reduce) {
  .cvss__char,
  .cvss__word,
  .cvss__copy,
  .cvss__learn {
    opacity:1 !important;
    transform:none !important;
  }
}


/* v1.4 entrance reveal: left service copy enters from left; image stack enters from right. */
.cvss__content,
.cvss__image-card,
.cvss__right {
  will-change:transform,opacity;
}


/* v1.5.2: preserve visible spaces in animated headings, especially image-card titles. */
.cvss__space {
  display:inline-block;
  flex:0 0 .38em;
  width:.38em;
  min-width:.38em;
}

@media (max-width:767px) {
  .cvss__image-title .cvss__space {
    flex-basis:.48em;
    width:.48em;
    min-width:.48em;
  }

  /* Isolate each image layer on mobile so every card repaint follows the scroll gesture. */
  .cvss__image-card {
    contain:paint;
    transform:translateZ(0);
  }
}