/* Approved color-circle portrait. The companies border is its only baseline. */
.hero{grid-template-columns:1.07fr 1fr;gap:44px;align-items:end;padding-bottom:0}
.hero-copy{align-self:center;padding-bottom:36px}
.hero-visual.hero-circle{position:relative;isolation:isolate;display:block;align-self:end;min-height:0;height:530px;padding:0;border-radius:0;animation:none;transform:none}
.hero-circle-disc{position:absolute;width:72%;aspect-ratio:1;left:17%;top:75px;border-radius:50%;background:var(--vermilion-500);animation:hero-disc-enter .9s cubic-bezier(.22,1,.36,1) both}
.hero-circle-orbit{position:absolute;left:10%;top:45px;width:84%;height:440px;overflow:visible;z-index:1}
.hero-circle-orbit ellipse{fill:none;stroke:var(--neutral-400);stroke-width:1;stroke-dasharray:1;animation:hero-orbit-enter 1.15s .2s cubic-bezier(.65,0,.35,1) both}
.hero-circle-photo{position:absolute;inset:0;z-index:2;animation:hero-photo-enter .85s cubic-bezier(.22,1,.36,1) both}
.hero-circle-photo img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:none;pointer-events:none;user-select:none}
.hero-circle-label{position:absolute;left:0;right:auto;top:118px;z-index:3;writing-mode:sideways-lr;direction:ltr;transform:none;white-space:nowrap;font:10px/1.65 var(--font-mono);letter-spacing:.065em;color:var(--neutral-600)}
[dir=rtl] .hero-circle-photo img{transform:scaleX(-1)}
/* Shape Arabic as a normal connected line, then rotate it down the inner edge. */
[dir=rtl] .hero-circle-label{left:auto;right:20px;width:max-content;writing-mode:horizontal-tb;font:160 12px/1.65 var(--font-body);font-synthesis:none;color:var(--neutral-600);letter-spacing:0;direction:rtl;transform-origin:100% 0;transform:rotate(-90deg)}
@keyframes hero-photo-enter{from{opacity:0;transform:translateY(20px) scale(1.025)}to{opacity:1;transform:none}}
@keyframes hero-disc-enter{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
@keyframes hero-orbit-enter{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:1050px) and (min-width:761px){.hero{gap:24px;grid-template-columns:1.05fr 1fr}.hero-visual.hero-circle{height:470px}.hero-circle-orbit{height:390px}}
@media(max-width:760px){.hero{gap:26px;padding-bottom:0}.hero-copy{padding-bottom:0}.hero-visual.hero-circle{width:min(100%,440px);height:440px;min-height:0;align-self:center;padding:0}.hero-circle-orbit{height:395px;top:35px}.hero-circle-disc{top:65px}}
@media(prefers-reduced-motion:reduce){.hero-circle-photo,.hero-circle-disc,.hero-circle-orbit ellipse{animation:none}}