.homepage-hero {
    --color-focus: var(--color-focus-inverse);
    --hero-gap: clamp(var(--space-8), 4.444444vw, var(--space-16));
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-block-size: clamp(40rem, 62.5vw, 56.25rem);
    padding-block: clamp(10rem, 21.180556vw, 19.0625rem) var(--section-padding-block);
    background: var(--color-brand-background);
    color: var(--color-on-accent);
}
.homepage-hero__background { position: absolute; z-index: -1; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; }
.homepage-hero__brand { position: relative; container-type: inline-size; inline-size: min(100%, var(--container-width)); margin-inline: auto; }
.homepage-hero__wordmark { position: relative; inline-size: 100%; block-size: auto; aspect-ratio: 1440 / 171; }
.homepage-hero__orbit { position: absolute; inset-inline-start: 14.722222%; inset-block-start: -9.722222cqw; inline-size: 70.196944%; aspect-ratio: 1010.836 / 322.408; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.homepage-hero__ellipse { position: relative; inline-size: 98.5323%; aspect-ratio: 996 / 257; transform: rotate(3.8deg) scaleY(-1); }
/* The image and motion path share the same box, scale and rotation.
   Radii follow the SVG stroke center: (497.5, 128) in its 996 × 257 viewBox. */
.homepage-hero__orbit-image { inline-size: 100%; block-size: auto; }
.homepage-hero__point {
    position: absolute;
    inset: 0 auto auto 0;
    inline-size: 1.305221%;
    aspect-ratio: 1;
    border-radius: var(--radius-round);
    background: var(--color-on-accent);
    offset-path: ellipse(49.949799% 49.805447%);
    offset-anchor: center;
    offset-distance: 9%;
    animation: whiteway-hero-point var(--dur-orbit) linear infinite;
    pointer-events: none;
}
.homepage-hero__content { position: relative; display: grid; justify-items: center; gap: var(--hero-gap); margin-block-start: var(--hero-gap); text-align: center; }
.homepage-hero__copy { display: grid; gap: 1.4375rem; inline-size: 100%; }
.homepage-hero__description { margin: 0; }
@media (prefers-reduced-motion: reduce) { .homepage-hero__point { animation: none; } }

@keyframes whiteway-hero-point { from { offset-distance: 9%; } to { offset-distance: 109%; } }