/* DIFWEB-222 — v2 service pages (first: /services/ai-development/).
   Figma YHP2SMNoNGEJZJGN16fI3Z, frame 22349:41812 (desktop 1790 only;
   1024/768/375 layouts are derived).

   Loaded ONLY by pages that render the components in components/services/v2/
   (NOT part of styles.min.css, so the PurgeCSS postbuild never touches it —
   JS-toggled states such as :disabled live here safely). Every rule is scoped
   under the page modifier `.page.-service-v5`, including the scoped restyles
   of the reused shared sections (StoriesSection, CasesCarouselSection,
   FaqSection), so no other route can be affected.

   DIFWEB-298: the design tokens (--sv2-*), the type tokens, the pill CTA,
   §4 Methodology and §6 How we build live in sv2-blocks.css (shared with the
   home page); every page that links this file links sv2-blocks.css directly
   before it. */

.page.-service-v5 { background: var(--sv2-bg-light); }

/* The hero paints behind the absolutely-positioned header. */
.page.-service-v5 .middle { padding-top: 0; }

/* ---- Section shell + centred head -------------------------------------- */
.page.-service-v5 .sv2-section {
  background: var(--sv2-bg-light);
  color: var(--sv2-ink);
  padding: var(--sv2-section-y) 0;
}
.page.-service-v5 .sv2-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: var(--sv2-head-gap);
}
.page.-service-v5 .sv2-head.-center { align-items: center; text-align: center; }
.page.-service-v5 .sv2-head.-on-dark .sv2-eyebrow { color: var(--sv2-primary); }

/* ---- 1. Hero ------------------------------------------------------------ */
.page.-service-v5 .sv2-hero {
  position: relative;
  min-height: 907px;
  display: flex;
  align-items: flex-end;
  padding: 148px 0 80px;
  background: var(--sv2-panel-dark);
  color: var(--sv2-white);
  overflow: hidden;
}
.page.-service-v5 .sv2-hero__bg {
  position: absolute;
  inset: 0;
}
.page.-service-v5 .sv2-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page.-service-v5 .sv2-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(186.9deg, rgba(0, 0, 0, 0.08) 33.75%, #040210 77.52%);
}
.page.-service-v5 .sv2-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.page.-service-v5 .sv2-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 614px;
}
.page.-service-v5 .sv2-hero__lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sv2-font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: var(--sv2-white);
}
.page.-service-v5 .sv2-hero__lockup b { font-weight: 700; }
.page.-service-v5 .sv2-hero__text { display: flex; flex-direction: column; gap: 32px; }
.page.-service-v5 .sv2-hero__title {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -1.28px;
  color: var(--sv2-white);
}
.page.-service-v5 .sv2-hero__intro {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--sv2-white);
}
.page.-service-v5 .sv2-hero__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.page.-service-v5 .sv2-hero__tile {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.page.-service-v5 .sv2-hero__tile-icon {
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}
.page.-service-v5 .sv2-hero__tile-icon img { width: 40px; height: 40px; }
.page.-service-v5 .sv2-hero__tile-label {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--sv2-white);
}
/* 1280–1439: the 907px hero crops the photo tighter, so the lockup lands on a
   brighter patch (3.8:1 measured at 1280). A left-side shade restores AA. */
@media (max-width: 1439px) {
  .page.-service-v5 .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.6) 0%, rgba(4, 2, 16, 0) 55%),
      linear-gradient(186.9deg, rgba(0, 0, 0, 0.08) 33.75%, #040210 77.52%);
  }
}
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-hero { min-height: 0; padding: 200px 0 64px; }
  /* Below the desktop frame the copy climbs into the bright whiteboard area
     of the photo, so the scrim starts at the top (AA measured on pixels). */
  .page.-service-v5 .sv2-hero__bg::after {
    background: linear-gradient(180deg, rgba(4, 2, 16, 0.5) 0%, rgba(4, 2, 16, 0.84) 32%, #040210 72%);
  }
  .page.-service-v5 .sv2-hero__title { font-size: 52px; line-height: 58px; letter-spacing: -1.04px; }
  .page.-service-v5 .sv2-hero__tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-hero { padding: 132px 0 48px; }
  /* Stacked copy sits higher on the photo, so the scrim starts earlier. */
  .page.-service-v5 .sv2-hero__bg::after {
    background: linear-gradient(180deg, rgba(4, 2, 16, 0.45) 0%, rgba(4, 2, 16, 0.82) 38%, #040210 70%);
  }
  .page.-service-v5 .sv2-hero__inner { gap: 40px; }
  .page.-service-v5 .sv2-hero__copy { gap: 32px; }
  .page.-service-v5 .sv2-hero__text { gap: 20px; }
  .page.-service-v5 .sv2-hero__title { font-size: 40px; line-height: 44px; letter-spacing: -0.8px; }
  .page.-service-v5 .sv2-hero__intro { font-size: 16px; line-height: 22px; }
  .page.-service-v5 .sv2-hero__tiles { grid-template-columns: 1fr; }
  .page.-service-v5 .sv2-hero__tile { min-height: 72px; padding: 12px 16px; }
  .page.-service-v5 .sv2-hero__tile-icon { flex-basis: 40px; width: 40px; height: 40px; }
  .page.-service-v5 .sv2-hero__tile-icon img { width: 32px; height: 32px; }
}

/* ---- 2 + 5. Card grid (What we build / Integrations) ------------------ */
.page.-service-v5 .sv2-cards.-feature { padding: 120px 0; }
.page.-service-v5 .sv2-cards.-feature .sv2-head { margin-bottom: 64px; }
.page.-service-v5 .sv2-cards__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sv2-gap);
}
.page.-service-v5 .sv2-card {
  flex: 0 0 calc(50% - var(--sv2-gap) / 2);
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: 256px;
  padding: 48px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
  overflow: hidden;
}
.page.-service-v5 .sv2-card__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 342px;
}
.page.-service-v5 .sv2-card__desc {
  font-family: var(--sv2-font-text);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--sv2-ink);
}
.page.-service-v5 .sv2-card__img {
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
  margin-left: auto;
  object-fit: contain;
}
.page.-service-v5 .sv2-cards.-compact .sv2-card {
  min-height: 192px;
  gap: 24px;
  padding: 24px 48px;
}
.page.-service-v5 .sv2-cards.-compact .sv2-card__text { gap: 20px; max-width: 358px; }
.page.-service-v5 .sv2-cards.-compact .sv2-card__desc { color: rgba(19, 20, 38, 0.64); }
.page.-service-v5 .sv2-cards.-compact .sv2-card__img { flex-basis: 144px; width: 144px; height: 144px; }
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-cards.-feature { padding: var(--sv2-section-y) 0; }
  .page.-service-v5 .sv2-card { gap: 24px; padding: 32px; }
  .page.-service-v5 .sv2-card__img,
  .page.-service-v5 .sv2-cards.-compact .sv2-card__img { flex-basis: 120px; width: 120px; height: 120px; }
  .page.-service-v5 .sv2-cards.-compact .sv2-card { padding: 24px 32px; }
}
@media (max-width: 1023px) {
  .page.-service-v5 .sv2-card { flex-basis: 100%; min-height: 0; }
  .page.-service-v5 .sv2-cards.-compact .sv2-card { min-height: 0; }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-cards.-feature .sv2-head { margin-bottom: var(--sv2-head-gap); }
  .page.-service-v5 .sv2-card,
  .page.-service-v5 .sv2-cards.-compact .sv2-card {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
  }
  .page.-service-v5 .sv2-card__text { gap: 12px; max-width: none; }
  .page.-service-v5 .sv2-card__img,
  .page.-service-v5 .sv2-cards.-compact .sv2-card__img { flex-basis: auto; width: 96px; height: 96px; margin-left: 0; }
}

