/* The first-start animation stays local to the film, with one quiet playback control. */
.motion-frame .video-status{position:absolute;top:50%;left:50%;z-index:3;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 32px);padding:14px 18px;transform:translate(-50%,-50%);background:#0016c9;color:#fff;font:500 .875rem/1.4 Poppins,Arial,sans-serif;pointer-events:none;box-shadow:0 3px 18px #07101d22}
.motion-frame .video-status[hidden]{display:none!important}
.video-status-bars{display:flex;align-items:center;gap:4px;height:24px;flex:none}
.video-status-bars i{display:block;width:4px;height:18px;background:currentColor;transform-origin:center;opacity:.85}
.video-status-bars i:nth-child(2){height:24px}
.video-status-bars i:nth-child(3){height:14px}
.motion-frame[data-video-state="error"] .video-status-bars{display:none}
.motion-frame[data-video-enhanced] [data-video-toggle]{position:absolute;top:auto;left:auto;right:16px;bottom:16px;z-index:4;display:grid;place-items:center;min-width:44px;width:44px;min-height:44px;height:44px;padding:0;gap:0;border:1px solid #ffffff75;border-radius:50%;background:#07101d99;color:#fff;transform:none;box-shadow:none;transition:opacity .2s,background .2s}
.motion-frame[data-video-enhanced] [data-video-toggle]:hover{background:#0016c9}
.motion-frame[data-video-enhanced] [data-video-toggle]>.icon{display:none}
.motion-frame[data-video-enhanced] [data-video-label]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.video-control-glyph{display:block;position:relative;width:18px;height:18px}
.video-control-glyph:before{content:"";position:absolute;left:5px;top:2px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor}
.motion-frame[data-video-state="playing"] .video-control-glyph:before,.motion-frame[data-video-state="loading"] .video-control-glyph:before{left:3px;top:2px;width:12px;height:14px;border:0;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)}
.motion-frame[data-video-state="error"] .video-control-glyph:before{left:2px;top:2px;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;background:none}
.motion-frame[data-video-state="error"] .video-control-glyph:after{content:"";position:absolute;right:0;top:0;border:4px solid transparent;border-bottom-color:currentColor;transform:rotate(35deg)}
.story-film-frame[data-video-enhanced][data-video-state="idle"] [data-video-toggle],.workspace-film[data-video-enhanced][data-video-state="idle"] [data-video-toggle]{top:50%;left:50%;right:auto;bottom:auto;width:56px;height:56px;transform:translate(-50%,-50%);background:#0016c9}
@media(hover:hover) and (pointer:fine){
 .motion-frame[data-video-state="playing"] [data-video-toggle]{opacity:0;pointer-events:none}
 .motion-frame[data-video-state="playing"]:hover [data-video-toggle],.motion-frame[data-video-state="playing"] [data-video-toggle]:focus-visible{opacity:1;pointer-events:auto}
}
@media(prefers-reduced-motion:no-preference){
 .motion-frame[data-video-state="loading"] .video-status-bars i{animation:film-mechanism .9s ease-in-out 3}
 .motion-frame[data-video-state="loading"] .video-status-bars i:nth-child(2){animation-delay:.15s}
 .motion-frame[data-video-state="loading"] .video-status-bars i:nth-child(3){animation-delay:.3s}
 @keyframes film-mechanism{0%,100%{transform:scaleY(1);opacity:.85}45%{transform:scaleY(.35);opacity:.4}}
}
@media(prefers-reduced-motion:reduce){.video-status-bars i{animation:none!important}}

/* Homepage film: the Blue Garage engine-room console covers the player while the film loads,
   holds on first start, then lifts like the garage door. No playback control is drawn;
   pointer clicks reach the page beneath and the keyboard can still pause the film. */
.motion-frame[data-film-console]{--fe-mono:ui-monospace,SFMono-Regular,Consolas,monospace}
.motion-frame[data-film-console]:not([data-video-enhanced]) [data-video-toggle]{display:none}
.motion-frame[data-film-console][data-video-enhanced] [data-video-toggle]{position:absolute;inset:0;z-index:5;display:block;width:auto;height:auto;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;transform:none;box-shadow:none;transition:none}
.motion-frame[data-film-console][data-video-state] [data-video-toggle]{opacity:1;pointer-events:none;cursor:default}
.motion-frame[data-film-console][data-video-state] [data-video-toggle]:focus-visible{outline:3px solid #fa8e32;outline-offset:-3px;pointer-events:none}
.motion-frame[data-film-console] [data-video-toggle]:focus-visible [data-video-label]{top:30px;left:max(22px,var(--gutter));width:auto;height:auto;margin:0;padding:8px 12px;overflow:visible;clip-path:none;background:#fff;color:#0016c9;font:500 .75rem/1.2 var(--fe-mono);letter-spacing:.08em;text-transform:uppercase}

.film-engine{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;container-type:size;color:#fff;font:400 11px/1.5 var(--fe-mono);-webkit-font-smoothing:antialiased}
/* Page image rules (crops, minimum heights) must not reach the console artwork. */
.motion-frame .film-engine img{position:static;min-width:0;min-height:0;max-width:none;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;clip-path:none;filter:none;transform:none;opacity:1}

/* Console: cobalt blueprint grid on a slatted roller door with a bottom rail. */
.fe-door{position:absolute;inset:0;display:none;transform-origin:50% 50%;background:
 radial-gradient(circle at var(--fe-x) var(--fe-y),#3346ff80 0,#0016c900 var(--fe-glow)),
 linear-gradient(#ffffff1c 1px,transparent 1px) 0 0/120px 120px,
 linear-gradient(90deg,#ffffff1c 1px,transparent 1px) 0 0/120px 120px,
 linear-gradient(#ffffff0d 1px,transparent 1px) 0 0/24px 24px,
 linear-gradient(90deg,#ffffff0d 1px,transparent 1px) 0 0/24px 24px,
 linear-gradient(165deg,#0016c9 0,#0011a6 55%,#000c70 100%)}
.fe-door:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,#00000000 0 31px,#00000026 31px 32px,#ffffff0f 32px 33px),linear-gradient(0deg,#ffffff 0 3px,#0016c9 3px 7px,#ffffff59 7px 8px,transparent 8px)}
.motion-frame:is([data-film-door="boot"],[data-film-door="lift"]) .fe-door{display:block}
/* A dark screen behind the power-on, so the film is never glimpsed before the lift. */
.motion-frame[data-film-door="boot"] .film-engine{background:#000633}

.fe-top{position:absolute;top:22px;left:max(22px,var(--gutter));font-size:10px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.fe-top span:before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;background:#fff;vertical-align:1px}


/* Terminal: the engine-room brief types line by line; older lines scroll out of the top. */
.fe-code{position:absolute;left:max(22px,var(--gutter));bottom:26px;display:flex;flex-direction:column;justify-content:flex-end;height:calc(var(--fe-rows,5) * 1.6em);padding-left:12px;border-left:1px solid #ffffff59;overflow:hidden;font-size:10px;line-height:1.6;color:#e4e8ff}
.fe-line{display:block;flex:none;width:calc(var(--chars) * 1ch + .6em);max-width:100%;max-height:1.6em;overflow:hidden;white-space:pre;border-right:.6em solid #fff0}
.fe-c{color:#ffffff8f}.fe-v{color:#fff;font-weight:700}.fe-f{color:#c9d0ff}.fe-s{color:#fff}

/* ECU feed: a fast boot log scrolling in the hero's empty lower-right corner. */
.fe-ecu{position:absolute;right:max(22px,var(--gutter));bottom:26px;width:min(60cqw,300px);height:calc(var(--fe-ecu-rows,9) * 1.5em);overflow:hidden;padding:0 10px;border-right:1px solid #ffffff59;font-size:9.5px;line-height:1.5;letter-spacing:.04em;color:#c9d0ff;text-align:left;-webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}
.fe-ecu-feed{display:flex;flex-direction:column;transform:translateY(calc((var(--fe-ecu-rows,9) - var(--lines)) * 1.5em))}
.fe-ecu-feed span{display:block;white-space:pre;overflow:hidden;text-overflow:clip}
.fe-ecu b{color:#fff;font-weight:700}

/* Blue Garage mark: where the start-up centres, fading up as the screen powers on. */
.fe-mark{position:absolute;left:var(--fe-x);top:var(--fe-y);width:calc(var(--fe-size) * .72);transform:translate(-50%,-50%)}
.fe-mark img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px #3346ffb3)}

/* Real media facts, bottom right; the live status sits with the engine-room label. */
.fe-readout{position:absolute;display:none;right:max(22px,var(--gutter));bottom:30px;margin:0;gap:4px 18px;flex-wrap:wrap;justify-content:flex-end;max-width:52%;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.fe-readout>div{display:flex;gap:7px}
.fe-readout>div[hidden]{display:none}
.fe-readout dt{opacity:.62}
.fe-readout dd{margin:0;text-transform:none;letter-spacing:.04em}
.fe-status{position:absolute;top:58px;left:max(22px,var(--gutter));z-index:1;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 8px;background:#000c70d9;color:#fff;font:500 11px/1.3 var(--fe-mono);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 0 1px #ffffff40}
.fe-status[hidden]{display:none!important}
/* The start-up speaks its status to assistive technology only; nothing is drawn. */
.motion-frame .fe-status:not([hidden]){width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none}
.fe-status-bars{display:flex;align-items:flex-end;gap:2px;height:12px;flex:none}
.fe-status-bars i{display:block;width:3px;height:100%;background:currentColor;transform-origin:bottom}
.fe-status-bars i:nth-child(2){height:70%}
.fe-status-bars i:nth-child(3){height:45%}

/* Portrait: the turbine takes the top-right corner, clear of the headline; the brief sits
   above the fixed mobile contact bar. Landscape: status top right, turbine beside the
   headline, brief bottom left. Heights set how many lines of the brief stay in view. */
.fe-door{--fe-x:50%;--fe-y:46%;--fe-size:min(88cqw,62cqh);--fe-glow:42%}
/* Phones: the corner feed takes the gap; the brief needs the width, so it steps aside. */
@container (max-width:539px){.fe-code{display:none}}
@container (min-width:540px){.fe-ecu{bottom:58px;--fe-ecu-rows:8}}
@container (orientation:portrait) and (min-height:880px){.fe-code{--fe-rows:11}}
@container (orientation:portrait) and (max-height:699px){.fe-code{display:none}.fe-ecu{--fe-ecu-rows:7}}
@container (min-width:540px){.fe-readout{display:flex}.fe-readout>div:is(:nth-child(1),:nth-child(2)){display:none}}
@container (orientation:landscape){
 .fe-door{--fe-x:50%;--fe-y:46%;--fe-size:min(64cqw,70cqh)}
 .fe-status{top:18px;left:auto;right:max(22px,var(--gutter))}
 .fe-code{--fe-rows:3}
}
@container (orientation:landscape) and (min-width:1120px){.fe-door{--fe-size:min(100cqh,68cqw);--fe-glow:40%}.fe-code{font-size:11px}}
@container (orientation:landscape) and (min-height:760px){.fe-code{--fe-rows:4}}
@container (orientation:landscape) and (min-height:900px){.fe-code{--fe-rows:7}}
@container (min-width:1100px){.fe-readout>div:is(:nth-child(1),:nth-child(2)){display:flex}.fe-readout>div[hidden]{display:none}}
/* Phone-sized landscape (the 16:9 hero on phones): the logo alone, large and centred. */
@container (orientation:landscape) and (max-height:320px){.fe-door{--fe-y:52%;--fe-size:min(96cqw,150cqh)}.fe-code,.fe-ecu{display:none}}

/* Timeline: power on, spin up, light Space / Tools / Expertise / Market, then lift. */
@media(prefers-reduced-motion:no-preference){
 .motion-frame:is([data-film-door="boot"],[data-film-door="lift"]) .fe-door{animation:fe-power .36s cubic-bezier(.2,.8,.2,1) backwards}
 .motion-frame[data-film-door="lift"] .fe-door{animation:fe-power .36s cubic-bezier(.2,.8,.2,1) backwards,fe-lift .9s cubic-bezier(.65,0,.3,1) forwards}
 .motion-frame:is([data-film-door="boot"],[data-film-door="lift"]) :is(.fe-top,.fe-readout){animation:fe-rise .45s .15s ease-out backwards}
 .motion-frame:is([data-film-door="boot"],[data-film-door="lift"]) .fe-line{animation:fe-grow .12s ease-out var(--at) backwards,fe-type var(--dur) steps(var(--chars)) var(--at) backwards,fe-caret var(--dur) step-end var(--at)}
 .motion-frame:is([data-film-door="boot"],[data-film-door="lift"]) .fe-ecu-feed{animation:fe-ecu 2.6s steps(var(--lines)) .3s backwards}
 .motion-frame:is([data-film-door="boot"],[data-film-door="lift"]) .fe-mark{animation:fe-mark .6s .15s cubic-bezier(.2,.8,.2,1) backwards,fe-mark-ignite .6s 2.7s ease-out}
 @keyframes fe-mark{from{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
 @keyframes fe-mark-ignite{35%{filter:brightness(1.5) drop-shadow(0 0 30px #aab6ff)}}
 @keyframes fe-power{0%{transform:scaleY(.006);filter:brightness(4)}55%{transform:scaleY(1.015);filter:brightness(1.6)}100%{transform:none;filter:none}}
 @keyframes fe-lift{0%{transform:none}14%{transform:translateY(1.2%)}100%{transform:translateY(-102%)}}
 @keyframes fe-rise{from{opacity:0;transform:translateY(8px)}}
 @keyframes fe-fade{from{opacity:0}}
 @keyframes fe-grow{from{max-height:0}}
 @keyframes fe-ecu{from{transform:translateY(calc(var(--fe-ecu-rows,9) * 1.5em))}}
 @keyframes fe-type{from{width:0}}
 @keyframes fe-caret{0%,100%{border-right-color:#fff}}
 @keyframes fe-meter{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
}
@media(prefers-reduced-motion:reduce){.film-engine *,.film-engine *:before,.film-engine *:after{animation:none!important;transition:none!important}}

.home-hero-media .home-video{filter:saturate(1.08) contrast(1.06)}