/* Home page "story" layout: the product-journey frames run behind the whole page (fixed stage) as the visitor scrolls,
 * every content section sits on a dark translucent panel, and the seven narrative lines appear as full-screen breaks.
 * Loaded only on the home page (views/index.ejs); not part of the CSS bundle. */
body.story-home { background: #0b1220; }
.story-stage { position: fixed; inset: 0; z-index: 0; background: #0b1220; overflow: hidden; }
.story-stage__poster, .story-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.story-stage canvas { opacity: 0; transition: opacity .5s; }
.story-home.is-ready .story-stage canvas { opacity: 1; }
.story-home.is-ready .story-stage__poster { opacity: 0; transition: opacity .5s .3s; }
.story-stage__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 18, 45, .45) 0%, rgba(4, 18, 45, .22) 40%, rgba(4, 18, 45, .55) 100%); pointer-events: none; }

/* everything else floats above the stage, transparent */
.story-home .page-wrapper { position: relative; z-index: 1; background: transparent; }
.story-home .main-header { z-index: 20; }

/* narrative breaks */
.story-break { position: relative; min-height: 78vh; min-height: 78svh; display: flex; align-items: flex-end; padding: 0 0 clamp(36px, 8vh, 90px); }
.story-break--intro { min-height: 100vh; min-height: 100svh; }
.story-break__line { margin: 0; color: #fff; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.22; font-weight: 600; max-width: 26ch; padding: 12px 22px 12px 18px; border-left: 3px solid var(--trnspot-base, #2caffd); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, rgba(4, 18, 45, .62), rgba(4, 18, 45, .18)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); text-shadow: 0 2px 18px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s; }
.story-break__intro .tagline { color: var(--trnspot-base, #2caffd); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.story-break__intro h1 { color: #fff; font-size: clamp(36px, 5.6vw, 78px); line-height: 1.02; margin: 0 0 14px; max-width: 14ch; }
.story-break__intro p { color: rgba(255, 255, 255, .86); font-size: clamp(15px, 1.5vw, 19px); max-width: 52ch; margin: 0 0 22px; }
.story-break__intro .story-break__line { margin-top: 26px; }
.story-break__hint { position: absolute; right: 24px; bottom: 26px; color: rgba(255, 255, 255, .75); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; }

/* content sections: transparent section, glass container */
.story-home .brand-one, .story-home .services-one, .story-home .about-one, .story-home .counter-one, .story-home .working-process-one,
.story-home .project-one, .story-home .testimonial-two, .story-home .faq-one, .story-home .home-cta { background: transparent !important; padding-top: 0 !important; padding-bottom: 56px !important; }
.story-home .brand-one__pattern, .story-home .services-one .shape1, .story-home .about-one .shape2, .story-home .working-process-one .shape2,
.story-home .counter-one__bg, .story-home .testimonial-two__pattern, .story-home .about-one__img-box::before { display: none !important; }
.story-home .story-glass > .container, .story-home .project-one__top > .container { background: rgba(4, 18, 45, .76); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; padding: 52px 52px 44px; }
.story-home .project-one > .container-fluid, .story-home .working-process-one > .container-fluid {
    margin-top: 16px; background: rgba(4, 18, 45, .76); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 24px; padding: 44px 20px; max-width: 1320px; margin: 0 auto; }
.story-home .sec-title { padding-bottom: 36px; }
.story-home .story-glass .sec-title__title, .story-home .story-glass .sec-title__tag, .story-home .story-glass .sec-title .text-box p,
.story-home .story-glass .about-one__content-text p, .story-home .story-glass .about-one__content-list li, .story-home .story-glass .about-one__content-list .content-box h3,
.story-home .story-glass .about-one__content-list .content-box p, .story-home .story-glass .about-one__content-list .content-box h4,
.story-home .story-glass .working-process-one__single .content-box h3, .story-home .story-glass .working-process-one__single .content-box p,
.story-home .story-glass .project-one__top .text-box p, .story-home .story-glass .testimonial-two__left p, .story-home .story-glass .testimonial-two__left h3,
.story-home .story-glass .testimonial-two__reviews-content p, .story-home .story-glass .testimonial-two__reviews-content h3,
.story-home .story-glass .faq-one__content .text-box p, .story-home .story-glass .counter-one__single-content p { color: #fff; }
.story-home .story-glass .about-one__content-text p, .story-home .story-glass .working-process-one__single .content-box p,
.story-home .story-glass .about-one__content-list .content-box p, .story-home .story-glass .sec-title .text-box p,
.story-home .story-glass .project-one__top .text-box p, .story-home .story-glass .faq-one__content .text-box p { color: rgba(255, 255, 255, .8); }
.story-home .story-glass .sec-title__tagline .left-icon span { color: var(--trnspot-base, #2caffd); }
.story-home .brand-one__single-inner { background: #fff; border-radius: 12px; padding: 10px 14px; }
.story-home .working-process-one__single-count-box, .story-home .working-process-one__single-icon-box { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.story-home .about-one__content-list .icon span { color: var(--trnspot-base, #2caffd); }
.story-home .home-cta { padding-bottom: 80px !important; }
.story-home .home-cta__inner { border: 1px solid rgba(255, 255, 255, .1); }
/* the theme's bright section backgrounds that sit inside the containers */
.story-home .story-glass .testimonial-two__left, .story-home .story-glass .faq-one__content { background: transparent; }
.story-home .story-glass .faq-one-accrodion .accrodion { background: #fff; border-radius: 12px; }
.story-home .story-glass .faq-one-accrodion .accrodion-title h3, .story-home .story-glass .faq-one-accrodion .accrodion-title h4 { color: var(--trnspot-black, #01061a); font-size: 23px; font-weight: 500; line-height: 33px; margin: 0; }
.story-home .story-glass .faq-one-accrodion .accrodion.active .accrodion-title h3, .story-home .story-glass .faq-one-accrodion .accrodion.active .accrodion-title h4 { color: var(--trnspot-base, #2caffd); }
.story-home .story-glass .faq-one-accrodion .accrodion-content .inner p { color: var(--trnspot-gray, #606060); }
.story-home .story-glass .faq-one-accrodion .accrodion-title h3::before { color: var(--trnspot-black, #01061a); }
.story-home .story-glass .faq-one-accrodion .accrodion.active .accrodion-title h3::before { color: var(--trnspot-base, #2caffd); }
@media (max-width: 991px) {
    .story-home .story-glass > .container { padding: 34px 20px 28px; border-radius: 18px; }
    .story-break { min-height: 62vh; min-height: 62svh; }
    .story-break__line { font-size: 24px; max-width: 100%; }
    .story-break__intro h1 { max-width: 100%; }
    .story-break__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .story-stage canvas { display: none; } .story-home .story-stage__poster { opacity: 1 !important; } .story-break__line { opacity: 1 !important; } }