/* The same metropolis, composed as three facets of the brand geometry. */
.hero-portrait { position:relative; isolation:isolate; align-self:center; width:100%; margin:0; z-index:2; }
.hero-portrait::before { content:''; display:block; position:absolute; inset:-18px 22px 22px -18px; z-index:-1; border:0; background:#dcded6; clip-path:polygon(0 0,57% 0,0 57%); }
.hero-portrait::after { content:''; position:absolute; inset:22px -18px -18px 22px; z-index:-1; background:#d8e2e5; clip-path:polygon(100% 46%,100% 100%,46% 100%); }
.hero-image-window { position:relative; height:auto; aspect-ratio:1 / 1.02; overflow:visible; background:transparent; }
.hero-image-window::after {
 content:''; display:block; position:absolute; inset:-32px; border:0; width:auto; height:auto; pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none'%3E%3Cpath d='M350 14H586V245M14 355V586H250' stroke='%238ca1a9' stroke-opacity='.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.reference-hero .hero-photo { position:absolute; opacity:0; pointer-events:none; }
.hero-photo-planes { position:absolute; inset:0; isolation:isolate; }
.hero-photo-planes span {
 position:absolute; inset:0; display:block; margin:0;
 background-image:linear-gradient(135deg,#c4bfb324,#bcd5e318),url('assets/finance-metropolis-v2.png');
 background-repeat:no-repeat; clip-path:var(--facet);
 filter:saturate(.62) brightness(1.2) contrast(.88);
 transform:none !important; transition:filter .65s ease;
}
.hero-photo-planes span:nth-child(1) { --facet:polygon(0 18%,18% 0,42.5% 0,42.5% 100%,0 100%); }
.hero-photo-planes span:nth-child(2) { --facet:polygon(43.2% 0,100% 0,100% 43%,43.2% 61%); }
.hero-photo-planes span:nth-child(3) { --facet:polygon(43.2% 61.8%,100% 43.8%,100% 82%,82% 100%,43.2% 100%); }
.hero-photo-planes span::after {
 content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
 background:linear-gradient(45deg,transparent 40%,#ffffff66 50%,transparent 60%);
 background-size:260% 260%;
}
@media (hover:hover) and (pointer:fine) {
 .hero-portrait:hover .hero-photo-planes span { filter:saturate(.78) brightness(1.2) contrast(.9); }
}
@media (prefers-reduced-motion:no-preference) {
 .hero-portrait.r2-arrived[data-arrival=photo] { animation:none; }
 .hero-portrait.r2-arrived .hero-photo-planes span { animation:city-assemble 1.1s cubic-bezier(.22,.7,.25,1) .12s backwards; }
 .hero-portrait.r2-arrived .hero-photo-planes span:nth-child(2) { animation-delay:.4s; }
 .hero-portrait.r2-arrived .hero-photo-planes span:nth-child(3) { animation-delay:.68s; }
 .hero-portrait.r2-arrived .hero-photo-planes span::after { animation:city-sheen 1.4s ease 1.85s both; }
 @keyframes city-assemble {
  from { opacity:0; mask-image:linear-gradient(#000 0 0); mask-size:0% 100%; mask-repeat:no-repeat; }
  to { opacity:1; mask-image:linear-gradient(#000 0 0); mask-size:100% 100%; mask-repeat:no-repeat; }
 }
 @keyframes city-sheen {
  0% { opacity:0; background-position:140% 140%; }
  25%,75% { opacity:.65; }
  100% { opacity:0; background-position:-40% -40%; }
 }
}
@media (max-width:800px) {
 .hero-portrait { width:calc(100% - 28px); margin:8px 14px 14px; }
 .hero-portrait::before { inset:-12px 16px 16px -12px; }
 .hero-portrait::after { inset:16px -12px -12px 16px; }
 .hero-image-window::after { inset:-20px; }
}