/* ---- 3. Tech stack ------------------------------------------------------ */
.page.-service-v5 .sv2-tech__groups { display: flex; flex-direction: column; gap: 24px; }
.page.-service-v5 .sv2-tech__label {
  padding: 24px 0;
  text-align: center;
  font-family: var(--sv2-font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  /* Comp: #B1B2C1 (1.9:1 on #F5F5FB, fails AA for 12px). Darkened to AA. */
  color: var(--sv2-label);
}
.page.-service-v5 .sv2-tech__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.page.-service-v5 .sv2-tech__cell {
  flex: 0 0 167px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px 20px;
  border-radius: 12px;
  text-align: center;
}
.page.-service-v5 .sv2-tech__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}
.page.-service-v5 .sv2-tech__logo img { max-width: 85px; max-height: 64px; object-fit: contain; }
.page.-service-v5 .sv2-tech__name {
  font-family: var(--sv2-font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: rgba(19, 20, 38, 0.64);
}
.page.-service-v5 .sv2-tech__banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: var(--sv2-head-gap);
  padding: 48px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-banner);
  text-align: center;
}
.page.-service-v5 .sv2-tech__banner .sv2-pill { align-self: center; }
@media (max-width: 767px) {
  .page.-service-v5 .sv2-tech__groups { gap: 8px; }
  .page.-service-v5 .sv2-tech__label { padding: 16px 0; }
  .page.-service-v5 .sv2-tech__row { gap: 4px; }
  .page.-service-v5 .sv2-tech__cell { flex-basis: calc((100% - 8px) / 3); padding: 8px 4px 12px; }
  .page.-service-v5 .sv2-tech__logo { width: 48px; height: 48px; }
  .page.-service-v5 .sv2-tech__logo img { max-width: 56px; max-height: 44px; }
  .page.-service-v5 .sv2-tech__banner { padding: 32px 24px; }
}


/* ---- 7. Engagement models ---------------------------------------------- */
.page.-service-v5 .sv2-models__list { display: flex; flex-direction: column; gap: var(--sv2-gap); }
.page.-service-v5 .sv2-model {
  position: relative;
  display: flex;
  min-height: 472px;
  padding: 80px 240px 80px 56px;
  border-radius: var(--sv2-radius);
  background: #401f04;
  overflow: hidden;
  isolation: isolate;
}
.page.-service-v5 .sv2-model__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page.-service-v5 .sv2-model::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Comp: #401F04 → transparent across the card. Held near-solid under the
     540px copy column so the 12px yellow tag and 14px body keep AA over the
     photo (the pure linear fade measured 3.3:1 on the tag). */
  background: linear-gradient(90deg, #401f04 0%, rgba(64, 31, 4, 0.9) 38%, rgba(64, 31, 4, 0) 100%);
  z-index: -1;
}
.page.-service-v5 .sv2-model__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 540px;
  color: var(--sv2-white);
}
.page.-service-v5 .sv2-model__copy .sv2-h3 { color: var(--sv2-white); }
.page.-service-v5 .sv2-model__copy .sv2-eyebrow { color: var(--sv2-primary); }
.page.-service-v5 .sv2-model__body { display: flex; flex-direction: column; gap: 24px; }
.page.-service-v5 .sv2-model__body .sv2-text-m { color: var(--sv2-white); }
.page.-service-v5 .sv2-model__list { display: flex; flex-direction: column; gap: 12px; }
.page.-service-v5 .sv2-model__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--sv2-font-text);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--sv2-white);
}
.page.-service-v5 .sv2-model__list img { flex: 0 0 20px; margin-top: 1px; }
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-model { padding: 64px 40px; min-height: 0; }
  .page.-service-v5 .sv2-model::after {
    background: linear-gradient(90deg, #401f04 0%, rgba(64, 31, 4, 0.9) 60%, rgba(64, 31, 4, 0.55) 100%);
  }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-model { padding: 40px 24px; }
  .page.-service-v5 .sv2-model::after { background: rgba(64, 31, 4, 0.86); }
  .page.-service-v5 .sv2-model__copy { gap: 20px; }
}

/* ---- 8. Engagement options --------------------------------------------- */
.page.-service-v5 .sv2-options__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sv2-gap);
}
.page.-service-v5 .sv2-option {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 32px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
}
/* Comp: four fixed 307×388 cards. */
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-option { min-height: 388px; }
}
.page.-service-v5 .sv2-option__num {
  align-self: flex-start;
  font-family: var(--sv2-font-mono);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  background: var(--sv2-number);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #9935e8;
}
.page.-service-v5 .sv2-option__head { display: flex; flex-direction: column; gap: 10px; }
.page.-service-v5 .sv2-option__duration {
  font-family: var(--sv2-font-mono);
  font-size: 14px;
  line-height: 20px;
  color: var(--sv2-grey);
}
.page.-service-v5 .sv2-option__body { display: flex; flex-direction: column; gap: 22px; }
.page.-service-v5 .sv2-option__body p {
  font-family: var(--sv2-font-text);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--sv2-ink);
}
.page.-service-v5 .sv2-option__body b { font-weight: 700; }
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-options__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-options__grid { grid-template-columns: 1fr; }
  .page.-service-v5 .sv2-option { padding: 32px 24px; gap: 16px; }
}

/* ---- 9. Success stories (reused StoriesSection, scoped restyle) --------- */
.page.-service-v5 .stories { background: var(--sv2-bg-light); padding: 140px 0; }
.page.-service-v5 .stories .title {
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -1.12px;
  margin-bottom: 64px;
}
.page.-service-v5 .stories .items {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  padding: 0;
}
.page.-service-v5 .stories .items .item {
  grid-row: auto;
  min-height: 480px;
  justify-content: flex-start;
}
.page.-service-v5 .stories .items .item__content { flex: 1; }
.page.-service-v5 .stories .items:not(.items-2):not(.items-3) .item:nth-child(2) { background: #ffc5c5; }
.page.-service-v5 .stories .items .item h3,
.page.-service-v5 .stories .items .item h4 {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
}
.page.-service-v5 .stories .items .item .item__stat {
  margin-top: 16px;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -1.28px;
}
.page.-service-v5 .stories .items .item .item__stat + h3,
.page.-service-v5 .stories .items .item .item__stat + h4 { margin-top: 16px; }
.page.-service-v5 .stories .item__logo { margin-top: 24px; }
/* The theme's `.owl-carousel .owl-nav button.owl-next { background: 0 0 }`
   reset out-specifies `.stories .owl-nav .owl-next`, so outside the home page
   (which has its own `.page.-home-v5` rule) the arrow glyph is blank. */
.page.-service-v5 .stories .owl-carousel .owl-nav button.owl-next,
.page.-service-v5 .stories .owl-carousel .owl-nav button.owl-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: url(/images/ic-arrow-right.svg) no-repeat center center rgba(0, 0, 0, 0.04);
}
.page.-service-v5 .stories .owl-carousel .owl-nav button.owl-next:hover,
.page.-service-v5 .stories .owl-carousel .owl-nav button.owl-prev:hover { background-color: rgba(0, 0, 0, 0.08); }
@media (max-width: 1279px) {
  .page.-service-v5 .stories { padding: 96px 0; }
  .page.-service-v5 .stories .title { font-size: 40px; line-height: 48px; }
  .page.-service-v5 .stories .items { grid-template-columns: repeat(3, 1fr); }
  .page.-service-v5 .stories .items .item { min-height: 400px; padding: 32px; }
  .page.-service-v5 .stories .items .item .item__stat { font-size: 48px; line-height: 56px; }
}
@media (max-width: 1023px) {
  .page.-service-v5 .stories .items { grid-template-columns: 1fr; }
  .page.-service-v5 .stories .items .item { min-height: 0; }
}
/* Slides 9–10 are `items items-3`: two cards, not three. Home gives them a
   2-column grid (styles.min.css `.page.-home-v5 .stories .items-3`); here the
   3-column rule above left an empty third column ≥1024 (DIFWEB-222 A1). Card 1
   keeps the gradient ground, so its logo is forced white like the feature card's. */
