/* Scroll scenes for service and city pages (fw-scenes.js). Loaded after fw-site.css. */

/* 1. hero video: behind the navy wash, over the photo, only once a clip exists */
body.fw-inner .hero { position: relative; isolation: isolate; }
body.fw-inner .hero .hero-slot { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
body.fw-inner .hero .hero-slot:not(.has-video) { display: none; }
body.fw-inner .hero .hero-slot video { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
body.fw-inner .hero > .wrap { position: relative; z-index: 1; }
@media (max-width: 820px) { body.fw-inner .hero.has-photo .hero-slot { inset: 0 0 auto 0; height: var(--band, 210px); } body.fw-inner .hero.has-photo .hero-slot video { opacity: 1; } }

/* 2. job story: pinned, one photo at a time */
body.fw-inner .story { position: relative; height: calc(var(--n, 4) * 60vh + 100vh); margin: 40px 0; width: 100vw; left: 50%; margin-left: -50vw; }
body.fw-inner .story-stage { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); overflow: hidden; background: var(--ink); color: #fff; }
body.fw-inner .story-frames, body.fw-inner .story-media { position: absolute; inset: 0; }
body.fw-inner .story-media:not(.has-video) { display: none; }
body.fw-inner .story-media video { width: 100%; height: 100%; object-fit: cover; }
body.fw-inner .story.has-video .story-frames { display: none; }
body.fw-inner .story-frame { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
body.fw-inner .story-frame.on { opacity: 1; transform: scale(1); }
body.fw-inner .story-frame.past { transform: scale(.98); }
body.fw-inner .story-frame img { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0 !important; }
body.fw-inner .story-frame figcaption { display: none; }
body.fw-inner .story-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(11,30,53,.92) 0%, rgba(11,30,53,.35) 42%, rgba(11,30,53,0) 70%); }
body.fw-inner .story-copy { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: clamp(24px, 6vh, 56px); max-width: 640px; display: grid; gap: 10px; }
body.fw-inner .story-tag { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-dark); }
body.fw-inner .story-tag::before { content: ""; width: 28px; height: 1px; background: currentColor; }
body.fw-inner .story-title { margin: 0; font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
body.fw-inner .story-cap { margin: 0; min-height: 1.5em; font-size: 17px; color: #dbe5f2; }
body.fw-inner .story-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: #fff; font-variant-numeric: tabular-nums; }
body.fw-inner .story-bar { flex: 1; max-width: 220px; height: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
body.fw-inner .story-bar i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
body.fw-inner .prose .story { margin-top: 40px; margin-bottom: 40px; }

/* 3. statement */
body.fw-inner .fw-stmt { background: var(--ink); padding: clamp(72px, 12vw, 160px) var(--pad); overflow: hidden; }
body.fw-inner .fw-stmt-text { margin: 0 auto; max-width: 1240px; display: grid; gap: .1em; font-size: clamp(44px, 9vw, 128px); font-weight: 900; font-style: italic; line-height: .95; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; }
body.fw-inner .fw-stmt-text span { display: block; transform: translateX(calc((1 - var(--p, 1)) * -12%)); opacity: calc(.15 + var(--p, 1) * .85); }
body.fw-inner .fw-stmt-text span + span { transform: translateX(calc((1 - var(--p, 1)) * 12%)); text-align: right; color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) { body.fw-inner .fw-stmt-text span { transform: none !important; opacity: 1 !important; } body.fw-inner .story-frame { transition: none; } }
@media (max-width: 759px) { body.fw-inner .story-copy { bottom: calc(var(--mbar) + 20px); } body.fw-inner .story-cap { font-size: 15px; } }