/* Let the work lead. The film keeps its full story and a quiet reading layer. */
.film-caption {bottom:19%;max-width:min(44vw,560px)}
.film-caption>p {font-size:clamp(44px,5vw,72px);line-height:1.04;letter-spacing:-.04em;margin:14px 0 16px}
.film-caption>span:last-child {font-size:15px;line-height:1.6;max-width:34ch}
.film-shade {background:linear-gradient(90deg,#0b100c45,transparent 65%),linear-gradient(0deg,#0b100c85,transparent 55%)}
.film-guide {display:grid;gap:10px;font-size:12px;line-height:1.4;max-width:175px;transition:opacity .25s}
.film-guide i {display:block;width:110px;height:1px;background:currentColor;position:relative;opacity:.75}
.film-guide i::after {content:"";position:absolute;inset:0;background:currentColor;transform:scaleX(var(--film-progress,0));transform-origin:left;height:2px;top:-.5px}
.film-stage[data-film-complete=true] .film-guide {opacity:0;visibility:hidden}
/* Reordered sections retain a clear destination below the fixed header. */
#services,#the-work,#care {scroll-margin-top:0}
@media(min-width:701px) and (max-height:650px){
 .film-caption {bottom:24%;max-width:48vw}
 .film-caption>p {font-size:clamp(38px,4.8vw,60px);margin:10px 0}
 .film-caption>span:last-child {font-size:14px}
 .film-guide {font-size:11px;max-width:150px}
}
@media(prefers-reduced-motion:reduce){.film-guide{display:none}}

/* In the split tablet layout, stack each material sample above its full name. */
@media (min-width:701px) and (max-width:1050px) {
 .work-object .assembly-sequence {display:flex;flex-wrap:wrap;gap:12px}
 .work-object .assembly-sequence li {flex:1 1 0;min-width:max-content}
 .work-object .assembly-sequence button {grid-template-columns:1fr;grid-template-rows:28px auto auto;row-gap:5px;min-height:104px;align-content:start;padding:12px 0}
 .work-object .assembly-sequence .layer-swatch {grid-column:1;grid-row:1;width:19px;height:24px}
 .work-object .assembly-sequence .layer-number {grid-column:1;grid-row:2}
 .work-object .assembly-sequence .layer-name {grid-column:1;grid-row:3;white-space:nowrap}
}

/* One transparent chapter position for the entire film, over the clear floor
   at the final reveal. Never add a last-frame rectangle or move the controls. */
html[data-experience=desktop] .film-footer {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:30px;row-gap:10px}
html[data-experience=desktop] .film-guide {grid-column:1;grid-row:1;display:flex;align-items:center;gap:16px;max-width:none}
html[data-experience=desktop] .film-guide i {width:86px}
html[data-experience=desktop] .film-chapters {grid-column:1;grid-row:2;justify-self:start;background:transparent;box-shadow:none}
html[data-experience=desktop] .film-skip {grid-column:2;grid-row:2;justify-self:end}
@media(max-height:650px) {html[data-experience=desktop] .film-guide {display:none}}

/* Keep the first chapter clear of the film's dark doorway at the left edge. */
html[data-experience=desktop] .film-footer {left:max(var(--gutter),12vw)}
@media(prefers-reduced-motion:reduce) {html[data-experience=desktop] .film-guide {display:none}}
.film-stage[data-film-complete=true] .film-chapters button {opacity:1}