/* ZODIAC — the life of aluminium */
.circularity { padding: clamp(64px, 8vw, 110px) 0 48px; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, #25352b 0, #152019 42%, #0e1412 78%); border-top: 1px solid var(--line); }
.circularity__heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.circularity__heading h2 { font-size: clamp(2.9rem, 6.7vw, 5.3rem); line-height: 1.02; letter-spacing: -.055em; margin-top: 19px; }
.circularity__heading em { font-style: normal; color: var(--green-deep); }
.circularity__heading > p { max-width: 300px; padding-bottom: 5px; color: var(--muted); font-size: .95rem; line-height: 1.8; }
.circularity__scene { position: relative; aspect-ratio: 12 / 5; isolation: isolate; margin-top: 20px; }
.circularity__canvas, .circularity__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.circularity__canvas { opacity: 0; }
.circularity.is-ready .circularity__canvas { opacity: 1; }
.circularity.is-ready .circularity__fallback { visibility: hidden; }
.circularity__labels { position: absolute; inset: auto 0 7%; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: .65rem; letter-spacing: .1em; color: #b4c1b8; text-transform: uppercase; }
.circularity__signature { position: absolute; right: 0; bottom: 0; font-size: .54rem; letter-spacing: .17em; color: #728678; }
.circularity__caption { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0 32px; }
.circularity__chapter { color: var(--green-deep); font-size: .65rem; letter-spacing: .16em; display: block; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.circularity__caption h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing: -.025em; }
.circularity__caption p { color: var(--muted); font-size: .86rem; margin-top: 9px; min-height: 1.6em; }
.circularity__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.circularity__steps li { position: relative; text-align: left; padding: 18px 0 6px; font-size: .82rem; color: var(--muted); border-top: 1px solid #ffffff25; }
.circularity__steps li > span { font-size: .65rem; margin-right: 11px; color: var(--faint); }
.circularity__steps li > i { position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--green-deep); transform: scaleX(var(--stage-progress, 0)); transform-origin: left; }
.circularity__steps li[aria-current="step"], .circularity__steps li[aria-current="step"] > span { color: var(--green-deep); }
.circularity__foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; font-size: .75rem; color: var(--faint); }
.circularity__foot a { color: var(--green-deep); }
.circularity__foot a > span { margin-left: 10px; }
.circularity [hidden] { display: none; }
@media (max-width: 640px) {
  .circularity__heading { display: block; }
  .circularity__heading > p { margin-top: 22px; font-size: .86rem; }
  .circularity__scene { aspect-ratio: 1 / 1.05; margin-inline: -12px; margin-top: 0; }
  .circularity__fallback { object-fit: contain; }
  .circularity__labels { display: block; inset: 0; font-size: .52rem; letter-spacing: .025em; }
  .circularity__labels > span { position: absolute; width: 48%; top: 91%; }
  .circularity__labels > span:first-child { top: 47%; left: 26%; }
  .circularity__labels > span:nth-child(2) { left: 0; }
  .circularity__labels > span:last-child { right: 0; }
  .circularity__signature { font-size: .44rem; right: 12px; }
  .circularity__caption { padding-top: 24px; align-items: flex-start; }
  .circularity__caption p { min-height: 4.8em; font-size: .8rem; }
  .circularity__steps { gap: 12px; }
  .circularity__steps li { font-size: .7rem; }
  .circularity__steps li > span { display: block; margin-bottom: 5px; }
  .circularity__foot { flex-direction: column; margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .circularity *, .circularity *::after { transition: none !important; } }