@media (min-width: 1024px) {
  .page.-service-v5 .stories .items.items-3 { grid-template-columns: repeat(2, 1fr); }
}
.page.-service-v5 .stories .items-3 .item:nth-child(1) .item__logo img { filter: brightness(0) invert(1); }
@media (max-width: 767px) {
  .page.-service-v5 .stories { padding: 64px 0; }
  .page.-service-v5 .stories .title { font-size: 28px; line-height: 32px; margin-bottom: 32px; }
  .page.-service-v5 .stories .items .item .item__stat { font-size: 40px; line-height: 48px; }
}

/* ---- 10–12. Reused cases carousel / contact / FAQ (scoped) ------------- */
.page.-service-v5 .cases-carousel-v4 { background: var(--sv2-white); padding-top: 100px; }
/* Align the carousel to the page gutters: the theme pads the section 15px on
   top of the wrap's 40, so below 1440 it sat at x=55 against every other
   section's 40, and at <768 it ran full-bleed (DIFWEB-222). */
.page.-service-v5 .cases-carousel-v4 { padding-left: 0; padding-right: 0; }
@media (max-width: 767px) {
  .page.-service-v5 .cases-carousel-v4 .wrap-v4.-m-flat { padding-left: 15px; padding-right: 15px; }
}
/* "See more cases" banner = comp 22349:41974 (same node in the discovery and
   staff-aug frames): 104 tall — 32px padding round the 40px button — r24, 40px
   text→button gap. The copy sits over the yellow start of the gradient
   (white 20px bold at 2.2–2.96:1), so the first stop is a deeper orange at
   every width (≥3.4:1 across the text) (DIFWEB-222). */
.page.-service-v5 .cases-carousel-v4 .see-more-container { padding: 32px; border-radius: 24px; }
@media (min-width: 1280px) {
  .page.-service-v5 .cases-carousel-v4 .see-more-container > p { margin-right: 40px; }
}
.page.-service-v5 .cases-carousel-v4 .see-more-container {
  background: linear-gradient(90.22deg, #e8590c 0, #e03d3d 53.72%, #cd21e9 101.11%);
}
@media (max-width: 767px) {
  .page.-service-v5 .cases-carousel-v4 .see-more-container { padding: 24px; }
}
.page.-service-v5 .get-started-v5 { background: var(--sv2-white); }
/* Cases → Contact, when the form directly follows the carousel (ai-dev, agentic,
   discovery, ai-native, mobile): the comp's 160px at 1440 (cases 80 + contact 80),
   not cases-carousel.css's 32 + 32. The carousel keeps its 32px bottom, so the
   form's top = the page's section rhythm: 128 → 160 gap ≥1280, 96 → 128 at
   768–1279, 64 → 96 below 768 (DIFWEB-222 A3). Web and staff aug put the FAQ in
   between, so the adjacency selector leaves them alone. */
.page.-service-v5 .cases-carousel-v4 + .get-started-v5 { padding-top: var(--sv2-section-y); }
.page.-service-v5 .faq { background: var(--sv2-white); padding-top: 80px; padding-bottom: 80px; }
.page.-service-v5 .faq__wrap { background: var(--sv2-bg-light); padding: 100px 80px; }
.page.-service-v5 .faq .left { width: 402px; flex: 0 0 402px; }
.page.-service-v5 .faq .left .faq-heading {
  width: min-content;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.64px;
}
.page.-service-v5 .faq .left img { max-width: 158px; }
/* Inline links in FAQ answers were body-coloured and undecorated, so only
   the cursor told them apart (WCAG 1.4.1). Keep the colour, underline them
   (DIFWEB-222 A9). */
.page.-service-v5 .faq .items p a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1279px) {
  .page.-service-v5 .cases-carousel-v4 { padding-top: 80px; }
  .page.-service-v5 .faq__wrap { padding: 64px 40px; }
}
@media (max-width: 767px) {
  .page.-service-v5 .cases-carousel-v4 { padding-top: 64px; }
  .page.-service-v5 .faq { padding-top: 48px; padding-bottom: 48px; }
  .page.-service-v5 .faq__wrap { padding: 40px 24px; }
}

/* ---- 13. Other services ------------------------------------------------- */
.page.-service-v5 .sv2-others { background: var(--sv2-white); padding: 120px 0; }
.page.-service-v5 .sv2-others__title { text-align: center; margin-bottom: 64px; }
.page.-service-v5 .sv2-others__track {
  display: flex;
  gap: var(--sv2-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.page.-service-v5 .sv2-others__track::-webkit-scrollbar { display: none; }
.page.-service-v5 .sv2-others__item {
  flex: 0 0 calc((100% - 2 * var(--sv2-gap)) / 3);
  scroll-snap-align: start;
  display: flex;
}
.page.-service-v5 .sv2-others__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 40px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-bg-light);
  color: var(--sv2-ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.page.-service-v5 .sv2-others__card:hover { background: #ececf6; }
.page.-service-v5 .sv2-others__card:focus-visible { outline: 2px solid var(--sv2-ink); outline-offset: -2px; }
.page.-service-v5 .sv2-others__card img { width: 120px; height: 120px; }
.page.-service-v5 .sv2-others__text { display: flex; flex-direction: column; gap: 12px; }
.page.-service-v5 .sv2-others__nav { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.page.-service-v5 .sv2-arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M1 8h13M8.5 2.5 14 8l-5.5 5.5' stroke='%23131426' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.page.-service-v5 .sv2-arrow.-prev { transform: rotate(180deg); }
.page.-service-v5 .sv2-arrow:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.08); }
.page.-service-v5 .sv2-arrow:disabled { opacity: 0.2; cursor: default; }
.page.-service-v5 .sv2-arrow:focus-visible { outline: 2px solid var(--sv2-ink); outline-offset: 2px; }
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-others { padding: var(--sv2-section-y) 0; }
  .page.-service-v5 .sv2-others__item { flex-basis: calc((100% - var(--sv2-gap)) / 2); }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-others__title { margin-bottom: 32px; }
  .page.-service-v5 .sv2-others__item { flex-basis: 85%; }
  .page.-service-v5 .sv2-others__card { padding: 24px; }
  .page.-service-v5 .sv2-others__card img { width: 96px; height: 96px; }
}

/* =========================================================================
   Page 2 — /services/agentic-ai-engineering/ (Figma frame 22349:42914).
   Everything below is additive: new modifiers/classes only, so the
   ai-development page (which renders none of them) is unaffected.
   ========================================================================= */

/* ---- Hero: per-page scrim + a composite icon that fills the 64px slot -- */
/* The comp's 197° scrim, plus a left-side shade: the lockup and H1 sit over
   the bright office windows (2.7:1 / 3.3:1 measured with the comp scrim alone). */
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-hero.-agentic .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.5) 0%, rgba(4, 2, 16, 0.35) 35%, rgba(4, 2, 16, 0) 55%),
      linear-gradient(197.26853deg, rgba(0, 0, 0, 0.08) 34.244%, #040210 71.486%);
  }
}
.page.-service-v5 .sv2-hero__tile-icon.-fill img { width: 64px; height: 64px; }
@media (max-width: 767px) {
  .page.-service-v5 .sv2-hero__tile-icon.-fill img { width: 40px; height: 40px; }
}

