@font-face{font-family:Onest;src:url('../../assets/fonts/onest-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;src:url('../../assets/fonts/onest-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Monomakh;src:url('../../assets/fonts/monomakh.ttf') format('truetype');font-weight:400;font-display:swap}

.history-demo { margin: 0; background: #f7f5f0; }
.bpm-history {
  --hist-paper: #f7f5f0; --hist-ink: #292922; --hist-sage: #4c5c4b;
  --hist-lime: #a8c94f; --hist-line: #d9dbd0; --hist-muted: #72766a; --hist-motion: 650ms;
  box-sizing: border-box; position: relative; max-width: 1618px; margin: auto;
  padding: 52px clamp(24px,5.1vw,84px) 30px; scroll-margin-top: 96px;
  color: var(--hist-ink); background: var(--hist-paper);
  font: 400 14px/1.6 Onest,Arial,sans-serif; -webkit-font-smoothing: antialiased;
}
.bpm-history *, .bpm-history *::before, .bpm-history *::after { box-sizing: border-box; }
.bpm-history [hidden] { display: none !important; }
.bpm-history button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bpm-history button:focus-visible, .bpm-history [tabindex]:focus-visible, .bpm-history a:focus-visible { outline: 2px solid var(--hist-sage); outline-offset: 5px; }
.bpm-history svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Header: section title and introduction. */
.bpm-history__heading { display: grid; grid-template-columns: minmax(0,1fr) 265px; align-items: end; gap: 48px; margin: 0 0 48px -12px; }
.bpm-history__eyebrow { margin: 0 0 18px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--hist-sage); }
.bpm-history__title { margin: 0; font: 400 clamp(44px,5.3vw,78px)/.98 Monomakh,serif; letter-spacing: -.048em; text-transform: none; }
.bpm-history__title em { font-style: normal; color: var(--hist-sage); }
.bpm-history__intro { margin: 0 0 2px; font-size: 13px; line-height: 1.9; color: var(--hist-muted); }
.bpm-history__intro small { display: block; margin-bottom: 12px; font-size: 8px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; }

.bpm-history__timeline-wrap { margin: 0 -10px 36px; padding: 28px 10px 3px; overflow-x: auto; scrollbar-width: none; }
.bpm-history__timeline-wrap::-webkit-scrollbar { display: none; }
.bpm-history__timeline { position: relative; display: grid; grid-template-columns: repeat(var(--history-steps,5),1fr); min-width: 670px; }
.bpm-history__rail { position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--hist-line); pointer-events: none; }
.bpm-history__rail span { display: block; width: 0; height: 100%; background: var(--hist-sage); transition: width var(--hist-motion) cubic-bezier(.22,.7,.2,1); }
.bpm-history__milestone { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 12px 3px 0; border: 0; background: none; text-align: left; }
.bpm-history__milestone-year { position: absolute; top: -20px; left: 0; color: #858a7c; font-size: 10px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bpm-history__point { position: absolute; top: 2px; left: 0; width: 11px; height: 11px; background: var(--hist-paper); border: 1px solid #a7ac9e; border-radius: 50%; transition: background .3s,box-shadow .3s,border-color .3s; }
.bpm-history__milestone strong { font-size: 15px; font-weight: 500; letter-spacing: -.025em; color: #6c7366; transition: color .3s; }
.bpm-history__milestone small { margin-top: 2px; font-size: 11px; color: var(--hist-muted); }
.bpm-history__milestone[aria-selected=true] .bpm-history__point { border-color: var(--hist-lime); background: var(--hist-lime); box-shadow: 0 0 0 5px #a8c94f22; }
.bpm-history__milestone[aria-selected=true] strong { color: var(--hist-sage); font-weight: 650; }
.bpm-history__milestone.is-past .bpm-history__point { border-color: var(--hist-sage); background: var(--hist-sage); }
.bpm-history__milestone:hover strong { color: var(--hist-ink); }

/* Image proportions are fixed; the reading column and navigation sit alongside. */
.bpm-history__stage { display: grid; grid-template-columns: 1.85fr 1fr; gap: clamp(30px,4vw,64px); align-items: start; touch-action: pan-y; --hist-drag: 0px; }
.bpm-history__visual { position: relative; isolation: isolate; min-width: 0; aspect-ratio: 1.72; overflow: hidden; border-radius: 23px; background: #dde1d6; transform: translateX(var(--hist-drag)); transition: transform .45s ease; cursor: grab; }
.bpm-history__media { position: absolute; inset: 0; }
.bpm-history__media img, .bpm-history__media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: hist-photo-in var(--hist-motion) cubic-bezier(.2,.7,.2,1) both; }
.bpm-history__visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,#11251e19,transparent 30%,#11251e00 47%,#11251eac); }
.bpm-history__visual[data-video=true]::after { background: none; }
.bpm-history__visual[data-video=true] .bpm-history__image-bottom { bottom: 64px; pointer-events: none; }
.bpm-history__image-top { position: absolute; z-index: 1; top: 23px; left: 25px; right: 25px; display: flex; color: #fffefa; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 10px #11251e99; }
.bpm-history__image-top > span { padding: 7px 10px; border: 1px solid #fffefa66; border-radius: 6px; background: #233c2933; backdrop-filter: blur(12px); }
.bpm-history__image-top .bpm-history__gallery-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.bpm-history__gallery-step { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #fffefa80; border-radius: 50%; background: #17251d55; color: #fffefa; backdrop-filter: blur(8px); transform: translateY(-50%); transition: background .2s, opacity .2s; }
.bpm-history__gallery-step:hover { background: #17251d9c; }
.bpm-history__gallery-step--prev { left: 18px; }
.bpm-history__gallery-step--next { right: 18px; }
.bpm-history__gallery-step svg { width: 22px; height: 22px; }
.bpm-history__image-bottom { position: absolute; z-index: 1; bottom: 29px; left: 29px; right: 25px; display: flex; align-items: flex-end; justify-content: space-between; color: #fffefa; gap: 10px; pointer-events: none; }
.bpm-history__image-year { display: block; font: 400 clamp(64px,7.6vw,110px)/1 Monomakh,serif; letter-spacing: -.055em; }
.bpm-history__image-caption { display: block; margin-top: 5px; font-size: 13px; letter-spacing: .005em; }
.bpm-history__expand {pointer-events: auto;display: grid;place-items: center;flex: none;width: 52px;height: 52px;border-radius: 50%;border: 1px solid #fffefa6b;background: #fffefa26;color: #fffefa !important;backdrop-filter: blur(12px);transition: background .2s;}
.bpm-history__expand:hover { background: #fffefa4d; }
.bpm-history__story { display: flex; flex-direction: column; align-self: stretch; min-width: 0; padding: 36px 0 0; }
.bpm-history__chapter { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--hist-sage); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.bpm-history__chapter > span:first-child::after { content: ' ·'; margin-left: 8px; }
.bpm-history__story-title { margin: 0 0 22px; font: 400 clamp(32px,3.3vw,52px)/1.03 Monomakh,serif; letter-spacing: -.045em; text-transform: none; }
.bpm-history__story-title span:last-child { color: var(--hist-sage); }
.bpm-history__copy p { max-width: 430px; margin: 0 0 14px; color: #676c61; font-size: 14px; line-height: 1.85; }
.bpm-history__copy p:last-of-type { margin-bottom: 0; }
.bpm-history__details { display: flex; gap: 24px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hist-line); }
.bpm-history__details > div { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.bpm-history__details > div + div { border-left: 1px solid var(--hist-line); padding-left: 22px; }
.bpm-history__details svg { flex: 0 0 32px; width: 32px; height: 36px; color: var(--hist-ink); }
.bpm-history__details svg path:last-child { stroke: #8eae3e; }
.bpm-history__details strong { display: block; color: var(--hist-sage); font-size: 13px; line-height: 1.6; font-weight: 500; }
.bpm-history__details span { display: block; color: var(--hist-muted); font-size: 11px; margin-top: 2px; }
.bpm-history__story-footer { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 16px; padding-top: 36px; margin-top: auto; }
.bpm-history__next-story { min-width: 0; padding: 0; border: 0; background: none; text-align: left; }
.bpm-history__next-story b { font-size: 12px; line-height: 1.6; font-weight: 500; }
.bpm-history__next-story:hover b { color: var(--hist-sage); }
.bpm-history__controls {display: flex;align-items: center;gap: 22px;flex: none;border: 1px solid #b1ab9f;background: #fdfdfd2b;color: var(--hist-ink);border-radius: 50px;position: absolute;padding: 5px;box-shadow: 0 5px 22px #29292216;backdrop-filter: blur(6px);pointer-events: auto;bottom: 0px;right: 80px;}
.bpm-history__controls button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--hist-line); border-radius: 50%; background: transparent; transition: background .2s,opacity .2s; }
.bpm-history__controls button[data-next] {border-color: #202b23;background: #202b23;color: #fffefa;}
.bpm-history__controls button:hover:enabled { background: #e3e8d8; color: var(--hist-sage); border-color: #d1dac1; }
.bpm-history__controls button:disabled { opacity: .28; cursor: default; }
.bpm-history__counter {display: flex;gap: 12px;font-size: 12px;color: #ffffff;font-variant-numeric: tabular-nums;}
.bpm-history__counter b {color: #e5b561;font-weight: 600;}
.bpm-history__counter > span:first-of-type { color: #c1c4b8; }
.bpm-history__footer { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; column-gap: 48px; padding-top: 27px; margin-top: 30px; border-top: 1px solid var(--hist-line); }
.bpm-history__hint { margin: 0; color: var(--hist-muted); font-size: 9px; display: flex; align-items: center; gap: 11px; }
.bpm-history__hint > span:first-child { font-size: 23px; line-height: 1; color: var(--hist-sage); }
.bpm-history__production-note { grid-column: 2; margin: 0; color: var(--hist-muted); font-size: 9px; }
.bpm-history__signature { grid-column: 3; justify-self: end; color: var(--hist-muted); font-size: 9px; }
.bpm-history .bpm-history__business-cta { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 46px; margin-top: 23px; padding: 12px 19px; border: 1px solid var(--hist-sage); border-radius: 999px; background: var(--hist-sage); color: #fffefa; font-size: 12px; line-height: 1.5; text-decoration: none; transition: background .2s; }
.bpm-history .bpm-history__business-cta:hover { background: #354838; }
.bpm-history__business-cta svg { flex: 0 0 20px; width: 20px; height: 20px; }
.bpm-history__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.bpm-history.is-dragging .bpm-history__visual { transition: none; cursor: grabbing; }
.bpm-history.is-dragging .bpm-history__stage { user-select: none; }
.bpm-history.is-changing .bpm-history__copy { animation: hist-copy-in var(--hist-motion) cubic-bezier(.2,.7,.2,1) both; }
.bpm-history__dialog { position: relative; width: min(1320px,94vw); max-height: 94vh; padding: 16px; border: 0; border-radius: 20px; background: var(--hist-paper); color: var(--hist-ink); }
.bpm-history__dialog::backdrop { background: #17251de0; backdrop-filter: blur(12px); }
.bpm-history__dialog img { display: block; width: 100%; max-height: 82vh; object-fit: contain; border-radius: 9px; }
.bpm-history__dialog p { margin: 12px 8px 0; font-size: 12px; }
.bpm-history__dialog-close { position: absolute; z-index: 2; right: 25px; top: 25px; width: 42px; height: 42px; border: 1px solid #ffffff70; background: #fffefae6; border-radius: 50%; font-size: 26px !important; line-height: 1; }
.bpm-history__dialog-step { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid #ffffff80; border-radius: 50%; background: #17251d88; color: white !important; font: 300 38px/1 Arial,sans-serif !important; transform: translateY(-50%); }
.bpm-history__dialog-step--prev { left: 29px; }
.bpm-history__dialog-step--next { right: 29px; }
.page-section--history { --section-bg: var(--paper,#f7f5f0); }
.page-section--history > .bpm-history.container {max-width: none;padding: 0;background: transparent;}
@keyframes hist-copy-in { from { opacity: 0; transform: translateX(calc(var(--hist-direction,1) * 22px)); } to { opacity: 1; transform: translateX(0); } }
@keyframes hist-photo-in { from { opacity: .2; transform: scale(1.04) translateX(calc(var(--hist-direction,1) * 12px)); } to { opacity: 1; transform: scale(1) translateX(0); } }

@media(max-width:1200px) {
  .bpm-history__heading { grid-template-columns: minmax(0,1fr) 265px; gap: 24px 32px; margin-left: 0; }
  .bpm-history__heading > div:first-child { grid-column: 1 / -1; }
  .bpm-history__intro { grid-column: 2; grid-row: 2; max-width: 330px; }
}
@media(max-width:1000px) {
  .bpm-history__title { font-size: 59px; }
  .bpm-history__stage { grid-template-columns: 1.25fr 1fr; gap: 30px; }
  .bpm-history__visual { aspect-ratio: auto; min-height: 420px; align-self: stretch; }
  .bpm-history__story { padding-top: 15px; }
  .bpm-history__story-title { font-size: 36px; }
  .bpm-history__copy p { font-size: 13px; }
  .bpm-history__details { gap: 12px; }
  .bpm-history__details > div { gap: 8px; }
  .bpm-history__details > div + div { padding-left: 12px; }
  .bpm-history__details svg { width: 25px; flex-basis: 25px; }
  .bpm-history__details strong { font-size: 11px; }
  .bpm-history__details span { font-size: 9px; }
  .bpm-history__story-footer { grid-template-columns: 1fr; gap: 12px; padding-top: 22px; }
  .bpm-history__footer { column-gap: 24px; }
}
@media(max-width:700px) {
  .bpm-history { padding: 32px 22px 25px; }
  .page-section--history > .bpm-history.container { padding: 32px 0 25px; }
  .bpm-history__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin: 0 0 31px; }
  .bpm-history__intro { order: 1; font-size: 11px; line-height: 1.7; }
  .bpm-history__eyebrow { font-size: 8px; margin-bottom: 15px; }
  .bpm-history__title { font-size: clamp(38px,9.5vw,61px); line-height: 1.02; }
  .bpm-history__intro br { display: none; }
  .bpm-history__timeline-wrap { margin-right: 0; margin-bottom: 25px; padding-top: 25px; scroll-padding-inline: 10px; }
  .bpm-history__timeline { min-width: calc(var(--history-steps,5) * 152px); grid-template-columns: repeat(var(--history-steps,5),152px); }
  .bpm-history__milestone { min-height: 78px; }
  .bpm-history__milestone strong { font-size: 13px; }
  .bpm-history__milestone small { font-size: 10px; }
  .bpm-history__stage { grid-template-columns: minmax(0,1fr); gap: 25px; }
  .bpm-history__visual { min-height: 0; aspect-ratio: 1.3; border-radius: 18px; }
  .bpm-history__image-top { top: 18px; left: 19px; right: 19px; font-size: 7px; }
  .bpm-history__image-bottom { left: 18px; bottom: 16px; right: 16px; gap: 7px; }
  .bpm-history__image-year { font-size: clamp(44px,12vw,62px); }
  .bpm-history__image-caption { font-size: 9px; max-width: 170px; }
  .bpm-history__expand { width: 38px; height: 38px; }
  .bpm-history__gallery-step { width: 38px; height: 38px; }
  .bpm-history__gallery-step--prev { left: 10px; }
  .bpm-history__gallery-step--next { right: 10px; }
  .bpm-history__dialog { width: 96vw; padding: 9px; border-radius: 14px; }
  .bpm-history__dialog img { max-height: 78vh; }
  .bpm-history__dialog-step { width: 40px; height: 40px; }
  .bpm-history__dialog-step--prev { left: 15px; }
  .bpm-history__dialog-step--next { right: 15px; }
  .bpm-history__dialog-close { right: 16px; top: 16px; width: 36px; height: 36px; }
  .bpm-history__story { padding: 0; }
  .bpm-history__chapter { font-size: 8px; }
  .bpm-history__story-title { font-size: clamp(33px,9vw,43px); margin-bottom: 18px; }
  .bpm-history__details { gap: 18px; margin-top: 22px; }
  .bpm-history__details strong { font-size: 12px; }
  .bpm-history__details span { font-size: 10px; }
  .bpm-history__story-footer { grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding-top: 22px; }
  .bpm-history__controls { gap: 6px; padding: 3px; }
  .bpm-history__controls button { width: 34px; height: 34px; }
  .bpm-history__controls svg { width: 18px; height: 18px; }
  .bpm-history__counter { gap: 5px; font-size: 8px; }
  .bpm-history__next-story { min-height: 44px; }
  .bpm-history__next-story b { font-size: 10px; }
  .bpm-history__footer { grid-template-columns: 1fr auto; gap: 12px; padding-top: 20px; margin-top: 26px; }
  .bpm-history__hint { font-size: 8px; gap: 8px; }
  .bpm-history__production-note { grid-column: 1; grid-row: 2; font-size: 8px; }
  .bpm-history__signature { grid-column: 2; grid-row: 2; font-size: 8px; }
  .bpm-history .bpm-history__business-cta { max-width: 100%; font-size: 11px; padding-inline: 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .bpm-history { --hist-motion: 0ms; }
  .bpm-history * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* History cleanup: keep only chapter-level navigation in the section. */
.bpm-history__gallery-step,
.bpm-history__gallery-count,
.bpm-history__dialog-step {
  display: none !important;
}