/* A small moving scene belongs to the closing signature, on its single red floor. */
.process-film { --film-progress:0; padding:0 0 1.5rem; color:var(--text); }
.process-film [hidden] { display:none!important; }
.process-stage { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); align-items:end; gap:1.5rem; min-height:200px; border-bottom:2px solid var(--accent-light); }
.process-stage .footer-brand { color:var(--accent-light); justify-self:start; align-self:end; min-width:0; }
.process-stage .footer-brand-frame { font-size:clamp(2.3rem,6.5vw,5.8rem); }
/* The stage border continues the open frame: never draw a second floor. */
.process-stage .footer-brand-frame::after { display:none; }
.process-world { display:block; width:100%; max-width:520px; height:auto; aspect-ratio:960/360; justify-self:end; align-self:end; overflow:hidden; color:var(--text); }

/* The original pictograms are frontal, open and flat. Camera zoom must not fatten their ink. */
.film-drawing { stroke:currentColor; stroke-width:1.5; fill:none; }
.film-drawing :is(path,circle,rect,ellipse,line,polyline,polygon) { vector-effect:non-scaling-stroke; }
.film-red,.film-person-accent,.film-roof-accent { stroke:var(--accent-light); fill:none; }
.film-building,.film-door-frame,.film-board-frame,.film-desk-furniture,.film-table,.film-laptop { stroke:currentColor; }
.film-building-name { stroke:none; fill:currentColor; font:500 15px Inter,sans-serif; letter-spacing:-.4px; }
.film-company-name { fill:var(--accent-light); }
/* Opaque paper and silhouettes provide occlusion, without introducing shaded surfaces. */
.film-facade-wash { fill:var(--bg); stroke:none; }
.film-glass,.film-door-glass,.film-paper-fill,.film-support-fill,.film-offer-page,.film-desk-top,.film-laptop-case,.film-laptop-display,.film-link-folder,.film-papier { fill:var(--bg); }
.film-glass,.film-door-glass,.film-paper-fill,.film-support-fill { stroke:currentColor; }
.film-board text { fill:currentColor; stroke:none; font:500 11px Inter,sans-serif; }
.film-board .film-app-label { font-size:10px; text-anchor:middle; }
.film-chair-shell { fill:none; stroke:currentColor; }
.film-project-link { stroke:var(--accent-light); stroke-width:1.5; }
.film-link-folder { stroke:var(--accent-light); }
.film-character { stroke:currentColor; stroke-width:1.5; }
.film-character :is(path,circle) { vector-effect:non-scaling-stroke; }
.film-person-body,.film-person-limb,.film-person-shoe,.film-person-hand { fill:var(--bg); }
.film-person-accent { stroke:var(--accent-light); }

