/* Pinned to the viewport edge (not the section), so only the pinned scene's
   own nav shows its dots at once — see section-scroll.js's is-visible toggle. */
.scene-progress { position:fixed; z-index:5; left:20px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:0px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 200ms ease; }
.scene-progress.is-visible { opacity:1; visibility:visible; pointer-events:auto; }
.scene-progress button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; background:transparent; cursor:pointer; }
.scene-progress button::before { content:''; width:6.4px; height:6.4px; border-radius:50%; background:#d9dee2; transition:background 240ms ease, width 240ms ease, height 240ms ease; }
.scene-progress button[aria-current="step"]::before { width:11.2px; height:11.2px; background:#1a2128; }
.scene-progress button:hover::before { background:#505c66; }
.scene-progress button:focus-visible { outline:2px solid #00afff; outline-offset:2px; }
@media(max-width:900px) {
  .standards__layout > .scene-progress { position:static; grid-area:4 / 1; justify-self:center; }
}
@media(max-width:900px) and (max-height:600px) and (min-aspect-ratio:4/3) { .standards__layout > .scene-progress { position:absolute; left:0; bottom:-32px; } }
@media(prefers-reduced-motion:reduce) { .scene-progress button::before { transition:none; } }

/* Natural flow for viewports too short to show the entire pinned composition. */
.is-scroll-free .scene-progress { display:none; }
.care.is-scroll-free .care__track,.standards.is-scroll-free .standards__track { height:auto; }
.care.is-scroll-free .care__sticky,.standards.is-scroll-free .standards__sticky { position:static; min-height:0; }
.care.is-scroll-free .care__copy { display:block; }
.care.is-scroll-free .care__panel { opacity:1; visibility:visible; transform:none; }
.care.is-scroll-free .care__panel + .care__panel { margin-top:40px; }
.standards.is-scroll-free .standards__layout { display:block; }
.standards.is-scroll-free h2 { margin-bottom:40px; }
.standards.is-scroll-free .standards__story { display:grid; }
.standards.is-scroll-free .standards__story + .standards__story { margin-top:64px; }
.standards.is-scroll-free .standards__copy,.standards.is-scroll-free .standards__visual { grid-area:auto; opacity:1!important; visibility:visible; transform:none; }
/* Mobile: image → centered steps → copy, with the same spacing in both sections. */
@media (max-width:900px) and (min-height:601px), (max-width:900px) and (max-aspect-ratio:4/3) {
  .care__layout { row-gap:32px; }
  .care.is-enhanced .care__copy { grid-template-rows:32px auto; row-gap:24px; }
  .care__copy > .scene-progress { justify-self:center; margin:0; transform:none; }
  .care { --care-room:max(100px, calc(100svh - var(--header-height) - var(--care-heading-height,47px) - var(--care-copy-height,248px) - 112px)); }
  .standards { --standards-room:max(120px, calc(100svh - var(--header-height) - var(--standards-text-height,250px) - 168px)); }
  .standards.is-enhanced .standards__layout { grid-template-rows:auto auto auto auto; row-gap:0; }
  .standards.is-enhanced h2 { margin-bottom:40px; }
  .standards__layout > .scene-progress { position:static; grid-area:3 / 1; justify-self:center; margin:32px 0 24px; }
  .standards.is-enhanced .standards__copy { grid-area:4 / 1; }
  .standards.is-scroll-free .standards__story { gap:40px; }
  .standards.is-scroll-free .standards__copy { grid-area:auto; }
}