/* Page-local preview skin. Shared components and production assets stay intact. */
body.jvds-service-framed {
  --service-paper: #f3f1eb;
  --service-line: #d9d7cf;
  --service-ink: #282821;
  --service-muted: #6e6e65;
  --service-node: 6px;
  --service-media-inset: 28px;
  background: var(--service-paper);
  color: var(--service-ink);
}

.jvds-service-framed .header,
.jvds-service-framed .header.hd-bg,
.jvds-service-framed .header.fixed,
.jvds-service-framed .header > .wp3 { background-color: var(--service-paper); }

.jvds-service-framed .service-cta.site-cta {
  background-image: linear-gradient(180deg, var(--service-paper) 0%, #f6ffdc 34%, #e4f794 66%, #e0f94c 100%);
}

/* Scope, related work and cooperation sections use this page's paper color. */
body.jvds-service-framed .jvds-growth {
  --growth-ink: var(--service-ink);
  --growth-muted: var(--service-muted);
  --growth-line: var(--service-line);
  --growth-card-radius: 0px;
  background: var(--service-paper);
  color: var(--service-ink);
}

.jvds-service-framed .jvds-growth-scope-rows,
.jvds-service-framed .jvds-growth-links .jvds-growth-cooperation-grid { gap: 0; }

.jvds-service-framed .jvds-growth-scope-rows .jvds-growth-row,
.jvds-service-framed .jvds-growth-links .jvds-growth-cooperation-grid > a,
.jvds-service-framed .jvds-growth-links .jvds-growth-feature-grid > a {
  position: relative;
  border: 1px solid var(--service-line);
  border-radius: 0;
  background: var(--service-paper);
  box-shadow: none;
}

.jvds-service-framed .jvds-growth-scope-rows .jvds-growth-row + .jvds-growth-row { margin-top: -1px; }
.jvds-service-framed .jvds-growth-links .jvds-growth-cooperation-grid > a { margin: 0 -1px -1px 0; }
.jvds-service-framed .jvds-growth-links .jvds-growth-cooperation-grid > a.is-selected {
  background: var(--scope-accent);
  border-color: var(--service-line);
  box-shadow: none;
}

.jvds-service-framed .jvds-growth-feature-media,
.jvds-service-framed .jvds-growth-image img { border-radius: 0; }

/* Frames on related cards surround the existing picture and its copy as one cell. */
.jvds-service-framed .jvds-growth-related .news-related-grid { gap: 0; }
.jvds-service-framed .jvds-growth-related .news-related-card {
  position: relative;
  min-width: 0;
  margin: 0 -1px -1px 0;
  padding: 24px;
  border: 1px solid var(--service-line);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.jvds-service-framed .jvds-growth-related .news-related-card .pic { border-radius: 0; }

/* Corner markers never intercept card links, FAQ buttons or media gestures. */
.jvds-service-framed .service-frame-corners,
.jvds-service-framed .jvds-growth-scope-rows .jvds-growth-row::after,
.jvds-service-framed .jvds-growth-links .jvds-growth-cooperation-grid > a::after,
.jvds-service-framed .jvds-growth-links .jvds-growth-feature-grid > a::after,
.jvds-service-framed .jvds-growth-related .news-related-card::after,
.jvds-service-framed .about-faq-item::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 7;
  inset: -3.5px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--service-ink), var(--service-ink)) left top / var(--service-node) var(--service-node) no-repeat,
    linear-gradient(var(--service-ink), var(--service-ink)) right top / var(--service-node) var(--service-node) no-repeat,
    linear-gradient(var(--service-ink), var(--service-ink)) left bottom / var(--service-node) var(--service-node) no-repeat,
    linear-gradient(var(--service-ink), var(--service-ink)) right bottom / var(--service-node) var(--service-node) no-repeat;
}

