/* Contact only: shared hairline grid and square corner markers. */
body.jvds-contact-framed {
  --contact-paper: #f3f1eb;
  --contact-line: #d9d7cf;
  --contact-ink: #282821;
  --contact-muted: #6e6e65;
  --contact-node-size: 6px;
  background: var(--contact-paper);
  color: var(--contact-ink);
}

.jvds-contact-framed .main,
.jvds-contact-framed .row-contact-page {
  background: var(--contact-paper);
}

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

.jvds-contact-framed .row-contact-page {
  padding-top: 72px;
}

/* Match the CTA's upper gradient edge to the page background. */
.jvds-contact-framed .service-cta.site-cta {
  background-image: linear-gradient(180deg, var(--contact-paper) 0%, #f6ffdc 34%, #e4f794 66%, #e0f94c 100%);
}

.jvds-contact-framed .m-contact {
  padding-top: 0;
}

.jvds-contact-framed .contact-grid-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 64px;
  padding-bottom: 80px;
}

.jvds-contact-framed .contact-grid-intro .g-tit01 {
  margin: 0;
}

.jvds-contact-framed .contact-grid-intro .g-code-title {
  margin-left: 0;
  padding-left: 0;
  color: var(--contact-ink);
}

.jvds-contact-framed .contact-grid-intro .g-code-title::before {
  content: "";
  width: 95px;
  height: 95px;
  left: -12px;
}

.jvds-contact-framed .contact-grid-intro .g-code-cn {
  font-size: 80px;
  font-weight: 500;
  line-height: 1.05;
}

.jvds-contact-framed .contact-grid-intro .g-code-en {
  margin-top: 12px;
  font-size: 62px;
  line-height: 1;
  letter-spacing: -.035em;
}

.jvds-contact-framed .contact-grid-intro .jvds-growth,
.jvds-contact-framed .contact-grid-intro .jvds-growth-wrap {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.jvds-contact-framed .contact-grid-intro .jvds-growth p {
  margin: 0;
  color: var(--contact-muted);
  font-size: 15px;
  line-height: 1.95;
}

.jvds-contact-framed .ul-iconb1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 64px;
  border: 1px solid var(--contact-line);
  overflow: visible;
}

.jvds-contact-framed .ul-iconb1::before,
.jvds-contact-framed .ul-iconb1::after {
  content: none;
}

.jvds-contact-framed .ul-iconb1 li {
  position: relative;
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
}

.jvds-contact-framed .ul-iconb1 li + li {
  border-left: 1px solid var(--contact-line);
}

.jvds-contact-framed .ul-iconb1 .contact-copy-card {
  align-items: flex-start;
  justify-content: flex-start;
  height: 272px;
  min-height: 0;
  padding: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  transition: background-color .25s ease;
}

.jvds-contact-framed .ul-iconb1 .contact-copy-card:hover,
.jvds-contact-framed .ul-iconb1 .contact-copy-card:focus-visible {
  background: #e0f94c;
}

/* Preserve the copy feedback cursor, with a square rather than a circular shape. */
body.jvds-contact-framed .contact-copy-cursor {
  box-sizing: border-box;
  width: 72px;
  min-width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 0;
}

.jvds-contact-framed .ul-iconb1 .contact-copy-card:focus-visible {
  outline: 2px solid var(--contact-ink);
  outline-offset: -5px;
  box-shadow: inset 0 0 0 2px var(--contact-ink);
}

.jvds-contact-framed .ul-iconb1 .icon {
  display: flex;
  justify-content: flex-start;
  width: 53px;
  height: 53px;
  margin: 0 0 auto;
  line-height: 1;
}

