.brand-story {
  --brand-space-background: linear-gradient(180deg, rgba(7, 17, 30, .18) 0%, rgba(7, 17, 30, .24) 45%, rgba(7, 17, 30, .72) 75%, rgba(7, 17, 30, .9) 100%), url("assets/cover-background.webp") center / cover no-repeat, #07111e;
  background: var(--brand-space-background); color: #f2f5ff; padding: 64px 6% 120px; text-align: center;
}
.brand-story-label { font-size: 13px; letter-spacing: .08em; color: #bacbe3; }
.brand-story h2 { font-size: clamp(28px, 3.2vw, 46px); font-weight: 500; line-height: 1.3; letter-spacing: -.035em; margin: 20px 0 32px; }
.brand-origin { display: block; width: min(34%, 374px); height: auto; margin: 48px auto 0; }
.brand-evolution { display: block; width: min(100%, 1100px); height: auto; margin: 0 auto; overflow: visible; }
.brand-story-copy { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.85; color: #e1e9f6; text-shadow: 0 1px 12px #07111e; }
.brand-story-copy p { margin: 16px 0 0; }
.brand-mobile-labels { display: none; }
.concept.has-brand-scroll { height: 420vh; padding: 0 5%; box-sizing: border-box; }
.has-brand-scroll .brand-scroll-stage { position: sticky; top: 0; height: 100vh; isolation: isolate; }
.has-brand-scroll .concept-cards { position: absolute; inset: 0; align-items: center; width: 100%; }
.has-brand-scroll .concept-cards li { animation: none; }
.has-brand-scroll .concept-cards li:not(:first-child) { opacity: var(--other-cards, 1); }
.has-brand-scroll .concept-cards li::after { display: none; }
.has-brand-scroll .concept-cards { max-width: 1440px; }
.has-brand-scroll .concept-cards img { width: auto; max-width: 100%; max-height: 82vh; margin-inline: auto; object-fit: contain; }
.has-brand-scroll .concept-cards .concept-motion-card {
  display: block; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); margin: 0; opacity: 0; pointer-events: none;
}
.has-brand-scroll .concept-cards,
.has-brand-scroll .brand-origin,
.has-brand-scroll .gravity-origin { will-change: transform, opacity; }
.has-brand-scroll .brand-story { position: absolute; inset: 0; padding: 0; background: transparent; pointer-events: none; isolation: isolate; }
.has-brand-scroll .brand-story::before {
  content: ""; position: absolute; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); z-index: -1;
  background: var(--brand-space-background);
  clip-path: var(--space-clip, inset(50%)); opacity: var(--space-opacity, 0);
}
.has-brand-scroll .brand-origin { position: absolute; margin: 0; max-width: none; transform-origin: 0 0; }
.has-brand-scroll .brand-story-heading { position: absolute; inset: 8% 0 auto; }
.has-brand-scroll .brand-story-label { display: block; transform: translate3d(var(--title-x, 0px), var(--title-y, 0px), 0); opacity: var(--brand-label, 0); }
.has-brand-scroll .brand-story-heading h2 { opacity: var(--brand-heading, 0); }
.has-brand-scroll .brand-story h2 { margin-bottom: 0; }
.has-brand-scroll .brand-evolution { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; }
.has-brand-scroll .brand-story-copy { position: absolute; inset: auto 0 8%; width: 90%; }
.has-brand-scroll .brand-definition { opacity: var(--brand-definition, 0); }
.has-brand-scroll .brand-resolution { opacity: var(--brand-resolution, 0); }
@media (max-width: 760px) {
  .brand-story { padding: 48px 24px 80px; }
  .brand-origin { width: 58%; }
  .brand-evolution { margin-top: 16px; }
  .brand-shape-labels { display: none; }
  .brand-mobile-labels { display: grid; grid-template-columns: repeat(3, 1fr); font-size: 14px; margin: -12px 0 32px; }
  .brand-story-copy { text-align: left; font-size: 15px; }
}