/* The existing FAQ reveal interaction keeps its flexible rows and open state. */
.jvds-service-framed .about-faq-row { gap: 0; margin-bottom: 0; }
.jvds-service-framed .about-faq-item {
  border: 1px solid var(--service-line);
  border-radius: 0;
  margin: 0 -1px -1px 0;
  background: var(--service-paper);
}
.jvds-service-framed .about-faq-surface,
.jvds-service-framed .about-faq-question { border-radius: 0; }
.jvds-service-framed .about-faq-surface { background: var(--service-paper); }
.jvds-service-framed .about-faq-item.is-open .about-faq-surface { background: #e0f94c; }

@media (hover: hover) and (pointer: fine) {
  .jvds-service-framed .about-faq-item:hover .about-faq-surface { background: #e0f94c; }
  .jvds-service-framed .jvds-growth-scope-rows .jvds-growth-row:hover { background: #e0f94c; border-color: var(--service-line); }
}

@media (max-width: 800px) {
  .jvds-service-framed .jvds-growth-related .news-related-card { padding: 20px; }
  .jvds-service-framed .jvds-growth-related .news-related-grid { grid-template-columns: minmax(0, 1fr); }
  .jvds-service-framed .jvds-growth-links .jvds-growth-cooperation-grid { grid-template-columns: minmax(0, 1fr); }
  .jvds-service-framed .jvds-growth-links .jvds-growth-cooperation-grid > a { grid-column: auto; }
  .jvds-service-framed .about-faq-row { gap: 0; }
}

/* Service title, hero and content follow the same left/right rails. */
.jvds-service-framed .service-main {
  min-width: 0;
  background: var(--service-paper);
}
.jvds-service-framed .service-title-row.wp3 {
  padding-top: 72px;
  padding-bottom: 52px;
}
.jvds-service-framed .service-title-heading { color: var(--service-ink); }
.jvds-service-framed .service-tabs {
  gap: 0;
  border: 1px solid var(--service-line);
  padding: 0;
  min-width: 0;
}
.jvds-service-framed .service-tabs a {
  min-width: 0;
  border-radius: 0;
  background: transparent;
  color: var(--service-muted);
}
.jvds-service-framed .service-tabs a + a { border-left: 1px solid var(--service-line); }
.jvds-service-framed .service-tabs a.on { background: var(--service-ink); color: #fff; }
.jvds-service-framed .service-hero-card {
  position: relative;
  min-height: 0;
  padding: 0;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  border: 1px solid var(--service-line);
  background: var(--service-paper);
  overflow: visible;
}
.jvds-service-framed .service-hero-content {
  min-width: 0;
  padding: clamp(28px, 3vw, 56px);
}
.jvds-service-framed .service-hero-media {
  width: calc(100% - var(--service-media-inset) - var(--service-media-inset));
  height: auto;
  min-height: calc(clamp(380px, 32vw, 620px) - var(--service-media-inset) - var(--service-media-inset));
  margin: var(--service-media-inset);
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}
.jvds-service-framed .service-hero-media > :is(video, img),
.jvds-service-framed .service-process-pic > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* The media itself stays the Canvas frame; its outer margin forms the inset. */
.jvds-service-framed .service-hero-card::after,
.jvds-service-framed .service-process-item::after {
  content: ""; position: absolute; z-index: 6; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--service-line); transform: translateX(-50%); pointer-events: none;
}
.jvds-service-framed .service-hero-card > .service-frame-corners::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--service-ink),var(--service-ink)) center top / var(--service-node) var(--service-node) no-repeat,
    linear-gradient(var(--service-ink),var(--service-ink)) center bottom / var(--service-node) var(--service-node) no-repeat;
}
.jvds-service-framed .service-hero-actions { flex-wrap: wrap; }
.jvds-service-framed .service-marquee {
  margin-top: 64px;
  border-top: 1px solid var(--service-line);
  border-bottom: 1px solid var(--service-line);
  background: transparent;
}
.jvds-service-framed .service-section { padding-top: 100px; padding-bottom: 100px; }
.jvds-service-framed .service-section-head { margin-bottom: 44px; }
.jvds-service-framed .service-section-head p,
.jvds-service-framed .service-process-head p,
.jvds-service-framed .service-card p { color: var(--service-muted); }
.jvds-service-framed .service-card-grid { gap: 0; }
.jvds-service-framed .service-card {
  position: relative;
  min-width: 0;
  min-height: 310px;
  padding: 40px 32px;
  border-color: var(--service-line);
  background: transparent;
}
.jvds-service-framed .service-card:nth-child(n):nth-child(n) { border-radius: 0; }
/* Shrink the artwork inside the existing 53px/40px icon slot. */
.jvds-service-framed .service-card-icon img { width: 75%; height: 75%; }
.jvds-service-framed .service-card h3 { margin: 64px 0 16px; }
.jvds-service-framed .service-card:hover { background: #e0f94c; border-color: var(--service-line); }
.jvds-service-framed .service-process { padding-bottom: 100px; }
.jvds-service-framed .service-process-head {
  align-items: flex-start;
  margin-bottom: 44px;
  text-align: left;
}
.jvds-service-framed .service-process-item {
  position: relative;
  min-width: 0;
  border: 1px solid var(--service-line);
  overflow: visible;
}
/* Shared row boundaries own a single marker layer, so adjacent 6px nodes
   cannot combine into wider or taller rectangles. Only the first row paints
   its top nodes; every row paints its bottom nodes. */
.jvds-service-framed .service-process-item + .service-process-item { margin-top: -1px; }
.jvds-service-framed .service-process-item > .service-frame-corners {
  background:
    linear-gradient(var(--service-ink), var(--service-ink)) left bottom / var(--service-node) var(--service-node) no-repeat,
    linear-gradient(var(--service-ink), var(--service-ink)) center bottom / var(--service-node) var(--service-node) no-repeat,
    linear-gradient(var(--service-ink), var(--service-ink)) right bottom / var(--service-node) var(--service-node) no-repeat;
}
.jvds-service-framed .service-process-item:first-child > .service-frame-corners::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--service-ink), var(--service-ink)) left top / var(--service-node) var(--service-node) no-repeat,
    linear-gradient(var(--service-ink), var(--service-ink)) center top / var(--service-node) var(--service-node) no-repeat,
    linear-gradient(var(--service-ink), var(--service-ink)) right top / var(--service-node) var(--service-node) no-repeat;
}
.jvds-service-framed .service-process-card {
  position: relative;
  min-width: 0;
  min-height: 380px;
  padding: 48px;
  aspect-ratio: 9 / 5;
  background: transparent;
}
.jvds-service-framed .service-process-card > span { font-weight: 600; }
.jvds-service-framed .service-process-card h3 { font-size: clamp(30px, 3vw, 48px); line-height: 1.2; }
.jvds-service-framed .service-process-pic,
.jvds-service-framed .service-process-pic img { border-radius: 0; }
.jvds-service-framed .service-process-pic {
  width: calc(100% - var(--service-media-inset) - var(--service-media-inset));
  margin: var(--service-media-inset); height: auto; min-height: 0;
  aspect-ratio: auto; border: 0;
}
.jvds-service-framed .service-data-section { padding-bottom: 100px; background: var(--service-paper); }
.jvds-service-framed .service-data-mosaic { gap: 0; }
.jvds-service-framed .service-data-mosaic .home-ai-mosaic-pair { gap: 0; }
.jvds-service-framed .service-data-mosaic .home-ai-mosaic-card {
  border: 1px solid var(--service-line);
  border-radius: 0;
  margin-right: -1px;
  margin-bottom: -1px;
}
.jvds-service-framed .service-data-mosaic .home-ai-stat { background-color: var(--service-paper); }
.jvds-service-framed .row-about-faq.service-faq { background: var(--service-paper); overflow: visible; }

