/* Iskra: small, contextual appearances; original character canon in docs/brand. */
.iskra-image { display: block; max-width: 100%; height: auto; object-fit: contain; pointer-events: none; }
.iskra-name { margin: 0 0 10px; color: #0052cc; font: 700 14px/1.4 'Noto Sans', sans-serif; }
.iskra-tip { font-family: 'Noto Sans', sans-serif; }
.iskra-tip p { margin: 0; font-size: 16px; line-height: 1.55; }
.iskra-tip strong { font-weight: 700; }

/* The existing story controls still select the three scenes. */
.home-motion-page .poster-process-scene > .iskra-image { inset: 0; width: 100%; height: 100%; transform: none; object-fit: contain; filter: drop-shadow(0 15px 18px #0003); }
.home-motion-page .motion-story.iskra-story .motion-story-art { height: min(510px, 56vh); }
.home-motion-page .iskra-story .poster-process-label { right: 2%; bottom: 5%; font-size: 14px; }
.home-motion-page .iskra-story .poster-process-design .poster-process-label { left: auto; right: 0; }
.home-motion-page.motion-story-ready .iskra-story .motion-story-step { transition-duration: 220ms; }
.home-motion-page.motion-story-ready .iskra-story .poster-process-scene { transition: opacity 220ms, transform 220ms; }
.home-motion-page .iskra-finale { position: absolute; right: 0; bottom: 0; width: 46%; height: 92%; margin: 0; pointer-events: none; }
.home-motion-page .iskra-finale .iskra-image { width: 100%; height: 100%; object-position: center bottom; filter: drop-shadow(0 18px 22px #00246940); }

/* A compact introduction beside the existing possibilities heading. */
.home-motion-page .iskra-intro { display: grid; grid-template-columns: 120px minmax(0,1fr); align-items: center; gap: 18px; max-width: 440px; }
.home-motion-page .iskra-intro .iskra-image { width: 120px; height: 120px; }
.home-motion-page .iskra-intro p { margin: 0; font-size: 16px; line-height: 1.5; }
.home-motion-page .iskra-intro .iskra-name { display: block; margin-bottom: 8px; }

/* Existing catalog helper: image and copy remain separate and readable. */
@media (min-width: 1100px) {
    .print-catalog-intro:has(.iskra-catalog-note) { grid-template-columns: minmax(0,1fr) 400px; }
}
.print-intro-note.iskra-catalog-note { display: grid; grid-template-columns: minmax(0,1fr) 126px; gap: 12px; padding: 22px 18px 12px 26px; align-items: center; }
.iskra-catalog-note .iskra-image { grid-column: 2; grid-row: 1; width: 126px; height: 126px; align-self: end; }
.iskra-catalog-copy { min-width: 0; display: grid; gap: 10px; }
.iskra-catalog-copy > span { font-size: 14px; color: #626b78; }
.print-intro-note .iskra-catalog-copy strong { font-size: 23px; line-height: 1.22; }
.print-intro-note .iskra-catalog-copy a { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; }

/* Contacts: after the form on phones; beside it on wide screens. */
.contact-grid.iskra-contact-grid { row-gap: 20px; }
.iskra-contact-grid > .page-heading { margin-bottom: 0; }
.iskra-contact-grid > .form-panel { grid-column: 2; grid-row: 1 / span 2; }
.iskra-contact { grid-column: 1; display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 22px; align-items: center; max-width: 540px; padding: 10px 20px 0 0; }
.iskra-contact .iskra-image { width: 132px; height: 132px; }
.iskra-contact .iskra-name { display: block; }

/* File preparation: one human-scale cue before the technical requirements. */
.iskra-requirements { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 32px; align-items: center; margin: 18px 0 26px; }
.iskra-requirements h1 { margin-bottom: 22px; }
.iskra-requirements .iskra-image { width: 260px; height: 260px; justify-self: center; }
.iskra-requirements .iskra-tip { max-width: 590px; border-left: 3px solid #0066ff; padding-left: 18px; }
.requirements-page > .button { max-width: 100%; white-space: normal; text-align: left; }
.requirements-page > .button > span { min-width: 0; }
.requirements-page > .button > .icon { flex-shrink: 0; }

/* About: a short introduction, with the character allowed to breathe. */
.iskra-about { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 48px; padding: 36px 56px; margin: 30px 0 52px; background: #f3f5f8; }
.iskra-about .iskra-image { width: 100%; height: 420px; }
.iskra-about h2 { margin: 0 0 22px; font: italic 900 clamp(32px,4vw,54px)/1.06 'Noto Sans Display',sans-serif; font-stretch: 75%; letter-spacing: -.025em; }
.iskra-about p:not(.iskra-name) { max-width: 570px; margin: 0 0 18px; font: 400 18px/1.6 'Noto Sans',sans-serif; }
.iskra-about a { display: inline-flex; align-items: center; min-height: 48px; color: #0052cc; font: 700 16px/1.4 'Noto Sans',sans-serif; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1000px) {
    .print-intro-note.iskra-catalog-note { grid-template-columns: minmax(0,1fr) 100px; padding-inline: 18px; }
    .iskra-catalog-note .iskra-image { width: 100px; height: 100px; }
}
@media (max-width: 900px), (max-height: 649px), (prefers-reduced-motion: reduce) {
    .home-motion-page .iskra-story .iskra-step { width: 160px; height: 240px; aspect-ratio: 2 / 3; }
}
@media (max-width: 800px) {
    .print-intro-note.iskra-catalog-note { display: grid; grid-template-columns: minmax(0,1fr) 86px; padding: 14px 16px; gap: 12px; }
    .iskra-catalog-note .iskra-image { width: 86px; height: 86px; }
    .print-intro-note .iskra-catalog-copy strong { font-size: 20px; }
    .iskra-catalog-copy { gap: 5px; }
    .iskra-catalog-copy > span { font-size: 14px; }
    .iskra-contact-grid > .form-panel, .iskra-contact { grid-column: auto; grid-row: auto; }
    .iskra-contact { padding: 8px 0 0; gap: 18px; grid-template-columns: 100px minmax(0,1fr); }
    .iskra-contact .iskra-image { width: 100px; height: 100px; }
    .iskra-requirements { grid-template-columns: minmax(0,1fr) 140px; gap: 16px; }
    .iskra-requirements .iskra-image { width: 140px; height: 140px; }
    .iskra-about { padding: 26px; gap: 28px; grid-template-columns: .7fr 1.3fr; }
    .iskra-about .iskra-image { height: 330px; }
}
@media (max-width: 760px) {
    .home-motion-page .iskra-intro { max-width: 100%; grid-template-columns: 88px minmax(0,1fr); gap: 16px; margin-top: 10px; }
    .home-motion-page .iskra-intro .iskra-image { width: 88px; height: 88px; }
    .home-motion-page .iskra-story .iskra-step { width: 120px; height: 180px; margin: 0; }
    .home-motion-page .iskra-finale { position: relative; right: auto; bottom: auto; width: min(100%,280px); height: auto; aspect-ratio: 4 / 3; margin: 24px auto 0; }
    .home-motion-page .motion-finale-inner:has(.iskra-finale) { padding-bottom: 0; }
    .iskra-requirements { position: relative; grid-template-columns: minmax(0,1fr) 92px; gap: 10px; margin-top: 12px; }
    .iskra-requirements > div { display: contents; }
    .iskra-requirements h1 { grid-column: 1; grid-row: 1; font-size: clamp(28px,7.2vw,42px); margin: 0; }
    .iskra-requirements .iskra-image { grid-column: 2; grid-row: 1; width: 92px; height: 92px; }
    .iskra-requirements .iskra-tip { grid-column: 1 / -1; padding-left: 14px; margin-top: 10px; }
    .iskra-about { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
    .iskra-about .iskra-image { height: 300px; }
    .iskra-about p:not(.iskra-name) { font-size: 16px; }
}
@media (max-width: 380px) {
    .home-motion-page .iskra-story .iskra-step { width: 95px; height: 143px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-motion-page.motion-story-ready .iskra-story .motion-story-step,
    .home-motion-page.motion-story-ready .iskra-story .poster-process-scene { transition: none; }
}

/* Close story shot keeps its square framing alongside the two full-height scenes. */
.home-motion-page .iskra-story .iskra-step[data-iskra="process-design"] { aspect-ratio: 1; height: auto; align-self: center; }