.journey-story {
  position: relative;
  padding: 76px max(var(--gutter), calc((100% - 1240px) / 2)) 48px;
  border-top: 1px solid #e7e9e8;
  background: #fff;
  color: #17221f;
  scroll-margin-top: 88px;
}
.journey-story__heading { text-align: center; }
.journey-story__heading h2 { margin: 0; font: 800 36px/1.2 "Manrope", Arial, sans-serif; }
.journey-story__heading > p:last-child { margin: 16px auto 0; max-width: 550px; font-size: 16px; line-height: 1.65; color: #5d6965; }
.request-film { --film-green: var(--primary, #064e3b); margin-top: 20px; }
.request-film__scene { position: relative; width: calc(100% - 48px); max-width: 1000px; margin-inline: auto; aspect-ratio: 1672 / 830; isolation: isolate; color: #17221f; }
.request-film__scene svg { flex: 0 0 auto; width: 23px; height: 23px; color: var(--film-green); }
.film-person { position: absolute; left: 67%; top: 0; width: 33%; aspect-ratio: 552 / 831; overflow: hidden; z-index: -1; clip-path: polygon(18.2% 0, 100% 0, 100% 100%, 0 100%, 0 82%, 18.2% 77%); }
/* Display only the photo regions of the approved artwork; all interface text stays native. */
.film-person__light { position: absolute; max-width: none; width: 302.8986%; height: auto; left: -202.8986%; top: -13.2371%; }
.film-person__dark { display: none; }
.film-search { position: absolute; left: 0; top: 20%; width: 23%; height: 62px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border: 1px solid #d6dbd8; border-radius: 8px; background: #fff; font-size: 17px; }
.film-query { white-space: nowrap; clip-path: inset(0); }
.film-caret { width: 1.5px; height: 20px; background: var(--film-green); opacity: 0; margin-left: -12px; }
.film-cursor { position: absolute; top: 0; left: 0; opacity: 0; z-index: 3; pointer-events: none; transform-origin: 0 0; }
.request-film__scene .film-cursor svg { width: 28px; height: 28px; fill: #17221f; stroke: #fff; stroke-width: 1.7; filter: drop-shadow(0 2px 2px #0003); }
.film-click { position: absolute; width: 30px; height: 30px; border: 2px solid #749c89; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 2; }
.film-click[data-film="click-request"] { border-color: #bfe7cc; }
.film-profile { position: absolute; top: 20%; left: 31%; width: 43%; display: grid; grid-template-columns: 30% minmax(0, 1fr); align-items: center; gap: 22px; padding: 22px; border: 1px solid #d6dbd8; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px #182c2010; }
.film-portrait { position: relative; overflow: hidden; aspect-ratio: 176 / 249; border-radius: 6px; background: #eef2e8; }
.film-portrait img { position: absolute; width: 950%; height: auto; max-width: none; left: -313.0682%; top: -110.0402%; }
.film-profile__details { min-width: 0; }
.film-profile h3 { margin: 0; color: #202622; font: 800 26px/1.17 "Manrope", Arial, sans-serif; }
.film-profile p { margin: 12px 0 20px; color: #626b66; font-size: 13px; line-height: 1.5; }
.film-request { position: relative; height: 50px; border-radius: 6px; background: var(--film-green); color: white; }
.film-request > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 700; white-space: nowrap; }
.film-request svg { color: white; width: 21px; height: 21px; }
.film-request__sent { opacity: 0; }
.request-film__scene .film-route { position: absolute; width: 8%; height: 13%; overflow: visible; z-index: -1; }
.film-route path { fill: none; stroke: var(--film-green); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.request-film__scene .film-route--first { left: 23%; top: 25%; }
.request-film__scene .film-route--second { left: 69%; top: 59%; width: 6%; height: 14%; }
.film-agreed { position: absolute; top: 68%; left: 44%; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #5d6965; }
.film-agreed svg { width: 15px; height: 15px; }
.film-calendar { position: absolute; top: 74%; left: 42%; width: 34%; min-height: 77px; padding: 12px 17px; display: flex; align-items: center; gap: 17px; border: 1px solid #d6dbd8; border-radius: 8px; background: #fff; }
.film-check { display: grid; place-items: center; flex: 0 0 48px; height: 48px; background: #fcf0da; border-radius: 7px; }
.film-check svg { background: var(--film-green); color: #fff; border-radius: 50%; width: 31px; height: 31px; padding: 6px; stroke-width: 3; }
.film-calendar strong { font-size: 18px; line-height: 1.4; font-weight: 700; }
.request-film__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; border-top: 1px solid #ecefed; }
.film-chapters { display: flex; align-items: center; gap: 30px; padding: 0; margin: 0; list-style: none; }
.film-chapters li { position: relative; padding: 13px 0; font-size: 14px; color: #65716b; }
.film-chapters li::before { position: absolute; top: -17px; left: 0; width: 100%; height: 2px; content: ""; background: var(--film-green); transform: scaleX(0); transform-origin: left; transition: transform 350ms ease; }
.film-chapters li.is-active { color: var(--film-green); font-weight: 700; }
.film-chapters li.is-active::before { transform: scaleX(1); }
.film-controls { display: flex; align-items: center; gap: 6px; }
.film-controls > span { font-size: 11px; color: #65716b; margin-right: 10px; }
.film-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #e1e7e3; border-radius: 50%; background: white; color: #315446; }
.film-controls button:hover { background: #f0f5f2; border-color: #80968a; }
.film-controls button:focus-visible { outline: 2px solid var(--film-green); outline-offset: 3px; }
.film-controls button:disabled { opacity: .4; cursor: default; }
.film-controls svg { width: 17px; height: 17px; }
.film-example-note { color: #65716b; font-size: 11px; }
@media (min-width: 821px) and (max-width: 1100px) {
  .film-search { font-size: 14px; padding: 0 12px; gap: 10px; height: 54px; }
  .film-profile { padding: 15px; gap: 15px; }
  .film-profile h3 { font-size: 21px; }
  .film-profile p { font-size: 12px; margin: 9px 0 12px; }
  .film-request { height: 44px; }
  .film-request > span { font-size: 14px; gap: 6px; }
  .film-calendar { min-height: 65px; padding: 10px; gap: 10px; }
  .film-calendar strong { font-size: 15px; }
  .film-check { flex-basis: 40px; height: 40px; }
}
@media (max-width: 820px) {
  .journey-story { padding: 56px 24px 36px; }
  .journey-story__heading h2 { font-size: 29px; }
  .journey-story__heading > p:last-child { font-size: 15px; }
  .request-film { margin: 22px auto 0; max-width: 560px; }
  .request-film__scene { width: 100%; height: 605px; aspect-ratio: auto; }
  .film-person { width: 201px; left: auto; right: 0; top: 0; }
  .film-search { top: 52px; left: 10px; width: calc(100% - 183px); min-width: 156px; height: 52px; padding: 0 12px; gap: 9px; font-size: 14px; }
  .film-caret { margin-left: -7px; height: 17px; }
  .film-search svg { width: 19px; height: 19px; }
  .film-profile { top: 298px; left: 10px; width: calc(100% - 20px); max-width: none; padding: 18px; grid-template-columns: 82px minmax(0, 1fr); gap: 18px; }
  .film-profile h3 { font-size: 22px; }
  .film-profile p { margin: 8px 0 12px; font-size: 12px; }
  .film-request { height: 44px; }
  .film-request > span { font-size: 15px; gap: 8px; }
  .request-film__scene .film-route--first { top: 107px; left: 20%; width: 12%; height: 189px; }
  .request-film__scene .film-route--second { top: 485px; left: 82%; width: 10%; height: 46px; }
  .film-agreed { top: 507px; left: 14px; font-size: 11px; }
  .film-calendar { top: 533px; left: 10px; width: calc(100% - 20px); min-height: 66px; padding: 10px 14px; gap: 14px; }
  .film-calendar strong { font-size: 17px; }
  .film-check { flex-basis: 42px; height: 42px; }
  .request-film__footer { flex-direction: column; align-items: stretch; gap: 14px; }
  .film-chapters { justify-content: space-between; gap: 12px; }
  .film-chapters li { font-size: 12px; }
  .film-controls { justify-content: flex-end; }
  .film-controls > span { margin-right: auto; }
}
@media (max-width: 380px) {
  .journey-story { padding-right: 16px; padding-left: 16px; }
  .film-person { width: 177px; }
  .film-profile { padding: 14px; gap: 12px; grid-template-columns: 68px minmax(0, 1fr); }
  .film-profile h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-chapters li::before { transition: none; }
}