@media (min-width: 801px) {
  .jvds-service-framed .service-title-row.wp3 { gap: 40px; }
  /* English headings use their own row; keep the tab frame fitted to its labels. */
  html[data-jvds-lang="en"] body.jvds-service-framed .service-tabs {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
    gap: 0;
  }
  /* Service article headings and solution links keep one 60px lead-in. */
  body.jvds-service-framed .jvds-growth-related > .wp3 > .jvds-growth-heading:not(:has(> p)) > .news-related-title {
    margin-bottom: 60px;
  }
  body.jvds-service-framed .jvds-growth.jvds-growth-links:not(.jvds-growth-approaches) > .wp3 > .jvds-growth-heading {
    margin-bottom: 60px;
  }
}
@media (max-width: 1200px) and (min-width: 801px) {
  .jvds-service-framed .service-card { padding: 32px 26px; }
  .jvds-service-framed .service-process-card { min-height: 320px; padding: 32px; }
  .jvds-service-framed .service-hero-heading { font-size: 28px; }
}
/* The existing tablet flow is stacked; move the seam and its nodes with it. */
@media (max-width: 1280px) {
  .jvds-service-framed .service-process-item::after { display: none; }
  .jvds-service-framed .service-process-item > .service-frame-corners {
    background:
      linear-gradient(var(--service-ink), var(--service-ink)) left bottom / var(--service-node) var(--service-node) no-repeat,
      linear-gradient(var(--service-ink), var(--service-ink)) right bottom / var(--service-node) var(--service-node) no-repeat;
  }
  .jvds-service-framed .service-process-item:first-child > .service-frame-corners::before {
    background:
      linear-gradient(var(--service-ink), var(--service-ink)) left top / var(--service-node) var(--service-node) no-repeat,
      linear-gradient(var(--service-ink), var(--service-ink)) right top / var(--service-node) var(--service-node) no-repeat;
  }
  .jvds-service-framed .service-process-card { aspect-ratio: auto; border-bottom: 1px solid var(--service-line); }
  .jvds-service-framed .service-process-pic { aspect-ratio: 9 / 5; }
  .jvds-service-framed .service-process-card::after {
    content: ""; position: absolute; z-index: 7; left: -3.5px; right: -3.5px;
    bottom: -3.5px; height: var(--service-node); pointer-events: none;
    background:
      linear-gradient(var(--service-ink),var(--service-ink)) left center / var(--service-node) var(--service-node) no-repeat,
      linear-gradient(var(--service-ink),var(--service-ink)) right center / var(--service-node) var(--service-node) no-repeat;
  }
}
@media (max-width: 800px) {
  body.jvds-service-framed { --service-media-inset: 20px; }
  .jvds-service-framed .service-title-row.wp3 { padding-top: 40px; padding-bottom: 36px; }
  .jvds-service-framed .service-tabs { width: 100%; margin: 0; gap: 0; }
  .jvds-service-framed .service-tabs a { min-width: 0; flex: 1 0 auto; }
  .jvds-service-framed .service-hero-card { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jvds-service-framed .service-hero-content { padding: 28px 24px; border-bottom: 1px solid var(--service-line); }
  .jvds-service-framed .service-hero-heading { margin-top: 0; }
  .jvds-service-framed .service-hero-media { height: auto; min-height: 0; aspect-ratio: 4 / 3; border: 0; }
  .jvds-service-framed .service-hero-card::after,
  .jvds-service-framed .service-hero-card > .service-frame-corners::before { display: none; }
  .jvds-service-framed .service-hero-content::after {
    content: ""; position: absolute; z-index: 7; left: -3.5px; right: -3.5px;
    bottom: -3.5px; height: var(--service-node); pointer-events: none;
    background:
      linear-gradient(var(--service-ink),var(--service-ink)) left center / var(--service-node) var(--service-node) no-repeat,
      linear-gradient(var(--service-ink),var(--service-ink)) right center / var(--service-node) var(--service-node) no-repeat;
  }
  .jvds-service-framed .service-marquee { margin-top: 40px; }
  .jvds-service-framed .service-section { padding-top: 64px; padding-bottom: 64px; }
  .jvds-service-framed .service-section-head { margin-top: 0; margin-bottom: 32px; }
  .jvds-service-framed .service-card { min-height: 240px; padding: 28px 24px; }
  .jvds-service-framed .service-card h3 { margin-top: 44px; }
  .jvds-service-framed .service-process { padding-bottom: 64px; }
  .jvds-service-framed .service-process-head { margin-bottom: 32px; }
  /* Keep the process copy on the title rail instead of its old 24px inset. */
  body.page-service.jvds-service-framed .service-process-head > p { padding-left: 0; padding-right: 0; }
  .jvds-service-framed .service-process-item { grid-template-columns: minmax(0, 1fr); }
  .jvds-service-framed .service-process-item + .service-process-item { margin-top: -1px; }
  .jvds-service-framed .service-process-card { min-height: 0; padding: 32px 24px; }
  .jvds-service-framed .service-process-pic { border: 0; }
  .jvds-service-framed .service-data-section { padding-bottom: 64px; }
}

/* Page-local rectangular actions: black/white at rest, brand color on hover/focus. */
body.jvds-service-framed .service-hero-action {
  --framed-action-bg: #000;
  --framed-action-ink: #fff;
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: 0;
  background: var(--framed-action-bg);
  color: var(--framed-action-ink) !important;
  -webkit-text-fill-color: var(--framed-action-ink);
}
body.jvds-service-framed .jvds-growth-resource-actions .service-hero-action {
  border-color: #000;
  background: var(--framed-action-bg);
}
body.jvds-service-framed .service-hero-action:is(:hover, :focus-visible),
body.jvds-service-framed .jvds-growth-feature-card:is(:hover, :focus-visible) .jvds-growth-feature-action {
  --framed-action-bg: #e0f94c;
  --framed-action-ink: #000;
}
body.jvds-service-framed .service-hero-action .service-hero-action-arrow,
body.jvds-service-framed .service-hero-action .service-hero-action-text {
  height: 100%;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--framed-action-ink) !important;
  -webkit-text-fill-color: var(--framed-action-ink);
}
body.jvds-service-framed .jvds-growth-feature-card:is(:hover, :focus-visible) .jvds-growth-feature-action :is(.service-hero-action-arrow, .service-hero-action-text) {
  color: #000 !important;
  -webkit-text-fill-color: #000;
}
body.jvds-service-framed .service-hero-action:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
body.jvds-service-framed .about-faq-action { border-radius: 0; }