/* ---- Card grid 'benefit' variant ("Why teams choose Diffco") ------------ */
.page.-service-v5 .sv2-cards.-benefit { padding: 120px 0; }
.page.-service-v5 .sv2-cards.-benefit .sv2-head { margin-bottom: 64px; }
.page.-service-v5 .sv2-cards.-benefit .sv2-card { align-items: flex-start; min-height: 0; }
.page.-service-v5 .sv2-cards.-benefit .sv2-card__text { max-width: 382px; }
.page.-service-v5 .sv2-cards.-benefit .sv2-card__img { flex-basis: 120px; width: 120px; height: 120px; }
.page.-service-v5 .sv2-card__list {
  display: flex;
  flex-direction: column;
  margin-top: -12px; /* comp: 12px between the lead-in and the list (text gap is 24) */
  padding-left: 19px;
  list-style: disc;
  font-family: var(--sv2-font-text);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--sv2-ink);
}
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-cards.-benefit { padding: var(--sv2-section-y) 0; }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-cards.-benefit .sv2-head { margin-bottom: var(--sv2-head-gap); }
  .page.-service-v5 .sv2-cards.-benefit .sv2-card__img { width: 96px; height: 96px; }
  .page.-service-v5 .sv2-card__list { margin-top: -4px; }
}

/* ---- Buy vs Build (BuyVsBuildV2) --------------------------------------- */
.page.-service-v5 .sv2-bvb { padding: 120px 0; }
.page.-service-v5 .sv2-bvb__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 740px;
  margin: 0 auto 80px;
  text-align: center;
}
.page.-service-v5 .sv2-bvb__head .sv2-head { margin-bottom: 0; }
.page.-service-v5 .sv2-bvb__intro { color: var(--sv2-ink); }
.page.-service-v5 .sv2-bvb__table {
  --bvb-inset: 32px;
  display: grid;
  /* label column · 16px spacer · two cards; 8px gaps → 32px label-to-card */
  grid-template-columns: 177px 16px 1fr 1fr;
  column-gap: 8px;
  padding: 0 80px;
}
.page.-service-v5 .sv2-bvb__row { display: contents; }
.page.-service-v5 .sv2-bvb__card {
  position: relative;
  grid-column: calc(var(--c) + 3);
  grid-row: 1 / calc(var(--n) + 2);
  border-radius: var(--sv2-radius);
  background: #fafaff;
}
.page.-service-v5 .sv2-bvb__card.-highlight {
  border: 3px solid transparent;
  background:
    linear-gradient(#fafaff, #fafaff) padding-box,
    linear-gradient(90deg, #ffbd12 0%, #e03d3d 53.125%, #cd21e9 100%) border-box;
}
.page.-service-v5 .sv2-bvb__logo { position: absolute; top: 29px; right: 29px; width: 58px; height: 20px; }
.page.-service-v5 .sv2-bvb__corner { grid-column: 1; grid-row: 1; }
.page.-service-v5 .sv2-bvb__label,
.page.-service-v5 .sv2-bvb__cell {
  position: relative;
  z-index: 1;
}
/* Row rules only under the option cards: the comp draws none in the label
   column (DIFWEB-222). Comp rule #F5F5FB on #FAFAFF is 1.03:1 (invisible);
   one visible step up. */
.page.-service-v5 .sv2-bvb__cell { border-bottom: 1px solid #e6e6f0; }
.page.-service-v5 .sv2-bvb__label {
  grid-column: 1;
  grid-row: var(--r);
  padding: 24px 0;
  text-align: right;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--sv2-ink);
}
.page.-service-v5 .sv2-bvb__cell {
  grid-column: calc(var(--c) + 3);
  grid-row: var(--r);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 var(--bvb-inset);
  padding: 24px 12px;
  font-family: var(--sv2-font-text);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sv2-ink);
}
.page.-service-v5 .sv2-bvb__cell.-highlight { font-weight: 500; }
.page.-service-v5 .sv2-bvb__cell.-head {
  margin-top: var(--bvb-inset);
  padding: 20px 12px;
  border-bottom: 0;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
}
.page.-service-v5 .sv2-bvb__cell.-head.-highlight .sv2-bvb__col-title {
  padding-right: 64px;
  /* Comp ends at #E85535 (3.5:1 on #FAFAFF for 18px text); end stop darkened to AA. */
  background: linear-gradient(141.8deg, #9935e8 0%, #c63d20 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #9935e8;
}
.page.-service-v5 .sv2-bvb__label.-last,
.page.-service-v5 .sv2-bvb__cell.-last { border-bottom: 0; }
.page.-service-v5 .sv2-bvb__cell.-last { margin-bottom: var(--bvb-inset); }
.page.-service-v5 .sv2-bvb__check { flex: 0 0 24px; }
.page.-service-v5 .sv2-bvb__cell-label { display: none; }
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-bvb { padding: var(--sv2-section-y) 0; }
  .page.-service-v5 .sv2-bvb__head { margin-bottom: var(--sv2-head-gap); }
  .page.-service-v5 .sv2-bvb__table { --bvb-inset: 24px; grid-template-columns: 150px 8px 1fr 1fr; padding: 0; }
  .page.-service-v5 .sv2-bvb__logo { top: 21px; right: 21px; }
}
@media (max-width: 1023px) {
  .page.-service-v5 .sv2-bvb__table { --bvb-inset: 16px; grid-template-columns: 112px 0 1fr 1fr; }
  .page.-service-v5 .sv2-bvb__label { font-size: 16px; line-height: 22px; }
  .page.-service-v5 .sv2-bvb__cell { padding: 20px 8px; font-size: 14px; line-height: 22px; letter-spacing: -0.28px; }
  .page.-service-v5 .sv2-bvb__label { padding: 20px 0; }
  .page.-service-v5 .sv2-bvb__cell.-head { padding: 52px 8px 16px; font-size: 16px; line-height: 22px; }
  .page.-service-v5 .sv2-bvb__cell.-head.-highlight .sv2-bvb__col-title { padding-right: 0; }
  .page.-service-v5 .sv2-bvb__logo { top: 17px; right: auto; left: 21px; }
  .page.-service-v5 .sv2-bvb__check { flex-basis: 20px; width: 20px; height: 20px; margin-top: 1px; }
}
/* Stacked: card by card, each value carries its own row label. */
@media (max-width: 767px) {
  .page.-service-v5 .sv2-bvb__table { --bvb-inset: 20px; grid-template-columns: 1fr; }
  .page.-service-v5 .sv2-bvb__corner,
  .page.-service-v5 .sv2-bvb__label { display: none; }
  .page.-service-v5 .sv2-bvb__card {
    grid-column: 1;
    grid-row: calc(var(--c) * (var(--n) + 1) + 1) / calc(var(--c) * (var(--n) + 1) + var(--n) + 2);
    margin-top: calc(var(--c) * 8px);
  }
  .page.-service-v5 .sv2-bvb__cell {
    grid-column: 1;
    grid-row: calc(var(--c) * (var(--n) + 1) + var(--r));
    padding: 16px 0;
  }
  .page.-service-v5 .sv2-bvb__cell.-head { margin-top: calc(var(--bvb-inset) + var(--c) * 8px); padding: 0 0 4px; }
  .page.-service-v5 .sv2-bvb__cell.-head.-highlight { padding-top: 32px; }
  .page.-service-v5 .sv2-bvb__cell-label {
    display: block;
    margin-bottom: 2px;
    font-family: var(--sv2-font-display);
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--sv2-label);
  }
  .page.-service-v5 .sv2-bvb__check { margin-top: 21px; }
  .page.-service-v5 .sv2-bvb__logo { top: 20px; left: 20px; }
}

