.trel-visual-explorer {
  --visual-ink: #082f49;
  --visual-accent: #00b9d7;
  --visual-soft: #eef6fa;
  --visual-display: "IBM Plex Sans JP", "Noto Sans JP", sans-serif;
  --visual-label: "Space Grotesk", "Outfit", "Inter", sans-serif;
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.55fr);
  margin-top: 54px;
  border: 1px solid #aabfc9;
  background: #fff;
  box-shadow: 0 22px 48px rgba(12, 51, 73, .1);
  font-family: var(--visual-display);
  isolation: isolate;
  overflow: hidden;
}

.sp-heading-grid > .trel-visual-explorer { grid-column: 1 / -1; }

.trel-visual-explorer__tabs {
  display: grid;
  align-content: start;
  border-right: 1px solid #b9c9d0;
  background: #f3f7f9;
}

.trel-visual-explorer__tab {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr 24px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 17px 20px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid #c8d5da;
  background: transparent;
  color: #1a3b4c;
  font: 600 15px / 1.55 var(--visual-display);
  text-align: left;
  cursor: pointer;
  transition: background .28s ease, color .28s ease, padding-left .28s ease;
}

.trel-visual-explorer__tab::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--visual-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .32s cubic-bezier(.2, .75, .25, 1);
}

.trel-visual-explorer__tab:last-child { border-bottom: 0; }
.trel-visual-explorer__tab > b { font-family: var(--visual-display); font-weight: 650; letter-spacing: .015em; }
.trel-visual-explorer__tab > span {
  color: #008aa5;
  font: 700 12px / 1 var(--visual-label);
  letter-spacing: .12em;
}
.trel-visual-explorer__tab > i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #b8cbd4;
  border-radius: 50%;
  color: #597987;
  font: 500 18px / 1 var(--visual-label);
  font-style: normal;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.trel-visual-explorer__tab:hover { padding-left: 25px; background: #e8f2f6; }
.trel-visual-explorer__tab:hover > i { transform: translateX(3px); border-color: var(--visual-accent); }
.trel-visual-explorer__tab[aria-selected="true"] { background: #073b59; color: #fff; }
.trel-visual-explorer__tab[aria-selected="true"]::before { transform: scaleY(1); }
.trel-visual-explorer__tab[aria-selected="true"] > span { color: #56deed; }
.trel-visual-explorer__tab[aria-selected="true"] > i {
  border-color: var(--visual-accent);
  background: var(--visual-accent);
  color: #062f45;
  transform: translateX(3px) rotate(-18deg);
}
.trel-visual-explorer__tab:focus-visible { z-index: 2; outline: 3px solid #ffbf47; outline-offset: -4px; }

.trel-visual-explorer__stage {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: 1fr auto;
  background: linear-gradient(140deg, #fff 0%, #f8fbfc 100%);
}

.trel-visual-explorer__stage::before {
  content: attr(data-active-index);
  position: absolute;
  z-index: 0;
  top: -30px;
  right: 18px;
  color: rgba(0, 123, 155, .045);
  font: 700 clamp(130px, 15vw, 230px) / 1 var(--visual-label);
  letter-spacing: -.08em;
  pointer-events: none;
}

.trel-visual-explorer__panel {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 370px;
  grid-template-columns: minmax(230px, .82fr) minmax(0, 1fr);
  align-items: center;
  gap: 42px;
  padding: 44px 50px 32px;
}
.trel-visual-explorer__panel[hidden] { display: none; }

/* Keep the external-IT illustration level with the full explanatory copy. */
.trel-visual-explorer--external .trel-visual-explorer__panel { align-items: stretch; }

.trel-visual-explorer__art {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  display: grid;
  min-height: 258px;
  place-items: center;
  padding: 22px;
  overflow: hidden;
  border-left: 5px solid var(--visual-accent);
  background: linear-gradient(145deg, #eaf5fa, #fff);
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .3s ease;
}
.trel-visual-explorer__art::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(0, 185, 215, .45);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(0, 185, 215, .06), 0 0 0 38px rgba(0, 185, 215, .035);
}
.trel-visual-explorer__art:hover { box-shadow: 0 16px 34px rgba(18, 77, 106, .12); }
.trel-visual-explorer__art svg { display: block; width: 100%; max-width: 370px; height: auto; transform: translateZ(18px); }
.trel-visual-explorer__art img.v-scene--editorial {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 390px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: translateZ(18px);
  opacity: 0;
}
.trel-visual-explorer__art .v-line { fill: none; stroke: #315f86; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.trel-visual-explorer__art .v-line > * { vector-effect: non-scaling-stroke; }
.trel-visual-explorer__art .v-fill { fill: #dbeaf5; stroke: none; }
.trel-visual-explorer__art .v-soft { fill: #edf6fb; stroke: none; }
.trel-visual-explorer__art .v-accent-fill { fill: #bcecf3; stroke: none; }
.trel-visual-explorer__art .v-skin { fill: #efc4a8; stroke: none; }
.trel-visual-explorer__art .v-hair { fill: #6886a2; stroke: none; }
.trel-visual-explorer__art .v-paper { fill: #fff; stroke: none; }
.trel-visual-explorer__art .v-accent { stroke: var(--visual-accent); stroke-width: 3.2; }
.trel-visual-explorer__art .v-dash { stroke-dasharray: 6 7; }

.trel-visual-explorer__copy { position: relative; z-index: 1; }
.trel-visual-explorer__copy > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  color: #007f9b;
  font: 700 12px / 1.4 var(--visual-label), var(--visual-display);
  letter-spacing: .12em;
}
.trel-visual-explorer__copy > span::before { content: ""; width: 28px; height: 2px; background: var(--visual-accent); }
.trel-visual-explorer__copy h3 {
  max-width: 15em;
  margin: 0;
  color: var(--visual-ink);
  font-family: var(--visual-display);
  font-size: clamp(25px, 2.5vw, 38px);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.45;
  text-wrap: balance;
}
.trel-visual-explorer__copy > p { margin: 22px 0 0; color: #45626f; font-size: 16px; font-weight: 450; line-height: 1.95; }
.trel-visual-explorer__outcome { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #c5d4da; }
.trel-visual-explorer__outcome p { margin: 0; color: #476471; font-size: 15px; line-height: 1.8; }
.trel-visual-explorer__outcome b { color: #067b94; font-family: var(--visual-display); font-weight: 700; }

.trel-visual-explorer__controls {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(110px, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 12px 28px;
  border-top: 1px solid #c5d5dc;
  background: rgba(241, 247, 249, .88);
  backdrop-filter: blur(8px);
}
.trel-visual-explorer__counter { min-width: 58px; color: #55717f; font: 600 12px / 1 var(--visual-label); letter-spacing: .12em; }
.trel-visual-explorer__counter b { color: #047f9b; font-size: 17px; }
.trel-visual-explorer__progress { height: 2px; overflow: hidden; background: #cbd9df; }
.trel-visual-explorer__progress i { display: block; width: var(--visual-progress, 25%); height: 100%; background: var(--visual-accent); transition: width .45s cubic-bezier(.2, .75, .25, 1); }
.trel-visual-explorer__next {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  border: 1px solid #8fabb7;
  background: #fff;
  color: #083c58;
  font: 650 13px / 1.4 var(--visual-display);
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.trel-visual-explorer__next i { font: 600 18px / 1 var(--visual-label); font-style: normal; transition: transform .25s ease; }
.trel-visual-explorer__next:hover { border-color: #083c58; background: #083c58; color: #fff; transform: translateY(-2px); }
.trel-visual-explorer__next:hover i { transform: translateX(4px); }
.trel-visual-explorer__next:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active { animation: trelVisualIn .48s cubic-bezier(.2, .75, .25, 1) both; }
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__copy > * { animation: trelCopyIn .55s cubic-bezier(.2, .75, .25, 1) both; }
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__copy > :nth-child(2) { animation-delay: .07s; }
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__copy > :nth-child(3) { animation-delay: .14s; }
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-fill > *,
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-soft > *,
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-accent-fill > *,
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-skin > *,
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-hair > *,
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-paper > * { transform-box: fill-box; transform-origin: center; animation: trelFillIn .6s ease-out both; }
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-line path,
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-line line,
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-line polyline,
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-line rect,
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-line circle {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: trelLineDraw .9s cubic-bezier(.35, .05, .2, 1) .08s both;
}
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art .v-accent { animation: trelAccentPulse 1.5s ease-in-out .65s both; }
.trel-visual-explorer.is-ready .trel-visual-explorer__panel.is-active .trel-visual-explorer__art img.v-scene--editorial {
  animation: trelEditorialIn .58s cubic-bezier(.22, 1, .36, 1) .08s forwards;
}

@keyframes trelEditorialIn {
  from { opacity: 0; transform: translate3d(0, 10px, 18px) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 18px) scale(1); }
}
.trel-visual-explorer:not(.is-inview) { opacity: .01; transform: translateY(18px); }
.trel-visual-explorer.is-inview { opacity: 1; transform: none; transition: opacity .55s ease, transform .6s cubic-bezier(.2, .75, .25, 1); }

@keyframes trelVisualIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes trelCopyIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes trelFillIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes trelLineDraw { to { stroke-dashoffset: 0; } }
@keyframes trelAccentPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.trel-visual-explorer--employee { --visual-ink: #092f4c; --visual-accent: #00b8d4; }
.trel-visual-explorer--medical { --visual-ink: #0d3551; --visual-accent: #16a8d8; }
.trel-visual-explorer--medical .trel-visual-explorer__tab[aria-selected="true"] { background: #0e4769; }
@media (max-width: 980px) {
  .trel-visual-explorer { grid-template-columns: 1fr; }
  .trel-visual-explorer__tabs { grid-template-columns: repeat(2, 1fr); border-right: 0; border-bottom: 1px solid #b9c9d0; }
  .trel-visual-explorer__tab:nth-child(odd) { border-right: 1px solid #c8d5da; }
  .trel-visual-explorer__panel { min-height: 350px; padding: 36px; }
  .trel-visual-explorer__stage::before { font-size: 160px; }
}

@media (max-width: 680px) {
  .trel-visual-explorer { margin-top: 36px; }
  .trel-visual-explorer__tabs { grid-template-columns: 1fr; }
  .trel-visual-explorer__tab,
  .trel-visual-explorer__tab:nth-child(odd) { min-height: 66px; padding: 12px 15px; border-right: 0; }
  .trel-visual-explorer__tab:hover { padding-left: 18px; }
  .trel-visual-explorer__panel { min-height: 0; grid-template-columns: 1fr; gap: 25px; padding: 20px 20px 26px; }
  .trel-visual-explorer__art { min-height: 190px; padding: 8px; border-left-width: 4px; }
  .trel-visual-explorer__art svg { max-width: 290px; }
  .trel-visual-explorer__art img.v-scene--editorial { max-width: 310px; }
  .trel-visual-explorer__copy h3 { font-size: 26px; }
  .trel-visual-explorer__copy > p { font-size: 15px; }
  .trel-visual-explorer__outcome { margin-top: 18px; }
  .trel-visual-explorer__controls { grid-template-columns: auto 1fr; gap: 12px; padding: 12px 16px; }
  .trel-visual-explorer__progress { grid-column: 1 / -1; grid-row: 2; }
  .trel-visual-explorer__next { justify-self: end; max-width: 210px; }
  .trel-visual-explorer__next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .trel-visual-explorer,
  .trel-visual-explorer *,
  .trel-visual-explorer *::before,
  .trel-visual-explorer *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .trel-visual-explorer:not(.is-inview) { opacity: 1; transform: none; }
}