/* Shared miniature advertising screens. Text and layout outside each scene stay intact. */
.page-index #start-small .poster-artwork.ad-screen,
.page-index #why .why-art.ad-screen,
.page-about #about-beliefs .why-art.ad-screen{height:auto;aspect-ratio:16/9;background:#081728;border:1px solid #345049;border-radius:12px;overflow:hidden}
.page-index #start-small .poster-artwork.ad-screen>svg,
.page-index #why .why-art.ad-screen>svg,
.page-about #about-beliefs .why-art.ad-screen>svg{display:block;width:100%;height:100%;font-family:inherit}
.ad-screen .ad-action{transform-origin:160px 85px}
.ad-screen .ad-caption text{fill:#fff!important;font-size:10px!important}
/* Preserve the original miniature interfaces on a luminous scene layer. */
.ad-screen .ad-action svg{overflow:visible}
.page-index #how-we-help .ad-route{background:radial-gradient(ellipse at 100% 0,#123d39,transparent 75%),#081728;border:1px solid #345049;box-shadow:none;overflow:hidden}
.page-index #how-we-help .ad-route .route-label strong{color:#eff8f3}
.page-index #how-we-help .ad-route .route-label svg{color:#62dcae}
.page-index #how-we-help .ad-route .route-node{background:#102c2a}
.page-index #how-we-help .ad-route .route-spine{background:#466e5d}
@keyframes ad-scene{0%{opacity:.35;transform:translateY(7px) scale(.96)}16%,85%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:.35;transform:translateY(-4px) scale(.98)}}
@keyframes ad-caption{0%,24%{opacity:0;transform:translateX(-7px)}40%,88%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(4px)}}
@keyframes ad-route-label{0%,100%{opacity:.65;transform:translateX(-2px)}25%,80%{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:no-preference){.ad-screen.is-active .ad-action{animation:ad-scene 9s ease-in-out infinite}.ad-screen.is-active .ad-caption{animation:ad-caption 9s ease-in-out infinite}.ad-route.is-active .route-label{animation:ad-route-label 7s ease-in-out infinite}.ad-route .stop-2 .route-label{animation-delay:-1s}.ad-route .stop-3 .route-label{animation-delay:-2s}.ad-route .stop-4 .route-label{animation-delay:-3s}}
@media(max-width:950px){.page-index #start-small .home-poster:last-child .poster-artwork.ad-screen{height:auto}}
@media(max-width:600px){.page-index #start-small .poster-artwork.ad-screen,.page-index #why .why-art.ad-screen,.page-about #about-beliefs .why-art.ad-screen{border-radius:9px}.ad-route.is-active .route-label{animation:none}}
@media(prefers-reduced-motion:reduce){.ad-screen *,.ad-route *{animation:none!important}}
html.motion-paused .ad-screen *,html.motion-paused .ad-route *{animation:none!important}
.page-grow-rewards .gr-benefit-demo.ad-screen{height:auto;aspect-ratio:16/9;border-radius:12px;background:#081728;overflow:hidden}
@media(prefers-reduced-motion:no-preference){.ad-screen.in-view .ad-action{animation:ad-scene 9s ease-in-out infinite}.ad-screen.in-view .ad-caption{animation:ad-caption 9s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){.ad-screen *{animation:none!important}}
html.motion-paused .ad-screen *{animation:none!important}

/* v2.4.4 — How we help: lighter cards, navy kept only in the illustration panel */
.page-index #how-we-help .service-motion{background:#fff;border-color:#dce5df;color:#101d2f;box-shadow:0 18px 40px -34px #08172855}
.page-index #how-we-help .service-motion h3{color:#101d2f}
.page-index #how-we-help .service-motion p{color:#55657a}
.page-index #how-we-help .service-motion a{color:#187353!important}
.page-index #how-we-help .service-motion .step-number{color:#187353;border-color:#dce5df;background:#f3f7f5}

/* v2.4.5 — Why GrowBahrain: smaller, lighter cards (navy kept only in the small screen) */
.page-index #why .three-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1080px}
.page-index #why .why-motion{background:#fff!important;border:1px solid #dce5df!important;border-radius:16px!important;padding:16px!important;box-shadow:0 14px 30px -28px #08172855!important;color:#101d2f}
.page-index #why .why-art.ad-screen{height:auto!important;aspect-ratio:16/8!important;max-height:150px;margin:0 0 14px!important;border-radius:10px!important}
.page-index #why .why-art.ad-screen>svg{width:100%!important;height:100%!important}
.page-index #why .why-motion h3{color:#101d2f!important;font-size:1.08rem!important;line-height:1.25;margin:0 0 6px!important}
.page-index #why .why-motion p{color:#55657a!important;font-size:.86rem!important;line-height:1.55;margin:0}
@media(max-width:950px){.page-index #why .three-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.page-index #why .three-grid{grid-template-columns:1fr 1fr;gap:10px}.page-index #why .why-motion{padding:10px!important;border-radius:12px!important}.page-index #why .why-art.ad-screen{max-height:96px;margin-bottom:8px!important}.page-index #why .why-motion h3{font-size:.92rem!important}.page-index #why .why-motion p{font-size:.78rem!important}}
.page-index #why .three-grid{max-width:none}
.page-index #why .why-art.ad-screen{aspect-ratio:2.3/1!important;max-height:none!important;width:100%}
@media(max-width:600px){.page-index #why .why-art.ad-screen{aspect-ratio:2/1!important}}