.jvds-contact-framed .ul-iconb1 .icon img {
  display: block;
  width: auto;
  height: 39.75px;
  max-width: 39.75px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.jvds-contact-framed .contact-card-label {
  display: block;
  margin: 28px 0 9px;
  color: var(--contact-ink);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.jvds-contact-framed .ul-iconb1 .t {
  max-width: 100%;
  color: var(--contact-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
}

.jvds-contact-framed .contact-grid-frame {
  position: relative;
  border: 1px solid var(--contact-line);
}

.jvds-contact-framed .contact-frame-corners {
  position: absolute;
  z-index: 5;
  inset: -3.5px;
  pointer-events: none;
  background:
    linear-gradient(var(--contact-ink), var(--contact-ink)) left top / var(--contact-node-size) var(--contact-node-size) no-repeat,
    linear-gradient(var(--contact-ink), var(--contact-ink)) right top / var(--contact-node-size) var(--contact-node-size) no-repeat,
    linear-gradient(var(--contact-ink), var(--contact-ink)) left bottom / var(--contact-node-size) var(--contact-node-size) no-repeat,
    linear-gradient(var(--contact-ink), var(--contact-ink)) right bottom / var(--contact-node-size) var(--contact-node-size) no-repeat;
}

.jvds-contact-framed .m-infob2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 64px;
  overflow: visible;
}

.jvds-contact-framed .m-infob2 .left,
.jvds-contact-framed .m-infob2 .right {
  position: relative;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 36px;
}

.jvds-contact-framed .m-infob2 .left {
  grid-column: 1;
  grid-row: 1;
  overflow: visible;
}

.jvds-contact-framed .m-infob2 .right {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--contact-line);
}

.jvds-contact-framed .m-infob2 .right::before,
.jvds-contact-framed .m-infob2 .right::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: -3.5px;
  top: -3.5px;
  width: var(--contact-node-size);
  height: var(--contact-node-size);
  background: var(--contact-ink);
  pointer-events: none;
}

.jvds-contact-framed .m-infob2 .right::after {
  top: auto;
  bottom: -3.5px;
}

.jvds-contact-framed .m-infob2 .right .img {
  width: 100%;
  max-width: 400px;
  margin: 0;
}

.jvds-contact-framed .m-infob2 .inp-box,
.jvds-contact-framed .m-infob2 .inp,
.jvds-contact-framed .m-infob2 .label {
  border-radius: 0;
}

.jvds-contact-framed .m-infob2 .inp-box {
  margin-bottom: 16px;
  border: 1px solid var(--contact-line);
}

.jvds-contact-framed .m-infob2 .inp-box.act,
.jvds-contact-framed .m-infob2 .inp-box:focus-within {
  border: 1px solid var(--contact-ink);
}

.jvds-contact-framed .m-infob2 .inp,
.jvds-contact-framed .m-infob2 .inp-box.act .inp,
.jvds-contact-framed .m-infob2 .label,
.jvds-contact-framed .m-infob2 .inp-box.act .label {
  height: 64px;
  padding: 0 20px;
  color: var(--contact-ink);
  font-size: 15px;
  font-weight: 400;
}

.jvds-contact-framed .m-infob2 .inp::placeholder {
  color: var(--contact-muted);
  font-size: 15px;
  font-weight: 400;
}

.jvds-contact-framed .m-infob2 .textarea textarea,
.jvds-contact-framed .m-infob2 .inp-box.act.textarea textarea {
  height: 148px;
  padding: 20px;
}

.jvds-contact-framed .m-infob2 .label span {
  line-height: 62px;
}

.jvds-contact-framed .m-contact-map,
.jvds-contact-framed .m-contact-map .atomic-globe-map {
  border-radius: 0;
}

.jvds-contact-framed .m-contact-map {
  margin-bottom: 72px;
  overflow: visible;
}

/* Desktop globe dimensions; retain the existing adaptive tablet/mobile stage. */
@media (min-width: 1281px) {
  body.jvds-contact-framed .m-contact-map {
    --contact-globe-stage-height: 1000px;
    --contact-globe-scene-height: 975.89px;
    /* The stage fits inside the frame's two 1px borders. */
    height: calc(var(--contact-globe-stage-height) + 2px);
  }
  body.jvds-contact-framed .m-contact-map .atomic-globe-map {
    height: var(--contact-globe-stage-height);
  }
  body.jvds-contact-framed .m-contact-map .atomic-globe-map > .jvds-atomic-globe {
    height: var(--contact-globe-scene-height);
  }
}