/* ---- Photo CTA banner (CtaBannerV2) ------------------------------------ */
.page.-service-v5 .sv2-banner { padding: 80px 0; background: var(--sv2-bg-light); }
.page.-service-v5 .sv2-banner__panel {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 90px 40px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-panel-dark);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.page.-service-v5 .sv2-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page.-service-v5 .sv2-banner__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.page.-service-v5 .sv2-banner__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 540px;
}
.page.-service-v5 .sv2-banner__text { display: flex; flex-direction: column; gap: 24px; }
.page.-service-v5 .sv2-banner__text .sv2-h2,
.page.-service-v5 .sv2-banner__text .sv2-text-l { color: var(--sv2-white); }
.page.-service-v5 .sv2-banner .sv2-pill { align-self: center; }
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-banner { padding: 64px 0; }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-banner { padding: 40px 0; }
  .page.-service-v5 .sv2-banner__panel { padding: 56px 24px; }
  .page.-service-v5 .sv2-banner__copy { gap: 32px; }
  .page.-service-v5 .sv2-banner__text { gap: 16px; }
  .page.-service-v5 .sv2-banner .sv2-pill__label { white-space: normal; }
}

/* ---- Contact form title as a section h2 (GetStartedSection titleTag="h2")
   Mirrors the theme's `.get-started-v5-form h3` rules. ------------------ */
.page.-service-v5 .get-started-v5-form > h2 {
  font-family: Gilroy, sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  margin-bottom: 48px;
}
@media (max-width: 767px) {
  .page.-service-v5 .get-started-v5-form > h2 {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 24px;
  }
}
/* The "(optional)" hint is white at 40% in the theme (and the comp): 2.55:1 on
   the #5115C3 panel for 16px bold, which needs 4.5:1. 72% → 5.4:1 (DIFWEB-222
   A6). Service pages only; the global popup form sits outside the page wrapper. */
.page.-service-v5 .get-started-v5 .form label:not(.error) .optional { color: rgba(255, 255, 255, 0.72); }

/* ---- FAQ "Show more answers": the theme hides it below 1280px, which left
   the collapsed answers unreachable on tablet/mobile. -------------------- */
@media (max-width: 1279px) {
  .page.-service-v5 .faq .items .item.-show-more { display: block; }
}
/* The theme's gradient reaches #E85535 at 25% (3.4:1 on the #F5F5FB panel). */
.page.-service-v5 .faq .items .item.-show-more {
  background-image: linear-gradient(95deg, #9935e8 0, #c63d20 25%);
}

/* FAQ directly after "Need other services?" (agentic order): the carousel's
   bottom padding already separates them (comp: FAQ padding-top 0). */
.page.-service-v5 .sv2-others + .faq { padding-top: 0; }

/* =========================================================================
   Page 3 — /services/ai-driven-product-discovery/ (Figma frame 22349:43887).
   Additive only: new classes/modifiers that the ai-development and agentic
   pages never render, so their output is unaffected.
   ========================================================================= */

/* ---- Hero: per-page scrim (the comp's 197° fade + a left shade) --------- */
/* Same left shade as agentic: measured after the page fade-in, every hero
   glyph stays well above 4.5:1 with it. */
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-hero.-discovery .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.5) 0%, rgba(4, 2, 16, 0.35) 35%, rgba(4, 2, 16, 0) 55%),
      linear-gradient(197.26853deg, rgba(0, 0, 0, 0.08) 34.244%, #040210 71.486%);
  }
}

/* ---- Section head intro line (SectionHeadV2 `intro`) -------------------- */
/* Comp: h2 → 24px → Text/M line (head gap is 16). */
.page.-service-v5 .sv2-head__intro { margin-top: 8px; max-width: 740px; }

/* ---- Numbered deliverables (NumberedCardsV2, "What you get") ------------ */
.page.-service-v5 .sv2-numbered__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sv2-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page.-service-v5 .sv2-numbered__card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-height: 288px;
  padding: 48px 48px 48px 32px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
}
.page.-service-v5 .sv2-numbered__num {
  flex: 0 0 32px;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.8px;
  /* The cases-banner gradient (comp). */
  background: linear-gradient(90deg, #ffbd12 0%, #e03d3d 53.125%, #cd21e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e03d3d;
}
.page.-service-v5 .sv2-numbered__text { display: flex; flex-direction: column; gap: 20px; }
/* Comp: row 2 is 310px (card 4's title wraps), row 1 288px. 3-column layout only. */
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-numbered__card:nth-child(n+4) { min-height: 310px; }
}
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-numbered__grid { grid-template-columns: repeat(2, 1fr); }
  .page.-service-v5 .sv2-numbered__card { min-height: 0; padding: 40px 40px 40px 24px; }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-numbered__grid { grid-template-columns: 1fr; }
  .page.-service-v5 .sv2-numbered__card { gap: 16px; padding: 24px 24px 24px 16px; }
  .page.-service-v5 .sv2-numbered__num { flex-basis: 28px; font-size: 32px; line-height: 40px; }
  .page.-service-v5 .sv2-numbered__text { gap: 12px; }
}

/* ---- Card grid 'media' variant ("How Discovery is billed") -------------- */
/* Comp: 646px cards, padding 64, 208px art on top, gap 48, title → 24 → Text/L. */
.page.-service-v5 .sv2-cards.-media { padding: 120px 0; }
.page.-service-v5 .sv2-cards.-media .sv2-head { margin-bottom: 64px; }
.page.-service-v5 .sv2-cards.-media .sv2-card {
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 48px;
  min-height: 0;
  padding: 64px;
}
.page.-service-v5 .sv2-cards.-media .sv2-card__text { max-width: none; }
.page.-service-v5 .sv2-cards.-media .sv2-card__desc { font-size: 16px; line-height: 24px; letter-spacing: -0.32px; }
.page.-service-v5 .sv2-cards.-media .sv2-card__img { flex: 0 0 auto; width: 208px; height: 208px; margin-left: 0; }
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-cards.-media { padding: var(--sv2-section-y) 0; }
  .page.-service-v5 .sv2-cards.-media .sv2-card { gap: 32px; padding: 40px; }
  .page.-service-v5 .sv2-cards.-media .sv2-card__img { width: 160px; height: 160px; }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-cards.-media .sv2-head { margin-bottom: var(--sv2-head-gap); }
  .page.-service-v5 .sv2-cards.-media .sv2-card { gap: 16px; padding: 24px; }
  .page.-service-v5 .sv2-cards.-media .sv2-card__desc { font-size: 14px; line-height: 22px; letter-spacing: -0.28px; }
  .page.-service-v5 .sv2-cards.-media .sv2-card__img { width: 120px; height: 120px; }
}

/* ---- Card grid art-left option ("Why a Discovery sprint…") -------------- */
/* Below 768px every card stacks with the art on top anyway. */
@media (min-width: 768px) {
  .page.-service-v5 .sv2-cards.-art-left .sv2-card { flex-direction: row-reverse; justify-content: flex-end; }
  .page.-service-v5 .sv2-cards.-art-left .sv2-card__img { margin-left: 0; }
}

