.bridge-story { background: #faf7f3; scroll-margin-top: var(--header-height); }
.bridge-sticky { position: relative; padding-block: 72px; }
.bridge-layout { display: grid; grid-template-columns: .9fr 1.65fr; gap: 35px 40px; align-items: center; }
.bridge-copy { min-width: 0; }
.bridge-copy h2 { font-size: clamp(2.5rem, 3.8vw, 3.8rem); }
.bridge-copy .body-copy { font-size: 1rem; margin-top: 24px; max-width: 360px; }
.bridge-scroll-hint { display: none; font-size: .83rem; color: #5c6872; margin-top: 24px; }
.bridge-scroll-hint span { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid #c8d0d4; border-radius: 50%; margin-right: 8px; }
.bridge-skip { margin-top: 18px; font-size: .83rem; min-height: 44px; }
.bridge-visual { min-width: 0; }
.bridge-scene { display: block; width: 100%; height: auto; max-width: 100%; overflow: hidden; }
.bridge-current { display: flex; gap: 20px; align-items: start; border-top: 1px solid #d6dde1; padding: 20px 12px 0; min-height: 100px; }
.bridge-current-number { color: #b33e38; font-size: .8rem; font-weight: 600; padding-top: 4px; white-space: nowrap; }
.bridge-current h3 { font-size: 1.35rem; letter-spacing: -.02em; }
.bridge-phase-copy { font-size: .91rem; color: #5c6872; margin-top: 7px; }
.bridge-controls { display: none; grid-column: 1 / -1; }
.bridge-story[data-controls-ready=true] .bridge-controls { display: block; }
.bridge-story[data-controls-ready=true] .bridge-static-note { display: none; }
.bridge-story[data-scroll-ready=true] { height: 340svh; }
.bridge-story[data-scroll-ready=true] .bridge-sticky { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); padding-block: 34px; }
.bridge-story[data-scroll-ready=true] .bridge-layout { height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
.bridge-story[data-scroll-ready=true] .bridge-scroll-hint { display: block; }
.bridge-phase-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #c8d0d4; }
.bridge-phase-nav button { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 15px 12px; color: #102d42; text-align: left; font-size: .9rem; min-height: 50px; }
.bridge-phase-nav button span { display: inline-block; color: #5c6872; font-size: .74rem; margin-right: 12px; }
.bridge-phase-nav button:hover { background: #f5e9e5; }
.bridge-phase-nav button[aria-pressed=true] { border-bottom-color: #b33e38; color: #102d42; background: #f5e9e5; font-weight: 650; }
.bridge-range-row { display: flex; align-items: center; gap: 16px; padding-top: 17px; color: #5c6872; font-size: .8rem; }
.bridge-range-row input { flex: 1; padding: 0; min-height: 32px; height: 32px; border: 0; background: none; accent-color: #b33e38; cursor: pointer; }
.bridge-range-row output { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.bridge-note, .bridge-static-note { font-size: .75rem; color: #5c6872; margin-top: 8px; }
.bridge-static-note { grid-column: 1 / -1; }
@media (max-width: 1150px) {
  .bridge-layout { grid-template-columns: .9fr 1.5fr; gap: 24px; }
  .bridge-copy h2 { font-size: 2.9rem; }
  .bridge-phase-nav button { padding-inline: 10px; }
}
@media (max-width: 900px) {
  .bridge-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bridge-copy h2 { font-size: 2.5rem; }
  .bridge-copy h2 br { display: none; }
  .bridge-copy .eyebrow { margin-bottom: 12px; }
  .bridge-copy .body-copy { margin-top: 16px; max-width: 680px; }
  .bridge-scroll-hint { margin-top: 12px; }
  .bridge-skip { margin-top: 0; }
  .bridge-story[data-scroll-ready=true] .bridge-layout { grid-template-rows: auto minmax(0, 1fr) auto; }
  .bridge-story[data-scroll-ready=true] .bridge-sticky { padding-block: 24px; }
  .bridge-visual { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  .bridge-scene { max-height: 31svh; }
  .bridge-current { min-height: 74px; padding-top: 14px; }
  .bridge-phase-nav button { font-size: .78rem; padding: 10px 5px; }
  .bridge-phase-nav button span { display: block; margin: 0 0 4px; font-size: .65rem; }
  .bridge-note { font-size: .7rem; }
  .bridge-range-row { padding-top: 9px; }
}
@media (max-width: 640px) {
  .bridge-story[data-scroll-ready=true] { height: 310svh; }
  .bridge-story[data-scroll-ready=true] .bridge-sticky { padding-block: 18px; }
  .bridge-layout { gap: 12px; }
  .bridge-copy h2 { font-size: 2.15rem; }
  .bridge-copy .eyebrow { font-size: .65rem; margin-bottom: 10px; }
  .bridge-copy .body-copy { font-size: .91rem; line-height: 1.6; margin-top: 10px; }
  .bridge-story[data-scroll-ready=true] .bridge-scroll-hint { display: none; }
  .bridge-skip { margin-top: 8px; font-size: .75rem; min-height: 32px; }
  .bridge-current { padding: 10px 0 0; gap: 14px; min-height: 76px; }
  .bridge-current h3 { font-size: 1.13rem; }
  .bridge-current-number { font-size: .66rem; }
  .bridge-phase-copy { font-size: .8rem; line-height: 1.5; margin-top: 4px; }
  .bridge-phase-nav button { font-size: .72rem; padding-inline: 2px; }
  .bridge-note { font-size: .65rem; line-height: 1.45; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .bridge-story[data-scroll-ready=true] .bridge-sticky { padding-block: 20px; }
  .bridge-copy h2 { font-size: 2.6rem; }
  .bridge-copy .body-copy { margin-top: 16px; }
  .bridge-scene { max-height: 43svh; }
  .bridge-current { min-height: 78px; padding-top: 12px; }
}
@media (max-height: 740px) and (max-width: 900px) {
  .bridge-copy h2 { font-size: 1.8rem; }
  .bridge-copy .body-copy { font-size: .85rem; margin-top: 8px; }
  .bridge-copy .eyebrow { margin-bottom: 8px; }
  .bridge-skip { margin-top: 0; }
  .bridge-scene { max-height: 26svh; }
  .bridge-phase-nav button { min-height: 44px; padding-block: 7px; }
}

.bridge-phase-nav button{cursor:pointer;font-family:inherit}.bridge-copy .body-copy{color:var(--muted)}

.bridge-range-row input{min-width:0;width:0}.bridge-controls,.bridge-layout{min-width:0;max-width:100%}