/* Vision service redesign: reuse the approved AI page rhythm with vision-specific content. */
.service-detail-vision .service-redesign-nav,
.service-detail-vision .service-redesign-proof,
.service-detail-vision .service-redesign-expansion-meta,
.service-detail-vision .service-detail-scenes {
  display: none !important;
}

html body #app .service-detail-page.service-detail-vision .service-detail-hero.has-redesign-content {
  min-height: min(620px, calc(100vh - 86px)) !important;
  grid-template-columns: minmax(0, .86fr) minmax(430px, 1.04fr) !important;
  gap: clamp(44px, 7vw, 116px) !important;
  padding: clamp(68px, 8vw, 112px) 7vw !important;
  background-color: #f3fbff !important;
  background-image:
    linear-gradient(90deg, rgba(20, 137, 202, .09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(20, 137, 202, .09) 1px, transparent 1px),
    radial-gradient(circle at 84% 22%, rgba(44, 195, 215, .21), transparent 38%),
    linear-gradient(125deg, #fff 0%, #f7fcff 50%, #e5f7fb 100%) !important;
  background-position: 0 0, 0 0, center, center !important;
  background-size: 54px 54px, 54px 54px, auto, auto !important;
}

.service-detail-vision .service-detail-hero.has-redesign-content::before,
.service-detail-vision .service-detail-hero.has-redesign-content > .service-detail-hero-action {
  display: none !important;
}

html body #app .service-detail-page.service-detail-vision .service-detail-hero.has-redesign-content::after {
  position: absolute !important;
  top: 20% !important;
  left: 33% !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  content: "02" !important;
  color: rgba(13, 132, 183, .06) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: clamp(150px, 17vw, 260px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  pointer-events: none !important;
}

.service-detail-vision .service-redesign-hero-content {
  z-index: 3 !important;
  display: block !important;
  width: min(560px, 100%) !important;
  max-width: 560px !important;
}

.service-detail-vision .service-redesign-code {
  display: block !important;
  margin-bottom: 20px !important;
  color: #168eb8 !important;
  font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .18em !important;
}

.service-detail-vision .service-redesign-hero-content h1 {
  max-width: 540px !important;
  margin: 0 !important;
  color: #15314a !important;
  font-size: clamp(40px, 5vw, 70px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.service-detail-vision .service-redesign-hero-content p {
  max-width: 490px !important;
  margin: 22px 0 0 !important;
  color: #61798c !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.service-detail-vision .service-redesign-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
  margin-top: 24px !important;
}

.service-detail-vision .service-redesign-chips span {
  position: relative !important;
  min-height: auto !important;
  padding: 0 0 0 13px !important;
  color: #55758b !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
}

.service-detail-vision .service-redesign-chips span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: #20a8c9;
  transform: translateY(-50%);
}

.service-detail-vision .service-redesign-consult {
  display: inline-flex !important;
  min-height: 50px !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 34px !important;
  padding: 0 22px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #1476e8, #12a6d1) !important;
  box-shadow: 0 16px 30px rgba(20, 118, 232, .23) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  transition: transform .24s ease, box-shadow .24s ease !important;
}

.service-detail-vision .service-redesign-consult:hover {
  box-shadow: 0 22px 38px rgba(20, 118, 232, .31) !important;
  transform: translateY(-2px) !important;
}

.service-detail-vision .vision-hero-visual {
  z-index: 3 !important;
  display: block !important;
  min-height: 426px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.vision-hero-visual-head,
.vision-hero-visual-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #67899d;
  font: 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.vision-hero-visual-head { margin: 0 4px 12px; }
.vision-hero-visual-head strong { display: inline-flex; align-items: center; gap: 7px; color: #168eb8; font-size: 9px; }
.vision-hero-visual-head strong i { width: 6px; height: 6px; border-radius: 50%; background: #36c99b; box-shadow: 0 0 0 4px rgba(54, 201, 155, .13); }

.vision-hero-console {
  min-height: 374px;
  padding: 17px 17px 14px;
  overflow: hidden;
  border: 1px solid rgba(29, 149, 191, .18);
  border-radius: 24px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 26px 58px rgba(29, 92, 128, .17), 0 0 0 9px rgba(255, 255, 255, .74);
}

.vision-hero-console-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  color: #284b61;
  border-bottom: 1px solid rgba(29, 149, 191, .12);
  font-size: 11px;
  font-weight: 800;
}

.vision-hero-console-top small { color: #86a1af; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.vision-hero-stage { position: relative; height: 230px; margin-top: 14px; overflow: hidden; border-radius: 13px; background: #07141d; }
.vision-hero-stage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.92) brightness(.92); transform: scale(1.015); }
.vision-hero-stage::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(4, 18, 26, .03), rgba(4, 18, 26, .27)); pointer-events: none; }
.vision-focus-box { position: absolute; top: 42%; left: 35%; z-index: 2; width: 25%; height: 34%; border: 1px solid #ff6571; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.vision-focus-box::before,
.vision-focus-box::after { position: absolute; left: -1px; height: 2px; content: ""; background: #ff6571; }
.vision-focus-box::before { top: -1px; width: 17px; }
.vision-focus-box::after { bottom: -1px; width: 17px; }
.vision-focus-box span { position: absolute; top: -22px; left: -1px; min-width: 70px; padding: 4px 7px; color: #fff; background: #ff6571; font-size: 8px; }
.vision-focus-box b { position: absolute; right: 4px; bottom: 4px; color: #fff; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.vision-scan-line { position: absolute; top: 47%; right: 4%; left: 4%; z-index: 2; height: 1px; background: linear-gradient(90deg, transparent, #35d4e3 12%, #35d4e3 88%, transparent); box-shadow: 0 0 12px rgba(53, 212, 227, .8); }
.vision-stage-status { position: absolute; right: 10px; bottom: 9px; left: 10px; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #d7edf3; font-size: 8px; }
.vision-stage-status span { display: inline-flex; align-items: center; gap: 6px; }
.vision-stage-status i { width: 5px; height: 5px; border-radius: 50%; background: #3bd7a1; }
.vision-stage-status em { font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; }

.vision-hero-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 13px; border-top: 1px solid rgba(29, 149, 191, .11); }
.vision-hero-readings span { min-width: 0; padding: 12px 10px 2px; border-right: 1px solid rgba(29, 149, 191, .1); }
.vision-hero-readings span:last-child { border-right: 0; }
.vision-hero-readings small { display: block; color: #8aa2af; font-size: 8px; }
.vision-hero-readings strong { display: block; margin-top: 4px; overflow: hidden; color: #21465d; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.vision-hero-visual-footer { margin: 12px 4px 0; color: #7795a6; font-size: 8px; }

.service-detail-vision .service-redesign-expansion {
  padding: 76px 6vw 88px !important;
  background: linear-gradient(180deg, #f5fbfd 0%, #fff 50%, #f5fafc 100%) !important;
}

.service-detail-vision .service-redesign-expansion-head { width: min(1210px, 100%) !important; padding-bottom: 32px !important; border-bottom: 1px solid rgba(24, 148, 190, .15) !important; }
.service-detail-vision .service-redesign-expansion-head > span { margin-bottom: 14px !important; color: #168eb8 !important; }
.service-detail-vision .service-redesign-expansion-head h2 { max-width: 860px !important; color: #17374d !important; font-size: clamp(30px, 3.5vw, 50px) !important; line-height: 1.18 !important; letter-spacing: 0 !important; }
.service-detail-vision .service-redesign-expansion-head p { max-width: 660px !important; margin-top: 16px !important; color: #687f91 !important; font-size: 14px !important; line-height: 1.8 !important; }
.service-detail-vision .service-redesign-step-track { width: min(1210px, 100%) !important; margin-top: 40px !important; gap: 14px !important; }
.service-detail-vision .service-redesign-step-track article { min-height: 154px !important; padding: 46px 18px 16px !important; border: 1px solid rgba(24, 148, 190, .13) !important; border-radius: 12px !important; background: rgba(255,255,255,.86) !important; box-shadow: 0 14px 34px rgba(29, 92, 128, .07) !important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important; }
.service-detail-vision .service-redesign-step-track article:hover { border-color: rgba(24, 148, 190, .32) !important; box-shadow: 0 22px 42px rgba(29, 92, 128, .14) !important; transform: translateY(-5px) !important; }
.service-detail-vision .service-redesign-step-track article > span { top: 13px !important; left: 16px !important; color: #168eb8 !important; }
.service-detail-vision .service-redesign-step-track article strong { color: #23485e !important; font-size: 17px !important; }
.service-detail-vision .service-redesign-step-track article p { margin-top: 9px !important; color: #708797 !important; font-size: 12px !important; line-height: 1.7 !important; }
.service-detail-vision .service-redesign-step-track article small { margin-top: 14px !important; color: #92a8b4 !important; }
.service-detail-vision .service-redesign-scene-heading { width: min(1210px, 100%) !important; margin-top: 58px !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(24, 148, 190, .15) !important; }
.service-detail-vision .service-redesign-scene-heading strong { color: #23485e !important; font-size: 22px !important; }
.service-detail-vision .service-redesign-scene-heading span { color: #829ba8 !important; }
.service-detail-vision .service-redesign-scene-grid { width: min(1210px, 100%) !important; margin-top: 18px !important; gap: 14px !important; }
.service-detail-vision .service-redesign-scene-grid article { min-height: 176px !important; padding: 20px !important; border: 1px solid rgba(24, 148, 190, .13) !important; border-radius: 12px !important; background: linear-gradient(145deg, #fff, #f3fbfd) !important; box-shadow: 0 12px 28px rgba(29, 92, 128, .06) !important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important; }
.service-detail-vision .service-redesign-scene-grid article:hover { border-color: rgba(24, 148, 190, .3) !important; box-shadow: 0 20px 38px rgba(29, 92, 128, .14) !important; transform: translateY(-4px) !important; }
.service-detail-vision .service-redesign-scene-grid h3 { margin: 20px 0 7px !important; color: #23485e !important; font-size: 19px !important; }
.service-detail-vision .service-redesign-scene-grid p { color: #708797 !important; font-size: 12px !important; line-height: 1.7 !important; }
.service-detail-vision .service-redesign-scene-grid article > span { margin-top: 13px !important; color: #168eb8 !important; background: #e7f7fb !important; }

.service-detail-vision .service-detail-cards { padding: 76px 0 88px !important; background: #fff !important; }
.service-detail-vision .service-detail-cards .service-detail-section-head { width: min(1220px, 88vw) !important; margin: 0 auto 30px !important; text-align: left !important; }
.service-detail-vision .service-detail-cards .service-detail-section-head h2 { color: #17374d !important; font-size: clamp(28px, 3vw, 42px) !important; letter-spacing: 0 !important; }
.service-detail-vision .service-detail-cards .service-detail-section-head p { margin-top: 10px !important; color: #708797 !important; font-size: 14px !important; }
.service-detail-vision .service-detail-card-grid { width: min(1220px, 88vw) !important; gap: 14px !important; }
.service-detail-vision .service-detail-card { position: relative !important; min-height: 226px !important; padding: 23px 21px 21px !important; border: 1px solid rgba(24, 148, 190, .12) !important; border-radius: 12px !important; background: linear-gradient(145deg, #fff, #f6fbfd) !important; box-shadow: 0 14px 30px rgba(29, 92, 128, .07) !important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important; }
.service-detail-vision .service-detail-card:hover { border-color: rgba(24, 148, 190, .3) !important; box-shadow: 0 22px 42px rgba(29, 92, 128, .14) !important; transform: translateY(-5px) !important; }
.service-detail-vision .service-detail-card::after { position: absolute; top: 18px; right: 20px; content: attr(data-vision-index); color: rgba(22, 142, 184, .16); font: 24px ui-monospace, SFMono-Regular, Menlo, monospace; }
.service-detail-vision .service-detail-card img { width: 45px !important; height: 45px !important; margin-bottom: 20px !important; padding: 9px !important; border: 1px solid rgba(24, 148, 190, .14) !important; border-radius: 10px !important; background: #eaf8fc !important; }
.service-detail-vision .service-detail-card h3 { margin-bottom: 9px !important; color: #23485e !important; font-size: 18px !important; }
.service-detail-vision .service-detail-card p,
.service-detail-vision .service-detail-card li { color: #708797 !important; font-size: 13px !important; line-height: 1.72 !important; }

.service-detail-vision .service-detail-engine {
  position: relative !important;
  isolation: isolate !important;
  width: min(1220px, 88vw) !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: clamp(42px, 6vw, 84px) !important;
  padding: 78px 0 88px !important;
  background: #fff !important;
  box-shadow: 0 0 0 100vmax #fff !important;
  clip-path: inset(0 -100vmax) !important;
}
html body #app .service-detail-page.service-detail-vision .service-detail-engine h2 {
  max-width: 580px !important;
  margin-bottom: 26px !important;
  color: #17374d !important;
  font-size: clamp(28px, 2.5vw, 40px) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
}
.service-detail-vision .service-detail-feature { border-color: rgba(24, 148, 190, .12) !important; }
.service-detail-vision .service-detail-feature h3 { color: #23485e !important; }
.service-detail-vision .service-detail-feature p { color: #708797 !important; }

.service-detail-vision .service-detail-engine-media.vision-showcase-media {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(65, 132, 162, .24) !important;
  border-radius: 14px !important;
  background: #07151d !important;
  box-shadow: 0 26px 56px rgba(20, 57, 76, .23), 0 0 0 7px rgba(255,255,255,.94) !important;
  transition: transform .34s ease, box-shadow .34s ease !important;
}
html body #app .service-detail-page.service-detail-vision .service-detail-engine-media.vision-showcase-media {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  align-self: center !important;
}
html body #app .service-detail-page.service-detail-vision .service-detail-engine-media.vision-showcase-media::after {
  display: none !important;
}
.service-detail-vision .service-detail-engine-media.vision-showcase-media:hover { box-shadow: 0 34px 68px rgba(20, 57, 76, .29), 0 0 0 7px #fff !important; transform: translateY(-5px) !important; }
.service-detail-vision .service-detail-engine-media.vision-showcase-media img { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; object-position: center !important; border-radius: 0 !important; transition: filter .34s ease, transform .5s ease !important; }
.service-detail-vision .service-detail-engine-media.vision-showcase-media:hover img { filter: brightness(1.06) saturate(1.04) !important; transform: scale(1.016) !important; }
.vision-showcase-chrome,
.vision-showcase-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #7fa1b1; background: #07151d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.vision-showcase-chrome { min-height: 38px; padding: 0 14px; border-bottom: 1px solid rgba(65, 132, 162, .2); font-size: 8px; }
.vision-showcase-chrome strong { display: inline-flex; align-items: center; gap: 7px; color: #46dba6; font-size: 8px; }
.vision-showcase-chrome strong i { width: 5px; height: 5px; border-radius: 50%; background: #42d8ab; box-shadow: 0 0 0 4px rgba(66,216,171,.12); }
.vision-showcase-footer { min-height: 40px; justify-content: flex-start; gap: 24px; padding: 0 14px; border-top: 1px solid rgba(65, 132, 162, .19); font-size: 8px; }
.vision-showcase-footer span { position: relative; padding-left: 10px; }
.vision-showcase-footer span::before { position: absolute; top: 50%; left: 0; width: 4px; height: 4px; content: ""; border-radius: 50%; background: #2bc2d6; transform: translateY(-50%); }

@media (max-width: 900px) {
  html body #app .service-detail-page.service-detail-vision .service-detail-hero.has-redesign-content { grid-template-columns: 1fr !important; min-height: 0 !important; padding-top: 64px !important; padding-bottom: 72px !important; }
  .service-detail-vision .service-redesign-hero-content { max-width: 680px !important; }
  .service-detail-vision .vision-hero-visual { width: min(680px, 90vw) !important; margin: 0 auto !important; }
  .service-detail-vision .service-detail-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .service-detail-vision .service-detail-engine { grid-template-columns: 1fr !important; width: min(760px, 88vw) !important; gap: 36px !important; }
}

@media (max-width: 560px) {
  html body #app .service-detail-page.service-detail-vision .service-detail-hero.has-redesign-content { padding: 50px 7vw 58px !important; }
  .service-detail-vision .service-redesign-hero-content h1 { font-size: 38px !important; }
  .service-detail-vision .service-redesign-hero-content p { font-size: 14px !important; }
  .service-detail-vision .vision-hero-visual { min-height: 0 !important; }
  .vision-hero-console { min-height: 0; padding: 12px; border-radius: 18px; }
  .vision-hero-stage { height: 180px; }
  .vision-hero-readings span { padding-right: 5px; padding-left: 5px; }
  .vision-hero-readings strong { font-size: 10px; }
  .vision-hero-visual-footer { font-size: 7px; }
  .service-detail-vision .service-redesign-expansion { padding: 60px 7vw 70px !important; }
  .service-detail-vision .service-redesign-step-track,
  .service-detail-vision .service-redesign-scene-grid,
  .service-detail-vision .service-detail-card-grid { grid-template-columns: 1fr !important; }
  .service-detail-vision .service-detail-cards,
  .service-detail-vision .service-detail-engine { padding-top: 58px !important; padding-bottom: 66px !important; }
  .service-detail-vision .service-detail-card { min-height: 0 !important; }
  .vision-showcase-chrome { min-height: 34px; padding: 0 10px; }
  .vision-showcase-footer { min-height: 36px; gap: 13px; padding: 0 10px; font-size: 7px; }
}