/* A short caption and three quiet symbols, not an additional content section. */
.process-bottom { display:grid; grid-template-columns:minmax(0,1fr) 112px; align-items:start; gap:1.25rem; margin-top:.6rem; }
.process-caption { align-self:center; min-height:18px; max-width:65ch; color:var(--text-secondary); font:400 .75rem/1.5 Inter,sans-serif; }
.process-caption [data-film-caption] { display:block; }
.process-toolbar { width:112px; min-width:0; justify-self:end; }
.process-desk { position:relative; width:112px; height:44px; }
.process-desk-drawing { position:absolute; inset:0; display:block; width:112px; height:44px; fill:none; stroke:var(--text); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.process-player { position:absolute; top:0; left:2px; display:grid; grid-template-columns:repeat(3,36px); }
.process-player button { appearance:none; display:grid; place-items:center; width:36px; height:36px; min-height:36px; border:0; border-radius:0; padding:0; background:transparent; color:var(--text-secondary); cursor:pointer; }
.process-player button > svg { display:block; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.process-player button:disabled { opacity:.4; cursor:default; }
.process-player button:hover:not(:disabled) { color:var(--accent-light); }
.process-player button:focus-visible { color:var(--accent-light); outline:1px solid var(--accent-light); outline-offset:2px; }
.process-player button[data-film-pause]:not(:disabled) { color:var(--accent-light); }
.process-static-list { max-width:65ch; margin-top:1rem; padding-left:1.2rem; font-size:.8rem; line-height:1.7; }
.process-static-list li+li { margin-top:.4rem; }

/* Card mechanics keep their own mounted timeline: hover never restarts an animation. */
@keyframes card-crane-cable { 0%,15%,100% {transform:scaleY(1)} 45%,65% {transform:scaleY(.35)} }
@keyframes card-crane-lift { 0%,15%,100% {transform:translateY(0)} 45%,65% {transform:translateY(-29px)} }
@keyframes card-dialogue-left { 0%,4%,25%,100% {opacity:0;transform:translateY(3px)} 8%,20% {opacity:1;transform:translateY(0)} }
@keyframes card-dialogue-right { 0%,10%,29%,100% {opacity:0;transform:translateY(3px)} 14%,24% {opacity:1;transform:translateY(0)} }
@keyframes card-write { 0%,10%,100% {stroke-dashoffset:1} 38%,90% {stroke-dashoffset:0} }
/* Cable length, hook height and payload share the same landmarks. The trolley
   returns empty; hovering the link never changes the mounted 24-second clock. */
@keyframes build-traverse { 0%,27%,88%,100% {transform:translateX(0)} 42%,70% {transform:translateX(60px)} }
@keyframes build-lift { 0%,16%,90%,100% {transform:translateY(0)} 27%,42%,68%,79% {transform:translateY(-46px)} 52%,60% {transform:translateY(-22px)} }
@keyframes build-cable { 0%,16%,90%,100% {transform:scaleY(1)} 27%,42%,68%,79% {transform:scaleY(.233333)} 52%,60% {transform:scaleY(.633333)} }
@keyframes build-cargo { 0%,56%,100% {opacity:1} 58%,97% {opacity:0} }
@keyframes build-deposited { 0%,56%,100% {opacity:0} 58%,93% {opacity:1} 97% {opacity:0} }
@keyframes build-estimate { 0%,17%,100% {opacity:1} 23%,95% {opacity:0} }
@keyframes build-invoice { 0%,65%,100% {opacity:0} 71%,93% {opacity:1} 97% {opacity:0} }
@keyframes build-writing { 0%,100% {stroke-dashoffset:1} 13%,95% {stroke-dashoffset:0} }
@keyframes build-approval { 0%,71%,100% {stroke-dashoffset:1} 80%,95% {stroke-dashoffset:0} }
@keyframes build-site-caption { 0%,20%,68%,100% {opacity:0} 25%,63% {opacity:1} }
/* Both sector scenes share a scale, duration and three-part rhythm. */
.sector-door { --card-cycle:24s; }
@keyframes card-service-brief { 0%,22%,100% {opacity:1} 28%,96% {opacity:0} }
@keyframes card-service-plan { 0%,26%,57%,100% {opacity:0;transform:translateY(2px)} 32%,52% {opacity:1;transform:translateY(0)} }
@keyframes card-service-budget { 0%,53%,79%,100% {opacity:0;transform:translateY(2px)} 59%,74% {opacity:1;transform:translateY(0)} }
@keyframes card-service-document { 0%,75%,100% {opacity:0;transform:translateY(2px)} 82%,94% {opacity:1;transform:translateY(0)} }
@keyframes card-service-progress { 0%,28%,78%,100% {opacity:0} 35%,71% {opacity:1} }

@media(prefers-reduced-motion:no-preference) {
  .sector-door { transition:transform 360ms cubic-bezier(.2,.7,.2,1),box-shadow 360ms ease; }
  .sector-door:focus-visible { transform:translateY(-5px); box-shadow:0 12px 24px #142a321f; }
  .is-motion-scene .scene-crane-load { opacity:1; animation:card-crane-lift var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene .scene-crane-hook { animation:card-crane-lift var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene .scene-crane-cable { transform-origin:116px 44px; animation:card-crane-cable var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene .scene-service-message--left { animation:card-dialogue-left var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene .scene-service-message--right { animation:card-dialogue-right var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene .scene-service-line { stroke-dasharray:1; animation:card-write var(--card-cycle,24s) ease-in-out infinite,card-service-brief var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene .scene-service-check { animation:card-service-document var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene .scene-service-plan { animation:card-service-plan var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene .scene-service-budget { animation:card-service-budget var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene .scene-service-document { animation:card-service-document var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene .scene-service-progress { animation:card-service-progress var(--card-cycle,24s) ease-in-out infinite; }
  .construction-flow.is-motion-scene .build-trolley { animation:build-traverse var(--card-cycle,24s) cubic-bezier(.45,0,.25,1) infinite; }
  .construction-flow.is-motion-scene .build-hoist { animation:build-lift var(--card-cycle,24s) cubic-bezier(.45,0,.25,1) infinite; }
  .construction-flow.is-motion-scene .build-cable { transform-origin:116px 44px; animation:build-cable var(--card-cycle,24s) cubic-bezier(.45,0,.25,1) infinite; }
  .construction-flow.is-motion-scene .build-cargo { animation:build-cargo var(--card-cycle,24s) linear infinite; }
  .construction-flow.is-motion-scene .build-deposited { animation:build-deposited var(--card-cycle,24s) linear infinite; }
  .construction-flow.is-motion-scene :is(.build-estimate,.build-caption--estimate) { animation:build-estimate var(--card-cycle,24s) ease-in-out infinite; }
  .construction-flow.is-motion-scene :is(.build-invoice,.build-caption--invoice) { animation:build-invoice var(--card-cycle,24s) ease-in-out infinite; }
  .construction-flow.is-motion-scene .build-caption--site { animation:build-site-caption var(--card-cycle,24s) ease-in-out infinite; }
  .construction-flow.is-motion-scene .build-writing { stroke-dasharray:1; animation:build-writing var(--card-cycle,24s) ease-in-out infinite; }
  .construction-flow.is-motion-scene .build-approval { stroke-dasharray:1; animation:build-approval var(--card-cycle,24s) ease-in-out infinite; }
  .is-motion-scene:not(.is-motion-visible) * { animation-play-state:paused!important; }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .sector-door:hover { transform:translateY(-5px); box-shadow:0 12px 24px #142a321f; }
}
@media(max-width:650px) {
  /* Separate cells protect the name; no opaque logo is laid over a moving actor. */
  .process-stage { grid-template-columns:minmax(0,.6fr) minmax(0,.4fr); min-height:0; gap:.5rem; }
  .process-stage .footer-brand-frame { font-size:clamp(28px,7.2vw,32px); padding:.2em .18em .25em; }
  .process-world { width:100%; max-width:220px; height:auto; aspect-ratio:480/360; }
  .process-bottom { gap:.65rem; }
  .process-caption { min-height:36px; font-size:.75rem; line-height:1.5; }
  .process-film { padding-bottom:1.2rem; }
}
@media(pointer:coarse) {
  .process-bottom { grid-template-columns:minmax(0,1fr) 132px; }
  .process-toolbar,.process-desk { width:132px; }
  .process-desk { height:52px; }
  .process-desk-drawing { inset:auto 10px 0; }
  .process-player { left:0; grid-template-columns:repeat(3,44px); }
  .process-player button { width:44px; height:44px; min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .process-film *,.sector-door { animation:none!important; transition:none!important; }
  .sector-door { transform:none!important; }
}