/* ---- CtaBannerV2 spacing options ---------------------------------------- */
/* 'loose': the comp's 120px ("Run a 2-week Discovery…" on this page). */
.page.-service-v5 .sv2-banner.-loose { padding: 120px 0; }
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-banner.-loose { padding: var(--sv2-section-y) 0; }
}
/* 'flush': no own padding; the sections either side carry theirs. */
.page.-service-v5 .sv2-banner.-flush { padding: 0; }

/* =========================================================================
   Page 4 — /services/ai-native-transformation/ (Figma frame 22349:44454).
   Additive only: new classes/modifiers that the ai-development, agentic and
   discovery pages never render, so their output is unaffected.
   ========================================================================= */

/* ---- Hero: per-page scrim (same as Discovery: the comp's 197° fade + a left
   shade; AA measured on this photo after the page fade-in) --------------- */
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-hero.-transform .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.5) 0%, rgba(4, 2, 16, 0.35) 35%, rgba(4, 2, 16, 0) 55%),
      linear-gradient(197.26853deg, rgba(0, 0, 0, 0.08) 34.244%, #040210 71.486%);
  }
}
/* keepHyphens(): a hyphenated word that must not wrap ("AI-native" in the H1;
   Gilroy has no U+2011 glyph). */
.page.-service-v5 .sv2-nowrap { white-space: nowrap; }

/* ---- Section-head intro as Text/L (What's on the table, Who this is for,
   What you get). The shared intro is Text/M; these comps set 16/24. ------ */
.page.-service-v5 .sv2-cards.-stacked .sv2-head__intro,
.page.-service-v5 .sv2-cards.-icon .sv2-head__intro,
.page.-service-v5 .sv2-numbered .sv2-head__intro {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}
/* The comp's head column is 740px (padding-x 280 in a 1300 frame), so the
   "Who this is for" h2 wraps to two lines. */
.page.-service-v5 .sv2-cards.-stacked .sv2-head,
.page.-service-v5 .sv2-cards.-icon .sv2-head { max-width: 740px; margin-left: auto; margin-right: auto; }
/* With an eyebrow the comp's head gap is 16 all the way down (no extra 8). */
.page.-service-v5 .sv2-cards.-icon .sv2-head__intro,
.page.-service-v5 .sv2-numbered .sv2-head__intro { margin-top: 0; }

/* ---- Card grid 'stacked' + 'icon' variants (three columns) -------------- */
.page.-service-v5 .sv2-cards.-stacked,
.page.-service-v5 .sv2-cards.-icon { padding: 120px 0; }
.page.-service-v5 .sv2-cards.-stacked .sv2-card,
.page.-service-v5 .sv2-cards.-icon .sv2-card { flex-basis: calc((100% - 2 * var(--sv2-gap)) / 3); }
/* 'stacked' — "What's actually on the table": comp 428×518 cards, padding 48,
   160px art on top, gap 32, title → 20 → Text/M. */
.page.-service-v5 .sv2-cards.-stacked .sv2-card {
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 32px;
  min-height: 0;
  padding: 48px;
}
.page.-service-v5 .sv2-cards.-stacked .sv2-card__text { gap: 20px; max-width: none; }
.page.-service-v5 .sv2-cards.-stacked .sv2-card__img { flex: 0 0 auto; width: 160px; height: 160px; margin-left: 0; }
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-cards.-stacked .sv2-card { min-height: 518px; }
}
/* 'icon' — "Who this is for": padding 48/48/48/32, 260px text column, gap 24,
   64px icon top-right; rows hug their tallest card. */
.page.-service-v5 .sv2-cards.-icon .sv2-card {
  align-items: flex-start;
  gap: 24px;
  min-height: 0;
  padding: 48px 48px 48px 32px;
}
.page.-service-v5 .sv2-cards.-icon .sv2-card__text { gap: 20px; max-width: 260px; }
.page.-service-v5 .sv2-cards.-icon .sv2-card__img { flex: 0 0 64px; width: 64px; height: 64px; }
/* Comp rows: 288 / 276 (22349:44495), 3-column layout only. */
@media (min-width: 1280px) {
  /* Comp rows: 288 / 276 (22349:44495). */
  .page.-service-v5 .sv2-cards.-icon .sv2-card { min-height: 288px; }
  .page.-service-v5 .sv2-cards.-icon .sv2-card:nth-child(n+4) { min-height: 276px; }
}
/* Gradient statement strip under the cards (comp 1300×144, radius 24,
   padding 48, Gilroy Bold 20/24, the cases-banner gradient). White on the bare
   comp gradient measured 3.0:1 at 1440 and down to 2.1:1 at 375 (the lines
   reach the yellow end), so a black overlay is laid over it, like the photo
   banners' 20%: 12% ≥1280, 25% below (measured after the page fade-in). */
.page.-service-v5 .sv2-cards__callout {
  --sv2-callout-shade: rgba(0, 0, 0, 0.12);
  margin: var(--sv2-gap) 0 0;
  padding: 48px;
  border-radius: var(--sv2-radius);
  background:
    linear-gradient(var(--sv2-callout-shade), var(--sv2-callout-shade)),
    linear-gradient(90deg, #ffbd12 0%, #e03d3d 53.125%, #cd21e9 100%);
  text-align: center;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--sv2-white);
}
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-cards.-stacked,
  .page.-service-v5 .sv2-cards.-icon { padding: var(--sv2-section-y) 0; }
  .page.-service-v5 .sv2-cards.-stacked .sv2-card,
  .page.-service-v5 .sv2-cards.-icon .sv2-card { flex-basis: calc(50% - var(--sv2-gap) / 2); }
  .page.-service-v5 .sv2-cards.-stacked .sv2-card { padding: 40px; }
  .page.-service-v5 .sv2-cards.-icon .sv2-card { padding: 40px 32px 40px 24px; }
  .page.-service-v5 .sv2-cards.-icon .sv2-card__text { max-width: none; }
  .page.-service-v5 .sv2-cards__callout { --sv2-callout-shade: rgba(0, 0, 0, 0.25); padding: 40px 32px; }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-cards.-stacked .sv2-card,
  .page.-service-v5 .sv2-cards.-icon .sv2-card { flex-basis: 100%; }
  .page.-service-v5 .sv2-cards.-stacked .sv2-card { gap: 16px; padding: 24px; }
  .page.-service-v5 .sv2-cards.-stacked .sv2-card__text { gap: 12px; }
  .page.-service-v5 .sv2-cards.-stacked .sv2-card__img { width: 96px; height: 96px; }
  /* Keep the icon top-right on phones (the base rule stacks it above). */
  .page.-service-v5 .sv2-cards.-icon .sv2-card { flex-direction: row; gap: 16px; padding: 24px; }
  .page.-service-v5 .sv2-cards.-icon .sv2-card__text { gap: 12px; }
  .page.-service-v5 .sv2-cards.-icon .sv2-card__img { flex-basis: 48px; width: 48px; height: 48px; margin-left: auto; }
  .page.-service-v5 .sv2-cards__callout { padding: 32px 24px; }
}

/* ---- CtaBannerV2 `wide`: the comp's 920px copy column ("You've bought the
   tools…"; inner padding-x 150 instead of 340). -------------------------- */
.page.-service-v5 .sv2-banner.-wide .sv2-banner__copy { max-width: 920px; }
/* Below 1024 the narrower column already wraps the first sentence, so the
   forced break would strand "ceiling." on its own line. */
@media (max-width: 1023px) {
  .page.-service-v5 .sv2-banner.-wide .sv2-br-desktop { display: none; }
  /* …and without it the last word ("works.") strands at 768–800px. */
  .page.-service-v5 .sv2-banner.-wide .sv2-h2 { text-wrap: balance; }
}
/* At phone width the heading runs past the 6 lines Chromium will balance, so
   use `pretty`, which still avoids a one-word last line. */
