/* Three professional worlds, visible from the first screen on every format. */
.hero.hero-worlds { display: block; padding: 150px 0 32px; min-height: max(820px, 100svh); }
.hero-worlds .hero-layout { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); grid-template-areas: "intro scene" "details scene"; align-items: center; min-height: 610px; column-gap: 5px; }
.hero-introduction { grid-area: intro; align-self: end; position: relative; z-index: 2; }
.hero-details { grid-area: details; align-self: start; position: relative; z-index: 2; }
.hero-worlds h1 { font-size: clamp(80px, 8.2vw, 126px); opacity: 1!important; transform: none!important; }
.hero-worlds .hero-role { margin-top: 28px; font-size: clamp(24px, 2vw, 30px); }
.hero-worlds .hero-description { max-width: 505px; font-size: 15px; line-height: 1.85; margin-top: 25px; }
.hero-worlds .hero-actions { gap: 24px; margin-top: 27px; flex-wrap: wrap; }
.hero-worlds .hero-seniority { margin-top: 21px; }

.hero-worlds .hero-grid { background-size: 70px 70px; opacity: .6; mask-image: radial-gradient(ellipse at 75% 42%, black, transparent 65%); }
.worlds-stage { grid-area: scene; position: relative; min-width: 0; height: 620px; align-self: center; margin-bottom: 0; isolation: isolate; }
.worlds-stage::before { content: ''; position: absolute; inset: 5% -15%; z-index: -1; background: radial-gradient(ellipse, #24477829 0%, #32245b10 48%, transparent 70%); pointer-events: none; transition: background 1s; }
.worlds-stage[data-world=health]::before { background: radial-gradient(ellipse, #26746b1c, #32245b10 48%, transparent 70%); }
.worlds-stage[data-world=payment]::before { background: radial-gradient(ellipse, #84563422, #32245b10 48%, transparent 70%); }
.hero-worlds .hero-sculpture { position: absolute; inset: 0 -10% 35px -5%; width: 115%; height: calc(100% - 35px); margin: 0; opacity: 1; transform: none!important; will-change: auto; }
.hero-worlds .hero-sculpture::after { display: none; }
#worlds { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: default; }
.worlds-caption { position: absolute; left: 6%; top: 2%; display: flex; flex-direction: column; gap: 5px; font: 8px/1.6 var(--mono); color: #8f9caf; letter-spacing: .06em; pointer-events: none; }
.worlds-caption b { font-weight: 400; font-size: 10px; color: #c9dbef; letter-spacing: .12em; }
.worlds-caption > span { color: #9993ae; }

.worlds-controls { position: absolute; z-index: 4; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; padding: 5px; gap: 3px; border: 1px solid #c7bdde2b; background: #10111bd9; backdrop-filter: blur(15px); border-radius: 5px; box-shadow: 0 8px 35px #0003; }
.worlds-controls button { display: flex; align-items: center; gap: 9px; padding: 12px 17px; border-radius: 3px; font-size: 11px; white-space: nowrap; color: #b2afc3; transition: background .3s,color .3s; min-height: 43px; }
.worlds-controls button > span { font: 7px var(--mono); opacity: .65; }
.worlds-controls button:hover { background: #c1b3df13; color: #ede9f6; }
.worlds-controls button[aria-pressed=true] { background: #d3d9f2; color: #151120; }
.worlds-controls button[data-world=health][aria-pressed=true] { background: #b5dcd4; }
.worlds-controls button[data-world=payment][aria-pressed=true] { background: #dfc6a6; }
.worlds-fallback { display: none; position: absolute; inset: 15% 10% 18%; align-items: center; justify-content: center; }
.no-webgl + .worlds-fallback { display: flex; }
.worlds-fallback svg { width: 100%; height: 100%; }

@media (min-width:1700px) { .hero-worlds .hero-layout { min-height: 700px; }.worlds-stage { height: 700px; }.hero-worlds h1 { font-size: 145px; } }
@media (max-width:1150px) { .hero.hero-worlds { padding-top: 135px; min-height: 820px; }.hero-worlds .hero-layout { grid-template-columns: 1.05fr 1fr; min-height: 610px; }.hero-worlds h1 { font-size: 8.7vw; }.hero-worlds .hero-role { font-size: 25px; }.hero-worlds .hero-description { font-size: 14px; }.worlds-stage { height: 560px; }.worlds-caption { top: 5%; font-size: 7px; left: 5%; }.worlds-caption b { font-size: 9px; }.worlds-controls button { font-size: 10px; gap: 7px; padding: 11px 14px; }.hero-worlds .hero-actions .button { font-size: 11px; padding: 15px 17px; gap: 18px; } }
@media (max-width:1000px) and (min-width:761px) { .hero.hero-worlds { padding-top: 120px; min-height: 780px; }.hero-worlds .hero-layout { grid-template-columns: 1.12fr .88fr; min-height: 570px; column-gap: 0; }.hero-worlds h1 { font-size: 9.4vw; }.hero-worlds .hero-role { font-size: 23px; }.hero-worlds .hero-description { font-size: 13px; }.worlds-stage { height: 470px; margin-left: -8px; }.hero-worlds .hero-sculpture { width: 125%; left: -9%; right: -16%; }.worlds-caption { top: 0; left: 3%; font-size: 6px; }.worlds-controls button { padding: 10px 12px; font-size: 9px; gap: 5px; } }
@media (max-width:760px) {
  .hero.hero-worlds { padding: 111px 0 30px; min-height: 0; }
  .hero-worlds .hero-layout { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "intro" "scene" "details"; min-height: 0; }
  .hero-worlds h1 { order: 1; font-size: clamp(56px, 14.5vw, 94px); line-height: .92; }
  .hero-worlds .name-first { font-size: inherit; }
  .hero-worlds .name-last { margin-top: 3px; }
  .hero-worlds .hero-role { order: 2; margin-top: 19px; font-size: 23px; line-height: 1.25; }
  .worlds-stage { order: 3; height: 340px; width: calc(100% + 24px); margin: 18px -12px 0; }
  .hero-worlds .hero-sculpture { inset: -15px 0 27px; width: 100%; height: calc(100% - 12px); }
  .worlds-caption { top: 4%; left: 5%; font-size: 7px; gap: 3px; }
  .worlds-caption b { font-size: 9px; }

  .worlds-controls { bottom: 0; }
  .worlds-controls button { padding: 10px 17px; font-size: 10px; gap: 8px; }
  .hero-worlds .hero-description { order: 4; font-size: 14px; line-height: 1.8; margin-top: 26px; max-width: 590px; }
  .hero-worlds .hero-seniority { order: 5; margin-top: 17px; font-size: 9px; }
  .hero-worlds .hero-actions { order: 6; margin-top: 23px; gap: 20px; }
  .hero-worlds .hero-actions .button { padding: 14px 17px; font-size: 11px; gap: 20px; }
  .hero-worlds .hero-actions .quiet-link { font-size: 11px; }



}
@media (max-width:600px) {
  .hero.hero-worlds { padding-top: 105px; }
  .hero-worlds h1 { font-size: 16vw; }
  .hero-worlds .hero-role { font-size: 21px; margin-top: 18px; }
  .worlds-stage { height: 280px; margin-top: 12px; }
  .worlds-caption { font-size: 9px; left: 5%; top: 1%; }
  .worlds-caption b { font-size: 9px; }
  .worlds-controls { padding: 3px; }
  .worlds-controls button { padding: 8px 17px; font-size: 9px; gap: 7px; min-height: 44px; }
  .worlds-controls button > span { font-size: 6px; }
  .hero-worlds .hero-description { font-size: 13px; margin-top: 24px; }
  .hero-worlds .hero-seniority { font-size: 8px; }
  .hero-worlds .hero-actions { gap: 18px; }
  .hero-worlds .hero-actions .button { padding: 14px; font-size: 10px; gap: 14px; }
  .hero-worlds .hero-actions .quiet-link { font-size: 10px; }

}
@media (max-width:360px) { .worlds-stage { height: 248px; }.hero-worlds .hero-role { font-size: 19px; }.hero-worlds .hero-description { font-size: 12px; }.worlds-controls button { padding-inline: 14px; } }
@media print { .hero.hero-worlds { min-height: 0; padding: 30px 0; }.hero-worlds .hero-layout { display: block; min-height: 0; }.worlds-stage { display:none; }.hero-worlds h1 { font-size: 65px; } }
.worlds-fallback .fallback-health,.worlds-fallback .fallback-payment { display: none; }
.worlds-stage[data-world=health] .fallback-space,.worlds-stage[data-world=payment] .fallback-space { display: none; }
.worlds-stage[data-world=health] .fallback-health,.worlds-stage[data-world=payment] .fallback-payment { display: block; }