.pass-film{width:min(980px,94vw);max-height:92dvh;padding:26px 36px;border:1px solid #cdd6ca;border-radius:12px;background:#faf8f1;color:#203c30;box-shadow:0 30px 100px #10261baa;overflow:auto}.pass-film::backdrop{background:#10251dcc;backdrop-filter:blur(5px)}.film-header{display:flex;align-items:center;justify-content:space-between;font-size:15px}.film-header button{font-size:32px}.pass-film h2{font-size:clamp(25px,3vw,38px);margin:15px 0 22px;line-height:1.2}.film-stage{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;min-height:340px}.film-material{display:flex;flex-direction:column;align-items:center;gap:12px}.film-material>svg,.film-truck,.film-forest{width:100%;height:245px;object-fit:cover;border-radius:6px;animation:film-arrive .7s ease both}.film-truck{object-fit:contain;padding:45px}.film-material strong{font-size:22px}.film-link{font-size:14px;color:#566c5d}.film-book{border-left:9px solid #204c38;border-radius:4px 14px 14px 4px;background:#fffef9;box-shadow:6px 7px 0 #e1dfd3,10px 12px 25px #1c382420;padding:24px;min-height:325px}.film-book-top{font-weight:700;font-size:18px}.film-book-top>span{color:#a35730}.film-book-top small{display:block;font-weight:400;letter-spacing:1px;font-size:10px;margin-top:4px}.film-pages{display:flex;gap:7px;margin:16px 0}.film-pages span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#eeede5;color:#6f776e;font-size:12px}.film-pages .filled{background:#dce9dc;color:#234931}.film-pages .current{background:#24533d;color:white}.film-page{animation:film-page .65s ease both;transform-origin:left center}.film-page>small{font-size:10px;letter-spacing:1.5px}.film-page h3{font-size:26px;margin:7px 0}.film-page dl{font-size:14px;margin:12px 0}.film-page dl>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #e4e6dd;padding:9px 0}.film-page dd{margin:0;text-align:right}.film-page p{font-size:12px;color:#566c5d;margin-bottom:0}.film-caption{font-size:19px;line-height:1.5;min-height:58px;max-width:780px;margin:25px auto 15px}.film-controls{display:flex;align-items:center;gap:16px}.film-controls button{min-height:48px;padding:10px 16px;border:1px solid #aab8aa;border-radius:5px;background:#f3f4eb;color:#203c30;white-space:nowrap;cursor:pointer}.film-controls button:hover{background:#e0e9dc}.film-controls input{flex:1;min-width:60px;min-height:48px;accent-color:#24533d}.film-time{font-size:13px;white-space:nowrap}.film-note{font-size:12px;color:#647262;margin:15px 0 0}.film-chain{display:flex;align-items:center;gap:10px;height:245px}.film-chain img{width:75px;height:95px;object-fit:cover;border-radius:6px}.film-chain img:not(:first-child){padding:12px}.hero .text-link[data-pass-film]{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:5px;cursor:pointer;min-height:48px}.pass-film :focus-visible{outline:3px solid #a4572c;outline-offset:4px}@keyframes film-arrive{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}@keyframes film-page{from{opacity:0;transform:perspective(900px) rotateY(-22deg)}to{opacity:1;transform:none}}@media(max-width:650px){.pass-film{padding:16px;width:96vw}.film-stage{gap:20px;grid-template-columns:1fr}.film-material>svg,.film-truck,.film-forest,.film-chain{height:125px}.film-material{gap:4px}.film-truck{padding:15px}.film-book{min-height:0;padding:18px}.film-controls{gap:8px;flex-wrap:wrap}.film-controls input{flex-basis:40%}.film-caption{font-size:17px}.film-book-top small{display:none}.film-pages{margin:10px 0}}@media(prefers-reduced-motion:reduce){.pass-film *{animation:none!important;transition:none!important}}

.film-origin-caption{font-size:18px;line-height:1.5;align-self:stretch;margin-top:8px}.pass-film .film-caption[hidden]{display:none}.film-controls{margin-top:24px}

/* Symbolic passport pages: public introduction without implementation details. */
.film-page-symbol{display:flex;align-items:center;gap:24px;margin:24px 0 28px;min-height:85px}.film-page-symbol>img{width:64px;height:64px;opacity:.7}.film-ink{flex:1;display:grid;gap:13px}.film-ink span{display:block;height:5px;border-radius:4px;background:#d9dfd2;animation:film-writing .9s ease both;transform-origin:left}.film-ink span:nth-child(2){width:80%;animation-delay:.15s}.film-ink span:nth-child(3){width:60%;animation-delay:.3s}.film-themes{display:flex;flex-wrap:wrap;gap:8px}.film-themes span{padding:6px 11px;background:#e8eee2;color:#35583f;border-radius:20px;font-size:13px}.film-origin-caption{min-height:81px}.film-stage{align-items:start}.film-book{margin-top:0}@keyframes film-writing{from{transform:scaleX(0)}to{transform:scaleX(1)}}@media(max-width:650px){.film-origin-caption{min-height:0}.film-page-symbol{min-height:50px;margin:16px 0}.film-page-symbol>img{width:45px;height:45px}}@media(prefers-reduced-motion:reduce){.film-ink span{animation:none}}

.film-chain-unified{width:100%;gap:3px}.film-chain-unified>img{width:25%;height:96px;padding:0;flex-shrink:0}.film-chain-unified .film-mini{width:31%;height:auto;flex-shrink:1}.film-chain-unified>span{color:#58745f;font-size:18px}.film-illustration{overflow:visible}

/* Each illustrative line completes before its small check appears. */
.film-ink{padding-right:18px}.film-ink span{position:relative}.film-ink span:nth-child(2){animation-delay:1.15s}.film-ink span:nth-child(3){animation-delay:2.3s}
.film-ink span::after{content:'';position:absolute;left:calc(100% + 5px);top:-3px;width:11px;height:11px;background:#315c48;mask:url('assets/icons/check.svg') center/contain no-repeat;-webkit-mask:url('assets/icons/check.svg') center/contain no-repeat;animation:film-check .18s ease .9s both}
.film-ink span:nth-child(2)::after{animation-delay:2.05s}.film-ink span:nth-child(3)::after{animation-delay:3.2s}
@keyframes film-check{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.film-ink span::after{animation:none}}

.film-book{position:relative;padding-bottom:52px}.film-book-top{margin-bottom:25px}.film-page-number{position:absolute;right:24px;bottom:18px;font-size:12px;letter-spacing:1px;color:#647262}

/* Labels belong to their animated lines, not a separate group of badges. */
.film-ink{gap:18px;align-content:center;min-height:145px}.film-line{width:var(--line-width);display:grid;gap:7px}.film-line small{font-size:13px;line-height:1.3;color:#35583f}.film-ink .film-line>span{width:100%;animation-delay:var(--line-delay)}.film-ink .film-line>span::after{animation-delay:var(--check-delay)}.film-page-symbol{margin-bottom:12px}@media(max-width:650px){.film-ink{min-height:130px;gap:14px}}

/* Reveal each label at the same instant its line starts drawing. */
.film-line small{animation:film-label .15s ease var(--line-delay) both}
@keyframes film-label{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.film-line small{animation:none}}

/* Decorative passport watermark, using the public site's existing artwork. */
.film-book{isolation:isolate;overflow:hidden}
.film-book::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/forest-fingerprint-background.png') center center/100% 100% no-repeat;opacity:.26}

.film-book-top.film-brand{display:flex;align-items:center;gap:9px;margin-bottom:20px}

.film-book-top.film-brand .logo-mark,.film-book-top.film-brand .logo-word{opacity:.76}