@media (max-width: 767px) {
  .page.-service-v5 .sv2-banner.-wide .sv2-h2 { text-wrap: pretty; }
}

/* ---- NumberedCardsV2 `hug` (the AI-Native "What you get", 22349:44537):
   rows size to their content (comp 232/260px) instead of the Discovery comp's
   fixed 288/310px, and the section carries the comp's 120px (not 128) at
   ≥1280. ---------------------------------------------------------------- */
.page.-service-v5 .sv2-numbered.-hug .sv2-numbered__card { min-height: 0; }
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-numbered.-hug { padding: 120px 0; }
}

/* =========================================================================
   Page 5 — /services/mobile-development/ (Figma frame 22349:44865).
   Additive only: new classes/modifiers that the ai-development, agentic,
   discovery and ai-native pages never render, so their output is unaffected.
   ========================================================================= */

/* ---- Hero: per-page scrim (the comp's 197° fade, identical to Discovery /
   AI-Native, + the same left shade; AA measured on this photo after the page
   fade-in) -------------------------------------------------------------- */
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-hero.-mobile .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.5) 0%, rgba(4, 2, 16, 0.35) 35%, rgba(4, 2, 16, 0) 55%),
      linear-gradient(197.26853deg, rgba(0, 0, 0, 0.08) 34.244%, #040210 71.486%);
  }
}

/* ---- Tech stack "Show more" (TechStackV2 group `more`) ------------------ */
/* Comp: a 68px row (padding 24/0) under the group, "SHOW MORE" in the group
   label's type + a 9px down arrow. The label ink is the group label's AA
   #6A6B76, not the comp's #B1B2C1 (1.9:1). The button (TechStackMore) comes
   AFTER the extra logos and keeps focus; its label and arrow swap to
   "Show less" / up when open (aria-expanded). */
.page.-service-v5 .sv2-tech__more .sv2-tech__row { margin-top: 0; }
.page.-service-v5 .sv2-tech__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  margin: 0 auto;
  padding: 24px 8px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sv2-font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--sv2-label);
}
.page.-service-v5 .sv2-tech__toggle::after {
  content: "";
  width: 9px;
  height: 9px;
  background: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M4.5 1v7M1.5 5l3 3 3-3' stroke='%236A6B76' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page.-service-v5 .sv2-tech__toggle:hover { color: var(--sv2-ink); }
.page.-service-v5 .sv2-tech__toggle:focus-visible { outline: 2px solid var(--sv2-ink); outline-offset: 2px; border-radius: 4px; }
.page.-service-v5 .sv2-tech__toggle-less,
.page.-service-v5 .sv2-tech__toggle[aria-expanded="true"] .sv2-tech__toggle-more { display: none; }
.page.-service-v5 .sv2-tech__toggle[aria-expanded="true"] .sv2-tech__toggle-less { display: inline; }
.page.-service-v5 .sv2-tech__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
@media (max-width: 767px) {
  .page.-service-v5 .sv2-tech__more .sv2-tech__row { margin-top: 4px; }
  .page.-service-v5 .sv2-tech__toggle { padding: 16px 8px; }
}
.page.-service-v5 .sv2-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Page 6 — /services/web-development/ (Figma frame 22349:45641; the
   Front-end and Back-end pages merged in). Additive only: new modifiers that
   the five earlier v2 pages never render, so their output is unaffected.
   ========================================================================= */

/* ---- Hero: six tiles (ServiceHeroV2 tileLayout="six") ------------------- */
/* Comp: six 210 × 96 tiles in one row (gap 8, icon→label 16), colour CMS
   marks at 64px. Three columns below 1280, two below 768. */
.page.-service-v5 .sv2-hero__tiles.-six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-hero__tiles.-six { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-hero__tiles.-six { grid-template-columns: repeat(2, 1fr); }
  .page.-service-v5 .sv2-hero__tiles.-six .sv2-hero__tile { gap: 12px; padding: 12px; }
}
/* The two inset marks (not `-fill`): comp 22349:45642 draws Optimizely at 72%
   of the 64px slot (46px) and Adobe at 76% (48px), not the default 40px. The
   default 80% inset (32px) in the 40px slot below 768 (DIFWEB-222). */
.page.-service-v5 .sv2-hero__tiles.-six .sv2-hero__tile-icon:not(.-fill) img[src*="Optimizely"] { width: 46px; height: 46px; }
.page.-service-v5 .sv2-hero__tiles.-six .sv2-hero__tile-icon:not(.-fill) img[src*="Adobe"] { width: 48px; height: 48px; }
@media (max-width: 767px) {
  .page.-service-v5 .sv2-hero__tiles.-six .sv2-hero__tile-icon:not(.-fill) img[src*="Optimizely"],
  .page.-service-v5 .sv2-hero__tiles.-six .sv2-hero__tile-icon:not(.-fill) img[src*="Adobe"] { width: 32px; height: 32px; }
}

/* ---- Hero: per-page scrim for the Front-end comp's photo (D6) ----------- */
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-hero.-web .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.5) 0%, rgba(4, 2, 16, 0.35) 35%, rgba(4, 2, 16, 0) 55%),
      linear-gradient(197.26853deg, rgba(0, 0, 0, 0.08) 34.244%, #040210 71.486%);
  }
}

/* =========================================================================
   Page 7 — /services/team-augmentation/ ("AI Staff Augmentation", Figma frame
   22349:46095). Additive only: new modifiers/classes that the six earlier v2
   pages never render, so their output is unaffected.
   ========================================================================= */

/* ---- Hero: per-page scrim (the comp's = mobile's 197° fade + the left
   shade; AA measured on this photo after the page fade-in) -------------- */
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-hero.-staff-aug .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.5) 0%, rgba(4, 2, 16, 0.35) 35%, rgba(4, 2, 16, 0) 55%),
      linear-gradient(197.26853deg, rgba(0, 0, 0, 0.08) 34.244%, #040210 71.486%);
  }
  /* Comp: the hero container has no bottom padding; the strip carries 44. */
  .page.-service-v5 .sv2-hero.-staff-aug { padding-bottom: 0; }
}

/* ---- Hero lockup in the primary yellow (ServiceHeroV2 lockupTone) ------- */
/* Comp: Gilroy Bold 18/24 (the default lockup's 500 has no Gilroy face loaded
   and renders Semibold) — DIFWEB-222. */
.page.-service-v5 .sv2-hero__lockup.-primary { color: var(--sv2-primary); font-weight: 700; line-height: 24px; }

/* ---- Hero client-logo strip (ServiceHeroV2 `logos`) --------------------- */
/* Comp "Frame 10149": 1300 × 100, label 200 wide (12/16, white @64%), then a
   1084px row (padding 0/80, space-between) of six 56px-tall white marks at
   64% opacity; padding-bottom 44. */
.page.-service-v5 .sv2-hero__logos {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 44px;
}
.page.-service-v5 .sv2-hero__logos-label {
  flex: 0 0 200px;
  font-family: var(--sv2-font-text); /* comp: Inter Regular 12/16 */
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: rgba(255, 255, 255, 0.64);
}
.page.-service-v5 .sv2-hero__logos-row {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 80px;
}
.page.-service-v5 .sv2-hero__logos-row li { display: flex; align-items: center; justify-content: center; min-width: 0; }
.page.-service-v5 .sv2-hero__logos-row img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 56px;
  opacity: 0.64;
}
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-hero__logos { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 0; }
  .page.-service-v5 .sv2-hero__logos-label { flex-basis: auto; }
  .page.-service-v5 .sv2-hero__logos-row { width: 100%; padding: 0; }
}
@media (max-width: 1023px) {
  .page.-service-v5 .sv2-hero__logos-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 16px;
  }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-hero__logos { gap: 16px; }
  .page.-service-v5 .sv2-hero__logos-row img { max-height: 40px; }
}

