/* Three distinct invitations, sharing the product page's warm Vivid tokens. */
.vh-product-services-section { padding: 40px 0 0; background: var(--vh-white, #fff); }
.vh-product-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.vh-product-services--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vh-product-services > * { min-width: 0; }
.product-information__cta .custom-link { text-align: center; }

/* Keep the existing Fix interactions within the shared service cards. */
.vh-product-services .vhb-banner { min-height: 510px; height: 100%; border-radius: 24px; }
.vh-product-services .vhb-banner::before { background: linear-gradient(110deg, var(--vh-cream) 0 60%, var(--vh-linen) 60%); }
.vh-product-services .vhb-grid { grid-template-columns: minmax(0, 62%) minmax(0, 38%); grid-template-rows: 1fr; }
.vh-product-services .vhb-copy { padding: 30px 0 30px 28px; justify-content: flex-start; }
.vh-product-services .vhb-kicker { font-size: 12px; letter-spacing: .06em; gap: 9px; margin-bottom: 18px; line-height: 1.5; }
.vh-product-services .vhb-kicker i { flex-shrink: 0; background: var(--vivid-gradient-main, linear-gradient(135deg, #2563eb, #db2777, #f59e0b)); }
.vh-product-services .vhb-title { font-size: clamp(28px, 5.6cqw, 38px); font-weight: 750; line-height: 1.07; min-height: 3.21em; text-wrap: initial; }
.vh-product-services .vhb-description { font-size: 14px; line-height: 1.55; min-height: 4.65em; margin-top: 16px; text-wrap: initial; }
.vh-product-services .vhb-kit { font-size: 12px; margin-top: 18px; }
.vh-product-services .vhb-kit-known { padding: 8px 10px; gap: 3px 8px; border-color: var(--vh-sand); background: #ffffff9c; border-radius: 12px; line-height: 1.5; }
.vh-product-services .vhb-kit-value { white-space: normal; }
.vh-product-services .vhb-bottom { margin-top: 14px; gap: 8px; flex-direction: row; flex-wrap: nowrap; align-items: stretch; }
.vh-product-services .vhb-cta { flex: 1 1 0; min-width: 0; min-height: 48px; font-size: 12px; line-height: 1.35; padding: 10px; gap: 6px; justify-content: center; }
.vh-product-services .vhb-cta-arrow { flex: 0 0 22px; width: 22px; height: 22px; font-size: 14px; }
.vh-product-services .vhb-cta-text { min-width: 0; text-align: center; text-wrap: balance; overflow-wrap: normal; }
.vh-product-services .vhb-add { flex: 1.35 1 0; min-width: 0; min-height: 48px; padding: 10px; font-size: 12px; line-height: 1.35; border-radius: 14px; }
.vh-product-services .vhb-add::after { border-radius: 14px; }
.vh-product-services .vhb-add-label { min-width: 0; gap: 6px; white-space: normal; text-align: left; }
.vh-product-services .vhb-add-icon { width: 16px; height: 16px; }
.vh-product-services .vhb-add-text { min-width: 0; overflow-wrap: anywhere; }
.vh-product-services .vhb-cta { overflow-wrap: anywhere; text-decoration: none; }
.vh-product-services .vhb-meta { display: none; }
.vh-product-services .vhb-progress { margin-top: 20px; }
.vh-product-services .vhb-progress i::after { background: var(--vivid-gradient-main, linear-gradient(90deg, #2563eb, #db2777, #f59e0b)); }
.vh-product-services .vhb-visual { min-height: 100%; }
.vh-product-services .vhb-strip-pair { transform: translate(-50%, -50%) scale(.56); }
.vh-product-services .vhb-sun { width: 165px; right: calc(50% - 83px); background: var(--vivid-gradient-main, linear-gradient(135deg, #2563eb, #7c3aed, #db2777, #f59e0b)); box-shadow: 0 20px 50px #db277716; opacity: .18; }
.vh-product-services .vhb-fact { font-size: 8px; padding: 7px 9px; max-width: 95%; text-align: center; }
.vh-product-services .vhb-fact-one { top: 16%; right: 4%; }
.vh-product-services .vhb-fact-two { bottom: 20%; left: 1%; }
.vh-product-services .vhb-index { width: 44px; height: 44px; right: 14px; bottom: 18px; font-size: 11px; }

.vhps-studio { container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 42%); min-height: 510px; border: 1px solid var(--vh-sand, #ede7df); border-radius: 24px; background: var(--vh-cream, #faf8f5); color: var(--vh-espresso, #2c2825); box-shadow: 0 20px 60px #1a171512; }
.vhps-studio::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 90% 25%, #7c3aed0d, transparent 65%), radial-gradient(ellipse at 100% 90%, #f59e0b14, transparent 65%); }
.vhps-copy { position: relative; z-index: 2; padding: 30px 0 30px 28px; display: flex; flex-direction: column; align-items: flex-start; }
.vhps-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font: 800 12px/1.5 var(--vh-font-body, Onest, sans-serif); letter-spacing: .06em; color: var(--vh-charcoal, #4a4440); }
.vhps-kicker > span { background: var(--vivid-gradient-main, linear-gradient(135deg, #2563eb, #db2777, #f59e0b)); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 16px; line-height: 1; }
.vhps-title { margin: 0; font-family: var(--vh-font-heading, Geologica, sans-serif); font-size: clamp(28px, 5.6cqw, 38px); font-weight: 750; line-height: 1.07; letter-spacing: -.035em; color: var(--vh-ink, #1a1715); }
.vhps-title em { font-style: normal; background: var(--vivid-gradient-main, linear-gradient(115deg, #2563eb, #7c3aed, #db2777, #f59e0b)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.vhps-description { margin: 20px 0 0; font: 400 14px/1.65 var(--vh-font-body, Onest, sans-serif); color: var(--vh-charcoal, #4a4440); }
.vhps-directions { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 3px 6px; max-width: 100%; margin: 16px 0 14px; padding: 8px 10px; border: 1px solid var(--vh-sand, #ede7df); border-radius: 12px; background: #ffffff9c; font: 650 12px/1.5 var(--vh-font-body, Onest, sans-serif); color: var(--vh-ink, #1a1715); }
.vhps-directions > span { color: var(--vh-warm-gray, #a89f95); }
.vhps-cta { max-width: 100%; margin-top: 0; font-size: 13px; font-weight: 750; border-radius: 14px; padding: 14px 17px; min-height: 48px; }
.vhps-cta::after { border-radius: 14px; }
.vhps-cta > span { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; min-width: 0; }
.vhps-cta-label { min-width: 0; white-space: normal; text-wrap: balance; line-height: 1.35; }
.vhps-cta-icon { flex: 0 0 22px; width: 22px; height: 22px; overflow: visible; transition: transform .28s ease; }
.vhps-cta-arrow { flex-shrink: 0; }
.vhps-cta:is(:hover, :focus-visible) .vhps-cta-icon--studio { transform: translateY(-1px) rotate(-9deg); }
.vhps-cta:is(:hover, :focus-visible) .vhps-cta-icon--visualizer { transform: perspective(160px) rotateY(-18deg) rotateX(8deg) scale(1.08); }
.vhps-cta-glint { transform-box: fill-box; transform-origin: center; }
.vhps-cta:is(:hover, :focus-visible) .vhps-cta-glint { animation: vhps-cta-glint .6s ease both; }
@keyframes vhps-cta-glint { 50% { transform: scale(1.25) rotate(25deg); } }
.vhps-cta:focus-visible { outline: 2px solid var(--vh-espresso, #2c2825); outline-offset: 5px; }
.vhps-note { margin: 10px 0 0; font: 400 10px/1.6 var(--vh-font-body, Onest, sans-serif); color: var(--vh-charcoal, #4a4440); }
.vhps-visual { position: relative; width: min(100%, 280px); min-width: 0; perspective: 900px; align-self: stretch; justify-self: center; }
.vhps-halo { position: absolute; inset: 18% -20% 10% -15%; border-radius: 50%; background: conic-gradient(from 30deg, #2563eb0d, #7c3aed12, #db277710, #f59e0b12, #2563eb0d); filter: blur(20px); }
.vhps-trail { position: absolute; width: 125%; height: 70%; top: 13%; left: -15%; opacity: .5; stroke-dashoffset: 0; animation: vhps-trail 18s linear infinite; }
.vhps-photo { position: absolute; z-index: 2; width: 42%; left: -7%; top: 50%; padding: 5px 5px 0; border-radius: 5px; background: #fff; box-shadow: 0 12px 30px #372a2530; transform: translateY(-4%) rotate(-12deg); animation: vhps-photo 9s ease-in-out infinite; }
.vhps-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: 2px; }
.vhps-photo > span { display: block; padding: 7px 0; text-align: center; font: 650 8px/1.1 var(--vh-font-body, Onest, sans-serif); }
.vhps-canvas { position: absolute; width: 73%; aspect-ratio: 2/3; left: 18%; top: 21%; transform-style: preserve-3d; transform: rotateX(-6deg) rotateY(-22deg) rotateZ(5deg); animation: vhps-canvas 12s ease-in-out -2s infinite; box-shadow: 10px 22px 30px #372a2526; }
.vhps-canvas > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(.1px); }
.vhps-canvas-edge { position: absolute; top: 0; left: 100%; width: 12%; height: 100%; transform-origin: left; transform: rotateY(90deg); overflow: hidden; background: #312823; }
.vhps-canvas-edge::before { content: ''; position: absolute; inset: 0; background-image: var(--vhps-art); background-size: 833.333% 100%; background-position: right center; transform: scaleX(-1); opacity: .8; }
.vhps-canvas-edge--left { left: -12%; transform-origin: right; transform: rotateY(-90deg); }
.vhps-canvas-edge--left::before { background-position: left center; }
.vhps-art-label { position: absolute; left: 6%; right: 4%; bottom: 13%; text-align: center; font: 650 9px/1.5 var(--vh-font-body, Onest, sans-serif); color: var(--vh-charcoal, #4a4440); }
.vhps-spark { position: absolute; font-size: 25px; color: var(--vh-charcoal, #4a4440); animation: vhps-spark 7s ease-in-out infinite; }
.vhps-spark--one { top: 12%; right: 14%; }
.vhps-spark--two { bottom: 13%; left: 18%; font-size: 19px; animation-delay: -3s; }
.vhps-studio.is-idle [data-promo-visual] * { animation-play-state: paused; }
@keyframes vhps-canvas { 0%, 100% { transform: translateY(0) rotateX(-6deg) rotateY(-22deg) rotateZ(5deg); } 50% { transform: translateY(-12px) rotateX(6deg) rotateY(12deg) rotateZ(1deg); } }
@keyframes vhps-photo { 0%, 100% { transform: translateY(-4%) rotate(-12deg); } 50% { transform: translateY(4%) rotate(-8deg); } }
@keyframes vhps-trail { to { stroke-dashoffset: -168; } }
@keyframes vhps-spark { 0%, 100% { transform: scale(.85) rotate(-8deg); opacity: .55; } 50% { transform: scale(1.1) rotate(10deg); opacity: 1; } }
@media (min-width: 1024px) {
  .vh-product-services .vhb-banner, .vhps-studio { min-height: 0; }
  .vh-product-services .vhb-grid, .vhps-studio { grid-template-columns: 1fr; grid-template-rows: 1fr 240px; height: 100%; }
  .vh-product-services .vhb-copy, .vhps-copy { padding: 26px 24px 18px; }
  .vh-product-services .vhb-kicker, .vhps-kicker { margin-bottom: 14px; font-size: 12px; }
  .vh-product-services .vhb-title, .vhps-title { font-size: clamp(25px, 7.6cqw, 34px); min-height: 3.21em; }
  .vh-product-services .vhb-description, .vhps-description { margin-top: 14px; min-height: 4.65em; font-size: 14px; line-height: 1.55; }
  .vh-product-services .vhb-kit { margin-top: 16px; }
  .vh-product-services .vhb-bottom { margin-top: 14px; }
  .vh-product-services .vhb-progress { margin-top: 12px; }
  .vh-product-services .vhb-banner::before { background: linear-gradient(180deg, var(--vh-cream) 0 calc(100% - 240px), var(--vh-linen) calc(100% - 240px)); }
  .vh-product-services .vhb-banner::after { top: auto; bottom: 20px; }
  .vh-product-services .vhb-visual { min-height: 240px; }
  .vh-product-services .vhb-strip-pair { transform: translate(-50%, -50%) scale(.62); }
  .vh-product-services .vhb-fact-one { top: 12%; right: 7%; }
  .vh-product-services .vhb-fact-two { bottom: 17%; left: 5%; }
  .vhps-visual { width: 280px; max-width: 100%; height: 240px; margin-inline: auto; }
  .vhps-canvas { width: 126px; left: 46%; top: 7%; }
  .vhps-photo { width: 85px; left: 9%; top: 34%; }
  .vhps-trail { width: 100%; height: 100%; top: 0; left: 0; }
  .vhps-art-label { bottom: 3%; left: 27%; }
  .vhps-spark--one { top: 3%; right: 7%; }
  .vhps-spark--two { bottom: 12%; left: 10%; }
}
@media (max-width: 1023px) { .vh-product-services { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 600px) {
  .vh-product-services-section { padding-top: 24px; }
  .vh-product-services .vhb-grid, .vhps-studio { grid-template-columns: 1fr; grid-template-rows: auto 260px; }
  .vh-product-services .vhb-banner, .vhps-studio { min-height: 0; }
  .vh-product-services .vhb-copy, .vhps-copy { padding: 26px 24px 10px; }
  .vh-product-services .vhb-title, .vhps-title { font-size: clamp(28px, 8cqw, 38px); min-height: 0; }
  .vh-product-services .vhb-description { min-height: 0; }
  .vh-product-services .vhb-kicker, .vhps-kicker { margin-bottom: 20px; }
  .vh-product-services .vhb-banner::before { background: linear-gradient(180deg, var(--vh-cream) 0 calc(100% - 260px), var(--vh-linen) calc(100% - 260px)); }
  .vh-product-services .vhb-visual { min-height: 260px; }
  .vh-product-services .vhb-strip-pair { transform: translate(-50%, -50%) scale(.68); }
  .vh-product-services .vhb-fact-one { top: 12%; right: 8%; }
  .vh-product-services .vhb-fact-two { bottom: 17%; left: 6%; }
  .vhps-cta { margin-top: 0; }
  .vhps-visual { width: 280px; max-width: 100%; height: 260px; margin-inline: auto; }
  .vhps-canvas { width: 122px; left: 46%; top: 10%; }
  .vhps-photo { width: 85px; left: 9%; top: 36%; }
  .vhps-trail { width: 100%; height: 100%; top: 0; left: 0; }
  .vhps-art-label { bottom: 4%; left: 27%; }
  .vhps-spark--one { top: 5%; right: 7%; }
  .vhps-spark--two { bottom: 12%; left: 10%; }
}
@media (prefers-reduced-motion: reduce) {
  .vhps-studio [data-promo-visual] * { animation: none !important; }
  .vhps-cta .vhps-cta-icon, .vhps-cta .vhps-cta-glint { animation: none !important; transition: none !important; transform: none !important; }
}

/* Full-card native links; existing controls retain their own hit targets. */
.vh-product-services .vh-service-card-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.vh-product-services .has-card-link .vhps-copy,
.vh-product-services .has-card-link .vhb-copy { z-index: 4; pointer-events: none; }
.vh-product-services .has-card-link .vhps-copy :is(a, button),
.vh-product-services .has-card-link .vhb-copy :is(a, button) { pointer-events: auto; }
.vh-product-services .has-card-link :is(.vhb-visual, .vhps-visual, .vhpv-visual) { z-index: 0; }
.vh-product-services .has-card-link:focus-within { outline: 2px solid var(--vh-espresso, #2c2825); outline-offset: 4px; }
