/* Service 03: separate workspaces become one connected view. */
.services-page #bridget { display: block; }
.services-page #bridget > .product-detail-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.services-page #bridget > .product-detail-copy > * { grid-area: auto; }
.bridge-story { --bridge-header: 104px; --bridge-navy: #172348; --bridge-line: #247b74; color: var(--bridge-navy); padding-bottom: 40px; }
.bridge-story *, .bridge-story *::before, .bridge-story *::after { box-sizing: border-box; }
.bridge-story .bridge-stage { padding-top: 24px; }
.services-page #bridget .bridge-title { margin: 0 0 24px; font-size: clamp(24px,2.5vw,36px); line-height: 1.15; letter-spacing: -.035em; }
.bridge-story .bridge-scene { position: relative; height: 630px; border-radius: 20px; overflow: hidden; isolation: isolate; background: #f3f6f6; container-type: inline-size; }
.bridge-story .bridge-photo { position: relative; width: 92%; height: calc(58% - 56px); margin: 28px auto 28px; }
.bridge-story .bridge-window { position: absolute; inset: 0 auto 0 0; width: 33.3334%; overflow: hidden; }
.bridge-story .bridge-window:first-child { border-radius: 12px 0 0 12px; }
.bridge-story .bridge-window:nth-child(2) { left: 33.3333%; }
.bridge-story .bridge-window:nth-child(3) { left: 66.6666%; border-radius: 0 12px 12px 0; }
.bridge-story .bridge-window picture { position: absolute; left: 0; width: 300%; height: 100%; }
.bridge-story .bridge-window:nth-child(2) picture { left: -100%; }
.bridge-story .bridge-window:nth-child(3) picture { left: -200%; }
.bridge-story .bridge-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform-origin: 50% 0%; }
.bridge-story .bridge-scan { position: absolute; inset: 0 auto 0 0; width: 2px; background: #d7fff2; opacity: 0; pointer-events: none; }
.bridge-story .bridge-rail { position: relative; height: 42%; color: var(--bridge-navy); }
.bridge-story .bridge-routes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bridge-story .bridge-route-base { stroke: #cbd9da; }
.bridge-story .bridge-routes path { fill: none; stroke-width: 1.6; }
.bridge-story .bridge-route { stroke: var(--bridge-line); stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; }
.bridge-story .bridge-stations { list-style: none; padding: 0; margin: 0; }
.bridge-story .bridge-station { position: absolute; top: 22px; width: 26%; text-align: center; }
.bridge-story .bridge-station:nth-child(1) { left: 1%; }
.bridge-story .bridge-station:nth-child(2) { left: 37%; }
.bridge-story .bridge-station:nth-child(3) { left: 73%; }
.bridge-story .bridge-station strong { color: var(--bridge-navy); display: block; font-size: clamp(15px,1.6cqw,19px); line-height: 1.2; }
.bridge-story .bridge-station span { display: block; color: #306e68; font-size: 12px; line-height: 1.5; margin-top: 5px; }
.bridge-story .bridge-packet { position: absolute; z-index: 3; left: 3%; top: calc(50% - 36px); width: 22%; height: 72px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: var(--bridge-navy); color: #fff; box-shadow: 0 12px 24px #1723481c; }
.bridge-story .bridge-packet svg { width: 24px; height: 28px; flex-shrink: 0; stroke: #96e2d4; fill: none; stroke-width: 1.6; }
.bridge-story .bridge-packet strong { display: block; color: #fff; font-size: 16px; line-height: 1.3; }
.bridge-story .bridge-packet small { display: block; color: #cbd9e5; font-size: 11px; line-height: 1.3; margin-top: 4px; }
.bridge-story .bridge-review { position: absolute; z-index: 2; left: 32%; width: 36%; bottom: 12px; min-height: 40px; text-align: center; }
.bridge-story .bridge-review small { display: block; font-size: 11px; line-height: 1.4; color: #61717a; }
.bridge-story .bridge-review strong { display: block; color: var(--bridge-navy); font-size: 13px; line-height: 1.4; margin-top: 3px; }
.bridge-story .bridge-caption { display: flex; justify-content: space-between; gap: 20px; padding-top: 14px; color: #606779; font-size: 11px; line-height: 1.5; }
.bridge-story.is-active .bridge-track { height: 220svh; }
.bridge-story.is-active .bridge-stage { position: sticky; top: var(--bridge-header); height: calc(100svh - var(--bridge-header)); display: flex; flex-direction: column; }
.bridge-story.is-active .bridge-title { flex: 0 0 auto; }
.bridge-story.is-active .bridge-scene { flex: 1; height: auto; min-height: 0; }
.bridge-story.is-active .bridge-caption { flex: 0 0 auto; padding-bottom: 14px; }
.bridge-story:not(.is-active) .bridge-packet { left: 75%; }
.bridge-story.is-photo-unavailable .bridge-photo { background: #e5ebec; border-radius: 12px; }
.bridge-story.is-photo-unavailable .bridge-photo img { visibility: hidden; }
@media(max-width:959px) {
 .services-page #bridget > .product-detail-copy { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
 .bridge-story .bridge-stage { padding-top: 0; }
 .bridge-story .bridge-scene { height: auto; }
 .bridge-story .bridge-photo { width: calc(100% - 32px); height: auto; aspect-ratio: 3/2; margin: 16px auto 0; }
 .bridge-story .bridge-rail { height: auto; padding: 24px; }
 .bridge-story .bridge-routes { display: none; }
 .bridge-story:not(.is-active) .bridge-packet { position: relative; inset: auto; width: 100%; height: 72px; }
 .bridge-story .bridge-stations { position: relative; display: grid; gap: 28px; margin: 28px 0; padding-left: 24px; }
 .bridge-story .bridge-stations::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 20px; width: 1px; background: #247b74; }
 .bridge-story .bridge-station { position: relative; inset: auto; width: auto; text-align: left; }
 .bridge-story .bridge-station:nth-child(n) { left: auto; }
 .bridge-story .bridge-station::before { content: ''; position: absolute; top: 6px; left: -23px; width: 9px; height: 9px; border: 2px solid #f3f6f6; background: #247b74; border-radius: 50%; }
 .bridge-story .bridge-station strong { font-size: 17px; }
 .bridge-story .bridge-station span { font-size: 12px; }
 .bridge-story .bridge-review { position: relative; inset: auto; width: 100%; text-align: left; padding-left: 24px; }
 .bridge-story .bridge-review strong { font-size: 14px; }
 .bridge-story .bridge-caption { flex-direction: column; gap: 2px; }
 .bridge-story.is-mobile-motion .bridge-stations::before { background: #cbd9da; }
 .bridge-story.is-mobile-motion .bridge-stations::after { content: ''; position: absolute; left: 5px; top: 8px; bottom: 20px; width: 1px; background: var(--bridge-line); transform-origin: top; transform: scaleY(var(--bridge-progress, 0)); }
}