/* ---- Awards + reviews + value cards + figures (AwardsProofV2) ----------- */
/* Comp 22360:29842: slot 1 = a 646px 2×2 award grid + a 646px review card
   (both 400 tall), 80px, slot 2 = three 428 × 415 value cards and three
   428 × 172 figure cards; every card white, r24, gap 8. */
.page.-service-v5 .sv2-proof__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sv2-gap);
}
.page.-service-v5 .sv2-proof__awards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--sv2-gap);
}
.page.-service-v5 .sv2-proof__award {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 196px;
  padding: 32px 40px 32px 32px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
}
.page.-service-v5 .sv2-proof__award-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.page.-service-v5 .sv2-proof__award-head img { flex: 0 0 auto; width: 20px; height: 40px; }
.page.-service-v5 .sv2-proof__award-title {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--sv2-ink);
}
.page.-service-v5 .sv2-proof__award-logo { display: block; align-self: flex-start; width: auto; max-width: 100%; height: 32px; object-fit: contain; }

/* Review card: quote mark → quote (Gilroy Bold 24/28) → platform + score →
   author row, with the prev/next arrows at the right of the author row. */
.page.-service-v5 .sv2-proof__review {
  position: relative;
  min-width: 0;
  padding: 32px 40px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
}
.page.-service-v5 .sv2-proof__slides {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.page.-service-v5 .sv2-proof__slides::-webkit-scrollbar { display: none; }
/* position: relative keeps the visually hidden "Rated" inside the scroller
   (an absolute box whose containing block is outside it would overflow the
   page). */
.page.-service-v5 .sv2-proof__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.page.-service-v5 .sv2-proof__figure {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  margin: 0;
}
.page.-service-v5 .sv2-proof__figure::before {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  opacity: 0.12;
  background: no-repeat center / 28px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22' viewBox='0 0 28 22' fill='%23131426'%3E%3Cpath d='M0 0h11v11c0 6-3 10-9 11l-1-3c3-1 5-3 5-6H0V0zm17 0h11v11c0 6-3 10-9 11l-1-3c3-1 5-3 5-6h-6V0z'/%3E%3C/svg%3E");
}
.page.-service-v5 .sv2-proof__quote { margin: 0; }
.page.-service-v5 .sv2-proof__quote p {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.24px;
  color: var(--sv2-ink);
}
.page.-service-v5 .sv2-proof__score {
  display: flex;
  align-items: center;
  gap: 16px;
}
.page.-service-v5 .sv2-proof__score > img { display: block; width: auto; height: 32px; }
.page.-service-v5 .sv2-proof__stars { display: inline-flex; gap: 2px; }
.page.-service-v5 .sv2-proof__rating {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  color: var(--sv2-ink);
}
.page.-service-v5 .sv2-proof__author {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: auto;
  padding: 24px 96px 0 0;
}
.page.-service-v5 .sv2-proof__author img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.page.-service-v5 .sv2-proof__author > span { display: flex; flex-direction: column; }
.page.-service-v5 .sv2-proof__name {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--sv2-ink);
}
.page.-service-v5 .sv2-proof__role {
  font-family: var(--sv2-font-text);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--sv2-ink);
}
.page.-service-v5 .sv2-proof__nav {
  position: absolute;
  right: 40px;
  bottom: 36px;
  display: flex;
  gap: 8px;
}

.page.-service-v5 .sv2-proof__cards,
.page.-service-v5 .sv2-proof__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sv2-gap);
}
.page.-service-v5 .sv2-proof__cards { margin-top: 80px; }
.page.-service-v5 .sv2-proof__stats { margin-top: var(--sv2-gap); }
.page.-service-v5 .sv2-proof__card,
.page.-service-v5 .sv2-proof__stat {
  padding: 40px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
}
.page.-service-v5 .sv2-proof__card { display: flex; flex-direction: column; min-height: 415px; }
.page.-service-v5 .sv2-proof__card img { width: 120px; height: 120px; margin-bottom: 47px; }
.page.-service-v5 .sv2-proof__card .sv2-text-l { padding-top: 16px; color: var(--sv2-ink); }
.page.-service-v5 .sv2-proof__stat { display: flex; flex-direction: column; gap: 12px; min-height: 172px; }
.page.-service-v5 .sv2-proof__stat-value {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: var(--sv2-ink);
}
.page.-service-v5 .sv2-proof__stat-label {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--sv2-ink);
}
@media (max-width: 1279px) {
  .page.-service-v5 .sv2-proof__top { grid-template-columns: 1fr; }
  .page.-service-v5 .sv2-proof__cards { margin-top: 56px; }
  .page.-service-v5 .sv2-proof__card { min-height: 0; padding: 32px; }
  .page.-service-v5 .sv2-proof__card img { margin-bottom: 32px; }
  .page.-service-v5 .sv2-proof__stat { min-height: 0; padding: 32px; }
}
@media (max-width: 1023px) {
  .page.-service-v5 .sv2-proof__cards { grid-template-columns: 1fr; }
  .page.-service-v5 .sv2-proof__stat-value { font-size: 40px; line-height: 48px; letter-spacing: -0.8px; }
}
@media (max-width: 767px) {
  .page.-service-v5 .sv2-proof__awards { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .page.-service-v5 .sv2-proof__award { min-height: 0; padding: 24px; }
  .page.-service-v5 .sv2-proof__review { padding: 24px; }
  .page.-service-v5 .sv2-proof__quote p { font-size: 20px; line-height: 24px; letter-spacing: -0.2px; }
  .page.-service-v5 .sv2-proof__author { gap: 16px; padding: 24px 0 72px; }
  .page.-service-v5 .sv2-proof__nav { right: auto; left: 24px; bottom: 24px; }
  .page.-service-v5 .sv2-proof__cards { margin-top: 40px; }
  .page.-service-v5 .sv2-proof__card { padding: 24px; }
  .page.-service-v5 .sv2-proof__card img { width: 96px; height: 96px; margin-bottom: 24px; }
  .page.-service-v5 .sv2-proof__stats { grid-template-columns: 1fr; }
  .page.-service-v5 .sv2-proof__stat { padding: 24px; gap: 8px; }
}

/* =========================================================================
   Front-end — /services/front-end-development-services/ (Figma frame
   22349:45155, DIFWEB-330). Additive only: the `-frontend` hero modifier,
   which no other v2 page renders, so their output is unaffected.
   ========================================================================= */

/* ---- Hero: three tiles (comp: 3 × 428 × 96 in one row, gap 8). One row
   down to 768 (three short labels fit at 240px), one column below as usual. */
@media (min-width: 768px) {
  .page.-service-v5 .sv2-hero.-frontend .sv2-hero__tiles { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Hero: per-page scrim. The photo is Web's (both pages carry the
   Front-end comp's shot), so the same 197° fade + left shade ≥1280; below
   1280 the shared top-down scrims apply. AA measured per glyph. -------- */
@media (min-width: 1280px) {
  .page.-service-v5 .sv2-hero.-frontend .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.5) 0%, rgba(4, 2, 16, 0.35) 35%, rgba(4, 2, 16, 0) 55%),
      linear-gradient(197.26853deg, rgba(0, 0, 0, 0.08) 34.244%, #040210 71.486%);
  }
}