/* v153: home #unwind keeps its deep-green full-bleed presentation; only the content now introduces Health Care.
   The left/bottom green overlay moves from .wellness-visual::before onto each scene, so each scene's caption
   (now a readable green card listing that category's services) sits above the overlay instead of under it. */
.wellness-visual::before { content: none; }
.wellness-intro h2 { max-width: 14ch; }
@media (min-width: 761px) { .wellness-intro { width: min(500px, 38%); } } /* v157: two-line heading on wide screens */
.wellness-scene::after { background: linear-gradient(90deg, rgba(27,65,52,.98) 0%, rgba(27,65,52,.88) 29%, rgba(27,65,52,.38) 54%, rgba(27,65,52,.06) 78%), linear-gradient(0deg, rgba(13,40,31,.62) 0%, transparent 34%); }
.wellness-scene:nth-child(3) img { object-position: 50% 42%; }
.wellness-scene:nth-child(4) img { object-position: 50% 62%; }

.wellness-scene figcaption { width: min(360px, 32%); gap: 6px; padding: 18px 20px 14px; text-align: left; background: rgba(16,48,38,.66); border: 1px solid rgba(255,244,228,.14); border-radius: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wellness-scene figcaption span { color: #ead8c2; }
.wellness-scene figcaption small { color: #f1ebe3; font-size: .8rem; }
.wellness-scene figcaption ul { display: grid; margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,244,228,.18); }
.wellness-scene figcaption li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; color: #fffaf3; border-bottom: 1px solid rgba(255,244,228,.12); font-size: .8rem; font-weight: 600; }
.wellness-scene figcaption li:last-child a { border-bottom: 0; }
/* v154: captions sit inside .wellness-scene (pointer-events: none in styles.css); make the visible one clickable. */
.wellness-scene.is-active figcaption { pointer-events: auto; }
.wellness-scene figcaption li a span { color: #fffaf3; font-size: 1em; transition: transform .25s var(--ease); }
.wellness-scene figcaption li a:hover span { transform: translateX(4px); }

@media (max-width: 760px) {
  .wellness-scene::after { background: linear-gradient(180deg, rgba(30,68,54,.99) 0%, rgba(30,68,54,.93) 36%, rgba(30,68,54,.24) 58%, rgba(12,38,29,.8) 100%); }
  .wellness-visual { height: 790px; }
  .wellness-scene figcaption { width: auto; padding: 14px 16px 10px; }
  .wellness-scene figcaption small { display: block; font-size: 13px; }
  .wellness-scene figcaption li a { min-height: 40px; font-size: 14px; }
}
@media (max-width: 360px) {
  .wellness-visual { height: 830px; }
}