/* The illustrations use one gold ink on a black canvas. */
.stages-heading { background: #080808; }
.stages-heading h1 { font-size: clamp(40px,4.6vw,64px); }
.stages-content { padding-top: 42px; }
.stage-experience { --stage-gold: #dfbd78; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.13fr); align-items: start; gap: clamp(32px,5vw,76px); }
.stage-route { list-style: none; padding: 0; margin: 0; }
.stage-route li { position: relative; padding: 22px 24px 22px 30px; border-bottom: 1px solid #dfbd7826; transition: background .25s; }
.stage-route li:first-child { border-top: 1px solid #dfbd7826; }
.stage-route li:before { content: ''; position: absolute; left: 0; top: 26px; width: 2px; height: 32px; border-radius: 2px; background: var(--stage-gold); opacity: 0; transition: opacity .25s; }
.stage-route li.is-active { background: linear-gradient(90deg,#dfbd7819, #dfbd7807 55%,transparent); }
.stage-route li.is-active:before { opacity: 1; }
.stage-route li.is-active h2 { color: #f2d79f; }
.stage-route li.is-active p { color: #e0cfad; }
.stage-route h2 { margin: 0 0 8px; font-size: clamp(20px,1.8vw,25px); line-height: 1.3; color: #bca779; transition: color .25s; }
.stage-route p { margin: 0; font-size: 15px; line-height: 1.7; color: #b5aa96; transition: color .25s; }
.stage-route li { cursor: default; }
.stage-theatre { position: sticky; top: 24px; min-width: 0; margin: 0; padding: clamp(28px,3.8vw,48px); color: var(--stage-gold); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.stage-art { display: block; width: 100%; height: auto; aspect-ratio: 560/420; margin: 22px 0 18px; grid-column: 1 / -1; overflow: hidden; color: var(--stage-gold); }
.stage-art .detail { opacity: .52; stroke-width: 1; }
.stage-art .ink { stroke-width: 1.65; }
.stage-art .scene-contract .handshake { stroke-width: 1.85; }
.stage-art .scene-contract .handshake .detail { stroke-width: 1.1; opacity: .68; }
.stage-art .pencil-trace { opacity: .22; stroke-width: .65; }
.stage-art .hatching { opacity: .28; stroke-width: .7; }
.stage-art .sketch-label,.stage-art .form-heading,.stage-art .form-brand { fill: currentColor; stroke: none; font: 10px 'Segoe UI',sans-serif; letter-spacing: .02em; }
.stage-art .form-heading { font-size: 13px; font-weight: 500; }
.stage-art .form-brand { font-size: 10px; letter-spacing: .19em; }
.stage-art .proposal { stroke-dasharray: 5 7; stroke-width: 1.3; opacity: .8; }
.stage-scene { display: none; }
.stage-scene.is-active,.stage-scene.is-leaving { display: inline; }
.stage-scene.is-leaving { pointer-events: none; }
.stage-scene.is-leaving * { animation-play-state: paused !important; }
.stage-scene .late { --sketch-delay: .8s; }
.stage-scene .last { --sketch-delay: 1.9s; }
.stage-scene.is-animating .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: stage-draw 1.8s cubic-bezier(.4,.08,.35,1) var(--sketch-delay,0s) forwards; }
.stage-scene.is-animating .reveal { animation: sketch-reveal .9s ease var(--sketch-delay,0s) both; }
.stage-scene.is-animating .handshake { animation: sketch-handshake 2.4s ease 2.2s both; }
.scene-thermobox .thermo-site { --sketch-delay: 0s; }
.scene-thermobox.is-animating .thermo-site { animation: sketch-reveal .25s ease both; }
.scene-thermobox.is-animating .thermo-site .draw { animation-duration: .8s; }
.scene-thermobox .thermo-wall-fill { stroke: none; }
.scene-thermobox .thermo-side-wall { --sketch-delay: 1.2s; }
.scene-thermobox .thermo-rear-wall { --sketch-delay: 2.4s; }
.scene-thermobox.is-animating .thermo-wall { animation: sketch-reveal .25s ease var(--sketch-delay) both; }
.scene-thermobox.is-animating .thermo-wall .draw { animation-duration: .6s; }
.scene-thermobox .thermo-truss { --sketch-delay: 3.6s; }
.scene-thermobox.is-animating .thermo-truss .draw { animation-duration: .6s; }
.scene-thermobox .thermo-roof-left { --sketch-delay: 4.6s; }
.scene-thermobox .thermo-roof-right { --sketch-delay: 5s; }
.scene-thermobox .thermo-front { --sketch-delay: 5.8s; }
.scene-thermobox .thermo-door { --sketch-delay: 7s; }
.stage-art .scene-thermobox .thermo-post { stroke-width: 1.6; }
.stage-art .scene-thermobox .thermo-skin .detail { stroke-width: 1.05; opacity: .64; }
.scene-thermobox.is-animating .thermo-skin { animation: sketch-reveal .4s ease var(--sketch-delay) both; }
.scene-thermobox.is-animating .thermo-skin .draw { animation-duration: .4s; }
.scene-thermobox.is-animating .thermo-door,
.scene-thermobox.is-animating .thermo-door .draw { animation-duration: .2s; }
.scene-thermobox .thermo-worker { opacity: 0; }
.scene-thermobox .thermo-worker-3 { opacity: 1; }
.scene-thermobox .thermo-worker .ink { stroke-width: 2.8; }
.scene-thermobox.is-animating .thermo-worker-0 { animation: thermo-worker-first 8s linear both; }
.scene-thermobox.is-animating .thermo-worker-1 { animation: thermo-worker-second 8s linear both; }
.scene-thermobox.is-animating .thermo-worker-2 { animation: thermo-worker-third 8s linear both; }
.scene-thermobox.is-animating .thermo-worker-3 { animation: thermo-worker-fourth 8s linear both; }
.scene-thermobox.is-animating .thermo-drill { transform-box: fill-box; transform-origin: 10% 70%; animation: thermo-fastening .4s ease-in-out 20 alternate; }
/* Each installer appears only after the profile at the drill tip is complete. */
@keyframes thermo-worker-first { 0.000000% { opacity: 0; } 22.500000% { opacity: 0; } 23.750000% { opacity: 1; } 28.750000% { opacity: 1; } 30.000000% { opacity: 0; } 100.000000% { opacity: 0; } }
@keyframes thermo-worker-second { 0.000000% { opacity: 0; } 37.500000% { opacity: 0; } 38.750000% { opacity: 1; } 43.750000% { opacity: 1; } 45.000000% { opacity: 0; } 100.000000% { opacity: 0; } }
@keyframes thermo-worker-third { 0.000000% { opacity: 0; } 60.000000% { opacity: 0; } 61.250000% { opacity: 1; } 68.750000% { opacity: 1; } 70.000000% { opacity: 0; } 100.000000% { opacity: 0; } }
@keyframes thermo-worker-fourth { 0.000000% { opacity: 0; } 77.500000% { opacity: 0; } 78.750000% { opacity: 1; } 100.000000% { opacity: 1; } }
@keyframes thermo-fastening { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.scene-plot .plot-details { --sketch-delay: 0s; }
.scene-plot .plot-boundary { stroke-width: 1.65; }
.scene-plot .plot-grass { stroke-width: .85; stroke-opacity: .48; }
.scene-plot .plot-services { stroke-width: .9; opacity: .65; }
.scene-plot .plot-service-line { stroke-dasharray: 3 4; stroke-opacity: .75; }
.scene-plot .plot-service-symbol { stroke-width: .9; }
.scene-plot.is-animating .plot-services { animation: sketch-reveal .4s ease .6s both; }
.scene-plot.is-animating .plot-details { animation: sketch-reveal .12s ease both; }
.scene-plot.is-animating .plot-details .draw { animation-duration: 1s; }
/* Stop halfway from the top of the canvas to the site, then light up after .4s. */
.scene-plot .plot-marker { stroke-width: 1.7; transform: translateY(-51px); }
.scene-plot .plot-pin-ink { fill: url(#plot-pin-metal); stroke: #c7a361; }
.scene-plot .plot-pin-ring { fill: url(#plot-pin-rim); stroke: none; }
.scene-plot .plot-pin-shadow { opacity: .45; transform: scale(.7); transform-box: fill-box; transform-origin: center; }
.scene-plot.is-animating .plot-marker { animation: plot-marker-drop .6s ease-in-out 1.2s both; }
.scene-plot.is-animating .plot-pin-ink { animation: plot-marker-light .2s ease 2.2s both; }
.scene-plot.is-animating .plot-pin-shadow { animation: plot-marker-shadow .6s ease 1.2s both; }
.scene-plot .proposal { stroke-width: 1.35; stroke-dasharray: 5 6; opacity: .85; }
.scene-plot .plot-garage-detail { stroke-width: 1; stroke-opacity: .7; }
.scene-plot.is-animating .plot-planned-garage { animation: plot-garage-draw .6s ease 2.6s both; }
@keyframes plot-marker-drop {
  0% { opacity: 0; transform: translateY(-102px); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: translateY(-51px); }
}
@keyframes plot-marker-light {
  from { fill-opacity: 0; stroke-opacity: .55; }
  to { fill-opacity: 1; stroke-opacity: 1; }
}
@keyframes plot-marker-shadow {
  from { opacity: 0; transform: scale(.45); }
  to { opacity: .45; transform: scale(.7); }
}
.scene-project .model-grid { opacity: .4; }
.stage-art .scene-project .model-clean { stroke-width: 1.6; }
.scene-project .model-solid { fill: #0b0b0b; }
.scene-project .model-surface { stroke: none; }
.scene-project .model-window { stroke-width: 1.3; }
.scene-project .model-fine { stroke-width: 1; opacity: .72; }
.scene-project .model-mortar { stroke-width: .75; opacity: .55; }
.scene-project.is-animating .model-edge { animation: var(--model-animation) 6s ease-in-out both; }
.scene-project.is-animating .model-base { animation: sketch-reveal 0.15s ease 0.5s both; }
.scene-project.is-animating .model-part-1 { animation: sketch-reveal 0.15s ease 1.2s both; }
.scene-project.is-animating .model-part-2 { animation: sketch-reveal 0.1s ease 2s both; }
.scene-project.is-animating .model-part-3 { animation: sketch-reveal 0.15s ease 2.2s both; }
.scene-project.is-animating .model-part-4 { animation: sketch-reveal 0.15s ease 3s both; }
.scene-project.is-animating .model-glazing { animation: sketch-reveal 0.2s ease 3.3s both; }
.scene-project.is-animating .model-part-5 { animation: sketch-reveal 0.3s ease 3.3s both; }
/* The construction scene shares every A-180 face with the project model. */
.scene-construction .model-grid { opacity: .22; }
.stage-art .scene-construction .model-clean { stroke-width: 1.6; }
.scene-construction .model-solid { fill: #0b0b0b; }
.scene-construction .model-surface { stroke: none; }
.scene-construction .model-window { stroke-width: 1.3; }
.scene-construction .model-fine { stroke-width: 1; opacity: .72; }
.scene-construction .model-mortar { stroke-width: .75; opacity: .55; }
.scene-construction .material-plaster { fill: url(#home-plaster); }
.scene-construction .material-shade { fill: url(#home-shade); }
.scene-construction .material-roof { fill: url(#home-roof); }
.scene-construction .material-brick { fill: url(#home-brick); }
.scene-construction .material-brick-shade { fill: url(#home-brick-shade); }
.scene-construction .model-glazing .model-window { fill: url(#home-glass); }
.scene-construction .warm-room .model-window { fill: url(#home-warm); }
.scene-construction .glass-reflection { stroke-width: 1.1; opacity: .5; }
.scene-construction .room-curtain { fill: #dfbd78; fill-opacity: .13; stroke-width: .8; stroke-opacity: .5; }
.scene-construction.is-animating .home-tone { animation: home-materialize .8s ease 7.4s both; }
.scene-construction.is-animating [id="home-warm"] .home-tone { animation-delay: 8.2s; }
.scene-construction.is-animating .home-details { animation: sketch-reveal .8s ease 8.2s both; }
@keyframes home-materialize { from { stop-color: #0b0b0b; } to { stop-color: var(--home-tone); } }
.scene-construction.is-animating .model-edge { animation: var(--model-animation) 10s ease-in-out both; }
.scene-construction.is-animating .model-base { animation: sketch-reveal .15s ease 2s both; }
.scene-construction.is-animating .model-part-1,
.scene-construction.is-animating .model-masonry { animation: sketch-reveal .15s ease 2.8s both; }
.scene-construction.is-animating .model-part-2 { animation: sketch-reveal 0.15s ease 3.8s both; }
.scene-construction.is-animating .model-part-3 { animation: sketch-reveal 0.15s ease 4.4s both; }
.scene-construction.is-animating .model-part-4 { animation: sketch-reveal 0.15s ease 5.4s both; }
.scene-construction.is-animating .model-glazing { animation: sketch-reveal 0.2s ease 6.2s both; }
.scene-construction.is-animating .model-part-5 { animation: sketch-reveal 0.6s ease 7.4s both; }
.scene-construction .crew .ink { stroke-width: 2.8; }
.scene-construction .delivery-truck { stroke-width: 1.7; }
.scene-construction .construction-materials { opacity: 0; }
.scene-construction.is-animating .construction-materials { animation: construction-materials 10s linear both; }
.scene-construction .construction-scaffolds { opacity: 0; stroke-width: 1; }
.scene-construction .scaffold-deck { stroke-width: 1.3; }
.scene-construction.is-animating .construction-scaffolds { animation: construction-scaffolds 10s linear both; }
.scene-construction.is-animating .thermo-drill { transform-box: fill-box; transform-origin: 10% 70%; animation: thermo-fastening .4s ease-in-out 25 alternate; }
.scene-inspection .material-plaster { fill: url(#inspection-home-plaster); }
.scene-inspection .material-shade { fill: url(#inspection-home-shade); }
.scene-inspection .material-roof { fill: url(#inspection-home-roof); }
.scene-inspection .material-brick { fill: url(#inspection-home-brick); }
.scene-inspection .material-brick-shade { fill: url(#inspection-home-brick-shade); }
.scene-inspection .model-glazing .model-window { fill: url(#inspection-home-glass); }
.scene-inspection .warm-room .model-window { fill: url(#inspection-home-warm); }
.scene-inspection .inspection-person { stroke-width: 1.65; }
.scene-inspection .inspector-detail { stroke-width: .95; stroke-opacity: .65; }
.scene-inspection.is-animating .inspection-house { animation: sketch-reveal .6s ease both; }
.scene-inspection.is-animating .inspection-portrait { animation: sketch-reveal .4s ease .6s both; }
.scene-inspection .inspection-writing-arm { transform-box: view-box; transform-origin: 1px 90px; }
.scene-inspection .inspection-forearm { transform-box: view-box; transform-origin: 8px 157px; }
.scene-inspection.is-animating .inspection-writing-arm { animation: inspection-writing-arm 4s ease-in-out both; }
.scene-inspection.is-animating .inspection-forearm { animation: inspection-forearm 4s ease-in-out both; }
.scene-inspection.is-animating .inspection-arm-contour { animation: inspection-arm-contour 4s ease-in-out both; }
.scene-handover .material-plaster { fill: url(#handover-home-plaster); }
.scene-handover .material-shade { fill: url(#handover-home-shade); }
.scene-handover .material-roof { fill: url(#handover-home-roof); }
.scene-handover .material-brick { fill: url(#handover-home-brick); }
.scene-handover .material-brick-shade { fill: url(#handover-home-brick-shade); }
.scene-handover .model-glazing .model-window { fill: url(#handover-home-glass); }
.scene-handover .warm-room .model-window { fill: url(#handover-home-warm); }
.scene-handover .handover-garage { stroke-width: 1.15; }
.scene-handover .handover-fine { stroke-width: .75; stroke-opacity: .55; }
.scene-handover .handover-wheel { stroke-width: .7; }
.scene-handover .handover-trim { stroke-width: 1.5; }
.scene-handover .handover-keys { stroke-width: 1.15; }
.scene-handover .handover-key-fine { stroke-width: .7; stroke-opacity: .7; }
.scene-handover .handover-chrome { stroke-width: 1.15; stroke: #d6bc7f; }
.scene-handover.is-animating .handover-house { animation: sketch-reveal 0.8s ease 0s both; }
.scene-handover.is-animating .handover-paving { animation: sketch-reveal 0.4s ease 1s both; }
.scene-handover.is-animating .handover-garage { animation: sketch-reveal 0.8s ease 1.2s both; }
.scene-handover.is-animating .handover-car { animation: sketch-reveal 1s ease 2.2s both; }
.scene-handover.is-animating .handover-keys { animation: sketch-reveal 0.8s ease 2.4s both; }
.scene-handover .handover-door-panel { transform: translateY(-82px); }
/* Keys finish at 3.2s; hold the completed scene for 1s before opening. */
.scene-handover.is-animating .handover-door-panel { animation: handover-door-open 1.8s cubic-bezier(.4,0,.2,1) 4.2s both; }
@keyframes handover-door-open { from { transform: translateY(0); } to { transform: translateY(-82px); } }
.scene-consultation.is-animating .draw { animation-duration: 1.4s; }
.scene-consultation.is-animating .call-head { transform-origin: 0 25px; animation: consultation-nod 2s ease-in-out 1.2s infinite; }
.scene-consultation.is-animating .consultation-builder .call-head { animation-delay: 2.6s; }
.scene-consultation .consultation-builder .call-head { transform-origin: 35px 47px; }
.scene-consultation .consultation-builder .inspector-detail { stroke-width: .95; stroke-opacity: .65; }
.stage-art .architectural { stroke-width: 1.5; }
.stage-scene .build-0 { --sketch-delay: 1.4s; }
.stage-scene .build-1 { --sketch-delay: 2.4s; }
.stage-scene .build-2 { --sketch-delay: 3.6s; }
.stage-scene .build-3 { --sketch-delay: 4.6s; }
.stage-scene .build-4 { --sketch-delay: 6s; }
.stage-scene .build-5 { --sketch-delay: 7.2s; }
.scene-construction.is-animating .draw { animation-duration: .85s; }
.stage-scene .scaffold { --sketch-delay: 3.5s; }
.stage-scene .form-write-1 { --sketch-delay: 1s; }
.stage-scene .form-write-2 { --sketch-delay: 2.4s; }
.stage-scene .form-write-3 { --sketch-delay: 3.8s; }
.stage-scene.is-animating .form-write-3 text { animation: sketch-reveal .7s ease 3.8s both; }
.stage-scene.is-animating .form-cursor { animation: form-pointing 6s ease both; }
.stage-scene .check-1 { --sketch-delay: 1.9s; }
.stage-scene .check-2 { --sketch-delay: 3.1s; }
.stage-scene .check-3 { --sketch-delay: 4.3s; }
.stage-scene.is-animating .mason-arm { transform-box: fill-box; transform-origin: 5% 20%; animation: sketch-trowel .48s ease-in-out 0s 23 both; }
.stage-scene.is-animating .builder-arm { transform-box: fill-box; transform-origin: 5% 95%; animation: sketch-hammer .42s ease-in-out 0s 26 both; }
.stage-art .crew,.stage-art .delivery-truck { opacity: 0; }
.scene-construction.is-animating .delivery-truck { animation: truck-arrival 10s linear both; }
.scene-construction.is-animating .crew-delivery { animation: crew-delivery 10s linear both; }
.scene-construction.is-animating .crew-lower { animation: crew-lower 10s linear both; }
.scene-construction.is-animating .crew-upper { animation: crew-upper 10s linear both; }
.scene-construction.is-animating .crew-roof { animation: crew-roof 10s linear both; }
.stage-scene.is-animating .arrive { animation: stage-arrive 1.3s ease-out both; }
.stage-scene.is-animating .last.arrive { animation-delay: 1.4s; }
.scene-estimate .estimate-calculator { --sketch-delay: 1.2s; }
.scene-estimate.is-animating .estimate-calculator { animation-duration: .4s; animation-delay: 1.2s; }
.scene-estimate .estimate-check-1 { --sketch-delay: 2.1s; }
.scene-estimate .estimate-check-2 { --sketch-delay: 2.6s; }
.scene-estimate .estimate-check-3 { --sketch-delay: 3.1s; }
.scene-estimate.is-animating .estimate-check .draw { animation-duration: .3s; }
.scene-questionnaire.is-animating .draw { animation-duration: 1.2s; }
.scene-questionnaire.is-animating .form-write-1 .draw,
.scene-questionnaire.is-animating .form-write-2 .draw { animation-duration: 1.4s; }
.scene-questionnaire.is-animating .form-write-3 .draw { animation-duration: .7s; }
.scene-estimate.is-animating .draw { animation-duration: 1s; }
.scene-estimate .late { --sketch-delay: .6s; }
.scene-estimate.is-animating .late > .draw { animation-duration: .8s; }
.scene-estimate.is-animating .estimate-calculator .draw { animation-duration: .4s; }
.scene-contract.is-animating .draw { animation-duration: 1.2s; }
.scene-contract.is-animating .late .draw { animation-duration: 1.4s; }
.scene-contract .handshake { --sketch-delay: 2.2s; }
.stage-experience.is-held .stage-scene * { animation-play-state: paused; }
.stage-caption { grid-column: 1 / -1; min-height: 74px; padding-top: 12px; }
.stage-caption h3 { font-size: clamp(23px,2.25vw,30px); margin: 10px 0 0; line-height: 1.25; color: var(--stage-gold); }
.stage-step { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid #dfbd7866; background: #080808; color: var(--stage-gold); cursor: pointer; touch-action: manipulation; }
.stage-step:active { background: #dfbd781c; border-color: var(--stage-gold); }
.stage-step:focus-visible { outline: 2px solid var(--stage-gold); outline-offset: 4px; }
.stage-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stage-timeline { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 6px; margin: 26px 0 20px; }
.stage-timeline > span { display: block; height: 2px; background: #dfbd7826; overflow: hidden; }
.stage-timeline i { display: block; height: 100%; background: var(--stage-gold); transform: scaleX(0); transform-origin: left; }
.stage-timeline .is-past i { transform: scaleX(1); }
.stage-controls { grid-column: 2; grid-row: 4; display: flex; align-items: center; gap: 12px; }
.stage-signature { grid-column: 1; grid-row: 4; font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--stage-gold); opacity: .7; }
.stage-pause { min-height: 44px; padding: 8px 13px; border: 1px solid #dfbd7866; background: #080808; color: var(--stage-gold); font-size: 12px; }
.stage-pause:hover { border-color: var(--stage-gold); }
.stage-pause:focus-visible { outline: 2px solid var(--stage-gold); outline-offset: 4px; }
@keyframes stage-draw { to { stroke-dashoffset: 0; } }
@keyframes plot-garage-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes stage-arrive { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sketch-reveal { from { opacity: 0; } }
@keyframes consultation-nod { 0%,48%,100% { transform: rotate(0); } 18%,30% { transform: rotate(1.6deg); } 67%,77% { transform: rotate(-.7deg); } }
@keyframes sketch-handshake { from { opacity: 0; transform: translateY(6px); } 60% { opacity: 1; transform: translateY(0); } 80% { transform: translateY(3px); } to { transform: translateY(0); } }
@keyframes form-pointing { 0.000000% { opacity: 0; transform: translate(40px,-30px); } 16.666667% { opacity: 1; transform: translate(0,0); } 36.666667% { opacity: 1; transform: translate(0,0); } 40.000000% { opacity: 1; transform: translate(0,55px); } 58.333333% { opacity: 1; transform: translate(0,55px); } 63.333333% { opacity: 1; transform: translate(161px,109px); } 73.333333% { opacity: 1; transform: translate(161px,109px); } 80.000000% { opacity: 1; transform: translate(126px,145px); } 85.000000% { opacity: 1; transform: translate(126px,145px) scale(.85); } 90.000000% { opacity: 1; transform: translate(126px,145px); } 100.000000% { opacity: 0; transform: translate(140px,157px); } }
@keyframes truck-arrival { 0.000000% { transform: translateX(-430px); opacity: 0; animation-timing-function: ease-out; } 8.000000% { transform: translateX(0); opacity: 1; } 20.000000% { transform: translateX(0); opacity: 1; animation-timing-function: ease-in; } 30.000000% { transform: translateX(560px); opacity: 0; } 100.000000% { transform: translateX(560px); opacity: 0; } }
@keyframes crew-delivery { 0.000000% { opacity: 0; } 10.000000% { opacity: 0; } 12.000000% { opacity: 1; } 24.000000% { opacity: 1; } 28.000000% { opacity: 0; } 100.000000% { opacity: 0; } }
@keyframes crew-lower { 0.000000% { opacity: 0; } 28.000000% { opacity: 0; } 29.000000% { opacity: 1; } 37.000000% { opacity: 1; } 38.000000% { opacity: 0; } 100.000000% { opacity: 0; } }
@keyframes crew-upper { 0.000000% { opacity: 0; } 44.000000% { opacity: 0; } 45.000000% { opacity: 1; } 53.000000% { opacity: 1; } 54.000000% { opacity: 0; } 100.000000% { opacity: 0; } }
@keyframes crew-roof { 0.000000% { opacity: 0; } 62.000000% { opacity: 0; } 63.000000% { opacity: 1; } 71.000000% { opacity: 1; } 72.000000% { opacity: 0; } 100.000000% { opacity: 0; } }
@keyframes construction-materials { 0.000000% { opacity: 0; } 14.000000% { opacity: 0; } 16.000000% { opacity: 1; } 68.000000% { opacity: 1; } 74.000000% { opacity: 0; } 100.000000% { opacity: 0; } }
@keyframes construction-scaffolds { 0.000000% { opacity: 0; } 42.000000% { opacity: 0; } 44.000000% { opacity: 1; } 72.000000% { opacity: 1; } 74.000000% { opacity: 0; } 100.000000% { opacity: 0; } }
@keyframes sketch-trowel { 0%,100% { transform: rotate(-4deg); } 45% { transform: rotate(9deg); } }
@keyframes sketch-hammer { 0%,100% { transform: rotate(-5deg); } 35% { transform: rotate(10deg); } 55% { transform: rotate(-7deg); } }
@media(min-width:901px) and (max-height:740px) { .stage-theatre { padding: 20px 28px; top: 14px; } .stage-art { max-height: 34vh; } .stage-caption { min-height: 76px; padding-top: 16px; } .stage-timeline { margin: 18px 0 8px; } }
@media(max-width:900px) {
  .stage-experience { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .stage-route { min-width: 0; overflow-wrap: anywhere; }
  .stage-theatre { position: static; grid-row: 1; width: 100%; max-width: 600px; justify-self: center; }
  .stage-art { max-height: 300px; margin-top: 0; }
  .stage-route li { padding: 20px 8px 20px 26px; }
  .stage-route h2 { font-size: 23px; }
  .stage-route p { font-size: 15px; }
}
@media(max-width:400px) { .stage-theatre { padding: 12px 0; } .stage-controls { gap: 8px; } .stage-signature { font-size: 10px; } .stage-caption h3 { font-size: 23px; } }
@media(max-width:900px), (hover:none) {
  .stage-theatre { grid-template-columns: minmax(0,1fr); }
  .stage-caption { grid-row: 2; min-height: 0; padding-top: 6px; }
  .stage-caption h3 { margin: 0; min-width: 0; min-height: 2.5em; overflow-wrap: anywhere; text-align: center; }
  .stage-controls { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 10px; width: min(100%,300px); margin: 14px auto 0; }
  .stage-step:not([hidden]) { display: inline-grid; place-items: center; }
  .stage-pause { width: 100%; min-width: 0; padding: 8px; line-height: 1.3; overflow-wrap: anywhere; }
  .stage-timeline { grid-row: 4; margin: 22px 0 18px; }
  .stage-signature { grid-column: 1; grid-row: 5; text-align: center; }
  .stage-art { margin-top: 16px; margin-bottom: 20px; }
}
@media(max-width:320px) {
  .stage-controls { gap: 6px; }
  .stage-pause { font-size: 11px; padding: 6px 3px; }
  .stage-timeline { gap: 4px; }
}
@media(prefers-reduced-motion:reduce) { .stage-experience *, .stage-experience *:before { animation: none !important; transition: none !important; } .stage-scene .draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; } }