/* A circular company portrait with readable, slowly orbiting company pillars. */
.sd-about .sd-about__history-visual{container-type:inline-size;isolation:isolate;aspect-ratio:1;min-height:360px;padding:0;--orbit-duration:54s}
.sd-about .sd-about__history-visual::before{content:"";position:absolute;inset:12%;border:1px solid #8dcbd85e;border-radius:50%;transform:scale(1.22);z-index:-1}
.sd-about .sd-about__history-visual::after{content:"";position:absolute;inset:24% 1%;border:1px solid #8dcbd854;border-radius:50%;transform:rotate(-28deg);z-index:-1}
.sd-about .sd-about__history-photo{position:absolute;inset:50% auto auto 50%;width:74%;height:auto;aspect-ratio:1;margin:0;transform:translate(-50%,-50%);border-radius:50%;border:8px solid #f0f8fa;box-shadow:0 18px 50px #17475914;overflow:hidden}
.sd-about .sd-about__history-photo img{object-position:50% center}
.sd-about .sd-about__history-pillars{position:absolute;inset:0;margin:0;padding:0;animation:sd-history-orbit var(--orbit-duration) linear infinite;z-index:2}
.sd-about .sd-about__history-pillars li{position:absolute;inset:50% auto auto 50%;display:block;width:0;height:0;min-height:0;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;--orbit-angle:0deg;transform:rotate(var(--orbit-angle)) translateX(calc(50cqi - 76px))}
.sd-about .sd-about__history-pillars li:nth-child(1){--orbit-angle:-45deg}
.sd-about .sd-about__history-pillars li:nth-child(2){--orbit-angle:-135deg}
.sd-about .sd-about__history-pillars li:nth-child(3){--orbit-angle:45deg}
.sd-about .sd-about__history-pillars li:nth-child(4){--orbit-angle:135deg}
/* Anchor explicitly: an RTL normal-flow block would sit left of the zero-width li. */
.sd-about__history-pillar{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;gap:9px;width:148px;min-height:70px;padding:12px 10px;border:1px solid #d6e9ee;border-radius:16px;background:#fff;box-shadow:0 8px 28px #143d5017;color:#092c45;animation:sd-history-label var(--orbit-duration) linear infinite;transform:translate(-50%,-50%) rotate(calc(-1 * var(--orbit-angle)))}
.sd-about .sd-about__history-pillars strong{font-size:12px;line-height:1.75}
.sd-about .sd-about__history-pillars svg{width:25px;height:25px;flex-basis:25px}
.sd-about__history-visual:is(:hover,:focus-within) :is(.sd-about__history-pillars,.sd-about__history-pillar){animation-play-state:paused}
.sd-about__history-visual:focus-visible{outline:2px solid #167c95;outline-offset:8px;border-radius:50%}
@keyframes sd-history-orbit{to{transform:rotate(360deg)}}
@keyframes sd-history-label{from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--orbit-angle)))}to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--orbit-angle) - 360deg))}}
@media(max-width:480px){.sd-about .sd-about__history-visual{min-height:330px}.sd-about .sd-about__history-photo{width:79%;border-width:5px}.sd-about .sd-about__history-pillars li{transform:rotate(var(--orbit-angle)) translateX(calc(50cqi - 63px))}.sd-about__history-pillar{width:122px;min-height:64px;padding:10px 8px;gap:7px;border-radius:14px}.sd-about .sd-about__history-pillars strong{font-size:10px}.sd-about .sd-about__history-pillars svg{width:21px;height:21px;flex-basis:21px}}
@media(prefers-reduced-motion:reduce){.sd-about .sd-about__history-pillars,.sd-about .sd-about__history-pillar{animation:none!important}}
@media(max-width:360px){.sd-about .sd-about__history-pillars li{transform:rotate(var(--orbit-angle)) translateX(calc(50cqi - 54px))}.sd-about__history-pillar{width:106px;gap:5px;padding:9px 6px}.sd-about .sd-about__history-pillars strong{font-size:9px}.sd-about .sd-about__history-pillars svg{width:19px;height:19px;flex-basis:19px}}

/* Narrow screens need the fleet image unobstructed; the pillars sit below it. */
@media(max-width:760px){
  .sd-about .sd-about__history-visual{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px;aspect-ratio:auto;min-height:0;padding:0}
  .sd-about .sd-about__history-visual::before,.sd-about .sd-about__history-visual::after{display:none}
  .sd-about .sd-about__history-photo{position:relative;inset:auto;width:min(100%,340px);height:auto;aspect-ratio:1;transform:none;border-width:6px}
  .sd-about .sd-about__history-pillars{position:static;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,500px);animation:none}
  .sd-about .sd-about__history-pillars li{position:static;inset:auto;width:auto;height:auto;min-height:0;max-width:none;padding:0;transform:none}
  .sd-about .sd-about__history-pillar{position:relative;inset:auto;display:flex;justify-content:flex-start;width:100%;height:100%;min-height:76px;padding:12px;transform:none;animation:none}
  .sd-about .sd-about__history-pillars strong{font-size:12px;line-height:1.5}
}