/* Scoped Home film. Every layout and playback selector belongs to this host. */
#cinema{--cinema-navy:#061521;--cinema-paper:#f4f2eb;--cinema-blue:#b0cee0;--cinema-metal:#be9560;--cinema-inset:max(var(--gutter,24px),calc((100% - var(--content,1320px)) / 2));position:relative;background:var(--cinema-navy);color:var(--cinema-paper);padding-top:var(--header-h,92px);font-family:Manrope,system-ui,sans-serif;isolation:isolate}
#cinema *{box-sizing:border-box}
#cinema [hidden]{display:none!important}
#cinema #top{position:absolute;top:0;left:0;scroll-margin-top:var(--header-h,92px)}
#cinema .cinema-stage{position:relative;overflow:clip;height:calc(100svh - var(--header-h,92px) - 128px);min-height:480px;background:#050b1a;outline:none;contain:layout paint}
#cinema .cinema-photo{position:absolute;top:0;left:0;width:2000px;height:1333px;max-width:none;transform-origin:0 0;pointer-events:none}
/* CSS-only opening remains centered before layout and when JavaScript is unavailable. */
#cinema:not([data-frame]) .cinema-photo{width:100%;height:100%;object-fit:cover;object-position:50.05% 49.15%}
/* The LED layers share the photograph's exact transform and affect only its tower display. */
#cinema .cinema-screen{position:absolute;top:0;left:0;width:2000px;height:1333px;transform-origin:0 0;pointer-events:none;visibility:hidden;-webkit-mask:url(#cinema-led-surface);mask:url(#cinema-led-surface);--led-portrait:0;--led-dark:0;--led-scan:0;--led-y:10%}
#cinema .cinema-led-defs{position:absolute;width:0;height:0;overflow:hidden}
#cinema .cinema-screen>img{display:block;width:100%;height:100%;max-width:none;opacity:var(--led-portrait)}
#cinema .cinema-led-band{position:absolute;z-index:1;inset:0;opacity:0;background-image:var(--led-target);background-size:2000px 1333px;background-position:0 0;clip-path:inset(var(--band-top) 0 var(--band-bottom));-webkit-mask:url(#cinema-led-windows);mask:url(#cinema-led-windows)}
#cinema .cinema-led-band::before{content:'';position:absolute;inset:0;background-image:var(--led-target);background-size:2000px 1333px;background-position:var(--band-shift,0px) 0;-webkit-mask:url(#cinema-led-pixel-area);mask:url(#cinema-led-pixel-area)}
#cinema .cinema-led-band::after{content:'';position:absolute;inset:0;opacity:var(--band-drop,0);background:repeating-linear-gradient(0deg,#061521ee 0 3px,#63839466 3px 4px,transparent 4px 9px),linear-gradient(90deg,#6cc7ee44,#b25e8244)}
#cinema .cinema-screen::before{content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(transparent calc(var(--led-y) - 1.2%),#b0cee070 var(--led-y),transparent calc(var(--led-y) + 1.2%));opacity:var(--led-scan)}
#cinema .cinema-screen::after{content:'';position:absolute;z-index:2;inset:0;background:#050914;opacity:var(--led-dark);-webkit-mask:url(#cinema-led-windows);mask:url(#cinema-led-windows)}
#cinema[data-frame="wide"] .cinema-photo{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
#cinema #cinema-film{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
#cinema .cinema-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#cinema .cinema-trace path{fill:none;stroke:var(--cinema-blue);stroke-width:2;opacity:0;filter:drop-shadow(0 0 6px #0b1730)}
#cinema .cinema-slate{position:absolute;z-index:2;inset:0;padding:clamp(24px,5vw,80px);padding-left:var(--cinema-inset);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:linear-gradient(90deg,rgba(3,7,16,.9),rgba(3,7,16,.56) 43%,rgba(3,7,16,.1) 68%,rgba(3,7,16,.3));transition:opacity .6s ease}
#cinema .cinema-slate h2{font:400 clamp(64px,8.5vw,150px)/.92 'DM Serif Display',Georgia,serif;letter-spacing:-.028em;margin:18px 0 0;max-width:7ch;color:var(--cinema-paper)}
#cinema .cinema-slate h2 span{color:var(--cinema-metal)}
#cinema .cinema-kicker{font:650 12px/1.4 Manrope,system-ui,sans-serif;letter-spacing:.19em;text-transform:uppercase;color:var(--cinema-blue);margin:0}
#cinema .cinema-deck{font-size:clamp(15px,1.3vw,20px);line-height:1.6;margin:24px 0;max-width:32ch;color:#e0e7ec}
#cinema .cinema-meta{font-size:13px;letter-spacing:.1em;color:#c3d1da;margin:14px 0 0}
#cinema button,#cinema a{touch-action:manipulation}
#cinema a{color:inherit;text-decoration:none}
#cinema button{font:600 13px/1.2 Manrope,system-ui,sans-serif;border:0;border-radius:0;cursor:pointer;color:inherit;background:none;min-height:44px}
#cinema button:disabled{opacity:.45;cursor:default}
#cinema .cinema-button{background:var(--cinema-paper);color:var(--cinema-navy);padding:14px 22px;min-height:48px;display:inline-flex;gap:20px;align-items:center}
#cinema :is(a,button,input):focus-visible{outline:2px solid var(--cinema-blue);outline-offset:5px}
#cinema :is(a,button):hover{color:#fff}
#cinema .cinema-button:hover{background:#bad3e0;color:var(--cinema-navy)}
/* Play fades the opening out; the heading and button keep their place until the fade has finished, then the heading stays for assistive technology. */
#cinema:is([data-mode="idle"],[data-mode="playing"],[data-mode="paused"],[data-mode="ended"]) .cinema-slate{opacity:0;pointer-events:none}
#cinema:is([data-mode="idle"],[data-mode="playing"],[data-mode="paused"],[data-mode="ended"]) .cinema-slate h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);transition-property:position,width,height,overflow,clip-path;transition-duration:0s;transition-delay:.6s;transition-behavior:allow-discrete}
#cinema:not([data-mode="idle"]) .cinema-idle{display:none}
#cinema .cinema-card{position:absolute;z-index:1;left:var(--cinema-inset);bottom:clamp(22px,5vh,64px);width:min(43%,500px);opacity:0;visibility:hidden;pointer-events:none;color:var(--cinema-paper)}
#cinema .cinema-card::before{content:'';position:absolute;z-index:-1;inset:-168px -224px -56px -200px;background:radial-gradient(closest-side,rgba(3,7,16,.86),rgba(3,7,16,.76) 60%,rgba(3,7,16,.66));--feather:linear-gradient(90deg,transparent,#00000014 24px,#00000080 48px,#000000eb 72px,#000 96px,#000 calc(100% - 224px),#000000eb calc(100% - 168px),#00000080 calc(100% - 112px),#00000014 calc(100% - 56px),transparent),linear-gradient(0deg,transparent,#00000014 14px,#00000080 28px,#000000eb 42px,#000 56px,#000 calc(100% - 168px),#000000eb calc(100% - 126px),#00000080 calc(100% - 84px),#00000014 calc(100% - 42px),transparent);-webkit-mask:var(--feather);mask:var(--feather);-webkit-mask-composite:source-in;mask-composite:intersect}
/* Wide frames: the panel starts beyond the stage's left edge (never nearer than before), so it reads as a soft left-side scrim with no corner. */
#cinema[data-frame="wide"] .cinema-card::before{left:min(-200px,calc(-120px - max(var(--gutter,24px),(100vw - var(--content,1320px)) / 2)))}
#cinema .cinema-card h2{font:400 clamp(34px,3.6vw,65px)/1.04 'DM Serif Display',Georgia,serif;letter-spacing:-.02em;margin:13px 0;color:inherit;text-wrap:balance}
#cinema .cinema-card>p:not(.cinema-kicker){font-size:clamp(15px,1.08vw,17px);line-height:1.6;max-width:38ch;margin:0;color:#e0e7ec}
#cinema .cinema-roles{list-style:none;padding:0;margin:20px 0 0;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
#cinema .cinema-roles li{flex:1 1 130px;max-width:160px}
#cinema .cinema-roles strong{display:block;font-size:15px;font-weight:650;line-height:1.35;letter-spacing:-.01em;color:#f4f2eb}
#cinema .cinema-roles span{display:block;font-size:13px;line-height:1.5;margin-top:4px;color:#e0e7ec}
#cinema .cinema-controls{display:flex;align-items:center;gap:16px;min-height:64px;padding:8px var(--cinema-inset);background:#050e17;color:#d4e0e7}
#cinema .cinema-controls>button{padding:0 8px;white-space:nowrap}
#cinema #cinema-toggle{min-width:78px;width:auto;border:1px solid #6a7b86;flex:none}
#cinema[data-mode="ended"] #cinema-skip{display:none}
/* Desktop/tablet: reserve the controls row (invisible, unfocusable) until the film is ready, so the continuation bar does not jump. JS sets data-frame, so no-JS views are unaffected. */
@media(min-width:641px){#cinema[data-frame]:not([data-mode="stills"]) .cinema-controls[hidden]{display:flex!important;visibility:hidden}}
#cinema .cinema-chapters{display:flex;gap:14px;flex:1;min-width:0}
#cinema .cinema-chapters button{text-align:left;flex:1;display:flex;gap:7px;align-items:center;border-bottom:2px solid #374a57;font-size:13px;min-width:0;padding:0}
#cinema .cinema-chapters button[aria-current="true"]{border-color:var(--cinema-blue);color:#fff}
#cinema .cinema-chapters button b{font-weight:500;color:#9eb5c5}
#cinema .cinema-seek{width:100px;flex:0 1 100px}
#cinema .cinema-seek input{display:block;width:100%;height:44px;accent-color:var(--cinema-blue);cursor:pointer;background:none;margin:0}
#cinema #cinema-time{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
#cinema .cinema-continuation{display:flex;align-items:center;gap:32px;padding:8px var(--cinema-inset);min-height:64px;background:var(--cinema-navy);font-size:13px}
#cinema .cinema-continuation a{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:44px;color:#c9d7df}
#cinema .cinema-continuation .cinema-primary{color:var(--cinema-paper);font-weight:650}
#cinema .cinema-stills{padding:32px var(--cinema-inset) 56px}
#cinema .cinema-stills>p{font-size:14px;line-height:1.6;color:#c9d7df;max-width:52ch}
#cinema .cinema-stills ol{padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0}
#cinema .cinema-stills img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:18px}
#cinema .cinema-stills a>span{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--cinema-blue)}
#cinema .cinema-stills h2{font:400 34px/1.1 'DM Serif Display',Georgia,serif;margin:10px 0}
#cinema .cinema-stills li p{font-size:15px;line-height:1.6;color:#c9d7df}
#cinema .cinema-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* The shared header turns solid as soon as the stage reaches it. */
#cinema #hero-end{display:block;position:absolute;top:0;left:0;width:1px;height:1px}
#cinema[data-frame="tall"] .cinema-card{left:clamp(20px,4.4vw,84px);width:calc(100% - clamp(40px,8.8vw,168px));}
#cinema[data-frame="tall"] .cinema-card::before{inset:-76px -40px -40px;background:linear-gradient(0deg,#030710f0,#030710d9 62%,#030710a6 82%,transparent);-webkit-mask:none;mask:none}
#cinema .cinema-card[data-compact="true"]>p:not(.cinema-kicker){display:none}
#cinema .cinema-card[data-compact="true"] h2{font-size:clamp(28px,3.2vw,44px);margin:8px 0}
#cinema .cinema-card[data-compact="true"] .cinema-roles{margin-top:10px}
#cinema .cinema-card[data-short="true"]:not(.cinema-card-roles) h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Selected operating chapters remain a mix of supplied marks and names. */
#cinema .cinema-company-constellation{position:relative;list-style:none;display:grid;grid-template-columns:1.05fr 1.05fr .8fr;gap:15px 22px;align-items:center;padding:18px 0 0;margin:18px 0 0;border-top:1px solid #96b4c34d;max-width:500px}
/* One point on the line above each column; left stays auto so every point sits on its column's start. */
#cinema .cinema-company-constellation li:nth-child(-n+3)::before{content:'';position:absolute;top:-3px;width:4px;height:4px;border-radius:50%;background:#b0cee0}
#cinema .cinema-company-constellation li:first-child::before{top:-4px;width:6px;height:6px;border:1px solid #b0cee0;background:#071424}
#cinema .cinema-company-constellation li{display:flex;align-items:center;gap:6px;min-height:25px;min-width:0;font-size:15px;font-weight:650;line-height:1.3;letter-spacing:-.01em;color:#f4f2eb;text-shadow:0 1px 8px #030710}
#cinema .cinema-company-note{display:block;margin-top:14px;font-size:13px;line-height:1.5;color:#c7d8e3}
#cinema .cinema-sector{height:31px;width:86px;max-width:100%;fill:none;stroke:#b0cee0;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin:0 0 8px;opacity:.85}
#cinema .cinema-sector-label{display:block;min-height:36px;font-size:13px;font-weight:500;line-height:1.35;margin:0 0 8px;color:#c8dce7}
#cinema .cinema-card-roles .cinema-roles{gap:20px}
#cinema .cinema-initiatives{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid #96b4c34d;display:flex;gap:22px;align-items:flex-start}
#cinema .cinema-initiatives li{display:flex;gap:12px;align-items:center;flex:1;min-width:0}
#cinema .cinema-initiatives strong{display:block;font-size:15px;font-weight:650;line-height:1.35}
#cinema .cinema-initiatives div>span{display:block;font-size:13px;line-height:1.5;color:#d0dde5;margin-top:5px;white-space:nowrap}
/* Narrow columns break only after the role, never inside the phrase that follows it. */
#cinema .cinema-initiatives span span,#cinema .cinema-finale-mobile small>span{white-space:nowrap}
#cinema .cinema-card[data-compact="true"] .cinema-company-constellation{gap:10px 16px;margin-top:12px;padding-top:12px}
#cinema .cinema-card[data-compact="true"] .cinema-company-note{margin-top:9px}
#cinema .cinema-card-roles[data-compact="true"] .cinema-sector{display:none}
#cinema .cinema-card[data-compact="true"] .cinema-sector-label{margin-bottom:6px;min-height:32px}
#cinema .cinema-card[data-short="true"] .cinema-sector-label{min-height:0}
#cinema .cinema-card[data-short="true"] .cinema-company-note{font-size:13px}
/* The final scene: a title, the current boards one at a time, and the next chapter. */
/* The right edge keeps to the site grid but never comes left of 78% of the stage, where the rocket climbs on very wide screens. */
#cinema .cinema-finale{--boards-w:min(16.8%,260px);--finale-right:min(var(--cinema-inset),calc(22% - var(--boards-w)));position:absolute;inset:0;z-index:3;pointer-events:none;color:#f4f2eb;opacity:var(--finale-reveal,0)}
#cinema .cinema-finale::before{content:'';position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(0deg,rgba(5,14,23,.85),rgba(5,14,23,.5) 55%,transparent);pointer-events:none}
#cinema .cinema-finale a{pointer-events:auto;min-height:44px}
#cinema .cinema-finale-title{position:absolute;left:var(--cinema-inset);top:3.5%;width:49%;text-shadow:0 2px 16px #03071080}
#cinema .cinema-finale-title h2{font:400 clamp(42px,4.4vw,68px)/1.03 'DM Serif Display',Georgia,serif;letter-spacing:-.027em;margin:0;color:inherit}
#cinema .cinema-finale-title h2>span{color:#be9560}
#cinema .cinema-finale-responsibilities{position:absolute;right:var(--finale-right);top:25%;width:var(--boards-w);text-shadow:0 2px 12px #030710}
#cinema .cinema-finale-responsibilities .cinema-kicker{letter-spacing:.1em;font-size:12px;margin-bottom:18px;text-wrap:balance}
/* Board logos: each company's own mark in the standard one-colour ivory reversal (shapes and pixels untouched, never redrawn or recomposed); the alt text is the company name.
   One optical size: --logo-u is the height of the one-line marks, and Rocket Lab's stacked lockup stands 1.7 units tall so its wordmark stays legible.
   While rotating, every entry keeps the same logo slot, so the role sits on the same line and nothing moves as the boards change. */
#cinema .cinema-finale-responsibilities{--logo-u:clamp(20px,3.1vw,34px)}
#cinema .cinema-boards-list .cinema-boards-logo{display:flex;align-items:flex-end;height:calc(var(--logo-u) * 1.7)}
#cinema .cinema-boards-logo img{display:block;width:auto;max-width:100%;height:calc(var(--logo-u) * var(--logo-k,1));object-fit:contain;object-position:left bottom}
#cinema .cinema-boards-logo .cinema-logo-rl{--logo-k:1.7}
#cinema .cinema-boards-logo .cinema-logo-sym{--logo-k:.96}
#cinema .cinema-boards-logo .cinema-logo-td{--logo-k:1.04}
#cinema .cinema-boards-logo .cinema-logo-ag{--logo-k:.82}
/* Each logo gets its own compositing layer: at some sub-pixel column positions (seen at 640x360, 2x) GPU Chromium dropped part of the Symbotic SVG (its upper mark and ®) once the cross-fade ended. */
#cinema .cinema-boards-logo img{transform:translateZ(0)}
#cinema .cinema-boards-list .cinema-boards-logo+span{margin-top:14px}
/* Finale: current boards, one at a time after the film ends; a static stacked list when rotation is off. */
#cinema .cinema-finale button,#cinema .cinema-finale-responsibilities{pointer-events:auto}
#cinema .cinema-boards-list{list-style:none;margin:0;padding:0}
#cinema .cinema-boards-list>li{margin:0}
#cinema .cinema-boards-list strong{display:block;font:400 clamp(24px,2vw,32px)/1.12 'DM Serif Display',Georgia,serif;color:#f4f2eb;letter-spacing:-.01em}
#cinema .cinema-boards-list span{display:block;font-size:13px;line-height:1.5;color:#cddde6;text-wrap:balance}
#cinema .cinema-boards-list strong+span{margin-top:8px;font-size:14px;font-weight:600;line-height:1.4;color:#eef3f5}
#cinema .cinema-boards-list .cinema-boards-duty{margin-top:3px}
#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list>li{border-top:1px solid #95afbe45;padding:7px 0 8px}
#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-kicker{margin-bottom:12px}
#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list strong{font-size:clamp(21px,1.7vw,27px)}
#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list strong+span{margin-top:5px;font-size:13px}
#cinema .cinema-finale-responsibilities[data-rotate="static"]{--logo-u:clamp(20px,1.6vw,24px)}
#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list .cinema-boards-logo{height:auto}
#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list .cinema-boards-logo+span{margin-top:8px}
/* The static list shows each chair line where the stage has room for it inside the stage and above the dock; cinema.js (fitBoards) measures that and sets
   data-fit: "full" shows every line, "role" keeps chair lines for assistive technology only, "tight" also the second half of Symbotic's title. */
#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-duty{margin-top:2px;line-height:1.35}
#cinema .cinema-finale-responsibilities[data-rotate="static"]:not([data-fit="full"]) .cinema-boards-duty,#cinema .cinema-finale-responsibilities[data-rotate="static"][data-fit="tight"] .cinema-boards-role-end{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
#cinema .cinema-finale-responsibilities[data-rotate="on"] .cinema-boards-list{display:grid;border-top:1px solid #95afbe45;padding-top:14px}
#cinema .cinema-finale-responsibilities[data-rotate="on"] .cinema-boards-list>li{grid-area:1/1;opacity:0;transition:opacity .45s ease}
#cinema .cinema-finale-responsibilities[data-rotate="on"] .cinema-boards-list>li[data-active]{opacity:1;transition:opacity .7s ease .4s}
#cinema .cinema-boards-meta{display:flex;align-items:center;gap:6px;margin-top:20px}
#cinema .cinema-boards-ticks{display:flex;gap:6px}
#cinema .cinema-boards-ticks i{display:block;width:18px;height:2px;background:#95afbe59;transition:background-color .7s ease .4s}
#cinema .cinema-boards-ticks i[data-active]{background:#f4f2eb}
#cinema .cinema-boards-toggle{width:44px;min-height:44px;height:44px;margin:-14px 0 -14px 2px;padding:0;display:grid;place-items:center;color:#cddde6}
#cinema .cinema-boards-toggle:focus-visible{outline-offset:-2px}
#cinema .cinema-boards-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
#cinema .cinema-boards-toggle .cinema-boards-play{fill:currentColor;stroke:none}
#cinema .cinema-boards-toggle:not([data-state="paused"]) .cinema-boards-play,#cinema .cinema-boards-toggle[data-state="paused"] .cinema-boards-pause{display:none}
#cinema .cinema-finale-mobile{display:none}
#cinema .cinema-finale-dock{position:absolute;left:39%;right:var(--finale-right);bottom:4.7%;text-shadow:0 2px 12px #030710}
#cinema .cinema-finale-dock>.cinema-kicker{letter-spacing:.1em;font-size:12px;margin-bottom:12px}
#cinema .cinema-finale-initiatives{display:grid;grid-template-columns:1fr 1fr;gap:32px}
#cinema .cinema-finale-initiatives a{display:block;border-top:1px solid #b6cad570;padding:10px 0 2px}
#cinema .cinema-finale-name{display:flex;align-items:center;justify-content:space-between;gap:12px;font:400 clamp(23px,2vw,32px)/1.15 'DM Serif Display',Georgia,serif;color:#f4f2eb}
#cinema .cinema-finale-name b{font:400 19px/1 Manrope,system-ui,sans-serif;color:#d4e4ed}
#cinema .cinema-finale-initiatives a:is(:hover,:focus-visible) .cinema-finale-name>span{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:6px}
#cinema .cinema-finale-initiatives a>span:last-child{display:block;font-size:15px;line-height:1.5;color:#e0e8ec;margin-top:7px}
#cinema[data-finale="visible"] .cinema-finale-title{transform:translateY(calc((1 - var(--finale-reveal,0)) * 12px))}
#cinema[data-finale="visible"] .cinema-finale-responsibilities,#cinema[data-finale="visible"] .cinema-finale-dock{transform:translateY(calc((1 - var(--finale-reveal,0)) * 18px))}
@media(min-width:1600px){#cinema .cinema-finale{--boards-w:min(17%,260px)}#cinema .cinema-finale-dock{left:38%}}
@media(max-width:1100px) and (min-width:641px){#cinema .cinema-initiatives{gap:16px}#cinema .cinema-initiatives li{display:block}#cinema .cinema-finale{--boards-w:min(17.5%,260px)}#cinema .cinema-boards-list strong{font-size:24px}#cinema .cinema-finale-name{font-size:23px}#cinema .cinema-finale-dock{left:39%}}
@media(max-width:640px){#cinema .cinema-company-constellation{gap:10px 12px;margin-top:12px;padding-top:12px;grid-template-columns:1fr 1fr .76fr}#cinema .cinema-company-constellation li{font-size:14px;min-height:25px}#cinema .cinema-company-note{font-size:13px;margin-top:10px}#cinema .cinema-card-roles .cinema-roles{gap:12px}#cinema .cinema-sector{height:27px;margin-bottom:6px}#cinema .cinema-sector-label{font-size:13px;min-height:35px;margin-bottom:7px}#cinema .cinema-initiatives{margin-top:12px;padding-top:12px;gap:20px}#cinema .cinema-initiatives li{display:block}#cinema .cinema-initiatives strong{font-size:14px}#cinema .cinema-initiatives div>span{font-size:13px;white-space:normal}#cinema .cinema-finale-title{left:20px;top:4%;width:42%;max-width:175px}#cinema .cinema-finale-title h2{font-size:clamp(33px,10vw,44px);line-height:1.04;max-width:8ch}#cinema .cinema-finale-responsibilities{left:54%;right:18px;top:55%;width:auto;max-width:none}#cinema .cinema-finale-responsibilities .cinema-kicker{font-size:12px;line-height:1.45;margin-bottom:7px;letter-spacing:.04em}#cinema .cinema-finale-dock{left:20px;right:20px;bottom:2.5%}#cinema .cinema-finale-dock>.cinema-kicker{font-size:12px;letter-spacing:.06em;margin-bottom:7px}#cinema .cinema-finale-initiatives{gap:18px;grid-template-columns:.9fr 1.1fr}#cinema .cinema-finale-initiatives a{padding-top:7px;min-height:44px}#cinema .cinema-finale-name{font-size:17px;line-height:1.2;gap:6px}#cinema .cinema-finale-name b{font-size:14px}#cinema .cinema-finale-initiatives a>span:last-child{font-size:13px;line-height:1.35;margin-top:4px}}
@media(max-width:360px){#cinema .cinema-company-constellation{gap:8px 10px;grid-template-columns:1.08fr 1fr .74fr}#cinema .cinema-company-constellation li{font-size:13px}#cinema .cinema-finale-title{left:16px;width:43%;top:3%}#cinema .cinema-finale-title h2{font-size:34px}#cinema .cinema-finale-responsibilities{left:56%;right:12px;top:53%}#cinema .cinema-finale-dock{left:16px;right:16px;bottom:2%}#cinema .cinema-finale-dock>.cinema-kicker{max-width:23ch}#cinema .cinema-finale-name{font-size:16px}#cinema .cinema-finale-initiatives{gap:12px}}
@media(max-width:640px){#cinema .cinema-finale::before,#cinema .cinema-finale-dock{display:none}#cinema[data-finale="visible"] .cinema-finale-mobile{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:8px 20px;padding:15px 20px 18px;background:radial-gradient(ellipse at 78% 0,#1c41505c,transparent 68%),#061521;color:#f4f2eb;opacity:var(--finale-reveal,0)}#cinema .cinema-finale-mobile>.cinema-kicker{grid-column:1/-1;font-size:12px;letter-spacing:.08em}#cinema .cinema-finale-mobile a{min-height:44px;display:block;padding-top:8px;border-top:1px solid #95afbe60}#cinema .cinema-finale-mobile a>span{display:flex;justify-content:space-between;gap:8px;font:400 20px/1.15 'DM Serif Display',Georgia,serif}#cinema .cinema-finale-mobile b{font:400 15px/1.4 Manrope,system-ui,sans-serif;color:#cbdce6}#cinema .cinema-finale-mobile small{display:block;font-size:13px;line-height:1.4;margin-top:6px;color:#dae5eb}}
@media(max-width:360px){#cinema[data-finale="visible"] .cinema-finale-mobile{padding:14px 16px 18px;gap:8px 16px}#cinema .cinema-finale-mobile a>span{font-size:18px}}
@media(max-width:640px){#cinema .cinema-boards-list strong{font-size:20px;line-height:1.15}#cinema .cinema-boards-list strong+span{margin-top:5px;font-size:13px;line-height:1.35}#cinema .cinema-boards-list .cinema-boards-duty{line-height:1.35}#cinema .cinema-finale-responsibilities[data-rotate="on"] .cinema-boards-list{padding-top:8px}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list>li{padding:5px 0}#cinema .cinema-boards-meta{margin-top:18px}#cinema .cinema-finale-responsibilities{isolation:isolate}#cinema .cinema-finale-responsibilities::before{content:'';position:absolute;z-index:-1;inset:-44px -18px -36px -30px;background:radial-gradient(closest-side,#030b17eb 0%,#030b17cc 58%,#030b1700 100%);pointer-events:none}#cinema .cinema-card-origins[data-short="true"]>.cinema-kicker{display:none}}
/* Phones: the boards, logos and all, stay in the stage beside Merline and below the rocket (Mike, 15 Oct). The flame ends at about 52-53% of the
   stage height on every phone, so the column starts 24 px below 53%: nothing in it touches the rocket, and the kicker and rule sit between the flame and the logo.
   That puts the lower lines over brighter land, so the soft scrim behind the column is a little wider and denser than before (text stays >= 4.5:1).
   Short phones (stage at its 480 px minimum) tighten the column so it ends inside the stage; their static list keeps its label for screen readers only. */
@media(max-width:640px){#cinema .cinema-finale-responsibilities{--logo-u:24px;top:calc(53% + 24px)}#cinema .cinema-finale-responsibilities::before{inset:-44px -20px -44px -40px;background:radial-gradient(closest-side,#030b17f2 0%,#030b17e0 64%,#030b1700 100%)}#cinema .cinema-boards-list .cinema-boards-logo+span{margin-top:12px}#cinema .cinema-boards-meta{margin-top:14px}#cinema .cinema-finale-responsibilities[data-rotate="static"]{--logo-u:20px}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list>li{padding:3px 0}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-kicker{margin-bottom:5px}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list .cinema-boards-logo+span{margin-top:4px}}
@media(max-width:640px) and (max-height:760px){#cinema .cinema-finale-responsibilities{--logo-u:21px}#cinema .cinema-boards-list .cinema-boards-logo+span{margin-top:10px}#cinema .cinema-boards-meta{margin-top:12px}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-kicker{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}}
/* Phones up to 800 px tall keep the whole column, pause control included, inside the stage (its 44 px target stays fully on the film: it was cut off at 375x667 and, behind the next-chapter band, unreachable at 320 px wide).
   At 340 px wide and below the list label is kept for screen readers only while rotating, as it already is in the static list. */
@media(max-width:640px) and (max-height:800px){#cinema .cinema-finale-responsibilities .cinema-kicker{margin-bottom:4px}#cinema .cinema-finale-responsibilities[data-rotate="on"] .cinema-boards-list{padding-top:6px}#cinema .cinema-boards-list .cinema-boards-logo+span{margin-top:8px}#cinema .cinema-boards-meta{margin-top:8px}}
@media(max-width:340px){#cinema .cinema-finale-responsibilities[data-rotate="on"] .cinema-kicker{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}}
@media(max-width:340px){#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list>li{padding:2px 0}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list strong+span{line-height:1.25}}
@media(max-width:360px){#cinema[data-frame="tall"] .cinema-card-roles,#cinema .cinema-card-roles{left:10px;width:calc(100% - 20px)}#cinema .cinema-card-roles .cinema-roles{gap:8px}}
/* Tall desktop/tablet frames: at the right edge the column would sit within about 10 px of the rocket's body, too close for a logo.
   There the boards move under the title, left of the rocket and above Merline. (Phones keep the column beside Merline, under the rocket.) */
@media(min-width:641px){#cinema[data-frame="tall"] .cinema-finale-responsibilities{left:var(--cinema-inset);right:auto;top:calc(3.5% + min(4.6vw,70px) + 40px);width:min(300px,42%);--logo-u:clamp(20px,4vw,34px)}#cinema[data-frame="tall"] .cinema-finale-responsibilities[data-rotate="static"]{--logo-u:22px}}
/* Landscape phones and 200% zoom (<= 640 px wide, wide stage): the phone placement above would put the column, logo included, on the rocket.
   There the column keeps the landscape placement at the right edge, narrow enough and low enough to stay clear of the rocket's right edge and nose (logos measured >= 29 px clear while rotating and >= 35 px in the static list, whose label is hidden on short screens and so sits lower; at 16% the pause control still fits in a 360 px-high landscape view). */
@media(max-width:640px){#cinema[data-frame="wide"] .cinema-finale-responsibilities{left:auto;right:14px;top:16%;width:min(17.5%,104px);max-width:none;--logo-u:20px}#cinema[data-frame="wide"] .cinema-finale-responsibilities[data-rotate="static"]{top:37%}}
#cinema[data-mode="stills"] .cinema-stage{height:auto;min-height:440px}
#cinema[data-mode="stills"] .cinema-slate{position:relative;inset:auto;min-height:inherit;background:linear-gradient(90deg,#061521ed,#061521b8 35%,#06152129 56%,#06152140)}
@media(max-width:1100px) and (min-width:641px){#cinema .cinema-slate{background:linear-gradient(90deg,rgba(3,7,16,.9),rgba(3,7,16,.85) 50%,rgba(3,7,16,.35) 76%,rgba(3,7,16,.3))}}
@media(max-width:900px){#cinema .cinema-controls{gap:10px}#cinema .cinema-seek{flex-basis:80px}#cinema #cinema-time{display:none}#cinema .cinema-card{width:43%}#cinema .cinema-roles{gap:10px}#cinema .cinema-roles li{flex-basis:110px}#cinema .cinema-roles span{font-size:13px}}
@media(max-width:640px){#cinema .cinema-stage{height:calc(100svh - var(--header-h,76px) - 172px);min-height:460px}#cinema .cinema-slate{padding:28px;justify-content:flex-end;background:linear-gradient(0deg,#030710f5 0,#030710e6 48%,#030710b3 66%,#03071040 100%)}#cinema .cinema-slate h2{font-size:clamp(64px,19vw,92px)}#cinema .cinema-deck{font-size:15px;line-height:1.5;margin:20px 0}#cinema .cinema-slate .cinema-button{min-height:44px}#cinema .cinema-card{left:20px;bottom:20px;width:calc(100% - 40px)}#cinema .cinema-card h2{font-size:34px;margin:8px 0}#cinema .cinema-card>p:not(.cinema-kicker){font-size:15px;line-height:1.45;max-width:36ch}#cinema .cinema-roles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:13px}#cinema .cinema-roles li{min-width:0;max-width:none}#cinema .cinema-roles strong{font-size:15px}#cinema .cinema-roles span{font-size:13px;line-height:1.45;margin-top:3px}#cinema .cinema-controls{flex-wrap:wrap;padding:8px 16px;gap:4px 12px;min-height:0}#cinema .cinema-chapters{flex:1 1 calc(100% - 90px);gap:10px}#cinema .cinema-chapters button{font-size:13px;gap:5px}#cinema .cinema-seek{flex:1 1 120px;max-width:none}#cinema #cinema-skip{font-size:13px;margin-left:auto}#cinema .cinema-continuation{min-height:64px;padding:8px 20px;gap:12px;flex-wrap:wrap}#cinema .cinema-continuation a{font-size:13px;gap:8px;flex:1 1 auto}#cinema .cinema-stills ol{grid-template-columns:1fr;gap:24px}#cinema[data-mode="stills"] .cinema-stage{min-height:620px}}
/* The opening fills the space before playback controls are present. */
@media(max-width:640px){#cinema[data-mode="slate"] .cinema-stage{height:calc(100svh - var(--header-h,76px) - 64px)}}
@media(max-height:560px) and (min-aspect-ratio:1/1){#cinema .cinema-stage{height:360px;min-height:360px}#cinema .cinema-slate h2{font-size:60px}#cinema .cinema-deck{margin:14px 0;font-size:14px}#cinema .cinema-card h2{font-size:32px}#cinema .cinema-card>p:not(.cinema-kicker){font-size:15px}#cinema .cinema-finale::before{height:52%}#cinema .cinema-finale-responsibilities{top:16%;--logo-u:22px}#cinema .cinema-finale-responsibilities .cinema-kicker{margin-bottom:10px}#cinema .cinema-boards-meta{margin-top:12px}#cinema .cinema-finale-responsibilities[data-rotate="static"]{--logo-u:20px}#cinema .cinema-boards-list .cinema-boards-logo+span{margin-top:10px}#cinema .cinema-boards-list strong{font-size:22px}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list>li{padding:5px 0 6px}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list strong{font-size:19px}#cinema .cinema-finale-initiatives{gap:20px}#cinema .cinema-finale-name{font-size:19px;gap:8px}}
/* Short landscape screens a little over 710 px wide (720-740x360): the first logo was within 22-25 px of the rocket. A slightly lower column keeps it >= 24 px clear. */
@media(min-width:711px) and (max-height:560px) and (min-aspect-ratio:1/1){#cinema .cinema-finale-responsibilities{top:18%}}
@media(prefers-reduced-motion:reduce){#cinema .cinema-slate,#cinema .cinema-slate h2,#cinema #cinema-begin{transition:none!important}#cinema .cinema-boards-list>li,#cinema .cinema-boards-ticks i{transition:none!important}}
/* Act II lists the four current boards in a two-by-two grid: one row of four would squeeze each role into a column about 110 px wide.
   On phones the sector labels and the "Current boards" note give way (the list keeps that name for screen readers) so the card stays as low as the
   three-board card was, under the rocket on its pad. */
#cinema .cinema-card-roles .cinema-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
#cinema .cinema-card-roles .cinema-roles li{max-width:none;min-width:0}
@media(max-width:640px){#cinema .cinema-card-roles .cinema-roles{gap:8px 20px;margin-top:10px}#cinema .cinema-card-roles .cinema-sector-label,#cinema .cinema-card-roles .cinema-company-note{display:none}#cinema .cinema-card-roles .cinema-roles span{margin-top:2px;line-height:1.35}}
@media(max-width:360px){#cinema .cinema-card-roles .cinema-roles{gap:8px 14px}}
/* The shorter "Current boards" label sets on one line where the old label took two, which lifted the logos about 17 px towards the rocket.
   In landscape the column therefore starts one kicker line lower, so its logos sit where they did (>= 24 px clear of the rocket at 720-740x360). */
@media(max-height:560px) and (min-aspect-ratio:1/1){#cinema .cinema-finale-responsibilities{top:calc(16% + 17px)}}
@media(min-width:711px) and (max-height:560px) and (min-aspect-ratio:1/1){#cinema .cinema-finale-responsibilities{top:calc(18% + 17px)}}
@media(max-width:640px){#cinema[data-frame="wide"] .cinema-finale-responsibilities{top:calc(16% + 17px)}}
/* Four boards in the static (reduced-motion) list: a tighter rhythm and logos about 15% smaller than the rotating ones keep every entry's whole role
   (Symbotic's full title, Agility's "(private company)") inside the stage and clear of the dock; chair lines show where fitBoards finds room. */
#cinema .cinema-finale-responsibilities[data-rotate="static"]{--logo-u:clamp(15px,1.28vw,19px)}
#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list>li{padding:4px 0 5px}
#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list .cinema-boards-logo+span{margin-top:5px;line-height:1.35}
@media(max-width:640px){#cinema .cinema-finale-responsibilities[data-rotate="static"]{--logo-u:15px}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list>li{padding:1px 0}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list .cinema-boards-logo+span{margin-top:2px;line-height:1.25}}
/* Act II: Rocket Lab's and TD SYNNEX's chair lines (roles.json duties[0]) continue the role, as Symbotic's role already names its chair. On phones the
   chair lines cost no height (Symbotic's three-line role already sets each row's height), so the card stays where it was under the rocket on its pad;
   up to 380 px wide the card takes the 360 px geometry, so "Lead Independent Director" still sets on one line at 375 px. */
#cinema .cinema-card-roles .cinema-roles .cinema-roles-chair{margin-top:0;text-wrap:balance}
@media(max-width:380px){#cinema[data-frame="tall"] .cinema-card-roles,#cinema .cinema-card-roles{left:10px;width:calc(100% - 20px)}#cinema .cinema-card-roles .cinema-roles{gap:8px 14px}}
/* Finale: Symbotic's role ("Independent Director and Chair of the Nominating & Governance Committee") is split over its two lines; the second half is part of the
   title, not a duty, so .cinema-boards-role-end stays visible wherever the role does. Agility's role line is its exact roles.json role, "Board Director (private company)". */
#cinema .cinema-boards-list .cinema-boards-role-end{margin-top:3px}
@media(max-width:640px){#cinema .cinema-boards-list .cinema-boards-role-end{line-height:1.35}}
#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-role-end{margin-top:2px;line-height:1.35}
@media(max-width:640px){#cinema .cinema-finale-responsibilities[data-rotate="static"] :is(.cinema-boards-role-end,.cinema-boards-duty){margin-top:0;line-height:1.25}}
/* The pause control keeps its whole 44 px target in narrow columns (it shrank to 12-39 px at 568-780 px wide): the ticks give way instead.
   The column also stacks above the dock, so where the two could still meet the control wins the tap. */
#cinema .cinema-boards-toggle{flex:none}
#cinema .cinema-boards-ticks{flex:0 1 auto;min-width:0}
#cinema .cinema-boards-ticks i{flex:0 1 18px;min-width:8px}
#cinema .cinema-finale-responsibilities{z-index:1}
/* Short landscape screens and narrow short windows (641-780 px wide, up to 700 px tall) have no room in the stage for both the board column and the
   next-chapter dock: the dock's links covered the pause control and the column's last lines. There the two links move to the band directly under the
   stage, as on phones, and the column keeps its whole text (the stage's bottom shade stays, behind the column's lower lines). */
@media(max-height:560px) and (min-aspect-ratio:1/1),(min-width:641px) and (max-width:780px) and (max-height:700px){#cinema .cinema-finale-dock{display:none}#cinema[data-finale="visible"] .cinema-finale-mobile{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;padding:15px var(--cinema-inset) 18px;background:radial-gradient(ellipse at 78% 0,#1c41505c,transparent 68%),#061521;color:#f4f2eb;opacity:var(--finale-reveal,0)}#cinema .cinema-finale-mobile>.cinema-kicker{grid-column:1/-1;font-size:12px;letter-spacing:.08em}#cinema .cinema-finale-mobile a{min-height:44px;display:block;padding-top:8px;border-top:1px solid #95afbe60}#cinema .cinema-finale-mobile a>span{display:flex;justify-content:space-between;gap:8px;font:400 20px/1.15 'DM Serif Display',Georgia,serif}#cinema .cinema-finale-mobile b{font:400 15px/1.4 Manrope,system-ui,sans-serif;color:#cbdce6}#cinema .cinema-finale-mobile small{display:block;font-size:13px;line-height:1.4;margin-top:6px;color:#dae5eb}}
/* Phones: A10L's role and phrase always wrap in the band's narrow card, and the line used to end on its middle dot ("Founder ·"). There the line break
   replaces the dot (kept for screen readers); the card's height is unchanged, and Black Women on Boards keeps "Co-founder · Opening doors" on one line. */
@media(max-width:640px){#cinema .cinema-finale-stack>span:not(.cinema-finale-sep){display:block}#cinema .cinema-finale-stack>.cinema-finale-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* 641-1100 px wide frames: the column sits 10 px further right, so its label and rule keep >= 24 px from the rocket's nose (16.5 px at 1024x768). */
@media(max-width:1100px) and (min-width:641px){#cinema .cinema-finale-responsibilities{right:max(14px,calc(var(--finale-right) - 10px))}}
/* Wide desktop frames (1240 px and wider): the static list starts higher, at 18% rather than 25% (the rocket's nose stays left of it: logos >= 34 px clear; narrower frames keep 25%, where the nose is nearer),
   so the whole list with its chair lines fits above the dock on 1440x900-class frames, and Symbotic's full title on 1280x720. */
@media(min-width:1240px) and (min-height:561px){#cinema[data-frame="wide"] .cinema-finale-responsibilities[data-rotate="static"]{top:18%}}
/* Static list, tighter frames: on portrait phones the list is 14 px wider (Rocket Lab's role then sets on one line from 375 px), on 600-640 px landscape phones it starts at 31% rather than 37% (narrower ones 33%, with smaller logos); 641-1100 px frames and short
   landscape screens tighten its rhythm, and short landscape sets the role lines at 12 px with a one-line label, so every role stays inside the stage. */
@media(max-width:640px){#cinema[data-frame="tall"] .cinema-finale-responsibilities[data-rotate="static"]{left:calc(54% - 8px);right:12px}}
@media(min-width:600px) and (max-width:640px){#cinema[data-frame="wide"] .cinema-finale-responsibilities[data-rotate="static"]{top:31%}}
@media(max-width:360px){#cinema[data-frame="tall"] .cinema-finale-responsibilities[data-rotate="static"]{left:calc(56% - 6px);right:8px}}
@media(max-width:1100px) and (min-width:641px){#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list>li{padding:3px 0 4px}}
@media(max-height:560px) and (min-aspect-ratio:1/1){#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-kicker{letter-spacing:.04em}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list>li{padding:2px 0 3px}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list .cinema-boards-logo+span{font-size:12px;line-height:1.25;margin-top:3px}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list :is(.cinema-boards-role-end,.cinema-boards-duty){font-size:12px;line-height:1.25}}
@media(max-width:599px) and (max-height:560px) and (min-aspect-ratio:1/1){#cinema[data-frame="wide"] .cinema-finale-responsibilities[data-rotate="static"]{top:33%;--logo-u:13px}#cinema .cinema-finale-responsibilities[data-rotate="static"] .cinema-boards-list>li{padding:1px 0 2px}}

/* Keep the illustrative poster legible without motion; its face stays above the mobile title. */
@media(max-width:640px){#cinema[data-mode="stills"] .cinema-slate{background:linear-gradient(0deg,#030710ed 0%,#030710e6 38%,#03071033 62%,transparent 82%)}}
/* Without JavaScript the full mobile navigation remains available in document flow. */
@media(max-width:1020px){html:not(.js) body.home-page .site-header{position:relative;height:auto;background:#061521}html:not(.js) body.home-page .header-inner{height:auto;display:block;padding-block:16px}html:not(.js) body.home-page .site-nav{position:static;padding:24px 0 12px;max-height:none}html:not(.js) #cinema{padding-top:0}html:not(.js) #cinema .cinema-slate{background:linear-gradient(0deg,#030710ed 0%,#030710cc 38%,#03071022 64%,transparent 84%)}}

/* The idle display uses the same reserved row as film controls, with no copy over the face. */
#cinema .cinema-idle{display:flex;align-items:center;gap:24px;min-height:64px;padding:8px var(--cinema-inset);background:#050e17}
#cinema .cinema-idle .cinema-button{min-height:48px;flex:none}
#cinema .cinema-idle .cinema-meta{margin:0;letter-spacing:.04em}
#cinema #cinema-idle-toggle{margin-left:auto;padding:0 14px;border:1px solid #6a7b86;white-space:nowrap}
#cinema[data-mode="idle"] .cinema-controls,#cinema[data-frame][data-mode="idle"] .cinema-controls[hidden]{display:none!important}
@media(max-width:640px){#cinema .cinema-idle{min-height:108px;gap:4px 12px;flex-wrap:wrap;padding:8px 16px}#cinema .cinema-idle .cinema-meta{order:3;flex-basis:100%;font-size:12px}#cinema .cinema-idle .cinema-button{padding:12px 15px;gap:10px}#cinema #cinema-idle-toggle{padding:0 10px}}

/* Merline's name is immediately legible beside the opening portrait. The host
   retains control of the billboard cycle, image loading and film handoff. */
#cinema:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate{opacity:1;pointer-events:none;justify-content:flex-end;padding-top:24px;padding-bottom:clamp(24px,5vh,56px);background:linear-gradient(0deg,#030710e8,transparent 48%)}
#cinema:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate h2{position:relative;width:auto;height:auto;overflow:visible;clip-path:none;transition:none;font-size:clamp(54px,6.4vw,100px);line-height:.94;max-width:7ch;margin:12px 0 0;text-shadow:0 2px 24px #03071080}
#cinema:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate .cinema-deck{display:block;font-size:clamp(13px,1.1vw,16px);line-height:1.5;max-width:42ch;margin:12px 0 0;text-wrap:balance}
#cinema:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate .cinema-deck br{display:none}
@media(max-width:900px){#cinema:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate .cinema-deck{font-size:13px;max-width:36ch;margin-top:8px}}
/* On portrait phones the small caption would cross the billboard's printed name
   after the tagline returns. Keep it for assistive technology and give both names room. */
@media(max-width:640px){#cinema[data-frame="tall"]:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate{padding-bottom:8px}#cinema[data-frame="tall"]:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate .cinema-kicker{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:900px){
  #cinema:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate{padding:24px 20px;background:linear-gradient(0deg,#030710f2,transparent 38%)}
  #cinema:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate h2{font-size:clamp(32px,8.7vw,64px);line-height:1.02;max-width:none;margin-top:8px}
  #cinema:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate h2 br{display:none}
  #cinema:is([data-mode="slate"],[data-mode="idle"]) .cinema-slate .cinema-kicker{font-size:10px;letter-spacing:.14em}
}

/* Supplied marks identify the operating chapters, current boards and initiatives.
   The exact role text stays beside each board; these marks imply no investment. */
#cinema .cinema-company-constellation img{display:block;width:auto;height:28px;max-width:min(100%,108px);object-fit:contain;object-position:left center}
#cinema .cinema-company-constellation .cinema-brand-adobe{width:28px;height:28px;flex:none}
#cinema .cinema-card-roles .cinema-board-brand{display:flex;align-items:center;min-height:38px;margin-bottom:8px}
#cinema .cinema-board-brand img{display:block;width:auto;height:auto;max-width:100%;max-height:38px;object-fit:contain;object-position:left center}
#cinema .cinema-board-brand img[alt="Rocket Lab"]{width:104px}
#cinema .cinema-board-brand img[alt="Symbotic"]{width:136px}
#cinema .cinema-board-brand img[alt="TD SYNNEX"]{width:146px}
#cinema .cinema-board-brand img[alt="Agility Robotics"]{width:132px}
#cinema .cinema-initiatives li{display:block}
#cinema .cinema-initiatives img{display:block;object-fit:contain;object-position:left center;margin:0 0 10px;max-width:100%}
/* A10L's supplied dark lettering needs a paper ground; keep its colours and shape. */
#cinema .cinema-initiative-a10l{width:62px;height:56px;padding:5px;background:var(--cinema-paper)}
#cinema .cinema-initiative-bwob{width:184px;height:56px}
/* Short landscape windows keep the four exact roles in the film's safe area. */
@media(max-height:560px) and (min-aspect-ratio:1/1){
  #cinema .cinema-card-roles .cinema-sector-label,#cinema .cinema-card-roles .cinema-company-note{display:none}
  #cinema .cinema-card-roles .cinema-roles span{line-height:1.35}
}
@media(max-width:640px){
  #cinema .cinema-company-constellation img{height:25px;max-width:min(100%,88px)}
  #cinema .cinema-company-constellation .cinema-brand-adobe{width:25px;height:25px}
  #cinema .cinema-card-roles .cinema-board-brand{min-height:32px;margin-bottom:6px}
  #cinema .cinema-board-brand img{max-height:32px}
  #cinema .cinema-board-brand img[alt="Rocket Lab"]{width:86px}
  #cinema .cinema-board-brand img[alt="Symbotic"]{width:116px}
  #cinema .cinema-board-brand img[alt="TD SYNNEX"]{width:126px}
  #cinema .cinema-board-brand img[alt="Agility Robotics"]{width:114px}
  #cinema .cinema-initiative-a10l{width:52px;height:48px}
  #cinema .cinema-initiative-bwob{width:152px;height:48px}
}