/* Native capability demonstrations. This file is scoped to #services only. */
.home-review #services { --scene-ink: #141414; --scene-muted: #777; --scene-line: #d8d8d8; --scene-blue: #1024ff; }
#services .capability-layout { gap: 1.25rem; align-items: stretch; }
#services .service-story { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: clamp(1.5rem, 2.4vw, 2.25rem); overflow: hidden; background: #fafafa; container-type: inline-size; }
#services .service-story .capability-copy { width: 100%; flex: 0 0 auto; }
#services .service-story h3 { max-width: 27rem; margin-bottom: .85rem; font-size: clamp(1.45rem, 2.15vw, 1.85rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
#services .service-story p { max-width: 35rem; font-size: 1rem; line-height: 1.5; }
#services .service-story .capability-visual { display: block; order: 1; height: auto; width: 100%; aspect-ratio: auto; margin-top: 1.8rem; flex: 1 0 17rem; pointer-events: none; }
#services .service-story:focus-visible { outline: 2px solid var(--scene-blue); outline-offset: 5px; }
#services .service-story::selection, #services .service-story *::selection { background: var(--scene-ink); color: white; }
.service-scene { position: relative; width: 100%; height: 100%; min-height: 17rem; color: var(--scene-ink); isolation: isolate; }
.scene-stage { position: absolute; width: 100%; height: 100%; inset: 0; display: grid; place-items: center; }
.scene-stage svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene-stage .route { fill: none; stroke: var(--scene-line); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.scene-stage .signal { fill: none; stroke: var(--scene-ink); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 16 160; stroke-dashoffset: 176; }
.scene-stage .signal-blue { stroke: var(--scene-blue); }
.scene-stage .scene-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scene-stage .symbol { fill: var(--scene-ink); }
.scene-stage .symbol-light { fill: white; }
.scene-stage text { font-family: inherit; font-weight: 400; letter-spacing: -.3px; }
.scene-unit { transform-box: fill-box; transform-origin: center; }
.service-story .scene-motion { animation-play-state: paused !important; }
.service-story.scene-playing .scene-motion { animation-play-state: running !important; }

/* A modular resource hub, its accessible tools and a companion narrow screen. */
.platform-stage { width: 92%; left: 4%; }
.hub-window { width: calc(100% - max(22%, 5rem) - 1rem); justify-self: start; background: white; border-radius: 12px; padding: 1rem; box-shadow: 0 12px 32px -14px rgb(0 0 0 / .2); position: relative; transform: translate(-5%, -2%); }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.hub-wordmark { font-size: 1.2rem; line-height: 1; letter-spacing: -.035em; }
.hub-menu { display: flex; gap: .35rem; }
.hub-menu i { display: block; height: 3px; width: 1.5rem; background: #ddd; border-radius: 3px; }
.hub-hero { display: grid; grid-template-columns: 1fr 3.25rem; gap: 1rem; align-items: center; background: var(--scene-ink); color: white; padding: 1.15rem; border-radius: 7px; }
.hub-hero strong { font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.1; font-weight: 400; letter-spacing: -.02em; }
.hub-hero svg { width: 3rem; height: 3rem; }
.hub-lines { display: grid; gap: .4rem; margin-top: .75rem; }
.hub-lines i { width: 65%; height: 3px; background: #727272; border-radius: 3px; }
.hub-lines i:last-child { width: 45%; }
.hub-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .7rem; }
.hub-module { min-width: 0; border: 1px solid #e9e9e9; border-radius: 7px; padding: .8rem .5rem; }
.hub-module svg { width: 1.4rem; height: 1.4rem; margin: 0 0 .7rem; }
.hub-module span { display: block; font-size: .7rem; letter-spacing: -.01em; white-space: nowrap; }
.hub-mobile { position: absolute; right: 0; bottom: -4%; width: 22%; min-width: 5rem; padding: .75rem .55rem; background: white; border-radius: 12px; box-shadow: 0 12px 26px -12px rgb(0 0 0 / .22); }
.hub-mobile .hub-wordmark { font-size: .65rem; margin-bottom: .7rem; }
.mobile-content { background: var(--scene-ink); color: white; padding: .75rem .4rem; border-radius: 5px; text-align: center; }
.mobile-content svg { width: 1.5rem; height: 1.5rem; margin-inline: auto; }
.mobile-lines { margin-top: .6rem; display: grid; gap: .4rem; }
.mobile-lines i { height: 1rem; background: #eee; border-radius: 3px; }
.mobile-lines i:last-child { width: 75%; }
.scene-stage .hub-pointer { position: absolute; width: 20px; height: 24px; left: 35%; bottom: 17%; color: var(--scene-ink); }
.platform-loop { animation: platform-assemble 6s cubic-bezier(.16, 1, .3, 1) infinite; }
.module-loop { animation: module-select 6s ease-in-out infinite; }
.module-loop:nth-child(2) { animation-delay: .35s; }
.module-loop:nth-child(3) { animation-delay: .7s; }
.pointer-loop { animation: resource-pointer 6s cubic-bezier(.16, 1, .3, 1) infinite; }

/* One idea expands into multiple channels and meets distinct audiences. */
.campaign-center { transform-box: fill-box; transform-origin: center; }
.audience-loop { animation: audience-respond 6s ease-in-out infinite; animation-delay: var(--phase, 0s); }
.route-loop { animation: carry-message 6s linear infinite; animation-delay: var(--phase, 0s); }
.message-loop { animation: message-send 6s cubic-bezier(.16, 1, .3, 1) infinite; }
.channel-loop { animation: channel-respond 6s ease-in-out infinite; animation-delay: var(--phase, 0s); }

/* Fragmented information resolves into one clear, readable message. */
.fragment-loop { animation: resolve-fragment 6s cubic-bezier(.16, 1, .3, 1) infinite; animation-delay: var(--phase, 0s); }
.clarity-loop { animation: clarity-arrive 6s cubic-bezier(.16, 1, .3, 1) infinite; }
.reply-loop { animation: reply-arrive 6s cubic-bezier(.16, 1, .3, 1) infinite; }
.message-line-loop { animation: message-lines 6s ease-in-out infinite; transform-origin: left; }

/* A shared value becomes a completed action, then reaches people. No invented KPIs. */
.action-loop { animation: value-to-action 6s cubic-bezier(.16, 1, .3, 1) infinite; animation-delay: var(--phase, 0s); }
.check-loop { animation: confirm-action 6s ease-in-out infinite; animation-delay: var(--phase, 0s); stroke-dasharray: 30; }
.result-loop { animation: reach-people 6s cubic-bezier(.16, 1, .3, 1) infinite; animation-delay: var(--phase, 0s); }
.scene-stage .esg-compact { display: none; }

@keyframes platform-assemble { 0%, 100% { transform: translate(-5%, -2%); } 20%, 72% { transform: translate(-5%, -5%); } }
@keyframes module-select { 0%, 12%, 72%, 100% { transform: none; background: white; } 28%, 53% { transform: translateY(-4px); background: #f0f0f0; } }
@keyframes resource-pointer { 0%, 100% { transform: translate(0, 0); } 24%, 34% { transform: translate(-22px, -8px); } 47%, 58% { transform: translate(32px, -8px); } 72%, 79% { transform: translate(78px, -8px); } }
@keyframes audience-respond { 0%, 14%, 73%, 100% { opacity: .7; transform: scale(.97); } 33%, 57% { opacity: 1; transform: scale(1); } }
@keyframes carry-message { 0%, 14% { stroke-dashoffset: 176; opacity: 0; } 18% { opacity: 1; } 59% { stroke-dashoffset: 0; opacity: 1; } 67%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes message-send { 0%, 100% { transform: none; } 16%, 26% { transform: translateY(-4px); } 45%, 76% { transform: none; } }
@keyframes channel-respond { 0%, 17%, 80%, 100% { transform: none; } 34%, 59% { transform: translateY(-3px); } }
@keyframes resolve-fragment { 0%, 12%, 100% { opacity: 1; transform: none; } 34%, 67% { opacity: .4; transform: translate(15px, 7px); } 86% { opacity: 1; transform: none; } }
@keyframes clarity-arrive { 0%, 9%, 100% { transform: translateY(3px); } 34%, 74% { transform: translateY(-4px); } }
@keyframes reply-arrive { 0%, 20%, 100% { transform: translateY(5px); opacity: .7; } 48%, 76% { transform: none; opacity: 1; } }
@keyframes message-lines { 0%, 14%, 100% { transform: scaleX(.82); opacity: .6; } 40%, 74% { transform: scaleX(1); opacity: 1; } }
@keyframes value-to-action { 0%, 12%, 100% { opacity: .75; transform: translateX(-3px); } 29%, 70% { opacity: 1; transform: none; } }
@keyframes confirm-action { 0%, 14%, 100% { stroke-dashoffset: 30; opacity: 0; } 31%, 73% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes reach-people { 0%, 22%, 100% { opacity: .7; transform: translateY(3px); } 48%, 75% { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  #services .service-story .capability-visual { order: 1; margin-top: 1.6rem; flex-basis: 16rem; }
  .service-scene { min-height: 16rem; }
  .hub-window { padding: .8rem; }
  .hub-hero { padding: .85rem; }
  .hub-module { padding: .65rem .4rem; }
  .hub-module span { font-size: .625rem; }
}
@media (max-width: 900px) {
  #services .capability-layout { grid-template-columns: 1fr; }
  #services .service-story { grid-column: 1; }
}
@container (max-width: 430px) {
  .scene-stage .esg-wide { display: none; }
  .scene-stage .esg-compact { display: block; }
}
@container (max-width: 340px) {
  .platform-stage .hub-hero { grid-template-columns: 1fr; }
  .platform-stage .hub-menu { display: none; }
  .hub-hero > svg { display: none; }
  .hub-module span { display: none; }
  .hub-module svg { margin: 0 auto; }
}
@media (max-width: 640px) {
  #services .service-story { padding: 1.5rem; }
  #services .service-story h3 { font-size: 1.5rem; text-wrap: pretty; }
  #services .service-story p { font-size: 1rem; }
  #services .service-story .capability-visual { margin-top: 1.5rem; flex: 0 0 auto; height: 15rem; }
  .service-scene { min-height: 0; }
  .hub-wordmark { font-size: 1rem; }
  .hub-top { margin-bottom: .65rem; }
  .hub-hero { padding: .7rem; gap: .7rem; grid-template-columns: 1fr 2.5rem; }
  .hub-hero strong { font-size: 1.05rem; }
  .hub-hero svg { width: 2.3rem; height: 2.3rem; }
  .hub-module { padding: .6rem .35rem; }
  .hub-module svg { width: 1.1rem; height: 1.1rem; margin-bottom: .5rem; }
  .hub-module span { font-size: .6rem; }
  .hub-mobile { min-width: 4.6rem; bottom: 0; }
  .hub-menu i { width: 1rem; }
  .hub-pointer { left: 33%; bottom: 20%; }
}
@media (max-width: 380px) {
  #services .service-story { padding: 1.2rem; }
  #services .service-story .capability-visual { height: 13rem; }
  .hub-window { padding: .65rem; }
  .hub-hero { padding: .65rem; }
  .hub-hero strong { font-size: .875rem; }
  .hub-modules { gap: .3rem; }
  .hub-module span { font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  #services .service-story .scene-motion { animation: none !important; }
  .scene-stage .signal { stroke-dashoffset: 0; opacity: 0; }
  .check-loop { stroke-dashoffset: 0; opacity: 1; }
}