@media (max-width: 1200px) {
  .jvds-contact-framed .contact-grid-intro { gap: 40px; }
  .jvds-contact-framed .ul-iconb1 .contact-copy-card { padding: 26px; }
}

@media (max-width: 800px) {
  /* Fit mobile feedback to its message, with room to wrap inside the viewport. */
  .jvds-contact-framed .m-tips {
    box-sizing: border-box;
    left: 50%;
    right: auto;
    width: max-content;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
  }
  .jvds-contact-framed .m-tips .oh span {
    overflow-wrap: anywhere;
  }
  .jvds-contact-framed .row-contact-page { padding-top: 40px; }
  .jvds-contact-framed .contact-grid-intro {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 36px;
  }
  .jvds-contact-framed .contact-grid-intro .g-code-cn { font-size: 56px; }
  .jvds-contact-framed .contact-grid-intro .g-code-title::before {
    width: 54px;
    height: 54px;
    left: -10px;
    top: -6px;
  }
  .jvds-contact-framed .contact-grid-intro .g-code-en { font-size: 44px; }
  .jvds-contact-framed .contact-grid-intro .jvds-growth p { font-size: 14px; }
  .jvds-contact-framed .ul-iconb1 {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }
  .jvds-contact-framed .ul-iconb1 li + li {
    border-top: 1px solid var(--contact-line);
    border-left: 0;
  }
  .jvds-contact-framed .ul-iconb1 .contact-copy-card {
    height: 204px;
    padding: 24px;
  }
  .jvds-contact-framed .contact-card-label { margin-top: 22px; font-size: 18px; }
  .jvds-contact-framed .ul-iconb1 .t { font-size: 15px; }
  .jvds-contact-framed .m-infob2 { grid-template-columns: 1fr; margin-bottom: 40px; }
  .jvds-contact-framed .m-infob2 .left,
  .jvds-contact-framed .m-infob2 .right { padding: 24px; }
  .jvds-contact-framed .m-infob2 .right {
    grid-column: 1;
    grid-row: 2;
    border-top: 1px solid var(--contact-line);
    border-left: 0;
  }
  .jvds-contact-framed .m-infob2 .right .img { max-width: 280px; }
  .jvds-contact-framed .m-infob2 .right::after {
    top: -3.5px;
    right: -3.5px;
    bottom: auto;
    left: auto;
  }
  .jvds-contact-framed .m-contact-map { margin-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .jvds-contact-framed .ul-iconb1 .contact-copy-card { transition: none; }
}

/* Page-local rectangular actions: black/white at rest, brand color on hover/focus. */
body.jvds-contact-framed .main .g-contact-btn {
  box-sizing: border-box;
  border: 1px solid #000 !important;
  border-radius: 0;
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  animation: none !important;
}
body.jvds-contact-framed .main .g-contact-btn .g-contact-btn-fill,
body.jvds-contact-framed .main .g-contact-btn:is(:hover, :focus-visible) .g-contact-btn-fill {
  border-radius: 0 !important;
  background: transparent !important;
}
body.jvds-contact-framed .main .g-contact-btn .g-contact-btn-icon { border-radius: 0; }
body.jvds-contact-framed .main .g-contact-btn :is(.g-contact-btn-text, .g-contact-btn-icon) {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
body.jvds-contact-framed .main .g-contact-btn:is(:hover, :focus-visible) { background: #e0f94c !important; color: #000 !important; }
body.jvds-contact-framed .main .g-contact-btn:is(:hover, :focus-visible) :is(.g-contact-btn-text, .g-contact-btn-icon) {
  color: #000 !important;
  -webkit-text-fill-color: #000;
}
body.jvds-contact-framed .main .g-contact-btn:focus-visible { outline: 2px solid #000; outline-offset: 3px; }