.hero-cinematic{min-height:735px;isolation:isolate;overflow:hidden;position:relative}
.hero-cinematic .hero-copy{width:60%;padding:72px 0 145px;position:relative;z-index:4;pointer-events:none}
.hero-cinematic .hero-copy a{pointer-events:auto}
.hero-cinematic h1{font-size:clamp(64px,7.6vw,96px);letter-spacing:-.04em;line-height:1.04;font-weight:500;max-width:740px}
.hero-cinematic h1 em{font-style:normal;color:#f5f5f5;font-weight:350}
.hero-identity{margin-top:32px;font-size:17px;font-weight:550}
.hero-identity span{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:5px}
.hero-cinematic .hero-line{max-width:340px;font-size:15px;line-height:1.8;letter-spacing:0;margin:24px 0}
.hero-cinematic .portrait{right:2%;top:12px;width:43%;height:88%;z-index:3;opacity:1}
.hero-cinematic .portrait img{object-position:50% 12%;mask-image:linear-gradient(to right,transparent,#000 22%,#000 95%,transparent),linear-gradient(to bottom,#000 77%,transparent 100%);mask-composite:intersect}
.system-sculpture{position:absolute;inset:-35px -12% 0 29%;z-index:1;pointer-events:none}
.system-sculpture canvas{display:block;width:100%;height:100%}
.sculpture-label{position:absolute;color:#f5f5f5;font-size:10px;letter-spacing:.12em;text-transform:uppercase;right:4%;bottom:26%;writing-mode:vertical-rl}
.hero-bottom{position:absolute;bottom:28px;left:0;right:0;display:flex;justify-content:space-between;align-items:end;gap:24px;z-index:5}
.hero-bottom>span{font-size:11px;color:var(--muted);line-height:1.8;max-width:200px}
.motion-controls{display:flex;align-items:center;gap:20px}
.motion-controls button{font:inherit;font-size:11px;color:#dbdbdb;background:none;border:0;border-bottom:1px solid #6f6f6f;padding:12px 0;cursor:pointer}
.motion-controls button:hover{color:#f5f5f5;border-color:#f5f5f5}
.motion-controls button:focus-visible{outline:2px solid #f5f5f5;outline-offset:5px}
.motion-controls [data-motion]{color:#b7b7b7;border-color:transparent}
@media(max-width:800px){.hero-cinematic{min-height:730px}.hero-cinematic .hero-copy{width:65%}.hero-cinematic h1{font-size:72px}.hero-cinematic .portrait{width:49%;right:-3%}.system-sculpture{left:16%;right:-22%}.sculpture-label{right:1%}}
@media(max-width:560px){.hero-cinematic{min-height:940px}.hero-cinematic .hero-copy{width:100%;padding:32px 0 0}.hero-cinematic h1{font-size:clamp(50px,13vw,70px)}.hero-identity{margin-top:24px}.hero-cinematic .hero-line{font-size:14px;max-width:320px}.hero-cinematic .portrait{position:absolute;top:430px;right:-10%;height:440px;width:95%;margin:0;opacity:1}.system-sculpture{inset:390px -35% 20px -28%}.sculpture-label{display:none}.hero-bottom{bottom:20px;align-items:start;gap:12px}.hero-bottom>span{max-width:100px;font-size:10px}.motion-controls{gap:14px}.motion-controls button{font-size:10px;max-width:110px;text-align:left;padding:0 0 8px}.hero-cinematic .portrait img{mask-image:linear-gradient(to bottom,#000 77%,transparent 100%)}}
@media(prefers-reduced-motion:reduce){.hero-cinematic *{animation:none!important;transition:none!important}.motion-controls [data-motion]{display:none}}

.hero-cinematic .portrait{pointer-events:none}.sculpture-label{display:none}
/* A visible relationship between the work and its outcomes. */
.hero-cinematic{min-height:0;overflow:hidden}
.hero-cinematic .hero-copy{width:62%;padding:55px 0 48px;min-height:550px}
.hero-cinematic .portrait{top:5px;right:0;width:45%;height:550px}
.hero-cinematic .portrait img{mask-image:linear-gradient(to right,transparent,#000 22%,#000 95%,transparent),linear-gradient(to bottom,#000 60%,transparent 100%)}
.business-story{position:relative;z-index:5;display:grid;grid-template-columns:245px minmax(0,1fr);gap:45px;padding:30px 0 28px;border-top:1px solid #373737;background:#121212}
.story-intro h2{font-size:22px;letter-spacing:-.025em;font-weight:500;margin:0 0 20px}
.story-views{display:flex;flex-direction:column;align-items:start;gap:6px}
.story-views button,.story-caption button{font:inherit;cursor:pointer;background:none;border:0;color:#bcbcbc;text-align:left}
.story-views button{font-size:13px;padding:8px 0;border-bottom:1px solid transparent}
.story-views button[aria-pressed=true]{color:#f5f5f5;border-bottom-color:#f5f5f5}
.story-views button:hover,.story-caption button:hover{color:#fff}
.business-story button:focus-visible{outline:2px solid #f5f5f5;outline-offset:5px}
.story-intro>p{font-size:10px;line-height:1.6;color:#aeaeae;margin-top:20px}
.business-diagram{position:relative;height:230px;isolation:isolate}
.business-diagram svg{position:absolute;width:100%;height:100%;inset:0;overflow:visible}
.flow-paths{stroke:#747474;stroke-width:1.2;vector-effect:non-scaling-stroke}
.flow-paths path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1) .35s}
.connected .flow-paths path{stroke-dashoffset:0}
.flow-inputs{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:center}
.flow-inputs span{background:#1d1d1d;border:1px solid #434343;padding:12px 3px;font-size:12px;transition:transform .8s cubic-bezier(.16,1,.3,1),border-color .8s;transform:translateY(10px)}
.flow-inputs span:nth-child(even){transform:translateY(27px)}
.connected .flow-inputs span{transform:translateY(0);border-color:#838383}
.flow-hub,.flow-result{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center;background:#121212}
.flow-hub{top:123px;color:#f5f5f5;border:1px solid #808080;font-size:13px;padding:11px 20px}
.flow-result{top:199px;font-size:13px;padding:6px 16px;color:#ececec}
.flow-signals{stroke:#f5f5f5;stroke-width:2;stroke-dasharray:.025 .975;stroke-dashoffset:1;opacity:0}
.connected .flow-signals{opacity:1;animation:flow-travel 5s linear 1.4s infinite}
.motion-paused .flow-signals{animation-play-state:paused}
.story-caption{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-top:14px}
.story-caption p{max-width:330px;color:#bcbcbc;font-size:12px;line-height:1.6;margin:0}
.story-caption>div{display:flex;gap:14px;flex-shrink:0}
.story-caption button{font-size:10px;padding:3px 0;border-bottom:1px solid #585858}
@keyframes flow-travel{0%{stroke-dashoffset:1;opacity:0}10%,75%{opacity:1}90%,100%{stroke-dashoffset:0;opacity:0}}
@media(max-width:1000px){.business-story{grid-template-columns:200px minmax(0,1fr);gap:24px}.story-caption{flex-direction:column}.hero-cinematic .hero-copy{min-height:550px}}
@media(max-width:700px){.business-story{grid-template-columns:1fr;gap:20px}.story-views{flex-direction:row;align-items:stretch;gap:18px}.story-views button{font-size:12px;line-height:1.5;flex:1}.story-intro>p{margin:14px 0 0}.story-caption{flex-direction:row}.story-caption p{max-width:55%}}
@media(max-width:560px){.hero-cinematic .hero-copy{width:100%;padding:32px 0 20px;min-height:0}.hero-cinematic .portrait{position:relative;top:auto;right:auto;width:100%;height:330px;margin:0}.hero-cinematic .portrait img{mask-image:linear-gradient(to bottom,#000 65%,transparent 100%)}.business-story{padding-top:24px}.story-intro h2{font-size:22px}.flow-inputs{gap:5px}.flow-inputs span{font-size:11px;padding:12px 1px}.flow-hub{font-size:12px;padding:11px 15px}.flow-result{font-size:12px}.story-caption{flex-direction:column}.story-caption p{max-width:100%}.story-caption button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.flow-paths path{stroke-dashoffset:0}.flow-inputs span{transform:none!important}.flow-signals{display:none}.story-caption [data-motion]{display:none}}
.hero-cinematic{display:block}.business-story{width:100%;box-sizing:border-box}

.story-caption button{font-size:12px;min-height:36px}.story-intro>p{font-size:12px}.hero-cinematic .hero-line{max-width:395px}.hero-cinematic .hero-copy{min-height:560px}.hero-cinematic .portrait{height:560px}@media(max-width:560px){.hero-cinematic .hero-copy{min-height:0}.hero-cinematic .portrait{height:300px}.story-caption button{min-height:44px}.story-views button{font-size:13px}.flow-inputs span{font-size:12px}}

/* Monochrome contrast for the diagram focal point. */
.flow-hub{background:#f5f5f5;color:#111;border-color:#f5f5f5}.story-views button[aria-pressed=true]{color:#fff;border-bottom-color:#fff}.hero-cinematic h1 em{color:#fff}

/* Highlight the final word with a white underlay. */
.hero-cinematic h1 em{display:inline-block;color:#111;background:#fff;padding:0 .1em .055em;line-height:1;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* An image-registered silhouette trace, without moving the photograph. */
.hero-cinematic .portrait img{object-position:50% 12%;transform:none;animation:none;transition:none;mask-image:linear-gradient(to right,transparent,#000 24%,#000 86%,transparent),linear-gradient(to bottom,#000 56%,transparent 100%);mask-composite:intersect}
.portrait-trace{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke:#fff;stroke-width:1.3;opacity:.8}
.portrait-trace path{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:.085 .915;animation:silhouette-travel 12s linear infinite}
@keyframes silhouette-travel{0%{stroke-dashoffset:1;opacity:0}8%,88%{opacity:.85}100%{stroke-dashoffset:0;opacity:0}}
.trace-paused .portrait-trace path{animation-play-state:paused}
.portrait-motion{position:absolute;bottom:12px;right:8px;z-index:2;pointer-events:auto;background:#111;color:#ddd;border:1px solid #555;padding:8px 10px;min-height:36px;font:inherit;font-size:11px;cursor:pointer}
.portrait-motion:hover{background:#fff;color:#111}
@media(max-width:560px){.hero-cinematic .portrait img{mask-image:linear-gradient(to bottom,#000 62%,transparent 100%)}.portrait-motion{min-height:44px}}
@media(prefers-reduced-motion:reduce){.portrait-trace,.portrait-motion{display:none}}