.cc_llcvgyda_hX2do5y5MH .brand-story-hero {
  --brand-story-hero-pad-top: 3rem;
  position: relative;
  width: 100%;
  /* clip, not hidden: hidden would make the section a scroll container and
     the image's position: sticky would stick to it instead of the page. */
  overflow: clip;
  padding: var(--brand-story-hero-pad-top) clamp(16px, 4.83vw, 32px) 100px;
}

/* flow-root: the JS-set margin-bottom on the wordmark row must grow/shrink
   the stage's own content box (that's where the image's sticky travel
   stops). Without a new block formatting context it would collapse
   through into the stage's opposite margin and the two would cancel. */
.cc_llcvgyda_hX2do5y5MH .brand-story-hero__stage {
  position: relative;
  display: flow-root;
}

/* Sticks at its resting offset from the section top, so it starts holding
   still the moment the section's top edge reaches the top of the screen. */
.cc_llcvgyda_hX2do5y5MH .brand-story-hero__media {
  position: sticky;
  top: var(--brand-story-hero-pad-top);
  z-index: 2;
  width: clamp(260px, 30vw, 480px);
  margin: 0 auto 3rem;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.cc_llcvgyda_hX2do5y5MH .brand-story-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full-width row the wordmark is fitted against — kept separate from the
   wordmark itself so the wordmark's own box (what devtools highlights)
   shrink-wraps tightly to its glyphs instead of the full row width.
   No text-align/centering here: the ink is positioned edge-to-edge via an
   explicit negative margin-left computed in JS (see index.tsx), so it isn't
   left to a centering algorithm's handling of that negative margin. */
.cc_llcvgyda_hX2do5y5MH .brand-story-hero__wordmark-row {
  position: relative;
  z-index: 1;
  width: 100%;
}

.cc_llcvgyda_hX2do5y5MH .brand-story-hero__wordmark {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: clamp(4rem, 15vw, 14rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--yxsK6O1M8R, #0a0a0a);
}

@media (max-width: 1023px) {
  .cc_llcvgyda_hX2do5y5MH .brand-story-hero {
    --brand-story-hero-pad-top: 2rem;
  }

  .cc_llcvgyda_hX2do5y5MH .brand-story-hero__media {
    width: clamp(190px, 60vw, 300px);
    margin-bottom: 2rem;
  }

  .cc_llcvgyda_hX2do5y5MH .brand-story-hero__wordmark {
    font-size: clamp(2.75rem, 18vw, 6rem);
  }
}