/* One responsive image language. Text, controls and factual labels stay in HTML. */
.image-story { margin: 0; min-width: 0; align-self: start; }
.image-story-picture { display: block; position: relative; width: 100%; min-width: 0; overflow: hidden; border-radius: 14px; background: #f7f5ef; }
.image-story-picture:not(.image-story-picture--hero) img { display: block; position: static; width: 100%; max-width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: var(--story-ratio); object-fit: contain; }
.image-story figcaption, .image-story-caption { display: block; margin: 10px 0 0; color: #536b78; font: 12px/1.5 var(--font-body, Inter, sans-serif); }
.image-story-layout--active { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(24px,3.5vw,48px); align-items: start; }
.image-story-copy { min-width: 0; }
.image-story-layout--active > .image-story { position: sticky; top: 116px; }
.image-story-copy :is(.construction-anatomy__grid,.setup-handover__grid,.lp-pilot-grid,.ab-doc-grid,.gw-grid,.final-process-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.image-story-copy :is(.method-acceptance__layout,.system-map,.lp-accept,.ab-steps) { grid-template-columns: minmax(0,1fr); }
.image-story-copy .method-acceptance__checks li { grid-template-columns: 36px minmax(0,1fr); }
.image-story-copy .method-acceptance__record { grid-column: 2; }
.image-story-copy .method-acceptance__aside { margin-top: 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.image-story-copy .lp-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.image-story-copy .system-map__detail { min-height: 0; }
.image-story-copy .system-map__steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
.image-story-lead--active { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: center; gap: clamp(24px,4vw,56px); margin-bottom: 32px; }
.image-story-lead--active > :is(.drill-section-head,.lp-section-head,.final-process-head,.ab-head) { display: block; margin: 0; }
.image-story-lead--active > :is(.drill-section-head,.lp-section-head,.final-process-head,.ab-head) > p { margin-top: 18px; max-width: 58ch; }
.image-story-diagnosis > .rp-intro .image-story { margin-top: 24px; }
.image-story-handover > .wl-intro .image-story { margin-top: 24px; }
body main .sv-handover-layout figure:has(.image-story-picture) { margin: 0; min-height: 0 !important; max-height: none !important; align-self: start; }
body main .sv-handover-layout .image-story-picture img { object-fit: contain; height: auto !important; min-height: 0 !important; max-height: none !important; }
.image-story-copy .system-map__step strong { min-width: 0; overflow-wrap: anywhere; }
.site-visual:has(> .image-story-picture) { height: auto; aspect-ratio: 4 / 3; }
.site-visual > .image-story-picture { position: relative; inset: auto; width: 100%; height: auto; }
.access-board-scene:has(.image-story-picture) .image-story-picture { border-radius: 0; }
.depth-visual__media:has(> .image-story-picture) { display: block; height: auto; background: #f7f5ef; }
.depth-visual__media > .image-story-picture { height: auto; border-radius: 0; }
.depth-visual .depth-visual__media > .image-story-picture img { position: static; inset: auto; width: 100%; height: auto; min-height: 0; max-height: none; object-fit: contain; object-position: center; aspect-ratio: var(--story-ratio); }
.depth-visual__media:has(> .image-story-picture) .depth-visual__markers { position: static; width: auto; height: auto; margin: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: none; gap: 6px; }
.depth-visual__media:has(> .image-story-picture) .depth-visual__markers button { min-width: 0; min-height: 64px; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 8px 5px; }
.image-story-picture--hero { position: absolute; inset: 0; border-radius: 0; background: transparent; }
.image-story-picture--hero img { width: 100%; height: 100%; object-fit: cover; }
.ush-hero:has(.image-story-picture--hero) .ush-hero__copy { position: relative; }
@media (min-width:961px) {
  .ush-hero:has(.image-story-picture--hero) .ush-hero__copy { background: rgba(10,33,48,.94); padding: 28px 32px; border-radius: 14px; }
}
@media (max-width:960px) {
  .image-story-layout--active,.image-story-lead--active { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .image-story-layout--active > .image-story { position: static; max-width: 640px; width: 100%; margin: 0 auto; }
  .image-story-lead--active > .image-story { max-width: 640px; width: 100%; margin: 0 auto; }
  .image-story-copy .method-acceptance__aside { grid-template-columns: minmax(0,1fr); }
  .sv-handover-layout figure:has(.image-story-picture) { max-width: 640px; width: 100%; margin-inline: auto; }
  .ush-hero:has(.image-story-picture--hero) { display: flex; flex-direction: column; }
  .ush-hero:has(.image-story-picture--hero)::before { display: none; }
  .ush-hero:has(.image-story-picture--hero) .ush-breadcrumbs { order: 1; }
  .ush-hero:has(.image-story-picture--hero) .ush-hero__inner { order: 2; padding-top: 24px; }
  .image-story-picture--hero { position: relative; inset: auto; order: 3; height: auto; aspect-ratio: var(--story-ratio); background: #f7f5ef; }
  .image-story-picture--hero img { position: static; z-index: auto; object-fit: contain; }
}
@media (max-width:640px) {
  .image-story-picture:not(.image-story-picture--hero) img { aspect-ratio: var(--story-mobile-ratio); }
  .image-story-copy :is(.construction-anatomy__grid,.setup-handover__grid,.lp-pilot-grid,.ab-doc-grid,.gw-grid,.final-process-grid) { grid-template-columns: minmax(0,1fr); }
  .image-story-copy .system-map__steps { grid-template-columns: minmax(0,1fr); }
  .image-story figcaption,.image-story-caption { margin-top: 8px; }
  .depth-visual .depth-visual__media > .image-story-picture img { aspect-ratio: var(--story-mobile-ratio); }
  .depth-visual__media:has(> .image-story-picture) .depth-visual__markers { margin: 8px; }
  .depth-visual__media:has(> .image-story-picture) .depth-visual__markers button { min-height: 88px; }
}
@media (max-width:480px) {
  .image-story-picture--hero { aspect-ratio: var(--story-mobile-ratio); }
}